/* ---- tokens.css ---- */
/* Design tokens ICEV — palette, identiques à la page « Demander l'asile en France » validée. */
:root{
  --bg:#F8F7F3; --surface:#FFFFFF; --surface-alt:#F1EADA;
  --ink:#1B2A44; --ink-soft:#3A4658; --ink-faint:#4E5A70;
  --line:#E6DDC8;
  --green:#1F5A52; --green-soft:#DCEAE3; --green-ink:#163F39;
  --gold:#C98A2E; --gold-ink:#8A5C16; --gold-soft:#F6E7CE;
  --navy:#1B2A44; --navy-ink:#EFF1F5;
  --warn:#B5482E; --warn-soft:#F7E6DF;
  --shadow:0 2px 4px rgba(27,42,68,0.05), 0 16px 36px -18px rgba(27,42,68,0.24);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1B2E; --surface:#16233A; --surface-alt:#1B2C46;
    --ink:#F2EFE6; --ink-soft:#C3CAD9; --ink-faint:#8E9AB3;
    --line:#2A3B57;
    --green:#5FB39C; --green-soft:#173A31; --green-ink:#8FD2BC;
    --gold:#E8B15A; --gold-ink:#F6D9A0; --gold-soft:#2E2410;
    --navy:#0B1626; --navy-ink:#EFF1F5;
    --warn:#E38268; --warn-soft:#3A211C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1B2E; --surface:#16233A; --surface-alt:#1B2C46;
  --ink:#F2EFE6; --ink-soft:#C3CAD9; --ink-faint:#8E9AB3;
  --line:#2A3B57;
  --green:#5FB39C; --green-soft:#173A31; --green-ink:#8FD2BC;
  --gold:#E8B15A; --gold-ink:#F6D9A0; --gold-soft:#2E2410;
  --navy:#0B1626; --navy-ink:#EFF1F5;
  --warn:#E38268; --warn-soft:#3A211C;
  color-scheme: dark;
}


/* ---- base.css ---- */
/* Base — reset, typographie, structure générale. Identique à la page validée + ajout .skip-link. */
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Public Sans",-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.6;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
img,svg{max-width:100%;}
a{color:var(--green-ink);}
a:focus-visible, button:focus-visible, details summary:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;}
.icons{position:absolute; width:0; height:0; overflow:hidden;}

/* Accessibilité : lien d'évitement, visible uniquement au focus clavier */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:10px;
  font-weight:700; font-size:.9rem; text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{top:12px;}

.eyebrow{font-size:.85rem; font-weight:600; color:var(--gold-ink); margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.eyebrow .ico{width:18px; height:18px; color:var(--gold); flex:none;}

h1,h2{font-family:"Fraunces",Georgia,serif; text-wrap:balance;}
h1{font-weight:600; font-size:clamp(2.4rem,6.4vw,3.8rem); line-height:1.05; letter-spacing:-.01em; margin:0 0 22px;}
h2{font-weight:600; font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1.16; margin:0 0 14px;}
h3{font-family:"Public Sans",sans-serif; font-weight:700; font-size:1.05rem; margin:0 0 6px; text-wrap:balance;}
p{color:var(--ink-soft); margin:0 0 14px; max-width:58ch;}
.lead{font-size:1.2rem; line-height:1.55; color:var(--ink-soft); max-width:46ch;}

.section-head{max-width:60ch; margin-bottom:44px;}
section.block{padding:88px 0;}
section.block.tight{padding-top:0;}
/* Fond blanc dominant sur tout le site : --surface-alt (beige) reste réservé
   aux petits accents ponctuels (pill, disclaimer, encadrés...), pas aux
   grandes sections alternées. */
section.block.alt{background:var(--bg);}

.btn{font-family:"Public Sans",sans-serif; font-weight:700; font-size:1rem; padding:16px 30px; min-height:50px; border-radius:100px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer;}
.btn.primary{background:var(--green); color:#fff;}
.btn.primary:hover{background:var(--green-ink);}
.btn.gold{background:var(--gold); color:#2b1c06;}
.btn.gold:hover{filter:brightness(1.06);}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn.ghost:hover{border-color:var(--green);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}


/* ---- layout.css ---- */
/* Layout du site — header, navigation, footer. Nouveau (n'existait pas dans la page de travail). */

/* Ancre de défilement : évite qu'un header collant ne masque le haut d'une section ciblée. */
[id]{scroll-margin-top:96px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line);
}
/* Accueil : fond blanc dominant (voir composants « ACCUEIL — fond blanc ») */
body.home .site-header{background:var(--bg);}
.site-header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px;}

.logo{display:flex; align-items:center; gap:10px; text-decoration:none; line-height:1.1; flex:none;}
.logo-img{
  width:40px; height:40px;
  object-fit:contain; display:block; flex:none;
}
.logo-tag{font-size:.68rem; font-weight:600; color:var(--gold-ink); letter-spacing:.03em;}
@media (max-width:420px){
  .logo-img{width:32px; height:32px;}
  .logo-tag{display:none;}
}

.site-nav{display:none;}
.site-nav-list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.site-nav-list a{
  display:inline-block; padding:9px 13px; border-radius:100px;
  color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:600;
}
.site-nav-list a:hover{color:var(--ink); background:var(--surface-alt);}
.site-nav-list a[aria-current="page"]{color:var(--green-ink); background:var(--green-soft);}

.site-header-actions{display:flex; align-items:center; gap:10px; flex:none;}
.btn.btn-sm{padding:10px 18px; min-height:auto; font-size:.88rem;}

@media (min-width:960px){
  .site-nav{display:block;}
  .nav-mobile{display:none;}
}

/* Menu mobile — <details> natif, sans JavaScript */
.nav-mobile{position:relative;}
.nav-mobile-toggle{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
}
.nav-mobile-toggle::-webkit-details-marker{display:none;}
.nav-mobile-toggle svg{width:20px; height:20px; color:var(--ink);}
.nav-mobile[open] .nav-mobile-toggle{border-color:var(--green);}
.nav-mobile-list{
  list-style:none; margin:0; padding:10px; position:absolute; right:0; top:calc(100% + 10px);
  min-width:260px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px;
}
.nav-mobile-list a{
  display:block; padding:12px 14px; border-radius:10px; color:var(--ink); text-decoration:none;
  font-size:.95rem; font-weight:600;
}
.nav-mobile-list a:hover{background:var(--surface-alt);}
.nav-mobile-list a[aria-current="page"]{color:var(--green-ink); background:var(--green-soft);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:var(--navy-ink); margin-top:40px; padding:56px 0 0;}
.site-footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px;
}
@media (max-width:900px){ .site-footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .site-footer-grid{grid-template-columns:1fr; gap:28px;} }

.site-footer-name{font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; margin:0 0 6px; color:#fff;}
.site-footer-baseline{font-style:italic; color:var(--gold); margin:0 0 12px; font-size:.92rem;}
.site-footer-desc{color:#B9C4D8; font-size:.85rem; margin:0; max-width:32ch;}

.site-footer-heading{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8C9AB6; margin:0 0 14px;}
.site-footer-block ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.site-footer-block a{color:#D7DEEC; text-decoration:none; font-size:.9rem;}
.site-footer-block a:hover{color:#fff; text-decoration:underline;}
.site-footer-placeholder{color:#8C9AB6; font-size:.85rem; font-style:italic; margin:0;}

.site-footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:20px 24px; text-align:center;}
.site-footer-bottom p{margin:0; color:#8C9AB6; font-size:.8rem;}


/* ---- components.css ---- */
/* Composants réutilisables — extraits à l'identique de la page « Demander l'asile en France » validée. */

/* ================= HERO ================= */
.hero{padding:76px 0 30px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 1.1fr; gap:52px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.hero-copy .eyebrow{color:var(--green-ink);}
.hero-copy .eyebrow .ico{color:var(--green);}
.hero-art svg{display:block; width:100%; height:auto;}

/* ================= FRISE 5 ÉTAPES ================= */
.steps5{position:relative; display:flex; flex-wrap:nowrap; gap:0; margin-top:8px;}
@media (max-width:840px){ .steps5{flex-direction:column; gap:22px;} }
.steps5::before{
  content:""; position:absolute; left:9%; right:9%; top:44px; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
  opacity:.55;
}
@media (max-width:840px){
  .steps5::before{left:44px; right:auto; top:20px; bottom:20px; width:2px; height:auto;
    background-image:repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 20px);}
}
.step5{position:relative; flex:1 1 0; min-width:0; text-align:center; padding:0 10px;}
@media (max-width:840px){ .step5{display:flex; align-items:center; gap:18px; text-align:left; padding:0;} }
.step5 .badge{position:relative; width:88px; height:88px; margin:0 auto 18px; border-radius:50%; background:var(--surface); border:2px solid var(--green-soft); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); flex:none;}
.step5 .badge svg{width:36px; height:36px; color:var(--green);}
.step5 .badge .num{position:absolute; top:-6px; right:-6px; width:26px; height:26px; border-radius:50%; background:var(--gold); color:#2b1c06; font-weight:700; font-size:.75rem; display:flex; align-items:center; justify-content:center; font-family:"Public Sans",sans-serif;}
@media (max-width:840px){ .step5 .badge{margin:0;} }
.step5 h3{font-size:1rem; margin-bottom:4px;}
.step5 p{font-size:.86rem; margin:0 auto; color:var(--ink-faint); max-width:20ch;}
.step5-txt{min-width:0;}
@media (max-width:840px){ .step5 p{max-width:none; margin:0;} .step5-txt{flex:1 1 auto; min-width:0;} }

/* ================= BANDE CHIFFRES CLÉS ================= */
.stat-band{background:var(--navy); border-radius:28px; padding:44px 36px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:64px;}
@media (max-width:760px){ .stat-band{grid-template-columns:1fr 1fr; padding:32px 22px;} }
.stat{text-align:center; padding:0 8px;}
.stat .num{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(2.3rem,4.6vw,3.1rem); color:#fff; line-height:1;}
.stat .lbl{font-size:.82rem; color:#B9C4D8; margin-top:10px; line-height:1.4;}

/* ================= 3 CARTES ================= */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px;}
@media (max-width:800px){ .cards3{grid-template-columns:1fr;} }
.pcard{border-radius:22px; padding:30px 28px; box-shadow:var(--shadow);}
.pcard.c1{background:var(--green);} .pcard.c1 *{color:#fff;}
.pcard.c2{background:var(--surface); border:1px solid var(--line);}
.pcard.c3{background:var(--surface); border:1px solid var(--line);}
.pcard .ico-wrap{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.pcard.c2 .ico-wrap{background:var(--gold-soft);}
.pcard.c3 .ico-wrap{background:var(--green-soft);}
.pcard .ico-wrap svg{width:24px; height:24px;}
.pcard.c1 svg{color:#fff;} .pcard.c2 svg{color:var(--gold-ink);} .pcard.c3 svg{color:var(--green);}
.pcard h3{font-size:1.18rem; margin-bottom:8px;}
.pcard p{font-size:.93rem; margin:0;}
.pcard a.more{display:inline-block; margin-top:16px; font-size:.85rem; font-weight:700; text-decoration:none;}
.pcard.c1 a.more{color:#fff;} .pcard.c2 a.more{color:var(--gold-ink);} .pcard.c3 a.more{color:var(--green-ink);}

/* ================= CE QUI CHANGE ================= */
.changes-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:14px;}
@media (max-width:700px){ .changes-grid{grid-template-columns:1fr;} }
.change-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 26px; display:flex; gap:16px; box-shadow:var(--shadow);}
.change-card .ico-wrap{flex:none; width:44px; height:44px; border-radius:13px; background:var(--green-soft); display:flex; align-items:center; justify-content:center;}
.change-card .ico-wrap svg{width:22px; height:22px; color:var(--green);}
.change-card h4{font-family:"Public Sans",sans-serif; font-weight:700; font-size:1rem; margin:0 0 6px; color:var(--ink);}
.change-card p{font-size:.88rem; margin:0; color:var(--ink-faint);}

.callout{border-radius:16px; padding:18px 22px; font-size:.92rem; margin:18px 0; display:flex; gap:14px;}
.callout .ico-wrap{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.callout .ico-wrap svg{width:17px; height:17px;}
.callout.attention{background:var(--warn-soft); color:var(--warn);}
.callout.attention .ico-wrap{background:rgba(181,72,46,.15);}
.callout.info{background:var(--green-soft); color:var(--green-ink);}
.callout.info .ico-wrap{background:rgba(31,90,82,.14);}
.callout p{color:inherit; margin:0; max-width:none;}
.callout b{color:inherit;}

/* ================= DOCUMENTS CLÉS ================= */
.docs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;}
@media (max-width:760px){ .docs-grid{grid-template-columns:1fr;} }
.doc-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 24px; box-shadow:var(--shadow); text-align:center; min-width:0;}
/* Variante à 6 cartes (ex. situations de vulnérabilité) : 3 colonnes desktop, 2 tablette, 1 mobile. */
.docs-grid-6{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .docs-grid-6{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .docs-grid-6{grid-template-columns:1fr;} }
.doc-card .ico-circle{width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:var(--gold-soft); display:flex; align-items:center; justify-content:center;}
.doc-card .ico-circle svg{width:32px; height:32px; color:var(--gold-ink);}
.doc-card h4{font-family:"Public Sans",sans-serif; font-weight:700; font-size:1rem; margin:0 0 6px; color:var(--ink);}
.doc-card p{font-size:.87rem; margin:0 auto; color:var(--ink-faint); max-width:26ch;}

/* ================= ACCORDÉON ================= */
.accordion{border-top:1px solid var(--line); max-width:760px;}
details.acc-item{border-bottom:1px solid var(--line);}
details.acc-item summary{list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; gap:16px; font-family:"Public Sans",sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink);}
details.acc-item summary::-webkit-details-marker{display:none;}
details.acc-item summary .step-badge{flex:none; width:36px; height:36px; border-radius:50%; background:var(--green-soft); color:var(--green-ink); display:flex; align-items:center; justify-content:center; font-family:"Public Sans",sans-serif; font-weight:700; font-size:.9rem;}
details.acc-item summary .chev{margin-left:auto; width:20px; height:20px; color:var(--ink-faint); transition:transform .2s ease; flex:none;}
details.acc-item[open] summary .chev{transform:rotate(180deg);}
.acc-body{padding:0 4px 28px 52px;}
.acc-body p{max-width:60ch;}
.meta-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--surface-alt); border-radius:100px; padding:6px 13px; font-size:.78rem; font-weight:600; color:var(--ink-soft);}
.pill svg{width:13px; height:13px; color:var(--gold-ink); flex:none;}

.compare{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:18px 0;}
@media (max-width:560px){ .compare{grid-template-columns:1fr;} .compare .arrowcol{display:none;} }
.compare .side{background:var(--surface-alt); border-radius:14px; padding:16px 18px; font-size:.86rem; color:var(--ink-soft);}
.compare .side.now{background:var(--green-soft); color:var(--green-ink);}
.compare .label{font-size:.72rem; font-weight:700; color:var(--ink-faint); margin-bottom:5px;}
.compare .arrowcol{color:var(--gold); width:20px; height:20px;}

/* ================= ARBRE DÉCISIONNEL ================= */
.decision{max-width:900px; margin-top:8px;}
.decision-node{display:flex; justify-content:center; margin-bottom:6px;}
.decision-node .badge{width:64px; height:64px; border-radius:50%; background:var(--surface); border:2px solid var(--gold-soft); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;}
.decision-node .badge svg{width:28px; height:28px; color:var(--gold-ink);}
.decision-q{background:var(--navy); color:#fff; border-radius:22px; padding:28px 32px; text-align:center; font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; margin-bottom:8px;}
.fork{display:flex; justify-content:center;}
.fork svg{width:140px; height:38px; color:var(--gold); opacity:.6;}
.decision-branches{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px;}
@media (max-width:700px){ .decision-branches{grid-template-columns:1fr;} }
.branch{border-radius:22px; padding:30px 28px; box-shadow:var(--shadow);}
.branch.a{background:var(--green-soft);}
.branch.b{background:var(--gold-soft);}
.branch .tag{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.92rem; margin-bottom:14px;}
.branch.a .tag{color:var(--green-ink);} .branch.b .tag{color:var(--gold-ink);}
.branch .tag .ico-wrap{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; flex:none;}
.branch .tag svg{width:18px; height:18px;}
.branch p{color:var(--ink-soft); font-size:.92rem; margin:0; max-width:none;}
.recours-path{display:flex; align-items:center; gap:8px; margin-top:22px; flex-wrap:wrap;}
.recours-path .node{background:rgba(255,255,255,.65); border-radius:100px; padding:9px 16px; font-size:.8rem; font-weight:700; color:var(--gold-ink);}
.recours-path svg{width:15px; height:15px; color:var(--gold-ink); opacity:.7; flex:none;}
@media (max-width:480px){
  .recours-path{flex-direction:column; align-items:flex-start; gap:6px;}
  .recours-path svg{margin-left:24px;}
  .recours-path svg use{transform:rotate(0deg);}
}

/* ================= BESOIN D'AIDE ================= */
.help-section{background:var(--navy); border-radius:32px; padding:56px 44px;}
@media (max-width:700px){ .help-section{padding:40px 26px; border-radius:22px;} }
.help-section h2{color:#fff;}
.help-section .lead{color:#C7D0E0;}
.help-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:36px 0;}
@media (max-width:800px){ .help-grid{grid-template-columns:1fr;} }
.help-item{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px;}
.help-item .ico-wrap{width:40px; height:40px; border-radius:11px; background:rgba(232,177,90,.2); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.help-item svg{width:20px; height:20px; color:var(--gold);}
.help-item h4{font-family:"Public Sans",sans-serif; font-weight:700; font-size:.96rem; color:#fff; margin:0 0 6px;}
.help-item p{font-size:.86rem; color:#C7D0E0; margin:0;}

.related{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.related .chip{background:var(--surface); border:1px dashed var(--line); border-radius:100px; padding:9px 18px; font-size:.84rem; color:var(--ink-faint);}

.sources-list{padding-left:0; list-style:none; margin:0; max-width:70ch;}
.sources-list li{padding:14px 0; border-bottom:1px solid var(--line); font-size:.94rem; color:var(--ink-soft); display:flex; align-items:center; gap:12px;}
.sources-list li:first-child{border-top:1px solid var(--line);}
.sources-list svg{flex:none; width:16px; height:16px; color:var(--green);}
.sources-list a{font-weight:600;}

.disclaimer{background:var(--surface-alt); border-radius:18px; padding:22px 26px; display:flex; gap:14px; align-items:flex-start; max-width:840px; margin:0 auto;}
.disclaimer .ico-wrap{flex:none; width:36px; height:36px; border-radius:50%; background:var(--gold-soft); display:flex; align-items:center; justify-content:center;}
.disclaimer svg{width:18px; height:18px; color:var(--gold-ink);}
.disclaimer p{margin:0; font-size:.9rem; color:var(--ink-faint); max-width:none;}

/* ================= TIMELINE VERTICALE (parcours détaillé) ================= */
.timeline{position:relative; max-width:640px; margin-top:12px;}
.timeline::before{
  content:""; position:absolute; left:27px; top:16px; bottom:16px; width:2px;
  background-image:repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 16px);
  opacity:.55;
}
.timeline-node{position:relative; display:flex; gap:20px; padding:14px 0;}
.timeline-node .badge{
  position:relative; flex:none; width:56px; height:56px; border-radius:50%;
  background:var(--surface); border:2px solid var(--green-soft); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.timeline-node .badge svg{width:24px; height:24px; color:var(--green);}
.timeline-node .txt{padding-top:6px;}
.timeline-node h4{font-family:"Public Sans",sans-serif; font-weight:700; font-size:.98rem; margin:0 0 4px; color:var(--ink);}
.timeline-node p{font-size:.86rem; margin:0; color:var(--ink-faint); max-width:48ch;}

/* ================= TABLEAU PÉDAGOGIQUE (responsive) ================= */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); margin-top:8px;}
.info-table{border-collapse:collapse; width:100%; min-width:480px; font-size:.9rem;}
.info-table th{text-align:left; font-family:"Public Sans",sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-alt);}
.info-table td{padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top;}
.info-table tr:last-child td{border-bottom:none;}
.info-table td.strong{color:var(--ink); font-weight:700;}

/* ================= CARTES ORGANISME (OFPRA / CNDA) ================= */
.org-card{display:flex; gap:20px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); margin-top:8px;}
.org-card .ico-circle{flex:none; width:64px; height:64px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center;}
.org-card .ico-circle svg{width:30px; height:30px; color:var(--green);}
.org-card .org-name{font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; margin:0 0 2px; color:var(--ink);}
.org-card .org-full{font-size:.82rem; color:var(--ink-faint); margin:0 0 10px;}
.org-card p{margin:0; font-size:.92rem;}

/* ================= CHECKLIST GRAPHIQUE ================= */
.checklist-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px;}
@media (max-width:640px){ .checklist-grid{grid-template-columns:1fr;} }
.checklist-row{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow);}
.checklist-row .num{flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold-soft); color:var(--gold-ink); font-family:"Public Sans",sans-serif; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
.checklist-row svg{flex:none; width:20px; height:20px; color:var(--green);}
.checklist-row span{font-size:.92rem; color:var(--ink); font-weight:600;}

/* ================= BLOC RÉCIT (illustration + texte) ================= */
.story-block{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; background:var(--green-soft); border-radius:24px; padding:32px; margin-top:8px;}
@media (max-width:700px){ .story-block{grid-template-columns:1fr; text-align:center;} }
.story-block svg{width:110px; height:110px; flex:none;}
@media (max-width:700px){ .story-block svg{margin:0 auto;} }
.story-block p{color:var(--green-ink); margin:0; max-width:56ch;}
.story-block p strong{color:var(--green-ink);}

/* ================= CHAÎNE D'ÉTAPES (entretien / recours — réutilise le style recours-path) ================= */
.chain-path{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;}
.chain-path .node{background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:10px 18px; font-size:.85rem; font-weight:700; color:var(--ink);}
.chain-path svg{width:16px; height:16px; color:var(--gold); opacity:.8; flex:none;}
@media (max-width:560px){
  .chain-path{flex-direction:column; align-items:flex-start; gap:6px;}
  .chain-path svg{margin-left:26px;}
  .chain-path svg use{transform:rotate(0deg);}
}

/* ================= ACCUEIL — cartes cliquables (variante de .doc-card, sans texte descriptif) ================= */
.doc-card-link{display:block; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease;}
.doc-card-link:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(27,42,68,.32);}
.doc-card-link h4{margin:0;}

/* ================= ACCUEIL — cartes territoire (France / International) ================= */
.territory-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;}
.territory-grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){ .territory-grid{grid-template-columns:1fr;} }
.territory-card{
  border-radius:24px; padding:40px 28px; text-align:center; box-shadow:var(--shadow);
  border-top:5px solid var(--line); background:var(--surface); border:1px solid var(--line); border-top-width:5px;
}
.territory-card h3{font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; margin:18px 0 10px; color:var(--ink);}
.territory-card p{margin:0 auto; max-width:34ch;}
.territory-card .ico-wrap{width:56px; height:56px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.territory-card .ico-wrap svg{width:26px; height:26px;}
.territory-card.t1{border-top-color:var(--green);}
.territory-card.t1 .ico-wrap{background:var(--green-soft); color:var(--green);}
.territory-card.t2{border-top-color:var(--gold);}
.territory-card.t2 .ico-wrap{background:var(--gold-soft); color:var(--gold-ink);}
.territory-card.t3{border-top-color:var(--navy);}
.territory-card.t3 .ico-wrap{background:var(--surface-alt); color:var(--navy);}

/* ================= ACCUEIL — domaines d'intervention (cartes compactes, accents pastel) ================= */
.domains-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px;}
@media (max-width:900px){ .domains-grid{grid-template-columns:repeat(3,1fr); gap:12px;} }
@media (max-width:560px){ .domains-grid{grid-template-columns:repeat(2,1fr); gap:10px;} }
.domain-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 14px;
  text-decoration:none; box-shadow:0 1px 2px rgba(27,42,68,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.domain-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(27,42,68,.28); border-color:var(--line);}
.domain-ico{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.domain-ico svg{width:24px; height:24px;}
.domain-ico.a-navy{background:rgba(27,42,68,.08); color:var(--navy);}
.domain-ico.a-gold{background:var(--gold-soft); color:var(--gold-ink);}
.domain-ico.a-green{background:var(--green-soft); color:var(--green);}
.domain-card h4{margin:0; font-size:.92rem; color:var(--ink); line-height:1.3;}

/* ================= ACCUEIL — fond blanc dominant ================= */
body.home{background:var(--bg);}
body.home section.block.alt{background:var(--bg);}

/* ================= ACCUEIL — hero photographique ================= */
body.home .hero.hero-photo{padding:0; overflow:hidden;}
body.home .hero-photo-grid{max-width:1600px; margin:0 auto;}
body.home .hero-photo-media{position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--surface-alt);}
body.home .hero-photo-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
body.home .hero-photo-copy-wrap{padding:40px 24px 48px;}
@media (min-width:900px){
  body.home .hero-photo-grid{display:grid; grid-template-columns:minmax(360px,540px) 1fr; align-items:stretch; min-height:600px;}
  body.home .hero-photo-media{grid-column:2; grid-row:1; aspect-ratio:auto; border-radius:32px; margin:24px 24px 24px 0;}
  body.home .hero-photo-copy-wrap{grid-column:1; grid-row:1; display:flex; align-items:center; padding:48px 32px 48px 24px;}
  body.home .hero-photo-copy{max-width:480px;}
}

/* ================= ACCUEIL — Notre mission (photo + texte) ================= */
body.home .mission-photo-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:center;}
body.home .mission-photo-media{border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
body.home .mission-photo-media img{width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block;}
body.home .mission-photo-copy{margin-bottom:0;}
@media (min-width:760px){
  body.home .mission-photo-grid{grid-template-columns:0.85fr 1fr; gap:48px;}
}

/* ================= ACCUEIL — ICEV en action (photos documentaires) ================= */
body.home .action-photo-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px;}
body.home .action-photo-main, body.home .action-photo-secondary{margin:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow);}
body.home .action-photo-main img, body.home .action-photo-secondary img{width:100%; height:100%; object-fit:cover; display:block;}
body.home .action-photo-main{aspect-ratio:1280/597;}
body.home .action-photo-main img{object-position:50% 38%;}
body.home .action-photo-secondary{aspect-ratio:4/3;}
body.home .action-photo-secondary img{object-position:50% 45%;}
body.home .action-photo-main figcaption, body.home .action-photo-secondary figcaption{
  font-size:.82rem; color:var(--ink-faint); padding:10px 2px 0;
}
@media (min-width:760px){
  body.home .action-photo-grid{grid-template-columns:2.2fr 1fr; gap:20px; align-items:start;}
}
/* Sur mobile, l'espace cumulé (padding bas de cette section + padding haut de
   la suivante) paraissait excessif entre les photos et « Où agit ICEV » ;
   réduit uniquement ici, uniquement sur l'accueil et uniquement sous 760px. */
@media (max-width:760px){
  body.home .action-photo-section{padding-bottom:48px;}
  body.home .action-photo-section + section{padding-top:48px;}
}

/* ================= PAGES INSTITUTIONNELLES — photo + texte (À propos, Collecte de matériel) ================= */
/* Non scopé body.home : utilisé sur nos-actions.html, a-propos.html, collecte-materiel.html. */
.doc-photo-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center; margin-top:24px;}
.doc-photo-media{margin:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
.doc-photo-media img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
.doc-photo-media figcaption{font-size:.82rem; color:var(--ink-faint); padding:8px 2px 0;}
@media (min-width:760px){
  .doc-photo-grid{grid-template-columns:0.9fr 1fr; gap:40px;}
  .doc-photo-grid-reverse .doc-photo-media{order:2;}
  .doc-photo-grid-reverse .section-head{order:1;}
}

/* ================= PAGES INSTITUTIONNELLES — galerie documentaire (Nos actions, mission Ménéga) ================= */
.doc-gallery-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px;}
.doc-gallery-secondary-col{display:grid; grid-template-columns:1fr; gap:16px;}
.doc-gallery-main, .doc-gallery-secondary{margin:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
.doc-gallery-main img, .doc-gallery-secondary img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
.secondary-dispensaire img{object-position:50% 42%;}
.secondary-femmes img{object-position:50% 55%;}
.doc-gallery-main figcaption, .doc-gallery-secondary figcaption{font-size:.82rem; color:var(--ink-faint); padding:8px 2px 0;}
@media (min-width:760px){
  .doc-gallery-grid{grid-template-columns:1.6fr 1fr; gap:20px; align-items:start;}
}

/* ================= ARTICLE — gabarit visuel partagé (étape 3B) ================= */
/* Rythme éditorial type magazine : hero large -> méta -> titre -> chapeau -> corps
   rythmé -> sources -> CTA -> articles liés. Le texte du corps est contenu dans une
   colonne de lecture unique (~720px, y compris les visuels du corps) : choix délibéré
   pour garantir zéro dépassement horizontal sur mobile plutôt que de faire "déborder"
   certaines images au-delà de cette colonne. Seul le hero (dans l'en-tête, hors
   .article-body) exploite toute la largeur de .article-shell. */
.article-shell{max-width:900px; margin:0 auto;}

.article-header{margin-bottom:40px;}

.article-hero{margin:0 0 28px; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--surface-alt);}
.article-hero img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
.article-hero figcaption{font-size:.82rem; color:var(--ink-faint); padding:10px 2px 0;}
@media (max-width:700px){ .article-hero{aspect-ratio:4/3; border-radius:18px;} }

.article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:20px; font-size:.86rem; color:var(--ink-faint);}
.article-meta-date, .article-meta-updated, .article-meta-reading{display:inline-flex; align-items:center;}

.article-title{max-width:20ch;}
.article-lead{font-size:1.15rem; line-height:1.55; color:var(--ink-soft); max-width:680px; margin:0 0 20px;}

.article-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}

/* Colonne de lecture unique : texte ET visuels du corps partagent la même largeur
   maximale, afin qu'aucun élément ne puisse jamais dépasser le viewport sur mobile. */
.article-body{max-width:720px; margin:0 auto;}
.article-body h2{margin-top:44px;}
.article-body h3{margin-top:32px; font-size:1.15rem;}
.article-body p{max-width:none;}

.article-list{margin:0 0 20px; padding-left:22px; color:var(--ink-soft);}
.article-list li{margin-bottom:8px; line-height:1.6;}

/* Pas de recadrage forcé (object-fit) sur les visuels du corps : contrairement au hero,
   une photo documentaire ou une illustration du corps de l'article s'affiche entière. */
.article-media, .article-infographic{margin:28px 0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface-alt);}
.article-media img, .article-infographic img{width:100%; height:auto; display:block;}
.article-media figcaption, .article-infographic figcaption{font-size:.82rem; color:var(--ink-faint); padding:10px 14px;}
.article-infographic{border:1px solid var(--line); background:var(--surface); box-shadow:none;}

.article-callout{margin:28px 0;}

.article-body-sources{margin:28px 0;}

.article-sources{max-width:720px; margin:56px auto 0; padding-top:40px; border-top:1px solid var(--line);}
.article-sources h2{font-size:1.4rem;}

.article-cta{margin-top:56px; background:var(--navy); border-radius:28px; padding:40px 36px; text-align:center; color:#fff;}
.article-cta h2{color:#fff;}
.article-cta p{color:#C7D0E0; max-width:56ch; margin:0 auto 20px;}
@media (max-width:700px){ .article-cta{padding:32px 24px; border-radius:20px;} }

.article-related{margin-top:56px;}
.article-related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px;}
@media (max-width:700px){ .article-related-grid{grid-template-columns:1fr;} }
.article-related-card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); transition:transform .15s ease;}
.article-related-card:hover{transform:translateY(-3px);}
.article-related-category{display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gold-ink); margin-bottom:6px;}
.article-related-title{display:block; font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem; color:var(--ink);}

/* ================= ARTICLE — graphiques "chart" et chiffres clés "stats" (étape 4C) ================= */
/* Même logique que .article-infographic : élément éditorial encadré, sobre, jamais un
   widget de dashboard — bordure fine, fond --surface, aucune ombre. Le SVG
   (scripts/render-chart.js) utilise déjà style="fill:var(--green)" etc. : les couleurs
   suivent automatiquement les tokens redéfinis en dark mode (tokens.css), sans code
   spécifique ici. */
.article-chart{margin:28px 0; border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:24px;}
.article-chart-head{margin:0 0 16px;}
.article-chart-title{font-family:"Fraunces",serif; font-weight:600; font-size:1.1rem; margin:0 0 6px; color:var(--ink);}
.article-chart-description{font-size:.92rem; margin:0; color:var(--ink-soft);}

/* SVG mobile-first : jamais une largeur fixe, le viewBox porte toute la mise à l'échelle. */
.article-chart-svg-wrap{margin:16px 0;}
.article-chart-svg-wrap svg{display:block; width:100%; height:auto;}
.article-chart-axis{font-family:"Public Sans",sans-serif; font-size:11px; fill:var(--ink-faint);}
.article-chart-value{font-family:"Public Sans",sans-serif; font-size:11px; font-weight:700; fill:var(--ink);}
.article-chart-axis-line{stroke:var(--ink-faint); stroke-width:1;}
.article-chart-grid-line{stroke:var(--line); stroke-width:1;}

.article-chart-legend{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.85rem; color:var(--ink-soft);}
.article-chart-legend li{display:flex; align-items:center; gap:8px;}
.article-chart-swatch{width:12px; height:12px; border-radius:3px; flex:none; display:inline-block;}

.article-chart-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; color:var(--ink-faint); margin:0 0 10px;}

.article-chart-summary{font-size:.95rem; color:var(--ink-soft); margin:0 0 14px;}

.article-chart-data{margin:0 0 14px; font-size:.88rem;}
.article-chart-data summary{cursor:pointer; font-weight:700; color:var(--green-ink); padding:4px 0;}
.article-chart-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:.85rem;}
.article-chart-table caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.article-chart-table th, .article-chart-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
.article-chart-table thead th{font-family:"Public Sans",sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); background:var(--surface-alt);}
.article-chart-table tbody th{color:var(--ink); font-weight:600;}

.article-chart-source{font-size:.82rem; color:var(--ink-faint); margin:0;}

/* Chiffres clés : cartes HTML sémantiques simples, jamais de SVG ni de compteur animé.
   auto-fit reflow naturellement de 1 à 4 colonnes selon la largeur disponible : pas de
   règle par nombre d'items à maintenir séparément. */
.article-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:28px 0;}
.article-stat-card{border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:20px;}
.article-stat-value{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.7rem,4vw,2.2rem); color:var(--green-ink); margin:0 0 6px; line-height:1.05;}
.article-stat-label{font-size:.92rem; color:var(--ink); margin:0 0 10px;}
.article-stat-meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.78rem; color:var(--ink-faint); margin:0 0 6px;}
.article-stat-source{font-size:.78rem; color:var(--ink-faint); margin:0;}

/* ================= ACTUALITÉS — hub éditorial (étape 3C) ================= */
/* A. Article à la une : image + contenu, empilés en mobile, deux colonnes dès 760px. */
.news-featured{display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:48px;}
@media (min-width:760px){ .news-featured{grid-template-columns:0.9fr 1fr; gap:40px; align-items:center;} }
.news-featured-media{margin:0; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--surface-alt);}
.news-featured-media img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
.news-featured-media figcaption{font-size:.82rem; color:var(--ink-faint); padding:8px 2px 0;}
.news-featured-body{min-width:0;}
.news-featured-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:14px; font-size:.86rem; color:var(--ink-faint);}
.news-featured-body h2{margin-bottom:10px;}
.news-featured-body h2 a{color:var(--ink); text-decoration:none;}
.news-featured-body h2 a:hover{color:var(--green-ink);}

/* B. Grille de cartes récentes : 1 colonne mobile, 2 dès 640px, 3 dès 960px. */
.news-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .news-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .news-grid{grid-template-columns:repeat(3,1fr);} }
.news-card{display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;}
.news-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(27,42,68,.32);}
.news-card-media{margin:0; aspect-ratio:4/3; background:var(--surface-alt);}
.news-card-media img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
.news-card-body{padding:22px;}
.news-card-meta{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.78rem; color:var(--ink-faint); margin-bottom:10px;}
.news-card h3{font-family:"Fraunces",serif; font-weight:600; font-size:1.1rem; margin:0 0 8px; color:var(--ink);}
.news-card p{font-size:.88rem; margin:0;}

/* F. État vide (collection publique sans article "published"). */
.news-empty{background:var(--surface-alt); border-radius:28px; padding:56px 40px; text-align:center; max-width:640px; margin:0 auto;}
.news-empty .ico-circle{width:72px; height:72px; margin:0 auto 20px; border-radius:50%; background:var(--gold-soft); display:flex; align-items:center; justify-content:center;}
.news-empty .ico-circle svg{width:32px; height:32px; color:var(--gold-ink);}
.news-empty h2{margin-bottom:10px;}
.news-empty p{margin:0 auto 24px; max-width:52ch;}
@media (max-width:600px){ .news-empty{padding:40px 24px; border-radius:20px;} }

/* D. Catégories éditoriales : cartes non cliquables, 1 colonne mobile, 2 dès 640px. */
.news-categories{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:640px){ .news-categories{grid-template-columns:repeat(2,1fr);} }
.news-category-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; gap:16px; align-items:flex-start;}
.news-category-card .ico-wrap{flex:none; width:44px; height:44px; border-radius:13px; background:var(--green-soft); display:flex; align-items:center; justify-content:center;}
.news-category-card svg{width:22px; height:22px; color:var(--green);}
.news-category-card h3{margin:0 0 4px;}
.news-category-card p{margin:0; font-size:.88rem;}