/* ================= TOKENS ================= */
/* Tokens de la DA de l'app (profil, parrainage, bibliothèque) : encre #18181b,
   contours #ededed, remplissages doux #f5f5f5, cartes 16px, contrôles en
   pilule. Pas de police mono ni de capitales espacées, graisses 500 (UI) et
   600 (titres). Le vert de marque reste l'accent de la page. */
:root{
  --bg:#FFFFFF;
  --bg-2:#FAFAFA;
  --bg-3:#F5F5F5;
  --ink:#18181b;
  /* Gris d'origine, rétablis le 15/08/2026 à la demande de Nathan : la
     version relevée au seuil AA (#6f6f71 / #6e7177) alourdissait la DA.
     Ces valeurs donnent 4,47:1 et 2,58:1 sur les fonds clairs, donc en
     dessous du minimum AA, et coûtent la note d'accessibilité. Choix
     assumé, ne pas les « corriger » sans lui redemander. */
  --ink-2:#747476;
  --ink-3:#9a9ea5;
  --line:#ededed;
  --line-2:#dcdcde;
  --fill-2:rgba(237,237,237,.5);
  /* Combos pastel de la DA (fond / texte) */
  --green:#10A05A; --green-deep:#0B7A44; --green-soft:#EAF7F0;
  --blue:#4387f4;   --blue-soft:#eaeefe;
  --amber:#dd950a;  --amber-soft:#fdf3d1;
  --red:#e92f2f;    --red-soft:#fee7e7;
  --pitch:#38A55E;
  --pitch-2:#41AE67;
  --tok-red:#E5664E;
  --tok-blue:#5B9BE0;
  --r-sm:8px; --r:10px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  --sh-sm:0 1px 2px rgba(24,24,27,.05);
  --sh:0 1px 2px rgba(24,24,27,.05),0 12px 32px -12px rgba(24,24,27,.10);
  --ring:0 0 0 3px rgba(67,135,244,.35);
  --maxw:1080px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.12;color:var(--ink);}
p{margin:0;text-wrap:pretty;}
img,svg{display:block;}
img{max-width:100%;}
::selection{background:#D9EFE4;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.meta{font-size:12px;line-height:16px;color:var(--ink-3);}

/* ================= BANDEAU ESSAI ================= */
/* Vert de marque d'origine, rétabli à la demande de Nathan. Le texte blanc
   n'y donne que 3,39:1 (le vert profond montait à 5,41:1). */
.announcement{position:absolute;inset:0 0 auto;z-index:100;min-height:42px;padding:5px 14px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.12)}
.announcement-pill{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font-size:13px;font-weight:600;letter-spacing:-.02em}
.announcement-note::before{content:"\00b7";margin-right:8px;color:rgba(255,255,255,.72)}

/* ================= SCRIBBLES (annotations manuscrites façon coach) ================= */
.scribble{font-family:"Caveat",cursive;font-size:23px;font-weight:600;color:var(--green-deep);line-height:1.15;letter-spacing:.01em;pointer-events:none;user-select:none;}
.scribble svg{overflow:visible;flex:none;}
.scribble svg path{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* plan de jeu : à droite du titre, flèche vers les cartes */
.how .sec-head{position:relative;}
/* fonctionnalités : à droite du titre, flèche vers le bento */
#fonctionnalites .sec-head{position:relative;}
.scr-feat{position:absolute;left:calc(100% + 26px);top:44px;white-space:nowrap;transform:rotate(-3deg);}
/* tarifs : au-dessus du plan Pro */
.scr-pro{position:absolute;top:-54px;right:6px;display:flex;align-items:flex-start;gap:5px;transform:rotate(3deg);}
.scr-pro svg{width:24px;margin-top:10px;}
/* bande CTA finale : au-dessus du bouton */
.scr-cta{position:relative;display:inline-block;margin-bottom:36px;transform:rotate(-2deg);}
.scr-cta svg{position:absolute;right:-36px;top:8px;width:28px;transform:scaleX(-1) rotate(-10deg);}
@media(max-width:780px){.scr-pro{display:none;}}
@media(max-width:1000px){.scr-feat{display:none;}}
@media(max-width:600px){
  .scribble{font-size:19px;}
  /* la flèche du CTA final déborde à droite (right:-36px) sur mobile : on la masque.
     Celle du hero reste visible (elle plonge vers le bouton, dans la marge gauche). */
  .scr-cta svg{display:none;}
}

.cz-label{margin-bottom:28px;}

/* ================= REVEAL ================= */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal-group]>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal-group].in>*{opacity:1;transform:none;}
[data-reveal-group].in>*:nth-child(2){transition-delay:.07s;}
[data-reveal-group].in>*:nth-child(3){transition-delay:.14s;}
[data-reveal-group].in>*:nth-child(4){transition-delay:.21s;}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .12s var(--ease);}
.btn svg{width:15px;height:15px;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:#2f2f33;}
.btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--line-2);background:var(--bg-2);}
/* Inscription Google : même pilule contour que .btn-ghost, avec le G en
   couleurs comme sur login.html (sur fond clair, c'est la version de marque). */
.btn-google{background:var(--bg);color:var(--ink);border-color:var(--line);box-shadow:0 1px 2px rgba(11,19,15,.04);transition:background .18s,border-color .18s,box-shadow .24s var(--ease),transform .18s var(--ease);}
.btn-google svg{width:17px;height:17px;transition:transform .3s var(--ease);}
/* Survol : le bouton se soulève d'un cheveu et le G respire. Le survol est
   écouté sur .gsi-host et pas sur le bouton : dès que GIS a pris la main, le
   bouton est en pointer-events:none (c'est l'iframe de Google qui reçoit la
   souris) et son propre :hover ne partirait jamais. Le conteneur, lui, englobe
   l'iframe. Pas de fondu d'opacité, juste un déplacement d'un pixel. */
.btn-google:hover,.gsi-host:hover .btn-google{border-color:var(--line-2);background:var(--bg-2);box-shadow:0 4px 14px rgba(11,19,15,.09);transform:translateY(-1px);}
.btn-google:hover svg,.gsi-host:hover .btn-google svg{transform:scale(1.12);}
.btn-google:active,.gsi-host:active .btn-google{transform:translateY(0) scale(.98);box-shadow:0 1px 2px rgba(11,19,15,.04);}
@media(prefers-reduced-motion:reduce){
  .btn-google,.btn-google svg{transition:none;}
  .btn-google:hover,.gsi-host:hover .btn-google{transform:none;}
  .btn-google:hover svg,.gsi-host:hover .btn-google svg{transform:none;}
}
/* Le bouton officiel de Google (iframe) est posé transparent par-dessus le
   nôtre : Google ignore les clics synthétiques, il lui faut un vrai clic, mais
   le visuel reste celui de la DA. Opacité quasi nulle plutôt que 0 : un élément
   réellement invisible peut être écarté par les heuristiques de Google.
   pointer-events reste désactivé tant que l'iframe n'est pas posée, sinon la
   surcouche vide avalerait les clics et tuerait le bouton. */
.gsi-host{position:relative;display:inline-flex;}
.gsi-overlay{position:absolute;inset:0;overflow:hidden;opacity:.001;z-index:2;pointer-events:none;}
.gsi-overlay > div{transform-origin:top left;}
.gsi-host[data-gsi="on"] .gsi-overlay{pointer-events:auto;}
.gsi-host[data-gsi="on"] .btn-google{pointer-events:none;}
.btn-lg{height:44px;padding:0 22px;font-size:15px;border-radius:var(--r-pill);}
.btn-block{width:100%;}
/* chevron ">" qui devient flèche "→" au survol */
.btn .bar{width:15px;height:15px;overflow:visible;flex:none;transition:transform .28s var(--ease);}
.btn .bar path{stroke-width:2.4;}
.btn .bar .bar-l{opacity:0;transform:scaleX(0);transform-origin:right center;transition:opacity .18s ease,transform .28s var(--ease);}
.btn:hover .bar{transform:translateX(2px);}
.btn:hover .bar .bar-l{opacity:1;transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){.btn .bar,.btn .bar .bar-l{transition:none;}.btn .bar .bar-l{opacity:1;transform:none;}}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-pill);}

/* ================= SECTIONS ================= */
.sec{padding:104px 0;}
.sec-label{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;line-height:16px;font-weight:500;color:var(--ink);}
.sec-head{max-width:640px;margin-bottom:56px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center;}
.sec-title{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1;text-wrap:balance;}
.sec-lead{font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:540px;}

/* ================= NAV ================= */
.nav{position:absolute;top:42px;left:0;right:0;z-index:90;height:60px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;justify-self:start;}
.brand .mark{width:26px;height:26px;}
.bname{font-size:17px;font-weight:600;letter-spacing:-.03em;}
.nav-links{display:flex;align-items:center;gap:2px;justify-self:center;}
.nav-links a{padding:8px 12px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--ink-2);transition:color .15s,background .15s;}
.nav-links a:hover{color:var(--ink);background:var(--bg-3);}
.nav-cta{display:flex;align-items:center;gap:6px;justify-self:end;}
.nav-login{font-size:13.5px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:var(--r-pill);}
.nav-login:hover{color:var(--ink);background:var(--bg-3);}
.nav .btn{height:34px;padding:0 14px;font-size:13.5px;border-radius:var(--r-pill);}
/* mobile : .nav-links masqué ne réserve plus sa colonne, on force le CTA dans la 3e pour qu'il reste à droite */
@media(max-width:860px){.nav-links{display:none;}.nav-login{display:none;}.nav-cta{grid-column:3;}}

/* ================= 1 · HERO (placeholder vidéo : board animé) ================= */
.hero{position:relative;padding:182px 0 72px;text-align:center;}
/* quadrillage interactif en fond (Background Ripple, repris de tacti.app) */
.hero-ripple{position:absolute;inset:0;z-index:1;overflow:hidden;--cell-border:rgba(11,19,15,.07);--cell-fill:rgba(16,169,91,.05);mask-image:radial-gradient(ellipse 90% 72% at 50% -4%,#000 26%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse 90% 72% at 50% -4%,#000 26%,transparent 74%);}
.hero-ripple .rgrid{display:grid;margin-inline:auto;}
.hero-ripple .rcell{border:.5px solid var(--cell-border);background:var(--cell-fill);opacity:.4;transition:opacity .15s ease;will-change:opacity;}
.hero-ripple .rcell:hover{opacity:.95;}
.hero-ripple .rcell.ripple{animation:cell-ripple var(--duration,.2s) ease-out none 1 var(--delay,0s);}
@keyframes cell-ripple{0%{opacity:.4}50%{opacity:.85}to{opacity:.4}}
@media(prefers-reduced-motion:reduce){.hero-ripple .rcell.ripple{animation:none;}}
/* le contenu passe au-dessus et laisse la souris atteindre les cellules */
.hero .wrap{position:relative;z-index:2;pointer-events:none;}
.hero-in{display:flex;flex-direction:column;align-items:center;pointer-events:none;}
.hero-in .badge,.hero-in .hero-cta,.hero-in .proof{pointer-events:auto;}
.badge{display:inline-flex;align-items:center;gap:9px;height:28px;padding:0 12px 0 6px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line-2);font-size:12.5px;font-weight:450;color:var(--ink-2);margin-bottom:26px;}
.badge .tag{display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-deep);font-size:11px;font-weight:600;line-height:1;/* interligne hérité : texte 1 px trop haut dans la pilule (mesuré à l'encre, 4x) */}
.badge .bg-short{display:none;}
.hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.06;max-width:760px;margin-bottom:20px;text-wrap:balance;}
/* Mot encadré animé (Container Text Flip) — repris du hero de tacti.app */
.hero h1 .tflip{display:inline-flex;align-items:baseline;justify-content:center;padding:.1em .32em;border-radius:.26em;background:var(--green);color:#fff;line-height:1;overflow:hidden;vertical-align:baseline;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:width .45s cubic-bezier(.6,.6,0,1);will-change:width;}
.hero h1 .tflip .tword{display:inline-flex;white-space:nowrap;}
.hero h1 .tflip .tletter{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(5px);animation:tletter-in .42s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes tletter-in{to{opacity:1;transform:none;filter:blur(0);}}
@media(prefers-reduced-motion:reduce){.hero h1 .tflip{transition:none;}.hero h1 .tflip .tletter{animation:none;opacity:1;transform:none;filter:none;}}
.hero .lead{font-size:17px;color:var(--ink-2);max-width:600px;line-height:1.65;margin-bottom:30px;text-wrap:balance;}
.hero .lead span{display:inline;}
@media(min-width:900px){.hero .lead{max-width:none;}.hero .lead span{display:block;white-space:nowrap;}}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
/* Arguments d'entrée. Ne partage plus le motif de .pricing-points, resté sur
   la pastille cochée du hero sombre : ici c'est le badge de vérification. */
.hero-note{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--ink-2);}
.hero-note span{display:flex;align-items:center;gap:7px;}
/* Badge de vérification (badge-verifie.svg). 18px et non 16 : la rosette
   festonnée remplit moins sa boîte qu'un disque plein, il faut ces 2px pour
   garder le poids optique de l'ancienne pastille. Le ✓ du HTML est masqué
   par font-size:0 et reste lisible par les lecteurs d'écran. */
.hero-note i{width:18px;height:18px;flex:none;background:url(badge-verifie.svg?v=3) center/contain no-repeat;font-size:0;}
.proof{display:inline-flex;align-items:center;gap:12px;margin-top:34px;}
.proof>span{font-size:13.5px;color:var(--ink-2);text-align:left;line-height:1.4;}
.proof>span b{color:var(--ink);font-weight:600;}
/* Pile d'avatars avec Animated Tooltip (Aceternity) : nom/rôle au survol, le tooltip s'incline selon la souris */
.stack{display:flex;flex:none;}
.stack .av-wrap{position:relative;margin-left:-10px;z-index:1;}
.stack .av-wrap:first-child{margin-left:0;}
.stack .av-wrap:hover{z-index:30;}
.stack .av{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;cursor:pointer;object-fit:cover;box-shadow:0 2px 8px rgba(16,169,91,.18);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.stack .av-wrap:hover .av{transform:scale(1.14) translateY(-2px);}
.stack .av-more{background:#fff;color:var(--green);font-size:15px;font-weight:600;padding-bottom:1px;box-shadow:0 0 0 1px var(--line-2),0 2px 8px rgba(11,19,15,.08);}
.av-tip{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%) translateY(8px) scale(.92);transform-origin:bottom center;background:#282829;border-radius:9px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 10px 30px rgba(11,19,15,.28);transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);}
.av-wrap:hover .av-tip{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.av-tip::before{content:"";position:absolute;left:18%;bottom:0;height:1.5px;width:40%;background:linear-gradient(90deg,transparent,#10A95B,transparent);}
.av-tip::after{content:"";position:absolute;right:14%;bottom:0;height:1.5px;width:50%;background:linear-gradient(90deg,transparent,#5B9BE0,transparent);}
.av-tip .nm{font-size:12px;font-weight:600;color:#fff;line-height:1.25;}
.av-tip .rl{font-size:10.5px;font-weight:450;color:rgba(255,255,255,.7);line-height:1.25;}
/* Pastille "en ligne" pulsée — reprise du hero de tacti.app */
.av-online{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid var(--bg);box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:av-pulse 2.4s cubic-bezier(.66,0,0,1) infinite;z-index:2;pointer-events:none;}
@keyframes av-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55),0 0 7px 1px rgba(34,197,94,.6);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0),0 0 9px 2px rgba(34,197,94,.7);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0),0 0 7px 1px rgba(34,197,94,.6);}}
@media(prefers-reduced-motion:reduce){.av-online{animation:none;box-shadow:0 0 8px 1.5px rgba(34,197,94,.65);}}
@media(max-width:600px){
  .announcement{gap:5px;padding:4px 7px;font-size:10px;}
  .announcement-pill{min-height:28px;padding:0 9px;font-size:11px;}
  .announcement-note::before{margin-right:5px;}
  .hero{padding:154px 0 48px;}
  /* libellé raccourci sur mobile pour que la pilule tienne sur une seule ligne */
  .badge{max-width:100%;white-space:nowrap;}
  .badge .bg-full{display:none;}
  .badge .bg-short{display:inline;}
  .hero .lead{font-size:15.5px;}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;}
  .hero-cta .btn{width:100%;height:46px;}
  .hero-cta .gsi-host{width:100%;}  /* sinon la surcouche Google ne couvre plus le bouton étiré */
  .proof{flex-direction:column;gap:10px;max-width:100%;}
  .proof>span{text-align:center;text-wrap:balance;}
  .sec{padding:72px 0;}
  .sec-head{margin-bottom:40px;}
  .itg-band{margin-top:72px;}
  .cta-band{padding:72px 0;}
}
@media(max-width:420px){
  .wrap{padding:0 20px;}
  .nav-inner{padding:0 20px;}
}

/* ================= STAGE (le board qui se construit — future vidéo) ================= */
.stage{position:relative;z-index:2;max-width:960px;margin:56px auto 0;padding:0 24px;opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s;}
.loaded .stage{opacity:1;transform:none;}
.frame{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);padding:8px;box-shadow:var(--sh);}
.frame-bar{display:flex;align-items:center;gap:5px;padding:6px 8px 12px;}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line);}
.frame-title{margin-left:10px;font-size:11px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;}
.frame-save{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--green-deep);background:var(--green-soft);border-radius:var(--r-pill);padding:5px 11px;}
.frame-save svg{width:11px;height:11px;}
.board{position:relative;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--pitch-2),var(--pitch) 72%);}
.board>svg{display:block;width:100%;height:auto;}
.palette{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:3px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);padding:5px;box-shadow:var(--sh-sm);}
.palette span{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.palette span img{height:20px;width:auto;}
.palette span.on{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green);}
.palette span:hover{background:var(--bg-3);}
@media(max-width:640px){.palette{display:none;}}
.ob{opacity:0;transform-box:fill-box;transform-origin:center;}
.ob.on{opacity:1;animation:drop .5s var(--spring);}
@keyframes drop{0%{transform:scale(.3) translateY(-8px)}100%{transform:scale(1) translateY(0)}}
.zone{stroke-dasharray:12 10;stroke-dashoffset:1770;transition:stroke-dashoffset 1.1s ease-in-out;}
.zone.on{stroke-dashoffset:0;}
.pass{stroke-dasharray:7 8;opacity:0;}
.pass.on{opacity:1;animation:passdraw .5s ease-out both;}
@keyframes passdraw{from{stroke-dashoffset:170}to{stroke-dashoffset:0}}
.tok-g{opacity:0;transform-box:fill-box;transform-origin:center;}
.tok-g.on{opacity:1;animation:drop .45s var(--spring);}
#ballG{opacity:0;transition:transform .48s cubic-bezier(.45,0,.35,1);}
#ballG.on{opacity:1;}
#ballG.on #ballImg{animation:roll 1.4s linear infinite;}
@keyframes roll{to{transform:rotate(360deg)}}
.goal-hit{animation:shake .5s ease;}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,0)}}
.cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;}
.cursor.on{opacity:1;}
.cursor.dim{opacity:0;}
.cursor img{width:19px;height:19px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.cursor .tag{position:absolute;left:14px;top:16px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;}
.cursor.clicking img{animation:clickpulse .3s ease;}
@keyframes clickpulse{50%{transform:scale(.78)}}
.toast{position:absolute;right:20px;bottom:64px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:500;box-shadow:var(--sh-sm);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:4;}
.toast .tick{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;flex:none;}
.toast.on{opacity:1;transform:none;}
@media(max-width:600px){
  .stage{margin-top:40px;padding:0 18px;}
  .frame{padding:6px;border-radius:var(--r-lg);}
  .frame-bar{padding:4px 6px 9px;}
  .frame-bar i{width:8px;height:8px;}
  .frame-save{font-size:11px;padding:4px 9px;}
  .cursor .tag{display:none;}
  .toast{right:10px;bottom:10px;font-size:11.5px;padding:7px 11px;}
}

/* ================= 1b · COMMENT ÇA MARCHE (process d'une séance, façon cal.com) ================= */
.how{position:relative;z-index:2;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:104px;box-shadow:0 -104px 0 var(--bg);}
.how .sec-head{margin-bottom:30px;}
.how-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}
/* carrousel horizontal (drag-to-scroll, façon superwhisper) : pleine largeur viewport, cards alignées sur le wrap */
.how-carousel{display:flex;align-items:stretch;gap:16px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:4px calc(50vw - 50%) 8px;cursor:grab;user-select:none;-webkit-user-select:none;scrollbar-width:none;-ms-overflow-style:none;}
.how-carousel::-webkit-scrollbar{display:none;}
/* snap CSS réservé au tactile : à la souris, "x mandatory" capture la molette et bloque le scroll vertical de la page (Chrome/Safari) ; le JS drag-to-scroll gère déjà le recentrage */
@media (pointer:coarse){ .how-carousel{scroll-snap-type:x mandatory;} }
.how-carousel:active{cursor:grabbing;}
.how-carousel.dragging{cursor:grabbing;scroll-behavior:auto;}
.how-carousel.dragging,.how-carousel.settling{scroll-snap-type:none;}
.how-carousel.dragging .hw-card{pointer-events:none;}
.how-carousel img{-webkit-user-drag:none;user-drag:none;}
.hw-card{flex:none;width:clamp(280px,82vw,320px);min-height:400px;scroll-snap-align:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s;}
.hw-card:hover{border-color:var(--line-2);}
/* les cards sont visibles d'emblée : data-reveal ne sert qu'à recevoir .in, le trigger des animations internes */
.hw-card[data-reveal]{opacity:1;transform:none;transition:border-color .25s;}
.hw-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
/* numéro d'étape = jeton de joueur du board (liseré blanc), vert Tacti */
/* Numérotation : le badge « Étape » de la page parrainage (pilule blanche à
   contour, texte bleu), en cercle pour tenir un chiffre seul. */
.hw-num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(24,24,27,.22),0 0 0 1px rgba(24,24,27,.06);font-family:var(--font);font-size:14.5px;font-weight:600;color:#fff;}
.hw-card h3{font-size:17px;letter-spacing:-.34px;}
.hw-card p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);}
.hw-art{position:relative;flex:1;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);min-height:150px;overflow:hidden;}
/* 01 · procédé : capture de l'éditeur, pleine largeur jusqu'aux bords hauts de la card */
.hw-shot{position:relative;flex:none;margin:-24px -24px 12px;border:0;border-radius:23px 23px 0 0;background:var(--bg);min-height:0;}
.hw-shot .hws-bg{display:block;width:100%;height:auto;border-radius:inherit;}
/* pions et ballon posés un à un sur le terrain à l'apparition de la card */
.hw-pion{position:absolute;height:auto;transform:scale(0);transform-origin:50% 85%;will-change:transform;}
.hw-card.in .hw-pion{animation:hwpop .5s cubic-bezier(.34,1.6,.64,1) var(--d,0s) both;}
@keyframes hwpop{from{transform:scale(0)}to{transform:scale(1)}}
/* 02 · bibliothèque : les cards se rangent une à une, puis la main arrive */
.hws-sp{display:block;width:100%;height:auto;}
/* calques génériques des scènes 3 et 4 : statique, ou fondu simple */
.hw-lay{position:absolute;height:auto;}
.hw-fade{position:absolute;opacity:0;}
.hw-card.in .hw-fade{animation:hwfade .45s var(--ease) var(--d,0s) both;}
@keyframes hwfade{from{opacity:0}to{opacity:1}}
.hw-lib{position:absolute;height:auto;opacity:0;transform:scale(.5);transform-origin:50% 70%;will-change:transform,opacity;}
.hw-card.in .hw-lib{animation:hwlib .45s cubic-bezier(.3,1.4,.6,1) var(--d,0s) both;}
@keyframes hwlib{from{opacity:0;transform:scale(.5)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
.hw-hand{position:absolute;height:auto;opacity:0;will-change:transform,opacity;}
.hw-card.in .hw-hand{animation:hwhand .5s var(--ease) var(--d,0s) both;}
@keyframes hwhand{from{opacity:0;transform:translate(18px,18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hw-pion,.hw-lib,.hw-hand,.hw-fade,.hw-cursor,.hw-bar{transform:none;opacity:1;animation:none!important;}}
/* 06 · saison (frise des cycles) */
/* rangées communes (02 · 03 · 04) */
/* 04 · bilan */
/* 05 · bilans : les éléments apparaissent d'abord (pop hw-lib), puis le curseur glisse
   de la 1re à la 5e étoile avec l'ease maison ; les délais d'allumage des étoiles sont
   calculés sur la courbe cubic-bezier(.2,0,0,1) pour rester sous le curseur */
.hw-cursor{position:absolute;height:auto;opacity:0;}
.hw-card.in .hw-cursor{animation:hwslide .78s var(--ease) .85s both;}
@keyframes hwslide{0%{opacity:0;transform:translateX(-202%)}8%{opacity:1}100%{opacity:1;transform:none}}
.hw-bar{position:absolute;height:auto;transform:scaleX(0);transform-origin:0 50%;}
.hw-card.in .hw-bar{animation:hwbar .9s var(--ease) var(--d,0s) both;}
@keyframes hwbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:600px){
  .how{margin-top:72px;}
  .how-cta{margin-bottom:40px;}
  .how-carousel{gap:12px;}
  .hw-card{width:84vw;padding:20px;min-height:360px;}
  .hw-card h3{font-size:16px;}
  .hw-art{margin-bottom:16px;min-height:130px;}
  .hw-shot{margin:-20px -20px 12px;min-height:0;}
}

/* ================= 2 · FONCTIONNALITÉS (bento) ================= */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
.cell{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:border-color .25s;}
.cell:hover{border-color:var(--line-2);}
.cell-pad{padding:26px 26px 0;}
.cell .k{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-2);margin-bottom:10px;}
.cell h3{font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;}
.cell p{margin-top:7px;font-size:14px;color:var(--ink-2);max-width:56ch;}
.pro-chip{font-size:9.5px;letter-spacing:.06em;background:var(--ink);color:#fff;border-radius:5px;padding:2.5px 7px;font-weight:500;}
.c-7{grid-column:span 7;}.c-5{grid-column:span 5;}
@media(max-width:900px){.c-7,.c-5{grid-column:span 12;}}
/* mock éditeur */
.ed-mock{margin:24px 26px 26px;margin-top:auto;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:48px 1fr 160px;background:var(--bg-2);min-height:280px;}
.ed-tools{background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0;}
.ed-tools span{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.ed-tools span img{height:17px;width:auto;}
.ed-tools span.on{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green);}
.ed-pitch{position:relative;background:radial-gradient(130% 110% at 50% 0%,var(--pitch-2),var(--pitch));overflow:hidden;}
.ed-pitch .ep-zone{position:absolute;inset:16% 14%;border:2px dashed rgba(255,255,255,.8);border-radius:6px;}
.ed-pitch img{position:absolute;}
.ep-c1{height:30px;left:22%;top:26%;}
.ep-c2{height:30px;left:46%;top:48%;}
.ep-c3{height:30px;left:70%;top:26%;}
.ep-ball{height:22px;left:32%;bottom:18%;}
.ep-hoop{height:34px;right:20%;bottom:20%;}
.ed-drag{position:absolute;left:46%;top:48%;width:40px;height:40px;margin:-6px;border:1.5px dashed #fff;border-radius:8px;opacity:.9;}
.ed-drag::after{content:"";position:absolute;right:-13px;bottom:-13px;width:18px;height:18px;background:url("cursor-drag.svg") no-repeat center/contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));}
.cell:hover .ep-c2,.cell:hover .ed-drag{transform:translate(9px,-7px);}
.ep-c2,.ed-drag{transition:transform .6s var(--ease);}
.ed-props{background:var(--bg);border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:9px;}
.ed-props .pr-l{font-size:10px;line-height:14px;font-weight:500;color:var(--ink-3);}
.ed-props .pr-v{font-size:11.5px;font-weight:500;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:6px 9px;}
.ed-props .pr-tags{display:flex;flex-wrap:wrap;gap:4px;}
.ed-props .pr-tags i{font-style:normal;font-size:10px;padding:3px 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-deep);}
.ed-props .pr-save{margin-top:auto;background:var(--ink);color:#fff;font-size:11px;font-weight:500;text-align:center;border-radius:7px;padding:7px;}
@media(max-width:640px){.ed-mock{grid-template-columns:1fr;}.ed-tools{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);padding:7px 10px;}.ed-props{display:none;}.ed-pitch{min-height:210px;}}
/* mock bibliothèque */
.lib{margin:24px 26px 26px;margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.lib-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:12.5px;color:var(--ink-3);background:var(--bg-2);white-space:nowrap;overflow:hidden;min-width:0;}
.lib-search svg{width:13px;height:13px;flex:none;}
.lib-search .cl{margin-left:auto;display:flex;gap:4px;}
.lib-search .cl i{font-style:normal;font-size:10px;padding:2.5px 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-deep);}
@media(max-width:480px){.lib-search .cl{display:none;}}
.lib-card{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 11px;transition:transform .3s var(--ease),border-color .3s;}
.lib-card:hover{transform:translateX(4px);border-color:var(--line-2);}
.lc-pitch{width:66px;height:46px;border-radius:7px;background:radial-gradient(120% 120% at 50% 0%,var(--pitch-2),var(--pitch));flex:none;position:relative;overflow:hidden;}
.lc-pitch img{position:absolute;}
.lc-t{display:block;font-size:13px;font-weight:500;line-height:1.3;}
.lc-s{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.03em;margin-top:2px;}
.lc-fav{margin-left:auto;color:var(--line-2);font-size:14px;}
.lib-card:nth-child(3) .lc-fav{color:#E8B93B;}
.lib-import{display:flex;align-items:center;gap:9px;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:9px 13px;font-size:12px;color:var(--ink-2);background:var(--bg-2);}
.lib-import svg{width:14px;height:14px;flex:none;color:var(--green-deep);}
.lib-import .meta{margin-left:auto;}
/* mock animateur */
.an-mock{margin:24px 26px 26px;margin-top:auto;border-radius:var(--r-lg);overflow:hidden;position:relative;background:radial-gradient(130% 120% at 50% 0%,var(--pitch-2),var(--pitch));min-height:230px;flex:1;}
.an-mock .an-zone{position:absolute;inset:18% 16% 28%;border:2px dashed rgba(255,255,255,.7);border-radius:8px;}
.an-mock img.an-c{height:30px;position:absolute;}
.an-c1{left:24%;top:24%;}.an-c2{right:24%;top:24%;}.an-c3{left:47%;bottom:34%;}
.an-ball{height:23px;position:absolute;left:24%;top:44%;animation:tri 4.5s ease-in-out infinite;}
@keyframes tri{0%,100%{left:24%;top:44%}33%{left:68%;top:44%}66%{left:46%;top:26%}}
.an-bar{position:absolute;left:12px;right:12px;bottom:11px;background:rgba(255,255,255,.96);border-radius:9px;padding:8px 12px;display:flex;align-items:center;gap:10px;}
.an-bar .play{width:22px;height:22px;border-radius:50%;background:var(--ink);flex:none;position:relative;}
.an-bar .play::after{content:"";position:absolute;left:8.5px;top:6.5px;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;}
.an-bar .rail{flex:1;height:3.5px;border-radius:99px;background:var(--bg-3);position:relative;}
.an-bar .rail i{position:absolute;inset:0;width:30%;border-radius:var(--r-pill);background:var(--green);animation:scrub 4.5s ease-in-out infinite;}
@keyframes scrub{0%,100%{width:8%}50%{width:92%}}
.an-bar .tc{font-size:10px;color:var(--ink-3);}
/* mock séance */
.se-mock{margin:24px 26px 26px;margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.se-row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 13px;transition:transform .3s var(--ease),border-color .3s;}
.se-row:hover{transform:translateX(4px);border-color:var(--line-2);}
.se-dur{font-size:11px;color:var(--green-deep);background:var(--green-soft);border-radius:var(--r-pill);padding:3px 9px;flex:none;}
.se-name{display:block;font-size:13px;font-weight:500;}
.se-kind{display:block;font-size:10px;line-height:14px;color:var(--ink-3);margin-top:2px;}
.se-obj{margin-left:auto;display:flex;gap:5px;align-items:center;}
.se-obj img{height:15px;width:auto;}
.se-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:3px 3px 0;font-size:12px;color:var(--ink-3);}
.se-foot .link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green-deep);background:var(--green-soft);border-radius:var(--r-pill);padding:5px 10px;}
@media(max-width:600px){
  .cell-pad{padding:22px 20px 0;}
  .ed-mock,.lib,.an-mock,.se-mock{margin-left:20px;margin-right:20px;margin-bottom:20px;}
  .se-obj{display:none;}
}
/* mock rex (retour d'expérience) */
.rex-mock{margin:24px 26px 26px;margin-top:auto;display:flex;flex-direction:column;gap:10px;}
.rex-rate{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;background:var(--bg);}
.rex-rate .lbl{font-size:12.5px;font-weight:500;flex:1;}
.rate-dots{display:flex;gap:7px;}
.rate-dots i{width:20px;height:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);transition:all .35s var(--spring);}
.cell.in .rate-dots i:nth-child(-n+4){background:var(--green);border-color:var(--green);}
.cell.in .rate-dots i:nth-child(2){transition-delay:.1s;}
.cell.in .rate-dots i:nth-child(3){transition-delay:.2s;}
.cell.in .rate-dots i:nth-child(4){transition-delay:.3s;}
.rex-spark{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;background:var(--bg);}
.rex-spark .cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.rex-spark .cap b{font-size:12.5px;font-weight:500;}
.rex-spark svg{width:100%;height:auto;overflow:visible;}
.spark{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.3s var(--ease) .25s;}
.cell.in .spark{stroke-dashoffset:0;}
/* mock saison */
.pl-mock{margin:24px 26px 26px;margin-top:auto;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:var(--bg);}
.pl-head{display:flex;align-items:baseline;gap:9px;}
.pl-head b{font-size:13.5px;font-weight:600;}
.pl-head span{font-size:10px;color:var(--ink-3);}
.pl-cats{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap;}
.pl-cats i{font-style:normal;font-size:10px;padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2);}
.pl-cats i.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.pl-weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;}
.pl-w{border-radius:9px;padding:8px 9px;font-size:9.5px;line-height:1.35;border:1px solid transparent;}
.pl-w b{display:block;font-size:9.5px;font-weight:500;opacity:.65;margin-bottom:2px;}
.pl-w span{font-weight:500;display:block;}
.pl-w.t-b{background:#EEF3FD;color:#2B54B8;}
.pl-w.t-g{background:#EAF6EF;color:#0C7A44;}
.pl-w.t-r{background:#FDEFED;color:#C03535;}
.pl-w.t-y{background:#FBF4E1;color:#96700F;}
.pl-w.now{border-color:var(--ink);}
.pl-bal{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;}
.pl-bal .bl{display:flex;align-items:center;gap:9px;font-size:10px;margin-top:7px;color:var(--ink-2);}
.pl-bal .bl i{font-style:normal;width:80px;flex:none;}
.pl-bal .bar{flex:1;height:5px;border-radius:99px;background:var(--bg-3);overflow:hidden;}
.pl-bal .bar b{display:block;height:100%;border-radius:99px;transform:scaleX(.1);transform-origin:left;transition:transform 1.1s var(--ease) .3s;}
.cell.in .pl-bal .bar b{transform:scaleX(1);}
.pl-bal .bl:nth-child(3) .bar b{transition-delay:.45s;}
.pl-bal .bl:nth-child(4) .bar b{transition-delay:.6s;}
@media(max-width:600px){.pl-weeks{grid-template-columns:1fr 1fr;}.pl-bal .bl i{width:64px;}}

/* ================= 3 · CITATION (scroll-reveal) ================= */
/* la section chevauche « Le plan de jeu » (z-index supérieur) : le sticky s'épingle
   pendant que la section précédente est encore à l'écran, elle se lève comme un rideau
   et découvre la citation. 270vh = 100vh de rideau + 70vh de reveal des mots. */
.causerie{position:relative;z-index:1;height:270vh;margin-top:-100vh;}
.cz-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.causerie.cz-open .cz-sticky{pointer-events:auto;}
.causerie .wrap{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;pointer-events:none;will-change:transform;}
/* déclinaison du quadrillage pour la citation : fondu centré */
.cz-ripple{mask-image:radial-gradient(ellipse 85% 78% at 50% 50%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 85% 78% at 50% 50%,#000 30%,transparent 78%);}
.causerie blockquote{margin:0;font-weight:600;font-size:clamp(24px,3.8vw,44px);line-height:1.2;letter-spacing:-.03em;max-width:860px;text-wrap:balance;}
.causerie .qw{color:#D6D8DB;transition:color .28s ease;}
.causerie .qw.lit{color:var(--ink);}
/* Vert propre à la citation, plus doux que le --green-deep de la DA. */
.causerie .hl .qw.lit{color:#499e61;}
.cz-by{margin-top:38px;display:flex;align-items:center;gap:12px;}
.cz-av{position:relative;display:inline-flex;flex:none;}
.cz-by img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2);}
.cz-by div{text-align:left;line-height:1.35;}
.cz-by b{display:block;font-size:14px;font-weight:600;}
.cz-by span{font-size:11px;color:var(--ink-3);}
@media(max-width:600px){.causerie{height:250vh;}.cz-by{margin-top:30px;}}
@media(prefers-reduced-motion:reduce){
  .causerie{height:auto;margin-top:0;padding:96px 0;}
  .cz-sticky{position:static;height:auto;pointer-events:auto;}
  .causerie .qw{color:var(--ink);}
  .causerie .hl .qw{color:#499e61;}
}

/* ================= 1 · VIDÉO DE PRÉSENTATION (héro) =================
   Le ratio est celui du fichier (1440 × 934), pas un 16/9 arbitraire :
   la boîte réserve donc exactement la place de la vidéo et rien ne
   bouge quand l'affiche se charge. */
/* pointer-events:none : sans contrôles, un clic droit proposerait quand même
   « Afficher les contrôles » ou « Télécharger ». La vidéo devient inerte,
   c'est une image qui bouge, rien de plus. */
.video-hero{display:block;width:100%;height:auto;aspect-ratio:1792/1164;background:var(--bg-2);border-radius:calc(var(--r-xl) - 8px);pointer-events:none;}

/* ================= EMPLACEMENTS VIDÉO EN ATTENTE ================= */
.video-hero-slot{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;background:var(--bg-2);padding:28px;}
.video-soon{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 28px;border:1.5px dashed var(--line-2);border-radius:var(--r-xl);background:var(--bg-2);}
.vs-txt{margin:0;font-size:15.5px;font-weight:500;color:var(--ink);max-width:520px;}
.vs-sub{margin:0 0 14px;font-size:14px;color:var(--ink-2);}
.vs-in-frame{max-width:none;height:100%;justify-content:center;border:0;border-radius:0;}
/* ================= 2b · L'ATELIER (créateur + animateur) ================= */
.atelier-video-wrap{max-width:880px;margin:0 auto;aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2);box-shadow:0 1px 2px rgba(24,24,27,.04),0 24px 48px -24px rgba(24,24,27,.14);}
.atelier-video{display:block;width:100%;height:100%;object-fit:cover;}
.atelier-grid{max-width:880px;margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 44px;}
.at-act{text-align:center;}
.at-act .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-2);margin-bottom:10px;}
.at-act h3{margin:0 0 8px;font-size:19px;letter-spacing:-.38px;}
.at-act p{margin:0 auto;max-width:400px;font-size:14.5px;line-height:1.6;color:var(--ink-2);}
@media(max-width:720px){.atelier-grid{grid-template-columns:1fr;gap:26px;}.atelier-video-wrap{border-radius:var(--r-lg);}}
/* ================= 4 · LA DIFFÉRENCE (table hairlines) ================= */
.diff{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;}
.dcell{padding:30px 28px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-height:200px;}
.dcell:nth-child(3n){border-right:none;}
.dcell .ic{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.dcell .ic svg{width:17px;height:17px;}
.dcell h3{font-size:15.5px;letter-spacing:-.015em;}
.dcell p{font-size:13.5px;color:var(--ink-2);}
.dcell .kbd-row{display:flex;align-items:center;gap:5px;height:36px;}
kbd{font-size:11px;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:4px 8px;min-width:26px;text-align:center;}
.dcell:nth-child(n+7){border-bottom:none;}
.dcell.dcell-cta{justify-content:center;align-items:flex-start;gap:10px;background:var(--bg-2);grid-column:1/-1;border-right:none;min-height:0;padding-top:22px;padding-bottom:24px;}
.dcell-cta p{font-size:14px;color:var(--ink-2);}
.dcell-cta a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--ink);}
.dcell-cta a:hover{color:var(--green-deep);}
.dcell-cta a svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.dcell-cta a:hover svg{transform:translateX(3px);}
@media(max-width:860px){
  .diff-grid{grid-template-columns:1fr 1fr;}
  .dcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:0;}
  .dcell:nth-child(3n){border-right:1px solid var(--line);}
  .dcell:nth-child(2n){border-right:none;}
  .dcell:nth-child(n+7){border-bottom:1px solid var(--line);}
  .dcell.dcell-cta{grid-column:1/-1;border-bottom:none;}
}
@media(max-width:540px){
  .diff-grid{grid-template-columns:1fr;}
  .dcell{border-right:none!important;border-bottom:1px solid var(--line)!important;}
  .dcell:last-child{border-bottom:none!important;}
}

/* ================= 5 · INTÉGRATIONS (grille de tuiles, façon Dub) ================= */
.itg-band{position:relative;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;min-height:448px;display:flex;align-items:center;margin-top:104px;}
.itg-band .wrap{position:relative;z-index:2;width:100%;pointer-events:none;}
.itg-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:430px;padding:48px 0;pointer-events:auto;}
.itg-copy .sec-lead{margin:0;}
.itg-copy .btn{margin-top:16px;background:var(--bg);}
/* calque ancré au bord droit : quadrillage fin 14×8, une tuile = une case */
.itg-gridlayer{--cell:64px;position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:1;display:grid;grid-template-columns:repeat(14,var(--cell));grid-template-rows:repeat(6,var(--cell));}
.itg-gridlayer::before{content:"";position:absolute;inset:calc(-1*var(--cell)) 0;background-image:linear-gradient(to right,rgba(24,24,27,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(24,24,27,.05) 1px,transparent 1px);background-size:var(--cell) var(--cell);pointer-events:none;mask-image:linear-gradient(to right,transparent 0,#000 24%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);}
.itg-tile{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-lg);grid-area:var(--d);}
.itg-tile.app{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(24,24,27,.07),0 3px 4.2px rgba(0,0,0,.09);transition:transform .35s var(--spring),box-shadow .35s,border-color .25s;}
.itg-tile.app:hover{transform:translateY(-5px) scale(1.07);border-color:var(--line-2);box-shadow:var(--sh);z-index:3;}
.itg-tile.app img,.itg-tile.app svg{width:58%;height:58%;object-fit:contain;transition:transform .35s var(--spring);}
.itg-tile.app:hover img,.itg-tile.app:hover svg{transform:scale(1.12);}
@media(prefers-reduced-motion:reduce){.itg-tile.app,.itg-tile.app img,.itg-tile.app svg{transition:none;}.itg-tile.app:hover{transform:none;}.itg-tile.app:hover img,.itg-tile.app:hover svg{transform:none;}}
.itg-tile.ghost{background:var(--bg-2);border:1px solid var(--line-2);box-shadow:inset 0 1px 4.2px rgba(0,0,0,.04),inset 0 1px 6.1px rgba(0,0,0,.03);}
/* logo TeamPulse : image pleine case (le PNG contient déjà sa propre tuile) */
.itg-tile.fill{overflow:hidden;}
.itg-tile.fill img{width:calc(100% + 6px);height:calc(100% + 6px);max-width:none;flex:none;object-fit:cover;}
@media(max-width:1120px){
  .itg-band{display:block;min-height:0;padding:72px 0 64px;}
  .itg-copy{padding:0;max-width:560px;margin-top:48px;}
  .itg-gridlayer{--cell:48px;position:relative;top:auto;right:auto;left:50%;transform:translateX(-50%);margin-top:48px;}
  .itg-gridlayer::before{inset:0;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);}
  .itg-tile{border-radius:var(--r-lg);}
}
@media(max-width:672px){
  /* téléphone : composition dédiée 7×5 (--m), cellules 48px. Couche centrée
     par largeur fixe + marges auto (jamais par justify-content : les lignes
     du ::before sont calées au pas des cellules). Les lignes débordent en
     largeur par multiples de cellule et se dissolvent en haut et en bas
     pour éviter la coupure nette avec le texte. */
  .itg-band{padding-top:16px;}
  .itg-gridlayer{--cell:48px;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(5,var(--cell));width:calc(7*var(--cell));left:auto;transform:none;margin:8px auto 0;}
  .itg-gridlayer::before{inset:0 calc(-4*var(--cell));}
  .itg-gridlayer::after{content:"";position:absolute;inset:0 calc(-4*var(--cell));background:linear-gradient(to bottom,var(--bg-2),rgba(250,250,251,0) 26%,rgba(250,250,251,0) 72%,var(--bg-2));pointer-events:none;}
  .itg-tile{grid-area:var(--m);border-radius:var(--r-lg);}
}

/* ================= 5b · AVIS TRUSTPILOT (mur de cartes) ================= */
.tw{position:relative;padding:100px 0 106px;background:#08090A;overflow:hidden;}
.tw .wrap{position:relative;z-index:1;}
.tw .sec-head{margin-bottom:20px;max-width:720px;}
.tw .sec-title{color:#fff;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.035em;}
.tw .sec-lead{color:rgba(255,255,255,.6);max-width:600px;}
.tw .sec-label{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.18);}

/* bandeau de note globale */
.tw-score{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 auto 52px;}
.tw-brand{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:15px;font-weight:600;letter-spacing:-.02em;}
.tw-brand svg{width:19px;height:19px;flex:none;}
.tw-score .tw-stars{--sq:22px;}
.tw-score-txt{font-size:13.5px;color:rgba(255,255,255,.62);}
.tw-score-txt b{color:#fff;font-weight:600;}
.tw-score-sep{width:1px;height:18px;background:rgba(255,255,255,.14);}

/* étoiles Trustpilot */
.tw-stars{--sq:18px;display:inline-flex;gap:2px;flex:none;}
.tw-stars i{width:var(--sq);height:var(--sq);border-radius:2px;background:#00B67A;display:block;position:relative;}
.tw-stars i.off{background:rgba(255,255,255,.16);}
.tw-stars i::after{content:"";position:absolute;inset:10% 14% 18%;background:#fff;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;}
.tw-stars{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 7.3 7.9.6-6 5.1 1.8 7.8L12 18.2 5.2 22.4 7 14.6l-6-5.1 7.9-.6z' fill='%23000'/%3E%3C/svg%3E");}

/* Mur de cartes en maçonnerie : la 1re rangée est à ras du haut, les suivantes
   se calent sous la carte du dessus, avec 16 px partout.
   Le multi-colonnes ci-dessous n'est que le repli sans JS (WebKit décale
   parfois le haut d'une colonne). Dès que le script tourne, .is-masonry prend
   le relais : des colonnes flex remplies carte par carte, identiques partout. */
.tw-wall{columns:4;column-gap:16px;}
.tw-wall.is-masonry{columns:auto;display:flex;align-items:flex-start;gap:16px;}
.tw-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;}
.tw-wall.is-masonry .tw-card{margin:0;}
.tw-card{margin:0 0 16px;break-inside:avoid;-webkit-column-break-inside:avoid;background:#121315;border:1px solid rgba(255,255,255,.075);border-radius:var(--r-lg);padding:18px;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);}
.tw-card:hover{background:#17181B;border-color:rgba(255,255,255,.15);transform:translateY(-2px);}
.tw-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.tw-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;}
.tw-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--c);color:var(--ct,#fff);font-size:13px;font-weight:600;letter-spacing:.02em;}
.tw-who{min-width:0;line-height:1.3;}
.tw-who b{display:block;font-size:13.5px;font-weight:600;color:#fff;}
.tw-who span{display:block;font-size:12px;color:rgba(255,255,255,.45);margin-top:1px;}
.tw-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin-bottom:10px;}
.tw-date{font-size:10.5px;letter-spacing:.03em;color:rgba(255,255,255,.36);white-space:nowrap;}
.tw-card h3{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.015em;margin-bottom:7px;line-height:1.35;}
.tw-card p{font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.7);}
.tw-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden;}
.tw-card p + p{margin-top:11px;}
.tw-more{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.25);transition:color .2s,border-color .2s;}
.tw-more:hover{color:#fff;border-color:rgba(255,255,255,.6);}
.tw-card.is-full .tw-more{display:none;}  /* avis affiché en entier : pas de « Voir plus » */
/* La pilule d'invitation est devenue la 8e carte du mur : elle reprend la coque
   .tw-card et se contente d'empiler texte + bouton. */
/* Même coque que les cartes d'avis : titre puis texte, le bouton dessous.
   Les styles de .tw-card h3 et .tw-card p s'appliquent tels quels. */
.tw-invite{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}

/* variante claire : même mur, mais dans le blanc de la LP (ajouter .light sur la section) */
/* variante vert Tacti : la rupture sombre, mais dans la couleur de marque */
.tw.green{background:radial-gradient(120% 90% at 50% 0%,#0F8A50,#0B6B3E 55%,#085430 100%);}
.tw.green .sec-label{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.24);}
.tw.green .tw-score-sep{background:rgba(255,255,255,.2);}
.tw.green .tw-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
.tw.green .tw-card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);}
.tw.green .tw-card p{color:rgba(255,255,255,.85);}
.tw.green .tw-more{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35);}
.tw.green .tw-who span{color:rgba(255,255,255,.6);}
.tw.green .tw-date{color:rgba(255,255,255,.5);}
.tw.green .tw-stars i.off{background:rgba(255,255,255,.26);}
.tw.light{background:var(--bg);}
/* Sans ça, le badge de section hérite du traitement « fond sombre » (texte et
   contour blancs) et disparaît sur le fond clair. */
.tw.light .sec-label{color:var(--ink);border-color:var(--line);}
.tw + .itg-band{margin-top:0;}  /* la bande intégrations enchaîne directement, son border-top fait la séparation */
.tw.light .sec-title{color:var(--ink);}
.tw.light .sec-lead{color:var(--ink-2);}
.tw.light .tw-brand{color:var(--ink);}
.tw.light .tw-score-txt{color:var(--ink-2);}
.tw.light .tw-score-txt b{color:var(--ink);}
.tw.light .tw-score-sep{background:var(--line-2);}
.tw.light .tw-stars i.off{background:var(--line-2);}
.tw.light .tw-card{background:var(--bg-2);border-color:var(--line);box-shadow:none;}
.tw.light .tw-card:hover{background:var(--bg-3);border-color:var(--line-2);box-shadow:none;}
.tw.light .tw-who b{color:var(--ink);}
.tw.light .tw-who span{color:var(--ink-3);}
.tw.light .tw-date{color:var(--ink-3);}
.tw.light .tw-card h3{color:var(--ink);}
.tw.light .tw-card p{color:var(--ink-2);}
.tw.light .tw-more{color:var(--ink-2);border-color:var(--line-2);}
.tw.light .tw-more:hover{color:var(--ink);border-color:var(--ink-3);}

@media(max-width:860px){
  .tw{padding:76px 0 80px;}
  .tw-score{margin-bottom:40px;}
}
@media(max-width:1020px){.tw-wall{columns:2;}}
@media(max-width:600px){.tw-wall{columns:1;}}

/* ================= 6 · TARIFS — aperçu de la page pricing ================= */
.pricing-showcase{position:relative;overflow:hidden;margin-top:72px;padding:104px 0;background:#050b07;color:#fff;}
/* Fond nu : la lueur verte du haut a été retirée, seule reste la bande
   diagonale à peine perceptible qui casse l'aplat noir. */
.pricing-showcase::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.016) 43% 58%,transparent 58%);pointer-events:none;}
.pricing-showcase .wrap{position:relative;z-index:1;}
.pricing-head{max-width:720px;margin:0 auto 26px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.pricing-head .sec-label{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.04);}
.pricing-head h2{margin:20px auto 14px;max-width:700px;color:#fff;font-size:clamp(38px,5.3vw,64px);font-weight:700;letter-spacing:-.055em;line-height:1.02;text-wrap:balance;}
.pricing-head p{max-width:620px;color:rgba(255,255,255,.58);font-size:16px;line-height:1.55;text-wrap:pretty;}
.pricing-points{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:22px auto 28px;color:rgba(255,255,255,.7);font-size:13px;}
.pricing-points span{display:flex;align-items:center;gap:8px;}
.pricing-points i{width:18px;height:18px;border-radius:50%;background:#fff;color:#0b100d;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;}
.billing{display:flex;width:max-content;align-items:center;margin:0 auto 38px;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-pill);background:rgba(255,255,255,.05);}
.billing button{min-height:40px;padding:0 18px;border:0;border-radius:var(--r-pill);background:transparent;color:rgba(255,255,255,.5);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s;}
.billing button.active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}.billing button:hover:not(.active){color:rgba(255,255,255,.75);}
.billing .save{margin-left:8px;color:#4ade80;font-size:14px;font-weight:600;}
#tarifs .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px;width:min(1120px,100%);margin:0 auto;text-align:left;}
#tarifs .plan{position:relative;min-height:0;padding:10px;border-radius:28px;background:linear-gradient(155deg,rgba(24,30,26,.98),rgba(10,14,11,.98));display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 64px rgba(0,0,0,.28);transition:transform .24s var(--ease),box-shadow .24s var(--ease);}
#tarifs .plan:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,255,255,.15),0 30px 72px rgba(0,0,0,.34);}


#tarifs .plan.pro{background:linear-gradient(145deg,#18b96c 0%,#0d9c58 48%,#087744 100%);box-shadow:0 0 0 1px rgba(255,255,255,.24),0 28px 72px rgba(4,91,49,.32);}
#tarifs .plan.pro:hover{box-shadow:0 0 0 1px rgba(255,255,255,.32),0 34px 84px rgba(4,91,49,.4);}
#tarifs .plan-top{min-height:146px;padding:20px;border-radius:18px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.04);}
#tarifs .pro .plan-top{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.1);}
#tarifs .plan-body{display:flex;flex:1;flex-direction:column;padding:22px 18px 18px;}
#tarifs .plan-kicker{margin-bottom:7px;color:rgba(255,255,255,.46);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
#tarifs .pro .plan-kicker{color:rgba(255,255,255,.74);}
#tarifs .plan-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#tarifs .plan-name{color:#fff;font-size:23px;font-weight:700;letter-spacing:-.035em;}
#tarifs .flag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--r-pill);background:#fff;color:var(--green-deep);font-size:10.5px;font-weight:700;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.25);}
#tarifs .flag-soft{background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
#tarifs .plan-desc{width:100%;margin-top:10px;color:rgba(255,255,255,.56);font-size:13.5px;line-height:1.5;}
#tarifs .pro .plan-desc{color:rgba(255,255,255,.82);}
#tarifs .price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-height:67px;}
#tarifs .price{display:flex;align-items:flex-end;gap:8px;}
#tarifs .amount{font-size:54px;font-weight:700;line-height:.9;letter-spacing:-.06em;font-variant-numeric:tabular-nums;}
#tarifs .per{white-space:nowrap;padding-bottom:3px;color:rgba(255,255,255,.48);font-size:12.5px;line-height:1.25;}
#tarifs .pro .per{color:rgba(255,255,255,.77);}
#tarifs .price-save{align-self:center;display:inline-flex;align-items:center;min-height:27px;padding:0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);}
#tarifs .price-save[hidden]{display:none;}
#tarifs .price-note{min-height:18px;margin-top:8px;color:rgba(255,255,255,.43);font-size:11.5px;}
#tarifs .pro .price-note{color:rgba(255,255,255,.72);}
#tarifs .included{margin:21px 0 12px;color:rgba(255,255,255,.82);font-size:13px;font-weight:600;letter-spacing:-.01em;}
#tarifs .features{list-style:none;padding:0;margin:0;display:grid;gap:18px;flex:1;align-content:start;}
#tarifs .features li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:center;color:#fff;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.01em;}

#tarifs .features svg{width:20px;height:20px;color:rgba(255,255,255,.82);}#tarifs .pro .features svg{color:#fff;}#tarifs .features .off{color:rgba(255,255,255,.34);font-weight:400;}#tarifs .features .off svg{color:rgba(255,255,255,.3);}#tarifs .pro .features .off{color:rgba(255,255,255,.55);}#tarifs .pro .features .off svg{color:rgba(255,255,255,.5);}








#tarifs .plan-cta{margin-top:24px;}
#tarifs .plan .btn{width:100%;min-height:48px;padding-left:20px;padding-right:18px;background:#fff;color:#0a0d0b;}
#tarifs .plan.pro .btn{color:var(--green-deep);box-shadow:0 8px 24px rgba(3,67,36,.22);}
#tarifs .cta-note{display:block;margin-top:10px;text-align:center;color:rgba(255,255,255,.4);font-size:10.75px;}
#tarifs .pro .cta-note{color:rgba(255,255,255,.7);}
.pricing-details{display:flex;justify-content:center;margin-top:30px;}
.pricing-details .btn{min-height:44px;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#fff;}
.pricing-details .btn:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.09);}
@media (max-width:1000px){
  #tarifs .plans{grid-template-columns:repeat(2,minmax(0,1fr));width:min(760px,100%);}
  #tarifs .plan.pro{grid-column:1 / -1;}
  
}
@media(max-width:680px){
  .pricing-showcase{margin-top:48px;padding:76px 0;}
  .pricing-head h2{font-size:clamp(36px,12vw,52px);}
  .pricing-points{gap:12px 20px;}
  .billing button{padding:0 13px;}
  #tarifs .plans{grid-template-columns:1fr;gap:20px;}
  
  
  #tarifs .plan{min-height:auto;padding:8px;border-radius:24px;}
  #tarifs .plan:hover,#tarifs .plan.pro,#tarifs .plan.pro:hover{transform:none;}
  #tarifs .plan.pro{order:-1;}
  #tarifs .plan-top{padding:18px;border-radius:16px;}
  #tarifs .plan-body{padding:20px 14px 16px;}
  #tarifs .amount{font-size:49px;}
  #tarifs .price-row{gap:8px;}
  #tarifs .price-save{padding:0 8px;}
}

/* ================= 6b · PARRAINAGE (passe entre coéquipiers) ================= */
.ref-card{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);padding:44px 48px;}
.ref-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.ref-copy .sec-lead{margin:0;}
.ref-copy .btn{margin-top:14px;}
.ref-viz{display:flex;flex-direction:column;align-items:center;}
.ref-chip{font-size:12px;color:var(--green-deep);background:var(--green-soft);border-radius:var(--r-pill);padding:5px 11px;margin-bottom:24px;}
.ref-pass{display:flex;align-items:center;gap:14px;width:100%;max-width:320px;}
.ref-tok{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:600;font-size:17px;color:#fff;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(24,24,27,.22),0 0 0 1px rgba(24,24,27,.06);flex:none;}
.ref-tok.you{background:var(--green);}
.ref-tok.mate{background:var(--tok-blue);}
.ref-line{flex:1;height:26px;position:relative;}
.ref-line svg{width:100%;height:100%;overflow:visible;display:block;}
.ref-line path{stroke:var(--green);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ref-ball{position:absolute;top:50%;left:8%;width:20px;transform:translate(-50%,-50%);animation:refpass 3s ease-in-out infinite;}
@keyframes refpass{0%{left:8%;opacity:0;}12%{left:8%;opacity:1;}62%{left:90%;opacity:1;}74%,100%{left:90%;opacity:0;}}
.ref-names{display:flex;justify-content:space-between;width:100%;max-width:320px;margin-top:10px;}
.ref-names span{font-size:10.5px;color:var(--ink-3);}
@media(max-width:860px){
  .ref-card{grid-template-columns:1fr;gap:36px;padding:32px 24px;}
  .ref-viz{max-width:340px;margin:0 auto;width:100%;}
}
@media(prefers-reduced-motion:reduce){.ref-ball{animation:none;left:50%;opacity:1;}}

/* ================= 7 · FAQ ================= */
.faq{max-width:720px;margin:0 auto;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 2px;font-family:var(--font);font-size:15.5px;font-weight:500;color:var(--ink);text-align:left;letter-spacing:-.015em;}
.faq-q .pm{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3);transition:transform .25s var(--ease),color .2s;}
.faq-item.open .pm{transform:rotate(45deg);color:var(--ink);}
.faq-q .pm svg{width:15px;height:15px;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a p{font-size:14.5px;color:var(--ink-2);line-height:1.65;padding:0 40px 22px 2px;max-width:640px;}
@media(max-width:760px){.faq-q{font-size:15px;padding:19px 2px;}}

/* ================= CTA + FOOTER ================= */
.cta-band{border-top:1px solid var(--line);background:var(--bg-2);padding:104px 0;text-align:center;}
.cta-band h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;margin-bottom:14px;text-wrap:balance;}
.cta-band p{font-size:15.5px;color:var(--ink-2);margin-bottom:28px;}
.cta-band .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 0;overflow:hidden;}
.foot-grid{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;}
.foot-brand p{margin-top:14px;font-size:13px;color:var(--ink-3);max-width:32ch;line-height:1.6;}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap;}
/* h3 et non h5 : le pied de page sautait un niveau de titre. */
.foot-col h3{margin:0 0 14px;font-size:13px;line-height:18px;font-weight:500;color:var(--ink);}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:10px;transition:color .2s;}
.foot-col a:hover{color:var(--ink);}
.foot-base{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);}
.foot-word{margin-top:24px;overflow:hidden;line-height:.74;}
.foot-word::after{content:"TACTI";display:block;text-align:center;font-weight:600;font-size:clamp(100px,20vw,280px);letter-spacing:-.03em;color:#EFF0F2;transform:translateY(.16em);user-select:none;}
@media(max-width:600px){.foot-cols{gap:32px;}}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  [data-reveal],[data-reveal-group]>*{opacity:1;transform:none;}
  .stage{opacity:1;transform:none;}
  .ob,.tok-g,#ballG,.pass,.toast,.cursor{opacity:1;transform:none;}
  .zone{stroke-dashoffset:0;}
}