/* =================================================================== REPUTAGUARD — Feuille de style principale Conforme à CHARTE_GRAPHIQUE_REPUTAGUARD_V2.md Navy #101936 / #1A3A52 — Or #C9A961 / #E7D7AA — Encre #17212B Titres: Montserrat 600-700 — Texte: Inter 400-500 Polices chargées via Google Fonts (voir de chaque page HTML). =================================================================== */ :root{ --navy-950:#101936; --navy-800:#1A3A52; --gold-500:#C9A961; --gold-200:#E7D7AA; --white:#FFFFFF; --ink-900:#17212B; --slate-600:#52616B; --mist-100:#EEF2F4; --state-ok:#237A57; --state-info:#3273B8; --state-warn:#B7791F; --state-high:#B5473C; --state-hold:#7A294A; --font-display:'Montserrat', 'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif; --font-body:'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --container-max:1280px; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px; --space-8:64px; --space-10:80px; --space-12:96px; --radius-md:14px; --radius-lg:18px; --shadow-soft:0 1px 2px rgba(16,25,54,.06), 0 8px 24px -12px rgba(16,25,54,.12); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } body{ margin:0; font-family:var(--font-body); font-weight:400; color:var(--ink-900); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:700;color:var(--navy-950);margin:0;letter-spacing:-0.01em;} h2{font-weight:600;} h3{font-weight:600;} p{margin:0;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;} .container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-3);} @media (min-width:768px){.container{padding:0 var(--space-5);}} .eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-800); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-500);display:inline-block;} .section{padding:var(--space-10) 0;} @media (min-width:1024px){.section{padding:var(--space-12) 0;}} .section-mist{background:var(--mist-100);} .section-head{max-width:680px;margin-bottom:var(--space-6);} .section-head h2{font-size:clamp(28px,4vw,36px);line-height:1.15;margin-top:var(--space-2);} .section-head p{color:var(--slate-600);font-size:17px;margin-top:var(--space-2);} .center{text-align:center;margin-left:auto;margin-right:auto;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);font-weight:600;font-size:15px; padding:14px 26px;border-radius:10px;border:1px solid transparent; cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease; line-height:1; } .btn:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--navy-950);color:var(--white);} .btn-primary:hover{background:var(--navy-800);box-shadow:var(--shadow-soft);transform:translateY(-1px);} .btn-gold{background:var(--gold-500);color:var(--navy-950);} .btn-gold:hover{background:#bd9a53;transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);} .btn-ghost:hover{border-color:var(--white);transform:translateY(-1px);} .btn-outline{background:transparent;color:var(--navy-950);border-color:var(--navy-950);} .btn-outline:hover{background:var(--navy-950);color:var(--white);transform:translateY(-1px);} .btn-block{width:100%;} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid rgba(16,25,54,.08); } .site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand img{height:34px;width:auto;} .brand{display:flex;align-items:center;} .nav-links{display:none;align-items:center;gap:var(--space-4);} .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-900);position:relative;padding:6px 2px;} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold-500);transition:width .2s ease;} .nav-links a:hover::after{width:100%;} @media (min-width:960px){.nav-links{display:flex;}} .header-actions{display:flex;align-items:center;gap:var(--space-2);} .header-actions .btn{padding:11px 20px;font-size:14px;} .menu-toggle{display:inline-flex;background:none;border:none;padding:8px;cursor:pointer;} @media (min-width:960px){.menu-toggle{display:none;}} .menu-toggle svg{width:24px;height:24px;stroke:var(--navy-950);} .mobile-nav{ display:none;flex-direction:column;gap:2px; background:var(--white);border-top:1px solid rgba(16,25,54,.08); padding:var(--space-2) var(--space-3) var(--space-4); } .mobile-nav.is-open{display:flex;} .mobile-nav a{padding:12px 4px;font-size:15px;font-weight:500;border-bottom:1px solid var(--mist-100);} @media (min-width:960px){.mobile-nav{display:none !important;}} /* ---------- Hero ---------- */ .hero{ background: radial-gradient(1100px 500px at 15% -10%, rgba(201,169,97,.10), transparent 60%), var(--navy-950); color:var(--white); padding:var(--space-10) 0 var(--space-12); position:relative;overflow:hidden; } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px); } .hero .container{position:relative;} .hero-inner{max-width:760px;} .hero .eyebrow{color:var(--gold-200);} .hero .eyebrow::before{background:var(--gold-500);} .hero h1{ color:var(--white);font-size:clamp(32px,5.4vw,54px);line-height:1.1; margin-top:var(--space-3); } .hero .subtitle{ margin-top:var(--space-3);font-size:clamp(17px,2vw,19px); color:rgba(255,255,255,.78);max-width:620px;line-height:1.65; } .hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);} /* Flow diagram */ .flow{ margin-top:var(--space-10); display:grid;grid-template-columns:1fr;gap:0; border-top:1px solid rgba(255,255,255,.14); padding-top:var(--space-5); } @media (min-width:860px){.flow{grid-template-columns:repeat(5,1fr);}} .flow-step{ display:flex;align-items:center;gap:12px;padding:14px 6px;position:relative; opacity:0;transform:translateY(6px); animation:flowIn .5s ease forwards; } .flow-step:nth-child(1){animation-delay:.05s;} .flow-step:nth-child(2){animation-delay:.2s;} .flow-step:nth-child(3){animation-delay:.35s;} .flow-step:nth-child(4){animation-delay:.5s;} .flow-step:nth-child(5){animation-delay:.65s;} @keyframes flowIn{to{opacity:1;transform:translateY(0);}} .flow-num{ font-family:var(--font-display);font-weight:700;font-size:13px; color:var(--navy-950);background:var(--gold-500); width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .flow-label{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--white);} .flow-arrow{ display:none;position:absolute;right:-4px;top:50%;transform:translateY(-50%); width:16px;height:16px;color:rgba(255,255,255,.3); } @media (min-width:860px){.flow-arrow{display:block;}} .flow-step:last-child .flow-arrow{display:none;} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);} .reveal.is-visible{opacity:1;transform:translateY(0);} /* Stagger discret pour les grilles de cartes */ .grid-4 > .reveal:nth-child(1),.mini-icons > .reveal:nth-child(1),.pricing-grid > .reveal:nth-child(1){transition-delay:0s;} .grid-4 > .reveal:nth-child(2),.mini-icons > .reveal:nth-child(2),.pricing-grid > .reveal:nth-child(2){transition-delay:.08s;} .grid-4 > .reveal:nth-child(3),.mini-icons > .reveal:nth-child(3),.pricing-grid > .reveal:nth-child(3){transition-delay:.16s;} .grid-4 > .reveal:nth-child(4){transition-delay:.24s;} .steps.reveal .step-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;} .steps.reveal.is-visible .step-card:nth-child(1){transition-delay:.05s;opacity:1;transform:translateY(0);} .steps.reveal.is-visible .step-card:nth-child(2){transition-delay:.14s;opacity:1;transform:translateY(0);} .steps.reveal.is-visible .step-card:nth-child(3){transition-delay:.23s;opacity:1;transform:translateY(0);} .steps.reveal.is-visible .step-card:nth-child(4){transition-delay:.32s;opacity:1;transform:translateY(0);} .steps.reveal.is-visible .step-card:nth-child(5){transition-delay:.41s;opacity:1;transform:translateY(0);} /* ---------- Problem grid ---------- */ .grid-4{display:grid;grid-template-columns:1fr;gap:var(--space-3);} @media (min-width:640px){.grid-4{grid-template-columns:1fr 1fr;}} @media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr);}} .problem-card{ background:var(--white);border:1px solid rgba(16,25,54,.08); border-radius:var(--radius-md);padding:var(--space-4); box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .problem-card:hover{transform:translateY(-4px);border-color:rgba(16,25,54,.16);box-shadow:0 4px 8px -2px rgba(16,25,54,.08),0 16px 32px -16px rgba(16,25,54,.22);} .problem-card .icon{width:36px;height:36px;color:var(--state-high);margin-bottom:var(--space-2);transition:transform .25s ease;} .problem-card:hover .icon{transform:scale(1.08);} .problem-card h3{font-size:17px;margin-bottom:8px;} .problem-card p{color:var(--slate-600);font-size:15px;} /* ---------- Fonctionnement steps ---------- */ .steps{counter-reset:step;display:grid;grid-template-columns:1fr;gap:0;} @media (min-width:768px){.steps{grid-template-columns:repeat(5,1fr);gap:var(--space-2);}} .step-card{ position:relative;padding:var(--space-4) var(--space-3); border-top:2px solid var(--mist-100); } @media (min-width:768px){.step-card{border-top:none;border-left:2px solid var(--mist-100);}} .step-card .step-index{ font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--gold-500); letter-spacing:.06em; } .step-card h3{font-size:16.5px;margin:8px 0 6px;} .step-card p{color:var(--slate-600);font-size:14.5px;} /* ---------- Two column ---------- */ .two-col{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;} @media (min-width:960px){.two-col{grid-template-columns:1fr 1fr;}} .check-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3);} .check-item{display:flex;gap:14px;align-items:flex-start;} .check-item .dot{ flex-shrink:0;width:22px;height:22px;border-radius:50%; background:var(--navy-950);color:var(--white); display:flex;align-items:center;justify-content:center;margin-top:2px; } .check-item .dot svg{width:12px;height:12px;} .check-item h4{font-family:var(--font-display);font-weight:600;font-size:15.5px;margin-bottom:3px;color:var(--navy-950);} .check-item p{color:var(--slate-600);font-size:14.5px;} /* ---------- Score RG ---------- */ .score-panel{ background:var(--navy-950);color:var(--white);border-radius:var(--radius-lg); padding:var(--space-6);display:grid;grid-template-columns:1fr;gap:var(--space-6); } @media (min-width:900px){.score-panel{grid-template-columns:280px 1fr;align-items:center;}} .score-dial{ width:220px;height:220px;border-radius:50%; background:conic-gradient(var(--gold-500) 0turn calc(72/100*1turn), rgba(255,255,255,.12) 0turn 1turn); display:flex;align-items:center;justify-content:center;margin:0 auto; position:relative; } .score-dial::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--navy-950);} .score-dial-value{position:relative;text-align:center;font-family:var(--font-display);} .score-dial-value .num{font-size:44px;font-weight:700;line-height:1;color:var(--white);} .score-dial-value .denom{font-size:14px;color:rgba(255,255,255,.6);} .score-axes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-4);margin-top:var(--space-4);} .score-axis{font-size:13.5px;color:rgba(255,255,255,.82);display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;} .score-axis b{color:var(--white);font-family:var(--font-display);} .score-note{color:rgba(255,255,255,.68);font-size:13.5px;margin-top:var(--space-3);max-width:560px;} /* ---------- Collecte ---------- */ .mini-icons{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-4);} @media (min-width:640px){.mini-icons{grid-template-columns:repeat(3,1fr);}} .mini-icon-card{background:var(--white);border:1px solid rgba(16,25,54,.08);border-radius:var(--radius-md);padding:var(--space-3);transition:transform .25s ease, box-shadow .25s ease;} .mini-icon-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);} .mini-icon-card svg{width:26px;height:26px;color:var(--navy-800);margin-bottom:10px;transition:transform .25s ease;} .mini-icon-card:hover svg{transform:translateY(-2px);} .mini-icon-card h4{font-family:var(--font-display);font-weight:600;font-size:15px;margin-bottom:5px;} .mini-icon-card p{font-size:14px;color:var(--slate-600);} .callout{ margin-top:var(--space-4);border-left:3px solid var(--gold-500); background:var(--mist-100);padding:16px 20px;border-radius:0 10px 10px 0; font-size:14.5px;color:var(--ink-900); } /* ---------- Pricing ---------- */ .pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);align-items:stretch;} @media (min-width:900px){.pricing-grid{grid-template-columns:repeat(3,1fr);}} .price-card{ background:var(--white);border:1px solid rgba(16,25,54,.10); border-radius:var(--radius-lg);padding:var(--space-4); display:flex;flex-direction:column;box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease; } .price-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px -2px rgba(16,25,54,.1),0 22px 40px -18px rgba(16,25,54,.3);} .price-card.featured:hover{transform:translateY(-15px);} .price-card.featured{ border-color:var(--navy-950);position:relative; box-shadow:0 4px 6px -1px rgba(16,25,54,.1), 0 20px 40px -16px rgba(16,25,54,.28); } @media (min-width:900px){.price-card.featured{transform:translateY(-10px);}} .price-tag{ align-self:flex-start;font-family:var(--font-display);font-weight:700; font-size:11px;letter-spacing:.08em;text-transform:uppercase; background:var(--gold-500);color:var(--navy-950);padding:5px 12px;border-radius:100px; margin-bottom:var(--space-3); } .price-tag.limited{background:var(--state-warn);color:var(--white);} .price-card h3{font-size:20px;} .price-amount{margin-top:10px;display:flex;align-items:baseline;gap:6px;} .price-amount .num{font-family:var(--font-display);font-weight:700;font-size:38px;color:var(--navy-950);} .price-amount .per{font-size:14px;color:var(--slate-600);} .price-setup{font-size:13px;color:var(--slate-600);margin-top:4px;} .price-list{list-style:none;margin:var(--space-4) 0;padding:0;display:flex;flex-direction:column;gap:11px;flex-grow:1;} .price-list li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-900);align-items:flex-start;} .price-list svg{width:16px;height:16px;flex-shrink:0;color:var(--state-ok);margin-top:3px;} .pricing-foot{margin-top:var(--space-5);color:var(--slate-600);font-size:13.5px;line-height:1.8;border-top:1px solid rgba(16,25,54,.08);padding-top:var(--space-3);} /* ---------- Sensitive situations ---------- */ .sensitive-panel{ background:var(--navy-950);color:var(--white);border-radius:var(--radius-lg); padding:var(--space-6); } .sensitive-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2);margin-top:var(--space-4);} @media (min-width:768px){.sensitive-grid{grid-template-columns:repeat(4,1fr);}} .sensitive-item{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:10px;padding:14px;font-size:13.5px;color:rgba(255,255,255,.85); } .sensitive-item b{display:block;color:var(--white);font-family:var(--font-display);font-size:13px;letter-spacing:.03em;margin-bottom:4px;text-transform:uppercase;} .legal-note{margin-top:var(--space-4);font-size:13.5px;color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-3);} /* ---------- Founder ---------- */ .founder{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;} @media (min-width:900px){.founder{grid-template-columns:280px 1fr;}} .founder-photo{ width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg); background:var(--mist-100);border:1px solid rgba(16,25,54,.08); display:flex;align-items:center;justify-content:center;color:var(--slate-600); font-size:13px;text-align:center;padding:20px; } .founder-name{font-size:14px;color:var(--gold-500)!important;font-family:var(--font-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;} .founder blockquote{ font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.4vw,24px); color:var(--navy-950);line-height:1.45;margin:var(--space-2) 0 var(--space-3); } .founder-bio{color:var(--slate-600);font-size:15px;line-height:1.75;} /* ---------- FAQ ---------- */ .faq-list{border-top:1px solid rgba(16,25,54,.1);} .faq-item{border-bottom:1px solid rgba(16,25,54,.1);} .faq-q{ width:100%;background:none;border:none;text-align:left;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 4px;font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--navy-950); } .faq-q .plus{flex-shrink:0;width:20px;height:20px;position:relative;} .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--navy-950);transition:transform .25s ease;} .faq-q .plus::before{top:9px;left:0;width:20px;height:2px;} .faq-q .plus::after{left:9px;top:0;width:2px;height:20px;} .faq-item.open .plus::after{transform:rotate(90deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;} .faq-a p{padding:0 4px 18px;color:var(--slate-600);font-size:14.5px;max-width:680px;} /* ---------- Final CTA + form ---------- */ .cta-final{background:var(--navy-950);color:var(--white);} .cta-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);} @media (min-width:960px){.cta-grid{grid-template-columns:1fr 420px;}} .cta-copy h2{color:var(--white);font-size:clamp(26px,3.6vw,34px);} .cta-copy p{color:rgba(255,255,255,.72);margin-top:var(--space-2);font-size:15.5px;max-width:460px;} .form-card{background:var(--white);border-radius:var(--radius-lg);padding:var(--space-4);color:var(--ink-900);} .form-row{margin-bottom:14px;} .form-row label{display:block;font-size:13px;font-weight:600;color:var(--navy-950);margin-bottom:6px;} .form-row input,.form-row select,.form-row textarea{ width:100%;padding:11px 12px;border:1px solid rgba(16,25,54,.18); border-radius:8px;font-family:var(--font-body);font-size:14.5px;background:var(--white);color:var(--ink-900); } .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--gold-500);outline-offset:1px;border-color:var(--gold-500);} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .form-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--slate-600);margin:12px 0 16px;} .form-consent input{width:16px;height:16px;margin-top:2px;flex-shrink:0;} .form-note{font-size:12px;color:var(--slate-600);margin-top:10px;text-align:center;} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-950);color:rgba(255,255,255,.7);padding:var(--space-8) 0 var(--space-4);} .footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);} @media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}} .footer-grid img{height:28px;margin-bottom:12px;} .footer-grid p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.55);max-width:280px;} .footer-col h5{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:14px;} .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;} .footer-col a{font-size:14px;color:rgba(255,255,255,.62);transition:color .2s;} .footer-col a:hover{color:var(--gold-200);} .footer-bottom{ margin-top:var(--space-6);padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.12); display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(255,255,255,.45); } /* ---------- Skip link / a11y ---------- */ .skip-link{ position:absolute;left:-999px;top:auto;background:var(--navy-950);color:var(--white); padding:12px 18px;z-index:100;border-radius:0 0 8px 0; } .skip-link:focus{left:0;top:0;} :focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;} .badge-s{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;padding:3px 9px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;} /* =================================================================== AJOUTS V2 — dynamisme opérationnel =================================================================== */ /* ---------- Hero : panneau opérationnel animé ---------- */ .op-panel{ margin-top:var(--space-6); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); max-width:560px; backdrop-filter:blur(6px); } .op-panel-head{ display:flex;align-items:center;justify-content:space-between; font-family:var(--font-display);font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5); padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1); } .op-panel-head .op-dot{width:7px;height:7px;border-radius:50%;background:var(--state-ok);display:inline-block;margin-right:7px;box-shadow:0 0 0 3px rgba(35,122,87,.25);} .op-row{ display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center; padding:11px 2px;font-size:13.5px;color:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.06); opacity:0;transform:translateX(-8px); animation:opRowIn .5s ease forwards; } .op-row:last-child{border-bottom:none;} .op-row .op-avis{color:rgba(255,255,255,.7);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .op-row .op-niveau{font-family:var(--font-display);font-weight:700;font-size:11px;padding:3px 9px;border-radius:100px;white-space:nowrap;} .op-row .op-statut{font-size:12.5px;color:rgba(255,255,255,.6);white-space:nowrap;} .op-row .op-action{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--gold-200);white-space:nowrap;} @keyframes opRowIn{to{opacity:1;transform:translateX(0);}} .op-row:nth-child(2){animation-delay:.1s;} .op-row:nth-child(3){animation-delay:.28s;} .op-row:nth-child(4){animation-delay:.46s;} .op-row:nth-child(5){animation-delay:.64s;} /* ---------- Texte d'ouverture avant "Le constat" ---------- */ .lede{max-width:740px;margin:0 auto var(--space-10);text-align:center;} .lede .q{ font-family:var(--font-display);font-weight:600; font-size:clamp(19px,2.6vw,25px);color:var(--navy-950);line-height:1.5; } .lede .a{margin-top:14px;font-size:16px;color:var(--slate-600);} .lede .a b{color:var(--navy-950);font-weight:600;} /* ---------- Ligne de progression scroll-linked (étapes) ---------- */ .steps-track{position:relative;height:3px;background:rgba(16,25,54,.08);border-radius:3px;margin-bottom:var(--space-3);overflow:hidden;} .steps-track-fill{ position:absolute;left:0;top:0;bottom:0;width:0%; background:linear-gradient(90deg,var(--gold-500),var(--gold-200)); border-radius:3px;transition:width .12s linear; } /* ---------- Score RG : axes animés ---------- */ .score-axis-bar{margin-bottom:14px;} .score-axis-bar .row{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.82);margin-bottom:6px;} .score-axis-bar .row b{color:var(--white);font-family:var(--font-display);} .score-axis-bar .track{height:6px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;} .score-axis-bar .fill{height:100%;width:0;background:var(--gold-500);border-radius:4px;transition:width 1.1s cubic-bezier(.2,.8,.2,1);} .score-panel.is-animated .score-axis-bar .fill{width:var(--val);} .score-dial.is-animated{transition:background 1.2s ease;} /* ---------- Comparatif dispersé / système ---------- */ .compare{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-5);} @media (min-width:800px){.compare{grid-template-columns:1fr 1fr;}} .compare-col{border-radius:var(--radius-lg);padding:var(--space-4);} .compare-col.dispersed{background:var(--mist-100);border:1px solid rgba(16,25,54,.08);} .compare-col.system{background:var(--navy-950);color:var(--white);} .compare-col h4{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;} .compare-col.dispersed h4{color:var(--state-high);} .compare-col.system h4{color:var(--gold-200);} .compare-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:14.5px;border-top:1px solid rgba(16,25,54,.08);} .compare-col.system .compare-row{border-top:1px solid rgba(255,255,255,.1);} .compare-row:first-of-type{border-top:none;} .compare-row svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;} .compare-col.dispersed .compare-row svg{color:var(--state-high);} .compare-col.system .compare-row svg{color:var(--state-ok);} .compare-col.dispersed p{color:var(--ink-900);} .compare-col.system p{color:rgba(255,255,255,.88);}