/* ===== Couche design (audit du 2026-10-16) =====
   Ajoutée après styles.css par _outils/post_export.py : ne pas modifier dans l'export. */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-latin-400-normal.5e7fda9c.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-latin-400-italic.b9ca45ec.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-latin-600-normal.2847f4d3.woff2) format('woff2')}

:root{
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  /* alerte : encre + ✕ brique sur fond rosé ; l'orange --signal est réservé à l'action */
  --alert:#9b2c16;
  --alert-bg:#fbeae6;
}

/* ---------- 1. Action et alerte séparées ---------- */
.p-req{background:var(--alert-bg);color:var(--ink)}
.p-req::before{content:"✕";width:auto;height:auto;border-radius:0;background:none;margin:0;color:var(--alert);font-weight:800;line-height:1}
.paper li.no{color:var(--ink)}
.paper li.no i{background:var(--alert-bg);color:var(--alert)}
.float-report .big strong{color:var(--ink)}
.ring circle.val[stroke="var(--signal)"]{stroke:var(--navy)}
.float-stamp{border-color:var(--navy);color:var(--navy)}
.path .tagline{background:var(--sky);color:var(--navy)}
.tldr .tldr-title::before{background:var(--navy)}
.site-footer .foot-h::before{background:var(--blue-300)}
.process .delay{font-family:var(--body);font-weight:700;font-size:.82rem;color:var(--navy);background:var(--sky)}

/* un seul accent dans le titre : mot blanc souligné d'orange */
.hero h1 em{color:#fff}

/* ---------- 2. Diagnostic : boutons à la couleur d'action, désactivé en gris ---------- */
#next1{background:var(--signal);color:#fff;box-shadow:0 10px 24px -10px rgba(204,76,10,.65)}
#next1:not([disabled]):hover{background:var(--signal-600)}
.btn[disabled],.btn[disabled]:hover{opacity:1;background:#dde3e8;color:#66737e;box-shadow:none;border-color:transparent}
.progress .active::after{background:var(--navy)}
.progress .active i{background:var(--navy);color:#fff}

/* ---------- 3. Références légales en serif (le mono ne reste que sur les tampons) ---------- */
.law{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--navy);background:none;padding:0 0 0 10px;border-left:2px solid var(--blue-300);border-radius:0}
p .law{border:0;padding:0;font-size:1em}
.paper-head span{font-family:var(--serif);font-style:italic;font-size:.8rem}

/* ---------- 4. Fonds sobres : aplat marine, sans halo ni grille ---------- */
.hero::before,.hero::after,.page-hero::before,.page-hero::after{display:none}
.hero,.page-hero{background:var(--navy-900)}
.hero .wrap{padding-block:72px 88px}

/* surtitres sans tiret */
.eyebrow::before{display:none}

/* ---------- 5. Bandeau cookies : barre pleine largeur, le contenu n'est plus recouvert ---------- */
.cc-banner{left:0;right:0;bottom:0;width:auto}
.cc-card{border-radius:0;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;
  padding:14px max(16px,calc((100% - var(--wrap)) / 2)) calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -1px 0 var(--line),0 -14px 30px -24px rgba(1,42,64,.45);animation:none}
.cc-text{max-width:72ch}
.cc-row{flex:none;gap:18px}
body:has(#cc-banner:not([hidden])){padding-bottom:76px}
@media (max-width:760px){
  .cc-card{flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  body:has(#cc-banner:not([hidden])){padding-bottom:140px}
}

/* ---------- 6. Accueil : question 1 du diagnostic dans le hero ---------- */
.hero-q{background:#fff;color:var(--ink);border-radius:var(--r);padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lg);max-width:560px;margin-top:6px}
.hero-q-step{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.hero-q-title{font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1.22;margin:0;color:var(--ink)}
.hero-q-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hq-opt{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.7em .6em;border:2px solid var(--line);border-radius:10px;font-weight:700;color:var(--ink);text-decoration:none;text-align:center;line-height:1.2;transition:border-color .15s,background .15s,color .15s}
.hq-opt:hover,.hq-opt:focus-visible{border-color:var(--signal);background:#fff5ef;color:var(--signal-600)}
.hero-q-foot{font-size:.9rem;color:var(--ink-mute);margin:0}
.hero-q-foot a{color:var(--navy);font-weight:700}
@media (max-width:340px){.hero-q-options{grid-template-columns:1fr}}

/* les 4 chiffres deviennent une ligne de faits */
.facts-line{background:var(--paper);border-bottom:1px solid var(--line)}
.facts-line p{margin:0;padding:20px 0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.facts-line p strong{color:var(--navy);font-family:var(--serif);font-style:italic;font-weight:400;margin-right:.3em}
.facts-line b{color:var(--ink)}

/* « Trois étapes » en frise 1 → 2 → 3 */
.paths{counter-reset:etape;gap:0;position:relative}
.paths::before{content:"";position:absolute;left:16.66%;right:16.66%;top:24px;height:2px;background:var(--line)}
.path,.path.featured{background:none;border:0;border-radius:0;box-shadow:none;padding:0 24px;color:var(--ink);align-items:center;text-align:center}
.path:hover{transform:none;box-shadow:none}
.path::before{counter-increment:etape;content:counter(etape);position:relative;z-index:1;width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--navy);color:var(--navy);font-family:var(--display);font-weight:800;font-size:1.2rem}
.path:hover::before{background:var(--navy);color:#fff}
.path .ico{display:none}
.path .tagline{position:static}
.path.featured p{color:var(--ink-soft)}
.path.featured .link-arrow{color:var(--blue-text)}
@media (max-width:860px){
  .paths{gap:36px}
  .paths::before{display:none}
}

/* mobile : seule la carte « Votre rapport » reste dans le hero */
@media (max-width:860px){
  .visual .paper,.visual .float-stamp{display:none}
  .hero .wrap{padding-block:48px 56px}
}

/* bloc partenaire : les tuiles chiffrées sont devenues une phrase */
.partner-facts{display:none}

/* ---------- 7. « Comprendre » : articles numérotés, notes marginales, liste de mentions ---------- */
.eyebrow.art{font-family:var(--serif);font-style:normal;font-weight:600;font-variant:small-caps;text-transform:none;letter-spacing:.03em;font-size:1.05rem;color:var(--navy)}
.mnote{font-family:var(--serif);font-style:italic;font-size:.92rem;line-height:1.5;color:var(--ink-soft);border-left:2px solid var(--blue-300);padding-left:12px;margin:0}
@media (min-width:1200px){
  .block:has(> .mnote){display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:36px;row-gap:20px;align-items:start}
  .block:has(> .mnote) > *{grid-column:1}
  .block > .mnote{grid-column:2;grid-row:1 / span 3}
}
#contenu .tiles{counter-reset:mention;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
#contenu .tile{counter-increment:mention;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 0;gap:18px}
#contenu .tile .ico{display:none}
#contenu .tile::before{content:counter(mention) "°";flex:none;min-width:2.2em;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--navy)}
#contenu .tile h3{font-size:1.05rem}

/* ---------- 8. Rapport du diagnostic présenté comme un document ---------- */
.doc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.doc-meta{grid-column:1 / -1;grid-row:2}
.doc-id strong{display:block;font-family:var(--display);font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.doc-id span{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.doc-meta{display:flex;gap:22px;margin:0}
.doc-meta dt{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute)}
.doc-meta dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.doc-stamp{transform:rotate(-6deg);border:2.5px solid currentColor;border-radius:6px;padding:8px 12px;font-family:var(--mono);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.doc-stamp.req{color:var(--alert)}
.doc-stamp.cond{color:var(--warn)}
.doc-stamp.ok{color:var(--ok)}
.doc-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.doc-note{margin:0;font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--ink-mute);max-width:70ch}
@media (max-width:700px){
  .doc-stamp{font-size:.68rem;padding:6px 9px}
}
@media print{
  @page{margin:16mm}
  html,body{background:#fff!important}
  body{padding-bottom:0!important}
  .site-header,.site-footer,.page-hero,.method,.progress,.send,.partner-mini,#step3 > .panel-actions,.cc-banner,.cc-modal,.doc-actions .btn,.cta-band,.skip-link{display:none!important}
  main section{padding:0!important;margin:0!important}
  .diag-shell,.diag,.panel{box-shadow:none!important;border:0!important;padding:0!important;margin:0!important;background:#fff!important}
  .r-item,.doc-head{break-inside:avoid}
  .ring circle.val{transition:none!important}
}

/* le diagnostic ne passe plus sous l'en-tête fixe quand on y arrive */
#diag{scroll-margin-top:96px}

/* crédit VizOn cliquable dans le pied de page */
.credit-link{color:inherit;text-decoration:none}
.credit-link:hover,.credit-link:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* logo OPTIM HR du pied de page : la zone cliquable s'arrête au logo */
.foot-partner a.logo-box{align-self:flex-start;width:fit-content}