/* Pryzma — styles */
/* ============ POLICES — hébergées sur le site ============
   Plus d'appel à Google Fonts : l'adresse IP des visiteurs ne part plus chez Google (RGPD). */
@font-face{font-family:"Gabarito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/gabarito-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/gabarito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============ TOKENS ============ */
:root{
  --os:#F2F4F7;            /* fond "écran d'accueil" gris OS */
  --card:#FFFFFF;          /* cartes / bulles */
  --ink:#15171B;           /* encre */
  --ink2:#5A6270;          /* encre secondaire */
  --line:#E4E8EE;          /* filets */
  --em:#0A9A6D;            /* émeraude Pryzma (chiffres, CTA) */
  --em-d:#087D58;          /* émeraude foncée (petits textes) */
  --em-bg:#E7F6F0;         /* fond bulle émeraude claire */
  --soc-a:#FF2E63;         /* dégradé social : rose */
  --soc-b:#FF7A1A;         /* dégradé social : ambre */
  --grad-soc:linear-gradient(135deg,var(--soc-a),var(--soc-b));
  --r:18px;
  --sh:0 1px 2px rgba(21,23,27,.05),0 8px 24px -12px rgba(21,23,27,.14);
  --sh-big:0 2px 4px rgba(21,23,27,.05),0 24px 48px -16px rgba(21,23,27,.22);
  --disp:"Gabarito",sans-serif;          /* titres, chiffres, nav — parente du logo */
  --body:"Plus Jakarta Sans",system-ui,sans-serif;   /* corps */
  --label:"Plus Jakarta Sans",system-ui,sans-serif; /* petits labels en capitales */
}
*{margin:0;padding:0;box-sizing:border-box}
/* ============ ICÔNES ============ */
/* Un jeu d'icônes dessinées (sprite <symbol> en haut du body) remplace les emojis.
   Elles prennent la taille du texte qui les porte : tous les font-size existants
   continuent donc de piloter leur échelle, et la couleur suit currentColor. */
.ic{width:1em;height:1em;display:block;flex:none;stroke-width:1.7;vertical-align:middle}
.ic-medal{display:inline-block;vertical-align:-.16em;margin-right:.3em;width:1.15em;height:1.15em}
/* épaisseurs de trait selon la taille d'affichage */
.mg .gi .ic,.lev b .lic .ic,.app .ai .ic{stroke-width:1.6}
.story .inner .ic{stroke-width:1.5}
.boxemo .ic{stroke-width:1.3}
.pemoji .ic{stroke-width:2.2}
/* en ligne : la cellule « ✓ avancée » doit tenir sur une seule ligne */
.oftable .yes,.oftable .no{display:inline-block;vertical-align:-.18em}
.oftable .yes .ic{width:1.05em;height:1.05em;stroke-width:2.6}
.oftable .no .ic{width:.95em;height:.95em;stroke-width:2.4}
/* Là où l'icône doit rester d'une seule couleur — sur une pastille pleine, dans un
   tableau, sur une bande sombre — on neutralise le dégradé et on reprend la main. */
.managehead .ic{--ic-stroke:currentColor;color:#fff;stroke-width:2.8}
.oftable .yes .ic{--ic-stroke:currentColor;color:var(--em)}
.oftable .no .ic{--ic-stroke:currentColor;color:#4E5762}
.oftable thead th .ic-medal{--ic-stroke:currentColor;color:#C8CDD4}
.oftable thead th.gcol .ic-medal{--ic-stroke:currentColor;color:#E8C87A}
.ofb.ofno .ofbe .ic{--ic-stroke:currentColor;color:#6B7480}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--os);color:var(--ink);line-height:1.55;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--em);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.hgrid>*,.vgrid>*,.pqgrid>*{min-width:0}
section{padding:88px 0}
/* le header est collant : on décale l'arrivée des ancres pour ne pas passer dessous */
section[id],div[id]{scroll-margin-top:88px}
h1,h2,h3{font-family:var(--disp);line-height:1.08;letter-spacing:-.02em}
.h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;margin-bottom:16px}
.lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--ink2);max-width:640px}
.num{font-family:var(--disp);font-weight:700;color:var(--em);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--em);color:#fff;font-family:var(--disp);font-weight:600;font-size:17px;padding:15px 28px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 10px 24px -8px rgba(10,154,109,.55);transition:transform .18s,box-shadow .18s,background .18s}
.btn-xl{font-size:22px;padding:22px 48px;box-shadow:0 16px 38px -8px rgba(10,154,109,.6)}
.btn:hover{transform:translateY(-2px);background:#0BAF7C;box-shadow:0 14px 30px -8px rgba(10,154,109,.6)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--em);outline-offset:3px;border-radius:8px}
.micro{font-family:var(--label);font-weight:500;font-size:12.5px;color:var(--ink2);margin-top:14px}

/* barre de progression de lecture */
#progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--em),#0BC98B);width:0%;z-index:200;border-radius:0 3px 3px 0}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:100;background:rgba(242,244,247,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
/* ---- le hero : l'accroche d'abord ----
   « Votre expérience est inoubliable » ouvre la page, en grand. Le logo vient
   ensuite, puis la promesse et l'appel, en retrait. */
.hero .tension{font-family:var(--disp);font-weight:700;color:var(--ink);
  font-size:clamp(30px,4.3vw,58px);line-height:1.1;letter-spacing:-.03em;
  margin:0 auto;text-align:center;text-wrap:balance}
/* l'accroche ouvre la page sur toute la largeur ; le logo et le téléphone
   démarrent ensemble juste en dessous, plus de blanc au-dessus du téléphone */
.hopen{margin-bottom:clamp(22px,2.6vw,36px)}
.hero .hgrid{align-items:start}
/* le téléphone prend un peu de recul sous l'accroche, le bloc logo remonte */
.hero .phonecol{margin-top:clamp(26px,3.2vw,46px)}
.hero .tension .hl{font-size:1.06em;font-weight:800;letter-spacing:-.035em;
  background:linear-gradient(96deg,#0BC98B,#2FD3D8 48%,#8B5CF6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
/* le fond surligné n'a plus lieu d'être : c'est le lettrage lui-même qui porte la couleur */
.hero .tension .hl::before{display:none}
/* le titre passe au second rang */
.hero h1{font-size:clamp(21px,2.5vw,31px);font-weight:700;margin:0 0 14px;
  letter-spacing:-.025em;color:var(--ink2)}
.hero .lead{font-size:clamp(14.5px,1.45vw,16.5px)}
/* Le logo est posé nu ; une ombre douce suffit à le décoller du fond clair. */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{display:block;height:clamp(21px,2.2vw,28px);width:auto;
  /* le lettrage est presque blanc : un liseré d'ombre lui rend un bord sur fond clair */
  filter:drop-shadow(0 0 1px rgba(8,12,17,.55)) drop-shadow(0 1px 1px rgba(8,12,17,.4))
         drop-shadow(0 5px 12px rgba(8,12,17,.3))}
.logo b{color:var(--em)}
.nav .btn{padding:10px 20px;font-size:15px}
/* liens d'ancrage du header */
.navlinks{display:flex;align-items:center;gap:26px;margin-left:34px;margin-right:auto}
.navlinks a{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--ink2);text-decoration:none;position:relative;padding:4px 0;transition:color .18s}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:99px;background:var(--em);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink);font-weight:700}
.navlinks a.active::after{transform:scaleX(1)}
.navlinks a:hover::after{transform:scaleX(1)}

/* ============ HERO ============ */
.hero{padding:54px 0 96px;position:relative;overflow:visible}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* la taille du titre est fixée plus haut, avec le nouveau bloc du hero */
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.11em;background:var(--grad-soc);border-radius:99px;opacity:.7;z-index:-1}
.hero .lead{margin-bottom:14px}
.tension{font-weight:600;color:var(--ink);font-size:17.5px;margin-bottom:28px}
.kicker{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:20px}
.kicker b{color:var(--em-d)}

/* --- marque signature (eyebrow hero) --- */
/* Idem dans le hero : l'animation tourne à nu, juste posée sur une ombre. */
/* le titre ne doit pas toucher le logo : deux écritures très différentes, il leur
   faut de l'air et un filet pour marquer la coupure */
.brandtag{display:block;margin:0 0 clamp(18px,2.2vw,30px);padding:0;
  background:none;border:none;box-shadow:none;position:relative}
.btanim{display:block;width:clamp(280px,36vw,520px);height:auto;
  filter:drop-shadow(0 0 1.5px rgba(8,12,17,.5)) drop-shadow(0 2px 3px rgba(8,12,17,.34))
         drop-shadow(0 20px 38px rgba(8,12,17,.28))}

/* --- CTA hero centré + micro --- */
.herocta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
.btn-hero{font-size:clamp(19px,2.2vw,22px);padding:21px 46px}
/* micro-info en pastille (hero + chat) */
.micro-pill{display:inline-flex;align-items:center;gap:7px;margin-top:0;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--em-d);
  background:var(--em-bg);border:1.5px solid rgba(10,154,109,.3);border-radius:999px;padding:8px 19px;letter-spacing:.005em;text-align:center}

/* CTA qui "pop" : halo pulsé + balayage lumineux */
.btn.pop{position:relative;overflow:hidden;isolation:isolate;animation:popglow 2.4s ease-in-out infinite}
@keyframes popglow{
  0%,100%{box-shadow:0 10px 24px -8px rgba(10,154,109,.55),0 0 0 0 rgba(10,154,109,.34)}
  50%{box-shadow:0 14px 34px -6px rgba(10,154,109,.9),0 0 0 9px rgba(10,154,109,0)}}
.btn.pop::after{content:"";position:absolute;top:-60%;left:-80%;width:45%;height:220%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(10deg);
  animation:popsweep 3.4s ease-in-out infinite;pointer-events:none}
@keyframes popsweep{0%,55%{left:-80%}85%,100%{left:160%}}
.btn.pop:hover{animation:none;box-shadow:0 16px 34px -8px rgba(10,154,109,.75)}

/* --- téléphone --- */
.phonecol{position:relative;display:flex;justify-content:center}
.phone{width:min(310px,78vw);aspect-ratio:9/19;background:#0E1013;border-radius:44px;padding:12px;box-shadow:var(--sh-big),inset 0 0 0 2px #23262B;position:relative;z-index:2}
.screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(160deg,#1B2430,#0F1722 55%,#101A14)}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:22px;background:#0E1013;border-radius:99px;z-index:5}
.reel-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#8FA0B4;text-align:center;padding:20px}
.reel-ph .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center}
.reel-ph .play svg{margin-left:4px}
.reel-ph .drop{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.08em;border:1.5px dashed rgba(255,255,255,.3);padding:7px 12px;border-radius:10px}
.reelui{position:absolute;right:10px;bottom:74px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:4;color:#fff;font-family:var(--label);font-size:11px}
/* voile bas : le texte de la barre reste lisible même sur une vidéo claire */
#heroPhone .screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(8,10,13,.88),rgba(8,10,13,.4) 42%,transparent)}
.reelui .ic{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.95;white-space:nowrap}
.reelbar{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;color:#fff}
.reelbar .rt{font-family:var(--disp);font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px}
.reelbar .rt .dotlive{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80}
.reelbar .rs{font-size:11px;opacity:.75;margin-top:3px}
/* cœurs flottants */
.hearts{position:absolute;right:-6px;bottom:120px;z-index:3;pointer-events:none}
.heart{position:absolute;bottom:0;right:0;font-size:18px;opacity:0;animation:floatup 3.4s ease-in infinite}
.heart:nth-child(2){animation-delay:1.1s;right:14px;font-size:14px}
.heart:nth-child(3){animation-delay:2.2s;right:-8px;font-size:15px}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.7)}12%{opacity:.9}100%{opacity:0;transform:translateY(-130px) scale(1.15)}}

/* --- notifications hero --- */
.notif{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--sh-big);width:max-content;max-width:330px}
.notif .appic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.notif .t{font-size:13.5px;line-height:1.35}
.notif .t b{display:block;font-size:14px}
.notif .when{font-family:var(--label);font-weight:500;font-size:10.5px;color:var(--ink2);margin-left:auto;flex:none;padding-top:2px}
.n-ig .appic{background:radial-gradient(circle at 30% 110%,#FFD776 0%,#F5407D 55%,#8F39CE 100%)}
.n-tk .appic{background:#0F1013}
.n-fb .appic{background:#1877F2}
.n-bx .appic{background:linear-gradient(135deg,#F5CE58,#D9A02F);font-size:19px}
.hero-notifs{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero-notifs .notif{position:absolute;opacity:0}
.hn1{top:5%;left:1%}
.hn2{top:34%;right:-17%}
.hn3{bottom:9%;left:3%}
.anim .hn1{animation:slidein .7s cubic-bezier(.2,.9,.3,1.2) .5s forwards}
.anim .hn2{animation:slidein .7s cubic-bezier(.2,.9,.3,1.2) 1.4s forwards}
.anim .hn3{animation:slidein .7s cubic-bezier(.2,.9,.3,1.2) 2.3s forwards}
@keyframes slidein{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* --- ce que je gère : tuiles punchy --- */
.managewrap{margin-top:64px}
.managehead{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.4vw,27px);text-align:center;margin-bottom:26px;display:flex;align-items:center;justify-content:center;gap:11px}
.managehead .ic{width:32px;height:32px;border-radius:9px;background:var(--em);color:#fff;display:grid;place-items:center;font-size:17px;flex:none}
.managehead.in .ic{animation:pop .5s cubic-bezier(.2,.9,.3,1.35) .15s both}
.manage{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px 16px;text-align:center;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.mg::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-soc)}
.mg:hover{transform:translateY(-5px);box-shadow:var(--sh-big)}
.mg .gi{width:54px;height:54px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;font-size:26px;background:var(--em-bg)}
.mg p{font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--ink)}
.rv.in .mg{animation:pop .5s cubic-bezier(.2,.9,.3,1.25) both}
.rv.in .mg:nth-child(1){animation-delay:.05s}.rv.in .mg:nth-child(2){animation-delay:.15s}.rv.in .mg:nth-child(3){animation-delay:.25s}.rv.in .mg:nth-child(4){animation-delay:.35s}.rv.in .mg:nth-child(5){animation-delay:.45s}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.75)}65%{opacity:1;transform:translateY(-4px) scale(1.04)}to{opacity:1;transform:none}}

/* ============ PROOFBAR ============ */
.proof{padding:64px 0}
/* titre de section : la ligne la plus visible du bloc, sur une seule ligne dès 1150px */
.reswrap{max-width:1320px;margin:0 auto 34px;padding:0 24px;text-align:center}
/* (l'ancien soulignement du titre est remplacé par .resrule, plus bas) */
/* mention de vérification : information secondaire, reléguée sous les chiffres */
.proofcred{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.proofcred .verif{width:15px;height:15px;flex:none;filter:none;opacity:.75}
.proofcred .k{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink2);letter-spacing:0}
.proofcred .proofexports{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--ink2);
  background:none;border:0;padding:0;border-radius:0;white-space:normal;opacity:.85}
.proofcred .proofexports::before{content:"·";margin-right:8px;opacity:.6}
/* appel vers le plan d'action, sous le panel de solutions — traitement "carte d'offre" */
.gocall{text-align:center;margin-top:44px}
.gobtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 44%,rgba(255,255,255,0) 72%),#0E1216;
  color:#fff;font-family:var(--disp);font-weight:700;font-size:clamp(14.5px,1.55vw,17px);
  text-transform:uppercase;letter-spacing:.1em;padding:20px 40px;border:none;border-radius:999px;
  text-decoration:none;cursor:pointer;box-shadow:0 26px 54px -22px rgba(21,23,27,.62);
  transition:transform .2s,box-shadow .2s}
/* bordure métal, comme les cartes de tarifs */
.gobtn::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,#E8ECF0,#B4BCC6 32%,#78818C 62%,#C8CDD4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* rai de lumière au survol */
.gobtn::after{content:"";position:absolute;top:-60%;left:-90%;width:42%;height:230%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(9deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1)}
.gobtn:hover{transform:translateY(-3px);box-shadow:0 30px 60px -20px rgba(21,23,27,.7)}
.gobtn:hover::after{left:150%}
.gochev{color:#C8CDD4;font-size:20px;line-height:1;animation:chevb 1.6s ease-in-out infinite}
@keyframes chevb{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pstat{position:relative;padding:28px 18px;text-align:center;border-radius:18px;color:#fff;overflow:hidden;box-shadow:0 2px 4px rgba(21,23,27,.08),0 22px 44px -16px rgba(21,23,27,.28)}
.pstat:nth-child(1){background:linear-gradient(135deg,#0BA875,#076B4C)}
.pstat:nth-child(2){background:linear-gradient(135deg,#E8B93B,#A0700A)}
.pstat:nth-child(3){background:linear-gradient(135deg,#FF4D77,#D14A00)}
.pstat:nth-child(4){background:linear-gradient(135deg,#25BCD3,#0C5A70)}
.pstat::after{content:"";position:absolute;top:-45%;left:-75%;width:42%;height:190%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(8deg);animation:shine 6s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-75%}80%,100%{left:150%}}
.pstat:nth-child(2)::after{animation-delay:.7s}
.pstat:nth-child(3)::after{animation-delay:1.4s}
.pstat:nth-child(4)::after{animation-delay:2.1s}
.pstat .num{font-size:clamp(34px,3.8vw,48px);display:block;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.22)}
.pstat .plab{color:#fff}
.pstat .plab .sub{color:rgba(255,255,255,.8)}
.pstats.in .pstat{animation:pop .55s cubic-bezier(.2,.9,.3,1.25) both}
.pstats.in .pstat:nth-child(1){animation-delay:.05s}.pstats.in .pstat:nth-child(2){animation-delay:.15s}.pstats.in .pstat:nth-child(3){animation-delay:.25s}.pstats.in .pstat:nth-child(4){animation-delay:.35s}
.plab{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.35;letter-spacing:.005em}
.pstat .plab{display:block;margin-top:8px}
.pstat .plab .sub,.plab .sub{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--ink2);display:block;margin-top:3px}
/* hiérarchie mot-clé / qualificatif dans les labels de cartes */
.pstat .plab .pk{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,20px);line-height:1.2;letter-spacing:-.01em;color:#fff}
.pstat .plab .pq{display:block;font-family:var(--body);font-weight:500;font-size:14.5px;line-height:1.3;color:rgba(255,255,255,.88);margin-top:4px}
/* ============ PREUVE / LE CAS — stats en cartes ============ */
/* intro courte (remplace l'ancien gros titre + son doublon) */
.casintro{text-align:center;font-family:var(--disp);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.35;
  letter-spacing:-.005em;color:var(--ink2);max-width:620px;margin:0 auto}
.metgrid{--mgap:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px var(--mgap);margin-top:38px;max-width:880px;margin-left:auto;margin-right:auto}
.metgrid.in .mx{animation:pop .55s cubic-bezier(.2,.9,.3,1.25) both}
.metgrid.in .mx:nth-child(1){animation-delay:.05s}.metgrid.in .mx:nth-child(2){animation-delay:.15s}.metgrid.in .mx:nth-child(3){animation-delay:.25s}.metgrid.in .mx:nth-child(4){animation-delay:.35s}.metgrid.in .mx:nth-child(5){animation-delay:.45s}.metgrid.in .mx:nth-child(6){animation-delay:.55s}
/* carte : même anatomie et même échelle pour les 6 */
.mx{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);
  padding:18px 14px 16px;transition:transform .2s,box-shadow .2s}
.mx:hover{transform:translateY(-4px);box-shadow:var(--sh-big)}
.mx .memo{font-size:21px;line-height:1}
.mx .plab{font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.25;letter-spacing:-.005em;color:var(--ink2)}
.mx .n{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.1vw,38px);color:var(--em);font-variant-numeric:tabular-nums;line-height:1;margin-top:1px}
.mx .mline{height:3px;border-radius:99px;background:var(--grad-soc);width:48px}
/* ligne avant → après : le résultat ressort en vert et plus grand */
.mx .ba{display:flex;align-items:baseline;justify-content:center;gap:7px;flex-wrap:wrap}
.mx .bafrom{font-family:var(--body);font-weight:500;font-size:13px;color:#98A2AF;
  text-decoration:line-through;text-decoration-color:#C9D1DA}
.mx .baar{font-family:var(--disp);font-weight:700;font-size:13px;color:#B4BDC7}
.mx .bato{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--em-d);font-variant-numeric:tabular-nums}
.mx .ba:not(:has(.bato)){font-family:var(--body);font-weight:500;font-size:13px;color:var(--ink2)}
/* la pastille se colle en bas : toutes alignées d'une carte à l'autre */
.mx .pillx{margin-top:auto}
/* stat "en organique" = sous-info des vues */
.mx.sub{background:#F7F9FB;box-shadow:none}
.mx.sub .plab,.mx.sub .ba{color:var(--ink2)}
.mx.sub .n{color:var(--em-d);opacity:.8}
.mx.sub .mline{opacity:.5}
.mx.sub .pillx{color:var(--ink2);background:#EDF1F5;border-color:#DCE3EA;box-shadow:none}
/* connecteur "dont" : posé entre la carte Vues et la carte Organique */
.dontcue{position:absolute;left:calc(var(--mgap,40px) / -2);top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);background:var(--os);border:1px solid var(--line);border-radius:999px;padding:4px 8px;line-height:1}
/* une seule taille de pastille : plus de saut de police ni d'échelle */
.pillx{display:inline-block;font-family:var(--disp);font-weight:600;font-size:13px;line-height:1.3;padding:6px 13px;
  color:var(--em-d);background:var(--em-bg);border:1.5px solid rgba(10,154,109,.35);border-radius:999px;
  box-shadow:0 3px 10px -4px rgba(10,154,109,.35)}

.tagup{display:inline-block;font-family:var(--label);font-size:11.5px;font-weight:700;color:var(--em-d);background:var(--em-bg);border-radius:999px;padding:2px 10px}

/* acquisition par les réseaux — le chiffre le plus important de la section */
.acq{margin-top:64px;position:relative;overflow:hidden;border-radius:24px;padding:34px clamp(22px,3.4vw,44px) 30px;
  background:linear-gradient(138deg,#0BA875,#087D58 72%);color:#fff;
  box-shadow:0 3px 6px rgba(8,125,88,.18),0 28px 56px -18px rgba(8,125,88,.5)}
.acq::after{content:"";position:absolute;top:-110px;right:-70px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 65%);pointer-events:none}
.acqhead{display:flex;align-items:center;gap:13px;position:relative;z-index:1;margin-bottom:26px}
.acqemo{font-size:clamp(24px,2.4vw,32px);line-height:1;flex:none}
.acqt{font-family:var(--disp);font-weight:700;font-size:clamp(17px,2.1vw,26px);line-height:1.25;letter-spacing:-.02em}
.acqbars{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.acqrow{display:grid;grid-template-columns:clamp(96px,9vw,124px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.6vw,20px)}
.acqyear{font-family:var(--label);font-weight:600;font-size:clamp(11px,1.05vw,13px);letter-spacing:.1em;text-transform:uppercase;
  color:#BDEBD9;white-space:nowrap}
.acqtrack{height:clamp(26px,2.9vw,38px);border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.12)}
.acqbar{display:block;height:100%;border-radius:999px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.acqbar.b1{background:rgba(255,255,255,.4)}
.acqbar.b2{background:linear-gradient(90deg,#F8DC80,#ECBE4A 60%,#DCA52E);
  box-shadow:0 0 24px rgba(248,220,128,.45)}
.acq.in .acqbar.b1{width:22%}
.acq.in .acqbar.b2{width:100%}
.acqval{font-family:var(--disp);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  font-size:clamp(19px,2.3vw,30px);color:#DFF5EC;white-space:nowrap}
.acqrow.now .acqyear{color:#F8DC80}
.acqrow.now .acqval{color:#FBE9A8;font-size:clamp(24px,3.3vw,44px)}
.acqfoot{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,2vw,22px);margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.acqx{flex:none;font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.2vw,54px);line-height:1;
  letter-spacing:-.03em;color:#F8DC80;text-shadow:0 2px 20px rgba(248,220,128,.35)}
.acqclaim{font-family:var(--disp);font-weight:600;font-size:clamp(14.5px,1.5vw,18px);line-height:1.35;color:#E6F6EF}
/* ---- le ticket gagnant ----
   Ce qui a changé en haut, l'argent encaissé en bas, et les deux séparés par une
   perforation avec ses encoches. Les chiffres « après » sont tous à la même
   taille et en vert profond : c'est eux qu'on doit lire en premier. */
.tkcard{--pad:clamp(22px,2.6vw,34px);
  position:relative;overflow:hidden;max-width:700px;margin:88px auto 0;
  border-radius:22px;padding:24px var(--pad) 26px;
  background:linear-gradient(148deg,#F8E1A4,#E6B850 44%,#C79029);
  color:#2B1F06;
  box-shadow:0 0 0 1px rgba(255,240,196,.6),0 0 46px rgba(230,184,80,.34),
             0 32px 62px -32px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.6)}
.tkcard::after{content:"";position:absolute;top:-130px;right:-90px;width:360px;height:360px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.42),transparent 62%)}
.tkcard>*{position:relative;z-index:1}

.tkc-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.tkc-head:not(:first-child){margin-top:2px}
.tkc-emo .ic{width:20px;height:20px}
.tkc-kick{font-family:var(--label);font-weight:700;font-size:clamp(11px,1.1vw,12.5px);
  letter-spacing:.11em;text-transform:uppercase;color:#4A3407}
.tkc-wt{font-family:var(--body);font-weight:600;font-size:clamp(13px,1.35vw,15px);
  color:#4A3407;margin-bottom:12px}

/* les rangées occupent toute la largeur : plus de tiers vide à droite */
.tkc-figs{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,1.9vw,26px);flex-wrap:wrap}
.tkc-fig{display:flex;flex-direction:column;gap:3px;min-width:0}
/* même corps pour tous les chiffres « après » : la part des visiteurs pèse
   autant que l'argent encaissé */
/* les chiffres clés brillent par eux-mêmes : un vert métallique dont le reflet
   balaie le chiffre en boucle. Plus de halo blanc derrière, c'est le lettrage
   qui porte la lumière. */
.tkc-n{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(32px,4.9vw,58px);font-variant-numeric:tabular-nums;color:#06553C}
.tkc-fig:not(.tkc-old) .tkc-n,.tkc-x{
  /* chaque chiffre a sa couleur : --a sombre, --b vive, --e le reflet */
  background:linear-gradient(100deg,var(--a) 0%,var(--b) 24%,var(--b) 40%,var(--e) 50%,
                             var(--b) 60%,var(--b) 76%,var(--a) 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* un trait sombre net sous le lettrage : la couleur vive se détache de l'or */
  filter:drop-shadow(0 1px 0 rgba(255,246,214,.8)) drop-shadow(0 2px 0 rgba(74,44,0,.38))
         drop-shadow(0 6px 10px rgba(92,62,6,.3));
  animation:eclat 3.8s cubic-bezier(.45,0,.25,1) infinite;animation-delay:var(--d,0s)}
.tkc-c1{--a:#067A52;--b:#0FB47F;--e:#D9FFEE}
.tkc-c2{--a:#A30F3C;--b:#F0245A;--e:#FFE0EA}
.tkc-c3{--a:#4A1DB0;--b:#7C3AED;--e:#EFE6FF}
.tkc-c4{--a:#0E4FB0;--b:#2175F0;--e:#E3F0FF}
.tkc-c1{--d:0s}.tkc-c2{--d:.5s}.tkc-c3{--d:1s}.tkc-c4{--d:1.5s}
@keyframes eclat{0%{background-position:100% 0}58%,100%{background-position:0% 0}}
@media (prefers-reduced-motion:reduce){
  .tkc-fig:not(.tkc-old) .tkc-n,.tkc-x{animation:none;background-position:30% 0}
}
.tkc-old .tkc-n{font-size:clamp(23px,3vw,36px);font-weight:700;color:#7A5C1A}
.tkc-l{font-family:var(--body);font-weight:600;font-size:clamp(12px,1.2vw,13.5px);
  color:#5A4210}
.tkc-old .tkc-l{font-family:var(--label);font-weight:600;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#7A5C1A}
.tkc-sep{width:1px;align-self:stretch;min-height:46px;background:rgba(43,31,6,.22)}
.tkcard .tkc-arr.ic{width:22px;height:22px;flex:none;--ic-stroke:#8A6A1E}
/* le ×4 : nu, en très gros, sans pastille */
.tkc-x{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(52px,8.6vw,104px);padding:0 4px 0 0;border-radius:0;box-shadow:none}
/* la première rangée se lit d'un bloc : 4-5 % → 20,6 %, puis le ×4 juste après,
   sans être rejeté contre le bord droit */
.tkc-row1{justify-content:flex-start;gap:clamp(14px,2.6vw,34px)}
.tkc-row1 .tkc-x{margin-left:clamp(6px,2.4vw,34px)}
.tkc-claim{font-family:var(--body);font-weight:600;font-size:clamp(12.5px,1.3vw,14.5px);
  line-height:1.4;color:#5A4210;margin-top:14px}

/* la perforation, avec ses deux encoches découpées dans les bords */
.tkc-perf{position:relative;height:2px;margin:22px 0 18px;
  background:repeating-linear-gradient(90deg,rgba(43,31,6,.4) 0 7px,transparent 7px 15px)}
.tkc-perf::before,.tkc-perf::after{content:"";position:absolute;top:50%;
  width:24px;height:24px;border-radius:50%;background:#0B1015;transform:translateY(-50%)}
.tkc-perf::before{left:calc(-1 * var(--pad) - 12px)}
.tkc-perf::after{right:calc(-1 * var(--pad) - 12px)}

@media (max-width:560px){
  .tkc-sep{display:none}
  .tkc-figs{gap:12px 16px}
  /* sur téléphone, le ×4 reste sur la ligne du 20,6 % */
  .tkc-row1{flex-wrap:nowrap;gap:9px}
  .tkc-row1 .tkc-x{margin-left:auto;font-size:clamp(38px,12vw,52px)}
  .tkc-row1 .tkc-n.tkc-c1{font-size:clamp(28px,8.4vw,36px)}
  .tkc-old .tkc-n{font-size:clamp(20px,6vw,26px)}
}
/* un chiffre ne se coupe jamais en deux */
.tkc-n,.tkc-x,.tkc-row1 .tkc-l{white-space:nowrap}
@media (max-width:360px){
  .tkc-row1{gap:7px}
  .tkc-row1 .tkc-n.tkc-c1{font-size:24px}
  .tkc-old .tkc-n{font-size:17px}
  .tkc-row1 .tkc-x{font-size:34px}
  .tkcard .tkc-arr.ic{width:16px;height:16px}
  .tkc-old .tkc-l{font-size:9px;letter-spacing:.05em}
}
/* le chapeau des concepts ne colle plus aux tuiles */
.ideasec .srow{margin-top:44px}
.acqnote{font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--ink2);text-align:center;
  margin:16px auto 0;max-width:760px}

/* billetterie — volontairement reléguée à une ligne discrète */
.tkline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:34px;
  padding-top:22px;border-top:1px solid rgba(21,23,27,.08);color:var(--ink2);font-size:13px}
.tkemo{font-size:14px;line-height:1;flex:none;opacity:.8}
.tkl{font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink2)}
.tkv{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.tksep{opacity:.45}
.tkn{font-family:var(--body);font-size:12.5px;color:var(--ink2);opacity:.8;flex-basis:100%;text-align:center}

/* ============ VIDÉOS + STORIES ============ */
.vidsec .vgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.stickyph{position:sticky;top:96px}
.vstats{margin:26px 0 8px;border-top:1px solid var(--line)}
.vstat{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.vstat .n{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3vw,36px);color:var(--em);min-width:150px;font-variant-numeric:tabular-nums}
.vstat .l{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink)}
.vsub{display:block;font-family:var(--label);font-weight:500;font-size:11.5px;color:var(--ink2);margin-top:5px;max-width:230px}
.vfoot{font-family:var(--label);font-weight:500;font-size:12px;color:var(--ink2);margin:10px 0 0}
.vscreen{cursor:pointer}
.vscreen:active{filter:brightness(1.12)}
.segs{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:5px;z-index:4}
.seg{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.35);transition:background .3s}
.seg.on{background:#fff}
.stickyph{display:flex;flex-direction:column;align-items:center;gap:14px}
.taphint{font-family:var(--label);font-weight:500;font-size:11.5px;color:var(--ink2)}
.stories{margin-top:38px}
.stories .slead{font-size:15.5px;color:var(--ink2);margin-bottom:18px;max-width:560px}
.srow{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 10px;justify-items:center;padding:8px 0 16px}
.story{flex:none;width:100%;max-width:96px;background:none;border:none;padding:0;cursor:pointer;text-align:center;font-family:var(--body)}
.story .ring{display:grid;width:72px;height:72px;margin:0 auto;border-radius:50%;padding:3px;background:var(--grad-soc);transition:transform .2s}
.story:hover .ring{transform:scale(1.07)}
.story .inner{width:100%;height:100%;border-radius:50%;background:var(--card);border:3px solid #fff;display:grid;place-items:center;font-size:26px}
.story .sl{display:block;font-size:11.5px;color:var(--ink);margin-top:8px;line-height:1.25;font-weight:500}
.story.active .ring{background:var(--em);transform:scale(1.14)}
.story.active .sl{color:var(--em-d);font-weight:700}
.sview{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px 26px;display:none;gap:16px;align-items:flex-start}
.sview.open{display:flex;animation:svin .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes svin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.sview .semo{font-size:30px;flex:none}
.sview b{font-family:var(--disp);font-size:17px;display:block;margin-bottom:4px}
.sview p{color:var(--ink2);font-size:15px}
.shint{font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--ink2);margin-top:10px}
/* ============ EXEMPLES DE RÉELS — carrousel ============ */
/* les téléphones latéraux dépassent légèrement sous 375px : on rogne à l'horizontale
   (c'était l'ancien conteneur repliable qui s'en chargeait) */
.vidsec{overflow-x:clip}
/* ---- les deux reels en miroir : chacun avec ses chiffres de son côté ---- */
.reelduo{display:grid;align-items:center;margin-top:36px;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);
  grid-template-areas:"i1 p1 p2 i2";
  gap:clamp(14px,2vw,30px)}
.reelduo>*{min-width:0}
.reelduo .rcinfo[data-i="1"]{grid-area:i1}
.reelduo .rcitem[data-i="1"]{grid-area:p1}
.reelduo .rcitem[data-i="2"]{grid-area:p2}
.reelduo .rcinfo[data-i="2"]{grid-area:i2}
.reelduo .rcdots{grid-column:1 / -1;margin-top:18px}
/* les deux panneaux restent lisibles : c'est le téléphone qui dit lequel est choisi */
.reelduo .rcinfo{display:flex;flex-direction:column;gap:12px;
  transition:opacity .45s ease;animation:none}
.reelduo .rcinfo:not(.on){opacity:.62}
/* le téléphone sort de la scène en perspective : il redevient un simple bloc */
.reelduo .rcitem{position:static;left:auto;top:auto;margin:0;
  width:clamp(150px,15.5vw,208px);height:auto;justify-self:center;
  display:block;background:none;border:none;padding:0;
  transition:transform .45s cubic-bezier(.2,.85,.3,1),opacity .45s,filter .45s}
.reelduo .rcitem:not(.is-on){opacity:.5;filter:saturate(.4) brightness(.72);
  transform:scale(.86);cursor:pointer}
.reelduo .rcitem:not(.is-on):hover{opacity:.78;filter:saturate(.85) brightness(.92);
  transform:scale(.9)}
.reelduo .rcitem.is-on{opacity:1;filter:none;transform:scale(1);cursor:default}
.reelduo .rcitem .phone{width:100%}
/* un peu d'air entre les deux appareils, sinon ils se touchent */
.reelduo .rcitem[data-i="1"]{margin-right:clamp(6px,1vw,18px)}
.reelduo .rcitem[data-i="2"]{margin-left:clamp(6px,1vw,18px)}
@media (max-width:980px){
  .reelduo{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"p1" "i1" "p2" "i2";justify-items:center;gap:20px}
  .reelduo .rcinfo{width:100%;max-width:400px}
  .reelduo .rcitem{width:min(210px,58vw)}
  .reelduo .rcitem:not(.is-on){transform:scale(.94)}
}
.reelcar{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:44px;align-items:center;margin-top:36px}
.reelcar>*{min-width:0}
.rcmain{position:relative}
.rcstage{--pw:min(232px,54vw);position:relative;height:calc(var(--pw) * 19 / 9);perspective:1400px;transform-style:preserve-3d}
/* la boîte de chaque item couvre toute la scène : cliquable partout */
.rcitem{position:absolute;left:50%;top:0;height:100%;width:var(--pw);margin-left:calc(var(--pw) / -2);
  display:flex;align-items:center;cursor:pointer;background:none;border:none;padding:0;
  transition:transform .55s cubic-bezier(.25,.8,.3,1),opacity .45s,filter .45s}
.rcitem .phone{width:100%}
.rcitem.is-center{transform:translateX(0) scale(1);z-index:3;opacity:1;filter:none;cursor:default}
.rcitem.is-left{transform:translateX(-80%) scale(.74) rotateY(24deg);z-index:2;opacity:.5;filter:saturate(.6) brightness(.75)}
.rcitem.is-right{transform:translateX(80%) scale(.74) rotateY(-24deg);z-index:2;opacity:.5;filter:saturate(.6) brightness(.75)}
.rcitem.is-left:hover,.rcitem.is-right:hover{opacity:.8;filter:saturate(.9) brightness(.95)}
.rcitem:focus-visible{outline:3px solid var(--em);outline-offset:6px;border-radius:44px}
/* flèches */
.rcarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);box-shadow:var(--sh-big);
  transition:transform .18s,background .18s}
.rcarrow svg{width:22px;height:22px}
.rcarrow:hover{background:#fff;transform:translateY(-50%) scale(1.09)}
.rcprev{left:-6px}
.rcnext{right:-6px}
.rcdots{display:flex;justify-content:center;gap:2px;margin-top:14px}
.rcdot{width:34px;height:34px;border:none;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.rcdot::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:#CBD3DC;
  transition:background .25s,width .25s}
.rcdot.on::before{background:var(--em);width:26px;border-radius:99px}
.rcdot:focus-visible{outline:3px solid var(--em);outline-offset:2px;border-radius:8px}
/* colonne d'infos, à gauche du téléphone */
.rcside{display:flex;flex-direction:column;gap:14px}
.rcinfo{display:none;flex-direction:column;gap:12px}
.rcinfo.on{display:flex;animation:svin .4s cubic-bezier(.2,.9,.3,1.2)}
.rctitle{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink)}
.vbadges{display:flex;flex-direction:column;gap:10px}
.vb{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px 16px;box-shadow:var(--sh)}
.vb-multi{flex-direction:column;align-items:stretch;gap:11px}
.vbh{font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:1px}
.vb-ads{background:#F7F9FB}
.vb-ads .vb b{color:var(--ink)}
.rcdate{display:block;font-family:var(--label);font-weight:500;font-size:11.5px;color:var(--ink2);margin-top:3px;font-weight:400}
.vbrow{display:flex;align-items:center;gap:12px}
.appic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.appic svg{width:20px;height:20px}
.ap-ig{background:radial-gradient(circle at 30% 110%,#FFD776 0%,#F5407D 55%,#8F39CE 100%)}
.ap-tk{background:#0F1013}
.ap-ab{background:var(--em)}
.ap-eu{background:#15171B}
.ap-pv{background:#7A5AF8}
.ap-vp{background:#2D8CF0}
.vbt{display:flex;flex-direction:column;line-height:1.15}
.vb b{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.vb i{font-family:var(--body);font-style:normal;font-weight:500;font-size:12.5px;color:var(--ink2);margin-top:2px}
.vlink{display:inline-block;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--em-d);
  text-decoration:none;align-self:flex-start;border-bottom:2px solid rgba(10,154,109,.35);
  padding:6px 0 5px;transition:border-color .18s,color .18s}
.vlink:hover{color:var(--em);border-color:var(--em)}
.vfoot{font-family:var(--body);font-size:13.5px;color:var(--ink2);margin:26px 0 0}
[data-pzedit] .rcinfo{display:flex!important;margin-bottom:22px}

/* ============ TRANSITION — une ligne, effet néon ============ */
.pivot{position:relative;overflow:hidden;padding:0;color:#E8EDF2;
  min-height:clamp(300px,44vh,430px);display:flex;align-items:center;
  background:radial-gradient(120% 90% at 18% 0%,#16211E 0%,#0D1114 55%,#0A0D10 100%)}
.pivot .pglow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 82% 50%,rgba(139,92,246,.2),transparent 70%),
             radial-gradient(46% 42% at 12% 50%,rgba(10,154,109,.22),transparent 70%)}
.pivot .wrap{position:static;width:100%;max-width:1340px}
/* tout sur une ligne : emoji + phrase fixe + proposition qui défile */
.pivotband{--rot:clamp(38px,3.2vw,46px);position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:40px 0}
.pemoji{font-size:clamp(30px,2.9vw,44px);line-height:1;flex:none;
  filter:drop-shadow(0 0 16px rgba(63,214,160,.5));animation:pnudge 1.5s ease-in-out infinite}
@keyframes pnudge{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(9px) rotate(-7deg)}}
.pfix{flex:none;font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.25vw,32px);line-height:1.2;
  letter-spacing:-.015em;color:#3FD6A0;
  text-shadow:0 0 14px rgba(63,214,160,.55),0 0 38px rgba(63,214,160,.3)}
/* la marge intérieure + le fondu évitent que le halo du texte soit coupé net
   par overflow:hidden, ce qui dessinait un rectangle clair autour de la phrase */
.prot{position:relative;flex:0 1 auto;min-width:0;height:var(--rot);overflow:hidden;
  padding-inline:20px;margin-inline:-20px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%)}
.protlist{list-style:none;margin:0;padding:0;animation:protscroll 17.5s cubic-bezier(.7,0,.3,1) infinite}
.protlist li{height:var(--rot);display:flex;align-items:center;justify-content:flex-start;
  font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.25vw,32px);line-height:1.2;
  letter-spacing:-.015em;color:#fff;text-shadow:0 0 13px rgba(255,255,255,.22)}
@keyframes protscroll{
  0%,14%   {transform:translateY(0)}
  20%,34%  {transform:translateY(calc(var(--rot) * -1))}
  40%,54%  {transform:translateY(calc(var(--rot) * -2))}
  60%,74%  {transform:translateY(calc(var(--rot) * -3))}
  80%,94%  {transform:translateY(calc(var(--rot) * -4))}
  100%     {transform:translateY(calc(var(--rot) * -5))}
}
/* filet néon sous la ligne */
.pivotband::after{content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(560px,72%);height:2px;border-radius:99px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#0BC98B,#2FD3D8,#8B5CF6,transparent);
  box-shadow:0 0 18px rgba(47,211,216,.55);opacity:.8}
/* chevron : enfant direct de la section, jamais au contact du texte */
.pivot .pchev{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;color:#3FD6A0;
  filter:drop-shadow(0 0 12px rgba(63,214,160,.5));animation:chevb 1.6s ease-in-out infinite}
.pivot .pchev svg{width:100%;height:100%}
[data-pzedit] .prot{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
[data-pzedit] .protlist{animation:none;transform:none}
[data-pzedit] .protlist li{height:auto;padding:4px 0}
[data-pzedit] .protlist li[aria-hidden]{display:none}

/* ============ TARIFS — bande sombre, cartes métal ============ */
.offers{position:relative;overflow:hidden;padding:74px 0 82px;
  background:radial-gradient(120% 90% at 18% 0%,#16211E 0%,#0D1114 55%,#0A0D10 100%);color:#E8EDF2}
.offers .ofglow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 38% at 78% 22%,rgba(232,200,122,.14),transparent 70%),
             radial-gradient(46% 34% at 16% 12%,rgba(10,154,109,.16),transparent 70%)}
.offers .wrap{position:relative;z-index:1}
.ofkick{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#3FD6A0;
  text-align:center;margin-bottom:16px}
.ofh2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.06;letter-spacing:-.025em;
  text-align:center;color:#fff}
.oflead{font-family:var(--body);font-size:clamp(15.5px,1.7vw,18.5px);color:#9EAAB8;text-align:center;
  max-width:660px;margin:16px auto 0}

.ofgrid{display:grid;grid-template-columns:1fr 1.09fr;gap:26px;align-items:start;margin-top:46px;
  max-width:1060px;margin-left:auto;margin-right:auto}
.ofgrid>*{min-width:0}
.ofcard{position:relative;overflow:hidden;border-radius:24px;padding:26px 26px 24px;
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.014) 42%,rgba(255,255,255,0) 70%),#11171A;
  display:flex;flex-direction:column}
/* bordure métal */
.ofcard::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ofcard.silver::before{background:linear-gradient(135deg,#E8ECF0,#B4BCC6 32%,#78818C 62%,#C8CDD4)}
.ofcard.gold::before{background:linear-gradient(135deg,#FFF3C4,#E8C87A 30%,#A67C1E 62%,#F0D68A)}
.ofcard.silver{box-shadow:0 26px 60px -30px rgba(150,168,190,.35)}
.ofcard.gold{box-shadow:0 34px 80px -28px rgba(232,200,122,.42),0 0 0 1px rgba(232,200,122,.06)}
/* rai de lumière au survol — clin d'œil au prisme */
.ofcard::after{content:"";position:absolute;top:-60%;left:-90%;width:46%;height:230%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(9deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1)}
.ofcard:hover::after{left:150%}
/* hiérarchie : l'Or domine */
.ofcard.gold{transform:translateY(-24px);padding-top:36px}

.ofbadge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#3B2A00;background:linear-gradient(135deg,#FFF3C4,#E8C87A 55%,#D4A93F);
  border-radius:0 0 12px 12px;padding:8px 20px;box-shadow:0 8px 22px -8px rgba(232,200,122,.7)}
.ofeyebrow{font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.silver .ofeyebrow{color:#C8CDD4}
.gold .ofeyebrow{color:#E8C87A}
.ofname{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,40px);letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;line-height:1;margin-top:8px}
.ofpunch{font-family:var(--body);font-size:clamp(16px,1.8vw,19px);color:#9EAAB8;margin-top:10px}
.ofpunch b{color:#fff}
.gold .ofpunch b{color:#F0D68A}
.ofprice{display:flex;align-items:baseline;gap:9px;margin-top:26px}
.ofp{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.6vw,52px);color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.ofpu{font-family:var(--body);font-size:14.5px;color:#8B97A5}
.ofsub{font-family:var(--body);font-size:13.5px;color:#8B97A5;margin-top:7px}
.ofsub b{color:#C7D0DA}
/* chiffre héro */
/* ---- les offres : un total en gros, le détail en dessous ---- */
.oftotal{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ofdetail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 9px;
  margin-top:10px;font-family:var(--body);font-weight:600;
  font-size:clamp(12px,1.2vw,13.5px);color:var(--ink2);text-align:center}
.ofdetail .ofplus{font-size:13px;opacity:.6}
.ofcard.gold .ofdetail{color:#C9B27A}
.ofcard.silver .ofdetail{color:#9AA6B2}
.ofhero{margin:20px 0 2px;padding:14px 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
/* deux volumes côte à côte : contenus premium + snack content */
.ofsplit{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,24px)}
.ofpart{display:flex;flex-direction:column;align-items:center;min-width:0;flex:1 1 0}
.ofplus{flex:none;font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.4vw,28px);
  line-height:1;color:#5A636E;align-self:center}
.ofnum{display:block;font-family:var(--disp);font-weight:700;line-height:.95;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.silver .ofnum{font-size:clamp(28px,3.4vw,38px);color:#DDE3EA}
.gold .ofnum{font-size:clamp(32px,4vw,46px);color:#F0D68A}
.ofnl{display:block;font-family:var(--label);font-weight:600;font-size:clamp(9.5px,.85vw,11px);letter-spacing:.1em;text-transform:uppercase;
  color:#8B97A5;margin-top:8px;line-height:1.3}
.offor{font-family:var(--body);font-size:14px;line-height:1.45;color:#9EAAB8;margin-top:14px;font-style:italic}

.ofblocks{margin-top:0;display:flex;flex-direction:column;gap:0}
.ofbt{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.ofbtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ofbtx>span:first-child{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  color:#fff;line-height:1.15}
.ofbd{font-family:var(--body);font-weight:400;font-size:12.5px;line-height:1.3;color:#7C8794}
.ofbe{font-size:19px;line-height:1;flex:none}
.ofx{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:none;
  color:#3B2A00;background:linear-gradient(135deg,#FFF3C4,#E8C87A);border-radius:999px;padding:3px 9px;margin-left:auto}
.ofl{list-style:none;display:flex;flex-direction:column;gap:8px}
.ofl li{position:relative;padding-left:24px;font-family:var(--body);font-size:15px;line-height:1.5;color:#B7C2CE}
.ofl li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--em);font-size:14px}
.ofl li b{color:#fff;font-weight:600}
/* bloc exclusif Or */
.ofb.excl{background:rgba(232,200,122,.07);border-left:2.5px solid #E8C87A;border-radius:0 14px 14px 0;
  padding:16px 18px 18px;margin-left:-4px}
.ofb.excl .ofl li::before{color:#E8C87A}
/* ce qui n'y est pas */
.ofb.ofno .ofbtx>span:first-child{color:#9EAAB8}
.ofl.nol li{color:#69737F;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.22)}
.ofl.nol li::before{content:"✗";color:#5A636E;text-decoration:none}

.ofnote{font-family:var(--body);font-size:12.5px;line-height:1.5;color:#7C8794;margin-top:16px}
.ofnote b{color:#B7C2CE}
.ofcta{display:block;text-align:center;margin-top:22px;font-family:var(--disp);font-weight:600;
  border-radius:999px;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s}
.ofcta:hover{transform:translateY(-2px)}
.ofcta.ghost{font-size:16px;padding:15px 24px;color:#DDE3EA;border:1.5px solid rgba(200,205,212,.45);background:transparent}
.ofcta.ghost:hover{border-color:#C8CDD4;background:rgba(255,255,255,.05)}
.ofcta.solid{font-size:18.5px;padding:19px 26px;color:#fff;background:var(--em);
  box-shadow:0 14px 34px -10px rgba(10,154,109,.75);animation:popglow 2.4s ease-in-out infinite}
.ofcta.solid:hover{animation:none;background:#0BAF7C}

/* bandeau comparatif */
.oftable{margin:52px auto 0;max-width:820px}
.oftable table{width:100%;border-collapse:collapse}
.ofcap{font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#7C8794;
  padding-bottom:16px}
.oftable th,.oftable td{padding:13px 14px;font-family:var(--body);font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.08);text-align:center;color:#B7C2CE}
.oftable thead th{font-family:var(--disp);font-weight:700;font-size:15.5px;color:#fff}
.oftable th[scope="row"]{text-align:left;font-weight:500;color:#9EAAB8}
.oftable .gcol{background:rgba(232,200,122,.05);font-weight:600;color:#fff}
.oftable tbody tr:last-child th,.oftable tbody tr:last-child td{border-bottom:none;font-weight:700;color:#fff}
.oftable .yes{color:var(--em);font-weight:700}
.oftable .no{color:#4E5762;font-weight:700}

/* 3 encarts */
.ofnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.ofnotes>*{min-width:0}
.ofnc{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px 22px}
.ofne{font-size:24px;line-height:1;display:block;margin-bottom:12px}
.ofnt{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.3;color:#fff}
.ofnd{font-family:var(--body);font-size:14px;line-height:1.55;color:#9EAAB8;margin-top:10px}
.ofnf{font-family:var(--body);font-size:13px;line-height:1.5;color:#3FD6A0;margin-top:10px}
.ofclose{text-align:center;font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.9vw,19px);
  color:#9EAAB8;margin-top:40px}
.ofclose b{color:#fff}

/* boîte à outils, version bande sombre (déplacée au-dessus du comparatif) */
.offers .tools{margin-top:58px}
.offers .boxlab{color:#fff}
.offers .boxemo{filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.offers .boxhint{color:#3FD6A0}
.offers .boxhint::before{background:#3FD6A0}
.offers .app{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.offers .app:hover{border-color:rgba(255,255,255,.22)}
.offers .app .ai{background:rgba(10,154,109,.2)}
.offers .app b{color:#fff}
.offers .app p{color:#9EAAB8}

/* ============ OFFRE — CONVERSATION ============ */
.chat{max-width:760px;margin:40px auto 0;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-big);overflow:hidden}
.chathead{display:flex;align-items:center;gap:13px;padding:15px 22px;border-bottom:1px solid var(--line);background:linear-gradient(#FBFCFD,#F6F8FA)}
.chathead .avatar{width:58px;height:58px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--em);color:#fff;font-family:var(--disp);font-weight:700;font-size:22px;
  box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px rgba(10,154,109,.4)}
.chathead .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chathead .avatar.fallback::after{content:"P"}
.chathead b{font-family:var(--disp);font-size:16.5px;display:block;line-height:1.2}
.chathead .st{font-size:12.5px;color:var(--em-d);display:flex;align-items:center;gap:6px}
.chathead .st::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E}
.chatbody{padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.brow{display:flex;gap:10px;align-items:flex-end}
.brow.me{justify-content:flex-end}
.bub{max-width:82%;padding:14px 18px;border-radius:20px;font-size:15.5px;line-height:1.5}
.brow:not(.me) .bub{background:#F1F3F6;border-bottom-left-radius:6px}
.brow.me .bub{background:var(--em);color:#fff;border-bottom-right-radius:6px}
.bavatar{width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--em);color:#fff;font-family:var(--disp);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.bavatar img{width:100%;height:100%;object-fit:cover;display:block}
.bavatar.fallback::after{content:"P"}
.bwhen{text-align:center;font-family:var(--label);font-weight:500;font-weight:500;font-size:10.5px;color:var(--ink2);margin:4px 0}
/* carte phase dans une bulle */
.phasebub{max-width:88%;background:#F1F3F6;border-radius:20px;border-bottom-left-radius:6px;padding:18px 20px}
.phasebub .pk{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--em-d);margin-bottom:4px}
.phasebub .pt{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:12px}
.levs{display:flex;flex-direction:column;gap:10px}
.lev{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 14px}
.lev b{font-size:15px;display:flex;align-items:center;gap:8px}
.lev b .lic{width:30px;height:30px;border-radius:9px;background:var(--em-bg);display:grid;place-items:center;font-size:17px;flex:none;line-height:1}
.lev p{font-size:13.5px;color:var(--ink2);margin-top:4px;line-height:1.45}
.qreplies{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}
.qr{font-family:var(--disp);font-weight:600;font-size:15px;border:2px solid var(--em);color:var(--em-d);background:#fff;border-radius:999px;padding:10px 20px;text-decoration:none;transition:background .15s,color .15s,transform .15s}
/* le CTA du chat : rempli, halo pulsé + balayage lumineux */
.qr.shine-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--em);color:#fff;border-color:var(--em);
  font-size:clamp(18px,2.1vw,21px);padding:19px 38px;animation:popglow 2.4s ease-in-out infinite}
.qr.shine-cta::after{content:"";position:absolute;top:-60%;left:-80%;width:45%;height:220%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:rotate(10deg);
  animation:popsweep 3.4s ease-in-out infinite;pointer-events:none}
.qr.shine-cta:hover{animation:none;background:#0BAF7C;color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(10,154,109,.75)}
.qr:hover{background:var(--em);color:#fff;transform:translateY(-1px)}
.offfoot{font-size:13.5px;color:var(--ink2)}

/* springboard boîte à outils */
.tools{margin-top:60px;text-align:center}
.boxbtn{background:none;border:none;cursor:pointer;font-family:var(--body);display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:10px 26px;border-radius:20px;transition:transform .2s}
.boxbtn:hover{transform:translateY(-3px)}
.boxemo{font-size:56px;line-height:1;filter:drop-shadow(0 10px 18px rgba(21,23,27,.22));display:inline-block}
.boxbtn:hover .boxemo{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg) scale(1.05)}60%{transform:rotate(5deg)}}
.boxlab{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.1vw,24px);color:var(--ink)}
.boxhint{font-family:var(--label);font-size:12px;color:var(--em-d);display:inline-flex;align-items:center;gap:7px}
.boxhint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--em);animation:blink 1.4s infinite}
.boxhint-xl{font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.9vw,19px);color:var(--em-d);background:var(--em-bg);border:1.5px solid rgba(10,154,109,.35);border-radius:999px;padding:10px 22px;margin-top:4px}
.tools.open .boxhint{display:none}
.tools.in.open .boxemo{animation:boxjump .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes boxjump{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-6deg)}65%{transform:scale(.94) rotate(3deg)}100%{transform:scale(1)}}
.tools .spring{display:none;margin-top:26px}
.ideabox{text-align:left}
.ideabox .boxbtn{align-items:flex-start;text-align:left;padding-left:0;padding-right:0}
.ideabox .boxlab{text-align:left}
.ideabox .boxhint{text-align:left}
.ideabox .ideawrap{display:none;margin-top:30px;text-align:left}
.ideabox.open .ideawrap{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.ideawrap>*{min-width:0}
.ideephone{display:flex;justify-content:center}
#ideascreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0A0D10;border-radius:34px;z-index:1}
.screen video.rcvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0A0D10;border-radius:34px;z-index:1}
#ideaplaceholder[hidden]{display:none}
.mute{position:absolute;right:12px;top:36px;z-index:5;width:32px;height:32px;border-radius:50%;background:rgba(15,17,20,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.mute[hidden]{display:none}
.mute:hover{transform:scale(1.08)}
.mute .ic-off{display:none}
.mute.muted .ic-on{display:none}
.mute.muted .ic-off{display:block}
.ideabox.open .story{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
.ideabox.open .story:nth-child(1){animation-delay:.03s}.ideabox.open .story:nth-child(2){animation-delay:.09s}.ideabox.open .story:nth-child(3){animation-delay:.15s}.ideabox.open .story:nth-child(4){animation-delay:.21s}.ideabox.open .story:nth-child(5){animation-delay:.27s}.ideabox.open .story:nth-child(6){animation-delay:.33s}.ideabox.open .story:nth-child(7){animation-delay:.39s}.ideabox.open .story:nth-child(8){animation-delay:.45s}.ideabox.open .story:nth-child(9){animation-delay:.51s}.ideabox.open .story:nth-child(10){animation-delay:.57s}
.tools.open .spring{display:grid}
.tools.in.open .app{animation:pop .55s cubic-bezier(.2,.9,.3,1.3) both}
.tools.in.open .app:nth-child(1){animation-delay:.02s}.tools.in.open .app:nth-child(2){animation-delay:.11s}.tools.in.open .app:nth-child(3){animation-delay:.2s}.tools.in.open .app:nth-child(4){animation-delay:.29s}.tools.in.open .app:nth-child(5){animation-delay:.38s}
.spring{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:860px;margin:0 auto}
.app{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px 14px;text-align:center;transition:transform .18s}
.app:hover{transform:translateY(-4px)}
.app .ai{width:52px;height:52px;border-radius:14px;margin:0 auto 11px;display:grid;place-items:center;font-size:24px;background:var(--em-bg)}
.app b{font-size:14px;display:block;line-height:1.3;font-family:var(--disp)}
.app p{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.4}

/* ============ À PROPOS ============ */
.pqgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;margin-top:24px}
.photoph{aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:var(--sh-big)}
.photoph img{width:100%;height:100%;object-fit:cover;display:block}
.photoph .big{font-size:38px}
.profbio{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px;margin-top:26px;display:flex;gap:16px;align-items:flex-start}
.profbio .avatar{width:56px;height:56px;background:var(--em);color:#fff;font-family:var(--disp);font-weight:700;font-size:22px}
.profbio b{font-family:var(--disp);font-size:17px;display:flex;align-items:center;gap:7px}
.profbio .sub{font-family:var(--label);font-weight:500;font-size:11.5px;color:var(--ink2);margin:2px 0 8px}
.profbio p{font-size:15px;color:var(--ink2)}
/* variante agrandie (section à propos refondue) */
.profbio.big{margin-top:0;padding:32px 34px;flex-direction:column;gap:14px;align-items:flex-start}
.profbio.big b{font-size:24px;gap:9px}
.profbio.big b svg{width:20px;height:20px}
.profbio.big .sub{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--em-d);letter-spacing:.005em;margin:4px 0 12px;text-transform:none}
.profbio.big p{font-size:17px;line-height:1.5}

/* ============ FAQ — CHAT ============ */
.faqchat{max-width:720px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px}
.qa{border:none;background:none;text-align:left;cursor:pointer;font-family:var(--body);display:flex;gap:10px;align-items:flex-end;width:100%}
.qa .bub{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);border-bottom-left-radius:6px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px;transition:border-color .15s}
.qa:hover .bub{border-color:var(--em)}
.qa .chev{margin-left:auto;flex:none;transition:transform .25s;color:var(--em-d)}
.qa.open .chev{transform:rotate(180deg)}
.qavatar{width:30px;height:30px;border-radius:50%;background:#E7EAEF;color:var(--ink2);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.arow{display:flex;justify-content:flex-end;gap:10px;align-items:flex-end;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height .4s ease,opacity .3s,transform .3s}
/* assez haut pour les réponses longues sur téléphone : avant, le haut du texte était rogné */
.arow.show{max-height:1600px;opacity:1;transform:none}
.arow .bub{background:var(--em-bg);border:1px solid rgba(10,154,109,.25);border-bottom-right-radius:6px;color:var(--ink)}
.typing{display:inline-flex;gap:4px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--em-d);opacity:.4;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ============ SITE WEB — link preview ============ */
.linkcard{max-width:720px;margin:36px auto 0;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-big);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:28px 30px}
.linkcard .lt b{font-family:var(--disp);font-size:20px;display:block;margin-bottom:8px}
.linkcard .lt p{color:var(--ink2);font-size:15px}
.linkcard .url{font-family:var(--label);font-weight:500;font-size:11.5px;color:var(--ink2);margin-top:12px;display:flex;align-items:center;gap:7px}

/* ============ OFFRE — SUIVI EN 3 ÉTAPES ============ */
.track{max-width:820px;margin:46px auto 0;position:relative}
.tline{position:absolute;left:21px;top:10px;bottom:10px;width:3px;background:#D8DDE5;border-radius:99px}
.tline i{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--em);border-radius:99px}
.tstep{position:relative;padding:0 0 40px 76px}
.tstep:last-child{padding-bottom:0}
.tnode{position:absolute;left:0;top:-2px;width:45px;height:45px;border-radius:50%;background:#fff;border:2px solid #D8DDE5;display:grid;place-items:center;font-family:var(--label);font-weight:700;font-size:14.5px;color:var(--ink2);transition:background .3s,border-color .3s,color .3s;z-index:2}
.tnode svg{position:absolute;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.tstep.hit .tnode{background:var(--em);border-color:var(--em);color:transparent}
.tstep.hit .tnode svg{opacity:1;transform:scale(1)}
.tstep .tt{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;font-family:var(--disp);font-weight:700;font-size:23px;margin:2px 0 13px}
.tstep .tt .tk2{font-family:inherit;font-weight:700;font-size:inherit;color:var(--em-d);letter-spacing:inherit;text-transform:none;margin:0}
.tstep .tt .tsep{color:var(--line);font-weight:700}
.offend{max-width:820px;margin:34px auto 0;text-align:center}
.offend .offfoot{margin-bottom:22px}
/* chat en CTA final */
.chat.seq .brow,.chat.seq .qreplies,.chat.seq .microrow{opacity:0;transform:translateY(12px) scale(.98)}
.chat.seq .arrive{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.chat .microrow{text-align:center;margin-top:10px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:38px 0 46px;text-align:center}
footer .fb{font-family:var(--disp);font-weight:700;font-size:19px}
footer .fb b{color:var(--em)}
/* le logo complet en pied de page, plutôt que le mot seul */
footer .flogo{display:block;margin:0 auto;width:clamp(200px,26vw,300px);height:auto;
  filter:drop-shadow(0 0 1.5px rgba(8,12,17,.45)) drop-shadow(0 3px 6px rgba(8,12,17,.28))
         drop-shadow(0 16px 30px rgba(8,12,17,.2))}
footer p{font-size:13.5px;color:var(--ink2);margin-top:14px}

/* ============ REVEAL AU SCROLL ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}


/* dégradés "métal" appliqués au texte — uniquement si le navigateur sait le faire,
   sinon les couleurs pleines ci-dessus prennent le relais (jamais de texte invisible) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pivot .ptxt{
    background:linear-gradient(100deg,#0A9A6D 0%,#0BC98B 22%,#2FD3D8 42%,#5AA6F5 58%,#8B5CF6 76%,#0A9A6D 100%);
    background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:pivshine 7s ease-in-out infinite}
  .silver .ofeyebrow{background:linear-gradient(120deg,#E8ECF0,#8C949F);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gold .ofeyebrow{background:linear-gradient(120deg,#FFF3C4,#C99B2C);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gold .ofpunch b{background:linear-gradient(120deg,#FFF3C4,#E8C87A);-webkit-background-clip:text;background-clip:text;color:transparent}
  .silver .ofnum{font-size:clamp(42px,5.2vw,58px);background:linear-gradient(145deg,#FFFFFF,#C8CDD4 40%,#78818C);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gold .ofnum{font-size:clamp(48px,6.2vw,68px);background:linear-gradient(145deg,#FFF8DC,#F0D68A 38%,#A67C1E);-webkit-background-clip:text;background-clip:text;color:transparent}
}


/* ============ PLAN D'ACTION — leviers dépliables ============ */
.lev{cursor:pointer;transition:border-color .18s,box-shadow .18s}
.lev:hover{border-color:rgba(10,154,109,.45)}
.lev b{align-items:center}
.lchev{margin-left:auto;flex:none;width:18px;height:18px;color:var(--em-d);display:grid;place-items:center;transition:transform .28s}
.lchev svg{width:100%;height:100%}
.lev.clamped .lchev{transform:rotate(0)}
.lev:not(.clamped) .lchev{transform:rotate(180deg)}
/* replié : on ne lit que le début, le reste s'estompe */
.lev.clamped p{max-height:1.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 22%,rgba(0,0,0,.25) 62%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 22%,rgba(0,0,0,.25) 62%,transparent 92%)}
.lev p{transition:max-height .35s ease}
.lev:not(.clamped) p{max-height:22em}
.lev:focus-visible{outline:3px solid var(--em);outline-offset:3px}

/* ============ OFFRES — blocs dépliables ============ */
.ofb{cursor:pointer}
.ofbt{margin-bottom:0}
.ofb .ofl{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s,margin-top .35s}
.ofb.open .ofl{max-height:60em;opacity:1;margin-top:12px}
.ofcount{margin-left:auto;flex:none;font-family:var(--label);font-weight:700;font-size:11px;color:#8B97A5;
  background:rgba(255,255,255,.08);border-radius:999px;padding:2px 8px;letter-spacing:0}
.ofb .lchev{color:#8B97A5;margin-left:8px}
.ofb.open .lchev{transform:rotate(180deg)}
.ofb.excl .ofx{margin-left:auto}
.ofb.excl .ofcount{margin-left:8px}
.ofb:hover .ofbd{color:#9EAAB8}
.ofb:focus-visible{outline:2px solid var(--em);outline-offset:4px;border-radius:8px}
/* les blocs repliés se resserrent */
.ofblocks{gap:0}
.ofb{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ofb:last-child{border-bottom:none}
.ofb.excl{padding:13px 14px;margin:6px 0;border-bottom:none}

/* ============ OFFRES — encarts en accordéon compact ============ */
.ofnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;
  /* chaque encart garde sa propre hauteur : en ouvrir un n'étire plus les autres */
  align-items:start}
.ofnc{position:relative;overflow:hidden;cursor:pointer;padding:24px 24px 26px;border-radius:18px;
  background:linear-gradient(158deg,rgba(255,255,255,.24),rgba(255,255,255,.115) 46%,rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 24px 46px -24px rgba(0,0,0,.9);
  transition:border-color .2s,transform .2s,box-shadow .2s}
/* rai de lumière au survol, comme sur les cartes d'offre */
.ofnc::after{content:"";position:absolute;top:-60%;left:-90%;width:46%;height:230%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.2),transparent);transform:rotate(9deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1)}
.ofnc:hover::after{left:150%}
.ofnc>*{position:relative;z-index:1}
.ofnc .ofne{font-size:23px;margin-bottom:10px;display:inline-block;margin-right:9px}
.ofnc .ofnt{display:flex;align-items:flex-start;gap:9px;font-size:17px;line-height:1.32}
.ofnc .ofnd,.ofnc .ofnf{max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .35s ease,opacity .25s,margin-top .3s}
.ofnc.open .ofnd{max-height:24em;opacity:1;margin-top:12px}
.ofnc.open .ofnf{max-height:12em;opacity:1;margin-top:9px}
.ofnc:hover{border-color:rgba(255,255,255,.42);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 28px 52px -22px rgba(0,0,0,.95)}
.ofnc .ofnd{color:#C3CCD6}
.ofnc:focus-visible{outline:2px solid var(--em);outline-offset:3px}
.ofnopt{text-align:center;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#7C8794;margin-top:44px}

/* bouton "voir le détail" par carte */
.ofall{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:18px 0 6px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:14px;color:#C7D0DA;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 18px;
  transition:background .18s,border-color .18s}
.ofall:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.ofall .lchev{margin:0;color:#8B97A5;transition:transform .28s}
.ofall[aria-expanded="true"] .lchev{transform:rotate(180deg)}


/* ============ FIN — QUI SUIS-JE + F.A.Q côte à côte ============ */
.endgrid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:52px;
  /* colonnes calées en haut : ouvrir une réponse de la FAQ n'entraîne plus la photo */
  align-items:start}
.endgrid>*{min-width:0}
.endleft{display:flex;flex-direction:column;gap:16px}
.endleft .photoph{max-width:340px;width:100%;aspect-ratio:1/1;margin:0}
/* carte profil compacte, bio dépliable */
.profbio.bio{display:block;margin-top:0;padding:16px 20px;max-width:340px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s}
.profbio.bio:hover{border-color:rgba(10,154,109,.45)}
.profbio.bio:focus-visible{outline:3px solid var(--em);outline-offset:3px}
.biohead{display:flex;align-items:flex-start;gap:10px}
.bioid{min-width:0;flex:1}
.profbio.bio b{font-family:var(--disp);font-size:17px;display:flex;align-items:center;gap:6px;line-height:1.2}
.profbio.bio .sub{font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--em-d);margin:3px 0 0;line-height:1.3}
.profbio.bio .lchev{flex:none;width:18px;height:18px;color:var(--em-d);margin-top:2px;transition:transform .28s}
.profbio.bio .lchev svg{width:100%;height:100%}
.profbio.bio:not(.clamped) .lchev{transform:rotate(180deg)}
.profbio.bio p[data-k="pq.bio"]{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:10px;
  transition:max-height .35s ease}
.profbio.bio.clamped p[data-k="pq.bio"]{max-height:3em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 30%,transparent 100%);mask-image:linear-gradient(#000 30%,transparent 100%)}
.profbio.bio:not(.clamped) p[data-k="pq.bio"]{max-height:40em}
/* la F.A.Q : titre et questions dans un seul bloc */
.faqblock{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);
  padding:26px 28px 30px}
.faqh{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;
  line-height:1.1;color:var(--ink);padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.endright .faqchat{margin:0;max-width:none;gap:10px}
.faqblock .qa .bub{box-shadow:none;background:#F6F8FA}
.faqblock .arow .bub{box-shadow:none}


/* ============ PLAN D'ACTION — fond dégradé, liaison avec les bandes sombres ============ */
/* la section est encadrée par deux bandes sombres : le gris se fonce aux extrémités
   pour amortir les deux raccords, et s'éclaircit au centre pour la lecture */
.plansec{position:relative;
  background:linear-gradient(180deg,#C9D1DA 0%,#DFE4EB 9%,#EDF0F4 26%,#F3F5F8 50%,#EDF0F4 74%,#DFE4EB 91%,#C9D1DA 100%)}
.plansec .wrap{position:relative;z-index:1}

/* ============ HERO — mots mis en valeur ============ */
.hl{position:relative;z-index:0;font-weight:700;font-size:1.16em;letter-spacing:-.01em;color:var(--ink)}
.hl::before{content:"";position:absolute;inset:-.12em -.26em;z-index:-1;border-radius:7px;
  transform:skewX(-2.5deg);
  background:linear-gradient(100deg,rgba(11,201,139,.28),rgba(47,211,216,.22) 52%,rgba(139,92,246,.2))}
.tension{line-height:1.75}

/* plus assez de large pour tout tenir sur une ligne : la proposition passe dessous, centrée */
@media (max-width:820px){
  .pivotband{--rot:40px;gap:4px 12px}
  .prot{flex:1 1 100%}
  .protlist li{justify-content:center;text-align:center}
}
/* sous ce seuil la proposition la plus longue tient sur deux lignes */
@media (max-width:520px){
  .pivotband{--rot:70px}
}


/* ---- couleur des icônes : un dégradé par famille de sens ---- */
.ic[data-i="calendar"],.ic[data-i="calendar-check"],.ic[data-i="compass"],.ic[data-i="gear"],.ic[data-i="link"],.ic[data-i="note"],.ic[data-i="toolbox"]{--ic-stroke:url(#g-tech)}
.ic[data-i="book"],.ic[data-i="clap"],.ic[data-i="film"]{--ic-stroke:url(#g-video)}
.ic[data-i="heart"],.ic[data-i="megaphone"]{--ic-stroke:url(#g-ads)}
.ic[data-i="chat"],.ic[data-i="dice"],.ic[data-i="eye"],.ic[data-i="masks"],.ic[data-i="palette"],.ic[data-i="phone"],.ic[data-i="users"]{--ic-stroke:url(#g-social)}
.ic[data-i="arrow-right"],.ic[data-i="chart"],.ic[data-i="handshake"],.ic[data-i="send"],.ic[data-i="sprout"],.ic[data-i="trend"]{--ic-stroke:url(#g-growth)}
.ic[data-i="bulb"],.ic[data-i="euro"],.ic[data-i="medal"],.ic[data-i="news"],.ic[data-i="smile"],.ic[data-i="ticket"]{--ic-stroke:url(#g-gold)}
.ic[data-i="check"]{--ic-stroke:url(#g-em)}
.ic[data-i="point"]{--ic-stroke:url(#g-growth)}
.ic[data-i="block"],.ic[data-i="cross"]{--ic-stroke:url(#g-grey)}

/* les pastilles reprennent la teinte de leur icône */
.mg .gi:has([data-i="calendar"]),.lev b .lic:has([data-i="calendar"]),.app .ai:has([data-i="calendar"]),.story .inner:has([data-i="calendar"]),.mg .gi:has([data-i="calendar-check"]),.lev b .lic:has([data-i="calendar-check"]),.app .ai:has([data-i="calendar-check"]),.story .inner:has([data-i="calendar-check"]),.mg .gi:has([data-i="compass"]),.lev b .lic:has([data-i="compass"]),.app .ai:has([data-i="compass"]),.story .inner:has([data-i="compass"]),.mg .gi:has([data-i="gear"]),.lev b .lic:has([data-i="gear"]),.app .ai:has([data-i="gear"]),.story .inner:has([data-i="gear"]),.mg .gi:has([data-i="link"]),.lev b .lic:has([data-i="link"]),.app .ai:has([data-i="link"]),.story .inner:has([data-i="link"]),.mg .gi:has([data-i="note"]),.lev b .lic:has([data-i="note"]),.app .ai:has([data-i="note"]),.story .inner:has([data-i="note"]),.mg .gi:has([data-i="toolbox"]),.lev b .lic:has([data-i="toolbox"]),.app .ai:has([data-i="toolbox"]),.story .inner:has([data-i="toolbox"]){background:rgba(43,184,212,.12)}
.mg .gi:has([data-i="book"]),.lev b .lic:has([data-i="book"]),.app .ai:has([data-i="book"]),.story .inner:has([data-i="book"]),.mg .gi:has([data-i="clap"]),.lev b .lic:has([data-i="clap"]),.app .ai:has([data-i="clap"]),.story .inner:has([data-i="clap"]),.mg .gi:has([data-i="film"]),.lev b .lic:has([data-i="film"]),.app .ai:has([data-i="film"]),.story .inner:has([data-i="film"]){background:rgba(255,46,99,.12)}
.mg .gi:has([data-i="heart"]),.lev b .lic:has([data-i="heart"]),.app .ai:has([data-i="heart"]),.story .inner:has([data-i="heart"]),.mg .gi:has([data-i="megaphone"]),.lev b .lic:has([data-i="megaphone"]),.app .ai:has([data-i="megaphone"]),.story .inner:has([data-i="megaphone"]){background:rgba(255,160,26,.12)}
.mg .gi:has([data-i="chat"]),.lev b .lic:has([data-i="chat"]),.app .ai:has([data-i="chat"]),.story .inner:has([data-i="chat"]),.mg .gi:has([data-i="dice"]),.lev b .lic:has([data-i="dice"]),.app .ai:has([data-i="dice"]),.story .inner:has([data-i="dice"]),.mg .gi:has([data-i="eye"]),.lev b .lic:has([data-i="eye"]),.app .ai:has([data-i="eye"]),.story .inner:has([data-i="eye"]),.mg .gi:has([data-i="masks"]),.lev b .lic:has([data-i="masks"]),.app .ai:has([data-i="masks"]),.story .inner:has([data-i="masks"]),.mg .gi:has([data-i="palette"]),.lev b .lic:has([data-i="palette"]),.app .ai:has([data-i="palette"]),.story .inner:has([data-i="palette"]),.mg .gi:has([data-i="phone"]),.lev b .lic:has([data-i="phone"]),.app .ai:has([data-i="phone"]),.story .inner:has([data-i="phone"]),.mg .gi:has([data-i="users"]),.lev b .lic:has([data-i="users"]),.app .ai:has([data-i="users"]),.story .inner:has([data-i="users"]){background:rgba(139,92,246,.12)}
.mg .gi:has([data-i="arrow-right"]),.lev b .lic:has([data-i="arrow-right"]),.app .ai:has([data-i="arrow-right"]),.story .inner:has([data-i="arrow-right"]),.mg .gi:has([data-i="chart"]),.lev b .lic:has([data-i="chart"]),.app .ai:has([data-i="chart"]),.story .inner:has([data-i="chart"]),.mg .gi:has([data-i="handshake"]),.lev b .lic:has([data-i="handshake"]),.app .ai:has([data-i="handshake"]),.story .inner:has([data-i="handshake"]),.mg .gi:has([data-i="send"]),.lev b .lic:has([data-i="send"]),.app .ai:has([data-i="send"]),.story .inner:has([data-i="send"]),.mg .gi:has([data-i="sprout"]),.lev b .lic:has([data-i="sprout"]),.app .ai:has([data-i="sprout"]),.story .inner:has([data-i="sprout"]),.mg .gi:has([data-i="trend"]),.lev b .lic:has([data-i="trend"]),.app .ai:has([data-i="trend"]),.story .inner:has([data-i="trend"]){background:rgba(11,201,139,.12)}
.mg .gi:has([data-i="bulb"]),.lev b .lic:has([data-i="bulb"]),.app .ai:has([data-i="bulb"]),.story .inner:has([data-i="bulb"]),.mg .gi:has([data-i="euro"]),.lev b .lic:has([data-i="euro"]),.app .ai:has([data-i="euro"]),.story .inner:has([data-i="euro"]),.mg .gi:has([data-i="medal"]),.lev b .lic:has([data-i="medal"]),.app .ai:has([data-i="medal"]),.story .inner:has([data-i="medal"]),.mg .gi:has([data-i="news"]),.lev b .lic:has([data-i="news"]),.app .ai:has([data-i="news"]),.story .inner:has([data-i="news"]),.mg .gi:has([data-i="smile"]),.lev b .lic:has([data-i="smile"]),.app .ai:has([data-i="smile"]),.story .inner:has([data-i="smile"]),.mg .gi:has([data-i="ticket"]),.lev b .lic:has([data-i="ticket"]),.app .ai:has([data-i="ticket"]),.story .inner:has([data-i="ticket"]){background:rgba(222,138,37,.12)}
.mg .gi:has([data-i="check"]),.lev b .lic:has([data-i="check"]),.app .ai:has([data-i="check"]),.story .inner:has([data-i="check"]){background:rgba(10,154,109,.12)}
.mg .gi:has([data-i="block"]),.lev b .lic:has([data-i="block"]),.app .ai:has([data-i="block"]),.story .inner:has([data-i="block"]),.mg .gi:has([data-i="cross"]),.lev b .lic:has([data-i="cross"]),.app .ai:has([data-i="cross"]),.story .inner:has([data-i="cross"]){background:rgba(163,174,188,.12)}


/* ---- les cartes prennent la teinte de leur icône ----
   Un filet en haut et un fond à peine coloré : les colonnes de cartes ne sont
   plus une suite de rectangles blancs identiques. */
.mx,.app,.lev{position:relative;overflow:hidden}
.mx::after,.app::after,.lev::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-accent,transparent);border-radius:var(--r) var(--r) 0 0}
.mx:has([data-i="calendar"]),.app:has([data-i="calendar"]),.lev:has([data-i="calendar"]),.mx:has([data-i="calendar-check"]),.app:has([data-i="calendar-check"]),.lev:has([data-i="calendar-check"]),.mx:has([data-i="compass"]),.app:has([data-i="compass"]),.lev:has([data-i="compass"]),.mx:has([data-i="gear"]),.app:has([data-i="gear"]),.lev:has([data-i="gear"]),.mx:has([data-i="link"]),.app:has([data-i="link"]),.lev:has([data-i="link"]),.mx:has([data-i="note"]),.app:has([data-i="note"]),.lev:has([data-i="note"]),.mx:has([data-i="toolbox"]),.app:has([data-i="toolbox"]),.lev:has([data-i="toolbox"]){--card-accent:linear-gradient(90deg,rgba(43,184,212,.9),rgba(43,184,212,.25));background-color:rgba(43,184,212,.02)}
.mx:has([data-i="book"]),.app:has([data-i="book"]),.lev:has([data-i="book"]),.mx:has([data-i="clap"]),.app:has([data-i="clap"]),.lev:has([data-i="clap"]),.mx:has([data-i="film"]),.app:has([data-i="film"]),.lev:has([data-i="film"]){--card-accent:linear-gradient(90deg,rgba(255,46,99,.9),rgba(255,46,99,.25));background-color:rgba(255,46,99,.02)}
.mx:has([data-i="heart"]),.app:has([data-i="heart"]),.lev:has([data-i="heart"]),.mx:has([data-i="megaphone"]),.app:has([data-i="megaphone"]),.lev:has([data-i="megaphone"]){--card-accent:linear-gradient(90deg,rgba(255,160,26,.9),rgba(255,160,26,.25));background-color:rgba(255,160,26,.02)}
.mx:has([data-i="chat"]),.app:has([data-i="chat"]),.lev:has([data-i="chat"]),.mx:has([data-i="dice"]),.app:has([data-i="dice"]),.lev:has([data-i="dice"]),.mx:has([data-i="eye"]),.app:has([data-i="eye"]),.lev:has([data-i="eye"]),.mx:has([data-i="masks"]),.app:has([data-i="masks"]),.lev:has([data-i="masks"]),.mx:has([data-i="palette"]),.app:has([data-i="palette"]),.lev:has([data-i="palette"]),.mx:has([data-i="phone"]),.app:has([data-i="phone"]),.lev:has([data-i="phone"]),.mx:has([data-i="users"]),.app:has([data-i="users"]),.lev:has([data-i="users"]){--card-accent:linear-gradient(90deg,rgba(139,92,246,.9),rgba(139,92,246,.25));background-color:rgba(139,92,246,.02)}
.mx:has([data-i="chart"]),.app:has([data-i="chart"]),.lev:has([data-i="chart"]),.mx:has([data-i="handshake"]),.app:has([data-i="handshake"]),.lev:has([data-i="handshake"]),.mx:has([data-i="send"]),.app:has([data-i="send"]),.lev:has([data-i="send"]),.mx:has([data-i="sprout"]),.app:has([data-i="sprout"]),.lev:has([data-i="sprout"]),.mx:has([data-i="trend"]),.app:has([data-i="trend"]),.lev:has([data-i="trend"]){--card-accent:linear-gradient(90deg,rgba(11,201,139,.9),rgba(11,201,139,.25));background-color:rgba(11,201,139,.02)}
.mx:has([data-i="bulb"]),.app:has([data-i="bulb"]),.lev:has([data-i="bulb"]),.mx:has([data-i="euro"]),.app:has([data-i="euro"]),.lev:has([data-i="euro"]),.mx:has([data-i="news"]),.app:has([data-i="news"]),.lev:has([data-i="news"]),.mx:has([data-i="smile"]),.app:has([data-i="smile"]),.lev:has([data-i="smile"]),.mx:has([data-i="ticket"]),.app:has([data-i="ticket"]),.lev:has([data-i="ticket"]){--card-accent:linear-gradient(90deg,rgba(222,138,37,.9),rgba(222,138,37,.25));background-color:rgba(222,138,37,.02)}

/* ============ RYTHME DES SECTIONS ============
   La page alterne trois familles de fond pour donner des repères à l'œil :
   — noir (le fond du logo) : l'entrée et les deux moments de décision
   — clair (blanc / gris) : les respirations et la preuve chiffrée
   — teinté (indigo, émeraude) : les territoires créatif et méthode
   Chaque section retournée en sombre ré-encre ses textes, cartes et boutons ici. */

:root{
  --noir:#0A0D10;
  --noir-2:#11161A;
  --chrome:#C8D0D9;         /* le métal du logo, pour les textes secondaires sur noir */
  --ink-dark:#EAF0F4;       /* encre sur fond sombre */
  --ink2-dark:#9FB0BD;
  --em-glow:#3FD6A0;        /* émeraude lumineuse, lisible sur noir */
}

/* ---- fond sombre commun ---- */
.sec-dark{
  position:relative;color:var(--ink-dark);
  background:radial-gradient(118% 92% at 16% 0%,#16211E 0%,#0C1013 54%,var(--noir) 100%)}
.sec-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 40% at 84% 18%,rgba(139,92,246,.16),transparent 70%),
             radial-gradient(44% 38% at 10% 46%,rgba(10,154,109,.20),transparent 70%)}
.sec-dark>*{position:relative;z-index:1}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lead,.sec-dark p{color:var(--ink2-dark)}

/* ================= HERO — cyclorama de studio =================
   Plus de fond noir ni de halos colorés : un aplat de lumière façon cyclorama
   photo. Le blanc est le plus vif au centre et se dégrade doucement vers les
   bords, avec un raccord de sol en bas comme sur un vrai cyclo, et un grain très
   fin par-dessus pour que l'aplat ne soit jamais plat. */
.hero{
  position:relative;overflow:hidden;color:var(--ink);
  /* un simple dégradé de studio : la lumière est un peu plus haute et plus centrale,
     rien de plus. Le grain, posé par-dessus, suffit à donner la matière. */
  background:linear-gradient(178deg,#FCFDFE 0%,#F7F9FB 46%,#F0F3F7 100%);
}
/* le grain : une turbulence SVG, presque invisible, qui donne sa matière au blanc */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.hero>*{position:relative;z-index:1}
.hero h1{color:var(--ink)}
.hero .lead{color:var(--ink2)}
.tension{color:var(--ink)}
.hl{color:var(--ink)}
.hl::before{background:linear-gradient(100deg,rgba(11,201,139,.26),rgba(47,211,216,.20) 52%,rgba(139,92,246,.18))}
.hero .micro-pill{color:var(--em-d);background:var(--em-bg);border-color:rgba(10,154,109,.3)}
/* le téléphone est le sujet posé sur le cyclo : ombre longue et douce */
.hero .phone{box-shadow:0 44px 82px -34px rgba(21,23,27,.4),0 12px 28px -14px rgba(21,23,27,.18),inset 0 0 0 2px #23262B}
.hero-notifs .notif{color:var(--ink)}
.hero-notifs .notif .t b{color:var(--ink)}
.hero-notifs .notif .when{color:var(--ink2)}

/* le panel de solutions reste sur le cyclo : cartes blanches posées, pas de verre */
.managehead{color:var(--ink)}
.mg{background:#fff;border-color:rgba(21,23,27,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 16px 32px -24px rgba(21,23,27,.3)}
.mg p{color:var(--ink)}
.mg:hover{border-color:rgba(21,23,27,.14);transform:translateY(-5px);
  box-shadow:0 1px 0 rgba(255,255,255,.95),0 24px 44px -24px rgba(21,23,27,.4)}

/* le bouton vers l'offre redevient sombre : c'est lui qui contraste, sur le blanc */
.gobtn{background:linear-gradient(158deg,#1B2026,#0E1216 62%,#090C0F);color:#fff;
  box-shadow:0 22px 46px -20px rgba(21,23,27,.62)}
.gobtn::before{background:linear-gradient(135deg,#6F7A86,#2A3037 38%,#454E58 66%,#7B8693)}
.gobtn::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent)}
.gobtn:hover{box-shadow:0 28px 56px -18px rgba(21,23,27,.7)}
.gochev{color:#C8D0D9}

/* ================= BLOC RÉSULTATS =================
   La preuve chiffrée, l'écart sur un an et l'exemple de reel partagent un seul
   décor : une grille de rapport et une courbe qui monte. La courbe se dessine au
   fil du scroll — c'est la progression elle-même qui sert de fond. */
.resultsec{position:relative;overflow:hidden;color:var(--ink-dark);
  background:linear-gradient(174deg,#12171C 0%,#0D1216 42%,#0A0E11 78%,#0C1115 100%)}
.resultsec>*{position:relative;z-index:1}
.rbg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* la trame d'un papier millimétré : on est dans un rapport */
.rgrid{position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:140px 140px,140px 140px,28px 28px,28px 28px;
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 30%,transparent 88%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 30%,transparent 88%)}
/* La courbe part juste sous la ligne « clics vers le site / abonnés nets /
   engagement » et remonte jusqu'en haut des résultats. --rc-h est mesurée par
   app.js sur cette ligne de cartes, pour que le point de départ y reste collé
   quelle que soit la largeur d'écran. */
/* ---- les repères de la courbe : sans ordonnée, une courbe ne dit rien ---- */
.rax{position:absolute;left:0;right:0;top:0;height:var(--rc-h,70%);z-index:0;pointer-events:none}
.rax::before{content:"";position:absolute;left:clamp(16px,3.4vw,58px);top:7%;bottom:7%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.2) 16%,
                             rgba(255,255,255,.2) 86%,transparent)}
.rax::after{content:"";position:absolute;left:clamp(16px,3.4vw,58px);right:clamp(16px,3.4vw,58px);
  bottom:7%;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.2) 78%,transparent)}
.rax-y{position:absolute;left:clamp(16px,3.4vw,58px);top:7%;
  display:flex;align-items:center;gap:7px;transform:translate(7px,-22px)}
.rax-x{position:absolute;right:clamp(16px,3.4vw,58px);bottom:7%;transform:translateY(15px)}
.rax b{font-family:var(--label);font-weight:700;font-size:clamp(9.5px,.85vw,11px);
  letter-spacing:.15em;text-transform:uppercase;color:#7F8D9A;white-space:nowrap}
.rax .ic{width:15px;height:15px}
@media (max-width:700px){ .rax-y b,.rax-x b{font-size:9px;letter-spacing:.1em} }

.rcurve{position:absolute;left:0;right:0;top:var(--rc-top,22%);bottom:auto;width:100%;
  height:var(--rc-h,72%);overflow:visible}
/* L'aire se découvre en même temps que le trait, en fondu : un clip net ferait
   réapparaître le bord vertical qu'on avait déjà corrigé. */
.rc-area{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--p,0) * 100% - 110px),
                                     transparent calc(var(--p,0) * 100%)),
                     linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--p,0) * 100% - 110px),
                             transparent calc(var(--p,0) * 100%)),
             linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 84%,transparent 100%);
  mask-composite:intersect}
.rc-line{stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000) * (1 - var(--p,0)));
  opacity:.72;filter:drop-shadow(0 0 10px rgba(47,211,216,.35))}


/* les trois sections perdent leur fond propre : c'est le bloc qui le porte */
.resultsec .proof,.resultsec .cassec,.resultsec .vidsec{background:none}
.resultsec .proof::before,.resultsec .vidsec::before{display:none}
.resultsec .proof{padding:96px 0 64px}
.resultsec .cassec{padding:36px 0 56px}
.resultsec .vidsec{padding:56px 0 96px}

/* ---- l'écart sur un an, sur fond sombre ---- */
.resultsec .casintro{color:#C7D0DA}
.resultsec .mx{background-color:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -26px rgba(0,0,0,.85)}
/* Les intitulés portent l'information autant que les chiffres : même famille que
   le titre du bloc, en blanc, et nettement plus gros qu'avant. */
.resultsec .mx .plab,.resultsec .mx.sub .plab{color:#fff;font-weight:700;
  font-size:clamp(16.5px,1.45vw,19.5px);letter-spacing:-.012em;line-height:1.22}
.resultsec .mx .n{color:#3FD6A0}
.resultsec .mx .ba{color:#8B97A5}
.resultsec .mx .bato{color:#DDE4EA}
.resultsec .mx .pillx{background:rgba(11,201,139,.14);border-color:rgba(63,214,160,.28);color:#5FE3B4}
/* le connecteur « dont » est une pastille qui porte son propre fond : sur la bande
   sombre il faut retourner les deux, pas seulement la couleur du texte */
.resultsec .dontcue{color:#A7B4C0;background:#171D22}
.resultsec .mline{background:linear-gradient(90deg,#FF2E63,#FF7A1A)}
.resultsec .acqnote{color:#8B97A5}
.resultsec .tkline{border-top-color:rgba(255,255,255,.1);color:#9FB0BD}
.resultsec .tkl,.resultsec .tkn{color:#9FB0BD}
.resultsec .tkv{color:#DDE4EA}

/* ---- l'exemple de reel, sur le même fond ---- */
.resultsec .vidsec .h2{color:#fff}
.resultsec .rctitle{color:#fff}
.resultsec .rcdate{color:#8B97A5}
.resultsec .vb{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.resultsec .vb-ads{background:rgba(255,255,255,.035)}
.resultsec .vb-ads .vb b{color:#fff}
.resultsec .vbt b{color:#fff}
.resultsec .vbt i{color:#9FB0BD}
.resultsec .vb b{color:#fff}
.resultsec .vb i{color:#9FB0BD}
.resultsec .vbh{color:#8B97A5;border-bottom-color:rgba(255,255,255,.1)}
.resultsec .vlink{color:#3FD6A0;border-bottom-color:rgba(63,214,160,.4)}
.resultsec .vfoot{color:#8B97A5}
.resultsec .rcarrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(8px)}
.resultsec .rcarrow:hover{background:rgba(255,255,255,.2)}
.resultsec .rcdot::before{background:rgba(255,255,255,.3)}
.resultsec .rcdot.on::before{background:#3FD6A0}
.resultsec .rcitem .phone{box-shadow:0 40px 76px -30px rgba(0,0,0,.9),inset 0 0 0 2px #2A2E34}

   C'est la section qui doit convaincre : on la sort du blanc et on la traite
.reswrap{max-width:1320px;margin:0 auto 46px;padding:0 24px;text-align:center}
.reskick{display:inline-flex;align-items:center;gap:9px;font-family:var(--label);font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#3FD6A0;
  background:rgba(11,201,139,.1);border:1px solid rgba(63,214,160,.24);border-radius:999px;
  padding:7px 16px;margin-bottom:22px}
.resdot{width:7px;height:7px;border-radius:50%;background:#3FD6A0;flex:none;
  box-shadow:0 0 0 0 rgba(63,214,160,.6);animation:respulse 2.4s ease-out infinite}
@keyframes respulse{0%{box-shadow:0 0 0 0 rgba(63,214,160,.55)}70%,100%{box-shadow:0 0 0 9px rgba(63,214,160,0)}}
.reshead{display:block;max-width:20ch;margin:0 auto;font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;color:#fff;
  text-wrap:balance}
.resrule{display:block;width:clamp(120px,18vw,230px);height:3px;margin:26px auto 0;border-radius:99px;
  background:linear-gradient(90deg,#FF2E63,#FF7A1A 46%,#0BC98B)}
.proof .pstat{box-shadow:0 2px 4px rgba(0,0,0,.3),0 30px 60px -22px rgba(0,0,0,.75)}
.proofcred .k{color:#9FB0BD}
.proofcred .proofexports{color:#7F8D9A}
.proofcred .verif{opacity:.9}

/* ================= UN EXEMPLE DE RÉEL VIRAL =================
   Le décor est un flux social : des bulles de commentaire qui montent, des cœurs
   qui jaillissent et retombent, des icônes de partage qui traversent. */
.vidsec{position:relative;overflow:hidden;padding:84px 0 92px;
  background:linear-gradient(166deg,#FFF3F7 0%,#FDF0F6 34%,#F5F0FD 70%,#EFF2FE 100%)}
.vidsec>*{position:relative;z-index:1}
.sodeco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Toutes les icônes suivent la même trajectoire : elles partent sous la section
   et remontent jusqu'à en sortir par le haut. Seules la vitesse, la taille et une
   très légère dérive changent, pour que le flux respire sans partir dans tous les
   sens. --soh est la hauteur de la section, posée par app.js. */
.sodeco span{position:absolute;left:var(--x);top:var(--y);opacity:0;
  animation:sopop var(--t,9s) ease-in-out infinite;animation-delay:var(--d)}
/* Chaque icône surgit d'un coup, avec un léger rebond, puis se laisse flotter
   vers le haut avant de s'effacer. */
@keyframes sopop{
  0%  {opacity:0;transform:translate3d(0,15px,0) scale(calc(var(--s,1) * .12)) rotate(var(--r0,0deg))}
  5%  {opacity:var(--o,.95);transform:translate3d(0,3px,0) scale(calc(var(--s,1) * 1.17))}
  9%  {transform:translate3d(0,0,0) scale(var(--s,1))}
  48% {opacity:var(--o,.95);
       transform:translate3d(calc(var(--dx,10px) * .45),-16px,0) scale(var(--s,1))}
  78% {opacity:var(--o,.95);
       transform:translate3d(var(--dx,10px),-30px,0) scale(var(--s,1)) rotate(var(--r1,0deg))}
  100%{opacity:0;
       transform:translate3d(calc(var(--dx,10px) * 1.3),-50px,0)
                 scale(calc(var(--s,1) * .9)) rotate(var(--r1,0deg))}}

/* ---- bulles de commentaire ---- */
.sb{width:clamp(38px,4vw,58px);aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F3ECFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M13%205H35A8%208%200%200%201%2043%2013V27A8%208%200%200%201%2035%2035H21L10.5%2044L13.6%2035H13A8%208%200%200%201%205%2027V13A8%208%200%200%201%2013%205Z%22%20fill%3D%22url%28%23c%29%22%20stroke%3D%22%238B5CF6%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  filter:drop-shadow(0 12px 20px rgba(139,92,246,.4))}

/* ---- cœurs ---- */
.sh{width:26px;height:26px;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.75),transparent 42%),
    linear-gradient(150deg,#FF6B96,#FF2E63);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 5.7a5.1 5.1 0 0 0-7.2 0L12 7l-1.3-1.3a5.1 5.1 0 0 0-7.2 7.2l1.3 1.3L12 21.3l7.2-7.1 1.3-1.3a5.1 5.1 0 0 0 0-7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 5.7a5.1 5.1 0 0 0-7.2 0L12 7l-1.3-1.3a5.1 5.1 0 0 0-7.2 7.2l1.3 1.3L12 21.3l7.2-7.1 1.3-1.3a5.1 5.1 0 0 0 0-7.2z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- icônes de repartage ---- */
.sp{width:30px;height:30px;border-radius:9px;
  background:linear-gradient(145deg,#4FC3F7,#2B8FD4);
  box-shadow:0 10px 22px -10px rgba(43,143,212,.7)}
.sp::after{content:"";position:absolute;inset:6px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* le contenu reste lisible : le décor passe dessous et les cartes restent blanches */
.vidsec .h2{color:var(--ink)}
.vidsec .rcside .vb{background:rgba(255,255,255,.92);border-color:rgba(21,23,27,.07);
  box-shadow:0 14px 30px -24px rgba(21,23,27,.4)}

/* ================= MES CONCEPTS DE CAMPAGNES VIDÉO =================
   La table de montage n'est plus un fond lointain : les rushes glissent depuis la
   droite et viennent se ranger derrière le téléphone et les vignettes. Un clic sur
   une idée relance le montage. */
.ideasec{position:relative;overflow:hidden;padding:84px 0 92px;
  background:linear-gradient(168deg,#232830 0%,#1A1F26 55%,#141920 100%);color:var(--ink-dark)}
.ideasec>*{position:relative;z-index:1}
.ideasec .wrap{position:relative}
/* la table est dans le contenu, juste derrière lui */
.tlbg{position:absolute;left:-8vw;right:-8vw;top:16%;bottom:6%;z-index:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.7vw,22px);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tlruler{height:15px;border-radius:3px;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 12px);
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}
.tltrack{position:relative;height:clamp(30px,3.8vw,50px);border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tltrack i{position:absolute;top:4px;bottom:4px;left:var(--l);width:var(--w);border-radius:4px;
  opacity:0;transform:translateX(190%)}
.tl-v i{background:linear-gradient(180deg,#4093CE,#2C6B9C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(0,0,0,.3)}
.tl-a i{background:linear-gradient(180deg,#52A768,#376F46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(0,0,0,.3)}
.tl-a i::after{content:"";position:absolute;inset:5px 4px;border-radius:2px;opacity:.55;
  background:repeating-linear-gradient(90deg,rgba(190,245,205,.9) 0 1px,transparent 1px 4px)}
/* chaque rush entre par la droite et vient se caler à sa place */
.ideasec.tl-go .tltrack i{animation:tlslide .78s cubic-bezier(.2,.85,.3,1) both;animation-delay:var(--d)}
@keyframes tlslide{
  from{opacity:0;transform:translateX(190%)}
  60%{opacity:.62}
  to{opacity:.5;transform:translateX(0)}}
/* la tête de lecture part une fois les rushes posés */
.tlplay{position:absolute;top:0;bottom:0;left:0;width:2px;border-radius:99px;z-index:2;
  background:linear-gradient(180deg,transparent,#3FD6A0,#3FD6A0,transparent);
  box-shadow:0 0 16px rgba(63,214,160,.8);opacity:0}
.ideasec.tl-go .tlplay{animation:tlscan 4.6s cubic-bezier(.35,0,.5,1) 1.5s both}
@keyframes tlscan{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* le contenu passe au-dessus de la table */
.ideasec .ideabox,.ideasec .sview,.ideasec .ideephone{position:relative;z-index:1}
.ideasec .boxlab{color:#fff}
.ideasec .boxhint{color:#3FD6A0}
.ideasec .boxhint-xl{background:rgba(11,201,139,.14);border-color:rgba(63,214,160,.32);color:#5FE3B4}
.ideasec .boxemo .ic{filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.ideasec .ex-lead,.ideasec .shint,.ideasec .taphint{color:#B3C1CD;
  text-shadow:0 1px 5px rgba(12,16,20,.95),0 0 14px rgba(12,16,20,.85)}
.ideasec .story .inner{background:#2C323A;border-color:#2C323A;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.75)}
/* les libellés tombent sur les pistes : une pastille sombre les décolle */
/* ---- l'en-tête des concepts : un vrai titre de section, centré, comme partout ---- */
.ideasec .boxbtn{display:block;width:100%;text-align:center;cursor:default;
  padding:0;margin:-18px 0 26px;background:none;border:none}
.ideasec .boxhint{display:none}
.ideasec .boxemo{display:block;margin:0 auto 12px;line-height:1}
.ideasec .boxemo .ic{display:block;margin:0 auto;
  width:clamp(30px,3.2vw,40px);height:clamp(30px,3.2vw,40px);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.ideasec .boxlab{display:block;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,3.5vw,42px);line-height:1.12;letter-spacing:-.025em;color:#fff}
/* le chapeau ne colle plus aux tuiles : l'écart se pose sur la grille, pas sur
   la marge du paragraphe, qui se faisait manger */
.ideasec .srow{margin-top:28px;padding-top:0}
/* ---- la mise en page des concepts ----
   Le chapeau prend toute la largeur sous le titre, l'invite se glisse juste
   au-dessus des cartes, centrée, et la colonne des idées se cale au milieu de
   la hauteur du téléphone. */
.ideasec .ideabox.open .ideawrap{grid-template-columns:1.25fr .75fr;
  grid-template-areas:"lead lead" "gauche tel";
  align-items:center;gap:30px 40px;margin-top:22px}
.ideasec .ideawrap .slead{grid-area:lead;max-width:none;width:100%}
.ideasec .ideeleft{grid-area:gauche;align-self:center;display:flex;flex-direction:column}
.ideasec .ideephone{grid-area:tel;align-self:center}
/* l'explication de l'idée choisie passe au-dessus des cartes, en plus lumineux */
.ideasec .ideeleft .sview{display:flex;order:1;margin:0 0 20px}
/* l'invite ouvre la colonne, au-dessus de l'explication, centrée sur les cartes */
.ideasec .ideeleft .shint{order:0;text-align:center;margin:0 0 16px}
.ideasec .ideeleft .srow{order:2;margin-top:0}
.ideasec .ideawrap .srow{margin-top:0}
/* l'ampoule, franchement plus grosse */
.ideasec .boxemo .ic{width:clamp(78px,10vw,150px);height:clamp(78px,10vw,150px);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.ideasec .boxemo{margin-bottom:6px}
/* le bloc remonte dans la section */
.ideasec{padding-top:18px}
.ideasec .boxbtn{margin:0 0 18px}
/* le chapeau, un cran plus lisible */
.ideasec .slead{font-size:clamp(15.5px,1.7vw,20px);padding:20px 28px 20px 26px}
/* l'invite devient un bouton */
.shintb{display:inline-flex;align-items:center;gap:11px;
  padding:11px 24px 11px 17px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.55vw,18px);color:#F2F6F9;
  box-shadow:0 14px 26px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.shintb .ic{width:28px;height:28px;flex:none;animation:pointe 2.1s ease-in-out infinite}
@keyframes pointe{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){ .shintb .ic{animation:none} }
@media (max-width:980px){
  .ideasec .ideabox.open .ideawrap{grid-template-columns:1fr;
    grid-template-areas:"lead" "gauche" "tel"}
}
/* ---- les concepts, en verre sombre ----
   Même vocabulaire que les cartes de résultats et la boîte à outils : surfaces
   translucides sombres, liseré coloré en tête, texte clair. Le blanc plein
   écrasait la section et jurait avec le reste du site. */
.ideasec .slead{color:#E9F1F7;max-width:620px;display:block;position:relative;
  font-family:var(--disp);font-weight:500;font-size:clamp(15px,1.55vw,18.5px);
  line-height:1.5;letter-spacing:-.008em;
  padding:18px 26px 18px 24px;border-radius:4px 18px 18px 4px;
  background:rgba(255,255,255,.055);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-left:none;
  box-shadow:0 30px 58px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.ideasec .slead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;background:linear-gradient(180deg,#3FD6A0,#2BB8D4)}

.ideasec .srow{gap:clamp(8px,1vw,13px);justify-items:stretch}
.ideasec .story{max-width:none;width:100%;display:flex;flex-direction:column;
  align-items:center;padding:16px 8px 13px;border-radius:16px;
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 40px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .25s cubic-bezier(.2,.85,.3,1),box-shadow .25s,background .25s}
/* le liseré en tête, comme sur les cartes de la section résultats */
.ideasec .story::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2BB8D4,#8B5CF6 55%,#FF2E63)}
.ideasec .story:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.ideasec .story .ring{width:clamp(42px,4.4vw,54px);height:clamp(42px,4.4vw,54px);
  padding:0;background:rgba(255,255,255,.08);border-radius:50%}
.ideasec .story:hover .ring{transform:none}
.ideasec .srow .story .inner{background:none;border:none;box-shadow:none;backdrop-filter:none}
.ideasec .story .sl{background:none;box-shadow:none;backdrop-filter:none;padding:0;
  color:#EEF4F8;font-weight:700;font-size:clamp(12px,1.05vw,13.5px);
  margin-top:11px;line-height:1.22;letter-spacing:-.005em}
/* l'idée ouverte passe au vert et se détache du lot */
.ideasec .story.active{background:rgba(11,201,139,.15);border-color:rgba(63,214,160,.55);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(63,214,160,.45),0 28px 46px -22px rgba(0,0,0,.95)}
.ideasec .story.active::after{background:linear-gradient(90deg,#0BC98B,#2FD3D8)}
.ideasec .story.active .ring{background:rgba(11,201,139,.22);transform:none}
.ideasec .story.active .sl{color:#7DF0C4;background:none;box-shadow:none}
.ideasec .srow .story.active .inner{background:none;box-shadow:none}
.ideasec .shint,.ideasec .taphint,.ideasec .idearel{color:#DCE5EC}
.ideasec .sview{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.26);
  backdrop-filter:blur(16px);align-items:center;padding:20px 26px;
  box-shadow:0 32px 58px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18)}
.ideasec .sview b{color:#fff;font-size:clamp(18px,1.8vw,21px)}
.ideasec .sview p{color:#E3EBF2;font-size:clamp(14.5px,1.4vw,16px)}
.ideasec .sview .semo .ic{width:40px;height:40px}
.ideasec .sview .semo .ic{filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.ideasec .ideephone .phone{box-shadow:0 36px 68px -28px rgba(0,0,0,.9),inset 0 0 0 2px #2E3238}

@media (prefers-reduced-motion:reduce){
  .sodeco span{animation:none;opacity:.5;transform:scale(var(--s,1))}
  .ideasec.tl-go .tltrack i{animation:none;opacity:1;transform:none}
  .ideasec.tl-go .tlplay{animation:none}
}

/* ================= PLAN D'ACTION =================
   Le fond dit « plan » : un papier calque quadrillé, comme un plan d'architecte,
   avec des repères de cotation. La ligne de temps reste verticale, mais chaque
   étape a sa couleur et ses leviers se lisent côte à côte, déjà ouverts. */
.plansec{position:relative;overflow:hidden;
  background:linear-gradient(168deg,#F3F8F5 0%,#EDF5F1 58%,#E8F2EC 100%)}
.plansec>*{position:relative;z-index:1}
.planbg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Le fond dit ce que dit le texte juste au-dessus : chaque levier en nourrit
   d'autres. Un réseau de nœuds reliés, dont quelques-uns s'allument aux trois
   couleurs d'étape. */
/* Au survol d'une étape, la trame s'éteint sauf les points de sa couleur :
   on voit d'un coup d'œil ce que cette étape irrigue. */
.pbnet,.pbnet .pbn,.pbnet .pbl{transition:opacity .45s ease,filter .45s ease}
/* le signal, c'est surtout que le reste s'éteint : la bande allumée n'a pas
   besoin d'être éclatante, elle doit rester derrière le texte */
.plansec[data-etape] .pbnet{opacity:.6}
.plansec[data-etape] .pbn,.plansec[data-etape] .pbl{opacity:.09}
.plansec[data-etape="av"] .pbn-av,.plansec[data-etape="pd"] .pbn-pd,
.plansec[data-etape="ap"] .pbn-ap{opacity:.85}
.plansec[data-etape="av"] .pbl-av,.plansec[data-etape="pd"] .pbl-pd,
.plansec[data-etape="ap"] .pbl-ap{opacity:.38}
.plansec[data-etape="av"] .pbnet{filter:drop-shadow(0 0 5px rgba(43,184,212,.3))}
.plansec[data-etape="pd"] .pbnet{filter:drop-shadow(0 0 5px rgba(255,46,99,.26))}
.plansec[data-etape="ap"] .pbnet{filter:drop-shadow(0 0 5px rgba(11,201,139,.3))}
.pbnet{position:absolute;inset:-6% -4%;width:108%;height:112%;opacity:.42;
  mask-image:radial-gradient(118% 84% at 50% 42%,#000 32%,transparent 88%);
  -webkit-mask-image:radial-gradient(118% 84% at 50% 42%,#000 32%,transparent 88%)}

/* ---- les trois étapes, trois couleurs ---- */
.st-av{--etape:#2BB8D4;--etape-2:#5A7BFF}   /* avant   : on pose le terrain */
.st-pd{--etape:#FF2E63;--etape-2:#FF8A1F}   /* pendant : on produit */
.st-ap{--etape:#0BC98B;--etape-2:#2FD3D8}   /* après   : on pousse plus loin */
.tstep.hit .tnode{background:var(--etape,var(--em));border-color:var(--etape,var(--em))}
.tstep .tt .tk2{color:var(--etape,var(--em-d))}
.tline i{background:linear-gradient(180deg,#2BB8D4 0%,#FF2E63 50%,#0BC98B 100%)}
/* Toutes les cartes d'une même étape portent la couleur de cette étape : c'est la
   ligne qui se lit d'un coup, pas chaque levier séparément. */
.tstep .lev{border-left:3px solid color-mix(in srgb,var(--etape) 55%,transparent)}
.tstep .lev:hover{border-color:var(--etape)}
.tstep .lev b .lic{background:color-mix(in srgb,var(--etape) 15%,transparent)}
/* l'accent du haut et le fond suivent l'étape, pas l'icône */
.tstep .lev{--card-accent:linear-gradient(90deg,var(--etape),var(--etape-2));
  background-color:color-mix(in srgb,var(--etape) 3.5%,#fff)}
/* et l'icône elle-même reprend la teinte de la ligne */
.st-av .lev .lic .ic{--ic-stroke:url(#g-tech)}
.st-pd .lev .lic .ic{--ic-stroke:url(#g-video)}
.st-ap .lev .lic .ic{--ic-stroke:url(#g-growth)}

/* ---- les leviers côte à côte, ouverts, avec la place de respirer ---- */
.levs{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;
  align-items:start}
.lev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 15px;
  cursor:default;box-shadow:0 1px 0 rgba(255,255,255,.9),0 14px 28px -22px rgba(21,23,27,.34)}
.lev p{font-size:13.5px;line-height:1.5;color:var(--ink2);margin-top:6px;max-height:none}
/* les leviers ne se replient plus : le chevron n'a plus d'objet */
.lev .lchev{display:none}
.lev:hover{box-shadow:0 1px 0 rgba(255,255,255,.95),0 20px 36px -20px rgba(21,23,27,.42)}

/* la piste passe à gauche des cartes, sur toute la largeur disponible */
.track{max-width:1060px}
@media (max-width:760px){
  .levs{grid-template-columns:1fr}
}

/* ================= CHAT — blanc ================= */
#appel{background:#fff}

/* ================= FIN — gris clair ================= */
.endsec{background:var(--os)}
footer{background:var(--os)}

/* ---- raccords : un léger dégradé évite les coupures nettes entre deux fonds ---- */
.seam{position:relative}
.seam::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;pointer-events:none;z-index:2}

/* Le header reste clair sur toute la page : le hero n'est plus sombre. */

/* ============ RESPONSIVE ============ */
@media (max-width:1280px){
  .hn2{right:-7%}
}
@media (max-width:1100px){
  .hn1{left:0}.hn2{right:-1%}.hn3{left:0}
  .notif{max-width:300px}
}
@media (max-width:1080px){
  .navlinks{gap:18px;margin-left:22px}
  .navlinks a{font-size:13.5px}
}
@media (max-width:900px){
  .navlinks{display:none}
}
@media (max-width:960px){
  .hgrid,.vidsec .vgrid,.pqgrid{grid-template-columns:1fr;gap:44px}
  .phonecol,.hero .phonecol{margin-top:30px}
  .hn1{left:0}.hn2{right:0}.hn3{left:0}
  .notif{max-width:min(300px,80%)}
  .stickyph{position:static;display:flex;justify-content:center}
  .pstats{grid-template-columns:repeat(2,1fr);gap:26px 0}
  /* barres d'acquisition : l'année passe au-dessus de sa barre */
  .acqrow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .acqyear{grid-column:1 / -1;margin-bottom:-4px}
  .acqfoot{flex-direction:column;align-items:flex-start;gap:10px}
  .metgrid{--mgap:30px;grid-template-columns:repeat(2,1fr);gap:18px var(--mgap);max-width:560px}
  .endgrid{grid-template-columns:1fr;gap:34px;align-items:start}
  .endleft{flex-direction:column;align-items:stretch;gap:16px;max-width:420px}
  .endleft .photoph{max-width:none;width:100%}
  .profbio.bio{max-width:none;width:100%}
  .reelcar{grid-template-columns:1fr;gap:30px}
  .rcside{order:2}
  .rcmain{order:1}
  .rcprev{left:0}
  .rcnext{right:0}
  .ofgrid{grid-template-columns:1fr;gap:46px;max-width:560px}
  .ofcard.gold{transform:none;order:-1}
  .ofnotes{grid-template-columns:1fr;gap:16px}
  .rcitem.is-left{transform:translateX(-64%) scale(.72) rotateY(22deg)}
  .rcitem.is-right{transform:translateX(64%) scale(.72) rotateY(-22deg)}
  .ideabox.open .ideawrap{grid-template-columns:1fr;gap:30px}
  .srow{grid-template-columns:repeat(4,1fr)}
  .manage{grid-template-columns:repeat(3,1fr)}
  .spring{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:420px){
  /* le titre reste en retrait : c'est l'accroche qui ouvre la page */
  .hero h1{font-size:clamp(19px,5.2vw,24px)}
  .srow{grid-template-columns:repeat(3,1fr);gap:14px 4px}
}
@media (max-width:600px){
  section{padding:64px 0}
  .pstats{grid-template-columns:1fr 1fr}
  .manage{grid-template-columns:repeat(2,1fr)}
  .vb{padding:11px 13px}
  .vb b{font-size:17px}
  .vb i{font-size:12px}
  .appic{width:34px;height:34px}
  .rcarrow{width:40px;height:40px}
  .pivot{min-height:clamp(280px,46vh,380px)}
  .pivotband{padding:34px 0}
  .pivot .pchev{bottom:20px;width:34px;height:34px}
  .endleft{flex-direction:column}
  .endleft .photoph{max-width:260px;align-self:center}
  .profbio.bio{max-width:none;width:100%}
  .faqblock{padding:20px 18px 24px}
  .ofnotes{grid-template-columns:1fr;gap:12px}
  .rcstage{--pw:min(200px,56vw)}
  .rcitem.is-left{transform:translateX(-58%) scale(.68) rotateY(20deg);opacity:.4}
  .rcitem.is-right{transform:translateX(58%) scale(.68) rotateY(-20deg);opacity:.4}
  .offers{padding:70px 0 76px}
  .ofcard{padding:32px 22px 28px}
  .ofcard.gold{padding-top:42px}
  .oftable th,.oftable td{padding:11px 8px;font-size:13px}
  .oftable th[scope="row"]{font-size:13px}
  .mx{padding:20px 12px 18px;gap:8px}
  .mx .n{font-size:30px}
  .metgrid{grid-template-columns:1fr;gap:16px;max-width:420px}
  .metgrid>*{min-width:0}
  .mx .plab{font-size:15px}
  .mx .ba{font-size:13px}
  .pillx{font-size:13px;padding:6px 14px}
  /* en colonne unique, le connecteur revient dans le flux, au-dessus de la carte */
  .dontcue{position:static;transform:none;align-self:center;margin-bottom:-2px}
  .srow{grid-template-columns:repeat(3,1fr);gap:16px 6px}
  .spring{grid-template-columns:repeat(2,1fr)}
  .notif{max-width:250px;padding:10px 12px}
  .notif .t{font-size:12px}
  .notif .t b{font-size:12.5px}
  .notif .appic{width:32px;height:32px}
  .hn1{top:2%}.hn2{top:38%}.hn3{bottom:4%}
  .bub,.phasebub{max-width:94%}
  .linkcard{grid-template-columns:1fr;text-align:center}
  .linkcard .url{justify-content:center}
  .reswrap{padding:0 20px;margin-bottom:26px}
  .pstat .plab .pk{font-size:17px}
  .pstat .plab .pq{font-size:13.5px}
  .proofcred{gap:6px;margin-top:16px}
  .proofcred .k,.proofcred .proofexports{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero-notifs .notif{opacity:1}
  html{scroll-behavior:auto}
}


/* ================= RETOUCHES — septembre 2026 ================= */

/* ---- le billet « Ce qui a changé » : une seule famille de couleur ----
   Les quatre teintes (vert, rouge, violet, bleu) se battaient sur l'or. Tous les
   chiffres « après » passent dans le même vert profond, le reflet reste. Les
   intitulés deviennent de vrais titres, plus gros, pour que le message frappe. */
.tkcard{max-width:760px}
.tkc-c1,.tkc-c2,.tkc-c3,.tkc-c4{--a:#023A27;--b:#07623F;--e:#8CEBC6}
.tkc-head{gap:11px;margin-bottom:10px}
.tkc-emo .ic{width:clamp(24px,2.4vw,30px);height:clamp(24px,2.4vw,30px)}
.tkc-kick{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.4vw,27px);
  letter-spacing:-.015em;text-transform:none;line-height:1.15;color:#2B1F06}
.tkc-wt{font-size:clamp(15px,1.75vw,18.5px);line-height:1.35;color:#3F2C05;margin-bottom:14px}
.tkc-n{font-size:clamp(34px,5.4vw,64px)}
.tkc-x{font-size:clamp(56px,9.4vw,112px)}
.tkc-old .tkc-n{font-size:clamp(24px,3.2vw,38px);color:#6E5215}
.tkc-l{font-size:clamp(13px,1.4vw,15.5px);color:#4A3407}
.tkc-old .tkc-l{font-size:11.5px;color:#6E5215}
.tkc-claim{font-size:clamp(15px,1.7vw,18px);font-weight:700;color:#3F2C05;margin-top:16px}
.tkcard .tkc-arr.ic{--ic-stroke:#6E5215}
@media (max-width:560px){
  .tkc-kick{font-size:19.5px}
  .tkc-wt,.tkc-claim{font-size:15px}
  .tkc-row1 .tkc-n.tkc-c1{font-size:clamp(30px,9vw,40px)}
  .tkc-row1 .tkc-x{font-size:clamp(44px,13.5vw,58px)}
  .tkc-figs:not(.tkc-row1) .tkc-n{font-size:clamp(27px,8.4vw,38px)}
}
@media (max-width:360px){
  .tkc-row1 .tkc-n.tkc-c1{font-size:26px}
  .tkc-row1 .tkc-x{font-size:38px}
  .tkc-figs:not(.tkc-row1) .tkc-n{font-size:25px}
}

/* ---- « Un an plus tôt » sur téléphone : 2 cartes par ligne, tout tient à l'écran ---- */
@media (max-width:600px){
  .metgrid{--mgap:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none;margin-top:22px}
  .mx{padding:14px 8px 12px;gap:5px;border-radius:14px}
  .mx .memo{font-size:17px}
  .resultsec .mx .plab,.resultsec .mx.sub .plab{font-size:13.5px;line-height:1.2;letter-spacing:-.005em}
  .mx .n{font-size:clamp(23px,7.2vw,28px)}
  .mx .mline{height:2.5px}
  .mx .ba{gap:2px 5px}
  .mx .bafrom,.mx .baar{font-size:11px}
  .mx .bato{font-size:13px}
  .mx .ba:not(:has(.bato)){font-size:11.5px}
  .pillx{font-size:11px;padding:4px 8px;line-height:1.25}
  /* « dont » se pose dans le coin de la carte organique, sans ajouter de hauteur */
  .dontcue{position:absolute;left:8px;top:8px;transform:none;margin:0;font-size:9px;letter-spacing:.1em;padding:3px 6px}
  .casintro{font-size:16px}
  /* la courbe passe derrière des cartes plus opaques : elle ne barre plus les chiffres */
  .resultsec .mx{background-color:rgba(18,24,29,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .rax-y,.rax-x{display:none}
}

/* ---- concepts sur téléphone : le choix et la vidéo dans le même écran ----
   Les idées défilent en ruban horizontal, comme des stories, juste au-dessus du
   téléphone. Le téléphone se dimensionne sur la hauteur d'écran restante. */
@media (max-width:760px){
  .ideasec .ideabox.open .ideawrap{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .ideasec .ideeleft{display:contents}
  .ideasec .ideawrap .slead{order:0;margin-bottom:6px}
  .ideasec .ideeleft .shint{order:1;margin:0}
  .shintb{padding:8px 16px 8px 12px;font-size:14px;gap:8px}
  .shintb .ic{width:20px;height:20px}
  .ideasec .ideeleft .sview{order:2;margin:0;padding:12px 16px;gap:12px;min-height:76px}
  .ideasec .sview b{font-size:16.5px;margin-bottom:2px}
  .ideasec .sview p{font-size:13.5px;line-height:1.35}
  .ideasec .sview .semo .ic{width:30px;height:30px}
  .ideasec .ideeleft .srow{order:3}
  .ideasec .srow{display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -24px;padding:6px 24px 12px;scroll-padding-inline:24px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 34px),transparent)}
  .ideasec .srow::-webkit-scrollbar{display:none}
  .ideasec .story{flex:0 0 86px;width:86px;padding:11px 6px 10px;border-radius:14px;scroll-snap-align:center}
  .ideasec .story.active,.ideasec .story:hover{transform:none}
  .ideasec .story .ring{width:38px;height:38px}
  .ideasec .story .inner{font-size:20px}
  .ideasec .story .sl{font-size:11.5px;margin-top:7px}
  .ideasec .ideephone{order:4}
  .ideasec .ideephone .phone{width:clamp(210px,calc((100vh - 350px) * .474),72vw)!important;
    width:clamp(210px,calc((100svh - 350px) * .474),72vw)!important;border-radius:36px;padding:10px}
}

/* ---- offres : « à partir de » devant le prix, un poil plus gros que /mois HT ---- */
.ofprice{flex-wrap:wrap;column-gap:9px;row-gap:2px}
.ofpf{font-family:var(--body);font-weight:500;font-size:15.5px;color:#9EAAB8;letter-spacing:.005em}
.gold .ofpf{color:#C9B27A}
.ofbadge{white-space:nowrap}
.oftable .tfrom{display:block;font-weight:500;font-size:11.5px;color:#8B97A5;letter-spacing:.01em;margin-bottom:1px}
.oftable .gcol .tfrom{color:#C9B27A}
@media (max-width:600px){
  .ofbadge{font-size:10.5px;letter-spacing:.12em;padding:7px 16px}
  /* « exclusif Or » se pose en haut du bloc au lieu d'écraser le titre */
  .ofb.excl{position:relative;padding-top:26px}
  .ofb.excl .ofx{position:absolute;top:8px;right:14px;margin:0;font-size:9.5px;padding:2px 8px}
  .ofpf{font-size:14.5px}
}

/* ---- prise de rendez-vous intégrée ---- */
.rdv{max-width:1000px;margin:60px auto 0;scroll-margin-top:84px}
.rdvhead{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto 18px}
.rdvic .ic{width:46px;height:46px}
.rdvt{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.rdvs{font-size:15px;line-height:1.45;color:var(--ink2);margin-top:5px}
.rdvframe{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--sh-big);overflow:hidden}
.calbox{position:relative;z-index:1;height:720px}
.calbox iframe{display:block;width:100%;height:100%;border:0}
.rdvwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--ink2);font-size:14px}
.rdv.ready .rdvwait{display:none}
.rdvdots{display:flex;gap:6px}
.rdvdots i{width:8px;height:8px;border-radius:50%;background:var(--em);animation:rdvdot 1s ease-in-out infinite}
.rdvdots i:nth-child(2){animation-delay:.15s}.rdvdots i:nth-child(3){animation-delay:.3s}
@keyframes rdvdot{0%,100%{opacity:.25;transform:none}50%{opacity:1;transform:translateY(-4px)}}
.rdvalt{text-align:center;font-size:13.5px;color:var(--ink2);margin-top:14px}
.rdvalt a{color:var(--em-d);font-weight:600}
@media (max-width:600px){
  .rdv{margin-top:30px}
  .rdvhead{gap:8px;margin-bottom:12px}
  .rdvic .ic{width:18px;height:18px}
  .rdvt{font-size:14px}
  .rdvframe{border-radius:18px;margin:0 -8px}
  .calbox{height:880px}
}

/* ---- pied de page : pages légales sous le logo ---- */
.flegal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:22px}
.flegal a{font-size:13.5px;font-weight:500;color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.flegal a:hover{color:var(--ink);border-bottom-color:currentColor}
footer .fcopy{font-size:12.5px;color:#8B94A1;margin-top:12px}

/* ---- pages légales ---- */
.legalpage{background:var(--os)}
.legal{padding:44px 0 84px}
.legalwrap{max-width:800px}
.lback{display:inline-block;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--em-d);text-decoration:none;margin-bottom:20px}
.lback:hover{text-decoration:underline}
.legal h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,5vw,48px);letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.lupd{font-size:13.5px;color:var(--ink2);margin-top:10px}
.lintro{font-size:16.5px;line-height:1.6;color:var(--ink);margin-top:22px;max-width:68ch}
.lsec{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-top:16px}
.lsec h2{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px;color:var(--ink)}
.lsec h3{font-family:var(--disp);font-weight:700;font-size:16.5px;margin:16px 0 6px;color:var(--ink)}
.lsec p,.lsec li{font-size:15.5px;line-height:1.65;color:#2E333B;max-width:70ch}
.lsec p+p{margin-top:10px}
.lsec ul{padding-left:20px;margin-top:8px}
.lsec li+li{margin-top:4px}
.lsec a{color:var(--em-d);font-weight:600}
.lid{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:9px 18px;font-size:15.5px;line-height:1.45}
.lid dt{color:var(--ink2);font-weight:500}
.lid dd{color:var(--ink);font-weight:600}
@media (max-width:600px){
  .legal{padding:30px 0 64px}
  .lsec{padding:20px 18px}
  .lid{grid-template-columns:1fr;gap:1px}
  .lid dd{margin-bottom:10px}
}

/* la frise de montage en fond reste discrète derrière le ruban d'idées sur téléphone */
@media (max-width:760px){ .ideasec .tlbg{opacity:.35} }


/* ================= RETOUCHES — 25 septembre 2026 ================= */

/* ---- le rendez-vous : un repère compact, pas un second en-tête ----
   Le chat dit déjà « je réserve mon appel, audit gratuit » : plus besoin de le
   répéter en dessous. Juste une étiquette courte au-dessus du calendrier. */
.rdv{margin-top:40px}
.rdvhead{gap:8px;margin:0 auto 14px}
.rdvic .ic{width:19px;height:19px;--ic-stroke:var(--em-d);color:var(--em-d)}
.rdvt{font-size:15px;font-weight:700;letter-spacing:.005em}
.rdvs{display:none}

/* ---- le billet : deux couleurs, pas quatre — et plus aucun reflet animé ----
   Les chiffres « après » se lisaient dans un camaïeu trop sombre pour l'or, et le
   défilé de lumière distrayait plus qu'il n'aidait. Ici : blanc pour l'essentiel
   (le %, l'argent encaissé), vert clair pour ce qui est déjà exceptionnel
   (le ×4, le +38,6 %) — couleurs fixes, sans animation. */
.tkc-fig:not(.tkc-old) .tkc-n,.tkc-x{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;animation:none;
  filter:drop-shadow(0 1px 0 rgba(255,246,214,.55)) drop-shadow(0 3px 7px rgba(74,44,0,.32))}
.tkc-fig:not(.tkc-old) .tkc-n.tkc-c1,.tkc-fig:not(.tkc-old) .tkc-n.tkc-c3{color:#FFFFFF}
.tkc-fig:not(.tkc-old) .tkc-n.tkc-c4,.tkc-x{color:#5FEAB0}
/* le ×4 posé sur la même ligne que le chiffre et son millésime, plus « flottant » */
.tkc-row1{align-items:flex-end}
.tkc-row1 .tkc-x{padding-bottom:.06em}
@media (max-width:560px){ .tkc-row1{align-items:flex-end} }