/* =========================================================
   Noval — un premier écran de nuit (l'onde, la voix de Sophie), puis des sections crème.
   Un seul système partout : Fraunces à traits pleins pour les titres, DM Sans pour le texte,
   des pilules pleines pour les boutons. Le seul décor : les visuels du produit.
   ========================================================= */

/* ---------- Polices (hébergées ici, licence OFL : fonts/OFL-*.txt) ----------
   Les fichiers servis jusqu'ici par Google Fonts, sous-ensemble latin, déclarés comme Google les déclarait :
   Fraunces variable (graisse 400 à 600, axes opsz, SOFT, WONK), DM Sans variable (opsz, graisse) en 400, 500, 600.
   Pas d'italique : le site n'en chargeait pas. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Cabine */
  --night: #1d0b15;
  --cream: #f8ece6;
  --cream-2: rgba(248, 236, 230, .68);
  --cream-3: rgba(248, 236, 230, .42);
  --cream-4: rgba(248, 236, 230, .14);
  /* Papier */
  --paper: #f6efe8;
  --paper-2: #efe4dc;
  --card: #fffaf6;
  --ink: #2a1b22;
  --ink-2: #6c5a63;
  --ink-3: #74626b;   /* 4,5:1 au moins sur toutes les crèmes */
  --line: rgba(42, 27, 34, .1);
  --line-2: rgba(42, 27, 34, .18);
  /* Marque */
  --wine: #782849;
  --wine-2: #611f3b;
  --plum: #4a1733;     /* boutons sur fond clair : la prune du premier écran, éclaircie et saturée (crème dessus : 12,4:1) */
  --plum-2: #5d1d41;   /* survol : un cran plus clair */
  --rose: #e8c9c8;
  --coral: #d9728f;
  --peach: #ffc4b9;
  --silk: linear-gradient(100deg, #6b2750 0%, #a1395f 28%, #d9728f 55%, #ffc4b9 86%, #ffe4dc 100%);

  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Premier écran : serif à traits pleins, lisible en grand sur fond sombre */
  --solid: "Fraunces", "Iowan Old Style", Georgia, serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1280px;
  --ease: cubic-bezier(.16, 1, .3, 1);       /* expo.out : on monte la lumière */
  --breath: 6s;


  /* Ruban mini (masque d'onde, réutilisé partout) */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 C 3 1.5, 9 1.5, 12 6 S 21 10.5, 24 6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
b, strong { font-weight: 600; }   /* DM Sans est chargée jusqu'à 600 : jamais de faux gras */
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--night); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
main:focus { outline: none; }   /* « Aller au contenu » y place le focus (tabindex="-1") : pas de cadre autour de toute la page */
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Plans de profondeur : fond (0) · onde (1) · contenus (2) ---------- */
.sec { position: relative; overflow-x: clip; }
.sec > .bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sec > .wrap { position: relative; z-index: 2; }
.night { color: var(--cream); }
.night > .bg { background: var(--night); }
.day > .bg { background: var(--paper); }
.grain {
  position: fixed; inset: -50%; z-index: 45; pointer-events: none; opacity: .04;   /* hors premier écran : à peine perceptible sur la crème */
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .45 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain { transition: opacity .8s var(--ease); }
.in-hero .grain { opacity: .035; }   /* plus discret sur le premier écran, là où l'onde brille */

/* Lampes : la lumière tiède de la cabine */
.lamp { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.lamp--a { width: 90vmax; height: 90vmax; left: 38%; top: -34vmax; background: radial-gradient(closest-side, rgba(217, 114, 143, .22), rgba(217, 114, 143, .07) 55%, transparent); animation: breathe var(--breath) ease-in-out infinite; }
.lamp--b { width: 70vmax; height: 70vmax; left: -24vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(255, 196, 185, .14), transparent 70%); animation: breathe var(--breath) ease-in-out infinite reverse; }
@keyframes breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- Typo ---------- */
.display {
  font-family: var(--solid); font-weight: 400; font-optical-sizing: auto;
  letter-spacing: -.035em; text-wrap: balance;
}
.display { font-size: clamp(3.3rem, .9rem + 6.6vw, 7.6rem); line-height: .9; }
.display em { font-style: italic; letter-spacing: -.03em; }
.night .display em {
  background: linear-gradient(100deg, var(--rose) 0%, var(--peach) 60%, #fff0ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}

/* Horodatage : le rythme de l'appel */
.tc { font: 500 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; }
.day .tc { color: var(--ink-2); }
.night .tc { color: var(--cream-2); }
.sec .tc[data-light] { margin-bottom: 26px; }

/* ---------- Révélations : la lumière monte ---------- */
.js [data-light] { opacity: 0; filter: blur(10px); transition: opacity 1.3s var(--ease), filter 1.3s var(--ease); }
.js [data-light].is-lit { opacity: 1; filter: none; }
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.12em); transition: opacity 1.3s var(--ease), filter 1.4s var(--ease), transform 1.6s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-words].is-lit .w { opacity: 1; filter: none; transform: none; }
/* filet de sécurité : si une apparition ne se déclenche pas (script en erreur, minuterie bloquée), le texte paraît quand même */
@keyframes lit-failsafe { to { opacity: 1; filter: none; transform: none; } }
.js .hero [data-light]:not(.is-lit) { animation: lit-failsafe .6s ease-out 4s forwards; }

/* ---------- Ruban mini (signature réduite) ---------- */
.silk {
  display: inline-block; width: 24px; height: 12px; flex: none;
  background: var(--silk);
  -webkit-mask: var(--wave-mask) 0 50% / 24px 12px repeat-x; mask: var(--wave-mask) 0 50% / 24px 12px repeat-x;
}
.silk--live, .pill:hover .silk { animation: silkflow 1.1s linear infinite; }
@keyframes silkflow { to { -webkit-mask-position: 24px 50%; mask-position: 24px 50%; } }

/* ---------- Boutons ---------- */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-ctl); font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .4s;
}
.pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1.1s var(--ease); pointer-events: none; }
.pill:hover::after { transform: translateX(120%); }
.pill:active { transform: scale(.97); }
.pill--sm { height: var(--btn-h-min); padding: 0 var(--btn-px); font-size: 14.5px; gap: 10px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--paper-2); color: var(--wine); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .6s var(--ease), color .6s, box-shadow .6s; }
.hdr__in { height: 80px; display: flex; align-items: center; gap: 28px; }
.hdr__logo { position: relative; display: block; width: 112px; height: 37px; }
.hdr__logo img, .hdr__logo svg { position: absolute; inset: 0; width: 100%; height: auto; transition: opacity .6s; }
.hdr__logo svg { aspect-ratio: 1712 / 564; }
.hdr__logo--day { color: var(--plum); }   /* sur fond clair : logo uni, la prune des boutons principaux */
.hdr__nav { margin-left: auto; display: flex; gap: 32px; font-size: 15px; }
.hdr__nav a { text-decoration: none; opacity: .72; transition: opacity .3s; }
.hdr__nav a:hover { opacity: 1; }
.hdr__cta { margin-left: 8px; }
.hdr__cta-short { display: none; }
.hdr__burger { display: none; width: var(--btn-h-min); height: var(--btn-h-min); margin-right: -2px; position: relative; }   /* 44 px ; l'icône ne bouge pas */
.hdr__burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.hdr__burger span:first-child { top: 18px; } .hdr__burger span:last-child { top: 25px; }
.hdr__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.hdr[data-tone="night"] { color: var(--cream); }
.hdr[data-tone="night"] .hdr__logo--day { opacity: 0; }
.hdr[data-tone="night"] .hdr__cta { background: var(--cream); color: var(--night); }
.hdr[data-tone="day"] { color: var(--ink); }
.hdr[data-tone="day"] .hdr__logo--night { opacity: 0; }
.hdr[data-tone="day"] .hdr__cta { background: var(--plum); color: var(--cream); }   /* sur fond clair : bouton principal prune */
.hdr[data-tone="day"] .hdr__cta:hover { background: var(--plum-2); }
.hdr.is-scrolled[data-tone="night"] { background: rgba(29, 11, 21, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--cream-4); }
.hdr.is-scrolled[data-tone="day"] { background: rgba(246, 239, 232, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.menu { position: fixed; inset: 64px 0 0; background: var(--night); color: var(--cream); z-index: 49; }
.menu__in { padding-top: 32px; display: flex; flex-direction: column; }
.menu__in a { font: 520 2.25rem/1.25 var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0; letter-spacing: -.022em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--cream-4); }
.menu__note { margin-top: 24px; color: var(--cream-2); font-size: 15px; }

/* =========================================================
   HERO — cabine
   ========================================================= */
.hero > .bg { background: radial-gradient(140% 90% at 70% 10%, #33152a 0%, var(--night) 55%), var(--night); }
.hero__wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero__in { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 100px 0 40px; }
.hero__k { font-size: 14px; letter-spacing: 0; text-transform: none; }
.hero .tc[data-light].hero__k { margin-bottom: 17.4px; }   /* 20 px moins les 2,6 px gagnés par la ligne de 14 px : le titre ne bouge pas */
/* Titre · bande de l'onde (pleine largeur) · paragraphe, CTA, réassurance | conversation */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: clamp(40px, 5vw, 88px);
  --wave-row: clamp(100px, 17vh, 190px);   /* la bande de l'onde, sous le titre */
  --wave-drop: clamp(40px, 3.5vw, 60px);    /* l'onde, à gauche, descend d'autant (même formule dans hero-wave.js) */
  grid-template-areas: "title ." "wave wave" "act live" "note live" "offer live" ". live";
  grid-template-rows: auto var(--wave-row) auto auto auto 1fr;
}
.hero__text { display: contents; }
.hero__title { grid-area: title; }
/* le CTA suit l'onde : 64 px entre la ligne médiane de l'onde (à gauche) et le haut du bouton */
.hero__act { grid-area: act; margin-top: calc(64px - var(--wave-row) / 2 + var(--wave-drop)); }
/* CTA secondaire : un lien texte, à droite du bouton et centré sur lui (sous lui sur mobile) ; crème des sections claires */
.hero__act { display: flex; align-items: center; column-gap: var(--s6); }
/* le raccrocher (masqué) reste à la droite du bouton, hors du flux : l'écart se mesure depuis le bouton (mobile : voir plus bas) */
.hero__book {
  display: inline-flex; align-items: center; min-height: var(--btn-h-min);   /* 44 px de zone cliquable */
  font: 500 19.5px/1.2 var(--sans); letter-spacing: -.008em; color: var(--paper); white-space: nowrap;
  text-decoration: underline 1px; text-underline-offset: 4px;
}
.hero__book:hover, .hero__book:focus-visible { text-decoration-thickness: 2px; }
.hero__book:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: var(--r-tag); }
.hero__note { grid-area: note; }
.hero__offer { grid-area: offer; }
.hero .live { grid-area: live; align-self: start; }
.hero__title {
  font: 520 clamp(3rem, 1.2rem + 3.9vw, 5rem)/1.02 var(--solid);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  letter-spacing: -.028em; color: var(--cream); max-width: 9.2em;
}
.hero__title em { font-style: normal; letter-spacing: inherit; padding-right: 0; }
/* Les mots du titre sont écrits dans le HTML (.wm > .w) : le titre est lisible dès le premier affichage, sans script.
   Chaque mot monte de sous sa ligne, dans un masque fixe (clip-path sur .wm) qui déborde assez en haut pour les accents
   et en bas pour les jambages : aucun fragment ne dépasse pendant le mouvement. L'animation est en CSS : elle part seule
   au chargement ; si elle ne se lance pas, le mot reste à sa place, lisible. */
.hero__title .wm { display: inline-block; clip-path: inset(-.32em -.14em -.34em -.08em); }
.hero__title .w { display: inline-block; }
@keyframes word-up { from { transform: translateY(1.5em); } }
.hero__title .w { animation: word-up 1.2s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
/* Safari ne peint pas un dégradé « background-clip: text » posé sur <em> dans des mots en inline-block : la chute restait
   transparente. Le dégradé est donc posé sur chaque mot (app.js le recale pour qu'il reste continu d'un mot à l'autre ;
   sans script, chaque mot garde le sien). Les marges internes couvrent jambages et accents, les marges négatives les annulent. */
.night .hero__title em { background: none; color: var(--peach); }
.night .hero__title em .w {
  padding: .16em .08em .24em 0; margin: -.16em -.08em -.24em 0; color: var(--peach);
  background: linear-gradient(100deg, var(--rose) 0%, var(--peach) 60%, #fff0ea 100%) no-repeat;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .night .hero__title em .w { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* Sous le CTA : ce qui se passe au clic, puis la réassurance, en retrait (petit, gris clair) pour que le CTA domine seul ;
   jamais un mot seul en fin de ligne */
.hero__note, .hero__offer { font-size: 13px; line-height: 1.5; color: rgba(248, 236, 230, .74); text-wrap: balance; padding-left: 6px; }
.hero__note { margin-top: 18px; }
.hero__offer { margin-top: 2px; }
.hero__offer b { color: var(--cream); font-weight: 500; }
/* l'onde s'allume après le titre */
.js .hero__wave { opacity: 0; transition: opacity 1.8s var(--ease); }
.js .hero__wave.is-lit { opacity: 1; }
.ribbon-fallback { display: none; position: absolute; left: 0; right: 0; top: 46%; width: 100%; height: 30vh; z-index: 1; opacity: .9; }
.no-webgl .ribbon-fallback, .no-hero-wave .ribbon-fallback { display: block; }
.has-hero-wave .ribbon-fallback { display: none; }

/* --- CTA d'appel : idle / connecting / live / ended --- */
.call { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.call__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; overflow: hidden;
  height: var(--btn-h-main); padding: 0 var(--btn-px); border-radius: var(--r-ctl); text-decoration: none;
  background: var(--cream); color: var(--night); font-weight: 600; font-size: 19.5px; letter-spacing: -.008em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 36px -18px rgba(0, 0, 0, .8);
  transition: background-color .5s var(--ease), color .5s, box-shadow .6s var(--ease), transform .4s var(--ease);
}
.call__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1.2s var(--ease); pointer-events: none; }
.call__btn:hover::after { transform: translateX(120%); }
.call__btn:hover { background: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 44px -18px rgba(255, 170, 160, .6); }
.call__btn:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: var(--r-ctl); }
.call__btn:active { transform: scale(.975); }
.call__label { position: relative; display: grid; }
.call__l { grid-area: 1 / 1; white-space: nowrap; transition: opacity .4s, filter .5s, transform .6s var(--ease); }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

/* --- La ligne en direct (sous-titres) --- */
.live { position: relative; display: grid; gap: 0; }
.live::before { content: ""; position: absolute; inset: -40px -60px -30px; z-index: -1; background: radial-gradient(closest-side, rgba(29, 11, 21, .82), rgba(29, 11, 21, .55) 60%, rgba(29, 11, 21, 0)); pointer-events: none; }
.live__top { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--cream-4); color: var(--cream-2); }
.live__status { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--peach); animation: dot 2s ease-out infinite; }
@keyframes dot { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 185, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 196, 185, 0); } }
.live__line { margin-left: auto; }
.live__timer { color: var(--cream); min-width: 44px; text-align: right; }
.live__captions { padding: 26px 0 26px; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; }
.live__who { color: var(--coral) !important; margin-bottom: 12px; }
.live__who.is-client { color: var(--cream-3) !important; }
.live__now { min-height: 2.5em; }
.live__now.is-sophie { font: 440 clamp(1.45rem, 1rem + 1vw, 2.05rem)/1.22 var(--solid); font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0; letter-spacing: -.012em; color: var(--cream); }
.live__now.is-client { font: 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.4 var(--sans); color: var(--cream-2); }
.live__now .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.18em); transition: opacity .6s var(--ease), filter .7s var(--ease), transform .8s var(--ease); }
.live__now .w.on { opacity: 1; filter: none; transform: none; }
.live__cabin { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding-top: 16px; border-top: 1px solid var(--cream-4); font-size: 13.5px; color: var(--cream-2); }
.live__cabin .tc { color: var(--cream-3); }
.live__cabin [data-cabin-label] { grid-column: 1 / -1; color: var(--cream); }
.linen { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(45deg, rgba(248, 236, 230, .12) 0 2px, rgba(248, 236, 230, .04) 2px 5px); }
.linen__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(.42); background: repeating-linear-gradient(45deg, rgba(232, 201, 200, .85) 0 2px, rgba(232, 201, 200, .55) 2px 5px); transition: transform 1s linear; }
.live__ended { display: none; }
.live[data-mode="ended"] .live__captions { display: none; }
.live[data-mode="ended"] .live__ended { display: block; padding: 22px 0; animation: lightup 1s var(--ease) both; }
@keyframes lightup { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
.live[data-mode="call"] .dot, .live[data-mode="connecting"] .dot { background: #9be0b4; animation-name: dotg; }
@keyframes dotg { 0% { box-shadow: 0 0 0 0 rgba(155, 224, 180, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(155, 224, 180, 0); } }

.slip { background: var(--card); color: var(--ink); border-radius: 18px; padding: 18px 20px 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.slip__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.slip__head .tc { color: var(--ink-2); }
.slip__t { font: 500 1.4rem/1.2 var(--solid); font-variation-settings: "opsz" 36, "SOFT" 30, "WONK" 0; letter-spacing: -.012em; margin: 10px 0 8px; }
.slip dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.slip dt { color: var(--ink-3); }

/* =========================================================
   SECTIONS — le système du premier écran, appliqué partout
   Titres : Fraunces à traits pleins ; texte : DM Sans ; boutons : pilules pleines.
   Six tailles de texte (--fs-*), une échelle d'espacement de 4 px (--s*), une grille de 12 colonnes,
   deux surfaces (la page et les objets posés dessus), quatre rayons.
   Fond crème partout, sauf le dernier appel (sombre, avec l'onde).
   ========================================================= */
:root {
  /* Typographie : six niveaux, et trois interlignes */
  --fs-display: clamp(3.2rem, 2rem + 3vw, 4.5rem);    /* les grands chiffres de l'offre */
  --fs-h2: clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem);  /* titres de section */
  --fs-h3: 1.25rem;                                   /* intitulés : étapes, engagements, questions, cartes */
  --fs-body: 1.0625rem;                               /* texte courant */
  --fs-small: .9375rem;                               /* descriptions, libellés */
  --fs-meta: .8125rem;                                /* sources, notes, légendes */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-text: 1.55;
  /* Espacement : échelle de 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gap-section: clamp(80px, 9vw, 128px);             /* le même espace entre deux sections, partout */
  /* Grille : 12 colonnes */
  --col-gap: clamp(20px, 2.5vw, 32px);
  /* Rayons : trois valeurs, toutes discrètes. Le téléphone de « Comment ça marche » garde ses rayons d'objet. */
  --r-tag: 4px;      /* petites étiquettes */
  --r-ctl: 6px;      /* boutons et champs de saisie, partout (premier écran compris) */
  --r-card: 12px;    /* cartes, photos, encarts, fiche, bande de contact */
  /* Boutons : des coins presque carrés demandent des boutons bas, sinon ils font bloc */
  --btn-h-main: 52px;   /* le CTA principal : premier écran et dernier appel */
  --btn-h: 48px;        /* tous les autres boutons */
  --btn-h-min: 44px;    /* le plus petit (header, onglets) ; jamais moins sur mobile */
  --btn-px: 24px;       /* marges latérales */
  /* Surfaces : la page (--paper) et les objets posés dessus */
  --surface: var(--card);
  --field-line: #86707c;                              /* bord des champs : 3,6:1 sur la crème */
  /* Mouvement : trois durées, une courbe, une seule apparition */
  --t-fast: 180ms;   /* survol */
  --t-base: 400ms;   /* changements d'état */
  --t-slow: 700ms;   /* apparitions */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
.day { color: var(--ink); line-height: var(--lh-text); }
.final, .ftr { line-height: var(--lh-text); }
/* sur la crème, le contour de focus passe à l'encre (le corail n'y atteint pas 3:1 ; le lie-de-vin est réservé à l'accent) */
.day :focus-visible, .day .btn:focus-visible { outline-color: var(--ink); }

/* L'apparition des sections : un seul mouvement, sans flou (fondu + 12 px), pour tous les blocs de premier niveau.
   Les blocs voisins se suivent à 80 ms d'écart, trois au plus. app.js pose .rv puis .is-in. */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(min(var(--rv-i, 0), 3) * 80ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* Le rythme : moitié de l'espace en haut de chaque section, moitié en bas */
.day { padding-block: calc(var(--gap-section) / 2); }

/* La grille : 12 colonnes, deux compositions seulement
   A · média ou carte sur les colonnes 1 à 5 (ou 1 à 6), texte de la colonne 7 à 12
   B · média ou titre sur les colonnes 1 à 4, texte de la colonne 6 à 12 */
.problem__in, .how__grid, .know__grid, .offer__grid, .pledge__grid, .faq__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
}

.h-sec {
  font: 520 var(--fs-h2)/var(--lh-tight) var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
  letter-spacing: -.022em; text-wrap: balance; color: var(--ink);
}
.h-sec em { font-style: normal; }   /* couleur unie : l'accent est réservé aux boutons, aux liens et aux chiffres de l'offre */
.problem__t em { font-style: normal; color: var(--wine); }   /* exception validée : le seul titre coloré en dehors du premier écran */
.card__t { margin-bottom: var(--s3); font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }   /* le nom d'une carte */
.sec-p { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); max-width: 34em; }
.h-sec + .sec-p { margin-top: var(--s4); }

/* Boutons : la famille du CTA du premier écran (pilule pleine, graisse 600, aucun double contour) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); overflow: hidden;
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-ctl); white-space: nowrap; text-decoration: none;
  font: 600 var(--fs-body)/1 var(--sans); letter-spacing: -.005em;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: var(--r-ctl); }
/* Sur fond clair, les boutons sont prune (la teinte du premier écran, éclaircie) ; le lie-de-vin reste aux liens et aux deux chiffres de l'offre */
.btn--primary { background: var(--plum); color: var(--cream); }   /* bouton principal sur fond clair */
.btn--primary:hover { background: var(--plum-2); }
.btn--secondary { color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }   /* bouton secondaire sur fond clair */
.btn--secondary:hover { background: rgba(74, 23, 51, .06); }
.btn--light { background: var(--cream); color: var(--night); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 36px -18px rgba(0, 0, 0, .8); }
.btn--light:hover { background: #fff; }
.btn--ghost { color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--cream); }
.link { font: 600 var(--fs-body)/var(--lh-snug) var(--sans); color: var(--wine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--t-fast); }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Le problème : une bande courte, dans ses mots ---------- */
/* sous le premier écran, une coupure nette : la crème commence au bord de la section, sans dégradé */
/* composition B : la photo du comptoir sur 4 colonnes, au format 4:5 des photos du site ; le texte de la colonne 6 à 12 */
.problem__in { row-gap: var(--s5); align-items: end; }
.problem__photo { grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.problem__photo img { object-position: 66% 50%; }   /* le téléphone et le vase, sans l'ordinateur */
.problem__t { grid-column: 6 / -1; grid-row: 1; }
.problem__lead { grid-column: 6 / -1; grid-row: 2; align-self: start; }
.problem__t { font: 520 var(--fs-h2)/var(--lh-tight) var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0; letter-spacing: -.022em; color: var(--ink); max-width: 18em; text-wrap: balance; }
.problem__lead { font-size: var(--fs-body); color: var(--ink-2); max-width: 30em; }
@media (min-width: 901px) { .problem__t em { white-space: nowrap; } }   /* la chute tient sur une ligne */

/* ---------- Comment ça marche : le téléphone fixé, le texte défile à côté ---------- */
/* Tout tient sur un écran : l'introduction et les trois temps à gauche (colonnes 1 à 6), le téléphone à droite (7 à 12).
   L'étape active avance seule (5,6 s, barre de progression) quand la section est à l'écran ; un clic la choisit. */
.how { --step: 5.6s; }
.how__grid { align-items: center; }
.how__side { grid-column: 1 / span 6; }
.how__phone { grid-column: 7 / -1; display: grid; justify-items: center; }
.how__p { font-size: var(--fs-body); color: var(--ink-2); max-width: 30em; margin-top: var(--s4); }
.how__tabs { margin-top: var(--s5); border-top: 1px solid var(--line); }
.how__tab {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s3); align-items: baseline;
  width: 100%; padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-align: left;
}
.how__tab:focus-visible { outline-offset: 2px; border-radius: var(--r-ctl); }
.how__n { grid-row: 1; font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-3); transition: color var(--t-base) var(--ease-out); }
.how__tab.is-on .how__n { color: var(--ink); }
/* l'étape inactive : intitulé en gris lisible, jamais d'opacité sur le bloc */
.how__t { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink-2); transition: color var(--t-base) var(--ease-out); }
.how__tab:hover .how__t, .how__tab.is-on .how__t { color: var(--ink); }
.how__short { display: none; }
.how__d { grid-column: 2; display: block; margin-top: var(--s2); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); max-width: 36em; }
/* le temps qui reste avant l'étape suivante */
.how__bar { position: absolute; left: calc(20px + var(--s3)); right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.how__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.how__tab.is-on .how__bar i { animation: howprog var(--step) linear forwards; }
.how:not(.is-playing) .how__bar i { animation-play-state: paused; }
.how.is-static .how__bar { display: none; }   /* mouvement réduit : pas de défilement automatique */
@keyframes howprog { to { transform: scaleX(1); } }
.how__now { display: none; }

/* Le téléphone : un seul objet, trois états (appel entrant, conversation, SMS et e-mail reçus).
   C'est un objet dessiné : ses rayons et ses marges internes sont les siens ; ses textes suivent l'échelle. */
.hphone { position: relative; width: 300px; height: min(540px, calc(100svh - 170px)); border-radius: 46px; padding: 9px; background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 1px 0 rgba(42, 18, 32, .05), 0 40px 80px -40px rgba(42, 18, 32, .55); }
.hphone__screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: linear-gradient(180deg, #fbf5f1, #f4e6df); }
.hphone__island { position: absolute; z-index: 3; top: 11px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 20px; background: #0d050a; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 50px 14px 16px; font-size: var(--fs-meta); line-height: var(--lh-snug); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility 0s var(--t-base); }
.hphone[data-state="0"] .scr--ring, .hphone[data-state="1"] .scr--talk, .hphone[data-state="2"] .scr--talk, .hphone[data-state="3"] .scr--lock { opacity: 1; visibility: visible; transition: opacity var(--t-base) var(--ease-out); }
.scr__small { font-size: var(--fs-meta); opacity: .72; }
/* 0 · appel entrant */
.scr--ring { align-items: center; text-align: center; padding-top: 86px; color: var(--cream); background: radial-gradient(120% 70% at 50% 0%, #3d1a2d, var(--night) 70%); }
.scr__call { white-space: nowrap; font: 520 min(var(--fs-h2), 2.25rem)/var(--lh-tight) var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0; letter-spacing: -.02em; }
.scr__num { margin: var(--s3) 0 var(--s1); font-size: var(--fs-body); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.scr__pulse { position: relative; flex: none; width: 76px; height: 76px; margin-top: auto; border-radius: 50%; background: var(--silk); display: grid; place-items: center; }
.scr__pulse img { width: 40px; }
.scr__pulse::before, .scr__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--coral); animation: ring 2s var(--ease) infinite; }
.scr__pulse::after { animation-delay: 1s; }
.scr__chip { margin: var(--s4) 0; padding: var(--s2) var(--s4); border-radius: 999px; background: var(--cream-4); color: var(--cream); font-weight: 600; }
/* 1, 2 · la conversation */
.scr__bar { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.scr__bar b { display: block; font-weight: 600; }
.scr__bar small { display: block; font-size: var(--fs-meta); color: var(--ink-3); }
.scr__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--silk); display: grid; place-items: center; flex: none; }
.scr__avatar img { width: 19px; }
.scr__list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.bub, .bub-src { flex: none; max-width: 88%; margin-top: var(--s2); }   /* jamais écrasées : les plus anciennes sortent par le haut */
.bub { padding: 9px 13px; border-radius: 18px; }
.bub--sophie { align-self: flex-end; background: var(--night); color: var(--cream); border-bottom-right-radius: 6px; font-family: var(--solid); font-weight: 440; font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0; }
.bub--client { align-self: flex-start; background: var(--surface); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.bub-src { align-self: flex-end; padding: var(--s2) var(--s3); border-radius: 12px; border: 1px dashed rgba(120, 40, 73, .4); color: var(--ink-2); }
.bub-src b { display: block; color: var(--ink); font-weight: 600; }
/* ce qui arrive au temps 2 s'écrit à la suite */
.scr__list [data-from="2"] { display: none; }
.hphone[data-state="2"] .scr__list [data-from="2"] { display: block; animation: bubin .7s var(--ease) both; }
.hphone[data-state="2"] .scr__list [data-from="2"]:nth-child(4) { animation-delay: .5s; }
.hphone[data-state="2"] .scr__list [data-from="2"]:nth-child(5) { animation-delay: 1.1s; }
.hphone[data-state="2"] .scr__list [data-from="2"]:nth-child(6) { animation-delay: 1.7s; }
@keyframes bubin { from { opacity: 0; transform: translateY(8px); } }
.hphone[data-state="2"] .scr__list [data-from="2"] { animation-duration: var(--t-slow); animation-timing-function: var(--ease-out); }
/* 3 · SMS et e-mail reçus */
.scr--lock { align-items: center; padding-top: 58px; color: var(--ink); background: linear-gradient(180deg, #f7ece6, #ecd3cd); }   /* un rose doux, sans la teinte saturée du bas */
.scr__time { font: 520 var(--fs-h2)/1 var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0; letter-spacing: -.02em; margin: var(--s1) 0 var(--s5); }
.note { display: flex; gap: var(--s3); width: 100%; margin-bottom: var(--s2); padding: var(--s3); border-radius: 18px; background: rgba(255, 251, 248, .9); box-shadow: 0 10px 24px -16px rgba(42, 18, 32, .4); text-align: left; opacity: 0; transform: translateY(-10px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.hphone[data-state="3"] .note { opacity: 1; transform: none; transition-delay: .25s; }
.hphone[data-state="3"] .note + .note { transition-delay: .7s; }
.note__app { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--night); }
.note__app svg { width: 17px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linejoin: round; }
.note__app--sms svg { fill: var(--cream); stroke: none; }
.note__b { display: block; min-width: 0; }
.note__top { display: flex; justify-content: space-between; gap: var(--s2); }
.note__top small { color: var(--ink-3); font-size: var(--fs-meta); }
.note b { font-weight: 600; }

/* ---------- Ce que Sophie sait : la fiche de l'institut à gauche ; à droite le titre, une phrase et la mise à jour de la fiche ---------- */
/* Composition A : la fiche sur les colonnes 1 à 5, le texte de la colonne 7 à 12, centré verticalement face à la fiche */
.know__grid { row-gap: var(--s6); align-items: start; }
.menu-card { grid-column: 1 / span 5; }
.know__text { grid-column: 7 / -1; align-self: center; }
.know__upd { margin-top: var(--s4); max-width: 34em; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }   /* la mise à jour de la fiche : la question en gras */
.know__upd b { font-weight: 600; color: var(--ink); }
.menu-card { position: relative; container-type: inline-size; background: var(--surface); border-radius: var(--r-card); padding: var(--s5) var(--s6); box-shadow: inset 0 0 0 1px var(--line); }
.menu-card__h { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.menu-card__k { font: 600 var(--fs-meta)/var(--lh-snug) var(--sans); color: var(--ink-2); }
.menu-card__name { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; margin: var(--s1) 0 0; }
.menu-card__addr { font-size: var(--fs-meta); color: var(--ink-3); }
.menu-card__sec { padding: var(--s3) 0 0; }
/* intertitres en petites capitales espacées ; libellé à gauche, durée et prix à droite, en chiffres tabulaires */
.menu-card__sec h3 { font: 600 var(--fs-meta)/var(--lh-snug) var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s1); }
.menu-card li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s1) 0; font-size: var(--fs-small); line-height: var(--lh-snug); }
/* horaires | consignes, puis l'accès sur toute la largeur ; dans une fiche étroite, les uns sous les autres (aucune ligne coupée) */
.menu-card__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); }
.menu-card__cols > .menu-card__sec:last-child { grid-column: 1 / -1; }
@container (max-width: 560px) { .menu-card__cols { grid-template-columns: minmax(0, 1fr); } }
.menu-card li small { display: block; font-size: var(--fs-meta); color: var(--ink-3); text-wrap: balance; }
.menu-card li > span:last-child:not(:first-child) { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
/* le pied : une simple ligne de texte, sous un filet */
.menu-card__plan { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
.menu-card__plan b { color: var(--ink); }

/* ---------- Ce que Sophie ne fait pas : un encart, pas une grande section ---------- */
/* le titre, puis trois limites nettes, chacune marquée d'un trait */
.nots { padding: var(--s7); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.nots__t { font: 520 var(--fs-h2)/var(--lh-tight) var(--solid); font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0; letter-spacing: -.022em; text-wrap: balance; }
.nots__t em { font-style: normal; }
.nots__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s6); }
.nots__list li { padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); }
.nots__list b { display: block; margin-bottom: var(--s2); font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }

/* ---------- Mise en place : le titre, trois étapes en colonnes, puis une ligne de réassurance ---------- */
/* les trois colonnes suivent la grille (4 colonnes chacune, même gouttière) ; chaque étape sous un filet */
.setup__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--s6); }
.setup__flow li { padding-top: var(--s4); border-top: 1px solid var(--line); }
.setup__n { display: block; margin-bottom: var(--s2); font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-3); }
.setup__flow p { font-size: var(--fs-body); color: var(--ink-2); max-width: 26em; }
.setup__foot { margin-top: var(--s6); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }

/* ---------- L'offre : deux cartes qui se répondent ---------- */
/* À gauche « 0 € le premier mois », à droite ce que coûtent les appels manqués : même grand chiffre, même construction.
   Chaque carte sur 6 colonnes. */
.offer__grid { row-gap: var(--s5); align-items: start; }   /* chaque carte à sa hauteur : aucun étirement, aucun vide */
.offer__card { grid-column: 1 / span 6; }
.calc { grid-column: 7 / -1; }
.offer__card, .calc { display: flex; flex-direction: column; padding: var(--s6); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
/* le grand chiffre : la typographie des titres, sans effet */
.offer__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s1); }
.offer__num { font: 520 var(--fs-display)/1 var(--solid); font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0; letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--wine); white-space: nowrap; }   /* « 0 € » et le résultat du calcul : l'accent */
.offer__side { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink-2); }
.offer__then { margin-top: var(--s3); font-size: var(--fs-body); color: var(--ink-2); }
.offer__then b { color: var(--ink); }
.offer__inc { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s3); font-size: var(--fs-body); }
.offer__inc li { display: flex; align-items: baseline; gap: var(--s3); }
.offer__inc li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-4px) rotate(-45deg); }
.offer__ask { margin-top: var(--s4); font-size: var(--fs-small); color: var(--ink-3); }
.offer__cta { padding-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.calc__ctx { font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); max-width: 34em; }
.calc__src { white-space: nowrap; }   /* la seule source, à la fin de la note de calcul */
.calc__src a { color: var(--wine); text-underline-offset: 3px; }   /* un lien sur fond clair */
.calc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.calc__f { display: grid; align-content: end; gap: var(--s2); font: 600 var(--fs-small)/var(--lh-snug) var(--sans); color: var(--ink); }
.calc input {
  width: 100%; height: 56px; padding: 0 var(--s4); border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--paper);
  font: 600 var(--fs-body) var(--sans); color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.calc input::-webkit-inner-spin-button, .calc input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.calc__unit { position: relative; display: block; }
.calc__unit input { padding-right: calc(var(--s4) + var(--s5)); }
.calc__unit i { position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--fs-body); color: var(--ink-3); }
.calc__days { margin: var(--s3) 0 var(--s5); font-size: var(--fs-small); color: var(--ink); text-wrap: pretty; }
.calc__days input { display: inline-block; width: 58px; height: 38px; margin: 0 var(--s1); padding: 0 var(--s2); border-radius: var(--r-ctl); text-align: center; vertical-align: middle; }
.calc__out { padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.calc__lbl { display: block; font-size: var(--fs-small); color: var(--ink-2); text-wrap: balance; }
.calc__v { font-variant-numeric: lining-nums tabular-nums; }
.calc__vs { margin-top: var(--s3); font-size: var(--fs-body); color: var(--ink); }
.calc__note { margin-top: var(--s3); font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- Photos : un seul traitement, accordé au prune et au crème du site ---------- */
/* deux photos de la même lumière (jour clair, tons chauds), au même format 4:5 ; à peine désaturées, posées à plat */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--paper); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.photo picture { display: contents; }   /* <picture> (WebP, repli JPEG) : l'image reste l'enfant direct du cadre pour la mise en page */

/* ---------- Nos engagements : la photo à gauche, quatre engagements à droite, puis le contact ---------- */
/* Composition B : la photo sur les colonnes 1 à 4, au format 4:5 ; le texte de la colonne 6 à 12, le titre aligné sur le haut de la photo */
.pledge__grid { row-gap: var(--s6); align-items: start; }
.pledge__photo { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.pledge__text { grid-column: 6 / -1; }
.pledge__text > .h-sec { margin-top: -.18em; }   /* le haut des lettres, pas l'interligne, s'aligne sur la photo */
.pledge__photo img { object-position: 62% 50%; }   /* les doigts qui étalent la crème */
.pledge__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s5); }
.pledge__list li { padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); }
.pledge__list b { display: block; margin-bottom: var(--s2); font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }
.pledge__contact { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); padding: var(--s5) var(--s6); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pledge__q { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }
.pledge__q span { color: inherit; }
.pledge__btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* ---------- FAQ ---------- */
/* Composition B : le titre sur les colonnes 1 à 4, les questions de la colonne 6 à 12 */
.faq__grid { row-gap: var(--s6); align-items: start; }
.faq__head { grid-column: 1 / span 4; }
.acc { grid-column: 6 / -1; }
.faq__head .link { display: inline-block; margin-top: var(--s4); }
.acc { border-top: 1px solid var(--line-2); }
.acc__i { border-bottom: 1px solid var(--line-2); }
.acc h3 { font-weight: inherit; }
.pledge__list b, .nots__list b, .acc h3 button { text-wrap: balance; }   /* aucun mot seul sur sa ligne */
.acc h3 button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); padding: var(--s5) 0; text-align: left; font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; transition: color var(--t-fast); }
.acc h3 button:hover { color: var(--ink-2); }
.acc__x { position: relative; width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.acc__i.is-open .acc__x { color: var(--ink); }
.acc__x::before, .acc__x::after { content: ""; position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; background: currentColor; transition: transform var(--t-base) var(--ease-out); }
.acc__x::after { transform: rotate(90deg); }
.acc button[aria-expanded="true"] .acc__x::after { transform: rotate(0); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease-out); }
.acc__p > div { overflow: hidden; }
.acc__p p { padding-bottom: var(--s5); font-size: var(--fs-body); color: var(--ink-2); max-width: 36em; opacity: 0; transition: opacity var(--t-base); }
.acc__i.is-open .acc__p { grid-template-rows: 1fr; }
.acc__i.is-open .acc__p p { opacity: 1; transition-delay: var(--t-fast); }

/* ---------- Dernier appel : sombre, avec l'onde du premier écran ---------- */
/* la crème de la FAQ s'arrête net sur la nuit ; au-dessus du titre, 48 px */
.final { padding: var(--s7) 0 calc(var(--gap-section) / 2); text-align: center; overflow: hidden; }
.final > .bg { background: radial-gradient(90% 70% at 50% 55%, #33152a 0%, var(--night) 65%), var(--night); }
.final__wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.js .final__wave { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.js .final__wave.is-lit { opacity: 1; }
.final__in { display: flex; flex-direction: column; align-items: center; }
.final__t { font: 520 var(--fs-display)/var(--lh-tight) var(--solid); font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0; letter-spacing: -.03em; color: var(--cream); text-wrap: balance; }   /* le point d'orgue : la taille du titre du premier écran */
.final__t em { font-style: normal; }
.final__band { width: 100%; height: 160px; }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); }
.final__cta .btn--light { height: var(--btn-h-main); }   /* le CTA principal du dernier appel */
.final__contact { margin-top: var(--s5); font-size: var(--fs-small); color: var(--cream-2); }
.final__contact a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cream-3); transition: text-decoration-color var(--t-fast); }
.final__contact a:hover { text-decoration-color: var(--cream); }

/* ---------- Footer : deux colonnes, qui est derrière (à gauche) et comment nous joindre (à droite) ---------- */
.ftr { color: var(--cream-2); padding: var(--s7) 0 calc(var(--s6) + env(safe-area-inset-bottom)); font-size: var(--fs-small); }
.ftr > .bg { border-top: 1px solid var(--cream-4); }
.ftr__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--col-gap); align-items: start; }
.ftr__id { grid-column: 1 / span 6; display: grid; justify-items: start; gap: var(--s3); }
.ftr__id img { width: 100px; height: auto; }
.ftr__side { grid-column: 7 / -1; display: grid; gap: var(--s4); }
.ftr__contact { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: var(--fs-body); }
.ftr__contact a { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cream-3); transition: text-decoration-color var(--t-fast); }
.ftr__contact a:hover { text-decoration-color: var(--cream); }
.ftr__legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); font-size: var(--fs-meta); }
.ftr__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.ftr__nav a { text-decoration: none; }
.ftr__nav a:hover { color: var(--cream); }

/* ---------- Mobile : « Tester la voix » collant en bas ---------- */


/* =========================================================
   Tablette
   ========================================================= */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "wave" "act" "note" "offer" "live"; grid-template-rows: auto clamp(96px, 13vh, 150px) auto auto auto auto; }
  .hero .live { margin-top: 48px; }
  .hero__act { margin-top: 0; }
  .live { max-width: 560px; }
  .hphone { width: 280px; }
}
@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__cta { margin-left: auto; }
  .hdr__burger { display: block; }
  /* une seule colonne : chaque bloc prend toute la largeur de la grille */
  .problem__in, .how__grid, .know__grid, .offer__grid, .pledge__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .problem__in > *, .how__grid > *, .know__grid > *, .offer__grid > *, .pledge__grid > *, .faq__grid > * { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
  .problem__photo, .pledge__photo { max-width: 380px; }   /* 4:5 aussi, sans photo démesurée ; le texte, puis la photo (ordre du HTML) */
  .know__text { order: -1; }   /* le texte et les étapes d'abord, la fiche ensuite */
}

/* =========================================================
   Mobile : compositions dédiées
   ========================================================= */
@media (max-width: 640px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 64px; }
  .hdr__in { height: 64px; gap: 8px; }
  .hdr__logo { width: 96px; height: 32px; }
  .hdr__cta { height: var(--btn-h-min); padding: 0 var(--s4); }   /* compact, 44 px de haut, à gauche du menu */
  /* « Tester la voix » dans le header : masqué pendant le premier écran (le CTA principal suffit), il apparaît dès que
     ce CTA sort de l'écran, et se masque de nouveau quand celui du dernier appel est visible (prune sur fond clair, crème sur fond prune) */
  .hdr__cta { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
  .hdr.cta-away .hdr__cta { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

  /* Premier écran : une scène en trois temps aux respirations égales (--gap) : le titre, l'onde et ses
     sous-titres, puis le CTA au pouce et sa réassurance ; le début de la section suivante affleure en bas de l'écran.
     Tailles en svh (Safari : la hauteur avec la barre d'adresse visible) : la composition tient, barre visible ou masquée. */
  .hero__in { --gap: clamp(18px, 3.6svh, 32px); min-height: 0; padding: clamp(66px, 10svh, 70px) 0 8px; }
  .hero__grid, .hero__text { display: contents; }
  .hero__k { font-size: 14px; white-space: nowrap; }
  .hero .tc[data-light].hero__k { margin-bottom: 8.8px; }   /* 14 px moins les 5,2 px gagnés par la ligne de 14 px : le titre ne bouge pas */
  .hero__title { order: 1; font-size: clamp(2.4rem, min(12.4vw, 6.6svh), 3.3rem); line-height: 1.02; max-width: none; }
  .hero .live { order: 2; align-self: stretch; min-height: clamp(140px, 24svh, 240px); margin: var(--gap) 0; display: flex; flex-direction: column; justify-content: center; }
  .hero__act { order: 3; align-self: center; }
  .hero__note { order: 4; text-align: center; margin-top: 16px; font-size: 14px; color: var(--cream); }
  .hero__offer { order: 5; text-align: center; margin-top: 3px; font-size: 13px; color: var(--cream-2); }
  .hero__offer b { color: var(--cream); }

  /* Les répliques s'écrivent sur l'onde, comme des sous-titres : une à la fois, sans cadre ni étiquette */
  .hero .live::before, .live__top, .live__who, .live__cabin { display: none; }
  .live__captions { min-height: 0; padding: 0 4px; align-items: center; justify-content: center; text-align: center; }
  .live__now { min-height: 0; width: 100%; max-width: 20em; text-wrap: balance; text-shadow: 0 1px 2px rgba(29, 11, 21, .6), 0 0 26px rgba(29, 11, 21, .95), 0 0 10px rgba(29, 11, 21, .7); }
  .live__now.is-sophie, .live__now.is-client { font: 440 clamp(1.45rem, 3.5svh, 1.55rem)/1.22 var(--solid); font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0; letter-spacing: -.012em; }
  .live__now.is-sophie { color: var(--cream); }
  .live__now.is-client { color: rgba(248, 236, 230, .8); }   /* la cliente : même voix typographique, un ton plus doux */
  .live__now.is-silent .w { opacity: 0; filter: blur(8px); transition-duration: 1.2s; }
  .live[data-mode="ended"] .live__ended { padding: 0; }
  .slip dl > div { grid-template-columns: auto 1fr; font-size: 13.5px; }
  .slip dd { text-align: right; }
  .slip__t { font-size: 1.25rem; }
  .call__btn { padding: 0 var(--btn-px); font-size: 17.5px; }
  .hero__act { flex-direction: column; align-items: center; }   /* le lien sous le bouton, centré sur le même axe */
  .hero__book { font-size: 17.5px; }

  /* le bas du hero revient à la nuit pure : la coupure avec la crème suivante reste nette, sans lueur au bord */
  .hero > .bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(to bottom, rgba(29, 11, 21, 0), var(--night)); }

  /* Sections : courtes, une colonne, lisibles au pouce */
  :root { --fs-body: 1rem; --fs-h3: 1.125rem; --gap-section: 64px; }
  .problem__in { row-gap: var(--s4); }

  /* Comment ça marche : le téléphone, réduit à son écran, reste en haut ; le récit défile dessous */
  /* Mobile : trois petits onglets au-dessus du téléphone, le texte de l'étape active dessous ; le tout tient sur un écran */
  /* l'ordre : le titre, les onglets, le téléphone juste dessous, puis le texte de l'étape */
  .how__side { display: contents; }
  .how__intro { order: 1; } .how__tabs { order: 2; } .how__phone { order: 3; } .how__now { order: 4; }
  .how__intro, .how__tabs, .how__now { min-width: 0; }
  .how__p { margin-top: var(--s2); }
  .how__tabs { display: flex; gap: var(--s2); margin-top: var(--s3); border: 0; }
  .how__tab { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; height: var(--btn-h-min); padding: 0 var(--s1); overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-ctl); text-align: center; transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base); }
  .how__tab.is-on { background: var(--night); border-color: var(--night); }
  .how__n, .how__d, .how__long { display: none; }
  .how__short { display: inline; }
  .how__t { font: 600 var(--fs-meta)/var(--lh-snug) var(--sans); color: var(--ink-2); white-space: nowrap; }
  .how__tab.is-on .how__t { color: var(--cream); }
  .how__bar { left: 0; bottom: 0; }
  .how__bar i { background: var(--peach); }
  /* les trois textes occupent la même case : la hauteur reste celle du plus long, rien ne saute */
  .how__now { display: grid; margin-top: var(--s3); }
  .how__now > p { grid-area: 1 / 1; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
  .how__now > p.is-on { opacity: 1; }
  .how__phone { --ph: clamp(250px, 39.5svh, 272px); margin-top: var(--s3); justify-items: stretch; }   /* assez haut pour les deux notifications */
  .hphone { width: 100%; height: var(--ph); border-radius: 30px; padding: 6px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 10px 22px -16px rgba(42, 18, 32, .5); }
  .hphone__screen { border-radius: 25px; }
  .hphone__island { display: none; }
  .scr { padding: 14px 14px 12px; }
  .scr--ring { padding-top: 22px; }
  .scr__pulse { width: 60px; height: 60px; }
  .scr__pulse img { width: 32px; }
  .scr__chip { margin: 12px 0 4px; }
  .scr--lock { padding-top: 14px; justify-content: center; }
  .scr--lock .scr__small, .scr__time { display: none; }   /* écran réduit : seules les deux notifications restent */
  .note { padding: 9px 11px; }

  .menu-card { padding: var(--s5); }
  .nots { padding: var(--s5); }
  .nots__list { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s5); }


  .offer__card, .calc { padding: var(--s5); }
  .offer__cta { flex-direction: column; align-items: stretch; text-align: center; }
  /* « Réserver un échange » : un bouton secondaire pleine largeur, plus un lien qui flotte sous le bouton plein */
  .offer__book { display: flex; align-items: center; justify-content: center; height: var(--btn-h); border-radius: var(--r-ctl); color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); text-decoration: none; }
  .offer__book:hover { background: rgba(74, 23, 51, .06); }
  .calc__fields { grid-template-columns: 1fr; gap: var(--s3); }
  .calc__days input { height: 56px; }   /* zone tactile : la hauteur des autres champs */
  /* zones tactiles de 44 px : les liens dans le texte gagnent une marge invisible */
  .calc__src a { padding-block: 14px; }
  .final__contact a { padding-block: 12px; }
  .faq__head .link { margin-top: var(--s1); padding-block: 12px; }
  .pledge__mail { padding-block: 12px; text-align: center; }
  .setup__flow { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); margin-top: var(--s5); }
  .setup__flow li { display: grid; grid-template-columns: calc(20px + var(--s3)) minmax(0, 1fr); align-items: baseline; }
  .setup__n { margin-bottom: 0; }
  .setup__foot { margin-top: var(--s5); }

  .problem__photo, .pledge__photo { max-width: none; }   /* 4:5 sur toute la largeur ; engagements : la photo, puis la liste, puis le contact */
  .pledge__list { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s5); }
  .pledge__contact { flex-direction: column; align-items: stretch; padding: var(--s5); }
  .pledge__btns { display: grid; grid-template-columns: 1fr; gap: var(--s2); }

  .acc h3 button { padding: var(--s4) 0; gap: var(--s4); }
  .final__t { font-size: clamp(2.6rem, 12.4vw, 3.3rem); }   /* la taille du titre du premier écran sur mobile */
  .final__band { height: 150px; }
  .final__cta { width: 100%; flex-direction: column; }
  .final__cta .btn { width: 100%; }
  .ftr__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
  .ftr__id, .ftr__side { grid-column: 1 / -1; }
  /* deux colonnes : le contact à gauche, les liens légaux à droite ; le © en dernière ligne, pleine largeur */
  .ftr__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--col-gap); }
  .ftr__legal { display: contents; }
  .ftr__c { grid-column: 1 / -1; }
  /* les liens empilés et serrés : 28 px de zone cliquable chacun, bord à bord, sans chevauchement */
  .ftr__contact, .ftr__nav { flex-direction: column; gap: 0; }
  .ftr__contact { font-size: 14px; }   /* l'e-mail tient sur une ligne dans sa colonne à 390 px (16 px : 187 px pour 165) */
  .ftr__contact a, .ftr__nav a { display: flex; align-items: center; min-height: 28px; }
  .ftr__contact a { white-space: nowrap; }
}

/* =========================================================
   Mouvement réduit
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  [data-light], [data-words] .w, .live__now .w, .rv { opacity: 1 !important; filter: none !important; transform: none !important; }
  .hero__title .w { animation: none !important; }
}