/* home-premium.css is loaded via a direct before this file in every page's (same effective cascade position as the old @import url("/assets/styles.css") chain it used to pull in) - do not re-add an @import here, it re-introduces a serial render-blocking hop. */ :root { --calc-page-width: min(1280px, calc(100% - 40px)); --calc-card: var(--color-surface); --calc-card-strong: var(--color-background-primary); --calc-border: var(--color-surface-border); --calc-text: var(--color-text-primary); --calc-muted: var(--color-text-secondary); --calc-soft: var(--color-text-muted); } body.layout-premium-page[class*="calc-page-"] { margin: 0; min-height: 100vh; --calc-accent: var(--color-brand-electric); --calc-accent-deep: var(--color-brand-electric-deep); color: var(--calc-text); background: var(--color-background-primary); font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: light; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; display: flex; flex-direction: column; } body.layout-premium-page[class*="calc-page-"] .prototype-page { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; } body.layout-premium-page[class*="calc-page-"] .page-shell { position: relative; width: var(--calc-page-width); margin: 0 auto; padding: 16px 0 0; flex: 1 0 auto; display: flex; flex-direction: column; } /* Accent de categorie par theme (DESIGN.md, "Couleurs de categorie") : un seul accent par page, jamais un degrade a deux tons - le second accent (--calc-accent-2) est retire du systeme. Le selecteur reprend [class*="calc-page-"] (verifie par test reel avec Playwright : sans lui, la specificite de la regle de base ci-dessus, 0-2-0, battait toujours ces blocs a 0-1-0 et --calc-accent restait bleu sur toutes les pages, quel que soit le theme - bug present avant cette refonte, corrige ici). */ body.calc-theme-finance[class*="calc-page-"], body.calc-theme-finances[class*="calc-page-"], body.calc-theme-quotidien[class*="calc-page-"] { --calc-accent: var(--color-category-indigo); --calc-accent-deep: var(--color-category-indigo-deep); } body.calc-theme-transport[class*="calc-page-"] { --calc-accent: var(--color-category-cyan); --calc-accent-deep: var(--color-category-cyan-deep); } body.calc-theme-family[class*="calc-page-"], body.calc-theme-famille[class*="calc-page-"] { --calc-accent: var(--color-category-pink); --calc-accent-deep: var(--color-category-pink-deep); } body.calc-theme-maison[class*="calc-page-"] { --calc-accent: var(--color-category-amber); --calc-accent-deep: var(--color-category-amber-deep); } body.calc-theme-sante[class*="calc-page-"] { --calc-accent: var(--color-category-emerald); --calc-accent-deep: var(--color-category-emerald-deep); } body.calc-theme-animaux[class*="calc-page-"] { --calc-accent: var(--color-category-teal); --calc-accent-deep: var(--color-category-teal-deep); } a { color: inherit; } img { display: block; max-width: 100%; } .prototype-topnav { box-sizing: border-box; position: sticky; top: 0; z-index: 70; width: 100%; min-height: 52px; margin: 0 0 18px; padding: 8px 18px; border: 1px solid var(--color-surface-border); border-radius: 16px; background: var(--color-surface); box-shadow: none; } .prototype-topnav.calculator-topnav, .prototype-topnav.calc-topnav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } .prototype-topnav-inner { display: contents; width: 100%; min-height: 100%; } .topnav-left { display: flex; align-items: center; min-width: 0; } .topnav-header-row { display: flex; align-items: center; min-width: 0; } .prototype-topnav .logo, .prototype-topnav .brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text-primary); font-weight: 800; letter-spacing: -0.02em; } .prototype-topnav .logo img, .prototype-topnav .brand-link img { width: 36px; height: 36px; border-radius: 9px; box-shadow: none; object-fit: contain; } .brand-word--light { color: var(--color-text-primary); } .brand-word--accent { /* Ancien texte en degrade (bleu -> violet -> cyan) retire : DESIGN.md interdit le gradient-text, y compris sur le logo. Un seul aplat de la couleur d'action unique du site. */ color: var(--color-brand-electric); } .topnav-panel { min-width: 0; } .prototype-topnav.calculator-topnav .topnav-actions--spacer, .prototype-topnav.calc-topnav .topnav-actions--spacer { min-width: 98px; } .prototype-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; line-height: 1; min-height: 100%; } .prototype-nav > a, .prototype-nav-trigger, .topnav-link, .topnav-cta { position: relative; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-text-secondary); font-size: 0.9rem; font-weight: 600; transition: color 180ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); } .prototype-nav > a::before, .prototype-nav-trigger::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--nav-dot, var(--color-text-muted)); } .prototype-nav > a:nth-child(1) { --nav-dot: var(--color-category-cyan-deep); } .prototype-nav-item--themes .prototype-nav-trigger { --nav-dot: var(--color-category-amber-deep); } .prototype-nav-item--guides .prototype-nav-trigger { --nav-dot: var(--color-category-indigo-deep); } /* Bug d'accessibilite systeme decouvert (page nav) et corrige en Phase 10, generalise ici en Phase 11 au niveau du composant .prototype-nav/.prototype-nav-trigger. Audit complet effectue en Phase 11 (17 regles ":focus-visible { ... outline: none }" au total sur les deux fichiers CSS partages) : ce composant nav est le seul ou "outline: none" n'etait accompagne d'AUCUN indicateur visible de remplacement (le texte changeait de couleur uniquement sur :hover, pas sur :focus-visible avant ce correctif). 6 autres composants partagent un souci apparente mais distinct et non corrige ici (hors mandat de cette phase, qui portait sur le bug precis identifie en Phase 10) : .hero-cta, .home-nav a, .cookie-banner-links a, .cookie-btn et .member-secondary-button ne changent qu'un `transform: translateY()` de 1-4px sur :focus-visible, sans couleur/bordure/ombre - un indicateur nettement plus faible, potentiellement insuffisant, documente dans le livrable de cette phase comme un chantier distinct a part entiere (.hero-cta notamment est le CTA principal de 160+ pages). Corrige ici au niveau du composant partage, pas par page : :hover et :focus-visible sont desormais separes - :hover ne change que la couleur du texte (comportement inchange), :focus-visible recoit un vrai contour visible via --nav-focus-color. Ce token vaut --brand-transform (cyan accessible) par defaut - correct sur les 160+ headers actuels, restes clairs - et est redefini uniquement dans le scope .visual-identity-v1 .prototype-topnav (voir plus bas) pour passer au cyan plein sur fond marine, ou son contraste est reellement suffisant (verifie Phase 10 : 6.98:1) contrairement a un contour fin sur fond clair (1.81:1, insuffisant). Le composant gere son propre contexte, aucun hack par page. */ :root { --nav-focus-color: var(--brand-transform); } .prototype-nav > a:hover, .prototype-nav-trigger:hover { color: var(--color-brand-electric); } .prototype-nav > a:focus-visible, .prototype-nav-trigger:focus-visible { color: var(--color-brand-electric); outline: 2px solid var(--nav-focus-color); outline-offset: 2px; } .prototype-nav-item { position: relative; } .prototype-nav-trigger { padding: 0; border: 0; background: transparent; cursor: pointer; } .prototype-subnav { position: absolute; top: calc(100% + 12px); left: 0; display: grid; gap: 2px; min-width: 240px; padding: 10px; border: 1px solid var(--color-surface-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 180ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), transform 180ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); } .prototype-nav-item:hover .prototype-subnav, .prototype-nav-item:focus-within .prototype-subnav { opacity: 1; transform: translateY(0); pointer-events: auto; } .prototype-subnav a { display: block; padding: 10px 12px; border-radius: 14px; color: var(--calc-text); text-decoration: none; font-size: 0.94rem; font-weight: 600; } .prototype-subnav a:hover, .prototype-subnav a:focus-visible { background: rgba(37, 99, 235, 0.08); outline: none; } .topnav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; line-height: 1; min-height: 100%; } .topnav-link, .topnav-cta, .hero-cta, .covo-cta-button, .result-cta, .input-footer { box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; text-decoration: none; font: inherit; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; } .topnav-link { color: var(--color-text-primary); border: 1px solid var(--color-surface-border); background: var(--color-surface); box-shadow: none; } .topnav-cta, .hero-cta, .covo-cta-button, .result-cta { /* DESIGN.md, Buttons : le bouton d'action principal utilise le rectangle a coins doux ({rounded.sm}), pas la pilule, et jamais de degrade. La pilule (999px) heritee du bloc .topnav-link/.hero-cta partage ci-dessus est corrigee ici specifiquement pour ces boutons d'action - .topnav-link (secondaire) garde la pilule car ce n'est pas une action principale. */ border-radius: var(--radius-sm); background: var(--color-brand-electric); color: #fff; box-shadow: none; } .topnav-link:hover, .topnav-link:focus-visible { background: var(--color-brand-soft); border-color: var(--color-brand-electric); outline: none; } .topnav-cta:hover, .topnav-cta:focus-visible, .hero-cta:hover, .hero-cta:focus-visible, .covo-cta-button:hover, .covo-cta-button:focus-visible, .result-cta:hover, .result-cta:focus-visible { background: var(--color-brand-electric-deep); box-shadow: var(--shadow-soft); outline: none; } .hero-trust.hero-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--color-text-muted); font-size: 0.88rem; } .hero-trust.hero-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; } .hero-large.calc-hero-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: 32px; align-items: center; margin-top: 0; padding: 12px 0 18px; } .hero-content { padding: 24px 0 18px; } /* Le fond suit toujours la couleur de categorie de la page (color-mix sur --calc-accent), mais le texte utilise sa variante -deep : plusieurs couleurs de categorie (cyan, rose...) sont trop claires pour rester lisibles en texte direct sur un fond presque blanc (AA). */ .hero-kicker, .section-kicker, .card-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--calc-accent, var(--color-brand-electric)) 12%, var(--color-surface)); color: var(--calc-accent-deep, var(--color-brand-electric-deep)); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .hero-large h1 { /* DESIGN.md v3, Typography > Display : echelle resserree (etait clamp(2.8rem,5.2vw,5rem)) - un audit reel a mesure que l'ancien H1 (4 lignes + badge + sous-titre + CTA + reassurance + carte demo) repoussait systematiquement le calculateur sous la ligne de flottaison a 1280x900. */ margin: 0; max-width: 16ch; color: var(--color-text-primary); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; } .hero-subtitle { max-width: 46rem; margin: 18px 0 0; color: var(--calc-muted); font-size: 1.04rem; line-height: 1.72; } .hero-cta { margin-top: 24px; } .hero-reassurance { margin: 12px 0 0; color: var(--calc-muted); font-size: 0.92rem; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-surface-border); color: var(--color-text-secondary); font-size: 0.88rem; font-weight: 700; box-shadow: none; } .hero-visual { position: relative; min-height: 560px; } .hero-large .hero-visual { display: block; } .hero-image { width: 100%; height: 560px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-surface-border); box-shadow: var(--shadow-soft); } /* DESIGN.md v3 : plus de degrade radial ni de texture de grille decorative sous le badge - ancien "carte mockup flottante" retire. Le panneau est un support sobre, pas un decor. */ .hero-icon-panel { position: relative; width: 100%; height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-surface-border); background: var(--color-surface); box-shadow: var(--shadow-soft); } .hero-icon-panel-badge { position: relative; z-index: 1; display: grid; place-items: center; width: 128px; height: 128px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--calc-accent, var(--color-brand-electric)) 12%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--calc-accent, var(--color-brand-electric)) 30%, var(--color-surface-border)); box-shadow: none; } .hero-icon-panel-badge svg { width: 64px; height: 64px; color: var(--calc-accent-deep, var(--color-brand-electric-deep)); } .hero-icon-panel-label { position: relative; z-index: 1; color: var(--color-text-secondary); font-size: 0.92rem; text-align: center; max-width: 26ch; line-height: 1.6; } .section-block, .calculator-intro, .calculator-workspace, .explanation-section, .benefits-section, .related-calculators-section, .calculator-faq-section, .final-cta-section { width: var(--calc-page-width); margin: 68px auto 0; } /* DESIGN.md v3 : carte standard - plus de verre translucide/backdrop-filter, un aplat de surface avec bordure fine et une ombre discrete (voir "Elevation & Depth"). */ .glass-card, .calculator-card, .premium-card, .covo-cta-card { background: var(--color-surface); border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); backdrop-filter: none; } .section-head { margin-bottom: 18px; } .section-head h2, .seo-inline-card h2, .insight-card h3, .faq-card summary, .covo-cta-card h2, .footer-columns h3, .calculator-section .section-head h2, .result-head h3 { margin: 0; color: var(--color-text-primary); letter-spacing: -0.02em; font-weight: 800; } .section-head h2, .seo-inline-card h2, .covo-cta-card h2 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1.08; } .section-head p, .seo-inline-card > p:not(.section-kicker), .covo-cta-card > p, .faq-card p, .tool-card p, .insight-card p, .footer-brand p, .footer-bottom p, .calculator-section .section-head p { margin: 0; color: var(--calc-muted); line-height: 1.7; font-size: 0.98rem; } .seo-inline-section, .recommendations-section, .linked-tools-section, .faq-section, .covo-cta-section, .calculator-section, .calculator-workspace, .calculator-intro, .explanation-section, .benefits-section, .related-calculators-section, .calculator-faq-section, .final-cta-section { width: var(--calc-page-width); margin-left: auto; margin-right: auto; } .seo-inline-card { padding: 0; display: grid; gap: 18px; background: transparent; border: 0; box-shadow: none; } .insights-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .insight-card { padding: 24px 22px 22px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-surface-border); position: relative; overflow: hidden; } /* La barre de tete degradee a d'abord ete remplacee par un aplat uni, puis retiree completement (detecteur Impeccable, "side-tab" : une bordure/bande coloree sur un bord de carte est l'un des tics visuels les plus reconnaissables d'une interface generee par IA). Ces quatre cartes sont de simples blocs de reassurance, pas des categories du site : elles n'ont pas besoin d'un codage couleur individuel pour rester lisibles - la hierarchie typographique suffit, comme sur .tool-card et .piliers-card ailleurs sur cette meme page. */ .tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tools-grid--square { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tool-card { display: grid; gap: 10px; align-content: start; min-height: 170px; padding: 18px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-surface-border); text-decoration: none; box-shadow: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .tool-card--square { min-height: 108px; padding: 18px 18px 16px; border-radius: 18px; position: relative; } .tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); outline: none; border-color: var(--calc-accent, var(--color-brand-electric)); box-shadow: var(--shadow-soft); } .tool-card--square .tool-icon { width: 28px; height: 28px; border-radius: 9px; } .tool-card--square h3 { margin: 0; font-size: 1.02rem; line-height: 1.15; letter-spacing: -0.03em; } .tool-card--square p { margin: 0; color: var(--calc-muted); line-height: 1.55; font-size: 0.86rem; padding-right: 18px; } .tool-card--square::after { content: "›"; position: absolute; right: 14px; bottom: 12px; color: var(--color-text-muted); font-size: 1.2rem; line-height: 1; } /* DESIGN.md, Shapes > Systeme d'icones : "Jamais dans un carre/cercle de fond colore sans fonction" - le fond .color-brand-soft et le border-radius formaient exactement ce carre decoratif. Icone conservee simple, en currentColor via --calc-accent (audit UI/UX, D5). */ .tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--calc-accent, var(--color-brand-electric)); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; } .tool-icon svg { width: 16px; height: 16px; } .tool-card--square .tool-icon svg { width: 14px; height: 14px; } .faq-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: transparent; border: 0; box-shadow: none; } .faq-card details { border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-surface-border); box-shadow: none; overflow: clip; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .faq-card details:hover { border-color: color-mix(in srgb, var(--calc-accent, var(--color-brand-electric)) 30%, var(--color-surface-border)); box-shadow: var(--shadow-soft); } .faq-card summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; padding: 18px 20px; cursor: pointer; } .faq-card summary::-webkit-details-marker { display: none; } .faq-card p { padding: 0 20px 18px; } .covo-cta-section { margin-top: 66px; } .covo-cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 24px; } .covo-cta-copy { display: grid; gap: 12px; } .covo-cta-button, .result-cta { min-width: 160px; } .calculator-grid { display: grid; /* Result panel gets slightly more room than the form (~54/46 rather than the previous ~52/48), with sane minimums so neither column gets cramped between breakpoints. */ grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1fr); gap: 18px; align-items: start; } .calculator-form-card, .calculator-card, .result-card { position: relative; } .calculator-form-card, .result-card { padding: 28px; } .calculator-form { display: grid; gap: 18px; } .input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 0; } .input-label-group { display: grid; gap: 6px; } .input-label-group small { color: var(--calc-muted); font-size: 0.84rem; line-height: 1.4; max-width: 46ch; } .input-control { display: inline-flex; align-items: stretch; min-height: 54px; min-width: 180px; border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--color-surface-border); background: var(--color-background-primary); box-shadow: none; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .input-control:hover { border-color: color-mix(in srgb, var(--calc-accent) 40%, var(--color-surface-border)); background: var(--color-surface); } .input-control:focus-within { border-color: var(--calc-accent-deep, var(--color-brand-electric-deep)); background: var(--color-surface); box-shadow: 0 0 0 4px var(--color-brand-soft); } .input-control input:focus-visible, .input-control select:focus-visible { outline: none; } /* Disabled fields must look unmistakably inactive. */ .input-control:has(:disabled) { opacity: 0.55; } .input-control:has(:disabled) input, .input-control:has(:disabled) select { cursor: not-allowed; } /* No radio field exists in the registry today, but style it defensively so a future one matches the rest of the system with no extra work. */ .input-control input[type="radio"] { width: 22px; height: 22px; accent-color: var(--calc-accent-deep, var(--color-brand-electric-deep)); } .input-control input, .input-control select { flex: 1 1 auto; min-width: 0; padding: 0 16px; border: 0; background: transparent; color: var(--color-text-primary); font: inherit; font-size: 0.98rem; font-weight: 700; outline: none; } /* body is color-scheme: light (see the base rule above), so the native