/* BrandPerso, systeme des pages de vente (formation, workshop). Octobre 2026.
   Langage visuel tire des couvertures de PL: projecteur, coins bleus, bande bleue en italique, motif « + », mono pour les etiquettes. */

/* Polices auto-hebergees (sous-ensemble latin de Google Fonts). Fichiers dans lp/fonts/, noms definitifs. */
/* Barlow Condensed: 700, 800, 800 italique seulement. .ghost, .blue-giant et .seal-c b passent de 900 a 800 par choix (plan B2). Revenir a 900 exige d'ajouter BarlowCondensed-900.woff2. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/BarlowCondensed-700.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: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/BarlowCondensed-800.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: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(fonts/BarlowCondensed-800i.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-latinext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-cyrillicext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Inter-var-greekext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
/* JetBrains Mono: trois graisses discretes sur le meme fichier variable, un 600 demande rend en 700 comme avant */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/JetBrainsMono-var.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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/JetBrainsMono-var.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: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/JetBrainsMono-var.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 {
  --ink: #050508;
  --ink-2: #0a0a12;
  --card: #10101c;
  --card-2: #14142a;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f4f3f8;
  --muted: #a3a2b8;
  --dim: #8a89a0;
  --paper: #ecebe6;
  --paper-2: #e2e0d9;
  --paper-ink: #0b0b14;
  --paper-muted: #55546a;
  --blue: #2925cc;
  --blue-hi: #4540e5;
  --blue-ink: #9d9aff;
  --blue-deep: #14126b;
  --ok: #3ddc97;
  --no: #ff5c7a;

  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1240px;
  --sec: clamp(88px, 12vw, 168px);
  --r: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h, 65px) - 1px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding: var(--sec) 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Typographie ---------- */
.d1, .d2, .d3, .d4 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em; }
.d1 { font-size: clamp(64px, 13.5vw, 212px); }
.d2 { font-size: clamp(42px, 6.4vw, 96px); line-height: 0.94; }
.d3 { font-size: clamp(34px, 5vw, 66px); line-height: 0.92; }
.d4 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1; font-weight: 700; }
.it { font-style: italic; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.6; color: var(--muted); max-width: 640px; }
.label {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-ink); display: inline-block;
}
.label::before { content: '+'; color: var(--blue-hi); font-weight: 700; font-size: 15px; line-height: 1; display: inline-block; margin-right: 12px; vertical-align: -1px; }
.on-paper .label { color: var(--blue); }
.on-paper .label::before { color: var(--blue); }
.muted { color: var(--muted); }
.on-paper .muted { color: var(--paper-muted); }

/* La bande bleue en italique, comme « IRREMPLACABLE » sur ses couvertures */
.slab {
  position: relative; display: inline-block; color: #fff; font-style: italic;
  padding: 0.02em 0.16em 0.06em 0.1em; margin-left: -0.04em; isolation: isolate;
}
.slab::before {
  content: ''; position: absolute; inset: 0.06em -0.04em 0.02em; background: var(--blue);
  z-index: -1; transform-origin: left center; transform: scaleX(var(--slab, 1));
}
.slab-in { display: inline-block; }

/* Coins bleus, reprise de cadre-01 / cadre-02 */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ''; position: absolute; width: clamp(56px, 8.5vw, 124px); aspect-ratio: 941 / 937.5;
  background: var(--blue); pointer-events: none; z-index: 2;
  -webkit-mask: url('../assets/brand/cadre-01.svg') center / 100% 100% no-repeat; mask: url('../assets/brand/cadre-01.svg') center / 100% 100% no-repeat;
  transition: transform 0.9s var(--ease);
}
.frame::before { top: -14px; left: -14px; }
.frame::after { bottom: -14px; right: -14px; -webkit-mask-image: url('../assets/brand/cadre-02.svg'); mask-image: url('../assets/brand/cadre-02.svg'); }
.frame.is-out::before { transform: translate(18px, 18px); }
.frame.is-out::after { transform: translate(-18px, -18px); }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--blue); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-weight: 800; font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; overflow: hidden; isolation: isolate; white-space: nowrap;
  box-shadow: 0 10px 40px -10px rgba(41, 37, 204, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue-hi);
  transform: translateY(101%); transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(69, 64, 229, 0.95), inset 0 1px 0 rgba(255,255,255,.2); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn .arr { display: inline-block; transition: transform 0.35s var(--ease); font-family: var(--f-body); font-weight: 600; }
.btn:hover .arr { transform: translateX(5px); }
.btn-ghost {
  --bg: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn-ghost::before { background: rgba(255, 255, 255, 0.07); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.on-paper .btn-ghost { --fg: var(--paper-ink); box-shadow: inset 0 0 0 1.5px rgba(11,11,20,.25); }
.on-paper .btn-ghost::before { background: rgba(11, 11, 20, 0.06); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 17px; }
/* Note sous un CTA: bloc de texte simple, jamais flex, pour qu'un lien, un span ou un point final ne devienne pas une colonne a part */
.cta-note { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--dim); display: block; text-align: center; }
.cta-note > span:not(.dot) { display: inline; }
.cta-note .dot { display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: 0 10px 2px 4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(61,220,151,.15); }
.on-paper .cta-note { color: var(--paper-muted); }
/* Hors hero et final: le point pend a gauche et le texte s'aligne sous lui-meme */
.cta-note:has(.dot) { position: relative; padding-left: 22px; text-align: left; }
.cta-note:has(.dot) .dot { position: absolute; left: 4px; top: calc(0.8em - 3px); margin: 0; }
.hero .cta-note, .final .cta-note { padding-left: 0; text-align: center; color: var(--muted); }
.hero .cta-note .dot, .final .cta-note .dot { position: static; margin: 0 10px 2px 4px; }

/* ---------- Barre du haut ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--blue-hi); transform-origin: 0 50%; transform: scaleX(0); }
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 0;
  transition: background 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.top.is-solid { background: rgba(5, 5, 8, 0.94); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.top-logo img { height: 16px; width: auto; }
@media (min-width: 761px) { .top-logo img { height: 20px; } }
.top-mid { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.top-mid b { color: var(--text); font-weight: 600; }
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--no); flex: none; }
.live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,92,122,.55); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Hero projecteur ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 0; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { position: absolute; left: 50%; top: 0; width: max(100%, 900px); height: 118%; object-fit: cover; object-position: 50% 0; transform: translateX(-50%); opacity: 0.95; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(5,5,8,0) 0%, rgba(5,5,8,.6) 100%),
    linear-gradient(180deg, rgba(5,5,8,.35) 0%, rgba(5,5,8,0) 30%, rgba(5,5,8,.55) 70%, var(--ink) 100%);
}
.hero-grid { position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M6.6 10.57h8.8v.86H6.6zM10.57 6.6h.86v8.8h-.86z'/></svg>") center top / 28px 28px repeat; opacity: 0.16; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 65%, transparent), radial-gradient(ellipse 46% 40% at 50% 52%, rgba(0,0,0,.18), #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 65%, transparent), radial-gradient(ellipse 46% 40% at 50% 52%, rgba(0,0,0,.18), #000 100%); mask-composite: intersect; }
.hero-torch {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(120, 116, 255, 0.16), transparent 60%);
}
.hero:hover .hero-torch { opacity: 1; }
.hero-in { text-align: center; padding-bottom: clamp(28px, 4vw, 48px); }
.hero .label { margin-bottom: 26px; }
.hero h1 { margin: 0 auto; }
.hero h1 .ln { display: block; overflow: hidden; padding: 0 0.04em; }
.hero h1 .ln > span { display: inline-block; }
.hero .lede { margin: 30px auto 0; text-align: center; max-width: 680px; color: #c6c5d6; }
.hero-cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; }

/* Billet d'offre sous le hero */
.ticket {
  position: relative; margin: clamp(30px, 4vw, 48px) auto 0; max-width: 980px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.5vw, 34px);
  padding: 16px 16px 16px clamp(18px, 2.5vw, 30px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,20,40,.72), rgba(12,12,24,.72));
  border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.ticket-price { font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.01em; }
.ticket-price small { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }
.ticket-mid { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
.ticket-mid .t { font-size: 14.5px; color: var(--muted); }
.ticket-mid .t b { color: var(--text); font-weight: 600; }

/* Compte a rebours */
.cd { display: flex; gap: 6px; align-items: flex-start; }
.cd-u { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.cd-u b {
  display: block; width: 100%; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1;
  padding: 7px 0 6px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.cd-u small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.cd-sep { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: var(--dim); padding-top: 5px; }
.cd-lg .cd-u { min-width: clamp(62px, 9vw, 104px); }
.cd-lg .cd-u b { font-size: clamp(40px, 6vw, 78px); padding: 12px 0 10px; border-radius: 14px; }
.cd-lg .cd-sep { font-size: clamp(34px, 5vw, 64px); padding-top: 10px; }
.on-paper .cd-u b { background: rgba(11,11,20,.05); border-color: rgba(11,11,20,.1); }

/* Bandeau de concepts qui defile */
.marquee { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink); padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: marq 46s linear infinite; }
.marquee-track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: 0.02em; padding: 0 22px; white-space: nowrap; color: #d9d8e6; display: inline-flex; align-items: center; gap: 44px; }
.marquee-track span::after { content: '+'; color: var(--blue-hi); font-size: 0.9em; }
.marquee-track span.o { color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.5); }
@keyframes marq { to { transform: translateX(-50%); } }

/* Pause des animations continues: hors ecran et au repos */
.is-off, .is-off *, .is-off::before, .is-off::after, html.idle .marquee-track, html.idle .live, html.idle .live::after, html.idle .beam::before, html.idle .rec { animation-play-state: paused !important; }

/* ---------- Sections papier ---------- */
.on-paper { background: var(--paper); color: var(--paper-ink); }
.paper-grain { position: relative; }
.paper-grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.curtain { position: relative; z-index: 2; }

/* ---------- Citation qui s'allume mot par mot ---------- */
.say { text-align: left; }
.say p { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 7.4vw, 112px); line-height: 0.92; letter-spacing: -0.005em; }
.say .w { opacity: 0.14; transition: opacity .2s linear; }
.say .w.hl { color: var(--blue-ink); }
.say cite { display: block; margin-top: 30px; font-style: normal; }

/* ---------- Grilles et cartes ---------- */
.head { display: grid; gap: 22px; margin-bottom: clamp(44px, 6vw, 80px); max-width: 900px; }
.has-ghost { position: relative; }
.has-ghost > *:not(.ghost) { position: relative; z-index: 1; }
.ghost { position: absolute; top: -0.06em; right: var(--gutter); z-index: 0; pointer-events: none; font-family: var(--f-display); font-weight: 800; font-size: clamp(160px, 27vw, 420px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.1); }
.on-paper .ghost { -webkit-text-stroke-color: rgba(11,11,20,.1); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.head.center .d2 { font-size: clamp(40px, 5.6vw, 80px); }
#programme .ghost { display: none; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pcard { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: var(--r); background: #fff; border: 1px solid rgba(11,11,20,.08); box-shadow: 0 1px 0 rgba(11,11,20,.04), 0 24px 60px -40px rgba(11,11,20,.35); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.pcard .n { font-family: var(--f-display); font-weight: 800; font-size: 86px; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px rgba(41,37,204,.45); }
.pcard h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 36px); line-height: 0.95; }
.pcard p { color: var(--paper-muted); font-size: 16px; }
.pcard q { display: block; quotes: none; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(11,11,20,.1); font-size: 15px; font-weight: 600; color: var(--paper-ink); }
.pcard q small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); font-weight: 500; }

/* ---------- APCAM ---------- */
.ap-sec { padding: 0; }
.ap-sec > .wrap { min-height: 100vh; display: flex; align-items: center; padding-top: 96px; padding-bottom: 48px; }
.apcam { width: 100%; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.ap-head { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.ap-head .d3 { font-size: clamp(34px, 4.2vw, 64px); margin-top: 12px; }
.ap-lede { color: var(--muted); font-size: 16px; max-width: 520px; margin-top: 12px; }
@media (min-width: 981px) { .ap-lede { max-width: 760px; } }
.ap-panels + .ap-src { margin-top: 20px; }
.ap-letters { display: flex; flex-direction: column; gap: 0; }
.ap-l { display: flex; align-items: baseline; gap: 18px; font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, min(9.5vw, calc((100vh - 170px) / 4.4)), 148px); line-height: 0.86; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.18); transition: color .5s var(--ease), -webkit-text-stroke-color .5s; }
.ap-l small { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; -webkit-text-stroke: 0; color: var(--dim); transition: color .5s; }
.ap-l.on { color: #fff; -webkit-text-stroke-color: #fff; }
.ap-l.on small { color: var(--blue-ink); }
.ap-l.done { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.ap-p { display: flex; flex-direction: column; gap: 18px; transition: opacity .55s var(--ease), transform .55s var(--ease); }
/* Fondu croise seulement quand GSAP tourne; sans lui, les panneaux restent visibles en cartes.
   Les panneaux s'empilent dans une seule cellule de grille: le bloc prend la hauteur du plus long, rien ne deborde sur le titre.
   Ordinateur seulement: sous 981 px, bp.js n'epingle pas, et les cartes doivent toutes rester visibles. */
@media (min-width: 981px) {
  html.anim .ap-panels { position: relative; display: grid; }
  html.anim .ap-p { grid-area: 1 / 1; justify-content: center; opacity: 0; transform: translateY(24px); pointer-events: none; }
  html.anim .ap-p.on { opacity: 1; transform: none; pointer-events: auto; }
}
.ap-p .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.ap-p h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, min(3.6vw, 6vh), 54px); line-height: 0.9; }
.ap-p p { color: var(--muted); font-size: 18px; max-width: 520px; }
.ap-p .diag { font-size: 16px; color: var(--muted); }
.ap-p .diag b { color: #dcdbe8; }
.ap-p q { quotes: none; display: block; font-size: 16px; color: #dcdbe8; border-left: 3px solid var(--blue); padding-left: 16px; max-width: 520px; }
.ap-bar { margin-top: 28px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 520px; }
.ap-bar i { display: block; height: 100%; background: var(--blue-hi); transform-origin: 0 50%; transform: scaleX(0.2); transition: transform .5s var(--ease); }

/* ---------- Section bleue 90 jours ---------- */
.on-blue { background: var(--blue); color: #fff; overflow: hidden; }
.on-blue .label, .on-blue .label::before { color: #fff; }
.on-blue .muted, .on-blue .lede { color: rgba(255,255,255,.78); }
.road { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); padding-top: 70px; }
.road-line { position: absolute; top: 22px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.22); }
.road-line i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.stop { position: relative; }
.stop::before { content: ''; position: absolute; top: -56px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; }
.stop .d { font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 7vw, 98px); line-height: .85; }
.stop .d small { font-size: .42em; opacity: .7; margin-left: 4px; }
.stop h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 28px; margin: 14px 0 10px; line-height: 1; }
.stop p { color: rgba(255,255,255,.8); font-size: 16px; }
.blue-giant { position: absolute; right: -2vw; bottom: -6vw; font-family: var(--f-display); font-weight: 800; font-size: 34vw; line-height: .8; color: rgba(255,255,255,.06); pointer-events: none; user-select: none; }

/* ---------- Tracklist des modules ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 5vw, 70px); }
.stat { padding: 28px 10px 26px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(54px, 7vw, 96px); line-height: .85; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 30px 0 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.side b { color: var(--blue-ink); font-weight: 500; }
.trk { border-top: 1px solid var(--line); }
.trk:last-child { border-bottom: 1px solid var(--line); }
.trk-h {
  position: relative; width: 100%; background: none; border: 0; text-align: left; padding: 22px 6px;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 34px; gap: 18px; align-items: center; isolation: isolate;
}
.trk-h::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(41,37,204,.22), rgba(41,37,204,0) 70%); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
.trk-h:hover::before, .trk.open .trk-h::before { transform: scaleX(1); }
.trk-n { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: .8; color: #6e6d85; transition: color .35s; }
.trk-h:hover .trk-n, .trk.open .trk-n { color: var(--blue-ink); }
.trk-t { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.02; text-transform: uppercase; }
.trk-t small { display: block; font-family: var(--f-body); text-transform: none; font-weight: 400; font-size: 15px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.trk-m { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.chip { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.chip.soon { border-color: rgba(157,154,255,.4); color: var(--blue-ink); }
.trk-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: transform .45s var(--ease), background .3s; }
.trk-x::before, .trk-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.trk-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .45s var(--ease); }
.trk.open .trk-x { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.trk.open .trk-x::after { transform: translate(-50%, -50%) rotate(0deg); }
.trk-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.trk.open .trk-b { grid-template-rows: 1fr; }
.trk-b > div { overflow: hidden; }
.trk-b ol { padding: 4px 6px 28px 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 34px; counter-reset: l; }
.trk-b li { font-size: 15.5px; color: #cfcede; padding-left: 52px; position: relative; line-height: 1.45; }
.trk-b li::before { content: attr(data-n); position: absolute; left: 0; top: 1px; font-family: var(--f-mono); font-size: 12px; color: var(--blue-ink); }

/* ---------- Histoire de PL ---------- */
.story { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.story-ph { position: relative; }
.story-ph .ph { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; }
.story-ph img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 20%; }
.story-ph figcaption { margin-top: 18px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-muted); }
.story-tx { display: grid; gap: 22px; }
.story-tx > p:not(.label) { font-size: 18px; color: #3a394c; }
.big-q { position: relative; padding: 78px 0 0; margin-top: 4px; }
.big-q::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; aspect-ratio: 682.8 / 999.8; background: var(--blue); -webkit-mask: url('../assets/brand/guillemets.svg') center / contain no-repeat; mask: url('../assets/brand/guillemets.svg') center / contain no-repeat; }
.big-q p { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; text-transform: uppercase; color: var(--paper-ink); }
.big-q cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* ---------- Extraits en defilement horizontal ---------- */
.rail-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.rail-wrap .xcard { scroll-snap-align: start; }
@media (pointer: coarse) { .rail-wrap { scrollbar-width: none; } .rail-wrap::-webkit-scrollbar { display: none; } }
.rail { display: flex; gap: clamp(14px, 1.6vw, 22px); padding: 0 var(--gutter) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2)); width: max-content; }
.xcard {
  position: relative; width: clamp(290px, 34vw, 470px); min-height: clamp(300px, 42vh, 380px); flex: none; padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r); background: linear-gradient(160deg, #15152b, #0c0c18); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px; overflow: hidden;
}
.xcard::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(69,64,229,.35), transparent 70%); }
.xcard p { position: relative; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.02; }
.xcard footer { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.xcard footer b { color: var(--blue-ink); font-weight: 500; white-space: nowrap; }
.xcard footer span { text-align: right; }
.xcard.blue { background: var(--blue); border-color: transparent; }
.xcard.blue::before { display: none; }
.xcard.blue footer, .xcard.blue footer b { color: rgba(255,255,255,.85); }

/* ---------- Pile de valeur (cartes qui s'empilent) ---------- */
.stack { display: grid; gap: 16px; }
.scard {
  position: sticky; top: calc(96px + var(--i, 0) * 14px);
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: #fff; color: var(--paper-ink);
  border: 1px solid rgba(11,11,20,.08); box-shadow: 0 -10px 40px -20px rgba(11,11,20,.25); transform-origin: 50% 0;
}
.scard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(11,11,20,var(--sh, 0)); pointer-events: none; }
.scard .ic { width: 90px; height: 90px; border-radius: 18px; background: var(--paper); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 38px; color: var(--blue); }
.scard h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); text-transform: uppercase; line-height: .95; }
.scard p { color: var(--paper-muted); margin-top: 8px; font-size: 16px; max-width: 620px; }
.scard .tag { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--paper); color: var(--paper-ink); white-space: nowrap; }
.scard.hl { background: var(--blue); color: #fff; border-color: transparent; }
.scard.hl p { color: rgba(255,255,255,.82); }
.scard.hl .ic { background: rgba(255,255,255,.14); color: #fff; }
.scard.hl .tag { background: #fff; color: var(--blue); }

/* ---------- Prix ---------- */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); max-width: 1060px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; border-radius: 26px; padding: clamp(28px, 3.4vw, 44px); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; isolation: isolate; }
.plan h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: .9; }
.plan .for { color: var(--muted); font-size: 15.5px; margin-top: 8px; }
.amt { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.amt b { font-family: var(--f-display); font-weight: 800; font-size: clamp(72px, 8vw, 104px); line-height: .8; letter-spacing: -0.02em; }
.amt s { font-family: var(--f-display); font-weight: 700; font-size: 34px; color: var(--dim); text-decoration-thickness: 3px; text-decoration-color: var(--no); }
.amt-n { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: -8px; }
.ul { display: grid; gap: 12px; }
.ul li { position: relative; padding-left: 30px; font-size: 16px; color: #d7d6e4; line-height: 1.45; }
.ul li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(61,220,151,.14); }
.ul li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 6px; height: 9px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ul li b { color: #fff; font-weight: 600; }
.plan .btn { margin-top: auto; }
.plan.pro { background: linear-gradient(180deg, #1b1a45 0%, #0f0f22 60%); border-color: transparent; }
.beam { position: absolute; inset: -1.5px; border-radius: 27px; padding: 1.5px; z-index: -1; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.beam::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(157,154,255,.95) 74%, #fff 78%, rgba(69,64,229,.9) 84%, transparent 92%); animation: spin 5.5s linear infinite; }
.beam::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(69,64,229,.55); }
@keyframes spin { to { transform: rotate(1turn); } }
.ribbon { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--blue); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(41,37,204,.9); }
.price-cd { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: clamp(32px,4vw,48px) auto 0; text-align: center; }
.price-cd .cd-lg .cd-u { min-width: 64px; }
.price-cd .cd-lg .cd-u b { font-size: clamp(28px,3vw,40px); padding: 8px 0 7px; border-radius: 10px; }
.price-cd .cd-lg .cd-sep { font-size: 28px; padding-top: 4px; }
#prix:has(.prices) .d2 { font-size: clamp(40px, 5.6vw, 80px); }
#prix:has(.prices) .head { margin-bottom: clamp(24px, 3vw, 40px); }
/* Avec scroll-padding-top (en-tete), arrive au meme endroit que le saut calcule par bp.js (h + 31) */
#prix .head { scroll-margin-top: 31px; }
.price-cd .t { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Tableau comparatif */
.cmp { max-width: 1060px; margin: clamp(40px, 5vw, 64px) auto 0; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; }
.cmp-r { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.7fr)); align-items: center; border-top: 1px solid var(--line); }
.cmp-r:first-child { border-top: 0; background: rgba(255,255,255,.03); }
.cmp-r > * { padding: 16px 20px; font-size: 15.5px; }
.cmp-r > :not(:first-child) { text-align: center; border-left: 1px solid var(--line); }
.cmp-r.h > * { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: .02em; }
.cmp-r.h > :last-child { color: var(--blue-ink); }
.cmp-r .y, .cmp-r .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 13px; }
.cmp-r .y { background: rgba(61,220,151,.15); color: var(--ok); }
.cmp-r .n { background: transparent; color: var(--dim); font-weight: 400; }
.cmp-cta { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Garantie ---------- */
.guar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.seal { position: relative; width: clamp(190px, 22vw, 280px); aspect-ratio: 1; display: grid; place-items: center; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal text { font-family: var(--f-mono); font-size: 10.6px; letter-spacing: 3.2px; fill: #fff; text-transform: uppercase; }
.seal-c { width: 64%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; text-align: center; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
.seal-c b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 6vw, 74px); line-height: .8; }
.seal-c span { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.gl { display: grid; gap: 22px; margin-top: 28px; }
.gl > div { padding-left: 22px; border-left: 3px solid rgba(255,255,255,.5); }
.gl h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; margin-bottom: 8px; }
.gl p { color: rgba(255,255,255,.85); font-size: 16.5px; }
.fine { margin-top: 22px; font-size: 14.5px; color: rgba(255,255,255,.7); }

/* ---------- Pour qui ---------- */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.fit > div { padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: #fff; border: 1px solid rgba(11,11,20,.08); }
.fit h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 30px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.fit li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid rgba(11,11,20,.08); font-size: 16px; color: #2c2b3d; }
.fit li::before { position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.fit .yes li::before { content: '✓'; background: rgba(41,37,204,.1); color: var(--blue); }
.fit .no li::before { content: '✕'; background: rgba(255,92,122,.12); color: #d6325a; }

/* ---------- Questions ---------- */
.faq { max-width: 920px; margin: 0 auto; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa-h { width: 100%; background: none; border: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 18px; align-items: center; padding: 24px 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.08; text-transform: uppercase; }
.qa-h:hover { color: var(--blue-ink); }
.qa .trk-x { color: var(--text); }
.qa.open .trk-x { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.qa.open .trk-x::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa .trk-b > div > div { padding: 0 52px 26px 0; color: var(--muted); font-size: 16.5px; display: grid; gap: 12px; }
.qa.open .trk-b { grid-template-rows: 1fr; }

/* ---------- Final ---------- */
.final { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; text-align: center; }
.final .hero-bg img { height: 100%; }
.final .wrap { display: flex; flex-direction: column; align-items: center; gap: 30px; }

/* ---------- Pied ---------- */
.foot { padding: 50px 0 120px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover, .foot a:focus-visible { color: var(--text, #fff); }
.xsell { display: inline-flex; align-items: center; min-height: 44px; }
/* Dans une note: lien en ligne, la cible de 44 px vient du rembourrage vertical, qui ne grandit pas la ligne */
.cta-note .xsell { display: inline; min-height: 0; padding: 14px 0; }
.foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }

/* ---------- Barre collante mobile ---------- */
.sticky {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px;
  border-radius: 20px; background: #0e0e1c;
  border: 1px solid var(--line-2); box-shadow: 0 20px 50px -10px rgba(0,0,0,.8);
  transform: translateY(140%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s;
}
.sticky.show { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.sticky .p { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; }
.sticky .p small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-top: 4px; font-weight: 500; }

/* ---------- Panneau de reservation ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.sheet.open { visibility: visible; }
.sheet-bg { position: absolute; inset: 0; background: rgba(3,3,6,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s var(--ease); }
.sheet.open .sheet-bg { opacity: 1; }
.sheet-p {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #0c0c17; border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--ease); overflow: hidden;
}
.sheet.open .sheet-p { transform: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.sheet-steps { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.sheet-steps i { width: 34px; height: 3px; border-radius: 2px; background: var(--line-2); display: block; transition: background .4s; }
.sheet-steps i.on { background: var(--blue-hi); }
.x { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line); position: relative; }
.x::before, .x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 1.5px; background: #fff; transform: translate(-50%,-50%) rotate(45deg); }
.x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.sheet-body { flex: 1; overflow-y: auto; padding: 30px 26px 26px; overscroll-behavior: contain; }
.step { display: none; flex-direction: column; gap: 18px; }
.step.on { display: flex; animation: stepIn .5s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.step h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 38px; line-height: .92; }
.step > p { color: var(--muted); font-size: 15.5px; margin-top: -6px; }
.fld { display: grid; gap: 7px; }
.fld label { font-size: 13px; font-weight: 600; color: #cfcee0; }
.fld input, .fld textarea, .fld select {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 16px; transition: border-color .25s, background .25s, box-shadow .25s;
}
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--blue-hi); background: rgba(69,64,229,.08); box-shadow: 0 0 0 4px rgba(69,64,229,.18); }
.fld input::placeholder, .fld textarea::placeholder { color: #5f5e76; }
.fld.bad input { border-color: var(--no); }
.fld .err { font-size: 12.5px; color: var(--no); display: none; }
.fld.bad .err { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .25s, background .25s; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .rd { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; transition: border-color .25s; }
.opt .rd::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-hi); transform: scale(0); transition: transform .3s var(--ease); }
.opt:has(input:checked) { border-color: var(--blue-hi); background: rgba(69,64,229,.1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.opt:has(input:checked) .rd { border-color: var(--blue-hi); }
.opt:has(input:checked) .rd::after { transform: scale(1); }
.opt b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; }
.opt small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.opt .pr { font-family: var(--f-display); font-weight: 800; font-size: 26px; text-align: right; line-height: 1; }
.opt .pr s { display: block; font-size: 15px; color: var(--dim); }
.sheet-foot { padding: 18px 26px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; background: #0c0c17; }
.sheet-foot .sec-note { font-size: 12.5px; color: var(--dim); text-align: center; }
.sheet-foot .sec-note a, .form-err a { color: inherit; text-decoration: underline; }
.back { background: none; border: 0; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; justify-self: center; padding: 13px 18px; min-height: 44px; }
.step.done { text-align: center; align-items: center; padding-top: 30px; }
.step.done .ok { width: 84px; height: 84px; border-radius: 50%; background: rgba(61,220,151,.14); display: grid; place-items: center; color: var(--ok); font-size: 38px; }
.recap { list-style: none; margin: 26px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; font-size: 14px; color: var(--muted); background: rgba(255,255,255,.02); }
.recap li { display: flex; gap: 10px; align-items: baseline; }
.recap li::before { content: '✓'; color: var(--ok); font-weight: 700; flex: none; }
.form-err { display: none; padding: 12px 14px; border-radius: 12px; background: rgba(255,92,122,.1); border: 1px solid rgba(255,92,122,.35); color: #ffb3c1; font-size: 14px; }
.form-err.show { display: block; }
.sheet-p:focus, .step h3:focus { outline: none; }
/* Mode liste d'attente: meme convention que le style en ligne de formation (data-only-achat) */
.sheet:not(.mode-attente) [data-show-attente] { display: none; }
.sheet.mode-attente [data-only-achat] { display: none; }

/* ---------- Etat ferme ---------- */
.closed-bar { display: none; position: relative; z-index: 55; background: #d6264a; color: #fff; text-align: center; padding: 12px var(--gutter); font-weight: 600; font-size: 15px; }
html.ferme .closed-bar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 51; }
html.ferme .top { top: var(--closed-h, 48px); }
html.ferme body { padding-top: var(--closed-h, 48px); }
html.ferme { scroll-padding-top: calc(var(--top-h, 65px) + var(--closed-h, 48px) - 1px); }
/* Telephone et paysage bas: la barre fait 2 a 3 lignes, fixe elle mangerait un tiers de l'ecran. Elle defile avec la page. */
@media (max-width: 760px), (max-height: 500px) {
  html.ferme .closed-bar { position: relative; }
  html.ferme .top { top: 0; }
  html.ferme body { padding-top: 0; }
  html.ferme { scroll-padding-top: calc(var(--top-h, 65px) - 1px); }
}
html.ferme .only-open { display: none !important; }
.only-closed { display: none !important; }
html.ferme .only-closed { display: revert !important; }

/* ---------- Etats initiaux des animations (seulement si GSAP est la) ---------- */
html.anim [data-rise] { opacity: 0; transform: translateY(36px); }
html.anim .hero .slab { --slab: 0; }

/* Entree du hero en CSS: ne depend plus de GSAP ni du CDN. L'image n'anime que l'opacite (garde translateX et le yPercent de GSAP). */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ln > span { animation: bpRise 1.1s cubic-bezier(.16,1,.3,1) backwards; }
  .hero h1 .ln:nth-child(2) > span { animation-delay: .1s; }
  .hero h1 .ln:nth-child(3) > span { animation-delay: .2s; }
  .hero [data-hero] { animation: bpFade .8s ease-out .35s backwards; }
  .hero .hero-bg img { animation: bpBg 1.2s ease-out backwards; }
}
@keyframes bpRise { from { transform: translateY(105%); } }
@keyframes bpFade { from { opacity: 0; transform: translateY(16px); } }
@keyframes bpBg { from { opacity: 0; } }

/* ---------- Workshop: sieges, offre unique, etapes de depot ---------- */
.seats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.seat { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); display: grid; place-items: center; }
.seat span { font-family: var(--f-mono); font-size: 9.5px; color: var(--dim); }
.seat.pris { background: var(--blue-hi); border-color: transparent; }
.seat.pris span { color: #fff; }
.ticket .seats, .ticket .seats-l { max-width: none; }
.seats-l { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 420px; }
.seats-l b { color: #fff; font-weight: 500; }
.ticket-btns { display: flex; flex-direction: column; gap: 8px; }
.hero-cta.duo { flex-direction: row; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-cta.duo .cta-note { flex-basis: 100%; }
.one { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
.one > div { padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; gap: 22px; }
.one > div + div { background: rgba(255,255,255,.025); border-left: 1px solid var(--line); border-radius: 0 26px 26px 0; }
.dsteps { display: grid; gap: 18px; counter-reset: ds; }
.dsteps li { counter-increment: ds; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--muted); font-size: 15.5px; }
.dsteps li::before { content: counter(ds); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(69,64,229,.18); color: var(--blue-ink); font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.dsteps li b { display: block; color: #fff; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; margin-bottom: 4px; }
.ask { max-width: 1060px; margin: clamp(16px, 2vw, 26px) auto 0; padding: clamp(24px, 3vw, 36px); border-radius: 22px; border: 1px dashed var(--line-2); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 50px); }
.ask h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: .95; }
.ask p { color: var(--muted); margin-top: 10px; font-size: 15.5px; }
.ask ul { display: grid; gap: 12px; }
.ask li { padding-left: 22px; position: relative; color: #d7d6e4; font-size: 15.5px; }
.ask li::before { content: '+'; position: absolute; left: 0; color: var(--blue-ink); font-family: var(--f-mono); }
.ap-p .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-p .chips span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: #dcdbe8; }
.ap-p .chips span.b { background: var(--blue); border-color: transparent; color: #fff; }
.ap-l.sm { font-size: clamp(60px, min(10vw, calc((100vh - 170px) / 2.9)), 160px); line-height: .9; }

/* Deux sections papier qui se suivent forment un seul chapitre: pas de double marge */
.sec.on-paper + .sec.on-paper { padding-top: 0; margin-top: -1px; }

/* ---------- Fenetres basses (portable, zoom): l'APCAM epinglee doit tenir dans l'ecran ---------- */
@media (min-width: 981px) and (max-height: 800px) {
  .ap-sec > .wrap { padding-top: 84px; padding-bottom: 20px; }
  .ap-head { margin-bottom: 16px; padding-bottom: 14px; }
  .ap-p { gap: 12px; }
  .ap-p p { font-size: 16px; }
}
/* Portable reel (1366x657, 1280x631, 1024x640: ecran moins la barre du navigateur): titre, intro et panneaux plus serres */
@media (min-width: 981px) and (max-height: 700px) {
  .ap-sec > .wrap { padding-top: 80px; padding-bottom: 14px; }
  .ap-head { margin-bottom: 12px; padding-bottom: 10px; }
  .ap-head .d3 { font-size: clamp(28px, 5vh, 40px); margin-top: 8px; }
  .ap-lede { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .ap-p { gap: 10px; }
  .ap-p p, .ap-p .diag { font-size: 15px; }
  .ap-p q { font-size: 15px; }
  .ap-panels + .ap-src { margin-top: 12px; }
  .ap-bar { margin-top: 16px; }
}
/* Sans GSAP (CDN bloque, mouvement reduit): APCAM et rail en cartes statiques sur ordinateur */
@media (min-width: 981px) {
  html:not(.anim) .ap-sec { padding: var(--sec) 0; }
  html:not(.anim) .ap-sec > .wrap { min-height: 0; display: block; padding-top: 0; padding-bottom: 0; }
  html:not(.anim) .apcam { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html:not(.anim) .ap-letters, html:not(.anim) .ap-bar { display: none; }
  html:not(.anim) .ap-panels { display: grid; gap: 14px; min-height: 0; }
  html:not(.anim) .ap-p { padding: 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
  html:not(.anim) .ap-p h3::before { content: attr(data-l); display: block; font-size: 15px; font-family: var(--f-mono); color: var(--blue-ink); letter-spacing: .14em; margin-bottom: 8px; }
  html.anim .rail-wrap { overflow: hidden; }
  html:not(.anim) .rail-wrap { overflow: visible; }
  html:not(.anim) .rail { width: auto; flex-wrap: wrap; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); row-gap: clamp(14px, 1.6vw, 22px); }
  html:not(.anim) .rail .xcard { flex: 1 1 340px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cards3 { grid-template-columns: 1fr; }
  .one, .ask { grid-template-columns: 1fr; }
  .one > div + div { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 26px 26px; }
  .ap-sec { padding: var(--sec) 0; }
  .ap-sec > .wrap { min-height: 0; display: block; padding-top: 0; padding-bottom: 0; }
  .apcam { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ap-letters { display: none; }
  html .ap-panels { min-height: 0; display: grid; gap: 14px; }
  html .ap-p { position: relative; inset: auto; grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding: 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
  .ap-p h3 { font-size: clamp(26px, 7.5vw, 32px); }
  .ap-p h3::before { content: attr(data-l); display: block; font-size: 15px; font-family: var(--f-mono); color: var(--blue-ink); letter-spacing: .14em; margin-bottom: 8px; }
  .ap-bar { display: none; }
  .road { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 46px; }
  .road-line { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .road-line i { width: 100%; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .stop::before { top: 10px; left: -40px; }
  .story { grid-template-columns: 1fr; }
  .story-ph { max-width: 460px; }
  .prices { grid-template-columns: 1fr; }
  .plan.pro { order: -1; }
  .guar { grid-template-columns: 1fr; justify-items: start; }
  .fit { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trk-b ol { grid-template-columns: 1fr; padding-left: 20px; }
}
@media (max-width: 760px) {
  .ghost { display: none; }
  .side span:last-child { display: none; }
  body { font-size: 16px; }
  .hide-s { display: none; }
  .top .btn-sm { display: none; }
  .top { padding: 3px 0; } /* le logo garde 44 px de cible, la barre reste a sa hauteur d'avant */
  .hero { padding-top: 96px; }
  .ticket { grid-template-columns: 1fr; text-align: center; padding: 20px; gap: 16px; }
  .ticket-mid { align-items: center; text-align: center; }
  .ticket .btn { width: 100%; }
  .cd-u { min-width: 44px; }
  .cd-u b { font-size: 25px; }
  .sticky { display: flex; }
  .trk-h { grid-template-columns: 50px minmax(0, 1fr) 30px; gap: 12px; padding: 18px 2px; }
  .trk-m { grid-column: 2 / 3; justify-content: flex-start; }
  .trk-x { grid-row: 1; grid-column: 3; width: 30px; height: 30px; }
  .trk-n { font-size: 34px; }
  .scard { grid-template-columns: 56px minmax(0, 1fr); top: calc(76px + var(--i, 0) * 10px); }
  .scard .ic { width: 56px; height: 56px; font-size: 24px; border-radius: 14px; }
  .scard .tag { grid-column: 1 / -1; justify-self: start; }
  .cmp-r { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.55fr)); }
  .cmp-r > * { padding: 13px 10px; font-size: 14px; }
  .cmp-r.h > * { font-size: 16px; }
  .row2 { grid-template-columns: 1fr; }
  .sheet-p { top: auto; height: min(92svh, 760px); width: 100%; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .btn { white-space: normal; text-align: center; line-height: 1.05; padding: 12px 22px; }
  .qa .trk-b > div > div { padding-right: 0; }
}
/* Entete du comparatif: WORKSHOP et FORMATION tiennent sans etre coupes sur un iPhone SE */
@media (max-width: 360px) {
  .cmp-r > :not(:first-child) { padding-left: 6px; padding-right: 6px; }
  .cmp-r.h > * { font-size: 13.5px; letter-spacing: 0; }
}
@media (max-width: 380px) {
  .hide-xs { display: none; }
  .top-mid { white-space: nowrap; }
  .top-logo { flex: none; }
  .sticky { padding: 8px 8px 8px 14px; gap: 10px; }
  .sticky .btn { white-space: nowrap; padding: 0 16px; }
  .cd { gap: 4px; }
  .cd-u { min-width: 40px; }
  .cd-sep { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .sheet-top { padding: 12px 20px; }
  .sheet-body { padding-top: 18px; }
  .step h3 { font-size: 30px; }
  .sheet-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); gap: 6px; }
}
/* Telephone couche ou tres court: l'entete compacte garde le compte a rebours et le bouton, la barre collante disparait */
@media (max-height: 500px) {
  .top { padding: 6px 0; }
  .top .btn-sm { display: inline-flex; }
  .sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee-track { animation: none; }
}

/* ---------- Marque PL: vecteurs du dossier client (croix, cadres, guillemets, icone, mires) ---------- */
.hero-mark { display: block; width: clamp(150px, 15vw, 204px); height: auto; margin: 0 auto 22px; }
.mires { position: relative; }
.mires::after { content: ''; position: absolute; inset: -9px; pointer-events: none; z-index: 3; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 0 / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 0 / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 100% / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 100% / 18px 18px no-repeat; }
.on-paper .mires::after { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%232925cc' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 0 / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%232925cc' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 0 / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%232925cc' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 100% / 18px 18px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%232925cc' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 100% / 18px 18px no-repeat; }
.hero-mires { position: absolute; inset: 96px 28px 28px; z-index: -1; pointer-events: none; opacity: .55; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 0 / 22px 22px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 0 / 22px 22px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 0 100% / 22px 22px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%239d9aff' d='M0 10.4h22v1.2H0zM10.4 0h1.2v22h-1.2z'/></svg>") 100% 100% / 22px 22px no-repeat; }
.paper-grain { isolation: isolate; }
.paper-grain::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='%230b0b14' d='M6.6 10.57h8.8v.86H6.6zM10.57 6.6h.86v8.8h-.86z'/></svg>") 0 0 / 44px 44px repeat; -webkit-mask-image: radial-gradient(60% 70% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 100% 0%, #000, transparent 75%); }
.xcard p::before { content: ''; display: block; width: 17px; aspect-ratio: 682.8 / 999.8; margin-bottom: 16px; background: var(--blue-ink); -webkit-mask: url('../assets/brand/guillemets.svg') center / contain no-repeat; mask: url('../assets/brand/guillemets.svg') center / contain no-repeat; }
.xcard.blue p::before { background: #fff; }
.foot-id { display: flex; align-items: center; gap: 18px; }
.foot-id img { width: 40px; height: auto; }
.infos { position: relative; display: grid; gap: 3px; padding: 10px 16px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.infos b { color: var(--blue-ink); font-weight: 500; }
.trait { position: relative; height: 1px; background: var(--line-2); margin: 4px 0; }
.trait::before, .trait::after { content: ''; position: absolute; top: -2px; width: 5px; height: 5px; background: var(--blue-hi); }
.trait::before { left: 0; } .trait::after { right: 0; }
@media (max-width: 980px) { .hero-mires { display: none; } }

/* Hero ordinateur: le titre se regle sur la HAUTEUR de l'ecran, le bouton reste au-dessus de la ligne de flottaison */
@media (min-width: 700px) {
  .hero .d1 { font-size: clamp(56px, min(9.6vw, calc((100vh - 505px) / 1.8)), 160px); }
  .hero .lede { max-width: 820px; margin-top: 24px; }
  .hero .label { margin-bottom: 20px; }
  .hero-cta { margin-top: 28px; }
  .final .d1 { font-size: clamp(52px, min(8.4vw, calc((100vh - 560px) / 1.8)), 132px); }
}
/* Billet du hero (formation ouverte, grands ecrans): le bouton du billet suffit, le billet tient au-dessus du pli */
@media (min-width: 700px) and (min-height: 860px) {
  html:not(.ferme) .hero:has(.ticket [data-cd]) .hero-cta .btn { display: none; }
  html:not(.ferme) .hero:has(.ticket [data-cd]) .hero-cta { margin-top: 14px; }
  .hero:has(.ticket [data-cd]) .ticket { margin-top: 22px; padding: 10px 10px 10px 24px; }
  .hero:has(.ticket [data-cd]) .ticket .cd-u { min-width: 42px; }
  .hero:has(.ticket [data-cd]) .ticket .cd-u b { font-size: 22px; padding: 5px 0 4px; }
  .hero:has(.ticket [data-cd]) .ticket-price { font-size: 38px; }
}
@media (min-width: 700px) and (max-height: 760px) {
  .hero-mark { width: 150px; margin-bottom: 16px; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .hero-mark { width: 118px; margin-bottom: 12px; }
  .hero .label { margin-bottom: 14px; }
  .hero .lede { margin-top: 18px; }
  .hero-cta { margin-top: 22px; }
}
/* Projecteur qui respire: UN calque, transform et opacite seulement, en pause hors ecran et apres 10 s sans geste */
@keyframes fume {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  45% { transform: translate3d(-1.4%, -1%, 0) scale(1.06); opacity: .82; }
  100% { transform: translate3d(1.2%, -.4%, 0) scale(1.03); opacity: .96; }
}
.hero .hero-bg, .final .hero-bg { animation: fume 16s ease-in-out infinite alternate; animation-play-state: paused; transform-origin: 50% 0; }
.hero.vit .hero-bg, .final.vit .hero-bg { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .hero .hero-bg, .final .hero-bg { animation: none; } }

/* h1 aux lettres larges (workshop): une ligne par .ln sur mobile, sinon le CTA passe sous le pli */
@media (max-width: 699px) { .hero .d1-large { font-size: min(64px, calc((100vw - 40px) / 6.1)); } }
@media (max-width: 379px) { .hero .d1:not(.d1-large) { font-size: calc((100vw - 40px) / 5.3); } }

/* Avatar de PL dans l'etiquette du hero */
.label-av { display: inline-block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }
@media (max-width: 699px) { .label-av { display: none; } }