/*
Theme Name: Un Monde Sénégal
Theme URI: https://unmondesenegal.com/
Author: Un Monde Sénégal
Description: Thème sur-mesure « dossier d'investissement d'une maison dakaroise ». Code pur, écrit pour ce site uniquement. Sable de papier, encre vert bouteille, laiton. Coin coupé 45°, cartouche double-devise, bande au taux du jour, filet double laiton, pastille de lieu.
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: unmonde
*/

/* ==========================================================================
   1. TOKENS — trois états de thème (P-110 : contraste AA clair ET sombre)
   Palette : DIRECTION-ARTISTIQUE.md. Dérivés de contraste calculés le 24/08 :
   laiton brut #A87B24 = 3,32:1 sur papier -> réservé aux filets, bordures et
   très grands chiffres ; tout laiton TEXTE courant passe par --laiton-texte.
   ========================================================================== */
:root {
  --papier: #F4EFE6;        /* fond principal — sable de papier chaud */
  --papier-2: #E9E1D2;      /* bandes claires alternées, fonds de carte */
  --encre: #132923;         /* texte principal, bandes sombres */
  --encre-2: #1D3B33;       /* surfaces posées sur bande sombre */
  --laiton: #A87B24;        /* accent : filets, très grands chiffres (>=3:1) */
  --laiton-texte: #7E5B11;  /* accent lisible en petit corps — 5,41:1 sur papier */
  --laiton-sur-encre: #D3A648; /* accent posé sur bande sombre — 6,81:1 */
  --laiton-pale: #EAD9AE;   /* fond des cartouches de montants, bande accent */
  --laiton-texte-pale: #6B4D0E; /* accent lisible SUR --laiton-pale — 5,58:1 (R-0122) */
  --seve: #2E7D5B;          /* positif — fonds/pastilles */
  --seve-texte: #246B4C;    /* positif en texte — 5,59:1 sur papier */
  --brulee: #A6431F;        /* attention — 5,32:1 sur papier, jamais décoratif */
  --texte: var(--encre);
  --texte-inverse: var(--papier);
  --fond: var(--papier);
  --fond-2: var(--papier-2);
  --surface-posee: #FBF8F1; /* carte posée sur papier */
  --trait: rgb(19 41 35 / .16);
  --trait-laiton: rgb(168 123 36 / .55);
  --ombre: 0 14px 34px rgb(19 41 35 / .14);
  --hauteur-entete: 118px;
  --hauteur-ruban: 34px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0D1B17;
    --papier-2: #142622;
    --encre: #EDE6D6;
    --encre-2: #1E332C;
    --laiton: #D3A648;
    --laiton-texte: #D3A648;
    --laiton-sur-encre: #D3A648;
    --laiton-pale: #3A3018;
    --laiton-texte-pale: #D3A648;
    --seve: #4CAF82;
    --seve-texte: #4CAF82;
    --brulee: #D06A42;
    --texte: var(--encre);
    --texte-inverse: #0D1B17;
    --fond: var(--papier);
    --fond-2: var(--papier-2);
    --surface-posee: #16281F;
    --trait: rgb(237 230 214 / .18);
    --trait-laiton: rgb(211 166 72 / .45);
    --ombre: 0 14px 34px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0D1B17;
  --papier-2: #142622;
  --encre: #EDE6D6;
  --encre-2: #1E332C;
  --laiton: #D3A648;
  --laiton-texte: #D3A648;
  --laiton-sur-encre: #D3A648;
  --laiton-pale: #3A3018;
  --laiton-texte-pale: #D3A648;
  --seve: #4CAF82;
  --seve-texte: #4CAF82;
  --brulee: #D06A42;
  --texte: var(--encre);
  --texte-inverse: #0D1B17;
  --fond: var(--papier);
  --fond-2: var(--papier-2);
  --surface-posee: #16281F;
  --trait: rgb(237 230 214 / .18);
  --trait-laiton: rgb(211 166 72 / .45);
  --ombre: 0 14px 34px rgb(0 0 0 / .45);
  color-scheme: dark;
}

/* ==========================================================================
   2. FONTS — self-hosted (P-086), variables, latin + latin-ext
   ========================================================================== */
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/familjen-grotesk-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+20AC; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/familjen-grotesk-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA; }
@font-face { font-family: "Faustina"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("assets/fonts/faustina-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+20AC; }
@font-face { font-family: "Faustina"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("assets/fonts/faustina-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA; }
@font-face { font-family: "Faustina"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("assets/fonts/faustina-italic-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+20AC; }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/spline-sans-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+20AC; }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/spline-sans-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA; }

/* ==========================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { font-size: 17px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Faustina", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  padding-top: calc(var(--hauteur-entete) + var(--hauteur-ruban));
}
h1, h2, h3, h4, .titraille {
  font-family: "Familjen Grotesk", "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
a { color: var(--laiton-texte); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.mono, .montant {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.petites-capitales {
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.contenu { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.lecture { max-width: 720px; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.acces-rapide {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--encre); color: var(--papier); padding: 12px 20px;
}
.acces-rapide:focus { left: 0; }

/* ==========================================================================
   4. PROCÉDÉS SIGNATURE
   ========================================================================== */
/* 4.1 — coin coupé 45° (14px), LE geste géométrique du site */
.coin { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.coin-grand { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.porte-ombre { filter: drop-shadow(0 10px 22px rgb(19 41 35 / .16)); }

/* 4.2 — cartouche double-devise */
.cartouche-devise {
  display: inline-block;
  background: var(--laiton-pale);
  color: var(--texte);
  padding: 3px 12px 3px 10px;
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: .92em; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.cartouche-devise abbr { text-decoration: none; }

/* 4.3 — ruban « au taux du jour » */
.ruban-taux {
  position: fixed; top: var(--hauteur-entete); left: 0; right: 0; z-index: 90;
  height: var(--hauteur-ruban);
  background: #132923; color: #D3A648;
  overflow: hidden;
}
:root[data-theme="dark"] .ruban-taux { background: #142622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ruban-taux { background: #142622; } }
.ruban-taux .contenu {
  display: flex; gap: 28px; align-items: center; height: 100%;
  font-family: "Spline Sans Mono", "Courier New", monospace; font-weight: 500;
  font-size: .8rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.ruban-taux .contenu::-webkit-scrollbar { display: none; }
.ruban-taux .repere strong { color: #EDE6D6; font-weight: 500; }
.ruban-taux .repere { flex: 0 0 auto; }
.ruban-taux .date-verif { opacity: .75; }

/* 4.4 — fiche de démarche façon formulaire réinterprété */
.fiche-demarche {
  background: var(--surface-posee);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--laiton);
  padding: 26px 26px 22px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
.fiche-demarche .numero-etape {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500;
  color: var(--laiton); line-height: 1;
}
.fiche-demarche .rangee-tampons { display: flex; gap: 8px; flex-wrap: wrap; }
.tampon {
  display: inline-block; padding: 3px 10px;
  background: var(--papier-2); color: var(--texte);
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.tampon--seve { background: var(--seve); color: #FFFFFF; }
:root[data-theme="dark"] .tampon--seve { color: #0D1B17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tampon--seve { color: #0D1B17; } }
.fiche-demarche .ligne-cout {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  border-top: 1px solid var(--trait); padding-top: 12px; margin-top: auto;
}

/* 4.5 — filet double laiton */
.filet-double {
  width: 64px; height: 7px; border: 0; margin: 0 0 18px;
  border-top: 2px solid var(--laiton);
  border-bottom: 2px solid var(--laiton);
  background: none;
}
.bande--encre .filet-double, .pied-page .filet-double { border-color: var(--trait-laiton); }

/* 4.6 — pastille de lieu sur chaque photo */
.cadre-photo { position: relative; overflow: hidden; }
.pastille-lieu {
  position: absolute; left: 0; bottom: 14px; z-index: 2;
  background: #132923; color: #F4EFE6;
  padding: 4px 12px 4px 10px;
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 11px 26px;
  background: var(--laiton-texte); color: var(--papier);
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0;
  border: 0; cursor: pointer; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
:root[data-theme="dark"] .bouton:not(.bouton--contour) { color: #0D1B17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bouton:not(.bouton--contour) { color: #0D1B17; } }
.bouton:hover, .bouton:focus-visible { background: var(--laiton); text-decoration: none; }
:root[data-theme="dark"] .bouton:hover { background: #E2BC66; }
.bouton--contour {
  background: none; color: var(--laiton-texte);
  box-shadow: inset 0 0 0 2px var(--trait-laiton);
}
.bouton--contour:hover, .bouton--contour:focus-visible { background: var(--laiton-pale); color: var(--texte); }
.bande--encre .bouton--contour { color: var(--laiton-sur-encre); }
.bande--encre .bouton--contour:hover { background: var(--encre-2); color: var(--laiton-sur-encre); }

/* ==========================================================================
   6. EN-TÊTE — bandeau fixe, compactage sans saut (hauteur du body réservée)
   ========================================================================== */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--hauteur-entete);
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  transition: height .28s ease, background-color .28s ease;
  display: flex; align-items: center;
}
.entete .contenu { display: flex; align-items: center; gap: 28px; width: 100%; }
.marque { display: flex; align-items: center; gap: 14px; color: var(--texte); }
.marque:hover { text-decoration: none; }
.marque svg { display: block; height: 54px; width: auto; transition: height .28s ease; }
.bloc-promesse { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.promesse {
  font-family: "Faustina", Georgia, serif; font-style: italic;
  font-size: .92rem; color: var(--texte); opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s ease, max-height .28s ease; max-height: 2em;
}
.nav-principale { margin-left: auto; }
.nav-principale ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.nav-principale a {
  display: inline-block; padding: 12px 14px;
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .98rem; font-weight: 600; color: var(--texte);
  border-bottom: 7px solid transparent;
}
.nav-principale a:hover { color: var(--laiton-texte); text-decoration: none; }
/* état actif DOUBLE : couleur ET filet double laiton */
.nav-principale .actif > a, .nav-principale a[aria-current="page"] {
  color: var(--laiton-texte);
  border-bottom: 7px solid;
  border-image: repeating-linear-gradient(to bottom, var(--laiton) 0 2px, transparent 2px 5px, var(--laiton) 5px 7px) 7;
}
.entete .bouton { flex: 0 0 auto; }
/* compact : hauteur réduite, promesse escamotée, fond encre-2 — le padding-top
   du body ne bouge pas : zéro saut de page */
.entete.est-compacte { height: 64px; background: var(--encre-2); border-bottom-color: rgb(211 166 72 / .3); }
.entete.est-compacte .marque svg { height: 38px; }
.entete.est-compacte .promesse { opacity: 0; max-height: 0; }
.entete.est-compacte, .entete.est-compacte .nav-principale a { color: #EDE6D6; }
.entete.est-compacte .marque { color: #EDE6D6; }
.entete.est-compacte .nav-principale a:hover,
.entete.est-compacte .nav-principale .actif > a,
.entete.est-compacte .nav-principale a[aria-current="page"] { color: #D3A648; }
body.entete-compacte-active .ruban-taux { top: 64px; }

/* ==========================================================================
   7. NAV MOBILE EN BAS — barre fixe façon application
   ========================================================================== */
.nav-basse {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: #132923;
  border-top: 1px solid rgb(211 166 72 / .35);
  padding-bottom: env(safe-area-inset-bottom);
}
:root[data-theme="dark"] .nav-basse { background: #142622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-basse { background: #142622; } }
.nav-basse ul { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-basse li { flex: 1; }
.nav-basse a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 6px 2px;
  color: #EDE6D6; text-decoration: none;
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-top: 3px solid transparent;
}
.nav-basse a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nav-basse .actif a, .nav-basse a[aria-current="page"] { color: #D3A648; border-top-color: #D3A648; }

/* ==========================================================================
   8. BANDES — le rythme vertical de la home
   ========================================================================== */
.bande { padding: 96px 0; }
.bande--papier { background: var(--papier); }
.bande--papier-2 { background: var(--fond-2); }
.bande--laiton-pale { background: var(--laiton-pale); }
.bande--encre { background: #132923; color: #EDE6D6; }
:root[data-theme="dark"] .bande--encre { background: #142622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bande--encre { background: #142622; } }
.bande--encre h2, .bande--encre h3 { color: #F4EFE6; }
.bande--encre a:not(.bouton) { color: #D3A648; }
.bande--encre .cartouche-devise { background: #3A3018; color: #EDE6D6; }
.tete-de-bande { margin-bottom: 44px; max-width: 720px; }
.tete-de-bande .sur-titre { color: var(--laiton-texte); display: block; margin-bottom: 10px; }
.bande--encre .tete-de-bande .sur-titre { color: #D3A648; }
.bande--laiton-pale .tete-de-bande .sur-titre { color: var(--laiton-texte-pale); }
.bande--laiton-pale .note-tableau a { color: var(--laiton-texte-pale); }

/* ==========================================================================
   9. HERO — split 7/5, photo verticale qui fuit bord à bord en haut/droite
   ========================================================================== */
.heros { position: relative; overflow: hidden; background: var(--papier); }
.heros .contenu {
  display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center;
  min-height: 620px; padding-top: 40px; padding-bottom: 0;
}
.heros-texte { padding: 24px 0 72px; }
.heros-texte h1 em { font-style: normal; color: var(--laiton-texte); }
.heros-texte .chapeau { font-size: 1.14rem; max-width: 34em; }
.heros-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 26px 0 40px; }
.chiffres-heros { display: flex; gap: 40px; flex-wrap: wrap; }
.chiffre-heros .valeur {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--laiton-texte); line-height: 1.15;
}
.chiffre-heros .legende { font-size: .82rem; opacity: .8; max-width: 13em; }
.heros-photo { position: relative; align-self: stretch; }
.heros-photo .cadre-photo { position: absolute; inset: 0 -24px 0 0; }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; }
.heros-photo .cadre-photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.heros-photo .pastille-lieu { left: 26px; }

/* ==========================================================================
   10. TUILES DE CHIFFRES — bande de preuve
   ========================================================================== */
.grille-tuiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: rgb(211 166 72 / .3);
  border: 1px solid rgb(211 166 72 / .3);
}
.tuile-chiffre { background: #132923; padding: 34px 28px 30px; }
:root[data-theme="dark"] .tuile-chiffre { background: #142622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tuile-chiffre { background: #142622; } }
.tuile-chiffre .valeur {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.05; color: #D3A648;
  /* la tuile fait 210px au plus étroit : une valeur longue (« 650 kFCFA ») doit pouvoir
     passer l'unité à la ligne plutôt que déborder du cadre. */
  max-width: 100%; overflow-wrap: anywhere;
}
.tuile-chiffre .valeur .unite { font-size: .4em; display: inline-block; }
.tuile-chiffre .legende { margin-top: 10px; font-size: .92rem; opacity: .85; }
.tuile-chiffre .source { display: block; margin-top: 8px; font-size: .68rem; opacity: .6; }

/* ==========================================================================
   11. GRILLES DE CARTES — guides, ratio d'image constant 3:2
   ========================================================================== */
.grille-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.carte-guide {
  background: var(--surface-posee);
  border: 1px solid var(--trait);
  display: flex; flex-direction: column;
}
.bande--papier-2 .carte-guide, .bande--laiton-pale .carte-guide { background: var(--papier); }
.carte-guide .cadre-photo { aspect-ratio: 3 / 2; }
.carte-guide .cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-guide .corps { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-guide h3 a { color: inherit; }
.carte-guide h3 a:hover { color: var(--laiton-texte); }
.carte-guide .resume { font-size: .95rem; margin: 0; }
.carte-guide .ligne-pied {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--trait);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.grille-fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ==========================================================================
   12. COMPARATEUR — le tableau passe AVANT le texte
   ========================================================================== */
.enveloppe-tableau { overflow-x: auto; border: 1px solid var(--trait); background: var(--surface-posee); }
.tableau-montants { border-collapse: collapse; width: 100%; min-width: 720px; }
.tableau-montants caption {
  text-align: left; padding: 16px 20px 12px;
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif; font-weight: 600;
}
.tableau-montants th, .tableau-montants td { padding: 13px 18px; text-align: left; border-top: 1px solid var(--trait); }
.tableau-montants thead th {
  background: #132923; color: #EDE6D6; border-top: 0;
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
:root[data-theme="dark"] .tableau-montants thead th { background: #1E332C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tableau-montants thead th { background: #1E332C; } }
.tableau-montants td.montant, .tableau-montants td.delai {
  font-family: "Spline Sans Mono", "Courier New", monospace; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tableau-montants .rang-vedette { background: var(--laiton-pale); }
.tableau-montants .rang-vedette td { border-top: 2px solid var(--laiton); }
.tableau-montants .bouton { min-height: 40px; padding: 7px 16px; font-size: .9rem; }
.note-tableau { font-size: .82rem; opacity: .8; margin-top: 10px; }
.mention-affiliation {
  font-size: .82rem; margin: 0 0 14px; padding: 10px 14px;
  background: var(--fond-2); border-left: 3px solid var(--laiton);
}
.note-tableau .mono { font-size: .95em; }

/* ==========================================================================
   13. ARTICLE & PILIER
   ========================================================================== */
.chemin { font-size: .78rem; margin: 26px 0 0; }
.chemin ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chemin li + li::before { content: "→"; margin-right: 6px; color: var(--laiton-texte); }
/* le raccourci `padding` ecrasait le retrait lateral de .contenu :
   le titre de chaque page touchait le bord gauche a 390 px (26/08/2026) */
.tete-article { padding: 30px 24px 34px; }
.tete-article .meta-ligne {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 14px;
  font-family: "Spline Sans Mono", "Courier New", monospace; font-size: .78rem;
}
.tete-article .meta-ligne .separateur { color: var(--laiton); }
.corps-article { padding-bottom: 72px; }
.corps-article > * { max-width: 720px; }
.corps-article > .enveloppe-tableau, .corps-article > .cadre-photo, .corps-article > figure { max-width: 100%; }
.corps-article h2 { margin-top: 1.6em; }
.corps-article h2::before {
  content: ""; display: block; width: 64px; height: 7px; margin-bottom: 14px;
  border-top: 2px solid var(--laiton); border-bottom: 2px solid var(--laiton);
}
.corps-article blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--laiton);
  font-style: italic; font-size: 1.06rem;
}
.corps-article figure { margin: 1.8em 0; }
.corps-article figcaption { font-size: .82rem; opacity: .8; padding-top: 8px; }
.sommaire {
  background: var(--fond-2); border: 1px solid var(--trait);
  padding: 20px 24px; margin: 1.4em 0 2em;
}
.sommaire ol { margin: 8px 0 0; padding-left: 1.2em; }
.sommaire li { margin: 4px 0; }
.encart-verification {
  border: 1px solid var(--trait-laiton); background: var(--laiton-pale);
  padding: 16px 20px; margin: 1.6em 0; font-size: .9rem;
}
.encart-verification .petites-capitales { color: var(--texte); display: block; margin-bottom: 4px; }

/* ==========================================================================
   14. FORMULAIRE — fiche de dossier, une question par étape
   ========================================================================== */
.gabarit-formulaire { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.formulaire-dossier {
  background: var(--surface-posee); border: 1px solid var(--trait);
  border-top: 3px solid var(--laiton); padding: 30px 30px 26px;
}
.formulaire-dossier .reference-dossier {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-size: .72rem; color: var(--laiton-texte); margin-bottom: 4px;
}
.jauge-etapes { display: flex; gap: 6px; margin: 18px 0 26px; }
.jauge-etapes .segment { flex: 1; height: 5px; background: var(--trait); }
.jauge-etapes .segment.fait { background: var(--laiton); }
.etape-formulaire[hidden] { display: none; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-family: "Familjen Grotesk", "Arial Narrow", sans-serif; font-weight: 600; margin-bottom: 7px; }
.champ .aide { font-size: .82rem; opacity: .75; margin: -3px 0 8px; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--laiton); outline-offset: 0; border-color: var(--laiton); }
.champ .erreur-champ { display: none; color: var(--brulee); font-size: .85rem; margin-top: 6px; }
.champ.a-erreur .erreur-champ { display: block; }
.champ.a-erreur input { border-color: var(--brulee); }
.pied-formulaire { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; }
.promesse-delai {
  display: flex; gap: 10px; align-items: baseline; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--trait); font-size: .88rem;
}
.confidentialite-note { font-size: .78rem; opacity: .75; margin-top: 10px; }

/* ==========================================================================
   15. PIED DE PAGE — dense, sur encre
   ========================================================================== */
.pied-page { background: #132923; color: #EDE6D6; padding: 72px 0 110px; }
:root[data-theme="dark"] .pied-page { background: #0A1512; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pied-page { background: #0A1512; } }
.pied-page a { color: #EDE6D6; }
.pied-page a:hover { color: #D3A648; }
.pied-page .rappel-taux {
  display: flex; gap: 26px; flex-wrap: wrap;
  font-family: "Spline Sans Mono", "Courier New", monospace; font-size: .78rem;
  color: #D3A648; padding-bottom: 34px; margin-bottom: 44px;
  border-bottom: 1px solid rgb(211 166 72 / .3);
}
.colonnes-pied { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; }
.colonnes-pied h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #D3A648; margin-bottom: 14px; }
.colonnes-pied ul { list-style: none; margin: 0; padding: 0; }
.colonnes-pied li { margin: 0 0 9px; font-size: .92rem; }
.mentions-pied {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid rgb(237 230 214 / .15);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .78rem; opacity: .8;
}
.bascule-theme {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgb(211 166 72 / .45);
  color: #EDE6D6; padding: 8px 14px; min-height: 44px; cursor: pointer;
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif; font-size: .8rem; font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.bascule-theme:hover { color: #D3A648; }

/* ==========================================================================
   16. RESPONSIVE — mobile-first réel au 390
   ========================================================================== */
@media (max-width: 1060px) {
  .nav-principale { display: none; }
  .entete .bouton { margin-left: auto; }
  .nav-basse { display: block; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .pied-page { padding-bottom: 140px; }
}
@media (max-width: 900px) {
  :root { --hauteur-entete: 84px; }
  .bande { padding: 56px 0; }
  .heros .contenu { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .heros-photo { min-height: 380px; margin: 0 -24px; }
  .heros-photo .cadre-photo { inset: 0; clip-path: none; }
  .heros-photo .pastille-lieu { left: 0; }
  .heros-texte { padding-bottom: 44px; }
  .grille-guides, .grille-fiches { grid-template-columns: 1fr; }
  .gabarit-formulaire { grid-template-columns: 1fr; }
  .colonnes-pied { grid-template-columns: 1fr 1fr; }
  .promesse { display: none; }
  .entete .contenu { gap: 14px; }
  .marque svg { height: 42px; }
  .entete .bouton { min-height: 44px; padding: 9px 16px; font-size: .9rem; }
  .chiffres-heros { gap: 22px; }
}
@media (max-width: 480px) {
  .colonnes-pied { grid-template-columns: 1fr; }
  .heros-actions .bouton { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Lien neutralisé par le garde-fou anti-lien-mort : reste lisible, ne promet rien. */
.lien-inactif { color: inherit; opacity: .55; cursor: default; }

/* 26/08/2026 : encart de lien commercial (P-155). Aucune couleur declaree :
   il herite du corps, donc il reste lisible dans les deux themes. */
.encart-commercial{border:1px solid;border-color:color-mix(in srgb,currentColor 22%,transparent);border-radius:8px;padding:1.1rem 1.35rem;margin:2.4rem 0;font-size:.94em}
.encart-commercial p:last-child{margin-bottom:0}


/* ==========================================================================
   17. RESPONSIVE — correctifs mesures au 390 px (26/08/2026)
   Debordement horizontal de 69 px sur l'accueil : une cartouche double-devise
   en white-space:nowrap ne peut pas se couper, elle impose sa largeur a la
   fiche, la fiche a la grille, et la grille au document entier.
   Le bouton d'en-tete, lui, etait coupe net par le bord droit de l'ecran.
   ========================================================================== */
@media (max-width: 640px) {
  .grille-fiches > *, .grille-guides > *, .grille-tuiles > * { min-width: 0; }
  .cartouche-devise { white-space: normal; }
  .fiche-demarche .ligne-cout { flex-wrap: wrap; }
  .fiche-demarche .ligne-cout .montant,
  .fiche-demarche .ligne-cout .cartouche-devise { max-width: 100%; }
  .entete .contenu { gap: 10px; }
  .entete .bouton { font-size: .82rem; padding: 9px 12px; }
  .marque { gap: 10px; }
  .marque svg { height: 36px; }
}


/* ==========================================================================
   18. LE RELEVE — les tableaux du corps des pages   (pose le 26/08/2026)
   38 pages sur 51 servaient un <table> NU : aucune regle du theme ne visait
   `table` ni `.table-wrap`, seule `.tableau-montants` — une classe posee a la
   main sur l'accueil — etait habillee. Colonnes ecrasees, aucun filet, aucun
   scroll : casse sur toutes les pages a comparatif.
   Le parti pris tient en une image : un RELEVE. En-tete encre + laiton en
   capitales etroites, coin superieur droit coupe comme un tampon, filet de
   marge a gauche comme un formulaire administratif, chiffres en mono
   tabulaire. Sous 720 px il ne scrolle pas : il se PLIE en fiches, une par
   ligne, chaque valeur portant son libelle — procede signature de ce site.
   ========================================================================== */
.corps-article > .table-wrap { max-width: 100%; }
.table-wrap {
  margin: 2.1em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-wrap.deborde { border-right: 2px solid var(--trait-laiton); }
.table-wrap table {
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  background: var(--surface-posee);
  border: 1px solid var(--trait);
  font-size: .95rem;
}
.table-wrap caption {
  caption-side: top; text-align: left;
  font-size: .82rem; opacity: .8; padding-bottom: 8px;
}
.table-wrap thead th {
  /* --encre s'INVERSE en mode sombre (le sable devient l'encre) : l'en-tete
     serait alors du laiton sur du sable, 1,8:1. --encre-2 reste sombre des deux
     cotes, c'est le seul token qui tient la promesse « bandeau de releve ». */
  background: var(--encre-2); color: var(--laiton-sur-encre);
  font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  text-align: left; vertical-align: bottom;
  padding: 13px 16px; border-bottom: 3px solid var(--laiton);
}
.table-wrap thead th:last-child {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.table-wrap tbody td {
  padding: 14px 16px; vertical-align: top;
  border-top: 1px solid var(--trait); line-height: 1.55;
}
.table-wrap tbody tr:nth-child(even) { background: var(--fond-2); }
.table-wrap tbody td:first-child {
  font-weight: 600; min-width: 9em;
  border-left: 3px solid var(--trait-laiton);
}
/* un chiffre est un chiffre : mono tabulaire, et il ne se coupe pas en deux */
.table-wrap td.est-chiffre {
  font-family: "Spline Sans Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums; font-weight: 500;
  white-space: nowrap;
}
/* une case sans donnee ne doit pas peser autant a l'oeil qu'un chiffre releve */
.table-wrap td.est-absent { opacity: .7; font-style: italic; }

/* --- sous 720 px : le tableau se PLIE en fiches, une par ligne --- */
@media (max-width: 720px) {
  .table-wrap { overflow-x: visible; border-right: 0; }
  .table-wrap table { display: block; min-width: 0; border: 0; background: none; }
  .table-wrap thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap tbody tr {
    background: var(--surface-posee);
    border: 1px solid var(--trait); border-top: 3px solid var(--laiton);
    margin-bottom: 18px; padding: 4px 0 8px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  }
  .table-wrap tbody tr:nth-child(even) { background: var(--surface-posee); }
  .table-wrap tbody td { border-top: 0; padding: 7px 18px; }
  .table-wrap tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-family: "Familjen Grotesk", "Arial Narrow", sans-serif;
    font-size: .68rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--laiton-texte);
  }
  .table-wrap tbody td:not([data-label])::before { content: none; }
  .table-wrap tbody td:first-child {
    border-left: 0; border-bottom: 1px solid var(--trait);
    font-size: 1.06rem; padding-top: 12px; padding-bottom: 11px; margin-bottom: 4px;
  }
  .table-wrap tbody td:first-child::before { content: none; }
  .table-wrap td.est-chiffre { white-space: normal; }
}


/* ==========================================================================
   19. MOTS INSECABLES ET TABLEAUX SANS EN-TETE (26/08/2026)
   Mesure a 390 px : le debordement residuel (103 px sur /wave-senegal/,
   18 px sur /securite-.../) ne venait PAS des tableaux — deja plies a 342 px —
   mais des listes de sources, qui portent des URL brutes qu'aucun navigateur
   ne peut couper sans y etre autorise.
   Et un tableau sans <thead> n'a aucun libelle a projeter : le plier en fiches
   produirait des valeurs nues. Il reste un vrai tableau, qui defile.
   ========================================================================== */
.corps-article p, .corps-article li, .corps-article td,
.corps-article a, .corps-article dd { overflow-wrap: break-word; }

@media (max-width: 720px) {
  .table-wrap.sans-entete { overflow-x: auto; border-right: 1px solid var(--trait-laiton); }
  .table-wrap.sans-entete table { display: table; min-width: 0; width: 100%;
    border: 1px solid var(--trait); background: var(--surface-posee); }
  .table-wrap.sans-entete tbody { display: table-row-group; }
  .table-wrap.sans-entete tr { display: table-row; margin: 0; padding: 0; border: 0;
    clip-path: none; background: transparent; }
  .table-wrap.sans-entete tbody tr:nth-child(even) { background: var(--fond-2); }
  .table-wrap.sans-entete td { display: table-cell; border-top: 1px solid var(--trait);
    padding: 11px 14px; }
  .table-wrap.sans-entete td::before { content: none; }
  .table-wrap.sans-entete td:first-child { border-bottom: 0; margin: 0; font-size: .95rem;
    width: 40%; border-left: 3px solid var(--trait-laiton); padding-top: 11px; padding-bottom: 11px; }
}

/* --- 19b. tableau sans en-tete : il doit TENIR dans la colonne, pas defiler.
   Mesure : la boite fait 341 px, le tableau en voulait 390 — le min-width de
   9em herite de la colonne de tete d'un releve n'a aucun sens ici. --- */
@media (max-width: 720px) {
  .table-wrap.sans-entete { overflow-x: visible; border-right: 0; }
  .table-wrap.sans-entete table { table-layout: fixed; }
  .table-wrap.sans-entete td { text-align: left; overflow-wrap: break-word;
    padding: 10px 12px; font-size: .92rem; }
  .table-wrap.sans-entete td:first-child { min-width: 0; width: 36%;
    text-align: left; font-size: .88rem; }
}

/* ------------------------------------------------------------------
   20. LA PREMIERE COLONNE EST UN <th> (26/08/2026)
   Le convertisseur markdown pose la premiere cellule de chaque ligne en
   <th> HORS <thead>. Toutes les regles ci-dessus visaient `td` : cette
   colonne gardait donc le centrage et le gras par defaut du navigateur,
   sans filet laiton ni largeur imposee. Mesure sur /mentions-legales/ :
   171 px (50 %), texte centre, au lieu de 36 % aligne a gauche.
   ------------------------------------------------------------------ */
.table-wrap tbody th {
	text-align: left;
	font-weight: 600;
	padding: 11px 14px;
	vertical-align: top;
	border-left: 3px solid var(--trait-laiton);
	background: var(--fond-2);
	overflow-wrap: break-word;
}
/* 42 % + cesure typographique : a 36 % « d’enregistrement » se coupait en
   « d’enregistrem / ent ». hyphens coupe au bon endroit, break-word ne sert
   plus que de dernier recours. */
.table-wrap.sans-entete tbody th {
	width: 42%;
	font-size: .88rem;
	padding: 10px 12px;
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 720px) {
	/* dans le pliage en fiches, le th de ligne devient le titre de la fiche */
	.table-wrap:not(.sans-entete) tbody th {
		display: block;
		width: auto;
		background: none;
		border-left: 0;
		border-bottom: 1px solid var(--trait);
		font-size: 1.02rem;
		padding: 10px 14px 8px;
	}
	.table-wrap:not(.sans-entete) tbody th::before { content: none; }
}