/* ── 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:              #FFFFFF;   /* reference */
  --color-bg-alt:          #F4F6F8;   /* 1,08 */
  --color-surface:         #FFFFFF;
  --color-surface-2:       #EEF1F4;   /* 1,13 */
  --color-surface-offset:  #F4F6F8;
  --color-surface-dynamic: #EEF1F4;
  --color-divider:         rgba(14,23,32,.12);
  --color-border:          #C5CED7;   /* 1,59  filet decoratif seul */
  --color-border-strong:   #79848F;   /* 3,14  contour de champ */
  --color-text:            #0E1720;   /* 18,07 */
  --color-text-muted:      #525D69;   /* 6,71 */
  --color-text-faint:      #616B76;   /* 5,52 */

  /* Couche MARQUE */
  --color-primary:         #E8AA4E;   /* 9,49 */
  --color-primary-hover:   #D9973A;   /* aplat, jamais du texte */
  --color-primary-highlight: rgba(232,170,78,.12);
  --color-primary-glow:    rgba(232,170,78,.25);
  /* Jeton AJOUTE au passage au clair, et le seul. L ambre de marque,
     #E8AA4E, ne fait que 2,04 sur blanc : il reste l aplat des boutons,
     mais il ne peut plus servir de couleur de TEXTE. Celui-ci le peut,
     a 6,39. Sur fond sombre les deux redeviennent la meme teinte. */
  --color-primary-text:    #8A5200;   /* 6,39 */
  --color-primary-ink:     #14100A;   /* 9,29 sur l aplat ambre */

  /* 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:          #0F6E68;   /* 6,09  palier le plus eleve */
  --color-data-3:          #17847C;   /*  4,54 */
  --color-data-2:          #2D8F87;   /*  3,90 */
  --color-data-1:          #BFE2DF;   /*  1,39  aplat de carte uniquement,
                                         jamais de texte dessus */

  /* Couche ETAT */
  --color-danger:          #B3271E;   /* 6,51 */
  --color-purple:          #5B5F86;   /* 6,13 */

  /* 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;
}

/* ── ZONES SOMBRES ──────────────────────────────────────────────────────
   Le fond du site est clair. Trois zones gardent le noir, et trois
   seulement : l en-tete, le hero, le pied de page. Elles encadrent la page
   sans l assombrir, et elles portent deja leur propre fond en dur.

   Le basculement se fait par les JETONS, pas par des regles dupliquees :
   tout ce qui vit dans ces zones lit les memes var(--color-*) qu ailleurs et
   se retrouve lisible sans qu une seule regle de composant soit reecrite.

   [data-fond="sombre"] est un selecteur d ATTRIBUT : aucune classe creee, et
   n importe quelle section peut devenir sombre en le portant. */
.site-header,
.nav,
.hero,
.footer,
.section--alt,
.feature-band,
[data-fond="sombre"] {
  --color-bg:              #080E15;
  --color-bg-alt:          #0C1319;
  --color-surface:         #080E15;
  --color-surface-2:       #1E242B;
  --color-surface-offset:  #0C1319;
  --color-surface-dynamic: #1E242B;
  --color-divider:         rgba(227,232,238,.10);
  --color-border:          #292F35;
  --color-border-strong:   #454E58;
  --color-text:            #E3E8EE;
  --color-text-muted:      #89939E;
  --color-text-faint:      #757E89;
  --color-primary-hover:   #F9BA5F;
  --color-primary-ink:     #080E15;
  --color-primary-text:    #E8AA4E;
  --color-data-4:          #7AD7D1;
  --color-data-3:          #52B0AB;
  --color-data-2:          #368A85;
  --color-data-1:          #295653;
  --color-danger:          #F2716A;
  --color-purple:          #9A9EC4;
}

/* Une section ordinaire ne peint aucun fond : elle laisse voir le blanc
   du corps. Celle qui porte l attribut doit donc peindre le sien. Les
   quatre autres selecteurs ci-dessus ont deja le leur, et leurs regles
   viennent plus bas dans la feuille, donc elles gagnent. */
[data-fond="sombre"]{background:var(--color-bg)}


/* ── 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-text)}
.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)}

/* ── TARIFS (tache 12.4) ────────────────────────────────────────────────
   offres.html passe de douze cartes rangees par duree a trois tableaux
   ranges par profil de client. Une ligne par format : titre et livrables,
   delai, prix plancher. La cellule du delai porte .offre-v3__footer pour
   que le controle `durees` du gate lise le delai au meme endroit que sur
   les cartes ; ses regles de carte sont neutralisees ici. */
.tarifs__sauts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.tarifs{margin-top:var(--space-6);border:1px solid var(--color-border);background:var(--color-bg)}
.tarifs__table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tarifs__table thead th{text-align:left;padding:var(--space-3) var(--space-5);
  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)}
.tarifs__table tbody th,.tarifs__table td{padding:var(--space-5);vertical-align:top;
  border-bottom:1px solid var(--color-divider);text-align:left;font-weight:400}
.tarifs__table tbody tr:last-child > *{border-bottom:none}
.tarifs__table tbody tr:hover > *{background:var(--color-bg-alt)}
.tarifs__table td.offre-v3__footer{display:table-cell;margin:0;border-top:none;
  white-space:nowrap;width:9rem}
.tarifs__table td.offre-v3__footer .offre-v3__duration{font-size:var(--text-sm);color:var(--color-text)}
.tarifs__prix{width:12rem}
.tarifs__prix .offre-v3__price{display:block;white-space:nowrap;margin-bottom:var(--space-2)}
.tarifs__titre{display:block;font-weight:600;color:var(--color-text);font-size:var(--text-base);
  line-height:1.3;margin-bottom:var(--space-2)}
.tarifs__desc{display:block;color:var(--color-text-muted);line-height:1.55;max-width:70ch}
.tarifs__note{display:block;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-faint)}
.tarifs__plus{margin-top:var(--space-4);font-size:var(--text-sm)}
.tarifs__plus a{color:var(--color-primary-text)}
.tarifs__plus a:hover{text-decoration:underline}
@media(max-width:700px){
  .tarifs__table thead{display:none}
  .tarifs__table,.tarifs__table tbody,.tarifs__table tr,.tarifs__table tbody th,.tarifs__table td{display:block;width:auto}
  .tarifs__table tr{border-bottom:1px solid var(--color-border);padding:var(--space-4)}
  .tarifs__table tbody th,.tarifs__table td,.tarifs__table td.offre-v3__footer{padding:0;border:none;display:block}
  .tarifs__table td.offre-v3__footer{margin-top:var(--space-3)}
  .tarifs__prix{margin-top:var(--space-2)}
  .tarifs__prix .offre-v3__price{display:inline;margin-right:var(--space-3)}
}

/* ── 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-STRONG et non border : le contour d un champ est une limite
     de composant, WCAG 1.4.11 lui demande 3:1. Le filet decoratif, lui,
     n a pas cette obligation et resterait trop lourd a ce niveau. */
  border:1.5px solid var(--color-border-strong);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-text);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-text)}
.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-text);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-text)}
.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-text);}
.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-text)}
.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}
/* Tache 12.3 : cinq entrees au lieu de quatre, les verticales sont dans le
   menu. Entre la tablette et le grand ecran, la baseline de la marque
   s efface et les liens se resserrent pour tenir sur une ligne. */
@media(min-width:901px) and (max-width:1260px){
  .brand-meta span{display:none}
  .site-nav{flex-wrap:nowrap;gap:0}
  .site-nav a{padding-inline:var(--space-2);white-space:nowrap}
  .site-nav a::after{left:var(--space-2)}
  .site-nav a:hover::after{width:calc(100% - 2*var(--space-2))}
}
@media(min-width:901px) and (max-width:1000px){
  .site-nav a{font-size:var(--text-xs)}
  .header-actions .btn{padding-inline:var(--space-3)}
}
.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.
   Tache 12.3 : seuil porte de 768 a 900 px. Avec les trois verticales dans
   le menu, l en-tete deborde entre 769 et 900 px ; sous ce seuil le menu
   passe dans le panneau, comme sur mobile. nav.js suit (min-width: 901px). */
@media(max-width:900px){
  .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) ─────── */
/* Le degre partait de --color-bg, devenu blanc : les deux bornes sont
   ecrites en dur, cette zone est sombre par decision et non par heritage. */
.hero{padding-block:clamp(2rem,4vw,3.5rem);position:relative;overflow:hidden;
  background:linear-gradient(135deg,#080E15 0%,#04090E 50%,#04090E 100%)}
/* Fond du hero, tache 12.1 : isolignes du score du POC Lyon (2 009 zones,
   interpolees puis lissees), en SVG statique. Remplace la grille animee
   au canvas, qui reprenait le langage de la carte voisine et lui faisait
   concurrence. Aucun JavaScript, 48 Ko, net a toute resolution.
   Le masque efface les courbes sous le texte et les laisse a droite. */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(assets/hero-courbes-lyon.svg) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 70%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 70%)}
@media(max-width:780px){.hero-bg{
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.25) 55%,#000 85%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.25) 55%,#000 85%)}}
@media print{.hero-bg{display:none}}
.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)}
/* Partait du noir. Sur fond clair, une simple bande grise suffit a
   separer la section de ses voisines. */
.feature-band{background:var(--color-bg-alt);
  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-text)}
.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-text)}
.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-text)}
.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-text)}
.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 ─────────────────────────────────────────────────
   CORRECTION du 13 septembre 2026. Le commentaire pose ici le 6 septembre
   disait la classe "plus employee". C etait FAUX : elle avait ete retiree
   de l accueil, et de l accueil seulement. Les quatre verticales la
   portent toujours, juste sous leur hero.

   Le filet superieur est retire. Il datait d un site entierement sombre,
   ou il separait deux gris voisins. Sous un hero NOIR pose sur une page
   blanche, il dessine une ligne parasite a un pixel du bord du bloc : le
   contraste du bloc fait deja toute la separation. Le filet du bas reste,
   lui separe bien deux zones claires. */
.hero-stats-band{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  margin-top:0;
  padding-block:var(--space-8);
  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-text);
  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-text); }
.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-text);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-text)}
.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-text)}

/* ── 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.
   ══════════════════════════════════════════════════════════════════════ */

/* ── MOBILE : plancher de 12 px sur les micro-libelles ──────────────────
   Releve du 13 septembre 2026 a 390 px, sur les treize pages : 166 textes
   sous 12 px calcules. Le coupable n est pas un oubli mais un IDIOME, celui
   des petites capitales en Space Mono, pose entre .62 et .72rem, soit 9,9 a
   11,5 px. Il tient sur un grand ecran, ou l oeil a de la place et du
   contraste ; il ne tient pas sur un telephone tenu a bout de bras.

   Le plancher n est donc leve QUE sous 768 px : la typographie fine du
   bureau n est pas touchee, et le telephone ne descend plus sous 12 px.
   Le chevron du menu deroulant est le seul a rester en dessous, a .65em :
   c est un signe, pas un mot. */
@media(max-width:768px){
  .btn{font-size:.78rem}
  .btn-sm{font-size:.75rem}
  .eyebrow,
  .timeline-year,
  .article-meta span,
  .footer__heading,
  .vertical-tab,
  .partner-callout__kicker,
  .row-list__kicker,
  .field__message,
  .poc-pipe-num,
  .pain-badge,
  .figure-carto__legend,
  .figure-carto--illustration .figure-carto__flag{font-size:.75rem}
  .hero-vertical__num{font-size:.75rem}

  /* Cible tactile : le fil d Ariane mesurait 164 x 23, sous les 24 px du
     critere 2.5.8. Il passe a 44, comme les autres cibles du site. */
  .vertical-breadcrumb{display:inline-flex;align-items:center;min-height:44px}
}


/* ── BARRE D ACTION MOBILE ──────────────────────────────────────────────
   Sur telephone, le bouton de l en-tete part hors champ des le premier
   defilement et ne revient qu en remontant tout en haut. La barre garde les
   deux chemins qui fonctionnent a portee de pouce, en bas de l ecran, la ou
   le pouce se trouve.

   Elle n existe QUE sous 768 px : au-dessus, l en-tete est colle et porte
   deja le bouton, une seconde barre ferait doublon.

   padding-bottom sur le corps : sans lui, la barre recouvre la fin du pied
   de page, et le dernier lien devient inatteignable.

   env(safe-area-inset-bottom) tient compte de la barre de geste des
   telephones sans bouton d accueil. */
@media(max-width:768px){
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px))}
  /* Cachee tant que la page n a pas defile. visibility:hidden la sort
     aussi du parcours au clavier : une barre hors champ mais focusable
     ferait sauter le focus vers un bouton invisible. Le delai sur
     visibility attend la fin du glissement avant de la retirer. */
  .barre-mobile{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    transform:translateY(120%);visibility:hidden;
    transition:transform 260ms var(--transition), visibility 0s 260ms;
    display:flex;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background:var(--color-bg);
    border-top:1px solid var(--color-border)}
  .barre-mobile .btn{flex:1;justify-content:center;min-height:48px;
    font-size:.78rem;white-space:nowrap}
  .barre-mobile[data-visible]{transform:none;visibility:visible;
    transition:transform 260ms var(--transition), visibility 0s}
  @media(prefers-reduced-motion:reduce){
    .barre-mobile{transition:none}
    .barre-mobile[data-visible]{transition:none}
  }
}
@media(min-width:769px){
  .barre-mobile{display:none}
}

@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;
  }
}