/* ============================================================================
   MON BUREAU RH — FEUILLE DE STYLE PARTAGÉE
   ============================================================================
   Charte de référence : index.html (page d'accueil, style "Le Bulletin").
   Toutes les pages du site chargent ce fichier unique pour garantir une
   cohérence visuelle stricte (une seule source de vérité pour les couleurs,
   la typographie, les boutons, les cartes, etc.)

   Dréa Digital — 10/07/2026
   ============================================================================ */

/* ===== POLICES (auto-hébergées, sous-ensemble latin — plus de dépendance
   à fonts.googleapis.com/fonts.gstatic.com, élimine la chaîne de requêtes
   bloquantes signalée par Lighthouse) ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-mono-700-latin.woff2') format('woff2')}

/* ===== CHARTE GRAPHIQUE ===== */
:root {
  --violet:#6C47FF;--violet-dim:#5a38e0;--violet-text:#957aff;--nuit:#1A1A2E;--nuit-raised:#242440;
  --lagon:#00C9A7;--lagon-dim:#00a88c;--violet-doux:#F5F4FF;--soleil:#FFB547;
  --urgence:#FF5A5F;--urgence-btn:#bf4447;--blanc:#FFFFFF;
  --text-onink:#F5F3FF;--text-onink-muted:#a8a3b8;
  --text-onlight:#1A1A2E;--text-onlight-muted:#6b6880;
  --line-onink:rgba(245,243,255,0.12);--line-onlight:#e0ddf0;
  --validate:#10B981;--vert-ok:#10B981;--orange-warn:#F59E0B;--rouge-risk:#EF4444;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'Space Mono','Consolas',monospace;
  --radius-md:12px;--radius-lg:22px;
  --header-bg:rgba(26,26,46,0.92);--footer-bg:#12101e;
  --overlay-1:rgba(255,255,255,0.03);--overlay-2:rgba(255,255,255,0.04);--overlay-3:rgba(255,255,255,0.06);--overlay-border:rgba(255,255,255,0.3);
}

/* ===== THEME CLAIR (jour) ===== */
:root[data-theme="light"] {
  --nuit:#F7F6FB;--nuit-raised:#FFFFFF;
  --blanc:#1A1A2E;
  --text-onink:#1A1A2E;--text-onink-muted:#615c78;
  --line-onink:#E4E1F0;
  --violet-text:#5a38e0;
  --violet-doux:#EFEBFC;
  --header-bg:rgba(255,255,255,0.86);--footer-bg:#EFEBFC;
  --overlay-1:rgba(26,26,46,0.03);--overlay-2:rgba(26,26,46,0.045);--overlay-3:rgba(26,26,46,0.07);--overlay-border:rgba(26,26,46,0.25);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-onink);background:var(--nuit);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
.font-mono{font-family:var(--font-mono)}

/* ===== UTILITAIRES ===== */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}
.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}

/* ===== LAYOUT ===== */
.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:760px;margin:0 auto;padding:0 1.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.grid-6{grid-template-columns:repeat(2,1fr)}}
.flex-wrap-gap{display:flex;flex-wrap:wrap;gap:1rem}
.section{padding:5rem 0}
.section-tight{padding:3rem 0}

/* ===== BANDEAU STICKY ===== */
.top-banner{background:var(--violet);color:#fff;text-align:center;padding:0.6rem 1.5rem;font-size:0.82rem;font-weight:600}
.top-banner a{text-decoration:underline;white-space:nowrap}

/* ===== HEADER (site principal) ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-onink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:1120px;margin:0 auto;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:0.6rem;font-weight:700;font-size:1.15rem;color:var(--blanc);white-space:nowrap}
.logo-mascot{width:38px;height:38px;display:block;flex:none}
.logo .rh{color:var(--violet-text)}
.nav-desktop{display:flex;align-items:center;gap:1.5rem;font-size:0.86rem;font-weight:500}
.nav-link{color:var(--text-onink-muted);position:relative;transition:color 0.2s;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--violet);transition:right 0.25s}
.nav-link:hover{color:var(--text-onink)}
.nav-link:hover::after{right:0}
.nav-link.on{color:var(--blanc)}
.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-onink);background:var(--overlay-1);color:var(--text-onink-muted);flex-shrink:0;transition:border-color 0.2s,color 0.2s}
.theme-toggle-btn:hover{border-color:var(--violet);color:var(--text-onink)}
.theme-toggle-btn svg{width:18px;height:18px}
.header-ctas{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
#mobile-menu-btn{display:none;background:none;border:none;color:var(--text-onink);padding:0.25rem}
#mobile-menu{display:none;border-top:1px solid var(--line-onink);padding:1rem 1.5rem}
#mobile-menu.open{display:flex;flex-direction:column;gap:1rem}
#mobile-menu .nav-link{font-size:0.92rem}
@media(max-width:900px){
  .nav-desktop{display:none}
  #mobile-menu-btn{display:inline-flex}
  .header-ctas .btn-secondary{display:none}
}

/* ===== HEADER (page outil — diagnostic) ===== */
.diag-header{position:sticky;top:0;z-index:50;background:rgba(26,26,46,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-onink);padding:1rem 1.5rem}
.diag-header-inner{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo-text{font-weight:700;font-size:1.15rem;color:var(--blanc)}
.logo-text .rh{color:var(--violet-text)}
.back-link{color:var(--text-onink-muted);font-size:0.85rem;transition:color 0.2s}
.back-link:hover{color:#fff}

/* ===== BUTTONS ===== */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;background:var(--violet);color:#fff;border-radius:999px;padding:0.95rem 2rem;font-weight:700;border:none;box-shadow:0 6px 24px rgba(108,71,255,0.35);transition:transform 0.18s,box-shadow 0.25s,background 0.18s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(108,71,255,0.45);background:var(--violet-dim)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-lagon{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;background:var(--lagon);color:#fff;border-radius:999px;padding:0.95rem 2rem;font-weight:700;border:none;transition:transform 0.18s,box-shadow 0.25s,background 0.18s}
.btn-lagon:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,167,0.35);background:var(--lagon-dim)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;background:transparent;color:var(--text-onink);border:1.5px solid var(--line-onink);border-radius:999px;padding:0.95rem 2rem;font-weight:700;transition:border-color 0.2s,background 0.2s}
.btn-secondary:hover{border-color:var(--text-onink);background:var(--overlay-2)}
.btn-urgence{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;background:var(--urgence-btn);color:#fff;border-radius:999px;padding:0.95rem 2rem;font-weight:700;border:none;box-shadow:0 6px 24px rgba(255,90,95,0.3);transition:transform 0.18s,background 0.18s}

@media(max-width:768px){.cta-diag-grid{grid-template-columns:1fr!important;gap:1.5rem!important;padding:1.75rem!important}}
@media(max-width:768px){.hero-split{grid-template-columns:1fr!important;gap:1.5rem!important}}
.btn-urgence:hover{transform:translateY(-2px);background:#a83a3d}
.btn-sm{padding:0.65rem 1.3rem;font-size:0.82rem}
.btn-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;gap:1rem}

/* ===== CARDS ===== */
.card{position:relative;background:var(--nuit-raised);border:1px solid var(--line-onink);border-radius:var(--radius-lg);padding:1.75rem;transition:transform 0.25s,border-color 0.25s}
.card:hover{transform:translateY(-6px);border-color:var(--violet)}
.card-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(108,71,255,0.14);color:var(--violet);margin:0 auto 1rem}
.card-icon.lagon-icon{background:rgba(0,201,167,0.14);color:var(--lagon)}

/* ===== GHOST NUMBER ===== */
.ghost-number{position:absolute;font-weight:700;font-size:clamp(14rem,34vw,30rem);color:var(--text-onink);opacity:0.03;line-height:0.8;pointer-events:none;user-select:none;z-index:0}
.ghost-number.fixed{position:fixed;top:-2rem;left:-1.5rem;font-size:clamp(16rem,40vw,32rem);opacity:0.025}

/* ===== STAMP ===== */
.stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:128px;height:128px;border:2.5px solid var(--violet);border-radius:50%;color:var(--violet-text);transform:rotate(-9deg);text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;line-height:1.15;padding:0.6rem;background:rgba(108,71,255,0.06)}
.stamp-small{font-size:0.55rem;letter-spacing:0.12em;opacity:0.85}
.stamp-big{font-size:1.05rem;margin:0.15rem 0}

.hero-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:2.5rem;align-items:start}
.hero-mascot-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-top:0.5rem}
.hero-mascot{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.4));z-index:1}
.hero-stamp{position:absolute;left:-0.5rem;bottom:2%;width:118px;height:118px;background:var(--nuit);box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:2}
@media(max-width:900px){.hero-stamp{width:96px;height:96px;left:-0.25rem}.hero-stamp .stamp-small{font-size:0.48rem}.hero-stamp .stamp-big{font-size:0.88rem}}
@media(max-width:768px){
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-mascot-wrap{margin-top:1rem;padding-top:0}
  .hero-mascot{max-width:200px}
  .hero-stamp{width:88px;height:88px;left:auto;right:-0.5rem;bottom:-0.5rem}
}
@media(max-width:420px){.hero-mascot{max-width:170px}.hero-stamp{width:76px;height:76px}.hero-stamp .stamp-small{font-size:0.42rem}.hero-stamp .stamp-big{font-size:0.78rem}}

/* ===== LEDGER (grand livre) ===== */
.ledger-row{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--font-mono);font-size:0.85rem;padding:0.55rem 0;border-bottom:1px dotted var(--line-onink);color:var(--text-onink-muted)}
.ledger-row span:last-child{color:var(--text-onink);font-weight:700}

/* ===== MARQUEE ===== */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line-onink);border-bottom:1px solid var(--line-onink);padding:0.75rem 0}
.marquee-track{display:inline-flex;align-items:center;animation:marquee-scroll 30s linear infinite}
.marquee-track span{font-family:var(--font-mono);font-size:0.85rem;letter-spacing:0.05em;color:var(--text-onink-muted);padding:0 2rem;display:inline-flex;align-items:center;gap:0.6rem}
.marquee-track span::before{content:"\2022";color:var(--violet)}
.marquee-track span:nth-child(even)::before{color:var(--lagon)}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== CORPS D'ARTICLE (article.html) ===== */
#article-body p::first-letter{font-weight:800;color:var(--violet-text);font-family:var(--font-mono);font-size:1.15em}
#article-body p{color:var(--text-onink-muted);line-height:1.75;margin-bottom:1.25rem}
#article-body ul,#article-body ol{margin:0 0 1.25rem 1.25rem;color:var(--text-onink-muted);line-height:1.75}
#article-body ul li,#article-body ol li{margin-bottom:0.4rem}
#article-body strong{color:var(--blanc);font-weight:700}
#article-body em{color:var(--text-onink)}
#article-body a{color:var(--lagon);text-decoration:underline;text-underline-offset:2px}
#article-body h2{font-size:1.4rem;font-weight:700;color:var(--blanc);margin:2.25rem 0 1rem}
#article-body h3{font-size:1.15rem;font-weight:700;color:var(--blanc);margin:1.75rem 0 0.75rem}

#article-body table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:0.88rem;overflow-x:auto;display:block}
#article-body table thead{display:table-header-group}
#article-body table tr{display:table-row}
#article-body th,#article-body td{border:1px solid var(--line-onink);padding:0.65rem 0.9rem;text-align:left;color:var(--text-onink-muted);vertical-align:top}
#article-body th{background:rgba(108,71,255,0.14);color:var(--violet-text);font-weight:700;font-family:var(--font-mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em}
#article-body tr:nth-child(even) td{background:rgba(255,255,255,0.02)}

#article-body .callout-conseil,#article-body .callout-alerte{border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin:0 0 1.5rem}
#article-body .callout-conseil{background:rgba(108,71,255,0.1);border:1px solid rgba(108,71,255,0.3)}
#article-body .callout-alerte{background:rgba(255,90,95,0.1);border:1px solid rgba(255,90,95,0.3)}
#article-body .callout-conseil p,#article-body .callout-alerte p{margin:0;color:var(--text-onink)}
#article-body .callout-conseil p::first-letter,#article-body .callout-alerte p::first-letter{font-weight:inherit;color:inherit;font-family:inherit;font-size:inherit}
#article-body .callout-conseil strong{color:var(--violet-text)}
#article-body .callout-alerte strong{color:var(--urgence)}

/* ===== TABS/FILTRES PILLS (partagé : contact.html, actualites.html) ===== */
.contact-tabs{display:flex;gap:0.6rem;flex-wrap:wrap}
.contact-tab{padding:0.65rem 1.3rem;border-radius:999px;border:1px solid var(--line-onink);background:var(--overlay-1);color:var(--text-onink-muted);font-size:0.85rem;font-weight:600;transition:all 0.2s}
.contact-tab:hover{border-color:var(--overlay-border);color:var(--text-onink)}
.contact-tab.active{background:var(--violet);border-color:var(--violet);color:#fff}
.contact-tab.small{padding:0.4rem 0.9rem;font-size:0.75rem}

/* ===== SECTION PAPIER (light) ===== */
.section-paper{background:var(--violet-doux);color:var(--text-onlight)}
.section-paper .section-label{color:var(--violet)}

/* ===== PULL QUOTE ===== */
.pull-quote{position:relative;background:var(--nuit-raised);border:1px solid var(--line-onink);border-radius:var(--radius-lg);padding:2.5rem}
.pull-quote::before{content:"\201C";font-size:3.5rem;color:var(--violet);line-height:1;display:block;margin-bottom:-0.6rem;font-weight:700}
.pull-quote.lagon-quote::before{color:var(--lagon)}
.pull-quote p{font-size:1.3rem;line-height:1.5;color:var(--blanc);font-weight:500}
.pull-quote footer{margin-top:1.25rem;font-family:var(--font-mono);font-size:0.78rem;color:var(--text-onink-muted)}

/* ===== PLACEHOLDER CARD ===== */
.placeholder-card{border:1.5px dashed var(--line-onink);border-radius:var(--radius-lg);padding:2rem;text-align:center;color:var(--text-onink-muted);font-size:0.88rem}

/* ===== DIFFERENTIATOR / VALUE CARDS ===== */
.diff-card{border-radius:var(--radius-lg);padding:1.75rem;border:1px solid var(--line-onink);background:var(--nuit-raised)}
.diff-num{font-family:var(--font-mono);font-size:0.75rem;color:var(--violet-text);margin-bottom:0.6rem;display:block}

/* ===== TEASER CARD ===== */
.teaser-card{border-radius:var(--radius-lg);border:2px dashed var(--violet);background:linear-gradient(180deg,rgba(108,71,255,0.08),var(--nuit-raised));padding:2rem}
.teaser-badge{display:inline-block;font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;background:rgba(108,71,255,0.18);color:var(--violet-text);padding:0.3rem 0.8rem;border-radius:999px;margin-bottom:1rem}
.teaser-form{display:flex;gap:0.6rem;margin-top:1.5rem;flex-wrap:wrap}
.teaser-form input{flex:1;min-width:200px;padding:0.85rem 1.1rem;border-radius:999px;border:1px solid var(--line-onink);background:var(--overlay-2);color:var(--text-onink);font-size:0.9rem}
.teaser-form input::placeholder{color:var(--text-onink-muted)}

/* ===== OBLIGATION / ALERT CARDS ===== */
.oblig-card{background:rgba(255,90,95,0.06);border:1px solid rgba(255,90,95,0.2);border-radius:var(--radius-lg);padding:1.75rem;transition:border-color 0.2s}
.oblig-card:hover{border-color:var(--urgence)}
.oblig-badge{display:inline-block;font-family:var(--font-mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;background:rgba(255,90,95,0.12);color:var(--urgence);padding:0.25rem 0.6rem;border-radius:999px;margin-bottom:0.75rem}
.risk-alert{background:rgba(255,90,95,0.08);border:1px solid rgba(255,90,95,0.25);border-radius:var(--radius-md);padding:1.25rem;display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1.25rem}
.risk-alert-icon{font-size:1.2rem;flex-shrink:0;margin-top:0.1rem}
.risk-alert p{font-size:0.88rem;color:var(--text-onink-muted);line-height:1.5}

/* ===== ZONE / TERRITOIRE CARDS ===== */
.zone-card{border:1px solid var(--line-onink);border-radius:var(--radius-lg);background:var(--nuit-raised);padding:1.5rem;text-align:left;font-weight:600;font-size:1rem;color:var(--text-onink);transition:transform 0.25s,border-color 0.25s;display:block}
.zone-card:hover{transform:translateY(-4px);border-color:var(--violet)}
.zone-sub{font-size:0.85rem;color:var(--text-onink-muted);margin-top:0.5rem;font-weight:400;line-height:1.5}
.zone-tag{font-family:var(--font-mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--lagon);margin-top:0.75rem;display:flex;align-items:center;gap:0.3rem}
.zone-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--lagon);flex-shrink:0}

/* ===== SEGMENT CARDS ===== */
.segment-card{border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--line-onink);background:var(--nuit-raised)}
.segment-tag{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;padding:0.3rem 0.7rem;border-radius:999px;margin-bottom:1rem}
.segment-violet .segment-tag{background:rgba(108,71,255,0.14);color:var(--violet)}
.segment-lagon .segment-tag{background:rgba(0,201,167,0.14);color:var(--lagon)}
.segment-list{list-style:none;padding:0;margin:1.25rem 0 0}
.segment-list li{display:flex;align-items:flex-start;gap:0.6rem;padding:0.4rem 0;font-size:0.92rem;color:var(--text-onink-muted)}
.segment-list li svg{flex-shrink:0;margin-top:0.2rem}

/* ===== TABLE COMPARE ===== */
.table-compare{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line-onlight);width:100%;border-collapse:collapse}
.table-compare th{background:var(--violet);color:#fff;text-align:left;padding:0.75rem 1.1rem;font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em}
.table-compare td{padding:0.75rem 1.1rem;border-bottom:1px solid var(--line-onlight);background:#fff;font-size:0.9rem;color:var(--text-onlight)}
.table-compare tr:nth-child(even) td{background:var(--violet-doux)}
.table-compare td.win{color:var(--violet);font-weight:600}

/* ===== TEAR LINE ===== */
.tear-line{height:2px;background-image:radial-gradient(circle,var(--nuit) 2.5px,transparent 2.6px);background-size:18px 2px;background-repeat:repeat-x;background-position:center}
.tear-line-wrap{position:relative;background:var(--violet-doux)}
.tear-line-wrap .tear-line{position:absolute;top:-1px;left:0;right:0}

.partner-mascot{width:100%;max-width:260px;height:auto;filter:drop-shadow(0 20px 28px rgba(26,26,46,.18))}
@media(max-width:900px){.tear-line-wrap .container{grid-template-columns:1fr!important}.partner-mascot{max-width:170px;margin-top:1.5rem}}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--line-onink);padding:1.25rem 0}
.faq-question{font-weight:700;font-size:1.05rem;color:var(--text-onink);cursor:pointer}

/* ===== FORM FIELDS (générique — diagnostic, contact, etc.) ===== */
.field-group{margin-bottom:1.25rem}
.field-label{display:block;font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;color:var(--text-onink-muted);margin-bottom:0.5rem}
.field-input{width:100%;padding:0.85rem 1rem;background:var(--overlay-2);border:1px solid var(--line-onink);border-radius:var(--radius-md);color:var(--text-onink);font-size:0.95rem;outline:none;transition:border-color 0.2s}
.field-input:focus{border-color:var(--violet)}
.field-input::placeholder{color:var(--overlay-border)}
select.field-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
select.field-input option{background:var(--nuit-raised);color:var(--text-onink)}
textarea.field-input{resize:vertical;min-height:110px;font-family:var(--font-body)}

/* ===== DIAGNOSTIC — steps, questions, résultats ===== */
.progress-wrap{position:sticky;top:57px;z-index:49;background:rgba(26,26,46,0.92);backdrop-filter:blur(12px);padding:0.75rem 1.5rem;border-bottom:1px solid var(--line-onink)}
.progress-inner{max-width:720px;margin:0 auto}
.progress-bar{height:6px;background:var(--nuit-raised);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--lagon));border-radius:999px;transition:width 0.4s ease}
.progress-label{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-onink-muted);margin-top:0.5rem;display:flex;justify-content:space-between}
.diag-main{position:relative;z-index:1;padding:2.5rem 0 4rem}
.step{display:none}.step.active{display:block}
.intro-card{position:relative;background:var(--nuit-raised);border:1px solid var(--line-onink);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center}
.intro-card h1{font-size:2rem;font-weight:700;margin-bottom:1rem;line-height:1.2;color:var(--blanc)}
.intro-card p{color:var(--text-onink-muted);max-width:480px;margin:0 auto;line-height:1.55}
.intro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.intro-feat{background:var(--overlay-1);border:1px solid var(--line-onink);border-radius:14px;padding:1.25rem 1rem;text-align:center}
.intro-feat-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(108,71,255,0.14);color:var(--violet);margin:0 auto 0.75rem}
.intro-feat-icon.lagon-icon{background:rgba(0,201,167,0.14);color:var(--lagon)}
.intro-feat p{font-size:0.78rem;color:var(--text-onink-muted)}
.question-card{background:var(--nuit-raised);border:1px solid var(--line-onink);border-radius:var(--radius-md);padding:1.5rem;margin-bottom:1rem;transition:border-color 0.3s}
.question-card.answered{border-color:rgba(108,71,255,0.4)}
.question-card.risk{border-color:rgba(239,68,68,0.5)}
.q-theme{font-family:var(--font-mono);font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--violet-text);margin-bottom:0.5rem}
.q-text{font-size:0.95rem;color:var(--text-onink);line-height:1.5;margin-bottom:1rem}
.q-buttons{display:flex;gap:0.5rem;flex-wrap:wrap}
.q-btn{padding:0.55rem 1.2rem;border-radius:999px;border:1px solid var(--line-onink);background:var(--overlay-1);color:var(--text-onink-muted);font-size:0.82rem;font-weight:600;transition:all 0.2s}
.q-btn:hover{border-color:var(--overlay-border);color:var(--text-onink)}
.q-btn.selected-oui{background:rgba(16,185,129,0.16);border-color:var(--vert-ok);color:var(--vert-ok)}
.q-btn.selected-non{background:rgba(239,68,68,0.15);border-color:var(--rouge-risk);color:var(--rouge-risk)}
.q-btn.selected-na{background:var(--overlay-3);border-color:var(--overlay-border);color:var(--text-onink-muted)}
.cat-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line-onink)}
.cat-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(108,71,255,0.14)}
.cat-title{font-size:1.15rem;font-weight:700;color:var(--blanc)}
.cat-count{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-onink-muted)}
.result-card{background:var(--nuit-raised);border:1px solid var(--line-onink);border-radius:var(--radius-lg);padding:2rem;margin-bottom:1.25rem}
.score-big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:3.5rem;font-weight:700;line-height:1}
.score-label{font-size:0.85rem;color:var(--text-onink-muted)}
.score-bar{height:10px;background:var(--nuit);border-radius:999px;overflow:hidden;margin-top:0.5rem}
.score-bar-fill{height:100%;border-radius:999px;transition:width 0.6s ease}
.cat-result{display:flex;align-items:center;gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--line-onink)}
.cat-result:last-child{border-bottom:none}
.cat-result-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-result-icon svg{width:16px;height:16px}
.cat-result-name{flex:1;font-size:0.88rem;font-weight:500}
.cat-result-score{font-family:var(--font-mono);font-size:0.82rem;font-weight:700;min-width:50px;text-align:right}
.cat-result-badge{font-family:var(--font-mono);font-size:0.62rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:999px;text-transform:uppercase;letter-spacing:0.04em}
.badge-ok{background:rgba(16,185,129,0.15);color:var(--vert-ok)}
.badge-warn{background:rgba(245,158,11,0.15);color:var(--orange-warn)}
.badge-risk{background:rgba(239,68,68,0.15);color:var(--rouge-risk)}
.conversion-card{position:relative;background:linear-gradient(180deg,rgba(108,71,255,0.10),var(--nuit-raised));border:2px dashed var(--violet);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center}
.conversion-card h2{font-size:1.5rem;margin-bottom:0.75rem;color:var(--blanc)}
.conversion-list{text-align:left;max-width:400px;margin:1rem auto;font-size:0.88rem;color:var(--text-onink-muted)}
.conversion-list li{padding:0.4rem 0;padding-left:1.6rem;position:relative}
.conversion-list li::before{content:'✓';position:absolute;left:0;color:var(--lagon);font-weight:700}

/* ===== PROC STEPS ===== */
.proc-step{border-top:2px solid var(--violet);padding-top:1rem}
.proc-step:nth-child(even){border-top-color:var(--lagon)}
.proc-num{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.08em;color:var(--text-onink-muted)}

/* ===== SECTION LABEL / TITLE ===== */
.section-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.18em;font-size:0.72rem;font-weight:700;color:var(--violet-text);margin-bottom:0.75rem}
.section-title{font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin-bottom:1rem}
.section-sub{font-size:0.95rem;color:var(--text-onink-muted);max-width:580px;margin-bottom:2rem;line-height:1.55}

/* ===== FOOTER (site principal) ===== */
.testimonial-carousel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.testimonial-carousel::-webkit-scrollbar{display:none}
.testimonial-carousel .testimonial-card{flex:0 0 calc(33.333% - 1rem);scroll-snap-align:start;min-width:260px}
@media(max-width:900px){.testimonial-carousel .testimonial-card{flex:0 0 calc(50% - 0.75rem)}}
@media(max-width:640px){.testimonial-carousel .testimonial-card{flex:0 0 85%}}
.carousel-controls{display:flex;gap:0.6rem;flex-shrink:0}
.carousel-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-onink);background:transparent;color:var(--text-onink-muted);cursor:pointer;transition:color 0.15s,border-color 0.15s,transform 0.15s}
.carousel-btn:hover{color:var(--violet-text);border-color:var(--violet-text);transform:translateY(-2px)}

.client-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.client-logo-card{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:1.1rem 1.6rem;box-shadow:0 4px 18px rgba(0,0,0,0.12);transition:transform 0.2s,box-shadow 0.2s}
.client-logo-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,0.18)}
.client-logos img{height:32px;width:auto;max-width:140px;object-fit:contain;display:block}
@media(max-width:640px){.client-logos{gap:1rem}.client-logo-card{padding:0.9rem 1.25rem}.client-logos img{height:26px}}

.site-footer{position:relative;background:var(--footer-bg);color:var(--text-onink);border-top:1px solid var(--line-onink);padding:2.75rem 0}
.footer-mascot-seam-wrap{display:flex;justify-content:center;margin-top:-7.5rem;margin-bottom:1.5rem;pointer-events:none}
.footer-mascot-seam{width:220px;height:auto;pointer-events:none}
@media(max-width:640px){
  .footer-mascot-seam-wrap{margin-top:-4.5rem;margin-bottom:1rem}
  .footer-mascot-seam{width:140px}
}
.site-footer a{color:var(--text-onink-muted);transition:color 0.15s}
.site-footer a:hover{color:var(--text-onink)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;font-size:0.88rem}
.footer-brand{max-width:360px}
@media(min-width:600px){
  .footer-grid{grid-template-columns:repeat(2,1fr);column-gap:2.5rem;row-gap:2.75rem}
  .footer-brand{grid-column:1 / -1;max-width:none}
}
@media(min-width:960px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:2.75rem;align-items:start}
  .footer-brand{grid-column:auto;max-width:320px}
}
.footer-grid p a,.footer-grid ul a{display:inline-block;padding:0.35rem 0}
.footer-col-title{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:0.72rem;color:var(--violet-text);margin-bottom:1rem}
.footer-grid ul{list-style:none;padding:0;line-height:2}

.footer-mascot{display:none;margin-top:1.25rem;width:120px;height:auto;opacity:0.95}
@media(min-width:960px){.footer-mascot{display:block}}

.footer-contact-phone{font-size:0.95rem;font-weight:700;margin:0 0 0.4rem}
.footer-contact-phone a{color:var(--violet-text)}

.footer-social{display:flex;align-items:center;gap:0.75rem;flex-shrink:0;line-height:0;margin-top:0.5rem}
.footer-grid p a.footer-social-link,.footer-social a{color:var(--violet-text);background:rgba(108,71,255,0.14);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:0;padding:0;margin:0;border:none;border-radius:50%;box-sizing:border-box;transition:color 0.18s,background-color 0.18s,transform 0.18s,box-shadow 0.18s}
.footer-social a:hover{color:#fff;background:var(--violet);transform:translateY(-2px);box-shadow:0 6px 16px rgba(108,71,255,0.4)}
.footer-social svg{display:block;width:20px;height:20px;flex-shrink:0}

.footer-cookie-btn{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;box-shadow:none;display:inline;padding:0.35rem 0;margin:0;font:inherit;font-size:inherit;line-height:inherit;text-align:left;color:var(--text-onink-muted);cursor:pointer;transition:color 0.15s}
.footer-cookie-btn:hover{color:var(--text-onink)}
.footer-cookie-btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

.footer-bottom{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.25rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line-onink)}
.footer-copy{color:var(--text-onink-muted);font-size:0.75rem;line-height:1;margin:0}
.footer-copy a{display:inline-block;padding:0.4rem 0.5rem;margin:0 0.1rem}
.footer-copy .footer-cookie-btn{display:inline-block;padding:0.4rem 0.5rem;margin:0 0.1rem}
.footer-credit{font-size:0.75rem;line-height:1;margin:0;color:var(--text-onink-muted);white-space:nowrap;flex-shrink:0}
.footer-credit strong,.footer-credit a{color:var(--violet-text);font-weight:700;transition:color 0.15s}
.footer-credit a:hover{color:var(--lagon)}
@media(max-width:640px){.footer-bottom{justify-content:center;text-align:center}.footer-copy{text-align:center}}

/* ===== FOOTER (page outil) ===== */
.diag-footer{position:relative;z-index:1;text-align:center;padding:2.5rem;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.04em;color:var(--text-onink-muted);border-top:1px solid var(--line-onink)}
.diag-footer .diag-credit{display:block;margin-top:0.5rem;font-size:0.85em;letter-spacing:0.02em;opacity:0.6;text-transform:none}

/* ===== REVEAL ON SCROLL ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s,transform 0.7s}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ===== FOCUS ===== */
a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card,.btn-primary,a,button{transition:none}
  .marquee-track{animation:none}
}

/* ===== RESPONSIVE — page outil ===== */
@media(max-width:640px){
  .intro-card h1{font-size:1.5rem}
  .intro-features{grid-template-columns:1fr}
  .score-big{font-size:2.5rem}
  .btn-nav{flex-direction:column}
  .btn-nav button,.btn-nav a{width:100%}
}

/* ===== BANDEAU CONSENTEMENT COOKIES ===== */
#cookie-consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--nuit-raised);border-top:1px solid var(--line-onink);box-shadow:0 -4px 24px rgba(0,0,0,.35)}
#cookie-consent-banner .cc-inner{max-width:1100px;margin:0 auto;padding:1.25rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
#cookie-consent-banner .cc-text{color:var(--text-onink-muted);font-size:.9rem;flex:1 1 320px}
#cookie-consent-banner .cc-text a{color:var(--lagon);text-decoration:underline}
#cookie-consent-banner .cc-actions{display:flex;gap:.75rem;flex:0 0 auto}
#cookie-consent-banner .cc-btn{border-radius:var(--radius-md);padding:.65rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid transparent}
#cookie-consent-banner .cc-btn-refuse{background:transparent;border-color:var(--line-onink);color:var(--text-onink)}
#cookie-consent-banner .cc-btn-accept{background:var(--violet);color:#fff}
#cookie-consent-banner .cc-btn-accept:hover{background:var(--violet-dim)}
@media(max-width:640px){
  #cookie-consent-banner .cc-inner{flex-direction:column;align-items:stretch}
  #cookie-consent-banner .cc-actions{flex-direction:column}
}

.footer-bottom > * {
    margin: 0;
    line-height: normal;
}