/* ==========================================================================
   Agnès Sport Santé — reproduction statique du site WordPress/Elementor
   Palette et typographies extraites du kit Elementor d'origine (post-105)
   ========================================================================== */

/* Les polices ne sont plus importées ici.
   ----------------------------------------------------------------------------
   Un « @import » ne se découvre qu'APRÈS avoir chargé la feuille qui le
   contient : le navigateur enchaînait page → style → liste des polices →
   police, soit quatre allers-retours avant la première lettre. Sur une 3G de
   montagne, plus d'une seconde perdue en attente pure.

   Chaque page les réclame donc elle-même, en tête, où elles partent en même
   temps que tout le reste. */

:root {
  /* ------------------------------------------------------------- l'allure
     Les couleurs portaient le nom de leur teinte — « prune », « corail »,
     « jaune » — parce qu'elles venaient telles quelles du thème WordPress
     d'origine. Un site vert aurait donc eu un « --prune » vert, et l'on aurait
     cherché longtemps ce que la variable voulait dire.

     Elles portent maintenant le nom de leur RÔLE. Les anciens noms restent,
     branchés sur les nouveaux : quarante-cinq emplois les emploient encore
     dans cette feuille, et les renommer d'un coup était le meilleur moyen d'en
     oublier un.

     Une palette ne redéfinit donc que quatre valeurs, plus bas, sur le corps de
     la page. Tout le reste suit. */
  --accent:       #825574;   /* la couleur de l'association : titres, liens, pied */
  --titre:        #EC7069;   /* les titres de section, plus clairs que l'accent */
  --geste:        #FAB926;   /* ce qui se touche : boutons, appels à l'action */
  --geste-survol: #F19953;
  --encre:        #000000;

  --noir:   var(--encre);
  --prune:  var(--accent);
  --corail: var(--titre);
  --jaune:  var(--geste);
  --orange: var(--geste-survol);

  --font-titre: "Jost", sans-serif;
  --font-texte: "Cormorant Garamond", serif;

  /* La forme : le rayon des angles et celui des photos. Deux valeurs, et la
     personnalité du site change du tout au tout. */
  --rayon:       0px;
  --rayon-geste: 30px;   /* le bouton de l'espace, déjà en gélule à l'origine */
  --rayon-photo: 0px;
  --cadre-photo: 0px;

  --max: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--noir);
  background: #fff;
  overflow-x: hidden;
}

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

/* titres : valeurs de base du kit Elementor */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.2em;
  color: var(--prune);
}
h5, h6 { line-height: 1.3em; }
a { color: inherit; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* --------------------------------------------------------------- header -- */
.site-header {
  position: relative;
  padding: 12px 0;
  text-align: center;
}
.site-header img {
  width: 8%;
  min-width: 64px;
  margin: 0 auto;
}

/* Accès à l'espace membre. Posé en absolu pour que le logo reste exactement
   centré comme sur le site d'origine. Hauteur de 44 px : c'est la taille
   minimale d'une cible tactile confortable. */
.site-header__espace {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 30px;
  background: var(--jaune);
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.site-header__espace:hover { background: var(--orange); }
.site-header__espace:focus-visible { outline: 2px solid var(--prune); outline-offset: 2px; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 128px 0 0 160px;
  overflow: hidden;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  animation: heroFade 20s infinite;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 5s; }
.hero__slide:nth-child(3) { animation-delay: 10s; }
.hero__slide:nth-child(4) { animation-delay: 15s; }
@keyframes heroFade {
  0%    { opacity: 0; }
  2.5%  { opacity: 1; }
  25%   { opacity: 1; }
  27.5% { opacity: 0; }
  100%  { opacity: 0; }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: #00000085;
}
.hero__titre {
  font-family: var(--font-titre);
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}
.hero__liste { list-style: none; margin: 0; padding: 0; }
.hero__liste li {
  font-family: var(--font-texte);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.5;
}
.reseaux { display: flex; gap: 12px; padding-top: 20px; }
.reseaux a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--jaune);
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
}
.reseaux svg { width: 20px; height: 20px; fill: currentColor; }

/* ------------------------------------------------------------- sections -- */
.section { padding: 80px 0; }

.section--vague {
  background: url("../img/ui/wave-bg.png") top center no-repeat;
  padding: 120px 0;
}
.public.section--vague { padding-bottom: 80px; }
/* section non rognée : l'image occupe toute la demi-largeur, comme l'original */
.public .container { padding: 0; }

.titre-section {
  font-family: var(--font-titre);
  font-size: 55px;
  font-weight: 500;
  color: var(--corail);
  text-align: center;
  margin: 0 40px 122px;
}

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}

/* ------------------------------------------------------------- à propos -- */
.apropos__media { padding: 80px 40px 40px; }
.apropos__texte { padding: 200px 0 0 38px; position: relative; }
.apropos__texte h2 {
  font-family: var(--font-titre);
  font-size: 48px;
  font-weight: 500;
  color: var(--corail);
  margin: 0 0 20px;
}
.apropos__texte p { margin: 0 0 1em; }
.lieu {
  display: flex; align-items: center; gap: 8px;
  margin-top: 24px;
}
.lieu__icone {
  width: 22px; height: 22px;
  fill: var(--corail); flex: none;
}
.lieu h5 {
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 500;
  color: var(--prune);
  margin: 0;
}
.apropos__forme { margin-top: 30px; }

/* ----------------------------------------------------------------- avis -- */
.avis { padding: 40px 0; }
.avis__entete { text-align: center; margin-bottom: 30px; }
.avis__note {
  font-family: var(--font-titre);
  font-size: 22px; font-weight: 600;
  letter-spacing: 1px;
  color: var(--noir);
}
.avis__etoiles { color: #FBBC04; font-size: 24px; letter-spacing: 2px; }
.avis__meta { font-size: 16px; color: #666; }
.avis__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.avis__carte {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  font-size: 17px;
  line-height: 1.5;
  background: #fff;
}
.avis__auteur { font-family: var(--font-titre); font-weight: 600; font-size: 16px; }
.avis__source { font-size: 13px; color: #777; margin-bottom: 10px; }

/* ------------------------------------------------------------- qualités -- */
.qualites {
  padding: 80px 0;
  position: relative;
}
.qualites::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/ui/shape-prestations.png") 16px -57px no-repeat;
  z-index: -1;
}
.qualites__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.qualite { text-align: center; }
.qualite img { width: 55%; margin: 0 auto; }
.qualite h3 {
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--corail);
  margin: 10px 0 0;
}

/* ---------------------------------------------------------- prestations -- */
.prestations { padding: 0 0 80px; }
.prestations__grille {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 200px;
}
.prestation { text-align: center; }
.prestation img { width: 100%; }
.prestation__titre {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-top: -10px;
  background: var(--jaune);
  color: #fff;
  font-family: var(--font-texte);
  font-size: 25px;
  font-weight: 500;
  line-height: 23px;
  text-transform: capitalize;
  letter-spacing: 0.25px;
  padding: 7px 20px;
  border-radius: 3px;
}
.prestation__texte {
  padding: 0 60px;
  margin-top: 48px;
  text-align: start;
  line-height: 30px;
}
.prestation__texte p { margin: 0 0 1em; }
.prestation__texte p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- à qui s'adressent ---- */
/* écart avec la colonne image : 80 px dans l'original */
.public__texte { padding: 40px 0 0 80px; }

.public__texte h2 {
  font-family: var(--font-titre);
  font-size: 50px;
  font-weight: 600;
  color: var(--corail);
  margin: 0 0 30px;
}

/* les deux intitulés de cible : sans icône dans l'original */
.public__cible {
  font-family: var(--font-titre);
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1em;
  color: #000;
  margin: 0 0 8px;
  padding: 0 0 20px;
}
.public__cible--jaune { color: var(--jaune); padding: 20px 0 0; }

.liste-puces { list-style: none; margin: 15px 0; padding: 0; }
.liste-puces li {
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 43px;
  letter-spacing: 1.3px;
}
.liste__icone {
  /* le glyphe fait 31 px, mais son bloc en occupe 48 avec la gouttière :
     on reproduit ce retrait pour que le texte s'aligne comme dans l'original */
  width: 31px; height: 31px;
  flex: none;
  margin-inline-end: 17px;
  fill: var(--corail);
}
.separateur { border: 0; border-top: 1px solid #000; margin: 20px 0; }

/* ------------------------------------------------------------- planning -- */
.planning { padding: 80px 0; }
.planning[hidden] { display: none; }
.planning__titre { margin: 0 40px 8px; }
.planning__saison {
  font-family: var(--font-titre);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--prune);
  text-align: center;
  margin: 0;
}
.planning__intitule {
  font-family: var(--font-texte);
  font-size: 22px;
  color: var(--noir);
  text-align: center;
  margin: 4px 0 40px;
}
.planning__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  align-items: start;
}
.jour {
  border: 1px solid #EBE1E9;
  border-top: 4px solid var(--jaune);
  border-radius: 6px;
  padding: 20px;
  background: #fff;
}
.jour__nom {
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--corail);
  margin: 0 0 14px;
}
.jour__seances { list-style: none; margin: 0; padding: 0; }
.seance + .seance {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F0E9EE;
}
.seance__heure {
  font-family: var(--font-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--prune);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.seance__cours {
  font-family: var(--font-texte);
  font-size: 20px;
  line-height: 1.3;
  color: var(--noir);
  margin: 2px 0 0;
}
.seance__lieu {
  font-family: var(--font-texte);
  font-size: 16px;
  font-style: italic;
  color: #6E6169;
  margin: 2px 0 0;
}
.planning__note {
  font-family: var(--font-texte);
  font-size: 18px;
  text-align: center;
  color: #6E6169;
  margin: 30px 0 0;
}

/* -------------------------------------------------------------- séjours -- */
.sejours { padding: 0 0 80px; }
.sejours[hidden] { display: none; }
.sejours__titre { margin: 0 40px 40px; }
.sejours__haut {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.sejours__intro p { margin: 0 0 1em; }
.sejours__sous-titre {
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--corail);
  margin: 30px 0 12px;
}
.sejours__comprend { list-style: none; margin: 0; padding: 0; }
.sejours__comprend li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.sejours__comprend li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 10px; height: 2px;
  background: var(--jaune);
}
.sejours__duree {
  font-family: var(--font-titre);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--prune);
  margin: 20px 0 0;
}
.sejours__image { border-radius: 6px; width: 100%; }
.sejours__dates { margin-top: 40px; }
.sejours__attente {
  background: #FDF6E8;
  border-left: 4px solid var(--jaune);
  border-radius: 0 6px 6px 0;
  padding: 18px 22px;
  font-size: 19px;
  margin: 0;
}
.sejour {
  border: 1px solid #EBE1E9;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}
.sejour__image { border-radius: 4px; margin-bottom: 14px; }
.sejour__titre {
  font-family: var(--font-titre);
  font-size: 22px;
  font-weight: 600;
  color: var(--corail);
  margin: 0 0 6px;
}
.sejour__meta {
  font-family: var(--font-titre);
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--prune);
  margin: 0 0 10px;
}
.sejour__texte { margin: 0; }

/* ------------------------------------------------------------- citation -- */
.citation {
  position: relative;
  min-height: 930px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--prune) url("../img/citation-bg-w1400.webp") center center / cover fixed;
  padding: 40px 20px;
}
.citation::before {
  content: "";
  position: absolute; inset: 0;
  background: #00000069;
}
.citation__contenu { position: relative; }
.citation img { width: 150px; margin: 0 auto 20px; }
.citation blockquote {
  font-family: var(--font-texte);
  font-size: 30px;
  font-weight: 800;
  font-style: italic;
  line-height: 32px;
  color: #fff;
  margin: 0;
  max-width: 700px;
}
.citation cite {
  display: block;
  margin-top: 15px;
  font-family: var(--font-texte);
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
}

/* ------------------------------------------------------------- diplômes -- */
.diplomes { padding: 12px; }
.diplomes__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.diplomes__collage img { border-radius: 4px; }
.diplomes h2 {
  font-family: var(--font-titre);
  font-size: 55px;
  font-weight: 500;
  color: var(--corail);
  text-align: center;
  margin: 20px 0 40px;
}
.diplomes__listes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.diplomes__listes ul { list-style: none; margin: 0; padding: 0; }
.diplomes__listes li {
  display: flex; gap: 15px;
  font-size: 18px;
  color: var(--prune);
  padding-block-end: 7.5px;
  margin-block-start: 7.5px;
}
.diplomes__listes svg { width: 14px; height: 14px; fill: var(--prune); flex: none; margin-top: 10px; }
.diplomes__listes small { display: block; font-size: 16px; opacity: .8; }

/* -------------------------------------------------------------- contact -- */
.contact {
  position: relative;
  background: linear-gradient(130deg, #82557473 0%, #8255745E 89%);
  margin-top: 220px;
  padding: 50px 0;
  overflow: hidden;
}
/* overlay de formes : opacity 0.15 comme dans l'original */
.contact::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/ui/cta-shapes.png") center left / cover no-repeat;
  opacity: .15;
  pointer-events: none;
}
.contact .container { max-width: 1200px; padding: 0; position: relative; }

/* séparateurs en vagues, repris des shape dividers Elementor */
.contact__vague {
  position: absolute;
  left: 0; right: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.contact__vague svg { display: block; position: relative; left: 50%; }
.contact__vague path { fill: #fff; }
.contact__vague--haut { top: 0; }
.contact__vague--haut svg {
  width: calc(230% + 1.3px);
  height: 100px;
  transform: translateX(-50%) rotateY(180deg);
}
.contact__vague--bas { bottom: 0; }
.contact__vague--bas svg {
  width: calc(260% + 1.3px);
  height: 120px;
  transform: translateX(-50%) rotateY(180deg);
}

.contact__texte { padding: 50px 30px 0 0; }
.contact h2 {
  font-family: var(--font-titre);
  font-size: 49px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.2em;
  color: #fff;
  margin: 0 0 10px;
}
.contact__sous-titre {
  font-family: var(--font-titre);
  font-size: 24px;
  color: #fff;
  margin: 0 0 20px;
}

.contact__media { text-align: end; }
.contact__media img {
  border-radius: 300px 100px 100px 100px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .12);
  margin-top: -10%;
  margin-left: auto;
}

/* formulaire — valeurs du kit Elementor (post-105) */
.formulaire { padding: 40px 60px 0 0; }
.champ { margin-bottom: 25px; }
.champ label {
  display: block;
  font-family: var(--font-titre);
  font-weight: 800;
  color: #fff;
  padding-bottom: 8px;
}
.formulaire input,
.formulaire textarea {
  width: 100%;
  background: #fff;
  color: var(--noir);
  border: 1px solid #EBE1E9;
  border-radius: 30px;
  padding: 15px 30px 13px;
  font-family: var(--font-texte);
  font-size: 15px;
}
.formulaire textarea { min-height: 130px; resize: vertical; }
.formulaire input:focus,
.formulaire textarea:focus { outline: 2px solid var(--prune); outline-offset: 2px; }
.formulaire button {
  width: 100%;
  margin-top: 40px;
  background: var(--jaune);
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 18px 30px;
  font-family: var(--font-titre);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .75px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .23);
  cursor: pointer;
}
.formulaire button:hover { background: var(--orange); }
.formulaire button:disabled { opacity: .7; cursor: default; }

/* piège à robots : masqué sans display:none, pour rester rempli par les bots */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.consentement input {
  width: 20px; height: 20px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--jaune);
}
.consentement label {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}

.champ__erreur {
  display: inline-block;
  margin: 6px 0 0 20px;
  padding: 4px 14px;
  font-family: var(--font-titre);
  font-size: 14px;
  color: #7A1F1A;
  background: #ffffffd9;
  border-radius: 12px;
}
.formulaire input[aria-invalid="true"],
.formulaire textarea[aria-invalid="true"] { border-color: #C0392B; }

.formulaire__etat {
  margin: 16px 0 0;
  padding: 12px 20px;
  border-radius: 20px;
  font-family: var(--font-titre);
  font-size: 15px;
}
.formulaire__etat--succes { background: #ffffffe6; color: #1E6B3A; }
.formulaire__etat--erreur { background: #ffffffe6; color: #7A1F1A; }

/* -------------------------------------------------------------- galerie -- */
.galerie { padding: 100px 0; }
.galerie h2 {
  font-family: var(--font-titre);
  font-size: 65px;
  font-weight: 500;
  color: var(--corail);
  text-align: center;
  margin: 0;
  padding: 40px 0;
}

/* grille justifiée : les dimensions sont posées par site.js */
.galerie__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.galerie__item {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  line-height: 0;
  cursor: pointer;
}
.galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* effet "grow" d'origine */
  transition-duration: .3s;
  transition-property: transform;
}
.galerie__item:hover img,
.galerie__item:focus-visible img { transform: scale(1.1); }

/* repli deux colonnes sous 600 px, posé par site.js */
.galerie__grille--colonnes .galerie__item { width: calc(50% - 5px); height: auto; }
.galerie__grille--colonnes .galerie__item img { height: auto; }

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

/* ------------------------------------------------------------- lightbox -- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 40px 20px 60px;
  background: #000000e6;
}
.lightbox__image {
  grid-column: 2;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  margin: 0 auto;
  border-radius: 3px;
  object-fit: contain;
}
.lightbox button {
  background: #ffffff1a;
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 48px; height: 48px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.lightbox button:hover { background: #ffffff40; }
.lightbox__fermer {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 34px;
}
.lightbox__precedent { grid-column: 1; }
.lightbox__suivant { grid-column: 3; }
.lightbox__compteur {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-titre);
  font-size: 15px;
  color: #fff;
}

@media (max-width: 767px) {
  /* une seule colonne : l'image prend toute la largeur, les flèches
     passent en surimpression en bas */
  .lightbox {
    grid-template-columns: 1fr;
    padding: 60px 10px 76px;
    gap: 0;
  }
  .lightbox__image { grid-column: 1; }
  .lightbox button { width: 44px; height: 44px; font-size: 26px; }
  .lightbox__precedent,
  .lightbox__suivant {
    position: absolute;
    bottom: 16px;
    grid-column: 1;
  }
  .lightbox__precedent { left: 20px; }
  .lightbox__suivant { right: 20px; }
  .lightbox__compteur { bottom: 30px; }
}

/* ---------------------------------------------------------------- popup -- */
.popup[hidden] { display: none; }
.popup {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  background: #00000085;
  padding: 20px;
}
.popup__boite {
  position: relative;
  background: #fff;
  border-radius: 4px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.popup__fermer {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0;
  font-size: 28px; line-height: 1;
  cursor: pointer; color: #333;
}
.popup__texte { font-size: 20px; text-align: center; padding: 20px; }
.popup__texte p { margin: 0 0 1em; }
.popup__texte p:last-child { margin-bottom: 0; }
.popup__titre {
  font-family: var(--font-titre);
  font-size: 28px;
  font-weight: 500;
  color: var(--corail);
  margin: 0 0 15px;
}
.popup__bouton {
  display: inline-block;
  margin-top: 10px;
  background: var(--jaune);
  color: #fff;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 3px;
  font-family: var(--font-titre);
  font-size: 16px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.popup__bouton:hover { background: var(--orange); }
.popup__image { max-height: 80vh; width: auto; margin: 0 auto; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1024px) {
  .site-header__espace { right: 12px; padding: 0 14px; font-size: 14px; }
  .hero { padding: 140px 30px 30px; min-height: 48vh; }
  .titre-section, .diplomes h2 { font-size: 36px; }
  .galerie h2 { font-size: 45px; }
  /* comme l'original, ces deux sections passent en une colonne dès la tablette */
  .public .deux-colonnes { grid-template-columns: 1fr; }
  .prestations__grille { grid-template-columns: 1fr; row-gap: 60px; padding: 0 20px; }
  .sejours__haut { grid-template-columns: 1fr; gap: 30px; }
  .public { padding: 120px 30px 80px; }
  .public__texte { padding: 25px 200px 0 100px; }
  .public__texte h2 { font-size: 40px; }
  .public__cible { font-size: 19px; line-height: 1.4em; }
  .contact { padding: 5%; }
  .contact .container { padding: 0 20px; }
  .contact h2 { font-size: 34px; }
  .formulaire { padding: 40px 0 0; }
  .contact__media img { margin-top: -16%; }
  .apropos__texte { padding: 80px 0 0 40px; }
  .apropos__media { padding: 20px; }
  .citation { min-height: 580px; background-attachment: scroll; }
}

@media (max-width: 767px) {
  body { font-size: 18px; }
  .hero__titre { font-size: 26px; }
  .hero__liste li { font-size: 20px; }
  .deux-colonnes,
  .qualites__grille,
  .diplomes__collage,
  .diplomes__listes,
  .popup__boite { grid-template-columns: 1fr; }
  .prestations__grille { grid-template-columns: 1fr; row-gap: 40px; }
  .prestation__texte { padding: 0 10px; }
  .apropos__texte { padding: 60px 0 0; }
  .apropos__texte h2 { font-size: 36px; }
  .public { padding: 80px 20px 60px; }
  .public__texte { padding: 60px 12px 0; }
  .public__texte h2 { font-size: 33px; }
  .liste-puces li { font-size: 18px; }
  .planning { padding: 50px 0; }
  .planning__grille { grid-template-columns: 1fr; }
  .planning__titre, .sejours__titre { margin-left: 0; margin-right: 0; }
  .galerie { padding: 50px 20px; }
  .galerie .container { padding: 0; }
  .galerie h2 { font-size: 36px; }
  .citation blockquote { font-size: 24px; }
  .contact__texte { padding: 0; text-align: center; }
  .contact { margin-top: 0; padding: 20% 5% 5%; }
  .formulaire { padding: 20px 0 0; }
  .contact__media img { margin-top: 20%; margin-bottom: -15%; }
  .qualite h3 { font-size: 18px; }
  /* ordre inversé sur mobile, comme elementor-reverse-mobile */
  .apropos .apropos__texte { order: -1; }

  /* En une colonne, l'affiche à 80 % de la hauteur ne laissait rien voir du
     texte : on croyait le popup fini là où il commençait. Elle se borne, et
     les premières lignes dépassent — c'est ce qui donne envie de faire
     défiler. */
  .popup { padding: 12px; }
  .popup__boite { padding: 14px; gap: 12px; max-height: 92vh; }
  .popup__image { max-height: 54vh; }
  .popup__texte { padding: 0 6px 6px; font-size: 18px; text-align: left; }
  .popup__titre { font-size: 24px; }
}

/* ============================================================================
   LE PIED DE PAGE
   ----------------------------------------------------------------------------
   Il n'y en avait aucun : la page s'arrêtait sur la galerie photos, et rien en
   dessous. C'est pourtant là qu'on va chercher par réflexe les coordonnées, les
   liens légaux et l'accès à son compte — et son absence rendait les mentions
   légales impossibles à poser, faute d'un endroit atteignable depuis partout.
   ========================================================================== */

.pied {
  background: #2E2530;
  color: #E8DDE4;
  padding: 44px 0 26px;
  margin-top: 0;
}

.pied__corps {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.pied__bloc { min-width: 0; }

.pied__nom {
  font-family: var(--font-titre);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.pied__joindre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 15px;
}

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-titre);
  font-size: 15px;
}

.pied a {
  color: #E8DDE4;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 221, 228, .3);
  align-self: flex-start;
  padding-bottom: 1px;
}
.pied a:hover { border-bottom-color: #E8DDE4; }
.pied a:focus-visible { outline: 2px solid #E8DDE4; outline-offset: 3px; }

.pied__bas {
  margin: 34px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(232, 221, 228, .55);
}

/* Sur un téléphone, les deux blocs s'empilent et l'on serre l'ensemble : un
   pied de page n'est pas ce qu'on vient lire. */
@media (max-width: 640px) {
  .pied { padding: 32px 0 20px; }
  .pied__corps { gap: 22px; }
  .pied__bas { margin-top: 24px; }
}

/* ============================================================================
   UNE PAGE DE TEXTE
   ----------------------------------------------------------------------------
   Les mentions légales, l'information sur les données. On y vient pour lire, et
   souvent pour y chercher une ligne précise : une colonne étroite, des titres
   qui se repèrent, et rien d'autre.
   ========================================================================== */

.page-texte {
  padding: 54px 0 64px;
  background: #fff;
}

.page-texte .container { max-width: 46rem; }

.page-texte__titre {
  font-family: var(--font-titre);
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 28px;
}

.page-texte p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 16px;
}

/* Une ligne seule et tout en capitales devient un titre de partie : c'est ainsi
   qu'on écrit spontanément un texte de ce genre, et l'on n'a donc aucune
   syntaxe à apprendre. */
.page-texte__partie {
  font-family: var(--font-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--prune, #825574);
  margin: 34px 0 12px;
}
.page-texte__partie:first-of-type { margin-top: 0; }
.page-texte p:last-child { margin-bottom: 0; }

/* Le même bloc, mais posé au milieu de l'accueil : il y prend le rythme de la
   page — un titre de section centré, et un fond qui le détache de ses voisins. */
.page-texte--dedans { background: #FAF6F8; }
.page-texte__titre--dedans { margin-bottom: 44px; }
.page-texte--dedans .page-texte__partie { margin-top: 30px; }
.page-texte--dedans .page-texte__partie:first-of-type { margin-top: 0; }

/* ============================================================================
   OÙ L'ON PRATIQUE
   ----------------------------------------------------------------------------
   « C'est où » est, avec « combien ça coûte », la première question de qui
   découvre l'association. Sept salles réparties sur cinq communes de Cerdagne et
   du Capcir : les nommer répond à la question, et dit au passage qu'on n'est pas
   au fond d'une vallée.

   Un LIEN vers la carte, pas une carte : une bibliothèque de cartographie pèse
   cent soixante kilo-octets et ferait entrer un script étranger dans une page
   qui n'en accepte aucun. On ouvre celle du téléphone, qui sait mieux faire.
   ========================================================================== */

.lieux { padding: 60px 0; }

/* Le titre de section porte 122 px de marge basse — c'est le rythme de la page
   d'accueil, où chaque titre annonce un grand bloc illustré. Ici, la ligne des
   communes prolonge le titre : elle doit le suivre de près, pas flotter au
   milieu d'un blanc. On remonte donc jusqu'à lui plutôt que d'ajouter une
   exception au titre, qui vaut pour toute la page. */
.lieux .titre-section { margin-bottom: 0; }

.lieux__communes {
  text-align: center;
  font-family: var(--font-titre);
  font-size: 15px;
  letter-spacing: .04em;
  color: #7A6B73;
  margin: 14px 0 40px;
}

/* Sans commune à annoncer, le titre garde une respiration. */
.lieux .titre-section + .lieux__grille { margin-top: 48px; }

.lieux__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
}

.salle {
  background: #fff;
  border: 1px solid #E6DCE2;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.salle__nom {
  font-family: var(--font-titre);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.salle__adresse {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #5C4F57;
}

.salle__carte {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
  font-family: var(--font-titre);
  font-size: 14px;
  font-weight: 600;
  color: var(--prune);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.salle__carte:hover { opacity: .75; }

@media (max-width: 640px) {
  .lieux { padding: 44px 0; }
  .salle { padding: 16px; }
}

/* ============================================================================
   LE MENU DU SITE
   ----------------------------------------------------------------------------
   Il n'existait pas : une seule page, qu'on parcourait en défilant. Il devient
   nécessaire dès qu'il y en a d'autres, et il se remplit tout seul à partir des
   pages de contenu — l'accueil excepté, dont le lien est le logo.
   ========================================================================== */

.site-header__logo {
  display: inline-flex;
  line-height: 0;
  border-radius: 50%;
}
.site-header__logo:focus-visible { outline: 2px solid var(--prune); outline-offset: 4px; }

.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  align-items: center;
  font-family: var(--font-titre);
  font-size: 16px;
  font-weight: 500;
}

.site-menu a {
  color: var(--prune);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-menu a:hover { border-bottom-color: currentColor; }
.site-menu a[aria-current="page"] { border-bottom-color: currentColor; }
.site-menu a:focus-visible { outline: 2px solid var(--prune); outline-offset: 3px; }

/* Sur un téléphone, le menu passe sous le logo plutôt que de serrer les trois
   éléments sur une ligne. Il reste horizontal et défilant : à trois ou quatre
   pages, un menu déroulant coûterait un geste pour rien. */
@media (max-width: 720px) {
  .site-menu {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
    font-size: 15px;
    scrollbar-width: none;
  }
  .site-menu::-webkit-scrollbar { display: none; }
  .site-menu a { white-space: nowrap; }
}

/* ============================================================================
   Les photos entrent par le côté
   ----------------------------------------------------------------------------
   Trois propositions ont été comparées sur /apercu ; celle-ci a été retenue.
   Le texte reste en place, les photos viennent du bord : la page se compose
   sous l'œil au lieu de se dévoiler d'un bloc.

   LE MOUVEMENT SUIT LE POUCE, PAS UNE HORLOGE. `animation-timeline: view()`
   fait avancer l'animation au rythme du défilement. Un mouvement déclenché qui
   se déroule seul se termine hors de l'écran quand on va vite, et fait attendre
   quand on va lentement. Celui-ci suit la main.

   ET IL N'Y A PAS UNE LIGNE DE JAVASCRIPT. C'est ce qui le rend SANS DANGER :
   sans le support du navigateur, la règle entière est ignorée et la page reste
   celle d'avant. Un `IntersectionObserver` aurait dû cacher le contenu d'abord
   — et une erreur de script, un robot d'indexation, un navigateur ancien
   auraient laissé une page blanche. Ici l'état par défaut est « visible » : le
   pire qui puisse arriver est qu'il ne se passe rien.

   LE PREMIER ÉCRAN NE BOUGE JAMAIS. Ce qui est déjà affiché au chargement se
   trouve au-delà de sa plage d'animation, donc à son état final. Le titre
   d'accueil paraît instantanément — c'est lui que Google chronomètre.

   La plage est donnée en pixels et non en pourcentage : une section haute et
   une carte basse mettent alors le même défilement à paraître, et l'effet a le
   même tempo partout.

   /apercu?effets=0 rend la page immobile, pour comparer de nouveau un jour.
   ========================================================================== */

@keyframes apparaitre      { from { opacity: 0; transform: translateY(20px); } }
@keyframes venir-de-gauche { from { opacity: 0; transform: translateX(-36px); } }
@keyframes venir-de-droite { from { opacity: 0; transform: translateX(36px); } }

/* La hauteur de fenêtre est le garde-fou. Un effet lié au défilement laisse
   forcément transparent ce qui est encore plus bas — et le robot de Google
   regarde la page dans une fenêtre de neuf mille pixels de haut SANS jamais
   défiler. Il verrait donc une page dont tout le contenu est à zéro.

   Aucun écran humain ne dépasse deux mille quatre cents pixels de haut. Au-delà,
   on n'a pas affaire à un lecteur : la règle ne s'applique pas, et la page est
   rendue immobile et entière. C'est la même page, sans le mouvement — ce qui
   est exactement ce qu'on veut faire lire à un moteur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-height: 2400px) {

    /* Le fond : chaque bloc monte de vingt pixels et s'éclaircit. */
    .effets > section:not(.hero) {
      animation: apparaitre linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 300px;
    }

    /* Et dans les deux colonnes, la photo vient de la gauche pendant que le
       texte vient de la droite — ils se rejoignent au milieu. */
    .effets .apropos__media,
    .effets .sejours__media,
    .effets .contact__media,
    .effets .diplomes__collage {
      animation: venir-de-gauche linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 380px;
    }
    .effets .apropos__texte,
    .effets .sejours__texte,
    .effets .contact__texte {
      animation: venir-de-droite linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 380px;
    }
  }
}

/* ============================================================================
   L'ALLURE DU SITE
   ----------------------------------------------------------------------------
   Six réglages, posés en attributs sur le corps de la page par le composeur.
   Chacun est une liste FERMÉE de trois à six possibilités, toutes bonnes : on
   ne peut pas se tromper, on peut seulement se ressembler moins. Un sélecteur
   de couleur libre et neuf cents polices produiraient des sites laids,
   différemment — et une association n'a pas de graphiste, elle a une
   présidente qui a dix minutes.

   CHAQUE VALEUR PAR DÉFAUT REND EXACTEMENT LE SITE D'AUJOURD'HUI. C'est la
   règle qui rend ce chantier sans danger sur un site en service : « prune ·
   élégant · net · centré · plein · vague » ne change pas un pixel. Tout ce qui
   suit ne s'applique qu'à ce qu'on a explicitement choisi.
   ========================================================================== */

/* ------------------------------------------------------------- la couleur --
   Quatre valeurs par palette, et tout le reste en découle. Elles sont posées
   sur le corps et non sur la racine : la racine porte la valeur de repli, qui
   sert si l'attribut manque. */

body[data-palette="ocean"] {
  --accent: #1F5F6B; --titre: #3D93A0; --geste: #EDA13A; --geste-survol: #D98A2A;
}
body[data-palette="foret"] {
  --accent: #2E6449; --titre: #5C9068; --geste: #D98A3C; --geste-survol: #C4762C;
}
body[data-palette="bruyere"] {
  --accent: #7D5049; --titre: #C97F84; --geste: #D9A05C; --geste-survol: #C4894A;
}
body[data-palette="ardoise"] {
  --accent: #24557E; --titre: #4E86A8; --geste: #E9A13B; --geste-survol: #D18C2B;
}
body[data-palette="violette"] {
  --accent: #4A3B6B; --titre: #8E6FA8; --geste: #E4B04A; --geste-survol: #CE9A38;
}

/* --------------------------------------------------------------- la forme --
   Le réglage au meilleur rapport effet/travail de tout le lot : quatre valeurs
   de rayon, et rien d'autre. Le « médaillon » arrondit les photos en rond et
   leur pose un liseré — c'est ce qu'on veut pour des visages. */

body[data-forme="adouci"]   { --rayon: 4px;  --rayon-photo: 8px; }
body[data-forme="rond"]     { --rayon: 14px; --rayon-geste: 999px; --rayon-photo: 18px; }
body[data-forme="medaillon"]{ --rayon: 4px;  --rayon-photo: 50%; --cadre-photo: 4px; }

body[data-forme] .hero__bouton,
body[data-forme] .formulaire button,
body[data-forme] .champ input,
body[data-forme] .champ textarea,
body[data-forme] .champ select { border-radius: var(--rayon); }
body[data-forme] .site-header__espace { border-radius: var(--rayon-geste); }
body[data-forme] .apropos__media img,
body[data-forme] .sejours__image,
body[data-forme] .contact__media img,
body[data-forme] .galerie__item,
body[data-forme] .diplomes__collage img,
body[data-forme] .salle__carte,
body[data-forme] .avis__carte {
  border-radius: var(--rayon-photo);
  overflow: hidden;
}
/* Le liseré du médaillon détache la photo du fond, sans quoi un rond posé sur
   du blanc ressemble à un trou. */
body[data-forme="medaillon"] .apropos__media img,
body[data-forme="medaillon"] .contact__media img,
body[data-forme="medaillon"] .diplomes__collage img {
  border: var(--cadre-photo) solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}
/* Un rond veut un carré : une photo de portrait rognée en cercle sur un
   rectangle donne un ovale, ce que personne ne choisit volontairement. */
body[data-forme="medaillon"] .apropos__media img,
body[data-forme="medaillon"] .contact__media img { aspect-ratio: 1; object-fit: cover; }

/* ------------------------------------------------------- l'en-tête et le menu
   « centre » est la disposition d'origine : logo au milieu, bouton de l'espace
   posé en absolu à droite. Les autres refont l'en-tête en ligne — d'où la
   remise à plat du positionnement absolu, qui n'a de sens que centré. */

body[data-entete="barre"] .site-header,
body[data-entete="replie"] .site-header {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 20px;
  text-align: left;
}
body[data-entete="barre"] .site-header img,
body[data-entete="replie"] .site-header img { width: 62px; min-width: 0; margin: 0; }
body[data-entete="barre"] .site-header__espace,
body[data-entete="replie"] .site-header__espace {
  position: static; transform: none; margin-left: auto;
}

/* Le menu replié tient dans un « details » : il s'ouvre et se ferme sans une
   ligne de JavaScript, au clavier comme au doigt, et reste ouvrable si le
   script de la page ne charge pas. */
.site-menu-repli { position: relative; }
.site-menu-repli summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--rayon, 4px);
  color: var(--accent); font-size: 26px; line-height: 1;
}
.site-menu-repli summary::-webkit-details-marker { display: none; }
.site-menu-repli summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-menu-repli[open] summary { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.site-menu-repli .site-menu {
  position: absolute; z-index: 20; top: 100%; left: 0; min-width: 190px;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 8px 0; background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--rayon, 4px);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .35);
}
.site-menu-repli .site-menu a { padding: 9px 18px; border-bottom: 0; }
.site-menu-repli .site-menu a:hover,
.site-menu-repli .site-menu a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Le rail : une barre à gauche, toujours visible. Elle ne tient pas sur un
   téléphone — il n'y a pas 96 px à prendre sur 390 — et l'on retombe donc sur
   la disposition centrée sous 900 px. On choisit l'ordinateur, le téléphone se
   débrouille. */
@media (min-width: 900px) {
  body[data-entete="rail"] { padding-left: 116px; }
  body[data-entete="rail"] .site-header {
    position: fixed; z-index: 30; inset: 0 auto 0 0; width: 116px;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    padding: 26px 12px; text-align: center;
    background: #fff;
    border-right: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  }
  body[data-entete="rail"] .site-header img { width: 68px; min-width: 0; margin: 0; }
  body[data-entete="rail"] .site-menu {
    flex-direction: column; align-items: center; gap: 14px;
    font-size: 15px; text-align: center;
  }
  body[data-entete="rail"] .site-header__espace {
    position: static; transform: none; margin-top: auto;
    padding: 0 12px; font-size: 13px; text-align: center; line-height: 1.15;
  }
  /* Le bandeau prenait toute la largeur de la fenêtre ; il prend maintenant
     celle qui reste. Sans cela il passait sous le rail. */
  body[data-entete="rail"] .hero { padding-left: 80px; }
}

/* ------------------------------------------------- le bandeau d'accueil --
   « plein » est celui d'origine. Les deux derniers ne demandent AUCUNE photo,
   et c'est le plus utile du lot : une association peut ouvrir son site avant
   d'avoir des images. */

body[data-bandeau="demi"] .hero { min-height: 58vh; padding-top: 90px; }
body[data-bandeau="demi"] .hero__titre { font-size: 38px; }

body[data-bandeau="bande"] .hero,
body[data-bandeau="sobre"] .hero {
  min-height: 0; padding: 84px 20px 64px;
  justify-content: center; text-align: center;
}
body[data-bandeau="bande"] .hero__slides,
body[data-bandeau="sobre"] .hero__slides { display: none; }
body[data-bandeau="bande"] .hero::before,
body[data-bandeau="sobre"] .hero::before { background: none; }

body[data-bandeau="bande"] .hero { background: var(--accent); }
body[data-bandeau="sobre"] .hero {
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}
body[data-bandeau="sobre"] .hero__titre,
body[data-bandeau="sobre"] .hero__liste li { color: var(--accent); }
body[data-bandeau="bande"] .hero__liste li,
body[data-bandeau="sobre"] .hero__liste li { justify-content: center; }
body[data-bandeau="bande"] .hero__bouton,
body[data-bandeau="sobre"] .hero__bouton { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------- le rythme des sections
   Ce qui sépare deux sections. C'est un détail, et c'est LE détail qui fait
   dire « tiens, c'est le même site que l'autre ». */

body[data-rythme="filet"] .section--vague,
body[data-rythme="rien"]  .section--vague {
  background-image: none;
  padding: 88px 0;
}
body[data-rythme="filet"] .section--vague {
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
body[data-rythme="filet"] .contact__vague,
body[data-rythme="rien"]  .contact__vague { display: none; }
body[data-rythme="filet"] .contact { border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 720px) {
  body[data-entete="barre"] .site-header,
  body[data-entete="replie"] .site-header { gap: 12px; padding: 10px 14px; }
  body[data-entete="barre"] .site-header img,
  body[data-entete="replie"] .site-header img { width: 48px; }
  body[data-bandeau="demi"] .hero__titre { font-size: 30px; }
}

/* ------------------------------------------------------------ les caractères
   Quatre paires, nommées par ce qu'elles disent : personne ne choisit
   « Fraunces » en connaissance de cause. Le titre et le texte vont toujours
   ensemble — c'est l'accord qui fait le caractère, pas la police prise seule.

   Les fichiers sont servis depuis ce domaine, comme les deux d'origine. Une
   police appelée chez Google, c'est l'adresse IP de chaque visiteur envoyée à
   un tiers à chaque page — ce que la CNIL a jugé illicite — et un aller-retour
   de plus avant la première lettre. Seule la paire choisie est chargée : un
   visiteur ne télécharge jamais les huit familles. */

body[data-caracteres="franc"] {
  --font-titre: "Archivo", system-ui, sans-serif;
  --font-texte: "Work Sans", system-ui, sans-serif;
}
body[data-caracteres="editorial"] {
  --font-titre: "Playfair Display", Georgia, serif;
  --font-texte: "Karla", system-ui, sans-serif;
}
body[data-caracteres="chaleureux"] {
  --font-titre: "Bitter", Georgia, serif;
  --font-texte: "Lora", Georgia, serif;
}

/* Cormorant Garamond est une police MENUE : elle est posée à 20 px pour tenir
   la même hauteur d'œil qu'une linéale à 17. Les trois autres paires seraient
   énormes à cette taille — on ramène donc le corps du texte quand elles
   servent. Sans cela, « Franc » rendait une page de manuel scolaire. */
body[data-caracteres="franc"],
body[data-caracteres="editorial"],
body[data-caracteres="chaleureux"] { font-size: 17px; line-height: 1.65; }
body[data-caracteres="franc"] .hero__titre,
body[data-caracteres="editorial"] .hero__titre,
body[data-caracteres="chaleureux"] .hero__titre { font-size: 40px; }
body[data-caracteres="franc"] .titre-section,
body[data-caracteres="editorial"] .titre-section,
body[data-caracteres="chaleureux"] .titre-section { font-size: 44px; }

@media (max-width: 720px) {
  body[data-caracteres="franc"] .titre-section,
  body[data-caracteres="editorial"] .titre-section,
  body[data-caracteres="chaleureux"] .titre-section { font-size: 30px; }
}