/* Le Déclic, flux d'inscription (optin, qualification, merci).
   Charte « Feu de camp, action orange » de Yann (v2 du 23/09/2026) :
   - l'orange est rare : uniquement ce sur quoi on clique ;
   - l'encre est réservée aux moments d'émotion, le reste respire en crème ;
   - aucun dégradé, aucune ombre portée, trois couleurs visibles au maximum par écran. */

:root {
  --creme: #FAF3E8;
  --encre: #1C1A18;
  --orange: #E2431B;
  --orange-survol: #CB3C18;
  --orange-texte: #B23A14;   /* orange écrit en petit sur crème ou blanc */
  --ambre: #E0A54B;
  --sapin: #3F4A3C;
  --sable: #E4D6C2;
  --brun: #6B5F56;
  --texte-2: #4A403A;
  --surtitre: #7A5C3E;
  --sur-encre: #D8CBBB;      /* texte secondaire sur encre */
  --sur-encre-2: #C4B6A6;
  --blanc: #FFFFFF;

  --titre: "Fraunces", Georgia, serif;
  --texte: "Karla", "Helvetica Neue", Arial, sans-serif;
  --main: "Caveat", cursive;

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

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--orange-texte); }
a:hover { color: var(--encre); }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 16px;
  font-optical-sizing: auto;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0 0 14px; }

@media (min-width: 860px) {
  h1 { font-size: 56px; line-height: 1.06; }
  h2 { font-size: 40px; }
  h3 { font-size: 28px; }
}

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

.surtitre {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--surtitre);
  margin: 0 0 10px;
}
.sur-fond-sombre .surtitre { color: var(--ambre); }

.manuscrit {
  font-family: var(--main);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ambre);
  margin: 0 0 10px;
}

.muted { color: var(--texte-2); }

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

.logo {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--encre);
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.logo:hover { color: var(--encre); }
.logo-mot { white-space: nowrap; }
.logo-mot::after {
  content: "";
  display: inline-block;
  width: 0.27em;
  height: 0.27em;
  border-radius: 50%;
  background: var(--orange);
  margin-left: 0.07em;
}
.logo-mention {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brun);
  padding-left: 2px;
}
.logo-creme { color: var(--creme); }
.logo-creme:hover { color: var(--creme); }
.logo-creme .logo-mention { color: var(--sur-encre-2); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn:hover, .btn:focus-visible { background: var(--orange-survol); color: var(--blanc); }
.btn:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }
.btn[disabled] { opacity: 0.7; cursor: wait; }
.btn-large { width: 100%; }
@media (min-width: 600px) { .btn-large { width: auto; min-width: 280px; } }

.btn-secondaire {
  background: transparent;
  color: var(--encre);
  border: 2px solid var(--encre);
  padding: 14px 26px;
}
.btn-secondaire:hover, .btn-secondaire:focus-visible { background: var(--encre); color: var(--creme); }
.sur-fond-sombre .btn-secondaire { color: var(--creme); border-color: var(--creme); }
.sur-fond-sombre .btn-secondaire:hover { background: var(--creme); color: var(--encre); }

.btn-petit { min-height: 44px; padding: 10px 20px; font-size: 16px; }

.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
.cta-centre { align-items: center; text-align: center; }
.cta-note { font-size: 15px; color: var(--brun); margin: 0; }
.sur-fond-sombre .cta-note { color: var(--sur-encre-2); }

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

.entete { padding: 18px 0; }
.entete-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entete-date { font-size: 15px; color: var(--texte-2); display: none; }
@media (min-width: 760px) { .entete-date { display: inline; } }
.entete-droite { display: flex; align-items: center; gap: 18px; }
.entete-note { font-size: 15px; color: var(--brun); }

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

.sur-fond-sombre { background: var(--encre); color: var(--creme); }

/* Hero en crème depuis le 01/10 : l'encre reste pour le bandeau final et la confirmation */
.hero { padding: 28px 0 44px; border-bottom: 1px solid var(--sable); }
.hero-grille { display: grid; gap: 28px; }
.hero-photo { border-radius: 14px; overflow: hidden; order: -1; aspect-ratio: 4 / 3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero .manuscrit { color: var(--surtitre); }
.hero h1 { color: var(--encre); margin-bottom: 14px; }
.hero-sous-titre { font-size: 19px; color: var(--texte-2); margin: 0 0 22px; }
.hero-session {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 16px; color: var(--brun);
}
.hero-session strong { color: var(--encre); font-weight: 700; }
.hero-session .sep { color: var(--brun); }

@media (min-width: 860px) {
  .hero { padding: 56px 0 72px; }
  .hero-grille { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 56px; }
  .hero-photo { order: 0; aspect-ratio: 4 / 5; }
  .hero-sous-titre { font-size: 20px; }
}

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

.section { padding: 56px 0; }
@media (min-width: 860px) { .section { padding: 88px 0; } }
.section-titre { max-width: 760px; margin-bottom: 32px; }
.section-titre p { font-size: 18px; }

.promesse { font-size: 19px; }
@media (min-width: 860px) { .promesse { font-size: 21px; } }

/* cartes des trois secrets */
.secrets { display: grid; gap: 20px; }
@media (min-width: 860px) { .secrets { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.carte {
  background: var(--blanc);
  border: 1px solid var(--sable);
  border-radius: 12px;
  padding: 22px;
}
.carte-secret { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte-secret img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.carte-corps { padding: 22px; }
.carte-etiquette {
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange-texte); margin: 0 0 10px;
}
.carte h3 { margin-bottom: 12px; }
.filet { width: 72px; height: 4px; border-radius: 2px; background: var(--ambre); margin: 0 0 14px; }
.carte p { color: var(--texte-2); margin: 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: 26px; }
.liste li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--encre);
}
.liste-non li::before { background: transparent; border: 2px solid var(--brun); }
.liste-non li { color: var(--texte-2); }
.carte h3.petit { font-size: 22px; }

/* bloc d'émotion : le micro tendu */
.bloc-emotion {
  background: var(--encre); color: var(--creme);
  border-radius: 14px; overflow: hidden;
  display: grid;
}
.bloc-emotion-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.bloc-emotion-texte { padding: 28px 24px 32px; }
.bloc-emotion-texte p { color: var(--sur-encre); }
@media (min-width: 860px) {
  .bloc-emotion { grid-template-columns: 1fr 1fr; }
  .bloc-emotion-photo { position: relative; min-height: 420px; }
  .bloc-emotion-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .bloc-emotion-texte { padding: 48px 48px 52px; align-self: center; }
}
.citation {
  font-family: var(--titre); font-style: italic; font-weight: 600;
  font-size: 26px; line-height: 1.2;
  border-left: 4px solid var(--ambre); padding-left: 18px;
  margin: 0 0 20px; color: var(--creme);
}
@media (min-width: 860px) { .citation { font-size: 32px; } }

/* présenté par */
.presentation { display: grid; gap: 28px; align-items: center; }
.presentation-photo { border-radius: 12px; overflow: hidden; max-width: 420px; }
.presentation-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 860px) { .presentation { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.signature { font-family: var(--main); font-weight: 600; font-size: 34px; line-height: 1; color: var(--encre); margin: 8px 0 0; }

/* cadeau : bloc calme en sapin */
.bloc-calme { background: var(--sapin); color: var(--creme); border-radius: 14px; padding: 32px 24px; }
.bloc-calme h2 { color: var(--creme); }
.bloc-calme p { color: #E6DDD0; margin-bottom: 0; }
.bloc-calme .surtitre { color: var(--ambre); }
@media (min-width: 860px) { .bloc-calme { padding: 48px 56px; } }

/* 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: 600; font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
.pratique .carte span { color: var(--texte-2); font-size: 16px; }

/* bandeau final */
.final { text-align: center; }
.final h2 { color: var(--creme); max-width: 760px; margin-left: auto; margin-right: auto; }
.final p { color: var(--sur-encre); }

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

.pied { padding: 40px 0 120px; font-size: 14px; color: var(--brun); }
.pied p { margin: 0 0 10px; }
.pied a { color: var(--brun); }
.pied .logo { margin-bottom: 18px; }
.mention-legale { font-size: 12.5px; line-height: 1.5; max-width: 760px; }

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

.barre-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--encre); color: var(--creme);
  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: 14px; line-height: 1.3; color: var(--sur-encre); }
.barre-texte strong { color: var(--creme); display: block; font-size: 15px; }
.barre-cta .btn { padding: 12px 20px; 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: rgba(28, 26, 24, 0.72); }
.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(--creme); border-radius: 14px 14px 0 0;
  padding: 28px 22px calc(26px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal-feuille { border-radius: 14px; padding: 36px 36px 32px; }
}
.modal-fermer {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--brun); cursor: pointer;
  border-radius: 50%;
}
.modal-fermer:hover { color: var(--encre); background: var(--sable); }
.modal h2 { font-size: 30px; margin-bottom: 8px; padding-right: 40px; }
.modal-session {
  display: inline-block; background: var(--blanc); border: 1px solid var(--sable); border-radius: 999px;
  padding: 6px 14px; font-size: 15px; font-weight: 600; margin: 4px 0 18px;
}

.champ { margin-bottom: 14px; }
.champ label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-family: var(--texte); font-size: 17px; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--sable); border-radius: 12px;
}
.champ input:focus { outline: none; border-color: var(--encre); }
.champ input.is-invalid { border-color: var(--orange-texte); }
.champ-aide { font-size: 14px; color: var(--brun); margin: 6px 0 0; }

.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texte-2); margin: 6px 0 18px; cursor: pointer; }
.consentement input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--encre); }

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

/* ------------------------------------------------------- qualification */

.quiz { max-width: 640px; margin: 0 auto; padding: 12px 0 80px; }
.progression { display: flex; gap: 8px; margin: 8px 0 28px; }
.progression-point { flex: 1; height: 4px; border-radius: 2px; background: var(--sable); }
.progression-point.is-done { background: var(--encre); }
.progression-point.is-active { background: var(--ambre); }

.etape { display: none; }
.etape.is-visible { display: block; }
.etape-surtitre { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--surtitre); margin: 0 0 10px; }
.etape h1 { font-size: 30px; margin-bottom: 8px; }
@media (min-width: 860px) { .etape h1 { font-size: 40px; } }
.etape-aide { color: var(--texte-2); 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.35; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--sable); border-radius: 12px;
}
.option:hover, .option:focus-visible { border-color: var(--encre); outline: none; }
.option.is-selected { background: var(--orange); border-color: var(--orange); color: var(--blanc); font-weight: 700; }

/* Téléphone (01/10) : 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; }
  .progression { margin: 4px 0 18px; }
  .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: 12px 16px; font-size: 16px; }
}

.etape-finale { text-align: center; padding-top: 32px; }
.point-declic {
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange);
  margin: 0 auto 22px; animation: battement 1.2s ease-in-out infinite;
}
@keyframes battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .point-declic { animation: none; } }

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

.merci-hero { padding: 36px 0 48px; }
.merci-hero h1 { color: var(--creme); }
.merci-date { font-family: var(--titre); font-weight: 600; font-size: 24px; color: var(--creme); margin: 0 0 6px; }
@media (min-width: 860px) { .merci-date { font-size: 30px; } }
.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: 16px; }
.etapes > li { counter-increment: etape; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.etapes > li[hidden] { display: none; }
.etapes > li::before {
  content: counter(etape);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--encre); color: var(--creme);
  font-family: var(--titre); font-weight: 600; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.etapes h3 { font-size: 22px; margin: 6px 0 6px; }
.etapes p { color: var(--texte-2); margin: 0 0 10px; }

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

.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--encre); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------- ajouts du 28/09 (retours de Nicolas) */

/* raison douce d'agir maintenant */
.hero-bientot {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 14px 0 0; font-size: 15px; font-weight: 700; color: var(--ambre);
}
.hero-bientot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre);
}
.hero-pourquoi { font-size: 15px; color: var(--sur-encre-2); margin: 18px 0 0; max-width: 520px; }

/* popup : la date dans la phrase, comme une information fixe */
.modal-intro { color: var(--texte-2); margin: 0 0 20px; }
.modal-intro strong { color: var(--encre); }

/* Téléphone (01/10) : 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: 26px; 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; }
  .form-note { margin-top: 8px; }
}

/* finalisation : l'inscription est toujours en cours */
.inscription-en-cours { margin: 4px 0 30px; }
.inscription-statut { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin: 0 0 10px; }
.point-actif { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; animation: battement 1.2s ease-in-out infinite; }
.barre-chargement { position: relative; height: 10px; border-radius: 999px; background: var(--sable); overflow: hidden; }
.barre-remplie {
  position: relative; height: 100%; border-radius: 999px; background: var(--encre);
  overflow: hidden; transition: width 0.5s ease;
}
.barre-remplie::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: rgba(250, 243, 232, 0.28);
  animation: chargement 1.4s ease-in-out infinite;
}
@keyframes chargement { 0% { left: -34%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .barre-remplie::after, .point-actif { animation: none; } }
.inscription-aide { font-size: 14px; color: var(--brun); margin: 10px 0 0; }
@media (max-width: 639px) {
  .inscription-en-cours { margin-bottom: 20px; }
  .inscription-statut { font-size: 15px; margin-bottom: 8px; }
  .inscription-aide { font-size: 13px; margin-top: 8px; }
}

/* confirmation : la vidéo de Yann puis le bouton WhatsApp, visibles sans défiler (retours du 28/09).
   --merci-reste = hauteur du haut de page sans la vidéo, jusque sous le bouton WhatsApp :
   sur un écran trop bas, la vidéo rétrécit au lieu de pousser le bouton hors de vue. */
.merci-hero { --merci-reste: 430px; padding: 20px 0 32px; }
.merci-hero .logo { margin-bottom: 16px; }
.merci-hero h1 { font-size: 30px; margin-bottom: 14px; }
.merci-etape { margin: 0 0 12px; }
.merci-etape-quand {
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ambre); margin: 0 0 4px;
}
.merci-etape-texte { color: var(--sur-encre); margin: 0; }
.merci-etape-texte strong { color: var(--creme); font-size: 19px; line-height: 1.35; }

.merci-video { margin: 0 0 20px; }
.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)));
}

/* affiche en attendant la vraie vidéo : le bouton lecture reste à l'écart du visage de Yann */
.video-attente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.video-lecture {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(28, 26, 24, 0.8); color: var(--creme);
  font-size: 15px; font-weight: 700;
}
.video-bouton {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--blanc);
}
@media (min-width: 760px) {
  .video-lecture { left: 18px; bottom: 18px; font-size: 16px; }
  .video-bouton { width: 52px; height: 52px; }
}

.merci-whatsapp { margin: 0; }
.merci-whatsapp .btn-whatsapp { width: 100%; margin-top: 10px; 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: 28px 0 40px; }
  .merci-hero h1 { font-size: 42px; }
}

/* petits écrans (type iPhone SE) : titre plus court et bouton WhatsApp sans phrase d'introduction */
@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: 26px; margin-bottom: 10px; }
  .merci-whatsapp .merci-etape-texte { display: none; }
  .merci-whatsapp .btn-whatsapp { margin-top: 0; }
}

/* vidéo verticale (04/10) : Yann a tourné son message en 9:16. Empilée sous la consigne, elle poussait
   le bouton WhatsApp sous l'écran : elle passe à gauche de la consigne, le bouton reste dessous.
   --merci-reste-v = hauteur du haut de page hors vidéo dans cette disposition : la vidéo prend le reste. */
.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-yann { 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);
}
.merci-etape-duree { font-size: 15px; color: var(--sur-encre-2); margin: 8px 0 0; }
/* téléphones étroits (360 px) : le bouton WhatsApp tient sur une ligne au lieu de deux */
@media (max-width: 379px) {
  .merci-whatsapp .btn-whatsapp { padding-left: 16px; padding-right: 16px; }
}

@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-yann { 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; }
  .video-verticale .merci-video .video.vertical {
    width: clamp(200px, (100vh - var(--merci-reste-v)) * 9 / 16, 300px);
    width: clamp(200px, (100svh - var(--merci-reste-v)) * 9 / 16, 300px);
  }
}

@media (max-height: 600px) and (max-width: 600px) {
  .merci-haut.video-verticale { --merci-reste-v: 240px; }
}

.merci-infos { padding: 36px 0; }
.merci-infos .merci-date { color: var(--encre); }