/*
 * Feuille de style du site public.
 *
 * La palette et les deux familles de caracteres viennent du site d'origine
 * (therapeute-mtc.com) : vert sauge pour les aplats et les boutons, brun pour
 * les titres, creme pour les encadres, vert sombre pour le pied de page.
 * Playfair Display pour les titres, Roboto pour le texte courant.
 *
 * Tout part des jetons ci-dessous : changer une couleur du site se fait ici et
 * seulement ici.
 *
 * La structure suit celle du contenu : section > ligne > colonne > bloc. Les
 * largeurs de colonnes arrivent en variable CSS (--colonnes) posee par le
 * moteur de rendu, ce qui evite une classe par disposition possible.
 */

:root {
  --vert: #6e8b74;
  --vert-fonce: #5c7a62;
  --vert-clair: #a8b5a2;
  --vert-olive: #747e68;
  --vert-nuit: #283f37;
  --brun: #4e3b31;
  --brun-doux: #7a6a5f;
  --texte: #6f6a63;
  --creme: #fffcf4;
  --creme-chaud: #f9f6f1;
  --gris-doux: #e6e7e2;
  --gris-trait: #dcdcd7;
  --blanc: #ffffff;

  --titre: "Playfair Display", Georgia, serif;
  --corps: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --largeur: 1140px;
  --largeur-etroite: 1010px;
  --rayon: 12px;
  --rayon-large: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--vert-fonce); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ------------------------------------------------------------------ entete */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Le fond de la barre au defilement, comme toute l'apparence du menu, se
   regle dans le back-office : la page publiee pose alors --menu-* et ces
   valeurs de repli s'effacent. */
.entete.est-posee {
  background: var(--menu-fond, #283f37);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}

.entete__nav {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.entete__menu {
  display: flex;
  gap: var(--menu-ecart, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.entete__menu a {
  color: var(--menu-couleur, var(--blanc));
  text-decoration: none;
  font-family: var(--menu-police, var(--corps));
  font-size: var(--menu-taille, 16px);
  font-weight: var(--menu-graisse, 400);
  letter-spacing: var(--menu-espacement, .2px);
  text-transform: var(--menu-casse, none);
  opacity: .92;
  transition: opacity .2s ease, color .2s ease;
}

.entete__menu a:hover {
  color: var(--menu-survol, var(--menu-couleur, var(--blanc)));
  opacity: 1;
  text-decoration: underline;
}

.entete__bascule {
  display: none;
  width: 46px; height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.entete__bascule-trait,
.entete__bascule-trait::before,
.entete__bascule-trait::after {
  position: absolute;
  left: 11px;
  width: 24px; height: 2px;
  background: var(--blanc);
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}

.entete__bascule-trait { top: 19px; }
.entete__bascule-trait::before { top: -7px; left: 0; }
.entete__bascule-trait::after { top: 7px; left: 0; }

.entete__bascule[aria-expanded="true"] .entete__bascule-trait { background: transparent; }
.entete__bascule[aria-expanded="true"] .entete__bascule-trait::before { transform: translateY(7px) rotate(45deg); }
.entete__bascule[aria-expanded="true"] .entete__bascule-trait::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- sections */

/* Les quatre marges interieures et les quatre exterieures sont reglees au
   pixel dans le back-office, et arrivent en variables posees sur la section.
   Les replis ci-dessous decrivent une section ordinaire. */
.section {
  position: relative;
  --pad-haut-utile: var(--pad-haut, 96px);
  --pad-bas-utile: var(--pad-bas, 96px);
  padding: var(--pad-haut-utile) var(--pad-droite, 0px) var(--pad-bas-utile) var(--pad-gauche, 0px);
  margin: var(--mar-haut, 0px) var(--mar-droite, 0px) var(--mar-bas, 0px) var(--mar-gauche, 0px);
}

.section--blanc { background: var(--blanc); }
.section--clair { background: var(--creme); }
.section--vert  { background: var(--vert); color: var(--blanc); }
.section--nuit  { background: var(--vert-nuit); color: var(--blanc); }

.section--fond-image {
  background-size: cover;
  background-position: center;
  color: var(--blanc);
}

.section__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .10) 45%, rgba(0, 0, 0, .22) 100%);
}

/* Section d'accueil : presque toute la hauteur d'ecran, contenu centre
   verticalement, et de la place en dessous pour la banniere qui deborde.
 *
 * `content-box` n'est pas un detail : avec le `border-box` general, les
 * marges interieures se logeaient DANS les 700 px, donc les regler au pixel
 * ne bougeait pas le bord de la section. Ca ne faisait que redistribuer le
 * vide autour du contenu centre, qui remontait ou descendait : le reglage du
 * back-office paraissait s'appliquer au bloc plutot qu'a la section.
 * Ici la hauteur est un plancher pour le CONTENU, et les marges s'ajoutent
 * par-dessus, comme sur n'importe quelle autre section.
 *
 * Le plancher vaut l'ancienne hauteur totale moins les marges que la section
 * d'accueil porte (140 + 90) : la page ne change pas d'allure. */
.section--plein {
  box-sizing: content-box;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.conteneur {
  position: relative;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px;
}

.conteneur--etroit { max-width: var(--largeur-etroite); }
.conteneur--plein { max-width: none; padding: 0; }

/* L'ancre est decalee vers le haut de la hauteur de l'entete : sans ca, un
   clic sur le menu cache le titre de la section derriere la barre fixe. */
.ancre {
  display: block;
  position: relative;
  top: -90px;
  visibility: hidden;
}

/* ------------------------------------------------------ lignes et colonnes */

.ligne {
  display: grid;
  grid-template-columns: var(--colonnes, 1fr);
}

.ligne--espace-normal { gap: 44px; }
.ligne--espace-large  { gap: 70px; }
.ligne--centre { align-items: center; }
.ligne:not(.ligne--centre) { align-items: start; }
.ligne + .ligne { margin-top: 40px; }

.colonne { min-width: 0; }
.colonne > * + * { margin-top: 22px; }

/* Un sur-titre est collé au titre qu'il annonce. */
.colonne > .titre--surtitre + .titre { margin-top: 6px; }

/* ------------------------------------------------------------------ titres */

.titre { margin: 0; }
.titre.est-centre { text-align: center; }

.titre--section {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.2;
  color: var(--brun);
}

.section--vert .titre--section,
.section--nuit .titre--section,
.section--fond-image .titre--section { color: var(--blanc); }

.titre--hero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.18;
  color: var(--blanc);
  max-width: 15em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.titre--contenu {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.25;
  color: var(--vert-fonce);
}

.titre--surtitre {
  font-family: var(--corps);
  font-weight: 700;
  font-size: 19px;
  color: var(--vert-fonce);
}

.titre--pied {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 28px;
  color: #f7f2e7;
  text-align: center;
}

/* Une ligne a deux colonnes : le titre n'occupe que sa colonne et se plie,
   comme sur le site d'origine. */
.ligne--multiple .titre--section { max-width: 560px; }

/* -------------------------------------------------------------------- texte */

.texte--normale { font-size: 16px; }
.texte--petite { font-size: 15px; }
.texte.est-centre { text-align: center; }
.texte p:first-child { margin-top: 0; }
.texte p:last-child { margin-bottom: 0; }
.texte p { margin: 0 0 20px; }
.texte strong { color: var(--brun); }
.section--vert .texte strong,
.section--nuit .texte strong,
.section--fond-image .texte strong { color: inherit; }
.texte ul, .texte ol { margin: 0 0 20px; padding-left: 22px; }
.texte li { margin-bottom: 8px; }

/* ------------------------------------------------------------------ visuels */

/* <picture> n'est qu'une enveloppe : c'est l'image a l'interieur qui porte la
   mise en forme, et l'enveloppe ne doit pas ajouter de ligne de base inline. */
.visuel picture { display: block; }

.visuel img {
  width: 100%;
  height: var(--hauteur, auto);
  object-fit: cover;
}

.visuel--arrondi-normal img { border-radius: var(--rayon-large); }
.visuel--arrondi-droite img { border-radius: 0 var(--rayon-large) var(--rayon-large) 0; }
.visuel--arrondi-aucun img { border-radius: 0; }

/* ------------------------------------------------------------------ boutons */

.zone-bouton.est-centre { text-align: center; }

.bouton {
  display: inline-block;
  border-radius: 6px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  background: var(--vert-clair);
  color: var(--blanc);
  transition: background-color .2s ease, transform .2s ease;
}

.bouton:hover { background: var(--vert-fonce); color: var(--blanc); transform: translateY(-1px); }
.bouton--vert { background: var(--vert-clair); }
.bouton--clair { background: var(--blanc); color: #2c2c2c; }
.bouton--clair:hover { background: var(--creme); color: #2c2c2c; }
.bouton--blanc { background: var(--blanc); color: var(--vert-nuit); font-weight: 700; border-radius: 999px; }
.bouton--blanc:hover { background: var(--creme); color: var(--vert-nuit); }

/* ----------------------------------------------------------------- encadres */

.boite {
  border-radius: var(--rayon);
  padding: 26px 30px 30px;
  color: var(--texte);
}

.boite--creme { background: var(--creme); box-shadow: 0 2px 10px rgba(78, 59, 49, .06); }
.boite--gris { background: var(--gris-doux); }
.boite--blanc { background: var(--blanc); box-shadow: 0 2px 10px rgba(78, 59, 49, .08); }

/* Sur l'aplat vert, le creme des encadres est legerement plus chaud, comme
   sur le site d'origine. */
.section--vert .boite--creme { background: var(--creme-chaud); }

/* Un encadre peut prendre toute la hauteur de sa colonne : les encadres
   voisins s'alignent alors en bas, quelle que soit la longueur de leur texte.
   Trois maillons sont necessaires, car par defaut la ligne aligne ses colonnes
   en haut (`align-items: start`) et une colonne ne s'etire pas d'elle-meme.
   Le selecteur traverse aussi l'enveloppe `.ed-bloc` du canevas d'edition,
   sinon l'encadre s'etirerait dans la page publiee et pas dans l'editeur. */
.colonne:has(.boite--pleine) {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.colonne > .boite--pleine,
.colonne > .ed-bloc:has(> .boite--pleine),
.ed-bloc > .boite--pleine { flex: 1 0 auto; }

.colonne > .ed-bloc:has(> .boite--pleine) { display: flex; flex-direction: column; }

.boite__icone {
  display: block;
  width: 40px; height: 40px;
  color: var(--vert-olive);
}

.boite__icone svg { width: 100%; height: 100%; }

.boite__titre {
  font-family: var(--corps);
  font-weight: 700;
  font-size: 18px;
  color: #3c3a35;
  margin: 0 0 8px;
}

.boite__texte { font-size: 15px; line-height: 1.75; }
.boite__texte p { margin: 0 0 12px; }
.boite__texte p:last-child { margin-bottom: 0; }
.boite__texte ul { margin: 0 0 12px; padding-left: 20px; }

/* Pictogramme a gauche : grille de deux colonnes, le picto sur deux rangs. */
.boite--icone-gauche {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 18px;
}

.boite--icone-gauche .boite__icone { grid-row: span 2; margin-top: 4px; }

.boite--icone-haut .boite__icone { margin: 4px auto 18px; color: var(--vert-fonce); }

/* ---------------------------------------------------------------- bannieres */

.banniere {
  border-radius: var(--rayon);
  padding: 30px 46px;
  text-align: center;
  font-style: italic;
  font-size: 17px;
  line-height: 1.85;
}

.banniere p { margin: 0; }
.banniere--vert { background: var(--vert); color: var(--blanc); }
.banniere--creme { background: var(--creme); color: var(--brun); }

/* Banniere a cheval sur le bord bas d'une section.
 *
 * Elle n'est pas DANS la section : le moteur de rendu la sort et la pose
 * entre les deux voisines, puis elle est remontee sur le bord. Trois choses
 * en decoulent, et c'est pour elles que le detour existe.
 *
 * 1. Le reglage est un POURCENTAGE de la banniere elle-meme. `translateY`
 *    compte ses pourcentages sur la hauteur de l'element, la seule facon en
 *    CSS de dire « la moitie de cette boite ». Un reglage en pixels serait
 *    juste sur un ecran et faux sur l'autre : la meme banniere fait 194 px
 *    sur un bureau et 163 sur un telephone.
 *
 * 2. Le recouvrement devient impossible. La banniere garde toute sa place
 *    dans le flux entre les deux sections : ce qu'elle ne montre pas sous le
 *    bord, elle le laisse en espace avant la voisine. Il n'y a plus rien a
 *    « reserver », donc plus rien a oublier de reserver.
 *
 * 3. La part qui depasse et l'air qui suit sont le meme nombre : 50 % dehors
 *    laisse 50 % d'espace, 100 % dehors n'en laisse aucun. La marge
 *    exterieure basse de la section s'ajoute apres, et sert a regler cet air.
 *
 * Ce que ca a remplace : une marge negative sur la banniere, qui remontait le
 * bord de la section -- donc changeait sa hauteur ET le centrage de son
 * contenu ET la position de la banniere, tout a la fois. On tapait 110, il en
 * sortait 56, et au-dela de sa propre hauteur elle ne bougeait plus. */
.banniere-pont {
  /* Au-dessus du fond de la section suivante, qui vient apres elle dans la
     page et la recouvrirait. L'entete (40) et le retour en haut (30) restent
     au-dessus. */
  position: relative;
  z-index: 2;
  margin-bottom: var(--mar-bas, 0px);
  transform: translateY(calc(-100% + var(--debord-part, 50%)));
}

.banniere--chevauche {
  max-width: 810px;
  margin: 0 auto;
  padding: 34px 46px;
}
/* ---------------------------------------------------------------- onglets */

/* Un sommaire a gauche, le contenu a droite.
 *
 * Les libelles sont des noms de pratiques (« Massage traditionnel chinois ») :
 * en rangee de pastilles pleines ils formaient quatre paves de largeurs
 * inegales, blanc sur vert pale pour les inactifs — qui avaient donc l'air
 * desactives — et sur telephone une pile de quatre bandes avant la premiere
 * ligne de texte. En colonne ils se lisent comme un sommaire, et leur longueur
 * ne decide plus de la mise en page.
 *
 * La largeur du sommaire est en pixels et non en `em` : `Site\Tailles` en a
 * besoin pour conseiller une taille de vignette (voir SOMMAIRE_ONGLETS).
 */
.onglets__cadre {
  display: grid;
  grid-template-columns: 230px 1fr;
  column-gap: 36px;
}

/* Le sommaire s'etire sur toute la hauteur du panneau : son filet separe les
   deux colonnes au lieu de s'arreter sous la derniere entree. */
.onglets__barre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  border-right: 1px solid var(--gris-trait);
}

.onglets__bouton {
  position: relative;
  border: 0;
  border-radius: 6px 0 0 6px;
  padding: 11px 20px 11px 17px;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  color: var(--texte);
  background: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

/* Le trait de l'entree active garde sa place meme transparent : le libelle ne
   se decale pas quand on change d'onglet. */
.onglets__bouton::before {
  content: '';
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 3px;
  background: transparent;
}

.onglets__bouton:hover { background: var(--creme-chaud); color: var(--brun); }
.onglets__bouton.est-actif { background: var(--creme-chaud); color: var(--brun); }
.onglets__bouton.est-actif::before { background: var(--vert); }

.onglets__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 26px;
  color: var(--brun);
  margin: 0 0 14px;
}

.onglets__texte { font-size: 15px; }
.onglets__texte p { margin: 0 0 18px; }
.onglets__texte p:last-child { margin-bottom: 0; }

/* Les panneaux se superposent dans la meme case de grille : la hauteur du bloc
   est celle du plus long, donc la page ne saute pas d'un onglet a l'autre. Le
   masquage passe par la classe et non par l'attribut `hidden` — un panneau en
   `display: none` ne prendrait pas de place, et le saut reviendrait. Sans
   JavaScript, le HTML rendu ne porte `est-actif` que sur le premier panneau :
   l'onglet ouvert reste le bon. */
.onglets__panneaux { display: grid; }

.onglets__panneau {
  grid-area: 1 / 1;
  min-width: 0;
}

.onglets__panneau:not(.est-actif) { visibility: hidden; }

.onglets__panneau picture { display: block; }

/* La vignette n'est plus une bande de 150 px sur toute la largeur : a ce
   rapport la photo etait ecrasee et ne servait plus qu'a decorer. */
.onglets__image {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-top: 22px;
}

/* Mode diaporama : mêmes panneaux, pastilles et fleches a la place du
   sommaire. Pas de grille a deux colonnes ici, et un cadre discret qui tient
   les fleches a distance du texte. */
.onglets__cadre--diaporama {
  position: relative;
  display: block;
  padding: 26px 30px 34px;
  border: 1px solid var(--gris-trait);
  border-radius: var(--rayon-large);
}

.onglets__pastilles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.onglets__pastille {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vert-clair);
  cursor: pointer;
}

.onglets__pastille.est-actif { background: #4e6b54; }

.onglets__fleches {
  position: absolute;
  inset: 50% 10px auto 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.onglets__fleche {
  pointer-events: auto;
  width: 38px; height: 38px;
  border: 1px solid var(--gris-trait);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--brun);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.onglets__fleche:hover { background: var(--blanc); }

/* ------------------------------------------------------------------ tarifs */

.tarifs__liste { display: grid; gap: 26px; }

.tarif__entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.tarif__label,
.tarif__prix {
  font-weight: 700;
  font-size: 19px;
  color: var(--vert-fonce);
}

/* Les pointilles s'etirent entre le libelle et le prix, comme une carte. */
.tarif__pointilles {
  flex: 1;
  border-bottom: 1px dotted #c9c9c2;
  transform: translateY(-4px);
}

.tarif__texte { font-size: 15.5px; }
.tarif__texte p { margin: 0 0 6px; }
.tarif__texte ul { margin: 6px 0 0; padding-left: 22px; }
.tarif__texte li { margin-bottom: 10px; }

.tarifs__notes { margin-top: 40px; font-size: 15px; }
.tarifs__notes em { color: var(--brun-doux); }
.tarifs__notes ul { list-style: none; padding: 0; margin: 8px 0 18px; }
.tarifs__notes li { position: relative; padding-left: 18px; font-style: italic; }
.tarifs__notes li::before { content: "•"; position: absolute; left: 0; }

/* --------------------------------------------------------------------- FAQ */

.faq__liste { border-top: 1px solid var(--gris-trait); }
.faq__item { border-bottom: 1px solid var(--gris-trait); }

.faq__question {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 20px 18px 42px;
  font-size: 17px;
  color: #3c3a35;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::before {
  content: "+";
  position: absolute;
  left: 16px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--brun);
}

.faq__item[open] .faq__question::before { content: "–"; }

.faq__reponse { padding: 0 24px 24px 42px; font-size: 16px; }
.faq__reponse p { margin: 0 0 12px; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- coordonnees et divers */

.coordonnees { margin: 0; text-align: center; }
.coordonnees a { color: inherit; text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; }
.colonne > .coordonnees + .coordonnees { margin-top: 14px; }

.espace { width: 100%; }

.separateur { border: 0; border-top: 1px solid var(--gris-trait); margin: 0; }
.separateur--epais { border-top-width: 3px; }

/* --------------------------------------------------------- retour en haut */

.retour-haut {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 30;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: var(--vert-nuit);
  color: var(--blanc);
  border-radius: 6px;
  text-decoration: none;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.retour-haut.est-visible { opacity: .9; pointer-events: auto; }
.retour-haut:hover { opacity: 1; }

/* ------------------------------------------------------------- responsive */

@media (min-width: 1001px) {
  /* Une image peut aller toucher le bord gauche de la fenetre. */
  .visuel--debord-gauche { margin-left: calc((var(--largeur) - 100vw) / 2 - 20px); }
}

@media (max-width: 1000px) {
  /* Les marges reglees au pixel valent pour le bureau. Sur un petit ecran on
     en retire un peu plus d'un quart, sans jamais descendre sous 44px : une
     section deja serree garde son air, une section aeree n'en perd pas trop,
     et une section sans marge (le `min`) n'en gagne pas. */
  .section {
    --pad-haut-utile: min(var(--pad-haut, 96px), max(44px, calc(var(--pad-haut, 96px) * .73)));
    --pad-bas-utile: min(var(--pad-bas, 96px), max(44px, calc(var(--pad-bas, 96px) * .73)));
  }
  .section--plein { min-height: 392px; }   /* 560 - 168 de marges */
  .titre--section { font-size: 34px; }
  .titre--hero { font-size: 40px; }
  .titre--contenu { font-size: 28px; }
  .ligne--multiple { grid-template-columns: 1fr; gap: 34px; }
  .ligne--multiple .titre--section { max-width: none; }
  .visuel img { height: min(var(--hauteur, 380px), 380px); }
  .visuel--arrondi-droite img { border-radius: var(--rayon-large); }
  .boite--icone-haut .boite__icone { margin-left: 0; }

  /* Le sommaire passe au-dessus du contenu : quatre lignes de texte, la ou la
     rangee de pastilles faisait quatre bandes epaisses. */
  .onglets__cadre {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .onglets__barre {
    border-right: 0;
    border-bottom: 1px solid var(--gris-trait);
    padding-bottom: 10px;
  }

  .onglets__bouton { border-radius: 6px; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .section--plein { min-height: 352px; }   /* 520 - 168 de marges */
  .titre--hero { font-size: 32px; }
  .titre--section { font-size: 28px; }
  .banniere { padding: 24px 22px; font-size: 15.5px; }
  .onglets__cadre--diaporama { padding: 18px 16px 26px; border-radius: 18px; }
  .onglets__image { aspect-ratio: 16 / 10; }
  .onglets__fleches { inset: auto 4px 8px 4px; }
  .tarif__entete { flex-wrap: wrap; }
  .tarif__pointilles { display: none; }
  .tarif__prix { margin-left: auto; }
  .faq__question { padding-left: 34px; }
  .faq__reponse { padding-left: 34px; }

  .entete__bascule { display: block; }
  .entete__nav { padding: 12px 16px; }

  .entete__menu {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(40, 63, 55, .98);
    padding: 8px 0 16px;
    display: none;
  }

  .entete__menu.est-ouvert { display: flex; }
  .entete__menu li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .entete__menu a { display: block; padding: 14px 22px; }
}