/* ==========================================================================
   Christine Maillot — Hypnose & Luxopuncture
   Palette conservée depuis la page Leadpages d'origine :
   violet #7548A9 · ambre #FFBA00 · crème #FAF3F3 · encre #011627
   ========================================================================== */

/* Polices auto-hébergées (variables, un fichier par famille).
   Servies depuis le domaine : plus de course réseau vers fonts.gstatic.com, qui
   faisait sauter la mise en page au chargement (CLS mobile mesuré à 0,224).
   Accessoirement, aucune adresse IP de visiteur n'est transmise à Google. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* marque */
  --violet: #7548a9;
  --violet-clair: #9068c4;
  --violet-encre: #1c1030;
  --violet-nuit: #140a24;
  --ambre: #ffba00;
  --ambre-fonce: #cc9500;
  --creme: #faf3f3;
  --creme-ombre: #f2e6e6;
  --encre: #14101c;
  --encre-doux: #4a4459;
  --blanc: #ffffff;
  --ligne: rgba(28, 16, 48, 0.12);
  --ligne-claire: rgba(255, 255, 255, 0.16);

  /* ombres teintées violet, jamais du noir pur */
  --ombre-s: 0 1px 2px rgba(28, 16, 48, 0.06), 0 2px 6px rgba(28, 16, 48, 0.05);
  --ombre-m: 0 12px 28px -12px rgba(28, 16, 48, 0.22);
  --ombre-l: 0 32px 64px -28px rgba(28, 16, 48, 0.38);

  /* rythme */
  --gouttiere: clamp(20px, 5vw, 40px);
  --largeur: 1180px;
  --rayon-s: 10px;
  --rayon-m: 18px;
  --rayon-l: 28px;

  --transition: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* les marges par défaut de figure/blockquote (40px inline) écrasent les colonnes */
figure, blockquote, figcaption { margin: 0; }

a { color: inherit; }

/* height:auto obligatoire : sans lui, l'attribut height="720" étire l'image quand width vaut 100% */
img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 700; }

/* grain fixe : casse la platitude sans repaint au scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- utilitaires ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(64px, 9vw, 118px); }
.section--creme { background: var(--creme); }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 18px;
}
.surtitre::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--ambre);
}
.surtitre--clair { color: var(--ambre); }

.titre-section {
  font-size: clamp(30px, 4.4vw, 46px);
  max-width: 20ch;
}

.chapo {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--encre-doux);
  max-width: 62ch;
  margin-top: 20px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--violet);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--rayon-s) 0;
}
.saut-contenu:focus { left: 0; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.bouton {
  --fond: var(--ambre);
  --texte: #201704;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  background: var(--fond);
  color: var(--texte);
  border: none;
  border-radius: var(--rayon-s);
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(120, 82, 0, 0.85);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton:hover { background: var(--ambre-fonce); box-shadow: 0 14px 30px -14px rgba(120, 82, 0, 0.95); }
.bouton:active { transform: translateY(1px); }
.bouton--large { width: 100%; }
.bouton--fantome {
  --fond: transparent;
  --texte: var(--blanc);
  border: 1.5px solid var(--ligne-claire);
  box-shadow: none;
}
.bouton--fantome:hover { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.bouton svg { flex: none; }

.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.lien-tel svg { color: var(--violet); flex: none; }
.lien-tel span { border-bottom: 1.5px solid transparent; transition: border-color var(--transition); }
.lien-tel:hover span { border-bottom-color: currentColor; }

/* ---------- en-tête ---------- */

/* RÈGLE : un en-tête de site ou de landing est 100 % OPAQUE, jamais translucide.
   Aucun contenu ne doit se lire au travers. Pas de rgba, pas de backdrop-filter. */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--violet-encre);
  padding-block: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  transition: box-shadow var(--transition), padding var(--transition);
}
.entete__grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* au scroll, l'en-tête se resserre et se détache par une ombre.
   Le fond ne change pas : il est déjà opaque, et le texte reste blanc
   (la première version basculait en blanc, ce qui faisait une bande claire). */
.entete.est-collee {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 36px -28px rgba(10, 4, 20, 0.9);
  padding-block: 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.marque {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  color: var(--blanc);
  transition: color var(--transition);
}
.marque__nom {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.marque__metier {
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.72;
}
.entete__tel { color: var(--blanc); }
.entete__tel svg { color: var(--ambre); }

@media (max-width: 720px) {
  .entete__tel span { display: none; }
  .entete__tel { min-height: 44px; min-width: 44px; }
}

/* ---------- héro ---------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--violet-encre);
  color: var(--blanc);
  padding-top: clamp(108px, 14vw, 148px);
  padding-bottom: clamp(60px, 7vw, 92px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -30%;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(58% 60% at 22% 18%, rgba(144, 104, 196, 0.55), transparent 62%),
    radial-gradient(48% 52% at 88% 8%, rgba(117, 72, 169, 0.5), transparent 66%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 140px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(20, 10, 36, 0.55));
}

/* un seul formulaire sur la page, en bas : le héro est une colonne unique,
   alignée à gauche, qui pousse vers l'ancre #reserver */
.hero__grille { display: block; }
.hero__texte { max-width: 860px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--ligne-claire);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 26px;
}
.hero__badge b { color: var(--ambre); font-weight: 700; }
.hero__pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambre);
  box-shadow: 0 0 0 4px rgba(255, 186, 0, 0.18);
}

.hero h1 {
  font-size: clamp(34px, 5.8vw, 68px);
  max-width: 17ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--ambre);
}
.hero__intro {
  font-size: clamp(17px, 1.7vw, 19.5px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin-top: 22px;
}

.hero__points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 13px 28px;
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.hero__points svg { flex: none; margin-top: 3px; color: var(--ambre); }

.hero__ancre { margin-top: 36px; }
@media (max-width: 560px) { .hero__ancre { width: 100%; } }

/* ---------- carte formulaire ---------- */

.carte-form {
  position: relative;
  scroll-margin-top: 96px; /* dégage l'en-tête fixe quand on arrive par l'ancre */
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--rayon-l);
  padding: clamp(26px, 3.4vw, 38px);
  box-shadow: var(--ombre-l);
}
.carte-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.carte-form__titre {
  font-size: clamp(21px, 2.2vw, 25px);
  max-width: 22ch;
}
.carte-form__note {
  font-size: 14.5px;
  color: var(--encre-doux);
  margin-top: 10px;
}
.carte-form__prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
  font-family: "Outfit", sans-serif;
}
.carte-form__prix b {
  font-size: 30px;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.carte-form__prix s { color: var(--encre-doux); font-size: 17px; }
.carte-form__prix span { font-size: 14px; color: var(--encre-doux); }

.champ { display: grid; gap: 7px; margin-top: 16px; }
.champ label {
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.champ label .requis { color: var(--violet); }
.champ input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon-s);
  background: #fbfafc;
  font-family: inherit;
  font-size: 16px;
  color: var(--encre);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.champ input::placeholder { color: #a29daf; }
.champ input:hover { border-color: rgba(28, 16, 48, 0.24); }
.champ input:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(117, 72, 169, 0.14);
}
.champ--erreur input { border-color: #c62828; background: #fdf6f6; }
.champ__erreur {
  display: none;
  font-size: 13.5px;
  color: #c62828;
  font-weight: 500;
}
.champ--erreur .champ__erreur { display: block; }

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__envoi { margin-top: 24px; }
.form__rgpd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--encre-doux);
  text-align: center;
}
.form__rgpd svg { flex: none; color: var(--violet); }
.form__alerte {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--rayon-s);
  background: #fdf6f6;
  border: 1px solid rgba(198, 40, 40, 0.3);
  color: #a01c1c;
  font-size: 14.5px;
}
.form__alerte.est-visible { display: block; }

.bouton.est-en-cours { pointer-events: none; opacity: 0.75; }
.bouton__chargeur {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(32, 23, 4, 0.28);
  border-top-color: #201704;
  border-radius: 50%;
  animation: tourne 700ms linear infinite;
}
.bouton.est-en-cours .bouton__chargeur { display: block; }
.bouton.est-en-cours .bouton__texte { opacity: 0.8; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- bandeau de repères ---------- */

.reperes {
  background: var(--violet-nuit);
  color: rgba(255, 255, 255, 0.88);
  padding-block: 26px;
}
.reperes__grille {
  display: grid;
  gap: 18px 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.repere {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15px;
}
.repere svg { flex: none; color: var(--ambre); }
.repere b { display: block; font-family: "Outfit", sans-serif; font-weight: 600; color: #fff; }
/* couleur explicite (et non opacity) : sous 0.68 d'alpha le contraste tombe sous 4.5:1 */
.repere span { font-size: 13.5px; color: rgba(255, 255, 255, 0.76); }

/* ---------- méthode (zig-zag, pas de 3 cartes) ---------- */

.methode__entete { max-width: 700px; }

.etapes {
  margin-top: clamp(40px, 5vw, 62px);
  display: grid;
  gap: 2px;
  background: var(--ligne);
  border-radius: var(--rayon-m);
  overflow: hidden;
}
@media (min-width: 860px) { .etapes { grid-template-columns: 1fr 1fr; } }

.etape {
  background: var(--blanc);
  padding: clamp(28px, 3.6vw, 44px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.etape__num {
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet);
}
.etape h3 { font-size: clamp(21px, 2.2vw, 26px); }
.etape p { color: var(--encre-doux); font-size: 16.5px; }
.etape__icone {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(117, 72, 169, 0.09);
  color: var(--violet);
  margin-bottom: 4px;
}

.methode__conclusion {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}
@media (min-width: 860px) {
  .methode__conclusion { grid-template-columns: 0.85fr 1.15fr; }
}
.methode__accroche {
  font-family: "Outfit", sans-serif;
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--violet-encre);
}
.methode__accroche em { font-style: normal; color: var(--violet); }
.methode__texte { color: var(--encre-doux); font-size: 17px; }

/* ---------- preuve sociale ---------- */

.avis__entete {
  display: grid;
  gap: 18px;
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 52px);
}
@media (min-width: 860px) {
  .avis__entete { grid-template-columns: 1.2fr 0.8fr; }
}
.avis__source {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--encre-doux);
}
.avis__source svg { flex: none; color: var(--violet); }

/* mur de captures Facebook : les publications telles quelles, en masonry.
   Les hauteurs varient beaucoup (327px à 1600px) — d'où les colonnes CSS. */
.mur {
  columns: 3 290px;
  column-gap: 22px;
}
.avis {
  break-inside: avoid;
  margin-bottom: 22px;
}
.avis__cadre {
  background: var(--blanc);
  border: 1px solid rgba(28, 16, 48, 0.07);
  border-radius: var(--rayon-m);
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.avis__cadre img {
  width: 100%;
  display: block;
}

/* la publication de Céline est panoramique (1000x327) : dans une colonne de 290px
   son texte devient illisible, elle passe donc en bandeau pleine largeur */
.avis--panoramique { margin: 0; }
.avis--panoramique .avis__cadre { max-width: 900px; margin-inline: auto; }

/* ---------- à propos ---------- */

.apropos__grille {
  display: grid;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
@media (min-width: 900px) {
  .apropos__grille { grid-template-columns: 0.82fr 1.18fr; }
}
.apropos__media { position: relative; }
.apropos__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-l);
}
.apropos__media::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1.5px solid var(--violet);
  border-radius: var(--rayon-l);
  opacity: 0.45;
}
.apropos__lieu {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 26px;
  padding: 16px 20px;
  background: var(--blanc);
  border-radius: var(--rayon-m);
  border: 1px solid var(--ligne);
  font-size: 15.5px;
}
.apropos__lieu svg { flex: none; color: var(--violet); margin-top: 2px; }
.apropos__lieu b { display: block; font-family: "Outfit", sans-serif; }
.apropos__lieu span { color: var(--encre-doux); font-size: 14.5px; }

/* ---------- appel final ---------- */

.final {
  position: relative;
  isolation: isolate;
  background: var(--violet-encre);
  color: var(--blanc);
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(50% 55% at 78% 22%, rgba(144, 104, 196, 0.5), transparent 64%),
    radial-gradient(46% 50% at 12% 78%, rgba(117, 72, 169, 0.42), transparent 66%);
}
.final__grille {
  display: grid;
  gap: clamp(38px, 5vw, 62px);
  align-items: center;
}
@media (min-width: 1000px) {
  .final__grille { grid-template-columns: 1.02fr 0.98fr; }
}
.final h2 { font-size: clamp(29px, 4vw, 44px); max-width: 17ch; }
.final__texte { color: rgba(255, 255, 255, 0.82); margin-top: 20px; max-width: 50ch; }
.final__liste {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.final__liste li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, 0.88); font-size: 16px; }
.final__liste svg { flex: none; margin-top: 3px; color: var(--ambre); }
.final__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 14px 22px 14px 18px;
  border: 1px solid var(--ligne-claire);
  border-radius: var(--rayon-m);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  transition: background var(--transition);
}
.final__tel:hover { background: rgba(255, 255, 255, 0.12); }
.final__tel svg { color: var(--ambre); flex: none; }
.final__tel b { display: block; font-family: "Outfit", sans-serif; font-size: 19px; font-variant-numeric: tabular-nums; }
.final__tel span { font-size: 13px; opacity: 0.72; }

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

.pied {
  background: var(--violet-nuit);
  color: rgba(255, 255, 255, 0.62);
  padding-block: 34px;
  font-size: 14px;
}
.pied__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}
.pied a { color: rgba(255, 255, 255, 0.82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.pied a:hover { color: #fff; }

/* ---------- page merci ---------- */

.merci {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--violet-encre);
  color: var(--blanc);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.merci::before {
  content: "";
  position: absolute;
  inset: -25% -15% auto -15%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(52% 56% at 50% 6%, rgba(144, 104, 196, 0.55), transparent 62%),
    radial-gradient(44% 48% at 88% 74%, rgba(117, 72, 169, 0.4), transparent 66%);
}
.merci__corps {
  display: grid;
  place-items: center;
  padding-block: clamp(54px, 9vw, 96px);
  text-align: center;
}
.merci__contenu { max-width: 820px; }
.merci__sceau {
  width: 84px;
  height: 84px;
  margin: 0 auto 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 186, 0, 0.14);
  border: 1px solid rgba(255, 186, 0, 0.4);
  color: var(--ambre);
  animation: sceau 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sceau {
  from { opacity: 0; transform: scale(0.82); }
}
.merci h1 { font-size: clamp(30px, 4.6vw, 48px); }
.merci__intro {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 1.7vw, 19px);
  margin-top: 20px;
  margin-inline: auto;
  max-width: 46ch;
}

.etapes-suite {
  list-style: none;
  margin: clamp(38px, 5vw, 54px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  text-align: left;
  border-radius: var(--rayon-m);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
@media (min-width: 780px) { .etapes-suite { grid-template-columns: repeat(3, 1fr); } }
.etapes-suite li {
  background: rgba(28, 16, 48, 0.72);
  padding: 24px 24px 26px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.etapes-suite__num {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ambre);
}
.etapes-suite b { font-family: "Outfit", sans-serif; font-size: 17px; font-weight: 600; }
.etapes-suite span { color: rgba(255, 255, 255, 0.74); font-size: 15px; line-height: 1.55; }

.merci__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(38px, 5vw, 52px);
  text-align: left;
}
.merci__signature img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.merci__signature b { display: block; font-family: "Outfit", sans-serif; font-size: 16.5px; }
.merci__signature span { font-size: 14px; color: rgba(255, 255, 255, 0.7); }

.merci__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* ---------- bandeau du mode test (?test=inocom) ---------- */

.bandeau-test {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  padding: 11px 20px;
  background: #b3261e;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
  box-shadow: 0 -8px 24px -18px rgba(10, 4, 20, 0.9);
}
.a-bandeau-test .pied { padding-bottom: 62px; }

/* ---------- révélations au scroll ---------- */

/* sans JS, rien n'est masqué : le contenu doit rester lisible en toutes circonstances */
html.js .revele {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--retard, 0ms);
}
html.js .revele.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .revele { opacity: 1; transform: none; }
}