/* Pages de conférence : page d'atterrissage autonome, volontairement séparée du
   catalogue. Elle n'emprunte ni l'en-tête ni le pied du site : un bouton « Se
   connecter » et le bouton WhatsApp flottant y entreraient en concurrence avec
   la seule action attendue, réserver sa place. D'où sa propre déclaration de
   police, sans quoi la page s'afficherait dans la police système. */
@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rouge: #DC000C;
  --bordeaux: #A80E16;
  --creme: #FDFBE9;
  --rose: #FCE7F0;
  --noir: #000000;
  --texte: #2b2622;
  --doux: #6f675c;
  --blanc: #ffffff;
  /* Largeur de lecture commune à tous les blocs de texte des pages de
     conférence. En rem et non en « ch » : « ch » dépend de la police du bloc,
     ce qui donnait une largeur différente à chacun. */
  --mesure: 38rem;
}
* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--creme); color: var(--noir);
  font-family: 'Raleway', -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  padding-bottom: 78px;
}
/* « height: auto » est global à dessein : les attributs width/height du HTML,
   posés pour réserver la place au chargement, valent sinon hauteur définitive
   et écrasent tout « aspect-ratio ». Les photos s'étiraient. */
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.large { max-width: 1180px; margin-inline: auto; padding-inline: 22px; }

.bouton {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--rouge); color: var(--blanc); border: 0;
  font: 700 17px/1.2 'Raleway', sans-serif; padding: 19px 30px;
}
/* Arrondi et ombré, contre la charte à angles droits : demandé par Gaëlle le
   23/09/2026, même famille que les pastilles d'agenda et le bouton WhatsApp.
   Seuls les boutons sont arrondis, le reste de la page garde ses angles droits. */
.bouton { border-radius: 999px; box-shadow: 0 4px 12px rgba(120, 10, 15, .28); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.bouton:hover { background: var(--bordeaux); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(120, 10, 15, .32); }
.bouton[disabled] { opacity: .55; cursor: progress; }
.bouton:focus-visible, input:focus-visible, select:focus-visible, .fermer:focus-visible { outline: 3px solid var(--noir); outline-offset: 2px; }

/* ---- Ouverture : le titre et la photo ne font qu'un ---- */
.logo { padding-block: 16px 0; }
.logo img { height: 30px; width: auto; }
.ouverture { position: relative; overflow: hidden; }
.ouverture-texte { padding-block: 22px 0; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.pour-qui { font-weight: 700; font-size: 17.5px; line-height: 1.35; color: var(--rouge); }
h1 { font-weight: 200; font-size: clamp(33px, 9vw, 84px); line-height: 1.02; letter-spacing: -0.025em; }
.promesse { font-size: 18px; font-weight: 500; color: var(--texte); max-width: 34ch; }
.rendez-vous { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 4px; }
.rendez-vous .bouton { width: 100%; }
.quoi-quand { border-left: 3px solid var(--rouge); padding-left: 14px; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--texte); }
.quoi-quand b { display: block; font-weight: 700; font-size: 17px; color: var(--noir); }
/* Le mur de la photo a été blanchi : en « multiplier », il prend la couleur exacte de la page. */
.ouverture-photo { margin: -6px -22px 0; mix-blend-mode: multiply; }
.ouverture-photo img {
  /* « height: auto » est indispensable : l'attribut height du HTML, posé pour
     réserver la place au chargement, vaut sinon hauteur définitive et écrase le
     rapport d'image ci-dessous. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
}
/* La preuve sous le bouton, là où la visiteuse hésite, au lieu d'un bandeau noir
   en bas d'écran qu'on lisait comme un pied de page (décidé le 23/09/2026). */
.signature { font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--doux); }
.signature b { color: var(--noir); font-weight: 700; }

/* ---- Le constat ---- */
.constat { padding-block: 54px 50px; display: flex; flex-direction: column; gap: 26px; }
/* Un texte à lire, pas un titre : taille et graisse de lecture. La phrase qui
   pique passe dessous, plus grande, sans atteindre le gras du trait rouge qui suit. */
.constat .phrase { font-weight: 400; font-size: clamp(20px, 5vw, 24px); line-height: 1.45; color: var(--texte); max-width: 34ch; }
.constat .phrase strong { display: block; margin-top: 14px; font-weight: 500; font-size: clamp(24px, 6.4vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--noir); max-width: 22ch; }
.constat-texte { display: flex; flex-direction: column; gap: 18px; }
.constat .suite { font-weight: 700; font-size: 18px; line-height: 1.35; border-left: 3px solid var(--rouge); padding-left: 14px; max-width: 30ch; }
.atouts { list-style: none; padding: 0; display: grid; gap: 14px; }
.atouts li { position: relative; padding-left: 26px; font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.atouts li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: var(--rouge); }

/* ---- Les trois clés ---- */
.cles { background: var(--rose); padding-block: 54px 58px; }
.cles .large { display: flex; flex-direction: column; gap: 26px; }
.cles h2, .animee h2 { font-weight: 200; font-size: clamp(34px, 8.6vw, 56px); line-height: 1.02; letter-spacing: -0.02em; }
.cles .chapo { font-size: 17.5px; color: var(--texte); max-width: 52ch; }
.trio { display: grid; gap: 16px; }
.cle { background: var(--creme); border-left: 3px solid var(--rouge); padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.cle .rang { font-weight: 200; font-size: 54px; line-height: .9; color: var(--rouge); }
.cle h3 { font-size: 20px; font-weight: 700; line-height: 1.22; }
.cle p { font-size: 16px; color: var(--texte); }

/* ---- La preuve ---- */
.groupe img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.preuves { padding-block: 34px 56px; display: grid; gap: 22px; }
.preuves p { font-size: 16px; color: var(--texte); line-height: 1.4; }
.preuves b { display: block; font-weight: 800; font-size: 21px; color: var(--noir); }

/* ---- Animée par ---- */
.animee { padding-block: 0 56px; display: flex; flex-direction: column; gap: 30px; }
.deux { display: grid; gap: 30px; }
.personne { display: flex; flex-direction: column; gap: 10px; }
.personne h3 { font-size: 24px; font-weight: 700; line-height: 1.15; }
.personne p { font-size: 16px; color: var(--texte); }
.objectif { font-size: 19px; font-weight: 500; line-height: 1.4; max-width: 46ch; border-left: 3px solid var(--rouge); padding-left: 18px; }

/* ---- Dernier appel ---- */
.appel { background: var(--rose); padding-block: 56px 60px; text-align: center; }
.appel .large { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.appel h2 { font-weight: 200; font-size: clamp(36px, 9.6vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.appel p { font-weight: 500; }
.pied { padding: 24px 22px 30px; font-size: 12px; color: var(--doux); line-height: 1.6; text-align: center; }
.pied a { color: inherit; }
/* Retirer son accord doit se faire d'un geste aussi simple que le donner. Un bouton
   plutôt qu'un lien, parce qu'il n'y a pas de page au bout ; déguisé en lien pour
   qu'il se lise comme ses voisins du pied. */
.lien-pied {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
.lien-pied:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }

/* ---- Barre fixe, téléphone ---- */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--creme);
  box-shadow: 0 -6px 24px rgba(60, 20, 10, .10);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  transition: transform .25s ease;
}
.barre.cachee { transform: translateY(110%); }
.barre p { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.barre p span { display: block; font-weight: 500; color: var(--doux); }
.barre .bouton { padding: 15px 18px; font-size: 15.5px; }

/* ---- Fenêtre d'inscription ----
   Deux volets : à gauche le rendez-vous (ce à quoi on dit oui), à droite les champs.
   Sur téléphone, le volet du rendez-vous se replie en tête de feuille. */
dialog {
  border: 0; padding: 0; background: var(--creme); color: var(--noir);
  width: 100%; max-width: 100%; max-height: 94dvh; overflow-y: auto;
  margin: auto 0 0; box-shadow: 0 -18px 60px rgba(40, 8, 8, .30);
}
dialog:focus { outline: none; }
dialog::backdrop { background: rgba(40, 10, 10, .50); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
dialog[open] { animation: monte .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes monte { from { transform: translateY(56px); opacity: 0; } to { transform: none; opacity: 1; } }
.fermer {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; z-index: 3;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.fermer::before, .fermer::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 1.5px; background: var(--noir); }
.fermer::before { transform: rotate(45deg); }
.fermer::after { transform: rotate(-45deg); }
.volets { position: relative; }
.volet-rdv { background: var(--rose); padding: 26px 24px 22px; }
.volet-rdv .quoi { font-weight: 700; font-size: 14.5px; color: var(--rouge); }
.volet-rdv .jour { font-weight: 200; font-size: 38px; line-height: 1; letter-spacing: -0.02em; margin-top: 8px; }
.volet-rdv .heure { font-weight: 600; font-size: 16px; margin-top: 8px; }
.volet-rdv ul { display: none; }
.volet-form { padding: 26px 24px 28px; }
.volet-form h2 { font-weight: 300; font-size: 25px; line-height: 1.12; margin-bottom: 20px; }
form { display: flex; flex-direction: column; gap: 18px; }
label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: var(--doux); }
/* L'astérisque des champs obligatoires : convention attendue en France, et la CNIL
   demande qu'un formulaire dise quels champs le sont (ajouté le 23/09/2026). Le
   lecteur d'écran s'appuie sur l'attribut required, d'où aria-hidden. */
.requis { color: var(--rouge); }
input, select {
  font: 500 18px/1.2 'Raleway', sans-serif; color: var(--noir); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--noir); padding: 10px 0 11px; width: 100%; min-width: 0; appearance: none;
}
input::placeholder { color: #b9b19a; font-weight: 400; }
input:focus, select:focus { outline: none; border-bottom-color: var(--rouge); box-shadow: 0 1.5px 0 var(--rouge); }
.tel { display: grid; grid-template-columns: 92px 1fr; gap: 14px; }
select { background: linear-gradient(45deg, transparent 50%, var(--noir) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--noir) 50%) right 0 center / 6px 6px no-repeat; padding-right: 18px; }
.aide { font-size: 13.5px; font-weight: 500; color: var(--texte); margin-top: 8px; }
.erreur { font-size: 14px; font-weight: 700; color: var(--bordeaux); }
form .bouton { width: 100%; margin-top: 6px; padding-block: 21px; font-size: 17.5px; }
.mention { font-size: 12px; color: var(--doux); line-height: 1.5; }
.mention a { color: inherit; }
/* Le piège à robots : jamais affiché, jamais lu à voix haute, jamais atteint au clavier.
   « display:none » et non plus une mise hors écran : le remplissage automatique des
   navigateurs remplissait le champ hors écran, et une vraie inscrite recevait la page de
   confirmation sans être inscrite nulle part (constaté le 23/09/2026). Les navigateurs ne
   remplissent jamais un champ non rendu ; les robots qui le repèrent restent arrêtés par le
   délai de saisie, le débit par adresse et l'exigence d'Origin. */
.piege { display: none; }

/* ---- Page de confirmation et agenda ---- */
.confirmation { padding-block: 40px 60px; display: flex; flex-direction: column; gap: 28px; }
.confirmation h1 { font-size: clamp(32px, 8vw, 56px); font-weight: 200; }
.etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; font-size: 17px; color: var(--texte); }
.etapes b { color: var(--noir); }
.encart { background: var(--rose); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.encart h2 { font-size: 22px; font-weight: 700; }
.encart p { font-size: 16px; color: var(--texte); }
.agenda-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.agenda-boutons .bouton { font-size: 15.5px; padding: 15px 22px; }
.bouton-clair { background: var(--creme); color: var(--noir); border: 1.5px solid var(--noir); }
.bouton-clair:hover { background: var(--noir); color: var(--creme); }

/* ---- Fenêtre de consentement ----
   Centrée, pas un bandeau : la visiteuse doit trancher avant de continuer.
   Accepter et refuser partagent exactement la même règle CSS, sans variante
   par identifiant : un refus rendu moins visible que l'acceptation ne vaut
   pas consentement libre (position de la CNIL). */
/* Masquée tant qu'elle n'est pas ouverte en modale : sans cette règle, display:flex
   l'affichait sous le titre, sans fond flouté, avant l'appel à showModal()
   (constaté par Gaëlle le 23/09/2026). */
dialog#consentement:not([open]) { display: none; }
dialog#consentement {
  position: fixed; inset: 0; margin: auto; width: min(92vw, 420px); max-width: calc(100vw - 32px);
  max-height: 90dvh; overflow-y: auto; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--creme); color: var(--noir); box-shadow: 0 24px 70px rgba(40, 8, 8, .35);
}
#consentement p { font-size: 15px; line-height: 1.5; }
#consentement-texte:focus { outline: none; }
.consentement-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.consentement-actions button {
  flex: 1 1 0; min-width: 0; cursor: pointer;
  font: 700 15px/1.2 'Raleway', sans-serif; padding: 14px 16px;
  background: var(--rouge); color: var(--blanc); border: 0;
}
/* Pastille ombrée, comme .bouton : demandé par Gaëlle le 23/09/2026 (« un peu agressif »
   à angles droits). Les deux boutons gardent une seule et même règle. */
.consentement-actions button { border-radius: 999px; box-shadow: 0 4px 12px rgba(120, 10, 15, .28); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.consentement-actions button:hover { background: var(--bordeaux); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(120, 10, 15, .32); }
.consentement-actions button:focus-visible { outline: 3px solid var(--noir); outline-offset: 2px; }
.consentement-details { font-size: 13px; color: var(--texte); }
.consentement-details summary {
  cursor: pointer; font-weight: 700; color: var(--rouge); list-style: none;
}
.consentement-details summary::-webkit-details-marker { display: none; }
.consentement-details[open] summary { margin-bottom: 8px; }
.consentement-details p { font-size: 13px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } dialog[open] { animation: none; } }

/* ---- Ordinateur ---- */
@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 18px; }
  .barre { display: none; }
  .large { padding-inline: 48px; }
  .logo { padding-block: 26px 0; }
  .logo img { height: 38px; }
  .ouverture .large { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: end; column-gap: 12px; }
  .ouverture-texte { padding-block: 34px 60px; gap: 20px; }
  .pour-qui { font-size: 20px; max-width: 34ch; }
  h1 { font-size: clamp(50px, 4.9vw, 68px); }
  .promesse { font-size: 22px; }
  .rendez-vous { gap: 22px; margin-top: 8px; }
  .rendez-vous .bouton { width: auto; font-size: 18px; padding: 21px 36px; }
  .quoi-quand { font-size: 17px; }
  .quoi-quand b { font-size: 19px; }
  .ouverture-photo { margin: 0 -48px 0 -40px; align-self: end; }
  .ouverture-photo img {
    aspect-ratio: 20 / 21; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
    mask-composite: intersect;
  }
  .constat { padding-block: 96px 92px; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 80px; align-items: center; }
  .atouts { gap: 18px; }
  .atouts li { font-size: 18px; }
  .cles { padding-block: 92px 100px; }
  .cles .large { gap: 34px; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .cle { padding: 30px 28px 34px; }
  .groupe img { aspect-ratio: 21 / 9; }
  .preuves { grid-template-columns: repeat(3, 1fr); column-gap: 48px; padding-block: 44px 96px; }
  .preuves b { font-size: 24px; }
  .animee { padding-block: 0 100px; gap: 40px; }
  .deux { max-width: 68ch; }
  .appel { padding-block: 96px 104px; }
  .appel .bouton { font-size: 18px; padding: 21px 40px; }
  dialog { width: 880px; max-width: calc(100vw - 64px); margin: auto; max-height: 92dvh; box-shadow: 0 40px 100px rgba(40, 8, 8, .40); }
  .volets { display: grid; grid-template-columns: 5fr 6fr; }
  .volet-rdv { padding: 52px 40px 44px; display: flex; flex-direction: column; }
  .volet-rdv .jour { font-size: 56px; margin-top: 14px; }
  .volet-rdv .heure { font-size: 18px; margin-top: 12px; }
  .volet-rdv ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 12px; padding-top: 48px; }
  .volet-rdv li { position: relative; padding-left: 22px; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
  .volet-rdv li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; background: var(--rouge); }
  .volet-form { padding: 52px 48px 44px; }
  .volet-form h2 { font-size: 30px; margin-bottom: 26px; }
  .confirmation { padding-block: 60px 90px; max-width: 74ch; }
}

/* ============ Page de confirmation ============
   Une seule action compte : rejoindre le groupe WhatsApp, puisque c'est là que
   la personne reçoit le lien du direct et son cadeau. Tout le reste passe donc
   au second plan, visuellement et dans l'ordre de lecture. */
.apres { padding-block: 32px 0; display: flex; flex-direction: column; gap: 10px; }
.apres .recu, .fete .recu { font-weight: 700; font-size: 15px; color: var(--rouge); }
.apres h1 { font-weight: 200; font-size: clamp(34px, 9vw, 60px); line-height: 1.02; letter-spacing: -0.025em; }
.fete h1 { font-weight: 200; font-size: clamp(30px, 7.6vw, 58px); line-height: 1.02; letter-spacing: -0.025em; }
.apres .quand, .fete .quand { border-left: 3px solid var(--rouge); padding-left: 14px; font-size: 16px; font-weight: 500; color: var(--texte); margin-top: 4px; }
.apres .quand b, .fete .quand b { display: block; font-weight: 700; font-size: 18px; color: var(--noir); }

.etape { background: var(--rose); padding: 30px 22px 32px; margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.etape .rang { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rouge); }
.etape h2 { font-weight: 300; font-size: clamp(25px, 6.4vw, 34px); line-height: 1.12; letter-spacing: -0.01em; }
.etape .pourquoi { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.etape .pourquoi li { position: relative; padding-left: 26px; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--texte); }
.etape .pourquoi li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--rouge); }
.etape .pourquoi b { font-weight: 700; color: var(--noir); }
.etape .rassurance, .action .rassurance { font-size: 12.5px; line-height: 1.45; color: var(--doux); margin-top: -2px; }

/* Vert et arrondi, contre la charte à angles droits : ici la forme sert à
   reconnaître WhatsApp d'un coup d'œil, avant même de lire. Demandé par Gaëlle
   le 21/09/2026. C'est le seul arrondi du site. */
.bouton-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #25D366; color: #ffffff !important; text-decoration: none;
  font: 700 17px/1.2 'Raleway', sans-serif; padding: 19px 28px;
  border-radius: 999px; width: 100%; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .28);
  transition: background .15s ease, transform .15s ease;
}
.bouton-whatsapp:hover { background: #1DA851; transform: translateY(-1px); }
.bouton-whatsapp:focus-visible { outline: 3px solid var(--noir); outline-offset: 3px; }
.bouton-whatsapp svg { width: 25px; height: 25px; flex-shrink: 0; }

.photo-vivante { margin-top: 34px; }
.photo-vivante img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.photo-vivante figcaption { font-size: 12.5px; color: var(--doux); padding-top: 8px; }

.second { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.second h2 { font-size: 20px; font-weight: 700; }
.second p { font-size: 15.5px; color: var(--texte); }
.second .agenda-boutons .bouton { font-size: 15px; padding: 13px 20px; }

.note { margin-top: 30px; border-top: 1px solid rgba(111, 103, 92, .25); padding-block: 18px 40px; font-size: 14.5px; color: var(--texte); line-height: 1.5; }
.note b { color: var(--noir); }

@media (min-width: 900px) {
  .apres { padding-block: 56px 0; max-width: var(--mesure); }
  .etape { padding: 44px 44px 46px; margin-top: 40px; max-width: var(--mesure); }
  .etape .pourquoi li { font-size: 18px; }
  .bouton-whatsapp { width: auto; align-self: flex-start; font-size: 18px; padding: 20px 38px; }
  .photo-vivante { max-width: var(--mesure); margin-top: 44px; }
  .photo-vivante img { aspect-ratio: 21 / 9; }
  .second, .note { max-width: var(--mesure); }
  .second { margin-top: 44px; }
}

/* ============ Confirmation : on fête l'inscription ============
   Le titre et le groupe détouré ne font qu'un bloc : la photo n'illustre pas,
   elle réagit. D'où l'absence de cadre et de fond sous elle. */
/* Sur téléphone, les deux gestes attendus doivent tenir dans le premier écran :
   la photo se réduit donc à un bandeau et l'en-tête se resserre. Une action que
   l'on doit aller chercher en faisant défiler n'est pas faite. */
.fete { padding-block: 18px 0; display: flex; flex-direction: column; gap: 16px; }
.fete-entete { display: flex; flex-direction: column; gap: 8px; }
.fete-actions { display: flex; flex-direction: column; gap: 20px; }
.action { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.action-titre { font-weight: 700; font-size: 18px; line-height: 1.25; }
.action-note { font-size: 15.5px; color: var(--texte); line-height: 1.45; }
.fete-photo img { width: 100%; max-width: 560px; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 38%; }
@media (min-width: 900px) {
  /* Les actions remplissent la colonne sous le titre : sans elles, la photo
     laissait un grand vide à sa gauche. */
  .fete {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-areas: "entete photo" "actions photo";
    column-gap: 44px; row-gap: 32px; padding-block: 44px 0;
  }
  .fete-entete { grid-area: entete; }
  .fete-actions { grid-area: actions; gap: 30px; }
  .fete-photo { grid-area: photo; }
  .fete-photo img { max-width: none; aspect-ratio: 4 / 3; }
  .fete { padding-block: 44px 0; }
}

/* Les deux étapes : l'agenda vient d'abord parce que c'est le geste immédiat,
   WhatsApp ensuite parce que c'est l'engagement. Mais WhatsApp reste le bloc le
   plus fort à l'œil : c'est lui qui porte le lien du direct, et une inscrite
   qui s'arrête avant ne viendra pas. */
/* Ni cadre ni filet : sur le crème, un contour gris durcit la page. Le bloc se
   détache par son fond blanc et par l'espace autour, pas par un trait. */
.etape-agenda { background: none; border: 0; padding: 0; margin-top: 34px; }
.etape-agenda .intro { font-size: 16px; color: var(--texte); }

.agendas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Arrondis, comme le bouton WhatsApp et contre la charte à angles droits :
   demandé par Gaëlle le 21/09/2026, les angles vifs rendaient ce coin de page
   trop dur. Les boutons rouges ont suivi le 23/09/2026 (voir .bouton). */
.agendas a {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blanc); border: 0; border-radius: 999px; color: var(--noir);
  text-decoration: none; padding: 11px 19px 11px 14px;
  font: 700 15px/1.2 'Raleway', sans-serif;
  box-shadow: 0 3px 10px rgba(60, 20, 10, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.agendas a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(60, 20, 10, .28); }

.agendas a:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.agendas svg { width: 24px; height: 24px; flex-shrink: 0; }
/* Les icônes officielles gardent leurs couleurs au survol : les inverser les
   rendrait méconnaissables. */
.agendas a:hover svg { filter: none; }


@media (min-width: 900px) {
  .etape-agenda { padding: 0; margin-top: 44px; max-width: var(--mesure); }
  .agendas { gap: 12px; }
}

/* Rappel de ce à quoi on s'est inscrite. Sans lui, la page annonce qu'une place
   est réservée sans dire pour quoi : l'inscrite qui revient des jours plus tard
   n'a plus aucune raison de venir. */
.rappel { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.rappel h2 { font-weight: 300; font-size: clamp(24px, 6vw, 33px); line-height: 1.14; letter-spacing: -0.01em; max-width: 26ch; }
.rappel .intro { font-size: 16.5px; color: var(--texte); }
.rappel .sous-titre { font-weight: 700; font-size: 16px; margin-top: 4px; }
.programme { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.programme li { position: relative; padding-left: 26px; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--texte); }
.programme li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--rouge); }
.preuve-ligne { margin-top: 6px; font-size: 15.5px; color: var(--texte); border-left: 3px solid var(--rouge); padding-left: 14px; }
.preuve-ligne b { display: block; font-weight: 800; font-size: 19px; color: var(--noir); }
@media (min-width: 900px) {
  .rappel { margin-top: 48px; max-width: var(--mesure); gap: 16px; }
  .programme li { font-size: 18px; }
}

/* « Ce qu'il te reste à faire », numéroté : sans cette liste, l'inscrite voit
   deux blocs sans savoir s'ils sont obligatoires, ni dans quel ordre, ni si
   elle en a oublié un. Le compte rend l'état d'avancement lisible d'un regard. */
.a-faire-titre { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rouge); }
.a-faire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.a-faire li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.a-faire .num {
  font-weight: 200; font-size: 34px; line-height: .86; color: var(--rouge);
  min-width: 1.1ch; text-align: center;
}
@media (min-width: 900px) {
  .a-faire { gap: 28px; }
  .a-faire li { column-gap: 18px; }
  .a-faire .num { font-size: 42px; }
}

/* Chapeau du rappel : une phrase, pas une étiquette, parce qu'elle porte la
   date et s'adresse directement à l'inscrite. */
.rappel-chapeau { font-weight: 700; font-size: clamp(19px, 5vw, 24px); line-height: 1.25; color: var(--rouge); }
.duree-ligne { font-weight: 700; font-size: 16px; margin-top: 4px; }


/* Arrivée par le lien court du replay quand aucun replay n'est ouvert. */
.replay-ferme { background: var(--rose); border-bottom: 1px solid rgba(220, 0, 12, .25); }
.replay-ferme p { border-left: 3px solid var(--rouge); padding: 14px 0 14px 14px; margin-block: 14px; font-size: 16.5px; line-height: 1.45; }