/* =========================================================================
   Enkadenn — feuille de style principale
   Site de sensibilisation à la gestion de crise et à la résilience.
   Charte sobre : sans-serif, neutres froids, accent bleu profond, angles nets.
   Thème clair par défaut, thème sombre pris en charge.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Inter (SIL OFL 1.1 — voir assets/fonts/LICENSE.txt), servi depuis le site :
   aucun appel à un CDN tiers, donc aucune fuite d'IP visiteur (RGPD) et un
   rendu identique d'une machine à l'autre. Fichier variable 400→700, sous-
   ensemble latin uniquement : le site n'emploie aucun caractère latin étendu.
   Les quelques signes hors sous-ensemble (→ ↗ ≈ ⚠) retombent sur la police
   système, comme aujourd'hui.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  /* neutres froids — le fond est blanc, les aplats servent à séparer */
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F6F7; --inset:#EDEFF1;
  --ink:#16181D; --muted:#525A64; --faint:#767E88; --line:#DDE0E4; --line-strong:#C3C8CE;

  /* accent unique : bleu profond, institutionnel sans être un bleu d'État */
  --brand:#1B4B8F; --brand-strong:#143869; --brand-tint:#EAF0F8;
  --green:#1E6B4F; --alert:#B32B18; --alert-strong:#8A2012; --alert-tint:#FBEFEC; --alert-line:#EBCCC5;

  --ac:#1B4B8F; --ac-tint:#EAF0F8;

  /* teintes par profil : dérivées sombres et peu saturées, pour le repérage */
  --p:#1B4B8F; --p-tint:#EAF0F8;
  --e:#14565C; --e-tint:#E7F1F1;
  --a:#4A4374; --a-tint:#EEEDF5;
  --v:#7D4A21; --v-tint:#F6EFE8;

  --radius:4px; --radius-sm:3px;
  /* pas d'ombre portée dans le flux : les bordures structurent. Réservée aux calques. */
  --shadow:0 6px 20px -8px rgba(16,24,40,.22), 0 1px 3px rgba(16,24,40,.10);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --wrap:1200px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1115; --surface:#171A20; --surface-2:#1D2128; --inset:#242932;
    --ink:#EDEFF2; --muted:#A5AEBA; --faint:#7F8894; --line:#2B3038; --line-strong:#3C434D;
    --brand:#7FA9E6; --brand-strong:#9DBFF0; --brand-tint:#182234;
    --green:#5FB58F; --alert:#F08A74; --alert-strong:#F5A896; --alert-tint:#2A1815; --alert-line:#46251F;
    --ac:#7FA9E6; --ac-tint:#182234;
    --p:#7FA9E6; --p-tint:#182234;
    --e:#5FAEB4; --e-tint:#132527;
    --a:#A49CD8; --a-tint:#211F31;
    --v:#CE9663; --v-tint:#2A1E12;
    --shadow:0 6px 22px -8px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1115; --surface:#171A20; --surface-2:#1D2128; --inset:#242932;
  --ink:#EDEFF2; --muted:#A5AEBA; --faint:#7F8894; --line:#2B3038; --line-strong:#3C434D;
  --brand:#7FA9E6; --brand-strong:#9DBFF0; --brand-tint:#182234;
  --green:#5FB58F; --alert:#F08A74; --alert-strong:#F5A896; --alert-tint:#2A1815; --alert-line:#46251F;
  --ac:#7FA9E6; --ac-tint:#182234;
  --p:#7FA9E6; --p-tint:#182234; --e:#5FAEB4; --e-tint:#132527;
  --a:#A49CD8; --a-tint:#211F31; --v:#CE9663; --v-tint:#2A1E12;
  --shadow:0 6px 22px -8px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* accent courant piloté par le profil de la page */
body[data-profile="particulier"]{--ac:var(--p);--ac-tint:var(--p-tint)}
body[data-profile="entreprise"]{--ac:var(--e);--ac-tint:var(--e-tint)}
body[data-profile="administration"]{--ac:var(--a);--ac-tint:var(--a-tint)}
body[data-profile="vulnerable"]{--ac:var(--v);--ac-tint:var(--v-tint)}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:700;text-wrap:balance;line-height:1.18;letter-spacing:-.021em}
p{margin:0}
a{color:var(--brand)}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* chapeau de section : étiquette technique, pas une accroche décorative */
.eyebrow{font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.11em;text-transform:uppercase;color:var(--ac);font-weight:600;margin:0}
.lead{color:var(--muted);font-size:17.5px;max-width:66ch}
main section{padding:60px 0;border-top:1px solid var(--line)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0;top:0}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:600;font-size:15px;padding:12px 20px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-strong);color:#fff}
.btn-ac{background:var(--ac);color:#fff}
.btn-ac:hover{color:#fff;background:color-mix(in srgb,var(--ac) 82%,#000)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ac);color:var(--ac)}

/* ---------- Header ---------- */
/* En-tête opaque en deux étages : identité + outils, puis barre de navigation. */
.topbar{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line-strong)}
.topbar .row{display:flex;align-items:center;gap:14px;min-height:62px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:700}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.brand small{font-size:11px;color:var(--faint);font-weight:500;display:block;margin-top:1px;font-style:normal;letter-spacing:.01em}
.navspace{flex:1}

/* barre de navigation principale (sections du site) */
.mainnav{background:var(--surface);border-top:1px solid var(--line)}
.mainnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:13px 14px;font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;transition:color .12s,border-color .12s,background .12s}
.mainnav a:hover{color:var(--ink);background:var(--surface-2)}
.mainnav a[aria-current="page"],.mainnav a[aria-current="true"]{color:var(--ac);border-bottom-color:var(--ac)}
.mainnav .navdot{width:7px;height:7px;flex:none;background:currentColor;opacity:.55}
.mainnav a[aria-current="page"] .navdot{opacity:1}
.mainnav .navsep{flex:none;width:1px;background:var(--line);margin:9px 8px}

/* Sous-menu d'un espace : déroulé au survol ET au focus clavier, sans JS.
   Les liens du sous-menu suivent leur parent dans l'ordre du DOM, donc la
   tabulation les traverse naturellement. Sur écran tactile il n'y a pas de
   survol : toucher l'onglet ouvre l'espace, qui liste les mêmes entrées. */
.navitem{position:relative;flex:none}
.navitem > a{gap:6px}
.navchev{opacity:.45;transition:transform .14s,opacity .14s}
.navitem:hover > a .navchev,.navitem:focus-within > a .navchev{opacity:1;transform:rotate(-180deg)}

/* Sous-menu d'un espace : déroulé au survol ET au focus clavier, sans JS. */
.subnav{position:absolute;top:calc(100% - 1px);left:0;z-index:70;min-width:264px;padding:7px;
  background:var(--surface);border:1px solid var(--line-strong);border-top:2px solid var(--ac);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);
  /* Masqué par découpe, PAS par visibility/display : ces deux-là retirent les
     liens du parcours clavier, et :focus-within ne pourrait jamais s'ouvrir. */
  opacity:0;clip-path:inset(50%);pointer-events:none;
  transform:translateY(-4px);transition:opacity .13s,transform .13s}
.navitem:hover > .subnav,.navitem:focus-within > .subnav{
  opacity:1;clip-path:none;pointer-events:auto;transform:none}
.subnav a{display:block;padding:9px 10px;font-size:14px;font-weight:500;line-height:1.35;
  color:var(--muted);text-decoration:none;border-radius:var(--radius-sm);border-bottom:0;white-space:normal}
.subnav a:hover{background:var(--surface-2);color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--ac);font-weight:600}
/* Sépare l'auto-évaluation des fiches, puis les fiches des exercices. */
.subnav a.sub-rule{margin-top:6px;padding-top:13px;border-top:1px solid var(--line)}
/* La barre défile horizontalement quand elle ne tient pas, ce qui rognerait un
   menu absolu : on ne libère l'overflow — et donc les sous-menus — qu'au-delà
   de la largeur qu'elle réclame réellement (~1120 px en français, la langue la
   plus longue). En deçà, laisser overflow:visible ferait déborder toute la page
   horizontalement. */
@media (min-width:1160px){.mainnav .wrap{overflow:visible}}
@media (max-width:1159px){.subnav{display:none}.navchev{display:none}}

/* fil d'Ariane global */
.crumbs{background:var(--surface-2);border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;font-size:13px;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ac);text-decoration:underline}
.crumbs .sep{color:var(--line-strong)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* switcher (native <details>, fonctionne sans JS) */
.switcher{position:relative}
.switcher .switch-btn{list-style:none;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;background:var(--ac-tint);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);border-radius:var(--radius-sm);padding:7px 13px;cursor:pointer}
.switcher .switch-btn::-webkit-details-marker{display:none}
.switch-btn .sdot{width:8px;height:8px;background:var(--ac)}
.switch-btn .role-word{color:var(--faint);font-weight:600}
.switch-btn .lbl{color:var(--ink)}
.switch-btn .chev{transition:transform .15s}
.switcher[open] .switch-btn .chev{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:272px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;z-index:70}
.menu .mlabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.menu a{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink);padding:10px;border-radius:var(--radius-sm)}
.menu a:hover{background:var(--surface-2)}
.menu a[aria-current="true"]{background:var(--ac-tint)}
.menu a .mi{width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:none;font-size:16px}
.menu a small{font-weight:500;color:var(--faint);display:block;font-size:12px}
.menu .divider{height:1px;background:var(--line);margin:6px 4px}
.menu .home-link{color:var(--muted);font-size:13.5px}

.util{display:flex;align-items:center;gap:2px}
.util a,.util button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;text-decoration:none}
.util a:hover,.util button:hover{background:var(--surface-2);color:var(--ink)}
.util .sep{width:1px;height:20px;background:var(--line);margin:0 6px}
.hdr-country{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 9px;cursor:pointer;max-width:170px}
.hdr-country:hover{border-color:var(--line-strong);color:var(--ink)}
.langsw{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 9px;letter-spacing:.02em}
.langsw b{color:var(--ink)}
.langsw span{color:var(--line-strong);font-weight:400}
.langsw:hover{border-color:var(--line-strong);color:var(--ink)}
.alert-btn{background:var(--alert)!important;color:#fff!important;border-radius:var(--radius-sm)}
.alert-btn:hover{background:var(--alert-strong)!important;color:#fff!important}
@media (max-width:920px){.brand small{display:none}.util .label-hide{display:none}.hdr-country{max-width:118px}}
/* En dessous de 900px la navigation défile : on signale le débord par un fondu. */
@media (max-width:900px){
  .mainnav{position:relative}
  .mainnav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--surface))}
}
/* Sur mobile l'en-tête tient sur deux à trois rangées : le figer mangerait l'écran. */
@media (max-width:760px){
  .topbar{position:static}
  .util{flex-wrap:wrap;row-gap:4px}
  .util .sep{display:none}
  .mainnav a{padding:11px 12px;font-size:14px}
}

/* ---------- Reprise du dernier espace (accueil) ---------- */
/* Encart de la zone de titre, dans la colonne de texte — pas un bandeau
   pleine largeur, qui empilait une rangée de plus sous l'en-tête. */
.resume{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;width:max-content;max-width:100%;
  margin:22px 0 0;padding:11px 15px;font-size:14px;
  background:var(--surface);border:1px solid var(--line-strong);border-left:3px solid var(--brand);border-radius:var(--radius-sm)}
/* `hidden` doit l'emporter sur le display:flex ci-dessus, sinon app.js
   ne peut plus masquer l'encart au premier passage. */
.resume[hidden]{display:none}
.resume a{font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.resume a:hover{text-decoration:underline}
.resume .dismiss{background:none;border:0;padding:0;color:var(--faint);cursor:pointer;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.resume .dismiss:hover{color:var(--ink)}

/* ---------- Bandeau app compagnon (Kit 72h) ---------- */
.appbar{background:var(--brand-tint);border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;gap:13px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;font-size:14px}
.appbar-ico{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.appbar-txt{margin:0;color:var(--muted);flex:1 1 320px;min-width:0;line-height:1.4}
.appbar-txt b{color:var(--ink);font-weight:700}
.appbar-cta{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:var(--radius);white-space:nowrap;flex:none;transition:background .12s}
.appbar-cta:hover{background:var(--brand-strong);color:#fff}
.appbar-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:20px;line-height:1;padding:3px 7px;border-radius:8px}
.appbar-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
@media (max-width:560px){.appbar-txt{flex-basis:100%}}

/* ---------- Gateway ---------- */
.gate{padding:56px 0 60px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.gate .center{max-width:720px;margin:0 0 36px}
.gate h1{font-size:clamp(29px,3.9vw,42px);font-weight:700;margin:12px 0 14px}
.gate h1 .u{color:var(--brand)}
.gate .center .lead{margin:0;font-size:17px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.choice{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--cc);border-radius:var(--radius);padding:24px 22px 22px;text-align:left;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;transition:border-color .13s,background .13s}
.choice:hover{border-color:color-mix(in srgb,var(--cc) 55%,var(--line))}
.choice .cico{width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--cc-tint);color:var(--cc)}
.choice h2{font-size:20px}
.choice p{font-size:14.5px;color:var(--muted)}
.choice .persona{font-size:12.5px;color:var(--faint);margin-top:-2px}
.choice .enter{margin-top:auto;padding-top:6px;font-weight:700;font-size:14.5px;color:var(--cc);display:inline-flex;align-items:center;gap:7px}
.choice .num{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:12px;color:var(--faint)}
@media (max-width:840px){.choices{grid-template-columns:1fr}}

/* ---------- Espace (pages profil) ---------- */
.p-hero{padding:48px 0 48px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.p-hero .kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ac);background:var(--surface);border:1px solid var(--line-strong);padding:6px 11px;border-radius:var(--radius-sm);margin-bottom:16px}
.p-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.p-hero h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;margin:6px 0 14px}
.p-hero .lead{font-size:18px;margin-bottom:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.fineprint{font-size:13.5px;color:var(--faint);display:flex;align-items:center;gap:8px}

.ready{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px}
.ready .rtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ready .rtop .eyebrow{color:var(--ac)}
.ring-wrap{display:flex;align-items:center;gap:20px;margin:8px 0 16px}
.score b{font-size:30px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.score{font-family:var(--mono);font-size:13px;color:var(--muted)}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.checklist li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.checklist .dot{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px}
.checklist .done{background:var(--ac-tint);color:var(--ac)}
.checklist .todo{background:var(--surface-2);color:var(--faint);border:1px dashed var(--line)}
.rfoot{margin-top:15px;font-size:13px}
.rfoot a{color:var(--ac);font-weight:600;text-decoration:none}
.rfoot a:hover{text-decoration:underline}
@media (max-width:840px){.p-hero-grid{grid-template-columns:1fr;gap:30px}.ready{order:2}}

.sec-head{max-width:64ch;margin-bottom:32px}
.sec-head h2{font-size:clamp(22px,2.4vw,29px);font-weight:700;margin:10px 0 10px}
.prio{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;transition:border-color .13s,background .13s}
.pcard:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.pcard .pi{width:42px;height:42px;border-radius:var(--radius);background:var(--ac-tint);color:var(--ac);display:grid;place-items:center;font-size:19px}
.pcard b{font-size:15.5px}
.pcard p{font-size:13.5px;color:var(--muted)}
.pcard .go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--ac)}
@media (max-width:900px){.prio{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.prio{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.panel.accent{background:var(--ac);color:#fff;border-color:transparent}
.panel.accent .eyebrow{color:#fff;opacity:.8}
.panel h3{font-size:20px;font-weight:700;margin:10px 0 10px}
.panel p{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.panel.accent p{color:rgba(255,255,255,.9)}
.panel.accent .btn{background:#fff;color:var(--ac)}
.steps{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px;counter-reset:s}
.steps li{display:flex;gap:12px;font-size:14px;color:rgba(255,255,255,.92)}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-weight:700;font-size:12px;width:24px;height:24px;border-radius:var(--radius-sm);background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.tool{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.tool .ti{width:34px;height:34px;border-radius:9px;background:var(--ac-tint);color:var(--ac);display:grid;place-items:center;flex:none;font-size:17px}
.tool b{font-size:14px;display:block}
.tool small{font-size:12.5px;color:var(--faint)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.badge{font-size:12px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent);padding:5px 11px;border-radius:var(--radius)}
@media (max-width:800px){.split{grid-template-columns:1fr}.toolgrid{grid-template-columns:1fr}}

.risks{display:flex;flex-wrap:wrap;gap:11px}
.risk{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);padding:11px 15px;border-radius:var(--radius);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);transition:border-color .12s}
.risk:hover{border-color:var(--ac)}
.risk svg{color:var(--ac)}

/* ---------- Contenu éditorial générique (pages internes) ---------- */
.page-hero{padding:52px 0 10px}
.page-hero h1{font-size:clamp(27px,3.2vw,38px);font-weight:700;margin:10px 0 14px}
.prose{max-width:72ch}
.prose h2{font-size:22px;font-weight:700;margin:32px 0 12px}
.prose h3{font-size:18px;font-weight:700;margin:22px 0 8px}
.prose p{margin:0 0 14px;color:var(--muted)}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--muted)}
.prose li{margin:6px 0}
.prose a{color:var(--brand);font-weight:600}
.note{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:var(--radius);padding:16px 18px;margin:18px 0;color:var(--muted);font-size:14.5px}
.tablewrap{overflow-x:auto;margin:16px 0}
table.tbl{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
table.tbl th,table.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}

/* ---------- Alert (module + page) ---------- */
#alerte,.alert-section{background:var(--alert-tint);border-top:1px solid var(--alert-line);border-bottom:1px solid var(--alert-line)}
.alert-box{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.alert-ico{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--alert);display:grid;place-items:center;flex:none}
/* Le titre principal du bandeau d'alerte est un h1 depuis l'audit SEO. */
.alert-box h1,.alert-box h2{font-size:22px;font-weight:700;color:var(--alert-strong)}
.alert-box .eyebrow{color:var(--alert)}
.alert-box p{color:var(--muted);margin:8px 0 18px;max-width:66ch}
.official{display:flex;flex-wrap:wrap;gap:10px}
.official a{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--alert-line);padding:11px 14px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:14px;color:var(--ink);transition:border-color .12s}
.official a:hover{border-color:var(--alert)}
.official a small{color:var(--faint);font-weight:500;display:block;font-size:11.5px;line-height:1.1}
.official a .oi{width:24px;height:24px;border-radius:6px;background:var(--alert-tint);display:grid;place-items:center;color:var(--alert);flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700}
.disclaimer{margin-top:16px;font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:baseline}
@media (max-width:640px){.alert-box{grid-template-columns:1fr}}

/* ---- Index des pages pays (chemin d'exploration de /alerte/) ---- */
.ctry-list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ctry-list a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14.5px;
  font-weight:600;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--line);border-left:1px solid var(--line);transition:background .12s}
.ctry-list a:hover{background:var(--surface-2);color:var(--brand)}
.ctry-list .cf{font-size:16px;line-height:1}

/* ---------- Footer ---------- */
/* Trois étages : bandeau d'avertissement, colonnes de liens, barre légale. */
footer{background:var(--surface-2);border-top:1px solid var(--line-strong);margin-top:0}
.foot-warn{background:var(--alert-tint);border-bottom:1px solid var(--alert-line)}
.foot-warn .wrap{display:flex;gap:11px;align-items:baseline;padding-top:15px;padding-bottom:15px;font-size:13.5px;color:var(--muted);line-height:1.5}
.foot-warn b{color:var(--alert-strong);font-weight:700}
.foot-main{padding:44px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);margin:0 0 14px;font-family:var(--mono);font-weight:600}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-grid a{color:var(--muted);text-decoration:none;font-size:14px}
.foot-grid a:hover{color:var(--brand);text-decoration:underline}
.foot-brand p{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:38ch;line-height:1.55}
.foot-meta{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:6px;font-size:12.5px;color:var(--faint)}
.foot-meta li{display:flex;gap:8px;align-items:baseline}
.foot-meta b{color:var(--muted);font-weight:600;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;min-width:92px;flex:none}
.foot-legal{border-top:1px solid var(--line-strong);background:var(--paper)}
.foot-legal .wrap{display:flex;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);padding-top:16px;padding-bottom:16px}
.foot-legal nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--brand);text-decoration:underline}
.badge-a11y{color:var(--green);font-weight:600}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- FALC (facile à lire et à comprendre) ---------- */
body.falc{font-size:17.5px;line-height:1.78}
body.falc .lead,body.falc .prose p,body.falc .pcard p{font-size:16.5px}
.falc-only{display:none}
body.falc .falc-only{display:revert}
body.falc .std-only{display:none}

/* ---------- Réductions de mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Impression (kit papier, noir & blanc) ---------- */
@media print{
  /* Le rendu écran est calibré pour un écran : sur papier, 16 px donnent un
     corps de 12 pt et des titres démesurés. On repasse en points, avec une
     échelle serrée, et on retire ce qui n'apporte rien à l'impression. */
  @page{margin:14mm}
  :root{--paper:#fff;--surface:#fff;--ink:#000;--muted:#222;--line:#999;--line-strong:#666;--ac:#000;--ac-tint:#fff}
  /* L'accent de l'espace est posé sur <body>, plus spécifique que :root : sans
     cette ligne, une fiche s'imprimerait en couleur sur une imprimante N&B. */
  body[data-profile]{--ac:#000;--ac-tint:#fff}
  html{font-size:10pt}
  body{font-size:10pt;line-height:1.42}

  .topbar,.mainnav,.crumbs,.util,.switcher,.appbar,.cta-row,.badges,.rfoot,
  footer .foot-main,.foot-legal nav,.skip,.hero-art,.page-art,.btn-print,.btn-add,
  .person-x,.hdr-country,.tts-btn,
  /* Les exemples illustrent la saisie à l'écran ; sur la feuille remplie à la
     main, ils ne font qu'occuper la place. */
  .fiche-example{display:none!important}

  /* La colonne de droite repasse sous le contenu : sur papier, pas de rail. */
  .page-hero .wrap{display:block!important;padding-right:0!important}
  .page-rail{margin-top:8mm}

  /* Les tailles d'écran sont posées par des sélecteurs plus spécifiques
     (.page-hero h1, .sec-head h2…) : sur papier, on tranche. */
  h1{font-size:16pt!important;line-height:1.15;margin-bottom:4pt}
  h2{font-size:12pt!important;margin:10pt 0 4pt}
  h3{font-size:10.5pt!important;margin:8pt 0 3pt}
  .lead{font-size:10.5pt!important;max-width:none}
  .eyebrow{font-size:7.5pt;letter-spacing:.08em}
  .title-row{display:block}
  .fillfield label{font-size:9pt;margin-bottom:1pt}
  .in-fill{font-size:10pt;padding:4pt 5pt;min-height:24pt;border:1px solid #999;background:#fff}
  .ticklist li{font-size:10pt;padding-left:14pt}
  .ticklist li::before{width:4pt;height:4pt}
  .memo{padding:8pt 10pt;margin-bottom:8pt}
  .memo h2{font-size:11pt!important}
  .memo .cue,.memo ol.gqs-steps li{font-size:9.5pt}
  .fiche-src{font-size:8.5pt;padding:8pt 10pt}
  .fiche-src h3{font-size:9pt!important}
  .note,.tip,.fiche-num span{font-size:9.5pt}
  .fiche-num b{font-size:16pt!important}
  table.tbl{font-size:9pt;min-width:0}
  table.tbl th,table.tbl td{padding:4pt 6pt}
  .foot-warn .wrap{font-size:8.5pt;padding:6pt 0}
  .foot-legal .wrap{font-size:7.5pt}

  .p-hero,.gate,.alert-section,#alerte{background:#fff!important}
  a{color:#000;text-decoration:underline}
  main section,.p-hero,.page-hero{padding:6pt 0;border:0}
  .ready,.panel,.pcard,.tool,.official a,.qlink,.xcard{box-shadow:none;border:1px solid #999}
  .foot-warn{border:1px solid #000}
  h1,h2,h3{break-after:avoid}
}

/* =========================================================================
   Auto-évaluation (diagnostic)
   ========================================================================= */
.diag-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
@media (max-width:900px){.diag-layout{grid-template-columns:1fr}}
.qgroup{display:grid;gap:12px}
.qgroup h2{font-size:18px;font-weight:700;margin:20px 0 4px}
.qcard{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;cursor:pointer;transition:border-color .12s,background .12s}
.qcard:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line))}
.qcard input{position:absolute;opacity:0;width:0;height:0}
.qcard .box{width:24px;height:24px;flex:none;border:2px solid var(--line);border-radius:7px;display:grid;place-items:center;margin-top:1px;transition:background .12s,border-color .12s;color:#fff}
.qcard .box svg{opacity:0;transition:opacity .1s}
.qcard input:checked ~ .box{background:var(--ac);border-color:var(--ac)}
.qcard input:checked ~ .box svg{opacity:1}
.qcard input:focus-visible ~ .box{outline:3px solid var(--ac);outline-offset:2px}
.qcard .qtext b{display:block;font-size:15px}
.qcard .qtext small{color:var(--faint);font-size:13px}
.qcard:has(input:checked){background:var(--ac-tint);border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.diag-side{position:sticky;top:88px}
.diag-side .btn{width:100%;justify-content:center;margin-top:14px}
.count{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;margin-top:6px}

#diag-result{scroll-margin-top:84px}
.result-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:var(--ac-tint);border:1px solid color-mix(in srgb,var(--ac) 30%,var(--line));border-radius:var(--radius);padding:24px}
.result-head .rmsg h2{font-size:24px;font-weight:700}
.result-head .rmsg p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:52ch}
.plan{display:grid;gap:12px;margin-top:22px}
.plan-item{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:var(--radius-sm);padding:16px 18px}
.plan-item .pn{font-family:var(--mono);font-weight:700;color:var(--ac);flex:none}
.plan-item b{font-size:15px;display:block}
.plan-item p{font-size:13.5px;color:var(--muted);margin:4px 0 6px}
.plan-item a{font-weight:600;font-size:13.5px;color:var(--ac);text-decoration:none}
.plan-item a:hover{text-decoration:underline}
.plan-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;color:var(--muted);font-size:14.5px}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.breadcrumb{font-size:13px;color:var(--faint);margin-bottom:6px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ac)}

/* =========================================================================
   Fiches imprimables
   ========================================================================= */
.fiche{max-width:820px}
.fiche .meta{font-size:13px;color:var(--faint);margin-bottom:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fiche .tag{background:var(--ac-tint);color:var(--ac);font-weight:600;font-size:12px;padding:4px 10px;border-radius:var(--radius)}
.fiche h2{font-size:20px;font-weight:700;margin:28px 0 12px}
/* Listes de points à vérifier — non interactives : les seules cases à cocher
   du site sont celles de l'auto-évaluation. */
.ticklist{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.ticklist li{position:relative;padding-left:19px;font-size:15px;line-height:1.5;color:var(--ink)}
.ticklist li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--ac)}
.fillfield{display:flex;flex-direction:column;gap:5px;margin:0 0 14px}
.fillfield label{font-weight:600;font-size:14px}
.in-fill{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;transition:border-color .13s,box-shadow .13s}
.in-fill::placeholder{color:var(--faint)}
.in-fill:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.in-fill:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-tint)}
.fiche-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0 26px}
.tts-btn{display:inline-flex;align-items:center;gap:8px}
/* ---- Fiche par personne (groupe répétable) ---- */
.people{margin:0 0 20px}
.people-list{display:grid;gap:14px;margin-bottom:12px}
.person{border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:var(--radius-sm);
  padding:15px 17px 4px;background:var(--surface)}
.person-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.person-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);font-weight:600}
.person-x{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--faint);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.person-x:hover{color:var(--alert)}
.person-x[hidden]{display:none}
.btn-add{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;
  color:var(--ac);background:var(--surface);border:1px dashed color-mix(in srgb,var(--ac) 50%,var(--line));
  border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;
  transition:background .12s,border-color .12s}
.btn-add:hover{background:var(--ac-tint);border-style:solid}


/* ---- Gestes qui sauvent : mémos numérotés ---- */
.gqs-warn{display:flex;gap:12px;align-items:flex-start;background:var(--alert-tint);border:1px solid var(--alert-line);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 22px;font-size:14px;line-height:1.5}
.gqs-warn svg{flex:none;color:var(--alert);margin-top:1px}
.gqs-warn a{color:var(--alert-strong);font-weight:600}
.memo{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:16px 18px;margin:0 0 14px}
.memo h2{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-size:18px;font-weight:700;margin:0 0 4px}
.memo h2 svg{color:var(--ac);flex:none}
.memo .cue{color:var(--muted);font-size:14px;margin:0 0 12px}
.memo ol.gqs-steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
.memo ol.gqs-steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink)}
.memo ol.gqs-steps li::before{counter-increment:st;content:counter(st);flex:none;width:24px;height:24px;border-radius:var(--radius-sm);background:var(--ac-tint);color:var(--ac);font-weight:700;font-size:13px;font-family:var(--mono);display:grid;place-items:center;margin-top:1px}

/* ---- Frise « Mémoire des catastrophes » ---- */
.tl-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px}
.tl-filters select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer}
.tl-filters select:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.tl-filters select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-tint)}
.tl-count{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tl-item{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:start}
.tl-item[hidden]{display:none}
.tl-year{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ac);text-align:right;padding-top:13px}
.tl-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:14px 16px}
.tl-card h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:0 0 6px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tl-flags{font-size:15px;letter-spacing:1px}
.tl-toll{color:var(--ink);font-size:14px;margin:0 0 6px}
.tl-learn{color:var(--muted);font-size:14px;margin:0 0 8px}
.tl-card a{font-size:13px;font-weight:600;color:var(--ac);text-decoration:none}
.tl-card a:hover{text-decoration:underline}
.tl-empty{color:var(--muted);font-size:15px;padding:18px 0}
@media(max-width:560px){.tl-item{grid-template-columns:1fr;gap:2px}.tl-year{text-align:left;padding-top:0}}

/* ---- « Qui fait quoi ? » : schéma des acteurs ---- */
.actors{display:grid;gap:0;margin:8px 0 4px}
.actor-stage{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:16px 18px}
.actor-stage h2{font-family:var(--serif);font-size:18px;font-weight:700;margin:0 0 12px}
.actor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.actor-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--paper)}
.actor-card .an{font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.actor-card .ar{color:var(--muted);font-size:13.5px;margin-top:5px;display:block}
.actor-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius);flex:none}
.actor-badge.ue{background:var(--e-tint);color:var(--e)}
.actor-badge.nat{background:var(--p-tint);color:var(--p)}
.actor-arrow{display:grid;place-items:center;color:var(--faint);padding:5px 0}

@media print{
  .diag-side,.breadcrumb,.fiche-actions,.result-actions,.count,.fiche-consent,.tl-filters{display:none!important}
  .qcard{break-inside:avoid;border:1px solid #999}
  .plan-item,.ticklist li,.memo,.tl-item,.actor-stage,.actor-card,.person{break-inside:avoid}
  .in-fill{border:0;border-bottom:1px solid #000;border-radius:0;background:transparent;padding:2px 0;color:#000}
}

/* =========================================================================
   Sélecteur de pays (page « En cas d'alerte »)
   ========================================================================= */
.country-picker{display:flex;flex-direction:column;gap:16px;max-width:640px}
.country-select{font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2353636A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;-webkit-appearance:none;appearance:none;padding-right:40px}
.country-select:hover{border-color:var(--alert)}
.country-card{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--alert-line);
  border-left:4px solid var(--alert);border-radius:var(--radius);padding:18px 20px}
.country-card .cflag{font-size:34px;line-height:1;flex:none}
.country-card b{font-size:16px}
.country-card p{font-size:14.5px;color:var(--muted);margin:4px 0 8px}
.country-card a{font-weight:600;font-size:14px;color:var(--alert-strong);text-decoration:none}
.country-card a:hover{text-decoration:underline}
.country-fallback{color:var(--muted);font-size:14.5px}

/* Numéros d'urgence (page pays) */
.numbers{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.numbers li{display:flex;align-items:baseline;gap:12px;font-size:15px}
.numbers li b{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--alert-strong);min-width:66px;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .numbers li b{color:var(--alert)}
.numbers li span{color:var(--muted)}

/* =========================================================================
   Compléments de mise en page
   ========================================================================= */
/* Les cartes sont délimitées par une bordure, jamais par une ombre. */
.pcard,.tool,.acard,.choice,.panel{box-shadow:none}

/* En-tête : correction responsive (une ligne propre, alerte non tronquée) */
.alert-btn{white-space:nowrap}
.brand b{white-space:nowrap}
@media (max-width:820px){
  .topbar .row{gap:9px 8px;min-height:0;padding-top:9px;padding-bottom:9px}
  .switch-btn{padding:6px 11px;font-size:13px}
  .util{gap:2px}
  .util button,.util a{padding:7px 8px}
  .langsw{padding:5px 8px;font-size:12px}
  .alert-btn{font-size:12.5px;padding:8px 11px}
}
@media (max-width:520px){
  .brand small{display:none}
  .util .label-hide{display:none}
}

/* Hero éditorial : panneau visuel (remplace/complète l'anneau) */
.hero-art{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(158deg, color-mix(in srgb,var(--ac) 88%,#fff) 0%, var(--ac) 46%, color-mix(in srgb,var(--ac) 62%,#000) 100%)}
.hero-art .glyph{position:absolute;inset:0;display:grid;place-items:center}
.hero-art .glyph svg{width:42%;height:42%;stroke:#fff;opacity:.9}
.hero-art .cap{position:absolute;left:18px;bottom:15px;color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;opacity:.95;max-width:80%}
@media (max-width:840px){.hero-art{max-width:340px;margin-top:6px}}

/* Parcours numéroté (01 → 04) */
.journey{display:grid;gap:0;margin-top:6px}
.jstep{display:grid;grid-template-columns:82px 1fr auto;gap:22px;align-items:center;padding:20px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .15s}
.jstep:first-child{border-top:0}
.jstep:hover{padding-left:6px}
.jstep .no{font-family:var(--mono);font-size:34px;font-weight:600;color:var(--ac);line-height:1;font-variant-numeric:tabular-nums}
.jstep h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 3px}
.jstep p{font-size:14px;color:var(--muted);margin:0;max-width:56ch}
.jstep .go{color:var(--green);font-weight:700;font-size:13.5px;white-space:nowrap}
@media (max-width:640px){.jstep{grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:6px 16px}.jstep .no{font-size:34px;grid-row:span 2}.jstep .go{grid-column:2}}

/* Icônes SVG dans chips/tuiles (remplacent les emoji) */
.i-chip{display:inline-grid;place-items:center}
.pcard .pi svg,.tool .ti svg,.acard .chip svg,.menu a .mi svg{width:60%;height:60%}
.kick .k-ico{display:inline-flex}.fico{display:inline-flex;vertical-align:-4px;color:var(--ac)}

/* =========================================================================
   Hero-art (panneau visuel du hero) + Explorateur de risques interactif
   ========================================================================= */
.hero-art{background:linear-gradient(158deg,color-mix(in srgb,var(--ac) 86%,#fff) 0%,var(--ac) 48%,color-mix(in srgb,var(--ac) 70%,#000) 100%)}
/* En thème sombre l'accent est une teinte claire : le panneau doit s'assombrir,
   sinon les traits blancs de l'illustration perdent leur contraste. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-art{background:linear-gradient(158deg,
    color-mix(in srgb,var(--ac) 40%,#0F1115) 0%,color-mix(in srgb,var(--ac) 26%,#0F1115) 55%,#0F1115 100%)}
}
:root[data-theme="dark"] .hero-art{background:linear-gradient(158deg,
  color-mix(in srgb,var(--ac) 40%,#0F1115) 0%,color-mix(in srgb,var(--ac) 26%,#0F1115) 55%,#0F1115 100%)}
.hero-art .ha-svg{position:absolute;inset:0;width:100%;height:100%}
/* Traits de l'illustration : blancs sur l'aplat d'accent, épaisseur constante
   quel que soit le facteur d'échelle du SVG. */
.hero-art .ha-line{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;vector-effect:non-scaling-stroke}
.hero-art .ha-soft{opacity:.5}
.hero-art .ha-fill{fill:#fff;opacity:.09;stroke:none}
.hero-art .cap{z-index:2}

/* ---- Colonne de droite des pages internes ----
   Elle porte l'illustration puis les sources officielles. En grille plutôt
   qu'en absolu : la colonne peut être plus haute que le titre sans jamais
   recouvrir le contenu qui suit. */
.page-hero .wrap{position:relative}
.page-rail{display:grid;gap:20px;align-content:start}
.page-art{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;
  background:linear-gradient(158deg,color-mix(in srgb,var(--ac) 86%,#fff) 0%,var(--ac) 48%,
    color-mix(in srgb,var(--ac) 70%,#000) 100%)}
.page-art svg{width:100%;height:100%;display:block}
.page-rail .fiche-src{margin:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .page-art{background:linear-gradient(158deg,
    color-mix(in srgb,var(--ac) 40%,#0F1115) 0%,color-mix(in srgb,var(--ac) 26%,#0F1115) 55%,#0F1115 100%)}
}
:root[data-theme="dark"] .page-art{background:linear-gradient(158deg,
  color-mix(in srgb,var(--ac) 40%,#0F1115) 0%,color-mix(in srgb,var(--ac) 26%,#0F1115) 55%,#0F1115 100%)}
.page-art .ha-line{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;vector-effect:non-scaling-stroke}
.page-art .ha-soft{opacity:.5}
.page-art .ha-fill{fill:#fff;opacity:.09;stroke:none}
@media (min-width:1121px){
  /* Deux enfants exactement — le contenu regroupé, puis le rail : une grille
     à deux colonnes se comporte alors sans surprise, quelle que soit la
     hauteur respective des deux. */
  .page-hero .wrap:has(.page-rail){display:grid;grid-template-columns:minmax(0,1fr) 272px;
    column-gap:44px;align-items:start}
  .page-rail{position:sticky;top:92px}
}
/* Trop étroit pour deux colonnes : les sources repassent sous le contenu et
   l'illustration s'efface — elle est agrément, pas information. */
@media (max-width:1120px){
  .page-rail .page-art{display:none}
  .page-rail{margin-top:26px}
}

/* ---- Titre et bouton d'impression sur une même ligne ---- */
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.title-row h1{flex:1 1 auto;min-width:0}
.btn-print{display:inline-flex;align-items:center;gap:7px;flex:none;margin-top:7px;
  font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 11px;cursor:pointer;
  white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.btn-print:hover{border-color:var(--line-strong);color:var(--ink);background:var(--surface-2)}

.re-hint{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.re-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.re-tab{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.re-tab svg{color:var(--ac)}
.re-tab:hover{border-color:var(--ac)}
.re-tab.is-active{background:var(--ac);border-color:var(--ac);color:#fff}
.re-tab.is-active svg{color:#fff}
.re-panel{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.re-panel + .re-panel{margin-top:14px}
.risk-explorer.js .re-panel + .re-panel{margin-top:0}
.re-fig{width:120px;height:120px;border-radius:var(--radius);background:var(--ac-tint);color:var(--ac);display:grid;place-items:center;flex:none}
.re-fig svg{width:58px;height:58px}
.re-body h3{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 8px}
.re-desc{color:var(--muted);font-size:16px;margin:0 0 20px;max-width:62ch}
.re-body h4{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 11px}
.gestes{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.gestes li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink)}
.gestes li svg{flex:none;margin-top:3px}
.risk-explorer.js .re-panel[hidden]{display:none}
.risk-explorer.js .re-panel{animation:re-fade .28s ease}
@keyframes re-fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.risk-explorer.js .re-panel{animation:none}}
@media (max-width:640px){.re-panel{grid-template-columns:1fr;gap:18px;padding:22px}.re-fig{width:76px;height:76px;border-radius:var(--radius)}.re-fig svg{width:40px;height:40px}}

/* Fiches enrichies : chiffre-clé, exemple, sources */
.fiche-num{display:flex;align-items:baseline;gap:14px;background:var(--ac-tint);border-radius:var(--radius);padding:14px 18px;margin:2px 0 16px}
.fiche-num b{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--ac);line-height:1;font-variant-numeric:tabular-nums}
.fiche-num span{color:var(--muted);font-size:14.5px}
.fiche-example{background:var(--surface);border:1px dashed color-mix(in srgb,var(--ac) 48%,var(--line));border-radius:var(--radius);padding:16px 18px;margin:8px 0 18px}
.fiche-example .ex-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ac);background:var(--ac-tint);padding:3px 9px;border-radius:var(--radius);margin-bottom:9px}
.fiche-example b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:7px}
.fiche-example p{font-size:14px;color:var(--muted);margin:0 0 4px}
.fiche-src{background:var(--surface-2);border-radius:var(--radius);padding:16px 18px;margin:22px 0 6px}
.fiche-src h3{font-family:var(--serif);font-size:16px;font-weight:600;margin:0 0 9px}
.fiche-src ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.fiche-src a{font-weight:600;font-size:14px;color:var(--ac);text-decoration:none}
.fiche-src a:hover{text-decoration:underline}

/* Comprendre : contexte pays + « où s'informer » par risque */
.cty-context{display:flex;align-items:center;gap:11px;margin:0 0 22px;flex-wrap:wrap}
.cty-lbl{color:var(--muted);font-weight:600;font-size:14px}
.cty-sel{width:auto;min-width:210px;font-size:14px;padding-top:9px;padding-bottom:9px}
.re-info-h{margin-top:22px!important}
.re-sources{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.src-chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;text-decoration:none;transition:border-color .12s,background .12s}
.src-chip:hover{border-color:var(--ac)}
.src-country{background:var(--ac-tint);color:var(--ac);border-color:color-mix(in srgb,var(--ac) 32%,transparent)}

/* Sélecteur de pays dans l'en-tête : flèche dessinée, pas de chrome natif */
.hdr-country{padding-right:27px;text-overflow:ellipsis;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23767E88' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.hdr-country:hover{border-color:var(--line-strong);color:var(--ink)}
@media (max-width:520px){.hdr-country{max-width:112px}}

/* Comprendre : signaux d'alerte + en savoir plus */
.re-signal{display:flex;gap:10px;align-items:flex-start;background:var(--alert-tint);border:1px solid var(--alert-line);border-radius:var(--radius);padding:12px 15px;margin:4px 0 18px;font-size:14.5px;color:var(--ink)}
.re-signal-ic{color:var(--alert);flex:none;margin-top:1px;display:inline-flex}
.re-signal b{color:var(--alert-strong)}
:root[data-theme="dark"] .re-signal b{color:var(--alert)}
.re-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:14px;color:var(--ac);text-decoration:none}
.re-more:hover{text-decoration:underline}

/* =========================================================================
   Accueil : accès directs, exploration, repères
   ========================================================================= */
/* Bande d'accès directs — les six gestes les plus demandés, sans détour. */
.quick{border-bottom:1px solid var(--line);background:var(--paper)}
.quick .wrap{padding-top:0;padding-bottom:0}
.qgrid{display:grid;grid-template-columns:repeat(6,1fr)}
.qlink{display:flex;flex-direction:column;gap:9px;padding:20px 18px 22px;text-decoration:none;color:inherit;border-left:1px solid var(--line);transition:background .12s}
.qgrid .qlink:first-child{border-left:0}
.qlink:hover{background:var(--surface-2)}
.qlink .qi{color:var(--ac)}
.qlink b{font-size:14px;font-weight:600;line-height:1.3}
.qlink small{font-size:12.5px;color:var(--faint);line-height:1.4}
@media (max-width:1000px){.qgrid{grid-template-columns:repeat(3,1fr)}.qgrid .qlink:nth-child(3n+1){border-left:0}.qgrid .qlink:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:600px){.qgrid{grid-template-columns:repeat(2,1fr)}.qgrid .qlink{border-left:1px solid var(--line)}.qgrid .qlink:nth-child(odd){border-left:0}.qgrid .qlink:nth-child(n+3){border-top:1px solid var(--line)}}

/* Exploration par thème */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xcard{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px;text-decoration:none;color:inherit;transition:border-color .13s,background .13s}
.xcard:hover{border-color:var(--brand);background:var(--surface-2)}
.xcard .xk{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.xcard h3{font-size:18px;font-weight:700}
.xcard p{font-size:14px;color:var(--muted)}
.xcard ul{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:5px}
.xcard li{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.xcard li::before{content:"";width:4px;height:4px;flex:none;background:var(--brand);transform:translateY(-2px)}
.xcard .go{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600;color:var(--brand)}
@media (max-width:900px){.xgrid{grid-template-columns:1fr}}