/* =========================================================
   FÉMINITÉ MAGNIFIÉE — v3
   Parti-pris : ex-voto. Une revue imprimée, pas une page web.

   Règles tenues sans exception :
   · Une seule famille de caractères : Cormorant Garamond.
     Allura n'apparaît qu'UNE fois par page.
   · Aucun dégradé, sauf le grain de papier.
   · Aucune animation au défilement.
   · Le carmin est une surface, pas un accent.
   · L'or ne sert qu'aux filets et au médaillon.
   · Angles vifs. Pas de pilule, pas de flèche.
   ========================================================= */

/* ---------------------------------------------------------
   1. Fondations
   --------------------------------------------------------- */
:root{
  --cream:    #faf3e6;
  --paper:    #fffdf8;
  --carmine:  #9c1d58;
  --carmine-d:#7a1244;
  --magenta:  #bb0450;
  --brick:    #a52b31;
  --terra:    #bb3b17;
  --gold:     #d49851;
  --gold-d:   #a97633;

  --ink:      #2e1418;
  --ink-soft: #58393c;
  --ink-pale: rgba(46,20,24,.42);

  --rule:     rgba(169,118,51,.42);
  --rule-pale:rgba(46,20,24,.14);
  --rule-lt:  rgba(250,243,230,.28);

  --serif:  "Cormorant Garamond", Cormorant, Garamond, "Palatino Linotype", Georgia, serif;
  --script: "Allura", "Snell Roundhand", cursive;

  --measure: 62ch;
  --gutter:  clamp(1.4rem, 5vw, 5rem);
  --max:     1300px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-padding-top:5rem; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.08rem,.45vw + 1rem,1.24rem);
  line-height:1.66;
  font-weight:400;
  overflow-x:hidden;
  /* Détails de composition : ligatures, césure, veuves évitées */
  font-variant-ligatures:common-ligatures contextual;
  font-kerning:normal;
  hanging-punctuation:first last;
  text-rendering:optimizeLegibility;
}

p,li{ hyphens:manual; -webkit-hyphens:manual; }
h1,h2,h3,p,li,figcaption{ text-wrap:pretty; }
h1,h2{ text-wrap:balance; }

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

::selection{ background:var(--carmine); color:var(--cream); }

/* Grain de papier — la seule texture conservée */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.26; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='150' height='150' filter='url(%23g)' opacity='.5'/></svg>");
}

/* ---------------------------------------------------------
   2. Typographie
   --------------------------------------------------------- */
h1,h2,h3,h4{ font-weight:300; margin:0 0 .5em; line-height:1.02; letter-spacing:-.015em; }
h1{ font-size:clamp(3.2rem,9vw,7.5rem); }
h2{ font-size:clamp(2.3rem,5.2vw,4.4rem); }
h3{ font-size:clamp(1.4rem,2vw,1.85rem); letter-spacing:-.005em; }
h4{ font-size:1.15rem; }

p{ margin:0 0 1.05em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

/* Le seul geste calligraphique : une fois par page, en grand. */
.allura{
  font-family:var(--script); font-weight:400;
  color:var(--carmine); padding-inline:.05em;
  letter-spacing:0;
}

/* Petite capitale sérif — remplace les micro-labels sans-serif */
.smallcaps{
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--brick);
  hyphens:none; -webkit-hyphens:none; text-wrap:balance;
}

/* Note en italique, dans la marge ou au fil du texte */
.note-it{ font-style:italic; color:var(--ink-soft); }

.lede{
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.42;
  font-style:italic; color:var(--ink-soft); max-width:34ch;
}

/* Lettrine */
.drop::first-letter{
  float:left; font-size:4.6em; line-height:.78; padding:.06em .1em 0 0;
  color:var(--carmine); font-weight:300;
}

/* ---------------------------------------------------------
   3. Grille
   --------------------------------------------------------- */
.page{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.page--tight{ max-width:900px; }

.band{ position:relative; }
.band--cream{ background:var(--cream); }
.band--paper{ background:var(--paper); }
.band--carmine{ background:var(--carmine); color:var(--cream); }
.band--carmine h1,.band--carmine h2,.band--carmine h3{ color:var(--cream); }
.band--carmine .smallcaps{ color:var(--gold); }
.band--carmine .allura{ color:var(--gold); }
.band--carmine .note-it,.band--carmine .lede{ color:rgba(250,243,230,.76); }

.pad{ padding-block:clamp(4rem,8vw,8rem); }
.pad-s{ padding-block:clamp(2.6rem,4.5vw,4.2rem); }

/* Colonne de marge + colonne de texte : la structure de base du site */
.ed{
  display:grid;
  grid-template-columns:minmax(90px,1fr) minmax(0,4fr);
  gap:clamp(1.4rem,4vw,3.5rem);
  align-items:start;
}
@media (min-width:1100px){
  /* la marge ne porte qu'un intertitre et une note : inutile de lui donner
     un cinquieme de la page, cette largeur profite mieux au texte */
  .ed{ grid-template-columns:minmax(90px,190px) minmax(0,1fr); }
}
@media (max-width:760px){
  .ed{ grid-template-columns:1fr; gap:1rem; }
}

.ed__margin{
  padding-top:.5rem;
  border-top:1px solid var(--rule);
}
.band--carmine .ed__margin{ border-color:var(--rule-lt); }

/* Chiffre romain de section */
.numeral{
  display:block; font-size:1.5rem; font-style:italic; color:var(--gold-d);
  line-height:1; margin-bottom:.5rem; letter-spacing:.04em;
}
.band--carmine .numeral{ color:var(--gold); }

/* ---------------------------------------------------------
   4. Filets & médaillon
   --------------------------------------------------------- */
.hr{ border:0; height:1px; background:var(--rule-pale); margin-block:clamp(2rem,4vw,3.4rem); }
.hr--gold{ background:var(--rule); }
.hr--short{ width:5.5rem; margin-inline:0; }
.band--carmine .hr{ background:var(--rule-lt); }

/* Le médaillon : unique ornement, hérité des médailles de la charte */
.medallion{
  display:block; width:30px; height:30px; margin:clamp(2rem,4vw,3rem) auto;
  color:var(--gold-d);
}
.band--carmine .medallion{ color:var(--gold); }

/* ---------------------------------------------------------
   5. Liens & actions — angles vifs, aucune flèche
   --------------------------------------------------------- */
.lnk{
  display:inline-block; text-decoration:none; color:var(--carmine);
  font-style:italic; font-size:1.12rem;
  border-bottom:1px solid var(--rule); padding-bottom:.12em;
  transition:border-color .3s ease, color .3s ease;
}
.lnk:hover{ color:var(--magenta); border-color:currentColor; }
.band--carmine .lnk{ color:var(--gold); border-color:var(--rule-lt); }
.band--carmine .lnk:hover{ color:var(--cream); }

.act{
  display:inline-block; text-decoration:none;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  padding:1.05rem 2.2rem; border:1px solid currentColor; color:var(--carmine);
  background:transparent; cursor:pointer; font-family:var(--serif);
  transition:background .35s ease, color .35s ease;
}
.act:hover{ background:var(--carmine); color:var(--cream); }
.act--solid{ background:var(--carmine); color:var(--cream); border-color:var(--carmine); }
.act--solid:hover{ background:transparent; color:var(--carmine); }
.band--carmine .act{ color:var(--cream); }
.band--carmine .act:hover{ background:var(--cream); color:var(--carmine); }

.acts{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; }

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--magenta); outline-offset:3px;
}
.band--carmine a:focus-visible{ outline-color:var(--gold); }

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--carmine); color:var(--cream); padding:.7rem 1.3rem;
  text-decoration:none; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  transition:top .25s ease;
}
.skip:focus{ top:1rem; }

/* ---------------------------------------------------------
   6. En-tête
   --------------------------------------------------------- */
.head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-block:1.35rem;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.head.stuck{
  background:var(--cream); border-bottom-color:var(--rule);
  padding-block:.7rem;
}
.head__in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
}

.wordmark{ text-decoration:none; line-height:1; display:flex; align-items:baseline; gap:.32em; }
.wordmark b{ font-weight:300; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:.02em; }
.wordmark i{ font-family:var(--script); font-style:normal; font-size:clamp(1.5rem,2.4vw,1.95rem); }

/* Sur le carmin, l'en-tête passe en crème tant qu'il n'est pas figé */
.head--light:not(.stuck) .wordmark,
.head--light:not(.stuck) .menu a:not(.act){ color:var(--cream); }
.head--light:not(.stuck) .burger span{ background:var(--cream); }
.head--light:not(.stuck) .burger{ border-color:var(--rule-lt); }

.menu{ display:flex; align-items:baseline; gap:clamp(1.1rem,2.4vw,2.4rem); }
.menu a{
  text-decoration:none; color:var(--ink);
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  padding-bottom:.25rem; border-bottom:1px solid transparent;
  transition:border-color .3s ease, color .3s ease;
}
.menu a:hover{ border-bottom-color:currentColor; }
.menu .act{ display:none; }              /* visible uniquement dans le burger */
.menu a[aria-current="page"]{ border-bottom-color:var(--gold); }

.burger{
  display:none; width:42px; height:42px; padding:0;
  border:1px solid var(--rule); background:transparent; cursor:pointer;
  font-family:var(--serif);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  position:relative; z-index:60;
}
.burger span{ display:block; width:16px; height:1px; background:var(--ink); transition:transform .35s ease, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-3px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:flex; }
  .menu{
    position:fixed; inset:0; background:var(--carmine);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:3rem var(--gutter); z-index:55;
    clip-path:inset(0 0 100% 0);
    visibility:hidden;           /* sort du parcours clavier tant qu'il est ferme */
    transition:clip-path .5s cubic-bezier(.7,0,.2,1), visibility 0s linear .5s;
  }
  .menu.open{
    clip-path:inset(0 0 0 0);
    visibility:visible;
    transition:clip-path .5s cubic-bezier(.7,0,.2,1), visibility 0s;
  }
  .menu a:not(.act){ color:var(--cream); }
  .menu a{ font-size:1.6rem; letter-spacing:.06em; text-transform:none; }
  .menu a.act{
    display:inline-flex; align-items:center; gap:.8rem;
    margin-top:1.4rem; font-size:.78rem;
    letter-spacing:.22em; text-transform:uppercase;
    padding:1rem 2.1rem;
    background:var(--cream); color:var(--carmine);
    border:1px solid var(--cream); border-radius:999px;
  }
  .menu a.act::after{ content:"→"; font-size:1em; }
  .menu a.act:hover{ background:transparent; color:var(--cream); }
  .head--light:not(.stuck) .menu a:not(.act){ color:var(--cream); }
}

/* ---------------------------------------------------------
   7. Ouverture — surface carmin pleine hauteur
   --------------------------------------------------------- */
.opening{
  min-height:100svh; display:flex; align-items:flex-end;
  padding-block:9rem clamp(2.5rem,5vw,4.5rem);
  overflow:hidden;
}
.opening__in{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1.35fr .65fr; align-items:end; width:100%;
}
@media (max-width:900px){
  .opening{ align-items:center; padding-block:8rem 3.5rem; }
  .opening__in{ grid-template-columns:1fr; }
}

.opening h1{ margin:0; }
.opening h1 .allura{ display:block; font-size:1.16em; line-height:.86; margin-top:-.06em; }
.opening__rule{ height:1px; background:var(--rule-lt); margin:clamp(1.6rem,3vw,2.6rem) 0 clamp(1.2rem,2vw,1.8rem); }
.opening__sub{ font-style:italic; font-size:clamp(1.05rem,1.5vw,1.3rem); color:rgba(250,243,230,.8); margin:0; }
.opening__mission{
  font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.45;
  color:var(--cream); max-width:30ch; margin:0 0 2rem;
}
.opening__aside{ padding-bottom:.4rem; }

/* Bande d'informations pratiques */
.strip{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding-block:1rem;
}
.strip ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem clamp(1.5rem,4vw,3.5rem);
  justify-content:center;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brick);
}

/* ---------------------------------------------------------
   8. L'arche — unique forme d'image
   --------------------------------------------------------- */
.arch{
  position:relative; margin:0; overflow:hidden;
  border-radius:50% 50% 0 0 / 40% 40% 0 0;
  background:#e9d3c2; aspect-ratio:3/4;
}
.arch--low{ border-radius:50% 50% 0 0 / 22% 22% 0 0; aspect-ratio:4/3; }
.arch--tall{ aspect-ratio:2/3; }
.arch img{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; }

.arch__wait{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:1.5rem;
  background:#ecd8c8; color:var(--gold-d);
}
.arch__wait b{ font-weight:400; font-size:1rem; color:var(--brick); }
.arch__wait em{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-style:normal; opacity:.65; }

/* Filet doré courant le long de l'arche */
.arch--ruled::after{
  content:""; position:absolute; inset:9px 9px 0; z-index:3;
  border:1px solid rgba(250,243,230,.55); border-bottom:0;
  border-radius:inherit; pointer-events:none;
}

/* ---------------------------------------------------------
   9. L'index des massages — une table, pas des cartes
   --------------------------------------------------------- */
.index{ border-top:1px solid var(--rule); }
.index__row{
  display:grid; grid-template-columns:1fr auto auto;
  gap:1rem clamp(1rem,3vw,2.5rem); align-items:baseline;
  padding-block:1.5rem; border-bottom:1px solid var(--rule-pale);
  text-decoration:none; color:inherit;
  transition:background .3s ease, padding-left .3s ease;
}
a.index__row:hover{ background:rgba(156,29,88,.05); padding-left:.7rem; }
.index__num{ font-style:italic; color:var(--gold-d); font-size:1rem; }
.index__name{ font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; }
.index__name small{ display:block; font-size:.95rem; font-style:italic; color:var(--ink-soft); margin-top:.15rem; }
.index__dur{ font-style:italic; color:var(--ink-soft); white-space:nowrap; font-size:.98rem; }
.index__price{ font-size:1.35rem; color:var(--carmine); white-space:nowrap; min-width:3.2ch; text-align:right; }
@media (max-width:620px){
  .index__row{ grid-template-columns:1fr auto; }
  .index__dur{ grid-column:1; }
  .index__price{ grid-row:1; grid-column:2; }
}

/* ---------------------------------------------------------
   10. Les planches — un massage par double page
   --------------------------------------------------------- */
.plate{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem);
  border-top:1px solid var(--rule-pale);
}
.plate:first-of-type{ border-top:0; }
.plate--flip .plate__fig{ order:2; }
/* Les planches sont imbriquees dans la colonne de texte : a deux colonnes,
   le texte tombe sous 300 px entre 820 et 1200 px. On empile jusqu'a 1200. */
@media (max-width:1200px){
  .plate{ grid-template-columns:1fr; }
  .plate--flip .plate__fig{ order:0; }
  .plate__fig{ margin-inline:auto; }
}
.plate__fig{ max-width:420px; width:100%; }

/* Portrait de la page d'accueil : plus large que les autres planches.
   Uniquement au-dessus du point de bascule, sinon cette regle ecraserait
   le passage a une seule colonne sur telephone. */
@media (min-width:1201px){
  .plate--large{
    grid-template-columns:1.2fr 1fr;
    gap:clamp(1.5rem,3vw,2.5rem);
  }
  .plate--large .plate__fig{ max-width:520px; }
}
.plate__num{ font-style:italic; color:var(--gold-d); font-size:1.1rem; display:block; margin-bottom:.6rem; }
.plate h3{ margin-bottom:.35rem; }
.plate__keys{ font-style:italic; color:var(--carmine); margin-bottom:1.1rem; }
.plate__for{ font-style:italic; color:var(--ink-soft); }
.plate__foot{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline;
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule-pale);
}
.plate__foot b{ font-weight:400; font-size:1.5rem; color:var(--carmine); }
.plate__foot span{ font-style:italic; color:var(--ink-soft); }

/* ---------------------------------------------------------
   11. Prose longue
   --------------------------------------------------------- */
.prose p{ max-width:var(--measure); }
.prose h3{ margin-top:2.4rem; }
.prose ul{ max-width:var(--measure); padding-left:1.1rem; }
.prose li{ margin-bottom:.45rem; }

/* Encadré de précautions */
.caution{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding-block:1.6rem; max-width:var(--measure);
}
.caution h3{ font-size:1.15rem; letter-spacing:.02em; }

/* Formations */
.record{ border-top:1px solid var(--rule-pale); padding-block:1.5rem; max-width:var(--measure); }
.record:first-of-type{ border-top:1px solid var(--rule); }
.record__kind{ font-style:italic; color:var(--ink-soft); font-size:.95rem; }
.record h3{ margin:.25rem 0 .15rem; }
.record p{ font-style:italic; color:var(--brick); margin:0; }

/* Citation pleine largeur */
.saying{ text-align:center; }
.saying p{
  font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1.2; font-style:italic;
  max-width:20ch; margin-inline:auto;
}
.saying cite{ display:block; margin-top:1.5rem; font-style:normal; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-d); }
.band--carmine .saying cite{ color:var(--gold); }

/* Témoignages */
.voices{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); }
.voice{ border-top:1px solid var(--rule); padding-top:1.4rem; margin:0; }
.voice p{ font-style:italic; font-size:1.1rem; }
.voice footer{ margin-top:1rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); }

/* Signature */
.sign{ margin-top:2.4rem; }
.sign img{ max-width:220px; }
.sign__wait{ font-family:var(--script); font-size:2.6rem; color:var(--carmine); line-height:1; margin:0; }

/* ---------------------------------------------------------
   12. Contact
   --------------------------------------------------------- */
.contact{ display:grid; gap:clamp(2.5rem,5vw,5rem); grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:start; }

.entry{ padding-block:1.4rem; border-bottom:1px solid var(--rule-pale); max-width:44ch; }
.entry:first-of-type{ padding-top:0; }
.entry__key{ font-style:italic; color:var(--gold-d); display:block; margin-bottom:.35rem; font-size:.98rem; }
.entry__big{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.25; margin:0; }
.entry a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.entry a:hover{ color:var(--carmine); border-color:var(--carmine); }
.entry p{ margin-bottom:.4rem; }
.entry__fine{ font-size:.97rem; color:var(--ink-soft); }

.form{ border:1px solid var(--rule); padding:clamp(1.5rem,3.5vw,2.8rem); background:var(--paper); }
.f{ margin-bottom:1.3rem; }
.f label{ display:block; font-style:italic; color:var(--ink-soft); margin-bottom:.4rem; font-size:1rem; }
.f input,.f textarea,.f select{
  width:100%; font-family:var(--serif); font-size:1.08rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:.55rem .1rem; transition:border-color .3s ease;
}
.f select{ padding-left:0; }
.f textarea{ min-height:130px; resize:vertical; border:1px solid var(--rule); padding:.7rem; }
.f input:focus,.f textarea:focus,.f select:focus{ border-color:var(--carmine); outline-offset:2px; }
.f--trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.agree{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1.5rem; max-width:52ch; }
.agree input{ width:auto; margin-top:.45rem; flex:none; accent-color:var(--carmine); border:0; }
.agree label{ font-style:normal; font-size:.97rem; color:var(--ink-soft); line-height:1.5; margin:0; }
.agree a{ color:var(--carmine); }

.status{ margin-top:1rem; min-height:1.5em; font-style:italic; }
.status[data-state="error"]{ color:var(--terra); }
.status[data-state="ok"]{ color:var(--carmine); }
.fine{ font-size:.92rem; color:var(--ink-soft); margin-top:1rem; font-style:italic; }

/* Rappel discret en bas d'écran, sur mobile seulement */
.reach{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; border-top:1px solid var(--rule);
  background:var(--cream);
}
.reach a{
  flex:1; text-align:center; padding:.95rem .35rem; text-decoration:none;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--carmine);
  white-space:nowrap;          /* jamais deux lignes : la hauteur reste constante */
}
.reach a + a{ border-left:1px solid var(--rule); }
@media (max-width:760px){
  .reach{ display:flex; padding-bottom:env(safe-area-inset-bottom); }
  /* doit rester >= a la hauteur de la barre, sinon elle masque le pied de page */
  body{ padding-bottom:calc(3.6rem + env(safe-area-inset-bottom)); }
}
@media print{ .reach{ display:none; } }

/* ---------------------------------------------------------
   13. Titre de page interne
   --------------------------------------------------------- */
.opener{ padding-block:clamp(8rem,14vw,11rem) clamp(2rem,4vw,3.5rem); }
.opener h1{ font-size:clamp(2.7rem,7vw,5.4rem); margin-bottom:.12em; }
.opener .lede{ max-width:40ch; }

.legal h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-top:2.6rem; }
.legal h2:first-child{ margin-top:0; }
.legal ul{ max-width:var(--measure); padding-left:1.2rem; }
.legal li{ margin-bottom:.45rem; }

/* ---------------------------------------------------------
   14. Pied de page
   --------------------------------------------------------- */
.foot{ background:var(--carmine-d); color:rgba(250,243,230,.72); padding-block:clamp(3rem,6vw,4.5rem) 1.8rem; }
.foot__grid{ display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.foot .wordmark{ color:var(--cream); }
.foot h4{ font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.45rem; font-size:1rem; }
.foot a{ text-decoration:none; border-bottom:1px solid transparent; }
.foot a:hover{ border-bottom-color:var(--gold); }
.foot p{ font-size:1rem; }
.foot__end{
  margin-top:2.8rem; padding-top:1.3rem; border-top:1px solid var(--rule-lt);
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------------------------------------------------------
   15. Mouvement — une seule fois, à l'arrivée. Rien au défilement.
   --------------------------------------------------------- */
@keyframes settle{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.js .opening__in > *{ animation:settle 1.1s cubic-bezier(.2,.7,.3,1) both; }
.js .opening__in > *:nth-child(2){ animation-delay:.14s; }

@media (prefers-reduced-motion:reduce){
  .js .opening__in > *{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* =========================================================
   16. Le sceau — monogramme FM dans un médaillon
   ========================================================= */
.seal{ display:block; color:var(--gold-d); }
.seal text{
  font-family:var(--serif); font-weight:300;
  fill:currentColor; stroke:none;
}
.seal--lg{ width:30px; height:30px; }
.seal--md{ width:58px; height:58px; }
.seal--sm{ width:34px; height:34px; }
.seal--center{ margin-inline:auto; }
.band--carmine .seal{ color:var(--gold); }
.foot .seal{ color:var(--gold); }

/* Le sceau accompagne le logotype dans l'en-tête */
.wordmark .seal{ width:30px; height:30px; flex:none; align-self:center; color:var(--gold-d); }
.head--light:not(.stuck) .wordmark .seal{ color:var(--gold); }
@media (max-width:520px){ .wordmark .seal{ display:none; } }

/* =========================================================
   17. Le filet en arche — sépare les sections
   ========================================================= */
.archrule{ display:block; width:min(240px,55%); height:auto; margin:clamp(2.4rem,5vw,3.6rem) auto; color:var(--rule); }
.archrule--left{ margin-inline:0; }
.band--carmine .archrule{ color:var(--rule-lt); }

/* =========================================================
   18. Le folio — titre de rubrique dans la marge, comme en typographie
   ========================================================= */
.folio{
  display:none;
  position:fixed; left:1.1rem; top:50%; transform:translateY(-50%);
  z-index:40; writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-pale); pointer-events:none;
}
.folio span{ display:inline-block; }
.folio::after{
  content:""; display:block; width:1px; height:52px;
  background:var(--rule); margin:1.1rem auto 0;
}
@media (min-width:1280px){ .folio{ display:block; } }
@media print{ .folio{ display:none; } }

/* =========================================================
   19. Notes de marge
   ========================================================= */
.aside-note{
  font-style:italic; color:var(--ink-soft); font-size:.98rem;
  line-height:1.5; border-left:1px solid var(--rule);
  padding-left:1rem; margin:1.6rem 0; max-width:32ch;
}
.band--carmine .aside-note{ color:rgba(250,243,230,.7); border-color:var(--rule-lt); }

/* Dans la colonne de marge, sous le numéro de section */
.ed__margin .aside-note{
  border-left:0; padding-left:0; margin:1.2rem 0 0;
  font-size:.92rem; max-width:26ch;
}
@media (max-width:760px){ .ed__margin .aside-note{ display:none; } }

/* =========================================================
   20. Traitement des photographies
   Unifie des clichés d'origines différentes : léger voile carmin,
   qui se retire au survol.
   ========================================================= */
/* Photos rendues telles quelles : ni voile, ni filtre, ni zoom.
   Lea prefere le rendu de la v3. */
.arch img{ filter:none; }

/* Recadrages.
   Ces photos debordent en largeur dans l'arche : sans reglage, leur sujet
   se retrouve decale. Les valeurs viennent d'une mesure du centre du sujet
   dans chaque image, pas d'une appreciation a l'oeil.

   photo             sujet     rogne    position
   massage du dos     47 %      19 %      35 %   (mesure : 34 %)
   detente absolue    43 %      25 %      22 %
   le ventre          51 %      12 %      61 %
   portrait de Lea    45 %    27-35 %      32 %                            */
.arch--haut img{ object-position:35% 50%; }
.arch--detente img{ object-position:22% 50%; }
.arch--ventre img{ object-position:61% 50%; }
.arch--portrait img{ object-position:32% 50%; }


/* =========================================================
   21. Terracotta — la troisième couleur de la charte,
   réservée aux avertissements et aux corrections.
   ========================================================= */
.caution{ border-color:rgba(187,59,23,.34); }
.caution h3{ color:var(--terra); }
.caution ul{ list-style:none; padding-left:0; }
.caution li{ padding-left:1.4rem; position:relative; }
.caution li::before{
  content:"—"; position:absolute; left:0; color:var(--terra);
}

/* =========================================================
   22. Colophon — les crédits, à la manière d'un ouvrage imprimé
   ========================================================= */
.colophon{
  border-top:1px solid var(--rule-lt); margin-top:2.6rem; padding-top:1.6rem;
  display:flex; gap:1.4rem; align-items:flex-start;
  font-size:.94rem; font-style:italic; color:rgba(250,243,230,.6);
  max-width:60ch;
}
.colophon .seal{ flex:none; }

/* =========================================================
   23. Chiffres
   ========================================================= */
.numeral,.index__num,.plate__num,.folio{ font-variant-numeric:oldstyle-num; }
.index__price,.plate__foot b,.entry__big{ font-variant-numeric:lining-nums tabular-nums; }

/* =========================================================
   24. Impression — la page Massages devient une carte des soins
   ========================================================= */
@media print{
  .head,.reach,.skip,.folio{ display:none; }
  body{ background:#fff; color:#000; padding-bottom:0; font-size:11pt; }
  body::after{ display:none; }
  .band--carmine{ background:#fff; color:#000; }
  .band--carmine h2,.band--carmine .saying p{ color:#000; }
  .pad,.pad-s,.opener{ padding-block:.8rem; }
  .arch{ display:none; }
  .plate{ grid-template-columns:1fr; page-break-inside:avoid; border-top:.5pt solid #999; }
  .index__row{ page-break-inside:avoid; }
  .foot{ background:#fff; color:#000; }
  .foot__grid > *:not(:first-child){ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .colophon{ color:#555; }
}