@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* site-02-refonte — EN
   Genere par build/rendu-refonte.mjs. Ne pas modifier a la main.
   Les jetons sont dans /css/tokens.css et portent les noms des variables
   Figma. Un palier typographique unique sous 768 px (rampe v2/sm). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* L'en-tete est collante au-dessus de 1024 px : sans cette marge, une ancre
   amene le titre de section SOUS l'en-tete. */
:target,[id]{scroll-margin-top:160px}
body{
  margin:0;
  background:var(--v2-surface);
  color:var(--v2-texte);
  font-family:var(--v2-police-courante);
  font-size:var(--v2-corps);
  line-height:var(--v2-interligne);
  overflow-wrap:break-word;
}
img{max-width:100%;display:block;height:auto}
picture{display:contents}
h1,h2,h3,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--v2-turquoise)}

.colonne{width:min(100% - 2 * var(--v2-espace-24), var(--v2-colonne));margin-inline:auto}

/* Le focus est visible partout, y compris sur le bouton primaire : le
   contour est pose a l'exterieur et double d'un lisere blanc pour rester
   lisible sur un fond colore. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--v2-focus);
  outline-offset:3px;
  border-radius:var(--v2-rayon-sm);
}
.bouton:focus-visible{box-shadow:0 0 0 3px var(--v2-surface)}
/* --v2-focus tombe a 2,38:1 sur --v2-surface-contraste : sur cette surface
   le contour passe au blanc, qui y est a 14,71:1. */
.urgence :focus-visible{outline-color:var(--v2-surface)}

.evitement{
  position:fixed;left:var(--v2-espace-16);top:var(--v2-espace-16);z-index:100;
  padding:var(--v2-espace-12) var(--v2-espace-16);
  background:var(--v2-texte);color:var(--v2-surface);
  text-decoration:none;border-radius:var(--v2-rayon-sm);
  transform:translateY(-400%);
}
.evitement:focus{transform:translateY(0)}

/* ---------------- boutons ---------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--v2-espace-8);
  min-height:var(--v2-cible);padding:0 var(--v2-espace-24);
  font:inherit;font-weight:600;text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:var(--v2-rayon);cursor:pointer;
}
/* Blanc sur --v2-turquoise : 5,06:1. */
.bouton--primaire{background:var(--v2-turquoise);color:var(--v2-surface)}
.bouton--primaire:hover{background:#016268}
/* --v2-turquoise sur blanc : 5,06:1. */
.bouton--secondaire{background:var(--v2-surface);color:var(--v2-turquoise);border-color:currentColor}
.bouton--secondaire:hover{background:#EAF4F4}
/* Blanc sur --v2-surface-contraste : 14,71:1. */
.bouton--contraste{background:var(--v2-surface);color:#06313B;border-color:var(--v2-surface)}

/* ---------------- en-tete ---------------- */
.entete{position:sticky;top:0;z-index:40;background:var(--v2-surface);
  border-bottom:1px solid var(--v2-bordure)}
.entete__haut{display:flex;align-items:center;gap:var(--v2-espace-16);
  padding-block:var(--v2-espace-12);flex-wrap:wrap}
/* Le logo est cliquable et ramene a la racine. */
.entete__logo{flex:0 0 auto;display:inline-flex;padding:var(--v2-espace-4)}
.entete__logo img{width:220px;height:auto}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:var(--v2-espace-8);flex-wrap:wrap}
/* Le telephone est un vrai lien tel:. */
/* gap, et non l'espace du balisage : en inline-flex le <span> et le numero sont
   deux elements flex, et l'espace blanc qui les separe est supprime au rendu. */
.entete__tel{display:inline-flex;align-items:center;gap:.25em;
  min-height:var(--v2-cible);
  padding-inline:var(--v2-espace-12);
  font-family:var(--v2-police-titre);font-weight:800;color:var(--v2-turquoise);
  text-decoration:none;letter-spacing:.2px}
.entete__tel:hover{text-decoration:underline}
/* Le selecteur de langue est un vrai lien, avec hreflang et lang. */
.langue{display:inline-flex;align-items:center;min-height:var(--v2-cible);
  padding-inline:var(--v2-espace-12);border:1px solid var(--v2-bordure);
  border-radius:var(--v2-rayon-sm);color:var(--v2-texte);text-decoration:none;
  font-size:var(--v2-petit);font-weight:600}
.langue:hover{border-color:var(--v2-turquoise);color:var(--v2-turquoise)}

.nav{border-top:1px solid var(--v2-bordure)}
.nav__liste{display:flex;flex-wrap:wrap;gap:var(--v2-espace-4)}
.nav__liste a{display:inline-flex;align-items:center;min-height:var(--v2-cible);
  padding-inline:var(--v2-espace-16);color:var(--v2-texte);text-decoration:none;
  font-size:var(--v2-petit);font-weight:600;border-bottom:3px solid transparent}
.nav__liste a:hover{color:var(--v2-turquoise)}
.nav__liste a[aria-current=page]{color:var(--v2-turquoise);border-bottom-color:currentColor}

.menu-bouton{display:none;align-items:center;gap:var(--v2-espace-8);
  min-height:var(--v2-cible);padding-inline:var(--v2-espace-16);
  background:none;border:1px solid var(--v2-bordure);border-radius:var(--v2-rayon-sm);
  font:inherit;font-size:var(--v2-petit);font-weight:600;color:var(--v2-texte);cursor:pointer}

/* ---------------- barre d'action fixe ---------------- */
/* Sous 1024 px l'en-tete n'est plus collante — a cette hauteur elle mangerait
   un tiers de l'ecran. Sans relais, le rendez-vous disparaissait des le
   premier ecran franchi. La barre prend le relais, en bas, hors du flux. */
.barre-action{display:none}
@media (max-width: 1023px){
  .entete{position:static}
  .barre-action{
    display:flex;gap:var(--v2-espace-8);
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:var(--v2-espace-8) var(--v2-espace-16);
    padding-bottom:calc(var(--v2-espace-8) + env(safe-area-inset-bottom, 0px));
    background:var(--v2-surface);border-top:1px solid var(--v2-bordure);
  }
  /* Les deux boutons tiennent sur UNE ligne, sinon la barre double de
     hauteur et recouvre la fin du pied de page. */
  .barre-action .bouton{flex:1 1 0;min-width:0;padding-inline:var(--v2-espace-12);
    font-size:var(--v2-petit);white-space:nowrap}
  .barre-action .cta-court{display:none}
}
/* Sous 480 px, les deux libelles longs ne tiennent plus cote a cote : en
   nowrap ils depassaient la fenetre de 16 px et le bouton d'appel etait
   rogne a droite. La barre bascule sur les libelles courts plutot que de
   passer sur deux lignes, ce qui recouvrirait la fin du pied de page. */
@media (max-width: 479px){
  .barre-action .cta-long{display:none}
  .barre-action .cta-court{display:inline}
  /* La barre ne doit jamais recouvrir la fin du pied de page. */
  body{padding-bottom:calc(var(--v2-cible) + var(--v2-espace-24))}
  :target,[id]{scroll-margin-top:var(--v2-espace-16)}
  /* L'appel a l'action est dans la barre fixe des que celle-ci existe : le
     repeter dans l'en-tete ferait deux boutons identiques sur le premier
     ecran, dont l'un disparait au premier defilement. */
  .entete__actions > .bouton{display:none}
}

/* ---------------- rail d'ancres ---------------- */
/* Il suit l'ordre des sections et couvre les six memes destinations que la
   navigation principale. Il est « position:fixed » : il survole la bande
   photo et les quatre diapositives du heros, dont la luminance change toutes
   les 1,9 s. Il porte donc SA PROPRE SURFACE OPAQUE — les pastilles ne
   reposent que sur du blanc, ou leurs ratios sont mesures : 7,19:1 inactive,
   5,06:1 active, 3,71:1 pour le contour.
   Il reste hors du parcours clavier et aria-hidden : il duplique a 100 % une
   navigation qui, elle, existe a toutes les largeurs. */
.rail{position:fixed;right:var(--v2-espace-16);top:50%;transform:translateY(-50%);
  z-index:30;display:grid;gap:var(--v2-espace-4);
  background:var(--v2-surface);border:1px solid var(--v2-bordure);
  border-radius:999px;padding:var(--v2-espace-8) var(--v2-espace-4);
  box-shadow:var(--v2-ombre)}
.rail a{display:flex;align-items:center;justify-content:center;
  width:var(--v2-cible);height:var(--v2-cible);color:var(--v2-texte-doux);
  text-decoration:none}
.rail a::before{content:"";width:10px;height:10px;border-radius:50%;
  border:2px solid currentColor;background:transparent}
.rail a:hover::before,.rail a[aria-current=true]::before{background:var(--v2-turquoise);border-color:var(--v2-turquoise)}

/* ---------------- heros : SCINDE ---------------- */
/* references/images.md : un heros pleine largeur impose un cadre d'environ
   2,2:1, et SOUS 1,45:1 on bascule en heros scinde, photo a cote du texte.
   La diapositive 1 est a 1,2632 — tres en dessous. En pleine largeur elle ne
   montrait que 54,3 % d'elle-meme a 1440 : d'une photo de visage il ne
   restait qu'une bouche et un menton.
   Les quatre diapositives (1,2632 / 1,5 / 1,5 / 2,066) partagent un cadre
   unique a 3/2 : 84,2 % / 100 % / 100 % / 72,7 % de part visible. Toutes
   au-dessus du seuil de 60 %.
   La maquette montrait encore un heros pleine largeur : c'est elle qui a
   rattrape le code, le scindage reste. */
.heros{background:var(--v2-surface-douce);padding-block:var(--v2-espace-64)}
/* 400 px de piste minimale : sous environ 850 px, le heros s'empile de
   lui-meme plutot que d'ecraser le panneau. */
.heros__in{display:grid;gap:var(--v2-espace-48);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
/* Une fois empile, la photo passe AU-DESSUS du texte, comme le prescrit
   references/images.md. */
.heros__in > .heros__media{order:0}
@media (max-width: 849px){ .heros__in > .heros__media{order:-1} }
.heros__media{position:relative;aspect-ratio:3/2;overflow:hidden;
  border-radius:var(--v2-rayon);background:var(--v2-surface)}
.heros__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;animation:fondu 7.6s infinite}
.heros__media img[data-i="0"]{animation-delay:0s}
.heros__media img[data-i="1"]{animation-delay:1.9s}
.heros__media img[data-i="2"]{animation-delay:3.8s}
.heros__media img[data-i="3"]{animation-delay:5.7s}
@keyframes fondu{0%{opacity:0}2%{opacity:1}25%{opacity:1}38%{opacity:0}100%{opacity:0}}
/* Panneau OPAQUE : le texte ne repose sur aucune photo. */
.heros__panneau{background:var(--v2-surface);
  padding:var(--v2-espace-40);border-radius:var(--v2-rayon);box-shadow:var(--v2-ombre)}
.heros__titre{font-family:var(--v2-police-titre);font-weight:800;
  font-size:var(--v2-display);line-height:var(--v2-interligne-serre);color:var(--v2-turquoise)}
.heros__sous{margin-top:var(--v2-espace-16);font-size:var(--v2-lead);color:var(--v2-texte-doux)}
.heros__actions{margin-top:var(--v2-espace-24);display:flex;flex-wrap:wrap;gap:var(--v2-espace-12)}

/* ---------------- sections ---------------- */
.section{padding-block:var(--v2-espace-80)}
.section--douce{background:var(--v2-surface-douce)}
.titre-section{font-family:var(--v2-police-titre);font-weight:800;
  font-size:var(--v2-h2);line-height:var(--v2-interligne-serre);
  color:var(--v2-turquoise);margin-bottom:var(--v2-espace-32)}
/* --v2-vert-clair n'atteint 4,54:1 que sur BLANC : 4,26 sur --v2-surface-douce.
   Les sections qui le portent restent blanches. */
.titre-section--equipe{color:var(--v2-vert-clair)}
.prose{max-width:62ch;font-size:var(--v2-corps);color:var(--v2-texte-doux)}
.intro{font-size:var(--v2-petit);color:var(--v2-texte-doux);margin-bottom:var(--v2-espace-24)}

/* ---------------- horaires et acces (2e position) ---------------- */
.aujourdhui__grille{display:grid;gap:var(--v2-espace-32);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:start}

/* Statut d'ouverture. Carte posee sur BLANC : --v2-statut-ouvert tombe a
   4,25:1 sur --v2-surface-douce, sous le seuil de 4,5. */
.statut{display:grid;gap:var(--v2-espace-8);
  background:var(--v2-surface);border:1px solid var(--v2-bordure);
  border-radius:var(--v2-rayon);padding:var(--v2-espace-24);
  margin-bottom:var(--v2-espace-24)}
.statut[hidden]{display:none}
.statut__phrase{display:flex;align-items:center;gap:var(--v2-espace-12);
  font-family:var(--v2-police-titre);font-weight:800;
  font-size:var(--v2-statut);line-height:1.2;letter-spacing:-0.2px}
/* L'etat n'est JAMAIS porte par la seule couleur : le mot le dit, et la
   pastille double par sa forme — pleine, tiretee ou creuse. */
.statut__pastille{flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:3px solid currentColor}
.statut--ouvert{color:var(--v2-statut-ouvert)}
.statut--ouvert .statut__pastille{background:currentColor}
.statut--bientot,.statut--midi{color:var(--v2-statut-alerte)}
.statut--bientot .statut__pastille{border-style:dashed}
.statut--midi .statut__pastille{background:linear-gradient(currentColor 0 50%,transparent 50% 100%)}
.statut--ferme{color:var(--v2-statut-ferme)}
.statut--ferme .statut__pastille{background:transparent}
.statut__detail{color:var(--v2-texte);font-weight:400;font-size:var(--v2-corps)}
.statut__source{color:var(--v2-texte-doux);font-size:var(--v2-etiquette)}

/* Bandeau — fermeture du midi. Information absente du site actuel. */
.midi{display:flex;gap:var(--v2-espace-12);align-items:flex-start;
  background:var(--v2-surface-douce);border-left:6px solid var(--v2-statut-alerte);
  border-radius:var(--v2-rayon-sm);padding:var(--v2-espace-16);
  margin-bottom:var(--v2-espace-24)}
.midi strong{color:var(--v2-texte)}
.midi p{color:var(--v2-texte-doux)}

/* Table des horaires, deux colonnes Matin / Apres-midi.
   UN SEUL BALISAGE. Figma a du dedoubler le composant parce que la direction
   d'un auto-layout ne se remplace pas dans une instance ; en CSS, la forme
   etroite est la meme table repliee par media query. */
.tableau-horaires{width:100%;border-collapse:collapse;font-size:var(--v2-corps)}
.tableau-horaires caption{text-align:left;font-weight:600;
  padding-bottom:var(--v2-espace-8)}
.tableau-horaires th,.tableau-horaires td{
  text-align:left;padding:var(--v2-espace-8) var(--v2-espace-8) var(--v2-espace-8) 0;
  border-bottom:1px solid var(--v2-bordure);vertical-align:top}
.tableau-horaires thead th{font-size:var(--v2-etiquette);text-transform:uppercase;
  letter-spacing:.4px;color:var(--v2-texte-doux)}
.tableau-horaires tbody th{font-weight:600;white-space:nowrap}
.tableau-horaires td{color:var(--v2-texte-doux)}
.tableau-horaires tr[data-aujourdhui] th,.tableau-horaires tr[data-aujourdhui] td{
  background:var(--v2-surface-douce);color:var(--v2-texte);font-weight:600}
.horaire-ferme{color:var(--v2-statut-ferme)}
/* Le samedi doit AVOIR L'AIR d'un gabarit : ni ouvert, ni ferme. */
.horaire-gabarit{display:inline-block;padding:2px var(--v2-espace-8);
  border:1px dashed var(--v2-bordure);border-radius:var(--v2-rayon-sm);
  color:var(--v2-texte-doux);font-size:var(--v2-etiquette);font-weight:600}

@media (max-width: 479px){
  /* Forme etroite : la meme table, repliee. Chaque rangee devient un bloc et
     les en-tetes de colonne sont repris en etiquette par ::before. */
  .tableau-horaires thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tableau-horaires tr{display:block;padding-block:var(--v2-espace-8);
    border-bottom:1px solid var(--v2-bordure)}
  .tableau-horaires th,.tableau-horaires td{display:block;border:0;padding:0}
  .tableau-horaires tbody th{font-size:var(--v2-corps)}
  .tableau-horaires td[data-colonne]::before{
    content:attr(data-colonne) " · ";color:var(--v2-texte-doux);font-weight:600}
}

/* Carte d'urgence. Surface --v2-surface-contraste : blanc dessus 14,71:1.
   --v2-turquoise y tomberait a 2,90:1, donc aucun lien turquoise ici. */
.urgence{background:var(--v2-surface-contraste);color:var(--v2-surface);
  border-radius:var(--v2-rayon);padding:var(--v2-espace-32);
  display:grid;gap:var(--v2-espace-16);align-content:start}
.urgence h3{font-family:var(--v2-police-titre);font-weight:800;
  font-size:var(--v2-h3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--v2-espace-8)}
.urgence p{color:var(--v2-surface)}
.urgence .a-confirmer{background:rgba(255,255,255,.16);color:var(--v2-surface)}
.urgence .a-fournir{color:#D4DEE1}

/* ---------------- services ---------------- */
/* La section reste BLANCHE. Elle ne reprend pas l'aplat sombre : une carte de
   specialite --v2-turquoise posee sur --v2-surface-contraste tombe a 2,90:1,
   sous le seuil 3:1 de WCAG 1.4.11 — et ces cartes sont des liens. */
.cartes{display:grid;gap:var(--v2-gouttiere);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-bottom:var(--v2-espace-48)}
.carte{display:grid;place-content:center;min-height:180px;padding:var(--v2-espace-32);
  text-align:center;text-decoration:none;color:var(--v2-surface);
  border-radius:var(--v2-rayon);border-bottom:10px solid rgba(0,0,0,.25)}
/* Fonds opaques. Blanc dessus : 5,06 / 4,55 / 4,53:1. Contre la page
   blanche : 5,06 / 4,55 / 4,53:1 egalement, bien au-dessus de 3:1. */
.carte--1{background:var(--v2-carte-1)}
.carte--2{background:var(--v2-carte-2)}
.carte--3{background:var(--v2-carte-3)}
.carte:hover{filter:brightness(.92)}
.carte__titre{font-size:var(--v2-carte);line-height:1.25;letter-spacing:1.5px}
.carte__haut{display:block;font-family:var(--v2-police-titre);font-weight:800}
.carte__bas{display:block;font-family:var(--v2-police-titre);font-weight:300}

.services__liste{display:grid;gap:var(--v2-gouttiere);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.services__liste li{background:var(--v2-surface-douce);color:var(--v2-texte);
  border:1px solid var(--v2-bordure);
  border-radius:var(--v2-rayon);padding:var(--v2-espace-24);
  font-size:var(--v2-service);text-align:center;
  display:flex;flex-wrap:wrap;gap:var(--v2-espace-8);
  align-items:center;justify-content:center;min-height:96px}
.a-confirmer{display:inline-block;
  padding:2px var(--v2-espace-8);border-radius:999px;
  background:var(--v2-surface-bande);color:var(--v2-texte);
  font-size:var(--v2-etiquette);font-weight:600;white-space:nowrap}
.services__pied{margin-top:var(--v2-espace-32);font-size:var(--v2-lead);
  text-align:center;color:var(--v2-texte-doux)}

/* ---------------- equipe ---------------- */
.equipe{display:grid;gap:var(--v2-espace-48);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.membre{display:grid;gap:var(--v2-espace-16)}
/* Les deux portraits gardent leur ratio propre : le cadre suit la photo. */
.membre img{width:220px;border-radius:var(--v2-rayon)}
.membre__nom{font-family:var(--v2-police-titre);font-weight:800;font-size:var(--v2-h3)}
.membre__fonction{color:var(--v2-texte-doux);font-size:var(--v2-petit)}

/* ---------------- bande photo ---------------- */
.bande{height:clamp(220px,32vw,460px);overflow:hidden}
.bande img{width:100%;height:100%;object-fit:cover}

/* ---------------- contact ---------------- */
.contact__grille{display:grid;gap:var(--v2-espace-48);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.contact h3,.ecrire h3{font-family:var(--v2-police-titre);font-weight:800;
  font-size:var(--v2-h3);margin-bottom:var(--v2-espace-16)}
.carte-google{width:100%;height:360px;border:0;border-radius:var(--v2-rayon);
  margin-top:var(--v2-espace-48)}
.note{margin-top:var(--v2-espace-16);font-size:var(--v2-petit);color:var(--v2-texte-doux)}

/* ---------------- formulaire ---------------- */
.formulaire{display:grid;gap:var(--v2-espace-16);max-width:36rem}
.champ{display:grid;gap:var(--v2-espace-4)}
.champ label{font-weight:600;font-size:var(--v2-petit)}
/* Un seul balisage : le <textarea> ne differe que par sa hauteur. Figma a du
   en faire un composant separe parce que resize() est ignore sur certains
   enfants d'instance ; ici c'est une ligne de CSS. */
.champ input,.champ textarea{
  font:inherit;font-size:var(--v2-corps);color:var(--v2-texte);
  background:var(--v2-surface);
  border:1px solid var(--v2-bordure);border-radius:var(--v2-rayon-sm);
  padding:var(--v2-espace-12);min-height:var(--v2-cible);
}
.champ textarea{min-height:160px;resize:vertical}
/* Message rattache a UN champ, annonce par aria-describedby. Vide et
   masque tant qu'il n'y a pas d'erreur. */
.champ__erreur{font-size:var(--v2-etiquette);color:var(--v2-focus);font-weight:600;min-height:0}
.champ__erreur:empty{display:none}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{
  border-color:var(--v2-focus);border-width:2px}
.formulaire__etat{font-size:var(--v2-petit);min-height:1.6em}
/* L'etat transitoire a sa regle : sans elle, « Envoi en cours… » est
   visuellement identique au repos. */
.formulaire__etat[data-niveau=info]{color:var(--v2-texte-doux);font-weight:600}
.formulaire__etat[data-niveau=erreur]{color:var(--v2-focus);font-weight:600}
.formulaire__etat[data-niveau=succes]{color:var(--v2-vert);font-weight:600}

/* ---------------- pied de page ---------------- */
/* Debarrasse de ses conteneurs vides : plus de barre de reseaux sociaux sans
   enfant, plus de bloc de texte a caractere de garde. */
.pied{background:var(--v2-surface-bande);padding-block:var(--v2-espace-48);
  border-top:10px solid var(--v2-vert)}
.pied__grille{display:grid;gap:var(--v2-espace-32);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));align-items:start}
.pied a{color:var(--v2-turquoise)}
.pied__bas{margin-top:var(--v2-espace-32);padding-top:var(--v2-espace-24);
  border-top:1px solid var(--v2-bordure);
  display:flex;flex-wrap:wrap;gap:var(--v2-espace-16);
  align-items:center;justify-content:space-between;font-size:var(--v2-petit)}
/* Emplacement prevu pour les mentions legales et la politique de
   confidentialite. Aucun des deux documents n'existe aujourd'hui : le texte
   doit venir du client, il ne s'invente pas. */
.a-fournir{color:var(--v2-texte-doux);font-style:italic}
.haut-de-page{display:inline-flex;align-items:center;gap:var(--v2-espace-8);
  min-height:var(--v2-cible);padding-inline:var(--v2-espace-12);
  color:var(--v2-turquoise);text-decoration:none;font-weight:600}

/* ---------------- tablette ---------------- */
@media (max-width: 1099px){
  .rail{display:none}
}

/* ---------------- mobile : palier v2/sm ---------------- */
@media (max-width: 767px){
  .entete__logo img{width:150px}
  .entete__haut{gap:var(--v2-espace-8);padding-block:var(--v2-espace-8)}
  .entete__actions{gap:var(--v2-espace-8);width:100%;margin-left:0}
  .menu-bouton{display:inline-flex}
  .nav__liste{display:none}
  .nav--ouvert .nav__liste{
    display:grid;gap:var(--v2-espace-4);
    padding-block:var(--v2-espace-16);
  }
  .nav--ouvert .nav__liste a{min-height:var(--v2-cible);padding-inline:var(--v2-espace-8)}
  .entete__tel span{display:none}
  .heros{padding-block:var(--v2-espace-40)}
  .heros__panneau{padding:var(--v2-espace-24)}
  .heros__media{order:-1}
  .section{padding-block:var(--v2-espace-48)}
  .membre img{width:100%;max-width:280px}
  .carte-google{height:260px}
  .statut{padding:var(--v2-espace-16)}
  .urgence{padding:var(--v2-espace-24)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .heros__media img{animation:none;opacity:0}
  .heros__media img[data-i="0"]{opacity:1}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}