/* =========================================================
   Maison Aurore - feuille de style unique
   Palette creme / sauge / or, relevee sur la maquette du 03/09/2026.
   ========================================================= */

:root{
  --creme:#efeae3;          /* entete et heros */
  --fond:#f7f3ee;           /* fond de page sous le heros */
  --panneau:#f4efe9;        /* grands panneaux arrondis */
  --carte:#f9f6f1;          /* cartes posees dans un panneau */
  --blanc:#fdfbf8;

  --vert:#747f73;           /* boutons */
  --vert-fonce:#646f5f;     /* bandeau */
  --vert-sombre:#5d6a5c;    /* survol */

  --or:#b1946a;
  --or-fonce:#96753d;
  --or-pale:rgba(177,148,106,.28);

  --encre:#1b1917;          /* titres */
  --texte:#403c37;
  --texte-doux:#6f6a63;
  --texte-faible:#8b857d;
  --ligne:rgba(27,25,23,.09);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --max:1520px;
  --pad:clamp(1.25rem,3.9vw,3.5rem);
  --r:14px;
  --r-petit:9px;
  --entete:82px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0;color:var(--encre)}
p{margin:0}
blockquote{margin:0}

::selection{background:var(--or);color:#fff}
:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* le lien d'evitement doit se voir quand on l'atteint au clavier */
a.sr-only:focus{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  padding:.75rem 1.15rem;border:1px solid var(--or);border-radius:var(--r-petit);
  background:var(--blanc);color:var(--encre);
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:500;margin:0 0 1rem;
}

.titre-section{font-size:clamp(1.7rem,3.1vw,2.5rem);margin:0 0 1rem}
.titre-section--capitales{
  text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.05rem,1.36vw,1.3rem);line-height:1.3;margin:0;
  text-wrap:balance;
}
.chapeau{color:var(--texte-doux);font-size:1.02rem;max-width:60ch}

.filet{width:56px;height:1.5px;background:var(--or);margin:1.5rem 0 1.6rem;border-radius:2px}

.section{padding-block:clamp(2.5rem,4.6vw,4.2rem)}
.section--serree{padding-block:0 clamp(2.5rem,4.6vw,4.2rem)}
.section--claire{background:var(--creme)}

.entete-section{margin-bottom:clamp(2rem,4vw,3.2rem);max-width:68ch}

.prix{
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texte);font-weight:500;white-space:nowrap;
}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--encre);transition:color .25s;
}
.lien-fleche svg{width:20px;height:20px;transition:transform .25s}
.lien-fleche:hover{color:var(--or-fonce)}
.lien-fleche:hover svg{transform:translateX(5px)}

.rond{
  display:grid;place-items:center;flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--or);color:var(--or-fonce);
  transition:background .25s,color .25s,transform .25s;
}
.rond svg{width:17px;height:17px}
.rond:hover{background:var(--or);color:#fff;transform:translateX(2px)}
.rond--clair{border-color:rgba(255,255,255,.65);color:#fff}
.rond--clair:hover{background:rgba(255,255,255,.92);color:var(--encre)}

/* blocs de reserve : emplacement d'une photo pas encore livree */
.reserve{
  display:grid;place-items:center;
  background:
    linear-gradient(135deg,rgba(177,148,106,.16),rgba(177,148,106,.03) 60%),
    var(--creme);
  border:1px solid var(--or-pale);
  color:var(--or);
}
.reserve svg{width:38%;max-width:58px;height:auto;opacity:.5}

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

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  padding:1rem 2.1rem;border-radius:var(--r-petit);border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:19px;height:19px;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn--pilule{border-radius:999px}
.btn--vert{background:var(--vert);color:#fbf9f6;border-color:var(--vert)}
.btn--vert:hover{background:var(--vert-sombre);border-color:var(--vert-sombre)}
.btn--ligne{background:transparent;color:var(--encre);border-color:var(--or-pale)}
.btn--ligne:hover{border-color:var(--or);color:var(--or-fonce)}
.btn--large{width:100%}

/* ---------- marque ---------- */

.marque{display:inline-flex;align-items:center;gap:.85rem;color:var(--encre)}
.marque picture{display:block;flex-shrink:0;line-height:0}
/* l'embleme est plus etroit que haut (38 x 52). On lui laisse le bloc de 46 x 52 de l'ancien
   sceau « MA » et on l'y centre : la hauteur visible et la position du texte de la marque sont
   inchangees au pixel pres, donc rien ne bouge dans l'entete ni dans le pied de page. */
.marque__embleme{width:46px;height:52px;object-fit:contain}
.marque__mots{display:flex;flex-direction:column;gap:.22rem}
.marque__nom{
  font-family:var(--serif);font-size:1.06rem;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;color:var(--encre);
}
.marque__sous{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texte-faible);line-height:1;
}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(239,234,227,.90);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.entete.est-collee{background:rgba(239,234,227,.96);border-bottom-color:var(--ligne);box-shadow:0 6px 24px rgba(27,25,23,.05)}
.entete__barre{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--entete)}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav a{
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400;
  color:var(--texte);padding-block:.45rem;position:relative;transition:color .22s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover{color:var(--encre)}
.nav a[aria-current="page"]{color:var(--encre);font-weight:500}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.entete__action{padding:.72rem 1.7rem;font-size:.68rem}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--encre)}
.burger svg{width:26px;height:26px}

@media (max-width:1150px){
  .nav{display:none}
  .burger{display:block}
  .entete__action{display:none}
}

/* menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--creme);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);
  transform:translateY(-100%);
  /* visibility : ferme, le menu ne doit pas garder ses liens dans l'ordre de tabulation
     (il porte aria-hidden="true") ; le delai laisse la glissiere se terminer */
  visibility:hidden;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s .4s;
}
.menu-mobile[data-ouvert="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s;
}
.menu-mobile__fermer{
  position:absolute;top:20px;right:var(--pad);
  background:none;border:0;color:var(--encre);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:26px;height:26px}
.menu-mobile nav{display:flex;flex-direction:column}
/* viser « nav a » et pas « .menu-mobile a » : sinon cette regle, plus specifique que .btn,
   repeint aussi le bouton « Reserver un soin » du menu en lien serif de 1,85rem */
.menu-mobile nav a{
  font-family:var(--serif);font-size:1.85rem;color:var(--encre);
  padding-block:.5rem;border-bottom:1px solid var(--ligne);
}
.menu-mobile nav a:last-of-type{border-bottom:0}
.menu-mobile .btn{margin-top:2rem;align-self:flex-start}

/* ---------- heros ---------- */

.heros{
  position:relative;background:var(--creme);overflow:hidden;
  min-height:clamp(560px,78svh,880px);
  display:flex;align-items:center;
  padding-top:var(--entete);
}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,var(--creme) 0%,var(--creme) 33%,rgba(239,234,227,.90) 40%,rgba(239,234,227,.38) 50%,rgba(239,234,227,.06) 60%,rgba(239,234,227,0) 68%),
    linear-gradient(0deg,rgba(239,234,227,.38) 0%,rgba(239,234,227,0) 20%);
}

.heros__contenu{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  align-items:center;gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(2rem,5vh,4rem);
}
.heros__texte{max-width:min(38rem,46vw)}
.heros h1{font-size:clamp(2.3rem,4.35vw,4.15rem);line-height:1.07;letter-spacing:-.005em;max-width:7.5em}
.heros__accroche{color:var(--texte);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.72;max-width:min(34rem,100%);margin-bottom:2rem}

/* quatre reperes sous le bouton */
.pictos{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:26rem;
}
.pictos li{
  display:flex;flex-direction:column;gap:.85rem;
  padding-right:.9rem;border-right:1px solid var(--or-pale);
}
.pictos li:last-child{border-right:0;padding-right:0}
.pictos li+li{padding-left:.9rem}
.pictos svg{width:30px;height:30px;color:var(--or);flex-shrink:0}
.pictos span{
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texte);line-height:1.7;
}

/* carte de reservation */
.reserver{
  background:var(--blanc);border:1px solid rgba(27,25,23,.05);border-radius:var(--r);
  padding:1.7rem 1.5rem 1.4rem;
  box-shadow:0 24px 60px rgba(27,25,23,.10),0 3px 10px rgba(27,25,23,.04);
  display:grid;gap:.8rem;
}
.reserver h2{font-size:1.45rem;margin-bottom:.15rem}
.reserver__sous{font-size:.92rem;color:var(--texte-doux);margin-bottom:.55rem}
.reserver .btn{margin-top:.35rem}
.reserver__etat{font-size:.82rem;color:var(--or-fonce);min-height:0}
.reserver__etat:not(:empty){min-height:1.3em;margin-top:.1rem}
.reserver__note{
  display:flex;align-items:center;gap:.55rem;
  font-size:.75rem;color:var(--texte-faible);margin-top:.2rem;
}
.reserver__note svg{width:16px;height:16px;color:var(--or);flex-shrink:0}

.champ--icone{position:relative}
.champ--icone svg{
  position:absolute;right:.95rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--texte-faible);pointer-events:none;
}
.champ--icone input,.champ--icone select{padding-right:2.6rem}

/* ---------- rituels signatures ---------- */

.rituels{padding-top:clamp(2rem,3.4vw,3rem)}
.rituels__grille{
  display:grid;grid-template-columns:.6fr repeat(3,minmax(0,1fr)) .46fr;
  align-items:center;gap:clamp(.8rem,1.1vw,1.1rem);
  background:var(--panneau);border-radius:var(--r);
  padding:clamp(1.2rem,1.6vw,1.5rem);
}
.rituels__intro{padding-right:1rem}
.rituels__intro .filet{margin:1.1rem 0 0}

/* 1,25fr pour la colonne de texte (et non 1,06) : le pied de la carte porte un
   cout FIXE que la carte, elle, ne porte pas — le prix (73,5 px pour « DES 120 € »)
   et le rond (38 px) ne retrecissent pas avec l'ecran. A 1,06fr, la zone de pied
   tombait a 109,6 px pour 124,3 exiges entre 1351 et 1500 px, et a 111,1 px pour
   124,3 entre 1001 et 1080 px : le rond sortait de sa colonne de 14,7 px et venait
   toucher le bord de la carte (defaut visible a 1360 et a 1440). La photo passe de
   48,5 a 44,4 % de la carte, le pied tient partout. */
.rituel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:158px;
  background:var(--carte);border-radius:var(--r-petit);overflow:hidden;
  border:1px solid rgba(27,25,23,.045);
  transition:box-shadow .3s,transform .3s;
}
.rituel:hover{box-shadow:0 14px 34px rgba(27,25,23,.08);transform:translateY(-2px)}
/* la photo est sortie du flux (comme celle du heros et celle des vignettes) : sinon son
   rapport 4/3 impose la hauteur de la carte au lieu de la subir, et la carte photographiee
   depasse de 47 px celles qui attendent encore leur image (mesure entre 561 et 700 px) */
.rituel__image{position:relative;width:100%;height:100%;min-width:0;border:0}
.rituel__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rituel__texte{display:flex;flex-direction:column;padding:1.05rem 1.1rem}
.rituel h3{font-size:1.16rem;line-height:1.2;margin-bottom:.5rem}
.rituel__texte>p{font-size:.85rem;color:var(--texte-doux);line-height:1.5}
/* gap:.45rem et non .8rem : avec justify-content:space-between l'ecart reel est
   toujours le reste de la ligne, jamais le gap — la valeur ne se voit donc que
   lorsque la ligne est pleine, et c'est la qu'elle faisait deborder le rond. */
.rituel__pied{display:flex;align-items:center;justify-content:space-between;gap:.45rem;margin-top:auto;padding-top:1rem}

.rituels__lien{text-align:right;padding-left:.6rem}
.rituels__lien a{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  color:var(--encre);line-height:2;transition:color .25s;
}
.rituels__lien svg{
  display:inline-block;width:22px;height:22px;vertical-align:-.42em;margin-left:.55rem;
  transition:transform .25s;
}
.rituels__lien a:hover{color:var(--or-fonce)}
.rituels__lien a:hover svg{transform:translateX(5px)}

/* ---------- bandeau, citation, carte cadeau ---------- */

.mosaique{
  display:grid;grid-template-columns:1.62fr .84fr 1fr;
  gap:clamp(.8rem,1.1vw,1.1rem);align-items:stretch;
}

.bandeau{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--vert-fonce);border-radius:var(--r);
  padding:clamp(1.2rem,1.7vw,1.7rem) clamp(.8rem,1.2vw,1.2rem);
}
.bandeau__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;
  padding-inline:clamp(.5rem,1vw,1rem);border-right:1px solid rgba(255,255,255,.22);
}
.bandeau__item:last-child{border-right:0}
.bandeau strong{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.02rem,1.28vw,1.4rem);
  color:#fbf9f6;line-height:1.16;text-wrap:balance;
}
.bandeau span{font-size:.76rem;color:rgba(251,249,246,.86);line-height:1.45;text-wrap:balance}

.citation{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.2rem,1.8vw,1.8rem) clamp(1rem,1.6vw,1.6rem);
  position:relative;
}
.citation__guillemet{width:29px;height:22px;color:var(--or);opacity:.85;margin-bottom:.75rem}
.citation blockquote{
  font-family:var(--serif);font-size:clamp(.98rem,1.22vw,1.22rem);
  line-height:1.44;color:var(--encre);
}
.citation__auteur{
  margin-top:.9rem;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:500;
}

.cadeau{
  display:grid;grid-template-columns:1.2fr minmax(0,1fr);align-items:stretch;
  background:var(--panneau);border-radius:var(--r);overflow:hidden;
}
/* meme raison que .rituel__image : hors du flux, le rapport 2/1 de la photo n'etire plus
   la rangee de la mosaique (+24 px mesures a 1350 px) */
.cadeau__image{position:relative;width:100%;height:100%;min-width:0;min-height:128px;border:0;border-radius:var(--r) 0 0 var(--r)}
.cadeau__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cadeau__texte{display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:1.2rem 1.3rem}
.cadeau h3{font-size:1.18rem}
.cadeau__texte>p{font-size:.85rem;color:var(--texte-doux);line-height:1.5}
.cadeau .lien-fleche{margin-top:.6rem}

/* ---------- l'experience au spa ---------- */

.experience{display:grid;grid-template-columns:.95fr repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.1vw,1.1rem)}
.experience__intro{
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  padding:clamp(1.2rem,1.8vw,1.8rem) 1.4rem clamp(1.2rem,1.8vw,1.8rem) 0;
}
.experience__intro>p{font-size:.87rem;color:var(--texte-doux);line-height:1.6}
.experience__intro .lien-fleche{margin-top:.3rem}

.vignette{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:16/10;display:flex;align-items:flex-end;
  color:#fbf9f6;
}
.vignette__fond{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:linear-gradient(150deg,#6e6155 0%,#463b32 48%,#241d18 100%);
  color:#f4e6cf;
}
.vignette__fond svg{width:24%;max-width:74px;height:auto;opacity:.16;margin-bottom:12%}
.vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vignette::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(20,15,11,.72) 0%,rgba(20,15,11,.28) 46%,rgba(20,15,11,.08) 100%);
}
.vignette__texte{position:relative;z-index:2;padding:1.1rem 1.2rem;max-width:78%}
.vignette h3{font-size:1.2rem;color:#fbf9f6;margin-bottom:.35rem}
.vignette__texte p{font-size:.82rem;color:rgba(251,249,246,.88);line-height:1.45}
.vignette .rond{position:absolute;z-index:2;right:1.1rem;bottom:1.1rem;width:34px;height:34px}
.vignette .rond svg{width:15px;height:15px}

/* ---------- nos soins ---------- */

.soins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.6rem)}
.soin{
  display:flex;flex-direction:column;gap:.85rem;
  background:var(--carte);border:1px solid rgba(27,25,23,.05);border-radius:var(--r);
  padding:clamp(1.5rem,2.2vw,2.1rem);
  transition:box-shadow .3s,transform .3s;
}
.soin:hover{box-shadow:0 16px 40px rgba(27,25,23,.07);transform:translateY(-2px)}
.soin__rond{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--or-pale);
  display:grid;place-items:center;color:var(--or);margin-bottom:.4rem;
}
.soin__rond svg{width:38px;height:38px}
.soin h3{font-size:1.4rem}
.soin>p{font-size:.94rem;color:var(--texte-doux)}
.soin .prix{margin-top:auto;padding-top:.6rem}
.soins__lien{margin-top:clamp(1.6rem,2.6vw,2.4rem)}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,4.5rem)}

.contact__voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.3rem}
.contact__voies li{display:flex;gap:1rem;align-items:flex-start}
.contact__voies svg{width:20px;height:20px;color:var(--or);flex-shrink:0;margin-top:.35rem}
.contact__voies span{display:block;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--texte-faible);margin-bottom:.15rem}
.contact__voies a,.contact__voies p{font-size:1.02rem;color:var(--encre)}
.contact__voies a:hover{color:var(--or-fonce)}

.form{display:grid;gap:1.2rem;align-content:start}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.champ{display:grid;gap:.45rem}
.champ label{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--texte-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--blanc);color:var(--texte);
  border:1px solid rgba(27,25,23,.10);border-radius:var(--r-petit);
  padding:.9rem 1rem;font-family:var(--sans);font-size:.95rem;font-weight:300;
  transition:border-color .25s,box-shadow .25s;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:var(--texte-faible);opacity:1}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(177,148,106,.14);
}
.champ select{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--texte)}
.form .champ select{
  background-image:linear-gradient(45deg,transparent 50%,#6f6a63 50%),linear-gradient(135deg,#6f6a63 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6rem;
}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.78rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.88rem;color:var(--or-fonce);min-height:1.3em}

/* ---------- pied de page ---------- */

.pied{border-top:1px solid var(--ligne);background:var(--creme);padding-block:3.2rem 1.8rem}
.pied__haut{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:2.4rem;border-bottom:1px solid var(--ligne)}
.pied__marque{display:inline-flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.pied p{color:var(--texte-doux);font-size:.9rem;max-width:44ch}
.pied h4{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--or-fonce);margin:0 0 1rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pied ul a{font-size:.9rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--encre)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;padding-top:1.7rem}
.pied__bas p,.pied__bas a{font-size:.78rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:clamp(7rem,14vh,10rem) clamp(3.5rem,7vw,5.5rem)}
.page-texte h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:2rem}
.page-texte h2{font-size:1.32rem;margin:2.6rem 0 .9rem;color:var(--encre)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.97rem}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-fonce);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}

/* =========================================================
   ADAPTATIONS
   ========================================================= */

/* --- grands ecrans intermediaires ---
   Borne a 1001 px : en dessous, c'est le bloc de reduction en fin de feuille qui
   reprend la composition du bureau. Sans cette borne, les regroupements de
   colonnes ci-dessous survivraient sous les regles de reduction et casseraient
   la composition (l'intro des rituels sur toute la largeur, la mosaique en deux
   colonnes, l'experience en trois). Entre 1001 et 1350 px, rien ne change. */
@media (min-width:1001px) and (max-width:1350px){
  .rituels__grille{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;row-gap:1.2rem;
  }
  .rituels__intro{grid-column:1/-1;padding-right:0}
  .rituels__lien{grid-column:1/-1;text-align:left;padding-left:0}
  .rituels__lien a{justify-content:flex-start}

  .mosaique{grid-template-columns:1fr 1fr}
  .bandeau{grid-column:1/-1}
  .experience{grid-template-columns:repeat(3,minmax(0,1fr))}
  .experience__intro{grid-column:1/-1;padding:0 0 .6rem}
  .experience__intro>p br{display:none}
}

/* =========================================================
   LA MEME PAGE, EN REDUCTION (1000 px et en dessous)
   ---------------------------------------------------------
   Ecran de reference : 1280 px de large, donc 1 vw = 12,8 px. Chaque valeur
   ci-dessous est la mesure du bureau divisee par 12,8 et ecrite en vw : a
   n'importe quelle largeur, la page garde EXACTEMENT la composition du bureau
   (texte a gauche et carte de reservation a droite sur la photo, rangee de
   trois cartes de rituels, bandeau de quatre reperes, rangee de trois
   vignettes, trois cartes de soins, contact en deux volets, pied en trois
   colonnes). Rien ne change de place ni d'ordre, tout retrecit.

   Chaque clamp() porte un PLANCHER EN PIXELS. Sans lui, a 375 px de large,
   1,05vw tomberait a 3,9 px et 4,35vw a 16,3 px : illisible. Le plancher est
   a 11 px pour tout texte.

   minmax(0,1fr) sur les colonnes etroites : sans lui, un mot insecable impose
   sa largeur a sa colonne et pousse la grille hors de l'ecran.

   L'interlettrage est reduit la ou il coute plus large que la taille elle-meme
   (.17em a 11 px ajoutent 23 px a un libelle de bouton).

   Ce bloc doit rester en fin de feuille : plusieurs @media plus haut portent
   les memes selecteurs et, a specificite egale, c'est le dernier qui gagne.
   ========================================================= */
@media (max-width:1000px){

  .contenu{padding-inline:3.75vw}
  .section{padding-block:clamp(16px,4.6vw,58.9px)}
  .section--serree{padding-block:0 clamp(16px,4.6vw,58.9px)}

  /* ---- vocabulaire commun ---- */
  .surtitre{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.10em;margin-bottom:clamp(6px,1.25vw,16px)}
  .titre-section{font-size:clamp(13px,3.1vw,39.7px);margin-bottom:clamp(6px,1.25vw,16px)}
  .titre-section--capitales{font-size:clamp(11px,1.36vw,17.4px)}
  .chapeau{font-size:clamp(11px,1.275vw,16.3px)}
  .filet{width:clamp(14px,4.375vw,56px);margin:clamp(7px,1.875vw,24px) 0 clamp(7px,2vw,25.6px)}
  .entete-section{margin-bottom:clamp(14px,4vw,51.2px)}
  .prix{font-size:clamp(11px,.975vw,12.5px);letter-spacing:.06em}

  .lien-fleche{font-size:clamp(11px,.925vw,11.8px);letter-spacing:.06em;gap:clamp(4px,.875vw,11.2px)}
  .lien-fleche svg{width:clamp(12px,1.5625vw,20px);height:clamp(12px,1.5625vw,20px)}

  .rond{width:clamp(16px,2.7vw,38px);height:clamp(16px,2.7vw,38px)}
  .rond svg{width:clamp(8px,1.33vw,17px);height:clamp(8px,1.33vw,17px)}

  .btn{
    font-size:clamp(11px,.925vw,11.8px);letter-spacing:.06em;
    gap:clamp(3px,.59vw,7.5px);
    padding:clamp(6px,1.25vw,16px) clamp(8px,2.625vw,33.6px);
    border-radius:clamp(5px,.7vw,9px);
  }
  .btn svg{width:clamp(12px,1.48vw,19px);height:clamp(12px,1.48vw,19px)}
  .btn--pilule{border-radius:999px}
  /* le menu mobile n'est pas une reduction du bureau : c'est la seule voie de
     navigation quand la barre de liens disparait, il garde sa taille de doigt */
  .menu-mobile .btn{font-size:.74rem;letter-spacing:.17em;padding:1rem 2.1rem;gap:.75rem}
  .menu-mobile .btn svg{width:19px;height:19px}

  /* ---- en-tete : chrome de navigation, pas contenu de page ----
     seule correction : le sous-titre de la marque etait a 9,3 px, sous le
     plancher de 11 px. A 11 px et .10em d'interlettrage il mesure 165 px et la
     marque en offre 206 a 375 px de large. */
  .marque__nom{font-size:clamp(11px,1.325vw,17px)}
  .marque__sous{font-size:11px;letter-spacing:.10em}

  /* ---- heros : texte a gauche, carte de reservation a droite, sur la photo ----
     La carte ne peut pas descendre a sa part exacte (26,56vw = 100 px a 375 px) :
     « Selectionner un soin » mesure 96 px a 11 px et il faut encore la marge du
     champ et le chevron, soit 127 px. Plancher a 135 px ; au-dessus de 508 px de
     large, la part proportionnelle reprend la main. Le plancher lui-meme est
     pris en min(135px,36vw) : a 375 px 36vw valent exactement 135, en dessous il
     redescend, sinon la carte mangerait la colonne de texte (a 320 px elle n'en
     laissait que 145 pour les 161 qu'il faut aux quatre pictos). */
  /* LA PHOTO EST SERVIE ENTIERE, jamais rognee (corrige le 06/09/2026).
     Avant : le heros etait une boite de clamp(360px,78svh,880px) et la photo la
     remplissait en object-fit:cover. A 390 px de large la boite faisait 658 px
     de haut pour 390 de large ; le fichier CARRE servi sous 700 px n'en montrait
     donc que 59 % de sa largeur, et le voile creme, opaque jusqu'a 48 %, en
     masquait encore la moitie : il restait 31 % de la photo, un gros plan sur le
     drap et une tranche de niche. Au bureau, la meme photo (le fichier paysage)
     s'affiche sur 100 % de sa largeur : on y voit la cabine entiere, le miroir,
     la vasque, la niche eclairee et l'olivier.
     Desormais : meme fichier paysage qu'au bureau (le <source media> du carre a
     ete retire du <picture>), height:auto, rapport naturel 3/2, aucun rognage.
     Photo, voile et contenu occupent LA MEME cellule de grille, cales en haut :
     le texte reste pose sur la photo et poursuit sous elle sur le fond creme du
     heros, qui est la meme couleur. La hauteur du heros n'est plus imposee, elle
     vaut la plus haute des deux (la photo au-dela de 700 px de large, le texte
     en dessous). */
  .heros{
    display:grid;grid-template-columns:100%;align-items:start;
    min-height:0;padding-bottom:0;
  }
  .heros__image,.heros__voile{position:relative;inset:auto;grid-area:1/1;align-self:start}
  .heros__image{height:auto}
  /* object-fit:fill sur une boite au rapport naturel : aucune deformation, et le
     controle « rapport affiche = rapport naturel » porte reellement sur l'image */
  .heros__image img{width:100%;height:auto;object-fit:fill;object-position:center}
  /* Le voile epouse exactement la boite de la photo (meme rapport) au lieu de
     couvrir tout le heros : sous la photo, il n'y a plus que le fond creme.
     Il ne masque plus, il attenue : la ou le bureau pose du creme opaque sur le
     tiers gauche, le mobile pose .80 puis descend a zero avant les deux tiers.
     La scene reste lisible partout, et le titre garde son fond clair.
     Le second degrade fond le bas de la photo dans le fond de page pour que le
     texte qui la depasse ne soit pas coupe par une arete. */
  .heros__voile{
    width:100%;aspect-ratio:1536/1024;height:auto;
    background:
      radial-gradient(104% 72% at 0% 100%,rgba(239,234,227,.94) 0%,rgba(239,234,227,.86) 42%,rgba(239,234,227,.48) 64%,rgba(239,234,227,.12) 82%,rgba(239,234,227,0) 96%),
      linear-gradient(90deg,rgba(239,234,227,.86) 0%,rgba(239,234,227,.84) 40%,rgba(239,234,227,.76) 58%,rgba(239,234,227,.66) 68%,rgba(239,234,227,.30) 76%,rgba(239,234,227,0) 86%),
      linear-gradient(0deg,var(--creme) 0%,rgba(239,234,227,.55) 5%,rgba(239,234,227,.12) 14%,rgba(239,234,227,0) 24%);
  }
  /* grid-area:1/1 : le contenu se pose sur la photo. Le padding-top de var(--entete)
     porte par le heros descend AUSSI la photo sous la barre fixe : entiere, elle ne
     fait plus que 260 px de haut a 390 px de large, et les 82 px de la barre en
     mangeaient 32 %. Sous la barre il ne reste qu'une bande de fond creme, exactement
     la couleur de la barre elle-meme : elle ne se voit pas. */
  .heros__contenu{
    grid-area:1/1;align-self:start;
    grid-template-columns:minmax(0,1fr) clamp(min(135px,36vw),26.56vw,340px);
    align-items:center;gap:clamp(10px,5vw,64px);
    padding-block:clamp(14px,5vh,51.2px);padding-top:clamp(14px,5vh,51.2px);
  }
  .heros__texte{max-width:100%}
  .heros h1{font-size:clamp(20px,4.35vw,55.7px);line-height:1.1}
  .heros__accroche{font-size:clamp(11px,1.05vw,13.5px);line-height:1.5;margin-bottom:clamp(10px,2.5vw,32px)}
  .heros .btn{padding:clamp(7px,1.25vw,16px) clamp(10px,2.625vw,33.6px)}

  .pictos{margin-top:clamp(10px,2.6vw,33.3px);gap:0}
  .pictos li{padding-right:clamp(3px,1.125vw,14.4px);gap:clamp(4px,1.06vw,13.6px)}
  .pictos li+li{padding-left:clamp(3px,1.125vw,14.4px)}
  .pictos svg{width:clamp(14px,2.34vw,30px);height:clamp(14px,2.34vw,30px)}
  /* .62rem font 9,9 px au bureau : sous le plancher, la valeur remonte a 11 px,
     et l'interlettrage passe de .11em a .02em pour compenser la largeur gagnee */
  .pictos span{font-size:11px;letter-spacing:.02em;line-height:1.5}

  .reserver{
    padding:clamp(8px,2.125vw,27.2px) clamp(7px,1.875vw,24px) clamp(6px,1.75vw,22.4px);
    gap:clamp(5px,1vw,12.8px);border-radius:clamp(6px,1.09vw,14px);
    box-shadow:0 clamp(6px,1.875vw,24px) clamp(15px,4.7vw,60px) rgba(27,25,23,.10);
  }
  .reserver h2{font-size:clamp(12px,1.8125vw,23.2px);margin-bottom:clamp(1px,.19vw,2.4px)}
  .reserver__sous{font-size:clamp(11px,1.15vw,14.7px);margin-bottom:clamp(4px,.69vw,8.8px)}
  /* Le bouton fait toute la largeur de la carte et son libelle est centre : sa
     marge interne laterale ne se voit donc pas, mais elle mange la ligne. A la
     part exacte (2,625vw = 20,2 px a 768) il restait 132,9 px pour les 142,2 px
     de « DEMANDER CE CRENEAU » et le libelle passait sur deux lignes jusqu'a
     768 px, alors que le bureau le tient sur une. Reduite, la ligne repasse a
     151,7 px et le libelle tient d'un trait des 700 px. En dessous, la carte
     elle-meme est trop etroite (135 px a 375) : les deux lignes sont alors la
     seule issue. */
  .reserver .btn{margin-top:clamp(2px,.44vw,5.6px);padding-inline:clamp(8px,1.4vw,33.6px)}
  .reserver__etat{font-size:clamp(11px,1.025vw,13.1px)}
  /* align-items:flex-start : reduite, la mention passe sur trois lignes et le
     picto, centre, tombait au milieu de la phrase. Cale en haut, il retrouve la
     place qu'il occupe au bureau, au debut du texte. */
  .reserver__note{
    font-size:clamp(11px,.94vw,12px);gap:clamp(3px,.69vw,8.8px);
    margin-top:clamp(2px,.25vw,3.2px);align-items:flex-start;
  }
  .reserver__note svg{margin-top:.15em}
  .reserver__note svg{width:clamp(10px,1.25vw,16px);height:clamp(10px,1.25vw,16px)}
  .champ--icone svg{right:clamp(4px,1.19vw,15.2px);width:clamp(10px,1.33vw,17px);height:clamp(10px,1.33vw,17px)}
  .champ--icone input,.champ--icone select{padding-right:clamp(16px,3.25vw,41.6px)}

  /* ---- champs de formulaire (les deux formulaires) ---- */
  .champ{gap:clamp(3px,.56vw,7.2px)}
  .champ label{font-size:clamp(11px,.825vw,10.6px);letter-spacing:.06em}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.125vw,14.4px) clamp(6px,1.25vw,16px);
    font-size:clamp(11px,1.19vw,15.2px);border-radius:clamp(5px,.7vw,9px);
  }
  /* plancher a 62 px : le texte d'aide du message tient sur trois lignes de
     11 px (53 px) plus ses marges. A la part exacte (10,16vw = 38 px a 375 px)
     la troisieme ligne etait coupee. */
  .champ textarea{min-height:clamp(62px,10.16vw,130px)}

  /* ---- rituels signatures : la rangee de trois cartes ----
     La rangee de CINQ cellules du tres grand ecran (titre, trois cartes, lien)
     ne tient plus des 1350 px : c'est deja la regle du bureau intermediaire
     ci-dessus qui pose le titre et le lien sur leur propre rangee, et la mesure
     confirme qu'il faut la garder ici. Le pied d'une carte porte un prix qui ne
     se coupe pas (« DES 110 € », 54 px a 11 px), un ecart et un rond de 16 px :
     81 px a fournir. A cinq cellules, la zone de texte d'une carte n'en offre
     que .0851 de la largeur d'ecran, soit 65 px a 768 px ; il faudrait 1 118 px
     d'ecran pour que les cinq cellules tiennent. Le titre et le lien passent
     donc pleine largeur, et LES TROIS CARTES RESTENT UNE RANGEE DE TROIS :
     a 768 px chacune fait 223 px et sa zone de texte 94 px, pour 82 exiges. */
  .rituels{padding-top:clamp(12px,3.4vw,43.5px)}
  .rituels__grille{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;gap:clamp(4px,1.1vw,14.1px);row-gap:clamp(7px,2vw,25.6px);
    padding:clamp(5px,1.6vw,20.5px);border-radius:clamp(6px,1.09vw,14px);
  }
  .rituels__intro{grid-column:1/-1;padding-right:0}
  .rituels__lien{grid-column:1/-1;text-align:left}
  .rituels__intro .filet{margin:clamp(5px,1.375vw,17.6px) 0 0}
  .rituel{min-height:0;border-radius:clamp(4px,.7vw,9px)}
  .rituel__texte{padding:clamp(5px,1.31vw,16.8px) clamp(5px,1.375vw,17.6px)}
  .rituel h3{font-size:clamp(11px,1.45vw,18.6px);margin-bottom:clamp(3px,.625vw,8px)}
  .rituel__texte>p{font-size:clamp(11px,1.06vw,13.6px);line-height:1.4}
  .rituel__pied{gap:clamp(3px,1vw,12.8px);padding-top:clamp(5px,1.25vw,16px)}
  .rituels__lien{padding-left:0}
  .rituels__lien a{font-size:clamp(11px,.9vw,11.5px);letter-spacing:.06em;line-height:1.6}
  .rituels__lien svg{
    width:clamp(12px,1.72vw,22px);height:clamp(12px,1.72vw,22px);
    margin-left:clamp(3px,.55vw,7px);vertical-align:-.3em;
  }

  /* ---- bandeau, citation, carte cadeau ---- */
  .mosaique{gap:clamp(4px,1.1vw,14.1px)}
  .bandeau{
    padding:clamp(7px,1.7vw,21.8px) clamp(5px,1.2vw,15.4px);
    border-radius:clamp(6px,1.09vw,14px);
  }
  .bandeau__item{padding-inline:clamp(4px,1vw,12.8px);gap:clamp(3px,.63vw,8px)}
  .bandeau strong{font-size:clamp(11px,1.28vw,16.4px);line-height:1.15}
  .bandeau span{font-size:clamp(11px,.95vw,12.2px);line-height:1.35}

  .citation{padding:clamp(7px,1.8vw,23px) clamp(6px,1.6vw,20.5px)}
  .citation__guillemet{
    width:clamp(12px,2.27vw,29px);height:clamp(9px,1.72vw,22px);
    margin-bottom:clamp(4px,.94vw,12px);
  }
  .citation blockquote{font-size:clamp(11px,1.22vw,15.6px);line-height:1.4}
  .citation__auteur{margin-top:clamp(5px,1.125vw,14.4px);font-size:clamp(11px,.875vw,11.2px);letter-spacing:.08em}

  .cadeau{border-radius:clamp(6px,1.09vw,14px)}
  .cadeau__image{
    aspect-ratio:auto;height:100%;min-height:clamp(40px,10vw,128px);
    border-radius:clamp(6px,1.09vw,14px) 0 0 clamp(6px,1.09vw,14px);
  }
  .cadeau__texte{padding:clamp(6px,1.5vw,19.2px) clamp(6px,1.625vw,20.8px);gap:clamp(3px,.56vw,7.2px)}
  .cadeau h3{font-size:clamp(11px,1.475vw,18.9px)}
  .cadeau__texte>p{font-size:clamp(11px,1.06vw,13.6px);line-height:1.4}
  .cadeau .lien-fleche{margin-top:clamp(3px,.75vw,9.6px)}

  /* ---- l'experience au spa : intro puis trois vignettes ---- */
  .experience{grid-template-columns:.95fr repeat(3,minmax(0,1fr));gap:clamp(4px,1.1vw,14.1px)}
  .experience__intro{
    padding:clamp(7px,1.8vw,23px) clamp(5px,1.4vw,17.9px) clamp(7px,1.8vw,23px) 0;
    gap:clamp(5px,1.25vw,16px);
  }
  .experience__intro>p{font-size:clamp(11px,1.09vw,13.9px);line-height:1.45}
  .experience__intro .lien-fleche{margin-top:clamp(2px,.38vw,4.8px)}
  /* Le rapport 16/10 fige la hauteur de la vignette : reduit, le titre sur deux
     lignes et l'accroche sur trois demandent 85 px quand le rapport n'en donne
     que 71, et le haut du titre passait sous le bord (mesure a 375 px, vignettes
     de 113 px). Le rapport devient donc un PLANCHER de hauteur, exprime en vw
     pour valoir exactement 16/10 quand le texte est court : .1361 de la largeur
     d'ecran a quatre cellules, .1881 a trois. La photo est en object-fit:cover,
     elle se recadre, elle ne se deforme pas. */
  .vignette{aspect-ratio:auto;min-height:13.61vw;border-radius:clamp(6px,1.09vw,14px)}
  /* 74 % au lieu de 78 % : le rond ne descend pas sous 16 px alors que la
     vignette, elle, retrecit ; a 375 px il lui faut 26 px sur les 113 de la
     vignette, le texte ne peut donc pas depasser 74 % sans passer dessous */
  .vignette__texte{padding:clamp(5px,1.375vw,17.6px) clamp(5px,1.5vw,19.2px);max-width:74%}
  .vignette h3{font-size:clamp(11px,1.5vw,19.2px);margin-bottom:clamp(2px,.44vw,5.6px)}
  .vignette__texte p{font-size:clamp(11px,1.025vw,13.1px);line-height:1.35}
  .vignette .rond{
    right:clamp(4px,1.375vw,17.6px);bottom:clamp(4px,1.375vw,17.6px);
    width:clamp(16px,2.66vw,34px);height:clamp(16px,2.66vw,34px);
  }
  .vignette .rond svg{width:clamp(8px,1.17vw,15px);height:clamp(8px,1.17vw,15px)}

  /* ---- nos soins : trois cartes, a toutes les largeurs ----
     Verifie a 375 px : la carte fait 112 px, il reste 95 px de texte, et le mot
     le plus long de la section, « appartiennent », en mesure 70 a 11 px. */
  .soins{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1.6vw,20.5px)}
  .soin{
    gap:clamp(4px,1.06vw,13.6px);padding:clamp(7px,2.2vw,28.2px);
    border-radius:clamp(6px,1.09vw,14px);
  }
  .soin__rond{
    width:clamp(18px,5vw,64px);height:clamp(18px,5vw,64px);
    margin-bottom:clamp(2px,.5vw,6.4px);
  }
  .soin__rond svg{width:clamp(11px,2.97vw,38px);height:clamp(11px,2.97vw,38px)}
  .soin h3{font-size:clamp(11px,1.75vw,22.4px)}
  .soin>p{font-size:clamp(11px,1.175vw,15px);line-height:1.45}
  .soin .prix{padding-top:clamp(3px,.75vw,9.6px)}
  .soins__lien{margin-top:clamp(10px,2.6vw,33.3px)}

  /* ---- contact : texte a gauche, formulaire a droite ---- */
  .contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(10px,5vw,64px)}
  .contact__voies{margin-top:clamp(10px,2.75vw,35.2px);gap:clamp(6px,1.625vw,20.8px)}
  .contact__voies li{gap:clamp(4px,1.25vw,16px)}
  .contact__voies svg{
    width:clamp(12px,1.5625vw,20px);height:clamp(12px,1.5625vw,20px);
    margin-top:clamp(2px,.44vw,5.6px);
  }
  .contact__voies span{font-size:clamp(11px,.825vw,10.6px);letter-spacing:.06em}
  /* « contact@example.com » est un seul mot de 110 px a 11 px : dans une colonne
     de 92 px il ne peut que se couper. C'est une adresse, pas un mot de la
     langue ; aucune autre chaine du site n'a cette permission. */
  .contact__voies a,.contact__voies p{font-size:clamp(11px,1.275vw,16.3px);overflow-wrap:anywhere}

  .form{gap:clamp(7px,1.5vw,19.2px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(6px,1.5vw,19.2px)}
  .form__mention{font-size:clamp(11px,.975vw,12.5px);line-height:1.45}
  .form__etat{font-size:clamp(11px,1.1vw,14.1px)}
  /* padding-right : la regle du bureau vaut 2,6rem, soit 41,6 px, et n'etait pas
     mise a l'echelle. Sur un champ de 180,5 px a 375 px, ces 41,6 px prenaient
     23 % de la largeur et ne laissaient que 132,9 px a l'option la plus longue
     (« Je ne sais pas encore, conseillez-moi », 175,8 px) : le select en coupait
     42,9 px. A la part exacte (3,25vw, soit 16 px a 375) il reste 158,5 px, et
     a 414 px les 177,3 px disponibles suffisent : l'option ne se coupe plus. */
  .form .champ select{
    padding-right:clamp(16px,3.25vw,41.6px);
    background-position:calc(100% - clamp(9px,1.5625vw,20px)) 50%,calc(100% - clamp(6px,1.17vw,15px)) 50%;
  }

  /* ---- pied de page : trois colonnes ---- */
  .pied{padding-block:clamp(16px,4vw,51.2px) clamp(10px,2.25vw,28.8px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(8px,3.125vw,40px);padding-bottom:clamp(12px,3vw,38.4px);
  }
  .pied__marque{gap:clamp(4px,1.06vw,13.6px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .pied .marque__embleme{width:clamp(16px,3.59vw,46px);height:clamp(18px,4.06vw,52px)}
  .pied p{font-size:clamp(11px,1.125vw,14.4px);line-height:1.45}
  .pied h4{font-size:clamp(11px,.85vw,10.9px);letter-spacing:.06em;margin-bottom:clamp(6px,1.25vw,16px)}
  .pied ul{gap:clamp(4px,.56vw,7.2px)}
  .pied ul a{font-size:clamp(11px,1.125vw,14.4px);overflow-wrap:anywhere;line-height:1.3;display:inline-block}
  .pied__bas{padding-top:clamp(8px,2.125vw,27.2px);gap:clamp(5px,.875vw,11.2px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme au bureau */
  .pied__bas p{font-size:clamp(11px,.975vw,12.5px);flex:0 1 48%}
  .pied__bas p:last-child{text-align:right}

  /* ---- page annexe ---- */
  .page-texte h1{font-size:clamp(18px,4.6vw,58.9px);margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(12px,1.65vw,21.1px);margin:clamp(12px,3.25vw,41.6px) 0 clamp(5px,1.125vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.21vw,15.5px)}
  .page-texte p+p{margin-top:clamp(4px,1vw,12.8px)}
}

/* ---- la mosaique passe de trois colonnes a deux sous 748 px ----
   Le seuil a ete RELEVE de 820 a 747 px le 06/09/2026 : a 820 px la rangee de
   trois tenait encore, le repli abandonnait donc la composition de la maquette
   sur 76 px de large sans qu'aucune mesure ne l'exige.
   Mesure faite en annulant le repli et en cherchant la premiere largeur ou un
   element sort de sa boite, de 2 en 2 px : la rangee de trois CASSE jusqu'a
   742 px et TIENT a partir de 744 px. Ce qui cede en premier n'est pas la carte
   cadeau mais le bandeau, comprime dans sa colonne de 1,62fr : « Sans
   engagement » sort de son repere de 1,0 px a 742, de 2,7 px a 700, de 8,3 px a
   560 et de 10,7 px a 500. La carte cadeau suit : « Faites plaisir avec un
   moment d'exception. » deborde de 5 px a 620 px et de 10 px a 560.
   Seuil pose a 747 px, soit 3 px sous la premiere largeur qui tient.
   Sous ce seuil, le bandeau passe en tete sur toute la largeur et garde SES
   QUATRE COLONNES (a 375 px chaque repere recoit 77 px, quand « Rendez-vous »
   en mesure 64) ; citation et carte cadeau restent cote a cote. */
@media (max-width:747px){
  .mosaique{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bandeau{grid-column:1/-1}
}

/* ---- l'experience passe de quatre cellules a trois sous 478 px ----
   Le seuil a ete RELEVE de 510 a 477 px le 06/09/2026 : la rangee de quatre
   tenait encore a 510 px, le repli coutait 32 px de large sans motif.
   Mesure faite en annulant le repli, de 2 en 2 px : la rangee de quatre CASSE
   jusqu'a 476 px et TIENT a partir de 478 px. Le mot qui cede est bien
   « enveloppante » (66,7 px a 11 px) dans « Chaleur enveloppante et
   purification. » : le paragraphe deborde de 2 px a 476, de 3 px a 470, de
   4 px a 462 et de 11 px a 414. Seuil pose a 477 px, 1 px sous la premiere
   largeur qui tient et 1 px au-dessus de la derniere qui casse.
   Sous ce seuil, l'intro passe sur sa propre rangee et les trois vignettes
   restent une rangee de trois, a 113 px chacune a 375 px. */
@media (max-width:477px){
  .experience{grid-template-columns:repeat(3,minmax(0,1fr))}
  .experience__intro{grid-column:1/-1;padding:0 0 clamp(4px,1vw,12.8px)}
  /* la vignette est plus large a trois cellules qu'a quatre : le plancher de
     hauteur qui vaut 16/10 passe de .1361 a .1881 de la largeur d'ecran */
  .vignette{min-height:18.81vw}

  /* Le voile de la vignette suit son texte, comme celui du heros.
     Meme degrade, meme sens, meme role : seules les bornes suivent.
     Motif, mesure le 06/09/2026 sur les pixels rendus : a trois cellules la
     vignette tombe a 82-96 px et le texte ne s'y loge plus en bas, il la
     REMPLIT (haut du bloc a 0 % de la vignette a 375 px, 15 % a 414 px, 24 % a
     477 px, contre 50 a 60 % au bureau). Le titre se retrouvait donc dans la
     partie presque transparente du degrade (.08 en haut, .28 a 46 %). Sur la
     seule vignette qui porte deja sa photo, « La tisanerie » tombait a un
     contraste de 3,45:1 a 440 px, 3,47 a 400, 3,71 a 460, 3,81 a 320 et 3,88 a
     477 px, pour du blanc a 11 px : sous les 4,5:1 exiges. Au bureau la meme
     ligne tient 6,7:1, et des 478 px (la rangee repasse a quatre cellules, la
     vignette retrouve sa hauteur) elle tient 5,9:1.
     Le degrade re-borne rend 5,18:1 au pire (440 px) et 5,36 a 5,80 ailleurs,
     soit le niveau de la bande juste au-dessus. Les deux autres vignettes, qui
     attendent encore leur photo, passaient deja et gagnent le meme abri. */
  .vignette::after{
    background:linear-gradient(0deg,rgba(20,15,11,.72) 0%,rgba(20,15,11,.38) 70%,rgba(20,15,11,.24) 100%);
  }
}

/* ---- les quatre pictos du heros passent a deux colonnes sous 593 px ----
   Le seuil a ete RELEVE de 620 a 592 px le 06/09/2026 : la rangee de quatre
   tenait encore a 620 px, le repli coutait 27 px de large sans motif.
   Mesure faite en annulant le repli, de 2 en 2 px : la rangee de quatre CASSE
   jusqu'a 591 px et TIENT a partir de 593 px. Ce qui cede est bien
   EXPERTISE & BIENVEILLANCE : le libelle deborde de 2 px a 591, puis c'est la
   bande entiere qui sort de la colonne de texte du heros, de 3 px a 583, de
   6 px a 560 et de 41 px a 375. Seuil pose a 592 px, 1 px sous la premiere
   largeur qui tient.
   Sous ce seuil, deux colonnes, jamais une seule. */
@media (max-width:592px){
  .pictos{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2.6vw,33.3px) 0}
  .pictos li:nth-child(2n){border-right:0;padding-right:0}
  .pictos li:nth-child(2n+1){padding-left:0}
  .pictos li+li{padding-left:clamp(3px,1.125vw,14.4px)}
  .pictos li:nth-child(3){padding-left:0}
}

/* ---- sous 640 px : LA RANGEE DE TROIS CARTES RESTE UNE RANGEE DE TROIS ----
   Ce qui ne tient plus, ce n'est pas la rangee, c'est le PIED de la carte : le
   prix ne se coupe pas (« DES 120 € » mesure 52,9 px a 11 px avec .06em
   d'interlettrage, 49,9 px sans) et le rond ne descend pas sous 14 px. A 375 px
   la carte fait 108,9 px, sa colonne de texte 59,4 a la part du bureau
   (1,25fr sur 2,25), et le pied 49,1 px pour les 70,6 qu'il demande.

   L'echelle a ete descendue jusqu'au bout AVANT de toucher a la rangee :
   police au plancher de 11 px, interlettrage du prix a .06em puis a zero sous
   375 px, ecart du pied a 2 px, rond a 14 px, cesure autorisee sous 375 px.
   Il manquait encore 21 px. Deux issues restaient :

   - reduire encore la colonne de photo pour que le pied tienne d'un trait : il
     faut la ramener a 28 % de la carte, soit 30 px de large pour 157 de haut.
     Une photographie servie en bande de 1 pour 5 n'est plus une photographie ;
     c'est le meme echec qu'une colonne trop etroite pour son texte.
   - laisser le pied SE REPLIER : le prix garde sa ligne, le rond passe dessous,
     cale a droite. La photo garde 40 % de la carte (45 px a 375 px, une vraie
     image), la rangee de trois est intacte, et rien ne deborde.

   C'est la seconde qui est retenue. flex-wrap ne coute rien tant qu'il reste de
   la place : mesure a 560 px, le pied revient de lui-meme sur une seule ligne
   (zone 73,8 px pour 66,9 exiges), et au-dessus de 640 px la question ne se pose
   plus. La colonne de texte porte un plancher de 66 px, pris sur la photo, pour
   que le titre et l'accroche ne se brisent pas : mesure a 320, 375, 414, 500,
   560 et 640 px, aucun mot ne sort de sa boite. */
@media (max-width:640px){
  .rituel{grid-template-columns:minmax(0,1fr) minmax(min(70px,68%),1.25fr)}
  .rituel__pied{gap:clamp(2px,1vw,12.8px);flex-wrap:wrap}
  .rituel__pied .rond{
    width:clamp(14px,2.7vw,38px);height:clamp(14px,2.7vw,38px);margin-left:auto;
  }
  .rituel__pied .rond svg{width:clamp(7px,1.33vw,17px);height:clamp(7px,1.33vw,17px)}
}

/* ---- sous 375 px : la cesure en dernier recours ----
   A 320 px la colonne de texte d'une carte de rituel tombe a 73 px pour 73
   exiges, le repere du bandeau a 63 px pour « Rendez-vous » qui en mesure 64, et
   la vignette a 96 px pour 92. La cesure automatique (dictionnaire francais du
   navigateur, la page porte lang="fr") absorbe l'ecart au lieu de faire tomber
   le texte sous 11 px. */
@media (max-width:374px){
  .rituel__texte,.bandeau__item,.vignette__texte,.cadeau__texte,.soin,.experience__intro{hyphens:auto}
  /* le prix ne se coupe pas : l'interlettrage tombe a zero (49,9 px au lieu de
     52,9). Le pied est deja replie a cette largeur, le rond passe sous le prix
     et rien ne sort de la carte. */
  .rituel .prix{letter-spacing:normal}
  /* BIENVEILLANCE mesure 82,6 px a 11 px sans interlettrage et la colonne de
     picto n'en offre plus que 77 a 320 px : la cesure prend le relais. */
  .pictos span{letter-spacing:normal;hyphens:auto}
}

@media print{
  .entete,.menu-mobile,.reserver,.form{display:none}
  body{background:#fff;color:#000}
  .heros{min-height:0}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}