/* ==========================================================================
   JO — Design System v3 « Minimal Impact » (inspiration Apple, 2026)
   Base : blanc pur + noir profond. Accent : gradient électrique.
   Typographie géante, air massif, animations cinématiques.
   ========================================================================== */

:root {
  --blanc: #ffffff;
  --noir: #0a0a0c;
  --gris: #f5f5f7;          /* gris section Apple */
  --encre-doux: #6e6e73;    /* gris texte Apple */
  --accent-1: #ff5c2b;      /* orange électrique */
  --accent-2: #ff2d78;      /* rose punch */
  --accent-3: #7c3aed;      /* violet profond */
  --gradient: linear-gradient(100deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
  --vert: #00865a;
  --or: #c9a24a;            /* or doux — bordure des cartes-clés */
  --sauge: #88a890;         /* vert sauge doux — cartes de conclusion */
  --radius: 28px;
  --radius-sm: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
::selection { background:var(--accent-2); color:#fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

body {
  font-family:"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:19px; line-height:1.55; color:var(--noir);
  background:var(--blanc);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}


/* ---- Typographie ---- */
h1,h2,h3 { font-family:"Bricolage Grotesque", -apple-system, "Segoe UI", sans-serif; font-weight:700; letter-spacing:-.025em; line-height:1.05; }
h1 { font-size:clamp(2.6rem,7.5vw,5.2rem); margin-bottom:.5em; }
h2 { font-size:clamp(1.9rem,4.5vw,3.2rem); margin-bottom:.55em; letter-spacing:-.02em; }
h3 { font-size:1.3rem; margin-bottom:.4em; letter-spacing:-.015em; }
p { margin-bottom:1em; }
.muted { color:var(--encre-doux); }
a { color:var(--noir); text-underline-offset:4px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--accent-3); outline-offset:3px; border-radius:6px;
}

/* Texte gradient — la signature visuelle */
.hl, .grad {
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 100%;
  animation:gradShift 6s ease-in-out infinite;
}
.hl-sauge { color:var(--vert); }
@keyframes gradShift { 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }

/* Accent gradient dessiné sous les mots .grad des titres de section */
h2 .grad { position:relative; }
h2 .grad::after {
  content:""; position:absolute; left:0; right:0; bottom:-.14em; height:.11em;
  background:var(--gradient); border-radius:999px; opacity:.85;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .2s;
}
h2.visible .grad::after, .visible h2 .grad::after { transform:scaleX(1); }
:where(html:not(.js)) h2 .grad::after { transform:scaleX(1); }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--noir); color:#fff; padding:.8rem 1.2rem; z-index:300; }
.skip-link:focus { left:0; }

/* ---- Header — barre fine translucide façon Apple ---- */
header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Densification au scroll (classe posée par app.js) */
header.scrolled {
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(26px) saturate(1.9);
  -webkit-backdrop-filter:blur(26px) saturate(1.9);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:0 6px 28px rgba(16,12,28,.07);
}
.nav { max-width:1200px; margin:0 auto; padding:.65rem 1.4rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.logo { font-weight:800; font-size:1.7rem; letter-spacing:-.04em; color:var(--noir); text-decoration:none; transition:opacity .3s; }
.logo:hover { opacity:.6; }
.logo img { height:32px; width:auto; display:block; }
.logo span { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:clamp(.55rem,1.2vw,1.1rem); align-items:center; margin-left:auto; flex-wrap:wrap; }
.nav-links a:not(.btn) { color:var(--noir); text-decoration:none; font-size:clamp(.82rem,.95vw,.92rem); font-weight:500; opacity:.8; transition:opacity .25s; padding:.5rem .15rem; white-space:nowrap; }
.nav-links a:not(.btn):hover { opacity:1; }
.lang { font-size:.85rem; color:var(--encre-doux); }

/* ---- Boutons « verre » lisibles partout ----
   Règle d'or : texte TOUJOURS contrasté. Le verre = reflets discrets, pas un voile. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--noir); color:#fff;
  font-size:1.05rem; font-weight:600; text-decoration:none;
  padding:.95rem 2.1rem; border-radius:999px; border:none; cursor:pointer;
  min-height:50px; position:relative;
  /* reflets de verre subtils SUR fond solide → toujours lisible */
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    inset 2px 2px 1px -1.5px rgba(255,255,255,.45),
    inset -2px -2px 1px -1.5px rgba(255,255,255,.3),
    inset 0 0 8px 4px rgba(255,255,255,.06);
  transition:transform .3s var(--ease-spring), box-shadow .35s var(--ease), background .35s;
}
.btn:hover {
  transform:scale(1.05);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    inset 2px 2px 1px -1.5px rgba(255,255,255,.6),
    inset 0 0 10px 6px rgba(255,255,255,.1),
    0 0 28px rgba(255,45,120,.35);
}
.btn:active { transform:scale(.97); }

/* Sections sombres : verre clair MAIS lisible (fond blanc translucide fort + texte blanc sur halo) */
.dark .btn, .prix-box .btn {
  background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:
    0 2px 10px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 2px 2px 1px -1.5px rgba(255,255,255,.7),
    inset 0 0 10px 5px rgba(255,255,255,.08);
}
.dark .btn:hover, .prix-box .btn:hover {
  background:rgba(255,255,255,.2); color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 32px rgba(255,45,120,.3);
}

/* Bouton secondaire : contour net, texte hérité — lisible sur tout fond */
.btn-secondary { background:transparent; color:var(--noir); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35); backdrop-filter:none; }
.btn-secondary:hover { background:var(--noir); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.dark .btn-secondary { color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); background:transparent; }
.dark .btn-secondary:hover { background:#fff; color:var(--noir); }

.reassure { color:var(--vert); font-size:.92rem; margin-top:1rem; font-weight:600; }
.dark .reassure { color:#7ee2b8; }

/* Dark sections : adaptation auto */
.dark { background:var(--noir); color:#fff; }
/* Texture de profondeur : grain subtil + halo radial (le noir n'est jamais plat) */
section.dark { background:radial-gradient(120% 90% at 50% -10%, #16121e, var(--noir) 55%); }
section.dark::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
section.dark > .inner, section.dark > .inner-wide, section.dark > * { position:relative; z-index:1; }
.dark h1,.dark h2,.dark h3,.dark p,.dark a { color:#fff; }
.dark .muted { color:rgba(255,255,255,.6); }
.dark .btn { background:#fff; color:var(--noir); }
.dark .btn:hover { color:#fff; }

/* ---- Pills / badges ---- */
.pill {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.05); border:none;
  border-radius:999px; padding:.45rem 1.1rem; font-weight:600; font-size:.88rem;
  margin-bottom:1.2rem;
}
.dark .pill { background:rgba(255,255,255,.12); }
.pill .dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--accent-2); animation:pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.75)} }
.badge { display:inline-block; background:var(--noir); color:#fff; font-size:.75rem; font-weight:600; padding:.28rem .85rem; border-radius:999px; margin-bottom:.8rem; letter-spacing:.03em; }
.badge.soon { background:rgba(0,0,0,.06); color:var(--encre-doux); }

/* ---- Sections — air massif ---- */
section { padding:clamp(4rem,9vw,8rem) 1.4rem; position:relative; }
.inner { max-width:780px; margin:0 auto; }
.inner-wide { max-width:1200px; margin:0 auto; }
.hero { text-align:center; padding:clamp(5rem,11vw,9rem) 1.4rem clamp(3rem,6vw,5rem); position:relative; overflow:hidden; }
.hero .lead { font-size:clamp(1.15rem,2.3vw,1.45rem); max-width:660px; margin:0 auto 2.2rem; color:var(--encre-doux); font-weight:400; }

/* Héros : mesh gradient animé très subtil derrière le contenu (GPU-friendly) */
.hero.dark::before {
  content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 20% 30%, rgba(255,92,43,.28), transparent 60%),
    radial-gradient(40% 44% at 82% 22%, rgba(124,58,237,.30), transparent 62%),
    radial-gradient(46% 46% at 62% 82%, rgba(255,45,120,.24), transparent 60%);
  filter:blur(20px); opacity:.75;
  will-change:transform;
  animation:heroMesh 22s ease-in-out infinite alternate;
}
@keyframes heroMesh {
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(2%,-2%,0) scale(1.08); }
  100% { transform:translate3d(-2%,2%,0) scale(1.04); }
}

/* Héros : display plus grand et plus serré (impact première seconde) */
.hero h1 { font-size:clamp(2.8rem,8.4vw,6rem); letter-spacing:-.04em; line-height:.98; }
.hero-cta { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.hero-split .hero-cta { justify-content:flex-start; }

/* ---- Bande de confiance sous le héros ---- */
.hero-trust {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(2.5rem,5vw,3.6rem);
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.hero-trust .trust-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:1.15rem 1.3rem;
  background:rgba(20,20,26,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease);
}
.hero-trust .trust-item:hover { background:rgba(40,32,52,.7); }
.hero-trust .trust-ico { font-size:1.35rem; line-height:1; margin-bottom:.35rem; }
.hero-trust b { font-family:"Bricolage Grotesque",sans-serif; font-size:1rem; letter-spacing:-.01em; color:#fff; }
.hero-trust small { font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.3; }
@media (max-width:760px) {
  .hero-trust { grid-template-columns:1fr 1fr; }
  .hero-trust .trust-item { padding:1rem 1.05rem; }
}
@media (max-width:390px) { .hero-trust b { font-size:.94rem; } .hero-trust small { font-size:.78rem; } }
.alt { background:var(--gris); }
.alt::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(150px,38%); height:3px; border-radius:3px;
  background:var(--gradient); opacity:.4;
}
.center { text-align:center; }

/* Fond coloré doux (sections mises en valeur) — les cartes blanches ressortent */
.sect-degrade {
  background:
    radial-gradient(900px 500px at 8% 0%, rgba(255,92,43,.14), transparent 60%),
    radial-gradient(900px 600px at 95% 30%, rgba(124,58,237,.13), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255,45,120,.12), transparent 60%),
    linear-gradient(180deg, #FFF6F0, #F6F0FC);
}
.sect-degrade .card { border-color:rgba(255,255,255,.9); box-shadow:0 18px 50px rgba(124,58,237,.10); }
.sect-degrade .card:hover { box-shadow:0 28px 70px rgba(255,45,120,.18); }
.sect-degrade .card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--gradient); opacity:0; pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .5s var(--ease);
}
.sect-degrade .card:hover::before { opacity:.85; }

/* ---- Orbes parallaxe (wow discret) ---- */
.orb,
section.dark > .orb {   /* bat « section.dark > * » : l'orbe est décoratif, jamais dans le flux */
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.5;
  pointer-events:none; z-index:0; will-change:transform;
}
.orb-1 { width:480px; height:480px; background:radial-gradient(circle, var(--accent-1), transparent 70%); top:-120px; left:-140px; }
.orb-2 { width:560px; height:560px; background:radial-gradient(circle, var(--accent-3), transparent 70%); top:10%; right:-200px; }
.orb-3 { width:420px; height:420px; background:radial-gradient(circle, var(--accent-2), transparent 70%); bottom:-160px; left:30%; }
section > .inner, section > .inner-wide { position:relative; z-index:1; }

/* ---- Grilles ---- */
.bento { display:grid; gap:1.2rem; grid-template-columns:repeat(12,1fr); margin-top:2.2rem; }
.bento > * { grid-column:span 12; }
@media (min-width:700px) {
  .b6{grid-column:span 6} .b4{grid-column:span 4} .b8{grid-column:span 8} .b3{grid-column:span 3} .b12{grid-column:span 12}
}
.cards { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2.2rem; }

/* ---- Cartes — épurées, hover cinématique ---- */
.card {
  background:var(--blanc); border-radius:var(--radius); padding:2.2rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 2px rgba(16,12,28,.04),
    0 6px 16px rgba(16,12,28,.05),
    0 16px 40px rgba(16,12,28,.05);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover {
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(124,58,237,.18);
  box-shadow:
    0 2px 6px rgba(16,12,28,.06),
    0 14px 32px rgba(124,58,237,.10),
    0 30px 70px rgba(255,45,120,.12);
}
.card .emoji { font-size:2.2rem; display:block; margin-bottom:.8rem; }
.card-accent { background:var(--noir); color:#fff; }
.card-accent h3,.card-accent p,.card-accent a { color:#fff; }
.card-accent .muted { color:rgba(255,255,255,.65); }
.card-dark { background:var(--noir); color:#fff; }
.card-dark h2,.card-dark h3,.card-dark p { color:#fff; }
.card-dark a { color:#fff; }

/* Cartes image (visuels Unsplash) */
.card-img { padding:0; min-height:380px; display:flex; align-items:flex-end; }
.card-img img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.card-img:hover img { transform:scale(1.06); }
.card-img .legende {
  position:relative; z-index:2; width:100%; padding:1.6rem;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  color:#fff; border-radius:0 0 var(--radius) var(--radius);
}
.card-img .legende h3, .card-img .legende p { color:#fff; margin:0; }
.card-img .legende p { font-size:.95rem; opacity:.85; }

/* ---- Tuiles « Pour qui » (visuels avec titre + icône intégrés) ---- */
.vie-tuile { border-radius:var(--radius); overflow:hidden; line-height:0; box-shadow:0 18px 50px rgba(0,0,0,.10); }
.vie-tuile img { display:block; width:100%; height:auto; transition:transform 1.2s var(--ease); }
.vie-tuile:hover img { transform:scale(1.04); }

/* ---- Mockup conversation IA (démo vivante) ---- */
.chat-demo {
  background:var(--blanc); border-radius:var(--radius); padding:1.8rem;
  max-width:560px; margin:2.5rem auto 0; text-align:left;
  box-shadow:0 32px 80px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
}
.chat-demo .bulle { border-radius:18px; padding:.9rem 1.2rem; margin-bottom:.9rem; font-size:1rem; max-width:88%; }
.chat-demo .moi { background:var(--gradient); color:#fff; margin-left:auto; border-bottom-right-radius:6px; }
.chat-demo .ia { background:var(--gris); color:var(--noir); border-bottom-left-radius:6px; }
.chat-demo .ia .curseur { display:inline-block; width:2px; height:1em; background:var(--noir); vertical-align:text-bottom; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }

/* ---- Chiffres animés ---- */
.stats { display:flex; gap:3rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }
.stat { text-align:center; }
.stat .nombre { font-size:clamp(3.2rem,7.5vw,5.4rem); font-weight:800; letter-spacing:-.05em; line-height:1; background:var(--gradient); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gradShift 6s ease-in-out infinite; }
.stat .label { color:var(--encre-doux); font-size:.95rem; }
.dark .stat .label { color:rgba(255,255,255,.6); }

/* ---- Listes ---- */
.contrat-list { list-style:none; }
.contrat-list li { padding:.6rem 0 .6rem 2.3rem; position:relative; }
.contrat-list li::before {
  content:"✓"; position:absolute; left:0; top:.55rem;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}

/* ---- Formulaires ---- */
.form-capture { display:flex; gap:.7rem; max-width:560px; margin:1.8rem auto; flex-wrap:wrap; justify-content:center; }
.form-capture input[type="email"], .form-capture select {
  flex:1; min-width:250px; font-size:1.05rem; padding:1rem 1.4rem;
  border:1.5px solid rgba(0,0,0,.18); border-radius:999px; background:var(--blanc);
  transition:border-color .25s, box-shadow .25s;
}
.form-capture input[type="email"]:focus { border-color:var(--accent-3); box-shadow:0 0 0 4px rgba(124,58,237,.12); }

/* ---- Bloc prix ---- */
.prix-box {
  background:var(--noir); color:#fff; border-radius:var(--radius);
  padding:3rem 2.2rem; text-align:center; max-width:560px; margin:2.5rem auto;
  position:relative; overflow:hidden;
}
.prix-box::before {
  content:""; position:absolute; inset:-2px; border-radius:var(--radius); padding:2px;
  background:var(--gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.prix-box p, .prix-box a:not(.btn) { color:#fff; }
.prix-box .gros-prix { font-size:clamp(3.4rem,8vw,5rem); font-weight:800; letter-spacing:-.04em; line-height:1; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.prix-box .btn { background:#fff; color:var(--noir); }
.prix-box .btn:hover { color:#fff; }

/* ---- FAQ ---- */
details { background:var(--blanc); border-radius:var(--radius-sm); padding:1.1rem 1.5rem; margin-bottom:.7rem; border:1px solid rgba(0,0,0,.08); transition:border-color .3s; }
details[open] { border-color:var(--accent-3); }
summary { font-weight:600; cursor:pointer; padding:.4rem 0; min-height:44px; display:flex; align-items:center; list-style:none; font-size:1.05rem; }
summary::before { content:"+"; font-size:1.6rem; font-weight:300; color:var(--accent-2); margin-right:.9rem; transition:transform .35s var(--ease); }
details[open] summary::before { transform:rotate(45deg); }
details p { margin-top:.5rem; color:var(--encre-doux); }

/* ---- Étapes ---- */
.steps { counter-reset:step; list-style:none; max-width:680px; margin:2rem auto; }
.steps li { counter-increment:step; padding:1.1rem 0 1.1rem 4rem; position:relative; }
.steps li::before {
  content:counter(step); position:absolute; left:0; top:.95rem;
  width:2.7rem; height:2.7rem; border-radius:50%;
  background:var(--gradient); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}

/* ---- Fenêtre d'aperçu produit (vrai contenu du kit, dans un cadre d'app) ---- */
.fenetre {
  background:var(--blanc); border-radius:18px; overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.08);
  max-width:230px; margin-inline:auto;
}
.fenetre-barre {
  display:flex; align-items:center; gap:.45rem;
  background:var(--gris); padding:.7rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.fenetre-barre span { width:.75rem; height:.75rem; border-radius:50%; }
.fenetre-barre span:nth-child(1){background:#ff5f57} .fenetre-barre span:nth-child(2){background:#febc2e} .fenetre-barre span:nth-child(3){background:#28c840}
.fenetre-barre em { margin-left:.8rem; font-style:normal; font-size:.82rem; color:var(--encre-doux); font-weight:600; }
.fenetre-corps { padding:.8rem .85rem; font-size:.72rem; line-height:1.4; }
.fenetre-corps p { margin:.3rem 0; }
.fenetre-corps h3 { font-size:.9rem; margin:.1rem 0 .25rem; }
.fenetre-corps .num { font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.15rem; }
.fenetre-corps .prompt-box { font-size:.66rem; padding:.55rem .65rem; margin:.45rem 0; line-height:1.45; }
.fenetre-corps .prompt-box .copier { padding:.22rem .55rem; font-size:.6rem; top:.4rem; right:.4rem; }
.fenetre-corps .astuce { font-size:.68rem; padding:.5rem .65rem; }
.fenetre-barre { padding:.55rem .8rem; }
.fenetre-barre em { font-size:.74rem; }

/* ---- Grille de 6 visuels muets (un par bénéfice, lisibles à l'œil nu) ---- */
.grille-6 {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1.6rem; align-content:center;
}
.grille-6 img {
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.12);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.grille-6 img:hover { transform:scale(1.05) rotate(-1deg); box-shadow:0 20px 44px rgba(0,0,0,.18); }
.grille-6 img:nth-child(2n) { transform:translateY(.9rem); }
.grille-6 img:nth-child(2n):hover { transform:translateY(.9rem) scale(1.05) rotate(1deg); }
@media (max-width:820px) { .grille-6 { grid-template-columns:repeat(3,1fr); gap:1rem; } .grille-6 img:nth-child(2n){transform:none} }

/* ---- Vitrine Kit : tuiles mockup flanquant le texte ---- */
.kit-showcase { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:2rem; align-items:center; margin-top:1rem; }
.kit-col { display:flex; flex-direction:column; gap:1.4rem; }
.kit-col img { width:100%; border-radius:16px; box-shadow:0 16px 38px rgba(0,0,0,.12); display:block; transition:transform .4s var(--ease); }
.kit-col img:hover { transform:translateY(-4px); }
.kit-col-center { text-align:left; }
@media (max-width:900px) {
  .kit-showcase { grid-template-columns:1fr; gap:1.6rem; }
  .kit-col-center { order:-1; text-align:center; }
  .kit-col-center .contrat-list { text-align:left; display:inline-block; }
  .kit-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
}

/* ---- Liste du kit avec mini-pictos vectoriels ---- */
.liste-kit { list-style:none; max-width:680px; margin:2rem auto; }
.liste-kit li {
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1rem 0;
}
.liste-kit .ico {
  flex:0 0 56px; width:56px; height:56px; border-radius:16px;
  background:var(--blanc); border:1px solid rgba(0,0,0,.07);
  box-shadow:0 10px 26px rgba(124,58,237,.12);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease-spring);
}
.liste-kit .ico svg { width:34px; height:34px; }
.liste-kit li:hover .ico { transform:scale(1.12) rotate(-4deg); }
/* Apparition autonome (keyframes) : ne dépend d'aucun script */
.liste-kit li { animation:riseIn .8s var(--ease) both; }
.liste-kit li:nth-child(2){animation-delay:.1s} .liste-kit li:nth-child(3){animation-delay:.2s}
.liste-kit li:nth-child(4){animation-delay:.3s} .liste-kit li:nth-child(5){animation-delay:.4s}
.liste-kit li:nth-child(6){animation-delay:.5s} .liste-kit li:nth-child(7){animation-delay:.6s}

/* ---- Marquee ---- */
.marquee { overflow:hidden; padding:1.3rem 0; background:var(--noir); white-space:nowrap; }
.marquee-track { display:inline-block; animation:scroll 30s linear infinite; }
.marquee span { color:#fff; font-size:1.05rem; font-weight:500; margin:0 2.2rem; letter-spacing:-.01em; }
.marquee .sep { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ==========================================================================
   MOTEUR D'ANIMATIONS — « tout est vivant » (v4)
   ========================================================================== */

/* Barre de progression du scroll (gradient, injectée par JS) */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:var(--gradient); transform-origin:left;
  transform:scaleX(0); z-index:200; pointer-events:none;
}

/* Apparitions : fondu + montée + DÉFLOUTAGE (la touche cinéma) */
:where(html.js) .reveal {
  opacity:0; transform:translateY(44px); filter:blur(8px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.reveal.visible { opacity:1; transform:none; filter:blur(0); }
.reveal-d1{transition-delay:.1s} .reveal-d2{transition-delay:.2s} .reveal-d3{transition-delay:.3s}

/* Variantes directionnelles (assignées automatiquement par JS) */
:where(html.js) .reveal-left  { opacity:0; transform:translateX(-60px); filter:blur(6px); transition:all 1s var(--ease); }
:where(html.js) .reveal-right { opacity:0; transform:translateX(60px);  filter:blur(6px); transition:all 1s var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; filter:blur(0); }

:where(html.js) .reveal-zoom { opacity:0; transform:scale(.88); filter:blur(6px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.reveal-zoom.visible { opacity:1; transform:scale(1); filter:blur(0); }

/* Images : révélation par balayage (clip-path) */
:where(html.js) .reveal-clip { clip-path:inset(12% 12% 12% 12% round 28px); opacity:.4; transition:clip-path 1.2s var(--ease), opacity 1.2s var(--ease); }
.reveal-clip.visible { clip-path:inset(0 0 0 0 round 28px); opacity:1; }

/* Titres : révélation mot par mot (split par JS) */
:where(html.js) .w { display:inline-block; opacity:0; transform:translateY(.8em) rotate(3deg); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:transform; }
.words-visible .w { opacity:1; transform:none; }
/* Les segments gradient sont révélés en bloc (jamais découpés ni floutés,
   sinon background-clip:text casse et le texte devient invisible) */
.grad.w, .hl.w { filter:none; }

/* Hero : entrée séquencée */
@keyframes riseIn { from{opacity:0; transform:translateY(40px); filter:blur(8px)} to{opacity:1; transform:none; filter:blur(0)} }
.rise { animation:riseIn 1.1s var(--ease) both; }
.rise-1{animation-delay:.1s} .rise-2{animation-delay:.3s} .rise-3{animation-delay:.5s}

/* Cartes : inclinaison 3D au survol (JS pilote les variables) */
.card { transform-style:preserve-3d; }
.card.tilt {
  transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px) scale(1.01);
  transition:box-shadow .5s var(--ease);
}

/* Flottement perpétuel doux (emojis des cartes) */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.card .emoji { animation:float 4.5s ease-in-out infinite; }
.card:nth-child(2n) .emoji { animation-delay:1.1s; }
.card:nth-child(3n) .emoji { animation-delay:2.2s; }

/* Parallaxe interne des images */
.card-img { perspective:900px; }
.card-img img { will-change:transform; }

/* Boutons magnétiques (JS pilote --mx/--my) */
.btn { transform:translate(var(--mx,0), var(--my,0)); }
.btn:hover { transform:translate(var(--mx,0), var(--my,0)) scale(1.06); }

/* Chiffres : pop à l'arrivée */
:where(html.js) .stat { opacity:0; transform:translateY(30px) scale(.9); transition:all .8s var(--ease-spring); }
.stat.visible { opacity:1; transform:none; }
.stat:nth-child(2){transition-delay:.15s} .stat:nth-child(3){transition-delay:.3s}

/* ---- Illustrations premium (générées, style 3D doux) ---- */
.illus {
  border-radius:var(--radius); display:block;
  height:auto; /* préserve les proportions quels que soient les attributs HTML */
  box-shadow:0 30px 70px rgba(124,58,237,.18);
  animation:float 7s ease-in-out infinite;
}
.sect-illus { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; text-align:left; }
.sect-illus-head { grid-column:1 / -1; }
.sect-illus .illus { width:100%; max-width:420px; margin-inline:auto; }
@media (max-width:820px) {
  .sect-illus { grid-template-columns:1fr; text-align:center; }
  .sect-illus .illus { max-width:320px; order:-1; }
}
/* Trio d'illustrations (héros parcours) */
.illus-trio { display:flex; justify-content:center; gap:1.6rem; margin-top:2.5rem; flex-wrap:wrap; }
.illus-trio img {
  width:170px; height:170px; object-fit:cover; border-radius:24px;
  box-shadow:0 22px 50px rgba(124,58,237,.2);
  animation:float 6s ease-in-out infinite;
}
.illus-trio img:nth-child(1) { transform:rotate(-4deg); }
.illus-trio img:nth-child(2) { animation-delay:1.2s; transform:translateY(-12px); }
.illus-trio img:nth-child(3) { transform:rotate(4deg); animation-delay:2.4s; }
@media (max-width:600px) { .illus-trio img { width:110px; height:110px; } }

/* ---- Tuiles-symboles flottantes des héros (aucune page "texte seul") ---- */
.hero-icones { position:absolute; inset:0; pointer-events:none; }
.hero-icones span {
  position:absolute; width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:linear-gradient(135deg, #FFF3EC, #F4EDFB);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 14px 34px rgba(124,58,237,.14);
  opacity:0; animation:chipIn 1s var(--ease) forwards, float 5.5s ease-in-out infinite;
}
.hero-icones span:nth-child(2n) { background:linear-gradient(135deg, #FFEFF4, #FFF6EC); }
.hero-icones span:nth-child(3n) { background:linear-gradient(135deg, #F0F4FF, #FFF0F6); }
.hi1 { top:18%; left:8%;  transform:rotate(-7deg); animation-delay:.2s,.2s; }
.hi2 { top:55%; left:13%; transform:rotate(5deg);  animation-delay:.5s,1.3s; }
.hi3 { top:78%; left:6%;  transform:rotate(-4deg); animation-delay:.8s,2.4s; width:52px; height:52px; font-size:1.4rem; }
.hi4 { top:16%; right:9%; transform:rotate(6deg);  animation-delay:.35s,.8s; }
.hi5 { top:52%; right:6%; transform:rotate(-6deg); animation-delay:.65s,1.9s; }
.hi6 { top:80%; right:13%;transform:rotate(4deg);  animation-delay:.95s,3s; width:52px; height:52px; font-size:1.4rem; }
@media (max-width:760px) { .hi2,.hi3,.hi5,.hi6 { display:none; } .hi1{top:6%} .hi4{top:6%} }
/* Variante héros sombre */
.dark .hero-icones span { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); box-shadow:0 14px 34px rgba(0,0,0,.4); }

/* ---- Photos de scènes de vie (cartes parcours) ---- */
.card-parcours { padding-top:0; overflow:hidden; }
.photo-scene {
  position:relative; margin:0 -2.2rem 1.4rem; height:200px; overflow:hidden;
}
.photo-scene img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease);
}
.card-parcours:hover .photo-scene img { transform:scale(1.07); }
.scene-tag {
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(10,10,12,.78); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:999px; padding:.4rem 1rem;
  font-size:.88rem; font-style:italic; font-weight:500;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s;
}
.card-parcours.visible .scene-tag, .card-parcours:hover .scene-tag { opacity:1; transform:none; }

/* ---- Mini-scènes de vie (cartes parcours) ---- */
.mini-scene { display:flex; gap:.6rem; margin-bottom:1rem; }
.mini-scene i {
  font-style:normal; font-size:1.45rem;
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #FFF3EC, #F4EDFB);
  border:1px solid rgba(0,0,0,.05);
  animation:float 4.8s ease-in-out infinite;
}
.mini-scene i:nth-child(2) { animation-delay:1.2s; transform-origin:center; background:linear-gradient(135deg, #FFEFF4, #FFF6EC); }
.mini-scene i:nth-child(3) { animation-delay:2.4s; background:linear-gradient(135deg, #F0F4FF, #FFF0F6); }
.card:hover .mini-scene i { animation-duration:2.2s; }

/* ---- Le chemin de vie (section parcours) ---- */
.chemin-vie { position:relative; max-width:1000px; margin:2.5rem auto 2rem; height:170px; }
.chemin-vie svg { width:100%; height:150px; clip-path:inset(0 100% 0 0); transition:clip-path 2s var(--ease) .3s; }
.reveal.visible.chemin-vie svg, .reveal.visible .chemin-vie svg, .chemin-vie.visible svg { clip-path:inset(0 0 0 0); }
.etape {
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  transform:translate(-50%,-50%) scale(0); transition:transform .6s var(--ease-spring);
}
.chemin-vie.visible .etape { transform:translate(-50%,-50%) scale(1); }
.etape span {
  width:54px; height:54px; border-radius:50%; background:var(--blanc);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 26px rgba(124,58,237,.16);
}
.etape small { font-weight:700; font-size:.8rem; color:var(--encre-doux); white-space:nowrap; }
.etape:hover span { animation:float 2.4s ease-in-out infinite; }
.e1{left:2%;  top:72%; transition-delay:.4s}
.e2{left:21%; top:30%; transition-delay:.7s}
.e3{left:38%; top:55%; transition-delay:1s}
.e4{left:57%; top:25%; transition-delay:1.3s}
.e5{left:72%; top:58%; transition-delay:1.6s}
.e6{left:95%; top:38%; transition-delay:1.9s}
@media (max-width:700px) {
  .chemin-vie { height:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; }
  .chemin-vie svg { display:none; }
  .etape { position:static; transform:scale(0); }
  .chemin-vie.visible .etape { transform:scale(1); }
}

/* ---- Le sceau du Contrat (badge circulaire tournant, cliquable) ---- */
.sect-contrat { position:relative; }
.sceau {
  position:absolute; right:clamp(1.2rem, 5vw, 6rem); top:2.4rem; transform:none;
  width:170px; height:170px; display:block; z-index:2;
  transition:transform .5s var(--ease);
}
.sceau:hover { transform:scale(1.08); }
.sceau svg { width:100%; height:100%; overflow:visible; }
.sceau-texte { transform-origin:100px 100px; animation:tourner 22s linear infinite; }
.sceau:hover .sceau-texte { animation-duration:7s; }
@keyframes tourner { to { transform:rotate(360deg); } }
@media (max-width:1199px) { .sceau { display:none; } }

/* Signature manuscrite du contrat */
.signature {
  font-style:italic; color:rgba(255,255,255,.7); font-size:1.05rem;
  margin:1.2rem 0 1.8rem; position:relative; display:block; width:fit-content;
}
.trait-signature {
  display:block; height:2px; margin-top:.4rem;
  background:var(--gradient); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease) .6s;
}
.reveal.visible .trait-signature { transform:scaleX(1); }

/* Petits visuels décoratifs en marge des sections (n'altèrent rien) */
.deco-coin { position:absolute; pointer-events:none; display:flex; flex-direction:column; gap:2.4rem; opacity:.5; z-index:0; }
.deco-coin svg { width:64px; height:64px; animation:float 5.5s ease-in-out infinite; filter:drop-shadow(0 6px 16px rgba(255,45,120,.18)); }
.deco-coin svg.d2 { width:44px; height:44px; animation-delay:1.6s; margin-left:2.4rem; }
.deco-gauche { left:4%; top:50%; transform:translateY(-50%) rotate(-8deg); }
.deco-droite { right:4%; top:50%; transform:translateY(-50%) rotate(8deg); }
@media (max-width:1439px) { .deco-coin { display:none; } }

/* Marquee : pause au survol */
.marquee:hover .marquee-track { animation-play-state:paused; }

/* Étapes numérotées : pastilles qui poppent */
:where(html.js) .steps li::before { transform:scale(0); transition:transform .6s var(--ease-spring); }
.steps li.visible::before { transform:scale(1); }
:where(html.js) .steps li { opacity:0; transform:translateX(-24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.steps li.visible { opacity:1; transform:none; }

/* Liste contrat : coches qui se dessinent */
:where(html.js) .contrat-list li { opacity:0; transform:translateX(-18px); transition:all .6s var(--ease); }
.contrat-list li.visible { opacity:1; transform:none; }
:where(html.js) .contrat-list li::before { transform:scale(0) rotate(-90deg); transition:transform .5s var(--ease-spring) .15s; }
.contrat-list li.visible::before { transform:scale(1) rotate(0); }

/* ---- Footer ---- */
footer {
  position:relative;
  background:radial-gradient(120% 140% at 50% -20%, #16121e, var(--noir) 60%);
  color:rgba(255,255,255,.75); padding:3.5rem 1.4rem 2.5rem;
  border-top:1px solid rgba(255,255,255,.06);
}
/* Filet gradient net en haut du footer */
footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient); opacity:.9;
}
footer .inner-wide { position:relative; display:flex; flex-wrap:wrap; gap:1.8rem; justify-content:space-between; align-items:center; }
footer a { color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s; }
footer a:hover { color:#fff; }
footer .sig { font-weight:600; color:#fff; letter-spacing:-.01em; font-size:1.05rem; }
footer .sig em {
  background:var(--gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-style:normal;
}
/* Rangée de liens : puces discrètes, zones tactiles confortables */
footer .inner-wide > p:last-child { display:flex; flex-wrap:wrap; gap:.2rem .1rem; font-size:.92rem; line-height:1.9; max-width:640px; }
footer .inner-wide > p:last-child a { padding:.1rem .1rem; }

/* ---- Contenu produit ---- */
.lecture { max-width:720px; margin:0 auto; }
.mission {
  background:var(--blanc); border-radius:var(--radius); padding:2.2rem;
  border:1px solid rgba(0,0,0,.07); margin-bottom:1.4rem;
  transition:box-shadow .4s var(--ease);
}
.mission:hover { box-shadow:0 16px 48px rgba(0,0,0,.07); }
.mission .num { font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.prompt-box {
  background:var(--gris); border:none; border-radius:var(--radius-sm);
  padding:1.2rem 1.4rem; margin:1rem 0; font-size:1rem; position:relative;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.92rem; line-height:1.6;
}
.prompt-box .copier {
  position:absolute; top:.7rem; right:.7rem;
  background:var(--noir); color:#fff; border:none; border-radius:999px;
  padding:.4rem .95rem; font-size:.82rem; font-weight:600; cursor:pointer;
  transition:transform .25s var(--ease-spring);
}
.prompt-box .copier:hover { transform:scale(1.08); }
.astuce { background:rgba(0,134,90,.08); border-radius:var(--radius-sm); padding:1rem 1.3rem; font-size:.97rem; }
.astuce strong { color:var(--vert); }

/* ---- Hero 3D (Spline) + spotlight souris ---- */
.hero-3d { padding-bottom:clamp(2rem,5vw,4rem); }
.hero-split {
  display:grid; grid-template-columns:1.05fr .95fr; gap:2rem;
  align-items:center; text-align:left; min-height:540px;
}
.hero-split .lead { margin-left:0; }
.hero-spline { position:relative; height:560px; }
.hero-spline spline-viewer { width:100%; height:100%; display:block; }
.spotlight {
  position:absolute; pointer-events:none; z-index:0;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  filter:blur(40px); opacity:0; transition:opacity .5s;
  transform:translate(-50%,-50%); will-change:left,top;
}
.hero-3d:hover .spotlight { opacity:1; }
/* ---- Bulles de jargon flottantes (section "ça va trop vite") ---- */
.sect-vertige { position:relative; }
.chips-flottantes { position:absolute; inset:0; pointer-events:none; }
.chip {
  position:absolute; white-space:nowrap;
  background:var(--blanc); border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.5rem 1.1rem;
  font-size:.92rem; font-weight:600; color:var(--encre-doux);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  opacity:0; animation:chipFloat 7s ease-in-out infinite, chipIn 1s var(--ease) forwards;
}
@keyframes chipIn { to { opacity:.9; } }
@keyframes chipFloat {
  0%,100% { transform:translateY(0) rotate(var(--r,0deg)); }
  50%     { transform:translateY(-14px) rotate(var(--r,0deg)); }
}
.c1 { top:16%; left:7%;  --r:-6deg; animation-delay:.2s,.2s; }
.c2 { top:58%; left:4%;  --r:4deg;  animation-delay:1.4s,.5s; }
.c3 { top:30%; left:14%; --r:2deg;  animation-delay:2.6s,.8s; font-size:.8rem; opacity:0; }
.c4 { top:14%; right:8%; --r:5deg;  animation-delay:.9s,.35s; }
.c5 { top:38%; right:4%; --r:-3deg; animation-delay:2s,.65s; font-size:.8rem; }
.c6 { top:64%; right:12%;--r:-5deg; animation-delay:3.1s,.95s; }
.c7 { top:82%; left:10%; --r:3deg;  animation-delay:1.7s,1.1s; font-size:.85rem; }
/* La bulle Jo : la réponse calme, en couleur */
.chip-jo {
  background:var(--noir); color:#fff; border:none;
  box-shadow:0 12px 32px rgba(255,45,120,.3);
  top:80%; right:6%; --r:-2deg; animation-delay:2.4s,1.4s;
  font-size:.95rem;
}
.chip-jo b { color:var(--accent-1); }
@media (max-width:900px) {
  .c2,.c3,.c5,.c6,.c7 { display:none; }   /* on allège sur mobile */
  .c1 { top:6%; } .c4 { top:6%; }
  .chip-jo { top:88%; right:50%; transform:translateX(50%); }
}

/* Portrait du fondateur (page commencer) */
.hero-portrait { position:relative; display:flex; justify-content:center; }
.hero-portrait img, .hero-portrait video {
  width:100%; max-width:420px; height:auto; border-radius:var(--radius);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:rotate(1.5deg);
  transition:transform .6s var(--ease);
  display:block;
}
.hero-portrait img:hover, .hero-portrait video:hover { transform:rotate(0deg) scale(1.02); }
.hero-portrait::after {
  content:""; position:absolute; inset:8% -4% -4% 8%; z-index:-1;
  border-radius:var(--radius);
  background:var(--gradient); opacity:.35; filter:blur(36px);
  animation:auraPulse 7s ease-in-out infinite;
}
@keyframes auraPulse { 0%,100%{opacity:.28} 50%{opacity:.5} }

@media (max-width:900px) {
  .hero-split { grid-template-columns:1fr; text-align:center; }
  .hero-split .lead { margin-inline:auto; }
  .hero-spline { height:380px; order:2; }
  .hero-portrait { order:2; margin-top:1.5rem; }
  .hero-split .form-capture { justify-content:center !important; margin-inline:auto !important; }
}

@media (max-width:600px) {
  /* Navigation responsive : logo centré sur sa ligne, liens nets en dessous (pas de menu burger) */
  .nav { justify-content:center; gap:.3rem .9rem; padding:.6rem 1rem; }
  .logo { width:100%; text-align:center; font-size:1.5rem; }
  .nav-links { margin-left:0; width:100%; justify-content:center; gap:.5rem 1.1rem; font-size:.92rem; }
  .nav-links .lang { display:none; }      /* le sélecteur de langue revient quand EN/ES seront en ligne */
  .nav-links .btn { padding:.7rem 1.5rem; min-height:44px; font-size:.95rem; }
  .nav-links a:not(.btn) { padding:.75rem .55rem; }   /* zones tactiles ≥44px */
  .prompt-box { padding-top:2.9rem; }                 /* le bouton Copier a sa propre zone */
  /* Titre du héros : un cran plus petit pour respirer sur un téléphone */
  h1 { font-size:clamp(2.2rem,8.5vw,2.8rem); }
  .stats { gap:1.6rem; }
  .orb { display:none; }
  /* Rythme vertical + cartes/prompts plus respirables sur mobile */
  section { padding-top:3.2rem; padding-bottom:3.2rem; }
  .card { padding:1.6rem; }
  .mission { padding:1.4rem; }
  .prompt-box { padding:1rem 1.1rem; }
  .prompt-texte { overflow-wrap:anywhere; word-break:break-word; }
}

/* ==========================================================================
   LE JOURNAL DE JO — blog (pages générées par 05-blog/build-blog.py)
   ========================================================================== */

/* Étiquette de catégorie (réutilisée partout) */
.cat-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  background:rgba(0,0,0,.05); border-radius:999px; padding:.32rem .9rem;
  width:fit-content; margin-bottom:.6rem;
}
.dark .cat-tag { background:rgba(255,255,255,.14); }

/* Couverture de repli (dégradé de marque + titre) — toujours élégante sans image */
.cover-fallback {
  background:var(--gradient); color:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:.5rem; text-align:center; padding:1.6rem; position:relative; overflow:hidden;
}
.cover-fallback::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.28), transparent 55%);
}
.cover-fallback .cat-emoji { font-size:2.4rem; line-height:1; position:relative; }
.cover-fallback .cover-titre {
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
  font-size:1.1rem; line-height:1.2; max-width:90%; position:relative;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}

/* ---- La « Une » (article vedette) ---- */
.une {
  display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:center;
  text-decoration:none; color:inherit;
  background:var(--blanc); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.une:hover { transform:translateY(-4px); box-shadow:0 28px 70px rgba(124,58,237,.14); }
.une-cover { position:relative; align-self:stretch; min-height:340px; background:#0a0a0c; }
.une-cover .une-img { width:100%; height:100%; object-fit:contain; display:block; }
.une-cover .cover-fallback { position:absolute; inset:0; }
.une-cover .cover-fallback .cover-titre { font-size:1.6rem; }
.une-cover .cover-fallback .cat-emoji { font-size:3.4rem; }
.une-texte { padding:2.6rem 2.8rem 2.6rem 0; }
.une-texte h2 { font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.5rem; }
.une-texte .meta { color:var(--encre-doux); font-size:.9rem; margin:.4rem 0 1.4rem; }
.une-texte .btn-secondary { margin-top:.4rem; }
@media (max-width:820px) {
  .une { grid-template-columns:1fr; }
  .une-cover { min-height:0; aspect-ratio:1200/630; }
  .une-texte { padding:1.8rem; }
}

/* ---- Filtres par thème ---- */
.journal-filtres { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:2rem 0 .5rem; }
.cat-pill {
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  background:var(--blanc); border:1.5px solid rgba(0,0,0,.14); color:var(--noir);
  border-radius:999px; padding:.5rem 1.1rem; min-height:42px;
  transition:transform .25s var(--ease-spring), background .25s, color .25s, border-color .25s;
}
.cat-pill:hover { transform:translateY(-2px); border-color:var(--accent-3); }
.cat-pill.actif { background:var(--noir); color:#fff; border-color:var(--noir); }

/* ---- Grille d'articles ---- */
.journal-grid {
  display:grid; gap:1.6rem; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.article-card {
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--blanc); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius);
  overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.article-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.10); }
.article-card .vignette { position:relative; aspect-ratio:1200/630; overflow:hidden; background:#0a0a0c; }
.article-card .vignette-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); }
.article-card:hover .vignette-img { transform:scale(1.05); }
.article-card .vignette .cover-fallback { position:absolute; inset:0; }
.article-card .corps { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.article-card h3 { font-size:1.2rem; margin:.1rem 0 .4rem; line-height:1.2; }
.article-card .muted { font-size:.96rem; flex:1; }
.article-card .meta { color:var(--encre-doux); font-size:.82rem; margin:.9rem 0 0; }

/* ---- Page d'article : lecture ---- */
.article-tete { padding-bottom:2rem; }
.fil-ariane { font-size:.85rem; color:var(--encre-doux); margin-bottom:1.2rem; }
.fil-ariane a { color:var(--encre-doux); }
.fil-ariane a:hover { color:var(--noir); }
.article-tete h1 { font-size:clamp(2rem,5vw,3.2rem); margin-bottom:.5rem; }
.article-meta { color:var(--encre-doux); font-size:.92rem; margin-bottom:1rem; }
.par-jo { font-weight:700; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.article-tete .lead { font-size:clamp(1.1rem,2vw,1.3rem); color:var(--encre-doux); max-width:680px; }
.article-cover { border-radius:var(--radius); display:block; width:100%; aspect-ratio:1200/630; height:auto; object-fit:cover; margin-top:2rem; box-shadow:0 30px 70px rgba(124,58,237,.14); }
.article-cover.cover-fallback { aspect-ratio:16/7; max-height:460px; }
.article-cover.cover-fallback .cover-titre { font-size:1.8rem; }
.article-cover.cover-fallback .cat-emoji { font-size:3.6rem; }

/* Corps de l'article : confort de lecture */
.article-corps { padding-top:0; }
.article-corps .lecture { font-size:1.1rem; line-height:1.75; }
.article-corps h2 { font-size:clamp(1.5rem,3vw,2rem); margin:2.4rem 0 .6rem; }
.article-corps h3 { margin:1.8rem 0 .4rem; }
.article-corps p { margin-bottom:1.1rem; }
.article-corps ul { list-style:none; margin:1rem 0 1.4rem; padding:0; }
.article-corps ul li { position:relative; padding:.35rem 0 .35rem 1.7rem; }
.article-corps ul li::before { content:""; position:absolute; left:.2rem; top:1.05rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--gradient); }
.article-corps a { color:var(--accent-3); font-weight:600; text-underline-offset:3px; }
.article-corps blockquote {
  border-left:3px solid var(--accent-2); margin:1.4rem 0; padding:.4rem 0 .4rem 1.3rem;
  color:var(--encre-doux); font-style:italic; background:rgba(255,45,120,.04); border-radius:0 8px 8px 0;
}
.article-corps code { background:var(--gris); padding:.12rem .45rem; border-radius:6px; font-size:.92em; font-family:ui-monospace, "SF Mono", Menlo, monospace; }

/* Sources */
.article-sources { margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(0,0,0,.1); }
.article-sources h2 { font-size:1.2rem; margin-bottom:.6rem; }
.article-sources ul { list-style:none; padding:0; }
.article-sources li { padding:.3rem 0; font-size:.95rem; color:var(--encre-doux); }
.article-sources a { color:var(--accent-3); }

@media (max-width:600px) {
  .une-texte { padding:1.5rem; }
  .article-cover { max-height:300px; }
}

/* ---- Tags ---- */
.tags { display:flex; flex-wrap:wrap; gap:.45rem; margin:.8rem 0 0; }
.tag { font-size:.78rem; font-weight:600; color:var(--encre-doux); background:rgba(0,0,0,.05); border-radius:999px; padding:.25rem .7rem; }
.dark .tag { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }

/* ---- Badge VIP ---- */
.vip-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--gradient); border-radius:999px; padding:.32rem .9rem;
  box-shadow:0 6px 18px rgba(255,45,120,.25);
}
.vip-badge.mini { position:absolute; top:.8rem; left:.8rem; z-index:2; font-size:.72rem; padding:.22rem .7rem; }

/* ---- Bloc CTA VIP (fin d'article public) ---- */
.cta-vip { padding:clamp(2.5rem,6vw,4rem) 1.4rem; }
.cta-vip-carte {
  background:var(--noir); color:#fff; border-radius:var(--radius);
  padding:2.6rem 2.4rem; text-align:center; position:relative; overflow:hidden;
  box-shadow:0 30px 70px rgba(124,58,237,.2);
}
.cta-vip-carte::before {
  content:""; position:absolute; inset:-2px; border-radius:var(--radius); padding:2px;
  background:var(--gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.cta-vip-carte .vip-badge { margin-bottom:1.2rem; }
.cta-vip-carte p { color:#fff; max-width:620px; margin-inline:auto; }
.cta-vip-carte .cta-vip-q { font-size:1.3rem; font-weight:700; font-family:"Bricolage Grotesque",sans-serif; letter-spacing:-.01em; margin-bottom:.8rem; }
.cta-vip-carte .btn { margin-top:1.6rem; background:#fff; color:var(--noir); }
.cta-vip-carte .btn:hover { color:#fff; }

/* ---- Panneau de verrouillage VIP (Netlify Identity) ---- */
.vip-lock {
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  padding:clamp(3rem,8vw,6rem) 1.4rem;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(124,58,237,.12), transparent 60%),
    var(--gris);
}
.vip-lock .vip-badge { margin-bottom:1.4rem; }
.vip-lock h2 { font-size:clamp(1.8rem,4vw,2.8rem); }
.vip-lock .btn-secondary { color:var(--noir); }

/* Prompts (blocs ``` ) — réutilisent .prompt-box + bouton « Copier » (app.js) */
.prompt-texte { white-space:pre-wrap; word-break:break-word; }
.article-corps .prompt-box { margin:1.3rem 0; font-size:.95rem; }
.article-corps .prompt-box .prompt-texte { font-family:ui-monospace, "SF Mono", Menlo, monospace; }

/* ---- Consentement RGPD sous les formulaires de capture d'email ---- */
.form-capture .consent {
  flex-basis:100%; display:flex; gap:.55rem; align-items:flex-start;
  font-size:.85rem; line-height:1.4; color:var(--encre-doux); text-align:left; margin-top:.3rem;
}
.form-capture .consent input[type="checkbox"] {
  flex:0 0 auto; width:1.15rem; height:1.15rem; margin-top:.12rem; accent-color:var(--accent-3); cursor:pointer;
}
.form-capture .consent a { color:var(--accent-3); }
.dark .form-capture .consent { color:rgba(255,255,255,.7); }

/* (widget d'aide flottant retiré — Jo est le point d'aide unique du site) */


/* ---- Jo partout : bulle flottante vers la page « Demande à Jo » ---- */
.jo-partout {
  position:fixed; left:1.2rem; bottom:1.2rem; z-index:300;
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--gradient); color:#fff; text-decoration:none;
  font-weight:700; font-size:.95rem; padding:.75rem 1.25rem; border-radius:999px;
  box-shadow:0 8px 28px rgba(255,45,120,.35);
  transition:transform .25s var(--ease-spring), box-shadow .25s;
}
.jo-partout:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 12px 36px rgba(124,58,237,.4); }
@media (max-width:600px) {
  /* La bulle Jo ne doit jamais masquer la dernière ligne du footer (liens
     légaux) : on réserve sa hauteur sous le contenu, safe-area iPhone comprise. */
  body { padding-bottom:calc(4rem + env(safe-area-inset-bottom)); }
  .jo-partout {
    font-size:.85rem; padding:.65rem 1rem;
    left:.8rem; bottom:calc(.8rem + env(safe-area-inset-bottom));
    max-width:calc(100vw - 1.6rem);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}