/* =========================================================================
   2 WHEELS PATRIOTES — feuille de style unique
   Direction : « Plaque émaillée sur cuir » — vocabulaire du patch brodé
   et de la signalisation routière française.
   100 % local. Aucun appel réseau externe. Aucune police distante.
   ========================================================================= */

/* -------------------------------------------------------------------------
   POLICES AUTO-HÉBERGÉES
   Déposez vos .woff2 dans assets/fonts/ puis décommentez les blocs ci-dessous.
   Tant qu'ils restent commentés, le site utilise la pile système : aucune
   requête, aucun 404.
   Recommandé : OSWALD 600/700 pour les titres — condensée MAIS dessinée pour
   les capitales, contrairement à Impact ou Arial Narrow. Alternative encore plus
   sûre : ARCHIVO 700. Pour le corps : Source Serif 4 ou Charter.
   -------------------------------------------------------------------------
@font-face{font-family:"MP Display";src:url("../fonts/display-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"MP Corps";src:url("../fonts/corps-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MP Corps";src:url("../fonts/corps-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
------------------------------------------------------------------------- */

/* ============================ 1. JETONS ================================= */
:root{
  /* Cuir et métal */
  --cuir:      #0C0C0E;
  --cuir-2:    #141419;
  --cuir-3:    #1D1D25;
  --acier:     #2A2A33;

  /* Émail */
  --bleu:      #12356E;
  --bleu-haut: #1B4A93;
  --bleu-vif:  #2E6FC4;
  --rouge:     #C8202E;
  --rouge-vif: #E03A44;

  /* Fils */
  --os:        #EDE8DC;
  --os-doux:   #A9A498;
  --os-faible: #6E6A62;
  --laiton:    #B08D3F;
  --laiton-clair:#D9BC72;

  /* Typographie */
  /* Pile d'affichage : grotesques LARGES et lisibles.
     Impact, Haettenschweiler et Arial Narrow sont volontairement exclus :
     leurs capitales se referment les unes sur les autres aux grandes tailles. */
  --f-display: "MP Display","Oswald","Archivo","Franklin Gothic Medium",
               "Segoe UI","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  --f-corps:   "MP Corps","Charter","Bitstream Charter","Sitka Text",Cambria,
               Georgia,"Times New Roman",serif;
  --f-plaque:  ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,
               "Liberation Mono",Menlo,monospace;

  /* Mesures */
  --lisible:   68ch;
  --large:     1180px;
  --rayon:     2px;
  --tr:        180ms cubic-bezier(.2,.7,.3,1);
}

/* ============================ 2. SOCLE ================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background-color:var(--cuir);
  /* Grain de cuir : trois couches de dégradés, zéro image */
  background-image:
    radial-gradient(circle at 22% 14%, rgba(46,111,196,.10), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(200,32,46,.09), transparent 46%),
    repeating-linear-gradient(52deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.30) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
  color:var(--os-doux);
  font-family:var(--f-corps);
  font-size:clamp(16px,.55vw + 14.6px,18px);
  line-height:1.72;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--laiton-clair);text-decoration:none;
  text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--os);text-decoration:underline}

:focus-visible{
  outline:2px solid var(--laiton-clair);
  outline-offset:3px;
  border-radius:1px;
}

.saut-contenu{
  position:absolute;left:-9999px;top:0;
  background:var(--os);color:var(--cuir);
  padding:.7rem 1.2rem;font-family:var(--f-plaque);font-size:.8rem;z-index:200;
}
.saut-contenu:focus{left:.6rem;top:.6rem}

/* ============================ 3. TYPOGRAPHIE ============================ */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  color:var(--os);
  text-transform:uppercase;
  margin:0 0 .58em;
  text-wrap:balance;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* PAS de font-stretch : combiné à une police de repli étroite, il produisait
     des capitales collées, illisibles dès la deuxième ligne. */
}
/* Les capitales ont besoin d'air. Plus le corps est petit, plus il en faut. */
h1{font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:1.06;letter-spacing:.005em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:.012em}
h3{font-size:clamp(1.1rem,1.75vw,1.38rem);line-height:1.26;letter-spacing:.035em}
h4{font-size:.98rem;line-height:1.3;letter-spacing:.11em;color:var(--laiton-clair)}

p{margin:0 0 1.15em;max-width:var(--lisible)}
strong{color:var(--os);font-weight:700}
em{color:var(--os-doux)}

.chapo{
  font-size:clamp(1.1rem,1.55vw,1.32rem);
  line-height:1.62;
  color:var(--os);
  max-width:60ch;
}

.mono{font-family:var(--f-plaque);font-size:.82em;letter-spacing:.04em}

/* Lettrine — le tract, pas la page web */
.lettrine::first-letter{
  float:left;
  font-family:var(--f-display);
  font-size:3.9em;
  line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--rouge-vif);
}

/* ============================ 4. GABARIT =============================== */
.contenant{
  width:min(100% - 2.6rem,var(--large));
  margin-inline:auto;
}
.contenant--etroit{width:min(100% - 2.6rem,860px)}

.bande{padding:clamp(3.6rem,7vw,6.4rem) 0;position:relative}
.bande--serree{padding:clamp(2.4rem,4vw,3.6rem) 0}
.bande--sombre{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.18))}
.bande + .bande{border-top:1px solid rgba(176,141,63,.13)}

/* ============================ 5. SIGNATURE : LA PLAQUE ================== */
/* Plaque de rue émaillée : plaque bleue, filet laiton en retrait,
   languette tricolore. Chaque section porte la sienne.               */
.plaque{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.46rem 1.15rem .46rem .95rem;
  margin-bottom:1.5rem;
  background:linear-gradient(178deg,var(--bleu-haut) 0%,var(--bleu) 58%,#0A2350 100%);
  border:1px solid rgba(176,141,63,.5);
  border-radius:var(--rayon);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -2px 6px rgba(0,0,0,.4),
    0 8px 22px rgba(0,0,0,.5);
  font-family:var(--f-plaque);
  font-size:.72rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--os);
}
.plaque::before{
  content:"";
  width:11px;height:1.55em;
  border-radius:1px;
  background:linear-gradient(90deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.plaque--rouge{
  background:linear-gradient(178deg,#D9333F 0%,var(--rouge) 58%,#8E1621 100%);
}

/* Filet tricolore vertical en marge de bloc */
.filet-tricolore{
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%) 1;
  padding-left:1.5rem;
}

/* ============================ 6. EN-TÊTE =============================== */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,11,.93);
  backdrop-filter:saturate(150%) blur(9px);
  -webkit-backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid rgba(176,141,63,.24);
}
.entete::after{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%);
  opacity:.85;
}
.entete__barre{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:.62rem 0;
}
.marque{display:flex;align-items:center;gap:.75rem;min-width:0}
.marque img{width:44px;height:44px;flex:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.65))}
.marque__texte{
  font-family:var(--f-display);font-size:.96rem;line-height:1.16;
  color:var(--os);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.marque__texte span{
  display:block;font-family:var(--f-plaque);font-size:.56rem;
  letter-spacing:.24em;color:var(--laiton);margin-top:.22em;
}
.marque:hover{text-decoration:none}
.marque:hover .marque__texte{color:var(--laiton-clair)}

.nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.nav a{
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--os-doux);
  padding:.62rem .6rem;border-radius:var(--rayon);
  transition:color var(--tr),background var(--tr);
  position:relative;
}
.nav a:hover{color:var(--os);background:rgba(255,255,255,.06);text-decoration:none}
.nav a[aria-current="page"]{color:var(--os)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.3rem;height:2px;
  background:var(--rouge-vif);
}

.bascule-nav{
  display:none;background:transparent;border:1px solid rgba(176,141,63,.4);
  color:var(--os);border-radius:var(--rayon);padding:.5rem .7rem;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
}
.bascule-nav:hover{border-color:var(--laiton-clair)}

@media (max-width:1240px){
  .bascule-nav{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,10,13,.985);
    border-bottom:1px solid rgba(176,141,63,.3);
    padding:.4rem 1.3rem 1rem;
  }
  .nav[data-ouvert="true"]{display:flex}
  .nav a{padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav a[aria-current="page"]::after{left:.2rem;right:auto;width:22px;bottom:.5rem}
}

/* ============================ 7. HÉROS ================================= */
.heros{
  position:relative;
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);
  overflow:hidden;
  text-align:center;
}
.heros::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 34%, rgba(30,79,168,.24), transparent 72%),
    radial-gradient(ellipse 44% 40% at 50% 96%, rgba(200,32,46,.18), transparent 76%);
  pointer-events:none;
}
.heros > *{position:relative;z-index:1}

.heros__patch{
  width:min(78vw,332px);margin:0 auto clamp(1.6rem,3vw,2.4rem);
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.85))
         drop-shadow(0 0 34px rgba(30,79,168,.3));
  animation:poser 900ms cubic-bezier(.16,.9,.28,1) both;
}
@keyframes poser{
  from{opacity:0;transform:translateY(24px) scale(.93) rotate(-5deg)}
  to  {opacity:1;transform:none}
}

.heros h1{margin-bottom:.28em;letter-spacing:.01em;line-height:1.02}
.heros h1 .ligne{display:block}
.heros h1 .ligne--rouge{color:var(--rouge-vif)}

.devise{
  font-family:var(--f-display);
  font-size:clamp(1rem,2.1vw,1.5rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--laiton-clair);
  margin:0 0 1.6rem;max-width:none;
}

/* Bandeau d'état civil : des faits administratifs, pas des chiffres flatteurs */
.etat-civil{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-top:1px solid rgba(176,141,63,.22);
  border-bottom:1px solid rgba(176,141,63,.22);
  background:rgba(0,0,0,.32);
}
.etat-civil__item{
  flex:1 1 220px;padding:1.05rem 1.3rem;text-align:center;
  border-left:1px solid rgba(176,141,63,.14);
}
.etat-civil__item:first-child{border-left:0}
.etat-civil dt{
  font-family:var(--f-plaque);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--os-faible);margin-bottom:.42em;
}
.etat-civil dd{
  margin:0;font-family:var(--f-plaque);font-size:.94rem;
  color:var(--os);letter-spacing:.05em;
}

/* ============================ 8. BOUTONS =============================== */
.actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:.4rem}
.actions--gauche{justify-content:flex-start}

.bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.7rem;
  font-family:var(--f-plaque);font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;border-radius:var(--rayon);
  border:1px solid rgba(176,141,63,.45);
  background:linear-gradient(178deg,var(--cuir-3),var(--cuir-2));
  color:var(--os);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 16px rgba(0,0,0,.45);
  transition:transform var(--tr),border-color var(--tr),background var(--tr);
  cursor:pointer;
}
.bouton:hover{
  transform:translateY(-2px);
  border-color:var(--laiton-clair);
  color:var(--os);text-decoration:none;
}
.bouton--principal{
  background:linear-gradient(178deg,var(--rouge-vif),var(--rouge) 60%,#8E1621);
  border-color:rgba(224,58,68,.7);color:#fff;
}
.bouton--principal:hover{border-color:#fff;color:#fff}
.bouton--bleu{
  background:linear-gradient(178deg,var(--bleu-haut),var(--bleu) 60%,#0A2350);
  border-color:rgba(46,111,196,.55);
}

/* ============================ 9. GRILLES ET CARTES ===================== */
.grille{display:grid;gap:1.15rem}
.grille--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.carte{
  background:linear-gradient(180deg,rgba(29,29,37,.9),rgba(14,14,18,.9));
  border:1px solid rgba(176,141,63,.2);
  border-radius:var(--rayon);
  padding:1.7rem 1.6rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color var(--tr),transform var(--tr);
}
.carte:hover{border-color:rgba(176,141,63,.48);transform:translateY(-3px)}
.carte h3{margin-bottom:.5em;color:var(--os)}
.carte p{margin-bottom:0;max-width:none;font-size:.96rem}
.carte p + p{margin-top:.8em}

/* Axes de l'Appel — la numérotation est réelle : le programme est en 4 points */
.axe{
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;
  align-items:start;
  background:linear-gradient(180deg,rgba(29,29,37,.85),rgba(12,12,15,.85));
  border:1px solid rgba(176,141,63,.2);
  border-radius:var(--rayon);
  padding:1.6rem 1.7rem;
  transition:border-color var(--tr);
}
.axe:hover{border-color:rgba(176,141,63,.45)}
.axe__num{
  font-family:var(--f-display);font-size:2.7rem;line-height:.85;
  color:transparent;
  -webkit-text-stroke:1.4px var(--laiton);
  padding-top:.06em;
}
.axe h3{margin-bottom:.4em}
.axe p{max-width:none;font-size:.96rem;margin-bottom:.6em}
.axe p:last-child{margin-bottom:0}

/* ============================ 10. CITATION ============================= */
.citation{
  margin:2.4rem 0;padding:1.7rem 0 1.7rem 1.9rem;
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%) 1;
}
.citation p{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,2.4vw,1.75rem);
  text-transform:uppercase;line-height:1.24;letter-spacing:.022em;
  color:var(--os);margin:0;max-width:28ch;text-wrap:balance;
}
.citation cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--laiton);
}

/* ============================ 11. BANDEAU DRAPEAU ====================== */
.drapeau{
  position:relative;isolation:isolate;
  padding:clamp(4rem,9vw,7.5rem) 0;
  text-align:center;
  border-block:1px solid rgba(176,141,63,.22);
}
.drapeau__fond{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) contrast(1.05);
}
.drapeau::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.82),rgba(8,8,10,.66) 45%,rgba(8,8,10,.9));
}
.drapeau h2{margin-bottom:.45em}
.drapeau p{margin-inline:auto}

/* ============================ 12. LISTES =============================== */
.liste-nette{list-style:none;padding:0;margin:0 0 1.3em;max-width:var(--lisible)}
.liste-nette li{
  position:relative;padding-left:1.6rem;margin-bottom:.72em;
}
.liste-nette li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:1px;
  background:var(--rouge);
  box-shadow:0 0 0 1px rgba(176,141,63,.5);
}
.liste-nette--bleue li::before{background:var(--bleu-vif)}

.liste-numerotee{
  list-style:none;padding:0;margin:0 0 1.3em;counter-reset:pt;
  max-width:var(--lisible);
}
.liste-numerotee li{
  counter-increment:pt;position:relative;padding-left:2.6rem;margin-bottom:1em;
}
.liste-numerotee li::before{
  content:counter(pt,decimal-leading-zero);
  position:absolute;left:0;top:.02em;
  font-family:var(--f-plaque);font-size:.82rem;letter-spacing:.06em;
  color:var(--laiton);
}

/* ============================ 13. TABLEAU / FICHE ====================== */
.fiche{
  width:100%;border-collapse:collapse;margin:0 0 1.6rem;
  font-size:.95rem;
}
.fiche th,.fiche td{
  text-align:left;padding:.85rem 1rem;
  border-bottom:1px solid rgba(176,141,63,.16);
  vertical-align:top;
}
.fiche th{
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-faible);
  width:34%;font-weight:400;
}
.fiche td{color:var(--os)}

/* Encart d'avertissement / note de rédaction */
.encart{
  border:1px dashed rgba(176,141,63,.45);
  background:rgba(176,141,63,.05);
  border-radius:var(--rayon);
  padding:1.3rem 1.5rem;margin:1.8rem 0;
}
.encart p{margin-bottom:.6em;font-size:.94rem}
.encart p:last-child{margin-bottom:0}
/* Le titre d'encart est un h3 — le niveau réel sous le h2 de section — mais
   il garde l'habillage d'un h4 : petite capitale laiton, très espacée.
   Les deux sélecteurs coexistent, aucun encart ancien ne change d'aspect. */
.encart h3,.encart h4{
  font-size:.98rem;line-height:1.3;letter-spacing:.11em;
  color:var(--laiton-clair);margin-bottom:.7em;
}

/* ============================ 14. FORMULAIRE =========================== */
.champ{margin-bottom:1.15rem;max-width:520px}
.champ label{
  display:block;margin-bottom:.42em;
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-faible);
}
.champ input,.champ textarea,.champ select{
  width:100%;padding:.78rem .95rem;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(176,141,63,.26);
  border-radius:var(--rayon);
  color:var(--os);font-family:var(--f-corps);font-size:1rem;
  transition:border-color var(--tr);
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  border-color:var(--laiton-clair);outline:none;
}
.champ textarea{min-height:150px;resize:vertical}

/* ============================ 15. PIED ================================= */
.pied{
  border-top:1px solid rgba(176,141,63,.22);
  background:rgba(0,0,0,.45);
  padding:clamp(2.6rem,5vw,4rem) 0 1.6rem;
  font-size:.92rem;
}
.pied__grille{
  display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-bottom:2.4rem;
}
.pied h4{margin-bottom:1em}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:.5em}
.pied a{color:var(--os-doux)}
.pied a:hover{color:var(--laiton-clair)}
.pied p{max-width:38ch;font-size:.92rem}

.pied__bas{
  border-top:1px solid rgba(176,141,63,.14);
  padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  justify-content:space-between;align-items:center;
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--os-faible);
}

/* ============================ 16. IMPRESSION =========================== */
@media print{
  .entete,.pied__grille,.actions,.bascule-nav,.drapeau__fond{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  h1,h2,h3,h4{color:#000}
  .carte,.axe,.plaque{border:1px solid #999;background:none;box-shadow:none;color:#000}
  a{color:#000;text-decoration:underline}
  .bande{padding:1rem 0}
}

/* ============================ 17. MOUVEMENT RÉDUIT ===================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .heros__patch{animation:none}
  .carte:hover,.bouton:hover{transform:none}
}

/* =========================================================================
   18. LITANIE — traitement dédié à la profession de foi
   Le texte fondateur avance par affirmations courtes, une par ligne.
   On ne le coule pas en paragraphes : on garde le rythme du texte dit.
   ========================================================================= */
.litanie{
  list-style:none;padding:0;
  margin:0 0 1.8rem;
  max-width:56ch;
  border-left:2px solid rgba(176,141,63,.28);
  padding-left:1.5rem;
}
.litanie li{
  font-family:var(--f-display);
  font-size:clamp(1rem,1.45vw,1.2rem);
  font-weight:600;
  text-transform:none;
  letter-spacing:.008em;
  line-height:1.44;
  color:var(--os);
  margin-bottom:.6em;
}
.litanie li:last-child{margin-bottom:0}
.litanie--serree li{font-size:clamp(.98rem,1.3vw,1.12rem);margin-bottom:.32em}

/* Bloc de rejets — la ligne rouge de l'association */
.rejets{
  border:1px solid rgba(200,32,46,.42);
  border-left:4px solid var(--rouge);
  background:linear-gradient(100deg,rgba(200,32,46,.12),rgba(200,32,46,.03) 60%);
  border-radius:var(--rayon);
  padding:1.7rem 1.8rem;
  margin:2rem 0;
}
.rejets h3{color:var(--rouge-vif);margin-bottom:.8em}
.rejets ul{list-style:none;padding:0;margin:0}
.rejets li{
  position:relative;padding-left:1.9rem;margin-bottom:.6em;
  color:var(--os);font-weight:700;
}
.rejets li:last-child{margin-bottom:0}
.rejets li::before{
  content:"✕";position:absolute;left:0;top:-.06em;
  color:var(--rouge-vif);font-size:1.05em;font-weight:400;
}

/* Credo final — la seule composition centrée du site */
.credo{
  text-align:center;
  padding:clamp(2.4rem,5vw,3.6rem) 0;
  border-block:1px solid rgba(176,141,63,.24);
  margin:2.8rem 0 0;
}
.credo p{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,3.6vw,2.5rem);
  text-transform:uppercase;line-height:1.18;letter-spacing:.02em;
  color:var(--os);margin:0 auto .3em;max-width:22ch;
}
.credo p:last-of-type{color:var(--rouge-vif);margin-bottom:0}
.credo .drapeau-fil{
  width:96px;height:5px;margin:0 auto 1.6rem;
  background:linear-gradient(90deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%);
}

/* Étiquettes de thèmes (liste des priorités suivies) */
.etiquettes{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.4rem 0 0;list-style:none}
.etiquettes li{
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--os);
  padding:.44rem .8rem;
  border:1px solid rgba(176,141,63,.34);
  border-radius:var(--rayon);
  background:rgba(0,0,0,.3);
}

/* =========================================================================
   19. PARTAGE
   ========================================================================= */
.partage{
  background:linear-gradient(180deg,rgba(29,29,37,.92),rgba(12,12,15,.92));
  border:1px solid rgba(176,141,63,.28);
  border-radius:var(--rayon);
  padding:1.8rem;
}
.partage__url{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;margin-bottom:1.3rem;
}
.partage__url input{
  flex:1 1 260px;min-width:0;
  padding:.82rem 1rem;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(176,141,63,.28);
  border-radius:var(--rayon);
  color:var(--os);font-family:var(--f-plaque);font-size:.86rem;
}
.partage__url input:focus{border-color:var(--laiton-clair);outline:none}
.partage__url .bouton{flex:0 0 auto}

.partage__liens{display:flex;flex-wrap:wrap;gap:.6rem}
.partage__liens a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.68rem 1.1rem;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--os-doux);
  border:1px solid rgba(176,141,63,.26);
  border-radius:var(--rayon);
  background:rgba(0,0,0,.32);
  transition:border-color var(--tr),color var(--tr);
}
.partage__liens a:hover{
  border-color:var(--laiton-clair);color:var(--os);text-decoration:none;
}

.apercu{
  border:1px solid rgba(176,141,63,.24);
  border-radius:var(--rayon);
  overflow:hidden;background:rgba(0,0,0,.42);max-width:520px;
}
.apercu img{width:100%;display:block;border-bottom:1px solid rgba(176,141,63,.2)}
.apercu__texte{padding:.9rem 1.1rem}
.apercu__texte .h{color:var(--os);font-weight:700;margin:0 0 .3em;font-size:.98rem}
.apercu__texte .d{color:var(--os-doux);margin:0 0 .5em;font-size:.87rem;line-height:1.5}
.apercu__texte .u{
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.09em;
  color:var(--os-faible);margin:0;text-transform:uppercase;
}

.retour-copie{
  display:inline-block;margin-top:.8rem;
  font-family:var(--f-plaque);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--laiton-clair);
}
.retour-copie[hidden]{display:none}

/* =========================================================================
   20. CONFRONTATION — deux doctrines face à face
   Le fond du désaccord est comparatif : on le montre en deux colonnes
   plutôt qu'en paragraphes qui alternent.
   ========================================================================= */
.confront{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border:1px solid rgba(176,141,63,.24);
  border-radius:var(--rayon);
  overflow:hidden;
  margin:1.8rem 0;
}
.confront__col{padding:1.5rem 1.6rem;background:rgba(0,0,0,.3)}
.confront__col + .confront__col{
  border-left:1px solid rgba(176,141,63,.2);
  background:rgba(30,79,168,.07);
}
@media (max-width:640px){
  .confront__col + .confront__col{
    border-left:0;border-top:1px solid rgba(176,141,63,.2);
  }
}
.confront__qui{
  font-family:var(--f-plaque);font-size:.64rem;letter-spacing:.19em;
  text-transform:uppercase;margin-bottom:.9em;display:block;
}
.confront__col:first-child .confront__qui{color:var(--os-faible)}
.confront__col + .confront__col .confront__qui{color:var(--laiton-clair)}
.confront p{margin:0;font-size:.96rem;max-width:none;color:var(--os-doux)}
.confront__col + .confront__col p{color:var(--os)}

/* Question fondatrice — chapeau des sections de divergence */
.question{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.32rem);
  text-transform:none;color:var(--laiton-clair);
  line-height:1.36;margin:0 0 1.2em;max-width:52ch;
}

/* =========================================================================
   21. POINT DE VÉRITÉ — encart d'honnêteté intellectuelle
   Signale visuellement les faits qui NE vont PAS dans notre sens.
   ========================================================================= */
.verite{
  border:1px solid rgba(46,111,196,.45);
  border-left:4px solid var(--bleu-vif);
  background:linear-gradient(100deg,rgba(46,111,196,.12),rgba(46,111,196,.03) 60%);
  border-radius:var(--rayon);
  padding:1.5rem 1.7rem;margin:2rem 0;
}
.verite h3,.verite h4{color:#7FB3F0;margin-bottom:.7em}
.verite p{margin-bottom:.7em;font-size:.96rem}
.verite p:last-child{margin-bottom:0}

/* =========================================================================
   22. LEXIQUE — les qualifications d'une loi de transfert de responsabilité
   ========================================================================= */
.lexique{list-style:none;padding:0;margin:1.6rem 0}
.lexique li{
  border-left:2px solid rgba(200,32,46,.5);
  padding:.2rem 0 .2rem 1.3rem;
  margin-bottom:1.15em;
  max-width:var(--lisible);
}
.lexique dfn{
  display:block;font-style:normal;
  font-family:var(--f-display);font-size:1.06rem;
  text-transform:none;letter-spacing:.005em;
  color:var(--os);margin-bottom:.24em;
}
.lexique span{font-size:.95rem;color:var(--os-doux);line-height:1.6}

/* =========================================================================
   23. CRITÈRES — grille d'évaluation des candidats
   ========================================================================= */
.criteres{list-style:none;padding:0;margin:1.6rem 0;counter-reset:cr}
.criteres li{
  counter-increment:cr;
  display:grid;grid-template-columns:auto 1fr;gap:1rem;
  align-items:start;
  padding:.95rem 0;
  border-bottom:1px solid rgba(176,141,63,.14);
  max-width:var(--lisible);
}
.criteres li::before{
  content:counter(cr,decimal-leading-zero);
  font-family:var(--f-plaque);font-size:.76rem;
  color:var(--laiton);padding-top:.28em;
}
.criteres li:last-child{border-bottom:0}

/* =========================================================================
   24. SOURCES — appareil de références
   ========================================================================= */
.sources{
  list-style:none;padding:0;margin:1.4rem 0 0;counter-reset:src;
  font-size:.9rem;
}
.sources li{
  counter-increment:src;position:relative;
  padding-left:2.6rem;margin-bottom:1em;
  color:var(--os-doux);line-height:1.6;
}
.sources li::before{
  content:"[" counter(src) "]";
  position:absolute;left:0;top:.06em;
  font-family:var(--f-plaque);font-size:.76rem;color:var(--laiton);
}
.sources a{word-break:break-word}

/* Renvoi de note dans le corps du texte */
.renvoi{
  font-family:var(--f-plaque);font-size:.68em;
  vertical-align:.35em;color:var(--laiton-clair);
  text-decoration:none;padding:0 .12em;
}
.renvoi:hover{color:var(--os);text-decoration:none}

/* =========================================================================
   25. EXIGENCES — les piliers numérotés d'une démonstration
   ========================================================================= */
.exigence{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  align-items:start;margin-bottom:1.9rem;max-width:var(--lisible);
}
.exigence__num{
  font-family:var(--f-display);font-size:2.4rem;line-height:.9;
  color:transparent;-webkit-text-stroke:1.3px var(--laiton);
  padding-top:.04em;
}
.exigence h3{margin-bottom:.4em}
.exigence p{margin-bottom:.55em;font-size:.97rem}
.exigence p:last-child{margin-bottom:0}

/* Verdict — conclusion frappée d'une démonstration */
.verdict{
  text-align:center;margin:3rem 0 0;
  padding:2.4rem 1.4rem;
  border:1px solid rgba(200,32,46,.4);
  border-radius:var(--rayon);
  background:linear-gradient(180deg,rgba(200,32,46,.13),rgba(200,32,46,.03));
}
.verdict p{
  font-family:var(--f-display);
  font-size:clamp(1.25rem,3vw,2rem);
  text-transform:uppercase;line-height:1.2;letter-spacing:.022em;
  color:var(--os);margin:0 auto;max-width:24ch;text-wrap:balance;
}
.verdict p strong{color:var(--rouge-vif);display:block}
.verdict .drapeau-fil{
  width:80px;height:4px;margin:0 auto 1.4rem;
  background:linear-gradient(90deg,
    #1E4FA8 0 33.34%, #F0ECE2 33.34% 66.67%, var(--rouge) 66.67% 100%);
}

/* Chiffre isolé mis en exergue */
.chiffre{
  display:flex;align-items:baseline;gap:1rem;
  margin:1.5rem 0;padding:1.1rem 1.4rem;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(176,141,63,.2);
  border-radius:var(--rayon);
  max-width:var(--lisible);
}
.chiffre b{
  font-family:var(--f-display);font-size:2.3rem;line-height:1;
  color:var(--laiton-clair);flex:none;
}
.chiffre span{font-size:.95rem;color:var(--os-doux)}

/* =========================================================================
   26. ÉCUSSONS — la culture du patch
   Le patch est le tract du motard : il dit crûment ce que la doctrine
   argumente longuement. On le présente comme un objet de culture club,
   posé sur son support, pas comme une bannière de site.
   ========================================================================= */
.ecussons{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:2.2rem 0;
}

.ecusson{margin:0;text-align:center}

.ecusson__socle{
  position:relative;
  padding:1.8rem;
  border-radius:var(--rayon);
  border:1px solid rgba(176,141,63,.22);
  /* Cuir de blouson : le support naturel du patch */
  background:
    radial-gradient(circle at 38% 26%, rgba(255,255,255,.05), transparent 58%),
    repeating-linear-gradient(48deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    linear-gradient(168deg,#1A1A20,#0B0B0E);
  overflow:hidden;
}
.ecusson__socle::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.05),transparent 42%);
  pointer-events:none;
}

.ecusson img{
  width:min(100%,300px);margin-inline:auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.72));
  transition:transform var(--tr);
}
.ecusson:hover img{transform:rotate(-2deg) scale(1.02)}

.ecusson figcaption{
  margin-top:1.1rem;text-align:left;
}
.ecusson figcaption b{
  display:block;
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--laiton-clair);
  margin-bottom:.55em;font-weight:400;
}
.ecusson figcaption span{
  display:block;font-size:.94rem;line-height:1.62;color:var(--os-doux);
}

/* Avertissement de registre — court, sobre, pas moralisateur */
.registre{
  font-family:var(--f-plaque);font-size:.7rem;letter-spacing:.09em;
  color:var(--os-faible);line-height:1.7;
  border-top:1px solid rgba(176,141,63,.16);
  padding-top:1.1rem;margin-top:2rem;max-width:var(--lisible);
}

@media (prefers-reduced-motion:reduce){
  .ecusson:hover img{transform:none}
}

/* =========================================================================
   27. LES COULEURS — présentation des patchs à l'échelle
   Le rapport 9 cm / 30 cm ne se comprend pas par un chiffre : il se voit.
   Les deux écussons sont donc rendus à leur échelle relative réelle.
   ========================================================================= */
.couleurs{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(2rem,5vw,4rem);
  padding:clamp(1.8rem,4vw,2.8rem);
  margin:2.2rem 0;
  border:1px solid rgba(176,141,63,.22);
  border-radius:var(--rayon);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.05), transparent 58%),
    repeating-linear-gradient(48deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    linear-gradient(168deg,#1A1A20,#0B0B0E);
}

.couleur{margin:0;text-align:center;flex:0 0 auto}
.couleur img{
  display:block;margin:0 auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.75));
}
/* Échelle relative respectée : 9 et 30, soit un rapport de 1 à 3,33 */
.couleur--poitrine img{width:clamp(78px,13vw,108px)}
.couleur--dos img{width:clamp(220px,38vw,360px)}

.couleur__cote{
  position:relative;
  margin:1.1rem auto .7rem;
  height:1px;background:rgba(176,141,63,.5);
}
.couleur--poitrine .couleur__cote{width:clamp(78px,13vw,108px)}
.couleur--dos .couleur__cote{width:clamp(220px,38vw,360px)}
.couleur__cote::before,.couleur__cote::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;
  background:rgba(176,141,63,.7);
}
.couleur__cote::before{left:0}
.couleur__cote::after{right:0}

.couleur figcaption b{
  display:block;
  font-family:var(--f-display);font-size:1.15rem;font-weight:700;
  color:var(--os);letter-spacing:.02em;text-transform:uppercase;
}
.couleur figcaption span{
  display:block;margin-top:.35em;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--os-faible);
}

@media (max-width:620px){
  .couleurs{justify-content:center}
}

/* Mention de statut — bandeau discret sous un titre de page */
.statut{
  /* Flux normal, et non inline-flex : un <strong> au milieu d'une ligne de
     statut devenait un item de la boîte flexible, et le texte se brisait en
     colonnes. Le tiret d'appel est posé en inline-block, ce qui conserve
     l'aspect sans casser les phrases longues. */
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.14em;
  line-height:1.9;
  text-transform:uppercase;color:var(--os-faible);
  margin:-.8rem 0 1.6rem;
  max-width:var(--lisible);
}
.statut::before{
  content:"";display:inline-block;vertical-align:middle;
  width:22px;height:1px;margin-right:.6rem;
  background:rgba(176,141,63,.6);
}

/* =========================================================================
   28. RÉSEAUX — page et groupe Facebook
   Liens hypertextes simples : aucun widget, aucun script tiers, aucun pixel.
   La contrainte « zéro appel externe » reste intacte.
   ========================================================================= */
.reseaux{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:2rem 0;
}

.reseau{
  display:flex;flex-direction:column;
  padding:1.7rem 1.6rem;
  border:1px solid rgba(46,111,196,.4);
  border-left:4px solid var(--bleu-vif);
  border-radius:var(--rayon);
  background:linear-gradient(150deg,rgba(46,111,196,.12),rgba(46,111,196,.03) 62%);
  transition:border-color var(--tr),transform var(--tr);
}
.reseau:hover{border-color:var(--laiton-clair);transform:translateY(-3px)}

.reseau__type{
  font-family:var(--f-plaque);font-size:.64rem;letter-spacing:.19em;
  text-transform:uppercase;color:#7FB3F0;margin-bottom:.7em;
}
.reseau h3{margin-bottom:.5em}
.reseau p{font-size:.95rem;max-width:none;margin-bottom:1em;color:var(--os-doux)}
.reseau .bouton{align-self:flex-start;margin-top:auto}
.reseau__url{
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.04em;
  color:var(--os-faible);margin:.9rem 0 0;word-break:break-all;
}

/* Ce que produit l'abonnement — argumentaire en trois temps */
.effets{
  list-style:none;padding:0;margin:2rem 0 0;counter-reset:ef;
}
.effets li{
  counter-increment:ef;position:relative;
  padding-left:3.2rem;margin-bottom:1.4em;
  max-width:var(--lisible);
}
.effets li::before{
  content:counter(ef);
  position:absolute;left:0;top:-.1em;
  width:2.1rem;height:2.1rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:.95rem;font-weight:700;
  color:var(--os);
  border:1px solid rgba(176,141,63,.45);
  border-radius:50%;
  background:rgba(0,0,0,.4);
}
.effets b{display:block;color:var(--os);margin-bottom:.25em}
.effets span{color:var(--os-doux);font-size:.96rem;line-height:1.65}

/* --- Section phare : le combat prioritaire (Pacte moto) --- */
.bande--phare{background:
  linear-gradient(180deg,rgba(176,141,63,.09),transparent 60%),var(--fond);
  border-top:3px solid var(--rouge);border-bottom:1px solid rgba(176,141,63,.35)}
.reseau--phare{border-color:rgba(176,141,63,.55);box-shadow:0 0 0 1px rgba(176,141,63,.18)}

/* --- Formulaire de contact --- */
.champ .aide,.aide{font-size:.86rem;color:var(--os-faible);margin:.35rem 0 0}
.facultatif{font-weight:400;color:var(--os-faible);font-size:.86em}
.retour-form{margin-top:1rem;font-size:.94rem;color:var(--os-faible)}
.retour-form--erreur{color:var(--rouge-clair,#e2564d);font-weight:600}
.retour-form--repli{color:var(--os)}
.repli-message{width:100%;margin:.8rem 0;font-family:var(--f-mono,monospace);font-size:.86rem}
.sources li{margin-bottom:.55rem}
.sources .mono{display:block;font-size:.82rem;color:var(--os-faible)}

/* --- Formulaire d'adhésion --- */
.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
@media (max-width:640px){.grille-champs{grid-template-columns:1fr}}
.grille-champs .champ{max-width:none}
.option{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.15rem;
  padding:.9rem 1rem;background:rgba(176,141,63,.06);
  border:1px solid rgba(176,141,63,.28);border-radius:3px}
.option input[type=checkbox]{margin-top:.28rem;width:1.05rem;height:1.05rem;flex:0 0 auto}
.option label{display:block;cursor:pointer;font-weight:400}
.option__detail{display:block;margin-top:.4rem;font-size:.87rem;line-height:1.5;
  color:var(--os-faible)}
.encart--serre{margin:.4rem 0 1.6rem}
.alerte{padding:.85rem 1rem;margin-bottom:1.4rem;border-left:3px solid var(--rouge);
  background:rgba(200,16,46,.09);font-size:.94rem}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#formulaire h3{margin-top:2rem;margin-bottom:.9rem;font-size:1.05rem;color:var(--laiton,#B08D3F)}
#formulaire h3:first-of-type{margin-top:.6rem}

/* ============================ 22. BOUTIQUE ET BON DE COMMANDE ==========
   Ajouts liés à l'ouverture de la boutique : en-têtes de tableau, groupes de
   boutons radio, champs de quantité et ligne de total. Rien d'externe.
   ---------------------------------------------------------------------- */

/* En-tête de tableau : jusqu'ici les .fiche n'avaient que des th de ligne. */
.fiche thead th{
  width:auto;
  color:var(--laiton-clair);
  border-bottom:2px solid rgba(176,141,63,.38);
}
.fiche thead th:first-child{width:34%}

/* Groupe de boutons radio — même présentation que les cases à cocher. */
.option-groupe{border:0;padding:0;margin:0 0 1.15rem}
.option input[type=radio]{
  margin-top:.28rem;width:1.05rem;height:1.05rem;flex:0 0 auto;
}

/* Champ de quantité, dans le bon de commande. */
.qte{
  width:5.5rem;padding:.5rem .6rem;
  background:var(--cuir-3);color:var(--os);
  border:1px solid rgba(176,141,63,.28);border-radius:var(--rayon);
  font-family:var(--f-plaque);font-size:.95rem;text-align:center;
}
.qte:focus{border-color:var(--laiton-clair);outline:2px solid var(--bleu-vif);outline-offset:1px}

/* Ligne de total, mise à jour par le script. */
.total{
  font-family:var(--f-plaque);font-size:.95rem;letter-spacing:.04em;
  border-top:1px solid rgba(176,141,63,.28);
  padding-top:.9rem;margin:.4rem 0 1.6rem;
}
.total strong{color:var(--laiton-clair);font-size:1.15rem}
.total span{display:block;color:var(--os-faible);font-size:.82rem;letter-spacing:0;margin-top:.3em}

/* Libellé réservé aux lecteurs d'écran. */
.visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================ 23. AVIS IMPORTANT =======================
   Encart d'alerte, plus appuyé que .encart : bordure pleine, fond légèrement
   remonté, plaque de titre. Utilisé en tête de la boutique pour le
   fonctionnement en commandes groupées.
   ---------------------------------------------------------------------- */
.avis{
  border:2px solid var(--laiton);
  border-left-width:8px;
  border-radius:var(--rayon);
  background:linear-gradient(180deg,rgba(176,141,63,.14),rgba(176,141,63,.05));
  padding:1.6rem 1.7rem 1.4rem;
  margin:0 0 2rem;
}
.avis__plaque{
  display:inline-block;
  font-family:var(--f-plaque);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cuir-1);
  background:var(--laiton-clair);
  padding:.3rem .7rem;border-radius:2px;margin-bottom:.9rem;
}
.avis h2,.avis h3{margin:0 0 .7rem;color:var(--laiton-clair)}
.avis p{margin:0 0 .8rem}
.avis p:last-child{margin-bottom:0}
.avis strong{color:var(--os)}
.avis--serre{padding:1.1rem 1.2rem;margin:1.4rem 0}

/* ============================ 24. FILM ET APERÇUS PRODUIT ==============
   Bloc vidéo de l'accueil et photographies de présentation de la boutique.
   La vidéo est servie depuis ce serveur, sans lecteur tiers, sans cookie et
   sans requête extérieure : la contrainte de l'article 28 du règlement
   intérieur tient aussi pour la vidéo.
   ---------------------------------------------------------------------- */

.film{
  max-width:620px;margin:0 auto;
}
.film__cadre{
  position:relative;
  background:#F7F5F0;                 /* le fond clair du film s'y fond */
  border:2px solid rgba(176,141,63,.55);
  border-radius:var(--rayon);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  aspect-ratio:1/1;
}
.film__cadre video{
  display:block;width:100%;height:100%;object-fit:cover;
  background:#F7F5F0;
}
.film__commande{
  position:absolute;right:.75rem;bottom:.75rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-plaque);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--os);background:rgba(12,12,14,.78);
  border:1px solid rgba(176,141,63,.5);border-radius:2px;
  padding:.4rem .7rem;cursor:pointer;
}
.film__commande:hover{background:rgba(12,12,14,.92);border-color:var(--laiton-clair)}
.film__commande:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}
.film__legende{
  margin:.9rem 0 0;text-align:center;
  font-size:.86rem;color:var(--os-faible);
}

/* Photographies de présentation d'un article de la boutique. */
.apercu{margin:1.6rem 0 0}
.apercu img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(176,141,63,.35);
  border-radius:var(--rayon);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.apercu figcaption{
  margin-top:.7rem;font-size:.84rem;color:var(--os-faible);
}
.apercu--large{max-width:760px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){
  .film__cadre video{animation:none}
}

/* ============================ 25. GALERIE PRODUIT ======================
   Deux ou trois photographies alignées sous une fiche produit : le visuel
   seul, puis l'objet en situation sur une machine.
   ---------------------------------------------------------------------- */
.galerie{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.1rem;
  margin:1.4rem 0 0;
}
.galerie figure{margin:0}
.galerie img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(176,141,63,.35);
  border-radius:var(--rayon);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  background:#F7F5F0;
}
.galerie figcaption{
  margin-top:.55rem;font-size:.8rem;color:var(--os-faible);
}
.galerie--pleine{grid-template-columns:1fr}

/* ============================ 26. BANNIÈRE CLIQUABLE ==================
   Image d'appel vers la boutique en ligne. Le lien enveloppe l'image : le
   clic fonctionne sur toute sa surface, et il ouvre un nouvel onglet.
   ---------------------------------------------------------------------- */
.banniere{
  display:block;position:relative;
  margin:2rem 0 1.6rem;
  border:2px solid rgba(176,141,63,.5);
  border-radius:var(--rayon);
  overflow:hidden;
  box-shadow:0 22px 54px rgba(0,0,0,.55);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.banniere img{display:block;width:100%;height:auto}
.banniere:hover,.banniere:focus-visible{
  transform:translateY(-3px);
  border-color:var(--laiton-clair);
  box-shadow:0 28px 64px rgba(0,0,0,.66);
}
.banniere:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:3px}
.banniere__mention{
  position:absolute;right:.7rem;bottom:.7rem;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--os);
  background:rgba(12,12,14,.8);
  border:1px solid rgba(176,141,63,.45);border-radius:2px;
  padding:.32rem .6rem;
}

/* Image de produit cliquable : même respiration au survol. */
.apercu a{display:block;border-radius:var(--rayon);overflow:hidden}
.apercu a:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:3px}
.apercu a img{transition:transform .3s ease}
.apercu a:hover img{transform:scale(1.015)}

@media (prefers-reduced-motion:reduce){
  .banniere,.apercu a img{transition:none}
  .banniere:hover{transform:none}
  .apercu a:hover img{transform:none}
}

/* ============================ 27. SLOGAN ==============================
   « Pour une France belle et forte » — baseline de l'Association, sous la
   devise à l'accueil et dans le pied de page de chaque page.
   ---------------------------------------------------------------------- */
.slogan{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,2.4vw,1.6rem);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--laiton-clair);
  margin:.5rem 0 1.1rem;
}
.slogan--centre{text-align:center}
.slogan--pied{
  font-size:.95rem;letter-spacing:.1em;margin:.6rem 0 0;
}

/* ============================ 28. MENU RACCOURCI ======================
   Sommaire d'entête des pages longues (espace adhérent, sympathisant).
   Il colle sous la barre de navigation au défilement, reste utilisable au
   clavier et se replie en colonne sur mobile.
   ---------------------------------------------------------------------- */
.sommaire{
  position:sticky;top:0;z-index:60;
  margin:0 0 1.8rem;padding:.7rem .9rem;
  background:rgba(12,12,14,.93);
  border:1px solid rgba(176,141,63,.34);
  border-left:4px solid var(--rouge);
  border-radius:var(--rayon);
  backdrop-filter:blur(6px);
}
.sommaire__titre{
  display:block;margin:0 0 .55rem;
  font-family:var(--f-plaque);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laiton-clair);
}
.sommaire__liens{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin:0;padding:0;list-style:none;
}
.sommaire__liens a{
  display:inline-block;
  padding:.34rem .7rem;
  font-family:var(--f-plaque);font-size:.72rem;letter-spacing:.06em;
  color:var(--os);text-decoration:none;
  background:var(--cuir-3);
  border:1px solid rgba(176,141,63,.3);border-radius:2px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.sommaire__liens a:hover,.sommaire__liens a:focus-visible{
  background:var(--bleu);border-color:var(--laiton-clair);color:#fff;
}
.sommaire__liens a:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}
@media (max-width:620px){
  .sommaire{position:static}
  .sommaire__liens a{font-size:.68rem;padding:.3rem .55rem}
}
@media print{.sommaire{display:none}}

/* ============================ 29. VISUELS D'APPARTENANCE ==============
   Fonds d'écran, photo de profil et couverture distribués aux membres et
   aux sympathisants. Chaque vignette porte son rôle, son format et son
   lien de téléchargement en pleine définition.
   ---------------------------------------------------------------------- */
.visuels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.4rem;
  margin:1.8rem 0 0;
}
.visuel{
  display:flex;flex-direction:column;
  margin:0;
  background:var(--cuir-2);
  border:1px solid rgba(176,141,63,.3);
  border-radius:var(--rayon);
  overflow:hidden;
}
.visuel img{
  display:block;width:100%;height:auto;
  background:#0A0A0C;
  border-bottom:1px solid rgba(176,141,63,.24);
}
.visuel figcaption{
  display:flex;flex-direction:column;gap:.5rem;
  padding:.95rem 1rem 1.1rem;
  font-size:.88rem;line-height:1.5;color:var(--os-doux);
}
.visuel__role{
  font-family:var(--f-plaque);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--laiton-clair);
}
.visuel__nom{
  font-family:var(--f-display);font-size:1.06rem;line-height:1.15;
  letter-spacing:.02em;color:var(--os);
}
.visuel__format{
  font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.08em;
  color:var(--os-faible);
}
.visuel__lien{
  align-self:flex-start;margin-top:.2rem;
  padding:.4rem .8rem;
  font-family:var(--f-plaque);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  color:var(--os);background:var(--bleu);
  border:1px solid var(--bleu-vif);border-radius:2px;
}
.visuel__lien:hover,.visuel__lien:focus-visible{
  background:var(--bleu-haut);border-color:var(--laiton-clair);color:#fff;
}
.visuel__lien:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}
/* Les fonds d'écran sont en portrait : deux par ligne suffisent, sinon la
   vignette occupe toute la largeur du texte et écrase la lecture. */
.visuels--portrait{grid-template-columns:repeat(auto-fit,minmax(210px,260px));
  justify-content:start}
@media print{.visuel__lien{display:none}}

/* ============================ 30. OUTIL CARBURANT =====================
   Page carburant.html. Signature : le prix affiché comme une plaque émaillée
   de totem de station — bleu pour la liste, rouge pour la moins chère.
   Cibles tactiles de 48 px minimum : l'outil s'utilise avec des gants.
   Aucune règle ne dépend d'un style en ligne (CSP « style-src 'self' »).
   ---------------------------------------------------------------------- */
.carbu-heros{padding-bottom:1rem}
.carbu-heros h1{margin-bottom:.35em}
.carbu-heros .sommaire{margin:1.4rem 0 0;position:static}
.carbu-bande{padding-top:1rem}

.carbu{
  background:linear-gradient(180deg,rgba(29,29,37,.92),rgba(14,14,18,.94));
  border:1px solid rgba(176,141,63,.28);border-radius:var(--rayon);
  padding:clamp(.9rem,2vw,1.4rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 40px rgba(0,0,0,.45);
}

/* Recherche */
.carbu [hidden]{display:none !important}
.carbu__recherche{display:flex;gap:.7rem;flex-wrap:wrap}
.carbu__champ{position:relative;flex:1 1 320px;min-width:0}
.carbu__champ input{
  width:100%;min-height:52px;padding:.8rem 1rem;
  font-family:var(--f-corps);font-size:1.08rem;color:var(--os);
  background:var(--cuir);border:1px solid rgba(176,141,63,.45);border-radius:var(--rayon);
}
.carbu__champ input::placeholder{color:var(--os-faible)}
.carbu__champ input:focus{outline:2px solid var(--laiton-clair);outline-offset:1px}
.carbu__geo{min-height:52px;flex:0 0 auto}
.carbu__viseur{
  width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);position:relative;
}
.carbu__viseur::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}
.carbu__geo[disabled]{opacity:.65;cursor:progress;transform:none}

.carbu__suggestions{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1200;
  margin:0;padding:.3rem 0;list-style:none;
  background:var(--cuir-2);border:1px solid rgba(176,141,63,.45);border-radius:var(--rayon);
  box-shadow:0 14px 34px rgba(0,0,0,.6);
}
.carbu__suggestions li{padding:.75rem 1rem;cursor:pointer;color:var(--os);line-height:1.3}
.carbu__suggestions li small{display:block;font-family:var(--f-plaque);font-size:.7rem;
  letter-spacing:.06em;color:var(--os-faible);margin-top:.2em}
.carbu__suggestions li[aria-selected="true"],.carbu__suggestions li:hover{background:var(--bleu)}

/* Réglages : dépliés sur grand écran, repliés en une ligne sur mobile */
.carbu__resume{display:none}
.carbu__reglages-zone{margin:0}
.carbu__reglages{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:flex-end;margin:1.1rem 0 .4rem}
.carbu__groupe{border:0;margin:0;padding:0;min-width:0}
.carbu__groupe legend,.carbu__reservoir label{
  display:block;padding:0;margin-bottom:.4rem;
  font-family:var(--f-plaque);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--os-faible);
}
.carbu__segments{display:inline-flex;border:1px solid rgba(176,141,63,.4);border-radius:var(--rayon);overflow:hidden}
.carbu__segments input{position:absolute;opacity:0;pointer-events:none}
.carbu__segments label{
  display:flex;align-items:center;min-height:46px;padding:0 .95rem;cursor:pointer;
  font-family:var(--f-plaque);font-size:.78rem;letter-spacing:.06em;color:var(--os-doux);
  background:var(--cuir);border-left:1px solid rgba(176,141,63,.22);
  transition:background var(--tr),color var(--tr);
}
.carbu__segments label:first-of-type{border-left:0}
.carbu__segments label:hover{color:var(--os)}
.carbu__segments input:checked+label{
  background:linear-gradient(178deg,var(--bleu-haut),var(--bleu) 60%,#0A2350);color:var(--os);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}
.carbu__segments input:focus-visible+label{outline:2px solid var(--laiton-clair);outline-offset:-3px}
.carbu__reservoir{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem}
.carbu__reservoir label{grid-column:1 / -1}
.carbu__reservoir input{
  width:4.6rem;min-height:46px;padding:0 .6rem;text-align:center;
  font-family:var(--f-plaque);font-size:1rem;color:var(--os);
  background:var(--cuir);border:1px solid rgba(176,141,63,.4);border-radius:var(--rayon);
}
.carbu__reservoir span{font-family:var(--f-plaque);font-size:.74rem;color:var(--os-faible)}
.carbu__case{display:flex;align-items:center;gap:.55rem;min-height:46px;cursor:pointer;
  font-size:.92rem;color:var(--os-doux)}
.carbu__case input{width:20px;height:20px;accent-color:var(--rouge)}

/* État */
.carbu__etat{margin:.8rem 0 1rem;font-family:var(--f-plaque);font-size:.78rem;
  letter-spacing:.03em;color:var(--os-doux);max-width:none}
.carbu__etat--erreur{color:var(--os);padding:.75rem 1rem;border-left:3px solid var(--rouge);
  background:rgba(200,32,46,.12);font-family:var(--f-corps);font-size:.95rem;letter-spacing:0}
.carbu--charge .carbu__etat::after{
  content:"";display:inline-block;width:.8em;height:.8em;margin-left:.6em;vertical-align:-.1em;
  border:2px solid var(--laiton);border-right-color:transparent;border-radius:50%;
  animation:carbu-tourne .8s linear infinite;
}
@keyframes carbu-tourne{to{transform:rotate(360deg)}}

/* Corps : liste + carte */
.carbu__vues{display:none}
.carbu__corps{display:grid;grid-template-columns:minmax(330px,430px) 1fr;gap:1.1rem;min-height:0}
.carbu__liste{max-height:74vh;overflow-y:auto;padding-right:.3rem;overscroll-behavior:contain}
.carbu__carte-zone{position:relative}
.carbu__carte{height:74vh;min-height:420px;border:1px solid rgba(176,141,63,.3);border-radius:var(--rayon);background:var(--cuir-2)}
.carbu__ici{position:absolute;top:.8rem;left:50%;transform:translateX(-50%);z-index:900;
  min-height:46px;padding:.6rem 1.2rem}
.carbu__ici:hover{transform:translateX(-50%) translateY(-2px)}

/* La plaque-prix */
.totem{
  display:inline-flex;align-items:flex-start;flex:none;
  padding:.38rem .6rem .3rem;
  background:linear-gradient(178deg,var(--bleu-haut) 0%,var(--bleu) 58%,#0A2350 100%);
  border:1px solid rgba(176,141,63,.55);border-radius:var(--rayon);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.34),inset 0 2px 0 rgba(255,255,255,.13),0 5px 14px rgba(0,0,0,.45);
  font-family:var(--f-display);font-weight:700;color:var(--os);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.totem__e{font-size:1.75rem}
.totem__m{font-size:.95rem;margin:.12em 0 0 .04em}
.totem__u{font-family:var(--f-plaque);font-size:.56rem;letter-spacing:.08em;color:var(--laiton-clair);
  margin:.35em 0 0 .35em}
.totem--grand{padding:.7rem .95rem .55rem;
  background:linear-gradient(178deg,#D9333F 0%,var(--rouge) 58%,#8E1621 100%);
  border-color:rgba(217,188,114,.7)}
.totem--grand .totem__e{font-size:clamp(2.8rem,6vw,3.6rem)}
.totem--grand .totem__m{font-size:1.5rem}
.totem--grand .totem__u{color:var(--os)}

.carbu-vedette{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.1rem;align-items:start;
  padding:1.1rem;margin-bottom:.9rem;
  background:rgba(0,0,0,.35);border:1px solid rgba(224,58,68,.55);border-radius:var(--rayon);
}
.carbu-vedette p{margin:0 0 .45em;max-width:none}
.carbu-vedette__titre{font-family:var(--f-plaque);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rouge-vif)}
.carbu-vedette__lieu{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.25;color:var(--os);font-size:1.02rem}
.carbu-vedette__plein,.carbu-vedette__trajet{grid-column:1 / -1}
.carbu-vedette__plein{font-size:.95rem;margin:0 !important}
.carbu-vedette__plein span{display:block;color:var(--laiton-clair);font-size:.88rem}
.carbu-vedette__trajet{margin:0 !important}
.carbu-vedette__trajet .carbu-go{flex:1 1 0;justify-content:center}

.carbu__stations{list-style:none;margin:0;padding:0}
.carbu-station{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .95rem;align-items:start;
  padding:.85rem .5rem;border-bottom:1px solid rgba(176,141,63,.14);cursor:pointer;
  transition:background var(--tr);
}
.carbu-station:hover,.carbu-station--actif{background:rgba(46,111,196,.12)}
.carbu-station--top .totem{border-color:var(--rouge-vif)}
.carbu-station p{margin:0;max-width:none}
.carbu-station__lieu{color:var(--os);font-weight:700;line-height:1.3}
.carbu-station__meta{display:flex;flex-wrap:wrap;gap:.1rem .9rem;font-size:.88rem}
.carbu-station__km{font-family:var(--f-plaque);font-size:.8rem;color:var(--laiton-clair)}
.carbu-station__badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0 !important}
.carbu-badge{font-family:var(--f-plaque);font-size:.62rem;letter-spacing:.06em;
  padding:.15rem .45rem;border:1px solid rgba(176,141,63,.3);border-radius:2px;color:var(--os-doux)}
.carbu-badge--vieux{color:var(--rouge-vif);border-color:currentColor}

.carbu-trajet{display:flex;flex-wrap:wrap;gap:.5rem}
.carbu-go{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
  font-family:var(--f-plaque);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--os);background:var(--cuir-3);border:1px solid rgba(176,141,63,.38);border-radius:var(--rayon);
}
.carbu-go:hover{border-color:var(--laiton-clair);color:var(--os);text-decoration:none}
.carbu-go--grand{min-height:48px;background:linear-gradient(178deg,var(--bleu-haut),var(--bleu) 60%,#0A2350)}

.carbu__memo,.carbu__source{font-size:.82rem;color:var(--os-faible);margin:1rem 0 0;max-width:none}
.carbu__source{margin-top:.4rem}
.carbu__source a{color:var(--os-doux)}
.carbu__lien{background:none;border:0;padding:0;font:inherit;color:var(--laiton-clair);
  text-decoration:underline;cursor:pointer}

/* Carte : fond IGN assombri pour épouser le cuir, marqueurs en plaques */
.carbu__carte .leaflet-tile-pane{filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.95) contrast(.95)}
.carbu__carte.leaflet-container{background:var(--cuir-2);font-family:var(--f-corps)}
.carbu__carte .leaflet-bar a{background:var(--cuir-3);color:var(--os);border-color:rgba(176,141,63,.3)}
.carbu__carte .leaflet-bar a:hover{background:var(--bleu)}
.carbu__carte .leaflet-control-attribution{background:rgba(12,12,14,.8);color:var(--os-faible)}
.carbu__carte .leaflet-control-attribution a{color:var(--os-doux)}
.carbu-pin{
  position:absolute;transform:translate(-50%,-100%);white-space:nowrap;
  padding:.18rem .42rem;border-radius:2px;
  font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1.2;color:var(--os);
  background:var(--bleu);border:1px solid rgba(217,188,114,.6);box-shadow:0 3px 8px rgba(0,0,0,.6);
}
.carbu-pin::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;
  border:5px solid transparent;border-bottom:0;border-top-color:rgba(217,188,114,.8)}
.carbu-pin--top{background:var(--rouge);border-color:#fff;font-size:15px;z-index:2}
.carbu-pin--actif{outline:2px solid var(--os);outline-offset:2px}
.carbu-moi{border-radius:50%;background:var(--bleu-vif);border:3px solid var(--os);
  box-shadow:0 0 0 5px rgba(46,111,196,.3)}
.carbu-cercle{stroke:var(--laiton-clair);stroke-width:1.5;fill:var(--bleu-vif);fill-opacity:.06}

/* Adhésion */
.carbu-cotisation{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;
  margin:1.6rem 0 1.2rem;padding:1rem 1.2rem;border-left:4px solid var(--rouge);background:rgba(0,0,0,.3)}
.carbu-cotisation p{margin:0}
.carbu-cotisation__prix{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  color:var(--os);font-size:1.1rem;letter-spacing:.06em}
.carbu-cotisation__prix span{font-size:2.6rem;letter-spacing:0;color:var(--os)}
.carbu-cotisation__equivalent{font-size:.95rem}
.carbu-note{margin-top:1.4rem;font-size:.95rem}

.carbu-etapes li{margin-bottom:1.2em}

/* Entrée de navigation de l'outil */
.nav a[href="carburant.html"]{color:var(--os);border:1px solid rgba(224,58,68,.55)}
.nav a[href="carburant.html"]:hover{background:rgba(200,32,46,.2)}

@media (max-width:900px){
  .carbu__vues{display:flex;margin:0 0 .8rem;border:1px solid rgba(176,141,63,.4);border-radius:var(--rayon);overflow:hidden}
  .carbu__vues button{flex:1;min-height:48px;border:0;background:var(--cuir);color:var(--os-doux);
    font-family:var(--f-plaque);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .carbu__vues button[aria-pressed="true"]{background:linear-gradient(178deg,var(--bleu-haut),var(--bleu) 60%,#0A2350);color:var(--os)}
  .carbu__corps{grid-template-columns:1fr}
  .carbu__resume{
    display:flex;align-items:center;gap:.8rem;min-height:48px;margin-top:.8rem;padding:0 1rem;
    list-style:none;cursor:pointer;background:var(--cuir);
    border:1px solid rgba(176,141,63,.4);border-radius:var(--rayon);
    font-family:var(--f-plaque);font-size:.74rem;letter-spacing:.05em;color:var(--os);
  }
  .carbu__resume::-webkit-details-marker{display:none}
  .carbu__resume::after{content:"";margin-left:auto;width:.5rem;height:.5rem;
    border-right:2px solid var(--laiton-clair);border-bottom:2px solid var(--laiton-clair);
    transform:rotate(45deg);transition:transform var(--tr)}
  .carbu__reglages-zone[open] .carbu__resume::after{transform:rotate(-135deg)}
  .carbu__resume-titre{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--os-faible)}
  .carbu__liste{max-height:none;overflow:visible;padding-right:0}
  .carbu__carte{height:68vh;min-height:360px}
  .carbu__corps[data-vue="liste"] .carbu__carte-zone{display:none}
  .carbu__corps[data-vue="carte"] .carbu__liste{display:none}
  .carbu__recherche .carbu__geo{flex:1 1 100%;justify-content:center}
}
@media (max-width:620px){
  .carbu{padding:.75rem}
  .carbu__reglages{gap:.8rem 1rem}
  .carbu__segments label{padding:0 .7rem;font-size:.72rem}
  .carbu-vedette .totem{grid-column:1 / -1;justify-self:start}
  .totem__e{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){.carbu--charge .carbu__etat::after{animation:none}}
@media print{.carbu__carte-zone,.carbu__reglages,.carbu__recherche,.carbu__vues{display:none}}

/* ===================== 24. ILLUSTRATION DE TRIBUNE =======================
   Photographie pleine largeur d'un texte long, avec sa légende. Utilisée
   par la page « Terre, liberté, souveraineté ». */
.illustration{
  margin:1.8rem 0 0;
  border:1px solid rgba(176,141,63,.3);
  border-radius:var(--rayon);
  overflow:hidden;
  background:var(--cuir-2);
}
.illustration img{
  display:block;width:100%;height:auto;
  border-bottom:1px solid rgba(176,141,63,.24);
}
.illustration figcaption{
  padding:.85rem 1rem 1rem;
  font-size:.85rem;line-height:1.55;color:var(--os-doux);
}

/* ================= 25. MEMBRES : FICHE ET ADMINISTRATION ================
   Fiche personnelle (espace-membre.php) et gestion des membres (admin.php).
   Aucun style n'est propre à l'administration : elle emprunte le vocabulaire
   du reste du site, pour que le bureau travaille dans la même maison. */
.champ--case{
  display:flex;align-items:flex-start;gap:.7rem;
  max-width:640px;margin-bottom:1.15rem;
}
.champ--case input[type="checkbox"]{
  width:1.15rem;height:1.15rem;margin-top:.2rem;flex:none;accent-color:var(--rouge);
}
.champ--case label{font-size:.98rem;line-height:1.5;color:var(--os-doux)}
.champ input[type="file"]{padding:.6rem}

.membre{
  margin:1.4rem 0;padding:1.3rem 1.4rem 1.5rem;
  background:var(--cuir-2);
  border:1px solid rgba(176,141,63,.3);
  border-left:4px solid var(--bleu-vif);
  border-radius:var(--rayon);
}
.membre--expire{border-left-color:var(--rouge)}
.membre h3{margin:0 0 .5rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline}
.membre__ref{
  font-family:var(--f-plaque);font-size:.7rem;letter-spacing:.14em;
  color:var(--laiton-clair);
}
.membre .partage__url{margin-top:.9rem}
.ligne-actions{margin-top:1rem}
.ligne-actions .champ{max-width:230px}
.recherche-membres{margin:1.4rem 0}
.bouton--rouge{
  background:linear-gradient(178deg,#7E1620,#5A0F17 70%);
  border-color:rgba(200,32,46,.6);
}
.fiche-membre{
  margin-top:1rem;padding:.8rem 1rem;
  background:var(--cuir-3);border-radius:var(--rayon);
}
.fiche-membre summary{cursor:pointer;color:var(--laiton-clair);font-weight:700}
.fiche-membre__photo{
  max-width:100%;height:auto;border-radius:var(--rayon);
  border:1px solid rgba(176,141,63,.35);
}

/* ================= 26. GESTION DES ADHÉRENTS ============================
   Tableau de bord du bureau : liste, fiche, création. Le vocabulaire reste
   celui du site — plaque émaillée et cuir — pour que le bureau travaille
   dans la même maison que les visiteurs. */

/* Compteurs de tête : l'état de la base en un coup d'œil. */
.compteurs{
  display:flex;flex-wrap:wrap;gap:.9rem;
  list-style:none;margin:1.3rem 0 1.6rem;padding:0;
}
.compteurs li{
  flex:1 1 130px;
  padding:.85rem 1rem;
  background:var(--cuir-2);
  border:1px solid rgba(176,141,63,.3);
  border-radius:var(--rayon);
}
.compteurs b{
  display:block;font-family:var(--f-titre,inherit);
  font-size:1.9rem;line-height:1.1;color:var(--laiton-clair);
}
.compteurs span{
  display:block;margin-top:.15rem;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--os-faible);
}

/* Barre de recherche et de filtres. */
.recherche-membres{
  display:flex;flex-wrap:wrap;gap:1rem 1.2rem;align-items:flex-end;
  margin:1.4rem 0 1.8rem;
}
.recherche-membres .champ{margin-bottom:0;min-width:190px}
.recherche-membres .actions{margin-top:0}

/* Tableau des adhérents. Il défile horizontalement sur petit écran plutôt
   que de comprimer les colonnes jusqu'à l'illisible. */
.tableau-defilant{overflow-x:auto;margin:1.2rem 0 1.6rem}
.tableau-membres{
  width:100%;min-width:860px;border-collapse:collapse;
  background:var(--cuir-2);
  border:1px solid rgba(176,141,63,.3);
  border-radius:var(--rayon);overflow:hidden;
}
.tableau-membres th,.tableau-membres td{
  padding:.7rem .85rem;text-align:left;font-size:.92rem;
  border-bottom:1px solid rgba(176,141,63,.18);
}
.tableau-membres thead th{
  background:var(--cuir-3);
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--laiton-clair);
}
.tableau-membres tbody tr:hover{background:rgba(176,141,63,.07)}
.tableau-membres tbody tr:last-child td{border-bottom:0}
.tableau-membres a{color:var(--os)}
.tableau-membres .colonne-courriel{max-width:230px;overflow-wrap:anywhere}
.ligne--echue td:first-child{box-shadow:inset 3px 0 0 var(--rouge)}

.etat{
  display:inline-block;padding:.2rem .55rem;border-radius:999px;
  font-size:.8rem;white-space:nowrap;
}
.etat--actif{background:rgba(46,111,196,.18);color:#9ec4f2}
.etat--echu{background:rgba(200,32,46,.18);color:#f2a1a7}

.pastille{
  display:inline-block;margin-left:.4rem;padding:.1rem .45rem;
  border-radius:999px;background:rgba(176,141,63,.22);
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--laiton-clair);
}

.bouton--mini{padding:.3rem .7rem;font-size:.8rem}

/* Formulaires de fiche : deux colonnes sur grand écran, une sur petit. */
.grille-champs{
  display:grid;gap:0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1.1rem;
}
.grille-champs .champ{max-width:none}
.grille-champs .champ--large{grid-column:1/-1}

.fil{margin:0 0 .8rem;font-size:.9rem}
.titre__ref{
  font-family:var(--f-plaque);font-size:.85rem;letter-spacing:.14em;
  color:var(--laiton-clair);
}
.en-ligne{display:inline}

/* Aperçu de la carte de membre, dans la fiche. */
.apercu-carte{margin:1.1rem 0 1.3rem}
.apercu-carte img{
  display:block;width:100%;max-width:620px;height:auto;
  border-radius:var(--rayon);
  border:1px solid rgba(176,141,63,.35);
}
.apercu-carte figcaption{
  margin-top:.5rem;font-size:.85rem;color:var(--os-faible);
}

.fiche-perso{
  margin-top:1rem;padding:1rem 1.2rem;
  background:var(--cuir-3);border-radius:var(--rayon);
}
.fiche-perso .fiche-membre__photo{margin-bottom:1rem}

@media (max-width:620px){
  .compteurs li{flex-basis:calc(50% - .5rem)}
  .recherche-membres .champ{min-width:100%}
}

/* La référence de session ne se coupe jamais au milieu. */
.statut strong{white-space:nowrap}

/* =========================================================================
   40. BIBLIOTHÈQUE DES MEMBRES — fiches de documents téléchargeables
   Chaque publication du bureau national est présentée par une fiche :
   son titre, sa date d'arrêté, son format, son poids, et le lien de
   téléchargement. Rien de décoratif : on doit savoir ce qu'on télécharge
   avant de cliquer.
   ========================================================================= */
.doc-fiche{
  border:1px solid rgba(176,141,63,.34);
  border-left:5px solid var(--laiton);
  border-radius:var(--rayon);
  background:linear-gradient(170deg,rgba(176,141,63,.11),rgba(176,141,63,.02));
  padding:1.35rem 1.6rem 1.25rem;
  margin:1.6rem 0 2rem;
}
.doc-fiche__type{
  display:inline-block;
  font-family:var(--f-plaque);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cuir-1,#0C0C0E);
  background:var(--laiton-clair);
  padding:.26em .7em;border-radius:3px;margin-bottom:.9rem;
}
.doc-fiche h3{margin:0 0 .45em;font-size:1.22rem;line-height:1.25}
.doc-fiche__meta{
  font-family:var(--f-plaque);font-size:.76rem;letter-spacing:.04em;
  color:var(--os-doux);margin:0 0 1em;
}
.doc-fiche__meta b{color:var(--laiton-clair);font-weight:400}
.doc-fiche p{font-size:.95rem;margin-bottom:.8em}
.doc-fiche p:last-of-type{margin-bottom:1.1em}

/* =========================================================================
   41. MATRICE DES CONVERGENCES — lecture par sujet, jamais par camp
   Tableau dense : il défile horizontalement sur petit écran plutôt que de
   se replier en colonnes illisibles. Les symboles sont doublés d'un texte
   lu par les synthèses vocales.
   ========================================================================= */
.matrice{
  width:100%;min-width:780px;border-collapse:collapse;
  background:var(--cuir-2);
  border:1px solid rgba(176,141,63,.3);
  font-size:.88rem;
}
.matrice th,.matrice td{
  padding:.55rem .5rem;border-bottom:1px solid rgba(176,141,63,.16);
}
.matrice thead th{
  background:var(--cuir-3);
  font-family:var(--f-plaque);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--os-doux);
  font-weight:400;text-align:center;vertical-align:bottom;
  padding:.8rem .4rem;
}
.matrice tbody th{
  text-align:left;font-weight:700;font-size:.9rem;color:var(--os);
  white-space:nowrap;padding-left:.85rem;
}
.matrice td{text-align:center}
.matrice tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
.matrice tr.matrice--ecarte tbody th,
.matrice tbody tr.matrice--ecarte th{
  border-left:4px solid var(--rouge);padding-left:.6rem;
}
.ic{
  display:inline-block;width:1.05em;height:1.05em;border-radius:50%;
  vertical-align:-.15em;border:1.5px solid var(--os-faible);
}
.ic--net{background:#1E8449;border-color:#1E8449}
.ic--part{
  background:linear-gradient(90deg,var(--laiton-clair) 50%,transparent 50%);
  border-color:var(--laiton-clair);
}
.ic--non{background:transparent}
.ic--contre{
  border:0;border-radius:0;width:auto;height:auto;
  color:var(--rouge-vif);font-weight:700;font-size:1.4em;line-height:.8;
}
.ic--contre::before{content:"\00D7"}
.legende-ic{
  list-style:none;padding:0;margin:1rem 0 0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;
  font-size:.85rem;color:var(--os-doux);
}
.legende-ic li{display:flex;align-items:center;gap:.5em}

/* =========================================================================
   42. MODÈLES DE COURRIELS — le membre écrit lui-même à son élu
   Le texte est visible, sélectionnable et copiable d'un bouton. Il n'est
   jamais caché : un membre doit pouvoir lire ce qu'il s'apprête à envoyer
   en son nom.
   ========================================================================= */
.modele{
  border:1px solid rgba(46,111,196,.42);
  border-top:4px solid var(--bleu-vif);
  border-radius:var(--rayon);
  background:rgba(46,111,196,.06);
  padding:1.3rem 1.5rem 1.4rem;
  margin:1.6rem 0 2.2rem;
}
.modele h3{margin:0 0 .3em;font-size:1.14rem;color:#7FB3F0}
.modele__pour{
  font-family:var(--f-plaque);font-size:.74rem;letter-spacing:.05em;
  color:var(--os-doux);margin:0 0 1em;
}
.modele__texte{
  width:100%;min-height:30rem;resize:vertical;
  font-family:var(--f-plaque);font-size:.83rem;line-height:1.6;
  color:var(--os);background:var(--cuir);
  border:1px solid rgba(176,141,63,.3);border-radius:4px;
  padding:1rem 1.1rem;margin-bottom:.9rem;
}
.modele__texte:focus{outline:2px solid var(--bleu-vif);outline-offset:1px}
.modele .actions{margin-bottom:0}
@media (max-width:640px){
  .modele{padding:1.1rem 1rem 1.2rem}
  .modele__texte{font-size:.78rem;min-height:22rem}
}

/* =========================================================================
   43. ANNONCES DU BUREAU — chaque information datée et signée
   Une annonce se lit comme une dépêche : la date et l'émetteur d'abord, le
   titre ensuite, le chapô en appui. Le filet rouge à gauche marque le début
   d'une information nouvelle dans le fil de la page.
   ========================================================================= */
.annonce{
  border-left:4px solid var(--rouge);
  padding-left:1.5rem;
  margin:0 0 2rem;
}
.annonce__date{
  font-family:var(--f-plaque);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--laiton-clair);
  margin:0 0 .6rem;
}
.annonce h2{margin-top:0}
.annonce .chapo{margin-bottom:1.1em}
@media (max-width:640px){
  .annonce{padding-left:1rem;border-left-width:3px}
}

/* La deuxième ligne d'un intitulé de tableau : la version ou la date d'arrêté
   du document, qui ne doit pas peser autant que son titre. */
.fiche th small{
  display:block;margin-top:.25em;
  font-family:var(--f-plaque);font-size:.76em;letter-spacing:.03em;
  text-transform:none;color:var(--os-faible);
}

/* =========================================================================
   44. CORRECTIONS DE DÉBORDEMENT SUR PETIT ÉCRAN
   Un tableau plus large que l'écran doit défiler DANS sa boîte, pas pousser
   la page entière : sans cela, tout le site se décale vers la droite et le
   lecteur doit balayer chaque paragraphe pour le lire.
   ========================================================================= */
.tableau-defilant{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

/* Les tableaux de fiche portent des intitulés longs. Sur téléphone, on réduit
   les marges intérieures et on autorise la coupure des mots les plus longs
   plutôt que de laisser la colonne forcer la largeur de la page. */
@media (max-width:640px){
  .fiche{font-size:.88rem;table-layout:fixed;width:100%}
  .fiche th,.fiche td{padding:.6rem .45rem;overflow-wrap:anywhere}
  .fiche th{width:40%}
}