/* 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; }

/* Barre de navigation ; un voile en dégradé la garde lisible au-dessus du contenu */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--nav-h); padding: 0 clamp(20px, 6.6vw, 104px);
  color: var(--white); transition: color 300ms ease;
}
.nav::before { content: ""; position: absolute; inset: 0 0 -36px 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 300ms ease; background: linear-gradient(180deg, rgba(7, 14, 31, 0.9) 0%, rgba(7, 14, 31, 0.8) 55%, rgba(7, 14, 31, 0) 100%); }
body[data-scrolled="true"] .nav::before { opacity: 1; }
body[data-tone="light"] .nav { color: var(--ink); }
body[data-tone="light"] .nav::before { background: linear-gradient(180deg, rgba(244, 246, 250, 0.97) 0%, rgba(244, 246, 250, 0.9) 55%, rgba(244, 246, 250, 0) 100%); }
.nav__links { display: flex; gap: clamp(16px, 2.4vw, 36px); font-size: 0.875rem; font-weight: 650; letter-spacing: -0.015em; }
.nav__links a, .nav__end a { text-decoration: none; }
.brand { justify-self: center; 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; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 0.875rem; font-weight: 650; letter-spacing: -0.015em; }
.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 { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid currentColor; border-radius: 12px; background: none; cursor: pointer; opacity: 0.9; }
.nav__menu .icon { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a, .nav__end a { transition: opacity 150ms ease; }
  .nav__links a:hover, .nav__end a:hover { opacity: 0.6; }
}

/* Bouton flottant, toujours en bas au centre */
.cta {
  position: fixed; z-index: 55; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 60px;
  background: var(--glass-dark); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateX(-50%); text-decoration: none; transition: background-color 300ms ease;
}
body[data-tone="light"] .cta { background: var(--glass-light); }
.cta__label { padding: 13px 22px; border-radius: 60px; background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 6px 20px -10px rgba(12, 23, 48, 0.35); }
.cta__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink); }
.cta__icon .icon { width: 18px; height: 18px; transition: transform 250ms var(--ease-out); }
.cta:active { transform: translateX(-50%) scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover .cta__icon .icon { transform: rotate(45deg); } }

/* 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;
  --hw: min(29vw, 36svh);                             /* largeur du téléphone */
  --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: 50svh;                                        /* centre vertical du téléphone */
  --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; }
.hero__title { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* les titres glissent hors de l'écran et s'effacent pendant le zoom (plus aucun mot qui flotte dans le ciel) */
/* chaque titre reste de son côté du téléphone (il passe sur deux lignes s'il le faut) */
.hero__t1, .hero__t2 { position: absolute; max-width: min(9.5em, calc(50vw - var(--hw) / 2 - var(--gutter) - 16px)); will-change: transform, opacity; }
.hero__t1 { left: var(--gutter); top: 17svh; }
.hero__t2 { right: var(--gutter); bottom: calc(100lvh - 78svh); text-align: right; }
.hero__side { position: absolute; z-index: 5; left: var(--gutter); bottom: calc(100lvh - 88svh); width: min(300px, 30vw); }
.hero__side .p5 { max-width: 8.5em; }
.hero__side .p7 { color: rgba(255, 255, 255, 0.8); }
.hero__scroll { position: absolute; z-index: 5; right: var(--gutter); bottom: calc(100lvh - 88svh); width: min(350px, 30vw); }
.hero__scroll .rule { opacity: 0.6; }
.hero__scroll p { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.hero__scroll p span { display: inline-flex; align-items: center; gap: 12px; }
.hero__scroll .icon { width: 14px; height: 14px; }

/* 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); }
/* icônes 3D (Higgsfield) posées sur la carte vitrée */
.widget__art { width: 78px; height: 78px; margin: -8px 0 0 -8px; filter: drop-shadow(0 12px 18px rgba(4, 12, 40, 0.35)); }
.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); }
.ticker { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.ticker__lead { justify-self: end; }
.ticker__mid { display: flex; align-items: center; gap: 12px; }
.ticker__mid span { display: block; width: 52px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.ticker__mid .icon { width: 22px; height: 22px; }
.ticker__win { height: calc(3 * 1.5em); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.ticker__list { display: grid; animation: ticker 17.5s var(--ease-out) infinite; }
.ticker__list li { height: 1.5em; line-height: 1.5em; }
.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; }

/* Fin de page sombre */
.end { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: var(--white); padding: clamp(80px, 14vh, 160px) 0 calc(96px + env(safe-area-inset-bottom)); }
.giant { position: absolute; left: 50%; transform: translateX(-50%); font-stretch: var(--wide); font-weight: 500; font-size: clamp(5rem, 20vw, 18rem); line-height: 0.8; letter-spacing: -0.07em; white-space: nowrap; pointer-events: none; }
.end .giant { top: clamp(20px, 4vh, 48px); color: #13213F; }
.end__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: clamp(180px, 26vh, 300px); }
.end__lead { max-width: 11em; }
.end__contact { justify-self: end; width: min(350px, 100%); }
.end__mail { display: block; font-size: clamp(1.125rem, 1.6vw, 1.375rem); letter-spacing: -0.05em; text-decoration: none; }
.end__contact .rule { margin: 44px 0 14px; opacity: 0.4; }
.end__contact p { display: flex; justify-content: space-between; }
.end__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: clamp(64px, 12vh, 140px); 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, .end__mail: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; }
body[data-menu="open"] .nav { color: var(--white); }
body[data-menu="open"] .nav::before { opacity: 0; }

/* 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; }

/* Écrans moyens */
@media (max-width: 1100px) {
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .nav { grid-template-columns: 1fr auto; padding: 0 20px; }
  .nav__links, .nav__end { display: none; }
  .brand { justify-self: start; }
  .nav__menu { display: grid; }
  .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, .end__grid { grid-template-columns: minmax(0, 1fr); }
  .end__contact { justify-self: start; }
  /* 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 : la phrase d'accroche puis le titre sur deux lignes en haut, le téléphone dessous, dimensionné pour tenir
     entre le titre et le bouton (jamais de chevauchement) ; au zoom, le titre monte et s'efface */
  .hero {
    height: 170svh;
    --hx: min(2.625rem, 10.6vw);
    --hero-top: calc(var(--nav-h) + 34px + 1.8 * var(--hx) + 20px);
    --hw: min(64vw, calc((100svh - var(--hero-top) - 100px) * 0.4785));
    --cy: calc((var(--hero-top) + 100svh - 100px) / 2);
  }
  .hero__title { inset: auto; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 34px); }
  .hero__t1, .hero__t2 { position: static; display: block; max-width: none; text-align: left; font-size: var(--hx); }
  .hero__side { top: calc(var(--nav-h) + 8px); bottom: auto; width: calc(100% - 2 * var(--gutter)); }
  .hero__side .p5 { font-size: 0.8125rem; line-height: 1.2; letter-spacing: -0.02em; max-width: none; white-space: nowrap; opacity: 0.85; }
  .hero__side .dash, .hero__side .p7 { display: none; }
  .hero__scroll { display: none; }
  .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__art { width: 62px; height: 62px; margin: -6px 0 0 -6px; }
  .widget p { font-size: 0.8125rem; }
  .ticker { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
  .ticker__lead { justify-self: center; }
  .ticker__mid span { width: 32px; }
  .profil { min-height: 460px; }
  .end__bottom { flex-direction: column; }
}
@media (max-width: 380px) {
  .brand__name { font-size: 0.9375rem; }
  .hero__side .p5 { font-size: 0.75rem; }
  .widget__icon { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; }
  .ticker__list { animation: none; }
  .cta, .cta__icon .icon, .acc__a, .js .acc__a, .steps__media img, .menu, .nav, .profil img, .notif { transition: none; }
}
@keyframes ticker {
  0.000%, 10.286% { transform: translateY(0.0em); }
  14.286%, 24.571% { transform: translateY(-1.5em); }
  28.571%, 38.857% { transform: translateY(-3.0em); }
  42.857%, 53.143% { transform: translateY(-4.5em); }
  57.143%, 67.429% { transform: translateY(-6.0em); }
  71.429%, 81.714% { transform: translateY(-7.5em); }
  85.714%, 96.000% { transform: translateY(-9.0em); }
  100% { transform: translateY(-10.5em); }
}