/* ============================================================
   STRASSTOI — pages de vente
   Chargée uniquement sur /prestations et /formation/*.
   Même charte que le site : noir profond, blanc cassé, un seul
   éclat argenté, aucun angle arrondi, aucune ombre portée.
   Elle ne redéfinit rien de style.css, elle prolonge.
   ============================================================ */

/* --- 1. Le premier écran de la page cliente ---------------
   Différent du hero d'accueil : là-bas c'est un film de marque,
   centré. Ici c'est un rendez-vous, aligné à gauche, avec la
   photo qui occupe la moitié droite. On ne raconte plus, on
   propose une heure.                                          */

.cabine {
  position: relative;
  min-height: 92svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  padding: 8rem var(--marge) 5rem;
  isolation: isolate;
  border-bottom: 1px solid var(--filet);
}

.cabine__media {
  position: absolute;
  inset: 0 0 0 46%;
  z-index: -2;
}
.cabine__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.8);
}

/* La couture entre le noir et la photo : un dégradé, pas un
   bord net. C'est ce qui évite l'effet « image collée ». */
.cabine__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, var(--noir) 34%, rgba(10,10,10,.86) 48%, rgba(10,10,10,.28) 78%, rgba(10,10,10,.55) 100%),
    linear-gradient(180deg, rgba(10,10,10,.7) 0%, transparent 26%, transparent 74%, var(--noir) 100%);
}

.cabine__inner { max-width: 40rem; }

.cabine h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  margin-bottom: 1.6rem;
}
.cabine h1 em { font-style: italic; }

.cabine__texte {
  color: var(--brume);
  max-width: 40ch;
  font-size: clamp(1rem, .92rem + .35vw, 1.12rem);
  margin-bottom: 2.4rem;
}

.cabine__gages {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--sourdine);
}
.cabine__gages li { display: flex; align-items: center; gap: .6rem; }
.cabine__gages li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform: rotate(45deg);
  flex: none;
}

/* --- 2. Les cartes de prestation --------------------------
   Trois colonnes séparées par un filet, comme les offres de la
   page d'accueil : la cliente reconnaît la grille.             */

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

.carte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 2.8vw, 2.8rem);
  border-left: 1px solid var(--filet);
}
.carte:first-child { border-left: 0; }

.carte__tete h3 { margin-bottom: .6rem; }

.carte__ligne {
  color: var(--blanc);
  font-family: var(--serif); font-stretch: var(--etroit);
  font-style: italic;
  font-size: 1.02rem;
  margin-bottom: 1.4rem;
}

.carte__resume {
  color: var(--brume);
  font-size: .93rem;
  margin-bottom: 1.8rem;
}

/* Le tableau de tarifs : le cœur de la page. Chiffres alignés,
   chasse tabulaire, aucun arrondi. On lit une carte de salon,
   pas une grille de prix en ligne. */

.tarifs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.tarifs tr { border-top: 1px solid var(--filet); }
.tarifs tr:last-child { border-bottom: 1px solid var(--filet); }

.tarifs th,
.tarifs td {
  padding: 1rem 0;
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}

.tarifs th { padding-right: 1rem; }

.tarifs th em {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  font-size: .8rem;
  color: var(--sourdine);
  max-width: 34ch;
}

.tarifs__duree {
  white-space: nowrap;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sourdine);
  padding-right: 1.2rem;
  text-align: right;
}

.tarifs__prix {
  white-space: nowrap;
  text-align: right;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* « par personne » sous le prix, et « Sur devis » à la place du
   prix : en petit, dans la voix des durées, pour que la colonne
   garde la largeur d'un chiffre. */
.tarifs__prix small,
.tarifs__devis {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brume);
}
.tarifs__prix small { display: block; margin-top: .4rem; color: var(--sourdine); }

.carte__inclus h4,
.panneau__apres h4 {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin: 0 0 1rem;
}

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

.carte__tenue {
  margin: auto 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--filet);
  font-size: .82rem;
  color: var(--sourdine);
}

/* --- 3. L'appel à l'action intermédiaire ------------------- */

.appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--filet);
  background: var(--encre);
}
.appel p {
  margin: 0;
  color: var(--brume);
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  max-width: 34ch;
}

/* --- 4. Le déroulé, minute par minute ---------------------- */

.deroule-section { background: var(--encre); border-block: 1px solid var(--filet); }

.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  margin-bottom: 2.5rem;
}

.choix__onglet {
  flex: 1 1 190px;
  padding: 1.1rem 1.4rem;
  background: var(--noir);
  text-align: left;
  color: var(--brume);
  transition: background var(--vif), color var(--vif);
}
.choix__onglet span {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.25rem;
  line-height: 1.1;
}
.choix__onglet em {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.choix__onglet:hover { color: var(--blanc); }
.choix__onglet.est-actif { background: var(--blanc); color: var(--noir); }
.choix__onglet.est-actif em { color: rgba(10,10,10,.55); }

.panneau[hidden] { display: none; }

.panneau__total {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--filet);
  max-width: none;
}
.panneau__total b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}
.panneau__total span { color: var(--sourdine); font-size: .88rem; }

.etapes { list-style: none; margin: 0; padding: 0; }

.etape {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 88px;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: 1.6rem 0;
  border-top: 1px solid var(--filet);
}
.etape:last-child { border-bottom: 1px solid var(--filet); }

.etape__minute b {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.etape__minute span {
  display: block;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.etape__hors { font-style: italic; color: var(--brume); }

.etape__corps h4 {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0 .45rem;
}
.etape__corps p { margin: 0; color: var(--brume); font-size: .93rem; }

/* La jauge dit la part de la séance que prend cette étape.
   C'est une information, pas une décoration : c'est elle qui
   fait comprendre que « la lampe » occupe la moitié du
   rendez-vous. */
.etape__jauge {
  height: 1px;
  margin-top: .9rem;
  background: var(--filet);
}
.etape__jauge i {
  display: block;
  height: 3px;
  margin-top: -1px;
  width: var(--part, 0%);
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}

/* Le séparateur de journée sur les formations de deux jours. */
.jalon {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-top: 2.8rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.jalon::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet);
}
.jalon + .etape { border-top: 0; }

.panneau__apres {
  margin-top: 2.5rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--filet);
  background: var(--noir);
}
.panneau__apres ul { margin-bottom: 0; }

/* --- 5. Le comparateur avant / après ----------------------- */

.comparateur { position: relative; }

.comparateur__onglets {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

.comparateur__onglet {
  padding: .6rem 1.2rem;
  border: 1px solid var(--filet);
  color: var(--brume);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color var(--vif), border-color var(--vif), background var(--vif);
}
.comparateur__onglet:hover { color: var(--blanc); border-color: var(--filet-fort); }
.comparateur__onglet.est-actif { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

.duo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--filet);
  background: var(--encre);
  user-select: none;
  touch-action: pan-y;
  --coupe: 50%;
}
.duo[hidden] { display: none; }
/* Pendant le glissement, plus aucune transition : la ligne doit
   coller au doigt, sinon la comparaison paraît molle. */
.duo.est-glisse { cursor: ew-resize; }
.duo.est-glisse .duo__prise { transition: none; }

.duo img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Le « avant » est posé par-dessus le « après » et rogné à la
   position du curseur. Les deux images occupent exactement le
   même cadre : sans ça, la comparaison ne veut rien dire. */
.duo__avant {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* On rogne, on ne redimensionne pas : les deux images doivent
     rester exactement superposées, sinon la comparaison ment. */
  clip-path: inset(0 calc(100% - var(--coupe)) 0 0);
}
.duo__avant img { width: 100%; height: 100%; object-fit: cover; }

.duo__etiquette {
  position: absolute;
  top: 1rem;
  z-index: 3;
  padding: .4rem .8rem;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blanc);
  pointer-events: none;
}
.duo__etiquette--gauche { left: 1rem; }
.duo__etiquette--droite { right: 1rem; }

.duo__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--coupe);
  z-index: 4;
  width: 44px;
  margin-left: -22px;
  padding: 0;
  cursor: ew-resize;
  background: none;
  border: 0;
}
.duo__poignee::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--blanc);
}

.duo__prise {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--blanc);
  transition: transform var(--vif);
}
.duo__prise::before,
.duo__prise::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  margin-top: -5px;
  border-block: 5px solid transparent;
}
.duo__prise::before { left: 12px;  border-right: 6px solid var(--noir); }
.duo__prise::after  { right: 12px; border-left:  6px solid var(--noir); }

.duo__poignee:hover .duo__prise,
.duo__poignee:focus-visible .duo__prise { transform: scale(1.12); }

.duo__note {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 3rem 1.2rem 1rem;
  font-size: .8rem;
  color: var(--blanc);
  background: linear-gradient(to top, rgba(10,10,10,.9), transparent);
  pointer-events: none;
}

/* --- 6. Contre-indications et auto-vérification ------------ */

/* .colonne est défini pour la section claire du cadre légal.
   Ici le fond est noir : on rétablit les contrastes. */
.verifier .colonne li { color: var(--brume); border-bottom-color: var(--filet); }
.verifier .colonne p  { color: var(--brume); }

.controle {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--filet);
  background: var(--encre);
}

.controle h3 { margin-bottom: .8rem; }
.controle__intro { color: var(--brume); max-width: 56ch; }

.controle__liste {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2.5rem;
}

.controle__case {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--filet);
  cursor: pointer;
  color: var(--brume);
  font-size: .93rem;
  transition: color var(--vif);
}
.controle__case:hover { color: var(--blanc); }
.controle__case input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .18rem;
  accent-color: #F6F5F3;
  cursor: pointer;
}

.controle__verdict {
  margin: 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--filet);
  border-left-width: 3px;
  border-left-color: var(--filet-fort);
  font-size: .95rem;
  color: var(--brume);
  max-width: none;
  transition: border-color var(--vif), color var(--vif);
}
.controle__verdict.est-alerte {
  border-left-color: #C9A96A;
  color: var(--blanc);
}
.controle__verdict ul { list-style: none; margin: 0; padding: 0; }
.controle__verdict li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--filet);
}
.controle__verdict li:last-child { border-bottom: 0; }
.controle__fin {
  display: block;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--filet);
  color: var(--sourdine);
  font-size: .86rem;
}

/* --- 7. Infos pratiques : le studio, en une bande -----------
   Trois colonnes : le titre, la carte du studio (adresse et
   contact, mis en avant comme un carton), puis les quatre
   règles en lignes courtes. Un seul filet d'éclat, en haut de
   la carte : c'est le seul ornement.                           */

.pratique-section.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }

.studio {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 3.4vw, 3.6rem);
  align-items: start;
}

.studio__tete h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  margin: 0 0 1.1rem;
}
.studio__tete h2 em { font-style: italic; color: var(--rose-clair); }
.studio__tete p { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--brume); max-width: 32ch; }

/* La carte du studio */
.studio__carte {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--encre);
  border: 1px solid var(--filet);
}
.studio__carte::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}
.studio__sur {
  margin: 0 0 1rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose);
}
.studio__adresse {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.studio__acces { margin: 0 0 1.6rem; font-size: .84rem; line-height: 1.6; color: var(--sourdine); }

.studio__tel,
.studio__mail { display: table; transition: color var(--vif); }
.studio__tel {
  padding-top: 1.4rem;
  border-top: 1px solid var(--filet);
  width: 100%;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  letter-spacing: .01em;
  line-height: 1.1;
  margin-bottom: .45rem;
}
.studio__mail { font-size: .9rem; color: var(--brume); }
.studio__tel:hover,
.studio__mail:hover { color: var(--rose-clair); }
.studio__delai { margin: .9rem 0 0; font-size: .78rem; color: var(--sourdine); }

.studio__lien {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--vif);
}
.studio__lien i { display: block; width: 28px; height: 1px; background: var(--rose); transition: width var(--moyen); }
.studio__lien:hover { color: var(--rose-clair); }
.studio__lien:hover i { width: 48px; }

/* Les quatre règles */
.studio__infos { margin: 0; }
.studio__ligne {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--filet);
  transition: border-color var(--moyen);
}
.studio__ligne:last-child { border-bottom: 1px solid var(--filet); }
.studio__ligne:hover { border-top-color: rgba(217,167,189,.45); }
.studio__ligne dt {
  padding-top: .2rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.studio__ligne dd { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--brume); transition: color var(--vif); }
.studio__ligne:hover dd { color: var(--blanc); }

@media (max-width: 1000px) {
  .studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .studio__tete { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
  .studio__tete p { max-width: none; }
}
@media (max-width: 700px) {
  .studio { grid-template-columns: 1fr; gap: 1.8rem; }
  .studio__tete { display: block; }
  .studio__ligne { grid-template-columns: 1fr; gap: .35rem; padding: .9rem 0; }
}

/* --- 8. Les blocs de conclusion ---------------------------- */

.reserver {
  text-align: center;
  border-top: 1px solid var(--filet);
}
.reserver h2 { margin-bottom: 1.2rem; }
.reserver > .contenu > p {
  margin-inline: auto;
  color: var(--brume);
  margin-bottom: 2.6rem;
}

/* La seule sortie de la page cliente. Discrète, et tout en bas :
   elle existe pour la visiteuse qui s'est trompée de page, pas
   pour détourner celle qui allait réserver. */
.passerelle {
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
  font-size: .82rem;
  color: var(--sourdine);
  max-width: 46ch;
}
.passerelle a { border-bottom: 1px solid var(--filet-fort); }
.passerelle a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* --- 9. Page de vente : le premier écran ------------------- */

.vente-hero {
  position: relative;
  padding: 9rem 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--filet);
  isolation: isolate;
  overflow: hidden;
}
.vente-hero__voile {
  position: absolute;
  inset: -40% -10% auto -10%;
  z-index: -1;
  height: 120%;
  background: radial-gradient(50% 45% at 22% 30%, rgba(246,245,243,.07) 0%, transparent 70%);
}

.vente-hero__inner { max-width: 56rem; }

.vente-hero h1 {
  font-size: clamp(2.7rem, 7.4vw, 6.6rem);
  margin-bottom: 1.8rem;
}
.vente-hero h1 em { font-style: italic; }

.vente-hero__texte {
  color: var(--brume);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  max-width: 52ch;
  margin-bottom: 2.4rem;
}

.vente-hero__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.2rem;
  padding: 1.4rem 0;
  border-block: 1px solid var(--filet);
  margin-bottom: 2.4rem;
}
.vente-hero__prix b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vente-hero__prix del { color: var(--sourdine); text-decoration-thickness: 1px; }
.vente-hero__prix span { color: var(--sourdine); font-size: .88rem; }

.fil { color: var(--brume); border-bottom: 1px solid var(--filet); }
.fil:hover { color: var(--blanc); }

/* --- 10. Pour qui / pas pour qui --------------------------- */

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

.liste-pour,
.liste-contre { padding: clamp(1.8rem, 3vw, 3rem); }
.liste-contre { border-left: 1px solid var(--filet); background: var(--encre); }

.liste-pour h3,
.liste-contre h3 { margin-bottom: 1.8rem; }
.liste-contre h3 { color: var(--brume); }

.liste-pour ul,
.liste-contre ul { list-style: none; margin: 0; padding: 0; }

.liste-pour li,
.liste-contre li {
  position: relative;
  padding: .9rem 0 .9rem 2rem;
  border-top: 1px solid var(--filet);
  font-size: .95rem;
  color: var(--brume);
}
.liste-pour li:first-child,
.liste-contre li:first-child { border-top: 0; }

.liste-pour li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.42em;
  width: 14px; height: 1px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}
.liste-contre li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.12em;
  width: 11px; height: 11px;
  border: 1px solid var(--filet-fort);
}

/* --- 11. Le kit -------------------------------------------- */

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

.kit__item {
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--noir);
  transition: background var(--moyen);
}
.kit__item:hover { background: var(--encre); }

.kit__item h4 {
  position: relative;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.18rem;
  font-weight: 400;
  margin: 0 0 .6rem;
}
.kit__item p { margin: 0; color: var(--brume); font-size: .9rem; }

/* --- 12. Les témoignages ----------------------------------- */

.temoignages__compte {
  display: block;
  margin-top: .8rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blanc);
}

.paroles { position: relative; }

/* La piste prend la largeur de ses cartes : avec deux ou trois
   témoignages, le reste de la ligne restait une grande case grise
   (le fond de la piste, qui servait aussi de séparateur). Les
   cartes se séparent maintenant par un filet à gauche. */
.paroles__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 380px);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--filet);
  scrollbar-width: none;
}
.parole + .parole { border-left: 1px solid var(--filet); }
.paroles__piste::-webkit-scrollbar { display: none; }

.parole {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--noir);
  padding: 0 0 1.8rem;
}

.parole__ecran {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--encre);
  margin-bottom: 1.6rem;
}
.parole__ecran img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--lent);
}
.parole:hover .parole__ecran img { filter: grayscale(0); }
.parole__ecran video { width: 100%; height: 100%; object-fit: cover; background: var(--noir); }

.parole__initiale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 5rem;
  color: var(--filet-fort);
}

.parole__lecture {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 2.5rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(10,10,10,.92), transparent);
  color: var(--blanc);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
}
.parole__lecture i {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--blanc);
  border-radius: 50%;
  position: relative;
  transition: background var(--vif);
}
.parole__lecture i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -6px 0 0 -3px;
  border-block: 6px solid transparent;
  border-left: 10px solid var(--blanc);
  transition: border-left-color var(--vif);
}
.parole__lecture:hover i { background: var(--blanc); }
.parole__lecture:hover i::after { border-left-color: var(--noir); }

.parole blockquote {
  margin: 0 1.6rem 1.4rem;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.12rem;
  line-height: 1.42;
  font-style: italic;
}
/* Un témoignage sans photo ni vidéo : la citation collait au
   haut de la carte. */
.parole > blockquote:first-child { margin-top: 1.8rem; }

.parole__pied {
  margin: auto 1.6rem 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
}
.parole__pied b { display: block; font-weight: 500; font-size: .92rem; }
.parole__pied span {
  display: block;
  margin-top: .25rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
}

.paroles__pilotage {
  display: flex;
  gap: .5rem;
  margin-top: 1.2rem;
  justify-content: flex-end;
}
.paroles__fleche {
  width: 46px; height: 46px;
  border: 1px solid var(--filet);
  color: var(--brume);
  font-size: 1rem;
  transition: color var(--vif), border-color var(--vif);
}
.paroles__fleche:hover { color: var(--blanc); border-color: var(--blanc); }

/* --- 13. Le prix et le paiement en trois fois -------------- */

.prix-bloc {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  border: 1px solid var(--filet);
  background: var(--encre);
}

.prix-bloc__chiffre {
  padding: clamp(2rem, 4vw, 3.5rem);
  border-right: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prix-bloc__chiffre b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.prix-bloc__chiffre del {
  margin-top: .6rem;
  color: var(--sourdine);
  text-decoration-thickness: 1px;
}
.prix-bloc__chiffre span {
  margin-top: 1.2rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sourdine);
}

.prix-bloc__detail { padding: clamp(2rem, 4vw, 3.5rem); }
.prix-bloc__detail h3 { margin-bottom: 1.6rem; }
.prix-bloc__detail .btn { margin-top: 1.8rem; }

.echeances {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  counter-reset: echeance;
}
.echeances li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--filet);
}
.echeances li:last-child { border-bottom: 1px solid var(--filet); }
.echeances b {
  flex: none;
  min-width: 5.5rem;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.echeances span { color: var(--brume); font-size: .9rem; }

/* Deux disciplines, deux prix, deux boutons. */
.variantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border: 1px solid var(--filet);
}
.variante {
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 3rem);
  border-left: 1px solid var(--filet);
}
.variante:first-child { border-left: 0; }
.variante h3 { margin-bottom: 1rem; }
.variante__resume { color: var(--brume); font-size: .93rem; margin-bottom: 2rem; }
.variante__prix {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2.6rem, 4.4vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.variante__mens { font-size: .82rem; color: var(--sourdine); margin: .5rem 0 1.4rem; }
.variante__duree {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sourdine);
  padding-block: 1.1rem;
  border-block: 1px solid var(--filet);
  margin-bottom: 2rem;
}
.variante .btn { margin-top: auto; width: 100%; }

.inclus-rappel {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.inclus-rappel li {
  position: relative;
  padding: .8rem 0 .8rem 1.6rem;
  border-bottom: 1px solid var(--filet);
  font-size: .9rem;
  color: var(--brume);
}
.inclus-rappel li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.3em;
  width: 7px; height: 7px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform: rotate(45deg);
}

/* --- 14. Les deux autres formules -------------------------- */

.autres { margin-top: clamp(3rem, 6vw, 5rem); }

.autres__titre {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: 1rem;
  text-align: left;
}

.autre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--filet);
  text-align: left;
  transition: padding-left var(--moyen);
}
.autre:last-child { border-bottom: 1px solid var(--filet); }
.autre:hover { padding-left: 1rem; }
.autre b { font-family: var(--serif); font-stretch: var(--etroit); font-size: 1.4rem; font-weight: 400; }
.autre span { flex: 1 1 240px; color: var(--brume); font-size: .9rem; }
.autre em {
  font-style: normal;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* --- 15. Adaptatif ----------------------------------------- */

@media (max-width: 1000px) {
  .cabine {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 7.5rem;
  }
  .cabine__media { inset: 0; }
  .cabine__voile {
    background:
      linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.72) 45%, var(--noir) 100%);
  }

  .prix-bloc { grid-template-columns: 1fr; }
  .prix-bloc__chiffre { border-right: 0; border-bottom: 1px solid var(--filet); }

  .duo-listes { grid-template-columns: 1fr; }
  .liste-contre { border-left: 0; border-top: 1px solid var(--filet); }

  .cartes { grid-template-columns: 1fr; }
  .carte { border-left: 0; border-top: 1px solid var(--filet); }
  .carte:first-child { border-top: 0; }

  .variantes { grid-template-columns: 1fr; }
  .variante { border-left: 0; border-top: 1px solid var(--filet); }
  .variante:first-child { border-top: 0; }
}

@media (max-width: 700px) {
  .etape { grid-template-columns: 76px minmax(0, 1fr); }
  .etape__jauge { grid-column: 1 / -1; margin-top: .4rem; }
  .appel { flex-direction: column; align-items: stretch; }
  .appel .btn { width: 100%; }
  .duo { aspect-ratio: 4 / 3; }
  .paroles__piste { grid-auto-columns: minmax(260px, 84vw); }
  .paroles__pilotage { display: none; }
  .tarifs th em { max-width: none; }
}

/* --- 16. Accessibilité ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .paroles__piste { scroll-behavior: auto; }
  .autre:hover { padding-left: 0; }
}

/* ============================================================
   17. LE QUIZ D'ORIENTATION
   ============================================================ */

.quiz-section { background: var(--encre); border-block: 1px solid var(--filet); }

.quiz {
  border: 1px solid var(--filet);
  background: var(--noir);
  padding: clamp(1.6rem, 4vw, 3.5rem);
}

/* La jauge n'apparaît qu'avec le JavaScript : sans lui, les
   quatre questions sont visibles d'un coup et il n'y a rien à
   jauger. */
.quiz__jauge {
  height: 1px;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  background: var(--filet);
}
.quiz__jauge i {
  display: block;
  height: 2px;
  margin-top: -.5px;
  width: 0;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transition: width var(--moyen);
}

/* Sans JavaScript : tout est visible, séparé par un filet.
   Avec : une étape à la fois. */
.quiz__etape {
  border: 0;
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--filet);
}
.quiz__etape:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.quiz.est-guide .quiz__etape {
  display: none;
  border-bottom: 0;
  margin: 0;
  padding: 0;
}
.quiz.est-guide .quiz__etape.est-actif { display: block; }

.quiz__etape legend { display: block; width: 100%; padding: 0; }

.quiz__rang {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: 1rem;
}

.quiz__etape legend b {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
}

.quiz__etape legend em {
  display: block;
  font-style: normal;
  color: var(--brume);
  font-size: .92rem;
  max-width: 56ch;
  margin-bottom: 2rem;
}

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

.quiz__option {
  position: relative;
  display: block;
  background: var(--noir);
  cursor: pointer;
  transition: background var(--vif);
}
.quiz__option:hover { background: var(--encre); }

.quiz__option input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.quiz__option__corps {
  display: block;
  padding: 1.5rem 1.6rem 1.5rem 3.2rem;
  min-height: 100%;
}

/* La pastille cochée : un losange, comme partout ailleurs sur
   le site. Pas de bouton radio natif. */
.quiz__option__corps::before {
  content: "";
  position: absolute;
  left: 1.6rem; top: 1.85rem;
  width: 11px; height: 11px;
  border: 1px solid var(--filet-fort);
  transform: rotate(45deg);
  transition: background var(--vif), border-color var(--vif);
}
.quiz__option input:checked + .quiz__option__corps::before {
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  border-color: transparent;
}
.quiz__option input:checked + .quiz__option__corps { background: var(--encre); }
.quiz__option input:focus-visible + .quiz__option__corps {
  outline: 2px solid var(--blanc);
  outline-offset: -2px;
}

.quiz__option__corps b { display: block; font-size: 1.02rem; font-weight: 400; }
.quiz__option__corps em {
  display: block;
  margin-top: .35rem;
  font-style: normal;
  font-size: .84rem;
  color: var(--sourdine);
}

.quiz__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.quiz__retour {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sourdine);
  border-bottom: 1px solid var(--filet);
  padding-bottom: .2rem;
  transition: color var(--vif), border-color var(--vif);
}
.quiz__retour:hover:not(:disabled) { color: var(--blanc); border-color: var(--blanc); }
.quiz__retour:disabled { opacity: .3; cursor: default; }

/* --- La recommandation ------------------------------------- */

.quiz-resultats[hidden] { display: none; }
.reco[hidden] { display: none; }

.reco {
  border: 1px solid var(--filet-fort);
  background: var(--noir);
  padding: clamp(1.8rem, 4vw, 3.5rem);
  position: relative;
}
.reco::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}

.reco__etiquette {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: 1.2rem;
}

.reco h3 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: .8rem;
}

.reco__nom {
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brume);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 1.8rem;
}

.reco__raison { color: var(--blanc); font-size: 1.02rem; max-width: 62ch; }
.reco__complement { color: var(--brume); max-width: 62ch; }
.reco__complement:empty { display: none; }

.reco__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 2rem;
  margin: 1.8rem 0;
  padding: 0;
}
.reco__points li {
  position: relative;
  padding: .8rem 0 .8rem 1.6rem;
  border-top: 1px solid var(--filet);
  font-size: .9rem;
  color: var(--brume);
}
.reco__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.28em;
  width: 7px; height: 7px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform: rotate(45deg);
}

.reco__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.2rem;
  padding: 1.4rem 0;
  border-block: 1px solid var(--filet);
  margin-bottom: 1.8rem;
}
.reco__prix b {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reco__prix span { color: var(--sourdine); font-size: .88rem; }

.reco__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.4rem;
}

.reco__lien-page { font-size: .86rem; color: var(--sourdine); }
.reco__lien-page a { border-bottom: 1px solid var(--filet-fort); }
.reco__lien-page a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* --- La capture d'e-mail ----------------------------------- */

.reco__email {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}
.reco__email label {
  display: block;
  font-size: .86rem;
  color: var(--brume);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.reco__email__ligne { display: flex; flex-wrap: wrap; gap: .6rem; }
.reco__email input[type="email"] {
  flex: 1 1 260px;
  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);
}
.reco__email input::placeholder { color: var(--sourdine); }
.reco__email input:focus { outline: none; border-color: var(--blanc); }
.reco__email .btn { border-color: var(--filet-fort); }

.reco__refaire { margin: 1.8rem 0 0; }
.reco__refaire button {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sourdine);
  border-bottom: 1px solid var(--filet);
  padding-bottom: .2rem;
}
.reco__refaire button:hover { color: var(--blanc); border-color: var(--blanc); }

.orientation-resultat { padding-top: 9rem; }
.orientation-resultat__reprise {
  margin-top: 2.5rem;
  font-size: .84rem;
  color: var(--sourdine);
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.orientation-resultat__reprise a { border-bottom: 1px solid var(--filet-fort); }
.orientation-resultat__reprise a:hover { color: var(--blanc); }

/* ============================================================
   18. LE KIT, TRAITÉ COMME UN OBJET
   ============================================================ */

.kit-objet {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
}

.kit-objet__photo {
  position: relative;
  margin: 0;
  background: var(--encre);
  overflow: hidden;
}
.kit-objet__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kit-objet__repere {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(10,10,10,.94), transparent);
  font-size: .76rem;
  color: var(--sourdine);
  line-height: 1.5;
}
.kit-objet__repere code {
  color: var(--brume);
  font-family: inherit;
  border-bottom: 1px solid var(--filet-fort);
}

/* Le point posé sur la photo. Un losange, comme le reste du
   site — pas une pastille numérotée. */
.kit-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kit-point i {
  display: block;
  width: 13px; height: 13px;
  background: var(--blanc);
  transform: rotate(45deg);
  transition: transform var(--moyen), background var(--vif);
}

/* L'anneau qui respire : c'est ce qui dit « on peut toucher ». */
.kit-point::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(246,245,243,.55);
  border-radius: 50%;
  transform: scale(.8);
  opacity: 0;
  transition: transform var(--moyen), opacity var(--moyen);
}
.kit-point:hover::before,
.kit-point:focus-visible::before { transform: scale(1); opacity: 1; }

.kit-point.est-actif i { transform: rotate(45deg) scale(1.45); background: #FFFFFF; }
.kit-point.est-actif::before {
  transform: scale(1.15);
  opacity: 1;
  border-color: var(--blanc);
}

.kit-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--noir);
  display: flex;
  flex-direction: column;
}

.kit-ligne {
  padding: 1.3rem clamp(1.2rem, 2.4vw, 2rem);
  border-top: 1px solid var(--filet);
  cursor: pointer;
  transition: background var(--vif), padding-left var(--moyen);
}
.kit-ligne:first-child { border-top: 0; }
.kit-ligne:hover { background: var(--encre); }

.kit-ligne h4 {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 .35rem;
  color: var(--brume);
  transition: color var(--vif);
}
.kit-ligne p {
  margin: .35rem 0 0;
  font-size: .88rem;
  color: var(--sourdine);
}

/* Le repli n'existe que si le JavaScript a pris la main. Sans
   lui, les six descriptions restent lisibles d'un bloc — c'est
   aussi ce que lit un moteur de recherche. */
.kit-objet.est-explorable .kit-ligne p {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--moyen), opacity var(--moyen), margin var(--moyen);
}

.kit-ligne.est-actif { background: var(--encre); }
.kit-ligne.est-actif h4 { color: var(--blanc); }
.kit-objet.est-explorable .kit-ligne.est-actif p {
  max-height: 12rem;
  opacity: 1;
  margin-top: .35rem;
}

/* ============================================================
   19. L'APPEL DE QUINZE MINUTES
   Volontairement plus discret que le bouton d'achat : il est là
   pour celles qui hésitent à cause du montant, pas pour
   remplacer la vente.
   ============================================================ */

.btn--appel { letter-spacing: .08em; }

.appel-discret {
  margin: 1.4rem 0 0;
  font-size: .88rem;
  color: var(--sourdine);
  max-width: 54ch;
}
.appel-discret a {
  color: var(--brume);
  border-bottom: 1px solid var(--filet-fort);
}
.appel-discret a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* ============================================================
   20. Adaptatif des trois nouveaux blocs
   ============================================================ */

@media (max-width: 900px) {
  .kit-objet { grid-template-columns: 1fr; }
  .kit-objet__photo { aspect-ratio: 4 / 3; }
  .kit-liste { border-top: 1px solid var(--filet); }
}

@media (max-width: 700px) {
  .quiz__choix { grid-template-columns: 1fr; }
  .reco__actions .btn { width: 100%; }
  .quiz__pied .btn { width: 100%; }
  .kit-point { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

@media (prefers-reduced-motion: reduce) {
  .kit-point::before { transition: none; }
  .kit-ligne p { transition: none; }
}


/* ============================================================
   21. LE SIMULATEUR, SUR LES PAGES DE VENTE
   La grille .simulateur vit dans style.css : on n'ajoute ici
   que ce qui lui manquait en changeant de page.
   ============================================================ */

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

.sim__formules {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  margin-bottom: 2.4rem;
}

.sim__formule {
  flex: 1 1 160px;
  padding: .9rem 1.1rem;
  background: var(--noir);
  text-align: left;
  color: var(--brume);
  transition: background var(--vif), color var(--vif);
}
.sim__formule b { display: block; font-size: .88rem; font-weight: 400; }
.sim__formule em {
  display: block;
  margin-top: .2rem;
  font-style: normal;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.sim__formule:hover { color: var(--blanc); }
.sim__formule.est-actif { background: var(--blanc); color: var(--noir); }

.sim__note {
  margin: 0;
  font-size: .8rem;
  color: var(--sourdine);
  max-width: 46ch;
}

/* ============================================================
   22. LES PAGES LÉGALES
   Un seul but : être lues. Colonne étroite, filets fins,
   aucune décoration. Un acheteur méfiant vient justement ici
   avant de payer — c'est le pire endroit du site pour avoir
   l'air bâclé.
   ============================================================ */

.legale { padding-top: 9rem; }
.legale .contenu { max-width: 900px; }

.legale__tete {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--filet);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.legale__tete h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin-bottom: 1rem;
}
.legale__tete p {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
}

/* Le sommaire des CGV : quinze articles, on ne fait pas défiler
   à l'aveugle. */
.legale__sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.legale__sommaire a {
  flex: 1 1 160px;
  padding: .8rem 1rem;
  background: var(--noir);
  font-size: .8rem;
  color: var(--brume);
  transition: background var(--vif), color var(--vif);
}
.legale__sommaire a:hover { background: var(--encre); color: var(--blanc); }

.legale__chapeau {
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--blanc);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 2.5rem;
  max-width: none;
}

.legale__corps h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
  scroll-margin-top: 100px;
}
.legale__corps h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.legale__corps h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin: 2rem 0 .8rem;
}

.legale__corps p,
.legale__corps li { color: var(--brume); font-size: .96rem; }
.legale__corps p { max-width: 72ch; }
.legale__corps strong { color: var(--blanc); font-weight: 500; }

.legale__corps ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.legale__corps li {
  position: relative;
  padding: .7rem 0 .7rem 1.6rem;
  border-bottom: 1px solid var(--filet);
}
.legale__corps li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25em;
  width: 7px; height: 7px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transform: rotate(45deg);
}

.legale__corps a { border-bottom: 1px solid var(--filet-fort); }
.legale__corps a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* La fiche d'identité de l'éditrice. */
.legale__fiche {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
.legale__fiche dt,
.legale__fiche dd {
  padding: .85rem 0;
  border-bottom: 1px solid var(--filet);
  margin: 0;
}
.legale__fiche dt {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sourdine);
  padding-right: 1.5rem;
}
.legale__fiche dd { color: var(--brume); font-size: .96rem; }

/* La base légale d'un traitement : une ligne technique, mise à
   part pour ne pas alourdir la lecture. */
.legale__base {
  font-size: .84rem !important;
  color: var(--sourdine) !important;
  padding-left: 1.2rem;
  border-left: 1px solid var(--filet);
}

.legale__encart {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--filet);
  background: var(--encre);
  font-size: .9rem !important;
  line-height: 1.8;
  max-width: none !important;
}

.legale__voisines {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.legale__voisines a {
  flex: 1 1 220px;
  padding: 1.3rem 1.4rem;
  background: var(--noir);
  font-size: .86rem;
  color: var(--brume);
  transition: background var(--vif), color var(--vif);
}
.legale__voisines a:hover { background: var(--encre); color: var(--blanc); }

@media (max-width: 700px) {
  .legale__fiche { grid-template-columns: 1fr; }
  .legale__fiche dt { padding-bottom: .2rem; border-bottom: 0; }
}

/* --- 17. Les sessions --------------------------------------
   Une ligne par date. La date à gauche, en grand :
   c'est l'information qu'on vient chercher, elle ne se lit pas
   dans un tableau de spécifications. */

.sessions__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.session {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--filet);
  transition: background var(--vif);
}
.session:hover { background: var(--encre); }

.session--complet { opacity: .58; }

.session__date b {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  font-weight: 400;
  text-transform: lowercase;
}
.session__annee {
  display: block;
  margin-top: .3rem;
  font-size: .74rem;
  letter-spacing: .13em;
  color: var(--sourdine);
}

.session__quoi h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.session__quoi p  { margin: 0; font-size: .86rem; color: var(--sourdine); }
.session__note    { color: var(--sourdine); }

.session__prix { text-align: right; white-space: nowrap; }
.session__prix b {
  display: block;
  font-family: var(--serif); font-stretch: var(--etroit);
  font-size: 1.25rem;
  font-weight: 400;
}
.session__places {
  display: block;
  margin-top: .3rem;
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sourdine);
}
/* Les deux dernières places se signalent, sans compte à rebours
   ni bandeau rouge : la marque ne crie pas. */
.session__places.est-tendu { color: var(--blanc); }

.session__action .btn { white-space: nowrap; }

.sessions__pied {
  margin: 2rem 0 0;
  font-size: .9rem;
  color: var(--sourdine);
  max-width: 62ch;
}
.sessions__pied a { border-bottom: 1px solid var(--filet-fort); }
.sessions__pied a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

.sessions__vide {
  border: 1px solid var(--filet);
  background: var(--encre);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.sessions__vide p { color: var(--brume); margin-bottom: 1.6rem; }

/* La ligne posée dans le premier écran d'une page de vente. */
.prochaine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.6rem 0 0;
  font-size: .88rem;
  color: var(--brume);
  max-width: none;
}
.prochaine b { color: var(--blanc); font-weight: 400; }
.prochaine a {
  color: var(--sourdine);
  border-bottom: 1px solid var(--filet);
  margin-left: .3rem;
}
.prochaine a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

.prochaine__pastille {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blanc);
  flex: none;
}

/* La date rappelée sur la carte d'une formule. */
.offre__date {
  font-size: .82rem;
  color: var(--brume);
  margin: -.8rem 0 1.6rem;
}
.offre__date b { color: var(--blanc); font-weight: 400; }

/* --- 18. Le dossier d'assurabilité -------------------------
   Numéroté : ce sont des pièces d'un dossier, pas des arguments
   de vente. La liste se lit comme une checklist qu'on tend à un
   assureur au téléphone. */

.dossier {
  list-style: none;
  counter-reset: piece;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
}

.dossier__piece {
  counter-increment: piece;
  background: var(--noir);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.dossier__piece::before {
  content: counter(piece, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--sourdine);
}
.dossier__piece h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.dossier__piece p  { margin: 0; font-size: .88rem; color: var(--brume); }

/* La phrase qui dit ce que le dossier ne garantit pas. Elle est
   mise en valeur, pas cachée : c'est elle qui rend le reste
   crédible. */
.dossier__verite {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 1px solid var(--filet-fort);
  font-size: .93rem;
  color: var(--brume);
  max-width: 68ch;
}

/* --- 19. Adaptatif des blocs 17 et 18 ---------------------- */

@media (max-width: 860px) {
  .session {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  prix"
      "quoi  quoi"
      "action action";
    align-items: start;
    gap: .9rem;
  }
  .session__date   { grid-area: date; }
  .session__prix   { grid-area: prix; }
  .session__quoi   { grid-area: quoi; }
  .session__action { grid-area: action; }
  .session__action .btn { width: 100%; text-align: center; }
}


/* --- 20. Les avis clientes --------------------------------
   Une seule bande : à gauche le titre et les deux notes, en
   petit ; à droite un avis à la fois, qui change tout seul.
   Les étoiles sont des losanges : sur ce site, l'étoile est un
   strass.                                                    */

.avis__bande {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-block: 1px solid var(--filet);
}

.avis__titre {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  margin: 0 0 1.8rem;
}

.avis__notes { display: grid; gap: .2rem; }
.avis__note {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem 0;
  border-top: 1px solid var(--filet);
  color: var(--brume);
  transition: color var(--vif);
}
.avis__note:last-child { border-bottom: 1px solid var(--filet); }
.avis__chiffre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blanc);
  min-width: 2.4ch;
}
.avis__note .losanges { transform: scale(.82); transform-origin: left center; margin-right: -.6rem; }
.avis__source { font-size: .82rem; letter-spacing: .02em; }
.avis__source i { font-style: normal; opacity: .6; }
a.avis__note:hover { color: var(--blanc); }
a.avis__note:hover .avis__source i { opacity: 1; color: var(--rose); }

/* Les cinq losanges : un rang vide, un rang plein coupé à la
   largeur de la note. */
.losanges {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.losanges__fond,
.losanges__plein {
  display: flex;
  gap: 9px;
  padding: 3px;
}
.losanges__plein {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}
.losanges i {
  flex: none;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
}
.losanges__fond i  { box-shadow: inset 0 0 0 1px var(--filet-fort); }
.losanges__plein i { background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%; }

/* Un avis à la fois. Les extraits sont empilés au même endroit
   (le cadre prend la hauteur du plus long : rien ne saute), et
   seul l'actif est visible. Sans JavaScript, ils s'affichent
   tous, l'un sous l'autre. */
.avis__extraits { display: grid; gap: 2rem; }
[data-avis].est-pret .avis__extraits { gap: 0; }
[data-avis].est-pret .extrait {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s .6s;
}
[data-avis].est-pret .extrait.est-actif {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .7s ease .15s, transform .9s cubic-bezier(.2,.8,.2,1) .15s, visibility 0s;
}

.extrait { margin: 0; position: relative; }
.extrait blockquote { margin: 0; position: relative; }
.extrait blockquote::before {           /* le guillemet, en filigrane */
  content: "“";
  position: absolute;
  left: -.08em; top: -.42em;
  font-family: var(--serif);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--rose);
  opacity: .22;
  pointer-events: none;
}
.extrait blockquote p {
  margin: 0;
  padding-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  max-width: 44ch;
}
.extrait figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .9rem;
  margin-top: 1.4rem;
  font-size: .8rem;
  color: var(--brume);
}
.extrait figcaption b { font-weight: 500; color: var(--blanc); letter-spacing: .02em; }
.extrait__source { color: var(--sourdine); }

.avis__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.avis__fleche {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--brume);
  font-size: .9rem;
  transition: border-color var(--vif), color var(--vif), background-color var(--vif);
}
.avis__fleche:hover,
.avis__fleche:focus-visible { border-color: var(--rose); color: var(--blanc); background: rgba(217,167,189,.06); }
.avis__compteur { font-size: .75rem; letter-spacing: .16em; color: var(--sourdine); min-width: 5.5ch; text-align: center; }
.avis__compteur b { font-weight: 500; color: var(--blanc); }
.avis__temps {
  flex: 1;
  max-width: 160px;
  height: 1px;
  background: var(--filet);
  position: relative;
  overflow: hidden;
}
.avis__temps i {
  position: absolute;
  inset: 0;
  background: var(--rose);
  transform-origin: left center;
  transform: scaleX(0);
}

.avis__mention {
  margin: 1rem 0 0;
  font-size: .74rem;
  color: var(--sourdine);
  max-width: 80ch;
}

@media (max-width: 900px) {
  .avis__bande { grid-template-columns: 1fr; gap: 2rem; }
  .avis__titre { margin-bottom: 1.2rem; }
}

/* La ligne de gage sous un bouton : soulignée seulement si
   elle mène quelque part. */
.gage-avis a {
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: .25em;
  transition: color var(--vif);
}
.gage-avis a:hover { color: var(--blanc); text-decoration-color: currentColor; }

/* Le chiffre du bandeau d'accueil, quand il mène à sa source. */
a.chiffre { transition: background var(--vif); }
a.chiffre:hover { background: rgba(246, 245, 243, .03); }



/* --- 21. Les premiers écrans avec photo -------------------
   Formations : le texte à gauche, Camillia à la lampe à droite,
   en entier, comme un tirage posé dans le cadre noir.
   Prestations : la photo n'a plus de bord net. Elle s'efface
   vers le noir côté texte, sans couture visible.            */

/* Les boutons du premier écran s'alignent sur le texte. Ils
   restaient centrés dans la colonne, décalés vers la droite. */
.vente-hero .hero__actions,
.cabine .hero__actions { justify-content: flex-start; }

.vente-hero--photo { padding-top: clamp(7rem, 12vh, 9rem); }
.vente-hero--photo .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.vente-hero--photo h1 { font-size: clamp(2.7rem, 6vw, 5.8rem); }

.vente-hero__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 1600 / 1404;
  overflow: hidden;
}
.vente-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le filet rose de la marque, en bas du tirage. */
.vente-hero__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
}

@media (max-width: 1000px) {
  .vente-hero--photo { padding-top: 5.5rem; }
  .vente-hero--photo .contenu { grid-template-columns: 1fr; gap: 2rem; }
  /* Sur téléphone, la photo passe en tête : c'est elle qu'on
     voit en arrivant. */
  .vente-hero__photo {
    order: -1;
    margin-inline: calc(var(--marge) * -1);
    aspect-ratio: 5 / 4;
  }
  .vente-hero__photo img { object-position: 70% 30%; }
}

/* Prestations */
.cabine__media {
  inset: 0 0 0 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.cabine__media img { object-position: 50% 40%; }
.cabine__voile {
  background:
    linear-gradient(90deg, var(--noir) 0%, var(--noir) 30%, rgba(10,10,10,.55) 48%, rgba(10,10,10,0) 70%),
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, transparent 22%, transparent 72%, var(--noir) 100%);
}

@media (max-width: 1000px) {
  .cabine { padding-top: min(58svh, 30rem); }
  .cabine__media {
    inset: 0 0 auto 0;
    height: min(72svh, 38rem);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .cabine__media img { object-position: 50% 45%; }
  .cabine__voile {
    background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 40%, rgba(10,10,10,.75) 70%, var(--noir) 100%);
  }
  .cabine .hero__defilement { display: none; }
}

/* Les petites garanties sous les boutons : plus lisibles. */
.cabine__gages { color: var(--brume); font-size: .82rem; letter-spacing: .03em; }

/* Tarifs : la durée et le prix se collaient (« 20 MIN20 € »).
   La marge de la durée était écrasée par la règle générale des
   cellules, plus précise. */
.tarifs td.tarifs__duree { padding-right: 1.1rem; padding-left: .8rem; }


/* --- 22. Lot 2 : les photos posées, et le ménage ----------- */

/* Les photos-preuves, sur chaque carte de tarifs. Trois côte à
   côte en portrait ; une seule prend toute la largeur. */
.preuves {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 1.6rem;
}
.preuves__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--encre);
}
.preuves[style*="--n: 1"] .preuves__photo { aspect-ratio: 3 / 2; }
.preuves[style*="--n: 2"] .preuves__photo { aspect-ratio: 1 / 1; }
.preuves__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform var(--lent);
}

/* Le kit sans sa photo : la liste seule, sur deux colonnes. */
.kit-liste--seule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  background: none;
}
.kit-liste--seule .kit-ligne {
  cursor: default;
  padding-inline: 0;
  border-top: 1px solid var(--filet);
}
.kit-liste--seule .kit-ligne:hover { background: none; }
.kit-liste--seule .kit-ligne h4 { color: var(--blanc); }
.kit-liste--seule .kit-ligne p { color: var(--brume); }

/* Le dossier pour l'assureur : la suite du cadre légal, plus
   une section à part. Et plus de case grise quand le nombre de
   pièces ne remplit pas la dernière ligne. */
.assurance--suite { padding-top: clamp(3rem, 6vw, 4.5rem); }
.tete--petite { display: block; padding-bottom: 1.2rem; margin-bottom: 2rem; }
.tete--petite h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: .8rem; }
.tete--petite h3::before { display: none; }
.dossier {
  background: none;
  border: 0;
  gap: 0;
}
.dossier__piece {
  border: 1px solid var(--filet);
  margin: 0 -1px -1px 0;
}

/* Le cadre légal en bref, sur la page Formations. */
.legal--court .tete { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.lien-suite {
  display: inline-block;
  margin-top: .9rem;
  color: var(--noir);
  font-weight: 500;
  border-bottom: 1px solid var(--rose);
}
.lien-suite:hover { color: var(--prune); }

/* Trois photos : une grande, deux petites empilées à côté. */
.preuves[style*="--n: 3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.preuves[style*="--n: 3"] .preuves__photo { aspect-ratio: auto; }
.preuves[style*="--n: 3"] .preuves__photo:first-child {
  grid-row: 1 / 3;
  aspect-ratio: 4 / 5;
}
.preuves[style*="--n: 3"] .preuves__photo:not(:first-child) { position: relative; min-height: 0; }
.preuves[style*="--n: 3"] .preuves__photo:not(:first-child) img { position: absolute; inset: 0; }


/* --- 23. Lot 3 -------------------------------------------- */

/* Formations : le même premier écran que Prestations. La photo
   est plus large et plus claire (fond lilas) : elle commence plus
   à gauche pour qu'on voie la cliente allongée, et le fondu est
   plus court pour ne pas effacer son visage. */
.cabine--formation .cabine__media {
  inset: 0 0 0 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.cabine--formation .cabine__media img { object-position: 100% 40%; }
body .cabine--formation .cabine__media img { filter: saturate(.95) brightness(.86); }
.cabine--formation .cabine__voile {
  background:
    linear-gradient(90deg, var(--noir) 0%, var(--noir) 24%, rgba(10,10,10,.55) 36%, rgba(10,10,10,0) 47%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 20%, transparent 78%, var(--noir) 100%);
}
.cabine--formation h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.cabine--formation h1 em { color: var(--rose); }
.cabine--formation .cabine__inner { max-width: 36rem; }

@media (max-width: 1000px) {
  /* Moins haute, donc moins zoomée : Camillia et la cliente
     tiennent toutes les deux dans la largeur du téléphone. */
  .cabine--formation { padding-top: min(50svh, 26rem); }
  .cabine--formation .cabine__media {
    inset: 0 0 auto 0;
    height: min(56svh, 30rem);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .cabine--formation .cabine__media img { object-position: 82% 40%; }
  .cabine--formation .cabine__voile {
    background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 40%, rgba(10,10,10,.75) 70%, var(--noir) 100%);
  }
}

/* --- 24. La page Camillia ---------------------------------- */

/* Le premier écran : le portrait à droite, en fondu. */
.cabine--camillia .cabine__media { inset: 0 0 0 42%; }
.cabine--camillia .cabine__media img { object-position: 50% 22%; }
.cabine--camillia h1 em { color: var(--rose); }
.cabine--camillia .hero__actions { margin-top: .4rem; }

/* Le sérieux : une photo, quatre engagements, les chiffres. */
.serieux {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.serieux__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 100px; }
.serieux__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.engagements { list-style: none; margin: 0; padding: 0; counter-reset: eng; }
.engagements li {
  counter-increment: eng;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.6rem 0;
  border-top: 1px solid var(--filet);
}
.engagements li::before {
  content: counter(eng, decimal-leading-zero);
  grid-row: 1 / 3;
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--rose);
  padding-top: .45rem;
}
.engagements h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: .5rem; }
.engagements p  { margin: 0; color: var(--brume); }

.serieux__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  border-top: 1px solid var(--filet);
  padding-top: 2rem;
}
.serieux__chiffres b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  margin-bottom: .5rem;
}
.serieux__chiffres span {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
}

/* Et le reste : la mosaïque. */
.section--encre { background: var(--encre); }
.mosaique {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.mosaique__photo { margin: 0; grid-column: span 3; }
.mosaique__photo--haute { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.mosaique__photo--large { grid-column: 5 / span 6; }
.mosaique__photo picture,
.mosaique__photo img { display: block; width: 100%; }
.mosaique__photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.mosaique__photo--haute img { aspect-ratio: 3 / 5.2; }
.mosaique__photo--large img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
.mosaique__photo figcaption {
  margin-top: .9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brume);
  max-width: 34ch;
}

/* Sa phrase, en grand. */
.citation-camillia { text-align: center; }
.citation-camillia blockquote {
  margin: 0 auto 1.6rem;
  max-width: 28ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.22;
}
.citation-camillia .signature { margin: 0 auto; color: var(--rose); }

/* Sur l'accueil : Camillia en court. */
.camillia-court {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.camillia-court__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.camillia-court__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.camillia-court h2 { margin-bottom: 1.2rem; }
.camillia-court__texte > p:not(.hero__sur) {
  color: var(--brume);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  max-width: 38ch;
  margin-bottom: 2rem;
}

@media (max-width: 1000px) {
  .cabine--camillia .cabine__media { inset: 0 0 auto 0; }
  .cabine--camillia .cabine__media img { object-position: 50% 15%; }
  .serieux, .camillia-court { grid-template-columns: 1fr; }
  .serieux__photo { position: static; aspect-ratio: 4 / 3; }
  .mosaique { grid-template-columns: 1fr 1fr; }
  .mosaique__photo,
  .mosaique__photo--haute,
  .mosaique__photo--large { grid-column: auto; grid-row: auto; }
  .mosaique__photo--haute,
  .mosaique__photo--large { grid-column: 1 / -1; }
  .mosaique__photo--haute img { aspect-ratio: 4 / 5; }
}


/* --- 25. Lot 4 : l'interactivité --------------------------- */

/* Le sourire à composer */
.sourire {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  border: 1px solid var(--filet);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse at 35% 45%, rgba(217,167,189,.10), transparent 60%),
    var(--noir);
}
.sourire__scene { position: relative; }
.sourire__dessin { display: block; width: 100%; height: auto; overflow: visible; }

/* Les lèvres : pleines, dans le rose profond de la marque, avec
   un brillant. Un trait fin par-dessus, comme le reste du site. */
.sourire__levre { stroke: none; }
.sourire__levre--haut { fill: url(#sourire-levre-haut); }
.sourire__levre--bas  { fill: url(#sourire-levre-bas); }
.sourire__gloss { fill: url(#sourire-gloss); pointer-events: none; }
.sourire__gloss--fin { opacity: .55; }
.sourire__corps { filter: drop-shadow(0 1px 1.2px rgba(60, 20, 40, .45)); }
.sourire__trait {
  fill: none;
  stroke: var(--rose-clair);
  stroke-width: 1;
  stroke-opacity: .55;
  stroke-linejoin: round;
  pointer-events: none;
}
.sourire__ombre { fill: #1A0E14; opacity: .35; pointer-events: none; }

.sourire__dent {
  fill: url(#sourire-email-haut);
  stroke: #A8999A;
  stroke-width: .7;
  stroke-opacity: .6;
  cursor: crosshair;
  transition: stroke var(--vif), stroke-opacity var(--vif);
  outline: none;
}
.sourire__dent--bas { fill: url(#sourire-email-bas); }
.sourire__dent:hover,
.sourire__dent:focus-visible { fill: url(#sourire-email-rose); stroke: var(--rose); stroke-opacity: 1; stroke-width: 1.2; }

/* Une pièce posée. Le halo est invisible mais touchable : il
   agrandit la zone pour le doigt. Au survol (ou quand on survole
   son étiquette), il s'allume et une croix apparaît. */
.sourire__pose { cursor: pointer; outline: none; }
.sourire__halo {
  fill: rgba(217,167,189,0);
  stroke: var(--rose);
  stroke-width: .8;
  stroke-opacity: 0;
  stroke-dasharray: 2 2.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
  transition: transform var(--vif), stroke-opacity var(--vif), fill var(--vif);
}
.sourire__corps {
  transform-box: fill-box;
  transform-origin: center;
  animation: sourire-pose .45s cubic-bezier(.2,1.4,.4,1) both;
  transition: transform var(--vif), opacity var(--vif);
}
.sourire__croix {
  opacity: 0;
  transition: opacity var(--vif);
  pointer-events: none;
}
.sourire__croix circle { fill: var(--noir); stroke: var(--rose); stroke-width: .8; }
.sourire__croix path { stroke: var(--blanc); stroke-width: 1.1; stroke-linecap: round; }

.sourire__pose.est-vise .sourire__halo,
.sourire__pose:focus-visible .sourire__halo { transform: scale(1); stroke-opacity: .9; fill: rgba(217,167,189,.08); }
.sourire__pose.est-vise .sourire__corps,
.sourire__pose:focus-visible .sourire__corps { opacity: .85; }
.sourire__pose.est-vise .sourire__croix,
.sourire__pose:focus-visible .sourire__croix { opacity: 1; }

/* Sur téléphone, pas de survol : la croix reste discrètement
   visible pour qu'on sache qu'on peut toucher. */
@media (hover: none) {
  .sourire__croix { opacity: .75; }
}

/* La pièce qu'on enlève se décroche, puis tombe en tournant. */
.sourire__pose.est-enleve { pointer-events: none; }
.sourire__pose.est-enleve .sourire__halo,
.sourire__pose.est-enleve .sourire__croix { opacity: 0; stroke-opacity: 0; transition-duration: .15s; }
.sourire__pose.est-enleve .sourire__corps { animation: sourire-chute .62s cubic-bezier(.45,0,.75,.4) both; }
@keyframes sourire-chute {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  22%  { transform: translate(0, -5px) rotate(-8deg); opacity: 1; }
  100% { transform: translate(6px, 46px) rotate(70deg) scale(.7); opacity: 0; }
}
.sourire__eclat {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  animation: sourire-eclat .9s ease-out .1s both;
}
@keyframes sourire-pose  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sourire-eclat {
  0%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3) rotate(45deg); }
}
.sourire.est-plein .sourire__total { animation: sourire-non .35s; }
@keyframes sourire-non { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.sourire__etiquette {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: 1rem;
}
.sourire__choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 2rem;
}
.sourire__piece {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1rem .5rem .9rem;
  border: 1px solid var(--filet);
  color: var(--brume);
  transition: border-color var(--moyen), color var(--moyen), background-color var(--moyen);
}
.sourire__piece svg { width: 30px; height: 30px; }
.sourire__piece span { font-size: .85rem; }
.sourire__piece b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--blanc); }
.sourire__piece:hover { border-color: var(--filet-fort); color: var(--blanc); }
.sourire__piece.est-choisie { border-color: var(--rose); color: var(--blanc); background: rgba(217,167,189,.07); }

.sourire__total {
  border-top: 1px solid var(--filet);
  padding-top: 1.4rem;
  margin-bottom: 1.6rem;
}
.sourire__compte { color: var(--brume); margin-bottom: .3rem; min-height: 1.6em; }
/* Dès qu'une pièce est posée, ce sont les étiquettes qui parlent ;
   le résumé reste lu par les lecteurs d'écran. */
.a-des-pieces .sourire__compte {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0; min-height: 0;
}

/* Les étiquettes des pièces posées */
.sourire__jetons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* « Aucune pièce posée » et les étiquettes partagent la même
   ligne, de hauteur fixe : poser ou enlever une pièce ne change
   pas la hauteur du panneau, donc le dessin ne bouge pas. */
.sourire__total { display: grid; grid-template-columns: minmax(0, 1fr); }
.sourire__total > .sourire__compte,
.sourire__total > .sourire__jetons {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  margin: 0;
  min-height: 0;
}
.sourire__total::after {            /* la ligne réservée */
  content: "";
  grid-row: 2;
  grid-column: 1;
  height: 2.2rem;
}
.sourire__total > .sourire__note { grid-row: 3; margin-top: .5rem; }

/* La note : trois phrases au même endroit, une seule visible. */
.sourire__note { display: grid; }
.sourire__note > span { grid-area: 1 / 1; visibility: hidden; }
.sourire:not(.a-des-pieces) .sourire__note [data-etat="vide"],
.sourire.a-des-pieces:not(.est-complet) .sourire__note [data-etat="pose"],
.sourire.est-complet .sourire__note [data-etat="plein"] { visibility: visible; }

/* Le prix : la durée qui apparaît à côté ne doit pas grandir
   la ligne. */
.sourire__prix span { line-height: 1; }

/* Côte à côte (ordinateur) : les étiquettes restent sur une
   seule ligne, quitte à défiler, pour ne jamais pousser le
   panneau. */
@media (min-width: 901px) {
  .sourire__jetons { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sourire__jetons::-webkit-scrollbar { display: none; }
  .sourire__jetons li { flex: none; }
}
.sourire__jetons li { animation: jeton-entre .35s cubic-bezier(.2,1.2,.4,1) both; }
.sourire__jetons li.est-parti { animation: jeton-sort .3s ease both; }
@keyframes jeton-entre { from { opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes jeton-sort  { to   { opacity: 0; transform: scale(.85); } }

.sourire__jeton {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .5rem .38rem .55rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--brume);
  transition: border-color var(--vif), color var(--vif), background-color var(--vif);
}
.sourire__jeton svg { width: 15px; height: 15px; flex: none; }
.sourire__jeton i {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  flex: none;
  transition: border-color var(--vif), background-color var(--vif);
}
.sourire__jeton i::before,
.sourire__jeton i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sourire__jeton i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sourire__jeton:hover,
.sourire__jeton:focus-visible,
.sourire__jeton.est-vise { color: var(--blanc); border-color: var(--rose); background: rgba(217,167,189,.07); }
li.est-vise .sourire__jeton { color: var(--blanc); border-color: var(--rose); background: rgba(217,167,189,.07); }
.sourire__jeton:hover i,
li.est-vise .sourire__jeton i { border-color: var(--rose); background: rgba(217,167,189,.18); }

.sourire.est-complet .sourire__note { color: var(--rose-clair); }
.sourire__prix { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .6rem; }
.sourire__prix b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--sourdine);
  transition: color var(--moyen);
}
.a-des-pieces .sourire__prix b { color: var(--blanc); }
.sourire__prix span { color: var(--brume); font-size: .9rem; letter-spacing: .04em; }
.sourire__note { font-size: .85rem; color: var(--sourdine); }

.sourire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.sourire__actions .btn { opacity: .45; pointer-events: none; transition: opacity var(--moyen); }
.a-des-pieces .sourire__actions .btn { opacity: 1; pointer-events: auto; }
.sourire__vider {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sourdine);
  border-bottom: 1px solid transparent;
}
.sourire__vider:hover { color: var(--blanc); border-bottom-color: var(--rose); }

@media (max-width: 900px) {
  .sourire { grid-template-columns: 1fr; }
}

/* --- La version compacte, sur l'accueil ---------------------
   Un seul cadre : le dessin à gauche, et à droite le titre, les
   pièces et le prix. Plus d'en-tête de section à part, et un
   dessin plus petit : l'essai reste là, sans couper la lecture
   de la page. */
.sourire-section--compact { padding-block: clamp(3rem, 8vh, 5.5rem); }

.sourire--compact {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3.5vw, 3rem);
}
.sourire--compact .sourire__scene { max-width: 540px; justify-self: center; width: 100%; }

.sourire__tete { margin-bottom: 1.4rem; }
.sourire__titre {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.08;
  margin: 0 0 .7rem;
}
.sourire__intro { color: var(--brume); font-size: .92rem; margin: 0; max-width: 42ch; }

.sourire--compact .sourire__etiquette { margin-bottom: .6rem; font-size: .7rem; }
.sourire--compact .sourire__choix { margin-bottom: 1.2rem; gap: .4rem; }
.sourire--compact .sourire__piece {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  align-items: center;
  column-gap: .6rem;
  row-gap: 0;
  padding: .6rem .7rem;
  text-align: left;
}
.sourire--compact .sourire__piece svg { width: 22px; height: 22px; grid-row: span 2; }
.sourire--compact .sourire__piece span { font-size: .78rem; line-height: 1.2; }
.sourire--compact .sourire__piece b { font-size: 1rem; line-height: 1.2; }

.sourire--compact .sourire__total { padding-top: 1rem; margin-bottom: 1.1rem; }
.sourire--compact .sourire__prix { margin-bottom: .35rem; }
.sourire--compact .sourire__prix b { font-size: clamp(2rem, 3vw, 2.6rem); }
.sourire--compact .sourire__note { font-size: .8rem; }
.sourire--compact .sourire__actions .btn { padding: .9rem 1.6rem; }

@media (max-width: 900px) {
  .sourire--compact .sourire__scene { max-width: 420px; order: 2; }
  .sourire--compact .sourire__panneau { display: contents; }
  .sourire--compact .sourire__tete { order: 1; margin-bottom: 0; }
  .sourire--compact .sourire__etiquette,
  .sourire--compact .sourire__choix,
  .sourire--compact .sourire__total,
  .sourire--compact .sourire__actions { order: 3; }
  .sourire--compact { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sourire--compact .sourire__etiquette { margin: .4rem 0 -.4rem; }
  .sourire--compact .sourire__choix,
  .sourire--compact .sourire__total { margin-bottom: 0; }
}
@media (max-width: 420px) {
  .sourire--compact .sourire__piece { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .55rem .3rem; }
  .sourire--compact .sourire__piece svg { grid-row: auto; }
}

/* Les prix qui montrent : la photo qui suit le curseur. */
.apercu {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  width: 190px;
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.apercu img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(.88);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.apercu.est-visible { opacity: 1; }
.apercu.est-visible img { transform: scale(1); }
.tarifs tr[data-apercu] { cursor: default; }
.tarifs tr[data-apercu] th { transition: color var(--moyen); }
.tarifs tr[data-apercu]:hover th { color: var(--rose-clair); }

/* Sur téléphone : un petit losange signale qu'on peut toucher la
   ligne, et la photo s'ouvre en dessous. */
.tarifs tr.a-apercu th::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: .5rem;
  vertical-align: middle;
  background: var(--rose);
  transform: rotate(45deg);
  opacity: .7;
}
.tarifs tr.a-apercu.est-ouverte th::after { opacity: 1; }
.tarifs__photo td { padding: .4rem 0 1rem; }
.tarifs__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
  animation: apercu-ouvre .35s ease both;
}
@keyframes apercu-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* --- 30. La carte des soins (page Prestations) ----------------
   Une prestation à la fois, comme la carte d'un bel endroit :
   des noms, des pointillés, des prix. Les détails s'ouvrent
   quand on les demande. Deux choix changent les prix en direct :
   le nombre de pierres (quatre losanges) et le gel.
   Les choix sont de vrais boutons radio : sans JavaScript, ils
   marchent quand même (CSS :has).                            */

.soins-section { padding-top: clamp(3.5rem, 9vh, 6.5rem); }

/* Les onglets */
.soins__onglets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  border-bottom: 1px solid var(--filet);
  margin-bottom: clamp(2rem, 4.5vw, 3.4rem);
}
.soins__onglet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num nom" "num des";
  column-gap: .9rem;
  padding-bottom: 1.4rem;
  color: var(--sourdine);
  justify-self: start;
  transition: color var(--moyen);
}
.soins__num { grid-area: num; font-size: .68rem; letter-spacing: .16em; padding-top: .7rem; }
.soins__nom {
  grid-area: nom;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  line-height: 1.15;
}
.soins__des {
  grid-area: des;
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--moyen);
}
.soins__court { display: none; }
.soins__onglet:hover { color: var(--brume); }
.soins__onglet.est-actif { color: var(--blanc); }
.soins__onglet.est-actif .soins__des { color: var(--rose-clair); }
.soins__onglet:focus-visible { outline: 1px solid var(--rose); outline-offset: 6px; }

/* Le curseur : un fil rose sous l'onglet actif, avec son strass. */
.soins__curseur {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: var(--l, 0);
  transform: translateX(var(--x, 0));
  background: var(--rose);
  opacity: 0;
  transition: transform .7s cubic-bezier(.65,0,.25,1), width .7s cubic-bezier(.65,0,.25,1), opacity .3s;
}
.soins.est-pret .soins__curseur { opacity: 1; }

/* Les panneaux. Sans JavaScript : l'un sous l'autre. */
.soins__panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5.5vw, 5.5rem);
  align-items: start;
}
.soins__panneau + .soins__panneau { margin-top: 4rem; }

/* Avec JavaScript, sur grand écran : empilés au même endroit,
   le cadre prend la hauteur du plus long, rien ne saute. */
@media (min-width: 901px) {
  .soins.est-pret .soins__corps { display: grid; }
  .soins.est-pret .soins__panneau {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s .45s;
  }
  .soins.est-pret .soins__panneau.est-actif {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease .1s, visibility 0s;
  }
}
@media (max-width: 900px) {
  .soins.est-pret .soins__panneau { margin: 0; }
  .soins.est-pret .soins__panneau:not(.est-actif) { display: none; }
}

/* L'entrée d'un panneau : la photo se pose, les lignes arrivent
   l'une après l'autre. */
.soins.est-pret .soins__panneau.est-actif .menu__ligne { animation: soins-ligne .4s ease both; }
@keyframes soins-ligne { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* La photo et sa légende */
.soins__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--encre);
}
.soins__photo picture,
.soins__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soins__photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, rgba(10,10,10,.82), transparent);
  pointer-events: none;
}
.soins__photo figcaption {
  position: absolute;
  left: 1.3rem; right: 1.3rem; bottom: 1.1rem;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  color: var(--blanc);
  max-width: 34ch;
}

.soins__resume {
  margin: 1.5rem 0 1.1rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--brume);
  max-width: 54ch;
}

/* Ce qui est compris : replié par défaut. */
.soins__compris { border-top: 1px solid var(--filet); }
.soins__compris summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brume);
  cursor: pointer;
  list-style: none;
  transition: color var(--vif);
}
.soins__compris summary::-webkit-details-marker { display: none; }
.soins__compris summary:hover { color: var(--blanc); }
.soins__compris summary i,
.menu__plus {
  position: relative;
  width: 10px; height: 10px;
  flex: none;
  transition: transform var(--moyen);
}
.soins__compris summary i::before, .soins__compris summary i::after,
.menu__plus::before, .menu__plus::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: currentColor;
}
.soins__compris summary i::after, .menu__plus::after { transform: rotate(90deg); }
.soins__compris[open] summary i,
details[open] > .menu__haut .menu__plus { transform: rotate(45deg); }
.soins__compris ul { list-style: none; margin: 0; padding: 0 0 .6rem; animation: soins-ligne .5s ease both; }
.soins__compris li {
  position: relative;
  padding: .3rem 0 .3rem 1.1rem;
  font-size: .84rem;
  color: var(--brume);
}
.soins__compris li::before {
  content: "";
  position: absolute;
  left: 1px; top: .85em;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--rose);
  opacity: .6;
}
.soins__tenue { margin: 0 0 1rem; font-size: .8rem; font-style: italic; color: var(--sourdine); }

/* L'interrupteur du gel */
.soins__gel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--filet);
}
.soins__gel-titre { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sourdine); }
.soins__gel-choix {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--filet);
  border-radius: 999px;
}
.soins__gel-choix input,
.pierres input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.soins__gel-choix label {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--brume);
  cursor: pointer;
  transition: color var(--vif), background-color var(--moyen);
}
.soins__gel-choix label:hover { color: var(--blanc); }
.soins__gel-choix input:checked + label { background: rgba(217,167,189,.16); color: var(--blanc); }
.soins__gel-choix input:focus-visible + label,
.pierres input:focus-visible + label { outline: 1px solid var(--rose); outline-offset: 2px; }

/* La carte : nom, pointillés, prix. */
.menu { list-style: none; margin: 0; padding: 0; }
.menu__haut {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .95rem 0;
  list-style: none;
}
summary.menu__haut { cursor: pointer; }
summary.menu__haut::-webkit-details-marker { display: none; }
.menu__nom {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.3;
  color: var(--blanc);
  transition: color var(--vif);
}
.menu__plus { color: var(--sourdine); align-self: center; }
.menu__duree {
  flex: none;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.menu__filet {
  flex: 1;
  min-width: 1.2rem;
  height: 2px;
  background-image: radial-gradient(circle, var(--filet-fort) .8px, transparent 1.1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: left center;
  transition: opacity var(--vif);
  opacity: .9;
}
.menu__prix {
  flex: none;
  display: inline-grid;
  justify-items: end;
  min-width: 3.4ch;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1;
  color: var(--blanc);
}
.menu__prix b,
.menu__compte span {
  grid-area: 1 / 1;
  font-weight: 400;
  white-space: nowrap;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.menu__prix small { font-family: var(--sans); font-size: .68rem; color: var(--sourdine); letter-spacing: .02em; }
.menu__devis { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brume); }

/* Au survol : le nom s'éclaire, les pointillés rosissent. */
.menu__ligne:hover .menu__nom { color: var(--rose-clair); }
.menu__ligne:hover .menu__filet { background-image: radial-gradient(circle, rgba(217,167,189,.75) .8px, transparent 1.1px); }

/* La précision d'une ligne, quand on l'ouvre. */
.menu__note { padding: 0 0 1rem; max-width: 48ch; }
.menu__note p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--sourdine); }
details[open] > .menu__note { animation: soins-ligne .45s ease both; }
.menu__ligne--pierres .menu__note { margin-top: -.5rem; }

/* « Et aussi » : les lignes du bas, plus petites. */
.menu__et {
  margin: 1.8rem 0 .2rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.menu--petit .menu__haut { padding: .7rem 0; }
.menu--petit .menu__nom { font-size: 1rem; color: var(--brume); }
.menu--petit .menu__prix { font-size: 1.1rem; }

/* Quatre losanges pour le nombre de pierres. */
.pierres { display: inline-flex; align-items: center; gap: .1rem; align-self: center; flex: none; }
.pierres label {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  cursor: pointer;
}
.pierres label::before {
  content: "";
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  box-shadow: 0 0 10px rgba(242,221,230,.25);
  transition: transform var(--vif), background var(--vif), box-shadow var(--vif);
}
.pierres input:checked + label ~ label::before { background: transparent; box-shadow: inset 0 0 0 1px rgba(246,245,243,.4); }
.pierres label:hover::before { transform: rotate(45deg) scale(1.3); }

.menu__compte {
  display: inline-grid;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sourdine);
}

/* Quel prix est visible. Par défaut, le premier ; avec :has, celui
   du choix coché. Le prix qui part monte, celui qui arrive aussi. */
.menu__prix b:not(:first-child),
.menu__compte span:not(:first-child) { opacity: 0; visibility: hidden; transform: translateY(.45em); }

.menu__ligne--pierres:has(.pierres input:checked) .menu__prix b,
.menu__ligne--pierres:has(.pierres input:checked) .menu__compte span { opacity: 0; visibility: hidden; transform: translateY(-.45em); transition: opacity .25s ease, transform .4s ease, visibility 0s .4s; }
.menu__ligne--pierres:has(.pierres input[value="1"]:checked) .menu__prix b[data-o="p1"],
.menu__ligne--pierres:has(.pierres input[value="2"]:checked) .menu__prix b[data-o="p2"],
.menu__ligne--pierres:has(.pierres input[value="3"]:checked) .menu__prix b[data-o="p3"],
.menu__ligne--pierres:has(.pierres input[value="4"]:checked) .menu__prix b[data-o="p4"],
.menu__ligne--pierres:has(.pierres input[value="1"]:checked) .menu__compte span[data-o="p1"],
.menu__ligne--pierres:has(.pierres input[value="2"]:checked) .menu__compte span[data-o="p2"],
.menu__ligne--pierres:has(.pierres input[value="3"]:checked) .menu__compte span[data-o="p3"],
.menu__ligne--pierres:has(.pierres input[value="4"]:checked) .menu__compte span[data-o="p4"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s, visibility 0s;
}

.soins__panneau:has(.soins__gel input:checked) .menu__ligne--variante .menu__prix b { opacity: 0; visibility: hidden; transform: translateY(-.45em); transition: opacity .25s ease, transform .4s ease, visibility 0s .4s; }
.soins__panneau:has(.soins__gel input[value="0"]:checked) .menu__ligne--variante .menu__prix b[data-o="v0"],
.soins__panneau:has(.soins__gel input[value="1"]:checked) .menu__ligne--variante .menu__prix b[data-o="v1"],
.soins__panneau:has(.soins__gel input[value="2"]:checked) .menu__ligne--variante .menu__prix b[data-o="v2"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s, visibility 0s;
}

@media (max-width: 900px) {
  .soins__onglets { grid-template-columns: auto auto auto; justify-content: space-between; gap: 1rem; }
  .soins__onglet { grid-template-columns: 1fr; grid-template-areas: "num" "nom" "des"; padding-bottom: 1rem; }
  .soins__num { padding-top: 0; margin-bottom: .4rem; }
  .soins__nom { font-size: 1.15rem; }
  .soins__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .soins__court { display: inline; }
  .soins__des { font-size: .6rem; letter-spacing: .12em; }
  .soins__panneau { grid-template-columns: 1fr; gap: 1.6rem; }
  .soins__resume { margin-top: 1.2rem; }
}
@media (max-width: 480px) {
  .menu__haut { gap: .55rem; }
  .menu__ligne--pierres .menu__haut { flex-wrap: wrap; row-gap: .3rem; }
  .menu__ligne--pierres .menu__nom { flex-basis: 100%; }
}


/* --- 31. Quand je ne fais pas, en une bande ---------------- */

.verifier.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.refus {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.refus__tete h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  margin: 0 0 1.1rem;
}
.refus__tete p { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--brume); max-width: 36ch; }

.refus__col {
  padding-left: clamp(1.2rem, 2vw, 2rem);
  border-left: 1px solid var(--filet);
  transition: border-color var(--moyen);
}
.refus__col:hover { border-left-color: rgba(217,167,189,.45); }
.refus__col h3 {
  font-size: 1.12rem;
  line-height: 1.25;
  margin: .2rem 0 1rem;
}
.refus__col ul { list-style: none; margin: 0; padding: 0; }
.refus__col li {
  position: relative;
  padding: .38rem 0 .38rem 1.05rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--brume);
  transition: color var(--vif);
}
.refus__col li:hover { color: var(--blanc); }
.refus__col li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: 6px; height: 1px;
  background: var(--rose);
  opacity: .7;
}

@media (max-width: 1000px) {
  .refus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .refus__tete { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
  .refus__tete p { max-width: none; }
  .refus__tete + .refus__col { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .refus { grid-template-columns: 1fr; gap: 1.6rem; }
  .refus__tete { display: block; }
  .refus__col { padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid var(--filet); }
}

.avis.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }


/* --- 32. Les questions de cabine ---------------------------
   Sur ordinateur : les questions à gauche, la réponse à droite,
   dans un cadre, signée Camillia. Sur téléphone : des volets.
   Sans JavaScript : tout est affiché, l'un sous l'autre.       */

.qr-section.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }

.qr__tete h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  margin: 0 0 1rem;
}
.qr__tete p { margin: 0 0 2rem; font-size: .88rem; color: var(--brume); max-width: 38ch; }

.qr__question {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid var(--filet);
  text-align: left;
  color: var(--sourdine);
  transition: color var(--moyen);
}
.qr__num { font-size: .66rem; letter-spacing: .16em; transition: color var(--moyen); }
.qr__texte {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.35;
}
.qr__question:hover { color: var(--brume); }
.qr__question:focus-visible { outline: 1px solid var(--rose); outline-offset: 4px; }
.qr__item.est-actif .qr__question { color: var(--blanc); }
.qr__item.est-actif .qr__num { color: var(--rose); }

/* Le signe : un trait qui s'allonge et prend son strass quand la
   question est choisie. */
.qr__signe {
  position: relative;
  align-self: center;
  width: 14px; height: 1px;
  margin-left: 1rem;
  background: currentColor;
  opacity: .5;
  transition: width .6s cubic-bezier(.65,0,.25,1), opacity var(--moyen), background-color var(--moyen);
}
.qr__signe::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 7px; height: 7px;
  transform: rotate(45deg) scale(0);
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  transition: transform .4s cubic-bezier(.2,1.4,.4,1) .25s;
}

.qr__reponse { padding: 0 0 1.4rem 2.4rem; }
.qr__rappel { display: none; }
.qr__mots { margin: 0; font-size: .92rem; line-height: 1.75; color: var(--brume); max-width: 60ch; }
.qr__signature { display: none; }

.qr__autre {
  margin: 0;
  max-width: none;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
  font-size: .8rem;
  color: var(--sourdine);
}
.qr__autre a {
  margin-left: .5rem;
  color: var(--blanc);
  background: linear-gradient(var(--rose), var(--rose)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--moyen);
}
.qr__autre a:hover { background-size: 100% 1px; }

/* --- Ordinateur, avec JavaScript ---------------------------- */
@media (min-width: 901px) {
  .qr.est-pret {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
    grid-template-rows: repeat(var(--lignes), auto);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
  .qr.est-pret .qr__tete { grid-column: 1; grid-row: 1; }
  .qr.est-pret .qr__item { display: contents; }
  .qr.est-pret .qr__question { grid-column: 1; grid-row: var(--rang); }
  .qr.est-pret .qr__autre { grid-column: 1; grid-row: -2 / -1; align-self: start; justify-self: stretch; max-width: none; }

  .qr.est-pret .qr__item.est-actif .qr__signe { width: 42px; opacity: 1; background: var(--rose); }

  /* Toutes les réponses au même endroit, une seule visible : le
     cadre a la hauteur de la colonne de gauche et ne bouge pas. */
  .qr.est-pret .qr__reponse {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.6rem);
    border: 1px solid var(--filet);
    background:
      radial-gradient(ellipse at 85% 0%, rgba(217,167,189,.09), transparent 60%),
      var(--noir);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .5s ease, visibility 0s .5s;
  }
  .qr.est-pret .qr__item.est-actif .qr__reponse {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s ease .1s, transform .7s cubic-bezier(.2,.8,.2,1) .1s, visibility 0s;
  }
  .qr.est-pret .qr__rappel {
    display: block;
    margin: 0 0 1.4rem;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sourdine);
  }
  .qr.est-pret .qr__mots {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.6vw, 1.42rem);
    line-height: 1.6;
    color: var(--blanc);
    max-width: 40ch;
  }
  .qr.est-pret .qr__signature {
    display: block;
    margin: 1.6rem 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--rose);
  }
  .qr.est-pret .qr__signature::before { content: "— "; }
}

/* La réponse qui change : le texte monte d'un rien en
   apparaissant, la signature suit. Rien de plus. */
.qr.est-pret .qr__item.est-actif .qr__mots { animation: qr-monte .7s cubic-bezier(.2,.8,.2,1) .12s both; }
.qr.est-pret .qr__item.est-actif .qr__signature { animation: qr-monte .7s cubic-bezier(.2,.8,.2,1) .28s both; }
@keyframes qr-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Téléphone, avec JavaScript : des volets ----------------- */
@media (max-width: 900px) {
  .qr.est-pret .qr__reponse {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 0 0 2.4rem;
    transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1), padding .5s;
  }
  .qr.est-pret .qr__dedans { overflow: hidden; min-height: 0; }
  .qr.est-pret .qr__item.est-actif .qr__reponse { grid-template-rows: 1fr; padding-bottom: 1.4rem; }
  .qr.est-pret .qr__item.est-actif .qr__signature { display: block; margin: .8rem 0 0; font-family: var(--serif); font-style: italic; color: var(--rose); }
  .qr.est-pret .qr__signature::before { content: "— "; }
  /* Le signe devient un plus, qui tourne en croix à l'ouverture. */
  .qr.est-pret .qr__signe { width: 11px; opacity: .7; transition: transform var(--moyen); }
  .qr.est-pret .qr__signe::after {
    right: auto; left: 0; top: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: rotate(90deg);
    transition: none;
  }
  .qr.est-pret .qr__item.est-actif .qr__signe { transform: rotate(45deg); color: var(--rose); }
}

@media (prefers-reduced-motion: reduce) {
  .qr.est-pret .qr__item.est-actif .qr__mots,
  .qr.est-pret .qr__item.est-actif .qr__signature { animation: none; }
}


/* --- 33. Ce qui va se passer : la barre du rendez-vous -------
   Le rendez-vous est une barre coupée en étapes, chacune à sa
   vraie longueur. On la parcourt : le strass glisse au-dessus,
   la barre se remplit jusqu'à l'étape choisie, et l'étape
   s'affiche dessous. Sans JavaScript : toutes les étapes. */

.temps-section.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }

.temps {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.temps__tete h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  margin: 0 0 1rem;
}
.temps__tete p { margin: 0 0 1.8rem; font-size: .88rem; color: var(--brume); max-width: 34ch; }

/* Le choix de la prestation : trois mots, soulignés quand actifs. */
.temps__choix { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.temps__choix:not(:has(*)) { display: none; }
.temps__onglet {
  padding: .3rem 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--sourdine);
  background: linear-gradient(var(--rose), var(--rose)) 0 100% / 0 1px no-repeat;
  transition: color var(--moyen), background-size .6s cubic-bezier(.65,0,.25,1);
}
.temps__onglet:hover { color: var(--brume); }
.temps__onglet.est-actif { color: var(--blanc); background-size: 100% 1px; }
.temps__onglet:focus-visible { outline: 1px solid var(--rose); outline-offset: 4px; }

.temps__total { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 2.2rem; }
.temps__total b { white-space: nowrap; flex: none; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; }
.temps__total span { font-size: .82rem; color: var(--sourdine); }

/* La barre */
.temps__barre {
  position: relative;
  display: flex;
  gap: 5px;
  touch-action: pan-y;
}
.temps__segment {
  position: relative;
  flex: var(--d) 1 0;
  min-width: 30px;
  height: 46px;
  padding: 0;
  cursor: pointer;
}
.temps__segment::before {             /* le trait */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 2px;
  background: var(--filet-fort);
  transition: background-color .45s ease, height .3s ease, top .3s ease;
}
.temps__segment span {                /* le numéro, dessous */
  position: absolute;
  left: 0; top: 26px;
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--sourdine);
  transition: color .3s ease;
}
.temps__segment:hover::before { background: rgba(246,245,243,.5); }
/* Les étapes déjà passées : la barre se remplit. */
.temps__segment.est-passe::before { background: rgba(217,167,189,.7); }
.temps__segment.est-actif::before { background: var(--rose); height: 4px; top: 13px; }
.temps__segment.est-actif span { color: var(--blanc); }
.temps__segment:focus-visible { outline: 1px solid var(--rose); outline-offset: 2px; }

/* Le strass qui glisse au-dessus de l'étape choisie. */
.temps__strass {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  transform: translateX(var(--x, 0)) rotate(45deg);
  background: var(--eclat); background-size: 260% 100%; background-position: var(--lumiere, 50%) 50%;
  box-shadow: 0 0 14px rgba(242,221,230,.45);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.65,0,.25,1), opacity .3s;
}
.temps.est-pret .temps__strass { opacity: 1; }

/* L'étape affichée */
.temps__etapes { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.temps__etape {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--filet);
}
.temps__moment { margin: 0; }
.temps__moment b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.1;
  color: var(--blanc);
}
.temps__moment span {
  display: block;
  margin-top: .5rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.temps__texte h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 0 0 .5rem; }
.temps__texte p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--brume); max-width: 56ch; }

/* Avec JavaScript : une étape à la fois, toutes au même endroit
   (le cadre a la hauteur de la plus longue, rien ne saute). */
.temps.est-pret .temps__etapes { display: grid; }
.temps.est-pret .temps__etape {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.temps.est-pret .temps__etape.est-actif {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s;
}
.temps.est-pret .temps__etape.est-actif .temps__moment,
.temps.est-pret .temps__etape.est-actif .temps__texte { animation: qr-monte .6s cubic-bezier(.2,.8,.2,1) both; }
.temps.est-pret .temps__etape.est-actif .temps__texte { animation-delay: .08s; }

/* Les pistes : une prestation à la fois. */
.temps.est-pret .temps__corps { display: grid; }
.temps.est-pret .temps__piste {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.temps.est-pret .temps__piste.est-actif { opacity: 1; visibility: visible; transition: opacity .5s ease .05s, visibility 0s; }
.temps__piste + .temps__piste { margin-top: 3.5rem; }
.temps.est-pret .temps__piste + .temps__piste { margin-top: 0; }

/* Après, chez vous : une ligne, trois conseils. */
.temps__apres {
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
}
.temps__apres h4 {
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
}
.temps__apres ul { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.temps__apres li { position: relative; padding-left: 1rem; font-size: .8rem; color: var(--brume); }
.temps__apres li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px;
  transform: rotate(45deg);
  background: var(--filet-fort);
}

@media (max-width: 900px) {
  .temps { grid-template-columns: 1fr; gap: 2rem; }
  .temps__tete p { margin-bottom: 1.2rem; }
  .temps__etape { grid-template-columns: 1fr; gap: .8rem; }
  .temps__apres ul { display: block; }
  .temps__apres li { margin-bottom: .35rem; }
}


/* ============================================================
   SUR PLACE / EN LIGNE (octobre 2026)
   La bascule des pages Formations et de chaque formation
   (includes/formules.php, bascule_format). Le bloc .a-format
   montre les .mode-sur-place ou les .mode-en-ligne : avec
   JavaScript par data-format, sans lui par :has().
   ============================================================ */

/* On ne fait que cacher : ce qui reste visible garde son propre
   affichage (bloc, flex, ligne de liste…). */
.a-format[data-format="en-ligne"] .mode-sur-place { display: none; }
@supports not selector(:has(*)) {
  .a-format:not([data-format="en-ligne"]) .mode-en-ligne { display: none; }
}
@supports selector(:has(*)) {
  .a-format:not([data-format="en-ligne"]):not(:has(.format-choix input[value="en-ligne"]:checked)) .mode-en-ligne { display: none; }
  .a-format:has(.format-choix input[value="en-ligne"]:checked) .mode-sur-place { display: none; }
}
/* Un changement de format : le contenu revient en fondu. */
.a-format .mode-sur-place,
.a-format .mode-en-ligne { animation: format-entre .5s cubic-bezier(.22, .61, .36, 1); }
@keyframes format-entre { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .a-format .mode-sur-place, .a-format .mode-en-ligne { animation: none; }
}

/* La bascule : deux grandes moitiés, un curseur plein qui
   glisse de l'une à l'autre. Bien visible, sans arrondi ni
   couleur criarde. */
.format-choix {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 36rem;
  border: 1px solid var(--blanc);
  isolation: isolate;
}
.format-choix__option {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .3rem;
  padding: 1.15rem 1.4rem 1.1rem;
  cursor: pointer;
  color: var(--blanc);
  transition: color .45s ease;
}
.format-choix__option input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.format-choix__option b {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.format-choix__option span {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--brume);
  transition: color .45s ease;
}
.format-choix__option:has(input:checked) { color: var(--noir); }
.format-choix__option:has(input:checked) span { color: var(--noir); opacity: .78; }
.format-choix__option:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: -6px; }
.format-choix__curseur {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  background: var(--blanc);
  transition: transform .6s cubic-bezier(.65, 0, .25, 1);
}
.format-choix:has(.format-choix__option:nth-child(2) input:checked) .format-choix__curseur { transform: translateX(100%); }
.format-choix__option:not(:has(input:checked)):hover span { color: var(--blanc); }
@media (max-width: 520px) {
  .format-choix__option { padding: 1rem .9rem; }
  .format-choix__option b { font-size: .74rem; letter-spacing: .16em; }
  .format-choix__option span { font-size: .72rem; }
}

/* Le prix barré : ce que coûteraient les deux formations prises
   à part. */
.prix-barre {
  display: inline-block;
  margin-right: .35em;
  font-size: .5em;
  vertical-align: .32em;
  color: var(--sourdine);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  letter-spacing: 0;
}

/* L'acompte : la phrase et le bouton « Réserver mon appel ». */
.acompte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--filet-fort);
}
.acompte__texte {
  margin: 0;
  max-width: 52ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--brume);
}
.acompte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.acompte__question {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brume);
  border-bottom: 1px solid var(--filet-fort);
  padding-bottom: .2rem;
  transition: color var(--vif), border-color var(--vif);
}
.acompte__question:hover { color: var(--blanc); border-bottom-color: var(--rose); }


/* Du texte pour les lecteurs d'écran seulement (« au lieu de »
   devant un prix barré). */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}