/* v18 (10/10/2026) : la v17.3 avec la barre flottante, quatre bannières pour l'offre, le bandeau « Tu filmes » sur deux rangs,
   le compte à rebours des étapes et la fin sur le ciel. Voir le bloc « v18 » plus bas. */
/* Ancelotti Production · accueil v17.2 (26/09/2026), inspiré de jeskojets.com à la demande de Romain.
   Retours de Romain intégrés : iPhone de dernière génération (Dynamic Island, bords fins) dessiné en CSS à la place du hublot,
   plus de marron (bleu nuit, ciel, blanc cassé), menu plus gras, ciel avec peu de texte en blanc sur bleu profond,
   « En chiffres » et « Crée. Encaisse. » remplacés, bandeau « Tu filmes » gardé tel quel.
   v17.3 (27/09) : accueil fluide sur téléphone (bandes de fond en transform pur, hauteur épinglée stable, mise en page mobile
   sans chevauchement, titres qui s'effacent), ciel en vidéo, flous « verre » retirés sur petit écran.
   Police Mona Sans auto-hébergée (CSP font-src 'self'). Ce fichier est la source : le modifier directement. */

@font-face { font-family: "Mona Sans"; src: url("/assets/v17/fonts/mona-sans-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mona Sans"; src: url("/assets/v17/fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; 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 {
  --paper: #F4F6FA;
  --white: #FFFFFF;
  --ink: #0C1730;
  --ink-2: #566079;
  --line: rgba(12, 23, 48, 0.12);
  --night: #0A1428;
  --night-2: #050A16;
  --backdrop: #070E1F;
  --blue: #3B6FD8;
  --glass-dark: rgba(255, 255, 255, 0.16);
  --glass-light: rgba(12, 23, 48, 0.08);

  --font: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wide: 125%;
  --ext: 112.5%;

  --maxw: 1248px;
  --gutter: clamp(20px, 6.6vw, 96px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-stretch: var(--ext);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; left: 12px; top: 10px; padding: 12px 18px; border-radius: 60px; background: var(--white); color: var(--ink); text-decoration: none; transform: translateY(-160%); transition: transform 200ms var(--ease-out); }
.skip:focus { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* Typographie (Mona Sans large, graisse moyenne, approche serrée) */
.display { font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.06em; word-spacing: 0.08em; line-height: 0.9; }
.h-xl { font-size: clamp(2.625rem, 5vw, 4.5rem); }
.p5 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1; letter-spacing: -0.055em; }
.p7 { font-size: 0.875rem; line-height: 1.33; letter-spacing: -0.025em; }
.l1 { font-size: 0.6875rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-2); }
.dash { display: block; width: 24px; height: 1px; margin: 22px 0; background: currentColor; }
.rule { display: block; height: 1px; background: currentColor; opacity: 0.25; }
.muted { color: var(--ink-2); }

/* Ciel fixe : visible dans l'écran du téléphone puis sous la section suivante. La vidéo des nuages (Higgsfield, boucle
   sans coupure) se fond par-dessus l'image dès qu'elle joue ; l'image reste seule si la vidéo ne peut pas se lancer. */
.sky { position: fixed; inset: 0; z-index: 0; background: #9EC0EA; }
.sky img, .sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sky video { opacity: 0; transition: opacity 900ms ease; }
.sky video[data-on="true"] { opacity: 1; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand__mark { width: 26px; height: 24px; background: currentColor; -webkit-mask: url("/assets/brand/logo-ap-white.png") center / contain no-repeat; mask: url("/assets/brand/logo-ap-white.png") center / contain no-repeat; }
.brand__name { font-stretch: var(--wide); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.04em; white-space: nowrap; }
.lang-sw { display: flex; gap: 6px; }
.lang-sw a { opacity: 0.5; text-decoration: none; }
.lang-sw a[aria-current="true"] { opacity: 1; }
.lang-sw span { opacity: 0.4; }
.nav__menu .icon { width: 22px; height: 22px; }


/* iPhone dessiné en CSS (net à tous les zooms). --u = 1 % de la largeur du téléphone.
   L'écran est un élément à bord noir fin ; le cadre métal est fait d'anneaux d'ombre qui suivent l'arrondi. */
.iphone { --w: 320px; --u: calc(var(--w) / 100); position: relative; isolation: isolate; width: var(--w); aspect-ratio: 0.4785; flex: none; }
.iphone__screen {
  position: absolute; inset: calc(var(--u) * 1.25); z-index: 1; overflow: hidden;
  border: calc(var(--u) * 1.55) solid #050608; border-radius: calc(var(--u) * 15.4);
  box-shadow:
    0 0 0 calc(var(--u) * 0.3) #2E343C,
    0 0 0 calc(var(--u) * 0.7) #D7DBE1,
    0 0 0 calc(var(--u) * 1.0) #A6ADB7,
    0 0 0 calc(var(--u) * 1.25) #6E7680;
}
.iphone__btn { position: absolute; z-index: 2; width: calc(var(--u) * 1.1); border-radius: calc(var(--u) * 0.6); background: linear-gradient(90deg, #6E7680, #D7DBE1 45%, #8E96A1); }
.iphone__btn--action { left: calc(var(--u) * -0.75); top: 19%; height: 5.4%; }
.iphone__btn--up { left: calc(var(--u) * -0.75); top: 27.5%; height: 9%; }
.iphone__btn--down { left: calc(var(--u) * -0.75); top: 38.5%; height: 9%; }
.iphone__btn--power { right: calc(var(--u) * -0.75); top: 28%; height: 13%; }
.iphone__btn--cam { right: calc(var(--u) * -0.6); top: 60%; height: 7.5%; width: calc(var(--u) * 0.9); }
.iphone__island { position: absolute; z-index: 3; top: calc(var(--u) * 2.5); left: 50%; width: calc(var(--u) * 29); height: calc(var(--u) * 8.4); transform: translateX(-50%); border-radius: 99px; background: #000; }
/* barre d'état : l'heure centrée dans l'oreille gauche, les icônes dans l'oreille droite, à la hauteur de la Dynamic Island */
.iphone__status { position: absolute; z-index: 3; top: calc(var(--u) * 2.5); left: calc(var(--u) * 1.5); right: calc(var(--u) * 1.5); height: calc(var(--u) * 8.4); display: grid; grid-template-columns: 1fr calc(var(--u) * 32) 1fr; align-items: center; justify-items: center; color: var(--white); font-stretch: 100%; font-weight: 650; font-size: calc(var(--u) * 4.6); letter-spacing: -0.01em; line-height: 1; }
.iphone__sys { display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.iphone__sys .ios-signal { width: calc(var(--u) * 4.4); height: calc(var(--u) * 2.95); }
.iphone__sys .ios-wifi { width: calc(var(--u) * 4); height: calc(var(--u) * 3); }
.iphone__sys .ios-battery { width: calc(var(--u) * 6.8); height: calc(var(--u) * 3.3); }
.iphone__glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 42%); }
.iphone__home { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--u) * 2.4); width: calc(var(--u) * 34); height: calc(var(--u) * 1.3); border-radius: 99px; background: rgba(255, 255, 255, 0.85); transform: translateX(-50%); }

/* Accueil épinglé : l'écran du téléphone s'agrandit jusqu'à remplir la page, on entre dans le ciel.
   Fluide sur téléphone : tout ce qui bouge au défilement n'est que transform et opacity, posés par le script directement
   sur les éléments concernés (voir site.js, heroProgress). Le téléphone est agrandi (scale) et le fond bleu nuit autour est
   fait de quatre bandes qui s'écartent (translate) en suivant les bords de l'écran, plus quatre petits coins qui les
   complètent hors du cadre arrondi ; les bandes s'arrêtent sous le bord noir (--m négatif). La partie épinglée fait 100lvh (barre d'adresse
   repliée) pour que rien ne se découvre en bas quand elle se replie ; le contenu se place en svh. Ici : l'état de repos. */
.hero {
  position: relative; z-index: 1; height: 190svh;
  --hx: min(4.25rem, 5.6vw);                            /* taille du titre */
  --hero-top: calc(var(--nav-h) + 3svh + var(--hx) + 150px);  /* bas du bloc de texte (le script pose la vraie valeur) */
  --hw: max(170px, min(29vw, calc((100svh - var(--hero-top) - 26px) * 0.4785)));  /* largeur du téléphone : il tient EN ENTIER sous le texte */
  --hu: calc(var(--hw) / 100);
  --sw: calc(var(--hu) * 94.4);                       /* partie transparente de l'écran (le script la remesure en px) */
  --sh: calc(var(--hw) / 0.4785 - var(--hu) * 5.6);
  --cy: calc(var(--hero-top) + var(--hw) / 0.4785 / 2); /* centre vertical du téléphone : son haut est juste sous le texte */
  --m: calc(var(--hu) * -0.8);                        /* les bandes s'arrêtent sous le bord noir (0,8 % de la largeur) */
}
.hero__pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; overflow: clip; color: var(--white); }
.hero__veil { position: absolute; z-index: 1; background: var(--backdrop); will-change: transform; }
.hero__veil--t { left: 0; right: 0; top: calc(var(--cy) - var(--sh) / 2 + var(--m) - 100lvh); height: 100lvh; }
.hero__veil--b { left: 0; right: 0; top: calc(var(--cy) + var(--sh) / 2 - var(--m)); height: 100lvh; }
.hero__veil--l { top: 0; bottom: 0; left: 0; width: calc(50% - var(--sw) / 2 + var(--m)); }
.hero__veil--r { top: 0; bottom: 0; right: 0; width: calc(50% - var(--sw) / 2 + var(--m)); }
/* les quatre coins du trou rectangulaire (hors du cadre arrondi) : petits calques sous le halo, qui glissent avec les
   bandes et grandissent avec le téléphone ; dégradé circulaire transparent dans le cadre, bleu nuit dehors */
.hero__corner {
  position: absolute; z-index: 1; width: calc(var(--hu) * 18); height: calc(var(--hu) * 18); pointer-events: none; will-change: transform;
  /* le coin déborde de 2 % sous les bandes (aucune jonction visible) ; l'angle du trou, autour duquel il grandit, est à (2 %, 2 %) */
  --o: calc(var(--hu) * 2); --c: calc(var(--hu) * 16.65); --r0: calc(var(--hu) * 15); --r1: calc(var(--hu) * 15.2);
}
.hero__corner--tl { left: calc(50% - var(--sw) / 2 + var(--m) - var(--o)); top: calc(var(--cy) - var(--sh) / 2 + var(--m) - var(--o)); transform-origin: var(--o) var(--o); background: radial-gradient(circle at var(--c) var(--c), transparent var(--r0), var(--backdrop) var(--r1)); }
.hero__corner--tr { right: calc(50% - var(--sw) / 2 + var(--m) - var(--o)); top: calc(var(--cy) - var(--sh) / 2 + var(--m) - var(--o)); transform-origin: calc(100% - var(--o)) var(--o); background: radial-gradient(circle at calc(100% - var(--c)) var(--c), transparent var(--r0), var(--backdrop) var(--r1)); }
.hero__corner--bl { left: calc(50% - var(--sw) / 2 + var(--m) - var(--o)); top: calc(var(--cy) + var(--sh) / 2 - var(--m) + var(--o) - var(--hu) * 18); transform-origin: var(--o) calc(100% - var(--o)); background: radial-gradient(circle at var(--c) calc(100% - var(--c)), transparent var(--r0), var(--backdrop) var(--r1)); }
.hero__corner--br { right: calc(50% - var(--sw) / 2 + var(--m) - var(--o)); top: calc(var(--cy) + var(--sh) / 2 - var(--m) + var(--o) - var(--hu) * 18); transform-origin: calc(100% - var(--o)) calc(100% - var(--o)); background: radial-gradient(circle at calc(100% - var(--c)) calc(100% - var(--c)), transparent var(--r0), var(--backdrop) var(--r1)); }
/* halo bleu sur un calque à part (agrandi avec le téléphone par le script, effacé dès le début du zoom) */
.hero__halo {
  position: absolute; z-index: 2; left: 50%; top: var(--cy); width: var(--hw); height: calc(var(--hw) / 0.4785);
  transform: translate(-50%, -50%); border-radius: calc(var(--hu) * 16.65); pointer-events: none; will-change: opacity;
  box-shadow:
    0 0 calc(var(--hu) * 26) calc(var(--hu) * 7) rgba(62, 118, 240, 0.30),
    0 0 calc(var(--hu) * 90) calc(var(--hu) * 40) rgba(38, 78, 170, 0.22),
    0 calc(var(--hu) * 6) calc(var(--hu) * 16) calc(var(--hu) * 2) rgba(0, 0, 0, 0.45);
}
.hero__stage { position: absolute; inset: 0; z-index: 3; }
.iphone--hero { --w: var(--hw); position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%); will-change: transform; }
.iphone--hero .iphone__glare, .iphone--hero .iphone__status, .iphone--hero .iphone__island { will-change: opacity; }
/* zoom bien engagé : les détails devenus invisibles sont retirés ; ciel ouvert : il ne reste que le ciel */
.hero[data-deep="true"] .hero__halo, .hero[data-deep="true"] .hero__brand,
.hero[data-deep="true"] .iphone--hero .iphone__glare, .hero[data-deep="true"] .iphone--hero .iphone__status, .hero[data-deep="true"] .iphone--hero .iphone__island { visibility: hidden; }
.hero[data-open="true"] .hero__veil, .hero[data-open="true"] .hero__corner, .hero[data-open="true"] .hero__halo, .hero[data-open="true"] .hero__stage { visibility: hidden; }
.hero__brand {
  position: absolute; left: 50%; top: var(--cy); z-index: 4; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; will-change: transform, opacity;
  font-stretch: var(--wide); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: -0.04em; white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 18px rgba(10, 30, 70, 0.35);
}
.hero__brand .brand__mark { width: 34px; height: 32px; margin-bottom: 8px; }

/* Sur le ciel : il vire au bleu profond, texte blanc, peu de mots */
.sky-zone { position: relative; z-index: 1; color: var(--white); }
.sky-zone__top { height: 34svh; background: linear-gradient(180deg, rgba(11, 42, 96, 0) 0%, rgba(11, 42, 96, 0) 25%, rgba(11, 42, 96, 0.84) 100%); }
.sky-zone__deep { padding: clamp(24px, 4vh, 48px) 0 calc(clamp(96px, 14vh, 150px) + 36px); background: linear-gradient(180deg, rgba(11, 42, 96, 0.84) 0%, rgba(9, 33, 78, 0.92) 55%, rgba(8, 26, 62, 0.95) 100%); }
.sky-tag { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 5vh, 48px); color: rgba(255, 255, 255, 0.85); }
.sky-tag .brand__mark { width: 30px; height: 28px; }
.statement { max-width: 14.5em; font-size: clamp(2.25rem, 5vw, 4.75rem); font-stretch: var(--wide); font-weight: 500; line-height: 0.95; letter-spacing: -0.06em; word-spacing: 0.06em; text-shadow: 0 2px 30px rgba(5, 15, 40, 0.25); }
.statement .w { opacity: var(--wo, 1); transition: opacity 200ms linear; }
.js-motion .statement .w { --wo: 0.25; }
.js-motion .statement .w[data-on="true"] { --wo: 1; }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 10vh, 110px); }
.num { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.num__v { display: block; font-stretch: var(--wide); font-weight: 500; font-size: clamp(3rem, 6.6vw, 6.25rem); line-height: 0.88; letter-spacing: -0.045em; white-space: nowrap; }
.num__sep { display: inline-block; margin: 0 0.07em 0 0.03em; }
.num__l { display: block; margin-top: 14px; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 10vh, 110px); }
.widget { display: flex; flex-direction: column; gap: 14px; min-height: 210px; padding: 22px; border-radius: 28px; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.55); }
.widget h3 { margin-top: auto; font-size: 1.3125rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
.widget p { font-size: 0.9375rem; line-height: 1.3; color: rgba(255, 255, 255, 0.8); }

/* Le principe : feuille claire qui recouvre le ciel, téléphone verrouillé qui reçoit les notifications */
.principe { position: relative; z-index: 2; margin-top: -36px; border-radius: 36px 36px 0 0; background: var(--paper); padding: clamp(72px, 11vh, 128px) 0 clamp(64px, 10vh, 120px); }
.principe__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.principe .h-xl { margin-top: 14px; max-width: 8.5em; }
.principe__steps { margin-top: 44px; border-top: 1px solid var(--line); }
.principe__steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.principe__steps b { font-stretch: var(--wide); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.05em; color: var(--blue); }
.principe__steps p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.3; letter-spacing: -0.035em; }
.principe__phone { display: grid; place-items: center; padding: 20px 0; }
.iphone--lock { --w: min(330px, 72vw); }
.iphone--lock .iphone__screen {
  background: #6C94D6;
  box-shadow:
    0 0 0 calc(var(--u) * 0.3) #2E343C,
    0 0 0 calc(var(--u) * 0.7) #D7DBE1,
    0 0 0 calc(var(--u) * 1.0) #A6ADB7,
    0 0 0 calc(var(--u) * 1.25) #6E7680,
    0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -3) rgba(12, 23, 48, 0.45);
}
.lock__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.lock__wall-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 70, 0.1) 0%, rgba(10, 30, 70, 0) 35%, rgba(10, 30, 70, 0.28) 100%); }
.lock__date { position: absolute; z-index: 2; top: calc(var(--u) * 17); left: 0; right: 0; text-align: center; color: var(--white); font-stretch: 100%; font-weight: 600; font-size: calc(var(--u) * 5.2); letter-spacing: -0.01em; }
.lock__date::first-letter { text-transform: uppercase; }
.lock__time { position: absolute; z-index: 2; top: calc(var(--u) * 22); left: 0; right: 0; text-align: center; color: var(--white); font-stretch: var(--wide); font-weight: 600; font-size: calc(var(--u) * 27); line-height: 1; letter-spacing: -0.05em; }
.notifs { position: absolute; z-index: 3; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); bottom: calc(var(--u) * 12); display: grid; gap: calc(var(--u) * 2.4); }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: center; padding: calc(var(--u) * 3.4) calc(var(--u) * 3.8); border-radius: calc(var(--u) * 6.5); background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(12, 23, 48, 0.18); color: var(--ink); text-align: left; }
/* icône d'app : le logo Ancelotti Production (apple-touch-icon), coins façon iOS */
.notif__app { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2.3); object-fit: cover; box-shadow: 0 0 0 1px rgba(12, 23, 48, 0.08); }
.notif__t { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); font-stretch: 100%; font-size: calc(var(--u) * 3.7); font-weight: 850; letter-spacing: -0.015em; line-height: 1.2; }
.notif__t small { font-size: inherit; font-weight: 500; color: var(--ink-2); }
.notif p { margin-top: calc(var(--u) * 0.6); font-stretch: 100%; font-size: calc(var(--u) * 3.9); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
/* titres des notifications en gras (850) et, pour « paiement reçu », montant en vert (demandes de Romain, 27/09) */
.notif__amount { color: #159A57; font-weight: 750; }
/* Fil de notifications : les 3 premières arrivent l'une après l'autre, puis une nouvelle toutes les 2,8 s
   tant que le téléphone est à l'écran (la plus récente en haut, la plus ancienne s'efface en bas) */
.notif { transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out); }
.js-motion .notifs:not([data-in="true"]) .notif { opacity: 0; transform: translateY(-36%) scale(0.95); }
.js-motion .notifs:not([data-live="true"]) .notif { transition-delay: calc(var(--i, 0) * 900ms + 350ms); }
.notifs .notif.notif--new { opacity: 0; transform: translateY(-40%) scale(0.95); transition: none; }
.notifs .notif.notif--out { position: absolute; left: 0; right: 0; z-index: -1; }
.notifs .notif.notif--gone { opacity: 0; transform: translateY(30%) scale(0.92); transition: opacity 260ms ease, transform 420ms var(--ease-out); }

/* Comment ça marche : liste dépliable, la photo change avec l'étape */
.steps { position: relative; z-index: 1; background: var(--paper); padding: clamp(40px, 8vh, 100px) 0; }
.steps__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
/* colonne de gauche : grand titre en haut, étapes, progression en bas, alignée sur la photo (plus de blanc) */
.steps__col { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.steps__head .h-xl { margin-top: 14px; }
.steps__lead { margin-top: 18px; max-width: 26em; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.4; color: var(--ink-2); }
.steps__items { border-top: 1px solid var(--line); }
.steps .acc__q { padding: 18px 0; }
.steps .acc__a p { padding-left: 46px; min-height: calc(4em + 30px); } /* même hauteur pour chaque étape : rien ne bouge quand elles défilent */
.acc__n { flex: none; width: 46px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--blue); }
.acc__t { flex: 1; }
.steps__progress { display: flex; align-items: center; gap: 16px; }
.steps__count { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.steps__count b { color: var(--ink); font-weight: 700; }
.steps__track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.steps__track i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--prog, 0.25)); transition: transform 500ms var(--ease-out); }
.acc { border-bottom: 1px solid var(--line); }
.acc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.acc__q .icon { width: 18px; height: 18px; flex: none; }
.acc__q .i-minus { display: none; }
.acc[data-open="true"] .acc__q .i-plus { display: none; }
.acc[data-open="true"] .acc__q .i-minus { display: block; }
.acc__a p { padding: 8px 0 22px; max-width: 26em; }
.js .acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.js .acc__a > div { overflow: hidden; }
.js .acc[data-open="true"] .acc__a { grid-template-rows: 1fr; }
.steps__media { position: relative; align-self: stretch; min-height: clamp(460px, 78vh, 770px); overflow: hidden; border-radius: 28px; background: #DCE3EE; }
.steps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms ease; }
.steps__media img[data-on="true"] { opacity: 1; }

/* Bandeau d'informations */
.strip { position: relative; z-index: 1; background: var(--paper); padding: 0 0 clamp(20px, 3vh, 32px); }
.strip__row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-top: 28px; border-top: 1px solid var(--line); }
.strip__row > div:nth-child(2) { justify-self: start; }
.strip__row > div:last-child { justify-self: end; display: flex; align-items: flex-start; gap: 12px; }
.clock { font-stretch: var(--wide); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 0.8; letter-spacing: -0.06em; }

/* Section sombre : formats qui défilent, puis les deux profils */
.dark { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, #081022 55%, var(--night-2) 100%); color: var(--white); padding: clamp(80px, 14vh, 160px) 0 clamp(80px, 12vh, 140px); }
.pourqui { margin-top: clamp(80px, 14vh, 160px); }
.pourqui__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; }
.pourqui__head .h-xl { max-width: 8.5em; }
.pourqui__head p { max-width: 24em; color: rgba(255, 255, 255, 0.72); }
.profils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 6vh, 64px); }
.profil { position: relative; overflow: hidden; min-height: clamp(420px, 62vh, 600px); border-radius: 28px; background: #10203F; isolation: isolate; }
.profil img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.profil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 22, 0) 30%, rgba(5, 10, 22, 0.55) 60%, rgba(5, 10, 22, 0.9) 100%); }
.profil__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 36px); }
.profil__k { display: inline-block; padding: 7px 12px; border-radius: 60px; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.profil h3 { margin-top: 16px; max-width: 12em; font-stretch: var(--wide); font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.055em; }
.profil p { margin-top: 12px; max-width: 26em; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) { .profil:hover img { transform: scale(1.03); } }

/* Questions fréquentes */
.faq { position: relative; z-index: 1; background: var(--paper); padding: clamp(60px, 10vh, 120px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.faq__intro .h-xl { margin-top: 18px; max-width: 8em; }
.faq__intro .p7 { margin-top: 28px; }
.faq__intro a { text-decoration: underline; text-underline-offset: 0.2em; }
.faq__list { border-top: 1px solid var(--line); }
.faq .acc__q { padding: 16px 0; }
.faq .acc__q .p5 { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); letter-spacing: -0.045em; line-height: 1.1; }

.end__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.end__bottom nav { display: flex; gap: 28px; }
.end__bottom a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .end__bottom a:hover { color: var(--white); opacity: 0.8; } }

/* Menu plein écran (téléphone) */
.menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; padding: 96px var(--gutter) calc(110px + env(safe-area-inset-bottom)); background: var(--night); color: var(--white); visibility: hidden; opacity: 0; transition: opacity 250ms var(--ease-out), visibility 0s linear 250ms; }
.menu[data-open="true"] { visibility: visible; opacity: 1; transition: opacity 250ms var(--ease-out), visibility 0s; }
.menu__links a { display: block; padding: 8px 0; font-stretch: var(--wide); font-weight: 600; font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1; letter-spacing: -0.06em; text-decoration: none; }
.menu__foot { margin-top: auto; display: grid; gap: 16px; }

/* Apparitions discrètes */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js-motion [data-reveal][data-in="true"] { opacity: 1; transform: none; }

/* ---------- v18 (10/10/2026) ---------- */

/* Barre flottante : logo, onglets, langue et « Rejoindre l'agence » dans une même pastille de verre sombre, lisible
   sur toutes les sections (plus de changement de couleur selon le fond, plus de bouton flottant en bas) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; padding: 16px 16px 0; pointer-events: none; color: var(--white); }
.nav__bar {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  max-width: var(--maxw); height: 56px; margin: 0 auto; padding: 0 8px 0 18px; border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 20, 40, 0.75);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(5, 10, 22, 0.28);
}
.nav__links { display: flex; margin: 0 auto; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.015em; }
.nav__links a { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 60px; color: rgba(255, 255, 255, 0.76); text-decoration: none; }
.nav__end { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; }
.nav .lang-sw { gap: 0; }
.nav .lang-sw a { display: flex; align-items: center; height: 40px; padding: 0 8px; }
.nav .lang-sw span { display: none; }
.nav__join { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 60px; background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; transition: transform 150ms var(--ease-out); }
.nav__join:active { transform: scale(0.97); }
.nav__menu { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a { transition: background-color 150ms ease, color 150ms ease; }
  .nav__links a:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }
  .nav .lang-sw a { transition: opacity 150ms ease; }
  .nav .lang-sw a:hover { opacity: 1; }
}

/* Les quatre cartes de l'offre : une petite bannière dessinée par carte, à la manière des widgets de l'iPhone (plus
   d'icône 3D) : le plan de la semaine, la page de liens, les 18 modules, le point du mois. Tout est en CSS : net à
   toutes les tailles, et chaque bannière s'anime une fois quand la carte arrive à l'écran. */
.widget { gap: 0; min-height: 0; padding: 12px 12px 22px; }
.widget h3 { margin: 20px 10px 0; }
.widget p { margin: 8px 10px 0; }
.vis { position: relative; height: 168px; overflow: hidden; border-radius: 18px; background: linear-gradient(165deg, #FFFFFF 0%, #E9EFFB 100%); color: var(--ink); box-shadow: 0 16px 30px -20px rgba(4, 12, 40, 0.7); }
.vis .on i, .vis .liens__btn.on, .ecole__segs i:nth-child(-n+7), .suivi__bars i:last-child { background: linear-gradient(180deg, #5C8BEA 0%, #2F5CC2 100%); }
/* le plan : sept jours, trois vidéos posées */
.plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 100%; padding: 16px 14px; }
.plan li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plan b { font-size: 0.6875rem; font-weight: 700; color: var(--ink-2); }
.plan .on b { color: var(--blue); }
.plan i { position: relative; flex: 1; width: 100%; border-radius: 9px; background: rgba(12, 23, 48, 0.07); }
.plan .on i { box-shadow: 0 8px 14px -8px rgba(47, 92, 194, 0.9); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(350ms + var(--k, 0) * 130ms); }
.plan .on i::after { content: ""; position: absolute; left: 50%; top: 50%; border: 5px solid transparent; border-left: 8px solid var(--white); border-right: 0; transform: translate(-40%, -50%); }
.js-motion .widget:not([data-in="true"]) .plan .on i { opacity: 0; transform: scale(0.9); }
/* la page de liens : la photo, le nom, le lien mis en avant */
.liens { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; padding: 14px 17% 0; }
.liens__av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--night); color: var(--white); box-shadow: 0 0 0 3px var(--white), 0 8px 14px -6px rgba(12, 23, 48, 0.45); }
.liens__av .brand__mark { width: 18px; height: 17px; }
.liens__nom { flex: none; width: 58px; height: 6px; margin: 3px 0 4px; border-radius: 6px; background: rgba(12, 23, 48, 0.16); }
.liens__btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 100%; height: 26px; border-radius: 60px; background: rgba(12, 23, 48, 0.07); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.liens__btn.on { color: var(--white); box-shadow: 0 8px 14px -8px rgba(47, 92, 194, 0.9); transition: transform 500ms var(--ease-out); transition-delay: 450ms; }
.liens__btn .icon { width: 14px; height: 14px; }
.js-motion .widget:not([data-in="true"]) .liens__btn.on { transform: scale(0.94); }
/* l'école : 18 modules, du tournage à la conversion */
.ecole { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 16px 16px 14px; }
.ecole__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ecole__n b { font-stretch: var(--wide); font-weight: 600; font-size: 3.75rem; line-height: 0.8; letter-spacing: -0.06em; }
.ecole__n span { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.ecole__segs { display: flex; gap: 3px; height: 26px; }
.ecole__segs i { flex: 1; border-radius: 3px; background: rgba(12, 23, 48, 0.09); }
.ecole__segs i:nth-child(-n+7) { transform-origin: 50% 100%; transition: transform 450ms var(--ease-out), opacity 450ms var(--ease-out); }
.ecole__segs i:nth-child(2) { transition-delay: 70ms; } .ecole__segs i:nth-child(3) { transition-delay: 140ms; } .ecole__segs i:nth-child(4) { transition-delay: 210ms; }
.ecole__segs i:nth-child(5) { transition-delay: 280ms; } .ecole__segs i:nth-child(6) { transition-delay: 350ms; } .ecole__segs i:nth-child(7) { transition-delay: 420ms; }
.js-motion .widget:not([data-in="true"]) .ecole__segs i:nth-child(-n+7) { opacity: 0.2; transform: scaleY(0.35); }
.ecole__ends { display: flex; justify-content: space-between; gap: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
/* le suivi : les chiffres du mois, et le call */
.suivi { position: relative; height: 100%; padding: 14px 16px 0; }
.suivi__chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 60px; background: var(--white); box-shadow: 0 6px 16px -6px rgba(12, 23, 48, 0.35); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.suivi__chip .icon { width: 15px; height: 15px; color: #0E9247; }
.suivi__bars { position: absolute; left: 16px; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 8px; height: 108px; }
.suivi__bars i { flex: 1; height: var(--h); border-radius: 7px 7px 0 0; background: #C5D5F6; transform-origin: 50% 100%; transition: transform 600ms var(--ease-out); transition-delay: calc(300ms + var(--k, 0) * 70ms); }
.js-motion .widget:not([data-in="true"]) .suivi__bars i { transform: scaleY(0.2); }

/* Étapes : la barre est le compte à rebours de l'étape ouverte (6 s). Sa fin ouvre la suivante ; un clic sur une étape
   le relance. Sans animation (appareil qui en demande moins), elle montre seulement l'avancement, comme avant. */
.js-motion .steps__track i { background: var(--blue); transform: scaleX(0); transition: none; }
.js-motion .steps__track i.run { animation: palier 6s linear both; }
@keyframes palier { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* « Tu filmes » : les formats défilent sur deux rangs, en sens contraires, sur toute la largeur */
.defile__lead { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9DBBFF; }
.defile__row { display: flex; gap: 3rem; overflow: hidden; margin-top: 28px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.defile__row + .defile__row { margin-top: 0; }
.defile__row ul { display: flex; flex: none; align-items: center; gap: 3rem; animation: defile 38s linear infinite; }
.defile__row li { display: flex; align-items: center; gap: 3rem; font-stretch: var(--wide); font-weight: 600; font-size: clamp(2.4rem, 7vw, 5.25rem); line-height: 1.02; letter-spacing: -0.045em; white-space: nowrap; }
.defile__row li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.defile__row--inv ul { animation-duration: 46s; animation-direction: reverse; }
.defile__row--inv li { color: rgba(255, 255, 255, 0.2); }
.defile__row--inv li::after { background: rgba(255, 255, 255, 0.2); }
@keyframes defile { to { transform: translateX(calc(-100% - 3rem)); } }

/* Fin de page : le ciel du haut de page revient derrière la dernière question, teinté de bleu profond. Les nuages
   bougent d'eux-mêmes (plus de cercles animés) ; un halo sombre et fixe garde le titre lisible. */
.end { position: relative; z-index: 1; overflow: hidden; color: var(--white); padding: 0 0 calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--night) 0%, rgba(9, 30, 72, 0.7) 30%, rgba(11, 42, 96, 0.5) 58%, rgba(7, 16, 38, 0.92) 90%, var(--night-2) 100%); }
.end__cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(88svh, 840px); padding: clamp(110px, 16vh, 170px) 0 clamp(70px, 10vh, 120px); text-align: center; }
.end__cta::before { content: ""; position: absolute; left: 50%; top: 48%; width: min(130vw, 980px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(7, 14, 31, 0.6) 0%, rgba(7, 14, 31, 0.32) 55%, rgba(7, 14, 31, 0) 100%); transform: translate(-50%, -50%); pointer-events: none; }
.end__cta > * { position: relative; }
.end__logo { width: 52px; height: 48px; }
.end__title { margin-top: 30px; max-width: 12em; font-size: clamp(2.5rem, 6.4vw, 5rem); font-weight: 600; line-height: 0.98; text-wrap: balance; text-shadow: 0 2px 30px rgba(5, 15, 40, 0.4); }
.end__sub { margin-top: 20px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, 0.86); }
.end__q { margin-top: 30px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); }
.end__q a { color: var(--white); font-weight: 600; text-underline-offset: 0.25em; }
/* le bouton : bleu, avec un trait de lumière qui fait le tour du bord */
.btn-join { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 56px; margin-top: 36px; padding: 0 28px; border-radius: 60px; color: var(--white); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 40px rgba(59, 111, 216, 0.45); transition: transform 150ms var(--ease-out); }
.btn-join::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 240%; aspect-ratio: 1; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 290deg, #FFFFFF 340deg, rgba(255, 255, 255, 0) 360deg), #3A6BD6; animation: tour 3.4s linear infinite; }
.btn-join::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #3A6BD6 0%, #284FB0 100%); box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.12); }
.btn-join .icon { width: 18px; height: 18px; }
.btn-join:active { transform: scale(0.97); }
@keyframes tour { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }


/* Haut de page (v18) : une seule colonne à lire de haut en bas. Le titre sur une ligne, une phrase, un bouton, puis le
   téléphone, entier (Romain ne veut pas d'un téléphone coupé par le bas de l'écran). Plus rien dans les coins.
   Le script mesure le bas du bloc de texte (--hero-top) : le téléphone se place juste dessous, quelle que soit la langue. */
.hero__head { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--nav-h) + 3svh); display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter) 28px; text-align: center; will-change: transform, opacity; }
.hero__title { font-size: var(--hx); white-space: nowrap; }
.hero__lead { margin-top: 18px; max-width: 60em; font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.4; color: rgba(255, 255, 255, 0.8); text-wrap: balance; }
.btn-join.hero__join { height: 50px; margin-top: 22px; }
.hero[data-deep="true"] .hero__head { visibility: hidden; }

/* Le cadre du téléphone (v18), dessiné en vectoriel dans le gabarit : titane brossé (dégradé en diagonale), un filet de
   lumière dehors, un filet sombre contre le verre. Net à toutes les tailles, sans flou ni masque. Les boutons passent
   derrière le cadre (seule leur saillie dépasse), et la Dynamic Island a son objectif. */
.iphone__frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.iphone__screen { box-shadow: inset 0 0 0 calc(var(--u) * 0.16) rgba(255, 255, 255, 0.08); }
.iphone__btn { z-index: 0; background: linear-gradient(90deg, #565D67 0%, #E6E9ED 38%, #B4BAC2 62%, #5C636D 100%); }
.iphone__island::after { content: ""; position: absolute; right: 11%; top: 50%; width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); border-radius: 50%; background: radial-gradient(circle at 38% 36%, #3B4C78 0%, #141B2E 38%, #05070C 64%, #000 100%); box-shadow: 0 0 0 calc(var(--u) * 0.22) #0B0D12; transform: translateY(-50%); }
.iphone__glare { background: linear-gradient(116deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.07) 20%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.06) 100%); }

/* La lumière du haut de page (v18). Aucun objet sur les côtés : c'est la lumière qui les remplit. Un seul calque de
   dégradés, plus large que l'écran (une lueur douce autour du téléphone, une lumière d'ambiance qui va jusqu'aux bords,
   un contre-jour léger derrière le titre), découpé à la forme du téléphone : rien ne passe sur l'écran, le ciel reste
   intact. Que des dégradés et un tracé : ni masque, ni grand flou, ni grain (un grain en fond figeait le rendu en haute
   définition). Le calque grandit avec le téléphone et s'efface dès le début du zoom. Plus de halo serré et saturé collé
   au contour (le « cercle bizarre ») : il reste un liseré fin au bord du cadre et l'ombre portée.
   Le tracé est calculé par tools/v18_haut.py (débords 3.2 / 0.5 / 0.25, trou au rayon du cadre). */
.hero__halo { box-shadow: none; }
.hero__halo::before {
  content: ""; position: absolute; left: calc(var(--hw) * -3.2); right: calc(var(--hw) * -3.2); top: calc(var(--hw) / 0.4785 * -0.5); bottom: calc(var(--hw) / 0.4785 * -0.25); pointer-events: none;
  background:
    radial-gradient(ellipse 16% 41% at 50% 57.1%, rgba(124, 164, 255, 0.3) 0%, rgba(118, 160, 255, 0.12) 55%, rgba(118, 160, 255, 0) 100%),
    radial-gradient(ellipse 26% 15% at 50% 12%, rgba(126, 164, 255, 0.13) 0%, rgba(126, 164, 255, 0) 100%),
    radial-gradient(ellipse 50% 56% at 50% 58.1%, rgba(72, 118, 242, 0.25) 0%, rgba(60, 104, 224, 0.16) 28%, rgba(46, 86, 196, 0.09) 55%, rgba(40, 76, 176, 0.04) 78%, rgba(40, 76, 176, 0) 100%);
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 43.324% 33.124%, 43.398% 31.988%, 43.615% 30.930%, 43.960% 30.021%, 44.409% 29.323%, 44.932% 28.885%, 45.493% 28.735%, 54.507% 28.735%, 55.068% 28.885%, 55.591% 29.323%, 56.040% 30.021%, 56.385% 30.930%, 56.602% 31.988%, 56.676% 33.124%, 56.676% 81.162%, 56.602% 82.298%, 56.385% 83.356%, 56.040% 84.265%, 55.591% 84.962%, 55.068% 85.401%, 54.507% 85.550%, 45.493% 85.550%, 44.932% 85.401%, 44.409% 84.962%, 43.960% 84.265%, 43.615% 83.356%, 43.398% 82.298%, 43.324% 81.162%, 43.324% 33.124%, 0 0);
}
.hero__halo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 calc(var(--hu) * 6) calc(var(--hu) * 0.3) rgba(160, 192, 255, 0.22), 0 calc(var(--hu) * 9) calc(var(--hu) * 20) calc(var(--hu) * -5) rgba(0, 0, 0, 0.7); }

/* Écrans moyens */
@media (max-width: 1100px) {
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .principe__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps__col { gap: 28px; }
  .steps__media { min-height: 0; aspect-ratio: 4 / 5; }
  .strip__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .strip__row > div:last-child { grid-column: 1 / -1; justify-self: start; }
  .profils, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  /* sur petit écran, pas de flou « verre » (coûteux au défilement) : des fonds un peu plus pleins à la place */
  .widget { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.13); }
  .notif { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.88); }
  .profil__k { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.22); }
}
@media (max-width: 640px) {
  /* téléphone : le titre sur deux lignes, la phrase, le bouton, puis le téléphone dessous */
  .hero { height: 170svh; --hx: min(2.625rem, 10.6vw); --hero-top: calc(var(--nav-h) + 10px + 1.8 * var(--hx) + 180px); --hw: max(150px, min(66vw, calc((100svh - var(--hero-top) - 20px) * 0.4785))); }
  .hero__head { top: calc(var(--nav-h) + 10px); padding-bottom: 22px; }
  .hero__title { white-space: normal; }
  .hero__title span { display: block; }
  .hero__lead { margin-top: 12px; font-size: 0.9375rem; }
  .btn-join.hero__join { height: 46px; margin-top: 18px; }
  .nums { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .widgets { gap: 12px; }
  .widget { min-height: 170px; padding: 16px; border-radius: 24px; }
  .widget h3 { font-size: 1.0625rem; }
  .widget p { font-size: 0.8125rem; }
  .profil { min-height: 460px; }
  .end__bottom { flex-direction: column; }
}
@media (max-width: 380px) {
  .brand__name { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; }
  .acc__a, .js .acc__a, .steps__media img, .menu, .nav, .profil img, .notif { transition: none; }
}


/* v18 : petits écrans et appareils qui demandent moins d'animations */
@media (max-width: 900px) {
  :root { --nav-h: 76px; }   /* la pastille descend à 68 px : l'accroche respire dessous */
  .nav { padding: 12px 12px 0; }
  .nav__links { display: none; }
  .nav__end { margin-left: auto; }
  .nav__menu { display: grid; }
}
@media (max-width: 640px) {
  .nav .brand__name { display: none; }
  .widget { padding: 10px 10px 16px; }
  .widget h3 { margin: 14px 6px 0; }
  .widget p { margin: 6px 6px 0; }
  .vis { height: 136px; border-radius: 16px; }
  .plan { gap: 4px; padding: 12px 9px; }
  .plan i { border-radius: 7px; }
  .liens { gap: 6px; padding: 10px 12% 0; }
  .liens__av { width: 32px; height: 32px; }
  .liens__btn { height: 23px; font-size: 0.6875rem; }
  .ecole { padding: 12px 12px 11px; }
  .ecole__n b { font-size: 3rem; }
  .ecole__segs { gap: 2px; height: 22px; }
  .ecole__ends { font-size: 0.5rem; letter-spacing: 0; }
  .suivi { padding: 11px 11px 0; }
  .suivi__chip { height: 26px; font-size: 0.6875rem; }
  .suivi__bars { left: 11px; right: 11px; gap: 6px; height: 86px; }
  .defile__row, .defile__row ul, .defile__row li { gap: 2rem; }
  .end__cta { min-height: min(82svh, 700px); }
}
@media (max-width: 380px) {
  .nav .lang-sw { display: none; }
  .nav__join { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .defile__row ul, .btn-join::before { animation: none; }
  .nav__join, .btn-join { transition: none; }
}