/* ── POLICES AUTO-HEBERGEES ─────────────────────────────────────────────
   Tache 4.5 du 11 septembre 2026. Les trois familles etaient servies par
   Google : deux resolutions DNS et deux poignees de main TLS avant le
   premier caractere peint, et une requete du visiteur vers un tiers que
   les mentions legales auraient du declarer. Elles sont servies depuis ce
   domaine.

   FONTES VARIABLES. Google sert un seul fichier pour 400, 500 et 600 :
   verifie par empreinte, dix-huit fichiers telecharges ne portaient que
   dix contenus distincts. Declarer trois @font-face vers trois copies
   aurait fait telecharger trois fois les memes octets. La graisse est
   donc donnee en PLAGE, 400 600, et le navigateur interpole.

   Sous-ensembles latin et latin-ext seulement : le site est en francais et
   sera en espagnol. Le cyrillique, le grec et le vietnamien n auraient
   jamais ete telecharges, un navigateur ne chargeant un woff2 que si un
   caractere de son unicode-range apparait sur la page.

   font-display:swap : le texte s affiche dans la police de repli et
   bascule a l arrivee du woff2, plutot que de rester invisible. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(assets/fonts/newsreader-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}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(assets/fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/newsreader-400i-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}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/newsreader-400i-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;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}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/space-mono-400-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}
@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/space-mono-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/space-mono-700-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}
@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/space-mono-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ── FIGURE CARTOGRAPHIQUE (§2.5, classes du §3.1 addendum 4.1) ────────
   Famille de plein droit. Structure obligatoire, dans cet ordre : titre,
   marqueur d'illustration si la figure n'est pas une preuve, visuel,
   legende, LIGNE DE SOURCE, LIGNE DE LIMITE.
   Source et limite sont structurelles : si l'une manque ou est vide, la
   figure affiche un refus a l'ecran plutot que de se rendre. Le composant
   rend l'oubli impossible, il ne le signale pas. */
.figure-carto{background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:0;
  display:flex;flex-direction:column}
.figure-carto__head{padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-border);
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.figure-carto__title{font-family:var(--font-display);font-weight:600;
  font-size:1.1875rem;line-height:1.25;color:var(--color-text);margin:0}
/* Le marqueur n'apparait que sur le modificateur illustration. */
.figure-carto__flag{display:none}
.figure-carto--illustration .figure-carto__flag{display:inline-flex;
  align-items:center;padding:2px var(--space-3);
  border:1px solid var(--color-border-strong);
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.figure-carto__body{position:relative;background:var(--color-bg-alt)}
.figure-carto__body img{display:block;width:100%;height:auto}
.figure-carto__legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-divider);
  font-family:var(--font-mono);font-size:.68rem;color:var(--color-text-muted)}
.figure-carto__legend-item{display:inline-flex;align-items:center;
  gap:var(--space-2)}
.figure-carto__legend-item::before{content:'';width:12px;height:12px;
  flex-shrink:0;background:var(--color-data-1)}
.figure-carto__legend-item:nth-child(2)::before{background:var(--color-data-2)}
.figure-carto__legend-item:nth-child(3)::before{background:var(--color-data-3)}
.figure-carto__legend-item:nth-child(4)::before{background:var(--color-data-4)}
.figure-carto__foot{padding:var(--space-3) var(--space-5) var(--space-4);
  border-top:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:var(--space-2)}
/* Tache 4.10 : plancher de 12 px calcules. .68rem valait 10,9 px. */
.figure-carto__source{font-family:var(--font-mono);font-size:.75rem;
  color:var(--color-text-muted);margin:0}
.figure-carto__limit{font-size:var(--text-sm);line-height:1.55;
  color:var(--color-text-muted);margin:0;
  border-left:2px solid var(--color-border-strong);
  padding-left:var(--space-4)}
/* Contrat du §2.5 : le refus est visible a l'ecran. */
.figure-carto__source:empty::before,
.figure-carto__limit:empty::before{content:'Ligne de source vide, figure non publiable';
  color:var(--color-danger);font-family:var(--font-mono);font-size:.68rem;
  font-weight:700}
.figure-carto__limit:empty::before{content:'Ligne de limite vide, figure non publiable'}
.figure-carto__source:empty,
.figure-carto__limit:empty{display:block}
/* Une figure privee de son pied est barree d'un filet de refus. */
.figure-carto:not(:has(.figure-carto__source)),
.figure-carto:not(:has(.figure-carto__limit)){
  border-color:var(--color-danger);border-width:2px}
.figure-carto:not(:has(.figure-carto__source))::after,
.figure-carto:not(:has(.figure-carto__limit))::after{
  content:'Figure non publiable : ligne de source ou de limite absente';
  display:block;padding:var(--space-3) var(--space-5);
  border-top:2px solid var(--color-danger);
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  color:var(--color-danger)}

/* ═══════════════════════════════════════════
   GeoQriosity — Charte graphique "Dossier cartographique"
   Positionnement : expert analyste, pas produit SaaS.
   Esthétique rapport d'expertise / plan cartographique ancien :
   hairlines, coins d'angle, données tabulaires. Aucun radius
   (sauf boutons 2px), aucune ombre portée, aucun glow.
   Fonts: Newsreader (titrage) + Inter (texte courant) + Space Mono (données/labels)
   ═══════════════════════════════════════════ */

/* Les polices sont declarees en tete de ce fichier depuis la tache 4.5, et
   servies depuis ce domaine. Chaque page precharge les deux fichiers du
   premier ecran, Newsreader et Inter en latin. */

/* ── TOKENS ─────────────────────────────── */
:root {
  --font-display: 'Newsreader', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --text-xs:   clamp(.75rem,  .7rem  + .2vw, .8rem);
  --text-sm:   clamp(.85rem,  .8rem  + .25vw,.95rem);
  --text-base: clamp(.95rem,  .9rem  + .25vw,1.05rem);
  --text-lg:   clamp(1.1rem,  1rem   + .5vw, 1.4rem);
  --text-xl:   clamp(1.4rem,  1.1rem + 1vw,  2rem);
  --text-2xl:  clamp(1.8rem,  1rem   + 2.5vw,3.2rem);
  --text-3xl:  clamp(2.2rem,  .8rem  + 4vw,  4.2rem);

  --space-1:.25rem;--space-2:.5rem; --space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;
  --space-10:2.5rem;--space-12:3rem;--space-16:4rem; --space-20:5rem;

  /* Charte : aucun radius. Les boutons dérogent seuls, à 2px (voir .btn). */
  --radius-sm:0;--radius-md:0;--radius-lg:0;
  --radius-xl:0;--radius-2xl:0;--radius-full:0;
  --radius-btn:2px;

  --transition: 200ms cubic-bezier(.16,1,.3,1);

  /* ── Palette "Dossier cartographique", version du 8 aout 2026 ──────────
     Trois couches qui ne se melangent jamais (§2.2 du brief v4) :
       MARQUE  --color-primary et son survol. Quatre emplois, pas un de
               plus : action principale, repere de position active, mark du
               logo, et etat positif d'une action reussie. Ce quatrieme est
               une exception accordee par le proprietaire le 8 aout 2026 :
               la couche etat n'a que --color-danger et --color-purple, qui
               disent tous deux un probleme, donc rien pour dire qu'une chose
               a reussi. Concerne form-status--success et pill.ok.
               Interdite en legende, en carte, en jauge, en pastille de score.
       DONNEE  --color-data-1 a --color-data-4. Interdite en interface :
               aucun bouton, aucun lien, aucun filet.
       ETAT    --color-danger, --color-purple. Jamais decoratives.
     Contrastes mesures sur le fond #080E15, formule WCAG 2.1. */

  /* Couche neutre : fonds, surfaces, filets, texte */
  --color-bg:              #080E15;   /* reference */
  --color-bg-alt:          #0C1319;   /* 1,04 */
  --color-surface:         #080E15;
  --color-surface-2:       #1E242B;   /* 1,24 */
  --color-surface-offset:  #0C1319;
  --color-surface-dynamic: #1E242B;
  --color-divider:         rgba(227,232,238,.10);
  --color-border:          #292F35;   /* 1,43 */
  --color-border-strong:   #454E58;   /* 2,29 */
  --color-text:            #E3E8EE;   /* 15,72 */
  --color-text-muted:      #89939E;   /* 6,21 */
  --color-text-faint:      #757E89;   /* 4,71  corrige, valait 2,97 en echec */

  /* Couche MARQUE */
  --color-primary:         #E8AA4E;   /* 9,49 */
  --color-primary-hover:   #F9BA5F;   /* 11,27 */
  --color-primary-highlight: rgba(232,170,78,.12);
  --color-primary-glow:    rgba(232,170,78,.25);
  --color-primary-ink:     #080E15;

  /* Couche DONNEE : luminance monotone, separation 1,53 / 1,59 / 2,01.
     Reste ordonnee en niveaux de gris, donc lisible a l'impression. */
  --color-data-4:          #7AD7D1;   /* 11,50  palier le plus eleve */
  --color-data-3:          #52B0AB;   /*  7,53 */
  --color-data-2:          #368A85;   /*  4,73 */
  --color-data-1:          #295653;   /*  2,35  aplat de carte uniquement,
                                         jamais de texte dessus */

  /* Couche ETAT */
  --color-danger:          #F2716A;   /* 6,78 */
  --color-purple:          #9A9EC4;   /* 7,44  corrige, valait 3,96 */

  /* Alias conserves tant que le HTML les utilise (§2.7). Les noms qui
     designent une teinte sont depuis remplaces par des noms de role. */
  --color-cyan:            var(--color-data-3);
  --color-amber:           var(--color-primary);

  /* Charte : aucune ombre portee. La hierarchie se fait par la surface
     et le filet. Ces alias restent a none pour les regles historiques. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-teal: none;

  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:   1300px;
}

/* ── RESET ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);line-height:1.65;overflow-x:hidden}
img,picture,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.15;text-wrap:balance}
p,li{text-wrap:pretty;max-width:70ch}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── REVEAL ANIMATION ────────────────────── */
/* Tache 4.6 : l apparition au defilement ne doit pas etre une condition
   pour LIRE la page. .reveal posait opacity:0 des le chargement, et c est
   nav.js qui ajoutait .visible : sans JavaScript, tout le contenu restait
   invisible pour toujours. L opacite zero est donc conditionnee a la
   classe .js, que chaque page pose elle-meme en tete de <head>. Sans
   script, aucune regle ne s applique et la page est lisible entiere. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}

/* ── LAYOUT ─────────────────────────────── */
.container{width:100%;margin-inline:auto;padding-inline:var(--space-6)}
.container--narrow {max-width:var(--content-narrow)}
.container--default{max-width:var(--content-default)}
.container--wide   {max-width:var(--content-wide)}
.section{padding-block:clamp(var(--space-12),7vw,var(--space-20))}
.section--alt{background:var(--color-bg-alt)}
.section__label{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--color-text-muted);
  margin-bottom:var(--space-4)}
.section__eyebrow{font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);
  margin-bottom:var(--space-3)}
.section__title{font-size:var(--text-2xl);line-height:1.15;margin-bottom:var(--space-5);
  font-weight:600}
.section__subtitle{font-size:var(--text-base);color:var(--color-text-muted);
  max-width:58ch;margin-bottom:var(--space-8);line-height:1.65}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-10)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
.split-60{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-10);align-items:center}
@media(max-width:768px){.split,.split-60{grid-template-columns:1fr}}

/* ── NAV ────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;
  background:rgba(10,22,40,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-divider);
  transition:background .3s}
.nav.scrolled{background:rgba(10,22,40,.98)}
.nav__inner{max-width:var(--content-wide);margin-inline:auto;
  padding:0 var(--space-6);height:64px;display:flex;align-items:center;gap:var(--space-8)}
.nav__logo{display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--color-primary)}
.nav__logo-dot{width:10px;height:10px;border-radius:50%;background:var(--color-primary);
  animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
.nav__links{display:flex;gap:var(--space-1);margin-left:auto}
.nav__links a{font-size:var(--text-sm);font-weight:500;padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);color:var(--color-text-muted);
  position:relative;transition:color var(--transition)}
.nav__links a::after{content:'';position:absolute;bottom:-2px;left:var(--space-3);right:var(--space-3);
  height:1.5px;background:var(--color-primary);width:0;transition:width var(--transition)}
.nav__links a:hover{color:var(--color-text)}
.nav__links a:hover::after,.nav__links a.active::after{width:calc(100% - 2*var(--space-3))}
.nav__links a.active{color:var(--color-text)}
.nav__actions{display:flex;gap:var(--space-3);align-items:center;margin-left:var(--space-6)}
.nav__hamburger{display:none;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted)}
@media(max-width:780px){
  .nav__hamburger{display:flex}
  .nav__links{display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;background:rgba(10,22,40,.98);
    border-bottom:1px solid var(--color-divider);padding:var(--space-4)}
  .nav__links.open{display:flex}
  .nav__links a{padding:var(--space-3) var(--space-4)}
}

/* ── BUTTONS ────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  padding:var(--space-3) var(--space-6);border-radius:var(--radius-btn);
  border:1.5px solid transparent;transition:all var(--transition);
  white-space:nowrap;cursor:pointer;text-decoration:none}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:.78rem}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:.68rem}
.btn-primary{background:var(--color-primary);color:var(--color-primary-ink);border-color:var(--color-primary);font-weight:600}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-secondary{background:transparent;color:var(--color-text);
  border-color:var(--color-border-strong)}
.btn-secondary:hover{background:var(--color-primary-highlight);border-color:var(--color-primary)}
.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:transparent}
.btn-ghost:hover{color:var(--color-text);background:var(--color-surface-2)}

/* ── TAGS ───────────────────────────────── */
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;
  background:var(--color-surface);color:var(--color-text-muted);
  border:1px solid var(--color-border)}
.tag--teal{background:var(--color-surface-2);color:var(--color-text-muted);border-color:var(--color-border-strong)}
.tag--navy{background:rgba(53,151,146,.1);color:var(--color-cyan);border-color:rgba(53,151,146,.2)}
.tag--purple{background:rgba(107,111,143,.1);color:var(--color-purple);border-color:rgba(107,111,143,.2)}

/* ── HERO BADGE ─────────────────────────── */
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-5);
  background:transparent;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-full);color:var(--color-purple);
  font-family:var(--font-mono);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--space-7)}
.hero-badge__dot{width:7px;height:7px;border-radius:50%;background:var(--color-purple);
  animation:pulse-dot 2s infinite}

/* ── STAT ROW ───────────────────────────── */
.stat-row{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-8)}
/* .stat-block etait utilise sur les 5 verticales sans jamais etre defini.
   Definition minimale : elle reprend le rendu deja obtenu par defaut, valeur
   au-dessus du label, et empeche l'element de deborder de .stat-row. */
.stat-block{display:flex;flex-direction:column;min-width:0}
.stat-block__value{font-family:var(--font-mono);font-weight:700;
  font-size:var(--text-xl);color:var(--color-data-4);line-height:1}
.stat-block__label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1);max-width:20ch}

/* ── MAP CONTAINERS ─────────────────────── */
.map-container{border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--color-border);position:relative;
  background:var(--color-surface)}
.map-caption{position:absolute;bottom:var(--space-3);left:50%;transform:translateX(-50%);
  z-index:400;background:rgba(10,22,40,.85);backdrop-filter:blur(8px);
  color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);
  white-space:nowrap;border:1px solid var(--color-border)}
.map-caption span{color:var(--color-text-faint);margin-inline:var(--space-2)}

/* ── CARD ───────────────────────────────── */
.card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);transition:all var(--transition)}
.card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-teal)}

/* ── PILLAR CARDS (3 pillars) ────────────── */
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-10)}
@media(max-width:900px){.problems-grid{grid-template-columns:1fr}}
.problem-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-7);
  transition:all var(--transition)}
.problem-card:hover{border-color:var(--color-border-strong)}
.problem-number{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(2rem,4vw,3rem);color:var(--color-text-faint);
  opacity:.25;line-height:1;margin-bottom:var(--space-4)}
.problem-card h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.problem-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}
.problem-list{list-style:none;padding:0;margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.problem-list li{font-size:var(--text-sm);color:var(--color-text-muted);
  padding-left:var(--space-5);position:relative}
.problem-list li::before{content:'→';position:absolute;left:0;color:var(--color-text-faint)}

/* ── POC SECTION ─────────────────────────── */
.poc-section{
  background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-alt) 100%);
}

.poc-explainer{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-6);
  margin-bottom:var(--space-8);
}

.poc-explainer strong{
  color:var(--color-text);
}

.poc-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 320px;
  gap:var(--space-5);
  align-items:start;
  margin-top:var(--space-6);
}

@media(max-width:1200px){
  .poc-layout{
    grid-template-columns:280px minmax(0,1fr) 280px;
  }
}

@media(max-width:980px){
  .poc-layout{
    grid-template-columns:1fr;
  }
}

.poc-sidebar{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  max-height:700px;
  overflow-y:auto;
  box-shadow:var(--shadow-sm);
}

.poc-sidebar h3{
  font-size:var(--text-base);
  font-weight:600;
  margin-bottom:var(--space-2);
  color:var(--color-text);
}

.poc-sidebar__intro{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  line-height:1.55;
  margin-bottom:var(--space-4);
}

.poc-sidebar__intro span{
  color:var(--color-purple);
}

.poc-main{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
  background:var(--color-surface);
}

.poc-map-wrap{
  position:relative;
  min-height:700px;
  border-radius:var(--radius-xl);
  overflow:hidden;
}

#map{
  width:100%;
  height:700px;
}

@media(max-width:980px){
  .poc-map-wrap,
  #map{
    min-height:420px;
    height:420px;
  }
}

.map-controls{
  position:absolute;
  top:12px;
  left:12px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.map-btn-row{
  display:flex;
  gap:8px;
}

.map-btn{
  padding:8px 12px;
  background:rgba(10,22,40,.92);
  color:var(--color-text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  font-size:var(--text-xs);
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  backdrop-filter:blur(10px);
}

.map-btn:hover,
.map-btn.active{
  background:var(--color-primary);
  color:#070E15;
  border-color:var(--color-primary);
}

.map-legend{
  position:absolute;
  bottom:16px;
  left:12px;
  z-index:20;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  padding:var(--space-4);
  max-width:240px;
  backdrop-filter:blur(10px);
}

.legend-title{
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--color-text);
  margin-bottom:var(--space-3);
}

.legend-item{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--space-2);
}

.legend-item:last-child{
  margin-bottom:0;
}

.legend-color{
  width:14px;
  height:14px;
  border-radius:0;
  flex-shrink:0;
}

.crm-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:0;
  padding:var(--space-4);
  margin-bottom:var(--space-3);
  cursor:pointer;
  transition:all var(--transition);
}

.crm-card:hover{
  border-color:var(--color-border-strong);
  transform:translateX(4px);
  box-shadow:var(--shadow-teal);
}

.crm-card.filtered{
  opacity:.35;
}

.crm-company{
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-text);
  margin-bottom:6px;
}

.crm-zone-badge{
  display:inline-block;
  background:rgba(82,176,171,.18);
  color:var(--color-data-3);
  padding:4px 10px;
  border-radius:0;
  font-size:11px;
  font-weight:600;
  margin-bottom:8px;
}

.crm-meta{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:4px;
}

.crm-naf{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--color-cyan);
}

.zone-item{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:0;
  padding:var(--space-4);
  margin-bottom:var(--space-3);
  cursor:pointer;
  transition:all var(--transition);
}

.zone-item:hover{
  border-color:var(--color-border-strong);
  transform:translateX(-4px);
}

.zone-item.active{
  background:rgba(232,170,78,.14);
  border-color:var(--color-primary);
  border-left:3px solid var(--color-primary);
}

.zone-name{
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-text);
  margin-bottom:6px;
}

.zone-score{
  display:inline-block;
  padding:4px 10px;
  border-radius:0;
  font-size:11px;
  font-weight:600;
  margin-bottom:8px;
}

.score-prioritaire{
  background:rgba(122,215,209,.18);
  color:var(--color-data-4);
}

.score-strategique{
  background:rgba(53,151,146,.18);
  color:var(--color-cyan);
}

.score-surveiller{
  background:rgba(107,111,143,.18);
  color:var(--color-purple);
}

.zone-details{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  line-height:1.5;
}

/* Zone list in sidebar */
.zone-item{padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-2);
  cursor:pointer;border:1px solid var(--color-border);transition:all var(--transition)}
.zone-item:hover{border-color:var(--color-border-strong)}
/* Selection : seul l element actif porte la marque, c est un repere de position. */
.zone-item.active{border-color:var(--color-primary);background:var(--color-surface-2)}
.zone-item__name{font-size:var(--text-xs);font-weight:600;margin-bottom:2px}
.zone-item__score{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-data-4)}
.zone-item__desc{font-size:10px;color:var(--color-text-faint);line-height:1.4;margin-top:var(--space-1)}

/* ── CASE STUDY CARDS (mosaïque : hairline visible dans le gap 1px) ── */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--color-border)}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}}
.case-card{border-radius:0;overflow:hidden;
  background:var(--color-bg);border:none;
  transition:background var(--transition)}
.case-card:hover{background:var(--color-bg-alt)}
.case-card__img{height:200px;overflow:hidden;background:var(--color-surface-2)}
.case-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.case-card:hover .case-card__img img{transform:scale(1.04)}
.case-card__body{padding:var(--space-6)}
.case-card__metric{font-family:var(--font-mono);font-weight:700;
  font-size:var(--text-xl);color:var(--color-data-4);margin-bottom:var(--space-1)}
.case-card__metric-label{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-4)}
.case-card__title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.case-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}

/* ── OFFER CARDS (mosaïque : hairline visible dans le gap 1px) ── */
/* Tache 3.4 : rangee incomplete. Le fond de la grille etait la couleur de
   filet, donc chaque cellule vide de la derniere rangee se voyait comme un
   rectangle plus clair. Le filet passe sur les CARTES, en outline : un
   outline ne prend pas de place, celui de deux cartes voisines se
   superpose dans le gap de 1 px, la mosaique est identique, et une cellule
   vide ne peint plus rien. */
.offres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:none}
@media(max-width:1000px){.offres-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.offres-grid{grid-template-columns:1fr}}
/* Tache 4.10 : la grille des deux formats de verticale-audela.html portait
   "repeat(2,1fr)" en ATTRIBUT STYLE, et un style en ligne bat les media
   queries ci-dessus : sous 600 px elle restait a deux colonnes et le
   document debordait de 46 px a 375. Meme cause que celle corrigee sur
   l accueil a la tache 2.5. La page n a pas de bloc <style>, la regle vit
   donc ici, portee par un id : aucune classe creee. */
#offresAudela{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){#offresAudela{grid-template-columns:1fr}}
.offre-v3{background:var(--color-bg);border:none;
  outline:1px solid var(--color-border);
  border-radius:0;padding:var(--space-6);
  transition:background var(--transition);display:flex;flex-direction:column;gap:var(--space-3)}
.offre-v3:hover{background:var(--color-bg-alt)}
/* Tache 3.5 : le code d offre passe A DROITE DU PRIX. Il etait a l oppose,
   en tete de carte, ou il se lisait comme un titre. Le sens de lecture ne
   change pas dans le HTML, seul l ordre visuel : order:2 sur le code, et
   la paire se cale a droite. La taille et la couleur ont ete reglees a la
   tache 2.5. */
.offre-v3__top{display:flex;justify-content:flex-end;align-items:baseline;
  gap:var(--space-3)}
.offre-v3__top .offre-v3__num{order:2}
/* Taches 2.5 et 3.5 : le code d offre n est pas un titre. Il etait rendu
   en 1,6 a 2 rem, plus gros que le titre de la carte lui-meme, et il
   attirait l oeil sur une reference interne. Il passe au jeton --text-xs
   et a la couleur des mentions faibles. La regle est globale : elle vaut
   pour l accueil, pour offres.html et pour les verticales. */
.offre-v3__num{font-family:var(--font-mono);font-weight:700;
  font-size:var(--text-xs);color:var(--color-text-faint);line-height:1}
/* Tache 4.10 : le prix est l information qui decide, il ne descend pas
   sous 14 px. --text-xs plafonnait a 12,8 px. */
.offre-v3__price{font-family:var(--font-mono);font-size:.875rem;font-weight:700;color:var(--color-data-4)}
.offre-v3__title{font-size:var(--text-sm);font-weight:600;line-height:1.3}
.offre-v3__desc{font-size:var(--text-sm);color:var(--color-text-muted);flex:1;line-height:1.55}
.offre-v3__footer{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-divider)}
.offre-v3__duration{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ── OFFER DETAIL PAGE ──────────────────── */
.offer-detail{display:grid;grid-template-columns:1fr 340px;gap:var(--space-10);align-items:start}
@media(max-width:900px){.offer-detail{grid-template-columns:1fr}}
.offer-card{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-xl);padding:var(--space-7);position:sticky;top:80px}
.offer-card__price{font-family:var(--font-mono);font-weight:600;
  font-size:var(--text-xl);color:var(--color-data-4);margin-bottom:var(--space-2)}
.offer-card__duration{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.deliverables-list li{display:flex;gap:var(--space-3);align-items:start;
  padding:var(--space-2) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.deliverables-list li:last-child{border-bottom:none}
/* Meme marqueur que .check-list et .list. Ce U+2713 vivait dans style.css,
   hors de portee du controle caracteres qui ne scannait que les pages : il
   n a jamais ete signale, et .deliverables-list est employee par
   styleguide.html. */
.deliverables-list li::before{content:'→';color:var(--color-text-faint);font-weight:600;flex-shrink:0}

/* ── PARTNERSHIP SECTION ─────────────────── */
.partner-band{background:var(--color-bg-alt);
  border-block:1px solid var(--color-border)}
.partner-combo{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-8);align-items:center}
@media(max-width:768px){.partner-combo{grid-template-columns:1fr;gap:var(--space-6);
  text-align:center}}
.partner-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-7)}
.partner-card--teal{border-color:var(--color-border-strong)}
.partner-card--purple{border-color:rgba(107,111,143,.3)}
.partner-label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--space-4)}
.partner-label--teal{color:var(--color-text-muted)}
.partner-label--purple{color:var(--color-purple)}
.partner-name{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-3)}
.partner-skills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.partner-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
.partner-sep{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-2xl);color:var(--color-border-strong);text-align:center}
.partner-combo-desc{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-7);margin-top:var(--space-8)}
.combo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
@media(max-width:768px){.combo-steps{grid-template-columns:1fr}}
.combo-step__num{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  color:var(--color-text-faint);margin-bottom:var(--space-2)}
.combo-step__title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.combo-step__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}

/* ── NETWORK CARDS ──────────────────────── */
.network-band{background:var(--color-surface-offset);border-block:1px solid var(--color-divider)}
.network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media(max-width:768px){.network-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.network-grid{grid-template-columns:1fr}}
.network-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6)}
.network-card__chip{display:inline-flex;padding:2px 10px;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--color-text-muted);margin-bottom:var(--space-4)}
.network-card__title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.network-card__desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6}

/* ── TIMELINE ───────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-6)}
.timeline__item{display:flex;gap:var(--space-4);align-items:start}
.timeline__dot{width:10px;height:10px;min-width:10px;border-radius:50%;
  background:var(--color-border-strong);margin-top:6px}
.timeline__date{font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.timeline__title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)}
.timeline__desc{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── PROFILE CARD ───────────────────────── */
.profile-card{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-xl);padding:var(--space-7)}
.monogram{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;background:var(--color-surface-2);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;
  color:var(--color-text-muted);margin-bottom:var(--space-4)}
.profile-card__name{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-2)}
.profile-card__role{font-size:var(--text-sm);color:var(--color-text-muted);
  font-weight:600;margin-bottom:var(--space-4)}
.profile-card__quote{font-size:var(--text-sm);color:var(--color-text-muted);
  font-style:italic;border-left:2px solid var(--color-border-strong);
  padding-left:var(--space-4);margin-bottom:var(--space-5);line-height:1.7}

/* ── PAGE HERO ──────────────────────────── */
.page-hero{padding-block:clamp(var(--space-10),6vw,var(--space-16));
  border-bottom:1px solid var(--color-divider);
  background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-alt) 100%)}
.page-hero__eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);margin-bottom:var(--space-3)}
.page-hero__title{font-size:var(--text-2xl);font-weight:600;line-height:1.15;margin-bottom:var(--space-5)}
.page-hero__desc{font-size:var(--text-lg);color:var(--color-text-muted);max-width:54ch}

/* ── FORMS ──────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}
/* Tache 3.11 : width:100% et min-width:0 sur les champs. Un <select> se
   dimensionne sur sa plus longue OPTION, et la nouvelle liste en porte une
   de soixante caracteres : le champ debordait de son conteneur, mesure a
   534 px pour une fenetre de 375. min-width:0 est necessaire en plus,
   parce qu un element de grille a min-width:auto et refuse de retrecir
   sous sa largeur intrinseque. */
.field input,.field textarea,.field select{
  width:100%;min-width:0;max-width:100%;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  border:1.5px solid var(--color-border);background:var(--color-surface);
  font-size:var(--text-sm);
  /* Pas de transition sur border-color : alimentee par var(), elle gele
     la valeur calculee et les etats field--focus et field--error ne
     s appliquent plus. Constate au rendu le 8 aout 2026. */
  color:var(--color-text)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:2px}
.field textarea{resize:vertical;min-height:120px}
/* ── ETATS DE CHAMP (tache 12, classes du §3.2 addendum 4.1) ───────────
   Quatre etats : repos, saisie, erreur, plus le message de confirmation.
   field--focus porte la marque, c'est l'un des trois emplois autorises :
   il situe l'endroit ou l'utilisateur agit. field--error porte la couche
   etat. Le rayon reste a zero, l'etat se dit par le filet et le texte. */
.field input,.field textarea,.field select{border-radius:0}
.field--focus input,.field--focus textarea,.field--focus select{
  border-color:var(--color-primary)}
.field--error input,.field--error textarea,.field--error select{
  border-color:var(--color-danger)}
.field--error label{color:var(--color-danger)}
.field__message{font-family:var(--font-mono);font-size:.68rem;
  line-height:1.45;color:var(--color-text-muted);margin:0}
.field__message--error{color:var(--color-danger);font-weight:700}
.form-status{border-radius:0}
.form-status--pending{background:var(--color-surface-2);
  color:var(--color-text-muted);display:block;
  border:1px dashed var(--color-border-strong)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-status{padding:var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;display:none}
.form-status--success{background:var(--color-primary-highlight);color:var(--color-primary);display:block;border:1px solid rgba(232,170,78,.3)}
.form-status--error{background:rgba(242,113,106,.1);color:var(--color-danger);display:block;border:1px solid rgba(242,113,106,.3)}

/* ── PROSE ──────────────────────────────── */
.prose h3{font-size:var(--text-lg);margin-block:var(--space-6) var(--space-3)}
.prose p{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-4);line-height:1.75}
.prose ul{padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.prose ul li{font-size:var(--text-sm);color:var(--color-text-muted);list-style:disc}

/* ── STACK VIZ ──────────────────────────── */
.stack-layer{display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-3)}
.stack-layer__label{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:28px;border-radius:var(--radius-sm);
  background:var(--color-surface-2);border:1px solid var(--color-border-strong);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  color:var(--color-text-muted);flex-shrink:0}
.stack-arrow{text-align:center;color:var(--color-text-faint);padding:var(--space-1) 0}

/* ── BLOG ───────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;
  transition:all var(--transition)}
.blog-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-teal)}
.blog-card__thumb{height:160px;overflow:hidden;background:var(--color-surface-2)}
.blog-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-card__thumb img{transform:scale(1.04)}
.blog-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.blog-card__meta{display:flex;align-items:center;gap:var(--space-2)}
.blog-card__date{font-size:var(--text-xs);color:var(--color-text-faint)}
.blog-card__title{font-size:var(--text-sm);font-weight:600;line-height:1.35;flex:1}
.blog-card__readmore{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;margin-top:auto}
.skeleton{background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-2) 50%,var(--color-surface) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-xl)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── ADMIN ──────────────────────────────── */
.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 64px)}
.admin-sidebar{background:var(--color-surface-offset);border-right:1px solid var(--color-divider);padding:var(--space-6)}
.admin-sidebar a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-text-muted);transition:all var(--transition)}
.admin-sidebar a.active,.admin-sidebar a:hover{background:var(--color-primary-highlight);color:var(--color-primary)}
.admin-main{padding:var(--space-8)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{text-align:left;padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}
.admin-table td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);
  border-bottom:1px solid var(--color-divider);color:var(--color-text-muted)}
.admin-table tr:hover td{background:var(--color-surface-2)}
.badge-published{background:var(--color-surface-2);color:var(--color-text-muted);
  padding:2px 8px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}
.badge-draft{background:var(--color-surface-2);color:var(--color-text-muted);
  padding:2px 8px;border-radius:var(--radius-full);font-size:var(--text-xs)}

/* ── FOOTER ─────────────────────────────── */
.footer{background:var(--color-bg);border-top:1px solid var(--color-divider);padding-block:var(--space-12)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-10)}
@media(max-width:700px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer__brand{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  color:var(--color-primary);margin-bottom:var(--space-2)}
.footer__tagline{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.7}
.footer__heading{font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-faint);margin-bottom:var(--space-4)}
.footer__links{display:flex;flex-direction:column;gap:var(--space-2)}
.footer__links a{font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--transition)}
.footer__links a:hover{color:var(--color-primary)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
  padding-top:var(--space-6);border-top:1px solid var(--color-divider);
  font-size:var(--text-xs);color:var(--color-text-faint)}

/* ── LEAFLET OVERRIDE (dark) ─────────────── */
.leaflet-container{font-family:var(--font-body)!important;background:var(--color-surface)!important}
.leaflet-popup-content-wrapper{background:var(--color-surface)!important;
  border:1px solid var(--color-border-strong)!important;border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-lg)!important;color:var(--color-text)!important}
.leaflet-popup-tip{background:var(--color-surface)!important}
.leaflet-control-zoom a{background:var(--color-surface)!important;
  color:var(--color-text)!important;border-color:var(--color-border)!important}
.leaflet-control-zoom a:hover{background:var(--color-surface-2)!important}

/* ═══════════════════════════════════════════
   Couche compatibilité V12 → Dark design
   Restyle classes v12 pour palette navy/teal
   ═══════════════════════════════════════════ */

/* ── Accessibility ─────────────────────── */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;z-index:999;background:var(--color-surface);
  padding:.75rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);
  color:var(--color-text)}

/* ── Header ─────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;
  background:rgba(10,22,40,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-divider);
  transition:background .3s}
.site-header.scrolled{background:rgba(10,22,40,.98)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:4rem;padding-inline:var(--space-6);
  max-width:var(--content-wide);margin-inline:auto}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
  min-width:0}
/* R4 : sans min-width:0 le bloc de marque impose sa largeur intrinseque et
   l en-tete ne peut pas descendre sous 399 px. Le libelle se replie sur deux
   lignes a tres petit ecran au lieu de pousser le reste hors du champ. */
.brand-meta{min-width:0}
.brand-mark{width:2.4rem;height:2.4rem;border-radius:0;
  background:transparent;border:1px solid var(--color-border-strong);
  display:grid;place-items:center;color:var(--color-primary);}
.brand-mark svg{width:1.4rem;height:1.4rem}
.brand-meta strong{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1rem;line-height:1.1;color:var(--color-primary)}
.brand-meta span{display:block;font-size:var(--text-xs);color:var(--color-text-muted)}
.site-nav{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.site-nav a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-text-muted);
  position:relative;transition:color var(--transition);text-decoration:none}
.site-nav a::after{content:'';position:absolute;bottom:-2px;left:var(--space-3);
  right:var(--space-3);height:1.5px;background:var(--color-primary);
  width:0;transition:width var(--transition)}
/* R4 : le survol seul ne declenche rien au tactile. L etat courant, lui,
   reste peint sans condition, il ne depend pas d un pointeur. */
@media (hover: hover) and (pointer: fine){
  .site-nav a:hover{color:var(--color-text)}
  .site-nav a:hover::after{width:calc(100% - 2*var(--space-3))}
}
.site-nav a[aria-current="page"]::after{
  width:calc(100% - 2*var(--space-3))}
.site-nav a[aria-current="page"]{color:var(--color-text)}
.header-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
/* R4 : l exemplaire du CTA qui vit dans le panneau mobile. Masque au-dela
   de 768 px, ou c est celui de .header-actions qui s affiche. Les deux ne
   sont jamais visibles ensemble. */
/* Qualifie par .site-nav a dessein, (0,2,0). [data-nav-cta] seul vaut (0,1,0),
   autant que .btn : l ordre source suffisait puisque .btn est ligne 246, mais
   l egalite de specificite rendait la regle fragile au moindre deplacement.
   Aucun !important. */
.site-nav [data-nav-cta]{display:none}
.theme-toggle{display:none!important} /* dark-only design */
.menu-toggle{display:none;align-items:center;justify-content:center;
  /* 2.75rem = 44 px, cible tactile du critere WCAG 2.5.5 niveau AAA. */
  width:2.75rem;height:2.75rem;min-width:2.75rem;min-height:2.75rem;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text-muted)}
/* ── R4 : panneau de navigation mobile, sous 768 px ─────────────────────
   L etat ouvert est porte par un ATTRIBUT, data-nav-open sur l en-tete, et
   non par une classe : aucune classe n est creee par ce lot.
   Le CTA de .header-actions passe dans le panneau. C est ce deplacement qui
   fait tenir l en-tete : son contenu exigeait 399 px, mesure par l audit R1,
   dont 220 px pour .header-actions seule. Le contenu n est pas ampute, il
   change de place. */
@media(max-width:768px){
  .menu-toggle{display:flex}
  .header-actions > .btn{display:none}
  .site-nav [data-nav-cta]{display:inline-flex;align-self:stretch;
    justify-content:center;margin-top:var(--space-3)}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;background:rgba(10,22,40,.98);
    border-bottom:1px solid var(--color-divider);padding:var(--space-4);
    max-height:calc(100dvh - 4rem);overflow-y:auto}
  .site-header[data-nav-open] .site-nav{display:flex}
  /* 2.75rem = 44 px de haut, critere WCAG 2.5.5 niveau AAA, obtenu par le
     rembourrage et non par la taille de police, qui ne bouge pas. */
  .site-nav a{padding:var(--space-3) var(--space-4);min-height:2.75rem;
    display:flex;align-items:center}
}

/* ── Hero (v12 classes, dark design) ─────── */
.hero{padding-block:clamp(2rem,4vw,3.5rem);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--color-bg) 0%,#04090E 50%,#04090E 100%)}
.hero-grid{display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(var(--space-8),5vw,var(--space-12));align-items:center}
@media(max-width:780px){.hero-grid{grid-template-columns:1fr}}
.hero-title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.75rem,3.2vw,2.8rem);line-height:1.08;
  color:var(--color-text);margin-bottom:var(--space-6)}
.hero-card{border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--color-border);background:var(--color-surface)}
.hero-visual img{width:100%;height:auto;display:block}
.hero-stats{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-8)}
.stat strong{font-family:var(--font-mono);font-weight:700;font-size:var(--text-xl);
  color:var(--color-data-4);display:block;line-height:1}
.stat span{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;
  display:block;max-width:20ch}

/* ── Page content helpers ─────────────────── */
.lead{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.7;
  max-width:50ch;margin-bottom:0}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border-radius:var(--radius-full);
  background:var(--color-surface-2);color:var(--color-text-muted);
  border:1px solid var(--color-border);font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
/* Tache 4.10 : plancher de 12 px calcules. .7rem valait 11,2 px. */
.kicker{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);
  margin-bottom:var(--space-2);display:block}
.page-title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.1;
  color:var(--color-text)}
.section-title{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-2xl);line-height:1.1;margin-bottom:var(--space-4);color:var(--color-text)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-10)}
.muted{color:var(--color-text-muted)}
.feature-band{background:linear-gradient(180deg,#04090E 0%,var(--color-bg-alt) 100%);
  border-block:1px solid var(--color-border)}

/* ── Grids ───────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Cards ───────────────────────────────── */
.card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition)}
.card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-teal)}
.card h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  margin-bottom:var(--space-3);color:var(--color-text)}
.card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}
.media-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
/* Tache 3.3 : toutes les images de .media-card au meme rapport. Elles
   n avaient pas le meme ratio et la hauteur fixe de 210 px produisait des
   cadrages differents d une carte a l autre. aspect-ratio les aligne, et
   object-position:center evite de rogner toujours du meme cote. */
.media-card img{width:100%;aspect-ratio:2 / 1;object-fit:cover;
  object-position:center;transition:transform .5s;display:block}
.media-card:hover img{transform:scale(1.04)}
.media-card .body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.media-card .body h3{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-1);color:var(--color-text)}
.media-card .body p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── Lists ───────────────────────────────── */
.list{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) 0 0;list-style:none}
.list li{font-size:var(--text-sm);color:var(--color-text-muted);
  padding-left:var(--space-5);position:relative}
.list li::before{content:'→';position:absolute;left:0;color:var(--color-text-faint)}

/* ── Metrics ─────────────────────────────── */
.metric-row{display:flex;gap:var(--space-8);flex-wrap:wrap;
  padding-block:var(--space-8);border-block:1px solid var(--color-divider)}
.metric{display:flex;flex-direction:column;gap:var(--space-1)}
.metric .value{font-family:var(--font-mono);font-weight:700;
  font-size:var(--text-2xl);color:var(--color-data-4);line-height:1}
.metric .label{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── Tags ────────────────────────────────── */
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}

/* ── Tables ──────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-xl);
  border:1px solid var(--color-border)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table-wrap th{text-align:left;padding:var(--space-3) var(--space-4);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);
  background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}
.table-wrap td{padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-divider);color:var(--color-text-muted)}
.table-wrap tr:last-child td{border-bottom:none}
.table-wrap tr:hover td{background:var(--color-surface-2)}

/* ── Quote ───────────────────────────────── */
.quote{background:linear-gradient(135deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);padding:var(--space-7)}
.quote p{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:var(--color-text);line-height:1.55;margin-bottom:var(--space-4);max-width:none}
.quote strong{font-family:var(--font-mono);font-size:.7rem;color:var(--color-text);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-style:normal}

/* ── Notice ──────────────────────────────── */
.notice{background:transparent;border:1px dashed var(--color-border-strong);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
.notice p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:none}

/* ── CTA Panel ───────────────────────────── */
.panel{border-radius:var(--radius-xl);padding:var(--space-8)}
.cta-panel{background:linear-gradient(135deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-border);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
@media(max-width:768px){.cta-panel{grid-template-columns:1fr}}

/* ── Timeline (v12 style) ─────────────────── */
.timeline{display:flex;flex-direction:column}
.timeline-item{display:flex;gap:var(--space-6);padding-block:var(--space-5);
  border-bottom:1px solid var(--color-divider)}
.timeline-item:last-child{border-bottom:none}
.timeline-year{font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  color:var(--color-text-muted);min-width:64px;padding-top:4px;letter-spacing:.06em}
.timeline-item h3{font-family:var(--font-display);font-size:var(--text-base);
  font-weight:600;margin-bottom:var(--space-2);color:var(--color-text)}
.timeline-item p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── Blog (v12 style) ────────────────────── */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--space-8);align-items:start}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr}}
.article-card{padding:var(--space-5)}
.article-meta{display:flex;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}
.article-meta span{font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  padding:2px 8px;border-radius:var(--radius-full)}
.article-card h3{font-family:var(--font-display);font-size:var(--text-base);
  font-weight:600;margin-bottom:var(--space-2);color:var(--color-text)}
.article-card p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── Contact grid ────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-8);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.map-box{padding:var(--space-7)}

/* ── Form ────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field-full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}

/* ── Pill badges ─────────────────────────── */
.pill{display:inline-flex;padding:2px 8px;border-radius:var(--radius-full);
  font-size:.7rem;font-weight:700;font-family:var(--font-mono)}
.pill.ok{background:var(--color-primary-highlight);color:var(--color-primary)}
.pill.warn{background:transparent;color:var(--color-purple);border:1px solid var(--color-purple)}
.pill.draft{background:var(--color-surface-2);color:var(--color-text-muted)}

/* ── Admin ───────────────────────────────── */
.admin-shell{display:grid;grid-template-columns:200px 1fr;gap:var(--space-6);align-items:start}
@media(max-width:768px){.admin-shell{grid-template-columns:1fr}}
.sidebar.card{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.sidebar a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-text-muted);
  transition:all var(--transition);text-decoration:none}
.sidebar a.active,.sidebar a:hover{background:var(--color-primary-highlight);color:var(--color-primary)}
.panel.card{padding:var(--space-6)}
.panel.card h3{color:var(--color-text);margin-bottom:var(--space-4);font-size:var(--text-base)}

/* ── Footer (v12 classes) ─────────────────── */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:var(--space-10);margin-bottom:var(--space-10)}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}
.logo-lockup{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.logo-lockup .brand-mark{flex-shrink:0}
.logo-lockup strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-base);color:var(--color-primary)}
.logo-lockup p{font-size:var(--text-xs);color:var(--color-text-muted);max-width:none;margin-top:2px}
.footer p:not(.logo-lockup p){font-size:var(--text-sm);color:var(--color-text-muted)}
/* Tache 4.10 : les liens du pied de page atteignent 44 px de hauteur
   cliquable. Ils etaient au fil du texte, donc hauts de leur seule ligne. */
.footer a{color:var(--color-text-muted);transition:color var(--transition);
  display:inline-flex;align-items:center;min-height:44px}
.footer a:hover{color:var(--color-primary)}
.footer small{font-size:var(--text-xs);color:var(--color-text-faint)}


/* ── POC carte Leaflet importée de la version de référence ── */
.poc-main{
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  box-shadow:var(--shadow-md);
}
#poc-map{
  width:100%;
  height:500px;
  background:var(--color-surface-offset);
}
@media(max-width:980px){
  #poc-map{height:420px}
}
.poc-controls{
  padding:var(--space-3);
  background:var(--color-surface-offset);
  border-top:1px solid var(--color-divider);
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.poc-btn{
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  font-weight:600;
  border:1px solid var(--color-border);
  background:transparent;
  color:var(--color-text-muted);
  cursor:pointer;
  transition:all var(--transition);
}
.poc-btn.active,
.poc-btn:hover{
  background:var(--color-primary);
  color:#070E15;
  border-color:var(--color-primary);
}
.poc-legend{
  padding:var(--space-4);
  background:var(--color-surface-offset);
  border-top:1px solid var(--color-divider);
}
.poc-legend__item{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--space-2);
}
.poc-legend__item:last-child{margin-bottom:0}
.poc-legend__dot{
  width:12px;
  height:12px;
  border-radius:2px;
  flex-shrink:0;
}
.leaflet-container{
  font-family:var(--font-body);
  background:var(--color-surface-offset);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background:rgba(10,22,40,.94);
  color:var(--color-text);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
}
.leaflet-popup-content{margin:10px 12px}

/* ── Hero stats band ── DEPRECIE le 6 septembre 2026 ───────────────────
   .hero-stats-band et ses .hsb-* ne sont plus employes : le bandeau a ete
   retire du HTML de l accueil. Un seuil de commande publique ne dit rien a
   un operateur EnR, un decompte de sources ne dit rien a personne, et
   "20+" seul ne justifiait pas une bande. Les regles sont CONSERVEES, pas
   supprimees : aucune suppression sans validation explicite. */
.hero-stats-band{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  margin-top:clamp(var(--space-6),3.5vw,var(--space-10));
  padding-block:var(--space-6);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-divider);
}
.hsb-item{
  flex:1;min-width:130px;display:flex;flex-direction:column;gap:3px;
  padding-inline:var(--space-6);
}
.hsb-item:first-child{padding-left:0}
.hsb-item strong{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.9rem);
  color:var(--color-data-4);line-height:1;letter-spacing:-.02em;
}
.hsb-item span{
  font-size:var(--text-xs);color:var(--color-text-muted);
  line-height:1.4;max-width:18ch;
}
.hsb-divider{
  width:1px;height:38px;background:var(--color-border);
  flex-shrink:0;align-self:center;
}
@media(max-width:600px){
  .hsb-divider{display:none}
  .hero-stats-band{gap:var(--space-5)}
  .hsb-item{min-width:110px;padding-inline:0}
}

/* ── POC Pipeline linéaire ───────────────────────────────────── */
.poc-pipeline{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:0;align-items:start;
  margin-bottom:var(--space-8);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
}
@media(max-width:900px){
  .poc-pipeline{grid-template-columns:1fr 1fr;gap:var(--space-4);
    grid-template-rows:auto auto;}
  .poc-pipe-arrow{display:none}
}
.poc-pipe-step{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);
  transition:background var(--transition);
}
.poc-pipe-step--active{
  background:var(--color-primary-highlight);
  border:1px solid var(--color-border-strong);
}
.poc-pipe-num{
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  color:var(--color-text-faint);letter-spacing:.14em;text-transform:uppercase;
}
.poc-pipe-label{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);
  color:var(--color-text);line-height:1.2;
}
.poc-pipe-desc{
  font-size:.75rem;color:var(--color-text-muted);line-height:1.5;
}
.poc-pipe-arrow{
  font-size:1.2rem;color:var(--color-border-strong);
  align-self:center;padding-inline:var(--space-2);
  opacity:.6;
}

/* ── Network grid — 6 cards (3 col on md, 2 on sm) ─────────── */
.network-grid--6{
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:900px){.network-grid--6{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.network-grid--6{grid-template-columns:1fr}}

/* ── Offre CTA pill button ───────────────────────────────────── */
/* Tache 4.10 : hauteur cliquable de 44 px, critere 2.5.5 AAA. Le
   rembourrage vertical de --space-2 donnait 36 px. min-height le garantit
   quelle que soit la taille du texte. */
.offre-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid rgba(232,170,78,.35);
  color: var(--color-primary);
  background: rgba(232,170,78,.08);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  margin-top: auto;
}
.offre-cta::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.offre-cta:hover {
  background: rgba(232,170,78,.18);
  border-color: var(--color-primary);
  }

/* ── Pain / Response cards ───────────────────────────────────── */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media(max-width: 768px) { .pain-grid { grid-template-columns: 1fr; } }

.pain-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.pain-card:hover { box-shadow: var(--shadow-teal); border-color: var(--color-border-strong); }

.pain-card__problem {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.pain-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-3);
  line-height: 1.4;
}
.pain-card__response {
  padding: var(--space-4) var(--space-6) var(--space-5);
}
.pain-card__response p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-top: var(--space-2);
}

.pain-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pain-badge--problem {
  background: rgba(242,113,106,.12);
  color: #ef4444;
  border: 1px solid rgba(242,113,106,.25);
}
.pain-badge--response {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

/* ── FAQ accordion ───────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item:hover { border-color: var(--color-border-strong); }
.faq-item.open { border-color: rgba(232,170,78,.35); }

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}
.faq-trigger:hover { color: var(--color-primary); }
.faq-icon {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform .3s ease;
  line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-body-inner {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

/* ── Dropdown "Prestations" (vue d'ensemble + 5 verticales) — injecté
   par nav.js. Ouverture au clic, jamais au survol. ─────────────────── */
.nav-item-dropdown{position:relative}
.nav-item-dropdown > a{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.nav-item-dropdown > a span{font-size:.65em;opacity:.7}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;
  background:var(--color-bg);border:1px solid var(--color-border-strong);
  border-radius:0;padding:0;margin-top:var(--space-2);
  display:none;z-index:40}
.nav-item-dropdown.nav-dropdown-open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:var(--space-3) var(--space-4);
  border-radius:0;color:var(--color-text-muted);
  border-bottom:1px solid var(--color-divider);
  font-size:var(--text-sm);text-decoration:none;transition:all var(--transition)}
.nav-dropdown-menu a:last-child{border-bottom:none}
@media (hover: hover) and (pointer: fine){
  .nav-dropdown-menu a:hover{background:oklch(0.93 0.01 250 / .05);color:var(--color-text)}
}
.nav-dropdown-menu a.nav-dropdown-overview{color:var(--color-primary);font-weight:600}

@media (max-width:900px){
  .nav-dropdown-menu{position:static;border:none;background:transparent;margin-top:0;
    padding-left:var(--space-4)}
}

/* ── COIN DE PLAN CARTOGRAPHIQUE ─────────────────────────────
   Motif signature de la charte : encadre l'image héro et les
   visuels clés (jamais du texte ni des boutons). Un seul
   pseudo-élément, 8 dégradés-solides pour les 4 coins en L. ── */
.corner-frame,
.hero-slideshow,
.poc-main{position:relative}
.corner-frame::before,
.hero-slideshow::before,
.poc-main::before{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong)),
    linear-gradient(var(--color-border-strong),var(--color-border-strong));
  background-size:
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px;
  background-position:
    top 0 left 0, top 0 left 0,
    top 0 right 0, top 0 right 0,
    bottom 0 left 0, bottom 0 left 0,
    bottom 0 right 0, bottom 0 right 0;
}

/* ── KICKER NUMBERED (01/02/03…) ──────────────────────────────
   Numérotation Newsreader grise, décrite dans la charte. ── */
.kicker-num{font-family:var(--font-display);font-weight:600;
  font-size:1.25rem;color:var(--color-text-faint)}

/* ── FIL D'ARIANE + ONGLETS VERTICALES ────────────────────────
   Navigation entre les 5 pages verticales : "← Toutes les
   prestations" + barre d'onglets, onglet actif en surbrillance
   ambre. Utilisé en tête de chaque page verticale-*.html. ── */
.vertical-breadcrumb{display:inline-block;font-size:var(--text-sm);
  font-weight:600;color:var(--color-cyan);text-decoration:none;
  transition:color var(--transition)}
.vertical-breadcrumb:hover{color:var(--color-primary)}
.vertical-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;
  margin:var(--space-5) 0 var(--space-8)}
.vertical-tab{font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border-strong);color:var(--color-text-muted);
  transition:all var(--transition)}
.vertical-tab:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.vertical-tab[aria-current="page"]{font-weight:700;
  background:var(--color-primary);border-color:var(--color-primary);
  color:var(--color-primary-ink)}

/* ── PARTENARIAT (Lookalyzed) ─────────────────────────────────
   Encart tiers, sur les verticales Déploiement/Géoprospection/
   Collectivités. Jamais sur Réseaux & foncier (déjà couvert). ── */
.partner-callout{border:1px solid var(--color-border-strong);padding:var(--space-8);
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-7);
  align-items:center}
@media(max-width:768px){.partner-callout{grid-template-columns:1fr;text-align:center}}
.partner-callout__brand{font-family:var(--font-display);font-weight:600;
  font-size:1.25rem;white-space:nowrap}
.partner-callout__brand span{color:var(--color-text-muted)}
.partner-callout__kicker{font-family:var(--font-mono);font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-cyan);margin-bottom:var(--space-2);display:block}
.partner-callout__desc{font-size:var(--text-sm);color:var(--color-text-muted);
  line-height:1.6;margin:0}

/* ── ROW LIST (verticales en lignes, home + prestations) ──────
   Alternative au grid de cards : une ligne hairline par item,
   numéro / kicker+titre / description, cliquable en entier. ── */
.row-list{display:flex;flex-direction:column}
.row-list__item{display:grid;grid-template-columns:44px 1fr 2fr;gap:var(--space-6);
  align-items:baseline;padding:var(--space-6) 0;
  border-top:1px solid var(--color-divider);
  text-decoration:none;color:inherit;transition:background var(--transition)}
.row-list__item:last-child{border-bottom:1px solid var(--color-divider)}
.row-list__item:hover{background:oklch(0.93 0.01 250 / .03)}
@media(max-width:700px){.row-list__item{grid-template-columns:1fr;gap:var(--space-2)}}
.row-list__num{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-faint)}
.row-list__kicker{font-family:var(--font-mono);font-size:.68rem;color:var(--color-text-muted);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-2);display:block}
.row-list__title{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin:0}
.row-list__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.6}
.row-list__desc span{color:var(--color-primary)}

/* ── En-tete a tres petit ecran : CORRIGE PAR R4 le 30 aout 2026 ────────
   Ce bloc portait un constat qui s est revele FAUX, et il est conserve pour
   memoire parce qu il a coute deux tentatives inutiles.

   Ce qu il affirmait : "l en-tete n est probablement pas la cause mais la
   victime, un autre element de la page force le document a 399 px."

   Ce que l audit instrumente de R1 a mesure, page par page et largeur par
   largeur : sur les 11 pages simples, a 320, 375 et 390 px, les SEULS
   elements en debordement sont #mainHeader, .header-inner, .header-actions,
   le CTA et le burger. Il n y a aucun autre element. L en-tete etait bien la
   cause, et son contenu exigeait 399 px, dont 220 px pour .header-actions.

   Pourquoi les deux tentatives d alors n avaient rien change : elles
   resserraient le rembourrage et empilaient l en-tete, sans jamais retirer
   les 220 px de .header-actions de la rangee. R4 les en retire en deplacant
   le CTA dans le panneau. */

/* ══════════════════════════════════════════════════════════════════════
   THEME PAPIER (§2.6 du brief v4)
   Ce n'est pas un theme clair : le site reste sombre a l'ecran et devient
   noir sur blanc a l'impression et a l'export PDF. L'artefact decisif d'une
   collectivite n'est pas une page web, c'est la note transmise au niveau du
   dessus.
   ══════════════════════════════════════════════════════════════════════ */
@media print {

  /* --- Fond et texte : blanc, texte noir ------------------------------- */
  :root {
    --color-bg: #FFFFFF;
    --color-bg-alt: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-2: #FFFFFF;
    --color-surface-offset: #FFFFFF;
    --color-surface-dynamic: #FFFFFF;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-faint: #4A4A4A;
    --color-divider: #BBBBBB;
    --color-border: #999999;
    --color-border-strong: #444444;
    --color-primary: #000000;
    --color-primary-hover: #000000;
    --color-primary-highlight: transparent;
    --color-primary-glow: transparent;
    --color-primary-ink: #FFFFFF;

    /* L'echelle de donnees NE S'APLATIT PAS. Elle devient une echelle de
       gris a quatre paliers, l'ordre reste lisible. Luminances choisies
       pour conserver la monotonie de l'echelle ecran. */
    --color-data-4: #111111;
    --color-data-3: #555555;
    --color-data-2: #8C8C8C;
    --color-data-1: #C8C8C8;

    --color-danger: #000000;
    --color-purple: #555555;
  }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Forcer l'impression des aplats de l'echelle de donnees, que les
     navigateurs suppriment par defaut. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* --- Navigation et appels a l'action : masques ----------------------- */
  .site-header,
  .nav,
  .site-nav,
  .header-actions,
  .menu-toggle,
  .nav-item-dropdown,
  .nav-dropdown-menu,
  .skip-link,
  .vertical-tabs,
  .vertical-breadcrumb,
  .btn,
  .offre-cta,
  .cta-panel,
  .map-controls,
  .map-btn-row,
  .poc-controls,
  .theme-toggle,
  .faq-icon {
    display: none !important;
  }

  /* Le pied de page perd sa navigation mais garde l'identite. */
  .footer__links,
  .footer-grid a[href^="http"] {
    display: none !important;
  }

  /* --- Liens : URL affichee entre parentheses -------------------------- */
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: .78em;
    color: #4A4A4A;
    word-break: break-all;
  }
  /* Un lien interne devient une reference de page, pas une URL absolue. */
  main a[href$=".html"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: .78em;
    color: #4A4A4A;
  }
  a {
    color: #000000 !important;
    text-decoration: underline;
  }

  /* --- Ligne de limite renforcee -------------------------------------- */
  .figure-carto__limit,
  .notice {
    border: 1px solid #000000 !important;
    border-left-width: 3px !important;
    background: transparent !important;
    color: #000000 !important;
    padding: var(--space-3) var(--space-4);
    font-weight: 500;
  }
  .figure-carto__limit {
    border-style: solid !important;
  }

  /* --- Mise en page de document --------------------------------------- */
  @page {
    margin: 18mm 16mm;
  }
  .section {
    padding-block: var(--space-6);
    break-inside: auto;
  }
  .hero {
    padding-block: 0 var(--space-6);
    background: none !important;
  }
  h1, h2, h3 {
    break-after: avoid;
    color: #000000 !important;
  }
  .figure-carto,
  .card,
  .offre-v3,
  .pain-card,
  .problem-card,
  .case-card,
  .media-card,
  .poc-pipe-step,
  .faq-item {
    break-inside: avoid;
    border-color: #999999 !important;
    background: #FFFFFF !important;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
  }
  /* La FAQ s'imprime ouverte : un accordeon ferme sur papier perd son texte. */
  .faq-body {
    max-height: none !important;
    overflow: visible !important;
  }
  .faq-body-inner {
    padding-top: var(--space-2);
  }
  /* Les elements reveles au defilement doivent etre visibles a l'impression. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Les cartes interactives ne s'impriment pas utilement. */
  .map-container > div[id],
  #map,
  .leaflet-container {
    display: none !important;
  }
}