:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} body{margin:0} img{max-width:100%}

/* Layout: charte TwinTalk (noir & blanc, Hanken Grotesk titres et texte). Hero noir = studio avec la VSL, puis défilement clair : cheminement → services → galerie → tunnel → ROI → pricing → agenda.
   Variante REC (#rec) : un seul rouge "enregistrement" remplace l'accent noir. */
:root {
  --bg: #FFFFFF;
  --surface: #F4F4F4;
  --ink: #000000;
  --muted: #5C5C5C;
  --line: #DCDCDC;
  --accent: #000000;
  --on-accent: #FFFFFF;
  --stage: #000000;
  --stage-2: #141414;
  --stage-fg: #FFFFFF;
  --stage-muted: #A3A3A3;
  --stage-line: #2B2B2B;
  --stage-accent: #FFFFFF;
  --logo-dot: #D92B20;
  --on-stage-accent: #000000;
  --bar-1: #D0D0D0;
  --bar-2: #575757;
  --bar-3: #111111;
  --bar-3-range: #BDBDBD;
  --f-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hl-bg: #000000;
  --hl-fg: #FFFFFF;
  --hl-muted: #A3A3A3;
  --fs-label: 0.75rem;
  --wrap: 1120px;
  --r: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--stage); }
a { color: inherit; }
/* Barre de défilement de la page : fine, rouge REC, sans flèches. Chrome / Edge / Safari via ::-webkit-scrollbar, Firefox via scrollbar-color. */
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--logo-dot); border-radius: 999px; }
html::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: var(--logo-dot) transparent; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.stage :focus-visible { outline-color: var(--stage-accent); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 5vw, 3.3rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0; }
.eyebrow { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.stage .eyebrow::before, .agenda-band .eyebrow::before { background: var(--stage-accent); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 58ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 90; padding: 12px 18px; border-radius: 999px; background: var(--stage-fg); color: var(--stage); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* Logo officiel */
.logo { display: inline-block; color: inherit; line-height: 0; }
.logo svg { width: 46px; height: 46px; display: block; }
.logo-dot { fill: var(--logo-dot); }
:root:not(.rec) .logo-dot { fill: currentColor; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 500 1rem/1 var(--f-body); padding: 16px 22px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-cta { background: var(--accent); color: var(--on-accent); }
.stage .btn-cta, .agenda-band .btn-cta, .top .btn-cta, .sticky-cta .btn-cta { background: var(--stage-accent); color: var(--on-stage-accent); }
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rec .btn-cta .dot { animation: blink 1.6s steps(1) infinite; }
.btn-ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stage .btn-ghost:hover { background: var(--stage-fg); color: var(--stage); border-color: var(--stage-fg); }

/* Réseaux */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.soc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; color: inherit; transition: background-color .2s, color .2s, transform .2s; }
.soc svg { width: 20px; height: 20px; fill: currentColor; }
.soc:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.stage .soc:hover, footer .soc:hover { background: var(--stage-fg); color: var(--stage); border-color: var(--stage-fg); }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--stage) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--stage-fg); border-bottom: 1px solid var(--stage-line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; transition: padding .25s ease; }
.top.compact .wrap { padding-block: 8px; }
.top.compact .logo svg { width: 38px; height: 38px; }
.logo svg { transition: width .25s ease, height .25s ease; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand .desc { border-left: 1px solid var(--stage-line); padding-left: 14px; font-size: var(--fs-label); line-height: 1.25; color: var(--stage-muted); }
@media (max-width: 520px) { .brand .desc { display: none; } }
.nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); font-size: 0.95rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--stage-muted); transition: color .2s; }
.nav a:not(.btn):hover { color: var(--stage-fg); }
.nav .btn { padding: 11px 16px; font-size: 0.9rem; white-space: nowrap; }
/* ordinateur : .nav-menu ne crée pas de boîte, ses éléments restent dans la barre (liens, CTA, mode, langue) */
.nav-menu { display: contents; }
.nav .btn-cta { order: 1; transition: opacity .25s ease, visibility .25s ease, transform .2s ease, background-color .2s ease, color .2s ease; }
/* un autre bouton « rendez-vous » est à l'écran : celui de la barre s'efface (sa place reste réservée, la barre ne bouge pas) */
.top.cta-off .nav .btn-cta { opacity: 0; visibility: hidden; pointer-events: none; }
/* mobile : idem tant que la barre « rendez-vous » fixée en bas de l'écran est affichée (elle n'existe qu'en dessous de 761px),
   et le bouton de la carte catalogue disparaît */
@media (max-width: 760px) { .sticky-on .top .nav .btn-cta { opacity: 0; visibility: hidden; pointer-events: none; } .sticky-on .cat-actions { display: none; } }
.nav .mode-btn, .nav .lang { order: 2; }
.burger { display: none; order: 3; }
/* responsive : logo, CTA et burger ; le reste passe dans un panneau sous la barre */
@media (max-width: 820px) {
  .nav { gap: 12px; }
  .burger { display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--stage-line); border-radius: 50%; background: transparent; color: var(--stage-fg); cursor: pointer; }
  .burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 12px; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); background: var(--stage); border-bottom: 1px solid var(--stage-line); }
  .nav-menu.open { display: grid; }
  .nav-menu a:not(.lang) { grid-column: 1 / -1; text-align: right; padding: 14px 0; border-bottom: 1px solid var(--stage-line); font-size: 1.05rem; color: var(--stage-fg); }
  /* panneau aligné à droite ; mode et langue en toutes lettres (« Mode clair », « English ») */
  .nav-menu .mode-btn, .nav-menu .lang { margin-top: 16px; }
  .nav-menu .mode-btn { grid-column: 2; width: auto; height: 44px; padding: 0 16px; border-radius: 999px; font: 500 0.8rem/1 var(--f-body); letter-spacing: .1em; }
  .nav-menu .mode-btn svg, .nav-menu .lang-short { display: none !important; }
  .nav-menu .mode-txt, .nav-menu .lang-full { display: inline; }
  .nav-menu .lang { grid-column: 3; padding-inline: 16px; }
  .lang { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
}

/* Hero : deux colonnes (texte à gauche, carte vidéo à droite), halo discret de l'accent en haut à droite */
.stage { background: radial-gradient(circle at 80% 26%, color-mix(in srgb, var(--stage-accent) 7%, transparent), transparent 28rem), var(--stage); color: var(--stage-fg); position: relative; overflow: hidden; }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px clamp(48px, 8vw, 120px); align-items: center; min-height: calc(100vh - 75px); padding-block: 54px 72px; }
.hero .eyebrow { margin-bottom: 24px; gap: 9px; color: var(--stage-accent); font-size: var(--fs-label); font-weight: 700; letter-spacing: .13em; }
.hero .eyebrow::before { width: 7px; height: 7px; background: var(--stage-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage-accent) 13%, transparent); }
.hero h1 .eyebrow { display: flex; width: fit-content; font-family: var(--f-body); line-height: 1.6; }
.hero h1 { --h1: clamp(48px, 6vw, 87px); max-width: 640px; font-size: var(--h1); line-height: .97; letter-spacing: -0.065em; }
/* EN : « creates, posts » est plus long que « crée, publie ». La taille suit la largeur de la colonne (17.5cqi : « and prospects », le plus long, fait 5,59 em)
   pour que le titre reste sur deux lignes blanches et deux lignes rouges. */
.hero-copy { container-type: inline-size; }
:root[lang="en"] .hero h1 { font-size: min(var(--h1), 17.5cqi); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.06em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--stage-muted); }
.rec .hero h1 em { color: var(--stage-accent); }
.hero .sub { max-width: 430px; margin-top: 31px; color: var(--stage-muted); font-size: 0.95rem; line-height: 1.65; }
.hero .sub strong { color: var(--stage-fg); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 34px; }
/* CTA du hero : le plus visible de la page ; les deux boutons passent l'un sous l'autre sur petit écran */
.hero-actions .btn { white-space: nowrap; padding: 17px 26px; font-size: 1rem; }
.hero-actions .btn-cta { font-weight: 700; }
.hero-actions .btn-cta:hover { transform: translateY(-3px); }
/* bouton secondaire : contour de la couleur du texte du hero (blanc en mode nuit, noir en mode jour), même gabarit que le CTA */
.hero-actions .btn-ghost { font-weight: 700; border-color: var(--stage-fg); color: var(--stage-fg); }
.hero-actions .btn-ghost:hover { transform: translateY(-3px); }
/* Pour qui : dans le hero, sur toute la largeur sous les deux colonnes, centré */
.hero > .forwho { grid-column: 1 / -1; justify-items: center; gap: 16px; padding-top: 0; border-top: 0; text-align: center; }
.hero > .forwho p { max-width: 46ch; font-size: 1rem; line-height: 1.5; }
.hero > .forwho .chips { justify-content: center; }
.hero > .forwho .chips span { padding: 5px 12px; font-size: 0.75rem; }
.hero-visual { min-width: 0; transform: translateY(15px); }

/* VSL : carte en 16:9 (image et vidéo), image en niveaux de gris qui reprend sa couleur au survol */
.vsl { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--stage-2); overflow: hidden; }
.vsl iframe, .vsl video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* VSL verticale (9:16) fournie avec le thème : hauteur limitée à l'écran, centrée dans la colonne */
.vsl.vsl-v, .vsl.vsl-v:has(video) { aspect-ratio: 9 / 16; width: auto; height: min(78vh, 680px); max-width: 100%; margin-inline: auto; background: #000; }
.vsl.vsl-v video { object-fit: contain; background: #000; }
.vsl-ph { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--stage-2); color: #fff; font: inherit; }
.vsl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .6s ease, filter .6s ease; }
.vsl-ph:disabled { cursor: default; }
.vsl-ph:disabled .play { display: none; }
.vsl-ph:hover .vsl-poster, .vsl-ph:focus-visible .vsl-poster { transform: scale(1.04); filter: grayscale(.3) contrast(1.05); }
.vsl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 40%, rgba(0,0,0,.62)); }
.vsl-ph .play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--stage-accent); transform: translate(-50%, -50%); transition: transform .3s ease, background-color .3s ease; }
.vsl-ph:hover .play, .vsl-ph:focus-visible .play { transform: translate(-50%, -50%) scale(1.12); background: color-mix(in srgb, var(--stage-accent) 88%, #fff); }
.vsl-ph .play svg { width: 20px; margin-left: 3px; fill: var(--on-stage-accent); }
@keyframes blink { 50% { opacity: .15; } }

/* Ticker : bandeau en capitales espacées, séparateurs ✦ dans l'accent */
.ticker { position: relative; z-index: 1; border-top: 1px solid var(--stage-line); border-bottom: 1px solid var(--stage-line); overflow: hidden; padding-block: 17px; }
.ticker-track { display: flex; align-items: center; gap: 38px; width: max-content; animation: slide 24s linear infinite; font-size: 0.7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--stage-muted); }
.ticker-track span { display: inline-flex; align-items: center; gap: 38px; white-space: nowrap; }
.ticker-track span::after { content: "✦"; color: var(--stage-accent); font-size: 1rem; letter-spacing: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Hero responsive */
@media (max-width: 820px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 48px; min-height: auto; padding-top: 70px; }
  .hero h1 { --h1: clamp(49px, 14vw, 82px); }
  .hero-visual { transform: none; }
}
@media (max-width: 480px) {
  .hero { padding-top: 54px; }
}

/* Sections */
section.block { padding-block: clamp(64px, 10vw, 116px); }
.head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }

/* Cheminement : suit le thème jour / nuit de la page (variables --bg, --ink, --muted, --line, --accent) ; timeline horizontale en 6 étapes (verticale sous 820px) */
section.process { padding-block: 112px 130px; }
.process-intro { max-width: 720px; margin: 0 auto 68px; text-align: center; }
.process .eyebrow { margin-bottom: 22px; }
.process h2 { color: var(--ink); font-size: clamp(40px, 4.2vw, 61px); line-height: .98; letter-spacing: -0.065em; transition: color .25s ease; }
.process h2 em { font-style: normal; color: var(--accent); transition: color .25s ease; }
.agenda-band h2 em { font-style: normal; color: var(--stage-muted); }
.rec .agenda-band h2 em { color: var(--stage-accent); }
.process-summary { max-width: none; margin: 20px auto 0; color: var(--muted); font-size: 1rem; line-height: 1.5; text-wrap: balance; transition: color .25s ease; }
/* ordinateur : la section reste épinglée à l'écran pendant --pin px de défilement ; chaque tranche de --pin / 6 allume l'étape suivante (main.js, updateTimeline) */
@media (min-width: 821px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .js section.process { --pin: 720px; height: calc(100vh + var(--pin)); padding-block: 0; }
  .js .process > .wrap { position: sticky; top: 0; height: 100vh; padding-top: 64px; display: flex; flex-direction: column; justify-content: center; }
  .js .process .timeline { width: 100%; }
}
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0 auto; padding: 28px 0 0; list-style: none; }
/* sans --end (pas de JS) : 5 colonnes + 5 gouttières de 14px = centre de la pastille 06 */
.timeline::before, .timeline::after { content: ""; position: absolute; top: 45px; left: 17px; right: auto; width: var(--end, calc((100% - 70px) * 5 / 6 + 70px)); height: 1px; }
.timeline::before { background: var(--line); }
/* filet de progression : du centre de la pastille 01 à celui de la 06 (--end, mesuré par main.js), rempli selon --p (0 → 1) */
.timeline::after { background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .15s linear; }
.timeline-item { position: relative; display: flex; flex-direction: column; gap: 15px; }
.step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease; }
.timeline-item.on .step-number { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
/* sans JavaScript : état statique de la référence */
html:not(.js) .timeline-item.is-active .step-number { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
html:not(.js) .timeline::after { transform: scaleX(1); }
.timeline-item:hover .step-number { transform: scale(1.13); }
.timeline h3 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; transition: color .25s ease; }
.timeline-item:hover h3 { color: var(--accent); }
.timeline h3 { min-height: 2.8em; } /* titres sur 2 lignes : descriptions alignées */
.timeline p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-wrap: balance; }
/* titre de la 06 grisé tant qu'elle est éteinte */
.js .timeline-item:last-child:not(.on):not(:hover) h3 { color: var(--muted); }
@media (max-width: 820px) {
  section.process { padding-block: 82px 100px; }
  .process-intro { margin-bottom: 54px; }
  .timeline { display: block; padding: 0 0 0 6px; }
  .timeline::before, .timeline::after { top: 17px; bottom: auto; left: 23px; right: auto; width: 1px; height: var(--end, 0px); }
  .timeline::after { transform-origin: top; transform: scaleY(var(--p, 0)); }
  html:not(.js) .timeline::before, html:not(.js) .timeline::after { bottom: 25px; height: auto; }
  html:not(.js) .timeline::after { transform: scaleY(1); }
  .timeline h3 { min-height: 0; }
  .timeline h3 br { display: none; }
  .timeline-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 17px; min-height: 82px; padding-bottom: 20px; }
}
@media (max-width: 480px) {
  section.process { padding-top: 72px; }
}

/* Services */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 900px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cap { padding: 28px 24px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; transition: background-color .25s ease; }
.cap:hover { background: var(--bg); }
.cap .k { font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cap p { color: var(--muted); font-size: 0.98rem; }
.cap .glyph { width: 38px; height: 38px; color: var(--accent); transition: transform .35s ease; }
.cap:hover .glyph { transform: translateY(-3px) rotate(-4deg); }

/* Galerie Twin */
#galerie { padding-block: clamp(68px, 9vw, 104px) clamp(72px, 9.5vw, 112px); }

.gal-head, .avis-head { text-align: center; margin-bottom: clamp(36px, 5vw, 48px); }
.gal-head .eyebrow, .avis-head .eyebrow { margin-bottom: 22px; }
.gal-head h2, .avis-head h2 { max-width: 1000px; margin-inline: auto; font-size: clamp(38px, 5.4vw, 72px); line-height: .96; letter-spacing: -.065em; }
.gal-head .lead, .avis-head .lead { max-width: 610px; margin: 22px auto 0; font-size: 16px; line-height: 1.55; }

/* Piste : carte active centrée, voisines entières, et un bout de carte visible de chaque côté pour signaler le défilement.
   --tw-w = largeur d'une carte ; le padding latéral permet de centrer aussi la première et la dernière. */
#galerie .wrap { container-type: inline-size; }
.gallery { --tw-w: calc((100cqi - 64px) / 4); display: grid; grid-auto-flow: column; grid-auto-columns: var(--tw-w); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc((100cqi - var(--tw-w)) / 2); }
.gallery::-webkit-scrollbar { display: none; }

/* Carte (le HTML est généré par main.js) ; les textes posés sur les photos restent blancs : ils sont sur un dégradé sombre dans les deux thèmes */
.tw { scroll-snap-align: center; position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--surface); color: #fff; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.tw img, .tw video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.04); transition: transform .6s ease, filter .6s ease; }
.tw:hover img, .tw:hover video { transform: scale(1.06); filter: saturate(1) contrast(1.04); }
/* vidéo lue dans la carte : même cadre 9:16 que la vignette */
.tw-live { cursor: auto; background: #000; }
.tw-live video, .tw-live:hover video, .tw-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; filter: none; transform: none; }
/* fin de la vidéo : bouton « Revoir » au centre */
.tw-replay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--stage-accent); color: var(--on-stage-accent); font: inherit; font-weight: 700; cursor: pointer; }
.tw .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.24), transparent 38%, rgba(0,0,0,.82) 100%); }
.tw-rec { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; color: #fff; background: rgba(16,16,16,.7); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.tw-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-accent); }
.tw .mini-play { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tw .mini-play svg { width: 12px; fill: #fff; margin-left: 2px; }
.tw .meta { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 6px; }
.tw .meta b { font-family: var(--f-display); font-size: 15px; line-height: 1.2; }
.tw .meta span { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #c1bdb8; }

/* Navigation : flèches + points (générés par main.js) */
.gal-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 28px; }
.gal-nav[hidden] { display: none; }
.gal-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 50%; background: transparent; color: var(--ink); font-size: 19px; cursor: pointer; transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .25s ease; }
.gal-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gal-arrow:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); transform: translateY(-3px); }
.gal-dots { display: flex; align-items: center; gap: 2px; }
.gal-dot { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.gal-dot::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--muted); border-radius: 50%; transition: width .3s ease, height .3s ease, border-color .3s ease, background-color .3s ease; }
.gal-dot.is-active::before { width: 24px; height: 5px; border-color: var(--accent); border-radius: 999px; background: var(--accent); }

/* Pied */
.gal-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; }
.gal-foot p { color: var(--muted); font-size: 0.95rem; }
#galerie .soc { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); background: transparent; transition: border-color .25s ease, color .25s ease, transform .25s ease; }
#galerie .soc:hover { border-color: var(--accent); color: var(--accent); background: transparent; transform: translateY(-3px); }

@media (max-width: 820px) {
  #galerie { padding-block: 82px 88px; }
  .gallery { --tw-w: 220px; }
  .gal-nav { gap: 22px; }
  .gal-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 480px) {
  #galerie { padding-block: 68px 72px; }
  .gal-head h2, .avis-head h2 { font-size: 43px; }
  .gal-head .lead, .avis-head .lead { font-size: 14px; }
  .gallery { --tw-w: 70cqi; }
  .gal-nav { gap: 16px; }
  .gal-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tw img, .tw video { transition: none; } .tw:hover img, .tw:hover video { transform: none; } }

/* Lightbox */
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; background: rgba(0,0,0,.88); place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb-box { position: relative; height: min(86vh, 760px); aspect-ratio: 9 / 16; max-width: 100%; background: #000; border-radius: var(--r); overflow: hidden; }
.lb[open] { display: grid; }
.lb::backdrop { background: transparent; }
.lb-box iframe, .lb-box video, .lb-box img { width: 100%; height: 100%; border: 0; display: block; }
.lb-box img { object-fit: cover; }
.lb-close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #fff; background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; }

/* Tunnel : trois cartes Attirer → Convaincre → Convertir ; la dernière (objectif) est teintée de l'accent */
.stage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899px) { .stage-cards { grid-template-columns: minmax(0, 1fr); } }
.stage-card { --card: var(--bg); position: relative; display: flex; flex-direction: column; min-height: 256px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
html:root[data-mode="dark"] .stage-card { --card: color-mix(in srgb, var(--ink) 7%, var(--surface)); background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--ink) 2%, var(--surface))); }
html:root[data-mode="dark"] .stage-card.is-goal { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--card)), color-mix(in srgb, var(--accent) 4%, var(--card))); }
.stage-card::after { content: ""; position: absolute; right: 24px; bottom: 24px; width: 30px; height: 1px; background: var(--muted); opacity: .6; }
.stage-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 52px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.stage-card .n { color: var(--accent); }
.stage-card .tag { color: var(--muted); }
.stage-card h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 14px; }
.stage-card p { max-width: 38ch; color: var(--muted); font-size: 0.95rem; line-height: 1.6; padding-bottom: 32px; }
.stage-card.is-goal { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--card)), color-mix(in srgb, var(--accent) 3%, var(--card))); }
.stage-card.is-goal .n { color: var(--ink); }
@media (max-width: 899px) { .stage-card { min-height: 0; } .stage-card-top { margin-bottom: 32px; } }
.note { font-size: 0.85rem; color: var(--muted); margin-top: 28px; max-width: 72ch; }
.rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; margin-top: clamp(48px, 7vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }
.rights div { display: grid; gap: 4px; }
.rights b { font-family: var(--f-display); font-size: 1.02rem; }
.rights span { color: var(--muted); font-size: 0.95rem; }

/* ROI */
.roi { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: end; }
@media (min-width: 900px) { .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.invest { display: grid; gap: 18px; }
.inv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: baseline; }
.inv-row .v { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.inv-row b { display: block; font-weight: 500; }
.inv-row span { color: var(--muted); font-size: 0.92rem; }
.plus { font-size: 1.4rem; color: var(--muted); line-height: 1; }
.total { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 4px; }
.total .v { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; }
.total span { color: var(--muted); font-size: 0.92rem; }
.chart { display: grid; gap: 10px; }
.chart .lbl { font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: 300px; align-items: end; border-bottom: 2px solid var(--ink); }
.col { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; }
.col .x { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1; white-space: nowrap; }
.col .b { flex: none; height: var(--h); display: grid; grid-template-rows: var(--r1, 0fr) var(--r2, 1fr); transform-origin: bottom; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.col .b i { display: block; }
.col:nth-child(1) .b i:last-child { background: var(--bar-1); }
.col:nth-child(2) .b i:last-child { background: var(--bar-2); }
.col:nth-child(3) .b i:first-child { background: var(--bar-3-range); }
.col:nth-child(3) .b i:last-child { background: var(--bar-3); }
.js .roi:not(.in) .col .b { transform: scaleY(.08); }
.col:nth-child(2) .b { transition-delay: .15s; }
.col:nth-child(3) .b { transition-delay: .3s; }
.cols-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; font-weight: 500; font-size: 0.92rem; }
.pill { margin-top: clamp(32px, 5vw, 48px); display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }
.pill::before { content: "✓"; flex: none; color: var(--accent); font-size: 1.2rem; line-height: 1; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.plan { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; display: grid; gap: 14px; align-content: start; position: relative; transition: transform .3s ease, border-color .3s ease; }
.plan:hover { transform: translateY(-4px); border-color: var(--ink); }
.plan.hl { background: var(--hl-bg); color: var(--hl-fg); border-color: var(--hl-bg); }
.plan.hl .plan-desc, .plan.hl li, .plan.hl .amount small { color: var(--hl-muted); }
.plan .tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plan.hl .tag { color: var(--hl-fg); }
.rec .plan.hl .tag { color: var(--stage-accent); }
.amount { font-family: var(--f-display); font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.amount small { font-family: var(--f-body); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.plan-desc { color: var(--muted); font-size: 0.95rem; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 0.93rem; color: var(--muted); }
.plan li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.plan li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 0.62em; }
.plan.hl li::before { background: var(--hl-fg); }
.rec .plan.hl li::before { background: var(--accent); }
.extras { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 0.92rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--bg); color: var(--ink); font-size: 0.85rem; }
.cat { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r); padding: 24px; }
/* .cat-copy s'efface : titre, texte, formulaire et mentions deviennent des lignes de .cat, et le bouton RDV se cale sur la ligne du formulaire */
.cat { row-gap: 6px; }
.cat-copy { display: contents; }
.cat-actions { margin-top: 14px; }
@media (min-width: 760px) {
  .cat { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-copy > * { grid-column: 1; }
  .cat-actions { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; }
}
.cat-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-sub { color: var(--muted); font-size: 0.95rem; }
.mail { font-size: 0.95rem; }
.mail a { font-weight: 500; text-underline-offset: 3px; }

/* Pour qui */
.forwho { display: grid; gap: 12px; padding-top: 6px; border-top: 1px solid var(--stage-line); }
.forwho p { color: var(--stage-fg); font-size: 1rem; }
.forwho .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.forwho .chips span { border: 1px solid var(--stage-line); color: var(--stage-muted); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; }
/* Lang */
.lang { font-size: 0.8rem; font-weight: 500; letter-spacing: .1em; border: 1px solid var(--stage-line); border-radius: 999px; padding: 6px 10px; text-decoration: none; color: var(--stage-muted); }
.lang:hover { color: var(--stage-fg); border-color: var(--stage-fg); }
/* Vrai ou double */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 620px; }
.vs-card { position: relative; aspect-ratio: 9 / 16; max-width: 100%; border-radius: var(--r); overflow: hidden; background: repeating-linear-gradient(135deg, var(--stage-2) 0 14px, #1B1B1B 14px 28px); color: #fff; display: grid; place-items: center; }
.vs-card img, .vs-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs-card .letter { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.7); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; }
.vs-card .who { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; background: rgba(0,0,0,.75); border-radius: 999px; padding: 8px 12px; font-size: 0.85rem; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.vs-card .who.twin { background: var(--stage-accent); color: var(--on-stage-accent); }
.vs.revealed .who { opacity: 1; transform: none; }
/* cartes cliquables : le visiteur choisit celle qu'il croit vraie */
button.vs-card { width: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.vs:not(.revealed) .vs-card:hover { transform: translateY(-4px); }
.vs-card:focus-visible { outline: 3px solid var(--stage-accent); outline-offset: 3px; }
.vs.revealed .vs-card { cursor: default; }
.vs-card.picked { box-shadow: 0 0 0 3px var(--stage-fg); }
.vs-pick { margin: 0; font-weight: 700; }
.vs-result { margin: 0; font-weight: 700; }
.vs-result:empty { display: none; }
.vs-result.right { color: var(--stage-accent); }
.vs-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .vs-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vs-copy { display: grid; gap: 18px; justify-items: start; }
.vs-copy blockquote { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
/* mobile/tablette : titre et textes au-dessus des cartes, bouton en dessous */
@media (max-width: 899px) {
  .vs-wrap { gap: 18px; }
  .vs-copy { display: contents; }
  .vs-copy > * { justify-self: start; }
  .vs { order: 1; width: 100%; margin: 14px auto; }
  .vs-copy .btn, .vs-result { order: 2; }
}
/* Témoignages */
/* piste horizontale : 3 témoignages visibles (2 sur tablette, 1 sur mobile), défilement automatique en boucle + flèches latérales gérés par main.js */
/* comme la galerie : témoignage actif centré, un bout de carte visible de chaque côté ; --q-w = largeur d'une carte */
.quotes-carousel { position: relative; container-type: inline-size; }
.quotes { --q-w: calc((100cqi - 64px) / 3.5); display: grid; grid-auto-flow: column; grid-auto-columns: var(--q-w); grid-template-rows: repeat(3, auto); gap: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc((100cqi - var(--q-w)) / 2); }
.quotes::-webkit-scrollbar { display: none; }
.quotes.auto { scroll-snap-type: none; }
.quotes.no-res { grid-template-rows: repeat(2, auto); }
.no-res .quote { grid-row: span 2; }
/* résultat, texte et identité sur trois lignes partagées par toutes les cartes (subgrid) : ils restent alignés d'une carte à l'autre,
   l'espace en trop reste sous les textes courts */
.quote { margin: 0; scroll-snap-align: center; border: 1px dashed var(--line); border-radius: var(--r); padding: 26px 24px; display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 16px; align-content: start; background: var(--bg); }
.q-arrow { position: absolute; top: 50%; z-index: 2; background: var(--bg); transform: translateY(-50%); }
.q-arrow:hover { transform: translateY(-50%); }
.gal-arrow:disabled { opacity: .3; pointer-events: none; }
.q-prev { left: -72px; }
.q-next { right: -72px; }
/* sous 1280px, plus de place hors du conteneur : marge latérale pour poser les flèches sans masquer le texte des cartes */
@media (max-width: 1279px) { .quotes-carousel { padding-inline: 32px; } .q-prev { left: 0; } .q-next { right: 0; } }
@media (max-width: 1023px) { .quotes { --q-w: calc((100cqi - 32px) / 2); } }
@media (max-width: 640px) { .quotes-carousel { padding-inline: 0; } .quotes { --q-w: 76cqi; } .q-arrow { width: 40px; height: 40px; } .q-arrow svg { width: 18px; height: 18px; } }
.quote p { font-size: 1.05rem; }
.quote .res { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; }
.quote .id { display: flex; align-items: center; gap: 12px; }
.quote .av { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.quote .id b { display: block; font-weight: 500; }
.quote .id span { color: var(--muted); font-size: 0.88rem; }
/* Pilot : socle obligatoire, posé au-dessus des trois formules */
.pilot { background: var(--bg); border: 1.5px dashed var(--ink); border-radius: var(--r); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; align-items: center; }
@media (min-width: 860px) { .pilot { grid-template-columns: minmax(0, 1fr) auto; } }
.pilot-copy { display: grid; gap: 6px; min-width: 0; }
.pilot h3 small { font-family: var(--f-body); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: var(--muted); }
.pilot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 0.93rem; }
.pilot li::before { content: "✓ "; color: var(--ink); font-weight: 700; }
/* mode sombre : bouton du pilote sur fond blanc, même avec l'accent rouge */
html:root[data-mode="dark"] .pilot .btn-cta { background: #FFFFFF; color: #000000; }
.then { display: flex; align-items: center; gap: 12px; margin: 26px 0 30px; color: var(--muted); font-size: 0.95rem; }
.then::before, .then::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Trois formules : Présence au centre, plus haute, alignées par le bas */
@media (min-width: 860px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } .price-grid .plan.hl { padding-block: 44px 26px; } }
.plan .btn { width: 100%; margin-top: 6px; }
.plan.hl .btn-cta { background: var(--hl-fg); color: var(--hl-bg); }
.plan.hl .reco { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }
.plan .reco { position: absolute; top: -12px; right: 18px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
/* Catalogue contre email */
.cat-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cat-form input { font: inherit; font-size: 1rem; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--muted); background: var(--bg); color: var(--ink); min-width: 0; flex: 1 1 220px; }
.cat-form input:focus { border-color: var(--ink); }
/* « Recevoir le catalogue » et « Prendre rendez-vous » : même taille ; le champ email prend la même hauteur */
.cat-form input, .cat .btn { height: 52px; }
.cat .btn { min-width: 230px; padding: 0 22px; }
@media (max-width: 759px) { .cat .btn, .cat-actions { width: 100%; } }
.cat-msg { font-size: 0.9rem; color: var(--muted); min-height: 1.4em; flex-basis: 100%; }
/* FAQ */
/* Les séparateurs prennent toute la largeur du conteneur, comme la carte catalogue au-dessus */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--accent); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }

/* Agenda */
.agenda-band { background: var(--stage); color: var(--stage-fg); }
.agenda-band .lead, .agenda-band .eyebrow { color: var(--stage-muted); }
.agenda { margin-top: 40px; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: var(--r); overflow: hidden; position: relative; }
.agenda iframe { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
.agenda .cal-inline { width: 100%; min-height: 560px; overflow: auto; }   /* Cal.com ajuste lui-même la hauteur */
.agenda .cal-inline iframe { height: auto; background: transparent; }
.agenda-ph { padding: 24px; display: grid; gap: 20px; }
.agenda-ph-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.agenda-ph-head b { font-family: var(--f-display); font-size: 1.15rem; }
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.day { display: grid; gap: 8px; align-content: start; }
.day .d { font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; color: var(--stage-muted); text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--stage-line); }
.slot { font: 500 0.82rem var(--f-body); font-variant-numeric: tabular-nums; text-align: center; padding: 10px 4px; border-radius: 8px; border: 1px solid var(--stage-line); color: var(--stage-fg); background: transparent; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.slot:hover { border-color: var(--stage-accent); background: var(--stage-accent); color: var(--on-stage-accent); }
.slot.gone { opacity: .3; text-decoration: line-through; cursor: default; pointer-events: none; }
.agenda-msg { font-size: 0.9rem; color: var(--stage-muted); min-height: 1.5em; }

footer { background: var(--stage); color: var(--stage-muted); border-top: 1px solid var(--stage-line); font-size: 0.88rem; }
footer .wrap { padding-block: 36px calc(36px + 72px); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
footer .logo { color: var(--stage-fg); }
footer a[href^="mailto:"] { text-underline-offset: 3px; }
footer a[href^="mailto:"]:hover { color: var(--stage-fg); }
footer .socials .soc { width: 40px; height: 40px; color: var(--stage-fg); }
@media (min-width: 761px) { footer .wrap { padding-block: 36px; } }
footer .cookie-link { background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
footer .cookie-link:hover { color: var(--stage-fg); }

/* Bandeau cookies : accepter et refuser ont le même poids visuel (exigence CNIL) */
.cookie { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--stage-line); background: var(--stage); color: var(--stage-fg); box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 0.88rem; line-height: 1.5; }
.cookie p { margin: 0; color: var(--stage-muted); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie .btn { flex: 1 1 140px; padding: 12px 16px; font-size: 0.85rem; font-weight: 700; background: transparent; border-color: var(--stage-fg); color: var(--stage-fg); }
.cookie .btn:hover { background: var(--stage-fg); color: var(--stage); }

/* CTA mobile */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--stage) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--stage-line); transform: translateY(110%); transition: transform .35s ease; }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 761px) { .sticky-cta { display: none; } }

/* Apparition au scroll : contenu toujours visible, il glisse seulement en place */
.js .rv { transform: translateY(26px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { transform: none; }
.js .hero h1 .line > span { transform: translateY(105%); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes rise { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .rv, .js .col .b, .js .hero h1 .line > span { transform: none !important; }
}

/* ===== Mode clair / sombre (bouton, data-mode posé dans le <head>) ===== */
html:root[data-mode="dark"] {
  --bg: #0B0B0B; --surface: #161616; --ink: #F2F2F2; --muted: #A3A3A3; --line: #2A2A2A;
  --accent: #F2F2F2; --on-accent: #000000;
  --stage: #000000; --stage-2: #141414; --stage-fg: #FFFFFF; --stage-muted: #A3A3A3; --stage-line: #2B2B2B;
  --stage-accent: #FFFFFF; --on-stage-accent: #000000;
  --bar-1: #3A3A3A; --bar-2: #8A8A8A; --bar-3: #F2F2F2; --bar-3-range: #5A5A5A;
  --hl-bg: #F2F2F2; --hl-fg: #000000; --hl-muted: #4A4A4A;
  color-scheme: dark;
}
html:root[data-mode="light"] {
  --bg: #FFFFFF; --surface: #F4F4F4; --ink: #000000; --muted: #5C5C5C; --line: #DCDCDC;
  --accent: #000000; --on-accent: #FFFFFF;
  --stage: #FFFFFF; --stage-2: #F4F4F4; --stage-fg: #000000; --stage-muted: #5C5C5C; --stage-line: #DCDCDC;
  --stage-accent: #000000; --on-stage-accent: #FFFFFF;
  --bar-1: #D0D0D0; --bar-2: #575757; --bar-3: #111111; --bar-3-range: #BDBDBD;
  --hl-bg: #000000; --hl-fg: #FFFFFF; --hl-muted: #A3A3A3;
  color-scheme: light;
}
html:root.rec[data-mode="dark"] { --accent: #FF4D42; --on-accent: #000000; --stage-accent: #FF4D42; --on-stage-accent: #000000; --bar-3-range: #FF4D42; }
html:root.rec[data-mode="light"] { --accent: #D92B20; --on-accent: #FFFFFF; --stage-accent: #D92B20; --on-stage-accent: #FFFFFF; --bar-3-range: #D92B20; }
html:root[data-mode="light"] .vsl-ph { background: var(--stage-2); }
html:root[data-mode="light"] .vs-card { background: repeating-linear-gradient(135deg, #1A1A1A 0 14px, #242424 14px 28px); }
.mode-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--stage-line); background: transparent; color: var(--stage-muted); display: grid; place-items: center; cursor: pointer; transition: color .2s, border-color .2s; padding: 0; }
.mode-btn:hover { color: var(--stage-fg); border-color: var(--stage-fg); }
.mode-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mode-btn .sun, .mode-txt, .lang-full { display: none; }
html:root[data-mode="dark"] .mode-btn .sun { display: block; }
html:root[data-mode="dark"] .mode-btn .moon { display: none; }

/* Pages légales (mentions légales, confidentialité) : même en-tête et pied de page que la landing, texte en colonne lisible */
.legal-doc { max-width: 760px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--muted); font-weight: 500; text-decoration: none; transition: color .2s ease; }
.legal-back:hover, .legal-back:focus-visible { color: var(--ink); }
.legal-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.legal-back:hover svg { transform: translateX(-3px); }
.legal-doc .legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal-doc h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -0.05em; }
.legal-doc .updated { margin-top: 16px; color: var(--muted); font-size: 0.95rem; }
.legal-doc .intro { margin-top: 28px; font-size: 1.08rem; }
.legal-doc h2 { margin-top: 44px; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.25; }
.legal-doc p, .legal-doc ul { margin: 12px 0 0; }
.legal-doc ul { padding-left: 1.2em; }
.legal-doc li + li { margin-top: 4px; }
.legal-doc a { text-underline-offset: 3px; }
.legal-doc dl { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 24px; margin: 16px 0 0; }
.legal-doc dt { color: var(--muted); }
.legal-doc dd { margin: 0; }
@media (max-width: 560px) { .legal-doc dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal-doc dd { margin-bottom: 10px; } }
/* information manquante, à remplacer avant la mise en ligne (grep « todo ») */
.legal-doc .todo { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); padding: 1px 6px; border-radius: 4px; font-weight: 500; }
/* pied de page : liens légaux + réglage des cookies */
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.foot-copy { flex-basis: 100%; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--stage-line); text-align: center; font-size: 0.8rem; }   /* copyright : dernière ligne, à part */
.foot-links a { color: inherit; text-underline-offset: 3px; }
.foot-links a:hover { color: var(--stage-fg); }
/* mention RGPD sous le formulaire catalogue */
.cat-legal { font-size: 0.8rem; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.cat-legal a { color: inherit; text-underline-offset: 3px; }
.cookie a { color: inherit; text-underline-offset: 3px; }

/* ===== WordPress ===== */
/* barre d'admin (visible seulement connecté) : l'en-tête collant passe dessous */
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }
@media (max-width: 600px) { .admin-bar .top { top: 0; } }