/* ============================================================
   Direction artistique du site — « Affirmation »
   Transposition de la piste 4, retenue le 17 octobre 2026.

   Le parti pris : le site assume d'être un site de campagne. Des
   capitales condensées (Anton) qui occupent l'écran, des bandes de
   couleur pleines, des chiffres en très gros, et un texte courant
   (Manrope) gras et lisible sur un téléphone.

   Deux couleurs portent du sens :
     bleu  — la structure : les bandes, la tête de page, le pied.
     rouge — le geste : le filet sous les titres, les numéros des
             mesures, les boutons d'action, l'anneau de focus.

   Quatre règles tenues partout :
   - angles droits : ce style ne s'arrondit pas ;
   - Anton ne porte jamais de phrase longue, seulement des titres
     courts, des libellés et des chiffres ;
   - le texte des mesures reste en Manrope, jamais en capitales :
     c'est le seul texte long que quelqu'un lit vraiment ;
   - aucune lettre d'axe n'est affichée (A, B, C…) : voir build_maquette.py.
   ============================================================ */
:root{
  --blanc:#FFFFFF;
  --bleu:#0A1F4D;            /* structure */
  --bleu-vif:#14349C;        /* liens */
  --rouge:#E0301E;           /* accent graphique (jamais porteur de petit texte) */
  --rouge-texte:#B01E10;     /* rouge lisible : texte blanc dessus, ou texte sur blanc */
  --encre:#0D1526;
  --gris:#4A5468;            /* texte secondaire : 7,6:1 sur blanc */
  --gris-fond:#F1F3F7;
  --filet:#DCE1EA;
  --filet-fort:#C4CBD8;
  --sur-bleu:#A9BEE4;        /* texte discret sur le bleu : 8,5:1 */
  --sur-bleu-clair:#C9D4EF;
  --f-titre:'Anton',Impact,'Arial Narrow',sans-serif;
  --f-texte:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --max:1180px;
  /* Interligne des titres. Anton place ses capitales accentuées (É À Î Ô Ê)
     à 1,10 em au-dessus de la ligne de base, contre 0,86 em pour les
     capitales nues : à interligne serré, l'accent de la ligne du bas vient
     chevaucher la ligne du haut. Mesuré dans le navigateur avant correction :
     8,6 px de recouvrement sur le titre du questionnaire, 6,6 px sur un h2.
     1,12 em laisse la place à l'accent le plus haut, avec une marge. */
  --interligne-titre:1.12;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--f-texte);font-size:17.5px;font-weight:500;line-height:1.58;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--f-titre);font-weight:400;line-height:var(--interligne-titre);margin:0;
  text-transform:uppercase;letter-spacing:.005em;text-wrap:balance;
}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--bleu-vif);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;text-decoration-color:rgba(20,52,156,.32);touch-action:manipulation}
a:hover{color:var(--rouge-texte);text-decoration-color:var(--rouge)}
/* Un lien seul dans un paragraphe est une cible isolée : il lui faut une
   hauteur tactile. Les liens pris dans une phrase gardent au contraire
   l'interligne du texte — c'est l'exception « en ligne » du critère WCAG 2.2,
   et les étirer casserait la ligne. */
p > a:only-child{display:inline-block;padding:12px 0}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
/* le lien d'évitement n'apparaît qu'au clavier */
.evitement{position:absolute;left:-9999px;top:0;z-index:60;background:var(--bleu);color:#fff;
  padding:16px 22px;text-decoration:none;font-family:var(--f-titre);font-size:15px;
  text-transform:uppercase;letter-spacing:.06em}
.evitement:focus{left:0;color:#fff}
/* l'en-tête est collant : un titre ancré ne doit pas se cacher dessous */
main h1,main h2,main h3,[id]{scroll-margin-top:118px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--bleu);color:#fff}

/* ---------- bandeau de démonstration (retiré à la mise en ligne) ---------- */
.maquette-bar{background:var(--encre);color:var(--sur-bleu);font-size:12.5px;padding:9px 0}
.maquette-bar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.maquette-bar strong{color:#fff;font-weight:700}
/* Le bandeau de démo est le premier élément de la page, et il peut porter un
   lien (bascule d'habillage ajoutée par la recette, sélecteur en profil démo).
   Mesuré : sans cette règle, ce lien faisait 17 px de haut — sous la cible
   tactile de 24 px (WCAG 2.5.8). Le rembourrage vertical est posé sur le lien
   lui-même, pas sur la ligne : la cible est la zone cliquable, pas son texte. */
.maquette-bar a{display:inline-block;padding:6px 0;color:var(--sur-bleu-clair)}

/* ---------- en-tête ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--blanc);border-bottom:3px solid var(--encre)}
/* L'en-tête doit tenir même si les polices ne se chargent pas. Mesuré : sans
   les fichiers de police, les métriques de substitution d'Anton sont plus
   larges et les trois éléments de l'en-tête débordaient de 12 px à 390 px —
   c'est-à-dire une barre de défilement horizontale sur toutes les pages, sur
   une connexion lente. Trois garde-fous : la marque peut se réduire, les
   espacements se resserrent, et en dernier recours la ligne passe à la ligne
   au lieu de déborder. */
.site-head .wrap{display:flex;align-items:center;gap:26px;min-height:82px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bleu);margin-right:auto;padding:6px 0;min-width:0}
.brand-logo{display:block;flex:none;color:var(--bleu);height:44px;width:auto;max-width:100%;
  transition:color .2s var(--ease)}
.brand:hover .brand-logo{color:var(--rouge-texte)}
.foot-brand svg{display:block;flex:none;color:#fff;height:40px;width:auto}
.nav{display:flex;align-items:center;gap:0}
.nav a{
  color:var(--encre);text-decoration:none;font-family:var(--f-titre);font-size:14px;
  text-transform:uppercase;letter-spacing:.055em;padding:14px 13px;
}
.nav a:hover{color:var(--rouge-texte);box-shadow:inset 0 -3px 0 var(--rouge)}
.nav a[aria-current="page"]{color:var(--bleu);box-shadow:inset 0 -3px 0 var(--bleu)}
.btn{
  touch-action:manipulation;display:inline-flex;align-items:center;gap:9px;padding:15px 26px;
  font-family:var(--f-titre);font-size:15px;font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;border:0;background:var(--bleu);color:#fff;
  cursor:pointer;transition:background .18s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--rouge-texte);color:#fff}
.btn:active{transform:scale(.98)}
.btn--action{background:var(--rouge-texte)}
.btn--action:hover{background:var(--encre)}
.btn--ghost{background:transparent;color:var(--bleu);box-shadow:inset 0 0 0 2.5px var(--filet-fort)}
.btn--ghost:hover{background:var(--bleu);color:#fff;box-shadow:inset 0 0 0 2.5px var(--bleu)}
.btn--contour{background:transparent;color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.55)}
.btn--contour:hover{background:#fff;color:var(--bleu);box-shadow:inset 0 0 0 2.5px #fff}
.burger{display:none;background:none;border:2.5px solid var(--encre);padding:12px 16px;min-height:44px;
  font-family:var(--f-titre);font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;color:var(--encre)}
.burger:active{transform:scale(.98)}

/* ---------- ouverture : l'affiche ---------- */
.hero{position:relative;background:var(--bleu);color:#fff;padding:64px 0 52px;border-bottom:6px solid var(--rouge)}
.hero .wrap{position:relative}
.hero .sur{
  font-family:var(--f-titre);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sur-bleu);margin:0 0 26px;
}
.hero h1{font-size:clamp(38px,7vw,86px);line-height:var(--interligne-titre);max-width:20ch;margin:0 0 30px}
.hero h1 span{display:block}
.hero h1 span:last-child::after{content:"";display:block;width:2.4em;height:7px;background:var(--rouge);margin-top:20px}
.hero .contexte{font-size:clamp(17px,1.7vw,19.5px);color:var(--sur-bleu-clair);max-width:56ch;margin:0 0 34px;line-height:1.55}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 42px}
.hero .chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding-top:24px;
  border-top:2px solid rgba(255,255,255,.22)}
.hero .chiffre{font-size:14.5px;color:var(--sur-bleu);font-weight:600;padding-right:22px}
.hero .chiffre b{display:block;font-family:var(--f-titre);font-size:clamp(38px,4.6vw,56px);line-height:1;
  color:#fff;font-weight:400;margin-bottom:8px}

/* Les repères du scrutin : des dates, pas des nombres de document. Anton en
   bas de casse, sinon « 14 mars 2027 » en capitales condensées devient une
   date criée. C'est la seule entorse à la règle des titres en capitales, et
   elle est volontaire : une date doit se lire comme une information. */
.hero .chiffres--scrutin .chiffre b{font-size:clamp(26px,3.1vw,38px);text-transform:none;
  letter-spacing:.01em;margin-bottom:10px;line-height:1.05}
.hero .chiffres--scrutin .chiffre{max-width:26ch}

/* ---------- la bande du prochain rendez-vous ----------
   Une bande pleine largeur, posée juste sous l'ouverture. C'est l'action la
   plus urgente pendant une campagne ; elle tient sur une ligne, donc elle ne
   repousse pas le contenu de fond hors de l'écran. */
.bande-rdv{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;
  background:var(--rouge-texte);color:#fff;text-decoration:none;
  padding:20px 26px;margin:0;max-width:none;
}
.bande-rdv:hover{background:#8E1709;color:#fff}
.bande-rdv .quand{display:flex;flex-direction:column;align-items:center;line-height:1;
  padding-right:24px;border-right:2px solid rgba(255,255,255,.4)}
.bande-rdv .quand b{font-family:var(--f-titre);font-size:38px;font-weight:400}
.bande-rdv .quand span{font-family:var(--f-titre);font-size:13px;letter-spacing:.14em;margin-top:6px}
.bande-rdv .txt{display:flex;flex-direction:column;gap:5px}
.bande-rdv .txt b{font-family:var(--f-titre);font-size:clamp(18px,2.1vw,24px);
  text-transform:uppercase;font-weight:400;line-height:var(--interligne-titre)}
.bande-rdv .txt span{font-size:15.5px;color:#FFE1DC}
.bande-rdv .aller{font-family:var(--f-titre);font-size:13.5px;text-transform:uppercase;
  letter-spacing:.08em;white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.5);
  padding-bottom:3px}
.bande-rdv--vide{display:block;background:var(--gris-fond);color:var(--gris);
  border-left:6px solid var(--filet-fort);font-size:16px;padding:20px 26px}
.bande-rdv--vide a{color:var(--bleu-vif)}

/* ---------- ce que nous changerions : trois mesures vérifiables ---------- */
.preuves{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  border-top:1px solid var(--filet)}
.preuve{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding:30px 28px 26px;border-right:1px solid var(--filet);
  transition:background .2s var(--ease)}
.preuve:last-child{border-right:0}
.preuve:hover{background:var(--gris-fond)}
.preuve .n{font-family:var(--f-titre);font-size:clamp(34px,4.2vw,50px);line-height:1;
  color:var(--rouge-texte);margin-bottom:18px}
.preuve .d{font-size:16px;color:var(--encre);flex:1;margin-bottom:22px}
.preuve .ou{font-family:var(--f-titre);font-size:13px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--bleu);display:inline-flex;align-items:center;gap:9px}
.preuve:hover .ou{color:var(--rouge-texte)}
.preuve .ou::after{content:"";width:16px;height:3px;background:var(--rouge);transition:width .2s var(--ease)}
.preuve:hover .ou::after{width:28px}

/* ---------- qui sommes-nous ----------
   Deux colonnes : la présentation à gauche, les façons de participer à
   droite. La zone « manque » est un état visible, pas un trou : elle dit
   précisément ce qui doit être fourni, et pourquoi. */
.groupe{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.groupe-txt .intro{font-size:17.5px;color:var(--gris);max-width:52ch;margin:0 0 26px}
.manque{border-left:5px solid var(--rouge);background:var(--gris-fond);padding:18px 22px;margin-bottom:16px}
.manque p{margin:0;font-size:15px;color:var(--encre)}
.groupe-agir h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:22px}
.groupe-agir .appels .grille{grid-template-columns:1fr;gap:0}
.groupe-agir .appel{padding:20px 0 16px;border-top-width:2px}

/* ---------- sections ---------- */
.section{padding:76px 0}
.section--serre{padding:52px 0}
.section--teinte{background:var(--gris-fond)}
.bloc-sombre{background:var(--bleu);color:#fff}
.bloc-sombre .section{padding:76px 0}
.section-head{margin-bottom:36px}
.section-head h2,.bloc > h2{font-size:clamp(25px,3.3vw,38px);max-width:26ch}
.section-head h2::after,.bloc > h2::after{content:"";display:block;width:64px;height:5px;background:var(--rouge);margin-top:16px}
.section-head p{margin:16px 0 0;color:var(--gris);font-size:16.5px;max-width:58ch}
.bloc-sombre .section-head h2{color:#fff}
.bloc-sombre .section-head p{color:var(--sur-bleu)}
.section-head--duo{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.section-head--duo p{max-width:44ch;margin:0 0 6px}
.bloc-sombre .bloc > h2{color:#fff}

/* ---------- la chaîne — la figure du site ---------- */
.chaine{--chain-filet:var(--filet);--chain-num-fond:var(--bleu);--chain-num-encre:#fff;
  --chain-titre:var(--encre);--chain-corps:var(--gris)}
.bloc-sombre .chaine{--chain-filet:rgba(255,255,255,.24);--chain-num-fond:var(--rouge-texte);
  --chain-titre:#fff;--chain-corps:var(--sur-bleu)}
.chaine-liste{list-style:none;margin:0;padding:0}
.chaine-noeud{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:22px;
  padding:0 0 30px;align-items:start}
.chaine-noeud:last-child{padding-bottom:0}
.chaine-noeud::after{content:"";position:absolute;left:27px;top:58px;bottom:2px;width:2px;background:var(--chain-filet)}
.chaine-noeud:last-child::after{display:none}
.chaine-num{grid-column:1;grid-row:1 / span 3;align-self:start;
  width:56px;height:56px;background:var(--chain-num-fond);color:var(--chain-num-encre);
  display:grid;place-items:center;font-family:var(--f-titre);font-size:26px;line-height:1}
.chaine-noeud h3{grid-column:2;grid-row:1;font-size:clamp(19px,2.1vw,23px);color:var(--chain-titre);margin:12px 0 8px}
.chaine-quoi{grid-column:2;grid-row:2;margin:0;color:var(--chain-corps);font-size:16.5px;max-width:62ch}
.chaine-quoi strong{color:var(--chain-titre);font-weight:700}
.chaine-boucle{grid-column:2;grid-row:3;margin:12px 0 0;font-size:15.5px;color:var(--chain-corps);
  max-width:62ch;border-left:3px solid var(--rouge);padding-left:14px}
.chaine-retour{margin:36px 0 0;padding:22px 26px;background:var(--gris-fond);border-left:6px solid var(--rouge);
  font-size:16.5px;color:var(--encre);max-width:70ch}
.bloc-sombre .chaine-retour{background:rgba(255,255,255,.09);color:var(--sur-bleu-clair)}
.chaine-retour b{font-weight:800;color:inherit}
/* version compacte : accueil */
.chaine--compacte .chaine-noeud{padding-bottom:22px}
.chaine--compacte .chaine-num{width:46px;height:46px;font-size:22px}
.chaine--compacte .chaine-noeud::after{left:22px;top:48px}
.chaine--compacte .chaine-noeud h3{margin:8px 0 0;font-size:clamp(18px,2vw,21px)}
.chaine--compacte .chaine-noeud{grid-template-columns:46px minmax(0,1fr);column-gap:18px}

/* ---------- entrer par un sujet ---------- */
.famille{margin-bottom:52px}
.famille:last-child{margin-bottom:0}
.famille > h3{font-family:var(--f-texte);font-size:13px;font-weight:700;color:var(--gris);
  letter-spacing:.1em;text-transform:uppercase}
.famille > .q{font-family:var(--f-titre);font-size:clamp(20px,2.3vw,26px);color:var(--encre);
  margin:8px 0 22px;text-transform:uppercase}
.rubriques{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.rubrique{
  background:#fff;border:1px solid var(--filet);border-top:5px solid var(--encre);
  padding:24px 22px 20px;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),transform .18s var(--ease);
}
.rubrique:hover{border-top-color:var(--rouge);transform:translateY(-3px)}
.rubrique h4{font-size:22px;line-height:var(--interligne-titre);margin:0 0 12px}
.rubrique p{font-size:15.5px;color:var(--gris);margin:0 0 20px;flex:1}
.rubrique .lire{font-family:var(--f-titre);font-size:13.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--bleu);display:inline-flex;align-items:center;gap:9px}
.rubrique:hover .lire{color:var(--rouge-texte)}
.rubrique .lire::after{content:"";width:16px;height:3px;background:var(--rouge);transition:width .2s var(--ease)}
.rubrique:hover .lire::after{width:28px}
.rubrique--attente{background:transparent;border-style:dashed;border-top-style:dashed}
.rubrique--attente .lire{color:var(--gris)}
.rubrique--attente .lire::after{background:var(--gris)}

/* ---------- appels ---------- */
.appels .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:18px}
.appel{border-top:5px solid var(--encre);padding:22px 0 4px;text-decoration:none;color:var(--encre);
  transition:border-color .2s var(--ease)}
.appel:hover{border-top-color:var(--rouge)}
.appel .t{font-family:var(--f-titre);font-size:21px;text-transform:uppercase;display:block;margin-bottom:10px;line-height:var(--interligne-titre)}
.appel:hover .t{color:var(--rouge-texte)}
.appel .d{font-size:15.5px;color:var(--gris)}
.appel--sombre{border-top-color:rgba(255,255,255,.3);color:#fff}
.appel--sombre:hover{border-top-color:var(--rouge)}
.appel--sombre:hover .t{color:#fff}
.appel--sombre .d{color:var(--sur-bleu)}

/* ---------- fil d'ariane ---------- */
.fil{font-size:13.5px;color:var(--gris);padding:20px 0}
.fil a{color:var(--gris);text-decoration:none;display:inline-block;padding:12px 0}
.fil a:hover{color:var(--bleu-vif);text-decoration:underline}
.fil span[aria-current]{color:var(--encre);font-weight:700}

/* ---------- tête de page : la bande bleue ---------- */
.rub-head{background:var(--bleu);color:#fff;padding:22px 0 58px;border-bottom:6px solid var(--rouge)}
/* Une ligne de contexte, pas une étiquette de gabarit : elle nomme la famille
   du programme dont la rubrique fait partie. En bas de casse, elle se lit
   comme une information ; en capitales espacées au-dessus de chaque titre,
   elle ne serait plus qu'un ornement répété douze fois. */
.rub-head .etiquette{display:block;font-family:var(--f-texte);font-size:15.5px;font-weight:600;
  color:var(--sur-bleu);margin-bottom:20px}
.rub-head h1{font-size:clamp(34px,5.4vw,62px);max-width:22ch;color:#fff}
.rub-head .diag{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--sur-bleu-clair);
  max-width:58ch;margin:24px 0 0}
.rub-head .btn{margin-top:30px}

/* ---------- blocs de contenu ---------- */
.bloc{margin-top:64px}
.bloc:first-child{margin-top:0}
.bloc > .intro{color:var(--gris);font-size:16.5px;max-width:64ch;margin:20px 0 28px}
.bloc--notes{background:#FDF0ED;border:1px solid #F3C9BF;border-left:6px solid var(--rouge);padding:28px 28px 24px}
.bloc--notes > h2{color:#7A2410;font-size:20px}
.bloc--notes > h2::after{display:none}
.bloc--notes .intro{color:#5C3226;margin-top:14px}
.bloc--notes ul{margin:0;padding-left:20px}
.bloc--notes li{color:#5C3226;font-size:15.5px;max-width:68ch;margin-bottom:12px}

/* ---------- les mesures ----------
   Une mesure est une phrase, pas une carte : sa longueur va de 19 à 433
   signes selon la mesure. En cartes sur deux colonnes, la plus courte
   laisserait un trou à côté de la plus longue. On la publie donc en
   registre : une seule colonne, un numéro de rang en tête, un filet entre
   chaque entrée. Le numéro sert à se repérer dans le document — jamais un
   code d'axe, qui ne veut rien dire pour un lecteur. */
.mesures{list-style:none;counter-reset:m;margin:0;padding:0;border-top:3px solid var(--encre);max-width:880px}
.mesures > li{counter-increment:m;position:relative;padding:26px 0 26px 86px;border-bottom:1px solid var(--filet)}
.mesures > li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--f-titre);font-size:31px;line-height:1;color:var(--rouge-texte);
  font-variant-numeric:tabular-nums}
.mesures p{color:var(--encre);font-size:18.5px;font-weight:600;margin:0;max-width:62ch;line-height:1.5}
.mesures p strong{font-weight:800}

/* dépliants : le chevron est redessiné, display:flex supprime le marqueur natif */
details > summary{min-height:44px;display:flex;align-items:center;gap:10px;padding:12px 0;width:fit-content;
  cursor:pointer;font-family:var(--f-titre);font-size:14.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bleu)}
details > summary:hover{color:var(--rouge-texte)}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s var(--ease)}
details[open] > summary::before{transform:rotate(225deg) translate(-1px,-1px)}
details .texte{margin-top:12px;font-size:16px;color:var(--gris);border-left:3px solid var(--bleu);padding-left:16px;max-width:66ch}

.indics{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{border:2px solid var(--filet-fort);background:#fff;padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--encre)}

/* phrase clé */
.cle{margin:0;padding:26px 30px;background:var(--gris-fond);border-left:6px solid var(--bleu);
  font-size:clamp(18px,2.1vw,22px);font-weight:700;line-height:1.42;max-width:64ch;color:var(--encre)}
.bloc-sombre .cle{background:rgba(255,255,255,.09);color:var(--sur-bleu-clair)}
.cle--objection{background:#FDF0ED;border-left-color:var(--rouge);color:#7A2410}

/* les huit axes — des lignes qui se remplissent au survol */
.axes{display:grid;grid-template-columns:1fr;border-top:3px solid var(--encre)}
.axe{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:18px 16px;border-bottom:1px solid var(--filet);
  transition:background .18s var(--ease),color .18s var(--ease)}
.axe:hover{background:var(--bleu)}
.axe:hover .n,.axe:hover .c{color:#fff}
.axe .n{font-family:var(--f-titre);font-size:20px;line-height:1.06}
.axe .c{font-size:15px;color:var(--gris)}

/* ---------- actualités / agenda ---------- */
.flux{display:grid;gap:0;margin-top:4px}
.actu{border-top:1px solid var(--filet);padding:28px 0 6px;
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start}
.actu:first-child{border-top:3px solid var(--encre)}
.actu .meta{font-size:14px;color:var(--gris)}
.actu .meta .date{display:block;font-family:var(--f-titre);color:var(--encre);font-size:17px;margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.03em}
.actu h3{font-size:23px;margin-bottom:12px;line-height:var(--interligne-titre)}
.actu p{margin:0 0 18px;font-size:16.5px;color:var(--gris);max-width:68ch}
.etat{display:inline-block;font-family:var(--f-titre);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.08em;padding:6px 13px;background:var(--gris-fond);color:var(--encre);border-left:4px solid var(--gris)}
.etat--prop{background:#EDF1FB;color:#14349C;border-left-color:#14349C}
.etat--etude{background:var(--gris-fond);color:var(--encre);border-left-color:var(--gris)}
.etat--decision{background:#FDF0ED;color:#7A2410;border-left-color:var(--rouge-texte)}
.etat--real{background:#EDF7F0;color:#14512F;border-left-color:#1B6B4A}
.filtres{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filtre{border:2px solid var(--filet-fort);background:#fff;font-family:var(--f-titre);font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;padding:13px 20px;cursor:pointer;color:var(--encre);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.filtre:hover{border-color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.filtre:active{transform:scale(.98)}
.rdv{border-top:1px solid var(--filet);padding:28px 0;
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:28px;align-items:start}
.rdv:first-child{border-top:3px solid var(--encre)}
.rdv .quand{background:var(--bleu);color:#fff;padding:14px 10px;text-align:center;width:96px}
.rdv .quand .j{font-family:var(--f-titre);font-size:34px;line-height:1;display:block}
.rdv .quand .m{font-family:var(--f-titre);font-size:12.5px;letter-spacing:.12em;color:var(--sur-bleu);display:block;margin-top:4px}
.rdv h3{font-size:22px;margin-bottom:10px;line-height:var(--interligne-titre)}
.rdv p{margin:0;color:var(--gris);font-size:16.5px;max-width:68ch}
.rdv .lieu{font-size:14.5px;color:var(--rouge-texte);margin-top:12px;font-weight:700}
.rdv .act{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.frise{display:grid;gap:0}
.frise .item{border-top:1px solid var(--filet);padding:16px 0 6px;display:grid;
  grid-template-columns:170px minmax(0,1fr);gap:18px;font-size:15.5px}
.frise .item .d{font-family:var(--f-titre);text-transform:uppercase;letter-spacing:.04em;font-size:15px}

/* ---------- formulaire ---------- */
.form{display:grid;gap:20px}
.champ{display:grid;gap:8px}
.champ label{font-weight:700;font-size:15.5px}
.champ .aide{font-size:14.5px;color:var(--gris)}
.champ input,.champ select,.champ textarea{font-family:var(--f-texte);font-size:16.5px;padding:14px;
  border:2px solid var(--filet-fort);background:#fff;color:var(--encre);width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);outline:3px solid rgba(10,31,77,.3);outline-offset:1px}
.consent{display:grid;gap:14px;background:var(--gris-fond);border-left:6px solid var(--bleu);padding:24px}
.consent .titre{font-family:var(--f-titre);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre)}
.check{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;font-size:15.5px;line-height:1.5;cursor:pointer;min-height:44px}
.check input{width:24px;height:24px;margin:3px 0 0;accent-color:var(--bleu);cursor:pointer}
.check .fac{color:var(--gris);font-size:14.5px}
.erreur{background:#FDF0ED;padding:16px 18px;font-size:15.5px;color:#7A2410;border-left:5px solid var(--rouge)}
.ok{background:#EDF1FB;padding:16px 18px;font-size:15.5px;color:#0A1F4D;border-left:5px solid var(--bleu);font-weight:600}
.attente{background:var(--gris-fond);padding:16px 18px;font-size:15.5px;color:var(--encre);border-left:5px solid var(--gris)}

/* Champ piège à robots. Il doit être invisible à l'œil ET absent de l'ordre de
   tabulation, mais PAS « display:none » : certains robots repèrent les champs
   masqués et les laissent vides, ce qui annulerait le dispositif. On le sort
   donc de l'écran, où il reste « visible » pour un automate qui ne lit pas le
   CSS. Ne pas le remplacer par display:none. */
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.deux-col{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.coord{background:#fff;border:1px solid var(--filet);border-top:5px solid var(--encre);padding:28px 26px}
.coord h2{font-size:22px;margin-bottom:14px}
.coord dl{margin:0;font-size:15.5px}
.coord dt{font-family:var(--f-titre);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);margin-top:20px}
.coord dd{margin:6px 0 0;color:var(--encre)}
.coord dd a{display:inline-block;padding:10px 0}
.note{background:var(--gris-fond);border-left:5px solid var(--filet-fort);padding:20px 22px;font-size:15.5px;color:var(--gris)}
.note strong{color:var(--encre);font-weight:700}

/* ---------- états vides ---------- */
/* Pages juridiques : ce sont des textes suivis, pas des affiches. Les titres y
   restent en bas de casse et à une taille qui n'écrase pas le paragraphe —
   en capitales condensées, un titre de trois lignes deviendrait un mur. */
.section--juridique .wrap{max-width:800px}
.section--juridique .bloc{margin-top:48px}
.section--juridique .bloc > h2{font-size:clamp(20px,2.2vw,25px);text-transform:none;line-height:1.18}
.section--juridique .bloc > h2::after{width:48px;height:4px;margin-top:12px}
.section--juridique .bloc > .intro{max-width:72ch;margin:16px 0 0}
.section--juridique .bloc > .intro + .intro{margin-top:12px}

.vide{border:2px dashed var(--filet-fort);padding:32px 30px;max-width:64ch}
.vide h3{font-size:22px;margin-bottom:14px}
.vide p{color:var(--gris);margin:0 0 16px}
.vide p:last-child{margin-bottom:0}
.retour{display:inline-block;margin-top:40px;font-family:var(--f-titre);font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;padding:10px 0}
.maj{font-size:13.5px;color:var(--gris);margin-top:46px;border-top:1px solid var(--filet);padding-top:18px}

/* ---------- pied ---------- */
.site-foot{background:var(--bleu);color:var(--sur-bleu);padding:64px 0 30px;font-size:15px}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.site-foot h3{font-family:var(--f-titre);font-size:13.5px;color:#fff;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid}
.site-foot a{color:var(--sur-bleu-clair);text-decoration:none;display:block;padding:12px 0}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .bas{margin-top:48px;border-top:1px solid rgba(255,255,255,.16);padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--sur-bleu)}
.foot-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:16px}
.site-foot .foot-note{max-width:34ch;color:var(--sur-bleu);margin:0}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .deux-col{grid-template-columns:1fr;gap:40px}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .actu{grid-template-columns:1fr;gap:14px}
  .rdv{grid-template-columns:88px minmax(0,1fr);gap:20px}
  .rdv .act{grid-column:1/-1;align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .nav{display:none}
  .nav.ouvert{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--blanc);
    flex-direction:column;align-items:stretch;gap:0;border-bottom:3px solid var(--encre);padding:6px 20px 14px}
  .nav.ouvert a{padding:15px 0;border-bottom:1px solid var(--filet)}
  .burger{display:block;order:2}
  .site-head .wrap{gap:10px;min-height:70px}
  .brand-logo{height:34px}
  .site-head .btn{order:1;padding:12px 15px;font-size:13.5px}
  .nav a{padding:12px 11px}
  .burger{padding:12px 13px;font-size:13.5px}
  .section{padding:54px 0}
  .bloc-sombre .section{padding:54px 0}
  .hero{padding:48px 0 40px}
  .hero h1{font-size:clamp(36px,11.5vw,56px)}
  /* Trois chiffres sur deux colonnes laissent le troisième seul sur sa ligne,
     alors qu'il n'y a rien à côté. Sur téléphone, on les empile et le chiffre
     passe à gauche de son libellé : c'est plus court, et rien n'est orphelin. */
  .hero .chiffres{display:block;padding-top:6px}
  .hero .chiffre{display:flex;align-items:baseline;gap:16px;padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .hero .chiffre:last-child{border-bottom:0}
  .hero .chiffre b{font-size:38px;margin-bottom:0;min-width:1.7em}
  .hero .actions .btn{width:100%;justify-content:center}
  .rub-head{padding:18px 0 44px}
  .bloc{margin-top:52px}
  /* le rang ne doit pas manger la colonne de texte sur un téléphone */
  .mesures > li{padding:22px 0 22px 52px}
  .mesures > li::before{top:18px;font-size:24px}
  .mesures p{font-size:17.5px}
  .chaine-noeud{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .chaine-num,.chaine--compacte .chaine-num{width:44px;height:44px;font-size:21px}
  .chaine-noeud::after,.chaine--compacte .chaine-noeud::after{left:21px;top:48px}
  .actu{padding:22px 0 6px}
  .rdv{padding:22px 0;grid-template-columns:1fr;gap:16px}
  .rdv .quand{display:flex;align-items:baseline;gap:10px;width:auto;justify-content:flex-start;padding:12px 16px}
  .rdv .quand .m{margin-top:0}
  .rubriques,.appels .grille{grid-template-columns:1fr}
  /* La bande du rendez-vous passe sur trois lignes : la date reste à gauche,
     le texte à droite, et le lien d'action descend en pleine largeur — il doit
     rester une cible confortable au doigt. */
  .bande-rdv{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px 20px;row-gap:14px}
  .bande-rdv .quand{padding-right:16px}
  .bande-rdv .quand b{font-size:32px}
  .bande-rdv .aller{grid-column:1 / -1;justify-self:start;padding-top:4px}
  /* Les trois mesures s'empilent : chaque carte garde son filet en haut, et
     perd celui de droite, qui n'aurait plus de sens. */
  .preuves{border-top:0}
  .preuve{border-right:0;border-top:1px solid var(--filet);padding:24px 0 22px}
  .preuve .n{margin-bottom:12px}
  /* Présentation et participation s'empilent : la participation reste un
     bloc à part entière, pas une note de bas de page. */
  .groupe{grid-template-columns:1fr;gap:38px}
  .groupe-agir{border-top:5px solid var(--encre);padding-top:26px}
  .site-foot .cols{grid-template-columns:1fr}
  .frise .item{grid-template-columns:1fr;gap:6px}
  .coord dd a{padding:12px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}