/* =========================================================
   AI Content School — landing
   DA : papier #F0EEE9 · encre #18161C · violet #6C4CD6
   Police unique : Montserrat arm (400, 500, 600, 800, 900)
   ========================================================= */

@font-face { font-family: "Montserrat arm"; src: url("../fonts/montserrat-arm-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat arm"; src: url("../fonts/montserrat-arm-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat arm"; src: url("../fonts/montserrat-arm-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat arm"; src: url("../fonts/montserrat-arm-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Montserrat arm"; src: url("../fonts/montserrat-arm-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --paper: #F0EEE9;
  --paper-2: #E6E3DC;
  --white: #FFFFFF;
  --ink: #18161C;
  --ink-2: #4A4650;        /* texte secondaire : 7,6:1 sur papier */
  --ink-3: #221F27;        /* cartes sur fond encre */
  --on-ink-2: #B7B2BE;     /* texte secondaire sur encre : 8,6:1 */
  --violet: #6C4CD6;       /* 4,95:1 sur papier · texte blanc dessus 5,8:1 */
  --violet-deep: #5A3CC4;
  --lav: #CFC3F5;          /* halos, surlignage : toujours de l'encre dessus, jamais du blanc */
  --lav-soft: #E4DDFA;
  --gutter: 16px;
  --maxw: 1320px;
  --section: 72px;
  --radius: 18px;
  --shadow: 0 30px 60px -28px rgba(24, 22, 28, .35), 0 10px 22px -14px rgba(24, 22, 28, .18);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --section: 120px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; --section: 150px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Montserrat arm", system-ui, sans-serif; font-weight: 400;
  font-size: 16px; line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 17px; } }
main, header, footer, section, .band { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }

/* Texte à compléter : repérable d'un coup d'œil, à supprimer avant le lancement */
.todo { background: var(--lav-soft); color: var(--ink) !important; border-radius: 4px; padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Typo commune ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.kicker b { color: var(--violet); font-weight: 900; }
.h2 {
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  /* le mot le plus long d'un titre (≈ 8,6 em) tient toujours dans l'écran */
  font-size: clamp(1.9rem, calc((100vw - 2 * var(--gutter)) / 9), 4.4rem);
  margin-top: 18px; max-width: 18ch;
}
.lead { font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin-top: 20px; }
@media (min-width: 768px) { .lead { font-size: 19px; } }
.v { color: var(--violet); }
/* Mot-clé : halo lavande flou, en dégradé contenu dans le mot (ne délave jamais la ligne du dessus) */
.halo {
  white-space: nowrap; padding-inline: .14em; margin-inline: -.14em;
  background: radial-gradient(closest-side, var(--lav) 74%, rgba(207, 195, 245, 0) 100%) center 72% / 100% 84% no-repeat;
}
.section { padding-block: var(--section); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--violet); color: var(--white); text-decoration: none;
  font: inherit; font-weight: 800; font-size: 16px; letter-spacing: .01em;
  transition: background .25s var(--ease), transform .25s var(--ease);
  box-shadow: 0 14px 30px -14px rgba(108, 76, 214, .7);
}
.btn:hover { background: var(--violet-deep); transform: translateY(-2px); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ink { background: var(--ink); box-shadow: none; }
.btn--ink:hover { background: #2B2831; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--paper { background: var(--paper); color: var(--ink); box-shadow: none; }
.btn--paper:hover { background: var(--white); }

/* ---------- Emplacements visuels (tu mettras tes images / vidéos ici) ---------- */
.slot {
  position: relative; overflow: hidden; margin: 0;
  background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.55), transparent 60%), var(--paper-2);
  border-radius: 14px; box-shadow: var(--shadow);
}
.slot > img, .slot > video { width: 100%; height: 100%; object-fit: cover; }
.slot[data-label]::after {
  content: attr(data-label); position: absolute; left: 12px; bottom: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2);
}
.slot--dark { background: #2A2730; box-shadow: none; }
.slot--dark[data-label]::after { color: var(--on-ink-2); }
/* Vidéo posée sur son image (l'image reste affichée tant que la vidéo ne joue pas) */
.has-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Carte « Carrousel » : 3 photos empilées + points, sans texte */
.caro { background: #2A2730; }
.caro img { position: absolute; width: 62%; height: auto; top: 12%; border-radius: 6px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.6); }
.caro img:nth-child(1) { left: 6%; transform: rotate(-8deg); }
.caro img:nth-child(2) { left: 19%; transform: rotate(0); z-index: 1; }
.caro img:nth-child(3) { left: 32%; transform: rotate(8deg); z-index: 2; }
.caro .dots { position: absolute; bottom: 8%; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 3; }
.caro .dots i { width: 5px; height: 5px; border-radius: 50%; background: #6E6875; }
.caro .dots i:first-child { background: var(--paper); }
.r45 { aspect-ratio: 4 / 5; } .r916 { aspect-ratio: 9 / 16; } .r11 { aspect-ratio: 1; } .r169 { aspect-ratio: 16 / 9; }

/* ---------- Bandeau + en-tête ---------- */
.band { background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-align: center; padding: 9px var(--gutter); }
.band b { color: var(--lav); font-weight: 800; }
.top { position: relative; z-index: 40; background: var(--paper); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.top .handle { font-size: 14px; font-weight: 900; letter-spacing: .14em; color: var(--ink); text-decoration: none; }
.top .mini { display: none; font-weight: 900; font-size: 15px; letter-spacing: -.01em; text-decoration: none; }
.top .mini span { color: var(--violet); font-weight: 800; }
.top nav { display: none; gap: 26px; font-size: 14px; font-weight: 600; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); }
@media (min-width: 1000px) {
  .top { position: sticky; top: 0; transition: box-shadow .3s var(--ease); }
  .top.stuck { box-shadow: 0 1px 0 rgba(24,22,28,.12); }
  .top nav { display: flex; }
  .top.stuck .handle { display: none; }
  .top.stuck .mini { display: inline; }
}

/* ---------- 1 · Hero ---------- */
.hero { padding-block: 6px 88px; }
.masthead { font-weight: 900; letter-spacing: -.045em; line-height: .9; font-size: calc((100vw - 2 * var(--gutter)) / 5.9); }
@media (min-width: 700px) { .masthead { font-size: min(calc((100vw - 2 * var(--gutter)) / 9.7), 8.4rem); } }
.masthead span { display: inline-block; }
.pb { margin-top: .28em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.35rem, 6.2vw, 1.6rem); }
.pb span { color: var(--violet); }
@media (min-width: 700px) { .pb { font-size: clamp(1.6rem, 2.5vw, 2.3rem); } }
.metaline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; border-top: 2px solid var(--ink); margin-top: 18px; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 699px) { .metaline .author { display: none; } }
.hero-grid { display: grid; gap: 26px; margin-top: 30px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: repeat(12, 1fr); gap: 0 24px; margin-top: 40px; } }
.hero h1 { font-weight: 900; letter-spacing: -.03em; line-height: 1.04; }
.hero h1 .pre { display: block; font-weight: 800; color: var(--ink-2); letter-spacing: -.015em; line-height: 1.2; font-size: clamp(1.15rem, 5.2vw, 1.5rem); margin-bottom: .4em; }
.hero h1 .big { display: block; font-size: clamp(1.9rem, calc((100vw - 2 * var(--gutter)) / 10), 2.4rem); }
@media (min-width: 900px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero h1 .pre { font-size: 1.75rem; }
  .hero h1 .big { font-size: clamp(3rem, 4vw, 3.9rem); }
}
.hero .lede { margin-top: 22px; font-size: 16px; font-weight: 500; max-width: 40ch; }
@media (min-width: 900px) { .hero .lede { font-size: 18px; margin-top: 28px; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }
.under { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.hero-fig { position: relative; margin: 0; }
@media (min-width: 900px) { .hero-fig { grid-column: 9 / span 4; } }
@media (max-width: 899px) { .hero-fig { margin-top: 18px; } }
.hero-fig .slot { border-radius: 4px; }
.hero-fig figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.stamp { position: absolute; bottom: 40px; right: -22px; z-index: 2; width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 13px; line-height: 1.1; transform: rotate(-8deg); }
.stamp b { display: block; font-size: 30px; letter-spacing: -.03em; color: var(--lav); }
@media (max-width: 899px) { .stamp { width: 84px; height: 84px; right: 10px; bottom: auto; top: -20px; } .stamp b { font-size: 24px; } }

/* Bandeau de preuves sous le hero */
.trust { display: grid; gap: 18px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(24,22,28,.18); }
@media (min-width: 900px) { .trust { grid-template-columns: auto auto 1fr; gap: 56px; align-items: center; margin-top: 72px; } }
.trust .stat { display: flex; align-items: baseline; gap: 10px; }
.trust .stat b { white-space: nowrap; font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1; color: var(--violet); }
.trust .stat span { font-size: 14px; font-weight: 600; color: var(--ink-2); max-width: 22ch; line-height: 1.35; }
/* Logos des marques : encre, même hauteur visuelle, aucun texte */
.logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 30px; margin-top: 10px; padding-top: 26px; border-top: 1px solid rgba(24,22,28,.12); --s: .68; }
@media (min-width: 900px) { .logos { justify-content: space-between; gap: 24px 40px; --s: 1; } }
.logos img { display: block; height: max(22px, calc(var(--h) * var(--s) * 1px)); width: auto; }
.proofs b { font-weight: 900; }
.about-lead { color: var(--ink); font-weight: 600; max-width: 52ch; }
.about-p { margin-top: 16px; font-weight: 500; color: var(--ink-2); max-width: 60ch; }
.about-stats { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(24,22,28,.18); }
.about-stats li { display: grid; gap: 4px; }
.about-stats b { white-space: nowrap; font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1; color: var(--violet); }
.about-stats span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 420px) { .about-stats { gap: 12px 22px; } }

/* Animations d'entrée du hero (l'unique effet « wow » : le halo qui s'ouvre) */
.masthead span { transform: translateY(40%); opacity: 0; animation: up .9s var(--ease) forwards; }
.masthead span + span { animation-delay: .07s; }
.hero h1 .fade { opacity: 0; animation: fadein 1s var(--ease) .35s forwards; }
.hero h1 .halo { background-size: 0% 84%; background-position: left 72%; animation: bloom 1.2s var(--ease) 1.1s forwards; }
@keyframes up { to { transform: none; opacity: 1; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes bloom { to { background-size: 100% 84%; } }

/* ---------- Apparition au scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: .1s; } .js [data-reveal="3"] { transition-delay: .2s; } .js [data-reveal="4"] { transition-delay: .3s; }
/* Titre qui se révèle par le bas */
.js .h2[data-rise] { clip-path: inset(0 0 100% 0); transform: translateY(.3em); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.js .h2[data-rise].in { clip-path: inset(-20% -10% -20% -10%); transform: none; }

/* ---------- 2 · Le problème ---------- */
.problem-grid { display: grid; gap: 40px; margin-top: 44px; }
@media (min-width: 900px) { .problem-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.problem-intro p { font-size: 18px; font-weight: 500; max-width: 34ch; }
.problem-intro p + p { margin-top: 18px; }
.statement { font-weight: 900; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(1.9rem, 5vw, 3.4rem); margin-top: 26px; }
.pains { counter-reset: pain; display: grid; gap: 0; }
.pains li { counter-increment: pain; display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding-block: 22px; border-top: 1px solid rgba(24,22,28,.18); font-size: 17px; font-weight: 500; }
.pains li:last-child { border-bottom: 1px solid rgba(24,22,28,.18); }
.pains li::before { content: "0" counter(pain); font-weight: 900; font-size: 22px; color: var(--violet); letter-spacing: -.02em; line-height: 1.3; }
.verdict { margin-top: 36px; font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; }

/* ---------- 3 · La solution (démo chat) ---------- */
.solution-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .solution-grid { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.chat { position: relative; background: var(--ink); color: var(--paper); border-radius: 26px; padding: 18px; box-shadow: var(--shadow); }
.chat::before { content: ""; position: absolute; inset: 10% 0 -8% 20%; z-index: -1; background: radial-gradient(closest-side, var(--lav), rgba(207,195,245,0)); opacity: .9; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; border-bottom: 1px solid rgba(240,238,233,.12); }
.chat-head .who { display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 14px; }
.core-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--violet); position: relative; flex: none; }
.core-mark::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--paper); }
.chat-head .n { font-size: 11px; font-weight: 600; color: var(--on-ink-2); letter-spacing: .06em; }
.msgs { display: grid; gap: 12px; padding-top: 16px; }
.me { justify-self: end; max-width: 88%; background: var(--paper); color: var(--ink); padding: 11px 15px; border-radius: 16px 16px 4px 16px; font-size: 14px; font-weight: 500; line-height: 1.45; min-height: 42px; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--violet); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai { font-size: 14px; line-height: 1.55; color: #E9E6F0; }
.ai .step { display: grid; grid-template-columns: 7.4em 1fr; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ai .step + .step { margin-top: 6px; }
.ai .step b { color: var(--lav); font-weight: 800; }
.ai .step.on { opacity: 1; transform: none; }
.out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.card { border-radius: 12px; overflow: hidden; position: relative; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.card.on { opacity: 1; transform: none; }
.card .slot { border-radius: 0; }
.card .tag { position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 800; }
.card .play { position: absolute; inset: 0; display: grid; place-items: center; }
.card .play span { width: 34px; height: 34px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; }
.card .play span::after { content: ""; border-left: 10px solid #fff; border-block: 6px solid transparent; margin-left: 3px; }
.chat-foot { margin-top: 14px; display: flex; gap: 8px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 14px; background: #24212A; font-size: 13px; color: var(--on-ink-2); }
.chat-foot .send { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; background: var(--violet); display: grid; place-items: center; color: #fff; font-weight: 900; }

.compare { width: 100%; margin-top: 72px; border-collapse: collapse; }
.compare th { text-align: left; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 0 0 14px; }
.compare th:first-child { color: var(--ink-2); }
.compare th:last-child { color: var(--violet); }
.compare td { padding: 18px 0; border-top: 1px solid rgba(24,22,28,.18); vertical-align: top; font-size: 17px; }
.compare td:first-child { color: var(--ink-2); font-weight: 500; padding-right: 28px; width: 46%; }
.compare td:last-child { font-weight: 800; }
.compare tr:last-child td { border-bottom: 1px solid rgba(24,22,28,.18); }
@media (max-width: 699px) {
  .compare thead { display: none; }
  .compare tr { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid rgba(24,22,28,.18); }
  .compare tr:last-child { border-bottom: 1px solid rgba(24,22,28,.18); }
  .compare td { display: block; border: 0 !important; padding: 0; width: auto !important; }
  .compare td::before { content: attr(data-th); display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
  .compare td:first-child::before { color: var(--ink-2); }
  .compare td:last-child::before { color: var(--violet); }
}

/* ---------- 4 · Pourquoi Claude (section encre) ---------- */
.dark { background: var(--ink); color: var(--paper); }
.dark .kicker { color: var(--on-ink-2); }
.dark .kicker b { color: var(--lav); }
.dark .lead { color: var(--on-ink-2); }
.dark .v { color: var(--lav); }
.flow { position: relative; margin-top: 64px; display: grid; justify-items: center; gap: 0; }
@media (min-width: 900px) { .flow { grid-template-columns: auto 1fr auto 1fr 1.9fr; align-items: center; gap: 0; } .flow .wire { margin-inline: 14px; } }
.flow .node { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: 16px; white-space: nowrap; }
.flow .node b { color: var(--violet); font-weight: 900; }
.flow .wire { width: 2px; height: 48px; background: var(--paper); transform-origin: top; transform: scaleY(0); transition: transform .7s var(--ease) .3s; }
@media (min-width: 900px) { .flow .wire { width: 100%; height: 2px; transform-origin: left; transform: scaleX(0); } }
.flow.in .wire { transform: none; }
.flow.in .wire + .claude + .wire { transition-delay: .9s; }
.claude { position: relative; z-index: 1; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--violet); color: var(--white); font-weight: 900; font-size: 24px; line-height: 1.1; }
.claude small { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.claude::before { content: ""; position: absolute; inset: -34px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(207,195,245,.55), rgba(207,195,245,0)); animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.14); opacity: .6; } }
@media (min-width: 900px) { .claude { width: 180px; height: 180px; font-size: 28px; } }
.flow .outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.flow .outs li { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.flow.in .outs li { opacity: 1; transform: none; }
.flow.in .outs li:nth-child(1) { transition-delay: 1.4s; } .flow.in .outs li:nth-child(2) { transition-delay: 1.55s; } .flow.in .outs li:nth-child(3) { transition-delay: 1.7s; }
.flow .outs span { display: block; margin-top: 10px; font-weight: 800; font-size: 14px; text-align: center; }
.flow .outs .slot { border-radius: 10px; }

.bento { display: grid; gap: 14px; margin-top: 72px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); gap: 18px; } .bento .b1 { grid-column: span 4; } .bento .b2 { grid-column: span 2; } .bento .b3 { grid-column: span 2; } .bento .b4 { grid-column: span 4; } }
.bento article { background: var(--ink-3); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; transition: transform .35s var(--ease), background .35s var(--ease); }
.bento article:hover { transform: translateY(-4px); background: #2A2630; }
.bento .num { font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--lav); }
.bento h3 { font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; margin-top: auto; }
.bento p { color: var(--on-ink-2); font-size: 16px; max-width: 48ch; }

/* ---------- 5 · Résultats ---------- */
.results { display: grid; gap: 22px; margin-top: 56px; }
@media (min-width: 900px) { .results { grid-template-columns: repeat(3, 1fr); gap: 28px; } .results li:nth-child(2) { margin-top: 56px; } }
.results h3 { font-weight: 900; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin-top: 22px; }
.results p { margin-top: 10px; color: var(--ink-2); font-weight: 500; }

/* ---------- Galerie défilante ---------- */
.gallery { padding-block: 0 var(--section); }
.gallery .head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.marquee { margin-top: 36px; overflow: hidden; }
.marquee .track { display: flex; align-items: center; gap: 16px; width: max-content; animation: slide 50s linear infinite; padding-block: 20px 36px; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
.marquee .slot { width: 200px; flex: none; }
.marquee .slot.r916 { width: 158px; }
@media (min-width: 900px) { .marquee .slot { width: 270px; } .marquee .slot.r916 { width: 212px; } }
@keyframes slide { to { transform: translateX(-50%); } }

.credit { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* ---------- Marques : défilement horizontal, photos et vidéos à hauteur égale ---------- */
.marquee--brands { margin-top: 20px; }
.marquee--brands .track { animation-duration: 70s; animation-direction: reverse; }
.bcell { flex: none; margin: 0; height: 300px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); }
@media (min-width: 900px) { .bcell { height: 420px; } }
.bcell img { height: 100%; width: auto; display: block; }
.bcell--v { aspect-ratio: 9 / 16; }
.bcell video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- 6 · Pour qui ---------- */
.personas { display: grid; gap: 14px; margin-top: 56px; }
@media (min-width: 768px) { .personas { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.personas li { background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform .35s var(--ease); }
.personas li:hover { transform: translateY(-4px); }
.personas b { display: block; font-weight: 900; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; }
.personas b::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 4px; background: var(--violet); margin-bottom: 18px; }
.personas p { margin-top: 12px; color: var(--ink-2); font-weight: 500; }
.notfor { margin-top: 48px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 28px; display: grid; gap: 18px; }
@media (min-width: 900px) { .notfor { grid-template-columns: 1fr 2fr; gap: 40px; padding: 36px 40px; } }
.notfor h3 { font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.notfor li { position: relative; padding: 0 0 0 30px; font-weight: 500; }
.notfor li + li { margin-top: 12px; }
.notfor li::before, .notfor li::after { content: ""; position: absolute; left: 4px; top: .75em; width: 14px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.notfor li::after { transform: rotate(-45deg); }

/* ---------- 7 · Programme ---------- */
.rows { margin-top: 48px; }
.row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; border-top: 2px solid var(--ink); padding-block: 12px; }
.row:last-child { border-bottom: 2px solid var(--ink); }
.row .word { display: flex; align-items: center; gap: .18em; white-space: nowrap; font-weight: 900; letter-spacing: -.045em; line-height: .92; padding-bottom: .04em;
  font-size: clamp(2.2rem, 10.5vw, 2.6rem); }
@media (min-width: 900px) { .row { grid-template-columns: auto 1fr minmax(220px, 300px); gap: 0 36px; padding-block: 14px 16px; } .row .word { font-size: min(4.4vw, 4.6rem); } }
.row .word .n { color: var(--violet); }
.row .desc { font-size: 15px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 899px) { .row .desc { display: none; } .row .fan { height: 46px; width: 96px; } }
.weeks { display: flex; gap: 6px; }
.weeks i { width: clamp(8px, 1.2vw, 15px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); transition: background .3s var(--ease), border-color .3s var(--ease); }
.rows.in .weeks i { background: var(--ink); }
.rows.in .weeks i:last-child { background: var(--violet); border-color: var(--violet); }
.rows.in .weeks i:nth-child(1) { transition-delay: .2s; } .rows.in .weeks i:nth-child(2) { transition-delay: .32s; } .rows.in .weeks i:nth-child(3) { transition-delay: .44s; }
.rows.in .weeks i:nth-child(4) { transition-delay: .56s; } .rows.in .weeks i:nth-child(5) { transition-delay: .68s; } .rows.in .weeks i:nth-child(6) { transition-delay: .8s; }
.core { position: relative; justify-self: start; display: grid; place-items: center; width: clamp(46px, 4.6vw, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; font-size: clamp(9px, .8vw, 11px); }
.core::before { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--lav), rgba(207,195,245,0)); animation: pulse 3.6s ease-in-out infinite; }
.fan { position: relative; justify-self: start; height: clamp(46px, 5vw, 78px); width: clamp(96px, 10vw, 150px); }
.fan .slot { position: absolute; top: 0; height: 100%; aspect-ratio: 4 / 5; border-radius: 8px; transition: transform .8s var(--ease), opacity .8s var(--ease); opacity: 0; transform: translateX(-30%); }
.fan .slot[data-label]::after { font-size: 9px; left: 7px; bottom: 6px; }
.fan .slot:nth-child(1) { left: 0; } .fan .slot:nth-child(2) { left: 30%; background: var(--ink); } .fan .slot:nth-child(2)::after { color: var(--on-ink-2); } .fan .slot:nth-child(3) { left: 60%; background: var(--lav-soft); }
.rows.in .fan .slot { opacity: 1; }
.rows.in .fan .slot:nth-child(1) { transform: rotate(-7deg); transition-delay: .5s; } .rows.in .fan .slot:nth-child(2) { transform: none; transition-delay: .65s; } .rows.in .fan .slot:nth-child(3) { transform: rotate(7deg); transition-delay: .8s; }

.phases { display: grid; gap: 16px; margin-top: 72px; }
@media (min-width: 1000px) { .phases { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.phase { background: var(--white); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.phase .when { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.phase .when b { font-size: 46px; font-weight: 900; letter-spacing: -.04em; color: var(--violet); text-transform: none; line-height: 1; }
.phase h3 { font-weight: 900; font-size: 25px; line-height: 1.15; letter-spacing: -.02em; margin-top: 22px; }
.phase ul { margin-top: 20px; display: grid; gap: 10px; }
.phase li { position: relative; padding-left: 20px; font-weight: 500; font-size: 16px; }
.phase li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }
.phase .res { margin-top: auto; padding-top: 22px; }
.phase .res p { border-top: 1px solid rgba(24,22,28,.15); padding-top: 16px; font-weight: 600; font-size: 15px; }
.phase .res b { color: var(--violet); font-weight: 900; }
.final { margin-top: 20px; background: var(--violet); color: var(--white); border-radius: var(--radius); padding: 34px 28px; display: grid; gap: 16px; }
@media (min-width: 900px) { .final { grid-template-columns: 1fr 1.2fr; gap: 48px; padding: 44px 48px; align-items: center; } }
.final h3 { font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.025em; }
.final p { font-weight: 500; font-size: 17px; }
.final p + p { margin-top: 12px; font-weight: 800; }

/* ---------- 8 · Inclus ---------- */
.included { display: grid; gap: 0 48px; margin-top: 48px; }
@media (min-width: 768px) { .included { grid-template-columns: repeat(2, 1fr); } }
.included li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-block: 18px; border-top: 1px solid rgba(24,22,28,.18); font-weight: 500; }
.check { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; margin-top: 1px; }
.check::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- 9 · Format ---------- */
.format { display: grid; margin-top: 48px; }
.format div { display: grid; gap: 4px; padding-block: 18px; border-top: 1px solid rgba(24,22,28,.18); }
.format div:last-child { border-bottom: 1px solid rgba(24,22,28,.18); }
@media (min-width: 768px) { .format div { grid-template-columns: 240px 1fr; gap: 24px; } }
.format dt { font-weight: 900; font-size: 17px; }
.format dd { margin: 0; color: var(--ink-2); font-weight: 500; }

/* ---------- 10 · Prérequis ---------- */
.req { display: grid; gap: 14px; margin-top: 48px; }
@media (min-width: 640px) { .req { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .req { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.req li { background: var(--white); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.req b { display: block; font-weight: 900; font-size: 19px; line-height: 1.25; }
.req li > span { display: block; margin-top: 8px; color: var(--ink-2); font-weight: 500; font-size: 15px; }
.note { margin-top: 18px; background: var(--lav-soft); border-radius: var(--radius); padding: 22px 26px; font-weight: 500; }
.note b { font-weight: 900; }
.module0 { margin-top: 22px; font-weight: 800; }

/* ---------- 11 · À propos ---------- */
.about { display: grid; gap: 40px; }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; } }
.about .slot { max-width: 460px; }
.proofs { margin-top: 28px; display: grid; gap: 0; }
.proofs li { padding-block: 14px; border-top: 1px solid rgba(24,22,28,.18); font-weight: 600; }
.about .why { margin-top: 28px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }

/* ---------- 12 · Avis ---------- */
.reviews { display: grid; gap: 14px; margin-top: 48px; }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.reviews li { border: 2px dashed rgba(24,22,28,.3); border-radius: var(--radius); padding: 26px; min-height: 200px; display: grid; align-content: space-between; gap: 20px; color: var(--ink-2); font-weight: 500; }
.reviews .who { display: flex; gap: 12px; align-items: center; }
.reviews .av { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); flex: none; }

/* ---------- 13 · Prix ---------- */
.price-grid { display: grid; gap: 18px; margin-top: 56px; align-items: start; }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1.35fr 1fr; gap: 22px; } }
.price { position: relative; border-radius: 24px; padding: 34px 28px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .price { padding: 44px; } }
.price--main { background: var(--ink); color: var(--paper); }
.price--pro { background: var(--white); box-shadow: var(--shadow); }
.price .name { font-weight: 900; font-size: 20px; letter-spacing: -.01em; }
.price--main .name span { color: var(--lav); }
.price .amount { font-weight: 900; letter-spacing: -.045em; line-height: 1; font-size: clamp(3.4rem, 15vw, 6.4rem); white-space: nowrap; }
.price--pro .amount { font-size: clamp(2.8rem, 12vw, 4.4rem); }
.price .eb { font-weight: 600; font-size: 15px; color: var(--on-ink-2); }
.price--pro .eb { color: var(--ink-2); }
.price ul { display: grid; gap: 10px; }
.price li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-weight: 500; font-size: 16px; }
.price--main .check { background: var(--lav); }
.price--main .check::after { border-color: var(--ink); }
.price .btn { margin-top: auto; align-self: stretch; }
.price .fine { font-size: 13px; font-weight: 500; color: var(--on-ink-2); text-align: center; }
.price--pro .fine { color: var(--ink-2); }
.opt { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--lav-soft); color: var(--ink); }

/* ---------- 14 · FAQ ---------- */
.faq { margin-top: 48px; max-width: 900px; }
.faq details { border-top: 1px solid rgba(24,22,28,.2); }
.faq details:last-child { border-bottom: 1px solid rgba(24,22,28,.2); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: 18px; align-items: center; padding-block: 22px; font-weight: 800; font-size: 18px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); transition: background .25s var(--ease), transform .35s var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--paper); transform: translate(-50%, -50%); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq details[open] summary .pm { background: var(--violet); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq summary:hover .pm { transform: scale(1.08); }
.faq .ans { padding: 0 50px 24px 0; color: var(--ink-2); font-weight: 500; max-width: 70ch; }

/* ---------- 15 · Appel final ---------- */
.closing { text-align: left; }
.closing .h2 { max-width: 20ch; font-size: clamp(1.75rem, calc((100vw - 2 * var(--gutter)) / 10.5), 5rem); }
.closing .dates { margin-top: 26px; font-size: 18px; font-weight: 600; color: var(--on-ink-2); }
.closing .btn { margin-top: 34px; }

/* ---------- Pied de page ---------- */
.foot { background: var(--ink); color: var(--on-ink-2); padding-block: 36px 110px; font-size: 13px; border-top: 1px solid rgba(240,238,233,.1); }
@media (min-width: 900px) { .foot { padding-bottom: 40px; } }
.foot .wrap { display: grid; gap: 14px; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: center; } }
.foot a { color: var(--paper); font-weight: 600; }

/* ---------- CTA sticky mobile ---------- */
.sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; border: 1px solid rgba(240, 238, 233, .16); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -16px rgba(24,22,28,.6); font-size: 13px; font-weight: 600; transform: translateY(160%); transition: transform .45s var(--ease); }
.sticky.show { transform: none; }
.sticky .btn { min-height: 44px; padding: 0 20px; font-size: 15px; box-shadow: none; }
@media (min-width: 1000px) { .sticky { display: none; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marquee { overflow-x: auto; }
  .marquee .track { animation: none; }
}


/* =========================================================
   Restructuration UX (30/09) : blocs fusionnés, mobile compact
   ========================================================= */

/* Résultats : défilement horizontal au doigt sur mobile, 3 colonnes sur desktop */
@media (max-width: 899px) {
  .results { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 28px; scrollbar-width: none; }
  .results::-webkit-scrollbar { display: none; }
  .results li { flex: 0 0 78%; scroll-snap-align: start; }
}
.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(24,22,28,.18); }
.more p { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
#result .marquee { margin-top: 8px; }

/* Pour qui : cartes plus denses sur mobile */
@media (max-width: 767px) {
  .personas { gap: 10px; margin-top: 36px; }
  .personas li { padding: 20px 22px; }
  .personas b::before { margin-bottom: 12px; }
  .personas p { margin-top: 8px; font-size: 15px; }
  .notfor { margin-top: 28px; padding: 22px; }
}

/* Programme : phases plus compactes sur mobile */
@media (max-width: 999px) {
  .phases { margin-top: 40px; gap: 12px; }
  .phase { padding: 24px 22px; }
  .phase h3 { margin-top: 14px; font-size: 22px; }
  .phase ul { margin-top: 14px; gap: 8px; }
  .phase li { font-size: 15px; }
  .phase .res { padding-top: 16px; }
}
/* Format du cours : 4 infos courtes */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; background: rgba(24,22,28,.14); border: 1px solid rgba(24,22,28,.14); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts div { background: var(--paper); padding: 18px 20px; }
.facts dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.facts dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; }

/* Qui je suis → clients */
.brands-head { margin-top: 72px; }
.subhead { font-weight: 900; font-size: clamp(1.7rem, 4.2vw, 2.8rem); letter-spacing: -.03em; line-height: 1.05; }
.brands-head .lead { margin-top: 12px; }
#about .marquee--brands { margin-top: 8px; }

/* Prix : coûts à prévoir juste sous l'offre */
.costs { margin-top: 18px; border: 2px solid var(--ink); border-radius: 24px; padding: 26px 24px; }
@media (min-width: 900px) { .costs { padding: 32px 40px; } }
.costs h3 { font-weight: 900; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; }
.costs-intro { margin-top: 6px; color: var(--ink-2); font-weight: 500; }
.costs ul { display: grid; gap: 0; margin-top: 16px; }
@media (min-width: 900px) { .costs ul { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.costs li { padding-block: 12px; border-top: 1px solid rgba(24,22,28,.14); }
@media (min-width: 900px) { .costs li { border-top: 0; padding: 0; } }
.costs li b { display: block; font-weight: 900; font-size: 16px; }
.costs li > span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.costs-note { margin-top: 16px; font-weight: 800; font-size: 15px; }
.price ul { gap: 8px; }
.price li { font-size: 15px; }
/* Pourquoi Claude : cartes plus denses sur mobile */
@media (max-width: 899px) {
  .bento { margin-top: 36px; gap: 10px; }
  .bento article { min-height: 0; padding: 22px; gap: 8px; }
  .bento .num { font-size: 30px; }
  .bento h3 { margin-top: 6px; font-size: 19px; }
  .bento p { font-size: 15px; }
}

/* Bandeau sous le hero : uniquement les logos */
.trust .logos { margin-top: 0; padding-top: 0; border-top: 0; }
.about-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 28px; }
.about-stats b { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
@media (min-width: 1100px) { .about-stats { grid-template-columns: repeat(5, auto); gap: 18px 30px; } }
@media (min-width: 1100px) { .about-stats span { white-space: nowrap; } }
.about-stats li > span { max-width: 13ch; }

/* ---------- 30/09 : prix plus compact, prix barré ---------- */
.price-grid { margin-top: 36px; }
.price { padding: 26px 22px; gap: 14px; border-radius: 20px; }
@media (min-width: 900px) { .price { padding: 32px 34px; } }
.price .name { font-size: 17px; }
.price .amount { font-size: clamp(2.4rem, 11vw, 3.4rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.price .amount s { font-size: .46em; font-weight: 700; letter-spacing: -.02em; color: var(--on-ink-2); text-decoration-thickness: 2px; }
.price--pro .amount { font-size: clamp(2rem, 9vw, 2.6rem); }
.price .until { margin-top: -6px; font-size: 15px; font-weight: 800; color: var(--lav); }
.price .eb { font-size: 14px; }
.price li { font-size: 14px; grid-template-columns: 22px 1fr; gap: 10px; }
.price .check { width: 20px; height: 20px; }
.price .check::after { width: 8px; height: 4px; border-width: 2px; }
.price .btn { min-height: 48px; }
.sticky s { opacity: .6; font-weight: 500; }

/* ---------- Avis : bande horizontale, au doigt ou au clavier ---------- */
.reviews-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px var(--gutter) 30px; scroll-padding-inline: var(--gutter); scrollbar-width: none; max-width: calc(var(--maxw)); margin-inline: auto; }
.reviews-row::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(82%, 380px); scroll-snap-align: start; margin: 0; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.review blockquote { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review img, .review .ini { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.review .ini { display: grid; place-items: center; background: var(--lav-soft); color: var(--ink); font-weight: 900; font-size: 15px; }
.review b { display: block; font-weight: 900; font-size: 15px; }
.review small { display: block; font-size: 13px; color: var(--ink-2); font-weight: 500; }

/* ---------- Dernière section : texte plus petit ---------- */
.closing .h2 { font-size: clamp(1.6rem, 6.4vw, 3.2rem); max-width: 22ch; }
.closing .dates { font-size: 16px; }

/* ---------- Bio : 4 chiffres ---------- */
.about-stats { grid-template-columns: repeat(2, auto); }
@media (min-width: 560px) { .about-stats { grid-template-columns: repeat(4, auto); } }
@media (min-width: 1100px) { .about-stats { grid-template-columns: repeat(4, auto); gap: 18px 40px; } }
.reviews-row { max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
/* Hero : vidéo produit, coins arrondis, ombre douce */
.hero-fig .hero-media { border-radius: 22px; }
@media (max-width: 899px) { .hero-fig .hero-media { border-radius: 18px; } }
.faq div.ans p + p { margin-top: 10px; }
.price--pro .name span { color: var(--violet); }

/* ---------- 01/10 : compte à rebours, liens Instagram ---------- */
.countdown { display: none; margin-top: 22px; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.js .countdown { display: flex; }
.js .countdown[hidden] { display: none; }
.cd-label { font-weight: 800; font-size: 15px; }
.cd-time { display: flex; gap: 8px; }
.cd-time span { display: grid; justify-items: center; min-width: 58px; padding: 8px 10px; border-radius: 12px; background: var(--ink); color: var(--paper); }
.cd-time b { font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-time small { margin-top: 4px; font-size: 10px; font-weight: 600; color: var(--on-ink-2); }
.sticky-cd { font-variant-numeric: tabular-nums; opacity: .8; }
#sticky > span:first-child { display: flex; flex-direction: column; line-height: 1.25; }
.sticky-cd { font-size: 11px; font-weight: 600; }
.price .until[hidden], [data-promo][hidden], [data-full][hidden] { display: none; }
.price--pro .amount s { color: var(--ink-2); }
.price--pro .until { color: var(--violet); }
.alumni { font-weight: 700; color: var(--ink); }
.ig { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 800; vertical-align: 1px; }
.ig:hover { background: var(--violet); }
.ig svg { flex: none; }
/* Légende sur une carte de collaboration */
.bcell--cap { position: relative; }
.bcell--cap figcaption { position: absolute; left: 10px; right: auto; top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(24,22,28,.82); color: var(--paper); font-size: 12px; font-weight: 700; line-height: 1.3; }
/* Collaborations : vidéos au format d'origine (portrait ou paysage) */
.bcell, .bcell--v { height: 240px; }
@media (min-width: 900px) { .bcell, .bcell--v { height: 330px; } }
/* Collaborations : chaque élément une seule fois, défilement aller-retour lent */
/* Défilement piloté en JS (auto + flèches + doigt) */
.marquee--once { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.marquee--once::-webkit-scrollbar { display: none; }
.marquee--once .track { animation: none; padding-inline: var(--gutter); }
.brands-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.arrows { display: flex; gap: 10px; }
.arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ink); color: var(--paper); transition: background .25s var(--ease), transform .25s var(--ease); }
.arrow:hover { background: var(--violet); transform: translateY(-2px); }
.arrow:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---------- Forfaits : deux cartes équilibrées, plus légères ---------- */
@media (min-width: 900px) { .price-grid { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1060px; align-items: stretch; } }
.price { padding: 24px 22px; gap: 12px; }
@media (min-width: 900px) { .price { padding: 30px 32px; } }
.price .name { font-size: 15px; }
.price .amount, .price--pro .amount { font-size: clamp(2.1rem, 9vw, 2.8rem); gap: 2px 12px; }
.price .until { margin-top: -4px; font-size: 13px; }
.price .eb { font-size: 13px; }
.price ul { gap: 7px; }
.price li { font-size: 13.5px; line-height: 1.45; grid-template-columns: 18px 1fr; gap: 9px; }
.price .check { width: 18px; height: 18px; margin-top: 1px; }
.price .check::after { width: 7px; height: 3.5px; }
.price .btn { min-height: 46px; font-size: 15px; }
.price--pro .check { background: var(--ink); }
.price--pro .check::after { border-color: var(--paper); }
.price--pro li.extra { color: var(--violet); font-weight: 600; }
.price--pro li.extra b { font-weight: 900; }
.price--pro li.extra .check { background: var(--violet); }
.price--pro li.extra .check::after { border-color: #fff; }
@media (min-width: 900px) { .costs { max-width: 1060px; } }
/* Forfaits centrés dans la page, noms plus grands */
#price .h2 { margin-inline: auto; text-align: center; }
#price .countdown { justify-content: center; }
.price-grid, .costs { margin-inline: auto; }
.price .name { font-size: clamp(1.4rem, 5.5vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; }
.price--main .name { color: var(--paper); }

/* 9 logos : une seule ligne sur grand écran, centrés quand ça passe sur plusieurs lignes */
@media (min-width: 900px) { .logos { justify-content: center; gap: 22px 34px; --s: .78; } }
@media (min-width: 1200px) { .logos { justify-content: space-between; gap: 24px 30px; --s: .86; } }

/* =========================================================
   Version allégée (body.lite) : mêmes couleurs, mêmes polices,
   moins de texte visible, le détail s'ouvre d'un clic.
   ========================================================= */

.lite .section { padding-block: 52px; }
@media (min-width: 768px) { .lite .section { padding-block: 76px; } }
@media (min-width: 1200px) { .lite .section { padding-block: 92px; } }
.lite .h2 { font-size: clamp(1.7rem, calc((100vw - 2 * var(--gutter)) / 10.2), 3.3rem); max-width: 20ch; }
.lite .lead { font-size: 16px; margin-top: 14px; }
@media (min-width: 768px) { .lite .lead { font-size: 18px; } }

/* ---------- Hero : la promesse est le titre ---------- */
.lite .hero { padding-block: 22px 52px; }
.lite .hero-grid { margin-top: 0; align-items: center; }
.lockup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 20px; font-weight: 900; font-size: 19px; letter-spacing: -.015em; }
.lockup span { font-weight: 800; font-size: 15px; }
.lockup i { font-style: normal; color: var(--violet); }
.hero h1.promise { font-weight: 900; letter-spacing: -.035em; line-height: 1.03; font-size: clamp(2.1rem, calc((100vw - 2 * var(--gutter)) / 8.3), 3rem); }
@media (min-width: 900px) {
  .hero h1.promise { font-size: clamp(3.4rem, 5vw, 4.9rem); }
  .lite .hero-copy { grid-column: 1 / span 7; }
  .lite .hero-fig { grid-column: 9 / span 4; }
}
.lite .hero .lede { max-width: 34ch; }
.lite .trust { margin-top: 44px; }

/* ---------- Blocs repliables ---------- */
.lite summary { list-style: none; cursor: pointer; }
.lite summary::-webkit-details-marker { display: none; }
.fold { border-top: 1px solid rgba(24, 22, 28, .18); }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 800; font-size: 17px; line-height: 1.3; }
.fold summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 18px; line-height: 1; transition: background .25s var(--ease); }
.fold[open] summary::after { content: "–"; background: var(--violet); }
.fold > p, .fold > ul { padding-bottom: 18px; color: var(--ink-2); font-weight: 500; font-size: 15px; max-width: 62ch; }
.fold .n { color: var(--violet); font-weight: 900; margin-right: .6em; }
.folds { margin-top: 36px; border-bottom: 1px solid rgba(24, 22, 28, .18); }
.folds-title { font-weight: 900; font-size: 20px; letter-spacing: -.015em; padding-bottom: 14px; }
@media (min-width: 900px) {
  .folds--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; border-bottom: 0; }
  .folds--2 .folds-title { grid-column: 1 / -1; }
  .folds--2 .fold { border-bottom: 1px solid rgba(24, 22, 28, .18); margin-top: -1px; }
}
/* petit repli à l'intérieur d'une carte */
.fold--mini { border-top-color: rgba(24, 22, 28, .14); }
.fold--mini summary { padding: 11px 0; font-size: 14px; }
.fold--mini summary::after { width: 22px; height: 22px; font-size: 15px; }
.fold--mini > ul { padding-bottom: 8px; }
/* « pas pour toi si » */
.fold--not { margin-top: 22px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 2px 22px; }
.fold--not li { position: relative; padding: 0 0 0 28px; }
.fold--not li + li { margin-top: 10px; }
.fold--not li::before, .fold--not li::after { content: ""; position: absolute; left: 4px; top: .7em; width: 13px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.fold--not li::after { transform: rotate(-45deg); }

/* ---------- Démo ---------- */
.lite #solution .kicker { display: block; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }

/* ---------- Résultats : image + titre ---------- */
.lite .results { margin-top: 36px; }
.lite .results li:nth-child(2) { margin-top: 0; }
.lite .results h3 { margin-top: 16px; font-size: 20px; }
.lite .more { margin-top: 36px; }

/* ---------- Prix ---------- */
.lite .price-grid { margin-top: 28px; }
.lite .price .fold--mini { border-top-color: rgba(240, 238, 233, .16); }
.lite .price .fold--mini summary { color: var(--lav); }
.lite .price .fold--mini summary::after { background: var(--lav); color: var(--ink); }
.lite .price .fold--mini > ul { color: inherit; font-size: inherit; }
.lite .price--pro .fold--mini { border-top-color: rgba(24, 22, 28, .14); }
.lite .price--pro .fold--mini summary { color: var(--violet); }
.lite .price--pro .fold--mini summary::after { background: var(--ink); color: var(--paper); }
.lite .price .btn { margin-top: 6px; }
.lite details.costs { padding: 6px 24px; }
@media (min-width: 900px) { .lite details.costs { padding: 8px 32px; } }
.lite details.costs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 900; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: -.015em; line-height: 1.25; }
.lite details.costs summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 18px; }
.lite details.costs[open] summary::after { content: "–"; background: var(--violet); }
.lite details.costs[open] { padding-bottom: 22px; }

/* ---------- Programme ---------- */
.lite .phases { margin-top: 32px; }
.lite .phase { padding: 24px 22px 10px; }
.lite .phase h3 { margin-top: 12px; font-size: 21px; }
.lite .phase .res { margin-top: 10px; padding-top: 0; }
.lite .phase .res p { border-top: 0; padding-top: 0; }
.lite .phase .fold--mini { margin-top: auto; }
.lite .phase .fold--mini > ul { margin-top: 0; padding-bottom: 12px; }
.lite .final { padding: 26px 24px; }
@media (min-width: 900px) { .lite .final { padding: 34px 40px; } }
.lite .final h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.lite .final p { font-size: 15px; }

/* ---------- Qui je suis ---------- */
.lite .about-stats { margin-top: 22px; padding-top: 20px; }
.lite .about .fold--mini { margin-top: 20px; border-bottom: 1px solid rgba(24, 22, 28, .14); }
.lite .about .fold--mini .about-p { margin-top: 0; padding-bottom: 14px; }
.lite .about .why { margin-top: 22px; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.lite .brands-head { margin-top: 52px; }

/* ---------- Appel final ---------- */
.lite .closing .h2 { max-width: 24ch; }


/* =========================================================
   Motion design (12/10) : discret, sans librairie.
   Tout est désactivé par « prefers-reduced-motion » (règle globale plus haut).
   ========================================================= */

/* Barre de progression de lecture */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--violet); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Hero : le titre monte mot par mot (visible dès la 1re image, donc sans retarder l'affichage) */
.promise .w { display: inline-block; opacity: .25; transform: translateY(.38em); animation: wordIn .75s var(--ease) forwards; animation-delay: calc(var(--i) * 75ms); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
.hero .lede, .hero .cta-row { opacity: .01; animation: softIn .8s var(--ease) .55s forwards; }
.hero .cta-row { animation-delay: .7s; }
@keyframes softIn { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hero : la vidéo se dévoile, un halo lavande flotte derrière */
.hero-fig { position: relative; }
.hero-fig .hero-media { transition: transform .5s var(--ease); }
/* zoom arrière à l'intérieur du cadre : la zone visible ne change pas, donc l'affichage n'est pas retardé */
.hero-fig .hero-media img, .hero-fig .hero-media video { animation: zoomOut 1.8s var(--ease) both; }
@keyframes zoomOut { from { transform: scale(1.09); } to { transform: none; } }
.hero-fig::before { content: ""; position: absolute; inset: -14% -20% -10% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--lav) 0%, rgba(207, 195, 245, .55) 45%, rgba(207, 195, 245, 0) 100%);
}
@media (min-width: 900px) { .hero-fig::before { animation: drift 9s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: translate3d(-6%, 4%, 0) scale(.94); } to { transform: translate3d(7%, -5%, 0) scale(1.06); } }

/* Logos : ruban qui défile sur téléphone et tablette */
.trust.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.trust.ticker .logos { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0 44px; padding-right: 44px; animation: slide 30s linear infinite; }
.trust.ticker .logos li { flex: none; }

/* Titres de section : le halo s'ouvre quand le titre arrive */
.js .h2[data-rise] .halo { background-size: 0% 84%; background-position: left 72%; transition: background-size 1.1s var(--ease) .55s; }
.js .h2[data-rise].in .halo { background-size: 100% 84%; }

/* Navigation : la section en cours est soulignée */
.top nav a { position: relative; transition: color .25s var(--ease); }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top nav a.on { color: var(--ink); }
.top nav a.on::after { transform: scaleX(1); }

/* Survols (souris uniquement) */
@media (hover: hover) {
  .results li .slot img, .marquee .slot img { transition: transform .9s var(--ease); }
  .results li:hover .slot img, .marquee .slot:hover img { transform: scale(1.045); }
  .phase, .price, .review { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .phase:hover, .review:hover { transform: translateY(-5px); }
  .price:hover { transform: translateY(-4px); }
  .btn { position: relative; overflow: hidden; }
  .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
  .btn:hover::after { transform: translateX(120%); }
}

/* Appel final : halo lavande qui dérive lentement */
.closing { position: relative; overflow: hidden; }
.closing .wrap { position: relative; z-index: 1; }
.closing::before { content: ""; position: absolute; width: 70vmax; height: 70vmax; right: -25vmax; top: -30vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(108, 76, 214, .55), rgba(108, 76, 214, 0)); animation: drift 11s ease-in-out infinite alternate; }

/* Blocs repliables : l'ouverture est animée en JS, on coupe juste le contenu pendant l'animation */
details.is-animating { overflow: hidden; }

/* =========================================================
   Écrans (12/10) : fond blanc → lavande très clair, une section par écran
   sur ordinateur, sections foncées, tout visible dans « Ում համար է » et « ՈՎ ԵՄ ԵՍ ».
   ========================================================= */
:root { --paper: #FCFBFF; --paper-2: #ECE8F6; --top-h: 70px; --foot-h: 96px; --t: 16px; }
@media (min-width: 768px) { :root { --t: 17px; } }
/* Un seul fond continu pour toute la page : il reste fixe pendant le défilement, donc aucune reprise entre les sections */
html { background: #FDFCFF; }
body { background: transparent; }
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(75% 60% at 100% 100%, rgba(207, 195, 245, .24), rgba(207, 195, 245, 0) 72%),
    radial-gradient(65% 55% at 0% 100%, rgba(228, 221, 253, .5), rgba(228, 221, 253, 0) 74%),
    linear-gradient(180deg, #FFFFFF 0%, #FDFCFF 38%, #F4F0FE 100%); }
.hero, .section:not(.dark) { background: none; }
.top { background: #FFFFFF; }
.phase, .personas li, .review, .price--pro { border: 1px solid rgba(108, 76, 214, .10); }
.facts div { background: rgba(255, 255, 255, .75); }
.slot { background: var(--paper-2); }

/* ---------- Sections foncées ---------- */
.dark.screen { position: relative; overflow: hidden; }
.dark.screen > * { position: relative; z-index: 1; }
.dark.screen:not(.closing)::before { content: ""; position: absolute; z-index: 0; width: 62vmax; height: 62vmax; left: -24vmax; bottom: -36vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(108, 76, 214, .42), rgba(108, 76, 214, 0)); }
.dark .arrow { background: var(--paper); color: var(--ink); }
.dark .arrow:hover { background: var(--lav); }
.dark .bcell { box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .7); }
.lite #brands .brands-head { margin-top: 0; }
#brands .marquee--brands { margin-top: 12px; }

/* ---------- Ինչու հենց Claude : 4 cartes, tout est visible ---------- */
.why-grid { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card { background: var(--ink-3); border: 1px solid rgba(240, 238, 233, .08); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.why-card .num { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--lav); }
.why-card h3 { font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.why-card p { color: var(--on-ink-2); font-size: 15px; font-weight: 500; }
@media (hover: hover) { .why-card { transition: transform .4s var(--ease), background .4s var(--ease); } .why-card:hover { transform: translateY(-5px); background: #2A2630; } }

/* ---------- Ում համար է : 4 cartes + « pas pour toi », sans repli ---------- */
.lite .personas { margin-top: 30px; }
.lite .personas li { padding: 24px; }
.lite .personas b { font-size: 19px; }
.lite .personas b::before { margin-bottom: 14px; }
.lite .personas p { font-size: 15px; margin-top: 10px; }
@media (min-width: 1100px) { .lite .personas { grid-template-columns: repeat(4, 1fr); } }
.lite .notfor { margin-top: 18px; padding: 22px 26px; }
.lite .notfor h3 { font-size: 20px; }
.lite .notfor li { font-size: 15px; }
.lite .notfor li + li { margin-top: 8px; }

/* ---------- ՈՎ ԵՄ ԵՍ : une seule taille de texte, gros chiffres violets ---------- */
.lite .about .about-lead, .lite .about .about-p, .lite .about .why, .lite .about-stats li > span { font-size: var(--t); line-height: 1.6; letter-spacing: 0; }
.lite .about .about-lead { margin-top: 16px; font-weight: 600; color: var(--ink); max-width: 60ch; }
.lite .about .about-p { margin-top: 12px; font-weight: 500; color: var(--ink-2); max-width: 60ch; }
.lite .about .why { margin-top: 20px; font-weight: 800; max-width: 60ch; }
.lite .about-stats { margin-top: 22px; padding-top: 20px; gap: 16px 36px; }
.lite .about-stats li > span { max-width: none; font-weight: 500; color: var(--ink-2); line-height: 1.3; }

/* ---------- Mes travaux ---------- */
.works-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
#works .marquee { margin-top: 14px; }
#works .credit { margin-top: 0; }

/* ---------- Une section par écran (ordinateur) ---------- */
@media (min-width: 1000px) and (min-height: 700px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: var(--top-h); }
  .screen { min-height: calc(100svh - var(--top-h)); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }
  .lite .screen.section { padding-block: clamp(24px, 4.5vh, 52px); }
  .lite .screen .h2 { font-size: clamp(1.9rem, min(3.3vw, 6.2vh), 3rem); margin-top: 0; }
  .lite .screen .kicker { margin-bottom: 12px; }
  .lite .screen .lead { margin-top: 10px; }

  /* Hero : logos en bas de l'écran */
  .lite .hero.screen { padding-block: 12px 26px; }
  .hero.screen > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .hero h1.promise { font-size: clamp(3rem, min(5vw, 9.4vh), 4.9rem); }
  .lite .hero .trust { margin-top: clamp(22px, 5vh, 52px); }
  .hero-fig .slot { max-height: 62vh; margin-inline: auto; }

  /* Résultats : les 3 cartes tiennent dans la hauteur */
  .lite .results { margin-top: 26px; max-width: calc(3 * 40vh + 56px); }
  .lite .results h3 { margin-top: 12px; font-size: 19px; }

  /* Marques et galerie : hauteur liée à l'écran */
  .bcell, .bcell--v { height: min(46vh, 430px); }
  #works .marquee .slot { width: auto; height: min(48vh, 440px); }
  #works .marquee .slot.r916 { width: auto; }
  #works .marquee .track { padding-block: 16px 30px; }

  /* Prix */
  .lite #price .price-grid { margin-top: 18px; }
  .lite #price .countdown { margin-top: 12px; }
  .lite #price .price { padding: 22px 28px; gap: 10px; }
  .lite #price .costs { margin-top: 14px; }

  /* Programme */
  .lite .phases { margin-top: 24px; }
  .lite .facts { margin-top: 16px; }
  .lite .final { margin-top: 16px; }

  /* Qui je suis */
  .about { align-items: center; }
  .about > .slot { max-height: 66vh; width: auto; max-width: none; justify-self: end; }

  /* FAQ sur deux colonnes */
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; max-width: none; margin-top: 26px; }
  .faq details:nth-last-child(2) { border-bottom: 1px solid rgba(24, 22, 28, .2); }
  .faq summary { padding-block: 17px; font-size: 17px; }

  /* Appel final + pied de page = un écran */
  .closing.screen { min-height: calc(100svh - var(--top-h) - var(--foot-h)); }
  .foot { min-height: var(--foot-h); padding-block: 22px; display: flex; align-items: center; }
  .foot .wrap { width: 100%; }
  [id] { scroll-margin-top: var(--top-h); }
}
.lite .about-stats li span { font-size: var(--t); }
@media (min-width: 1000px) and (min-height: 700px) { .lite #price.screen { padding-block: 16px; } }

/* ---------- Écrans : adaptation à la hauteur (portables) ---------- */
@media (min-width: 1000px) and (min-height: 700px) {
  .hero h1.promise { font-size: clamp(2.6rem, min(5vw, 8vh), 4.9rem); }
  /* Prix : titre et compte à rebours sur une ligne */
  #price > .wrap { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 28px; }
  #price > .wrap > .h2 { margin: 0; }
  .lite #price .countdown { margin-top: 0; }
  #price .price-grid, #price .costs { grid-column: 1 / -1; width: 100%; }
}
@media (min-width: 1000px) and (min-height: 700px) and (max-height: 840px) {
  .lite .screen.section { padding-block: clamp(14px, 2.6vh, 24px); }
  .lite .screen .h2 { font-size: clamp(1.7rem, min(3vw, 5.4vh), 2.6rem); }
  /* Hero */
  .lite .hero.screen { padding-block: 8px 16px; }
  .lockup { margin-bottom: 12px; }
  .lite .hero .lede { margin-top: 14px; font-size: 16px; }
  .hero .cta-row { margin-top: 16px; }
  .lite .hero .trust { margin-top: clamp(14px, 3vh, 26px); padding-top: 16px; }
  .logos { --s: .68 !important; }
  .hero-fig .slot { max-height: 56vh; }
  /* Prix */
  .lite #price.screen { padding-block: 10px; }
  .lite #price .price-grid { margin-top: 10px; }
  .lite #price .price { padding: 14px 24px; gap: 7px; }
  #price .price .name { font-size: 1.3rem; }
  #price .price .amount, #price .price--pro .amount { font-size: 2rem; }
  #price .price .eb { display: none; }
  #price .price ul { gap: 4px; }
  #price .price li { font-size: 13px; line-height: 1.35; }
  #price .price .btn { min-height: 40px; margin-top: 2px; }
  #price .fold--mini summary { padding: 7px 0; }
  .lite #price .costs { margin-top: 8px; }
  .lite details.costs summary { padding: 9px 0; font-size: 1rem; }
  .cd-time span { padding: 5px 8px; min-width: 50px; }
  .cd-time b { font-size: 18px; }
  /* Programme */
  .lite .phases { margin-top: 14px; gap: 14px; }
  .lite .phase { padding: 16px 20px 6px; }
  .phase .when b { font-size: 32px; }
  .lite .phase h3 { margin-top: 6px; font-size: 19px; }
  .lite .phase .res p { font-size: 14px; }
  .lite .facts { margin-top: 12px; }
  .facts div { padding: 11px 18px; }
  .facts dd { font-size: 14px; }
  .lite .final { margin-top: 12px; padding: 18px 32px; }
  .lite .final h3 { font-size: 1.4rem; }
  .lite .final p { font-size: 14px; }
  .lite .final p + p { margin-top: 6px; }
  /* Cartes un peu plus denses */
  .lite .personas { margin-top: 18px; }
  .lite .personas li { padding: 18px 20px; }
  .lite .personas p { font-size: 14px; }
  .lite .notfor { margin-top: 12px; padding: 16px 22px; }
  .why-grid { margin-top: 20px; }
  .why-card { padding: 20px; gap: 9px; }
  .why-card p { font-size: 14px; }
  .review { padding: 18px; gap: 14px; }
  .review blockquote { font-size: 14px; line-height: 1.5; }
  .reviews-row { padding-block: 20px 20px; }
  .faq summary { padding-block: 13px; font-size: 16px; }
}
/* Portrait : la photo entière, sans recadrage */
.slot.portrait { aspect-ratio: 548 / 840; }
@media (max-width: 899px) { .about > .slot.portrait { max-width: 320px; } }


/* =========================================================
   Motion (13/10) : arrivées en cascade, avis qui glissent, portrait qui se dévoile
   ========================================================= */
.js [data-stagger] > * { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: calc(var(--i, 0) * 95ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }
/* Avis : les cartes arrivent en glissant depuis la droite */
.js [data-stagger="slide"] > * { transform: translateX(70px) rotate(1.5deg); transition-duration: .85s; transition-delay: calc(var(--i, 0) * 110ms); }
/* Prix : les deux forfaits arrivent chacun de leur côté */
@media (min-width: 900px) {
  .js [data-stagger="sides"] > :first-child { transform: translateX(-46px); }
  .js [data-stagger="sides"] > :last-child { transform: translateX(46px); }
}
/* FAQ : cascade courte et discrète */
.js [data-stagger="soft"] > * { transform: translateY(14px); transition-duration: .5s; transition-delay: calc(var(--i, 0) * 45ms); }
/* Portrait : la photo se dévoile de bas en haut, avec un léger zoom arrière */
.js [data-unveil] { clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1.1s var(--ease); }
.js [data-unveil].in { clip-path: inset(0 round 14px); }
.js [data-unveil] img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js [data-unveil].in img { transform: none; }
/* Sections foncées : le halo violet dérive lentement (ordinateur) */
@media (min-width: 900px) { .dark.screen:not(.closing)::before { animation: drift 12s ease-in-out infinite alternate; } }

/* Icônes de « Ում համար է » (13/10) : trait noir, un seul accent violet, elles se dessinent à l'arrivée */
.personas b::before { content: none; }
.personas .ico { display: block; width: 54px; height: 54px; margin: 0 0 18px -6px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.personas .ico .a { fill: var(--violet); stroke: var(--violet); transform-box: fill-box; transform-origin: center; }
.js .personas .ico .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i, 0) * 110ms + .3s); }
.js .personas .ico .a { opacity: 0; transform: scale(.3); transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 110ms + 1s); }
.js .personas.seen .ico .d { stroke-dashoffset: 0; }
.js .personas.seen .ico .a { opacity: 1; transform: none; }
.js .personas.seen li:hover .ico .a { transform: scale(1.12); transition-delay: 0s; }
@media (max-width: 767px) {
  .personas li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: center; }
  .personas .ico { width: 46px; height: 46px; margin: 0 0 0 -5px; }
  .personas p { grid-column: 1 / -1; }
}
@media (min-width: 1000px) and (max-height: 840px) { .personas .ico { width: 42px; height: 42px; margin: 0 0 10px -5px; } }
/* L'ombre des avis ne doit pas être coupée par la rangée défilante (on voyait une bande) */
.reviews-row { padding-bottom: 70px; margin-bottom: -40px; }
@media (min-width: 1000px) and (min-height: 700px) and (max-height: 840px) { .reviews-row { padding-bottom: 70px; margin-bottom: -50px; } }

/* Motion (13/10, suite) : compteurs, numéros qui roulent, icônes vivantes */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.about-stats b.pop { animation: stat-pop .5s var(--ease); }
@keyframes stat-pop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.about-stats b { transform-origin: left center; }

.odo { display: inline-flex; }
.odo-col { display: block; height: 1em; overflow: hidden; }
.odo-strip { display: block; transform: translateY(0); transition: transform 1.15s cubic-bezier(.2, .9, .25, 1.06); transition-delay: calc(var(--i, 0) * 110ms + var(--d, 0) * 130ms + .3s); }
.odo-strip i { display: block; height: 1em; line-height: 1; font-style: normal; }
.seen .odo-strip { transform: translateY(-75%); }
.phase .when b, .why-card .num { display: inline-block; transition: transform .45s var(--ease); }
@media (hover: hover) {
  .phase:hover .when b, .why-card:hover .num { transform: translateY(-4px) scale(1.06); }
  .personas .ico { transition: transform .45s var(--ease); }
  .personas li:hover .ico { transform: translateY(-3px) rotate(-5deg); }
}

.personas .ico .orbit { transform-box: view-box; transform-origin: 24px 24px; }
.personas .ico .leaf { transform-origin: 0% 100%; }
.personas .ico .door { transform-origin: 50% 100%; }
.personas .ico .heart { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .personas.seen.live .ico .a { animation: ico-pulse 2.6s ease-in-out 2.4s infinite; }
  .personas.seen.live .ico .heart { animation: ico-heart 2.6s ease-in-out 2.4s infinite; }
  .personas.seen.live .ico .door { animation: ico-door 3.2s ease-in-out 2.4s infinite; }
  .personas.seen.live .ico .leaf { animation: ico-leaf 3.4s ease-in-out 2.4s infinite; }
  .personas.seen.live .ico .orbit { animation: ico-orbit 18s linear 2.4s infinite; }
}
@keyframes ico-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes ico-heart { 0%, 100% { transform: translateY(0) scale(1); } 18% { transform: translateY(-3px) scale(1.2); } 36% { transform: translateY(-1px) scale(1); } 54% { transform: translateY(-3px) scale(1.14); } 75% { transform: translateY(0) scale(1); } }
@keyframes ico-door { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes ico-leaf { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } }
@keyframes ico-orbit { to { transform: rotate(360deg); } }
/* Résultats (ordinateur) : titre et les 3 cartes centrés dans l'écran */
@media (min-width: 900px) {
  #result > .wrap { text-align: center; }
  #result .h2, #result .kicker { max-width: none; margin-inline: auto; text-align: center; justify-content: center; }
  .lite .results { margin-inline: auto; }
}