/* Imagine-toi, flux d'inscription à la masterclass Rayonnante (optin, questions, confirmation).
   Charte : « Mini Design System 2026 » de Julie (Drive partagé › 03 - Branding, V8) :
   - palette fermée, aucune autre couleur : #7B7466 pour 80 % des textes, ivoire, rose nude, blanc, pêche ;
   - le magenta de Rayonnante est un accent (boutons, mots mis en avant), jamais un aplat ;
   - l'or est une lumière : filets fins, étoiles à 4 branches, jamais une couleur de texte courant ;
   - jamais de noir, coins modérés (8 à 18 px), beaucoup d'air, lignes de 58 à 72 caractères.
   Lisibilité : #7B7466 fait 4,3:1 sur ivoire et 4,6:1 sur blanc. Le texte courant est donc posé sur blanc ;
   l'ivoire porte le haut de page et les grands titres. */

:root {
  --it-text: #7B7466;
  --it-bg: #FEF5EC;
  --it-blush: #FADBD5;
  --it-white: #FFFFFF;
  --it-peach: #FBBDAC;
  --it-rayonnante: #BD1AE0;
  --it-gold-dark: #B58244;
  --it-gold-light: #EDD58B;
  --it-rose-nacre: #D48F92;
  --it-rose-nacre-light: #FEDDDD;

  --or: linear-gradient(90deg, var(--it-gold-dark), var(--it-gold-light), var(--it-gold-dark));
  --filet: rgba(181, 130, 68, 0.28);        /* bordures fines : l'or sombre en transparence */
  --voile: rgba(123, 116, 102, 0.55);       /* fond de la popup : le texte de la marque, jamais du noir */
  --ombre: 0 10px 30px rgba(181, 130, 68, 0.12);

  --titre: "Playfair Display", Georgia, serif;
  --structure: "Advent Pro", "Jost", sans-serif;
  --texte: "Jost", "Helvetica Neue", Arial, sans-serif;
  --geste: "Allura", cursive;

  --max: 1120px;
  --gouttiere: 20px;
}

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

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

body {
  margin: 0;
  background: var(--it-white);
  color: var(--it-text);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--it-rayonnante); }
a:hover { color: var(--it-text); }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--it-text);
}
h1 { font-size: 34px; }
h2 { font-size: 29px; }
h3 { font-size: 23px; line-height: 1.25; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--it-rayonnante); }
p { margin: 0 0 16px; }
strong { font-weight: 500; color: var(--it-text); }

@media (min-width: 860px) {
  h1 { font-size: 52px; line-height: 1.1; }
  h2 { font-size: 40px; }
  h3 { font-size: 26px; }
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.narrow { max-width: 700px; }

/* Étiquette : sans serif structurelle, en capitales espacées, précédée d'une étoile dorée */
.surtitre, .etiquette {
  font-family: var(--structure);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--it-text);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.surtitre::before, .etiquette::before {
  content: "";
  width: 12px; height: 12px; flex: none;
  background: var(--or);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Geste manuscrit : 2 à 5 mots maximum, jamais du texte de lecture */
.geste, .lettre .geste, .carte .geste {
  font-family: var(--geste);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--it-rayonnante);
  margin: 0;
}

/* Ornement : filet doré, étoile, filet doré (repris des visuels Rayonnante) */
.ornement { display: flex; align-items: center; gap: 12px; max-width: 220px; margin: 20px 0; }
.ornement::before, .ornement::after { content: ""; flex: 1; height: 1px; background: var(--or); }
.ornement span {
  width: 14px; height: 14px; flex: none; background: var(--or);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.ornement-centre { margin-left: auto; margin-right: auto; }

.muted { color: var(--it-text); opacity: 0.92; }

/* ---------------------------------------------------------------- logo */

.logo {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--it-text);
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
}
.logo:hover { color: var(--it-text); }
.logo-mot { white-space: nowrap; }
.logo-mention {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--it-text);
  padding-left: 1px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--it-rayonnante);
  color: var(--it-white);
  font-family: var(--structure);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  color: var(--it-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(189, 26, 224, 0.22);
}
.btn:focus-visible { outline: 2px solid var(--it-gold-dark); outline-offset: 3px; }
.btn[disabled] { opacity: 0.75; cursor: wait; transform: none; box-shadow: none; }
.btn-large { width: 100%; }
@media (min-width: 600px) { .btn-large { width: auto; min-width: 300px; } }

.btn-secondaire {
  background: transparent;
  color: var(--it-text);
  border: 1px solid var(--it-gold-dark);
  padding: 15px 26px;
}
.btn-secondaire:hover, .btn-secondaire:focus-visible { color: var(--it-text); background: var(--it-bg); box-shadow: none; }

.btn-petit { min-height: 44px; padding: 10px 18px; font-size: 16px; letter-spacing: 1px; }

.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.cta-centre { align-items: center; text-align: center; }
.cta-note { font-size: 16px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:focus-visible { transform: none; }
}

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

.entete { padding: 18px 0; background: var(--it-bg); }
.entete-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entete-date { font-family: var(--structure); font-weight: 600; font-size: 16px; letter-spacing: 0.5px; display: none; }
@media (min-width: 760px) { .entete-date { display: inline; } }
.entete-droite { display: flex; align-items: center; gap: 18px; }

/* ----------------------------------------------------------------- hero */

/* Ivoire avec deux halos (pêche et rose nude) : la lumière chaude des visuels, sans aplat */
.hero {
  position: relative;
  overflow: hidden;
  padding: 18px 0 48px;
  background:
    radial-gradient(60% 50% at 88% 18%, rgba(251, 189, 172, 0.45), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, rgba(250, 219, 213, 0.45), transparent 70%),
    var(--it-bg);
}
.hero-grille { display: grid; gap: 28px; position: relative; }
.hero-photo {
  border-radius: 14px; overflow: hidden; order: -1; aspect-ratio: 4 / 3;
  box-shadow: var(--ombre);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.hero h1 { margin-bottom: 16px; }
.hero-sous-titre { font-size: 20px; line-height: 1.5; margin: 0 0 22px; max-width: 34em; }
.hero-session {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-family: var(--structure); font-weight: 600; font-size: 17px; letter-spacing: 0.3px; margin: 0;
}
.hero-session strong { font-weight: 700; }
.hero-bientot {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 14px 0 0; font-family: var(--structure); font-size: 17px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--it-rayonnante);
}
.hero-bientot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--it-rayonnante);
}

@media (min-width: 860px) {
  .hero { padding: 48px 0 84px; }
  .hero-grille { grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 64px; }
  .hero-photo { order: 0; aspect-ratio: 3 / 4; }
  .hero-photo img { object-position: 50% 20%; }
}

/* ------------------------------------------------------------- sections */

.section { padding: 60px 0; }
@media (min-width: 860px) { .section { padding: 96px 0; } }
.section-ivoire { background: var(--it-bg); }
.section-nude { background: var(--it-blush); }
.section-titre { max-width: 760px; margin-bottom: 36px; }

.lettre p { font-size: 19px; }
@media (min-width: 860px) { .lettre p { font-size: 20px; } }
.lettre .accroche { font-family: var(--titre); font-style: italic; font-size: 24px; line-height: 1.4; }
@media (min-width: 860px) { .lettre .accroche { font-size: 28px; } }

/* les trois secrets : cartes sobres, la couleur de Rayonnante en accent seulement */
.secrets { display: grid; gap: 20px; }
@media (min-width: 860px) { .secrets { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.carte {
  background: var(--it-white);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 26px 24px;
}
.carte-secret { position: relative; padding-top: 30px; }
.carte-secret::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: var(--or);
}
.carte-numero {
  font-family: var(--titre); font-style: italic; font-size: 46px; line-height: 1;
  color: var(--it-rayonnante); margin: 0 0 14px;
}
.carte h3 { margin-bottom: 12px; }
.carte p { margin: 0 0 12px; }
.carte p:last-child { margin-bottom: 0; }

/* pour toi / pas pour toi */
.pour-qui { display: grid; gap: 20px; }
@media (min-width: 860px) { .pour-qui { grid-template-columns: 1.4fr 1fr; gap: 24px; } }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.liste li { position: relative; padding-left: 28px; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 13px; height: 13px; background: var(--or);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.liste-non li::before {
  clip-path: none;
  width: 11px; height: 1px; top: 0.85em; background: var(--it-text);
}
.carte h3.petit { font-size: 23px; }

/* bloc citation : la phrase signature de Julie sur le décor au voile magenta */
.bloc-citation {
  position: relative; border-radius: 14px; overflow: hidden;
  min-height: 420px; display: flex; align-items: flex-end;
  background: var(--it-bg) url("/assets/img/decor-voile.jpg") 18% 50% / cover no-repeat;
}
.bloc-citation-texte {
  position: relative; margin: 20px; padding: 26px 24px 28px;
  background: rgba(255, 255, 255, 0.9); border-radius: 12px; max-width: 560px;
}
.citation {
  font-family: var(--titre); font-style: italic; font-weight: 400;
  font-size: 25px; line-height: 1.35; margin: 0 0 10px; color: var(--it-text);
}
@media (min-width: 860px) {
  .bloc-citation { min-height: 520px; align-items: center; justify-content: flex-end; }
  .bloc-citation-texte { margin: 48px; padding: 40px 44px 40px; }
  .citation { font-size: 32px; }
}

/* présentation de Julie */
.presentation { display: grid; gap: 30px; align-items: center; }
.presentation-photo { border-radius: 14px; overflow: hidden; max-width: 440px; box-shadow: var(--ombre); }
.presentation-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 30%; }
@media (min-width: 860px) { .presentation { grid-template-columns: 0.85fr 1.15fr; gap: 64px; } }
.signature { margin: 6px 0 0; }

/* cadeau : carte blanche sur rose nude */
.bloc-cadeau { display: grid; gap: 24px; align-items: center; }
.bloc-cadeau-photo { border-radius: 14px; overflow: hidden; }
.bloc-cadeau-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 860px) {
  .bloc-cadeau { grid-template-columns: 1fr 1fr; gap: 0; }
  .bloc-cadeau-photo img { aspect-ratio: 1 / 1; }
  .bloc-cadeau .carte { margin-left: -48px; padding: 44px 48px; box-shadow: var(--ombre); }
}

/* infos pratiques */
.pratique { display: grid; gap: 14px; }
@media (min-width: 700px) { .pratique { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pratique .carte strong { display: block; font-family: var(--titre); font-weight: 500; font-size: 23px; line-height: 1.25; margin-bottom: 8px; }
.pratique .carte span { font-size: 17px; }

/* bandeau final : blanc, deux filets d'or, la phrase de Julie */
.final { text-align: center; }
.final h2 { max-width: 780px; margin-left: auto; margin-right: auto; }
.final p { font-family: var(--structure); font-weight: 600; font-size: 18px; letter-spacing: 0.3px; }

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

.pied { padding: 44px 0 120px; font-size: 15px; background: var(--it-bg); border-top: 1px solid var(--filet); }
.pied p { margin: 0 0 10px; }
.pied a { color: var(--it-text); }
.pied .logo { margin-bottom: 18px; }
.pied .geste { font-size: 34px; margin: 4px 0 16px; }
.mention-legale { font-size: 13.5px; line-height: 1.55; max-width: 760px; }

/* -------------------------------------------------------- barre collante */

.barre-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--it-white); border-top: 1px solid var(--filet);
  box-shadow: 0 -8px 24px rgba(181, 130, 68, 0.12);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform 0.25s ease;
}
.barre-cta.is-visible { transform: translateY(0); }
.barre-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barre-texte { font-size: 15px; line-height: 1.3; }
.barre-texte strong { display: block; font-family: var(--structure); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; }
.barre-cta .btn { padding: 12px 18px; font-size: 16px; white-space: nowrap; }

/* ------------------------------------------------------------ popup */

body.modal-ouverte { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-fond { position: absolute; inset: 0; background: var(--voile); }
.modal-feuille {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; max-height: calc(100svh - 12px); overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--it-white); border-radius: 16px 16px 0 0;
  padding: 28px 22px calc(26px + env(safe-area-inset-bottom));
}
.modal-feuille::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; background: var(--or);
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal-feuille { border-radius: 16px; padding: 38px 38px 32px; }
  .modal-feuille::before { left: 38px; right: 38px; }
}
.modal-fermer {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--it-text); cursor: pointer;
  border-radius: 50%;
}
.modal-fermer:hover { background: var(--it-bg); }
.modal h2 { font-size: 31px; margin-bottom: 8px; padding-right: 40px; }
.modal-intro { margin: 0 0 20px; font-size: 17px; }

.champ { margin-bottom: 14px; }
.champ label { display: block; font-family: var(--structure); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-family: var(--texte); font-size: 17px; color: var(--it-text);
  background: var(--it-white); border: 1px solid rgba(123, 116, 102, 0.45); border-radius: 10px;
}
.champ input:focus { outline: none; border-color: var(--it-rayonnante); box-shadow: 0 0 0 3px rgba(189, 26, 224, 0.12); }
.champ input.is-invalid { border-color: var(--it-rayonnante); }
.champ-aide { font-size: 14px; margin: 6px 0 0; }

.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; margin: 6px 0 18px; cursor: pointer; }
.consentement input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--it-rayonnante); }

.form-erreur { display: none; color: var(--it-rayonnante); font-size: 15px; font-weight: 500; margin: 12px 0 0; }
.form-erreur.is-visible { display: block; }
.form-note { font-size: 14px; margin: 12px 0 0; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Téléphone : 100svh suit la hauteur réellement visible sous les barres de Safari ;
   la popup est resserrée pour que tout le formulaire tienne sans défiler */
@media (max-width: 639px) {
  .modal-feuille { padding: 22px 20px calc(16px + env(safe-area-inset-bottom)); }
  .modal h2 { font-size: 27px; margin-bottom: 6px; }
  .modal-intro { font-size: 16px; line-height: 1.45; margin-bottom: 14px; }
  .champ { margin-bottom: 10px; }
  .champ label { margin-bottom: 4px; }
  .champ input { min-height: 46px; padding: 10px 14px; }
  .champ-aide { font-size: 13px; margin-top: 4px; }
  .consentement { margin: 4px 0 14px; font-size: 14px; }
  .form-note { margin-top: 8px; }
}

/* ------------------------------------------------------- questions (finalisation) */

body[data-page="qualification"] { background: var(--it-bg); }
.quiz { max-width: 640px; margin: 0 auto; padding: 12px 0 80px; }

.etape { display: none; }
.etape.is-visible { display: block; }
.etape-surtitre {
  font-family: var(--structure); font-weight: 600; font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  margin: 0 0 10px;
}
.etape h1 { font-size: 30px; margin-bottom: 8px; }
@media (min-width: 860px) { .etape h1 { font-size: 40px; } }
.etape-aide { margin: 0 0 22px; }
.options { display: grid; gap: 12px; }
.option {
  width: 100%; text-align: left; cursor: pointer;
  min-height: 56px; padding: 14px 18px;
  font-family: var(--texte); font-size: 17px; line-height: 1.4; color: var(--it-text);
  background: var(--it-white); border: 1px solid var(--filet); border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.option:hover, .option:focus-visible { border-color: var(--it-rayonnante); outline: none; transform: translateY(-1px); }
.option.is-selected { background: var(--it-rayonnante); border-color: var(--it-rayonnante); color: var(--it-white); font-weight: 500; }

/* Téléphone : la question et ses quatre réponses tiennent sur un écran, sans défiler */
@media (max-width: 639px) {
  body[data-page="qualification"] .entete { padding: 12px 0; }
  .quiz { padding-top: 4px; }
  .etape-surtitre { margin-bottom: 6px; }
  .etape h1 { font-size: 26px; margin-bottom: 6px; }
  .etape-aide { font-size: 16px; margin-bottom: 16px; }
  .options { gap: 10px; }
  .option { min-height: 50px; padding: 11px 16px; font-size: 16px; }
}

.etape-finale { text-align: center; padding-top: 32px; }
.etoile-battement {
  width: 28px; height: 28px; margin: 0 auto 22px; background: var(--or);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: battement 1.2s ease-in-out infinite;
}
@keyframes battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* l'inscription est toujours en cours */
.inscription-en-cours { margin: 4px 0 30px; }
.inscription-statut {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--structure); font-weight: 700; font-size: 17px; letter-spacing: 0.3px; margin: 0 0 10px;
}
.point-actif { width: 10px; height: 10px; border-radius: 50%; background: var(--it-rayonnante); flex: none; animation: battement 1.2s ease-in-out infinite; }
.barre-chargement { position: relative; height: 8px; border-radius: 999px; background: var(--it-blush); overflow: hidden; }
.barre-remplie {
  position: relative; height: 100%; border-radius: 999px; background: var(--it-rayonnante);
  overflow: hidden; transition: width 0.5s ease;
}
.barre-remplie::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: rgba(255, 255, 255, 0.35);
  animation: chargement 1.4s ease-in-out infinite;
}
@keyframes chargement { 0% { left: -34%; } 100% { left: 100%; } }
.inscription-aide { font-size: 15px; margin: 10px 0 0; }
@media (max-width: 639px) {
  .inscription-en-cours { margin-bottom: 20px; }
  .inscription-statut { font-size: 16px; margin-bottom: 8px; }
  .inscription-aide { font-size: 14px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-remplie::after, .point-actif, .etoile-battement { animation: none; }
  .option { transition: none; }
}

/* ---------------------------------------------------------------- confirmation */

/* Haut de page en ivoire et halos, comme l'inscription. Sans vidéo, le bouton WhatsApp est la première action. */
.merci-hero {
  --merci-reste: 430px;
  padding: 22px 0 36px;
  background:
    radial-gradient(60% 60% at 90% 10%, rgba(251, 189, 172, 0.45), transparent 70%),
    var(--it-bg);
}
.merci-hero .logo { margin-bottom: 18px; }
.merci-hero h1 { font-size: 32px; margin-bottom: 16px; }
.merci-etape { margin: 0 0 12px; }
.merci-etape-quand {
  font-family: var(--structure); font-weight: 700; font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--it-rayonnante); margin: 0 0 4px;
}
.merci-etape-texte { margin: 0; }
.merci-etape-texte strong { font-size: 20px; line-height: 1.4; }
.merci-etape-duree { font-size: 15px; margin: 8px 0 0; }

.merci-video { margin: 0 0 20px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--it-blush); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.merci-video .video {
  margin: 0;
  max-width: max(260px, calc((100vh - var(--merci-reste)) * 16 / 9));
  max-width: max(260px, calc((100svh - var(--merci-reste)) * 16 / 9));
}
.merci-video .video.vertical {
  aspect-ratio: 9 / 16;
  max-width: min(360px, max(200px, calc((100vh - var(--merci-reste)) * 9 / 16)));
  max-width: min(360px, max(200px, calc((100svh - var(--merci-reste)) * 9 / 16)));
}

.merci-whatsapp { margin: 0; }
.merci-whatsapp .btn-whatsapp { width: 100%; margin-top: 12px; gap: 10px; }
@media (min-width: 760px) {
  .merci-whatsapp-ligne { display: flex; align-items: center; gap: 24px; }
  .merci-whatsapp .btn-whatsapp { width: auto; flex: none; margin-top: 0; }
}
@media (min-width: 860px) {
  .merci-hero { --merci-reste: 350px; padding: 30px 0 48px; }
  .merci-hero h1 { font-size: 44px; }
}
@media (max-height: 600px) and (max-width: 600px) {
  .merci-hero { --merci-reste: 340px; padding-top: 14px; }
  .merci-hero .logo { margin-bottom: 10px; }
  .merci-hero h1 { font-size: 27px; margin-bottom: 10px; }
  .merci-whatsapp .merci-etape-texte { display: none; }
  .merci-whatsapp .btn-whatsapp { margin-top: 0; }
}
@media (max-width: 379px) {
  .merci-whatsapp .btn-whatsapp { padding-left: 14px; padding-right: 14px; letter-spacing: 0.5px; }
}

/* vidéo verticale : elle passe à gauche de la consigne, le bouton WhatsApp reste dessous */
.merci-haut.video-verticale {
  --merci-reste-v: 330px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "video consigne" "whatsapp whatsapp";
  gap: 18px 16px;
  align-items: center;
}
.video-verticale #message-julie { grid-area: consigne; margin: 0; }
.video-verticale .merci-video { grid-area: video; margin: 0; }
.video-verticale .merci-whatsapp { grid-area: whatsapp; }
.video-verticale .merci-video .video.vertical {
  max-width: none;
  width: clamp(120px, min(46vw, (100vh - var(--merci-reste-v)) * 9 / 16), 230px);
  width: clamp(120px, min(46vw, (100svh - var(--merci-reste-v)) * 9 / 16), 230px);
}
@media (min-width: 760px) {
  .merci-haut.video-verticale {
    --merci-reste-v: 210px;
    grid-template-areas: "video consigne" "video whatsapp";
    gap: 0 40px;
  }
  .video-verticale #message-julie { align-self: end; margin-bottom: 28px; }
  .video-verticale .merci-whatsapp { align-self: start; }
  .video-verticale .merci-whatsapp-ligne { display: block; }
  .video-verticale .merci-whatsapp .btn-whatsapp { margin-top: 14px; }
}

.merci-infos { padding: 40px 0; }
.merci-date { font-family: var(--titre); font-weight: 500; font-size: 26px; margin: 0 0 6px; }
@media (min-width: 860px) { .merci-date { font-size: 32px; } }
.merci-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 18px; }
.etapes > li { counter-increment: etape; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.etapes > li[hidden] { display: none; }
.etapes > li::before {
  content: counter(etape);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--it-gold-dark); color: var(--it-text);
  font-family: var(--titre); font-style: italic; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
}
.etapes h3 { font-size: 23px; margin: 6px 0 6px; }
.etapes p { margin: 0 0 10px; }

.mot-julie { display: grid; gap: 24px; align-items: center; }
.mot-julie-photo { border-radius: 14px; overflow: hidden; max-width: 320px; }
.mot-julie-photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 40% 30%; }
@media (min-width: 760px) { .mot-julie { grid-template-columns: 0.7fr 1.3fr; gap: 44px; } }

/* --------------------------------------------- apparition douce au défilement */

.apparition { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.apparition.est-apparu { opacity: 1; transform: none; }

/* Téléphone : la barre collante porte déjà le bouton, l'en-tête garde seulement le logo ;
   photo moins haute pour que le titre commence plus haut */
@media (max-width: 599px) {
  .entete .btn { display: none; }
  .hero-photo { aspect-ratio: 3 / 2; }
  .hero-photo img { object-position: 50% 12%; }
}
@media (max-width: 400px) {
  h1 { font-size: 31px; }
}
@media (max-width: 599px) {
  .btn-whatsapp, .merci-boutons .btn { font-size: 17px; letter-spacing: 1px; }
}