/* =========================================================
   f26 — 206 Raid 2027
   Feuille de style principale
   Direction artistique : lumière du désert, sable et or de la 206.
   Très épuré : de l'air, des filets fins, presque pas de blocs.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Fonds — sable clair, volontairement un peu moins jaune que l'or
     pour que la couleur de la voiture ressorte au lieu de s'y fondre. */
  --sable:      #F7F3EA;
  --sable-2:    #F0EADD;
  --papier:     #FFFDF8;

  /* Encres — bruns chauds plutôt que du noir */
  --encre:      #1C1813;
  --encre-2:    #6A6155;
  --encre-3:    #6E6557;

  /* Filets */
  --trait:      #E4DCCB;
  --trait-fort: #CFC2A8;

  /* Or — la couleur de la 206, déclinée en trois intensités.
     --or       : surfaces pleines uniquement (boutons, pastilles),
                  toujours avec du texte sombre par-dessus (7,7:1) ;
     --bronze   : filets, traits et grands chiffres (3,5:1) ;
     --or-fonce : tout le texte et les liens (4,9:1, niveau AA). */
  --or:         #D9A227;
  --or-clair:   #E7B747;
  --bronze:     #A87A16;
  --or-fonce:   #8A6212;
  --or-voile:   #F8EFD5;
  --dune:       #E8CFA3;

  --succes:      #3F7D4E;
  --erreur:      #B4402F;

  /* Typo */
  --font-titre: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --max:        1240px;
  --max-etroit: 780px;
  --gouttiere:  clamp(1.25rem, 5vw, 3rem);
  --section-y:  clamp(4.5rem, 11vw, 9rem);
  --radius:     4px;
  --radius-s:   3px;

  --header-h: 74px;
  --transition: .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--sable);
  color:var(--encre);
  font-family:var(--font-texte);
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* `clip` et non `hidden` : `hidden` transformerait le body en conteneur de
     défilement, ce qui casserait position:sticky (bandeau de la jauge). */
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-titre); font-weight:700; line-height:1.06;
  letter-spacing:-.03em; margin:0 0 .55em; text-wrap:balance;
}
p{ margin:0 0 1.15em; }
ul{ margin:0 0 1.15em; padding-left:1.15em; }
li{ margin-bottom:.45em; }
strong{ font-weight:600; }
::selection{ background:var(--dune); color:var(--encre); }

:focus-visible{ outline:2px solid var(--or-fonce); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--or); color:var(--encre); padding:.9rem 1.4rem; font-weight:600;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Mise en page ---------- */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gouttiere); }
.container--etroit{ max-width:var(--max-etroit); }
.section{ padding-block:var(--section-y); position:relative; }
.section--alt{ background:var(--sable-2); }
.section--ligne{ border-top:1px solid var(--trait); }
.centre{ text-align:center; }

/* Petit label technique, façon feuille de route */
.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-titre); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or-fonce);
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:26px; height:6px; flex:none;
  background:
    linear-gradient(var(--or-fonce) 0 0) 0 0/100% 2px no-repeat,
    linear-gradient(var(--or) 0 0) 0 4px/16px 2px no-repeat;
}
.centre .eyebrow{ justify-content:center; }

.titre-xxl{ font-size:clamp(2.6rem,1.3rem + 5.4vw,6rem); font-weight:800; letter-spacing:-.045em; }
.titre-xl { font-size:clamp(1.95rem,1.3rem + 2.9vw,3.4rem); }
.titre-l  { font-size:clamp(1.45rem,1.2rem + 1.1vw,1.95rem); }
.titre-m  { font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem); font-weight:600; letter-spacing:-.02em; }

.chapeau{
  font-size:clamp(1.05rem,1rem + .4vw,1.28rem); line-height:1.65;
  color:var(--encre-2); max-width:60ch; font-weight:350;
}
.centre .chapeau{ margin-inline:auto; }
.texte-gris{ color:var(--encre-2); }
.or{ color:var(--or-fonce); }

.grille{ display:grid; gap:clamp(1.75rem,4vw,3rem); }
.grille-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); }
/* Paires imposées : toujours deux cartes par ligne, jamais trois.
   En dessous de 760 px, deux colonnes deviendraient illisibles → empilement. */
.grille-paires{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ .grille-paires{ grid-template-columns:1fr; } }

.grille-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.grille-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }

/* Deux colonnes imposées à partir de la tablette, quelle que soit la grille de
   base portée par l'élément (.grille-2, .grille-4…). En dessous de 760 px, cette
   grille de base reprend la main : les cartes s'empilent une par ligne.
   ⚠️ Ce bloc doit rester APRÈS .grille-2/3/4 : à spécificité égale, c'est la
   dernière règle écrite qui l'emporte, et une media query n'y change rien. */
@media (min-width:760px){
  .grille-paires--tablette{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- 4. Boutons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--encre); --btn-bd:var(--trait-fort);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; min-height:50px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--radius);
  font-family:var(--font-titre); font-weight:600; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; line-height:1;
  cursor:pointer; text-align:center;
  transition:background var(--transition), color var(--transition),
             border-color var(--transition), transform .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:none; }
.btn--or{ --btn-bg:var(--or); --btn-fg:var(--encre); --btn-bd:var(--or); }
.btn--or:hover{ --btn-bg:var(--or-clair); --btn-bd:var(--or-clair); }
.btn--fantome:hover{ --btn-bd:var(--bronze); --btn-fg:var(--or-fonce); }
.btn--plein{ width:100%; }
.btn--sm{ padding:.72rem 1.2rem; min-height:42px; font-size:.74rem; }
.btn svg{ width:16px; height:16px; flex:none; fill:currentColor; }

.groupe-btn{ display:flex; flex-wrap:wrap; gap:.85rem; }
.centre .groupe-btn{ justify-content:center; }

.lien-fleche{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--or-fonce); font-weight:550;
  border-bottom:1px solid var(--trait-fort); padding-bottom:2px;
  transition:gap var(--transition), border-color var(--transition);
}
.lien-fleche:hover{ gap:.85rem; border-bottom-color:var(--bronze); }

/* ---------- 5. En-tête ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(247,243,234,.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background var(--transition), border-color var(--transition);
}
.header.est-defile{ background:rgba(247,243,234,.94); border-bottom-color:var(--trait); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }

.logo{ display:inline-flex; align-items:center; }
.logo img{ display:block; width:auto; height:46px; }
.logo--pied img{ height:58px; }
@media (max-width:520px){ .logo img{ height:40px; } }

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  position:relative; padding:.6rem .9rem;
  font-size:.82rem; font-family:var(--font-titre); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre-2);
  transition:color var(--transition);
}
.nav a:hover{ color:var(--encre); }
.nav a[aria-current="page"]{ color:var(--or-fonce); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem;
  height:2px; background:var(--bronze);
}
.header .btn{ margin-left:.7rem; }

.burger{
  display:none; width:46px; height:46px; flex:none;
  background:none; border:1px solid var(--trait-fort); border-radius:var(--radius);
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:13px; right:13px; height:1.5px; background:var(--encre);
  transition:transform var(--transition), opacity .2s ease, top var(--transition);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }

@media (max-width:1020px){
  .burger{ display:block; }
  .header .nav__cta{ display:none; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--sable); border-bottom:1px solid var(--trait);
    padding:.5rem var(--gouttiere) 2.2rem;
    transform:translateY(-110%); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform var(--transition), opacity var(--transition), visibility var(--transition);
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav.est-ouvert{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav a{ padding:1.15rem .1rem; font-size:1rem; border-bottom:1px solid var(--trait); }
  .nav a[aria-current="page"]::after{ display:none; }
  .nav .btn{ margin:1.6rem 0 0; }
  .nav .nav__cta--mobile{ display:inline-flex; }
}
@media (min-width:1021px){ .nav__cta--mobile{ display:none; } }

/* ---------- 6. Hero éditorial ---------- */
.hero{
  padding-top:calc(var(--header-h) + clamp(3.5rem,10vw,7rem));
  padding-bottom:clamp(2.5rem,6vw,4rem);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:70%;
  background:radial-gradient(80% 100% at 75% 0%, rgba(232,207,163,.62), transparent 65%);
  pointer-events:none;
}
.hero__contenu{ position:relative; }
.hero h1{ margin-bottom:1.2rem; max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--bronze); }
.hero .chapeau{ max-width:52ch; margin-bottom:2.2rem; }

.badge-asso{
  display:flex; align-items:flex-start; gap:.7rem; margin:0 0 1.8rem;
  font-family:var(--font-titre); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-2);
}
.badge-asso .puce{ width:7px; height:7px; border-radius:50%; background:var(--or); flex:none; margin-top:.5em; }

/* Bande photo pleine largeur sous le titre */
.hero__bande{ margin:clamp(2.5rem,6vw,4.5rem) 0 0; padding:0; }
.hero__bande picture{ display:block; }
.hero__bande img{
  width:100%; height:clamp(300px,52vh,620px); object-fit:cover; object-position:center 55%;
}
/* Sur écran étroit, une bande haute rognerait l'image 21/9 sur près de trois quarts
   de sa largeur et la voiture disparaîtrait. On suit le rapport de la photo. */
@media (max-width:700px){
  .hero__bande img{ height:auto; aspect-ratio:16/9; object-position:center; }
}
.hero__bande figcaption{
  max-width:var(--max); margin:.9rem auto 0; padding-inline:var(--gouttiere);
  font-family:var(--font-titre); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--encre-3);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between;
}

/* ---------- 7. Compte à rebours ---------- */
.compteur{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.compteur__bloc{
  flex:1 1 0; min-width:78px; padding:clamp(1.1rem,3vw,1.8rem) .5rem; text-align:center;
  border-right:1px solid var(--trait);
}
.compteur__bloc:last-child{ border-right:0; }
.compteur__nb{
  display:block; font-family:var(--font-titre); font-weight:800;
  font-size:clamp(1.9rem,1rem + 3.6vw,3.4rem); line-height:1;
  letter-spacing:-.04em; color:var(--encre); font-variant-numeric:tabular-nums;
}
.compteur__lb{
  display:block; margin-top:.6rem; font-family:var(--font-titre);
  font-size:.62rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--encre-3);
}
.compteur--mini{ border:0; gap:0; }
.compteur--mini .compteur__bloc{ padding:.2rem .5rem .2rem 0; border-right:0; text-align:left; flex:0 0 auto; min-width:0; }
.compteur--mini .compteur__bloc + .compteur__bloc{ padding-left:.9rem; border-left:1px solid var(--trait); }
.compteur--mini .compteur__nb{ font-size:1.35rem; }
.compteur--mini .compteur__lb{ font-size:.55rem; margin-top:.15rem; }

/* ---------- 8. Cartes (sans boîte : filet + air) ---------- */
.carte{
  background:none; border:0; border-top:1px solid var(--trait);
  padding:1.6rem 0 0; height:100%;
  display:flex; flex-direction:column;
}
.carte h3{ margin-bottom:.7rem; }
.carte p:last-of-type{ margin-bottom:1.4rem; }
.carte .btn{ margin-top:auto; align-self:flex-start; }
.carte--or{ border-top:2px solid var(--bronze); }
.carte__num{
  display:block; margin-bottom:1rem;
  font-family:var(--font-titre); font-size:2.6rem; font-weight:800;
  letter-spacing:-.05em; line-height:1; color:var(--dune);
}

.icone{
  width:auto; height:auto; margin-bottom:1.1rem;
  font-size:1.9rem; line-height:1; display:block;
}

.solidaire h3{ font-size:1.12rem; }
.solidaire p{ color:var(--encre-2); font-size:.97rem; margin-bottom:0; }
.centre .solidaire{ text-align:left; }

/* ---------- 9. Média + texte ---------- */
.duo{
  display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
}
.duo--inverse .duo__media{ order:2; }
@media (max-width:820px){ .duo--inverse .duo__media{ order:0; } }
.duo__media{ position:relative; }
.duo__media picture{ display:block; }
.duo__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.duo__media--portrait img{ aspect-ratio:3/4; }
.duo__legende{
  display:block; margin-top:.85rem;
  font-family:var(--font-titre); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--encre-3);
}

/* ---------- 10. Chiffres clés ---------- */
.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  border-top:1px solid var(--trait);
}
.chiffre{
  padding:clamp(1.5rem,3.5vw,2.4rem) 1.4rem clamp(1.5rem,3.5vw,2.4rem) 0;
  border-bottom:1px solid var(--trait);
}
.chiffre__nb{
  display:block; font-family:var(--font-titre); font-weight:800;
  font-size:clamp(2rem,1.2rem + 2.4vw,3rem); line-height:1;
  letter-spacing:-.045em; color:var(--bronze);
}
.chiffre__lb{
  display:block; margin-top:.65rem; font-size:.86rem; color:var(--encre-2); line-height:1.4;
}

/* ---------- 11. Réseaux sociaux ---------- */
.reseaux{ display:flex; flex-wrap:wrap; gap:.6rem; }
.centre .reseaux{ justify-content:center; }
.reseaux a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.15rem; border:1px solid var(--trait-fort); border-radius:var(--radius);
  font-family:var(--font-titre); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2);
  transition:all var(--transition);
}
.reseaux a:hover{ color:var(--or-fonce); border-color:var(--bronze); transform:translateY(-2px); }
.reseaux svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.reseaux--icones a{ padding:.7rem; }

.bandeau-social{ background:var(--or-voile); }

/* ---------- 12. Événements ---------- */
.evenement{
  display:grid; gap:clamp(1rem,3vw,2.5rem); align-items:start;
  grid-template-columns:auto 1fr auto;
  padding:clamp(1.6rem,3.5vw,2.2rem) 0;
  border-top:1px solid var(--trait);
}
.evenement--passe{ opacity:.62; }
.evenement__date{ flex:none; width:88px; }
.evenement__jour{
  display:block; font-family:var(--font-titre); font-weight:800;
  font-size:2.6rem; line-height:.9; letter-spacing:-.05em; color:var(--encre);
}
.evenement--avenir .evenement__jour{ color:var(--bronze); }
.evenement__mois{
  display:block; margin-top:.4rem; font-family:var(--font-titre);
  font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--encre-2);
}
.evenement__annee{ display:block; font-size:.68rem; color:var(--encre-3); margin-top:.1rem; letter-spacing:.1em; }
.evenement h3{ margin-bottom:.5rem; }
.evenement__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:.8rem;
  font-size:.85rem; color:var(--encre-2);
}
.evenement p{ margin-bottom:0; color:var(--encre-2); font-size:.97rem; }
.evenement__action{ flex:none; }
@media (max-width:780px){
  .evenement{ grid-template-columns:auto 1fr; }
  .evenement__action{ grid-column:1 / -1; margin-top:.4rem; }
}

.etiquette{
  display:inline-block; margin-bottom:.7rem;
  font-family:var(--font-titre); font-size:.62rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--or-fonce);
}
.etiquette--passe{ color:var(--encre-3); }
.etiquette::after{ content:""; display:block; width:22px; height:2px; background:currentColor; margin-top:.35rem; }

/* ---------- 13. Partenaires ---------- */
.logos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
  /* 1fr sur les lignes implicites : toutes les cases adoptent la même hauteur,
     y compris d'une ligne à l'autre. */
  grid-auto-rows:1fr;
  border-top:1px solid var(--trait); border-left:1px solid var(--trait);
}
.logo-case{
  /* Pas d'aspect-ratio ici : il figerait la hauteur des cases à une seule ligne
     de texte et les empêcherait de s'aligner sur les plus hautes de la ligne.
     Un min-height donne la proportion, l'étirement de la grille fait le reste. */
  min-height:clamp(130px,11vw,152px);
  display:grid; place-items:center; padding:1.6rem; gap:.4rem;
  border-right:1px solid var(--trait); border-bottom:1px solid var(--trait);
  /* Fond transparent : la case prend la couleur de la section qui l'accueille,
     le logo s'y pose sans rectangle plus clair autour de lui. */
  background:transparent; transition:background var(--transition);
}
/* Au survol, un voile doré : il se voit aussi bien sur fond sable que sur
   fond sable foncé, ce que --sable-2 ne faisait pas sur une section --alt. */
.logo-case:hover{ background:var(--or-voile); }
/* Une case qui porte un vrai logo respire moins : l'image prend la place.
   Le repli (navigateurs sans :has) garde la marge d'origine, le logo reste
   simplement un peu plus petit. */
.logo-case:has(img){ padding:1.1rem; }
.logo-case img{
  /* 104 px : la case est remplie au maximum sans que sa hauteur augmente,
     et les fichiers fournis en 2x restent nets sur écran retina. */
  max-height:104px; max-width:100%; width:auto; height:auto;
  object-fit:contain; filter:grayscale(1); opacity:.7; transition:all var(--transition);
}
.logo-case:hover img{ filter:none; opacity:1; }
.logo-case--vide{
  background:none; color:var(--encre-3);
  font-family:var(--font-titre); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-align:center;
}
.logo-case--vide:hover{ background:var(--or-voile); color:var(--or-fonce); }

.niveau{
  display:block; margin-bottom:.8rem;
  font-family:var(--font-titre); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--or-fonce);
}

.mur-heros{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; padding:0; }
.mur-heros li{ list-style:none; margin:0; }
.mur-heros span{
  display:inline-block; padding:.45rem .95rem;
  border:1px solid var(--trait-fort); border-radius:999px;
  font-size:.88rem; color:var(--encre-2);
  transition:all var(--transition);
}
.mur-heros span:hover{ border-color:var(--bronze); color:var(--or-fonce); }

/* ---------- 14. Formulaire ---------- */
.form{ display:grid; gap:1.3rem; }
.champ{ display:grid; gap:.4rem; }
.champ label{
  font-family:var(--font-titre); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2);
}
.champ label .requis{ color:var(--bronze); }
.champ input, .champ select, .champ textarea{
  width:100%; padding:.85rem 0; min-height:48px;
  background:none; border:0; border-bottom:1px solid var(--trait-fort);
  border-radius:0; color:var(--encre); font-size:1.02rem;
  transition:border-color var(--transition);
}
.champ textarea{ min-height:140px; resize:vertical; line-height:1.65; }
.champ select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6155' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center; background-size:17px; padding-right:2.2rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{ border-bottom-color:var(--or-fonce); outline:none; }
.champ input::placeholder, .champ textarea::placeholder{ color:var(--encre-3); }
.champ--2{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.champ--rgpd{ display:flex; align-items:flex-start; gap:.75rem; font-size:.86rem; color:var(--encre-2); }
.champ--rgpd input{ width:19px; height:19px; min-height:0; flex:none; margin-top:.3rem; accent-color:var(--or-fonce); padding:0; border:0; }
.champ--rgpd a{ color:var(--or-fonce); border-bottom:1px solid var(--trait-fort); }
.pot-de-miel{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.form__message{ padding:1rem 1.2rem; border-radius:var(--radius); font-size:.95rem; display:none; }
.form__message.est-visible{ display:block; }
.form__message--ok{ background:#E7F0E8; border-left:3px solid var(--succes); color:#2C5C38; }
.form__message--ko{ background:#F8E6E2; border-left:3px solid var(--erreur); color:#8C2E20; }

/* Champ signale en erreur par la validation du formulaire.
   Le message seul ne suffit pas : il est en haut du formulaire, le champ
   fautif peut etre bien plus bas. On marque donc les deux. */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"]{ border-bottom-color:var(--erreur); }
.champ--rgpd:has(input[aria-invalid="true"]){ color:var(--erreur); }
.champ--rgpd input[aria-invalid="true"]{ outline:2px solid var(--erreur); outline-offset:3px; }

/* Question anti-robot */
.captcha__enonce{ margin:0; font-size:.95rem; font-weight:500; color:var(--encre); }
.captcha__ligne{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.captcha__ligne input{ flex:1 1 130px; min-width:0; }
.captcha__rejouer{
  flex:none; border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--font-titre); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--or-fonce);
  border-bottom:1px solid var(--trait-fort);
}
.captcha__rejouer:hover{ border-bottom-color:var(--or-fonce); }
.captcha__enonce--ko{ color:var(--erreur); }

.contact-direct{ display:grid; gap:2.2rem; }
.contact-direct a{ color:var(--or-fonce); border-bottom:1px solid var(--trait-fort); }
.contact-direct a:hover{ border-bottom-color:var(--bronze); }

/* ---------- 15. Bloc CTA ---------- */
.cta-final{
  border-top:2px solid var(--bronze);
  padding:clamp(2.5rem,6vw,4rem) 0 0; text-align:center;
}
.cta-final h2{ margin-bottom:.9rem; }
.cta-final .chapeau{ margin:0 auto 2rem; }
.cta-final .eyebrow{ justify-content:center; }
.cta-final .groupe-btn{ justify-content:center; }

/* ---------- 16. Pied de page ---------- */
.footer{ background:var(--sable-2); border-top:1px solid var(--trait); padding-top:clamp(3.5rem,8vw,5.5rem); }
.footer__grille{ display:grid; gap:2.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.footer h4{
  font-family:var(--font-titre); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3); margin-bottom:1.2rem;
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:.6rem; }
.footer a{ color:var(--encre-2); font-size:.93rem; transition:color var(--transition); }
.footer a:hover{ color:var(--or-fonce); }
.footer__bas{
  margin-top:clamp(3rem,7vw,4.5rem); padding-block:1.6rem; border-top:1px solid var(--trait);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--encre-3);
}
.footer__bas a{ font-size:.8rem; }

/* ---------- 17. En-tête de page intérieure ---------- */
.entete-page{
  padding-top:calc(var(--header-h) + clamp(3.5rem,9vw,6.5rem));
  padding-bottom:clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--trait);
  position:relative; overflow:hidden;
}
.entete-page::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 88% 0%, rgba(232,207,163,.5), transparent 62%);
  pointer-events:none;
}
.entete-page > .container{ position:relative; }
.entete-page h1{ margin-bottom:1rem; max-width:18ch; }

.fil{
  display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin-bottom:1.5rem;
  font-family:var(--font-titre); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--encre-3);
}
.fil li{ margin:0; }
.fil li+li::before{ content:"—"; margin-right:.4rem; }
.fil a:hover{ color:var(--or-fonce); }

/* ---------- 18. Apparition au défilement ---------- */
.apparait{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.apparait.est-visible{ opacity:1; transform:none; }
.apparait[data-delai="1"]{ transition-delay:.1s; }
.apparait[data-delai="2"]{ transition-delay:.2s; }
.apparait[data-delai="3"]{ transition-delay:.3s; }
.apparait[data-delai="4"]{ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .apparait{ opacity:1; transform:none; }
}

/* ---------- 19. Divers ---------- */
.liste-check{ list-style:none; padding:0; }
.liste-check li{ position:relative; padding-left:1.5rem; margin-bottom:.65rem; color:var(--encre-2); }
.liste-check li::before{
  content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--bronze);
}

.citation{
  margin:2rem 0; padding:0; border:0;
  font-family:var(--font-titre); font-weight:500;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.8rem); line-height:1.35;
  letter-spacing:-.025em; color:var(--encre);
}
.citation::before{ content:""; display:block; width:38px; height:2px; background:var(--bronze); margin-bottom:1.2rem; }

.galerie{ display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--trait); }
.galerie > picture{ display:block; min-width:0; }
.galerie img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:opacity var(--transition); }
.galerie img:hover{ opacity:.85; }
@media (max-width:760px){
  .galerie{ grid-template-columns:1fr; }
  .galerie img{ aspect-ratio:3/2; }
}

.notice{
  border-left:2px solid var(--bronze); padding:.2rem 0 .2rem 1.4rem;
  font-size:.94rem; color:var(--encre-2);
}
.notice p:last-child{ margin-bottom:0; }

/* ---------- 20. Itinéraire ---------- */
.etapes{
  display:grid; gap:0; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));
  border-top:1px solid var(--trait); border-left:1px solid var(--trait);
}
.etape{
  margin:0; padding:1.1rem 1.2rem;
  border-right:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.etape b{
  display:block; margin-bottom:.35rem;
  font-family:var(--font-titre); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3);
}
.etape span{ display:block; font-size:.95rem; color:var(--encre-2); line-height:1.4; }
.etape--fort{ background:var(--or-voile); }
.etape--fort b{ color:var(--or-fonce); }
.etape--fort span{ color:var(--encre); font-weight:500; }

/* ---------- 21. Tableaux ---------- */
.tableau-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tableau{ width:100%; border-collapse:collapse; font-size:.96rem; min-width:300px; }
.tableau th, .tableau td{ text-align:left; padding:.95rem 0; border-bottom:1px solid var(--trait); }
.tableau th{
  font-family:var(--font-titre); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3);
}
.tableau td{ color:var(--encre-2); padding-right:1rem; }
.tableau__detail{
  display:block; margin-top:.35rem; font-size:.82rem; line-height:1.55;
  color:var(--encre-3); max-width:46ch;
}
.tableau td:last-child, .tableau th:last-child{
  text-align:right; white-space:nowrap; padding-right:0;
  font-variant-numeric:tabular-nums; color:var(--encre); font-weight:500;
}
.tableau tfoot td{
  font-family:var(--font-titre); font-weight:700; font-size:1.05rem;
  color:var(--or-fonce); border-bottom:0; border-top:2px solid var(--bronze);
}

/* ---------- 22. Source officielle ---------- */
.source{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  margin-top:1.4rem; font-size:.78rem; color:var(--encre-3);
}
.source a{ color:var(--or-fonce); border-bottom:1px solid var(--trait-fort); }
.source a:hover{ border-bottom-color:var(--bronze); }

/* ---------- 23. Jauge de collecte (bandeau collant) ---------- */

/* Hauteur réservée du bandeau : sert à décaler les ancres (#sponsoring…)
   pour qu'elles n'atterrissent pas sous la barre. */
/* Valeurs relevées au navigateur : 81px à 1440, 79 à 1200, 69 à 700,
   67 de 430 à 600, et 90 à 320 où l'en-tête de la jauge passe à la ligne. */
:root{ --jauge-h: 84px; }
@media (max-width:700px){ :root{ --jauge-h: 72px; } }
@media (max-width:360px){ :root{ --jauge-h: 94px; } }

.jauge-bandeau{
  position:sticky; top:var(--header-h); z-index:90;
  margin-top:var(--header-h);          /* le bandeau démarre sous l'en-tête fixe */
  padding-block:.85rem;
  background:rgba(247,243,234,.94);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--trait);
}

/* La page qui porte le bandeau n'a plus besoin de compenser l'en-tête fixe. */
.jauge-bandeau + .entete-page{ padding-top:clamp(2.2rem,6vw,4rem); }

/* Les ancres internes tiennent compte de l'en-tête ET du bandeau. */
html:has(.jauge-bandeau){ scroll-padding-top:calc(var(--header-h) + var(--jauge-h) + 16px); }

.jauge{ margin:0; max-width:none; }   /* pleine largeur, desktop comme mobile */

.jauge__tete{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.25rem 1.5rem; margin-bottom:.6rem;
}
.jauge__titre{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; }
.jauge__titre strong{
  font-family:var(--font-titre); font-weight:800;
  font-size:clamp(1.35rem,1.05rem + 1vw,1.95rem); line-height:1;
  letter-spacing:-.045em; color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.jauge__titre > span{ font-size:.88rem; color:var(--encre-2); }
.jauge__titre > span span{ color:var(--encre); font-weight:500; white-space:nowrap; }

.jauge__restant, .jauge__pourcent{
  margin:0; font-family:var(--font-titre); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--or-fonce);
  font-variant-numeric:tabular-nums;
}
.jauge__restant{ margin-inline-start:auto; }

.jauge__piste{
  position:relative; height:11px; width:100%;
  background:var(--papier); border:1px solid var(--trait-fort);
  border-radius:999px; overflow:hidden;
}
.jauge__remplissage{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--or) 0%, var(--bronze) 100%);
  transition:width 1.4s cubic-bezier(.22,.61,.36,1);
}
.jauge--atteint .jauge__remplissage{ background:var(--bronze); }

/* Écrans étroits : on retire le « il reste X », l'essentiel tient sur une ligne. */
@media (max-width:700px){
  .jauge-bandeau{ padding-block:.7rem; }
  .jauge__restant{ display:none; }
  .jauge__tete{ margin-bottom:.5rem; }
}