/* ============================================================
   STRASSTOI — feuille de style principale
   Charte : noir profond, blanc cassé, et le rose poudré de la
   marque comme unique accent (voir la section 23).
   Aucune ombre portée, aucun angle arrondi décoratif.
   ============================================================ */

/* --- 0. Les polices ---------------------------------------
   Deux polices, deux rôles, jamais mélangés :
   - Playfair Display, cousine du Didot et presque la lettre du
     STRASS.TOI des sacs : le logo, les titres, les prix ;
   - Jost, dans la famille de Futura : tout le reste.
   C'est le principe de Vogue (Didot + une linéale géométrique).
   Les deux sont hébergées ici, sans passer par Google.        */

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-italique.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-italique.woff2") format("woff2");
  font-weight: 400 500; font-style: italic; font-display: swap;
}

/* --- 1. Jetons ------------------------------------------- */

:root {
  --noir:      #0A0A0A;
  --encre:     #131313;
  --blanc:     #F6F5F3;
  /* Relevés pour la lisibilité : à .34, les petites mentions
     grises ne se lisaient plus sur le noir. */
  --brume:     rgba(246, 245, 243, 0.70);
  --sourdine:  rgba(246, 245, 243, 0.52);
  --filet:     rgba(246, 245, 243, 0.13);
  --filet-fort:rgba(246, 245, 243, 0.26);

  /* Inversé, pour les sections claires */
  --encre-inv:  rgba(10, 10, 10, 0.60);
  --filet-inv:  rgba(10, 10, 10, 0.14);

  /* Le rose de Strasstoi : celui du script sur les sacs,
     approfondi pour tenir sur le noir. Poudré, jamais bonbon. */
  --rose:       #D9A7BD;
  --rose-clair: #F2DDE6;
  --prune:      #6E4A62;   /* les lettres du logo, pour les survols */

  /* L'éclat : un reflet de strass rosé. Il habille déjà les
     petits losanges des listes, les jauges et les filets. */
  --eclat: linear-gradient(105deg, #9C6F83 0%, #F2DDE6 32%, #CF9DB3 58%, #FFF5F9 78%, #A57A8C 100%);

  --serif: "Playfair Display", "Didot", Georgia, serif;
  --sans:  "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --etroit: 100%;

  --marge:   clamp(1.25rem, 5vw, 5.5rem);
  --rythme:  clamp(5rem, 11vh, 9rem);

  --lent:   1.1s cubic-bezier(.22, .61, .36, 1);
  --moyen:  .55s cubic-bezier(.22, .61, .36, 1);
  --vif:    .28s cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Base --------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain fin sur toute la page : c'est ce qui donne l'aspect
   pellicule et rattrape les photos prises au téléphone. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* <picture> entoure désormais les images fixes (WebP + repli
   JPEG). Sans cette règle, il resterait en ligne et l'image ne
   remplirait plus son cadre. */
picture { display: block; width: 100%; height: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
}

h1 { font-size: clamp(2.9rem, 9.5vw, 8.5rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 4.4rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; max-width: 62ch; }

.contenu {
  padding-inline: var(--marge);
  max-width: 1560px;
  margin-inline: auto;
}

.section { padding-block: var(--rythme); }

/* L'en-tête est fixe : sans cette marge, les ancres passent dessous. */
section[id] { scroll-margin-top: 84px; }

/* --- 3. Éclat (l'unique accent) --------------------------- */

.eclat {
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.filet-eclat {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  opacity: .5;
}

/* --- 4. Boutons ------------------------------------------ */

.btn {
  --fond: var(--blanc);
  --texte: var(--noir);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.2rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--fond);
  overflow: hidden;
  transition: color var(--vif), border-color var(--vif);
}

.btn span { position: relative; z-index: 2; }

/* Remplissage par le bas au survol, pas de changement brutal. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noir);
  transform: translateY(101%);
  transition: transform var(--moyen);
  z-index: 1;
}
.btn:hover { color: var(--blanc); }
.btn:hover::before { transform: translateY(0); }

.btn--fantome {
  --fond: transparent;
  --texte: var(--blanc);
  border-color: var(--filet-fort);
}
.btn--fantome::before { background: var(--blanc); }
.btn--fantome:hover { color: var(--noir); border-color: var(--blanc); }

.btn--sombre {
  --fond: var(--noir);
  --texte: var(--blanc);
}
.btn--sombre::before { background: var(--blanc); }
.btn--sombre:hover { color: var(--noir); }

/* --- 5. En-tête ------------------------------------------ */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--marge);
  transition: background var(--moyen), padding var(--moyen), border-color var(--moyen);
  border-bottom: 1px solid transparent;
}

.entete.est-collee {
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--filet);
  padding-block: .9rem;
}

.marque {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2.25rem; }

.nav a {
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brume);
  transition: color var(--vif);
  position: relative;
  padding-block: .3rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--moyen);
}
.nav a:hover { color: var(--blanc); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav .btn { padding: .8rem 1.5rem; font-size: .72rem; }

.burger { display: none; }

/* --- 6. Hero ---------------------------------------------
   Le titre ne passe plus devant les visages : il descend en bas
   à gauche, sur les vestes noires, et un fondu par le bas lui
   garantit un fond sombre. Le haut de la photo reste vivant.  */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  justify-items: start;
  text-align: left;
  overflow: hidden;
  padding: 7rem var(--marge) clamp(2.5rem, 6vh, 4.5rem);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(.92);
}

/* La photo de groupe : sur un écran étroit, on garde Camillia
   au centre plutôt que le milieu exact de l'image. */
.hero__media img { object-position: 60% 30%; }

/* Voile : léger en haut, dense en bas et à gauche, là où est
   le texte. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.86) 24%, rgba(10,10,10,.5) 46%, rgba(10,10,10,0) 68%),
    linear-gradient(90deg, rgba(10,10,10,.7) 0%, rgba(10,10,10,.35) 35%, rgba(10,10,10,0) 60%),
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 18%);
}

.hero__inner { max-width: 60rem; }

.hero__sur {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 245, 243, .86);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-size: clamp(2.7rem, 7vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
}

.hero__texte {
  max-width: 48ch;
  color: rgba(246, 245, 243, .8);
  font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
  margin-bottom: 2.2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: flex-start;
}

/* « Découvrir » : en bas à droite, lisible, sans gêner les
   boutons. */
.hero__defilement {
  position: absolute;
  right: var(--marge);
  bottom: clamp(2.5rem, 6vh, 4.5rem);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 245, 243, .86);
}
.hero__defilement i {
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(246, 245, 243, .35);
  position: relative;
  overflow: hidden;
  order: 2;
}

@media (max-width: 860px) {
  .hero__defilement { display: none; }
  .hero__actions .btn { flex: 1 1 14rem; }
}

/* Le premier écran s'affiche tel quel, sans séquence
   d'apparition ni reflet balayé : la photo et le titre
   suffisent. Les classes .ouverture et .reflet restent dans le
   HTML mais ne font plus rien. */

/* --- 7. Bandeau chiffres --------------------------------- */

.chiffres {
  border-block: 1px solid var(--filet);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.chiffre {
  padding: 2.6rem 1.5rem;
  text-align: center;
  border-left: 1px solid var(--filet);
}
.chiffre:first-child { border-left: 0; }

.chiffre b {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: .6rem;
}

.chiffre span {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
}

/* --- 8. Le partage (le morceau interactif) ---------------- */

.partage {
  display: flex;
  min-height: 78svh;
  border-bottom: 1px solid var(--filet);
}

.voie {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  transition: flex-grow var(--lent), background-color var(--moyen), color var(--moyen);
  cursor: pointer;
  isolation: isolate;
}

.voie--clair { background: var(--blanc); color: var(--noir); }
.voie--sombre { background: var(--noir); color: var(--blanc); border-left: 1px solid var(--filet); }

/* Le survol agrandit une moitié et rétrécit l'autre :
   la page réagit à l'intention, elle ne décore pas. */
.partage:hover .voie { flex-grow: .78; }
.partage .voie:hover { flex-grow: 1.32; }

.voie__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--lent);
}
.voie__fond img { width: 100%; height: 100%; object-fit: cover; }
.voie:hover .voie__fond { opacity: .30; }
.voie--sombre:hover .voie__fond { opacity: .40; }

.voie__num {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: auto;
}

.voie h2 { margin-bottom: .9rem; }

.voie p {
  max-width: 34ch;
  opacity: .68;
  margin-bottom: 1.8rem;
}

.voie__lien {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.voie__lien i {
  display: block;
  width: 34px; height: 1px;
  background: currentColor;
  transition: width var(--moyen);
}
.voie:hover .voie__lien i { width: 62px; }

/* --- 9. Titres de section -------------------------------- */

.tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--filet);
}

.tete p { color: var(--brume); margin: 0; max-width: 48ch; }

/* --- 10. Formations -------------------------------------- */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border: 1px solid var(--filet);
}

.offre {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3vw, 3.2rem);
  border-left: 1px solid var(--filet);
  transition: background var(--moyen);
  position: relative;
}
.offre:first-child { border-left: 0; }
.offre:hover { background: var(--encre); }

.offre--vedette { background: var(--encre); }
.offre--vedette::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}

.offre__nom {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.7rem;
  margin-bottom: .5rem;
}

.offre__promesse {
  color: var(--brume);
  font-size: .95rem;
  min-height: 3.2em;
  margin-bottom: 1.8rem;
}

.offre__prix {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 1;
  margin-bottom: .35rem;
}
.offre__prix del {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--sourdine);
  text-decoration-thickness: 1px;
}

.offre__mensualite {
  font-size: .8rem;
  color: var(--sourdine);
  margin-bottom: 1.6rem;
}

.offre__meta {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sourdine);
  padding-block: 1.1rem;
  border-block: 1px solid var(--filet);
  margin-bottom: 1.6rem;
}

.offre ul { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.offre li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .75rem;
  font-size: .93rem;
  color: var(--brume);
}
.offre li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 7px; height: 7px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform: rotate(45deg);
}

.offre .btn { margin-top: auto; width: 100%; }

/* --- 11. Simulateur -------------------------------------- */

.simulateur {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  border: 1px solid var(--filet);
  padding: clamp(2rem, 4.5vw, 4.2rem);
  background: var(--encre);
}

.sim__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: 1rem;
}
.sim__label b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--blanc);
  letter-spacing: 0;
  text-transform: none;
}

.sim__champ { margin-bottom: 2.4rem; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: var(--filet-fort);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blanc);
  border: 4px solid var(--noir);
  box-shadow: 0 0 0 1px var(--filet-fort);
  transition: transform var(--vif);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--blanc);
  border: 4px solid var(--noir);
  box-shadow: 0 0 0 1px var(--filet-fort);
}

.sim__resultats {
  border-left: 1px solid var(--filet);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.sim__ligne { margin-bottom: 2rem; }
.sim__ligne:last-child { margin-bottom: 0; }
.sim__ligne span {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: .5rem;
}
.sim__ligne b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1;
  display: block;
}

.mention {
  font-size: .72rem;
  color: var(--sourdine);
  margin-top: 2rem;
  max-width: 58ch;
}

/* --- 12. Galerie ----------------------------------------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
}

.cliche {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--encre);
}
.cliche img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cliche figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.2rem 1.1rem;
  font-size: .78rem;
  color: var(--blanc);
  background: linear-gradient(to top, rgba(10,10,10,.9), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--moyen), transform var(--moyen);
}
.cliche:hover figcaption { opacity: 1; transform: none; }

.vide {
  grid-column: 1 / -1;
  padding: 5rem 2rem;
  text-align: center;
  color: var(--sourdine);
}

/* --- 13. Portrait ---------------------------------------- */

.portrait {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.portrait__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--encre);
  border: 1px solid var(--filet);
}
.portrait__image img { width: 100%; height: 100%; object-fit: cover; }

.portrait blockquote {
  margin: 0 0 2rem;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.28;
  font-style: italic;
}

.signature {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--brume);
}

/* --- 14. Cadre légal ------------------------------------- */

.legal {
  background: var(--blanc);
  color: var(--noir);
}
.legal h2 { color: var(--noir); }
.legal .tete { border-bottom-color: var(--filet-inv); }
.legal .tete p { color: var(--encre-inv); }

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.colonne h3 { margin-bottom: 1rem; }
.colonne p { color: var(--encre-inv); }
.colonne ul { list-style: none; padding: 0; margin: 0; }
.colonne li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--filet-inv);
  color: var(--encre-inv);
  font-size: .95rem;
}

/* --- 15. FAQ --------------------------------------------- */

.faq { border-top: 1px solid var(--filet); }

.question {
  border-bottom: 1px solid var(--filet);
}

.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.9rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  transition: color var(--vif);
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--brume); }

.question summary i {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
}
.question summary i::before,
.question summary i::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--moyen), opacity var(--moyen);
}
.question summary i::before { inset: 7px 0 auto 0; height: 1px; }
.question summary i::after  { inset: 0 7px auto 7px; width: 1px; height: 15px; }
.question[open] summary i::after { transform: rotate(90deg); opacity: 0; }

.question__reponse {
  padding-bottom: 1.9rem;
  color: var(--brume);
  max-width: 68ch;
}

/* --- 16. Capture email ----------------------------------- */

.capture {
  border-block: 1px solid var(--filet);
  background: var(--encre);
  text-align: center;
}

.capture .contenu { max-width: 780px; }
.capture h2 { margin-bottom: 1.2rem; }
.capture p { margin-inline: auto; color: var(--brume); margin-bottom: 2.5rem; }

.formulaire {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.formulaire input[type="email"] {
  flex: 1 1 320px;
  padding: 1.05rem 1.4rem;
  background: transparent;
  border: 1px solid var(--filet-fort);
  color: var(--blanc);
  font: inherit;
  font-size: .95rem;
  transition: border-color var(--vif);
}
.formulaire input::placeholder { color: var(--sourdine); }
.formulaire input:focus { outline: none; border-color: var(--blanc); }

.pot-de-miel { position: absolute; left: -9999px; }

/* --- 17. Pied -------------------------------------------- */

/* Un filet qui s'éclaire au centre, et un strass posé dessus :
   la fin de page s'annonce sans trait gris. */
.pied {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) 2.2rem;
  font-size: .88rem;
  overflow-x: clip;
}
.pied::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--marge); right: var(--marge);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,167,189,.42) 50%, transparent);
}

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.pied__accroche {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--blanc);
  margin: 0 0 1.3rem;
}
.pied__accroche em { color: var(--rose-clair); }
.pied__infos { color: var(--sourdine); line-height: 1.7; margin: 0 0 1.8rem; }

.pied__rdv {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .45rem;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blanc);
  border-bottom: 1px solid var(--filet-fort);
  transition: border-color var(--moyen), gap var(--moyen);
}
.pied__rdv i { font-style: normal; transition: transform var(--moyen); }
.pied__rdv:hover { border-bottom-color: var(--rose); gap: 1rem; }

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-top: .6rem;
}

.pied h4 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin: 0 0 1.3rem;
}

.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .7rem; }
.pied ul.pied__reseaux { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }

/* Le survol : un fil rose qui se tire de gauche à droite. */
.pied a { color: var(--brume); transition: color var(--vif); }
.pied__colonnes a,
.pied__legal a,
.pied__remonter {
  background: linear-gradient(var(--rose), var(--rose)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color var(--vif), background-size var(--moyen);
}
.pied__colonnes a:hover,
.pied__legal a:hover,
.pied__remonter:hover { color: var(--blanc); background-size: 100% 1px; }
.pied a i { font-style: normal; font-size: .8em; opacity: .6; }

/* Le nom, sur toute la largeur. Remplissage qui s'efface vers
   le bas, et un reflet rosé qui suit la souris (--lumiere,
   comme le point du logo). */
.pied__marque {
  padding-block: 0 1.8rem;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  border-top: 1px solid var(--filet);
  padding-top: clamp(1.8rem, 4vw, 3rem);
}
.pied__nom {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13.4vw;              /* repli sans JS, ajusté ensuite au pixel */
  /* Hauteur de ligne pleine : le texte n'est peint que dans sa
     boîte (background-clip), une ligne plus serrée couperait le
     haut des lettres. On resserre avec les marges à la place. */
  line-height: 1;
  margin-block: -.06em -.14em;
  letter-spacing: -.012em;
  margin-left: -.035em;           /* le S touche le bord, optiquement */
  background:
    linear-gradient(105deg,
      transparent calc(var(--lumiere, 50%) - 14%),
      rgba(242, 221, 230, .22) var(--lumiere, 50%),
      transparent calc(var(--lumiere, 50%) + 14%)),
    linear-gradient(180deg, rgba(246, 245, 243, .2) 0%, rgba(246, 245, 243, .07) 62%, rgba(246, 245, 243, .015) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pied__nom .marque__point {
  opacity: .8;
  /* Le point déborde de sa chasse : un peu de marge intérieure
     pour que son reflet le couvre en entier. */
  padding-inline: .04em;
  margin-inline: -.04em;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  color: var(--sourdine);
  font-size: .76rem;
  letter-spacing: .02em;
}
.pied__bas > span:first-child { margin-right: auto; }
.pied__legal { display: inline-flex; gap: 1.6rem; }
.pied__legal a, .pied__remonter { color: var(--sourdine); }
.pied__remonter { letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
  .pied__colonnes > div:last-child { grid-column: 1 / -1; }
  .pied ul.pied__reseaux { display: flex; gap: 1.8rem; }
  .pied__bas { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* --- 18. Barre mobile ------------------------------------ */

.barre-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  border-top: 1px solid var(--filet);
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(100%);
  transition: transform var(--moyen);
}
.barre-mobile.est-visible { transform: none; }
.barre-mobile a {
  flex: 1;
  padding: 1.05rem .5rem;
  text-align: center;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.barre-mobile a + a { border-left: 1px solid var(--filet); }
.barre-mobile a.principal { background: var(--blanc); color: var(--noir); font-weight: 500; }

/* --- 19. Révélation au défilement ------------------------ */

/* Retirée : les sections sont là dès qu'on arrive dessus. La
   classe reste dans le HTML, elle ne fait plus rien. */

/* --- 20. Adaptatif --------------------------------------- */

@media (max-width: 1000px) {
  .tete { grid-template-columns: 1fr; align-items: start; }
  .simulateur { grid-template-columns: 1fr; }
  .sim__resultats { border-left: 0; border-top: 1px solid var(--filet); padding-left: 0; padding-top: 2.5rem; }
  .portrait { grid-template-columns: 1fr; }
  .portrait__image { max-width: 460px; }
  .offres { grid-template-columns: 1fr; }
  .offre { border-left: 0; border-top: 1px solid var(--filet); }
  .offre:first-child { border-top: 0; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger {
    display: block;
    width: 30px; height: 14px;
    position: relative;
  }
  .burger::before, .burger::after {
    content: "";
    position: absolute;
    left: 0; width: 100%; height: 1px;
    background: var(--blanc);
    transition: transform var(--moyen);
  }
  .burger::before { top: 0; }
  .burger::after  { bottom: 0; }

  .nav.est-ouverte {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    background: var(--noir);
    z-index: 99;
  }
  .nav.est-ouverte a { font-size: 1.1rem; }

  .partage { flex-direction: column; }
  .voie { min-height: 58svh; }
  .voie--sombre { border-left: 0; border-top: 1px solid var(--filet); }
  .partage:hover .voie, .partage .voie:hover { flex-grow: 1; }
  .voie__fond { opacity: .26; }

  .chiffre { border-left: 0; border-top: 1px solid var(--filet); }
  .chiffre:first-child { border-top: 0; }

  .barre-mobile { display: flex; }
  .pied { padding-bottom: 6rem; }
}

/* --- 21. Accessibilité ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 22. Ajouts communs aux pages de vente ---------------- */

/* Lien d'évitement : le premier élément focalisable de la page. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .9rem 1.4rem;
  background: var(--blanc);
  color: var(--noir);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.evitement:focus { left: var(--marge); top: .5rem; }

/* Réservé aux lecteurs d'écran. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Trait de progression de lecture. Un cheveu, rien de plus :
   il indique où l'on en est sans jamais attirer l'œil. */
.progression {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 101;
  height: 1px;
  pointer-events: none;
}
.progression i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform-origin: left;
}

/* Le bouton des pages qui vendent : plus haut, plus large. */
.btn--large {
  padding: 1.35rem 3rem;
  font-size: .84rem;
  letter-spacing: .13em;
}

/* Pied de page réduit : sur une page à un seul bouton, aucune
   colonne de liens ne doit proposer une sortie. Le nom suit
   directement le filet. */
.pied--reduit .pied__marque { border-top: 0; padding-top: 0; }

/* Une seule action dans la barre du téléphone : elle prend
   toute la largeur. */
.barre-mobile a:only-child { flex: 1; padding-block: 1.15rem; }


/* --- 23. Le rose de Camillia ------------------------------
   Deux niveaux, pour qu'il reste rare et toujours à sa place.

   La formation, en rose franc :
     - l'italique du titre qui dit « apprendre à poser »
     - les boutons qui mènent à une formation ou la réservent
     - la porte « Je veux me former »

   La marque, en touches fines, sur tout le site :
     - le point du logo, comme sur les sacs : STRASS.TOI
     - le filet de la citation et la signature de Camillia
     - les soulignés au survol, la FAQ, le trait de lecture
     - les losanges des listes, jauges et filets, via --eclat

   Les photos sont en couleur : leur fond lilas et leurs strass
   répondent au rose. Le site autour reste noir et blanc, c'est
   ce cadre qui fait premium. La page Prestations (côté
   cliente) garde ses boutons blancs.
   ----------------------------------------------------------- */

::selection { background: var(--rose); color: var(--noir); }

/* Le logo */
.marque__point { color: var(--rose); }

/* La signature */
.signature { color: var(--rose); }

/* Le titre : l'italique qui dit « apprendre » prend le rose. */
.hero h1 em,
.page-formation .vente-hero h1 em,
.page-formations .vente-hero h1 em { color: var(--rose); }

/* Les boutons de la formation */
.btn--rose,
.page-formation .btn--large:not(.btn--fantome),
.page-formations .btn--large:not(.btn--fantome):not([data-quiz-envoi]),
.page-formation .variante .btn,
.page-formations .offre--vedette .btn,
.session__action .btn:not(.btn--fantome) {
  --fond: var(--rose);
  --texte: var(--noir);
}
.btn--rose::before,
.page-formation .btn--large:not(.btn--fantome)::before,
.page-formations .btn--large:not(.btn--fantome):not([data-quiz-envoi])::before,
.page-formation .variante .btn::before,
.page-formations .offre--vedette .btn::before,
.session__action .btn:not(.btn--fantome)::before {
  background: var(--prune);
}
.btn--rose:hover,
.page-formation .btn--large:not(.btn--fantome):hover,
.page-formations .btn--large:not(.btn--fantome):not([data-quiz-envoi]):hover,
.page-formation .variante .btn:hover,
.page-formations .offre--vedette .btn:hover,
.session__action .btn:not(.btn--fantome):hover {
  color: var(--blanc);
}

/* La porte « Je veux me former » */
.voie--sombre .voie__lien,
.voie--sombre .voie__num { color: var(--rose); }
.voie--sombre .voie__num { opacity: .85; }

/* La barre du téléphone */
.barre-mobile a.rose { color: var(--rose); }
.page-formation .barre-mobile a.principal,
.page-formations .barre-mobile a.principal { background: var(--rose); color: var(--noir); }

/* --- 24. Les portes avec leur photo -----------------------
   Les deux photos étaient invisibles tant qu'on ne survolait
   pas la porte, donc jamais vues sur téléphone. Elles sont
   maintenant là d'emblée, en couleur, et s'effacent vers le
   bas pour laisser le texte parfaitement lisible.
   ----------------------------------------------------------- */
.voie__fond { transform: none; }
.voie__fond::after {
  content: "";
  position: absolute;
  inset: 0;
}
.voie--clair .voie__fond  { opacity: .42; }
.voie--sombre .voie__fond { opacity: .62; }
.voie--clair .voie__fond::after  { background: linear-gradient(to top, var(--blanc) 30%, rgba(246,245,243,.55) 62%, rgba(246,245,243,0) 100%); }
.voie--sombre .voie__fond::after { background: linear-gradient(to top, var(--noir) 28%, rgba(10,10,10,.6) 60%, rgba(10,10,10,.1) 100%); }
.voie:hover .voie__fond { transform: none; }
.voie--clair:hover .voie__fond  { opacity: .55; }
.voie--sombre:hover .voie__fond { opacity: .78; }

/* --- 25. Les touches de la marque ------------------------- */

/* La citation de Camillia */
.portrait blockquote {
  border-left: 1px solid var(--rose);
  padding-left: clamp(1rem, 2vw, 1.6rem);
}

/* Navigation : le soulignement au survol */
.nav a::after { background: var(--rose); }

/* La FAQ : la croix d'ouverture */
.question summary i { color: var(--rose); }

/* Le trait « Découvrir » sous le premier écran */
.hero__defilement i::after { background: var(--rose); }

/* Les galeries : un filet rose sous la légende au survol */
.cliche figcaption::before {
  content: "";
  display: block;
  width: 22px; height: 1px;
  margin-bottom: .6rem;
  background: var(--rose);
}

/* Les liens « Réservez 15 minutes au téléphone » */
body .appel-discret a { color: var(--rose-clair); border-bottom-color: rgba(217,167,189,.45); }
body .appel-discret a:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* Le focus clavier */
:focus-visible { outline-color: var(--rose); }

/* Les cadrages des portes : le visage reste dans le cadre. */
.voie__fond img { object-position: 50% 22%; }

/* La galerie : sans cette ligne, chaque photo gardait la marge
   par défaut d'une <figure> et flottait dans un cadre gris. */
.cliche { margin: 0; }

/* --- 26. Les photos en couleur ----------------------------
   pages.css, chargée après, remettait du noir et blanc sur la
   photo de la page Prestations et sur les témoignages. */
body .cabine__media img { filter: saturate(.92) brightness(.85); }
body .parole__ecran img,
body .parole:hover .parole__ecran img { filter: none; }

/* --- 27. Les réglages de la typographie -------------------
   Playfair pour ce qui se regarde (logo, titres, prix), Jost
   pour ce qui se lit. Les chiffres sont toujours droits : sans
   ce réglage, Playfair faisait descendre le 3 et le 5 sous la
   ligne, et « 35 € » avait l'air bancal.                       */

body {
  font-feature-settings: "lnum" 1, "kern" 1;
  font-size: clamp(1.02rem, .97rem + .2vw, 1.1rem);
  letter-spacing: .005em;
}

h1, h2, h3 {
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
}
.hero h1 {
  font-size: clamp(2.8rem, 6.6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -.012em;
}

/* Le logo, comme sur les sacs : capitales Playfair, grasses. */
.marque {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-indent: 0;
}

/* Les petites capitales de Jost : un peu d'épaisseur pour
   rester lisibles sur le noir. */
.btn,
.hero__sur,
.nav a,
.voie__num,
.voie__lien { font-weight: 500; }

/* Les petits titres sur deux lignes respirent un peu plus. */
h3, h4 { line-height: 1.22; }

/* --- 28. Les deux portes, toutes les deux en fondu ---------
   La porte cliente était blanche et sa photo délavée. Elle
   prend maintenant le même traitement que la porte formation et
   que les premiers écrans : la photo en couleur, qui s'efface
   vers le noir sous le texte. Ce qui les distingue : le blanc
   pour la cliente, le rose pour la formation.                  */
.voie--clair { background: var(--noir); color: var(--blanc); }
.voie--clair .voie__fond { opacity: .78; }
.voie--sombre .voie__fond { opacity: .78; }
.voie--clair .voie__fond::after,
.voie--sombre .voie__fond::after {
  background: linear-gradient(to top, var(--noir) 22%, rgba(10,10,10,.72) 46%, rgba(10,10,10,.12) 78%, rgba(10,10,10,.25) 100%);
}
.voie--clair:hover .voie__fond,
.voie--sombre:hover .voie__fond { opacity: .92; }
.voie--clair .voie__num { opacity: .8; }
.voie p { opacity: .82; }

/* --- 29. Le point du logo attrape la lumière --------------- */
.marque__point {
  background: var(--eclat);
  background-size: 260% 100%;
  background-position: var(--lumiere, 50%) 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* --- 30. Le lilas ------------------------------------------
   Le fond des photos du shooting devient celui du site, là où
   on lit. Le noir reste pour les premiers écrans et le pied de
   page.

   Trois teintes, jamais au hasard :
     .fond-lilas   la base
     .fond-brume   plus pâle, pour faire respirer entre deux
                   blocs lilas
     .fond-studio  plus soutenu, le fond des photos : seulement
                   à côté d'une photo du shooting

   À l'intérieur, l'encre et le fond sont inversés : --blanc
   devient le noir du texte et --noir devient le lilas. Les
   boutons, filets et textes atténués suivent donc tout seuls,
   sans réécrire chaque composant. C'est aussi sur ces jetons
   que s'appuiera le bouton sombre / clair.
   ----------------------------------------------------------- */

:root {
  --lilas:        #E6DCEC;
  --lilas-brume:  #F1ECF4;
  --lilas-studio: #D5C6DF;
  /* Le rose de la marque, approfondi : le rose poudré ne se lit
     pas sur le lilas. */
  --rose-profond: #9A5276;
  /* Le reflet de strass, version foncée : celui d'origine est
     trop pâle pour se voir sur le lilas. */
  --eclat-profond: linear-gradient(105deg, #6E3A55 0%, #B87896 32%, #8E4A6C 58%, #CB91AC 78%, #6E3A55 100%);
}

.fond-lilas,
.fond-brume,
.fond-studio {
  --teinte:     var(--lilas);
  --encre:      #DCD0E4;
  --blanc:      #0A0A0A;
  --noir:       var(--teinte);
  --brume:      rgba(10, 10, 10, .72);
  --sourdine:   rgba(10, 10, 10, .56);
  --filet:      rgba(10, 10, 10, .12);
  --filet-fort: rgba(10, 10, 10, .3);
  /* Le rose et le reflet de strass, foncés pour tenir sur le
     lilas. */
  --rose:       #A85E80;
  --rose-clair: var(--rose-profond);
  --eclat:      var(--eclat-profond);
  background: var(--teinte);
  color: var(--blanc);
}
.fond-brume  { --teinte: var(--lilas-brume);  --encre: #E8E0EE; }
.fond-studio { --teinte: var(--lilas-studio); --encre: #CBBBD6; }

:is(.fond-lilas, .fond-brume, .fond-studio) .hero__sur { color: rgba(10, 10, 10, .7); }
:is(.fond-lilas, .fond-brume, .fond-studio) :focus-visible { outline-color: var(--rose-profond); }
:is(.fond-lilas, .fond-brume, .fond-studio) ::selection { background: var(--rose-profond); color: #F6F5F3; }

/* Le bouton rose garde un texte noir, et un texte clair sur le
   prune du survol. */
:is(.fond-lilas, .fond-brume, .fond-studio) .btn--rose { --fond: #D9A7BD; --texte: #0A0A0A; }
:is(.fond-lilas, .fond-brume, .fond-studio) .btn--rose:hover { color: #F6F5F3; }

/* Le bandeau des chiffres, juste sous la photo : pas de filet
   entre le noir et le lilas, la couleur suffit. */
.chiffres.fond-lilas { border-top: 0; }

/* Plus de filet sous les deux portes : la section suivante est
   lilas elle aussi, le changement de teinte suffit. */
.partage { border-bottom: 0; }
.fond-lilas a.chiffre:hover { background: rgba(10, 10, 10, .035); }

/* La porte cliente : la photo s'efface vers le lilas. */
.voie--clair.fond-lilas .voie__fond { opacity: .9; }
.voie--clair.fond-lilas .voie__fond img { filter: saturate(.9); }
.voie--clair.fond-lilas .voie__fond::after {
  background: linear-gradient(to top,
    var(--lilas) 24%,
    rgba(230, 220, 236, .8) 46%,
    rgba(230, 220, 236, .2) 76%,
    rgba(230, 220, 236, .1) 100%);
}
.voie--clair.fond-lilas:hover .voie__fond { opacity: 1; }
.voie--clair.fond-lilas .voie__num { opacity: .7; }

/* Les témoignages : le bouton de lecture reste sur son dégradé
   sombre, il garde donc son blanc. */
:is(.fond-lilas, .fond-brume, .fond-studio) .parole__lecture { color: #F6F5F3; }
:is(.fond-lilas, .fond-brume, .fond-studio) .parole__lecture i { border-color: #F6F5F3; }
:is(.fond-lilas, .fond-brume, .fond-studio) .parole__lecture i::after { border-left-color: #F6F5F3; }
:is(.fond-lilas, .fond-brume, .fond-studio) .parole__lecture:hover i { background: #F6F5F3; }
:is(.fond-lilas, .fond-brume, .fond-studio) .parole__lecture:hover i::after { border-left-color: #0A0A0A; }


/* --- 31. Le menu au-dessus du lilas -----------------------
   Une barre noire posée sur une page lilas refermait tout le
   haut de l'écran. Dès qu'une section lilas passe sous le menu,
   il prend la même teinte (main.js pose .entete--clair).       */

.entete--clair.est-collee {
  background: rgba(230, 220, 236, .86);
  background: color-mix(in srgb, var(--menu-fond, var(--lilas)) 88%, transparent);
  border-bottom-color: rgba(10, 10, 10, .1);
}
.entete--clair .marque { color: #0A0A0A; }
.entete--clair .marque__point { background-image: var(--eclat-profond); }
.entete--clair .nav:not(.est-ouverte) a { color: rgba(10, 10, 10, .68); }
.entete--clair .nav:not(.est-ouverte) a:hover { color: #0A0A0A; }
.entete--clair .nav:not(.est-ouverte) .btn--fantome {
  --texte: #0A0A0A;
  border-color: rgba(10, 10, 10, .3);
}
.entete--clair .nav:not(.est-ouverte) .btn--fantome::before { background: #0A0A0A; }
.entete--clair .nav:not(.est-ouverte) .btn--fantome:hover { color: var(--lilas); border-color: #0A0A0A; }
.entete--clair .burger[aria-expanded="false"]::before,
.entete--clair .burger[aria-expanded="false"]::after { background: #0A0A0A; }


/* --- 32. Le bouton sombre / clair -------------------------
   Un rond, et dedans un disque à moitié plein : le symbole se
   comprend sans légende. Les couleurs de la nuit sont à la
   section 38.                                                  */

.nav { margin-left: auto; }

.bascule {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  color: var(--blanc);
  transition: border-color var(--vif), color var(--vif);
}
.bascule i {
  display: block;
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: transform var(--moyen);
}
.bascule:hover { border-color: var(--rose); }
/* Le disque se retourne au clic, pas au survol. */
.bascule[aria-pressed="true"] i { transform: rotate(180deg); }

.entete--clair .bascule { color: #0A0A0A; border-color: rgba(10, 10, 10, .3); }
.entete--clair .bascule:hover { border-color: var(--rose-profond); }

@media (max-width: 860px) {
  .bascule { margin-left: auto; width: 34px; height: 34px; }
  .bascule i { width: 12px; height: 12px; }
}

/* --- 33. Les chiffres sur téléphone ------------------------
   Ils se rangeaient en deux plus un : le dernier restait seul
   sur sa ligne, avec un bout de filet qui ne menait nulle part.
   Ils tiennent maintenant sur une seule rangée.               */
@media (max-width: 860px) {
  .chiffres { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .chiffre { padding: 1.9rem .5rem 1.7rem; border-top: 0; border-left: 1px solid var(--filet); }
  .chiffre:first-child { border-left: 0; }
  .chiffre b { font-size: 2.1rem; margin-bottom: .55rem; }
  .chiffre span { display: block; font-size: .6rem; letter-spacing: .13em; line-height: 1.5; }
}

/* --- 34. Le menu du téléphone, ouvert après défilement -----
   Le flou du menu collé enfermait le menu plein écran dans la
   barre du haut : ouvert au milieu de la page, il s'affichait
   par-dessus le contenu, illisible. Le flou est retiré tant que
   le menu est ouvert, et le logo, le bouton et la croix restent
   au-dessus, en blanc.                                         */
.entete.menu-ouvert {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.entete.menu-ouvert .marque,
.entete.menu-ouvert .bascule,
.entete.menu-ouvert .burger { position: relative; z-index: 100; color: #F6F5F3; }
.entete.menu-ouvert .bascule { border-color: rgba(246, 245, 243, .26); }
.entete.menu-ouvert .marque__point { background-image: var(--eclat); }
.entete.menu-ouvert .burger::before,
.entete.menu-ouvert .burger::after { background: #F6F5F3; }


/* --- 35. La page Prestations en lilas ----------------------
   Le premier écran et « Composez votre sourire » restent noirs ;
   tout ce qui se lit passe en lilas. Les teintes suivent le sens
   des blocs :
     les tarifs                         lilas
     les avis                           brume
     le déroulé et « Quand je ne fais pas »   lilas (le rendez-vous)
     « Venir, et repartir » et la FAQ        brume (avant de venir)
     « On se voit quand ? »             studio, le dernier appel  */

/* La légende de la photo reste sur son dégradé sombre. */
.fond-lilas .soins__photo figcaption { color: #F6F5F3; }

/* Les losanges des pierres : les vides se dessinent en encre. */
.fond-lilas .pierres label::before { box-shadow: none; }
.fond-lilas .pierres input:checked + label ~ label::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .35);
}

/* La barre du rendez-vous : le survol d'une étape en encre. */
.fond-lilas .temps__segment:hover::before { background: rgba(10, 10, 10, .35); }
.fond-lilas .temps__segment.est-passe::before { background: rgba(168, 94, 128, .5); }

/* La carte du studio prend la teinte des photos : c'est le
   carton d'invitation, il doit se détacher. */
.fond-brume .studio__carte {
  background: var(--lilas-studio);
  border-color: rgba(10, 10, 10, .08);
}

/* La réponse de Camillia, posée sur un lilas un ton plus soutenu
   que la page. */
@media (min-width: 901px) {
  .fond-brume .qr.est-pret .qr__reponse {
    background:
      radial-gradient(ellipse at 85% 0%, rgba(168, 94, 128, .07), transparent 60%),
      var(--lilas);
    border-color: rgba(10, 10, 10, .08);
  }
}

/* Les premiers écrans de Prestations et Formations prennent tout
   l'écran : en arrivant, on ne doit voir ni le lilas dépasser en
   bas, ni de filet. Sur tablette et téléphone, le texte se cale
   en bas de l'écran, comme sur l'accueil. */
.page-prestations .cabine,
.page-formations .cabine,
.page-camillia .cabine { min-height: 100vh; min-height: 100svh; border-bottom: 0; }
@media (max-width: 1000px) {
  .page-prestations .cabine,
  .page-formations .cabine,
  .page-camillia .cabine { align-content: end; }
}


/* --- 36. La page Formations en lilas ------------------------
   Le premier écran reste noir et prend tout l'écran. Ensuite,
   par le sens des blocs :
     le quiz et les trois formules   lilas (choisir sa formule)
     les dates, quand il y en a      lilas
     le cadre légal et la FAQ        brume (se rassurer)
     le guide offert                 studio, le dernier appel :
                                     le livre noir posé sur le
                                     fond des photos, comme un
                                     objet qu'on a pris en photo */

/* Le livre du guide reste un objet noir : il reprend les jetons
   d'origine au milieu du lilas. */
.fond-studio .guide__objet {
  --blanc:      #F6F5F3;
  --noir:       #0A0A0A;
  --encre:      #131313;
  --brume:      rgba(246, 245, 243, .70);
  --sourdine:   rgba(246, 245, 243, .52);
  --filet:      rgba(246, 245, 243, .13);
  --filet-fort: rgba(246, 245, 243, .26);
  --rose:       #D9A7BD;
  --rose-clair: #F2DDE6;
  --eclat: linear-gradient(105deg, #9C6F83 0%, #F2DDE6 32%, #CF9DB3 58%, #FFF5F9 78%, #A57A8C 100%);
  color: #F6F5F3;
}

/* La carte du quiz : un lilas plus pâle que la page, elle se
   détache sans faire de bloc sombre. */
.fond-lilas .orient__carte {
  background: var(--lilas-brume);
  border-color: rgba(10, 10, 10, .08);
}
/* Les dents déjà répondues, en encre. */
.fond-lilas .orient__dents li.est-repondu .orient__dent path { stroke: rgba(10, 10, 10, .55); fill: rgba(10, 10, 10, .04); }
.fond-lilas .orient__dents li.est-courant .orient__dent path { fill: rgba(168, 94, 128, .08); }

/* Le cadre légal en bref : il était noir sur blanc, ses couleurs
   étaient écrites à l'envers du reste du site. */
:is(.fond-lilas, .fond-brume, .fond-studio).legal h2,
:is(.fond-lilas, .fond-brume, .fond-studio) .lien-suite { color: #0A0A0A; }
:is(.fond-lilas, .fond-brume, .fond-studio) .lien-suite { border-bottom-color: var(--rose); }
:is(.fond-lilas, .fond-brume, .fond-studio) .lien-suite:hover { color: var(--rose-profond); }
:is(.fond-lilas, .fond-brume, .fond-studio).legal .tete p { color: var(--brume); }

/* La formule recommandée par le quiz : un cadre rose qui se voit
   sur le lilas. */
.fond-lilas .formule.est-recommandee::after { border-color: rgba(168, 94, 128, .6); }

/* Sur le lilas studio, le plus soutenu, le rose descend encore
   d'un ton : « Offert », les numéros du sommaire, « Le studio »
   restaient trop pâles pour être lus d'un coup d'œil. */
.fond-studio,
.fond-brume .studio__carte {
  --rose:       #7E3D5F;
  --rose-clair: #7E3D5F;
}
.fond-studio .guide__objet { --rose: #D9A7BD; --rose-clair: #F2DDE6; }


/* --- 37. La page Camillia en lilas --------------------------
   Une page de récit, qui alterne comme un magazine :
     le premier écran              noir, tout l'écran
     « Le sérieux, d'abord »       lilas
     « Et pour le reste… »         noir : les quatre portraits
                                   ressortent comme une planche
                                   contact, c'est la respiration
     Strass.toi Studio             brume, le papier du magazine
     sa phrase                     studio, la fin de page, comme
                                   le dernier appel des autres
                                   pages                          */

/* Strass.toi Studio garde son encre à l'envers (texte en
   --noir) : seul son papier change, du blanc cassé au lilas
   pâle. .menu-clair suffit au menu pour passer en lilas. */
body .shoot-section.section { background: var(--lilas-brume); }
body .shoot-section .shoot__lien { background: #E3DAE9; }

/* Les trois chiffres de « Le sérieux » sur téléphone : même
   défaut que sur l'accueil, le dernier restait seul sur sa
   ligne. Une seule rangée. */
@media (max-width: 860px) {
  .serieux__chiffres { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .8rem; }
  .serieux__chiffres b { font-size: 2rem; }
  .serieux__chiffres span { display: block; font-size: .6rem; letter-spacing: .13em; line-height: 1.5; }
}


/* --- 38. Le mode sombre : la nuit rose ---------------------
   Même hiérarchie qu'en clair, valeurs inversées. Chaque lilas
   devient une nuit teintée du prune du logo, et les roses de la
   marque reprennent leur vraie valeur : on ne les fonce plus
   pour le lilas.

   Les fonds, du plus présent au plus rare :
     noir prune    #0F0B0E   premiers écrans, blocs noirs, pied
     nuit          #1B1319   remplace le lilas
     nuit voilée   #21171E   remplace la brume. Plus claire que la
                             nuit, comme la brume est plus claire
                             que le lilas : en plus sombre, elle se
                             confondait avec le noir prune quand
                             les deux se touchaient
     nuit studio   #2A1D26   remplace le studio, seulement à côté
                             d'une photo du shooting (sur l'accueil :
                             le bloc Camillia, rien d'autre)
     nuit profonde #140E12   les cartes posées sur la nuit, un ton
                             en dessous, comme en clair

   Les roses, du plus présent au plus rare :
     rose poudré   #D9A7BD   italiques des titres, bouton rose
     rose clair    #F2DDE6   l'italique du pied de page, survols
     rose ancien   #CF9DB3   uniquement dans le reflet (point du
                             logo, trait de lecture)
     prune         #6E4A62   jamais en texte : le fond du bouton
                             rose au survol, rien d'autre

   Toutes les pages publiques ont leur version nuit. Une page
   ajoutée plus tard l'aura d'office : ses couleurs doivent donc
   passer par les jetons, ou être reprises ici.                 */

html[data-theme="sombre"] {
  color-scheme: dark;
  --noir:       #0F0B0E;
  --encre:      #1B1319;
  --blanc:      #F4EEF1;
  --brume:      rgba(244, 238, 241, .72);
  --sourdine:   rgba(244, 238, 241, .54);
  --filet:      rgba(244, 238, 241, .12);
  --filet-fort: rgba(244, 238, 241, .26);

  --lilas:        #1B1319;
  --lilas-brume:  #21171E;
  --lilas-studio: #2A1D26;
  --rose-profond: #D9A7BD;
  /* Le reflet dans les sections nuit : le rose ancien, sans le
     blanc du reflet d'origine. Sur un filet de 2 px, celui-ci se
     lisait blanc et non rose. */
  --eclat-profond: linear-gradient(105deg, #9C6F83 0%, #CF9DB3 42%, #E3BCCD 60%, #A57A8C 100%);
}

/* Dans les sections qui étaient lilas, l'encre redevient claire
   et les roses reprennent leur valeur d'origine. */
html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio) {
  --encre:      #140E12;
  --blanc:      #F4EEF1;
  --brume:      rgba(244, 238, 241, .72);
  --sourdine:   rgba(244, 238, 241, .56);
  --filet:      rgba(244, 238, 241, .12);
  --filet-fort: rgba(244, 238, 241, .28);
  --rose:       #D9A7BD;
  --rose-clair: #D9A7BD;   /* les italiques des titres : poudré */
  --eclat:      var(--eclat-profond);
}
html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio) {
  /* Les colonnes du cadre légal (style.css, section 14). */
  --encre-inv: var(--brume);
  --filet-inv: var(--filet);
}
html[data-theme="sombre"] .fond-brume  { --encre: #1B1319; }
html[data-theme="sombre"] .fond-studio { --encre: #21171E; }

html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio) .hero__sur { color: var(--brume); }
html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio) ::selection { color: #0F0B0E; }
html[data-theme="sombre"] ::selection { color: #0F0B0E; }

/* Les voiles posés sur les photos : le même noir prune que la
   page, sinon on voit la jointure. */
html[data-theme="sombre"] .hero__voile {
  background:
    linear-gradient(0deg, rgba(15,11,14,.96) 0%, rgba(15,11,14,.86) 24%, rgba(15,11,14,.5) 46%, rgba(15,11,14,0) 68%),
    linear-gradient(90deg, rgba(15,11,14,.7) 0%, rgba(15,11,14,.35) 35%, rgba(15,11,14,0) 60%),
    linear-gradient(180deg, rgba(15,11,14,.5) 0%, rgba(15,11,14,0) 18%);
}
html[data-theme="sombre"] .voie--sombre .voie__fond::after {
  background: linear-gradient(to top, var(--noir) 22%, rgba(15,11,14,.72) 46%, rgba(15,11,14,.12) 78%, rgba(15,11,14,.25) 100%);
}

/* La porte cliente en nuit, la porte élève en noir prune, et le
   bloc Camillia juste dessous en nuit studio : les trois sont
   différents, le bas des deux portes forme donc une seule ligne
   droite. En studio, la porte cliente se fondait dans le bloc
   Camillia et la porte élève restait en marche d'escalier. */
html[data-theme="sombre"] .voie--clair.fond-lilas { --teinte: var(--lilas); }
html[data-theme="sombre"] .voie--clair.fond-lilas .voie__fond { opacity: .8; }
html[data-theme="sombre"] .voie--clair.fond-lilas:hover .voie__fond { opacity: .92; }
html[data-theme="sombre"] .voie--clair.fond-lilas .voie__fond::after {
  background: linear-gradient(to top,
    #1B1319 24%,
    rgba(27, 19, 25, .82) 46%,
    rgba(27, 19, 25, .25) 76%,
    rgba(27, 19, 25, .1) 100%);
}

html[data-theme="sombre"] .fond-lilas a.chiffre:hover { background: rgba(244, 238, 241, .035); }

/* Le menu collé, et le menu posé sur une section nuit : il garde
   la teinte du dessous, avec une encre claire. */
html[data-theme="sombre"] .entete.est-collee { background: rgba(15, 11, 14, .84); }
html[data-theme="sombre"] .entete--clair.est-collee {
  background: color-mix(in srgb, var(--menu-fond, var(--lilas)) 88%, transparent);
  border-bottom-color: var(--filet);
}
html[data-theme="sombre"] .entete--clair .marque { color: var(--blanc); }
html[data-theme="sombre"] .entete--clair .marque__point { background-image: var(--eclat); }
html[data-theme="sombre"] .entete--clair .nav:not(.est-ouverte) a { color: var(--brume); }
html[data-theme="sombre"] .entete--clair .nav:not(.est-ouverte) a:hover { color: var(--blanc); }
html[data-theme="sombre"] .entete--clair .nav:not(.est-ouverte) .btn--fantome {
  --texte: var(--blanc);
  border-color: var(--filet-fort);
}
html[data-theme="sombre"] .entete--clair .nav:not(.est-ouverte) .btn--fantome::before { background: var(--blanc); }
html[data-theme="sombre"] .entete--clair .nav:not(.est-ouverte) .btn--fantome:hover { color: var(--noir); border-color: var(--blanc); }
html[data-theme="sombre"] .entete--clair .burger[aria-expanded="false"]::before,
html[data-theme="sombre"] .entete--clair .burger[aria-expanded="false"]::after { background: var(--blanc); }
html[data-theme="sombre"] .entete--clair .bascule { color: var(--blanc); border-color: var(--filet-fort); }
html[data-theme="sombre"] .entete--clair .bascule:hover { border-color: var(--rose); }

html[data-theme="sombre"] .barre-mobile { background: rgba(15, 11, 14, .92); }


/* --- 39. La page Prestations en nuit ----------------------- */

/* Le voile du premier écran, dans le noir prune de la page
   (mêmes dégradés que pages.css, section Prestations). */
html[data-theme="sombre"] .page-prestations .cabine__voile {
  background:
    linear-gradient(90deg, var(--noir) 0%, var(--noir) 30%, rgba(15,11,14,.55) 48%, rgba(15,11,14,0) 70%),
    linear-gradient(180deg, rgba(15,11,14,.6) 0%, transparent 22%, transparent 72%, var(--noir) 100%);
}
@media (max-width: 1000px) {
  html[data-theme="sombre"] .page-prestations .cabine__voile {
    background: linear-gradient(180deg, rgba(15,11,14,.45) 0%, rgba(15,11,14,0) 18%, rgba(15,11,14,0) 40%, rgba(15,11,14,.75) 70%, var(--noir) 100%);
  }
}

/* Les losanges vides des pierres : un trait clair. */
html[data-theme="sombre"] .fond-lilas .pierres input:checked + label ~ label::before {
  box-shadow: inset 0 0 0 1px rgba(244, 238, 241, .4);
}

/* La barre du rendez-vous. */
html[data-theme="sombre"] .fond-lilas .temps__segment:hover::before { background: rgba(244, 238, 241, .35); }
html[data-theme="sombre"] .fond-lilas .temps__segment.est-passe::before { background: rgba(217, 167, 189, .55); }

/* La carte du studio et la réponse de Camillia. */
html[data-theme="sombre"] .fond-brume .studio__carte { border-color: var(--filet); }
@media (min-width: 901px) {
  html[data-theme="sombre"] .fond-brume .qr.est-pret .qr__reponse {
    background:
      radial-gradient(ellipse at 85% 0%, rgba(217, 167, 189, .06), transparent 60%),
      var(--lilas);
    border-color: var(--filet);
  }
}


/* --- 40. Les pages formation en nuit ----------------------
   Le voile du premier écran sert aussi à la page Formations,
   qui a le même (.cabine--formation).                          */

html[data-theme="sombre"] :is(.page-formation, .page-formations) .cabine--formation .cabine__voile {
  background:
    linear-gradient(90deg, var(--noir) 0%, var(--noir) 24%, rgba(15,11,14,.55) 36%, rgba(15,11,14,0) 47%),
    linear-gradient(180deg, rgba(15,11,14,.55) 0%, transparent 20%, transparent 78%, var(--noir) 100%);
}
@media (min-width: 1001px) {
  html[data-theme="sombre"] .page-formation .cabine--portrait .cabine__voile {
    background:
      linear-gradient(90deg, var(--noir) 0%, var(--noir) 36%, rgba(15,11,14,.5) 46%, rgba(15,11,14,0) 58%),
      linear-gradient(180deg, rgba(15,11,14,.55) 0%, transparent 20%, transparent 78%, var(--noir) 100%);
  }
}
@media (max-width: 1000px) {
  html[data-theme="sombre"] :is(.page-formation, .page-formations) .cabine--formation .cabine__voile {
    background: linear-gradient(180deg, rgba(15,11,14,.45) 0%, rgba(15,11,14,0) 18%, rgba(15,11,14,0) 40%, rgba(15,11,14,.75) 70%, var(--noir) 100%);
  }
}

/* Le simulateur : la formule choisie garde un texte lisible sur
   le rose poudré. */
html[data-theme="sombre"] .page-formation .sim__formule.est-actif { color: #0F0B0E; }

/* Les cartes posées sur le studio : un filet clair. */
html[data-theme="sombre"] .fv-assureur,
html[data-theme="sombre"] .fv-autre { border-color: var(--filet); }


/* --- 41. La page Formations en nuit ----------------------- */

/* Le cadre légal en bref et son lien : écrits en noir pour le
   lilas, ils disparaissaient sur la nuit. */
html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio).legal h2,
html[data-theme="sombre"] :is(.fond-lilas, .fond-brume, .fond-studio) .lien-suite { color: var(--blanc); }

/* Le quiz : la carte, les dents déjà répondues, la dent en cours. */
html[data-theme="sombre"] .fond-lilas .orient__carte { border-color: var(--filet); }
html[data-theme="sombre"] .fond-lilas .orient__dents li.est-repondu .orient__dent path { stroke: rgba(244, 238, 241, .55); fill: rgba(244, 238, 241, .05); }
html[data-theme="sombre"] .fond-lilas .orient__dents li.est-courant .orient__dent path { fill: rgba(217, 167, 189, .1); }

/* Les trois formules. La plus choisie se détache en plus clair
   (la nuit voilée) : en clair elle était un ton plus foncé que
   la page, sur la nuit un ton plus foncé ne se voyait pas. */
html[data-theme="sombre"] .fond-lilas .formule--vedette { background: var(--lilas-brume); }
html[data-theme="sombre"] .fond-lilas .formule.est-recommandee::after { border-color: rgba(217, 167, 189, .6); }


/* La page ouverte du livre du guide : du papier clair, son encre
   reste sombre quel que soit le mode. Sans ça, elle reprenait
   l'encre claire de la nuit et le sommaire devenait blanc sur
   blanc. */
html[data-theme="sombre"] .guide__page {
  --encre-inv: rgba(10, 10, 10, .6);
  --filet-inv: rgba(10, 10, 10, .14);
}


/* --- 42. La page Camillia en nuit -------------------------- */

/* « Et pour le reste… » : en clair, c'est la respiration noire
   entre deux blocs lilas. Son fond (--encre) devenait la nuit,
   la même que « Le sérieux » juste au-dessus : les deux blocs se
   collaient. Il passe en noir prune. */
html[data-theme="sombre"] .section--encre { background: var(--noir); }

/* Strass.toi Studio, la page de magazine : en clair, elle est
   écrite à l'envers (encre noire sur papier pâle). En nuit, le
   papier devient la nuit voilée et l'encre redevient claire. Le
   prune de « Strass.toi » et des numéros ne se lit pas sur la
   nuit : il passe au rose poudré. */
html[data-theme="sombre"] body .shoot-section.section {
  --encre-inv: rgba(244, 238, 241, .58);
  background: var(--lilas-brume);
  color: var(--blanc);
}
html[data-theme="sombre"] .shoot__tete { border-bottom-color: var(--filet-fort); }
html[data-theme="sombre"] .shoot__titre { color: var(--blanc); }
html[data-theme="sombre"] .shoot__sur,
html[data-theme="sombre"] .shoot__num { color: var(--rose); }
/* La case de la photo, le temps qu'elle charge : la nuit studio,
   à sa place à côté d'une photo du shooting. */
html[data-theme="sombre"] body .shoot-section .shoot__lien { background: var(--lilas-studio); }
html[data-theme="sombre"] .shoot__lien:focus-visible { outline-color: var(--blanc); }

/* La visionneuse plein écran : le noir prune du site. */
html[data-theme="sombre"] .visionneuse { background: #0B080A; }



/* --- 43. La page introuvable (404.php) ---------------------
   Un seul écran en lilas : le titre, une phrase, trois liens.
   La page de remerciement (inscription.php) reprend le même
   écran.
   Tout passe par les jetons des fonds lilas, la nuit suit donc
   seule (section 38). */

.introuvable {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}
.introuvable__inner { padding-block: 7rem 4rem; }
.introuvable h1 {
  font-size: clamp(2.9rem, 8vw, 6.5rem);
  margin-bottom: 1.6rem;
}
.introuvable h1 em { color: var(--rose); }
.introuvable__texte { color: var(--brume); margin-bottom: 2.4rem; }

/* --- 44. Mes infos : fermeture et horaires -----------------
   Ce que Camillia règle elle-même dans l'intranet (Mes infos).

   Le bandeau de fermeture se place en tête de l'en-tête fixe :
   il reste lisible au défilement, et la nuit suit seule, par la
   classe .fond-lilas (section 30 en clair, section 38 en nuit).
   La classe .a-fermeture, posée sur <body>, laisse la place au
   bandeau sur les pages qui commencent par une section.        */

.entete.a-fermeture {
  flex-wrap: wrap;
  row-gap: 0;
  padding-top: 0;
}
.entete.a-fermeture.est-collee { padding-top: 0; }

.fermeture {
  flex: 1 0 100%;
  order: -1;
  max-width: none;   /* les paragraphes sont bornés en largeur (section 2) */
  margin: 0 calc(var(--marge) * -1) 1.5rem;
  padding: .55rem var(--marge);
  font-size: .78rem;
  letter-spacing: .02em;
  line-height: 1.5;
  text-align: center;
  border-bottom: 1px solid var(--filet);
}
.entete.a-fermeture.est-collee .fermeture { margin-bottom: .9rem; }

.a-fermeture main > .section:first-child { padding-top: calc(var(--rythme) + 2.5rem); }
.a-fermeture section[id] { scroll-margin-top: calc(84px + 2.5rem); }

/* Les horaires, dans le bloc pratique de Prestations et dans le
   pied : une ligne par jour ou par suite de jours. */
.studio__horaires,
.pied ul.pied__horaires { list-style: none; margin: 0; padding: 0; }
.studio__horaires li { margin: 0; }
.studio__horaires span { display: inline-block; min-width: 9.5em; color: var(--blanc); }

.pied ul.pied__horaires {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
  color: var(--brume);
}
.pied ul.pied__horaires li { margin-bottom: .35rem; }
.pied ul.pied__horaires span { display: block; color: var(--sourdine); font-size: .78rem; }


/* --- Le monogramme ST (includes/monogramme.php) ------------
   Remplace STRASS.TOI en haut à gauche, sur toutes les pages.
   Le T suit la couleur du texte de l'en-tête ; le S porte
   l'éclat rose (le même que l'ancien point du logo) et suit la
   lumière avec --lumiere (eclat.js). Sur le lilas, l'éclat
   profond, sinon le rose pâle disparaîtrait.                 */
.marque {
  position: relative;
  display: block;
  flex: none;
  width: 2.75rem;
  aspect-ratio: 730 / 735;
  letter-spacing: 0;
  line-height: 0;
  transition: transform var(--moyen), opacity var(--vif);
}
.marque__t {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.marque__s {
  position: absolute;
  inset: 0;
  background: var(--eclat);
  background-size: 260% 100%;
  background-position: var(--lumiere, 50%) 50%;
  -webkit-mask: url("/assets/img/monogramme-s.svg") center / 100% 100% no-repeat;
          mask: url("/assets/img/monogramme-s.svg") center / 100% 100% no-repeat;
}
.marque:hover { opacity: .86; }
.entete.est-collee .marque { width: 2.35rem; }
.entete--clair .marque__s { background-image: var(--eclat-profond); }
html[data-theme="sombre"] .entete--clair .marque__s,
.entete.menu-ouvert .marque__s { background-image: var(--eclat); }
@media (max-width: 700px) {
  .marque { width: 2.2rem; }
  .entete.est-collee .marque { width: 1.95rem; }
}