/* ============================================================
   Socle AD BUILDER : pages publiques d'AD Conseil (landings).
   Inspiré d'adconseil.org : sections pleine largeur nettement différenciées
   (marine / blanc / bleu très clair), bords en biais qui servent aux superpositions,
   cartes blanches en relief (ombres teintées de bleu clair), titres bicolores.
   Un seul thème, choisi : le site n'a pas de mode sombre.
   ============================================================ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/figtree-latin-800-normal.woff2) format('woff2')}
:root{
  /* Couleurs */
  --navy:#132438;        /* texte, fonds sombres */
  --navy-deep:#0E1C2C;   /* barre de maquette, bas de page */
  --navy-l:#183654;      /* fin du dégradé des aplats marine */
  --yellow:#FFCC00;      /* accent sur fond sombre, pictos */
  --blue:#4DB4E8;        /* boutons, accent sur fond clair */
  --blue-h:#3FA6DB;
  --tint:#E8F4FB;        /* sections claires bleutées */
  --tint-2:#D3EBF8;      /* pastilles, zones dans une carte */
  --white:#FFFFFF;
  --ink:#132438;         /* tout le texte : jamais de noir */
  --ink-2:#132438;       /* texte secondaire : marine aussi, jamais de gris (FJL, 29/10/2026) */
  --on-dark:#FFFFFF;
  --on-dark-2:#FFFFFF;   /* sur marine : blanc */
  /* Profondeur : ombres teintées de bleu clair, comme adconseil.org */
  --e1:0 1px 3px rgba(19,36,56,.06), 0 8px 24px rgba(77,180,232,.16);
  --e2:0 2px 6px rgba(19,36,56,.07), 0 18px 44px rgba(77,180,232,.26);
  --e3:0 28px 64px rgba(8,18,30,.38), 0 6px 18px rgba(8,18,30,.22);
  --e-dark:0 26px 60px rgba(5,12,22,.55), 0 8px 18px rgba(5,12,22,.35);   /* sur fond marine : ombre bleu nuit, jamais bleu clair */
  --e-cross:0 2px 6px rgba(19,36,56,.10), 0 30px 56px -22px rgba(77,180,232,.42);   /* carte qui déborde du marine sur un fond clair : contour à peine marqué, halo bleu clair dessous, jamais de gris */
  /* Typographie */
  --f-title:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-hero:clamp(44px, 6vw, 88px);   /* échelle des titres commune à toutes les pages (29/10/2026) */
  --t-h2:clamp(34px, 4.4vw, 64px);
  --t-h3:clamp(20px, 1.8vw, 24px);
  --t-lead:clamp(18px, 1.5vw, 21px);
  --t-body:18px;
  --t-small:15px;
  /* Formes et mouvement */
  --r-card:24px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --edge:clamp(48px, 7vw, 110px);   /* hauteur des bords en biais */
  --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}   /* 0.15.1 : texte pour lecteurs d’écran ; était seulement dans free.css (bulles du pied de page qui débordaient sur les autres pages) */
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink); font:400 var(--t-body)/1.65 var(--f-body); -webkit-font-smoothing:antialiased; overflow-wrap:break-word}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--navy-deep)}
h1,h2,h3,h4{font-family:var(--f-title); color:inherit; margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.08}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ---------- Titres bicolores ---------- */
.hl{color:var(--blue)}
.dark .hl{color:var(--yellow)}
.kick{display:block; font:800 15px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:18px}
.dark .kick{color:var(--yellow)}
.h2{font-size:var(--t-h2); font-weight:800; line-height:1.04; letter-spacing:-.01em}
.lead{font-size:var(--t-lead); color:var(--ink-2); max-width:62ch; margin-top:18px}
.dark .lead{color:var(--on-dark-2)}

/* ---------- Sections ---------- */
.sec{position:relative; padding-block:clamp(72px, 9vw, 120px); overflow-x:clip}
.sec.tint{background:var(--tint)}
.sec.dark{background:var(--navy); color:var(--on-dark)}
.sec.white{background:var(--white)}
.sec-h{max-width:820px; margin-bottom:clamp(36px, 5vw, 56px)}
.sec-h.center{margin-inline:auto; text-align:center}
.sec-h.center .lead{margin-inline:auto}
/* Bord en biais : un triangle de la couleur de la section suivante, posé en bas.
   Les cartes qui doivent chevaucher passent au-dessus (z-index). */
.edge{position:absolute; left:0; right:0; bottom:-1px; height:var(--edge); pointer-events:none; z-index:1}
.edge svg{display:block; width:100%; height:100%}
.sec > .wrap{position:relative; z-index:2}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:var(--r-pill); border:2px solid transparent; font:700 16.5px/1.2 var(--f-body); text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease)}
.btn svg{width:18px; height:18px; flex:none; transition:transform .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn:hover .arr{transform:translateX(3px)}
.btn-p{background:var(--blue); color:var(--navy); box-shadow:0 8px 22px color-mix(in srgb,var(--blue) 38%,transparent)}
.btn-p:hover{background:var(--blue-h); box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 50%,transparent)}
.btn-y{background:var(--yellow); color:var(--navy); box-shadow:0 8px 22px color-mix(in srgb,var(--yellow) 30%,transparent)}
.btn-y:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--yellow) 45%,transparent)}
.btn-w{background:var(--white); color:var(--navy); box-shadow:var(--e1)}
.btn-w:hover{box-shadow:var(--e2)}
.btn-o{background:transparent; color:var(--white); border-color:rgba(255,255,255,.6)}
.btn-o:hover{border-color:var(--white); background:rgba(255,255,255,.06)}
.btn-s{min-height:42px; padding:0 18px; font-size:15px}

/* ---------- En-tête (repris du site, il sera tiré de WordPress) ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--navy); color:#fff; transition:box-shadow .2s var(--ease)}
.top .wrap{max-width:1320px; display:flex; align-items:center; gap:28px; height:80px}
.brand{display:block; flex:none; text-decoration:none}
.brand img{height:26px; width:auto}
.brand .lg-d{display:none}
/* Au défilement, l'en-tête passe en blanc avec le logo sombre, comme adconseil.org */
.top{transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease)}
.top.scrolled{background:var(--white); color:var(--navy); box-shadow:0 8px 28px color-mix(in srgb,var(--blue) 22%,transparent)}
.top.scrolled .lg-c{display:none}
.top.scrolled .lg-d{display:block}
.top.scrolled .burger{border-color:color-mix(in srgb,var(--navy) 25%,transparent)}
.menu{display:flex; gap:26px; margin-left:auto}
.menu a{font:800 13px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:10px 0; white-space:nowrap; transition:color .15s}
.menu a:hover{color:var(--blue)}
.menu a[aria-current]{box-shadow:inset 0 -2px 0 var(--yellow)}
.top .pills{display:flex; gap:10px}
.top .pills a{display:inline-flex; align-items:center; height:42px; padding:0 18px; border-radius:var(--r-pill); font:800 13px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--navy)}
.top .pills .py{background:var(--yellow)}
.top .pills .pb{background:var(--blue)}
.burger{display:none; margin-left:auto; width:46px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.35); background:none; cursor:pointer; place-items:center}
.burger svg{width:22px; height:22px}

/* ---------- Haut de page ---------- */
.hero{position:relative; background:var(--navy); color:var(--on-dark); padding-block:clamp(40px, 5vw, 64px) calc(var(--edge) * .8 + 24px)}   /* assez haut pour que le bord en biais ne touche jamais les boutons */
.hero + .sec{padding-top:calc(clamp(72px, 9vw, 120px) + 110px)}   /* la carte « La séance en bref » déborde sur la section suivante */
.hero-g{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px, 5vw, 72px); align-items:stretch}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--on-dark-2); margin-bottom:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff; text-decoration:underline}
.hero h1{font-size:clamp(40px, 5.2vw, 72px); font-weight:800; line-height:1.02; letter-spacing:-.01em}   /* landing à carte : un cran sous l'échelle commune, pour que la carte déborde toujours ; reste plus gros que les H2 */
.hero .lead{color:var(--on-dark-2); font-size:var(--t-lead)}
.rule{width:140px; height:3px; background:var(--yellow); border-radius:3px; margin:30px 0}
.ctas{display:flex; flex-wrap:wrap; gap:14px}
.hero-ill{position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:80px}
.hero-ill > img{margin-top:-64px}
.hero-ill img{width:100%; max-width:380px; margin-inline:auto}

/* Carte « La séance en bref » : modèle des fiches formation d'adconseil.org.
   Elle déborde du haut de page et chevauche la section suivante (le haut de page passe au-dessus : z-index 3). */
.hero{z-index:3}
.facts{position:relative; z-index:5; width:min(400px,100%); margin:-24px 0 calc(-1 * (var(--edge) + 150px)) auto; background:var(--navy); color:#fff; border-radius:28px; padding:30px 30px 28px; box-shadow:var(--e-cross)}
/* Liseré lumineux : fin, blanc en haut à droite, qui s'efface vers le bas et la gauche */
.facts::before{content:""; position:absolute; inset:-3px; border-radius:31px; padding:3px; pointer-events:none;
  background:linear-gradient(215deg, #FFFFFF 0%, rgba(255,255,255,.75) 16%, rgba(211,235,248,.18) 38%, rgba(211,235,248,0) 52%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.facts ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:16px}
.facts li{display:grid; grid-template-columns:32px 1fr; gap:14px; align-items:start}
.facts li svg{width:26px; height:26px; color:var(--yellow)}
.facts b{display:block; font-size:17px; line-height:1.3}
.facts li span{display:block; font-size:15px; color:var(--on-dark-2); line-height:1.4}
.facts .btn{width:100%}

/* ---------- Cartes en relief ---------- */
.card{background:var(--white); border-radius:var(--r-card); box-shadow:var(--e1)}
a.card, button.card, .card.click{transition:transform .2s var(--ease), box-shadow .2s var(--ease); cursor:pointer}
a.card:hover, button.card:hover, .card.click:hover{transform:translateY(-4px); box-shadow:var(--e2)}
.dark .card, .dark .card:hover{box-shadow:var(--e-dark)}
.dark .btn-p{box-shadow:0 10px 24px rgba(5,12,22,.5)}
.dark .btn-p:hover{box-shadow:0 14px 30px rgba(5,12,22,.6)}
/* Sur une carte blanche, même dans une section marine : ombre bleu clair, comme partout sur fond blanc */
.dark .card .btn-p, .modal .btn-p{box-shadow:0 8px 22px color-mix(in srgb,var(--blue) 38%,transparent)}
.dark .card .btn-p:hover, .modal .btn-p:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 50%,transparent)}
.overlap-out .card, .overlap-out .card:hover{box-shadow:var(--e-cross)}   /* au survol aussi : jamais d’ombre sombre sur un fond clair */

/* Enjeux : 6 cartes, le constat dans un bandeau teinté en bas */
.gains{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0}
.gain{display:grid; grid-template-rows:auto auto auto 1fr; overflow:hidden}
.gain .ic{width:56px; height:56px; border-radius:16px; background:var(--tint); display:grid; place-items:center; margin:-28px 28px 16px; position:relative; box-shadow:0 0 0 6px var(--white)}
.gain .ic svg{width:28px; height:28px; color:var(--blue)}
.gain h3{font-size:var(--t-h3); padding:0 28px; line-height:1.2}
.gain p{padding:12px 28px 24px; color:var(--ink-2); font-size:17px}
.gain .was{min-height:calc(2 * 1.45em + 70px); background:var(--tint); padding:18px 28px 40px; font-size:var(--t-small); color:var(--ink-2); line-height:1.45}
.gain .was b{display:block; font:800 12px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin-bottom:4px}

/* Section sombre : cartes du joker */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(32px,5vw,72px); align-items:center}
.joker3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:56px; list-style:none; padding:0}
.jk{padding:30px; color:var(--ink)}
.jk .n{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--yellow); font:800 20px/1 var(--f-title); color:var(--navy)}
.jk h3{font-size:var(--t-h3); margin:18px 0 10px}
.jk p{color:var(--ink-2); font-size:17px}

/* Cartes qui chevauchent le bord bas d'une section (comme les cartes d'adconseil.org) */
.sec.overlap-out{padding-bottom:var(--edge)}
.overlap-out .joker3{margin-bottom:calc(-1 * (var(--edge) + 90px)); position:relative; z-index:3}
.sec.overlap-out{z-index:3}
.sec.after-overlap{padding-top:calc(var(--edge) + 140px)}
.sec.after-overlap.ao-tight{padding-top:calc(var(--edge) + 110px)}   /* 0.21 : formulaire plus haut (prénom et nom séparés) */

/* ---------- Onglets verticaux ---------- */
.vtabs{display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; align-items:start}
.vtabs [role=tablist]{display:grid; gap:12px}
.vtab{display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:0; border-radius:18px; padding:16px 18px; background:var(--white); box-shadow:var(--e1); font:700 17px/1.25 var(--f-body); cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease)}
.vtab .ti{flex:none; width:40px; height:40px; border-radius:12px; background:var(--tint); display:grid; place-items:center}
.vtab .ti svg{width:20px; height:20px; color:var(--blue)}
.vtab:hover{transform:translateX(4px); box-shadow:var(--e2)}
.vtab[aria-selected="true"]{background:var(--navy); color:#fff; box-shadow:var(--e2); transform:translateX(8px)}
.vtab[aria-selected="true"] .ti{background:var(--yellow)}
.vtab[aria-selected="true"] .ti svg{color:var(--navy)}
.vpanel{padding:34px; box-shadow:var(--e2)}
.vpanel h3{font-size:clamp(22px,2.2vw,28px); margin-bottom:12px}
.vpanel p{color:var(--ink-2)}

/* ---------- FAQ ---------- */
.acc{display:grid; gap:14px; max-width:860px}
.qa{border-radius:var(--r20,20px); box-shadow:var(--e1); background:var(--white); transition:box-shadow .2s var(--ease)}
.qa:hover{box-shadow:var(--e2)}
.qa button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; border:0; background:none; text-align:left; cursor:pointer; font:700 17.5px/1.35 var(--f-body)}
.qa .pm{flex:none; width:34px; height:34px; border-radius:50%; background:var(--tint); display:grid; place-items:center; transition:transform .25s var(--ease), background .2s}
.qa .pm svg{width:18px; height:18px; color:var(--blue)}
.qa button[aria-expanded="true"] .pm{transform:rotate(45deg); background:var(--blue)}
.qa button[aria-expanded="true"] .pm svg{color:var(--navy)}
.qa .a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
.qa .a > div{overflow:hidden; min-height:0}
.qa .a p{padding:0 24px 22px; color:var(--ink-2)}
.qa.open .a{grid-template-rows:1fr}

/* ---------- Carte intervenant·e ---------- */
.member{overflow:hidden; display:grid; grid-template-rows:auto 1fr; align-content:start}
.member .ph{aspect-ratio:4/3; background:var(--tint); display:grid; place-items:center; font:800 56px/1 var(--f-title); color:var(--blue)}
.member .bd{padding:22px 24px 26px}
.member h3{font-size:21px}
.member .tag{display:inline-block; margin:8px 0 12px; padding:5px 12px; border-radius:var(--r-pill); background:var(--tint); font-size:13.5px; font-weight:700; color:var(--navy)}
.member p{font-size:16px; color:var(--ink-2)}

/* ---------- Boutons fixes ---------- */
.fixed{position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:45; display:flex; gap:12px; align-items:center; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.fixed.hide{opacity:0; transform:translateY(14px); pointer-events:none}
.totop{width:52px; height:52px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 10px 24px color-mix(in srgb,var(--blue) 38%,transparent); transition:transform .18s var(--ease)}
.totop:hover{transform:translateY(-3px)}
/* 0.11 : le retour en haut est sorti du groupe fixe (placé à part, apparaît après un peu de défilement) */
.totop{position:fixed; z-index:46; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.totop.on{opacity:1; pointer-events:auto}
.fixed{right:calc(84px + env(safe-area-inset-right,0px))}
.totop svg{width:22px; height:22px}

/* ---------- Apparitions au défilement ----------
   L'élément est visible au repos ; seuls ceux qui sont sous l'écran au chargement
   reçoivent .rv-pre, puis s'animent en entrant. Verticales (up) et horizontales (left / right) alternent. */
.rv-pre{opacity:0}
.rv-pre[data-rv="up"]{transform:translateY(28px)}
.rv-pre[data-rv="left"]{transform:translateX(-40px)}
.rv-pre[data-rv="right"]{transform:translateX(40px)}
.rv-go{transition:opacity .7s var(--ease), transform .7s var(--ease)}

@media (max-width:1100px){
  .menu{display:none}
  .top .pills{margin-left:auto}
}
@media (max-width:900px){
  .hero-g, .split{grid-template-columns:minmax(0,1fr)}
  .hero-ill img{max-width:300px}
  .hero-ill{gap:24px} .hero-ill > img{margin-top:0}
  .facts{margin:0 auto calc(-1 * (var(--edge) + 90px))}
  .gains, .joker3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vtabs{grid-template-columns:minmax(0,1fr)}
  .vtabs [role=tablist]{grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; padding:4px 4px 12px; scrollbar-width:none}
  .vtab:hover, .vtab[aria-selected="true"]{transform:none}
}
@media (max-width:640px){
  body{font-size:17px}
  .brand img{height:22px}
  .top .pills{display:none}
  .burger{display:grid}
  .top .wrap{height:68px}
  .gains, .joker3{grid-template-columns:1fr}
  .ctas .btn{width:100%}
  .facts{padding:24px}
  .vpanel{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .rv-pre{opacity:1!important; transform:none!important}
}

/* Petite animation du haut de page (seulement avec le script, jamais si le système demande moins d'animations) :
   l'illustration glisse en place puis flotte doucement, la carte monte, ses lignes arrivent l'une après l'autre */
.hero-anim .hero-ill > img{animation:heroIn .8s var(--ease) both, heroFloat 7s 1.2s ease-in-out infinite alternate}
.hero-anim .facts{animation:factsIn .7s .25s var(--ease) both}
.hero-anim .facts li{animation:factsLi .45s var(--ease) both}
.hero-anim .facts li:nth-child(1){animation-delay:.45s} .hero-anim .facts li:nth-child(2){animation-delay:.53s} .hero-anim .facts li:nth-child(3){animation-delay:.61s} .hero-anim .facts li:nth-child(4){animation-delay:.69s} .hero-anim .facts li:nth-child(5){animation-delay:.77s}
.hero-anim .facts li svg{animation:factsIc .5s var(--ease) both; animation-delay:inherit}
@keyframes heroIn{from{opacity:0; transform:translate(28px,10px) scale(.97)}}
@keyframes heroFloat{to{transform:translateY(-10px)}}
@keyframes factsIn{from{opacity:0; transform:translateY(36px)}}
@keyframes factsLi{from{opacity:0; transform:translateX(14px)}}
@keyframes factsIc{from{transform:scale(.4) rotate(-20deg)}}
@media (prefers-reduced-motion: reduce){ .hero-anim .hero-ill > img, .hero-anim .facts, .hero-anim .facts li, .hero-anim .facts li svg{animation:none} }
/* Aperçu d'une page de l'éditeur (0.8.2) : un bandeau discret en bas, jamais vu des visiteur·ices */
.apercu{position:fixed; z-index:90; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; max-width:calc(100% - 32px); padding:10px 10px 10px 20px; border-radius:999px; background:var(--navy-deep); color:#fff; font-size:15px; box-shadow:0 14px 40px rgba(5,12,22,.45)}
.apercu b{color:var(--yellow)}
.apercu button{flex:none; min-height:40px; padding:0 16px; border:2px solid #fff; border-radius:999px; background:transparent; color:#fff; font:700 15px/1 var(--f-body); cursor:pointer; transition:background .2s, color .2s}
.apercu button:hover{background:#fff; color:var(--navy)}
@media (max-width:640px){ .apercu{flex-wrap:wrap; border-radius:var(--r20,20px); bottom:10px} .apercu span{flex:1 1 100%} }
/* Écran de connexion (?edit, tableau de bord) : ces règles étaient dans landing.css, que l'écran ne charge pas (0.16) */
.gate{background:var(--tint); min-height:100vh; display:grid; place-items:center; padding:20px}
.gatebox{width:min(440px,100%); padding:32px; display:grid; gap:16px}
.gatebox img{height:26px; width:auto}
.gatebox h1{font-size:26px}
.gatebox .fld{display:grid; gap:8px}
.gatebox input{min-height:50px; padding:12px 16px; border:1px solid #B7C2D3; border-radius:14px; font:400 16.5px/1.4 var(--f-body)}
.gatebox .err{color:#8A1F14; font-weight:600}