/* Structure : rythme vertical uniforme entre les sections.
   Les blocs Zyro n'ont aucun padding : l'espace autour du contenu venait de la
   premiere et de la derniere piste de leur grille, reglees au pixel pres bloc
   par bloc (de 34 px a 193 px entre deux sections). Ces pistes sont desormais a
   zero dans le HTML, et l'espacement est donne ici, une seule fois, pour tout
   le site. */

:root {
  --section-space: 120px;   /* distance entre deux sections */
}

@media screen and (max-width: 1224px) {
  :root { --section-space: 96px; }
}

@media screen and (max-width: 920px) {
  :root { --section-space: 72px; }
}

section.block {
  padding-top: calc(var(--section-space) / 2);
  padding-bottom: calc(var(--section-space) / 2);
}

/* Le bloc « liste de produits » porte son propre padding vertical (--block-padding) :
   on le neutralise pour qu'il suive le meme rythme que les autres sections. */
.block-product-list {
  padding-top: 0;
  padding-bottom: 0;
}

/* Le premier bloc glisse sous l'en-tete : son padding-top est deja pris par la
   hauteur de l'en-tete (site.css). L'espace haut est donc ajoute a l'interieur. */
section.block--desktop-first-visible > .block-layout,
section.block:first-child > .block-layout {
  padding-top: calc(var(--section-space) / 2);
}

/* Les quatre heros de titre — L'institut, Nos soins, Nos offres, Reservation —
   gardent la meme hauteur sur telephone.

   De 361 a 920 px, l'export leur donne deja `--t-block-min-height: 350px`. En
   dessous, il repasse a `--m-block-min-height: auto` et chacun prend la hauteur
   de son propre texte : 236, 240, 262, 264 px. La hauteur sautait donc de plus
   de cent pixels a 361 px de large, et changeait d'une page a l'autre — ce qui
   se voit en passant de l'une a l'autre, l'en-tete et le titre ne tombant plus
   au meme endroit. Cette regle tient les 350 px sur toute la largeur telephone.

   C'est un minimum et non une hauteur fixe : le plus long des quatre contenus
   tient en 264 px, rien n'est rogne, meme sur un ecran de 280 px. */
@media screen and (max-width: 920px) {
  #ai-ODPZY8 > .block-layout,
  #hero-nos-soins > .block-layout,
  #hero-nos-offres > .block-layout,
  #hero-reservation > .block-layout {
    min-height: 350px;
  }
}

/* Section « Offrez-vous un moment d'exception » : chaque element occupe toute la
   largeur de sa carte (voir index.html, grille a 7 colonnes). Le bouton, lui,
   garde sa taille de pastille et se centre dans la carte. */
@media screen and (min-width: 921px) {
  #zwkiRg .layout-element__component--GridButton {
    min-width: 0;
    width: 60%;
    justify-self: center;
  }
}

/* Bouton « Decouvrir nos soins » de « Elegance et beaute a votre portee ».
   Le libelle demande 219 px alors que la colonne d'origine (10/11) n'en offrait
   que 194, et la pilule tronquait le texte (`white-space: nowrap` plus
   `overflow: hidden`). Son element occupe desormais la meme travee que le titre
   (4/17 dans index.html, la rangee 13 ne contient rien d'autre) et la pilule se
   dimensionne sur son texte, centree comme avant. */
@media screen and (min-width: 921px) {
  #zgBVW4 .layout-element__component--GridButton {
    min-width: 0;
    width: auto;
    margin: 0 auto;    /* la pilule se recentre dans la travee elargie */
    padding: 0 40px;   /* --grid-button-primary-padding-x du theme */
  }
}

/* Page L'institut, « Notre histoire » (#ai-pc0UKX) : texte justifie. La cesure
   automatique repartit les blancs au lieu de les accumuler entre les mots ; elle
   s'appuie sur le `lang="fr"` du document. */
#ai-pc0UKX p {
  text-align: justify;
  hyphens: auto;
}

/* En mobile, 205 px de vide separaient ce texte de la photo qui le suit.

   La grille de l'export compte six rangees. En desktop la photo occupe la
   colonne de droite sur toute leur hauteur (`--grid-row: 2/7`) : la cinquieme
   rangee sert alors a lui donner sa taille. En mobile tout s'empile sur une
   colonne, le titre en 2, le texte en 4, la photo en 6 — et cette cinquieme
   rangee, que plus rien n'occupe, garde sa hauteur pour rien.

   Les trois gabarits de rangees de l'export sont poses en variables sur le
   style de la grille ; redefinir ici `grid-template-rows` passe devant les
   trois d'un coup. Les rangees des elements restent en `auto`, seuls les
   ecarts sont fixes : 21 px sous l'intitule comme dans l'export, 32 px avant
   la photo. */

@media screen and (max-width: 920px) {
  #ai--jm0cr > .block-layout {
    grid-template-rows: 0 auto 21px auto 32px auto 0;
  }
}

/* Hero de l'accueil : le titre, le sous-titre et le bouton formaient un groupe
   trop lache — 101 px entre le bas du titre et le sous-titre. Deux causes :
   l'element du titre occupe quatre rangees (4/8, 250 px) pour trois lignes de
   texte (187 px), et le sous-titre attendait deux rangees plus bas.

   Le sous-titre et le bouton remontent donc d'une rangee, et le titre se centre
   dans sa boite au lieu de se coller en haut : les 63 px morts passent au-dessus
   du titre plutot qu'au-dessous. Resultat : 31 px sous le titre, 38 px sous le
   sous-titre, au lieu de 101 et 43.

   Les pistes de la grille ne sont pas touchees. Leur hauteur est imposee par les
   images de droite — celle de la rangee 5/17 fixe a elle seule la somme des
   pistes 5 a 16 — et les reduire deplace la composition au lieu de la resserrer.

   Le seuil de 1170 px n'est pas celui de la grille : entre 1162 et 1165 px le
   titre passe a quatre lignes, remplit sa boite et l'espace mort disparait. La
   mise en page d'origine est alors la bonne, et remonter le sous-titre le
   collerait au titre. Le titre etant en Georgia, une police systeme, ce point de
   bascule ne bouge pas avec le reseau. */
@media screen and (min-width: 1170px) {
  #ai-GHEruF {                                      /* la boite du titre */
    align-self: center;
  }

  /* `grid-row` en toutes lettres, pas `--grid-row` : le style en ligne de
     l'element porte la variable et l'emporterait sur cette feuille. */
  #ai-GuG6gp .layout-element:has(#ai-1SsGWh) {      /* le sous-titre */
    grid-row: 8 / 9;
  }

  #ai-GuG6gp .layout-element:has(#ai-yEIYl1) {      /* le bouton */
    grid-row: 10 / 13;
  }
}

/* Videos de fond des heros (L'institut, Nos soins, Contact).
   L'export prevoyait deja l'emplacement : un `<!---->` entre l'image de fond et
   le voile sombre, la classe `.block-background__video--fixed` dans site.css et
   la variable `--v79d8fbfe` (decalage haut du defilement parallaxe) sur chaque
   `.block-background`. Seule manquait la regle de base, l'export n'ayant jamais
   pose de video : elle reprend celle de `.block-background__image` avec le
   z-index intermediaire.

   Empilement dans le fond : couleur de base, video 1, voile 2 a 0.60. Le titre
   reste lisible dans tous les cas.

   L'embleme `logo-embleme-fond.png` qui servait de fond a ces trois heros a ete
   retire : il apparaissait une fraction de seconde avant la premiere image de la
   video. A sa place, le fond des trois sections prend le brun sombre de la bande
   « expertise », pour que le hero soit deja a la bonne valeur au chargement et
   qu'il le reste si le reseau manque. La couleur est ecrite en toutes lettres :
   `--v4cfc8878` (transparent) est posee en ligne sur l'element et l'emporterait
   sur cette feuille. */
#ai-ODPZY8 > .block-background,
#hero-nos-soins > .block-background,
#hero-reservation > .block-background {
  background: #2a1c1a;
}

.block-background__video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 101%;          /* comme l'image : evite un lisere clair en bas */
  object-fit: cover;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .block-background__video {
    display: none;       /* l'embleme de fond reprend la main */
  }
}

/* ------------------------------------------------------------------ */
/* Barre de navigation                                                  */
/* ------------------------------------------------------------------ */

/* Trois liens a gauche, logo au centre, deux liens a droite : la grille
   « desktop-4 » de l'en-tete (1fr auto 1fr) est deja faite pour cela, le second
   groupe de liens occupe la zone « right-side », laissee libre par les icones
   sociales (elles restent dans le pied de page et dans le menu mobile).
   Les reglages typographiques (majuscules, interlettrage, couleurs, ecart entre
   liens) sont poses avec les autres variables de l'en-tete, dans son attribut
   style. */

.block-header .block-header__nav--right .block-header__nav-links {
  margin-right: 0;
}

/* L'ecart entre deux liens, sur les largeurs ou la barre complete est affichee
   mais ou la place manque.

   A 48 px — la valeur de l'export — les cinq liens d'origine passaient deja sur
   deux lignes en dessous de 1024 px : le logo se retrouvait a cheval et
   l'en-tete grandissait d'une ligne. « Nos conseils » aurait repousse cette
   limite a 1060 px. A 26 px, elle descend a 940 px : la bande 921-940 reste sur
   deux lignes comme avant, tout le reste tient desormais sur une.

   L'ecart ne se corrige pas sur `.block-header`, ou l'export pose la valeur en
   ligne et l'emporterait sur cette feuille : il se repose sur la liste
   elle-meme, qui jusque-la en heritait. */
@media screen and (min-width: 921px) and (max-width: 1099px) {
  .block-header .block-header__nav-links {
    --link-spacing: 26px;
  }
}

/* Le hero de l'accueil se termine sur une image detouree au bord franc (la
   femme s'arrete aux hanches). Du blanc sous elle donne une silhouette coupee :
   le bloc suivant vient donc au contact, sans espace bas. */
section#ai-GuG6gp {
  padding-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Section « Une expertise dediee a votre beaute »                      */
/* ------------------------------------------------------------------ */

/* Bande pleine largeur : video Pexels en fond, voile sombre, trois cartes
   blanches. Ecrite a la main (pas de grille Zyro), elle prend le rythme
   vertical commun par sa classe .block. */
.expertise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #2a1c1a;   /* fond tenu avant le chargement de la video */
}

.expertise__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.expertise::after {            /* voile sombre : le texte reste lisible */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(28, 18, 20, 0.62), rgba(28, 18, 20, 0.48));
}

.expertise__inner {
  width: 100%;
  max-width: 1256px;   /* 1224 px de contenu + 16 px de marge de chaque cote */
  margin: 0 auto;
  padding: 0 16px;
}

.expertise__title {
  margin: 0 0 48px;
  text-align: center;
  color: #ad4a63;
  font-family: var(--h2-font-family);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.15;
}

.expertise__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.expertise__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 28px 34px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(20, 10, 14, 0.22);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.expertise__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(20, 10, 14, 0.30);
}

.expertise__number {
  font-family: var(--body-font-family);
  margin: 0;
  color: rgb(26, 26, 28);
  font-variant-numeric: tabular-nums;   /* chiffres de largeur egale : le compteur ne saute pas */
  font-size: clamp(38px, 3.2vw, 52px);
  font-weight: 600;
  line-height: 1;
}

.expertise__number::after {    /* filet rose sous le chiffre */
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: rgb(216, 115, 139);
}

.expertise__label {
  font-family: var(--body-font-family);
  margin: 0;
  color: rgb(86, 88, 94);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media screen and (max-width: 920px) {
  .expertise__title { margin-bottom: 32px; }
  .expertise__cards { grid-template-columns: 1fr; gap: 16px; }
  .expertise__card { padding: 32px 24px 28px; }
}

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

/* Descriptions des trois cartes : elles ont ete ramenees a deux lignes chacune
   (voir index.html), et `text-wrap: balance` repartit les mots entre ces deux
   lignes. Sans lui, le texte est centre mais se termine par un mot isole, de
   longueur differente d'une carte a l'autre. */
@media screen and (min-width: 921px) {
  #zwkiRg p.body-large {
    text-wrap: balance;
  }
}

/* Clips Vimeo des trois cartes de « Offrez-vous un moment d'exception ».
   Les videos sont au format portrait (9/16). */
#zwkiRg .clip {
  display: flex;
  justify-content: center;
  background: transparent;
  cursor: default;
}

#zwkiRg .clip__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;    /* format portrait des clips */
  border: 0;
  border-radius: 12px;
}

/* En desktop l'emplacement est plus large que la video : elle se cale sur la
   hauteur et se centre, le fond rose de la carte reste visible de chaque cote.
   En mobile la carte epouse la video, qui prend toute la largeur interieure. */
@media screen and (min-width: 921px) {
  #zwkiRg .clip__player {
    width: 80%;
  }
}

/* La carte rose. L'export empilait trois morceaux par carte : une image de fond
   en haut (fond-rose-*.png), un rectangle plein au milieu, une seconde image en
   bas, cales chacun sur ses propres rangees. Les images se recadraient avec la
   hauteur de la carte, si bien que le rayon des coins changeait d'une carte a
   l'autre, et les trois morceaux ne se rejoignaient pas en mobile.

   Il ne reste qu'un element, vide, peint en CSS, qui va du haut de la carte
   jusque sous le bouton (--grid-row:6/21 dans index.html). Les trois fichiers
   fond-rose-*.png ont ete supprimes avec les deux autres morceaux. */
#zwkiRg .offre__carte {
  background: rgb(216, 115, 139);
  border-radius: 26px;
}

/* ---------------------------------------------------------------------------
   Mobile : les trois cartes de « Offrez-vous un moment d'exception » (#zwkiRg)

   Les rangees mobiles de l'export (--m-grid-row) n'avaient plus rien a voir
   avec les cartes : le clip de la premiere carte, son titre 24 px plus bas hors
   du rose, le fond de la troisieme carte au milieu de la deuxieme. Elles sont
   donc ignorees et la grille est refaite ici : une seule colonne, une rangee
   par element, et le fond rose s'etend sur les quatre rangees de sa carte.

   Rangee | contenu
      1   | titre de section
      2   | chapo
    3-6   | carte 1 : clip, nom, texte, bouton   (fond rose : 3/7)
      7   | ecart entre les cartes
    8-11  | carte 2                              (fond rose : 8/12)
     12   | ecart
   13-16  | carte 3                              (fond rose : 13/17)

   Le rose ne porte aucun padding : ce sont les marges des elements qu'il
   recouvre qui font l'air interieur de la carte. La carte epouse le contour de
   la video : c'est le clip qui commande, la carte vaut sa largeur plus deux fois
   l'air, elle porte le meme air au-dessus et au-dessous de lui qu'a ses cotes,
   et le nom, le texte et le bouton s'alignent sur lui.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 920px) {
  #zwkiRg > .block-layout {
    /* Tout part de la largeur du clip. Le lecteur Vimeo telechargeant une
       definition calee sur la taille du cadre, un cadre plus petit donne une
       image plus dense : 240 px au lieu des 296 px de la pleine colonne. */
    --clip-largeur: 240px;
    --carte-air: 8px;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      auto auto             /* 1-2   titre de section, chapo */
      auto auto auto auto   /* 3-6   carte 1 */
      28px                  /* 7     ecart entre deux cartes */
      auto auto auto auto   /* 8-11  carte 2 */
      28px                  /* 12    ecart */
      auto auto auto auto;  /* 13-16 carte 3 */
    /* La hauteur mini de l'export (2072 px) etirerait les rangees pour remplir
       le bloc : les cartes se disloqueraient a nouveau. */
    min-height: 0;
    align-content: start;
  }

  /* L'export fixe width et height a 100% de l'emplacement : les marges qui font
     l'air interieur de la carte deborderaient. Chaque element se dimensionne
     donc sur son contenu, et ses marges comptent dans la hauteur de rangee. */
  #zwkiRg .layout-element {
    grid-column: 1;
    width: auto;
    height: auto;
  }

  #zwkiRg .offres__titre { grid-row: 1; }
  #zwkiRg .offres__chapo { grid-row: 2; margin-bottom: 28px; }

  #zwkiRg .offre--1.offre__carte  { grid-row: 3 / 7; }
  #zwkiRg .offre--1.offre__clip   { grid-row: 3; }
  #zwkiRg .offre--1.offre__nom    { grid-row: 4; }
  #zwkiRg .offre--1.offre__texte  { grid-row: 5; }
  #zwkiRg .offre--1.offre__bouton { grid-row: 6; }

  #zwkiRg .offre--2.offre__carte  { grid-row: 8 / 12; }
  #zwkiRg .offre--2.offre__clip   { grid-row: 8; }
  #zwkiRg .offre--2.offre__nom    { grid-row: 9; }
  #zwkiRg .offre--2.offre__texte  { grid-row: 10; }
  #zwkiRg .offre--2.offre__bouton { grid-row: 11; }

  #zwkiRg .offre--3.offre__carte  { grid-row: 13 / 17; }
  #zwkiRg .offre--3.offre__clip   { grid-row: 13; }
  #zwkiRg .offre--3.offre__nom    { grid-row: 14; }
  #zwkiRg .offre--3.offre__texte  { grid-row: 15; }
  #zwkiRg .offre--3.offre__bouton { grid-row: 16; }

  /* La carte : la video plus l'air, centree dans la colonne. Son rayon est
     celui du clip augmente de l'air, les deux arrondis restent concentriques. */
  #zwkiRg .offre__carte {
    width: calc(var(--clip-largeur) + 2 * var(--carte-air));
    max-width: 100%;
    justify-self: center;
    border-radius: calc(12px + var(--carte-air));
  }

  /* Le contenu s'aligne sur le clip, au pixel pres. */
  #zwkiRg .offre__clip,
  #zwkiRg .offre__nom,
  #zwkiRg .offre__texte,
  #zwkiRg .offre__bouton {
    width: var(--clip-largeur);
    max-width: 100%;
    justify-self: center;
  }

  /* Les marges verticales font l'air haut et bas de la carte : la rangee que le
     rose recouvre grandit d'autant. Le clip porte le meme air en haut et en bas
     qu'a ses cotes : le rose suit son contour sur les quatre bords. */
  #zwkiRg .offre__clip   { margin-top: var(--carte-air); margin-bottom: var(--carte-air); }
  #zwkiRg .offre__nom    { margin-bottom: 4px; }

  /* Deux des trois phrases tiennent sur deux lignes, la premiere sur une seule :
     la place des deux lignes est reservee partout, sinon la premiere carte est
     18 px plus courte que les autres. 14 px d'interligne 1,3, arrondi au pixel. */
  #zwkiRg .offre__texte  { min-height: 37px; margin-bottom: 14px; }
  #zwkiRg .offre__bouton { margin-bottom: var(--carte-air); }

  /* Le bouton garde sa taille de pastille et se centre, comme en desktop.
     L'export lui donnait 53,9 vw, soit 202 px sur un ecran de 375 px : il
     touchait presque les bords de la carte. */
  #zwkiRg .offre__bouton .layout-element__component--GridButton {
    min-width: 0;
    width: 60%;
    justify-self: center;
  }
}

/* ---------------------------------------------------------------------------
   Section « Ce que disent nos clients » (#zQN3bb)

   L'export placait les quatre avis a des positions fixes de la grille Zyro.
   Cette grille est remplacee, a toutes les largeurs, par un bandeau qui defile
   en continu de la droite vers la gauche (.avis). Elle portait aussi le titre
   de la section : c'est .avis__titre qui le porte desormais.

   Elle etait ici masquee par `display: none`. Elle est maintenant retiree
   d'`index.html`, et cette regle n'a plus rien a cacher.

   Masquer ne suffisait pas. Un lecteur ne voyait rien, mais le DOM gardait les
   quatre temoignages de l'export — differents de ceux qui defilent —, un `<h2>`
   et deux `<h3>` en double. Ce que Google et les robots d'IA lisent, c'est le
   DOM : ils avaient donc deux fois le titre de la section, deux clientes
   nommees pour des avis qui ne s'affichent plus, et quatre citations perimees
   a cote des huit vivantes. Quinze kilo-octets pour desservir la page.
   --------------------------------------------------------------------------- */

.avis {
  position: relative;
  /* Meme plan que .block-layout : le fond parallaxe de la section est en
     z-index 13 et masquerait le bandeau sinon. */
  z-index: 14;
  width: 100%;
}

/* Meme typographie et meme rose que les autres titres de section : les jetons
   --h2-* sont ceux du theme, .text-box h2 ne s'appliquant pas hors des blocs
   Zyro. Le titre etait blanc, seul de son espece sur le site. */
.avis__titre {
  margin: 0 auto 56px;
  padding: 0 16px;
  max-width: 1224px;
  color: #ad4a63;
  text-align: center;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

/* Fenetre pleine largeur : les cartes entrent et sortent de l'ecran sans
   bord visible, grace au degrade de masque lateral. */
.avis__fenetre {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.avis__piste {
  display: flex;
  width: max-content;
  /* Deux rangees identiques de huit avis. La translation ci-dessous ramene la
     seconde a la place de la premiere : il faut donc que cette moitie — une
     rangee, 3264 px — depasse toujours l'ecran, sinon un vide apparaitrait au
     raccord sur les grands moniteurs.

     C'etait quatre rangees de quatre avant les huit temoignages, pour la meme
     moitie de piste et la meme duree : 92 s pour 3264 px, soit ~35 px/s. */
  animation: avis-defilement 92s linear infinite;
}

.avis__fenetre:hover .avis__piste {
  animation-play-state: paused;
}

/* La piste contient deux rangees identiques : la translation de -50% ramene
   exactement la seconde a la place de la premiere, sans saut. */
@keyframes avis-defilement {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.avis__rangee {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}

.avis__carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 380px;
  min-height: 236px;
  padding: 34px 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 24px;
  /* Fond volontairement dense : la photo de fond est claire et chargee, et
     le flou d'arriere-plan n'est pas rendu partout. */
  background: rgba(29, 30, 32, 0.58);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(29, 30, 32, 0.28);
}

.avis__citation {
  font-family: var(--body-font-family);
  position: relative;
  margin: 0 0 26px;
  padding-top: 26px;
  color: #fff;
  font-size: 17px;
  line-height: 1.55;
  font-style: italic;
}

.avis__citation::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: -4px;
  color: #ad4a63;
  font-size: 56px;
  line-height: 1;
  font-style: normal;
}

.avis__auteur {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Des initiales plutot qu'un portrait. Les quatre avis d'avant se partageaient
   deux photos, chacune servant deux fois ; il en aurait fallu huit, et huit
   visages qu'on ne peut pas montrer. Une pastille d'initiales tient la meme
   place dans la carte sans rien promettre qu'elle ne puisse tenir.

   Elle est en `aria-hidden` dans la page : lue, elle ferait dire « A D » juste
   avant « Aicha D. ». */
.avis__initiales {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgb(216, 115, 139);
  background: rgba(216, 115, 139, 0.24);
  color: #fff;
  font-family: var(--body-font-family);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.avis__nom {
  font-family: var(--body-font-family);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Mobile : le meme bandeau, en plus petit. Les cartes passent de 380 a 268 px
   pour que la suivante se devine au bord de l'ecran, et la piste raccourcie
   defile plus vite en duree pour garder la meme vitesse apparente (~35 px/s).
   La section n'a pas de padding lateral en mobile : le bandeau va d'un bord a
   l'autre, comme en desktop. */
@media screen and (max-width: 920px) {
  /* Jeton mobile du theme (36 px) : les jetons --h2-* ne changent pas seuls. */
  .avis__titre {
    margin-bottom: 32px;
    font-size: var(--h2-m-font-size, 36px);
  }

  .avis__rangee {
    gap: 16px;
    padding: 0 8px;
  }

  /* Les cartes se dimensionnent sur la plus haute de la piste : les rangees
     comme les cartes s'etirent (`align-items: stretch` par defaut). */
  .avis__carte {
    width: 268px;
    min-height: 0;
    padding: 26px 24px 24px;
    border-radius: 20px;
  }

  .avis__citation {
    margin-bottom: 20px;
    padding-top: 22px;
    font-size: 15px;
  }

  .avis__citation::before {
    top: -10px;
    font-size: 46px;
  }

  .avis__initiales {
    width: 46px;
    height: 46px;
    font-size: 15px;
  }

  .avis__nom {
    font-size: 13px;
  }

  /* Meme calcul qu'en desktop : une rangee de huit fait 2272 px, parcourus en
     64 s, soit les memes ~35 px/s. */
  .avis__piste {
    animation-duration: 64s;
  }
}

/* Defilement desactive : les avis restent lisibles et parcourables a la main. */
@media (prefers-reduced-motion: reduce) {
  .avis__fenetre {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .avis__piste {
    animation: none;
  }

  .avis__piste > .avis__rangee[aria-hidden="true"] {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Section « Un havre de serenite dedie a votre beaute » (#institut)

   Bloc ecrit a la main, insere entre « Offrez-vous un moment d'exception » et
   « Ce que disent nos clients » : photo a gauche, texte a droite.
   --------------------------------------------------------------------------- */
section#institut {
  /* Les blocs de l'export portent leur fond dans .block-background ; ce bloc
     ecrit a la main n'en a pas, il doit donc declarer le sien. */
  background: rgb(255, 255, 255);
}

.institut__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 72px;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1224px;
}

.institut__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 56px rgba(29, 30, 32, 0.16);
}

.institut__titre {
  margin: 0 0 24px;
  color: #ad4a63;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: 1.14;
  letter-spacing: var(--h2-letter-spacing);
}

.institut__intro {
  margin: 0 0 40px;
  max-width: 46ch;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 17px;
  line-height: 1.7;
}

/* Meme bouton que le reste du site : fond clair, texte rose, pilule de 56 px,
   inverse au survol. « Voir tous les articles », dans la section « Nos
   conseils » juste au-dessus, est le meme bouton : une seule regle pour les
   deux, qui ne peuvent donc pas s'ecarter. */
.institut__lien,
.conseils-accueil__bouton,
.formations-accueil__bouton {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 34px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 28px;
  background: rgb(241, 241, 241);
  color: #ad4a63;
  font-family: var(--grid-button-primary-font-family);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.institut__lien:hover,
.institut__lien:focus-visible,
.conseils-accueil__bouton:hover,
.conseils-accueil__bouton:focus-visible,
.formations-accueil__bouton:hover,
.formations-accueil__bouton:focus-visible {
  border-color: rgb(216, 115, 139);
  background: rgb(216, 115, 139);
  color: rgb(255, 255, 255);
}

/* En mobile tout s'empile et tout se centre : sans photo a sa gauche pour tenir
   son bord, un texte cale a gauche flotte dans la colonne.

   L'ordre n'est pas celui du HTML — l'intitule passe au-dessus de la photo,
   la phrase et le bouton restent dessous. Le groupe de texte s'efface donc
   comme boite (`display: contents`) : ses trois enfants deviennent des cases
   de la grille, ce qui permet de glisser la photo entre l'intitule et la
   phrase sans toucher au HTML ni au desktop. Leurs marges internes cedent la
   place a l'ecart unique de la grille.

   La photo prend toute la largeur du bloc, comme celle de « Notre histoire »
   sur la page L'institut : 328 px sur un telephone de 375 px, soit la borne
   de 360 px des blocs de l'export moins ses 16 px de marge de chaque cote. */
@media screen and (max-width: 920px) {
  .institut__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    justify-items: center;
    text-align: center;
  }

  .institut__texte {
    display: contents;
  }

  .institut__titre {
    order: 1;
    margin-bottom: 0;
    /* Jeton mobile du theme (36 px) : la regle h2 de l'export ne s'applique
       pas ici, la taille est posee directement. */
    font-size: var(--h2-m-font-size, 36px);
  }

  .institut__photo {
    order: 2;
    width: 100%;
    max-width: 328px;
    margin: 0 auto;
  }

  /* La phrase est bornee en largeur : sa boite doit etre recentree. */
  .institut__intro {
    order: 3;
    margin: 0 auto;
  }

  .institut__lien {
    order: 4;
  }
}

/* ---------------------------------------------------------------------------
   Section « Formez-vous aux metiers de la beaute » (#formations-accueil)

   Bloc ecrit a la main, insere apres « Un havre de serenite ». Il annonce les
   trois formations de Clama Jolie Academy et renvoie vers « /formations », qui
   n'est pas au menu du site sur ordinateur. Cartes « vignette » : photo en
   medaillon arrondi, intitule de rythme en rose, titre et prix en serif, ligne
   de lieu avec epingle, et pastille-fleche en bas a droite qui s'inverse au
   survol. Fond de section blanc ; les cartes se detachent par leur ombre.
   --------------------------------------------------------------------------- */
.formations-accueil {
  padding: 88px 0;
  background: #fff;
}

.formations-accueil__cadre {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1224px;
}

.formations-accueil__entete {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.formations-accueil__titre {
  margin: 0 0 20px;
  color: #ad4a63;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: 1.14;
  letter-spacing: var(--h2-letter-spacing);
}

.formations-accueil__intro {
  margin: 0 auto;
  max-width: 54ch;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 17px;
  line-height: 1.7;
}

.formations-accueil__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0 0 48px;
}

.formations-accueil__carte {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(29, 30, 32, 0.1);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.formations-accueil__carte:hover,
.formations-accueil__carte:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(29, 30, 32, 0.16);
}

.formations-accueil__media {
  margin-bottom: 22px;
  border-radius: 16px;
  overflow: hidden;
}

.formations-accueil__media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.formations-accueil__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 8px 6px;
}

.formations-accueil__meta {
  margin: 0 0 10px;
  color: #ad4a63;
  font-family: var(--body-font-family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.formations-accueil__nom {
  margin: 0 0 10px;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

.formations-accueil__texte {
  margin: 0 0 18px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
  line-height: 1.6;
}

.formations-accueil__lieu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 14px;
}

.formations-accueil__pin {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #ad4a63;
}

.formations-accueil__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.formations-accueil__prix {
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 24px;
  font-weight: 400;
}

.formations-accueil__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(241, 241, 241);
  color: #ad4a63;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.formations-accueil__fleche svg {
  width: 18px;
  height: 18px;
}

.formations-accueil__carte:hover .formations-accueil__fleche,
.formations-accueil__carte:focus-visible .formations-accueil__fleche {
  background: rgb(216, 115, 139);
  color: #fff;
}

.formations-accueil__pied {
  text-align: center;
}

@media screen and (max-width: 920px) {
  .formations-accueil {
    padding: 56px 0;
  }

  .formations-accueil__titre {
    font-size: var(--h2-m-font-size, 36px);
  }

  .formations-accueil__grille {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

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

  .formations-accueil__carte:hover,
  .formations-accueil__carte:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Section « Nos conseils » (#conseils-accueil)

   Bloc ecrit a la main, insere entre « Offrez-vous un moment d'exception » et
   « Un havre de serenite ». Il reprend la section « Luxury Treatments For
   Complete Wellness » du gabarit Zenvelle : un titre sur deux lignes avec son
   bouton a droite (celui du site, pas celui du gabarit), puis une carte par
   article, texte a gauche et photo a
   droite, qui vient se poser sur la precedente au defilement pendant que sa
   partie coloree glisse vers la droite.

   Les cartes sont ecrites par `outils/publier.mjs`, entre les reperes
   `conseils-accueil` : ce sont les trois dernieres de `conseils.html`.
   --------------------------------------------------------------------------- */
section#conseils-accueil {
  background: rgb(255, 255, 255);
  /* Ou la premiere carte s'arrete : sous l'en-tete colle, qui fait 107 px en
     grand ecran, avec de l'air. Chaque carte suivante s'arrete un pas plus
     bas, et laisse voir le haut de la precedente. */
  --pile-haut: 131px;
  --pile-pas: 40px;
}

.conseils-accueil__cadre {
  box-sizing: border-box;
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 16px;
}

.conseils-accueil__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 64px;
}

.conseils-accueil__intitule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.conseils-accueil__titre {
  margin: 0;
  color: #ad4a63;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: 1.14;
  letter-spacing: var(--h2-letter-spacing);
}

/* Le bouton est celui de « Decouvrir l'institut » (regle plus haut). Ne
   s'ajoute ici que ce qui tient a sa place : a cote du titre, il ne se
   retrecit pas et son libelle ne passe pas a la ligne. */
.conseils-accueil__bouton {
  flex: none;
  white-space: nowrap;
}

/* --- Les cartes ----------------------------------------------------- */

/* Trois roses, du plus pale au plus soutenu, comme les trois verts du
   gabarit : la carte qui se pose se distingue de celle qu'elle recouvre. Le
   texte est un brun rose et non le gris du site, qui tombait sous le seuil de
   lisibilite sur le troisieme fond.

   Chaque carte a ses coins bas arrondis : c'est la meme carte qui ferme la
   pile, qu'elle soit au repos ou en train de s'empiler. Le haut ne l'est que
   sur la premiere. Les suivantes remontent de la hauteur de l'arrondi sur la
   precedente et en couvrent les coins bas : au repos, les cartes sont soudees,
   d'un seul bloc, et la jointure est droite, comme dans le gabarit. Le texte
   d'une carte recouverte s'arrete au-dessus de la partie cachee.

   Le calque de lien suit ces coins par `--coins`, pour que le contour de focus
   epouse la carte. */
.conseils-accueil__carte {
  --arrondi: 24px;
  --coins: 0 0 var(--arrondi) var(--arrondi);
  position: relative;
  display: flex;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--coins);
  background: rgb(248, 230, 237);
}

.conseils-accueil__carte:first-child {
  --coins: var(--arrondi);
}

.conseils-accueil__carte:not(:last-child) .conseils-accueil__texte {
  margin-bottom: var(--arrondi);
}

/* Une carte posee sur une autre a les memes bords qu'elle. Quand ces bords
   tombent entre deux pixels de l'ecran, le lissage de la carte du dessous
   transparait sous celui de la carte du dessus : un lisere clair le long du
   bord droit. Un filet de 1 px, de la couleur de la section, de chaque cote de
   la carte du dessus, le recouvre. */
.conseils-accueil__carte + .conseils-accueil__carte {
  box-shadow:
    1px 0 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255);
}

/* La pile repart telle qu'elle est empilee. Une carte collee ne descend pas
   plus bas que le bas de la pile, marge comprise : la marge basse de chacune
   vaut ce qui la separe de la derniere, un pas par carte. Sans elle, les trois
   finissaient l'une sur l'autre, au meme endroit, et les coins de celles du
   dessous depassaient des coins arrondis de celle du dessus.

   Au repos, ces marges ne se voient pas : la carte suivante remonte d'autant,
   plus l'arrondi, et les deux marges se fondent en un seul recouvrement de
   24 px.

   Ces regles, comme les arrets plus bas, sont ecrites pour trois cartes au
   plus : l'accueil n'en presente jamais davantage (`CONSEILS_A_LA_UNE` dans
   `outils/publier.mjs`). Une ou deux s'empilent aussi correctement ; une
   quatrieme n'aurait ni arret ni marge, et couvrirait la premiere. */
.conseils-accueil__carte:nth-last-child(2) {
  margin-bottom: var(--pile-pas);
}

.conseils-accueil__carte:nth-last-child(3) {
  margin-bottom: calc(2 * var(--pile-pas));
}

.conseils-accueil__carte:nth-last-child(1):not(:first-child) {
  margin-top: calc(-1 * var(--pile-pas) - var(--arrondi));
}

.conseils-accueil__carte:nth-last-child(2):not(:first-child) {
  margin-top: calc(-2 * var(--pile-pas) - var(--arrondi));
}

.conseils-accueil__carte:nth-child(3n + 2) {
  background: rgb(241, 203, 217);
}

.conseils-accueil__carte:nth-child(3n) {
  background: rgb(232, 173, 194);
}

/* Le glissement. `--avance` va de 0 a 1 pendant que la pile defile
   (`assets/js/pile-conseils.js`) ; la partie coloree avance d'autant, jusqu'a
   20 % de la largeur de la carte, et gagne sur la photo.

   Deux mouvements font ce glissement. Le texte avance, par ses marges et non
   par `transform` : une transformation ferait du bloc de texte le repere du
   calque de lien, qui ne couvrirait plus que lui, et la photo cesserait d'etre
   cliquable. Les deux marges s'annulent, la largeur du texte ne change pas et
   rien ne se recompose. La photo, elle, est rognee par la gauche d'autant
   (`clip-path`), et c'est le fond de la carte qui parait a sa place.

   Le bloc de texte n'a pas de fond. Pose en aplat sur la photo, il dessinait
   un trait clair au bas de la carte : sur le bord arrondi, son lissage
   s'ajoutait a celui de la photo en dessous. Il reste devant elle par
   `z-index`, qu'un element flex accepte sans etre positionne : le calque de
   lien couvre ainsi la photo, sans que le bloc devienne son repere. */
.conseils-accueil__texte {
  /* Deux moities egales, marges internes comprises, comme dans le gabarit. */
  flex: 0 0 50%;
  box-sizing: border-box;
  min-width: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin-left: calc(var(--avance, 0) * 20%);
  margin-right: calc(var(--avance, 0) * -20%);
  padding: 40px 48px;
}

.conseils-accueil__nom {
  margin: 0;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.conseils-accueil__lien {
  color: inherit;
  text-decoration: none;
}

/* Comme sur « Nos conseils » : le lien du titre couvre toute la carte, photo
   comprise. Un seul lien a annoncer, un seul arret au clavier. Le contour se
   pose en dedans, la carte coupant ce qui depasse. */
.conseils-accueil__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--coins);
}

.conseils-accueil__lien:focus-visible {
  outline: none;
}

.conseils-accueil__lien:focus-visible::after {
  outline: 2px solid #ad4a63;
  outline-offset: -4px;
}

.conseils-accueil__chapeau {
  max-width: 46ch;
  margin: 0;
  color: rgb(79, 52, 64);
  font-family: var(--body-font-family);
  font-size: 16px;
  line-height: 1.7;
}

.conseils-accueil__suite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  color: rgb(122, 46, 67);
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 500;
}

.conseils-accueil__fleche {
  transition: transform 0.3s ease;
}

.conseils-accueil__carte:hover .conseils-accueil__fleche,
.conseils-accueil__carte:focus-within .conseils-accueil__fleche {
  transform: translateX(5px);
}

/* La photo est posee en absolu dans sa moitie : en flux, ses dimensions
   natives dicteraient la hauteur de la carte.

   Le rognage suit le texte : 40 % de la moitie photo, c'est 20 % de la carte.
   Sous le bord rogne, c'est le fond de la carte, de la meme couleur que la
   partie coloree : le lissage de ce bord ne laisse rien voir d'autre. */
.conseils-accueil__visuel {
  position: relative;
  flex: 0 0 50%;
  min-width: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 calc(var(--avance, 0) * 40%));
}

.conseils-accueil__visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.conseils-accueil__carte:hover .conseils-accueil__visuel img {
  transform: scale(1.04);
}

/* L'empilement. Une carte collee n'est plus lue en entier que tant que la
   suivante ne l'a pas atteinte : elle doit donc tenir dans la fenetre au
   moment ou elle s'arrete.

   Le texte est centre dans une carte de 400 px et en occupe bien moins : sur
   un ecran bas, la carte raccourcit pour que la deuxieme finisse 16 px
   au-dessus du bas de la fenetre, sans descendre sous la hauteur de son texte.
   Sous 520 px de fenetre, la place manque : les cartes defilent simplement
   l'une sous l'autre.

   L'espace sous la derniere carte garde la pile en place un moment, le temps
   de la voir entiere, avant qu'elle ne remonte d'un bloc. */
@media screen and (min-height: 520px) {
  /* `svh` : la fenetre barres comprises, sur telephone comme sur tablette.
     Un navigateur qui ne le connait pas ignore la ligne et garde 400 px. */
  .conseils-accueil__carte {
    position: sticky;
    top: var(--pile-haut);
    min-height: min(400px, calc(100svh - var(--pile-haut) - var(--pile-pas) - 16px));
  }

  .conseils-accueil__carte:nth-child(2) {
    top: calc(var(--pile-haut) + var(--pile-pas));
  }

  .conseils-accueil__carte:nth-child(3) {
    top: calc(var(--pile-haut) + 2 * var(--pile-pas));
  }

  .conseils-accueil__pile::after {
    content: "";
    display: block;
    height: 160px;
  }
}

/* Le titre et le chapeau existent en deux longueurs (`outils/publier.mjs`) :
   les versions entieres tant que la demi-carte les contient, les courtes sur
   telephone. `display: none` retire aussi l'autre version de ce que lit un
   lecteur d'ecran. */
.conseils-accueil__court {
  display: none;
}

@media screen and (max-width: 1080px) {
  .conseils-accueil__texte {
    padding: 32px;
  }

  .conseils-accueil__nom {
    font-size: 28px;
  }
}

/* Le bouton existe deux fois : a droite du titre en grand ecran, sous les
   cartes en dessous de 921 px. Deux liens plutot qu'un seul deplace par la
   feuille de style : l'ordre de lecture et celui du clavier restent ceux de
   l'ecran. `display: none` retire l'autre des deux. */
.conseils-accueil__pied {
  display: none;
}

/* En dessous de 921 px, l'en-tete du site ne fait plus que 101 px. Le titre se
   centre, comme ceux des autres sections en mobile, et le bouton passe sous
   les cartes, centre lui aussi : on le trouve une fois les articles vus. */
@media screen and (max-width: 920px) {
  section#conseils-accueil {
    --pile-haut: 117px;
  }

  /* `text-wrap: balance` egalise les lignes du titre centre : sans lui, « vous »
     finissait seul sur la derniere a 375 px. */
  .conseils-accueil__entete {
    justify-content: center;
    margin-bottom: 40px;
    text-align: center;
    text-wrap: balance;
  }

  .conseils-accueil__intitule {
    align-items: center;
  }

  .conseils-accueil__entete .conseils-accueil__bouton {
    display: none;
  }

  .conseils-accueil__pied {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  .conseils-accueil__titre {
    font-size: var(--h2-m-font-size, 36px);
  }

  .conseils-accueil__nom {
    font-size: 24px;
  }

  .conseils-accueil__chapeau {
    font-size: 15px;
    line-height: 1.65;
  }
}

/* Sur telephone, la carte garde sa disposition : texte a gauche, photo a
   droite, comme dans le gabarit. La demi-carte ne contient plus un titre de
   dix mots : ce sont les versions courtes qui s'affichent, cinq mots de titre
   et une douzaine de chapeau, et le texte rapetisse avec l'ecran. */
@media screen and (max-width: 720px) {
  section#conseils-accueil {
    --pile-pas: 24px;
  }

  .conseils-accueil__long {
    display: none;
  }

  .conseils-accueil__court {
    display: inline;
  }

  .conseils-accueil__texte {
    gap: 12px;
    padding: 24px;
  }

  .conseils-accueil__nom {
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .conseils-accueil__chapeau {
    font-size: 15px;
    line-height: 1.6;
  }

  .conseils-accueil__suite {
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
  }

  .conseils-accueil__pile::after {
    height: 96px;
  }
}

@media screen and (max-width: 480px) {
  .conseils-accueil__texte {
    gap: 10px;
    padding: 20px 16px 20px 20px;
  }

  .conseils-accueil__nom {
    font-size: 22px;
  }

  .conseils-accueil__chapeau {
    font-size: 14px;
    line-height: 1.55;
  }

  .conseils-accueil__suite {
    font-size: 13px;
  }
}

@media screen and (max-width: 360px) {
  .conseils-accueil__texte {
    padding: 16px 12px 16px 16px;
  }

  .conseils-accueil__nom {
    font-size: 19px;
  }

  .conseils-accueil__chapeau {
    font-size: 13px;
  }
}

/* Le titre se coupe apres « cabine, » tant que la premiere ligne tient. Plus
   etroit, le retour force laisserait « cabine, » seul sur la sienne : le titre
   revient a la ligne de lui-meme. */
@media screen and (max-width: 520px) {
  .conseils-accueil__titre br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conseils-accueil__fleche,
  .conseils-accueil__visuel img {
    transition: none;
  }

  .conseils-accueil__carte:hover .conseils-accueil__fleche,
  .conseils-accueil__carte:focus-within .conseils-accueil__fleche,
  .conseils-accueil__carte:hover .conseils-accueil__visuel img {
    transform: none;
  }

  /* Le script s'abstient deja ; ceci couvre la preference changee en cours de
     route, la variable restant alors posee. */
  .conseils-accueil__texte {
    margin-left: 0;
    margin-right: 0;
  }

  .conseils-accueil__visuel {
    clip-path: none;
  }
}

/* ---------------------------------------------------------------------------
   Mobile : « Recentrez vos sens » (#z-Cux9)

   Les aplats roses de ce bloc ne sont pas des images : ce sont deja des cartes
   dessinees par l'export (`GridCard`, --card-bg). Il y en a deux. La premiere
   porte le titre, la phrase et le bouton ; la seconde, sans arrondi, ne sert
   qu'en desktop, ou elle recouvre les coins arrondis de la photo qui chevauche
   la carte pour que les deux ne fassent qu'un bloc.

   En mobile l'export les empilait de travers : la seconde depassait de 31 px
   sous la premiere et posait une bande rose a angles droits sur les 44 px hauts
   de la photo. Elle est donc masquee, et la carte et la photo sont mises bout a
   bout : arrondis en haut pour la carte, en bas pour la photo, jonction franche
   entre les deux — un seul bloc, comme en desktop.

   Rangee | contenu
      1   | titre     |
      2   | phrase    | carte rose : rangees 1 a 3
      3   | bouton    |
      4   | photo
   --------------------------------------------------------------------------- */
@media screen and (max-width: 920px) {
  #z-Cux9 > .block-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    min-height: 0;
    align-content: start;
  }

  /* Comme pour #zwkiRg : l'export fixe width et height a 100 % de
     l'emplacement, les marges qui font l'air interieur deborderaient. */
  #z-Cux9 .layout-element {
    grid-column: 1;
    width: auto;
    height: auto;
  }

  #z-Cux9 .recentrez__raccord {
    display: none;
  }

  #z-Cux9 .recentrez__carte  { grid-row: 1 / 4; }
  #z-Cux9 .recentrez__titre  { grid-row: 1; margin: 28px 20px 8px; }
  #z-Cux9 .recentrez__texte  { grid-row: 2; margin: 0 20px 22px; }
  #z-Cux9 .recentrez__bouton { grid-row: 3; margin: 0 20px 28px; }

  /* L'emplacement du bouton elargi, la pastille s'y etirait sur toute la
     largeur de la carte. Elle se dimensionne sur son libelle et reste calee
     sur le bord du texte, comme en desktop. */
  #z-Cux9 .recentrez__bouton .layout-element__component--GridButton {
    min-width: 0;
    width: auto;
    padding: 0 32px;
    justify-self: start;
  }
  #z-Cux9 .recentrez__photo  { grid-row: 4; }

  /* Le fond et l'arrondi sont portes par le GridCard, pas par l'element de
     grille ; sa hauteur fixe (55,6 vw) est remplacee par les trois rangees
     qu'il recouvre. Coins du bas droits : la photo prend la suite. */
  #z-Cux9 .recentrez__carte .grid-card {
    height: 100%;
    border-radius: 20px 20px 0 0;
  }

  /* La photo prolonge la carte : jonction franche en haut, arrondis en bas.
     Elle remplit exactement son cadre — l'export lui donnait 91 % de large pour
     une hauteur de 294 px, elle debordait donc du cadre par le bas. */
  #z-Cux9 .recentrez__photo .image {
    width: 100%;
    height: 100%;
    border-radius: 0 0 20px 20px;
  }
}

/* ---------------------------------------------------------------------------
   Desktop : « Recentrez vos sens » (#z-Cux9)

   La grille de l'export fixait la carte a 360 px et comptait sur un titre
   d'une ligne (rangee de 52 px). Au corps des titres du site (56 px), il en
   prend deux : le texte descendait d'autant et le bouton sortait de 34 a
   121 px sous la carte, selon la largeur.

   La carte suit donc son contenu, comme en mobile : une rangee par element,
   la carte et la photo sur toutes, et deux rangees souples aux extremites qui
   absorbent la hauteur minimale (360 px) quand le contenu est plus court. La
   photo prend la hauteur de la carte ; le raccord n'a plus rien a couvrir.

   Colonne rose de 480 px (texte de 392 px) : la premiere phrase y tient sur
   une ligne. Le bloc fait 794 px et tient des 921 px de fenetre.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 921px) {
  #z-Cux9 > .block-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px) minmax(0, 314px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    min-height: 360px;
  }

  #z-Cux9 .layout-element {
    width: auto;
    height: auto;
  }

  #z-Cux9 .recentrez__raccord {
    display: none;
  }

  #z-Cux9 .recentrez__carte  { grid-column: 2; grid-row: 1 / 6; }
  #z-Cux9 .recentrez__photo  { grid-column: 3; grid-row: 1 / 6; }
  #z-Cux9 .recentrez__titre  { grid-column: 2; grid-row: 2; margin: 44px 44px 16px; }
  #z-Cux9 .recentrez__texte  { grid-column: 2; grid-row: 3; margin: 0 44px 28px; }
  #z-Cux9 .recentrez__bouton { grid-column: 2; grid-row: 4; margin: 0 44px 44px; }

  /* Meme pastille qu'avant (196 px), dimensionnee sur son libelle et non plus
     sur l'emplacement, desormais aussi large que le texte. */
  #z-Cux9 .recentrez__bouton .layout-element__component--GridButton {
    min-width: 0;
    width: auto;
    padding: 0 48px;
    justify-self: start;
  }

  #z-Cux9 .recentrez__carte .grid-card {
    height: 100%;
    border-radius: 20px 0 0 20px;
  }

  /* L'export plafonne le cadre de la photo a 360 px (`max-height`). */
  #z-Cux9 .recentrez__photo .image-wrapper {
    max-height: none;
  }

  #z-Cux9 .recentrez__photo .image {
    width: 100%;
    height: 100%;
    border-radius: 0 20px 20px 0;
  }
}

/* Lignes equilibrees, a toutes les largeurs : « Recentrez / vos sens » plutot
   que « sens » seul sur sa ligne.

   La phrase en compte deux, separees par un <br>. Chrome n'equilibre pas un
   paragraphe dont l'export conserve les espaces (`white-space: break-spaces`),
   et « l'equilibre. » finissait seul sur sa ligne en mobile. Chaque phrase est
   donc un bloc en ligne, equilibre pour son compte. « offrez-vous » ne se
   coupe pas au trait d'union. */
#z-Cux9 .recentrez__titre h2 {
  text-wrap: balance;
}

#z-Cux9 .recentrez__phrase {
  display: inline-block;
  text-wrap: balance;
}

#z-Cux9 .recentrez__insecable {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Section FAQ « Tout ce que vous devez savoir » (#zm4bOk)

   La grille de l'export (titre a gauche, quatre reponses toujours visibles a
   droite) est remplacee par un titre centre et six questions en deux colonnes
   de trois. Chaque reponse est repliee : ce sont des <details>/<summary>
   natifs, donc l'ouverture au clic fonctionne sans JavaScript.
   --------------------------------------------------------------------------- */
.faq {
  box-sizing: border-box;
  position: relative;
  /* Meme plan que .block-layout : le fond blanc de la section, en z-index 13,
     recouvrirait le bloc sinon. */
  z-index: 14;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1224px;
}

.faq__titre {
  margin: 0 0 64px;
  color: #ad4a63;
  text-align: center;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

.faq__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
}

/* Les intitules tiennent sur une seule ligne : ils ont ete raccourcis pour cela
   (voir index.html). En dessous de 1135 px environ, deux colonnes ne laissent
   plus assez de place au plus long — « Comment annuler ou reporter mon
   rendez-vous ? », qui demande 479 px — sans en reecrire le sens. La liste passe
   donc sur une seule colonne, ou toute la largeur du contenu est disponible. Le
   seuil est pose a 1160 px pour garder une marge si Poppins n'est pas chargee et
   que le texte est rendu avec la police de repli, plus large. */
@media screen and (max-width: 1160px) {
  .faq__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

.faq__item {
  padding: 8px 0 20px;
  border-bottom: 1px solid rgba(216, 115, 139, 0.35);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  color: rgb(38, 39, 43);
  font-family: var(--body-font-family);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;              /* masque le triangle par defaut */
  transition: color 0.2s ease;
}

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

.faq__question:hover,
.faq__item[open] .faq__question {
  color: #ad4a63;
}

/* Chevron dessine en CSS : deux bords d'une boite tournee, pas de police
   d'icones a charger. */
.faq__chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border-right: 2px solid rgb(216, 115, 139);
  border-bottom: 2px solid rgb(216, 115, 139);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 0.28s ease;
}

.faq__item[open] .faq__chevron {
  transform: rotate(225deg);
}

.faq__reponse {
  padding: 0 0 6px 27px;         /* aligne sur l'intitule, apres le chevron */
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 16px;
  line-height: 1.65;
  animation: faq-ouverture 0.28s ease both;
}

.faq__reponse p {
  margin: 0;
}

.faq__reponse a {
  color: #ad4a63;
}

@keyframes faq-ouverture {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media screen and (max-width: 920px) {
  .faq__titre {
    margin-bottom: 40px;
    font-size: var(--h2-m-font-size, 36px);
  }

  .faq__question {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron,
  .faq__reponse {
    animation: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Section « Nos services » (page Nos soins)                            */
/* ------------------------------------------------------------------ */

/* Le bloc de l'export (titre du hero + trois cartes Unsplash sur fond gris)
   est remplace par six cartes : photo en haut, pave rose en bas avec le nom du
   soin en serif et sa description. Bloc ecrit a la main, sans .block-background :
   il declare donc son propre fond, sinon la page laisse voir le fond du
   navigateur. */
section#nos-services {
  background: rgb(252, 248, 250);
}

.services__grille {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 40px;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1224px;
  list-style: none;
}

.services__carte {
  display: flex;
  flex-direction: column;
  background: rgb(245, 220, 231);
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.services__carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(216, 115, 139, 0.22);
}

/* La photo est posee au ras du haut de la carte et garde ses quatre angles
   arrondis : le rose de la carte apparait sous ses deux angles bas, comme sur
   la maquette. */
.services__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}

.services__corps {
  padding: 24px 26px 30px;
}

.services__nom {
  margin: 0 0 12px;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
}

.services__texte {
  margin: 0;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 16px;
  line-height: 1.7;
}

@media screen and (max-width: 1080px) {
  .services__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 620px) {
  .services__grille {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .services__nom {
    font-size: 24px;
  }
}

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

  .services__carte:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Page « Réservation » : le bandeau d'infos et la carte en trois etapes */
/* ------------------------------------------------------------------ */

/* La page etait un formulaire a plat de neuf champs, a cote d'un texte
   d'accueil. Neuf champs demandes d'un coup se remplissent mal : on lit la
   longueur de la liste avant d'en lire le premier intitule.

   Elle est maintenant une carte en trois temps — le soin, l'heure, les
   coordonnees — avec la colonne de gauche qui dit ou l'on en est. Chaque ecran
   ne demande qu'une chose. Le bandeau des informations pratiques passe au-dessus
   sur un ecran large et en dessous sur telephone : en haut d'un telephone il
   repousserait la carte hors de vue, et c'est la carte qu'on vient chercher.

   Toute la carte est claire — blanc, rose pale, et le rose de la charte pour
   ce qui est actif. La maquette d'origine posait une colonne bleu marine et un
   bouton orange : c'est sa disposition qui etait demandee, pas sa palette, et
   un aplat sombre au milieu d'un site clair se voit plus que le parcours. */

section#reserver {
  background: rgb(255, 255, 255);
}

.reserver__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
  padding: 72px 24px 88px;
}

/* ------------------------- Le bandeau d'infos ------------------------- */

.infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.infos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.infos__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border: 1px solid rgb(238, 226, 231);
  border-radius: 50%;
  background: rgb(250, 236, 241);
  color: #ad4a63;
}

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

.infos__intitule {
  color: rgb(56, 30, 40);
  font-family: var(--h2-font-family);
  font-size: 19px;
}

.infos__valeur {
  margin: 0;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
  line-height: 1.6;
}

.infos__valeur a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 115, 139, 0.45);
}

.infos__valeur a:hover,
.infos__valeur a:focus-visible {
  color: #ad4a63;
}

.reserver__noscript {
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgb(250, 236, 241);
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------------------------- La carte ---------------------------- */

.reserver__carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 560px;
  border-radius: 20px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(240, 231, 235);
  box-shadow: 0 14px 36px rgba(56, 30, 40, 0.07);
  overflow: hidden;
}

/* La deuxieme colonne n'apparait que lorsque le script a pose celle des
   etapes. La classe est plus sure qu'un `:not(:has(.etapes))` : un navigateur
   qui ne connait pas `:has()` ignorerait la regle entiere et laisserait une
   colonne vide de 288 px sur la page sans JavaScript. */
.reserver__carte--guidee {
  grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
}

/* ------------------------- La colonne des etapes ------------------------- */

/* Rose pale, pas prune sombre : la carte doit rester claire d'un bout a
   l'autre. La colonne se distingue du volet par sa teinte et son filet, pas
   par un contraste de valeur. */
.etapes {
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  border-right: 1px solid rgb(238, 226, 231);
  background: rgb(252, 245, 248);
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
}

.etapes__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un bouton, pas un simple reperage : une etape deja franchie se rouvre d'un
   clic. Revenir sur son choix de soin ne doit pas demander de repasser par
   « Retour » deux fois. */
.etape {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgb(240, 231, 235);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: rgb(86, 88, 94);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.etape:disabled {
  cursor: default;
  opacity: 0.55;
}

.etape:hover:not(:disabled),
.etape:focus-visible {
  border-color: rgb(226, 186, 200);
  color: rgb(56, 30, 40);
}

.etape--courant {
  border-color: rgb(216, 115, 139);
  background: rgb(250, 236, 241);
  color: rgb(56, 30, 40);
  font-weight: 500;
}

.etape__icone {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
}

.etape__icone svg {
  display: block;
  width: 100%;
  height: 100%;
}

.etape__nom {
  flex: 1;
  min-width: 0;
}

/* La pastille de droite : creuse tant que l'etape n'est pas faite, pleine
   ensuite. C'est le seul retour visuel qui dit « celle-la est reglee ». */
.etape__pastille {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(226, 186, 200);
  border-radius: 50%;
}

.etape--courant .etape__pastille {
  border-color: rgb(216, 115, 139);
}

.etape--faite .etape__pastille {
  border-color: rgb(216, 115, 139);
  background: rgb(216, 115, 139);
}

.etapes__pied {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgb(238, 226, 231);
  text-align: center;
}

.etapes__intitule {
  margin: 0 0 10px;
  color: rgb(140, 142, 148);
  font-size: 14px;
}

.etapes__valeur {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.etapes__valeur a {
  color: rgb(56, 30, 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 115, 139, 0.45);
}

.etapes__valeur a:hover,
.etapes__valeur a:focus-visible {
  text-decoration: underline;
}

.etapes__reduire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgb(86, 88, 94);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.etapes__reduire:hover {
  color: #ad4a63;
}

.etapes__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(226, 186, 200);
  border-radius: 50%;
}

.etapes__fleche svg {
  width: 15px;
  height: 15px;
}

/* Repliee, la colonne ne garde que ses icones. Les intitules sont retires du
   flux et non simplement masques : `visibility` laisserait la colonne large. */
.reserver__carte--repliee {
  grid-template-columns: 84px minmax(0, 1fr);
}

.reserver__carte--repliee .etape__nom,
.reserver__carte--repliee .etape__pastille,
.reserver__carte--repliee .etapes__intitule,
.reserver__carte--repliee .etapes__valeur,
.reserver__carte--repliee .etapes__texte {
  display: none;
}

.reserver__carte--repliee .etape {
  justify-content: center;
  padding: 14px 0;
}

.reserver__carte--repliee .etapes {
  padding: 22px 12px;
}

.reserver__carte--repliee .etapes__reduire {
  justify-content: center;
}

/* --------------------------- Le volet de droite --------------------------- */

.volet {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Le titre porte un chevron qui ramene a l'etape precedente. Il est dessine
   par le script, avec l'entete qui l'accueille : sans JavaScript il n'y a pas
   d'etapes, donc nulle part ou revenir. L'espacement et le trait restent donc
   sur le titre, et l'entete les reprend a son compte quand il existe — la page
   sans script garde sa mise en page. */
.volet__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 32px 22px;
  border-bottom: 1px solid rgb(238, 226, 231);
}

.volet__entete .volet__titre {
  padding: 0;
  border-bottom: none;
}

.volet__retour {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(238, 226, 231);
  border-radius: 50%;
  background: rgb(255, 255, 255);
  color: rgb(56, 30, 40);
  cursor: pointer;
}

/* `display: flex` l'emporterait sur `hidden`. */
.volet__retour[hidden] {
  display: none;
}

.volet__retour:hover,
.volet__retour:focus-visible {
  border-color: rgb(216, 115, 139);
  background: rgb(250, 236, 241);
  color: #ad4a63;
}

.volet__retour svg {
  width: 18px;
  height: 18px;
}

.volet__titre {
  margin: 0;
  padding: 26px 32px 22px;
  border-bottom: 1px solid rgb(238, 226, 231);
  color: rgb(56, 30, 40);
  font-family: var(--h2-font-family);
  font-size: 26px;
  font-weight: 400;
}

.volet__corps {
  flex: 1;
  min-height: 0;
  padding: 28px 32px;
  overflow-y: auto;
}

.volet__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 32px;
  border-top: 1px solid rgb(238, 226, 231);
  background: rgb(250, 250, 251);
}

/* « Retour » a gauche, « Continuer » a droite : le sens de lecture. Quand
   « Retour » est absent — a la premiere etape — le bouton de droite ne doit
   pas glisser a gauche pour autant. */
.volet__pied [data-retour][hidden] + [data-suivant] {
  margin-left: auto;
}

.bouton-etape {
  height: 48px;
  padding: 0 26px;
  border: 1px solid rgb(226, 186, 200);
  border-radius: 24px;
  background: rgb(255, 255, 255);
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  cursor: pointer;
}

.bouton-etape:hover:not(:disabled) {
  border-color: rgb(216, 115, 139);
  color: #ad4a63;
}

.bouton-etape--plein {
  border-color: rgb(216, 115, 139);
  background: rgb(216, 115, 139);
  color: rgb(255, 255, 255);
}

.bouton-etape--plein:hover:not(:disabled) {
  background: rgb(202, 96, 122);
  color: rgb(255, 255, 255);
}

.bouton-etape:disabled {
  border-color: rgb(232, 199, 211);
  background: rgb(232, 199, 211);
  color: rgb(255, 255, 255);
  cursor: default;
}

/* ------------------------------ Les groupes ------------------------------ */

.pas {
  margin: 0;
  padding: 0;
  border: none;
}

/* Sans le script, les trois groupes se suivent et leur legende les separe.
   Avec lui, un seul groupe parait et sa legende ferait doublon avec le titre
   du volet : le script pose alors `data-etapes` sur le formulaire. */
.reserver__carte[data-etapes] .pas__legende {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pas__legende {
  margin: 0 0 18px;
  padding: 0;
  color: rgb(56, 30, 40);
  font-family: var(--h2-font-family);
  font-size: 22px;
}

.pas + .pas {
  margin-top: 36px;
}

.pas__champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
}

.pas__label {
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 500;
}

.pas__requis {
  color: #ad4a63;
}

.pas__saisie {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgb(228, 228, 233);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 16px;
}

.pas__saisie:focus-visible {
  outline: 2px solid rgb(216, 115, 139);
  outline-offset: 1px;
}

.pas__saisie--zone {
  min-height: 110px;
  resize: vertical;
}

.pas__aide {
  color: rgb(140, 142, 148);
  font-family: var(--body-font-family);
  font-size: 14px;
  line-height: 1.55;
}

/* Quand elle explique pourquoi l'heure retenue a disparu, plutot que de
   rappeler que le creneau est facultatif. */
.pas__aide--alerte {
  color: rgb(176, 60, 60);
}

.pas__mention {
  margin: 4px 0 0;
  color: rgb(140, 142, 148);
  font-family: var(--body-font-family);
  font-size: 13px;
  line-height: 1.6;
}

.pas__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------- Le choix du soin --------------------------- */

/* La liste deroulante reste dans la page — c'est elle que `publier.mjs`
   remplit, et le repli sans JavaScript. Le script la masque et dessine par
   dessus le selecteur a deux colonnes : les categories a gauche, les soins et
   leurs prix a droite. Trente-six lignes a plat dans un menu natif obligent a
   faire defiler pour comparer deux tarifs. */
.choix {
  position: relative;
}

.choix__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgb(228, 228, 233);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: rgb(140, 142, 148);
  font-family: var(--body-font-family);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.choix__bouton--rempli {
  color: rgb(56, 30, 40);
}

.choix__bouton:hover,
.choix__bouton[aria-expanded="true"] {
  border-color: rgb(216, 115, 139);
}

.choix__prix-choisi {
  flex: none;
  color: #ad4a63;
  font-size: 15px;
}

.choix__chevron {
  flex: none;
  display: flex;
  width: 18px;
  height: 18px;
  color: rgb(86, 88, 94);
}

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

.choix__bouton[aria-expanded="true"] .choix__chevron {
  transform: rotate(180deg);
}

/* Le panneau reste dans le flux, il ne flotte pas par-dessus.

   En `position: absolute` il etait rogne par le volet, qui defile
   (`overflow-y: auto`) : le bas de la liste tombait hors de la boite et on ne
   pouvait plus l'atteindre — ni en faisant defiler la colonne, ni en faisant
   defiler le volet. Dans le flux, il pousse ce qui suit et tout se rejoint. */
.choix__panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgb(228, 228, 233);
  border-radius: 12px;
  background: rgb(255, 255, 255);
  overflow: hidden;
}

.choix__panneau[hidden] {
  display: none;
}

.choix__colonne {
  min-width: 0;
  max-height: 264px;
  overflow-y: auto;
  /* Le defilement reste dans la colonne au lieu d'emporter le volet des qu'on
     arrive au bout. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.choix__colonne + .choix__colonne {
  border-left: 1px solid rgb(238, 226, 231);
}

.choix__entete {
  position: sticky;
  top: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(238, 226, 231);
  background: rgb(248, 248, 250);
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 13px;
}

.choix__categorie,
.choix__service {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.choix__categorie:hover,
.choix__service:hover,
.choix__categorie:focus-visible,
.choix__service:focus-visible {
  background: rgb(250, 236, 241);
}

.choix__categorie--courante {
  background: rgb(243, 243, 246);
  color: #ad4a63;
}

.choix__nom {
  flex: 1;
  min-width: 0;
}

.choix__compte {
  flex: none;
  color: rgb(140, 142, 148);
  font-size: 13px;
}

/* Le chevron du depliant. Il ne sert que sur telephone, ou une categorie
   s'ouvre pour de bon ; sur grand ecran elle ne fait que remplir la colonne
   d'a cote, et une fleche promettrait autre chose. */
.choix__fleche {
  flex: none;
  display: none;
  width: 16px;
  height: 16px;
  color: rgb(140, 142, 148);
}

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

.choix__prix {
  flex: none;
  color: #ad4a63;
  font-size: 14px;
}

.choix__service--choisi {
  background: rgb(250, 236, 241);
  font-weight: 500;
}

/* --------------------------- La date et l'heure --------------------------- */

.quand__etat {
  margin: 0 0 16px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
  line-height: 1.6;
}

.quand__etat--alerte {
  color: rgb(176, 60, 60);
}

.quand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
  gap: 24px;
}

.quand__colonne {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quand__sous-titre {
  margin: 0 0 8px;
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 600;
}

.quand__fuseau {
  margin: 0 0 12px;
  color: rgb(140, 142, 148);
  font-family: var(--body-font-family);
  font-size: 13px;
}

.quand__vide {
  margin: 0;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
}

.quand__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

/* 44 px de haut : la taille minimale d'une cible tactile confortable. */
.quand__heure {
  flex: none;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(226, 186, 200);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  cursor: pointer;
}

.quand__heure:hover,
.quand__heure:focus-visible {
  border-color: rgb(216, 115, 139);
  background: rgb(250, 236, 241);
}

.quand__heure.actif {
  border-color: rgb(216, 115, 139);
  background: rgb(216, 115, 139);
  color: rgb(255, 255, 255);
}

/* « Avec qui ? » ne parait qu'une fois l'heure retenue. Les noms se posent en
   ligne et non en colonne : ils sont deux ou trois, la ou les heures sont
   quinze. */
.quand__qui:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgb(238, 226, 232);
}

.quand__liste--qui {
  flex-direction: row;
  flex-wrap: wrap;
  max-height: none;
  overflow: visible;
}

/* Qui a retenu une heure doit pouvoir s'en defaire sans deviner comment : le
   creneau est facultatif. Le lien ne parait que dans ce cas. */
.quand__retirer {
  align-self: flex-start;
  margin-top: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.quand__retirer:hover {
  color: #ad4a63;
}

/* ------------------------------ Le calendrier ------------------------------ */

.calendrier {
  align-self: start;
  padding: 16px;
  border: 1px solid rgb(228, 228, 233);
  border-radius: 14px;
  background: rgb(255, 255, 255);
}

.calendrier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.calendrier__mois {
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: 500;
}

.calendrier__mois::first-letter { text-transform: uppercase; }

.calendrier__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgb(56, 30, 40);
  cursor: pointer;
}

.calendrier__fleche svg { width: 18px; height: 18px; }
.calendrier__fleche:hover:not(:disabled) { background: rgb(243, 243, 246); }
.calendrier__fleche:disabled { color: rgb(198, 199, 205); cursor: default; }

.calendrier__semaine,
.calendrier__jours {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendrier__semaine {
  margin-bottom: 6px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 13px;
  text-align: center;
}

.calendrier__jour {
  position: relative;
  aspect-ratio: 1;
  min-height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: rgb(56, 30, 40);
  font-family: var(--body-font-family);
  font-size: 15px;
  cursor: pointer;
}

.calendrier__jour:hover:not(:disabled) { background: rgb(250, 236, 241); }

/* Un jour sans heure libre reste lisible mais eteint : le masquer ferait
   croire a un trou dans le mois. */
.calendrier__jour--pris {
  color: rgb(198, 199, 205);
  cursor: default;
}

/* Le point sous la date d'aujourd'hui : un reperage, pas une selection. */
.calendrier__jour--aujourdhui::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

.calendrier__jour--choisi {
  border-color: rgb(216, 115, 139);
  background: rgb(216, 115, 139);
  color: rgb(255, 255, 255);
}

.calendrier__jour--choisi:hover:not(:disabled) { background: rgb(202, 96, 122); }

/* ------------------------- Apres l'envoi ------------------------- */

/* Une fois la demande enregistree, la carte cede la place a ce panneau : il
   occupe la meme largeur, pour que la page ne saute pas. */
/* Le bloc de remerciement remplace le formulaire une fois la demande partie.
   Tout y est centre, sur telephone comme sur grand ecran : trois lignes et un
   bouton, ce n'est plus une page a parcourir mais une reponse a lire. Aligne a
   gauche dans une boite large, le bouton se retrouvait seul dans un coin. */
.merci {
  padding: 48px 40px;
  border: 1px solid rgb(240, 231, 235);
  border-radius: 20px;
  background: rgb(250, 236, 241);
  box-shadow: 0 14px 36px rgba(56, 30, 40, 0.07);
  text-align: center;
}

.merci:focus { outline: none; }

.merci__titre {
  /* Une largeur de lecture, et non celle de la boite : centree, une ligne de
     700 px oblige l'oeil a chercher le debut de la suivante. */
  max-width: 22ch;
  margin: 0 auto 16px;
  color: #ad4a63;
  font-family: var(--h2-font-family);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
}

.merci__texte {
  max-width: 46ch;
  margin: 0 auto 12px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 16px;
  line-height: 1.7;
}

/* Le meme bouton, en lien. `inline-flex` pour que la hauteur de
   `.bouton-etape` s'applique — un <a> reste sinon a la hauteur de son texte —
   et pour que le centrage de `.merci` le prenne comme une ligne de plus. Il
   arrive souligne, d'ou la remise a zero. */
.merci__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  text-decoration: none;
}

/* L'echec ne vide pas le formulaire : ce qui a ete saisi reste a l'ecran, et
   le bouton WhatsApp part avec le meme texte. */
.alerte {
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgb(253, 236, 236);
}

/* L'alerte emprunte `merci__texte`, mais elle vit dans le formulaire : elle
   commente des champs alignes a gauche et se lit avec eux, sur toute sa
   largeur. La largeur de lecture et les marges automatiques du remerciement ne
   la concernent donc pas. */
.alerte .merci__texte {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  color: rgb(56, 30, 40);
}

/* ------------------------------ Sur telephone ------------------------------ */

/* Sous 900 px la carte passe en une colonne : la colonne des etapes devient un
   ruban horizontal au-dessus du volet, et le bandeau d'infos descend sous la
   carte — c'est la carte qu'on vient chercher, elle doit etre la premiere
   chose a l'ecran. */
@media screen and (max-width: 900px) {
  .reserver__inner {
    display: flex;
    flex-direction: column;
    padding: 48px 16px 64px;
  }

  .reserver__noscript { order: 2; }
  .reserver__carte { order: 3; }
  .merci { order: 3; }
  .infos { order: 4; }

  .infos {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 36px 0 0;
  }

  .reserver__carte,
  .reserver__carte--guidee,
  .reserver__carte--repliee {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .etapes {
    padding: 14px 12px;
  }

  /* Trois etapes cote a cote : empilees, elles prendraient tout l'ecran avant
     le premier champ. A parts egales, et sur toute la largeur de la carte.

     Le `flex: 1` etait pose sur le bouton, mais le bouton n'est pas l'enfant
     direct de la liste : chaque etape a son `<li>`. Ce sont donc les `<li>`
     qui se partageaient la ligne, chacun a la largeur de son texte — « Le
     soin » deux fois plus etroit que « Vos coordonnees » — et les trois
     s'entassaient a gauche en laissant un vide a droite. Trois cases inegales
     se lisent comme trois etapes d'inegale importance, alors qu'elles se
     valent. */
  .etapes__liste {
    flex-direction: row;
    gap: 8px;
  }

  .etapes__liste > li {
    display: flex;
    flex: 1 1 0;
    /* Sans quoi un `<li>` refuse de descendre sous la largeur de son texte, et
       le partage a parts egales ne tient plus. */
    min-width: 0;
  }

  .etape {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 4px;
    font-size: 12px;
    text-align: center;
  }

  /* Deux lignes reservees a l'intitule. « Vos coordonnees » ne tient pas sur
     une a cette largeur, et sans cette reserve son icone et sa pastille
     monteraient d'une demi-ligne par rapport aux deux autres. */
  .etape__nom {
    flex: none;
    /* Une hauteur interlignes posee, et non « normal » : la reserve se calcule
       alors exactement — deux lignes, ni plus ni moins, quelle que soit la
       police que le navigateur a sous la main. */
    line-height: 1.4;
    min-height: 2.8em;
  }

  /* Le pied de la colonne et le repli n'ont plus de place : le bandeau
     d'infos, juste dessous, dit deja la meme chose. */
  .etapes__pied,
  .etapes__reduire {
    display: none;
  }

  .volet__entete { gap: 10px; padding: 20px 20px 16px; }
  .volet__titre { padding: 20px 20px 16px; font-size: 22px; }
  .volet__retour { width: 34px; height: 34px; }
  .volet__corps { padding: 20px; }
  .volet__pied { padding: 14px 20px; }

  .bouton-etape { height: 46px; padding: 0 18px; font-size: 14px; }

  .quand {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* En colonne, les heures se rangent en lignes : douze boutons empiles
     feraient defiler la page pour rien. */
  .quand__liste {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }

  .quand__heure { min-width: 84px; }

  /* Le panneau n'est plus deux colonnes mais un depliant : les categories se
     suivent, et celle qu'on touche laisse tomber ses soins juste dessous.

     Cote a cote, chaque colonne n'aurait qu'un demi-ecran de large. L'une
     au-dessus de l'autre, il faudrait traverser huit categories avant
     d'apercevoir le premier soin. Une seule categorie se deplie a la fois :
     deux ouvertes redonneraient la liste a plat qu'on cherchait a eviter.

     C'est le script qui deplace la colonne des soins sous la categorie
     ouverte ; ici, on ne fait que l'habiller. */
  .choix__panneau {
    grid-template-columns: minmax(0, 1fr);
  }

  .choix__colonne--categories {
    max-height: 60vh;
  }

  /* Les soins se deplient dans la categorie, sans defilement propre : un cadre
     qui defile dans un cadre qui defile emporte l'un pour l'autre des qu'on
     arrive au bout, et sur un ecran tactile on ne sait plus lequel on tient. */
  .choix__colonne--services {
    max-height: none;
    overflow: visible;
    border-top: 1px solid rgb(238, 226, 231);
    border-bottom: 1px solid rgb(238, 226, 231);
    background: rgb(252, 245, 248);
  }

  /* L'entete « Service » ferait doublon avec la categorie juste au-dessus. */
  .choix__colonne--services .choix__entete {
    display: none;
  }

  .choix__categorie {
    align-items: center;
    padding: 14px 16px;
  }

  /* Les soins rentrent d'un cran : on voit a quelle categorie ils tiennent. */
  .choix__service {
    padding-left: 30px;
  }

  .choix__fleche {
    display: flex;
  }

  .choix__categorie[aria-expanded="true"] .choix__fleche {
    transform: rotate(180deg);
  }

  .merci { padding: 32px 22px; }
}


/* ------------------------------------------------------------------ */
/* Les vignettes de l'accueil, devenues cliquables                      */
/* ------------------------------------------------------------------ */

/* Les six vignettes de soins de l'accueil n'etaient que des images : on
   cliquait dessus, il ne se passait rien, et Google n'y voyait aucun chemin
   vers les tarifs. Chacune est maintenant un lien.

   `display: contents` : le lien n'engendre aucune boite. La grille de l'export
   place toujours l'image exactement ou elle etait, et les regles ecrites pour
   `.image .image__image` continuent de la trouver — le lien s'intercale sans
   se voir. C'est verifie : les vignettes gardent leurs dimensions au pixel.

   Le contour de focus, lui, doit se voir. Il est pose sur l'image, puisque le
   lien n'a pas de boite ou le dessiner. */
.vignette__lien {
  display: contents;
}

.vignette__lien:focus-visible .image__image {
  outline: 3px solid #ad4a63;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Le numero et l'e-mail du pied de page                               */
/* ------------------------------------------------------------------ */

/* Le numero etait ecrit en toutes lettres, et rien de plus : sur telephone, il
   fallait le retenir, sortir de la page, ouvrir le clavier. Un appel perdu a
   chaque fois. Il est maintenant un lien `tel:`.

   Il garde la couleur du texte qui l'entoure : le pied de page a deja ses
   liens de navigation en rose, un de plus ferait croire a une page de plus. Le soulignement
   n'apparait qu'au survol et au clavier. */
.pied__contact {
  color: inherit;
  text-decoration: none;
}

.pied__contact:hover,
.pied__contact:focus-visible {
  text-decoration: underline;
}

/* Mention de l'agence qui a cree le site, sous le copyright. Contrairement au
   numero de telephone, ce lien est au milieu d'une phrase : il garde son
   soulignement, sans quoi seule la couleur (la meme que le texte) le
   distinguerait. */
.pied__credit {
  color: inherit;
  text-decoration: underline;
}

/* L'export espace deux paragraphes d'un meme bloc de 32 px (`.text-box .body`) :
   la mention tomberait loin du copyright. Elle s'y colle, a 4 px, comme les
   lignes d'un meme groupe plus haut. */
.footer__legal .body:not(:last-child) {
  margin-bottom: 4px;
}

.pied__credit:hover,
.pied__credit:focus-visible {
  color: #ad4a63;
}

/* ------------------------------------------------------------------ */
/* Navigation du pied de page                                           */
/* ------------------------------------------------------------------ */

/* Le pied de page ne listait que trois pages sur cinq, et dans un ordre qui
   n'etait ni celui du menu ni le meme d'un affichage a l'autre : « Notre
   univers, L'institut, Nos offres » en desktop, « L'institut, Notre univers,
   Nos offres » en mobile. « Nos soins » et « Contact » ont ete ajoutes, puis
   « Nos conseils », et les six liens suivent maintenant l'ordre du menu
   principal.

   Le placement passe par les variables de l'export, pas par une regle CSS :
   `--grid-row` 4 a 9 dans la colonne 16/17 en desktop, `--m-grid-row` 9 a 14
   en mobile. En desktop deux de ces rangees font 48 px la ou les autres en font
   24 ; le texte se pose quand meme en haut de sa rangee (`align-self: start`
   sur le composant, pose par l'export), donc le rythme reste de 24 px.

   « Nos conseils » est arrive en quatrieme position, a sa place dans l'ordre du
   menu. Les deux liens suivants ont donc ete renumerotes plutot que decales :
   `footer__lien--N` dit le rang affiche, et rien d'autre ; s'il cessait de le
   dire, la mise en page mobile plus bas se lirait a l'envers.

   Les six elements se suivent aussi dans le HTML, a la suite du titre
   « Navigation » : la tabulation au clavier passe desormais dans l'ordre
   affiche. */

/* En mobile, les ecarts de l'export allaient de 0 a 67 px sans logique : les
   cinq liens colles les uns aux autres, un trou de 67 px avant « Horaire »,
   l'adresse qui recouvrait l'e-mail d'un pixel. Les dix-sept elements sont donc
   repris un par un, une rangee chacun, et le rythme tient a trois ecarts et
   trois seulement :

   | 32 px | entre deux groupes                          |
   | 8 px  | sous un intitule                            |
   | 4 px  | entre deux lignes d'un meme groupe          |

   Les colonnes de l'export ne sont pas touchees : les icones sociales tirent
   leur `space-between` de leur largeur de colonne, et les horaires tiennent sur
   deux colonnes sur trois. */

@media screen and (max-width: 920px) {
  #zSiG-O > .block-layout {
    --footer-groupe: 32px;
    --footer-intitule: 8px;
    --footer-ligne: 4px;
    grid-template-rows: repeat(17, auto);
    min-height: 0;
    align-content: start;
  }

  /* Une marge ne compte dans la hauteur d'une rangee que si l'element n'est
     plus fige a `height: 100%` par l'export. */
  #zSiG-O .layout-element {
    height: auto;
  }

  #zSiG-O .footer__marque   { grid-row: 1; }
  #zSiG-O .footer__intro    { grid-row: 2; }
  #zSiG-O .footer__social   { grid-row: 3; }
  #zSiG-O .footer__nav      { grid-row: 4; }
  #zSiG-O .footer__lien--1  { grid-row: 5; }
  #zSiG-O .footer__lien--2  { grid-row: 6; }
  #zSiG-O .footer__lien--3  { grid-row: 7; }
  #zSiG-O .footer__lien--4  { grid-row: 8; }
  #zSiG-O .footer__lien--5  { grid-row: 9; }
  #zSiG-O .footer__lien--6  { grid-row: 10; }
  #zSiG-O .footer__horaire  { grid-row: 11; }
  #zSiG-O .footer__horaires { grid-row: 12; }
  #zSiG-O .footer__coord    { grid-row: 13; }
  #zSiG-O .footer__email    { grid-row: 14; }
  #zSiG-O .footer__adresse  { grid-row: 15; }
  #zSiG-O .footer__tel      { grid-row: 16; }
  #zSiG-O .footer__legal    { grid-row: 17; }

  #zSiG-O .footer__titre {
    margin-bottom: var(--footer-intitule);
  }

  #zSiG-O .footer__lien,
  #zSiG-O .footer__email,
  #zSiG-O .footer__adresse {
    margin-bottom: var(--footer-ligne);
  }

  /* Dernier element d'un groupe : l'ecart passe a celui des groupes. */
  #zSiG-O .footer__intro,
  #zSiG-O .footer__social,
  #zSiG-O .footer__lien--6,
  #zSiG-O .footer__horaires,
  #zSiG-O .footer__tel {
    margin-bottom: var(--footer-groupe);
  }

  #zSiG-O .footer__legal {
    margin-bottom: 0;
  }
}

/* En desktop, les rangees du pied de page.

   L'export en donnait treize, dont deux de 48 px au milieu : elles servaient de
   reserve au texte de presentation, qui traverse les rangees 4 a 8 et depasse
   la hauteur des liens poses a cote. Tant que la colonne des liens s'arretait a
   la rangee 8, cette reserve tombait sous le dernier lien et ne se voyait pas.

   « Nos conseils » a fait passer la liste a six liens, donc jusqu'a la rangee
   9 : le surplus s'est retrouve entre « L'institut » et « Réservation », un
   trou de 53 px au milieu d'une liste reglee a 29. Les rangees sont donc
   redonnees ici, toutes au meme minimum : le texte de presentation les fait
   grandir ensemble, et les six liens gardent le meme ecart.

   Une seule requete pour les deux largeurs desktop : l'export en avait deux,
   la seconde n'etant que la premiere exprimee en `vw` (2,53 vw de 1224 px font
   31 px, 1,96 vw en font 24). Ce sont des minimums, et c'est le contenu qui
   decide du reste. */
@media screen and (min-width: 921px) {
  #zSiG-O > .block-layout {
    grid-template-rows:
      0px
      minmax(31px, auto)
      minmax(9px, auto)
      repeat(6, minmax(24px, auto))
      minmax(24px, auto)
      minmax(24px, auto)
      minmax(18px, auto)
      0px;
  }
}

/* ------------------------------------------------------------------ */
/* Bouton WhatsApp flottant                                             */
/* ------------------------------------------------------------------ */

/* L'etat Zyro conserve bien le numero du salon (`whatsAppNumber`), mais le
   bouton qui allait avec etait pose par le JavaScript de Zyro, absent de
   l'export. Il est donc refait ici, en HTML et CSS seuls : le logo est un SVG
   en ligne, aucune requete reseau. Le bloc est repete en fin de <body> sur
   chaque page. */
.whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;   /* au-dessus de l'en-tete (18) et des fonds de blocs (13-14) */
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.whatsapp__pastille {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(16, 84, 42, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.whatsapp:hover .whatsapp__pastille,
.whatsapp:focus-visible .whatsapp__pastille {
  background-color: #1ebe5b;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(16, 84, 42, 0.4);
}

.whatsapp:focus-visible {
  outline: none;
}

.whatsapp:focus-visible .whatsapp__pastille {
  outline: 3px solid rgba(216, 115, 139, 0.9);
  outline-offset: 3px;
}

.whatsapp__icone {
  width: 32px;
  height: 32px;
  fill: #fff;
  display: block;
}

/* Libelle au survol, a gauche de la pastille. */
.whatsapp__libelle {
  order: -1;
  padding: 9px 16px;
  border-radius: 999px;
  background-color: #fff;
  color: rgb(86, 88, 94);
  /* `--body-font-family` est posee sur `main.page`, pas sur `:root` : le bouton
     vit en fin de <body>, hors de cette portee, d'ou la police en clair. */
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsapp:hover .whatsapp__libelle,
.whatsapp:focus-visible .whatsapp__libelle {
  opacity: 1;
  transform: none;
}

/* Pas de survol au doigt : sous 920 px, le libelle ne sert a rien et la
   pastille est ramenee a 54 px pour ne pas manger le contenu. */
@media screen and (max-width: 920px) {
  .whatsapp {
    right: 16px;
    bottom: 16px;
  }

  .whatsapp__libelle {
    display: none;
  }

  .whatsapp__pastille {
    width: 54px;
    height: 54px;
  }

  .whatsapp__icone {
    width: 29px;
    height: 29px;
  }
}

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

  .whatsapp:hover .whatsapp__pastille,
  .whatsapp:focus-visible .whatsapp__pastille {
    transform: none;
  }
}


/* ------------------------------------------------------------------ */
/* Survol des photos et des cartes                                      */
/* ------------------------------------------------------------------ */

/* Les photos posees dans un cadre de l'export se zooment au survol grace a
   `image--hover-zoom`, une classe que Zyro sait deja traiter (zoom 1.06 en
   0,6 s, debordement coupe par `.image`). Elle est ajoutee dans le HTML aux
   seules vraies photos : les six categories et les avant/apres de l'accueil,
   la cabine et les trois soins de L'institut. Les images detourees du hero,
   les fonds roses et les portraits des avis n'en ont pas — un zoom coupe une
   silhouette detouree, et les fonds n'ont rien a montrer.

   Restent les photos ecrites a la main, qui n'ont pas de cadre Zyro : elles
   sont traitees ici, avec la meme courbe et la meme duree. */

/* Page Nos soins : la carte se souleve deja, la photo se rapproche. Le
   debordement est coupe par la carte, qui a le meme arrondi. */
.services__carte {
  overflow: hidden;
}

.services__photo {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.services__carte:hover .services__photo {
  transform: scale(1.04);
}

/* Accueil, section institut : la photo est seule, sans cadre qui la coupe.
   Elle se souleve donc au lieu de se zoomer, et son ombre s'etale. */
.institut__photo {
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.institut__photo:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 32px 68px rgba(29, 30, 32, 0.22);
}

/* `:not(._)` monte la specificite d'un cran pour passer devant la regle de
   l'export, qui n'a pas de garde-fou sur ce point. */
@media (prefers-reduced-motion: reduce) {
  .image--hover-zoom:hover .image__image:not(.image__image--cropped):not(._),
  .services__carte:hover .services__photo,
  .institut__photo:hover {
    transform: none;
  }

  .image--hover-zoom .image__image:not(.image__image--cropped):not(._),
  .services__photo,
  .institut__photo {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Animations d'apparition                                              */
/* ------------------------------------------------------------------ */

/* La classe `js-anim` est posee sur <html> par `assets/js/animations.js`, dans
   le <head>, donc avant le premier rendu : rien ne clignote. Sans elle — pas
   de JavaScript, ou visiteur qui a demande moins d'animations — aucune de ces
   regles ne s'applique et la page s'affiche telle quelle (voir
   `offline-fix.css`).

   Trois etats, dans l'ordre de vie d'un element :
   `data-anim=""` masque, `data-anim="vu"` en train de monter, puis plus
   d'attribut du tout — le script le retire une fois l'animation finie. */

/* 1. Au repos. L'attribut retire, il faut repasser devant l'etat initial de
      l'export, qui remettrait l'element a `opacity: 0` faute de
      `data-animation-state`, et devant lui seulement : les elements gardent
      ainsi leurs propres transitions (le survol des cartes de soins). */
html.js-anim .transition:not([data-anim]) {
  opacity: 1;
  transform: none;
}

/* 2. Masque, en attente. Le second selecteur passe devant les etats initiaux
      de l'export — `--slide` monte de 20 % de la hauteur de l'element, soit
      200 px sur un grand bloc, `--scale` part d'un zoom arriere — pour que
      tout le monde ait la meme montee de 22 px. */
html.js-anim [data-anim],
html.js-anim .transition[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-retard, 0ms);
}

/* 3. En place. `--anim-retard` est pose par le script : les elements qui
      entrent ensemble dans la fenetre se decalent de 70 ms l'un apres l'autre,
      de haut en bas. */
html.js-anim [data-anim="vu"],
html.js-anim .transition[data-anim="vu"] {
  opacity: 1;
  transform: none;
}

/* Ceinture et bretelles : le script s'abstient deja quand le navigateur
   demande moins d'animations, mais si la preference change en cours de route,
   tout revient en place sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-anim],
  html.js-anim .transition[data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Pages « Nos conseils » : la liste, puis l'article                    */
/* ------------------------------------------------------------------ */

/* Le hero des deux pages reprend celui de « Nos offres » — meme balisage, meme
   voile, meme grille. Seule la couleur de fond est reposee ici : elle se voit
   le temps que l'image arrive, et le brun sombre de la bande « expertise »
   evite un eclair blanc au chargement. */
#hero-conseils > .block-background,
.article-hero > .block-background {
  background: #2a1c1a;
}

/* Le titre d'un article est une phrase, pas un mot : « Nos offres » tient en
   deux syllabes a 64 px, « Soin du visage avant un mariage : 48 heures, pas la
   veille » y prendrait quatre lignes et deborderait le hero.

   La taille se corrige par les variables de l'export plutot que par une regle
   sur `h1` : ce sont elles que le reste de la feuille lit, et elles portent
   deja la variante telephone. */
.article-hero {
  --h1-font-size: 40px;
  --h1-m-font-size: 26px;
}

/* Comme les quatre autres heros de titre : la meme hauteur sur telephone,
   quelle que soit la longueur du texte (voir plus haut). */
@media screen and (max-width: 920px) {
  #hero-conseils > .block-layout,
  .article-hero > .block-layout {
    min-height: 350px;
  }
}

/* --- La liste des articles ---------------------------------------- */

/* Une carte par article : la vignette a gauche, le titre, le chapeau et
   « Lire la suite » a droite. Deux par rangee en grand ecran.

   La carte est bornee a 640 px, et ce n'est pas decoratif. Sa hauteur est celle
   de la vignette ; son texte, lui, tient en quelques lignes. Etalee sur toute
   la largeur — ce qui arrive avec un seul article, ou des que la grille repasse
   sur une colonne — elle laissait un vide de cent pixels sous le chapeau, le
   texte se raccourcissant a mesure que la carte s'allongeait. Bornee, elle
   garde les proportions qu'elle a par deux, et une rangee a moitie remplie se
   lit comme ce qu'elle est : un article, en attendant le suivant. */
section#conseils {
  background: #fdfaf7;
}

.conseils__cadre {
  box-sizing: border-box;
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 16px;
}

/* La phrase d'ouverture est centree, et non alignee a gauche comme les cartes
   qu'elle presente : elle parle de la page entiere, pas de l'article qui la
   suit. `margin: 0 auto` centre le bloc, `text-align` centre les lignes a
   l'interieur — il faut les deux, la largeur etant bornee a 64 caracteres. */
.conseils__intro {
  max-width: 64ch;
  margin: 0 auto 44px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
}

.conseils__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 32px;
}

.conseils__carte {
  position: relative;
  box-sizing: border-box;
  display: flex;
  gap: 22px;
  max-width: 640px;
  padding: 20px;
  border: 1px solid #e9e1db;
  border-radius: 20px;
  background: #ffffff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Le survol vire au gris, et non au rose.

   La premiere valeur, `#f4efec`, etait la teinte chaude du reste du site : huit
   points de rouge de plus que de bleu. Pose sur une carte blanche, cet ecart
   suffisait a la faire lire rose, et une carte rose ressemble a une carte
   selectionnee. Le gris neutre dit la meme chose — « ceci s'ouvre » — sans rien
   annoncer d'autre. Le rose reste ce qu'il est partout ailleurs sur le site :
   la couleur des liens et des boutons. */
.conseils__carte:hover,
.conseils__carte:focus-within {
  background: #eeeeed;
  border-color: #dedcd9;
}

.conseils__visuel {
  flex: 0 0 232px;
  align-self: stretch;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.conseils__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 272px;
  object-fit: cover;
}

.conseils__texte {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 8px 0;
}

.conseils__titre {
  margin: 0 0 12px;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.conseils__lien-titre {
  color: inherit;
  text-decoration: none;
}

/* Le lien du titre s'etend a toute la carte : on clique ou l'on veut, et il n'y
   a pourtant qu'un seul lien a annoncer et un seul arret au clavier. La
   vignette mene au meme endroit mais porte `tabindex="-1"` dans la page.

   Le contour de focus se pose sur ce meme calque, faute de quoi il encadrerait
   les mots du titre au lieu de la carte qu'on s'apprete a ouvrir. */
.conseils__lien-titre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}

.conseils__lien-titre:focus-visible::after {
  outline: 2px solid #ad4a63;
  outline-offset: 3px;
}

.conseils__chapeau {
  margin: 0 0 20px;
  color: rgb(86, 88, 94);
  font-family: var(--body-font-family);
  font-size: 15px;
  line-height: 1.65;
}

.conseils__suite {
  margin: auto 0 0;
}

.conseils__lire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ad4a63;
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 500;
}

.conseils__fleche {
  transition: transform 0.3s ease;
}

.conseils__carte:hover .conseils__fleche,
.conseils__carte:focus-within .conseils__fleche {
  transform: translateX(5px);
}

@media screen and (max-width: 1080px) {
  .conseils__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 620px) {
  .conseils__carte {
    flex-direction: column;
    gap: 18px;
  }

  .conseils__visuel {
    flex: none;
    width: 100%;
  }

  .conseils__visuel img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .conseils__texte {
    padding: 0 4px 4px;
  }
}

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

  .conseils__carte:hover .conseils__fleche,
  .conseils__carte:focus-within .conseils__fleche {
    transform: none;
  }
}

/* --- L'article ----------------------------------------------------- */

/* Une colonne de lecture, et rien autour : environ soixante-dix caracteres par
   ligne, c'est ce qui se lit sans que l'oeil perde sa ligne en revenant a
   gauche. Les 1224 px des autres sections en feraient le double. */
section.article {
  background: #ffffff;
}

.article__cadre {
  box-sizing: border-box;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}

.article__fil {
  margin: 0 0 32px;
  color: rgb(122, 118, 122);
  font-family: var(--body-font-family);
  font-size: 14px;
}

.article__fil a {
  color: #ad4a63;
  text-decoration: none;
}

.article__fil a:hover,
.article__fil a:focus-visible {
  text-decoration: underline;
}

.article__separateur {
  margin: 0 8px;
}

/* Le chapeau redit en gras ce que le hero dit deja en blanc sur l'image, et
   c'est voulu : le hero se lit de loin et disparait au premier defilement, la
   colonne de lecture doit pouvoir commencer toute seule. */
.article__chapeau {
  margin: 0 0 32px;
  color: rgb(38, 30, 34);
  font-family: var(--body-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.article__titre {
  margin: 40px 0 14px;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.3;
}

.article__texte p {
  margin: 0 0 18px;
  color: rgb(70, 68, 74);
  font-family: var(--body-font-family);
  font-size: 17px;
  line-height: 1.75;
}

.article__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article__liste li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 24px;
  color: rgb(70, 68, 74);
  font-family: var(--body-font-family);
  font-size: 17px;
  line-height: 1.65;
}

/* Les passages en gras servent de reperes dans un texte long : les etapes
   d'un calendrier, les intitules d'une liste. Poppins est charge en 400, 500 et
   600 ; sans cette regle le navigateur demanderait un 700 qui n'existe pas et
   l'epaissirait lui-meme, ce qui se voit. */
.article__texte strong {
  color: rgb(38, 30, 34);
  font-weight: 600;
}

/* Un lien dans le texte renvoie a un autre conseil. Il prend le rose du fil
   d'Ariane, et reste souligne : au milieu d'un paragraphe justifie, la couleur
   seule ne suffit pas a le distinguer d'un mot en gras. */
.article__texte a {
  color: #ad4a63;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article__texte a:hover,
.article__texte a:focus-visible {
  color: #8f3c51;
}

.article__liste li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ad4a63;
}

/* Texte justifie, comme « Notre histoire » sur la page L'institut. La cesure
   automatique repartit les blancs au lieu de les accumuler entre les mots ;
   elle s'appuie sur le `lang="fr"` du document, et sans elle une colonne de
   768 px laisserait des rivieres blanches au milieu des paragraphes.

   Les intertitres en sont exclus a dessein : un titre qui passe a deux lignes
   verrait sa premiere ligne etiree d'un bord a l'autre, ce qui se lit comme une
   faute. La phrase d'ouverture de « Nos conseils » l'est aussi : elle est
   centree, et les deux alignements ne peuvent pas tenir ensemble. */
.conseils__chapeau,
.article__chapeau,
.article__texte p,
.article__liste li {
  text-align: justify;
  hyphens: auto;
}

/* --- Le resume parle ------------------------------------------------ */

/* Un bouton rond, un intitule, une barre. Le lecteur natif du navigateur est
   dans la page ; `assets/js/lecteur-audio.js` l'habille et pose
   `.ecoute--dessine`. Tant que cette classe n'est pas la, c'est le lecteur
   natif qui s'affiche, empile sous son intitule : sans JavaScript, le resume
   s'ecoute quand meme.

   Il est place tout en haut de l'article, entre le fil d'Ariane et le
   chapeau : un resume propose apres l'article n'aurait plus rien a resumer. */
.ecoute {
  --ecoute-avance: 0%;
  box-sizing: border-box;
  margin: 0 0 36px;
  padding: 18px 22px;
  border: 1px solid #e9e1db;
  border-radius: 18px;
  background: #faf7f5;
}

.ecoute--dessine {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ecoute__source {
  display: block;
  width: 100%;
}

.ecoute--dessine .ecoute__source {
  display: none;
}

/* Les deux morceaux dessines n'existent que si le script a tourne : poses
   sans lui, ils n'auraient rien pour commander la lecture. */
.ecoute__bouton,
.ecoute__corps {
  display: none;
}

.ecoute--dessine .ecoute__bouton {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ad4a63;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ecoute__bouton:hover,
.ecoute__bouton:focus-visible {
  background: #8f3c51;
}

.ecoute__icone {
  width: 22px;
  height: 22px;
  fill: currentColor;
  /* Un triangle ne remplit pas son carre : centre geometriquement, il parait
     pousse vers la gauche. Deux pixels le remettent d'aplomb. Les deux barres
     de la pause, elles, sont symetriques et n'en ont pas besoin. */
  margin-left: 2px;
}

.ecoute[data-etat="joue"] .ecoute__icone {
  margin-left: 0;
}

.ecoute__pause {
  display: none;
}

.ecoute[data-etat="joue"] .ecoute__lecture {
  display: none;
}

.ecoute[data-etat="joue"] .ecoute__pause {
  display: inline;
}

.ecoute--dessine .ecoute__corps {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.ecoute__intitule {
  margin: 0 0 8px;
  color: rgb(38, 30, 34);
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 500;
}

/* La barre est un `input[type="range"]` deshabille : la partie ecoutee est un
   degre plein pose en fond, dont la largeur suit `--ecoute-avance`, que le
   script met a jour. Rien n'est anime — une transition sur la largeur ferait
   trainer la barre d'un dixieme de seconde derriere le son. */
.ecoute__piste {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background-color: #e4dcd6;
  background-image: linear-gradient(#ad4a63, #ad4a63);
  background-repeat: no-repeat;
  background-size: var(--ecoute-avance) 100%;
  cursor: pointer;
}

.ecoute__piste::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #ad4a63;
}

.ecoute__piste::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #ad4a63;
}

/* Firefox dessine sa propre piste grise, avec un lisere, par-dessus le fond de
   l'element : la partie ecoutee restait dessous, invisible. Elle est rendue
   transparente, et c'est le fond de l'input qui se voit, comme ailleurs. */
.ecoute__piste::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.ecoute__piste:focus-visible {
  outline: 2px solid #ad4a63;
  outline-offset: 4px;
}

/* Avant que la duree ne soit connue, deplacer le curseur ne veut rien dire :
   le script le desactive, la barre le dit. */
.ecoute__piste[disabled] {
  cursor: default;
  opacity: 0.55;
}

/* Les chiffres de largeur egale evitent que « 0:09 » puis « 0:10 » ne fassent
   sauter la ligne d'un pixel a chaque seconde. */
.ecoute__temps {
  margin: 8px 0 0;
  color: rgb(122, 118, 122);
  font-family: var(--body-font-family);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 620px) {
  .ecoute {
    padding: 16px;
  }

  .ecoute--dessine {
    gap: 14px;
  }

  .ecoute--dessine .ecoute__bouton {
    width: 46px;
    height: 46px;
  }
}

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

/* Un article qui se termine sur un point final renvoie le lecteur nulle part.
   Celui-ci se termine sur la seule chose qu'il reste a faire. */
.article__pied {
  margin: 48px 0 0;
  padding: 28px 30px;
  border: 1px solid #e9e1db;
  border-radius: 20px;
  background: #faf7f5;
}

.article__question {
  margin: 0 0 18px;
  color: rgb(38, 30, 34);
  font-family: var(--h2-font-family);
  font-size: 22px;
  line-height: 1.3;
}

.article__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.article__lien {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border: 1px solid #ad4a63;
  border-radius: 999px;
  color: #ad4a63;
  font-family: var(--body-font-family);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.article__lien:hover,
.article__lien:focus-visible {
  background: #ad4a63;
  color: #ffffff;
}

.article__lien--plein {
  background: #ad4a63;
  color: #ffffff;
}

.article__lien--plein:hover,
.article__lien--plein:focus-visible {
  background: #8f3c51;
  border-color: #8f3c51;
}

.article__retour {
  margin: 36px 0 0;
  font-family: var(--body-font-family);
  font-size: 15px;
}

.article__retour a {
  color: #ad4a63;
  text-decoration: none;
  border-bottom: 1px solid rgba(173, 74, 99, 0.35);
  padding-bottom: 2px;
}

.article__retour a:hover,
.article__retour a:focus-visible {
  border-bottom-color: #ad4a63;
}

@media screen and (max-width: 620px) {
  .article__chapeau {
    font-size: 18px;
  }

  .article__titre {
    margin-top: 32px;
    font-size: 23px;
  }

  .article__texte p,
  .article__liste li {
    font-size: 16px;
  }

  .article__pied {
    padding: 24px 20px;
  }

  .article__lien {
    width: 100%;
    justify-content: center;
  }
}

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