.bloc {
  padding-block: var(--rythme);
}

.bloc:nth-of-type(even) {
  background: var(--fond-2);
}

/* Hero */

/* Fond clair et non plus photo pleine largeur : le texte vit dans sa
   propre colonne, l'image dans une arche à côté, comme dans la maquette. */
.hero {
  background: var(--fond);
}

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  padding-block: var(--rythme);
}

/* Sans photographie, le bandeau garde une seule colonne : le texte occupe la
   largeur du conteneur, borné à la mesure de lecture, plutôt que de s'étaler
   sur toute la page ou de laisser une colonne vide à droite. */
.hero--sans-image .hero__contenu {
  max-width: var(--mesure);
}

@media (min-width: 900px) {
  .hero--sans-image .hero__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .hero__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  /* Texte à gauche, image à droite : l'ordre source place l'image en
     premier (pour qu'elle arrive en tête à l'empilement mobile), les deux
     colonnes échangent leur place seulement à partir de ce point de rupture.
     Les repères tiennent la même colonne que l'image, dont ils prennent la
     place sur les pages sans photographie. */
  .hero__media,
  .hero__reperes {
    order: 2;
  }

  .hero__contenu {
    order: 1;
  }
}

.hero__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--arche);
  overflow: hidden;
}



/* Repères de bandeau : les pages sans photographie occupent leur colonne
   libre avec deux ou trois faits utiles, empilés et séparés d'un filet.
   Empilés, et non alignés en rangée comme un tableau de chiffres : ce sont
   des points de repère avant un rendez-vous, pas des statistiques. */
.hero__reperes {
  /* À l'empilement mobile, les repères passent après le texte : contrairement
     à une photographie, un chiffre nu posé avant le titre de la page ne veut
     rien dire. */
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__repere {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--accent);
}

.hero__repere-valeur {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1;
  color: var(--texte);
}

.hero__repere-libelle {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--libelle);
  max-width: 26ch;
}

/* Sous le point de rupture, les repères passent après le texte et le filet
   vertical n'a plus de sens : ils s'alignent alors sur une rangée. */
@media (width < 56.25rem) {
  .hero__reperes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
  }
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__contenu h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  line-height: 1.1;
}

.hero__contenu h1 em {
  font-style: italic;
}

.hero__surtitre {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--libelle);
}

.hero__soustitre {
  max-width: var(--mesure);
  color: var(--texte-doux);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0;
}

/* Filet décoratif sous les actions, purement ornemental (aria-hidden) :
   --accent y sert de trait, jamais de texte. */
.hero__filet {
  width: 3rem;
  height: 0;
  margin: 2rem 0 0;
  border: none;
  border-top: 2px solid var(--accent);
}

/* Bloc de texte */

.bloc--texte p:last-child {
  margin-bottom: 0;
}

/* .bloc.bloc--texte-… plutôt que .bloc--texte-… seul : .bloc:nth-of-type(even)
   pose déjà un fond, à spécificité égale (deux classes). Sans ce doublement,
   un bloc de texte en position paire garderait son fond alterné quel que
   soit le fond demandé ici. */
.bloc.bloc--texte-sable {
  background: var(--sable);
}

/* Sur fond vert, tout le texte passe en crème (8,65:1) : le terracotta de
   texte (--accent-fonce) tombe à 1,48:1 sur ce fond et est donc écarté
   des liens, au profit du crème souligné pour rester repérable. */
.bloc.bloc--texte-vert {
  background: var(--vert);
  color: var(--creme);
}

.bloc--texte-vert h2 {
  color: var(--creme);
}

.bloc--texte-vert a {
  color: var(--creme);
  text-decoration: underline;
}

.bloc--texte-vert a:hover {
  color: var(--sable);
}

/* Cartes */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 2rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Les cartes se posaient sur --fond, à quelques unités du fond des sections
   alternées : sans bordure et sous une ombre trop diffuse, elles se
   confondaient avec la page. Elles prennent le fond le plus clair du site,
   un filet net, et une ombre à deux niveaux — un contact rapproché qui les
   décolle, une portée large qui leur donne du volume. */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  overflow: hidden;
  background: var(--carte);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  box-shadow:
    0 1px 2px rgb(42 39 36 / 8%),
    0 14px 30px -20px rgb(42 39 36 / 40%);
  transition:
    transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

/* Une amorce ocre en tête de carte : courte au repos, elle file sur toute la
   largeur au survol. C'est le même trait que le fil de la lignée, repris à
   l'échelle de la carte. Les cartes « approche » en sont dispensées : leur
   bande illustrée occupe déjà cette place. */
.carte:not(.carte--approche)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 3rem;
  background: var(--accent);
  transition: width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carte:hover {
  transform: translateY(-3px);
  border-color: var(--bord-marque);
  box-shadow:
    0 2px 4px rgb(42 39 36 / 10%),
    0 22px 44px -22px rgb(42 39 36 / 45%);
}

.carte:hover:not(.carte--approche)::before {
  width: 100%;
}

/* Une carte cliquable garde le même relief quand on l'atteint au clavier. */
.carte:focus-within {
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .carte,
  .carte:not(.carte--approche)::before {
    transition: none;
  }

  .carte:hover {
    transform: none;
  }
}

.carte__titre {
  margin: 0;
}

.carte__texte {
  color: var(--texte-doux);
  margin-bottom: 0.5rem;
}

.carte__lien {
  margin-top: auto;
  font-weight: 600;
  color: var(--accent-fonce);
}

/* Cartes, variante « motifs » : une grille de cartes ordinaires (titre et
   texte facultatif), sans lien de sortie puisqu'il ne s'agit pas d'une
   approche à part entière.

   Trois colonnes plutôt que quatre : la page « hypnose » décrit chaque motif
   en trois ou quatre lignes, et à quatre colonnes ces paragraphes tombaient
   en colonnes de cinq mots de large. La largeur minimale d'une carte est
   donc dictée par le plus long des textes qu'elle accueille, pas par le plus
   court. */
.cartes--motifs {
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

.carte--motif {
  gap: 0.375rem;
}

/* Cartes, variante « approches » : deux blocs larges plutôt qu'une grille
   dense, avec un surtitre numéroté au-dessus du titre. */
.cartes--approches {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;
}

.carte--approche {
  /* La bande illustrée remonte ce rembourrage en marge négative : les deux
     valeurs doivent rester liées, sinon l'image déborde de la carte. */
  --carte-rembourrage: 2.5rem;

  padding: var(--carte-rembourrage);
}

/* Bande illustrée en tête de carte, comme dans la maquette : elle sort du
   rembourrage de la carte pour toucher ses trois bords, et sa hauteur est
   fixe pour qu'une image carrée et une image panoramique donnent la même
   silhouette. La hauteur fixe tient aussi le CLS à zéro. */
.carte__media {
  margin: calc(-1 * var(--carte-rembourrage)) calc(-1 * var(--carte-rembourrage)) 1.75rem;
  height: 11.875rem;
  overflow: hidden;
  background: var(--sable);
}

.carte__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__surtitre {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--libelle);
}

/* Étapes */

/* Trois colonnes côte à côte, chacune surmontée d'un filet terracotta,
   plutôt qu'une liste verticale à badges ronds. */
.etapes {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Les trois étapes passent côte à côte dès qu'il y a la place, comme dans
   la maquette. auto-fit laissait la grille enrouler en 2+1 : le nombre de
   colonnes est ici explicite. */
@media (min-width: 60rem) {
  .etapes {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.etape {
  border-top: 3px solid var(--accent);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Numéro en serif terracotta : --accent-fonce, jamais --accent, puisqu'il
   s'agit ici de texte et non plus d'un simple filet ou remplissage. */
.etape__num {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent-fonce);
}

.etape__titre {
  margin: 0;
}

.etape__texte {
  color: var(--texte-doux);
  margin-bottom: 0;
}

/* Témoignages */

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Les avis portent un halo doré, discret au repos et plus vif au survol :
   ce sont les seules paroles du site qui ne soient pas d'Aline, et le seul
   endroit où la page se permet de briller un peu. Deux couches d'ombre —
   une lueur large et colorée, un contact rapproché plus sobre — plutôt
   qu'un contour lumineux, qui aurait durci les bords. */
.temoignage {
  position: relative;
  margin: 0;
  padding: 1.75rem 2rem;
  background: var(--carte);
  border: 1px solid var(--peche-bord);
  border-radius: var(--rayon);
  box-shadow:
    0 0 0 1px rgb(180 136 63 / 10%),
    0 0 22px -6px rgb(180 136 63 / 30%),
    0 10px 26px -18px rgb(42 39 36 / 35%);
  transition:
    box-shadow 320ms ease,
    border-color 320ms ease,
    transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Le reflet : une bande claire en haut de la carte, qui s'éclaire au survol.
   Elle ne couvre que le bord supérieur, au-dessus du texte : étendue à toute
   la carte, elle délavait les premières lignes de la citation — un
   pseudo-élément positionné se peint devant les enfants qui ne le sont pas.
   Le contenu est en outre remonté d'un cran, pour que le reflet reste
   décoratif quoi qu'il arrive. */
.temoignage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3.5rem;
  border-radius: var(--rayon) var(--rayon) 0 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 0%) 70%);
  opacity: 0.55;
  transition: opacity 320ms ease;
}

.temoignage > * {
  position: relative;
  z-index: 1;
}

.temoignage:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgb(180 136 63 / 22%),
    0 0 34px -4px rgb(180 136 63 / 48%),
    0 16px 34px -20px rgb(42 39 36 / 42%);
}

.temoignage:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .temoignage,
  .temoignage::after {
    transition: none;
  }

  .temoignage:hover {
    transform: none;
  }
}

.temoignage p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  margin-bottom: 1.5rem;
}

/* Purement décoratif (aria-hidden) : --bord-marque n'a pas à passer le
   seuil de contraste du texte, mais --accent en aurait un besoin réel si
   quelqu'un venait un jour l'y lire malgré l'attribut, donc on l'évite. */
.temoignage__guillemet {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 0.6;
  color: var(--bord-marque);
}

.temoignage cite {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--libelle);
}

/* Cabinets */

.cabinets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cabinet {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.75rem;
  background: var(--fond);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}

.cabinet__ville {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
}

.cabinet__cp {
  color: var(--texte-doux);
}

.cabinet__mention {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-fonce);
}

/* Appel à l'action */

/* Toujours sur --vert, comme dans la maquette, plutôt que de suivre
   l'alternance de fond des blocs voisins (.bloc:nth-of-type(even)) :
   .bloc.bloc--cta l'emporte à spécificité égale sur cette alternance. */
.bloc.bloc--cta {
  background: var(--vert);
  color: var(--creme);
  text-align: center;
}

.bloc--cta h2 {
  color: var(--creme);
}

.bloc--cta p {
  margin-inline: auto;
}

.bloc--cta .bouton--secondaire {
  border-color: var(--creme);
  color: var(--creme);
}

.bloc--cta .bouton--secondaire:hover {
  background: color-mix(in srgb, var(--creme) 15%, transparent);
  color: var(--creme);
}

.bloc__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0;
}

/* Formulaire de contact */

.formulaire {
  max-width: none;
}

.formulaire__champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

.formulaire__champ label {
  font-weight: 600;
}

.formulaire__champ input,
.formulaire__champ select,
.formulaire__champ textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--texte-doux);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
}

.formulaire__champ textarea {
  resize: vertical;
}

.formulaire__champ--case {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.formulaire__champ--case input[type='checkbox'] {
  width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  /* La case visible reste à 1.25rem (20px), mais la zone cliquable est
     portée à 44x44px (cible tactile minimale) via un padding compensé
     par une marge négative égale : la boîte de marge (qui détermine la
     place prise dans la mise en page) redevient 20x20, tandis que la
     boîte de remplissage (cliquable) déborde de façon centrée et
     symétrique tout autour, sans décaler le libellé voisin. */
  box-sizing: content-box;
  padding: 0.75rem;
  margin: -0.75rem;
}

.formulaire__champ--case label {
  font-weight: 400;
  margin: 0;
}

/* Le piège anti-spam doit rester dans le DOM, pour qu'un robot qui remplit
   tous les champs le remplisse aussi, mais rester invisible et hors du
   parcours de tabulation pour une personne. display: none est évité
   volontairement : certains robots l'ignorent et ne remplissent pas les
   champs qu'il masque, ce qui viderait le piège de son utilité. */
.formulaire__piege {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulaire__retour {
  min-height: 1.5em;
  margin: 0 0 1.25rem;
  font-weight: 600;
}

.formulaire__retour:empty {
  margin: 0;
}

.formulaire__retour--ok {
  padding-left: 0.75rem;
  border-left: 3px solid var(--vert);
}

.formulaire__retour--ok::before {
  content: '✓ ';
}

.formulaire__retour--erreur {
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent-fonce);
}

.formulaire__retour--erreur::before {
  content: '⚠ ';
}

/* Carte insérée dans la page, deux colonnes à partir de 900px : le texte
   et les coordonnées à gauche, le formulaire à droite, comme la maquette. */
.formulaire-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--fond-2);
  border-radius: var(--rayon);
}

@media (min-width: 900px) {
  .formulaire-bloc {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.formulaire-bloc__intro > :last-child {
  margin-bottom: 0;
}

.formulaire-bloc__coordonnees {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bord);
  color: var(--texte-doux);
}

.formulaire-bloc__coordonnees a {
  color: var(--accent-fonce);
}

/* Le calendrier vient d'un service tiers, chargé au défilement. Le temps
   qu'il arrive — et s'il n'arrive jamais, réseau coupé, bloqueur, service
   indisponible — la place qu'il occupera reste réservée et montre en son
   centre de quoi prendre rendez-vous autrement. Auparavant, le lien de
   secours attendait sous sept cents pixels de vide, là où personne ne
   descend. */
.booking {
  position: relative;
  min-height: 46rem;
  margin-top: 1.5rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
}

.booking__attente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
}

.booking__attente-texte {
  margin: 0;
  color: var(--libelle);
  font-size: 0.9375rem;
}

/* Le lien de secours vit sous le cadre du calendrier, jamais dessous au sens
   des couches : le cadre du service se pose par-dessus l'attente, et l'y
   laisser le rendait inatteignable au moment précis où il sert. */
.booking__secours a {
  font-weight: 500;
}

/* Une fois arrivé, le cadre du service se pose par-dessus l'attente et la
   couvre. S'il reste transparent parce qu'il n'a rien pu charger, l'attente
   continue de se voir au travers : c'est exactement ce qu'on veut. */
.booking__cadre {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 46rem;
  border: 0;
  border-radius: var(--rayon);
}

.booking__secours {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fond-2);
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

/* Citation */

/* Toujours sur --vert, seul fond que la maquette lui donne : le texte y
   passe entièrement en --creme (8,65:1), y compris les repères, distingués
   par la taille et la casse plutôt que par une deuxième couleur. */
.bloc.bloc--citation {
  background: var(--vert);
  color: var(--creme);
}

.citation {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: center;
}

/* citation--sans-image est posée sur la <section>, .citation étant le
   conteneur en grille juste en dessous. */
.citation--sans-image .citation {
  grid-template-columns: minmax(0, 1fr);
}

.citation--sans-image .citation__media {
  display: none;
}

.citation__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--arche);
  overflow: hidden;
}

.citation__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.citation__corps {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  max-width: var(--mesure);
}

.citation__texte {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  color: var(--creme);
}

.citation__attribution {
  margin: 0;
  color: var(--creme);
}

.citation__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgb(250 246 240 / 20%);
  list-style: none;
}

.citation__repere {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* La maquette donne aux repères une vraie présence : gros Cormorant sur
   une rangée, légende discrète en dessous. */
.citation__repere-valeur {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--creme);
}

.citation__repere-libelle {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sable);
}

@media (max-width: 767.98px) {
  .citation {
    grid-template-columns: minmax(0, 1fr);
  }

  .citation__media {
    max-width: 18rem;
    margin-inline: auto;
  }
}

/* Bandeau */

/* Carte insérée dans la page plutôt que bandeau plein bord à bord : le
   fond du bloc reste le fond de page alterné, seule .bandeau (le
   conteneur) porte la couleur, avec des marges visibles de part et
   d'autre comme dans la maquette. */
.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--rayon);
}

.bandeau__texte h2,
.bandeau__texte p {
  margin: 0;
}

.bandeau__texte p {
  margin-top: 0.5rem;
}

.bandeau__cta {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-fonce);
}

.bandeau__cta:hover {
  background: var(--carte);
}

.bandeau--vert .bandeau__texte h2 {
  color: var(--creme);
}

.bandeau--vert .bandeau__texte p {
  color: var(--creme);
}

.bandeau--vert .bandeau {
  background: var(--vert);
}

/* Sur fond vert, le bouton s'inverse : crème (8,65:1 avec le fond) plutôt
   que le terracotta qui s'y lirait à 1,48:1. */
.bandeau--vert .bandeau__cta {
  border-color: var(--creme);
  color: var(--creme);
}

.bandeau--vert .bandeau__cta:hover {
  background: color-mix(in srgb, var(--creme) 15%, transparent);
}

.bandeau--peche .bandeau {
  background: var(--peche);
}

.bandeau--sable .bandeau {
  background: var(--sable);
}

/* Image-texte */

.image-texte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.image-texte--droite .image-texte__media {
  order: 2;
}

.image-texte--droite .image-texte__corps {
  order: 1;
}

.image-texte__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
}

.image-texte__media--arche {
  aspect-ratio: 4 / 5;
  border-radius: var(--arche);
}

.image-texte__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-texte__corps {
  max-width: var(--mesure);
}

.image-texte__corps > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .image-texte {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-texte--droite .image-texte__media,
  .image-texte--droite .image-texte__corps {
    order: initial;
  }
}

/* Galerie : trois respirations photographiques entre deux blocs de texte.
   Même hauteur pour les trois, arche courte sur celle du milieu. */

.bloc--galerie .conteneur {
  max-width: var(--conteneur);
}

/* auto-fit plutôt que trois colonnes fermes : la galerie sert aussi de bande
   unique sur la page « arrêt du tabac », où l'image doit alors tenir toute la
   largeur au lieu d'occuper un tiers et de laisser deux trous. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie__vignette {
  height: 15rem;
  overflow: hidden;
  border-radius: var(--rayon-net);
  background: var(--sable);
}

/* Seule au milieu d'une page, une vignette de 15rem paraît écrasée : la bande
   unique reprend la hauteur que la maquette lui donne. */
.galerie__vignette:only-child {
  height: 20rem;
}

.galerie__vignette--arche {
  border-radius: var(--arche-petite);
}

.galerie__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galerie__vignette:hover .galerie__image {
  transform: scale(1.04);
}

/* Sous le point de rupture, trois vignettes côte à côte deviennent trois
   bandes trop étroites pour qu'on y distingue quoi que ce soit : on passe à
   deux colonnes, la troisième prenant toute la largeur. */
@media (width < 45rem) {
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .galerie__vignette {
    height: 10rem;
  }

  /* La bande unique descend elle aussi, à la hauteur que lui donne l'écran
     mobile de la maquette : sans cette règle, sa sélection plus spécifique
     la maintiendrait à 20rem. */
  .galerie__vignette:only-child {
    height: 12.5rem;
  }

  .galerie__vignette:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galerie__image {
    transition: none;
  }

  .galerie__vignette:hover .galerie__image {
    transform: none;
  }
}

/* Logos des écoles : hauteur commune, largeur libre. Les emblèmes sont
   posés sur le fond des cartes, entourés d'un filet, comme dans la maquette. */

/* L'encadré se resserre autour des deux emblèmes : étiré sur toute la
   largeur du conteneur, il laisserait une longue bande vide à leur droite. */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 1.25rem 1.375rem;
  list-style: none;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-net);
}

.logos__item {
  display: flex;
  align-items: center;
}

.logos__image {
  width: auto;
  height: 3.25rem;
  object-fit: contain;
}

/* Chapô de section : une phrase entre le titre et la grille, à la mesure de
   lecture, pour introduire ce qui suit sans peser autant qu'un bloc de texte. */
.bloc__intro {
  max-width: var(--mesure);
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texte-doux);
}

/* Listes de motifs : des énumérations courtes, d'un mot à une ligne, que le
   contenu marque déjà d'une classe restée jusqu'ici sans style. Sur deux
   colonnes, elles occupent la largeur au lieu d'étirer la page, et leur
   marqueur reprend le trait ocre du reste du site. */
.liste-motifs {
  columns: 2;
  column-gap: 3rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--conteneur);
}

.liste-motifs li {
  break-inside: avoid;
  position: relative;
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.liste-motifs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

@media (width < 45rem) {
  .liste-motifs {
    columns: 1;
  }
}

/* Ouverture plein écran
   ─────────────────────
   La photographie du cabinet occupe l'écran entier, le texte se pose dessus.
   Un voile en dégradé, sombre en bas où vit le texte, transparent en haut où
   il n'y a rien à lire, tient le contraste sans éteindre l'image : le crème
   sur le bas du voile mesure plus de 7:1. */

.hero--plein {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  color: var(--creme);
  background: var(--vert);
}

.hero__fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__fond-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(26 30 25 / 58%) 0%, rgb(26 30 25 / 32%) 32%, rgb(26 30 25 / 72%) 78%, rgb(26 30 25 / 86%) 100%);
}

.hero--plein .hero__grille {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.hero--plein .hero__contenu {
  max-width: 46rem;
}

.hero--plein .hero__surtitre,
.hero--plein .hero__soustitre {
  color: var(--sable);
}

.hero--plein h1 {
  font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
}

/* Sur l'image, le bouton contouré passe en clair : son filet ocre y
   disparaîtrait et son texte n'y serait pas lisible. */
.hero--plein .bouton--secondaire {
  border-color: rgb(250 246 240 / 70%);
  color: var(--creme);
}

.hero--plein .hero__filet {
  border-color: rgb(250 246 240 / 45%);
}

/* Le fil de la lignée ne traverse pas la photographie : il commence sous
   elle, à la première section de contenu. */
.hero--plein::before,
.hero--plein::after {
  content: none;
}

/* Bandeau sur fond de bois, repris de son site actuel. Même principe que
   l'ouverture : une image en fond, un voile, du texte clair par-dessus. */
.bandeau--bois {
  position: relative;
  color: var(--creme);
  background: #3B2E22;
}

.bandeau__fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bandeau__fond-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bandeau__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(30 22 15 / 62%);
}

.bandeau--bois .bandeau {
  position: relative;
  z-index: 1;
}

.bandeau--bois .bandeau__cta {
  border: 1px solid rgb(250 246 240 / 70%);
  color: var(--creme);
  background: transparent;
}

.bandeau--bois .bandeau__cta:hover {
  background: rgb(250 246 240 / 12%);
}

/* Le même fond de bois clôt les pages intérieures, là où l'accueil garde son
   bandeau doré : la texture marque la fin de page, elle n'a pas à revenir
   deux fois sur la page d'ouverture. */
.bloc--cta.cta--bois {
  position: relative;
  background: #3B2E22;
}

.cta--bois .conteneur {
  position: relative;
  z-index: 1;
}

.cta--bois .bouton--secondaire {
  border-color: rgb(250 246 240 / 70%);
  color: var(--creme);
}

/* La page contact se termine sur ses deux adresses plutôt que sur un appel à
   l'action : c'est ce bloc-là qui reçoit le bois. Les cartes d'adresse
   passent en clair translucide pour rester lisibles sur la texture. */
.bloc--cabinets.cabinets--bois {
  position: relative;
  background: #3B2E22;
  color: var(--creme);
}

.cabinets--bois .conteneur {
  position: relative;
  z-index: 1;
}

.cabinets--bois h2 {
  color: var(--creme);
}

.cabinets--bois .cabinet {
  background: rgb(30 22 15 / 45%);
  border-color: rgb(250 246 240 / 30%);
}

/* Les lignes d'adresse portent chacune leur propre couleur, héritée du fond
   clair : sans les nommer une à une, elles resteraient sombres sur le bois. */
.cabinets--bois .cabinet__ville,
.cabinets--bois .cabinet__rue,
.cabinets--bois .cabinet__cp {
  color: var(--creme);
}

.cabinets--bois .cabinet__mention {
  color: var(--sable);
}

/* Le bois porte ici des cartes plutôt qu'une seule phrase : il faut un voile
   plus soutenu pour que la texture ne vienne pas concurrencer le texte. */
.cabinets--bois .bandeau__fond::after {
  background: rgb(30 22 15 / 72%);
}

/* Bandeau de page sur fond photographique : chaque page intérieure s'ouvre
   sur une image qui lui est propre, ou sur la texture de bois. Tous les
   textes passent en clair — le titre, le surtitre, le sous-titre et les
   repères portent chacun leur couleur, héritée du fond sable, et resteraient
   sombres sans être nommés un à un. Le voile de .bandeau__fond garantit le
   contraste quelle que soit l'image posée dessous. */
.hero--texture {
  position: relative;
  color: var(--creme);
  background: #3B2E22;
}

/* Le voile du bandeau est plus soutenu que celui des blocs de fin : un titre
   de page tient sur toute la largeur, et certaines textures — une nappe de
   graviers, une trame de lin — sont assez contrastées pour venir concurrencer
   la lecture là où un simple aplat de couleur ne le ferait pas. */
.hero--texture .bandeau__fond::after {
  background: linear-gradient(to right, rgb(28 21 14 / 82%) 0%, rgb(28 21 14 / 68%) 55%, rgb(28 21 14 / 58%) 100%);
}

.hero--texture .hero__grille {
  position: relative;
  z-index: 1;
}

.hero--texture h1,
.hero--texture .hero__repere-valeur {
  color: var(--creme);
}

.hero--texture .hero__surtitre,
.hero--texture .hero__soustitre,
.hero--texture .hero__repere-libelle {
  color: var(--sable);
}

.hero--texture .hero__repere {
  border-left-color: rgb(250 246 240 / 45%);
}

.hero--texture .bouton--secondaire {
  border-color: rgb(250 246 240 / 70%);
  color: var(--creme);
}

.hero--texture .hero__filet {
  border-color: rgb(250 246 240 / 45%);
}

/* Le fil de la lignée commence sous le bandeau, comme sous la photographie :
   il ne traverse pas les fonds soutenus du haut de page. */
.hero--texture::before,
.hero--texture::after {
  content: none;
}

/* Questions fréquentes : les mêmes que celles déclarées à Google, enfin
   visibles. Deux colonnes sur grand écran, chacune ouverte par un filet ocre
   à la façon des repères de bandeau. */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.faq__item {
  padding-left: 1.5rem;
  border-left: 1px solid var(--accent);
}

.faq__question {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--texte);
}

.faq__reponse {
  margin: 0;
  color: var(--texte-doux);
  line-height: 1.7;
  max-width: 46ch;
}

/* Petits dessins au trait, posés au-dessus des titres de section. Ils
   reprennent la ligne du fil de la lignée : un trait fin, ocre, sans aplat.
   Discrets par construction — à cette taille, un dessin qui se remarquerait
   plus que le titre ferait diversion. */
.dessin {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.5rem;
  stroke: var(--accent);
  opacity: 0.85;
}

/* Sur les fonds soutenus, le trait ocre s'éteindrait : il passe en sable. */
.hero--texture .dessin,
.bloc--citation .dessin,
.bloc--texte-vert .dessin,
.cta--bois .dessin,
.cabinets--bois .dessin {
  stroke: var(--sable);
}

/* Chapô d'ouverture
   ─────────────────
   Le premier bloc d'une page n'est pas du texte courant : c'est ce qui décide
   si l'on continue. Traité comme le reste, il flottait à dix-sept pixels au
   milieu de deux cent vingt pixels de vide.

   Rien n'est réécrit ici : le premier paragraphe est simplement porté à la
   taille d'une entrée en matière, les suivants gardent la taille courante, et
   la section respire moins largement — un chapô suit son bandeau de près. */
.bloc--chapo {
  padding-block: calc(var(--rythme) * 0.55);
}

.bloc--chapo .conteneur {
  position: relative;
}

/* Un filet ocre ouvre le propos, comme l'amorce en tête des cartes. */
.bloc--chapo .conteneur::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 1.75rem;
  background: var(--accent);
}

.bloc--chapo p:first-of-type {
  max-width: 40ch;
  margin-top: 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.65;
  color: var(--texte);
}

.bloc--chapo p:first-of-type + p {
  max-width: var(--mesure);
  color: var(--texte-doux);
}

/* Sections sur fond vert
   ──────────────────────
   Le vert profond est le seul fond soutenu du site qui ne soit pas une
   image : il coupe la suite des sables sans ajouter une photographie de plus.
   Posé sur les sections structurantes, il donne à la page un battement
   régulier — et, sur le déroulé d'une séance, il fait de ce passage un
   repère qu'on retrouve de page en page.

   Chaque couleur de texte est nommée : titres, corps, numéros d'étape,
   questions, cartes. Héritées du fond clair, elles resteraient sombres. */
.bloc.bloc--vert {
  background: var(--vert);
  color: var(--creme);
}

.bloc--vert h2,
.bloc--vert h3,
.bloc--vert .etape__titre,
.bloc--vert .carte__titre,
.bloc--vert .faq__question {
  color: var(--creme);
}

.bloc--vert p,
.bloc--vert .bloc__intro,
.bloc--vert .etape__texte,
.bloc--vert .carte__texte,
.bloc--vert .faq__reponse {
  color: var(--sable);
}

/* Le filet et le numéro des étapes passent en sable : l'ocre, déjà sombre
   sur le sable, disparaîtrait tout à fait sur le vert. */
.bloc--vert .etape {
  border-top-color: var(--sable);
}

.bloc--vert .etape__num,
.bloc--vert .carte__surtitre {
  color: var(--sable);
}

.bloc--vert .faq__item {
  border-left-color: var(--sable);
}

/* Les cartes posées sur le vert gardent leur relief, mais dans l'autre sens :
   un aplat clair translucide plutôt qu'une ombre portée, qui ne se verrait
   pas sur un fond sombre. */
.bloc--vert .carte {
  background: rgb(250 246 240 / 8%);
  border-color: rgb(250 246 240 / 22%);
  box-shadow: none;
}

.bloc--vert .carte:hover {
  background: rgb(250 246 240 / 12%);
  border-color: rgb(250 246 240 / 40%);
  box-shadow: none;
}

.bloc--vert .carte:not(.carte--approche)::before {
  background: var(--sable);
}

/* Le fil de la lignée traverse aussi ces sections, en clair. */
.bloc--vert {
  --fil: color-mix(in srgb, var(--sable) 40%, transparent);
  --fil-noeud: var(--sable);
}

.bloc--vert::after {
  background: var(--vert);
}