/* =========================================================================
   Nihel's Skintech — Médical Spa, Bordeaux
   Polices servies depuis le site : aucune requête vers un CDN, rien à déclarer
   au RGPD. `swap` évite le texte invisible pendant le chargement.
   ========================================================================= */
@font-face { font-family: "Cormorant"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }
/* Meme police sous son nom complet : les sections tenets et trois-mondes la demandent ainsi ;
   sans ces lignes, le navigateur retombait sur Georgia (serif gras, 01/10/2026). */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-display: swap; src: url("../fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }

/* -------------------------------------------------------------------------
   Palette. Le corps est clair : un ivoire chaud, jamais du blanc pur, qui
   fait « peau » et « lin ». Les temps forts (hero, parcours) basculent sur
   une nuit brune, jamais du noir pur. L'or est un laiton doux, pas un doré
   brillant : il souligne, il ne crie pas.
   ------------------------------------------------------------------------- */
:root {
  --ivoire: #f2f1ee;
  --porcelaine: #fafaf8;
  --sable: #e2e0da;
  --encre: #17181a;
  --encre-douce: #4d4e52;
  --nuit: #0d0e10;
  --nuit-2: #15161a;
  --nuit-3: #1d1e22;
  --or: #766e60;
  --or-clair: #cfc7b8;
  --or-tres-clair: #e8e3da;
  --filet: rgba(23, 24, 26, .10);
  --filet-or: rgba(118, 110, 96, .26);
  --filet-nuit: rgba(242, 241, 238, .14);
  --max: 1360px;
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --t-hero: clamp(3.4rem, 12vw, 12.5rem);
  --t-titre: clamp(2.1rem, 4.4vw, 4rem);
  --t-sous: clamp(1.5rem, 2.6vw, 2.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivoire); color: var(--encre);
  font-family: var(--sans); font-weight: 300; line-height: 1.66; font-size: 1.08rem;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h2 { font-size: var(--t-titre); line-height: 1.08; }
h3 { font-size: var(--t-sous); line-height: 1.15; }

.surtitre {
  margin-bottom: 1rem; color: var(--or);
  font-family: var(--sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2rem; border: 1px solid var(--encre); border-radius: 999px;
  background: var(--encre); color: var(--ivoire);
  font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s, translate .3s;
}
.bouton:hover, .bouton:focus-visible { background: var(--or-clair); border-color: var(--or-clair); color: var(--nuit); translate: 0 -1px; }
.bouton--fantome { background: transparent; color: var(--encre); }
.bouton--fantome:hover, .bouton--fantome:focus-visible { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.bouton--clair { background: var(--ivoire); border-color: var(--ivoire); color: var(--nuit); }
.bouton--clair:hover, .bouton--clair:focus-visible { background: var(--or-clair); border-color: var(--or-clair); }
.bouton--fantome-clair { background: transparent; border-color: var(--filet-nuit); color: var(--ivoire); }
.bouton--fantome-clair:hover, .bouton--fantome-clair:focus-visible { border-color: var(--or-clair); color: var(--or-clair); background: transparent; }

/* ---------- Bandeau maquette ---------- */
.maquette {
  position: relative; z-index: 30; padding: .5rem 1.5rem; text-align: center;
  background: var(--or-tres-clair); border-bottom: 1px solid var(--filet-or);
  color: var(--encre); font-size: .76rem; letter-spacing: .05em;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ivoire) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.entete__int {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-block: .9rem;
}
.entete__logo { display: inline-flex; align-items: center; text-decoration: none; }
.entete__logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  color: var(--encre-douce); font-size: .8rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; transition: color .22s;
  /* 21 px de haut : sous le minimum de 24 px des cibles cliquables. */
  display: inline-flex; align-items: center; min-height: 24px;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--encre); }
.nav__cta {
  padding: .6rem 1.15rem; border: 1px solid var(--encre); border-radius: 999px;
  color: var(--encre) !important; transition: background-color .25s, color .25s !important;
}
.nav__cta:hover, .nav__cta:focus-visible { background: var(--encre); color: var(--ivoire) !important; }
.nav__tel { color: var(--encre) !important; font-weight: 500; letter-spacing: .04em !important; text-transform: none !important; }

/* Menu mobile : une case à cocher, zéro script. */
.nav__bascule { display: none; }
.nav__bouton { display: none; }
.nav__fermer { display: none; }
@media (max-width: 980px) {
  .nav a { font-size: .75rem; letter-spacing: .08em; }
  .nav { gap: 1.2rem; }
  .nav__tel { display: none; }
}
@media (max-width: 760px) {
  .entete__logo img { height: 38px; }
  .nav__bouton {
    display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
    font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre);
    min-height: 24px;
  }
  .nav__bouton span { display: block; width: 22px; height: 1px; background: var(--encre); box-shadow: 0 -6px 0 var(--encre), 0 6px 0 var(--encre); }
  /* Le menu se cadrait sur l'en-tete, pas sur l'ecran. « backdrop-filter » cree un
     bloc conteneur pour ses descendants en position fixe : « inset: 0 » visait donc
     une bande de 68 px. Les six liens debordaient ce cadre, trois passaient au-dessus
     de l'ecran et les autres s'affichaient sur le contenu, sans fond, illisibles.
     On retire le flou sur telephone — l'en-tete y garde un fond plein de toute facon
     — et le menu retrouve l'ecran entier. Mesure : nav de 375 x 67 px -> 375 x 844. */
  .entete { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ivoire); }
  /* Ouvert, le menu doit passer devant le bandeau de maquette (z-index 30). */
  .entete:has(.nav__bascule:checked) { z-index: 40; }
  .nav {
    position: fixed; inset: 0; z-index: 25; display: none; flex-direction: column;
    align-items: flex-start; justify-content: flex-start; gap: 1.4rem;
    /* de quoi passer sous le bouton « Fermer », et defiler sur un ecran court */
    padding: 4.6rem 2rem 2rem; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ivoire);
  }
  .nav a { font-size: 1.3rem; font-family: var(--serif); text-transform: none; letter-spacing: 0; }
  .nav__cta { border: 0; padding: 0; }
  .nav__cta:hover { background: none; color: var(--or) !important; }
  .nav__tel { display: block; }
  .nav__bascule:checked ~ .nav { display: flex; }
  .nav__fermer {
    display: block; position: absolute; top: 1.2rem; right: 1.5rem; cursor: pointer;
    font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce);
    font-family: var(--sans);
  }
}

/* ---------- Hero ----------
   Deux couches et le titre entre elles : le fond sous les lettres, la version
   détourée du sujet par-dessus. Même cadre 1920×1080 pour les deux, donc elles
   se superposent au pixel près. Pleine largeur : pas de bord, pas de boîte. */
.hero {
  position: relative; overflow: clip; background: var(--nuit); color: var(--ivoire);
  padding-block: 0 clamp(3rem, 8vw, 6rem);
}
.hero__fond, .hero__sujet {
  position: absolute; top: clamp(8rem, 19vw, 17rem); left: 58%; translate: -50% 0;
  width: 78vw; max-width: none; height: auto; pointer-events: none;
}
.hero__fond {
  z-index: 0; opacity: .92;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 14%, #000 60%, transparent 96%),
                      linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(transparent 0%, #000 14%, #000 60%, transparent 96%),
                      linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect;
}
.hero__sujet { z-index: 3; }
.hero::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 50%; translate: -50% 0;
  width: 100vw; height: min(50vw, 720px); pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(207, 199, 184, .16), transparent 70%),
    linear-gradient(rgba(13, 14, 16, .86) 4%, rgba(13, 14, 16, .38) 46%, transparent 100%);
}
.hero__scene { position: relative; z-index: 2; min-height: min(56vw, 800px); }
.hero__titre {
  margin: 0; padding-top: clamp(3.5rem, 9vw, 7.5rem); font-family: var(--serif);
  font-size: var(--t-hero); font-weight: 300; line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase; text-align: center; color: var(--ivoire);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}
.hero__titre em { font-style: italic; font-weight: 400; color: var(--or-clair); }
.hero__encart {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: 52rem; margin: -1.5rem auto 0; padding: 1.5rem 1.8rem;
  border: 1px solid var(--filet-nuit); border-radius: 4px;
  background: rgba(13, 14, 16, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hero__accroche { flex: 1 1 24rem; min-width: 0; color: rgba(242, 241, 238, .82); font-size: 1.02rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__indice { margin-top: 3rem; color: rgba(242, 241, 238, .55); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; }
.hero__fleche { display: block; width: 1px; height: 3rem; margin: .8rem auto 0; background: linear-gradient(var(--or-clair), transparent); }

/* ---------- Sections génériques ---------- */
.section { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--sombre { width: auto; color: var(--ivoire); background: var(--nuit); }
.section--sombre > .section { padding-block: 0; }
.section h2 { max-width: 20ch; }
.section p { max-width: 62ch; margin-top: 1.3rem; color: var(--encre-douce); }
.section--sombre p { color: rgba(242, 241, 238, .75); }
.section a:not(.bouton) { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filet-or); transition: color .2s, border-color .2s; }
.section a:not(.bouton):hover { color: var(--or); border-bottom-color: var(--or); }

/* ---------- Manifeste (à propos) ---------- */
.manifeste__grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: center; }
.manifeste__image {
  width: calc(100% + max(1.5rem, (100vw - var(--max)) / 2) + 5vw);
  margin-left: calc(-1 * (max(1.5rem, (100vw - var(--max)) / 2) + 5vw));
  aspect-ratio: 1 / 1; object-fit: cover; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 74%, transparent 100%), linear-gradient(transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 74%, transparent 100%), linear-gradient(transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite: intersect;
}
.manifeste__texte { position: relative; z-index: 2; margin-left: clamp(-7rem, -6vw, -2rem); padding-left: clamp(1.2rem, 3vw, 3.5rem); }
.manifeste__texte h2 { max-width: 18ch; }
.manifeste__points { margin-top: 2.2rem; border-top: 1px solid var(--filet); }
.manifeste__points li { padding: .9rem 0; border-bottom: 1px solid var(--filet); color: var(--encre-douce); }
.manifeste__points strong { color: var(--encre); font-weight: 500; }

/* ---------- Les actes : le parcours d'une séance ----------
   Une piste haute et un conteneur collant : le défilement pilote la séquence
   d'images dessinée sur canvas. Puis un arrêt plein écran où l'on lit. */
.actes { background: var(--nuit); color: var(--ivoire); }
.actes__tete { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-block: clamp(4rem, 9vw, 7rem) clamp(1rem, 3vw, 2rem); }
.actes__tete h2 { max-width: 20ch; }
.actes__tete p { max-width: 58ch; margin-top: 1.2rem; color: rgba(242, 241, 238, .72); }
.acte { background: var(--nuit); }
.acte__piste { height: 158vh; }
.acte__collant { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: end stretch; }
.acte__canvas, .acte__repli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acte__canvas { z-index: 1; opacity: 0; transition: opacity .4s ease; }
.acte__collant.est-prete .acte__canvas { opacity: 1; }
.acte__repli { z-index: 0; }
.acte__collant.est-prete .acte__repli { opacity: 0; }
.acte__collant::after {
  content: ""; position: absolute; z-index: 2; inset: auto 0 0 0; height: 86%;
  background: linear-gradient(transparent, rgba(13, 14, 16, .94) 62%); pointer-events: none;
}
.acte__hud { position: relative; z-index: 3; width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.acte__num { color: var(--or-clair); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.acte__titre { margin-top: .6rem; font-size: clamp(3rem, 8.5vw, 8.5rem); line-height: .9; letter-spacing: -.03em; }
.acte__sous { margin-top: .6rem; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.3rem); color: rgba(242, 241, 238, .72); }
.acte__barre { height: 1px; margin-top: 2rem; background: var(--filet-nuit); overflow: hidden; }
.acte__jauge { display: block; width: 0; height: 100%; background: var(--or-clair); transition: width .1s linear; }
.acte__arret {
  position: relative; display: grid; place-items: center; min-height: 72vh;
  padding-block: clamp(4rem, 10vw, 8rem);
  background: radial-gradient(120% 90% at 12% 0%, rgba(207, 199, 184, .12), transparent 62%), linear-gradient(var(--nuit-3), var(--nuit));
  border-top: 1px solid var(--filet-or);
}
#acte-2 .acte__arret, #acte-4 .acte__arret, #acte-6 .acte__arret {
  background: radial-gradient(120% 90% at 88% 0%, rgba(207, 199, 184, .12), transparent 62%), linear-gradient(var(--nuit-2), var(--nuit));
}
.acte__arret-texte { width: min(calc(100% - 3rem), 62ch); margin-inline: auto; }
.acte__arret-texte .surtitre { color: var(--or-clair); }
.acte__arret-texte h3 { margin-top: .6rem; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1; }
.acte__arret-texte p { margin-top: 1.3rem; color: rgba(242, 241, 238, .75); }
@media (max-width: 700px), (max-height: 520px) {
  .acte__piste { height: auto; }
  .acte__collant { position: relative; top: auto; height: 72vh; }
  .acte__arret { min-height: auto; padding-block: clamp(3rem, 12vw, 5rem); }
  .acte__titre { font-size: clamp(2.3rem, 11vw, 3.4rem); }
}

/* ---------- Soins : catégories ---------- */
.categories { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.categorie { position: relative; display: block; text-decoration: none; border: 0 !important; overflow: hidden; border-radius: 4px; background: var(--nuit); color: var(--ivoire); }
.categorie img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; opacity: .9; transition: scale .8s cubic-bezier(.22, 1, .36, 1), opacity .4s; }
.categorie:hover img, .categorie:focus-visible img { scale: 1.04; opacity: 1; }
.categorie__texte { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.3rem; background: linear-gradient(transparent, rgba(13, 14, 16, .92)); }
.categorie__titre { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.05; }
.categorie__sous { display: block; margin-top: .4rem; font-size: .82rem; color: rgba(242, 241, 238, .72); }
.categorie__nb { position: absolute; top: 1rem; right: 1rem; padding: .3rem .6rem; border: 1px solid var(--filet-nuit); border-radius: 999px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Besoins : liste éditoriale ---------- */
.besoins { margin-top: 2.5rem; border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
.besoins a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border: 0 !important; border-bottom: 1px solid var(--filet) !important; text-decoration: none; }
.besoins a:hover { color: var(--or); }
.besoins .besoin__nom { font-family: var(--serif); font-size: 1.5rem; }
.besoins .besoin__soin { font-size: .8rem; color: var(--encre-douce); letter-spacing: .06em; text-transform: uppercase; text-align: right; }

/* ---------- Le centre (ancrage local) ---------- */
.centre__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.centre__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.coordonnees { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.5rem; }
.coordonnees div { padding-top: 1rem; border-top: 1px solid var(--filet-or); }
.coordonnees dt { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.coordonnees dd { margin-top: .4rem; color: var(--encre); font-weight: 400; }
.coordonnees dd a { border: 0 !important; }
.section--sombre .coordonnees dd { color: var(--ivoire); }

/* ---------- Tarifs (aperçu et page) ---------- */
.tarifs-apercu { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.4rem; }
.tarif-carte { padding: 1.6rem; border: 1px solid var(--filet); border-radius: 4px; background: var(--porcelaine); }
.tarif-carte h3 { font-size: 1.5rem; }
.tarif-carte .prix { display: block; margin-top: .6rem; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--or); }
.tarif-carte .prix small { font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; color: var(--encre-douce); }
.tarif-carte p { margin-top: .8rem; font-size: .92rem; }
.grille { margin-top: 2rem; width: 100%; border-collapse: collapse; font-size: .96rem; }
.grille caption { text-align: left; padding-bottom: .8rem; font-family: var(--serif); font-size: 1.6rem; }
.grille th, .grille td { padding: .8rem .4rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.grille th { font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce); }
.grille td:last-child, .grille th:last-child { text-align: right; white-space: nowrap; font-weight: 400; }
.grille tbody tr:hover { background: var(--porcelaine); }
.grille td.groupe { text-align: left; white-space: normal; padding-top: 1.6rem; font-family: var(--serif); font-size: 1.25rem; color: var(--encre); border-bottom: 1px solid var(--filet-or); }
.grille-enveloppe { overflow-x: auto; }

/* ---------- Contact ---------- */
.contact__titre { font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1; max-width: 16ch; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.form { margin-top: 2.4rem; }
.form__piege { position: absolute; left: -9999px; opacity: 0; }
.form__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.3rem clamp(1.4rem, 3vw, 2.4rem); }
.form__champ { display: flex; flex-direction: column; gap: .45rem; margin: 0; }
.form__champ--large { grid-column: 1 / -1; }
.form__champ label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce);
  /* Cliquer l'intitule met le champ au foyer : c'est une cible, elle doit
     atteindre 24 px de haut comme les autres. */
  display: flex; align-items: flex-end; min-height: 24px; }
.form input, .form select, .form textarea {
  width: 100%; padding: .9rem 1rem; font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--porcelaine); border: 1px solid var(--filet); border-radius: 3px; transition: border-color .2s;
}
.form textarea { resize: vertical; min-height: 8rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--or); }
.form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--filet-or); }
.form__note { font-size: .84rem; color: var(--encre-douce); max-width: 48ch; }

/* ---------- Pied ---------- */
.pied { background: var(--nuit); color: var(--ivoire); }
.pied__int { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.pied__haut { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; }
.pied__logo img { height: 44px; width: auto; filter: invert(1) brightness(1.4) sepia(.2); opacity: .92; }
.pied__titre { margin-bottom: .9rem; font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }
.pied__bloc a, .pied__bloc p:not(.pied__titre) { display: block; color: rgba(242, 241, 238, .72); font-size: .92rem; text-decoration: none; line-height: 1.5; padding: .22rem 0; }
.pied__bloc a:hover { color: var(--ivoire); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--filet-nuit); color: rgba(242, 241, 238, .55); font-size: .78rem; }
.pied__bas a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__haut { grid-template-columns: 1fr; } }

/* ---------- Pages secondaires ---------- */
.fil, .page-tete, .bloc, .figure-large, .accroche-page, .produit-fiche { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }
.fil { padding-top: 1.4rem; font-size: .78rem; letter-spacing: .04em; }
.fil ol { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--encre-douce); }
.fil li + li::before { content: "/"; margin-right: .5rem; opacity: .45; }
.fil a { color: var(--encre-douce); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px; }
.fil a:hover, .fil a:focus-visible { color: var(--or); }
.fil [aria-current] { color: var(--encre); }
.page-tete { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(2.2rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem); }
.page-tete__cat { display: block; margin-bottom: 1rem; color: var(--or); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.page-tete h1 { max-width: 18ch; font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 300; line-height: .98; letter-spacing: -.02em; }
.page-tete__accroche { max-width: 44ch; margin-top: 1.4rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.55; color: var(--encre-douce); }
.page-tete__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.page-tete__image { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
@media (max-width: 860px) { .page-tete { grid-template-columns: 1fr; } .page-tete__image { aspect-ratio: 16 / 10; order: -1; max-height: 46vh; } }

.bloc { padding-block: clamp(2.6rem, 6vw, 5rem); }
.bloc + .bloc { border-top: 1px solid var(--filet); }
.bloc h2 { max-width: 22ch; }
.bloc p { max-width: 64ch; margin-top: 1.3rem; color: var(--encre-douce); }
.bloc a:not(.bouton) { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet-or); }
.bloc a:not(.bouton):hover, .bloc a:not(.bouton):focus-visible { color: var(--or); border-bottom-color: var(--or); }
.bloc--deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(1.5rem, 5vw, 6rem); }
.bloc--deux h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); max-width: 16ch; }
.bloc--deux h2 { position: sticky; top: 6rem; align-self: start; }
.bloc--deux p:first-of-type { margin-top: 0; }
@media (max-width: 860px) { .bloc--deux { grid-template-columns: 1fr; } .bloc--deux h2 { position: static; } .bloc--deux p:first-of-type { margin-top: 1.3rem; } }

.points { margin-top: 2rem; border-top: 1px solid var(--filet); }
.points li { padding: 1.1rem 0; border-bottom: 1px solid var(--filet); color: var(--encre-douce); }
.points strong { color: var(--encre); font-weight: 500; }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); margin-top: 2rem; border-top: 1px solid var(--filet-or); }
.fiche > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--filet); }
.fiche dt { color: var(--encre-douce); }
.fiche dd { color: var(--encre); font-weight: 400; text-align: right; }
@media (max-width: 700px) { .fiche > div { flex-direction: column; gap: .2rem; } .fiche dd { text-align: left; } }
.faq { margin-top: 2rem; border-top: 1px solid var(--filet); }
.faq__item { padding: 1.6rem 0; border-bottom: 1px solid var(--filet); }
.faq__item h3 { font-size: 1.45rem; color: var(--encre); }
.faq__item p { margin-top: .7rem; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.4rem; }
.carte-lien { display: block; text-decoration: none; border: 0 !important; }
.carte-lien img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; transition: opacity .35s ease, scale .6s cubic-bezier(.22, 1, .36, 1); }
.carte-lien:hover img, .carte-lien:focus-visible img { opacity: .88; scale: 1.015; }
.carte-lien__titre { display: block; margin-top: .9rem; font-family: var(--serif); font-size: 1.5rem; color: var(--encre); }

/* ---------- Index des soins : des cartes un cran plus petites ----------
   Un seul defaut a corriger et une seule mesure a prendre. Le defaut : « auto-fit »
   replie les pistes vides, si bien que les categories a un seul soin (epilation,
   detatouage) etiraient leur carte sur les 1 217 px de la colonne — une image de
   1 217 x 913. « auto-fill » garde les pistes, la carte reste a sa taille.
   La mesure : la carte est plafonnee a 15,5 rem. L'image passe de 275 a 248 px sur
   ordinateur et de 327 a 248 px sur telephone, sans changer le nombre de colonnes
   ni le cadrage 4/3 des photos. */
.cartes--menu {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.cartes--menu .carte-lien { width: 100%; max-width: 15.5rem; }
.carte-lien__texte { display: block; margin-top: .2rem; color: var(--encre-douce); font-size: .92rem; }

.liens-suite { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 2rem; border-top: 1px solid var(--filet); }
.liens-suite a { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border: 0 !important; border-bottom: 1px solid var(--filet) !important; color: var(--encre); text-decoration: none; }
.liens-suite a::after { content: "→"; color: var(--or); }
.liens-suite a:hover { color: var(--or); }

.appel { padding-inline: clamp(1.5rem, 4vw, 3rem); border-radius: 4px; background: var(--nuit); color: var(--ivoire); border-top: 0 !important; margin-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); }
.appel h2 { color: var(--ivoire); }
.appel p { color: rgba(242, 241, 238, .75); }
.appel .bouton { margin-top: 1.8rem; }
.appel__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.figure-large { margin-bottom: clamp(1rem, 3vw, 2rem); }
.figure-large img { width: 100%; height: auto; border-radius: 4px; }
.figure-large figcaption { margin-top: .8rem; color: var(--encre-douce); font-size: .84rem; }

/* Marqueur des informations à obtenir de la cliente. Volontairement voyant. */
.a-completer { margin: 1rem 0; padding: .7rem 1rem; border: 1px dashed var(--or); border-radius: 3px; color: var(--or); font-size: .84rem; font-weight: 500; }

/* ---------- Apparition au défilement ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].est-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.js [data-stagger] > * { opacity: 0; transform: translateY(14px); }
.js [data-stagger].est-visible > * { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }

/* ---------- Apparition mot à mot, et survol lettre par lettre ----------
   Tout est sous .js : sans JavaScript, rien n'est masqué. */
.js [data-anime] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .22em 0 .12em; margin: -.22em 0 -.12em; }
/* Un mot decoupe en lettres devient un bloc insecable : « microdermabrasion », large de
   267 px dans un titre, depassait de 4 px sur oxygeneo. Le mot ne peut pas depasser sa
   ligne, et la coupure entre deux lettres reste possible en dernier recours. */
.js [data-anime] .mot { max-width: 100%; }
.js [data-anime] { overflow-wrap: break-word; }
.js [data-anime] .mot__i {
  display: inline-block; font-style: inherit; transform-origin: 0 100%;
  translate: 0 108%; rotate: 2.2deg; opacity: 0;
  transition: translate .78s cubic-bezier(.16, 1, .3, 1), rotate .78s cubic-bezier(.16, 1, .3, 1),
              opacity .5s cubic-bezier(.33, 1, .68, 1);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.js [data-anime].est-visible .mot__i { translate: 0 0; rotate: 0deg; opacity: 1; }
.lettre { transition: color .2s ease, -webkit-text-stroke-color .2s ease; }
.lettre.est-creuse { color: transparent; -webkit-text-stroke: .022em currentColor; -webkit-text-stroke-color: var(--or); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .manifeste__grille, .centre__grille { grid-template-columns: 1fr; }
  .manifeste__texte { margin-left: 0; padding-left: 0; margin-top: 1.8rem; }
  .manifeste__image { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  :root { --t-hero: clamp(3rem, 15vw, 5.6rem); }
  .hero__fond, .hero__sujet { width: 150vw; top: 34vw; left: 62%; }
  .hero__sujet { z-index: 1; opacity: .92; }
  .hero__titre { text-shadow: 0 2px 30px rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .5); }
  .hero__scene { min-height: 118vw; }
  .hero__encart { margin-top: 1.2rem; padding: 1.2rem 1.3rem; }
  .besoins .besoin__soin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .js [data-anime] .mot__i { translate: none; rotate: none; opacity: 1; transition: none; }
  .lettre { transition: none; }
}

/* ---------- GEO : réponse directe, date, accès ---------- */
.acces { position: absolute; left: -999px; top: 0; z-index: 100; padding: .8rem 1.2rem; background: var(--encre); color: var(--ivoire); }
.acces:focus { left: 1rem; top: 1rem; }
.page-tete__maj { margin-top: 1rem; color: var(--encre-douce); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.reponse { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto clamp(1rem, 3vw, 2rem); padding: 1.4rem 1.6rem; border-left: 2px solid var(--or); background: var(--porcelaine); border-radius: 0 4px 4px 0; }
.reponse .surtitre { margin-bottom: .5rem; }
.reponse__texte { max-width: 64ch; font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--encre); }

/* ---------- Hero : contour devant le sujet ----------
   Le titre plein reste derriere le visage ; sa copie en contour passe devant.
   La ou le sujet couvre une lettre, on en lit encore le trace ; ailleurs les
   deux couches se superposent au pixel pres et n'en font qu'une. */
.hero__scene--contour { position: absolute; top: 0; left: 0; width: 100%; z-index: 4; pointer-events: none; }
.hero__scene--contour .hero__titre { color: transparent; text-shadow: none; -webkit-text-stroke: .014em rgba(242, 241, 238, .82); }
.hero__scene--contour .hero__titre em { color: transparent; -webkit-text-stroke-color: var(--or-clair); }
.hero__fond, .hero__sujet { will-change: translate; }
@media (max-width: 700px) { .hero__scene--contour { display: none; } }

/* ---------- Legendes du parcours ---------- */
.acte__legendes { position: relative; margin-top: 1.1rem; height: 1.7em; }
.acte__legendes li { position: absolute; inset: 0; color: var(--or-clair); font-size: .88rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; opacity: 0; translate: 0 .55em;
  transition: opacity .55s ease, translate .55s cubic-bezier(.22, 1, .36, 1); }
.acte__legendes li.est-active { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .acte__legendes li { transition: none; } }

/* L'or de texte a ete assombri pour rester lisible sur fond clair ; sur fond sombre, c'est le
   champagne qui prend le relais. */
.hero .surtitre, .section--sombre .surtitre, .actes .surtitre, .appel .surtitre { color: var(--or-clair); }
.hero .lettre.est-creuse, .actes .lettre.est-creuse, .appel .lettre.est-creuse,
.section--sombre .lettre.est-creuse { -webkit-text-stroke-color: var(--or-clair); }

/* ---------- Film de fond : un seul canvas colle, hero et chapitres par-dessus ----------
   Le film est lu au defilement sur toute la piste ; chaque chapitre n'est visible que sur sa
   tranche d'avancement. Tout le texte est dans le HTML : sans JavaScript il s'empile sous
   l'image de repli, en lecture normale. */
.fond { background: var(--nuit); color: var(--ivoire); }
.fond__piste { height: 560vh; }
.fond__collant { display: block; place-items: unset; }
.fond__ecran { position: absolute; inset: 0; }
.fond__voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(rgba(13, 14, 16, .62), transparent 22%),
    linear-gradient(90deg, rgba(13, 14, 16, .74), rgba(13, 14, 16, .22) 48%, transparent 72%),
    linear-gradient(transparent 46%, rgba(13, 14, 16, .88));
}
.fond__chapitres { position: absolute; inset: 0; z-index: 3; }
.fond__chapitre {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: min(calc(100% - 3rem), var(--max)); padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
  opacity: 0; transform: translateY(1.4rem); pointer-events: none;
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.fond__chapitre.est-active { opacity: 1; transform: none; pointer-events: auto; }
.fond__chapitre .acte__titre { max-width: 12ch; }
.fond__chapitre .acte__sous { max-width: 52ch; color: rgba(242, 241, 238, .8); }
.fond__hero {
  top: 0; bottom: auto; height: 100%; padding-bottom: 0;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.4rem;
}
.fond__hero .hero__titre { padding-top: 0; }
.fond__accroche { max-width: 46ch; color: rgba(242, 241, 238, .84); font-size: 1.05rem; }
.fond__hero .hero__indice { position: absolute; left: 0; right: 0; bottom: 2.2rem; margin: 0; }
.fond__hud { position: absolute; left: 50%; bottom: clamp(1.4rem, 3vw, 2.4rem); translate: -50% 0; z-index: 4; width: min(calc(100% - 3rem), var(--max)); }
.fond__hud .acte__barre { margin-top: 0; }
.parcours-texte__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(2rem, 5vw, 4rem); margin-top: 2.4rem; }
.parcours-texte__grille p { margin-top: 0; max-width: none; }
@media (max-width: 860px) { .parcours-texte__grille { grid-template-columns: 1fr; } }
/* Sans JavaScript : pas de canvas, pas de collage ; tout se lit en colonne. */
html:not(.js) .fond__piste { height: auto; }
html:not(.js) .fond__collant { position: relative; height: auto; }
html:not(.js) .fond__ecran { position: relative; aspect-ratio: 16 / 9; }
html:not(.js) .fond__chapitres, html:not(.js) .fond__chapitre, html:not(.js) .fond__hero { position: relative; inset: auto; translate: none; transform: none; opacity: 1; height: auto; pointer-events: auto; }
html:not(.js) .fond__chapitre { margin-inline: auto; padding-block: 2.5rem; left: auto; }
html:not(.js) .fond__hud { display: none; }
/* Mobile : le film se joue seul dans un ecran de 72vh, les chapitres se lisent en dessous. */
@media (max-width: 700px) {
  .fond__piste { height: auto; }
  .fond__collant { position: relative; top: auto; height: auto; }
  .fond__ecran { position: relative; height: 72vh; }
  .fond__chapitres { position: relative; inset: auto; padding-block: 1rem 2rem; }
  .fond__chapitre, .fond__hero { position: relative; left: auto; bottom: auto; top: auto; translate: none; transform: none; opacity: 1; height: auto; pointer-events: auto; width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; padding-block: 1.6rem 1.2rem; }
  .fond__hero { padding-top: 2rem; }
  .fond__hero .hero__indice { display: none; }
  .fond__hud { position: relative; left: auto; bottom: auto; translate: none; margin: 0 auto 1.5rem; }
}

/* ---------- Film de fond, juste milieu : le recit sur le film, le catalogue en ivoire ----------
   La zone des chapitres donne leur temps de lecture ; les deux sections de recit qui suivent
   passent par-dessus le film en panneaux sombres translucides. */
.fond__zone { height: 460vh; }
.fond__sur { position: relative; z-index: 2; padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); }
.sur-film {
  width: min(calc(100% - 3rem), var(--max)); margin-inline: auto;
  padding: clamp(2.2rem, 5vw, 4rem); color: var(--ivoire);
  background: rgba(13, 14, 16, .74); border: 1px solid var(--filet-nuit); border-radius: 6px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sur-film + .sur-film { margin-top: clamp(2rem, 4vw, 3rem); }
.sur-film p, .sur-film .manifeste__points li { color: rgba(242, 241, 238, .78); }
.sur-film .manifeste__points strong { color: var(--ivoire); }
.sur-film .manifeste__points, .sur-film .manifeste__points li { border-color: var(--filet-nuit); }
.sur-film .surtitre { color: var(--or-clair); }
.sur-film .lettre.est-creuse { -webkit-text-stroke-color: var(--or-clair); }
.sur-film a:not(.bouton) { border-bottom-color: var(--filet-nuit); }
.sur-film a:not(.bouton):hover { color: var(--or-clair); border-bottom-color: var(--or-clair); }
.sur-film .manifeste__image { width: 100%; margin-left: 0; aspect-ratio: 4 / 3; border-radius: 4px; -webkit-mask-image: none; mask-image: none; }
.sur-film .manifeste__texte { margin-left: 0; padding-left: clamp(1.2rem, 3vw, 3rem); }
.sur-film .bouton { background: var(--ivoire); border-color: var(--ivoire); color: var(--nuit); }
.sur-film .bouton--fantome { background: transparent; color: var(--ivoire); border-color: var(--filet-nuit); }
html:not(.js) .fond__zone { display: none; }
@media (max-width: 860px) { .sur-film .manifeste__grille { grid-template-columns: 1fr; } .sur-film .manifeste__texte { padding-left: 0; margin-top: 1.4rem; } }
@media (max-width: 700px) {
  .fond__zone { height: 0; }
  .fond__sur { padding-block: 1rem 2.5rem; }
  .sur-film { padding: 1.6rem 1.2rem; }
}

/* Juste milieu : la piste contient collant + zone + panneaux de recit, sa hauteur suit le contenu. */
.fond__piste { height: auto; }


/* CSP : aucun style en ligne. Le libelle A_COMPLETER du pied reste en ligne dans son <dd>. */
.a-completer--inline { display: inline-block; margin: 0; }

/* ---------- Transition entre les scenes : un travelling qui ne s'arrete pas ----------
   --trav vaut 0 quand la scene est en place, et monte vers 1 juste avant et juste apres.
   L'image avance alors en echelle pendant qu'un voile de nuit la recouvre : la scene
   suivante arrive deja en mouvement. Sans JavaScript, --trav reste a 0 et rien ne bouge. */
.acte__canvas, .acte__repli, .fond__ecran {
  transform: scale(calc(1 + var(--trav, 0) * .12));
  transform-origin: 50% 46%;
  will-change: transform;
}
.acte__collant::before, .fond__collant::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--nuit);
  opacity: calc(var(--trav, 0) * .92);
}
@media (prefers-reduced-motion: reduce) {
  .acte__canvas, .acte__repli, .fond__ecran { transform: none; }
  .acte__collant::before, .fond__collant::before { opacity: 0; }
}

/* ---------- Le texte de l'acte, ecrit sur la scene ----------
   Le developpement se lit par-dessus l'image, sous le titre. La piste est allongee pour
   laisser le temps de lire, et le voile du bas est renforce pour garder le contraste.
   Transition accentuee : l'echelle monte plus haut et la nuit se referme plus tot. */
.acte__piste { height: 240vh; }
.acte__hud { display: grid; gap: .2rem; }
.acte__dev { max-width: 62ch; margin-top: 1.5rem; }
.acte__dev-titre {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2;
  color: var(--or-clair); margin-bottom: .8rem;
}
.acte__dev p { margin-bottom: .7rem; color: rgba(242, 241, 238, .84); font-size: .98rem; line-height: 1.6; }
.acte__dev p:last-child { margin-bottom: 0; }
.acte__collant::after { height: 100%; background: linear-gradient(transparent 2%, rgba(13, 14, 16, .5) 24%, rgba(13, 14, 16, .93) 60%); }
/* Transition plus prononcee : 22 % d'echelle au lieu de 12, voile presque plein. */
.acte__canvas, .acte__repli, .fond__ecran { transform: scale(calc(1 + var(--trav, 0) * .22)); }
.acte__collant::before, .fond__collant::before { opacity: calc(var(--trav, 0) * .98); }
@media (max-width: 700px), (max-height: 520px) {
  .acte__piste { height: auto; }
  .acte__collant { height: auto; min-height: 88vh; }
  .acte__dev { margin-top: 1.1rem; }
  .acte__dev p { font-size: .94rem; }
}

/* ---------- Tarifs : trois cartes, une seule mise en avant ----------
   Principe repris d'une maquette de reference, reecrit en natif : degrade discret en tete
   de la carte phare, prix en tres grand avec la devise en petit, filet puis liste cochee. */
.tarifs-apercu { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.tarif-carte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 2.2rem 1.9rem; border: 1px solid var(--filet); border-radius: 8px;
  background: var(--porcelaine); transition: border-color .35s ease, transform .35s ease;
}
.tarif-carte:hover { border-color: var(--filet-or); transform: translateY(-3px); }
.tarif-carte--phare { border-color: var(--filet-or); }
.tarif-carte--phare::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
  background: linear-gradient(rgba(207, 199, 184, .34), transparent);
}
.tarif-carte > * { position: relative; z-index: 1; }
.tarif-carte__marque {
  align-self: flex-start; margin-bottom: .9rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--encre); color: var(--ivoire);
  font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.tarif-carte h3 { font-size: 1.45rem; line-height: 1.1; }
.tarif-carte__accroche { margin-top: .5rem; min-height: 3.1em; color: var(--encre-douce); font-size: .92rem; }
.tarif-carte__prix { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tarif-carte__prix .devise { font-family: var(--serif); font-size: 1.4rem; color: var(--or); }
.tarif-carte__prix .montant { font-family: var(--serif); font-size: clamp(3rem, 4.6vw, 4.2rem); line-height: .9; letter-spacing: -.02em; color: var(--encre); }
.tarif-carte__prix .unite { flex: 1 1 100%; margin-top: .3rem; color: var(--encre-douce); font-size: .8rem; letter-spacing: .04em; }
.tarif-carte__action { margin-top: 1.6rem; width: 100%; }
.tarif-carte__points { margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--filet); }
.tarif-carte__points li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; color: var(--encre-douce); font-size: .89rem; line-height: 1.5; }
.tarif-carte__points li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .62rem; height: .34rem;
  border-left: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or); rotate: -45deg;
}
.tarifs-lien { margin-top: 2rem; }
@media (max-width: 860px) { .tarifs-apercu { grid-template-columns: 1fr; } .tarif-carte__accroche { min-height: 0; } }

/* ---------- Vitrine des familles de soins ----------
   Une grande image qui change au survol, une rangee de familles en dessous, l'active
   soulignee d'or. Les cinq liens existent dans le HTML : sans JavaScript rien n'est perdu. */
.vitrine { margin-top: 2.8rem; }
.vitrine__scene { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--nuit); }
.vitrine__vue { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.vitrine__vue.est-active { opacity: 1; }
.vitrine__vue img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.vitrine__vue.est-active img { transform: scale(1); }
.vitrine__vue figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(1.4rem, 3vw, 2.6rem); display: grid; gap: .4rem;
  background: linear-gradient(transparent, rgba(13, 14, 16, .82)); color: var(--ivoire); }
.vitrine__titre { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1; }
.vitrine__sous { max-width: 52ch; color: rgba(242, 241, 238, .8); font-size: .95rem; }
.vitrine__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.2rem; margin-top: 1.6rem; }
.vitrine__liste a { display: grid; gap: .25rem; padding-top: .9rem; border-top: 1px solid var(--filet);
  text-decoration: none; color: var(--encre-douce); transition: color .3s ease, border-color .3s ease; }
.vitrine__liste a.est-active, .vitrine__liste a:hover, .vitrine__liste a:focus-visible { color: var(--encre); border-top-color: var(--or); }
.vitrine__num { font-family: var(--serif); font-size: .82rem; color: var(--or); }
.vitrine__nom { font-size: .92rem; font-weight: 500; letter-spacing: .04em; line-height: 1.25; }
.vitrine__nb { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair, var(--encre-douce)); }
@media (max-width: 860px) {
  .vitrine__scene { aspect-ratio: 4 / 5; }
  .vitrine__liste { grid-template-columns: 1fr; gap: 0; }
  .vitrine__liste a { grid-template-columns: auto 1fr auto; align-items: baseline; gap: .8rem; padding-block: .85rem; }
  .vitrine__nb { text-align: right; }
}

/* ---------- Alternance gauche / droite du texte des actes ----------
   Un acte sur deux pose son texte a droite de l'ecran. Le texte reste aligne a gauche :
   c'est le bloc qui se deplace, pas l'alignement, sinon les paragraphes deviennent penibles
   a lire. Sur telephone la colonne est unique et l'alternance est neutralisee. */
.acte__num, .acte__sous, .acte__dev, .acte__legendes { max-width: 56ch; }
.acte__titre { max-width: 13ch; }
.acte--droite .acte__num,
.acte--droite .acte__titre,
.acte--droite .acte__sous,
.acte--droite .acte__dev,
.acte--droite .acte__legendes { margin-left: auto; }
@media (max-width: 860px) {
  .acte__num, .acte__titre, .acte__sous, .acte__dev, .acte__legendes { max-width: none; }
  .acte--droite .acte__num,
  .acte--droite .acte__titre,
  .acte--droite .acte__sous,
  .acte--droite .acte__dev,
  .acte--droite .acte__legendes { margin-left: 0; }
}

/* ---------- Images plus contenues ----------
   Hors du parcours filme, aucune image ne doit manger l'ecran entier : la vitrine passe
   d'un 16:9 pleine hauteur a un format panoramique, et l'en-tete des pages est plafonnee.
   Le recadrage se fait par object-fit, donc rien n'est deforme. */
.vitrine__scene { aspect-ratio: auto; height: clamp(260px, 44vh, 430px); }
.page-tete__image { max-height: 50vh; }
@media (max-width: 860px) {
  .vitrine__scene { aspect-ratio: auto; height: clamp(230px, 34vh, 320px); }
  .page-tete__image { max-height: 38vh; }
}

/* ---------- Hero : l'animation du logo ----------
   La video couvre le fond, le titre se lit par-dessus. Elle est muette et sans boucle :
   elle se joue une fois puis reste sur la derniere image, le logo forme. Si la lecture
   automatique est refusee, le poster prend le relais et rien n'est perdu. */
.hero__film {
  /* Video en plein cadre, comme au depart. */
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.hero { background: var(--nuit); }
/* L'encre du logo couvre 90 % de la hauteur de l'image : l'accroche tombait forcement
   dessus. Elle sort du champ visuel et reste dans le document pour les moteurs et les
   lecteurs d'ecran, comme le fait deja le titre. Seuls les boutons restent a l'ecran,
   poses tout en bas, la ou le logo a fini. */
.hero__accroche {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero__encart { position: relative; z-index: 2; }
.hero__indice { position: relative; z-index: 2; }
.hero__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, transparent, rgba(13, 14, 16, .62) 78%),
              linear-gradient(rgba(13, 14, 16, .45), transparent 34%, rgba(13, 14, 16, .78));
}
.hero { min-height: min(94vh, 820px); display: grid; align-content: center; }
.hero__scene { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .hero__film { display: none; } 
  .hero { background: var(--nuit) url("../../images/hero-logo-repli.webp") center / cover no-repeat; } }

/* ---------- Hero epure ----------
   Le titre reste dans le document pour les moteurs et les lecteurs d'ecran, mais sort du
   champ visuel : a l'ecran, c'est le logo anime qui parle. L'encart perd son cadre et se
   centre sous le logo. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero__encart {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 1.6rem; max-width: 46rem; margin: 0 auto; padding: 0 1.5rem;
  border: 0; border-radius: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero__accroche { flex: 0 1 auto; max-width: 42ch; color: rgba(242, 241, 238, .88); }
.hero__actions { justify-content: center; }
@media (max-width: 700px) { .hero__encart { margin-top: 0; padding: 0 1.3rem; gap: 1.3rem; } }

/* ---------- Hero : le bloc d'appel descend sous le logo ----------
   Le logo se forme au centre de l'image ; l'accroche et les boutons se posent dans le tiers
   bas, pour ne pas lui passer dessus. L'indice de defilement reste tout en bas. */
.hero { align-content: end; padding-bottom: clamp(2.5rem, 6vh, 5rem); }
.hero__encart { margin-top: auto; }
.hero__indice { margin-top: 1.8rem; }
@media (max-width: 700px) { .hero { padding-bottom: clamp(2rem, 5vh, 3.5rem); } }

/* ---------- Une video du centre dans une page de soin ----------
   Muette, en boucle, sans bouton : elle montre le geste, elle ne demande rien. Le poster
   prend le relais si la lecture automatique est refusee. */
.film__cadre { margin: 2.2rem 0 0; }
.film__video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 6px; background: var(--nuit); display: block;
}
.film__cadre figcaption { margin-top: .9rem; color: var(--encre-douce); font-size: .89rem; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .film__video { display: none; } }

/* Le bloc d'appel du hero descend encore : le logo garde tout le haut pour lui.
   Troisieme descente demandee : l'encart se pose au plus bas du cadre, l'indice de
   defilement se resserre pour ne pas repousser le bouton vers le milieu. */
.hero { padding-bottom: clamp(.35rem, .8vh, .8rem); }
.hero__encart { gap: .8rem; }
.hero__indice { margin-top: .55rem; }

/* ---------- En-tete filmee d'une page de soin ----------
   La video occupe toute la largeur de l'ecran et le texte se lit par-dessus. Le voile
   garantit le contraste quelle que soit l'image. Sans lecture automatique, le poster reste. */
.page-tete--film {
  position: relative; display: block; grid-template-columns: none;
  /* 100vw compte la barre de defilement : l'en-tete depassait de 8 px et la page
     glissait lateralement. Le parent <main> fait deja toute la largeur utile,
     donc 100 % tombe juste, sur les sept pages filmees et a toute largeur. */
  width: 100%; margin-bottom: clamp(2.5rem, 6vw, 5rem);
  min-height: min(72vh, 620px); overflow: hidden; background: var(--nuit); color: var(--ivoire);
  display: grid; align-content: end;
}
.page-tete__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-tete__voile {
  position: absolute; inset: 0; pointer-events: none;
  /* Le texte couvre presque toute la hauteur de l'en-tete : le voile ne peut pas
     l'eviter, il doit donc rester dense partout ou il se pose. Mesure : sur un pixel
     blanc du film, il faut 0,60 d'opacite pour tenir le 4,5:1 de l'AA en ivoire.
     On garde 0,64 au plus clair, avec une marge. */
  background: linear-gradient(rgba(13,14,16,.76), rgba(13,14,16,.64) 30%,
                              rgba(13,14,16,.70) 62%, rgba(13,14,16,.92));
}
.page-tete__texte {
  position: relative; z-index: 1; width: min(calc(100% - 3rem), var(--max));
  margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* L'or clair du sur-titre tombait entre 3,9 et 4,4:1 sur les films les plus clairs.
   Ce champagne plus pale tient 4,8:1 au pire pixel, et reste chaud face a l'ivoire. */
.page-tete--film .page-tete__cat { color: rgb(238, 228, 208); }
.page-tete--film h1 { color: var(--ivoire); max-width: 18ch; }
.page-tete--film .page-tete__accroche { color: rgba(242,241,238,.95); max-width: 56ch; }
.page-tete--film .page-tete__maj { color: rgba(242,241,238,.92); }
.page-tete--film .bouton--fantome { color: var(--ivoire); border-color: var(--filet-nuit); }
@media (max-width: 700px) { .page-tete--film { min-height: min(62vh, 460px); } }
/* En mouvement reduit, masquer la video ne laissait qu'un aplat sombre : le poster
   part avec elle. On la garde donc en place, arretee par le JS ci-dessous, et son
   poster tient lieu d'image fixe. */
@media (prefers-reduced-motion: reduce) { .page-tete__film { animation: none; } }

/* ---------- La grille tarifaire complete ----------
   Cinq familles ancrees, un rail colle qui filtre en direct, et un tableau ou la
   prestation, la duree, le prix et le forfait occupent chacun leur colonne. Le prix
   cesse d'etre noye dans une phrase : il se lit seul, en chiffres alignes. */
#grille { scroll-margin-top: 5rem; }
.famille { scroll-margin-top: 10.5rem; }
.famille + .famille { margin-top: clamp(3rem, 6vw, 5.5rem); }
.famille > h3 {
  font-family: var(--serif); font-weight: 400; line-height: 1.04;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: .5rem;
}
.famille > p { max-width: 62ch; color: var(--encre-douce); }

/* Le rail reste sous l'entete pendant toute la lecture : la famille cherchee est
   toujours a un clic, quelle que soit la profondeur atteinte dans la page. */
.rail {
  position: sticky; top: 4.85rem; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.4rem; margin: 2rem 0 clamp(2rem, 4vw, 3.2rem); padding: .8rem 1rem;
  background: var(--ivoire);
  border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet);
  border-radius: 0;
}
.rail__filtre { display: flex; align-items: center; gap: .9rem; flex: 1 1 19rem; min-width: 0; }
.rail__champ {
  flex: 1 1 auto; min-width: 0; max-width: 22rem;
  padding: .5rem .8rem; font: inherit; font-size: .92rem; color: var(--encre);
  background: var(--ivoire); border: 1px solid var(--filet); border-radius: 2px;
}
.rail__champ::placeholder { color: var(--encre-douce); }
.rail__champ:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.rail__compte {
  flex: 0 0 auto; margin: 0; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-douce); font-variant-numeric: tabular-nums;
}
.rail__nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.rail__lien {
  padding: .4rem .75rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-douce); text-decoration: none; border: 1px solid transparent;
  border-radius: 2px; transition: color .3s, border-color .3s, background .3s;
}
.rail__lien:hover, .rail__lien:focus-visible { color: var(--encre); border-color: var(--filet-or); }
.rail__lien.est-active { color: var(--encre); background: var(--sable); border-color: var(--filet-or); }

/* Le tableau. Les chiffres sont en chasse tabulaire : les colonnes s'alignent. */
.grille { margin-top: 1.5rem; }
.grille caption {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-douce); padding-bottom: 1rem;
}
.grille thead th { padding-bottom: .7rem; border-bottom: 1px solid var(--filet-or); }
.grille thead th.grille__th-droite { text-align: right; }
.grille tbody tr[data-tarif] { transition: background .25s; }
.grille tbody tr[data-tarif]:hover { background: var(--porcelaine); }
.grille tbody th.grille__nom {
  width: 42%; font-family: var(--sans); font-weight: 400; font-size: 1rem;
  letter-spacing: 0; text-transform: none; color: var(--encre);
}
.grille tbody td.grille__duree {
  width: 11%; color: var(--encre-douce); font-size: .86rem;
  white-space: nowrap; text-align: left;
}
.grille tbody td.grille__prix {
  width: 15%; font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; color: var(--encre);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.grille tbody td.grille__forfait {
  width: 32%; color: var(--encre-douce); font-size: .86rem;
  text-align: right; white-space: normal;
}
.grille tbody tr.grille__groupe th {
  padding-top: 2.4rem; padding-bottom: .7rem; text-align: left;
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--encre);
  border-bottom: 1px solid var(--filet-or);
}
.grille tbody:first-of-type tr.grille__groupe th { padding-top: .4rem; }
.grille__vide { margin-top: 2rem; color: var(--encre-douce); }
.est-masque { display: none !important; }

/* Sur mobile le tableau se deplie en blocs : chaque ligne devient une fiche, la
   colonne est rappelee par son intitule. Aucun defilement horizontal. */
@media (max-width: 760px) {
  .rail { position: static; padding: .9rem; }
  .rail__filtre { flex: 1 1 100%; }
  .rail__champ { max-width: none; }
  .rail__nav { flex: 1 1 100%; }
  .famille { scroll-margin-top: 5rem; }
  /* caption comprise : restee en display table-caption dans un tableau passe en blocs,
     elle se retrecissait a la largeur de son mot le plus long. */
  .grille, .grille caption, .grille tbody, .grille tr, .grille th, .grille td { display: block; width: auto; }
  .grille thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grille th, .grille td { padding: 0; border: 0; }
  .grille tr[data-tarif] { padding: .95rem 0; border-bottom: 1px solid var(--filet); }
  .grille tr[data-tarif] .grille__nom { font-size: 1.05rem; margin-bottom: .4rem; width: auto; }
  .grille tr[data-tarif] td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; width: auto; text-align: right;
  }
  .grille tr[data-tarif] td + td { margin-top: .25rem; }
  .grille tr[data-tarif] td::before {
    content: attr(data-col); flex: 0 0 auto; font-size: .75rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-douce);
  }
  .grille tbody td.grille__prix { font-size: 1.2rem; }
  .grille tbody tr.grille__groupe th { padding-top: 1.9rem; }
  /* La legende se cassait sur quatre lignes : on rend l'interlettrage a l'espace. */
  .grille caption { letter-spacing: .08em; padding-bottom: .6rem; }
  .grille { margin-top: .8rem; }
  .famille > p { margin-bottom: .4rem; }
}

/* ---------- La grille tarifaire, second passage : plus premium ----------
   Chaque famille est numerotee a l'or par un compteur CSS, sans rien changer au HTML.
   La grille se pose sur une carte de porcelaine bordee d'un filet, et le prix se souligne
   d'un trait d'or au survol de sa ligne. Rien de tout cela n'ajoute une dependance. */
#grille { counter-reset: famille; }
.famille { counter-increment: famille; }
.famille > h3 {
  display: flex; align-items: baseline; gap: .9rem;
}
.famille > h3::before {
  content: counter(famille, decimal-leading-zero);
  flex: 0 0 auto; font-family: var(--sans); font-weight: 400;
  font-size: .75rem; letter-spacing: .18em; color: var(--or);
  transform: translateY(-.45em);
}
.famille > h3::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--filet-or);
  transform: translateY(-.35em);
}
.famille .grille-enveloppe { margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.famille .grille { margin-top: 0; }
.grille tbody tr[data-tarif]:hover { background: var(--ivoire); }
.grille tbody td.grille__prix { position: relative; }
.grille tbody td.grille__prix::after {
  content: ''; position: absolute; right: 0; bottom: .1em; left: 100%;
  height: 1px; background: var(--or); opacity: 0;
  transition: left .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.grille tbody tr[data-tarif]:hover td.grille__prix::after { left: 0; opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .grille tbody td.grille__prix::after { transition: none; }
}
@media (max-width: 760px) {
  .famille .grille-enveloppe { padding: 1.2rem 1rem; }
  .famille > h3::after { display: none; }
  .grille tbody td.grille__prix::after { display: none; }
}

/* ---------- Tenue en petite largeur ----------
   Deux defauts mesures a 320 px de large, corriges ici a la racine.
   1. Un enfant de grille ou de flex garde min-width: auto : un mot long comme
      « Microdermabrasion » impose sa largeur minimale et fait deborder la piste.
   2. Les grands titres n'avaient aucune regle de coupure.
   La cesure est confiee au navigateur, le document etant en francais (lang=fr). */
:where(h1, h2, h3, h4, p, li, td, th, dd, dt, figcaption, blockquote) {
  overflow-wrap: break-word;
}
h1, h2, .acte__titre, .page-tete h1, .famille > h3 { hyphens: auto; }
.page-tete > div, .section > div, .bloc > div,
.categories > *, .besoins > *, .cartes > *, .fiche > *, .liens-suite > *,
.coordonnees > *, .tarifs-apercu > *, .form__grille > * { min-width: 0; }

/* Sous 400 px, les titres geants redescendent d'un cran : a 2,6 rem un mot de
   dix-sept lettres depassait la largeur utile de l'ecran. */
@media (max-width: 400px) {
  .page-tete h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .acte__titre { font-size: clamp(2.2rem, 11vw, 3rem); }
  .famille > h3 { font-size: clamp(1.5rem, 7.5vw, 1.9rem); }
}

/* Trois mises en pleine largeur s'appuient sur 100vw, qui compte la barre de
   defilement : le document depassait alors de 8 a 15 px. On coupe ce debordement
   lateral. « clip » et non « hidden » : hidden creerait un conteneur de defilement
   et les elements colles (entete, rail des tarifs, scenes des actes) cesseraient
   de tenir. Les navigateurs sans « clip » retrouvent simplement l'ancien etat. */
body { overflow-x: clip; }

/* ---------- Tenue sur telephone, mesures a l'appui ----------
   Le logo du hero est une image 16:9. Dans une fenetre etroite et haute, le plein
   cadrage l'etalait sur 1 410 px dont seuls 375 restaient visibles : on n'en voyait
   qu'un fragment. Sur telephone il est donc contenu et lu en entier. Le plein cadrage
   reste la regle sur ordinateur, ou la fenetre est large. */
/* L'encre du logo remplit 98 % du cadre : il n'y a aucune marge a rogner, et sur un
   ecran de 375 px de large le logo entier tient forcement dans une bande de 375 x 212.
   Plutot que de le laisser flotter au milieu d'un grand vide noir, la video prend toute
   la largeur a sa forme naturelle et les boutons se posent juste dessous. */
@media (max-width: 760px) {
  .hero {
    min-height: 0; display: block;
    padding-bottom: clamp(1.4rem, 5vw, 2.4rem);
  }
  .hero__film {
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; object-position: center;
  }
  .hero__voile { display: none; }
  .hero__encart { margin-top: clamp(1.4rem, 5vw, 2.2rem); }
}

/* Le rail des tarifs peut occuper plusieurs rangees quand la place manque ; colle,
   il recouvrait alors le titre vise par une ancre. Il redevient statique, et la
   marge d'ancrage se resserre puisqu'il n'y a plus que l'entete a degager. */
@media (max-width: 980px), (max-height: 620px) {
  .rail { position: static; }
  .famille { scroll-margin-top: 5.5rem; }
}

/* Cibles tactiles : les liens du fil d'Ariane mesuraient 18 px de haut, sous le
   minimum de 24 px. Etiquettes : plusieurs descendaient a 11,2 px. */
@media (max-width: 760px), (max-height: 520px) {
  .fil a { display: inline-block; padding-block: .4rem; }
  /* Les liens de la navigation faisaient 20 px de haut, sans marge interne :
     mesure sur un telephone tenu a plat, ou c'est bien le doigt qui vise. */
  .nav a { display: inline-block; padding-block: .45rem; }
  .rail__lien { padding-block: .62rem; }
  .pied a { display: inline-block; padding-block: .3rem; }
  .surtitre, .page-tete__cat, .rail__compte, .pied__titre, .hero__indice,
  .grille caption, .grille thead th, .form__champ label,
  .nav__bouton, .nav__fermer { font-size: .8rem; }
}

/* Un appareil tactile vise au doigt quelle que soit sa taille : la navigation et le
   fil d'Ariane y gardent une hauteur de cible tenable, meme sur une grande tablette. */
@media (hover: none), (max-width: 900px) {
  .nav a, .fil a, .pied a { display: inline-block; padding-block: .45rem; }
  .page-tete__cat, .surtitre, .pied__titre { font-size: .8rem; }
}

/* Les deux dernieres etiquettes sous 12 px : l'intitule des coordonnees et la
   pastille de comptage d'une categorie. Remontees au plancher de lisibilite. */
@media (max-width: 760px), (max-height: 520px) {
  .coordonnees dt { font-size: .8rem; }
  .categorie__nb { font-size: .78rem; }
}

/* ---------- La carte de France du centre ----------
   Principe repris de la carte des cellules du site M.P.P : un fond par regions,
   la notre en retrait chaud, un marqueur qui respire sur Bordeaux, l'adresse a
   cote, et un rapproche vers la ville au survol (pilote en JS sur le viewBox).
   Le trace est insere dans la page, donc pilotable ici, sans style en ligne. */
.carte {
  /* La figure est posee directement dans <main>, hors d'une section : elle doit
     donc reprendre elle-meme la gouttiere et la largeur de lecture, sinon elle
     deborde a gauche et la legende se coupe au bord de l'ecran. */
  width: min(calc(100% - 3rem), var(--max)); margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.3fr .7fr; align-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
}
.carte__cadre {
  padding: clamp(.8rem, 2vw, 1.4rem);
  background: var(--porcelaine); border: 1px solid var(--filet);
  border-top: 2px solid var(--filet-or); border-radius: 3px;
}
.carte__dessin {
  display: block; width: 100%; height: auto;
  max-height: clamp(300px, 46vh, 460px); overflow: hidden;
}
.carte__region {
  fill: var(--sable); stroke: var(--porcelaine); stroke-width: .9;
  vector-effect: non-scaling-stroke;
  transition: fill .45s ease;
}
.carte__region--notre { fill: var(--or); opacity: .30; }
.carte:hover .carte__region--notre, .carte:focus-within .carte__region--notre { opacity: .46; }
.carte__halo { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.carte__point { fill: var(--encre); stroke: var(--porcelaine); stroke-width: 1.1; }
.carte__etiquette {
  fill: var(--encre); font-family: var(--serif); font-size: 11px; text-anchor: middle;
  paint-order: stroke; stroke: var(--porcelaine); stroke-width: 2.4;
  opacity: 0; transition: opacity .35s ease;
}
.carte:hover .carte__etiquette, .carte:focus-within .carte__etiquette,
.carte__dessin.est-rapprochee .carte__etiquette { opacity: 1; }
@keyframes carte-respire {
  0%, 100% { transform: scale(.5);  opacity: .55; }
  50%      { transform: scale(1.7); opacity: 0; }
}
.carte__halo { animation: carte-respire 3s ease-in-out infinite; }
.carte__info {
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--filet-or); border-radius: 3px;
  background: linear-gradient(160deg, rgba(190,160,106,.10), rgba(255,255,255,0));
}
.carte__info-ville { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--encre); }
.carte__info-adresse { display: block; margin-top: .3rem; color: var(--encre-douce); font-size: .92rem; }
.carte__info-lien { margin-top: 1.1rem; }
.carte__legende { grid-column: 1 / -1; color: var(--encre-douce); font-size: .89rem; max-width: 62ch; }

/* La carte posee dans une cellule de grille (section « Bordeaux » de l'accueil) :
   elle n'a ni bulle d'adresse, ni largeur propre, et le fond sombre de la section
   demande un cadre et un trace plus clairs. */
.carte--case { width: auto; max-width: none; margin: 0; grid-template-columns: 1fr; }
/* Dans une cellule de grille, le plafond de hauteur laissait la carte flotter au
   milieu d'un cadre bien plus grand : on la laisse prendre sa cellule. Et le nom,
   dessine en unites du viewBox, tombait sous 8 px une fois la carte reduite. */
.carte--case .carte__dessin { max-height: none; }
.carte--case .carte__etiquette { font-size: 15px; stroke-width: 3; }
.section--sombre .carte__cadre { background: rgba(255,255,255,.04); border-color: var(--filet-nuit); }
.section--sombre .carte__region { fill: rgba(242,241,238,.09); stroke: rgba(13,14,16,.55); }
.section--sombre .carte__region--notre { fill: var(--or); opacity: .42; }
.section--sombre .carte__point { fill: var(--ivoire); stroke: rgba(13,14,16,.6); }
.section--sombre .carte__etiquette { fill: var(--ivoire); stroke: rgba(13,14,16,.85); }
.section--sombre .carte__legende { color: rgba(242,241,238,.72); }
@media (max-width: 860px) {
  .carte { grid-template-columns: 1fr; }
  /* L'adresse se lit avant la carte : c'est elle qu'on vient chercher. */
  .carte__info { order: 1; }
  .carte__cadre { order: 2; }
  .carte__legende { order: 3; }
  .carte__dessin { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carte__halo { animation: none; opacity: .34; }
  .carte__etiquette { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .carte__halo { animation: none; opacity: .24; } }
@media (max-width: 760px) {
  /* Le nom de la ville restait masque ici, heritage de l'ancienne carte ou il etait
     un <span> pose par-dessus. Il est maintenant un <text> du SVG, et sur telephone
     la carte s'ouvre deja cadree sur la region : c'est la qu'il sert le plus. */
  .carte__legende { font-size: .84rem; }
}

/* ---------- Le rythme d une fiche de soin ----------
   Douze sections au meme gabarit donnaient une page de blog. Quatre traitements se
   succedent desormais : ouverture en grand, deux colonnes, carte sombre, puis miroir.
   Principe repris de mises en page editoriales vues sur 21st (surtitre a gauche, titre
   serif aligne a droite, phrase forte detachee), reecrit ici en natif. */

/* Ouverture : le titre prend de l ampleur et le premier paragraphe se lit comme un chapo. */
.bloc--ouverture { border-top: 2px solid var(--filet-or); }
.bloc--ouverture h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.02; max-width: 20ch;
}
.bloc--ouverture p:first-of-type {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.3vw, 1.8rem); line-height: 1.34;
  color: var(--encre); max-width: 44ch; margin-top: 1.6rem;
}
.bloc--ouverture p:first-of-type + p { margin-top: 1.6rem; }

/* Miroir : le texte passe a gauche, le titre tient a droite. */
.bloc--miroir { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.bloc--miroir h2 { order: 2; text-align: right; margin-left: auto; }
.bloc--miroir > div { order: 1; }

/* Panneau : une section sur quatre se pose sur une porcelaine bordee d un filet d or.
   Le pave noir avait trop de poids sur une page claire ; ce panneau marque le rythme
   sans casser la lumiere du reste. */
.bloc--panneau {
  background: var(--porcelaine); border-radius: 4px;
  padding: clamp(2.4rem, 5vw, 4.2rem) clamp(1.4rem, 4vw, 3.2rem);
  border-top: 2px solid var(--filet-or);
}
.bloc + .bloc--panneau { margin-top: clamp(2rem, 4vw, 3rem); }
.bloc--panneau + .bloc { border-top: 0; }
.bloc--panneau h2 { color: var(--encre); }
.bloc--panneau h2::before {
  content: ''; display: block; width: 2.4rem; height: 1px;
  background: var(--or); margin-bottom: 1.1rem;
}

/* Bandeau de chiffres : la mesure avant le texte. */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--filet-or); border-bottom: 1px solid var(--filet);
}
/* Les valeurs de la fiche sont des phrases courtes, pas des nombres : « 5 min (levre) a
   60 min (jambes entieres) ». Un bandeau de grands chiffres les casserait. C est donc une
   bande de reperes : l intitule a l or au-dessus, la valeur en serif en dessous. */
.chiffre {
  display: flex; flex-direction: column;
  padding-left: clamp(.8rem, 1.6vw, 1.2rem); border-left: 1px solid var(--filet-or);
}
.chiffre__valeur {
  font-family: var(--serif); font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.3;
  color: var(--encre); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.chiffre__libelle {
  order: -1; margin-bottom: .5rem; font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--or);
}

/* Foire aux questions en accordeon natif. */
.faq { border-top: 1px solid var(--filet); margin-top: 2rem; }
.faq__item { border-bottom: 1px solid var(--filet); }
.faq__item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem;
  padding-block: 1.15rem; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.25;
  color: var(--encre); transition: color .3s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover, .faq__item summary:focus-visible { color: var(--or); }
.faq__item summary::after {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px; margin-top: .35em;
  background:
    linear-gradient(var(--or), var(--or)) center / 100% 1px no-repeat,
    linear-gradient(var(--or), var(--or)) center / 1px 100% no-repeat;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item > p { padding-bottom: 1.3rem; max-width: 62ch; color: var(--encre-douce); }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }

@media (max-width: 860px) {
  .bloc--miroir { grid-template-columns: 1fr; }
  .bloc--miroir h2 { order: 0; text-align: left; margin-left: 0; }
  .bloc--miroir > div { order: 1; }
}

/* ---------- Colonne centree des deux traitements en pleine largeur ----------
   L ouverture et la carte sombre n ont qu une colonne : le texte restait colle a gauche
   d un bloc de 1 360 px et la moitie droite restait vide. Chaque enfant partage desormais
   la meme colonne centree, donc le meme bord gauche, avec de l air des deux cotes. Le
   texte lui-meme reste aligne a gauche : on centre la colonne, pas les lignes. */
.bloc--ouverture > *, .bloc--panneau > * {
  width: min(100%, 44rem); max-width: none; margin-inline: auto;
}
.bloc--ouverture > h2, .bloc--panneau > h2 { max-width: none; }
.bloc--ouverture > p:first-of-type { max-width: none; }

/* Le titre en miroir garde son alignement a droite, c est le parti pris editorial,
   mais il retrouve une mesure tenable au lieu de filer sur toute la colonne. */
.bloc--miroir h2 { max-width: 14ch; }

@media (max-width: 860px) {
  .bloc--ouverture > *, .bloc--panneau > * { width: 100%; }
}

/* ---------- Sequences des actes sur telephone ----------
   La sequence dessinee image par image saccade des que le doigt fait defiler, meme
   lancee toute seule. Sur telephone et sur ecran court, la scene garde donc son image
   fixe : rien ne s'anime, rien ne se telecharge, et le cadre ne tressaute plus. */
@media (max-width: 700px), (max-height: 520px) {
  .acte__canvas { display: none; }
  .acte__collant.est-prete .acte__repli { opacity: 1; }
  .acte__barre { display: none; }
  /* Le plan se joue comme une vraie video, decodee par le materiel. L'image fixe
     reste derriere : elle sert d'affiche tant que la video n'a pas sa premiere image,
     et de secours si la lecture automatique est refusee. */
  .acte__collant .acte__video { display: block; z-index: 1; }
  .acte__collant .acte__repli { z-index: 0; }
}

/* ---------- Tarifs : un jeu de contraste, tout a plat ----------
   Aucune ombre, aucun arrondi, aucune carte. Le contraste vient des valeurs et de la
   typographie : bandeau d'entete a l'encre sur texte ivoire, bande de groupe sur sable,
   corps sur ivoire, et le prix en serif comme unique point d'appui. */
.grille { border-collapse: collapse; }
.grille th, .grille td { padding-inline: clamp(.5rem, 1.4vw, .9rem); }
.grille thead th {
  background: var(--encre); color: var(--or-tres-clair);
  padding-block: .9rem; border-bottom: 0;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
}
.grille tbody tr.grille__groupe th {
  background: var(--sable); color: var(--encre);
  padding-block: .85rem; border-bottom: 0;
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.grille tbody tr.grille__groupe th::before {
  content: ''; display: inline-block; width: 1.5rem; height: 1px;
  background: var(--or); vertical-align: middle; margin-right: .8rem;
}
.grille tbody tr[data-tarif] { background: var(--ivoire); }
.grille tbody tr[data-tarif]:nth-of-type(even) { background: var(--porcelaine); }
.grille tbody tr[data-tarif]:hover { background: var(--or-tres-clair); }
.grille tbody th.grille__nom { font-size: 1rem; }
.grille tbody td.grille__prix { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--encre); }
.grille tbody td.grille__prix::after { display: none; }

/* Le titre de famille prend de l'ampleur et se detache par un filet pleine largeur. */
.famille { border-top: 1px solid var(--encre); padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.famille + .famille { margin-top: clamp(2.4rem, 5vw, 4.5rem); }
.famille > h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.famille > h3::after { background: transparent; }

@media (max-width: 760px) {
  .grille th, .grille td { padding-inline: 0; }
  .grille tbody tr[data-tarif],
  .grille tbody tr[data-tarif]:nth-of-type(even) { background: transparent; }
  .grille tbody tr.grille__groupe th { padding-inline: .8rem; }
}

/* La video d'un acte n'existe que sur telephone ; sur ordinateur c'est le canvas
   pilote au defilement qui tient la scene. */
.acte__video {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}

/* ---------- Vignette des besoins ----------
   Chaque ligne montre le soin en situation. Carre net, sans arrondi ni ombre, pour
   rester dans le parti pris a plat du reste du site. */
.besoins a { align-items: center; }
.besoin__vue {
  flex: 0 0 auto; width: clamp(3.2rem, 7vw, 4.2rem); aspect-ratio: 1;
  height: auto; object-fit: cover; margin-right: .2rem;
  filter: saturate(.92); transition: filter .4s ease;
}
.besoins a:hover .besoin__vue, .besoins a:focus-visible .besoin__vue { filter: saturate(1.05); }
.besoins .besoin__nom { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) { .besoin__vue { transition: none; } }

/* ---------- En-tete a fond d'image ----------
   Meme mise en page que l'en-tete filmee : l'image prend toute la largeur, le texte se
   lit par-dessus. Le voile est plus dense que sur les films : ces images de cabinet sont
   claires, un voile leger laisserait le titre illisible. Il s'assombrit vers la gauche,
   la ou le texte se place, et laisse respirer la droite de l'image. */
.page-tete__fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.page-tete--fond .page-tete__voile {
  background:
    linear-gradient(to right, rgba(13, 14, 16, .90) 0%, rgba(13, 14, 16, .68) 42%,
                    rgba(13, 14, 16, .34) 72%, rgba(13, 14, 16, .22) 100%),
    linear-gradient(rgba(13, 14, 16, .40), rgba(13, 14, 16, .22) 40%, rgba(13, 14, 16, .78));
}
@media (max-width: 860px) {
  /* Sur telephone le texte occupe toute la largeur : le voile devient uniforme. */
  .page-tete--fond .page-tete__voile {
    background: linear-gradient(rgba(13, 14, 16, .74), rgba(13, 14, 16, .68) 30%,
                                rgba(13, 14, 16, .92));
  }
}

/* =========================================================================
   Boutique : la vitrine et les fiches produit
   Meme anatomie de carte que Maison Sonia : un filet de sable, un filet d'or
   en retrait de 6 px, la photo en portrait 4/5 posee sur la porcelaine sans
   recadrage, le titre en serif, le prix discret, un bouton pleine largeur.
   Au survol la carte se souleve et son filet passe a l'or ; la photo, elle,
   ne bouge pas. Le paiement se fait sur la boutique Odoo : les boutons
   « Commander » y renvoient.
   ------------------------------------------------------------------------- */
.vitrine__grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.4rem, 2.5vw, 2rem); margin-top: 2.2rem;
}
.produit {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sable);
  transition: border-color .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.produit::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--filet-or); pointer-events: none; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .produit:hover { border-color: var(--or); transform: translateY(-4px); box-shadow: 0 22px 60px rgba(23, 24, 26, .10); }
}
.produit__photo {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  padding: 1.5rem; background: var(--porcelaine); border-bottom: 1px solid var(--sable);
  border-radius: 0; text-decoration: none;
}
.bloc .produit__photo { border-bottom: 1px solid var(--sable); }
.produit__photo { position: relative; }
.produit__photo img { position: absolute; inset: 1.5rem; width: calc(100% - 3rem); height: calc(100% - 3rem); object-fit: contain; mix-blend-mode: multiply; }
.produit__corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.35rem 1.25rem 1.2rem; }
.bloc .produit__corps p { max-width: none; margin-top: 0; }
.produit__cat { font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin: 0 0 .5rem; }
.produit__nom { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; line-height: 1.2; margin: 0; max-width: none; min-height: 3.2rem; }
.bloc .produit__nom a { color: var(--encre); text-decoration: none; border: 0; }
.bloc .produit__nom a:hover, .bloc .produit__nom a:focus-visible { color: var(--or); }
.bloc .produit__prix { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--encre); margin: .6rem 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--filet); }
.bloc .produit__resume {
  font-size: .9rem; line-height: 1.6; color: var(--encre-douce);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.35rem;
}
.produit__actions { margin-top: auto; padding-top: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.produit__actions .bouton { width: 100%; padding: .85rem 1rem; font-size: .8rem; letter-spacing: .12em; }
.bloc .produit__lien { align-self: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); text-decoration: none; border: 0; min-height: 24px; display: inline-flex; align-items: center; }
.bloc .produit__lien:hover, .bloc .produit__lien:focus-visible { color: var(--or); }

/* La fiche : galerie a gauche, collee en haut pendant qu'on lit ; a droite le
   nom, le prix, l'achat. */
.produit-fiche {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: start; padding-block: clamp(2.2rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem);
}
.galerie { position: sticky; top: 6rem; }
.galerie__cadre {
  position: relative; margin: 0; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: var(--porcelaine); border: 1px solid var(--sable);
}
.galerie__cadre::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--filet-or); pointer-events: none; }
.galerie__image { position: absolute; inset: 2rem; width: calc(100% - 4rem); height: calc(100% - 4rem); object-fit: contain; mix-blend-mode: multiply; }
.galerie__vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.galerie__vignette {
  width: 66px; height: 82px; padding: 4px; border: 1px solid var(--sable); background: var(--porcelaine);
  cursor: pointer; transition: border-color .25s ease; font: inherit;
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.galerie__vignette:hover, .galerie__vignette:focus-visible, .galerie__vignette.est-active { border-color: var(--or); }
.produit-fiche h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-top: .6rem; }
.produit-fiche__prix {
  font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--encre);
  margin: 1.2rem 0 1.4rem; padding: 1rem 0 1.2rem; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
.produit-fiche__note { margin-top: 1.2rem; font-size: .85rem; line-height: 1.6; color: var(--encre-douce); max-width: 44ch; }

/* Les blocs de fiche : liste simple, et programme jour par jour. */
.points--simple li { padding: .9rem 0; }
.programme { margin-top: 2rem; }
.programme > li { padding: 1.3rem 0; border-top: 1px solid var(--filet); }
.programme > li:last-child { border-bottom: 1px solid var(--filet); }
.programme h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; line-height: 1.15; margin: 0 0 .7rem; }
.programme ul li { color: var(--encre-douce); padding: .3rem 0; line-height: 1.6; }
.programme ul li::before { content: "—"; color: var(--or); margin-right: .6rem; }

@media (max-width: 900px) {
  .produit-fiche { grid-template-columns: 1fr; }
  .galerie { position: static; }
  .produit-fiche h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
}
@media (max-width: 600px) {
  .vitrine__grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: .9rem; }
  .produit__corps { padding: 1rem .9rem .9rem; }
  .produit__nom { font-size: 1.1rem; min-height: 2.7rem; }
  .produit__photo { padding: 1rem; }
  .produit__photo img { inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .produit, .galerie__vignette { transition: none; }
  .produit:hover { transform: none; }
}

/* ---------- Les planches d'une fiche : le livret, page par page ----------
   Les visuels des formations portent leur propre texte. En vignette il ne se
   lit pas ; ici chaque page est posee en grand sur la porcelaine, deux par
   deux comme un livre ouvert (ou trois par trois pour les modules), avec un
   filet d'or en retrait et sa legende en serif dessous. Sur telephone, une
   page a la fois, pleine largeur. */
.bloc--livret h2 { max-width: none; }
.planches { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.4rem; }
.planches--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.planches--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.planches--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.planche {
  position: relative; margin: 0; padding: clamp(.9rem, 2vw, 1.4rem);
  background: var(--porcelaine); border: 1px solid var(--sable);
}
.planche::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--filet-or); pointer-events: none; }
.planche img { display: block; width: 100%; height: auto; }
.planche figcaption {
  margin-top: 1rem; text-align: center; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--encre);
}
.produit-fiche__prix-detail { margin: -.9rem 0 1.4rem; font-size: .88rem; letter-spacing: .04em; color: var(--encre-douce); }
@media (max-width: 600px) {
  .planches { gap: 1.2rem; }
  .planches--2, .planches--3 { grid-template-columns: 1fr; }
  .planches--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Le bouton qui porte la planche, et la visionneuse qu'il ouvre. */
.planche__ouvrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.planche__ouvrir:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.visionneuse { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(13, 14, 16, .94); }
.visionneuse::backdrop { background: rgba(13, 14, 16, .94); }
.visionneuse__image { display: block; width: auto; height: auto; max-width: 100vw; max-height: 100dvh; margin: 0 auto; object-fit: contain; }
.visionneuse__fermer {
  position: fixed; top: 1rem; right: 1rem; z-index: 2; min-height: 44px; padding: .6rem 1.2rem;
  border: 1px solid var(--filet-nuit); border-radius: 999px; background: var(--nuit); color: var(--ivoire);
  font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.visionneuse__fermer:hover, .visionneuse__fermer:focus-visible { border-color: var(--or-clair); color: var(--or-clair); }
html.visionneuse-ouverte { overflow: hidden; }
@media (min-width: 900px) { .visionneuse__image { max-width: min(96vw, 1040px); } }
.visionneuse[open] { display: grid; place-items: center; }

/* ---------- Le tour d'un appareil, sur fond clair ----------
   Meme moteur que les actes de l'accueil (piste, canvas, legendes qui se
   relaient), mais la machine est un rendu sur fond blanc : on la pose sur la
   porcelaine du site plutot que de la detourer sur la nuit, et le texte passe
   a l'encre. Les voiles qui assurent le contraste deviennent clairs. */
.acte--clair { background: var(--porcelaine); }
.acte--clair .acte__collant::after { height: 44%; background: linear-gradient(transparent, rgba(250, 250, 248, .88)); }
.acte--clair .acte__collant::before { background: var(--porcelaine); }
.acte--clair .acte__num { color: var(--or); }
.acte--clair .acte__titre { color: var(--encre); }
.acte--clair .acte__sous { color: var(--encre-douce); }
.acte--clair .acte__legendes li { color: var(--or); }
.acte--clair .acte__legendes { height: 2.2em; }
.acte--clair .acte__legendes li { font-size: clamp(.95rem, 1.4vw, 1.2rem); letter-spacing: .12em; text-transform: none; font-family: var(--serif); color: var(--encre); }
.acte--tour .acte__titre { font-size: clamp(2.6rem, 7vw, 6.5rem); }

/* ---------- L'objet qui tourne devant un mot geant ----------
   La sequence est detouree : la machine flotte sur la porcelaine, et derriere
   elle un seul mot, immense, en sable, qui ne dispute rien a l'objet. Le mot
   recule doucement pendant le travelling ; le titre lisible reste celui du HUD. */
.acte--objet .acte__mot {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  margin: 0; padding-bottom: 6vh; pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 300; font-size: clamp(6rem, 26vw, 24rem);
  line-height: .8; letter-spacing: -.045em; color: var(--sable); white-space: nowrap;
  translate: 0 calc(var(--trav, 0) * -5vh);
}
.acte--objet .acte__canvas, .acte--objet .acte__repli { background: transparent; object-fit: contain; }
.acte--objet .acte__collant::after { height: 34%; background: linear-gradient(transparent, rgba(250, 250, 248, .85)); }
@media (max-width: 900px) {
  .acte--objet .acte__mot { font-size: clamp(4.5rem, 30vw, 9rem); padding-bottom: 12vh; }
  .acte--objet .acte__repli { object-position: 50% 42%; }
}
@media (prefers-reduced-motion: reduce) { .acte--objet .acte__mot { translate: none; } }



/* =========================================================================
   Scene continue (fiche EOS Ice Pro)
   La machine — images detourees sur un canvas transparent — tient l'ecran,
   collee. Tout le contenu de la fiche monte devant elle avec le defilement,
   un ecran par bloc. Deux colonnes de meme geometrie : l'une sous le canvas
   (les titres seuls), l'autre dessus (tout). main.js bascule l'opacite d'un
   titre de la colonne devant vers la colonne derriere quand il franchit le
   milieu de l'ecran. Les paragraphes et listes se posent a cote de la
   machine sur grand ecran, sur un voile leger au telephone.
   ------------------------------------------------------------------------- */
.scene { position: relative; background: var(--porcelaine); }
.scene__colle { position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 2; pointer-events: none; }
.scene__canvas, .scene__repli {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
}
.scene__canvas { opacity: 0; transition: opacity .4s ease; }
.scene__colle.est-prete .scene__canvas { opacity: 1; }
.scene__colle.est-prete .scene__repli { opacity: 0; }
.scene__flux {
  position: relative; z-index: 3; margin-top: -100vh; margin-top: -100dvh;
  width: min(calc(100% - 3rem), var(--max)); margin-inline: auto;
}
.scene__flux--derriere {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; margin-top: 0; pointer-events: none;
}
.scene__bloc { height: 100vh; height: 100dvh; display: grid; align-content: center; box-sizing: border-box; padding-block: 5rem 3rem; }
.scene__bloc--titre { justify-items: center; text-align: center; }
.scene__titre {
  margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1; letter-spacing: .02em; color: var(--encre); will-change: opacity;
}
.scene__sous {
  margin: .9rem 0 0; font-family: var(--sans); font-size: clamp(.85rem, 1.1vw, .95rem);
  letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce);
}
.scene__flux--derriere .scene__sous { visibility: hidden; }
/* La machine tient le tiers central de l'ecran (36 a 64 % de la largeur) : les colonnes
   de texte s'arretent avant, et reprennent apres. */
.scene__bloc--gauche { justify-items: start; text-align: left; padding-right: 66%; }
.scene__bloc--droite { justify-items: start; text-align: left; padding-left: 66%; }
.scene__bloc--appel { justify-items: center; text-align: center; }
.scene__bloc--appel .scene__texte { max-width: 52ch; }
.scene__h2 { margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.9vw, 2.8rem); line-height: 1.1; }
.scene__bloc--info h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-top: .6rem; }
/* Le nom en deux niveaux : la gamme en petites capitales, le modele en grand. */
.scene__nom { margin: .4rem 0 0; }
.scene__marque { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: .5rem; }
.scene__modele { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .95; letter-spacing: -.02em; color: var(--encre); }
@media (max-width: 700px) { .scene__modele { font-size: clamp(2.4rem, 12vw, 3.4rem); } }
.scene__texte { margin: 0 0 1rem; max-width: 36ch; font-size: 1.1rem; line-height: 1.65; color: var(--encre-douce); }
.scene__liste { margin: 0; max-width: 38ch; font-size: 1.05rem; }
.scene__liste li { padding: .8rem 0; border-top: 1px solid var(--filet); color: var(--encre-douce); line-height: 1.5; }
.scene__liste li:last-child { border-bottom: 1px solid var(--filet); }
.scene__bloc .page-tete__actions { margin-top: 1.4rem; }
.scene__bloc .produit-fiche__prix { margin: 1rem 0 1rem; padding: .8rem 0 1rem; }
.scene__bloc .produit-fiche__note { max-width: 36ch; font-size: .9rem; }
@media (max-width: 900px) {
  /* Sur telephone la machine couvre presque toute la largeur : le texte passe
     dessus. Le contenu de chaque bloc est dans un panneau ivoire cadre d'un
     filet, qui epouse le texte ; les titres ont le meme panneau, plus leger.
     Les titres restent devant (le passage derriere n'a de sens que quand la
     machine ne cache pas tout). */
  .scene__bloc { align-content: end; padding-block: 4.5rem 1.5rem; }
  .scene__bloc--gauche, .scene__bloc--droite { padding-left: 0; padding-right: 0; justify-items: stretch; text-align: left; }
  .scene__panneau {
    background: rgba(250, 250, 248, .96); border: 1px solid var(--sable);
    padding: 1.3rem 1.1rem 1.2rem; margin-inline: -.4rem;
  }
  .scene__panneau--titre { background: rgba(250, 250, 248, .9); text-align: center; padding: 1rem 1rem 1.1rem; }
  .scene__bloc--titre { align-content: center; justify-items: stretch; }
  .scene__texte, .scene__liste li, .scene__sous { color: var(--encre); }
  .scene__bloc .page-tete__actions { justify-content: flex-start; }
  .scene__liste { text-align: left; }
}
}
@media (max-width: 700px) {
  .scene__titre { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .scene__bloc { padding-block: 4.5rem 2rem; }
}
/* Mouvement reduit, ou pas de JavaScript : plus de colle ; l'affiche en tete, le contenu a la suite. */
.scene.est-statique .scene__colle, html:not(.js) .scene__colle { position: static; height: auto; }
.scene.est-statique .scene__repli, html:not(.js) .scene__repli { position: static; height: auto; aspect-ratio: 16 / 9; opacity: 1; }
.scene.est-statique .scene__canvas, html:not(.js) .scene__canvas,
.scene.est-statique .scene__flux--derriere, html:not(.js) .scene__flux--derriere { display: none; }
.scene.est-statique .scene__flux--devant, html:not(.js) .scene__flux--devant { margin-top: 0; }
.scene.est-statique .scene__bloc, html:not(.js) .scene__bloc { height: auto; padding-block: 2rem; }
.scene.est-statique .scene__titre, html:not(.js) .scene__titre { opacity: 1 !important; }

/* ---------- Scene « studio » : la video telle quelle, en plein cadre ----------
   Decision d'Elrick (19/09) pour le laser 4K : pas de detourage. Le studio devient
   alors le fond de toute la scene, bord a bord (couvrir), pour qu'aucun rectangle
   ne se voie sur l'ivoire ; un voile ivoire fond le haut et le bas du cadre dans
   la page. Rien ne passe derriere la machine : les titres restent devant, en encre,
   et les blocs de contenu se posent sur un panneau ivoire, comme au telephone. */
/* L'image court sous l'en-tete, bord a bord (pas de bande claire) ; c'est main.js qui,
   en dessinant, decale la machine sous l'en-tete et prolonge le fond du studio au-dessus. */
.scene--studio .scene__canvas, .scene--studio .scene__repli { object-fit: cover; object-position: 50% 100%; }
.scene--studio .scene__colle::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18vh; z-index: 1; pointer-events: none;
}
.scene--studio .scene__colle::after { bottom: 0; background: linear-gradient(rgba(250, 250, 248, 0), var(--porcelaine)); }
/* Lettres creusees au survol : sur la machine blanche, le trait fin d'or ne se voyait plus. */
.scene--studio .lettre.est-creuse { -webkit-text-stroke-width: .045em; }
.scene--studio .scene__sous, .scene--studio .scene__texte, .scene--studio .scene__liste li { color: var(--encre); }
.scene--studio .scene__bloc--contenu .scene__panneau, .scene--studio .scene__bloc--info .scene__panneau,
.scene--studio .scene__bloc--appel .scene__panneau {
  background: rgba(250, 250, 248, .94); border: 1px solid var(--sable); padding: 2rem 2.2rem 2.1rem;
  box-shadow: 0 24px 60px -30px rgba(23, 24, 26, .25);
}
/* La machine est plus large qu'en detoure (l'image couvre l'ecran) : les panneaux vont
   chercher les bords de l'ecran, pas ceux de la colonne de lecture. */
.scene--studio .scene__flux { width: calc(100% - 6rem); max-width: none; }
.scene--studio .scene__bloc--gauche { padding-right: 68%; }
.scene--studio .scene__bloc--droite { padding-left: 68%; }
@media (max-width: 900px) {
  .scene--studio .scene__flux { width: min(calc(100% - 3rem), var(--max)); }
  .scene--studio .scene__bloc--gauche, .scene--studio .scene__bloc--droite { padding-left: 0; padding-right: 0; }
  .scene--studio .scene__bloc--contenu .scene__panneau, .scene--studio .scene__bloc--info .scene__panneau,
  .scene--studio .scene__bloc--appel .scene__panneau { padding: 1.3rem 1.1rem 1.2rem; }
}
.scene--studio.est-statique .scene__repli, html:not(.js) .scene--studio .scene__repli { aspect-ratio: 16 / 9; object-fit: contain; }

/* --- Articles de conseil (fiches article-*.json, agent editorial) -------------------
   Ce qui n'existait pas encore : une signature sous l'en-tete, des h3 dans la colonne
   de texte, et les cartes de la liste conseils.html. Tout le reste reprend .bloc. */
.article__signature { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding-bottom: 1.2rem; color: var(--encre-douce); font-size: .82rem; letter-spacing: .06em; }
.article__signature .a-completer--inline { padding: .1rem .5rem; font-size: .78rem; }
.bloc .article__h3 { margin-top: 2.2rem; font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--encre); max-width: 30ch; }
.bloc .article__h3 + p { margin-top: .9rem; }
.articles { margin-top: 2rem; border-top: 1px solid var(--filet); }
.article-carte { padding-block: 1.6rem; border-bottom: 1px solid var(--filet); }
.article-carte__date { display: block; color: var(--or); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.article-carte h3 { margin-top: .5rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); max-width: 34ch; }
.article-carte h3 a { color: var(--encre); text-decoration: none; border: 0 !important; }
.article-carte h3 a:hover, .article-carte h3 a:focus-visible { color: var(--or); }
.article-carte p { max-width: 64ch; margin-top: .6rem; color: var(--encre-douce); }

/* Finition septembre 2026 : le film reste intact, le sujet du site se lit juste apres. */
.accueil-intro { width: min(calc(100% - 3rem), 58rem); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem); text-align: center; }
.accueil-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; margin: .7rem auto 1.2rem; max-width: 23ch; text-wrap: balance; }
.accueil-intro h1 em { color: var(--or); font-weight: 400; }
.accueil-intro > p:last-child { max-width: 58ch; margin-inline: auto; color: var(--encre-douce); }

/* Academy : une boutique de parcours, sans simuler de salle ou de formatrice reelle. */
.academy, .academy-detail { --bronze: #ae8962; --fond-academy: #171b19; }
.academy-hero { background: #171b19; color: #f3f1eb; position: relative; min-height: 680px; overflow: clip; isolation: isolate; }
.academy-hero__visuel { position: absolute; inset: 0; z-index: -1; }
.academy-hero__visuel img { width: 100%; height: 100%; object-fit: cover; }
.academy-hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.academy-pause { position: absolute; bottom: 1rem; left: max(1.5rem,calc((100vw - 1280px)/2)); background: transparent; border: 0; color: #f3f1eb; font: .75rem var(--sans); text-decoration: underline; text-underline-offset: .3em; min-height: 44px; cursor: pointer; }
.academy-pause[hidden] { display: none; }
.academy-pause:focus-visible { outline: 2px solid #ddbb96; outline-offset: 3px; }
.academy-hero__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#171b19,rgba(23,27,25,.2) 70%), linear-gradient(0deg,rgba(23,27,25,.65),transparent 55%); }
.academy-hero__texte { width: min(calc(100% - 6rem), 1280px); margin: auto; padding: clamp(3rem,6vw,6rem) 0 5rem; }
.academy-signature { letter-spacing: .15em; font-size: .8rem; text-transform: uppercase; color: #ded2bf; margin-bottom: 2rem; }
.academy-hero h1 { font-family: var(--serif); font-size: clamp(3.2rem,6.5vw,6.8rem); line-height: .98; font-weight: 400; max-width: 11ch; margin: 0; }
.academy-hero .lettre.est-creuse, .academy-contact .lettre.est-creuse { -webkit-text-stroke-color: #ddbb96; }
.academy-hero h1 em { font-weight: 400; color: #ddbb96; }
.academy-hero h1 { hyphens: none; max-width: 15ch; }
.academy-hero__sujet { display: block; font: 400 .95rem var(--sans); letter-spacing: .04em; margin-bottom: 1.5rem; }
.academy-hero__phrases { display: grid; max-width: 16ch; min-height: 3.05em; font-family: var(--serif); font-size: clamp(3.2rem,6.5vw,6.8rem); line-height: .98; }
.academy-hero__phrase,.academy-hero .academy-hero__phrase { grid-area: 1/1; margin: 0; font: inherit; line-height: inherit; letter-spacing: -.025em; opacity: 0; visibility: hidden; transition: opacity .35s ease,visibility .35s ease; pointer-events: none; }
.academy-hero__phrase.est-active { opacity: 1; visibility: visible; pointer-events: auto; }
.academy-hero__phrase em { color: #ddbb96; font-weight: 400; }
.academy-hero__phrase .mot { display: inline-block; white-space: nowrap; }
.academy-hero__phrase.est-active .lettre { display: inline-block; animation: academy-ecriture .54s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--lettre-index,0) * 38ms); }
@keyframes academy-ecriture { from { opacity: 0; transform: translateY(.25em); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .academy-hero__phrase.est-active .lettre { animation: none; } .academy-hero__phrase { transition: none; } }
.academy-hero__intro { max-width: 39ch; margin-top: 2rem; line-height: 1.65; font-size: 1.12rem; }
.academy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; margin-top: 1.7rem; }
.academy-actions > a:not(.bouton) { color: inherit; text-underline-offset: .35em; }
.academy-hero__legende { position: absolute; bottom: 1rem; right: 2rem; font-size: .7rem; color: #f3f1eb; }
.academy-nav { display: flex; justify-content: center; gap: clamp(1rem,5vw,5rem); padding: 1.5rem; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.academy-nav a { color: var(--encre); text-underline-offset: .4em; }
.academy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem,4.5vw,4.6rem); line-height: 1.06; }
.academy h2 em { color: #785c40; }
.academy-catalogue, .academy-comparatif, .academy-faq, .academy-programme { width: min(calc(100% - 6rem),1200px); margin-inline: auto; padding-block: clamp(3.5rem,7vw,7rem); scroll-margin-top: 100px; }
.academy-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 4rem; margin-bottom: 3rem; }
.academy-intro > p { max-width: 45ch; color: var(--encre-douce); line-height: 1.8; }
.academy-offre { min-width: 0; }
.academy-offre__image { display: block; position: relative; overflow: hidden; background: #dedad3; }
.academy-offre__image img { width: 100%; height: 370px; object-fit: cover; transition: transform 800ms cubic-bezier(.16,1,.3,1); }
.academy-offre__image:hover img { transform: scale(1.035); }
.academy-offre__image span { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; font-size: .68rem; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.6)); }
.academy-offre__texte { padding-block: 1.8rem; }
.academy-format { color: #755c42; font-size: .84rem; margin-bottom: .8rem; }
.academy-offre h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem,3vw,3.2rem); margin-bottom: 1rem; }
.academy-offre h3 a { color: inherit; text-decoration: none; }
.academy-offre__texte > p:not(.academy-format) { color: var(--encre-douce); max-width: 49ch; }
.academy-offre--vedette { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); background: #e9e5dd; }
.academy-offre--vedette .academy-offre__image img { height: 100%; min-height: 590px; }
.academy-offre--vedette .academy-offre__texte { align-self: center; padding-right: 3rem; padding-block: 3rem; }
.academy-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 4rem; }
.academy-faits { margin: 1.7rem 0; font-size: .92rem; }
.academy-faits > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--filet); }
.academy-faits dt { color: var(--encre-douce); }
.academy-faits dd { margin: 0; }
.academy-prix { font-size: 2.2rem; font-family: var(--serif); color: var(--encre); }
.academy-prix small { font: .7rem var(--sans); }
.academy-offre__achat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.academy-offre__achat .bouton { font-size: .72rem; }
.academy-methode { padding: clamp(4rem,8vw,8rem) max(1.5rem,calc((100vw - 1200px)/2)); background: #171b19; color: #f3f1eb; }
.academy-methode > p { color: #d5b797; margin-bottom: 2rem; }
.academy-methode h2 { max-width: 22ch; }
.academy-methode > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; color: #d5d8d3; line-height: 1.8; }
.academy-comparatif h2 { max-width: 20ch; margin-bottom: 2rem; }
.academy-table { overflow-x: auto; position: relative; }
.academy-table table { width: 100%; min-width: 670px; border-collapse: collapse; font-size: .95rem; }
.academy-table caption { text-align: left; padding-bottom: 1.2rem; color: var(--encre-douce); }
.academy-table th, .academy-table td { padding: 1.3rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); width: 25%; }
.academy-table thead { background: #e9e5dd; }
.academy-table a { color: var(--encre); text-underline-offset: .3em; }
.academy-faq { padding-top: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.academy-faq details, .academy-programme details { border-bottom: 1px solid var(--filet); padding: 1.2rem 0; }
.academy-faq summary, .academy-programme summary { cursor: pointer; font-size: 1.08rem; padding: .5rem 0; }
.academy-faq details p { margin: 1rem 0; line-height: 1.75; }
.academy-contact { text-align: center; padding: 5rem 1.5rem; background: #29312c; color: #f3f1eb; }
.academy-contact p { max-width: 55ch; margin: 1.5rem auto 2rem; }
.academy-contact .academy-actions { justify-content: center; }
.academy-detail { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,5rem); width: min(calc(100% - 6rem),1280px); margin: 2rem auto 4rem; }
.academy-detail__image { position: relative; }
.academy-detail__image img { width: 100%; height: 100%; max-height: 740px; object-fit: cover; }
.academy-detail__image p { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; color: white; font-size: .7rem; background: #171b19; }
.academy-detail__info { align-self: center; padding-block: 2rem; }
.academy-retour { display: inline-block; margin-bottom: 2rem; color: var(--encre-douce); }
.academy-detail h2 { font-family: var(--serif); font-weight: 400; line-height: 1.03; font-size: clamp(2.6rem,4.6vw,4.8rem); margin: .8rem 0 1.5rem; }
.academy-detail__intro { line-height: 1.75; }
.academy-note { font-size: .85rem; color: var(--encre-douce); margin-top: 1.5rem; }
.academy-programme { border-top: 1px solid var(--filet); display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.academy-programme > div:first-child > p { margin-top: 1.2rem; }
.academy-programme__blocs > section { margin-bottom: 2.5rem; }
.academy-programme h3 { font: 400 1.9rem var(--serif); margin-bottom: 1.2rem; }
.academy-programme li { margin: .8rem 0 .8rem 1.2rem; list-style: disc; }
.academy-inscription { position: sticky; bottom: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem max(1.5rem,calc((100vw - 1200px)/2)); background: #f3f1eb; border-top: 1px solid var(--filet); }
.academy-inscription span { display: flex; flex-wrap: wrap; gap: 1.5rem; }
/* Un film par formation, texte dans le flux et image collante au defilement. */
.academy-story { position: relative; background: #171b19; color: #fffaf3; isolation: isolate; }
.academy-story__scene { position: sticky; top: 0; height: 100svh; min-height: 440px; margin-bottom: -100svh; overflow: hidden; z-index: -1; }
.academy-story__scene > img, .academy-story__scene > canvas { position: absolute; right: 0; top: 0; width: 68%; height: 100%; object-fit: cover; object-position: center; }
.academy-story__scene > canvas { opacity: 0; }
.academy-story.est-chargee .academy-story__scene > canvas { opacity: 1; }
.academy-story__voile { position: absolute; inset: 0; background: linear-gradient(90deg,#171b19 34%,rgba(23,27,25,.86) 46%,rgba(23,27,25,.18) 80%),linear-gradient(0deg,rgba(23,27,25,.75),transparent 30%); }
.academy-story__texte { width: min(calc(100% - 6rem),1280px); margin-inline: auto; }
.academy-story__chapitre { min-height: 100svh; padding: 6rem 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(100%,650px); }
.academy-story h1, .academy-story h2 { font: 400 clamp(3rem,5.8vw,6rem)/1.04 var(--serif); margin: 0 0 1.5rem; }
.academy-story__chapitre > p { max-width: 44ch; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; }
.academy-story__chapitre .academy-format { color: #ddbb96; font-size: .8rem; }
.academy-story__chapitre .academy-story__indice { font-size: .78rem; margin: 2rem 0 0; color: #e5d9c8; }
.academy-story a:not(.bouton) { color: #fffaf3; text-underline-offset: .35em; }
.academy-story .lettre.est-creuse { -webkit-text-stroke-color: #ddbb96; }
.academy-story__legende { position: absolute; bottom: 1rem; right: 1.5rem; left: 1.5rem; text-align: right; color: #f3f1eb; font-size: .65rem; }
@media (max-width: 800px) {
  .academy-story__scene > img, .academy-story__scene > canvas { width: 100%; }
  .academy-story__voile { background: linear-gradient(90deg,rgba(23,27,25,.9),rgba(23,27,25,.70)),linear-gradient(0deg,#171b19,transparent 40%); }
  .academy-story__texte { width: calc(100% - 3rem); }
  .academy-story__chapitre { padding: 4rem 0; }
  .academy-story h1, .academy-story h2 { font-size: clamp(2.65rem,10vw,4rem); }
  .academy-story__chapitre > p { font-size: 1rem; }
  .academy-story__legende { text-align: left; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .academy-story__chapitre { min-height: auto; padding-block: 3rem; }
  .academy-story__indice { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .academy-hero h1 { animation: academy-entree 1000ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes academy-entree { from { opacity: .3; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @supports (animation-timeline: view()) {
    .academy-offre__image img { animation: academy-approche linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes academy-approche { from { transform: scale(1.06); } to { transform: scale(1); } }
  }
}
@media (prefers-reduced-motion: reduce) { .academy-offre__image img { transition: none; } }
@media (max-width: 800px) {
  .academy-hero { min-height: 720px; }
  .academy-hero__texte { width: calc(100% - 3rem); padding: 3rem 0 6rem; }
  .academy-hero__visuel { inset: 0; }
  .academy-hero__visuel::after { background: linear-gradient(90deg,rgba(23,27,25,.92),rgba(23,27,25,.42)),linear-gradient(0deg,#171b19,transparent); }
  .academy-hero h1 { font-size: clamp(3rem,9vw,5rem); }
  .academy-hero__phrases { font-size: clamp(3rem,9vw,5rem); min-height: 3.1em; }
  .academy-hero__legende { left: 1.5rem; right: 1.5rem; bottom: .65rem; }
  .academy-pause { bottom: 2.4rem; }
  .academy-catalogue,.academy-comparatif,.academy-faq,.academy-programme,.academy-detail { width: calc(100% - 3rem); }
  .academy-intro,.academy-faq,.academy-programme { grid-template-columns: 1fr; gap: 1.8rem; }
  .academy-offre--vedette,.academy-detail { grid-template-columns: 1fr; gap: 0; }
  .academy-offre--vedette .academy-offre__image img { height: 360px; min-height: 0; }
  .academy-offre--vedette .academy-offre__texte { padding: 1.5rem; }
  .academy-duo { gap: 2rem; }
  .academy-offre__image img { height: 290px; }
  .academy-methode > div { gap: 2rem; }
  .academy-detail__image img { max-height: 380px; }
  .academy-inscription span { gap: .3rem; font-size: .8rem; flex-direction: column; }
  .academy-inscription .bouton { font-size: .72rem; padding-inline: 1.1rem; }
}
@media (max-width: 540px) {
  .academy-duo,.academy-methode > div { grid-template-columns: 1fr; }
  .academy-nav { font-size: .82rem; gap: .9rem; }
  .academy-nav a { min-height: 34px; display: inline-flex; align-items: center; }
  .academy-offre__achat { align-items: flex-start; }
  .academy-hero__intro { font-size: 1rem; }
}
.nav__bouton, .nav__fermer { border: 0; background: none; font-family: var(--sans); }
.nav__bouton:focus-visible, .nav__fermer:focus-visible { outline: 2px solid var(--or); outline-offset: 5px; }
@media (max-width: 760px) {
  .nav__bouton, .nav__fermer { min-height: 44px; }
  html:not(.js) .nav__bouton, html:not(.js) .nav__fermer { display: none; }
  html:not(.js) .entete__int { flex-wrap: wrap; }
  html:not(.js) .nav { display: flex; position: static; padding: 1rem 0; width: 100%; }
  .hero { min-height: 480px; min-height: clamp(440px, 76svh, 640px); }
  .hero__film { top: 12%; bottom: auto; height: auto; aspect-ratio: 16 / 9; object-fit: contain; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
  .hero__actions { gap: .4rem; }
  .hero__actions .bouton { min-height: 44px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero { background-image: none; }
  .hero__film { display: block; }
}

/* ---------- Page de formation « libre » (30/09/2026) ----------
   Quand le livre 3D est pret (classe posee par livres-cartes.js), la page devient claire et libre :
   plus d'image fixe ni de bandeau sombre, le livre flotte derriere tout le contenu et les textes
   s'ecrivent par-dessus. Sans 3D (ou si le modele ne charge pas), la page garde ses images. */
canvas.livre-fond { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.page-livre canvas.livre-fond { opacity: 1; }
.page-livre main { position: relative; z-index: 1; }
.page-livre .academy-story { background: transparent; color: var(--encre, #171b19); }
.page-livre .academy-story__scene { display: none; }
.page-livre .academy-story__chapitre .academy-format { color: #8a6a45; }
.page-livre .academy-story__chapitre .academy-story__indice { color: #6f6352; }
.page-livre .academy-story a:not(.bouton) { color: inherit; }
.page-livre .academy-story .lettre.est-creuse { -webkit-text-stroke-color: #8a6a45; }
.page-livre .academy-detail { grid-template-columns: 1fr; }
.page-livre .academy-detail__image { display: none; }
.page-livre .academy-detail__info { max-width: 650px; }
.page-livre .academy-story .bouton--clair { background: #171b19; border-color: #171b19; color: #fffaf3; }
.page-livre main :is(h1, h2, h3, p, li, dt, dd) { text-shadow: 0 0 14px rgba(242,241,238,.95), 0 0 3px rgba(242,241,238,.9); }
/* Telephone et tablette : l'opacite du livre est reglee par livres-cartes.js (visible en haut, puis effacee). */

/* Lisibilite des pages de formation (retour d'Elrick du 30/09) : petits textes plus grands,
   encre plus foncee, graisse normale au lieu de la graisse fine du reste du site. */
.academy-format { font-size: .95rem; color: #5e4527; font-weight: 500; }
.academy-faits { font-size: 1.02rem; }
.academy-faits dt { color: #3a342b; font-weight: 400; }
.academy-faits dd { color: #14110d; font-weight: 400; }
.academy-note, .academy-retour { font-size: .98rem; color: #3a342b; font-weight: 400; }
.academy-prix small { font-size: .85rem; }
.academy-offre__texte > p:not(.academy-format) { color: #2a251f; font-weight: 400; }
.page-livre main :is(p, li, dd, summary) { color: #14110d; font-weight: 400; }
.page-livre .academy-story__chapitre > p, .page-livre .academy-detail__intro { font-size: 1.2rem; }
.page-livre .academy-story__chapitre .academy-story__indice { font-size: .95rem; color: #3a342b; }
/* Bloc « Pret a franchir la prochaine etape ? » : fond vert fonce, texte creme, sans halo. */
.academy-contact h2, .page-livre .academy-contact :is(h2, p) { color: #f6efe2; text-shadow: none; }
.academy-contact p { color: #eee6d6; font-weight: 400; font-size: 1.1rem; }
/* Cartes de formation : pendant le chargement du livre 3D, pas d'image a plat (classe posee par
   main.js) ; une carte dont le livre echoue (.sans-livre) retrouve son image. */
.livres-attendus .academy-offre__image:not(.sans-livre) { background: transparent !important; box-shadow: none !important; }
.livres-attendus .academy-offre__image:not(.sans-livre) :is(img, span) { opacity: 0 !important; }

/* Pages de formation, grand ecran (retour d'Elrick du 30/09 : « pas trop sur les textes ») :
   le livre a sa propre colonne a droite (40 % de l'ecran) et les textes restent a gauche,
   en une seule colonne ; ils ne passent plus jamais sous le livre. Les trois pages en profitent. */
@media (min-width: 1024px) {
  .page-livre canvas.livre-fond { left: auto; right: 0; width: 40vw; }
  .page-livre main > :is(.academy-story, .academy-detail),
  .page-livre main > .academy > .academy-programme { width: auto !important; max-width: 760px; margin-left: max(3rem, 5vw) !important; margin-right: 42vw !important; }
  .page-livre .academy-story__texte { width: auto; margin: 0; }
  .page-livre .academy-story__chapitre { width: 100%; }
  .page-livre .academy-programme { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-livre .academy-detail { margin-block: 2rem 4rem; }
}
/* Textes un peu plus grands sur les pages de formation. */
.page-livre main :is(p, li, dd, dt, summary) { font-size: 1.12rem; line-height: 1.75; }
.page-livre .academy-story__chapitre > p, .page-livre .academy-detail__intro { font-size: 1.28rem; }
.page-livre .academy-programme h3 { font-size: 2.1rem; }
.page-livre .academy-programme summary { font-size: 1.2rem; }

/* ---------- Le programme dans le livre (livre-programme.js, 01/10/2026) ----------
   Grand ecran : le livre ouvert au centre, le programme ecrit dans ses pages, qui tournent au
   defilement. La section d'origine reste lisible par les lecteurs d'ecran (.lp-source). */
.lp { position: relative; z-index: 1; }
.lp__scene { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 2400px; }
.lp__livre { --pw: min(460px, 36vw); --ph: min(74vh, calc(var(--pw) * 1.32)); position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform: translateX(var(--decale, -25%)); transform-style: preserve-3d; }
.lp__gauche, .lp__droite { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; }
.lp__gauche { left: 0; }
.lp__droite { left: 50%; }
.lp__feuille { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.lp__recto, .lp__verso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp__verso { transform: rotateY(180deg); }
.lp__page { box-sizing: border-box; height: 100%; padding: 3.2rem 2.8rem 3.4rem; background: #f6f1e6; color: #1d1a16; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 10, .45); }
.lp__droite .lp__page, .lp__recto { background-image: linear-gradient(90deg, rgba(60, 45, 25, .16), rgba(60, 45, 25, 0) 9%); }
.lp__gauche .lp__page, .lp__verso { background-image: linear-gradient(270deg, rgba(60, 45, 25, .16), rgba(60, 45, 25, 0) 9%); }
.lp__couverture { background: #1f3a2c center / cover no-repeat; padding: 0; box-shadow: 0 30px 60px -25px rgba(20, 16, 10, .6), inset 6px 0 10px rgba(0, 0, 0, .35); }
.lp__corps { height: 100%; overflow: hidden; }
.lp__mesure { position: absolute; inset: 0; visibility: hidden; }
.lp__page h3 { font: 400 1.75rem/1.15 var(--serif); margin: 0 0 1rem; color: #14110d; }
.lp__page h4 { font: 500 .82rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b4f2e; margin: 1.4rem 0 .6rem; }
.lp__page p { font: 400 1.02rem/1.62 var(--sans); margin: 0 0 .8rem; }
.lp__page .lp__puce { position: relative; padding-left: 1.2rem; }
.lp__page .lp__puce::before { content: "—"; position: absolute; left: 0; color: #ae8962; }
.lp__num { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; font: 400 .85rem var(--serif); color: #6f6352; }
.lp__page--titre { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lp__page--titre h2 { font: 400 clamp(2.2rem, 3.2vw, 3rem)/1.08 var(--serif); margin: .8rem 0 1.2rem; color: #14110d; }
.lp__sur { font: 500 .8rem var(--sans) !important; letter-spacing: .16em; text-transform: uppercase; color: #6b4f2e; }
.lp__chapeau { color: #3a342b; }
.lp__filet { display: block; width: 90px; height: 1px; background: #ae8962; margin: 1rem auto 0; }
.lp-source { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important; }
/* Le livre-programme n'apparait qu'au moment du relais avec le livre 3D (meme couverture, meme place). */
.lp:not(.lp--pret) .lp__livre { visibility: hidden; }

/* ---------- Responsive (01/10/2026) ---------- */
@media (max-width: 1023px) {
  /* Le livre des cartes ne deborde plus de l'ecran (il depassait de 10 px a droite, 48 sur tablette). */
  .academy-offre__image canvas.livre-3d, .academy-offre__image canvas.livre-scene { left: -4% !important; width: 108% !important; }
  main { overflow-x: clip; }
}
@media (max-width: 1023px) {
  /* Cinq soins filmes, telephone : le bandeau geant « Nihel's Skintech » monte dans le tiers haut et
     le bas de la video s'assombrit, pour que le texte de l'etape 01 ne se melange plus au logo. */
  .rf-hr .hr__bandeau--verre { top: 24svh !important; }
  .rf-hr .hr__voile { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 28%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.88)) !important; }
}

/* Lisibilite de l'accueil (01/10/2026) : descriptions des trois temps et des besoins plus grandes et plus foncees. */
html body .rf-tm .tm__desc { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; line-height: 1.6; }
html body .rf-besoin__texte { font-weight: 400; color: #2e2f33; font-size: 1.05rem; }
html body .tn__formation-texte { font-weight: 400; color: #2e2f33; font-size: .9rem; }
html body .tn__formation-lien { font-size: .8rem; }
@media (max-width: 1023px) { html body .tn__formation-texte { font-size: 1rem; -webkit-line-clamp: 4; } html body .tn__formation-num { font-size: .8rem; } }
/* Tarifs (01/10/2026) : etiquette « Le plus demande » lisible (gris sur noir avant), textes des cartes plus grands et plus fonces. */
html body .tarif-carte__marque { color: #f3e7cf; }
html body .tarif-carte__accroche { font-size: 1rem; color: #2e2f33; font-weight: 400; }
html body .tarif-carte__prix .unite { font-size: .9rem; color: #3a342b; }
html body .tarif-carte__points li { font-size: .98rem; color: #2e2f33; font-weight: 400; }
/* Coordonnees sur fond sombre : intitules lisibles (brun sur noir, trop pale avant). */
html body .section--sombre .coordonnees dt { color: #cdb48c; font-size: .85rem; }

/* Livre-programme, une page a la fois (telephone et tablette, 01/10/2026). */
.lp--une-page .lp__livre { --pw: min(86vw, 440px); --ph: min(74svh, calc(var(--pw) * 1.4)); width: var(--pw); transform: none; }
.lp--une-page .lp__droite { left: 0; width: 100%; }
.lp--une-page .lp__gauche { display: none; }
.lp--une-page .lp__page { padding: 2.2rem 1.6rem 2.6rem; }
.lp--une-page .lp__page h3 { font-size: 1.5rem; }
.lp--une-page .lp__page p { font-size: 1rem; line-height: 1.58; }
.lp--une-page .lp__page--titre h2 { font-size: 2.3rem; }
@media (max-width: 1023px) {
  /* Cinq soins filmes, telephone anime : le texte des etapes prend toute la largeur (bride a 58 vw
     par la regle ordinateur, les lignes etaient coupees). */
  html body .rf-hr .hr__etapes--epingle .hr__etape-texte { left: 20px; right: 20px; bottom: 9svh; max-width: none; }
}

/* Logo qui s'ouvre, telephone (01/10/2026, retour d'Elrick) : les textes passent a cote de la petite
   image, en deux colonnes comme le titre (moitie gauche a gauche, moitie droite a droite), et non
   plus dessous. La petite image retrecit un peu pour laisser la place aux colonnes. */
@media (max-width: 767px) {
  html body .ouv.rf-ouv { --ouv-thumb-w: 104px; --ouv-thumb-h: 139px; --ouv-copy-size: 12.5px; }
  html body .rf-ouv .ouv-copy { left: 0; width: 100%; transform: none; text-align: left; color: #2e2f33; }
  html body .rf-ouv .ouv-copy .ouv-line { display: flex; justify-content: space-between; align-items: flex-start;
    width: 100%; white-space: normal; margin: 0 0 .9em; text-align: left; }
  /* Comme a l'ordinateur, les deux moities ne s'ecartent qu'au passage de l'image puis se rejoignent :
     ouverture.js calcule l'ecart (--left-shift / --right-shift) ; ici il retrecit les colonnes au lieu
     de les deplacer (deplacees, elles sortiraient de l'ecran). Loin de l'image : la ligne reunie au centre. */
  html body .rf-ouv .ouv-copy .ouv-part { display: block; transform: none !important; line-height: 1.45; box-sizing: border-box; }
  html body .rf-ouv .ouv-copy .ouv-part--left { width: calc(50% - var(--left-shift)); padding: 0 .2em 0 13vw; text-align: right; }
  html body .rf-ouv .ouv-copy .ouv-part--right { width: calc(50% - var(--right-shift)); margin-left: calc(var(--left-shift) + var(--right-shift)); padding: 0 13vw 0 .2em; text-align: left; }
  html body .rf-ouv .ouv-copy .ouv-line { justify-content: flex-start; }
}