/* ==========================================================================
   Beauté d'ange — feuille de style
   Direction Cocon : rose, serif doux, angles ronds
   ========================================================================== */

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

/* Ce site n'a qu'une seule tenue, claire, et c'est un choix : l'identité de
   l'institut est rose sur blanc. Sans cette ligne, Chrome sur Android et
   Samsung Internet appliquent leur « thème sombre automatique » et inversent
   eux-mêmes les couleurs : le rose devient sale, les photos gardent leur fond
   clair au milieu d'une page sombre, et les contrastes vérifiés ne valent
   plus rien. La déclaration dit au navigateur que la page est conçue en clair
   et qu'il n'a pas à la retoucher. Elle règle aussi la couleur des barres de
   défilement et des champs natifs. */
:root { color-scheme: light; }

:root {
  /* Palette Rose. Contrastes vérifiés :
     --ink sur --bg = 11,5:1  ·  --dim sur --bg = 6,5:1  ·  blanc sur --pri = 4,6:1 */
  --bg:      #FEE5F3;
  --surf:    #FFFFFF;
  --surf-2:  #FFF7FB;
  --pri:     #DB2777;
  --pri-d:   #A81B58;
  /* Rose assez foncé pour servir de couleur de TEXTE sur les fonds clairs :
     5,9:1 sur --bg, là où --pri ne donne que 3,9:1 et échoue au niveau AA. */
  --pri-txt: #A81B58;
  --acc:     #9A6B12;
  --ink:     #4A1D35;
  --dim:     #6F4557;
  --line:    #F6CFE3;
  --onp:     #FFFFFF;

  /* Le logo, servi en masque : il prend la couleur qu'on lui donne.
     Chemin relatif à CE fichier, donc on remonte d'un cran. */
  --logo: url("../img/logo.svg");

  /* Angles ronds */
  --r-s:  14px;
  --r-m:  22px;
  --r-l:  34px;
  --r-p:  999px;

  --f-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad:   clamp(18px, 4vw, 46px);
  --sec:   clamp(56px, 8vw, 104px);
  --max:   1180px;

  --sh-s: 0 2px 10px -4px rgba(74, 29, 53, .18);
  --sh-m: 0 14px 34px -18px rgba(74, 29, 53, .34);
  --sh-l: 0 28px 60px -30px rgba(74, 29, 53, .40);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-disp);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.6vw, 62px); }
h2 { font-size: clamp(26px, 3.8vw, 41px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }

/* L'exposant des ordinaux (12e) doit rester en minuscule, même dans un bloc
   passé en majuscules par text-transform. */
sup { text-transform: none; font-size: .62em; vertical-align: .38em; letter-spacing: normal; font-weight: inherit; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement, pour le clavier et les lecteurs d'écran */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--pri); color: var(--onp); padding: 10px 18px;
  border-radius: var(--r-p); text-decoration: none; font-weight: 600;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--pri);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Sur les fonds rose ou prune, un contour rose serait invisible : on le passe
   en blanc. Sans cette règle, la navigation au clavier se perd dans la barre. */
.nav :is(a, button):focus-visible,
.cta a:focus-visible,
.foot a:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------- Barre de navigation */
/* Le logo au centre, trois entrées de chaque côté, le bouton de réservation au
   bout. Elle se resserre dès que la page défile : sinon elle mange un tiers de
   l'écran sur toutes les pages intérieures. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--surf);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow .3s ease;
}
body.defile .nav { box-shadow: 0 2px 18px rgba(74, 29, 53, .09); }

.nav__in {
  max-width: var(--max); margin-inline: auto;
  padding: var(--nav-y, 15px) var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(12px, 2.4vw, 32px);
  transition: padding .3s ease;
}
body.defile .nav__in { --nav-y: 7px; --nav-logo: 118px; }

.nav__list {
  display: flex; flex-wrap: wrap; align-items: center;
  /* 20 px et pas 26 : au-delà de --max la barre ne s'élargit plus, et à sept
     entrées les trois de droite plus le bouton dépassaient de 6 px une fois
     Karla chargée. Resserrer l'espacement rend 12 px, de quoi tenir. */
  gap: clamp(10px, 1.5vw, 20px);
  list-style: none; margin: 0; padding: 0;
}
.nav__list--d { justify-content: flex-end; }
.nav__list a {
  color: var(--ink); text-decoration: none;
  font-size: clamp(12.5px, 1.1vw, 14px); letter-spacing: .07em; text-transform: uppercase;
  padding-block: 6px; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav__list a:hover, .nav__list a:focus-visible { color: var(--pri-txt); border-bottom-color: var(--pri); }
.nav__list a[aria-current="page"] { color: var(--pri-txt); font-weight: 600; border-bottom-color: var(--pri); }

/* Le logo, servi en masque : c'est le tracé vectoriel d'origine, net à toute taille. */
.nav__logo {
  display: block; grid-column: 2;
  width: var(--nav-logo, 196px); aspect-ratio: 109 / 60.8;
  background: var(--pri);
  -webkit-mask: var(--logo) no-repeat center / contain;
          mask: var(--logo) no-repeat center / contain;
  transition: width .3s ease;
}
.nav__logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.nav__fin { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 20px); }
.nav__cta {
  flex: 0 0 auto;
  background: var(--pri); color: #fff;
  padding: 9px 19px; border-radius: var(--r-p);
  text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .04em;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease, padding .3s ease;
}
.nav__cta:hover { background: var(--pri-d); transform: translateY(-1px); }
body.defile .nav__cta { padding: 7px 16px; font-size: 12.5px; }

.burger {
  display: none;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--r-p); color: var(--ink);
  padding: 7px 15px; font: inherit; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}

/* --------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: var(--r-p);
  background: var(--pri); color: var(--onp);
  text-decoration: none; font-weight: 600; font-size: 15.5px;
  border: 1.5px solid var(--pri);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--sh-s);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-m); background: var(--pri-d); border-color: var(--pri-d); }
.btn--o { background: transparent; color: var(--pri-txt); border-color: var(--pri-txt); box-shadow: none; }
.btn--o:hover { background: var(--pri-txt); color: var(--onp); border-color: var(--pri-txt); }
.btn--w { background: #fff; color: var(--pri); border-color: #fff; }
.btn--w:hover { background: var(--surf-2); color: var(--pri-d); border-color: var(--surf-2); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------- En-tête de page */
.hero {
  padding: clamp(40px, 6vw, 76px) 0 clamp(46px, 6vw, 84px);
}
.hero__grid {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: center;
}
.eyebrow {
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; margin: 0 0 14px;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--pri); }
.lede { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--dim); max-width: 46ch; margin-bottom: 28px; }

.hero__fig { position: relative; margin: 0; }
/* Le haut décrit un demi-cercle : le rayon se plafonne tout seul à la moitié
   de la largeur, donc la forme reste juste quelle que soit la taille. */
.hero__fig img {
  width: 100%; border-radius: 999px 999px var(--r-m) var(--r-m);
  box-shadow: var(--sh-l);
  aspect-ratio: 3 / 4; object-fit: cover; object-position: 58% 20%;
}
/* Le nom sous la photo, puisque le logo vit maintenant dans la barre du haut. */
.hero__sign { text-align: center; margin-top: clamp(16px, 2.4vw, 24px); }
.hero__sign b {
  display: block; font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(25px, 3.1vw, 36px); letter-spacing: -.01em; line-height: 1.1;
}
.hero__sign i {
  display: block; font-style: normal; font-size: 11.5px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--dim); margin-top: 8px;
}
.hero__badge {
  position: absolute; top: 22px; right: -14px;
  background: var(--surf); border-radius: var(--r-p);
  padding: 11px 20px; box-shadow: var(--sh-m);
  display: flex; align-items: center; gap: 9px;
}
.hero__badge b { font-family: var(--f-disp); font-size: 21px; color: var(--pri); }
.hero__badge span { font-size: 11.5px; color: var(--dim); line-height: 1.3; }

/* En-tête simple, pour les pages intérieures */
.phead { padding: clamp(38px, 5vw, 66px) 0 clamp(26px, 3vw, 40px); }
.phead h1 { margin-bottom: 16px; }
.phead .lede { margin-bottom: 0; max-width: 62ch; }

/* Fil d'Ariane */
.crumb { font-size: 13px; color: var(--dim); padding-top: 18px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.crumb li::after { content: "›"; margin-left: 7px; color: var(--line); }
.crumb li:last-child::after { content: ""; }
.crumb a { color: var(--dim); }

/* --------------------------------------------------------- Bandeau d'informations */
.band {
  background: var(--surf);
  padding: clamp(20px, 2.6vw, 28px) var(--pad);
  border-block: 1px solid var(--line);
}
.band__in {
  max-width: var(--max); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px clamp(22px, 4vw, 50px);
  font-size: 15px; text-align: center;
}
.band b { color: var(--pri); font-weight: 600; }

/* --------------------------------------------------------- Sections */
.sec { padding: var(--sec) 0; }
.sec--w { background: var(--surf); }
.sec--t { background: var(--surf-2); }
.sec__head { max-width: 58ch; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head p { color: var(--dim); margin-bottom: 0; }

/* Liste de prestations en deux colonnes */
.list { display: grid; gap: 0 clamp(28px, 5vw, 60px); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.list b { font-family: var(--f-disp); font-weight: 400; font-size: 18px; }
.list span { font-size: 13px; color: var(--dim); text-align: right; max-width: 22ch; line-height: 1.45; }

/* Une grille en repeat(auto-fit, minmax(Npx, 1fr)) impose N pixels à chaque
   colonne, y compris quand l'écran est plus étroit que N : elle déborde alors
   et entraîne toute la page avec elle. Le min(Npx, 100%) ci-dessous plafonne
   cette exigence à la largeur réellement disponible. Rien ne change au-dessus
   du seuil, tout rentre en dessous. */

/* Cartes */
.cards { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.card {
  background: var(--surf); border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-m); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__b { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }

/* Carte sans photo : un filet coloré remplace l'image, et le bloc respire
   davantage. Mieux vaut pas d'image du tout qu'une image qui trompe. */
.card:not(:has(img)) { border-top: 4px solid var(--pri); }
.card:not(:has(img)) .card__b { padding: 26px 26px 28px; }
.card:not(:has(img)) h3 { margin-bottom: 10px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--dim); margin-bottom: 14px; }
.card__l {
  margin-top: auto; font-size: 14px; font-weight: 600;
  color: var(--pri-txt); text-decoration: none;
  /* 24 px de haut au minimum, sinon la cible est trop petite au doigt
     (WCAG 2.2, critère 2.5.8). La ligne seule n'en faisait que 23,6. */
  display: inline-block; padding-block: 3px;
}
.card__l:hover { text-decoration: underline; }

/* Un numéro de téléphone est fait pour être tapé du pouce : il lui faut la
   même hauteur de cible que n'importe quel bouton, y compris posé dans un
   paragraphe. Les autres liens en pleine phrase gardent l'interligne normal,
   la règle les dispense. */
.doc a[href^="tel:"], .infos a[href^="tel:"], p > a[href^="tel:"] {
  display: inline-block; padding-block: 4px;
}

/* Colonne de lecture des pages légales. Rétrécir le .wrap lui-même le
   recentrait dans la fenêtre, si bien que le texte démarrait plus à droite que
   le titre juste au-dessus. On garde donc le .wrap normal, et on borne la
   largeur à l'intérieur : le bord gauche reste aligné sur tout le reste. */
.doc { max-width: 72ch; }
.doc h2 { margin-top: 38px; }
.doc h2:first-child { margin-top: 0; }
.doc p { margin-bottom: 14px; }

/* Énumérations des pages légales : la puce est un tiret cadratin discret,
   et le début de chaque point est mis en avant pour qu'on puisse balayer. */
.puces { list-style: none; margin: 0 0 22px; padding: 0; max-width: 72ch; }
.puces li {
  position: relative; padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line); line-height: 1.62;
}
.puces li:last-child { border-bottom: 0; }
.puces li::before {
  content: "—"; position: absolute; left: 0; top: 9px; color: var(--pri);
}
.puces span { font-weight: 600; color: var(--ink); }

/* Le plan d'accès, tant qu'il n'est pas demandé. Le cadre garde la même
   largeur et le même arrondi que la carte qui viendra s'y loger, pour que le
   clic ne déplace rien autour. */
.carte {
  border-radius: var(--r-m); overflow: hidden;
  box-shadow: var(--sh-m); border: 1px solid var(--line);
  background: var(--surf-2);
}
.carte__mot {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: clamp(34px, 5vw, 56px) clamp(18px, 4vw, 40px);
  min-height: 300px; align-content: center;
}
.carte__mot p { margin: 0; max-width: 46ch; color: var(--dim); font-size: 15px; }
.carte__t {
  font-family: var(--f-disp); font-size: clamp(19px, 2.2vw, 23px);
  color: var(--ink) !important; font-weight: 400;
}
.carte__ou { font-size: 14px; }
.carte__ou a {
  color: var(--pri-txt);
  /* Seul dans son paragraphe, donc cible autonome : 24 px de haut minimum. */
  display: inline-block; padding-block: 4px;
}
.carte iframe { display: block; border: 0; width: 100%; height: 420px; }

/* Promotions. L'accroche porte l'offre, elle doit se lire avant le reste ;
   la date de fin ferme la carte, détachée par un filet. */
.card .accroche { font-size: 16px; color: var(--pri-txt); font-weight: 600; margin-bottom: 10px; }
.card .jusqua {
  margin-top: auto; margin-bottom: 0; padding-top: 13px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--dim);
}

/* Produits mis en avant : photo carrée, nom, gamme, prix. */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.prods figure {
  margin: 0; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column;
}
.prods img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.prods figcaption { padding: 15px 16px 17px; }
.prods b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 17px; line-height: 1.25; }
.prods .gamme { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }
.prods .taille { display: block; font-size: 13px; color: var(--dim); margin-top: 6px; }
.prods .prix { display: block; font-size: 16px; font-weight: 600; color: var(--pri-txt); margin-top: 10px; }

.apres { margin: clamp(20px, 2.6vw, 30px) auto 0; max-width: 66ch; text-align: center; color: var(--dim); font-size: 15px; }

/* Galerie de photos, façon magazine.
   Elle déborde de la colonne de texte pour respirer, mais jamais de l'écran :
   le débordement se calcule sur la place réellement libre de chaque côté. */
.strip {
  --debord: clamp(0px, calc((100vw - var(--max)) / 2 - 24px), 180px);
  margin-inline: calc(-1 * var(--debord));
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px); align-items: start;
}
.strip figure { margin: 0; }
/* Portrait plutôt que carré : à largeur égale, la photo gagne un quart de hauteur. */
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m); }
.strip figcaption { font-size: 12.5px; color: var(--dim); padding-top: 9px; }
.strip figure:nth-child(2) { margin-top: clamp(16px, 3vw, 34px); }

/* Bloc image + texte */
.split { display: grid; gap: clamp(26px, 4vw, 58px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: center; }
.split img { width: 100%; border-radius: var(--r-m); box-shadow: var(--sh-m); aspect-ratio: 4 / 3; object-fit: cover; }
.split--r > figure { order: 2; }

/* Formules tarifaires */
.forms { display: grid; gap: clamp(16px, 2.2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.form {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 28px 26px 30px; display: flex; flex-direction: column;
}
.form--h { border-color: var(--pri); border-width: 2px; position: relative; }
.form--h::before {
  content: "Le plus demandé"; position: absolute; top: -13px; left: 26px;
  background: var(--pri); color: var(--onp); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-p);
}
.form h3 { margin-bottom: 14px; }
.form ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; color: var(--dim); }
.form li { padding: 7px 0 7px 26px; position: relative; }
.form li::before {
  content: ""; position: absolute; left: 3px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--pri); opacity: .55;
}
.form__p { margin-top: auto; font-family: var(--f-disp); font-size: 32px; color: var(--pri); }
/* Pas d'opacité sur le prix barré : elle le faisait tomber à 3,7:1 de contraste.
   Le rôle de « second plan » est déjà porté par la taille et la barre. */
.form__p s { font-size: 19px; color: var(--dim); margin-right: 10px; font-family: var(--f-body); }

/* Encadré */
.note {
  background: var(--surf-2); border: 1px solid var(--line);
  border-left: 4px solid var(--pri);
  border-radius: var(--r-s); padding: 22px 26px; font-size: 15px; color: var(--dim);
}
.note b { color: var(--ink); }

/* Questions fréquentes */
.faq details {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-s);
  margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--pri); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 22px 20px; color: var(--dim); font-size: 15px; }

/* Appel à l'action */
.cta { background: var(--pri); color: var(--onp); border-radius: var(--r-l); padding: clamp(34px, 5vw, 62px) clamp(24px, 4vw, 56px); text-align: center; }
.cta h2 { color: var(--onp); }
/* Blanc pur : à 90 % d'opacité le texte tombait à 3,9:1 sur le rose. */
.cta p { color: #fff; max-width: 52ch; margin-inline: auto; }
.cta .btns { justify-content: center; margin-top: 26px; }

/* Blocs d'information */
.infos { display: grid; gap: clamp(22px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.infos h3 {
  font-family: var(--f-body); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pri-txt); font-weight: 700; margin-bottom: 10px;
}
.infos p { font-size: 15px; color: var(--dim); }
.infos a { color: var(--dim); }

/* --------------------------------------------------------- Pied de page */
.foot { background: var(--ink); color: rgba(255, 255, 255, .78); padding: clamp(44px, 6vw, 72px) 0 30px; }
.foot__grid { display: grid; gap: clamp(26px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.foot h3 {
  font-family: var(--f-body); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 14px;
}
.foot p, .foot li { font-size: 14.5px; line-height: 1.75; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
/* Zone tactile confortable au doigt : 17 px de texte seul, c'était trop peu. */
.foot li a, .foot p > a { display: inline-block; padding: 8px 0; }
.foot li a { display: block; }
.foot__logo img { width: 190px; margin-bottom: 16px; }
.foot__bar {
  margin-top: clamp(32px, 4vw, 50px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; color: rgba(255, 255, 255, .6);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}

/* --------------------------------------------------------- Écrans étroits */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__badge { right: 8px; }
  .split--r > figure { order: 0; }
  /* L'arche doit rester plus haute que large, sinon ce n'est plus un demi-cercle
     mais un stade. On borne donc la largeur, et la hauteur suit. Bornée serré :
     à pleine largeur elle repoussait le titre sous la ligne de flottaison. */
  .hero__fig { order: -1; max-width: min(320px, 66vw); margin-inline: auto; }
  .hero__sign b { font-size: 27px; }
}

/* Le menu se replie dès 1024 px, et non 780 comme le reste : sept entrées plus
   le bouton ne tiennent plus sur une ligne en dessous. Mesuré, pas estimé : à
   901 px il manque 37 px à droite, et la police est déjà à son plancher. Plutôt
   que de rogner la typographie jusqu'à l'illisible sur une plage de 120 px, on
   replie. Les autres règles étroites attendent 780 px. */
@media (max-width: 1024px) {
  /* Le bouton, le logo, la réservation sur une ligne ; les sept entrées se
     déplient dessous. « display: contents » sort le groupe de droite de son
     conteneur pour que ses deux enfants se placent séparément dans la grille. */
  .burger { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__in { grid-template-columns: auto 1fr auto; --nav-logo: 146px; }
  body.defile .nav__in { --nav-logo: 102px; }
  .nav__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav__fin { display: contents; }
  .nav__cta { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav__list {
    grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 0;
  }
  /* Le repli n'a lieu QUE si JavaScript a marqué la page. Sans lui, le bouton
     « Menu » ne peut rien ouvrir : un menu replié serait alors un menu mort,
     et plus aucune page ne serait atteignable depuis un téléphone. Déplié par
     défaut, la page est seulement plus longue, et tout reste cliquable. */
  .js .nav__list {
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  html:not(.js) .burger { display: none; }
  .nav__list--g { grid-row: 2; }
  .nav__list--d { grid-row: 3; justify-content: flex-start; }
  .nav__in[data-open="true"] .nav__list { max-height: 40vh; visibility: visible; overflow-y: auto; }
  .nav__in[data-open="true"] .nav__list--g { padding-top: 8px; }
  .nav__in[data-open="true"] .nav__list--d { padding-bottom: 10px; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list--d li:last-child { border-bottom: 0; }
  .nav__list a { display: block; padding: 14px 2px; font-size: 15px; border-bottom: 0; }
}

@media (max-width: 780px) {
  /* Les trois photos restent, on les fait défiler au doigt plutôt que d'en
     escamoter une : le texte à côté les annonce toutes les trois. */
  .strip {
    grid-template-columns: repeat(3, 78%);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
    padding-bottom: 6px; scrollbar-width: thin;
  }
  .strip figure { scroll-snap-align: center; }
  .strip figure:nth-child(2) { margin-top: 0; }
}

@media (max-width: 520px) {
  .hero__badge { position: static; margin-top: 14px; width: fit-content; }
  .list span { max-width: 15ch; }
  .foot__bar { flex-direction: column; }
}

/* Les très petits écrans : iPhone SE et iPhone 8 font 320 px, un Galaxy Fold
   replié en fait 280, et n'importe quel téléphone descend là dès que la
   personne grossit la police du système. En dessous de 380 px, le burger, le
   logo et le bouton « Réserver » additionnés dépassaient la largeur de
   l'écran et poussaient TOUTE la page : on se retrouvait à faire glisser
   horizontalement pour lire un paragraphe. On resserre donc les trois. */
@media (max-width: 380px) {
  :root { --pad: 12px; }
  .nav__in { --nav-logo: 104px; gap: 8px; }
  body.defile .nav__in { --nav-logo: 86px; }
  .nav__cta { padding: 7px 12px; font-size: 12px; }
  .burger { padding: 6px 10px; font-size: 12px; }
}

@media print {
  .nav, .cta, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------- Tableaux de tarifs */
.tarifs { margin-bottom: clamp(28px, 4vw, 46px); max-width: 880px; }
.tarifs h3 {
  font-family: var(--f-body); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pri-txt); font-weight: 700;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
/* Une grille de prix se lit en balayant de gauche à droite. Sur 1100 px, l'œil
   perd la ligne entre le nom de la prestation et son tarif : on resserre le
   tableau, et un filet pointillé relie l'énoncé à son prix. */
.tarifs table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tarifs td .lib { display: flex; align-items: baseline; gap: 12px; }
/* Le filet sort du groupe des lignes de base : une boîte vide n'en a pas, et
   l'aligner dessus décalait le libellé d'une hauteur de ligne. */
.tarifs td .lib::after {
  content: ""; flex: 1 1 auto; min-width: 20px;
  align-self: flex-end; transform: translateY(-5px);
  border-bottom: 1px dotted var(--line);
}
.tarifs tr { border-bottom: 1px solid var(--line); }
.tarifs tr:last-child { border-bottom: 0; }
.tarifs td { padding: 11px 0; vertical-align: baseline; }
.tarifs th {
  padding: 0 0 9px; text-align: left; font-weight: 600; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.tarifs thead tr { border-bottom: 1px solid var(--line); }
.tarifs th.prix { text-align: right; }
.tarifs th.duree { text-align: right; padding-right: 18px; }
.tarifs td:first-child { padding-right: 16px; }
.tarifs .duree { color: var(--dim); font-size: 13px; white-space: nowrap; text-align: right; padding-right: 18px; }
.tarifs .prix { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }
.tarifs .prix--2 { color: var(--pri-txt); }
.tarifs caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--dim); padding-bottom: 8px; }

/* Sommaire des familles */
.sommaire { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(30px, 4vw, 48px); }
.sommaire a {
  display: inline-block; padding: 9px 18px; border-radius: var(--r-p);
  background: var(--surf); border: 1px solid var(--line);
  text-decoration: none; font-size: 14px; color: var(--ink);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sommaire a:hover { background: var(--pri); color: var(--onp); border-color: var(--pri); transform: translateY(-2px); }

/* ---------------------------------------- Avis clients */
.notes { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 4vw, 44px); margin-bottom: clamp(26px, 3vw, 40px); }
.notes div { text-align: center; }
.notes b { display: block; font-family: var(--f-disp); font-size: 30px; color: var(--pri-txt); line-height: 1.1; }
.notes span { font-size: 12.5px; color: var(--dim); }
.avis { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr)); }
.avis blockquote {
  margin: 0; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 24px 26px 22px;
  display: flex; flex-direction: column;
}
.avis .etoiles { color: var(--pri); font-size: 15px; letter-spacing: .12em; margin-bottom: 12px; }
.avis p { font-size: 15.5px; line-height: 1.65; margin-bottom: 16px; }
.avis footer { margin-top: auto; font-size: 12.5px; color: var(--dim); font-style: normal; }

/* Grand nombre mis en avant */
.chiffre { text-align: center; padding: 6px 0 clamp(24px, 3vw, 36px); }
.chiffre b { display: block; font-family: var(--f-disp); font-size: clamp(52px, 8vw, 82px); color: var(--pri-txt); line-height: 1; }
.chiffre span { font-size: 15px; color: var(--dim); }

/* Bouton en fin de section */
.suite { margin-top: clamp(26px, 3.4vw, 40px); }

@media (max-width: 780px) {
  .nav__cta { padding: 8px 15px; font-size: 13px; }
  /* La durée ne disparaît plus : elle passe sous le nom de la prestation.
     Sans elle, une cliente sur téléphone voyait le prix d'un soin sans savoir
     combien de temps il dure. */
  .tarifs, .tarifs tbody, .tarifs tr { display: block; }
  .tarifs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarifs tr {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .tarifs { max-width: none; }
  .tarifs td { display: block; border: 0; padding: 0; }
  .tarifs td .lib { display: block; }
  .tarifs td .lib::after { content: none; }
  .tarifs td:first-child { grid-column: 1; grid-row: 1; }
  .tarifs .duree {
    display: block; grid-column: 1; grid-row: 2;
    text-align: left; padding-right: 0; font-size: 12.5px;
  }
  .tarifs .prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .tarifs td { font-size: 14.5px; }
}