.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: var(--t-m);
  line-height: 1.2;
  padding: var(--e3) var(--e5);
  min-height: var(--hauteur-champ);
  border-radius: var(--rayon-m);
  border: var(--filet) solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--texte);
  transition: transform var(--duree-1) var(--transition),
              background-color var(--duree-1) var(--transition),
              border-color var(--duree-1) var(--transition);
}

.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: none; }
.bouton svg { width: 17px; height: 17px; flex: none; }

.bouton--primaire {
  background: var(--accent);
  color: var(--sur-accent);
  border-color: var(--accent);
}

.bouton--primaire:hover {
  background: var(--accent-texte);
  color: var(--sur-accent);
  border-color: var(--accent-texte);
}

.bouton--contour {
  background: transparent;
  color: var(--texte);
  border-color: var(--trait-marque);
}

.bouton--contour:hover {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--texte-doux);
}

.bouton--sur-primaire {
  background: transparent;
  color: var(--sur-primaire);
  border-color: var(--sur-primaire-doux);
}

.bouton--sur-primaire:hover {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border-color: var(--sur-primaire);
}

.bouton--plein {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--surface);
}

.bouton--bloc { width: 100%; }
.bouton--petit { font-size: var(--t-s); padding: var(--e2) var(--e4); min-height: 36px; }

.heros {
  background: var(--primaire);
  color: var(--sur-primaire);
  position: relative;
  overflow: hidden;
}

.heros__interieur {
  position: relative;
  z-index: 1;
  padding-block: var(--rythme-ouvert);
}

.heros h1 { margin-block: var(--e4) var(--e4); max-width: 18ch; }
.heros .chapo { color: var(--sur-primaire-doux); max-width: 56ch; }

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.heros__grille {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 920px) {
  .heros__grille { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); }
}

.fiche {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border: var(--filet) solid var(--primaire-clair);
  border-radius: var(--rayon-l);
  padding: var(--e2);
}

.fiche__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e3);
}

.fiche__titre {
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--accent-sur-primaire);
}

.fiche__reference {
  font-family: var(--police-donnee);
  font-size: var(--t-2xs);
  color: var(--sur-primaire-doux);
}

.fiche__lignes {
  background: var(--primaire);
  color: var(--sur-primaire);
  border-radius: var(--rayon-s);
  padding: 4px var(--e4);
}

.fiche__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px dashed var(--primaire-clair);
}

.fiche__ligne:last-child { border-bottom: 0; }
.fiche__cle { font-size: var(--t-s); color: var(--sur-primaire-doux); }

.fiche__valeur {
  font-family: var(--police-donnee);
  font-size: var(--t-m);
  color: var(--sur-primaire);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fiche__valeur em { font-style: normal; color: var(--accent-sur-primaire); }
.fiche__pied { padding: var(--e3) var(--e4); font-size: var(--t-xs); color: var(--sur-primaire-doux); }

.carte {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  transition: border-color var(--duree-2) var(--transition),
              transform var(--duree-2) var(--transition),
              box-shadow var(--duree-2) var(--transition);
}

.carte > p { font-size: var(--t-m); color: var(--texte-doux); }
.carte--media { padding: 0; overflow: hidden; }

.carte--media .carte__corps {
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.carte--lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--trait-marque);
}

.carte__suite {
  margin-top: auto;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--accent-texte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.carte__suite::after { content: "→"; transition: transform var(--duree-2) var(--transition); }
.carte--lien:hover .carte__suite::after { transform: translateX(4px); }

.picto {
  width: 46px;
  height: 46px;
  border-radius: var(--rayon-m);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
}

.picto svg { width: 24px; height: 24px; display: block; }

.filets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--filet) solid var(--trait);
}

.filets li {
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-size: var(--t-m);
}

.filets li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 1px;
  transform: rotate(45deg);
  margin-top: 7px;
  background: var(--accent);
  color: var(--sur-accent);
}

.filets__valeur {
  margin-left: auto;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  color: var(--texte-discret);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rubrique--primaire .filets { border-top-color: var(--primaire-clair); }
.rubrique--primaire .filets li { border-bottom-color: var(--primaire-clair); }
.rubrique--primaire .filets__valeur { color: var(--sur-primaire-doux); }

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--filet) solid var(--trait);
}

@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.chiffre {
  padding: var(--e5) var(--e5) var(--e5) 0;
  border-bottom: var(--filet) solid var(--trait);
}

@media (min-width: 760px) { .chiffre { border-bottom: 0; } }

.chiffre__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -.03em;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.chiffre__unite { color: var(--accent-texte); font-size: .62em; }
.chiffre__libelle { font-size: var(--t-s); color: var(--texte-doux); margin-top: 4px; }

.etapes { counter-reset: etape; display: grid; }

.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e5);
  align-items: start;
  padding: var(--e5) 0;
  border-bottom: var(--filet) solid var(--trait);
}

.etape:last-child { border-bottom: 0; }

.etape__numero {
  counter-increment: etape;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  color: var(--accent-texte);
  padding-top: 3px;
}

.etape__numero::before { content: counter(etape, decimal-leading-zero); }
.etape h3 { margin-bottom: 5px; font-size: var(--t-l); }
.etape p { font-size: var(--t-m); color: var(--texte-doux); }

.labels { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 880px) { .labels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.label {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.label__marque { width: 38px; height: 38px; color: var(--accent-texte); }

.label__nom {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--t-m);
  letter-spacing: -.01em;
}

.label p { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.45; }

.media {
  position: relative;
  display: block;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--rayon-m);
  background: var(--surface-creuse);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
}

.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }

.media__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
  padding-top: var(--e3);
  font-size: var(--t-s);
  color: var(--texte-doux);
}

.media__legende span { font-family: var(--police-donnee); font-size: var(--t-2xs); color: var(--texte-discret); }

.galerie { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 880px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie--mosaique > *:first-child { grid-column: span 2; }

.vignette {
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  overflow: hidden;
  background: var(--surface);
  color: var(--texte);
  display: flex;
  flex-direction: column;
  margin: 0;
}

.vignette .media { border: 0; border-radius: 0; }

.vignette figcaption {
  padding: var(--e3) var(--e4);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
}

.vignette figcaption strong { font-weight: 600; font-size: var(--t-m); }
.vignette figcaption span { font-family: var(--police-donnee); font-size: var(--t-2xs); color: var(--texte-discret); }

.cadre-tableau {
  overflow-x: auto;
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--texte);
}

table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: var(--t-m); }
caption { text-align: left; padding: var(--e4) var(--e5) 0; font-size: var(--t-xs); color: var(--texte-discret); }
th, td { text-align: left; padding: var(--e4) var(--e5); border-bottom: var(--filet) solid var(--trait); }

th {
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--texte-discret);
  font-weight: 500;
}

tbody tr:last-child td { border-bottom: 0; }
td.nombre { font-family: var(--police-donnee); font-variant-numeric: tabular-nums; white-space: nowrap; }

.faq { border-top: var(--filet) solid var(--trait); }
.faq details { border-bottom: var(--filet) solid var(--trait); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--e4) var(--e8) var(--e4) 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-l);
  letter-spacing: var(--approche-titre);
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--police-donnee);
  font-size: 20px;
  color: var(--accent-texte);
}

.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: var(--e5); color: var(--texte-doux); font-size: var(--t-m); max-width: var(--mesure); }

.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e4); }
.champ label { font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); }

.champ input, .champ select, .champ textarea {
  font-size: var(--t-m);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait-marque);
  border-radius: var(--rayon-m);
  padding: 0 var(--e4);
  height: var(--hauteur-champ);
  width: 100%;
}

.champ textarea { min-height: 120px; resize: vertical; padding-block: var(--e3); height: auto; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent); }
.champ[data-invalide="oui"] input,
.champ[data-invalide="oui"] textarea { border-color: var(--alerte); }
.champ__erreur { font-size: var(--t-xs); color: var(--alerte); }

.duo-champs { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .duo-champs { grid-template-columns: 1fr 1fr; } }

.coordonnees {
  background: var(--primaire);
  color: var(--sur-primaire);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

/* **Un bouton garde son encre.** `.coordonnees a` pèse (0,1,1) et
   `.bouton--primaire` (0,1,0) : le lien de contact rendu en bouton plein
   recevait donc `accent-sur-primaire` sur un fond `accent`, soit **2,17:1**,
   et la porte de contraste refusait d'installer le site entier — mesuré sur
   sanitherm28-fr le 2026-09-21. Le `:not` rend la regle au bouton. */
.coordonnees a:not(.bouton) { color: var(--accent-sur-primaire); }
.coordonnees address { font-style: normal; }
.coordonnee { display: flex; gap: var(--e3); align-items: flex-start; }
.coordonnee svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--accent-sur-primaire); }

.coordonnee strong {
  display: block;
  font-family: var(--police-donnee);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  color: var(--sur-primaire-doux);
  font-weight: 500;
  margin-bottom: 3px;
}

.appel {
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: var(--rayon-l);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  align-items: center;
  justify-content: space-between;
}

.appel h2 { color: var(--sur-accent); font-size: clamp(24px, 3vw, 34px); max-width: 18ch; }
.appel p { color: var(--sur-accent); font-size: var(--t-m); margin-top: var(--e2); max-width: 48ch; }
.appel .bouton--plein { background: var(--sur-accent); color: var(--accent-texte); border-color: var(--sur-accent); }
.appel .bouton--contour { color: var(--sur-accent); border-color: var(--sur-accent); }
.appel .bouton--contour:hover { background: var(--accent-texte); color: var(--sur-accent); border-color: var(--sur-accent); }

.urgence {
  background: var(--alerte);
  color: var(--sur-alerte);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  align-items: center;
  justify-content: space-between;
}

.urgence h2 { color: var(--sur-alerte); font-size: var(--t-2xl); }
.urgence p { color: var(--sur-alerte); font-size: var(--t-m); max-width: 52ch; }
.urgence .bouton { background: var(--sur-alerte); color: var(--alerte); border-color: var(--sur-alerte); }

.annonce {
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  gap: var(--e4);
  align-items: flex-start;
}

.annonce svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.annonce h2 { color: var(--sur-accent-doux); font-size: var(--t-l); margin-bottom: 4px; }
.annonce p { font-size: var(--t-m); max-width: 62ch; }

.engagements { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.engagement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
}

.engagement h3 { font-size: var(--t-l); margin-bottom: 4px; }
.engagement p { font-size: var(--t-m); color: var(--texte-doux); }
.rubrique--primaire .engagement p { color: var(--sur-primaire-doux); }
.rubrique--primaire .picto { background: var(--primaire-clair); color: var(--accent-sur-primaire); }

.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

.agenda__entree {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e4) var(--e5);
}

@media (min-width: 680px) { .agenda__entree { grid-template-columns: 200px 1fr; gap: var(--e5); align-items: baseline; } }

.agenda__periode { font-family: var(--police-donnee); font-size: var(--t-s); color: var(--accent-texte); }
.agenda__objet strong { display: block; font-size: var(--t-m); }
.agenda__objet span { font-size: var(--t-s); color: var(--texte-doux); }

.calendrier { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 680px) { .calendrier { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.mois {
  background: var(--surface);
  color: var(--texte-doux);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-s);
  padding: var(--e3);
  text-align: center;
  font-size: var(--t-s);
}

.mois strong { display: block; font-family: var(--police-donnee); font-size: var(--t-m); color: var(--texte); }

.mois[data-charge="forte"] {
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
  border-color: var(--accent);
}

.mois[data-charge="forte"] strong { color: var(--sur-accent-doux); }

.horaires { list-style: none; margin: 0; padding: 0; border-top: var(--filet) solid var(--trait); }

.horaires li {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-size: var(--t-m);
}

.horaires li[data-ferme="oui"] { color: var(--texte-discret); }
.horaires time { font-family: var(--police-donnee); font-variant-numeric: tabular-nums; }

.plan {
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  overflow: hidden;
  background: var(--surface-creuse);
  color: var(--texte);
}

.plan img { width: 100%; display: block; }

.pastilles { display: flex; flex-wrap: wrap; gap: var(--e2); }

.pastille {
  font-size: var(--t-s);
  padding: 6px var(--e3);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-pastille);
  background: var(--surface);
  color: var(--texte-doux);
}

.pastille--principale { border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }

.rubrique--primaire .pastille {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border-color: var(--primaire-clair);
}

.rubrique--primaire .pastille--principale {
  background: var(--primaire-clair);
  color: var(--accent-sur-primaire);
  border-color: var(--accent-sur-primaire);
}

.temoignage {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin: 0;
}

.temoignage p { font-size: var(--t-m); }
.temoignage footer { font-size: var(--t-s); color: var(--texte-discret); }

.avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  padding: var(--e5);
}

.avis__note { font-family: var(--police-titre); font-size: var(--t-3xl); font-weight: var(--graisse-titre); }
.avis__source { font-size: var(--t-s); color: var(--texte-doux); }

.tarif {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  align-items: baseline;
  padding: var(--e4) 0;
  border-bottom: var(--filet) solid var(--trait);
}

.tarif:last-child { border-bottom: 0; }
.tarif__objet strong { display: block; font-size: var(--t-m); }
.tarif__objet span { font-size: var(--t-s); color: var(--texte-doux); }

.tarif__valeur {
  font-family: var(--police-donnee);
  font-size: var(--t-l);
  color: var(--accent-texte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.duo { display: grid; gap: var(--e8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .duo--inverse .duo__texte { order: 2; } }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: var(--plan-panneau);
  background: rgba(0, 0, 0, .9);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  padding: var(--gouttiere);
  border: 0;
}

.visionneuse[hidden] { display: none; }
.visionneuse img { max-height: 76vh; border-radius: var(--rayon-m); }
.visionneuse figcaption { color: #FFFFFF; font-size: var(--t-s); padding-top: var(--e3); text-align: center; }