/* ============================================================================
   Le SITE PUBLIC — ce que seules les pages publiques emploient.
   /admin et /pro ne chargent pas cette feuille.
   ⚠️ **L'ordre de chargement est une règle, et il est le même partout** :
   `tokens.css`, `logo.css`, `base.css`, la feuille de l'application — ici
   `site.css` puis celles des modules (`modules/<clé>/<clé>.css`, lot 6) —, puis
   `final.css`. À spécificité égale la cascade départage par l'ordre ; le
   découpage a été éprouvé élément par élément contre l'ancienne feuille unique
   (`tools/comparer-styles.mjs`), et changer cet ordre défait cette épreuve.
   ⚠️ **Une règle va dans la feuille de l'application qui l'emploie**, et dans
   celle de son module quand un seul module l'emploie. Une règle
   d'administration écrite dans la feuille du site ne s'appliquerait pas dans
   /admin — ce qui se voit tout de suite, et c'est voulu : une feuille commune
   était téléchargée par chaque visiteuse, administration comprise. 
   ============================================================================ */

/* menu ouvert : le défilement est bloqué, donc le header collant perd son
   ancrage — on le fixe pour qu'il reste visible au-dessus du menu */
body.menu-open header{position:fixed;top:0;left:0;right:0}

/* ⚠️ **La page tient au moins un écran** (21 octobre 2026) : une route se
   remplit après son affichage (modules, puis la base), et tant qu'elle était
   courte le pied de page apparaissait sous l'en-tête, puis sautait d'un écran
   (Lighthouse : CLS 0,9 sur l'accueil mobile). `svh` après `vh` : la barre
   d'adresse des téléphones ne pousse pas le pied de page hors de l'écran. */
main#top{min-height:100vh;min-height:100svh}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gout)}
/* le titre s'ajuste à son texte pour que le filet ait sa largeur */
.section-title{
  font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:.02em;margin:14px 0 18px;
  width:fit-content;max-width:100%;
}
/* Filet à la largeur du titre, déployé lentement de gauche à droite */
.section-title::after{
  content:"";display:block;width:100%;height:2px;border-radius:2px;margin-top:18px;
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 30%, var(--rose) 65%,
    rgba(232,183,175,.5) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 2.6s cubic-bezier(.16,.72,.24,1);
}
.section-title.vu::after{transform:scaleX(1)}
.center .section-title{margin-inline:auto}
/* même sens que les autres filets : terracotta à gauche, rose à droite */
.center .section-title::after{
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 30%, var(--rose) 65%,
    rgba(232,183,175,.5) 100%);
}
@media (prefers-reduced-motion: reduce){
  .section-title::after{transform:none;transition:none}
}
.lede{color:var(--encre-60);max-width:580px;font-size:15.5px}
.center .lede{margin-inline:auto}
.section-pad{padding-block:82px 30px}
.btn-clair{background:transparent;color:var(--encre);border:1px solid var(--encre);font-weight:500}
.btn-clair:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{width:40px;height:40px}
.brand-name{font-family:var(--font-serif);font-size:20px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav-credits{font-size:10px;font-weight:600;background:var(--accent-soft);color:var(--terracotta);border-radius:999px;padding:3px 9px;margin-left:6px}
.burger{display:none;background:none;border:none;width:44px;height:44px;position:relative;z-index:60}
.burger span{display:block;width:22px;height:2px;background:var(--encre);margin:5px auto;transition:transform .3s,opacity .2s;border-radius:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-scrim{position:fixed;inset:0;z-index:48;background:rgba(34,34,33,.25);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.menu-scrim.open{opacity:1;visibility:visible;transition:opacity .3s}

/* Barre de réservation permanente (mobile) — exigence CDC 14.2 */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:rgba(247,239,230,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(196,122,83,.25);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.sticky-cta .btn{width:100%;text-align:center;padding:15px}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--container);padding-inline:var(--gout,28px);margin:0 auto}
/* ⚠️ La photographie est **sous** le voile (`.hero::before`, z-index 1) et sous
   le texte (`.hero-inner`, z-index 2). Le dégradé de `.hero` lui reste derrière :
   il n'est plus un emplacement mais un fond d'attente, pour qu'un chargement lent
   ne montre pas une bande blanche. */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* ⚠️ **Un halo, parce que ni le voile ni la teinte ne pouvaient répondre.** Le
   monogramme se confondait avec le mur terracotta : mesuré à **1,41** de médiane
   contre son fond. Le voile n'y peut rien — testé à 0,40 / 0,55 / 0,70 / 0,85, le
   logo reste entre 1,27 et 1,50, parce que le voile éclaircit le mur **et** la
   fleur ensemble. La teinte l'aurait réglé (3,73 en Brun Vénus) mais rendait le
   monogramme monochrome, et la cliente le veut en couleur.
   Reste à le **détacher** de son fond, ce qui laisse ses six teintes intactes.
   ⚠️ **Deux ombres, pas une** : la serrée (3 px) dessine le bord, la large (10 px)
   assoit la forme. Une seule large donne un halo flou sans arête ; une seule
   serrée fait un contour d'autocollant.
   ⚠️ **En crème de la charte**, pas en blanc : le blanc pur trancherait sur une
   page qui n'en contient nulle part.
   ⚠️ **Ce halo est un effet, pas une correction.** Ma mesure ne sait pas
   l'évaluer — elle compte les pixels d'encre, et un halo en ajoute quatre fois
   plus, tous en contraste doux, donc la médiane baisse alors que la fleur se
   détache mieux. Le choix a été fait à l'œil, sur capture, par la cliente. */
.hero-logo{
  width:clamp(150px,20vw,210px);margin:0 auto 22px;
  filter:drop-shadow(0 0 10px rgba(247,239,230,.95)) drop-shadow(0 0 3px rgba(247,239,230,.9));
}
.hero .disciplines{
  margin:22px 0 14px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--encre);display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;
}
/* À quatre disciplines aux noms courts, le bandeau reste sur une ligne : le hero est au
   premier écran, une seconde ligne arrivant après la lecture des données décalerait
   la page (CLS). */
.hero .disciplines.disc-plus-bandeau{flex-wrap:nowrap;white-space:nowrap;gap:clamp(5px,1.4vw,16px);letter-spacing:clamp(.02em,.6vw,.3em)}
.hero .disciplines.disc-plus-bandeau .disc-sep{width:clamp(9px,2.6vw,18px);height:clamp(9px,2.6vw,18px)}
/* ⚠️ **L'encre PLEINE, pour les disciplines comme pour l'accroche**
   (28 septembre 2026, choix de Delphine après mesure). Sur le mur terracotta,
   l'encre à 62 % et le terracotta de l'accroche tenaient à 1,5–1,7 au 5ᵉ centile
   du fond — illisibles. Mesuré aux trois formats, parmi les encres de la charte
   déjà employées pour ces rôles :
   · le Brun Vénus (titres des bandeaux) : disciplines 3,4–3,8 pour un plancher de
     4,5 (11,5 px), accroche 3,5 sur ordinateur (24 px, plancher 3,0) mais 4,0 sur
     téléphone (18 px, plancher 4,5) — il échoue là où l'accroche rétrécit ;
   · **l'encre pleine : 7,0–8,2 partout**.
   C'est la même leçon que les paragraphes des bandeaux : une encre transparente
   se compose sur son fond, et aucune force de voile ne l'amène à son plancher
   sans effacer la photographie. `tests/bandeaux.spec.js` le rejoue. */
.hero p.tagline{
  font-family:var(--font-serif);font-style:italic;font-size:clamp(18px,2.3vw,24px);
  color:var(--encre);margin:14px auto 32px;max-width:620px;
  text-shadow:0 1px 12px rgba(253,250,245,.6);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.frise{display:flex;justify-content:center;gap:44px;padding:30px 0;overflow:hidden}
.frise svg{width:32px;height:32px;flex:none;opacity:.85}
.frise svg:nth-child(even){opacity:.45;transform:scale(.72)}
.watermark{position:absolute;pointer-events:none;opacity:.08;z-index:0}

/* ---------- Pratiques ---------- */
.prat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
/* ⚠️ **Deux entrées dans trois colonnes laissaient un trou à droite** — le Yoga
   et le Pilates, depuis que le Voyage sonore n'est plus une pratique (28
   septembre 2026). La grille garde la largeur d'une colonne sur trois et se
   CENTRE sur ce qu'elle porte : une case, deux ou trois, sans gabarit à tenir
   par nombre. Les formats plus étroits redéfinissent leurs colonnes plus bas. */
@media (min-width:1001px){
  .prat-grid{grid-template-columns:repeat(auto-fit,calc((100% - 44px) / 3));justify-content:center}
}
.prat-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(122,74,45,.35)}
.prat-meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
/* ⚠️ **Le bouton s'ancre en bas de la carte**, texte ou pas (19 octobre 2026) :
   c'était le paragraphe, étiré, qui le poussait — une pratique sans présentation
   (Pilates doux) montrait son bouton sous le titre, plus haut que ses voisines. */
.prat-card .btn{margin-top:auto;align-self:center}
.prat-famille-piste.saut{opacity:0}
.prat-famille-diapo .prat-visuel{border-color:transparent}
.prat-famille-fleche.prec{left:6px}
.prat-famille-fleche.suiv{right:6px}
.prat-famille-fleche.prec:hover{transform:translate(-2px,-50%)}
.prat-famille-fleche.suiv:hover{transform:translate(2px,-50%)}
/* `display:flex` plus haut battrait l'attribut `hidden` posé sous mouvement réduit. */
.prat-famille-pause[hidden]{display:none}
.prat-famille-pause .ic-lecture{display:none;fill:currentColor}
.prat-famille-fleche:focus-visible,.prat-famille-point:focus-visible,.prat-famille-pause:focus-visible{
  outline:2px solid #fff;outline-offset:-2px;border-radius:8px;
}
.places.low{color:var(--terracotta)}
.places.full{color:var(--encre-60)}
.badge-exp{
  display:inline-block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:var(--accent-soft);color:var(--terracotta);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px;
}

/* ---------- Tarifs ---------- */
.tarif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}

/* logo et titre alignés sur la même ligne */
.phero-titre{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-bottom:12px}
.phero-titre .mot{width:48px;height:48px;flex:none;margin:0;align-self:center}
/* margin:0 !important — les h1 de hero portent des marges héritées qui décalent le centrage */
/* ⚠️ `flex:0 1 auto`, jamais `flex:1`. Le titre est encadré de deux monogrammes :
   avec `flex:1` il mange toute la place libre et pousse le second contre le bord
   droit du conteneur — on ne lirait plus un titre encadré, mais un titre à gauche
   et une fleur perdue à trois cents pixels de là. Il doit pouvoir rétrécir
   (`min-width:0` le permet), pas grandir. */
.phero-titre h1{margin:0 !important;flex:0 1 auto;min-width:0}
/* ⚠️ **Une seule teinte pour les six bandeaux : le Brun Vénus** (31 août 2026,
   décision de la cliente). Les titres portaient trois couleurs, une par paire de
   pages — la teinte de fin de leur dégradé, assombrie (CONTEXTE.md §13). Sur des
   dégradés, cette parenté se lisait ; sur des photographies, elle ne se lit plus,
   et les titres manquaient de présence.
   ⚠️ **Ce que cela retire** : la distinction visuelle entre les trois paires de
   pages. Elle reste portée par les photographies elles-mêmes.
   ⚠️ Le tracé du monogramme est peint via `--mv`, pas via `color`. */
.phero-titre .mot{--mv:var(--brun);color:var(--brun)}

@media(max-width:680px){
  .phero-titre{gap:12px}
  .phero-titre .mot{width:36px;height:36px}
}
.pr-mini:last-of-type{margin-bottom:0}
.pr-mini:hover{background:var(--accent-soft)}
/* L'encart d'une intervenante — « Léa & Maison Vénus » — se distingue du reste
   de la fiche par un filet, pas par une couleur de plus.
   ⚠️ **Sélecteur doublé** : `.blk`, à spécificité égale et plus bas dans cette
   feuille, pose `border:` en raccourci et effaçait le filet en silence. */
.blk.pf-encart{border-left:3px solid var(--rose)}
.pf-col .blk{margin-bottom:16px}
.pf-col .blk:last-child{margin-bottom:0}
/* Une galerie à colonnes souples : trois photos tiennent sur une ligne en grand
   format, se replient en dessous. `minmax(0,…)` pour qu'une image ne pousse
   jamais la grille. */
.pf-galerie{margin-top:16px}
.pf-fill .mini-line:last-of-type{border-bottom:none}
/* boutons uniformes, comme dans l'administration */
/* align-self:center — sinon le bouton s'étire sur la hauteur de la ligne */
.mini-btn.pf-btn{
  align-self:center;flex:none;min-width:92px;height:34px;padding:0 14px;
  font-size:9.5px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}

@media(max-width:900px){
  .pf-col .blk{margin-bottom:14px}
}

/* ---------- Professeures ---------- */
.profs-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:20px;row-gap:0;margin-top:40px}
.prof-card:hover{transform:translateY(-5px);box-shadow:0 20px 38px -26px rgba(122,74,45,.35)}
.prof-card .btn{align-self:end;justify-self:center}

/* ---------- Expériences ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.sheet{
  background:var(--blanc);border-radius:24px;width:100%;max-width:920px;height:min(800px,92dvh);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 80px -30px rgba(34,34,33,.5);
}
.sheet.sm{max-width:440px;height:auto;max-height:92dvh}
/* Toutes les fenêtres qui mènent à un paiement ont la même largeur. */
.sheet.pay{max-width:560px;height:auto;max-height:92dvh}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 26px;border-bottom:1px solid rgba(34,34,33,.08);background:#FBF6EF;flex:none;
}
.sheet-head h3{font-size:24px}
.sheet-head .ttl{display:flex;align-items:center;gap:12px;min-width:0}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 34px}
.sheet-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 26px;border-top:1px solid rgba(34,34,33,.08);background:#FBF6EF;flex:none;
}
.link-back{background:none;border:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--encre-60)}
.link-back:hover{color:var(--encre)}
.page-head{
  position:sticky;top:0;z-index:2;background:rgba(247,239,230,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(196,122,83,.2);padding:14px 0;
}
.page-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.page-hero{padding:44px 0 18px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.page-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.1}
.page-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.page-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;padding-bottom:70px}
.blk{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:18px;padding:24px;margin-bottom:16px}
.blk h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:14px;font-family:var(--font-sans)}
.blk h4{font-size:22px;margin-bottom:8px}
.blk p{font-size:13.5px;color:var(--encre-60);margin-bottom:10px}
.blk p:last-child{margin-bottom:0}
.blk ul{list-style:none;font-size:13.5px;color:var(--encre-60)}
.blk li{padding:6px 0 6px 20px;position:relative;border-bottom:1px dashed rgba(34,34,33,.08)}
/* ⚠️ **`:not(.reco-c)`, et ce n'est pas un détail de spécificité.** Ce
   `border:none` retire le pointillé de séparation du DERNIER élément d'une liste
   éditoriale. Les cartes de recommandation sont des `li` du même `.blk` : la
   troisième perdait donc **toutes** ses bordures, filet de teinte compris —
   mesuré `none 0px` alors que `--sc` portait la bonne couleur. Un raccourci
   `border` emporte tout, et `.blk li:last-child` (0,2,1) l'emportait sur
   `.blk .reco-c` (0,2,0) : le sélecteur avait été doublé pour battre `.blk li`,
   pas son `:last-child`. On exclut plutôt qu'on surenchérit — cette règle n'a
   jamais visé ces cartes. */
.blk li:last-child:not(.reco-c){border:none}
.blk li::before{content:"\2726";position:absolute;left:0;color:var(--terracotta);font-size:10px;top:9px}
/* ⚠️ `align-items` manquait : en `flex`, la valeur par défaut est `stretch`, et
   le bouton de droite s'étirait donc sur **toute la hauteur** de la ligne. Sur
   une ligne d'un mot cela ne se voyait pas ; sur une description de trois
   lignes, « Voir » devenait une pilule de cent pixels de haut. Le défaut était
   partout où une `.mini-line` porte un texte long. */
.mini-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px dashed rgba(34,34,33,.09)}
.mini-line:last-child{border:none}
.mini-line > .mini-btn{flex:none}

/* ---------- Quiz : les trois recommandations ---------- */
/* ⚠️ **La teinte vient de la pratique**, pas d'un choix d'écran : chaque
   pratique porte sa couleur douce dans le référentiel, et c'est elle qui la
   désigne partout ailleurs — au planning, sur sa fiche. Elle passe par
   `data-sc`, la seule voie que la CSP autorise pour une valeur calculée. */
/* ⚠️ **Trois hauteurs égales**, sur la plus haute : `1fr` en `grid-auto-rows`.
   Des cartes de hauteurs différentes se lisent comme trois blocs sans rapport ;
   ici ce sont trois réponses à la même question, et le rang seul les ordonne. */
.reco{list-style:none;display:grid;grid-auto-rows:1fr;gap:12px;padding:0;margin:0}
/* ⚠️ **Sélecteurs doublés `.blk .reco-c`, et ce n'est pas cosmétique.** Ces
   cartes vivent dans un `.blk`, qui habille ses `li` en liste éditoriale :
   `.blk li` (0,1,1) et `.blk li::before` l'emportaient sur `.reco-c` (0,1,0).
   Résultat : la puce ✦ revenait, et le padding de la liste — `6px 0 6px 20px` —
   écrasait le mien, si bien que le bouton « Voir » touchait le cadre. La
   mesure le disait ; l'œil, non. */
.blk .reco-c::before{content:none}
.blk .reco-c,
.reco-c{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--blanc);border:1px solid rgba(34,34,33,.07);
  /* ⚠️ Le rebord prend la couleur **pleine** de la pratique, pas sa teinte
     douce : `#F2DBCB` sur fond crème ne se voit pas, et le Pilates semblait
     n'en avoir aucune. La pastille, elle, garde une version transparente de la
     même couleur — une seule valeur à poser, deux usages. */
  border-left:4px solid var(--sc,var(--terracotta));
  border-radius:16px;padding:16px 22px 16px 18px;position:relative;
  border-bottom:1px solid rgba(34,34,33,.07);
  box-shadow:0 12px 24px -22px rgba(34,34,33,.5);
}
.reco-n{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--sc,var(--terracotta)) 20%, transparent);
  font-family:var(--font-serif);font-size:16px;color:var(--encre);
}
/* Le texte se cale en haut : sur une carte étirée à la plus haute, un bloc
   centré flotterait au milieu du vide. */
.reco-c .reco-t{align-self:start;padding-top:2px}
.reco-t b{font-family:var(--font-serif);font-weight:400;font-size:19px;display:block;margin-bottom:3px}
.reco-t p{margin:0;font-size:13px;color:var(--encre-60);line-height:1.55}
.reco-plus{
  margin-top:12px;padding-top:12px;border-top:1px dashed rgba(34,34,33,.12);
  font-size:13px;color:var(--encre-60);
}
.reco-plus b{font-family:var(--font-serif);font-weight:400;font-size:16px;color:var(--encre)}
@media(max-width:560px){
  .reco-c{grid-template-columns:auto 1fr;gap:12px}
  .reco-c .mini-btn{grid-column:2;justify-self:start}
}

/* ---------- Fiche séance / réservation ---------- */
.fs-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.fs-date{
  background:var(--accent-soft);border-radius:14px;padding:12px 16px;text-align:center;flex:none;
}
.fs-date b{display:block;font-family:var(--font-serif);font-size:26px;line-height:1}
.fs-date small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-60)}
.fs-h1{font-size:30px;line-height:1.15}
.fs-meta{font-size:12.5px;color:var(--encre-60);margin-top:4px}
.notice{
  background:var(--accent-soft);border-radius:12px;padding:13px 16px;font-size:12.5px;color:var(--encre);margin-bottom:16px;
}
.notice.warn{background:#F7E1DC;color:#8E4432}
.notice.ok{background:#E9EDE2;color:#4E5A44}
.rules{font-size:11.5px;color:var(--encre-60);margin-top:16px;line-height:1.7}
.success-blk{text-align:center;padding:26px 10px}
.success-blk svg{width:76px;height:76px;margin:0 auto 16px}
.success-blk h3{font-size:31px;margin-bottom:10px}
.success-blk p{color:var(--encre-60);max-width:440px;margin:0 auto 22px;font-size:13.5px}
/* ⚠️ **Les deux boutons étaient séparés par une marge *latérale*** (`u-ml-10`).
   Côte à côte sur ordinateur cela suffisait ; empilés sur téléphone — et ils le
   sont dès 390 px, « Ajouter à mon calendrier » étant long — l'écart tombait à
   **zéro** et ils se touchaient. Une marge d'un seul axe ne tient pas une
   disposition qui change d'axe.
   ⚠️ `gap` vaut dans les deux sens, donc un seul nombre décrit les deux cas au
   lieu d'un par format — et il n'y a plus de valeur à tenir d'accord. */
.success-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.auth-case .lien-sobre{display:inline;font-size:12px}
/* Les champs obligatoires portent une étoile, les autres rien (Delphine,
   15 octobre 2026) — « facultatif » sur deux libellés sur trois alourdissait
   le formulaire, et une légende « champs obligatoires » disait ce que l'étoile
   dit déjà. L'étoile est décorative pour un lecteur d'écran : `required` sur
   le champ dit l'obligation. */
.requis{color:var(--terracotta-2);margin-left:3px}
/* Une faute s'écrit SOUS son champ, qui se souligne en brique — la couleur
   n'est pas seule à le dire : le texte nomme la faute. Une case à cocher se
   souligne par son libellé. */
.field.en-faute input,.field.en-faute .cal-champ{border-color:var(--brique)}
.field.en-faute label{color:var(--brique)}
.auth-case.en-faute{color:var(--brique)}
.auth-case.en-faute input{outline:1.5px solid var(--brique);outline-offset:1px}
.champ-erreur{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--brique)}
.champ-aide{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--encre-60)}
.auth-case + .champ-erreur{margin:-6px 0 12px 28px}

.lien-sobre{
  background:none;border:none;padding:0;
  font-size:12px;color:var(--terracotta-2);
  text-decoration:underline;text-underline-offset:3px;
}
.lien-sobre:hover{color:var(--terracotta)}


/* ---------- Tiroirs (membre) ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:74;width:min(440px,94vw);background:var(--creme);
  border-left:1px solid rgba(196,122,83,.2);box-shadow:-30px 0 60px -30px rgba(34,34,33,.4);
  transform:translateX(105%);transition:transform .35s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(196,122,83,.2);flex:none}
.drawer-head h3{font-size:25px}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px 30px}
.drawer-scrim{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(34,34,33,.35)}
.drawer-scrim[hidden]{display:none}
.page-hero.exp-hero{padding-top:28px}
@media(max-width:680px){
  .page-hero.exp-hero{padding-top:20px}
}
.exp-univers .ph,.exp-univers img{width:100%;aspect-ratio:4/3;border-radius:12px;
  object-fit:cover;display:flex;align-items:center;justify-content:center}
.gift-seg button:hover{background:rgba(253,250,245,.6)}
.gift-seg button.on{
  background:var(--blanc);color:var(--encre) !important;
  box-shadow:0 3px 10px -4px rgba(122,74,45,.45);
}
.ct-ok[hidden]{display:none}
.dispo-stock{background:#E9EDE2;color:#5F7150}
.dispo-faible{background:var(--accent-soft);color:var(--terracotta-2)}
.dispo-commande{background:var(--creme);color:var(--encre-60)}
.dispo-rupture{background:#F7E1DC;color:#B0604C}
.prod.epuise .prod-vis{opacity:.55}
.tarif-grid-duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
/* Les conditions d'une formule, visibles sur sa carte AVANT l'achat — « je veux
   éviter les petites mentions importantes cachées uniquement dans les CGV ».
   La liste prend la place libre de la carte : le bouton reste en bas. */
.tarif:has(.tarif-cond) .det{flex:none}
.tarif-cond .tarif-mention{color:var(--encre);font-weight:600}
/* Les passeports, avec ou sans engagement (Delphine, 18 octobre 2026) : un
   sélecteur plutôt que deux parties et un tableau, et des cartes alignées.
   ⚠️ `display:flex` l'emporterait sur `[hidden]` : on le redit. */
.offre-passeports .pass-bascule{margin-top:18px}
.pass-panneau[hidden]{display:none}
/* ⚠️ **Côte à côte, les cartes partagent leurs lignes** (`subgrid`) : le prix,
   la description, les conditions et le bouton tombent à la même hauteur d'une
   carte à l'autre, quelle que soit la longueur d'un texte. Empilées sur
   téléphone, elles reprennent leur colonne : il n'y a rien à aligner. */
@media(min-width:681px){
  .pass-grille{grid-template-rows:repeat(5,auto);row-gap:0}
  /* Les deux panneaux dans la même case : le caché garde sa mise en page
     (mesurable, voir offers.js) sans se voir ni se lire, et la bascule ne
     change pas la hauteur de la section. */
  .pass-panneaux{display:grid}
  .pass-panneau{grid-area:1/1}
  .pass-panneau[hidden]{display:block;visibility:hidden}
}
.foot-grid{
  display:grid;grid-template-columns:1.15fr .85fr .85fr 1.15fr;gap:40px;
  position:relative;z-index:1;align-items:start;
}
.foot-marque .brand{margin-bottom:2px}
/* le logo s'aligne sur la ligne de base des titres de colonnes */
/* alignement optique : le centre du logo s'aligne sur le centre des titres */
.foot-marque{margin-top:-15px}
.foot-marque .brand svg{width:36px;height:36px}
.foot-marque .brand-name{font-size:18px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
  width:38px;height:38px;padding:0;border-radius:50%;opacity:1;
  border:1px solid rgba(196,122,83,.35);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;transition:.22s;
}
.foot-social a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc)}
.foot-social svg{width:17px;height:17px}
.foot-adresse{font-size:12.5px;color:var(--encre-60);margin-top:16px;line-height:1.7}
.foot-news-txt{font-size:12.5px;color:var(--encre-60);margin-bottom:12px}
.foot-tagline{font-family:var(--font-serif);font-style:italic;font-size:15.5px;color:var(--terracotta-2);margin-top:14px;max-width:250px;line-height:1.5}
.news-row{display:flex;gap:8px;margin-top:10px}
.news-row input{
  flex:1;min-width:0;border:1.5px solid rgba(34,34,33,.18);border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:13px;background:var(--blanc);
}
.news-row .btn{border-radius:14px;white-space:nowrap}
.news-ok{
  background:#E9EDE2;border-radius:12px;padding:11px 14px;margin-top:10px;
  font-size:12.5px;color:#4A5A3E;line-height:1.5;
  animation:newsIn .4s cubic-bezier(.2,.8,.3,1) both;
}
.news-ok span{color:var(--rose);font-size:14px}
.news-ok[hidden]{display:none}
.news-rgpd{font-size:10.5px;color:var(--encre-60);margin-top:10px;line-height:1.55;opacity:.85}
.news-row input:focus{outline:none;border-color:var(--terracotta)}
.foot-bottom{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(34,34,33,.12);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  position:relative;z-index:1;
}
/* ⚠️ Trois zones, et le crédit au CENTRE de la largeur, pas entre les deux
   autres : `1fr auto 1fr` le centre quelle que soit la longueur du droit
   d'auteur et des liens légaux — un `space-between` l'aurait posé au milieu
   de l'espace restant, donc décalé. Sous 1 200 px les trois ne tiennent plus
   sur une ligne, et la rangée flexible reprend la main. Le crédit ne se coupe
   pas : une colonne `auto` entre deux `1fr` se laisse réduire à son minimum. */
@media(min-width:1200px){
  .foot-bottom{display:grid;grid-template-columns:1fr auto 1fr}
  .foot-legal{justify-self:end}
}
.foot-copy,.foot-credit{font-size:11.5px;letter-spacing:.08em;color:var(--encre-60)}
.foot-credit{white-space:nowrap}
/* `footer a` pose les liens des colonnes en blocs, rembourrés : le crédit est
   une phrase, son lien reste dans la ligne — même geste que `.foot-legal a`. */
.foot-credit a{display:inline;padding:0;opacity:1;font-size:inherit;letter-spacing:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.foot-credit a:hover{color:var(--terracotta-2)}
.foot-legal{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-legal a{
  display:inline;font-size:11.5px;letter-spacing:.08em;color:var(--encre-60);
  opacity:1;padding:0;text-decoration:none;transition:color .2s;
}
.foot-legal a:hover{color:var(--terracotta-2);text-decoration:underline}
.foot-legal a + a::before{
  content:"\2726";               /* étoile de la charte */
  color:var(--terracotta);font-size:9px;margin-right:12px;
  display:inline-block;vertical-align:1px;
}
@media(max-width:560px){
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-legal{gap:8px 16px}
  .foot-legal a + a::before{content:none}
}
/* Les teintes vont par rang, pas par espace : c'est une décoration. Une couleur
   par espace demanderait une colonne, et la CSP interdit le style en ligne. */
.esp-teinte-1{background:linear-gradient(150deg,#F2D9C9,#E8B7AF)}
.esp-teinte-2{background:linear-gradient(150deg,#F8E5D8,#E9C4AC)}
.esp-teinte-3{background:linear-gradient(150deg,#E4E8DC,#A6B09C)}
.esp-teinte-4{background:linear-gradient(150deg,#F5DAD5,#DBAEA1)}
.premiers-pas .btn{flex:none}
@media(max-width:680px){
  .premiers-pas .btn{width:100%;text-align:center}
}

/* ---------- Heros de page ---------- */
.phero{
  position:relative;overflow:hidden;margin-bottom:30px;
  width:100vw;margin-inline:calc(50% - 50vw);
}
.phero-img{position:relative;display:flex;align-items:flex-end;border-radius:0 0 28px 28px;overflow:hidden}
/* La photo remplit le bandeau et se laisse rogner : le cadre va de 4:1 sur
   ordinateur à 1,5:1 sur téléphone, aucun fichier ne peut être aux deux formats.
   ⚠️ `object-position` vise le **centre bas** : c'est là qu'est l'agenda ouvert,
   le sujet de cette page — un cadrage centré verticalement montrerait surtout le
   mur et le plafond. */
.phero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}
/* ⚠️ **Un voile est nécessaire dès qu'il y a une photo.** Ce fichier portait
   « pas de voile : la teinte du hero reste telle quelle » — vrai d'un dégradé
   pâle, faux d'une photographie : le titre terracotta et le sous-titre gris se
   perdaient dans les fleurs et les étagères. Le voile part du bas, là où le
   texte est posé, et s'efface vers le haut pour ne pas éteindre l'image.
   Il est **crème et non sombre** : la charte pose du terracotta sur du clair,
   et un voile noir aurait obligé à passer le texte en blanc — une autre
   identité. Sa suffisance est mesurée, pas jugée à l'œil
   (`tests/bandeaux.spec.js`). */
.phero-img::before{display:none}
/* ⚠️ **Ce commentaire affirmait le contraire du fichier.** Il disait « plus de
   voile, le texte n'est plus sur la photo » — daté d'un essai qui a été défait :
   le conteneur porte `sur-photo`, `.phero-img.sur-photo:has(.phero-photo)::before`
   pose bien un voile, et le titre est mesuré à l'intérieur de l'image. Un
   commentaire qui contredit sa propre feuille est pire qu'aucun commentaire :
   on le croit et on argumente avec. Voir `tests/bandeaux.spec.js`. */

/* ⚠️ Le bloc de texte est **dans** le bandeau, en bas, par-dessus la photo —
   `.phero-img.sur-photo` est en `flex` avec `align-items:flex-end`. */
.phero-inner{position:relative;width:100%;padding:26px var(--gout,28px) 0;max-width:var(--container);margin:0 auto}


.phero .eyebrow{color:var(--peche)}
.phero h1{font-family:var(--font-serif);font-weight:400;color:var(--brun);
  font-size:clamp(32px,4.6vw,50px);line-height:1.1;margin:12px 0 10px;text-shadow:none}
/* ⚠️ **L'encre pleine, pas `--encre-60`.** Le paragraphe est à 15 px, donc son
   plancher est 4,5 — celui du texte courant — quand le titre, en grands
   caractères, se contente de 3,0. À 62 % d'opacité il est rendu **gris clair** :
   aucune force de voile ne l'amenait à son plancher, et j'ai longtemps cru le
   contraire en lisant sa couleur sans son alpha. Le corriger vaut plus que vingt
   points de voile, et ne coûte rien à la photographie. */
.phero p{color:var(--encre);font-size:15px;max-width:560px}


.phero .mot{width:44px;height:44px;margin-bottom:4px;opacity:.9}
.phero.grand .phero-img{height:clamp(240px,32vw,360px)}
/* Chaque hero garde sa teinte en fond d'attente, sous la photo. Elle reste
   visible tant que l'image n'est pas arrivée, et pour les routes qui n'en ont
   pas encore. */
.route.has-hero{padding-block:0 30px}
@media(max-width:680px){
  /* ⚠️ 240 px de bande pour 192 px de texte : la photographie n'avait plus que
     48 px pour exister. On lui laisse de quoi se voir sous le texte, qui reste
     calé en bas. */
  .phero.grand .phero-img{height:auto;min-height:340px}
  .phero-inner{padding-top:20px}
  .phero p{font-size:13.5px}
  .phero .mot{width:32px;height:32px;margin-bottom:2px}
  .phero h1{font-size:32px;margin:8px 0 8px}
}

/* ---------- Barre d'ancres : posée sur le hero, puis figée en haut ---------- */
.ancres{
  position:sticky;top:calc(var(--h-entete) + var(--h-mode-test));z-index:41;
  /* ⚠️ Elle remontait de 124 px pour se poser **dans** le hero, du temps où le
     texte y était. Le texte est descendu ; elle suit, sans chevauchement. */
  margin-top:6px;
  transition:background .3s, box-shadow .3s, margin .3s;
}
.ancres-in{
  display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;
  padding-block:16px;align-items:center;
}
.ancres-in::-webkit-scrollbar{display:none}
/* ⚠️ **Un seul traitement : l'encre sombre sur pastille claire.** Les liens
   inactifs étaient en quasi-blanc (`--blanc` sur 14 % de blanc), un reste de
   l'époque où le hero était sombre — or la cliente a tranché pour la variante
   claire et « il n'y a plus de variante ». Sur un hero pâle, et plus encore sur
   une photographie, cette navigation était **illisible** : du blanc sur du clair.
   La classe `.claire`, écrite pour la page Tarifs, était déjà la bonne ; elle
   devient la règle.
   ⚠️ **Mais son état actif ne la suit pas.** `.claire` peignait l'actif en
   terracotta plein avec du texte blanc : 3,6:1, sous le plancher de 4,5 exigé
   pour du texte courant. L'actif garde donc le blanc plein et l'encre du
   traitement d'origine, qui lui est très au-dessus. */
.ancres a{
  flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(34,34,33,.25);color:var(--encre);
  background:rgba(253,250,245,.72);backdrop-filter:blur(6px);transition:.22s;
}
.ancres a:hover,.ancres a.actif{background:var(--blanc);color:var(--encre);border-color:var(--encre-60)}

/* Une fois figée sous le header */
.ancres.figee{
  margin-top:6px;
  background:rgba(247,239,230,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,122,83,.22);
  box-shadow:0 10px 24px -20px rgba(34,34,33,.4);
}
.ancres.figee a{
  border-color:rgba(34,34,33,.18);color:var(--encre-60);background:transparent;backdrop-filter:none;
}
.ancres.figee a:hover{border-color:var(--terracotta);color:var(--encre);background:transparent}
.ancres.figee a.actif{background:var(--accent-soft);border-color:var(--terracotta);color:var(--terracotta-2)}

/* Sections d'une page thématique : fonds alternés */
.sect{padding-block:56px 44px;scroll-margin-top:142px;position:relative}
/* une section sur deux prend le fond crème profond */
.sect:nth-of-type(even){background:var(--creme-2)}
.sect:nth-of-type(even)::before,
.sect:nth-of-type(even)::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(196,122,83,.18);
}
.sect:nth-of-type(even)::before{top:0}
.sect:nth-of-type(even)::after{bottom:0}
@media(max-width:680px){
  /* ⚠️ **Le monogramme reste ~30 px au-dessus du centre des appliques en petit
     format, et c'est un arbitrage.** Le texte y occupe deux lignes de plus, donc
     le bloc centré le remonte ; et sur un téléphone court le hero est piloté par
     son contenu, si bien que la fraction bouge d'un appareil à l'autre.
     Une translation corrigerait l'écart — mais elle pousserait les deux boutons
     **hors du hero**, que `overflow:hidden` coupe : on tronquerait l'appel à
     l'action principal pour un gain de composition. Mesuré : 0,352 exactement sur
     ordinateur, 0,30 à 0,35 selon le téléphone. */
  /* ⚠️ Elle remontait de 96 px pour se poser **dans** le bandeau, du temps où le
     texte y flottait plus haut. Le texte occupe désormais le bas de la bande :
     elle mangeait 44 px du sous-titre. Elle suit le bandeau, elle n'y entre plus. */
  /* ⚠️ Le `top` n'est plus redéclaré ici : la version mobile valait `76px` sec,
     sans `--h-mode-test`, donc la barre se collait 33 px sous l'en-tête dès que
     le bandeau de mode test était là. Seule la marge diffère selon le format. */
  .ancres{margin-top:8px}
  .ancres.figee{margin-top:8px}
  .ancres-in{padding-block:13px;gap:7px}
  .ancres a{font-size:9.5px;padding:9px 14px}
  .sect{padding-block:42px 34px;scroll-margin-top:132px}
}

/* ---------- Boutique ---------- */
.shop-cats{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 22px}
.prod .crea{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);font-weight:600}
.prod .d{font-size:11.5px;color:var(--encre-60);flex:1;margin-top:5px}
.prod .px{font-family:var(--font-serif);font-size:20px;color:var(--terracotta)}
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:46;background:var(--encre);color:var(--creme);border:none;border-radius:999px;padding:14px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;box-shadow:0 14px 30px -12px rgba(34,34,33,.5);transition:transform .2s}
.cart-fab:hover{transform:translateY(-2px)}
.cart-fab[hidden]{display:none}
.gift-row{display:flex;gap:10px}
.gift-row input{
  flex:1;min-width:0;border:1.5px solid rgba(34,34,33,.18);border-radius:999px;
  padding:13px 20px;font-family:inherit;font-size:14px;background:var(--blanc);
}
.gift-row input:focus{outline:none;border-color:var(--terracotta)}
/* Un code promotionnel se lit en capitales, comme il s'écrit sur l'affiche. */
.champ-code{text-transform:uppercase;letter-spacing:.06em}
.promo-msg{font-size:12.5px;margin-top:6px;color:var(--encre-60);min-height:1em}
.gift-row .btn{flex:none}
.art-cotes{display:grid;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:20px}
.art-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.art .ex{font-size:12.5px;color:var(--encre-60);flex:1}
.art-une .art-body{padding:26px 28px 28px;gap:9px;justify-content:center}
.art-une .ex{font-size:14px;flex:none}
.art-une .art-ruban{top:26px;right:-56px;width:200px;font-size:9.5px;padding:7px 0}
.art-petit .art-body{padding:16px 17px 18px;gap:5px}
.art-petit .ex{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-petit .art-cat{font-size:8px;padding:4px 9px;left:11px;top:11px}
.art-petit .art-duree{font-size:8.5px;padding:3px 8px;left:11px;bottom:11px}
@media(max-width:1000px){
  .art-cotes{grid-template-rows:none;grid-template-columns:repeat(2,1fr);gap:18px}
  .art-suite{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:680px){
  .art-cotes,.art-suite{grid-template-columns:1fr}
  .art-petit .ex{font-size:12.5px}
}
.ct-map .ct-map-note{font-size:11.5px;color:rgba(34,34,33,.62);letter-spacing:.04em;text-align:center;max-width:32ch}
/* La carte chargée occupe tout le panneau ; « Agrandir » reste lisible dessus. */
.ct-map.chargee{position:relative;padding:0;display:block}
.ct-adresse .btn{align-self:flex-start}
.ct-bloc .btn{align-self:flex-start}
.faq-item.open .faq-btn::after{content:"−"}
.faq-item.open .faq-rep{display:block}
.cookies-inner{
  max-width:var(--container);margin:0 auto;padding-inline:28px;
  display:flex;align-items:center;gap:22px;
}
/* ⚠️ **Le titre est sur la même ligne que le texte.** Empilés, ils faisaient
   deux lignes de plus qu'il n'en fallait : le bandeau montait à une centaine de
   pixels et recouvrait les deux boutons d'appel de l'accueil — c'est-à-dire ce
   pour quoi la page existe. « Votre vie privée » tient en trois mots ; il n'a
   pas besoin de sa propre ligne. */
.cookies-txt{flex:1;min-width:0;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:4px 14px}
.cookies-btns{display:flex;gap:8px;flex:none}
.cookies-btns .btn{
  padding:9px 18px;font-size:10.5px;letter-spacing:.12em;white-space:nowrap;
}
.ck-detail-wrap{max-width:var(--container);margin:0 auto;padding:0 28px 12px}
.ck-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;border-bottom:1px dashed rgba(34,34,33,.1)}
.ck-line:last-child{border:none}
.sw{width:42px;height:24px;border-radius:99px;background:rgba(34,34,33,.18);border:none;position:relative;transition:.25s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.sw.on{background:var(--sauge)}
.sw.on::after{left:21px}
.sw:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:860px){
  .cookies-inner{flex-direction:column;align-items:stretch;gap:10px}
  .cookies-btns{flex-wrap:wrap}
  .cookies-btns .btn{flex:1 1 auto;min-width:0;text-align:center;padding:11px 14px;white-space:normal}
}
@media(max-width:560px){
  .cookies-inner{gap:9px;padding-inline:18px}
}
@media(max-width:560px){
  .cookies-txt{display:block}
}
@media(max-width:560px){
  .cookies-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cookies-btns .btn{width:auto;letter-spacing:.12em;padding:11px 8px}
  /* ⚠️ « Personnaliser » reste un **lien**, au-dessus des deux vrais choix.
     Ma première tentative le posait en `absolute` dans un coin : il passait
     sous les boutons dès que le texte gagnait une ligne. Une ligne de dix-huit
     pixels, discrète, coûte moins qu'un chevauchement. */
  .cookies-btns #ckSet{
    grid-column:1 / -1;order:-1;justify-self:start;
    border:0;background:none;padding:0;
    font-size:11px;letter-spacing:.04em;text-transform:none;text-decoration:underline;
    color:var(--encre-60);line-height:1.4;
  }
}
@media(max-width:680px){
  .cart-fab{bottom:84px;right:16px}
}
@media(max-width:1200px){
  .burger{display:block}
}
@media(max-width:1000px){
  .valeurs-home{grid-template-columns:1fr!important}
  .prat-grid,.tarif-grid{grid-template-columns:repeat(2,1fr)}
  .profs-grid{grid-template-columns:repeat(2,1fr)}
  .page-cols{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:680px){
  .section-pad{padding-block:60px 22px}
  .prat-grid,.tarif-grid,.profs-grid,.exp-grid{grid-template-columns:1fr}
  .sticky-cta{display:block}
}
@media(max-width:680px){
  .sheet-body{padding:22px 18px 28px}
  .sheet-head,.sheet-foot{padding:14px 18px}
  .page-hero{gap:20px;padding:30px 0 12px}
}
@media(max-width:680px){
  .frise svg:nth-child(n+6){display:none}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- Teintes de hero ----------
   Chaque paire de pages partage sa teinte : brun sable pour La Maison et la
   Boutique, rose profond pour Nos offres et Contact, vert sauge pour le
   Planning et les Actualités (docs/CONTEXTE.md §13). Ces dégradés étaient
   répétés en attributs style=, avec leurs hexadécimaux en dur. */
.phero-sable{background:linear-gradient(180deg,var(--creme) 0%,var(--peche) 52%,var(--sable-profond) 100%)}
.phero-rose{background:linear-gradient(180deg,var(--creme-2) 0%,var(--peche) 52%,var(--rose) 100%)}
.phero-sauge{background:linear-gradient(180deg,var(--creme-2) 0%,var(--sauge-clair) 55%,var(--sauge-profond) 100%)}

/* =====================================================================
   LE TEXTE SUR LA PHOTOGRAPHIE
   -----------------------------------------------------------------
   Traitement retenu par la cliente après comparaison des trois options :
   un voile **uniforme**, posé partout de la même façon. Elle a écarté d'emblée
   le voile asymétrique — « je ne suis pas fan d'un côté obscurci » —, et c'était
   juste : effacer la moitié d'une photographie pour porter du texte se voit.
   ⚠️ Sa force est le seul réglage qui compte, et il s'arbitre à la mesure : sous
   un certain seuil le titre passe sous le plancher de lisibilité, au-dessus la
   photo s'aplatit. Voir `tests/bandeaux.spec.js`.
   ===================================================================== */

/* ⚠️ **Le texte est EN HAUT à gauche** (Delphine, 28 septembre 2026), pour les
   cinq bandeaux qui ne sont pas L'Univers — celui-là se cale entre les appliques
   du mur, en `absolute`, et n'est pas touché par cet alignement. Il était en bas :
   les photographies portent leur sujet dans le bas du cadre (l'agenda, le
   canapé, les produits), et le texte s'y posait dessus.
   ⚠️ **Monter le texte change le voile qu'il reçoit** : c'est désormais l'arrêt
   du HAUT qui compte, plus celui du milieu. Voir le dégradé plus bas. */
.phero-img.sur-photo{display:flex;align-items:flex-start}
.phero-img.sur-photo > .phero-inner{
  position:relative;z-index:2;padding:30px var(--gout,28px) 0;
}
@media(max-width:680px){
  .phero-img.sur-photo > .phero-inner{padding-top:22px;padding-bottom:0}
}

/* ---------- Positions de titre ----------
   Le défaut est le HAUT à gauche : cinq bandeaux sur six, depuis le 28
   septembre 2026 (il était en bas). Une position ne se
   choisit pas à la composition seule — c'est la photographie qui décide, et la
   réponse change de l'une à l'autre. Les valeurs sont dans CLAUDE.md.
   ⚠️ **La position et le voile sont deux réglages, pas un.** Ils ont vécu ensemble
   le temps d'un essai, et le défaut est apparu au **deuxième** usage : un second
   bandeau remonté héritait d'un voile calé sur la photographie du premier, donc il
   effaçait la sienne sans rien y gagner. Un réglage juste pour un cas devient faux
   au suivant s'il voyage avec autre chose que lui-même.
   ⚠️ Les trois arrêts du dégradé restent des **variables** (`--voile-haut`,
   `--voile-milieu`, `--voile-bas`) : un bandeau dont la photographie est sombre là
   où on pose le titre se renforce en surchargeant l'arrêt concerné, sans réécrire
   un second `linear-gradient` qu'il faudrait ensuite tenir d'accord avec le
   premier. « Nos offres » l'a fait un temps, en haut, à .80. */

/* ⚠️ **Le titre centré se cale sur le logo peint au mur.** Il est à 49,8 % de la
   largeur de la photographie, et `object-position` est au centre : le centrage
   tient donc à toutes les largeurs, sans valeur à régler. Les bougies encadrent
   38 %–60 % — le titre y tient, le paragraphe non : il fait 560 px au plus quand
   cet intervalle en vaut ~250 sur ordinateur. Il déborde des bougies, et c'est
   assumé ; le rétrécir à 250 px donnerait quatre mots par ligne.
   ⚠️ Le `flex:0 1 auto` du h1 vaut pour les six depuis qu'ils portent tous deux
   monogrammes ; il n'y a plus de règle propre au centrage. */
.phero-img.titre-centre > .phero-inner{text-align:center}
.phero-img.titre-centre .phero-titre{justify-content:center}
.phero-img.titre-centre .phero-inner p{margin-left:auto;margin-right:auto}

/* ⚠️ **Descendre le texte, c'est retirer du rembourrage, pas ajouter une marge.**
   `.phero-img.sur-photo` est en `flex` avec `align-items:flex-end` : le bloc est
   déjà collé en bas, et une marge négative ou une translation le sortiraient de
   la bande, que `overflow:hidden` coupe. Le seul jeu disponible est ces 34 px.
   ⚠️ **Le contraste y gagne** : le dégradé remonte vers le bas (.77 à 100 %), donc
   un texte descendu reçoit un peu plus de voile. */
/* ⚠️ **Le texte se cale entre les deux appliques du mur.** Leur centre est à
   **28,5 %** de la hauteur de la bande, leur milieu horizontal à 49,6 % — le
   titre y est déjà centré, il n'y avait que la hauteur à trouver.
   ⚠️ **Les appliques ne se détectent pas au jugé.** Une détection automatique
   n'a rien trouvé ici, et sur le hero d'accueil trois tentatives avaient
   confondu les montants de fenêtre et le plafond avec elles. C'est un recadrage
   du mur, agrandi et **regardé**, qui a donné la valeur.
   ⚠️ **En `absolute`, pas en rembourrage.** La bande a une hauteur variable
   (`clamp(240px,32vw,360px)`) et un rembourrage en pourcentage se calculerait sur
   la **largeur** : il ne tiendrait à aucune taille d'écran. Un `top` en pourcentage,
   lui, se rapporte bien à la hauteur.
   ⚠️ Le décalage retire **la moitié de la ligne de titre**, pour que ce soit le
   titre qui tombe entre les lumières, et non le haut du bloc de texte. */
.phero-img.titre-lumieres > .phero-inner{
  position:absolute;left:0;right:0;top:calc(28.5% - 28px);
  /* ⚠️ **Les deux rembourrages sont remis à zéro**, pas seulement celui du bas :
     la règle du petit format pose `padding-top:56px` — elle protégeait un texte
     collé en haut de bande — et le titre tombait à 43,7 % au lieu de 28,5. Le
     grand format n'en a pas, donc le défaut ne se voyait que sur téléphone. */
  padding-top:0;padding-bottom:0;
}
@media(max-width:680px){
  .phero-img.titre-lumieres > .phero-inner{top:calc(28.5% - 22px);padding-top:0}
}

/* ⚠️ **Le voile est fort EN HAUT, là où est le texte, et léger en bas**
   (28 septembre 2026). Le texte est monté en haut à gauche : ce qu'il reçoit est
   désormais l'arrêt du haut et le début de l'interpolation, plus le milieu. Et
   Delphine voulait mieux lire les textes — le voile uniforme d'avant (.43 / .37 /
   .47) laissait « Nos offres » et « Actualités » à **1,5** au 5ᵉ centile, pour un
   plancher de 3,0.
   ⚠️ **Mesuré, pas estimé** (`tests/bandeaux.spec.js` le rejoue) : le fond est
   photographié SANS le texte, puis lu sous les lettres au 5ᵉ centile — le pire
   cas d'une encre sombre. Balayage à 1280 et 390 px :
   .60 / .45 / .40 → titres 2,30–3,83, deux sous le plancher ;
   .70 / .50 / .40 → 2,92–4,34, deux à un cheveu ;
   **.75 / .52 / .40 → 3,23–4,60, paragraphes ≥ 5,57** — la première valeur qui
   passe les six bandeaux sur les deux formats ;
   .80 / .55 / .40 → 3,59–4,87, la photographie s'efface sans rien gagner d'utile.
   ⚠️ **Le bas s'ALLÈGE** (.47 → .40) : il n'y a plus de texte à y porter, et
   c'est là que les photographies ont leur sujet — l'agenda, le canapé, les
   produits. On paie en haut, on rend en bas.
   ⚠️ **Toujours un voile UNIFORME au sens de la cliente** : il est le même sur
   toute la largeur, aucun côté n'est obscurci. Il varie en hauteur, comme il le
   faisait déjà. */
.phero-img.sur-photo:has(.phero-photo)::before{
  content:'';position:absolute;inset:0;z-index:1;display:block;
  background:linear-gradient(to bottom,
    rgba(247,239,230,var(--voile-haut,.75)) 0%,
    rgba(247,239,230,var(--voile-milieu,.52)) 55%,
    rgba(247,239,230,var(--voile-bas,.40)) 100%);
}

/* ─── Accueil : les trois disciplines (26 octobre 2026) ───
   Trois arches en portrait, côte à côte ; sous 680 px, un carrousel à
   défilement natif (scroll-snap) où la suivante dépasse, pour qu'on la devine.
   ⚠️ **L'arche se règle en deux rayons** : 50 % de la largeur à l'horizontale,
   37,5 % de la hauteur à la verticale — la même longueur sur une image 3:4, donc
   un demi-cercle. Un `999px` réduirait aussi, à la proportion, les coins du bas.
   ⚠️ **Le passe-partout est un `::after`** posé sur la photo : un liseré crème
   intérieur, sans teinte de famille — la couleur d'une famille est une donnée,
   éditable depuis /admin, pas un décor de l'accueil. */
.disc-grid{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);text-align:center;
}
/* Plus de trois disciplines : autant de colonnes que la largeur en permet. */
@media(min-width:681px){.disc-grid.disc-plus{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.disc{display:block;color:inherit;text-decoration:none;border-radius:20px}
.disc-visuel{
  --arche:50% 50% 18px 18px / 37.5% 37.5% 18px 18px;
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--arche);
  background:var(--creme-2);isolation:isolate;
  transition:transform .5s ease,box-shadow .5s ease;
}
.disc-visuel img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.disc-visuel::after{
  content:'';position:absolute;inset:10px;z-index:1;pointer-events:none;
  border:1px solid rgba(253,250,245,.75);border-radius:var(--arche);
}
.disc-texte{padding:24px 8px 0}
.disc h3{font-size:clamp(30px,3vw,38px);font-weight:400;line-height:1.1}
.disc-ligne{
  font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:1.4;
  color:var(--encre-60);margin:8px auto 0;max-width:30ch;
}
.disc-compte{
  margin-top:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);
}
.disc-compte:empty{display:none}
/* Le planning de la discipline, filtré (`/planning?discipline=…`, 27 octobre
   2026) : un lien à part, la carte mène à L'Univers. */
.disc-seances{display:inline-block;margin:10px 8px 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--terracotta-2);text-decoration:none;border-bottom:1px solid rgba(196,122,83,.35);padding-bottom:2px}
.disc-seances:hover,.disc-seances:focus-visible{border-bottom-color:var(--terracotta)}
/* Le texte en encre (contraste AA à 10,5 px) ; seule l'étoile, décorative, en terracotta. */
.disc-compte::before{content:"\2726";margin-right:8px;color:var(--terracotta)}
.disc:hover .disc-visuel,.disc:focus-visible .disc-visuel{
  transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(122,74,45,.45);
}
.disc:hover .disc-visuel img,.disc:focus-visible .disc-visuel img{transform:scale(1.05)}
.disc:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion: reduce){
  .disc-visuel,.disc-visuel img{transition:none}
  .disc:hover .disc-visuel,.disc:focus-visible .disc-visuel,
  .disc:hover .disc-visuel img,.disc:focus-visible .disc-visuel img{transform:none}
}
@media(max-width:680px){
  .disc-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 10px;
    scroll-padding-inline:var(--gutter);scrollbar-width:none;
  }
  .disc-grid::-webkit-scrollbar{display:none}
  .disc-grid > li{scroll-snap-align:start}
  .disc-texte{padding-top:18px}
}