/* ═══════════════════════════════════════════════════════════════════
   SpinBoost — charte v4 (lavande · confettis · encre · ombres dures)
   Couche PILOTE : chargée par l'accueil SEULE, APRÈS theme-commercial.css,
   qu'elle surcharge. Ne touche à aucun ID ni à aucune ancre.
   Réf : _ref/demo-accueil-spinboost.html + charte-graphique-spinboost-v4.md
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Fondations v4 (surchargent les tokens crème de theme-tokens.css) */
  --surface:#F8F7FD;          /* lavande */
  --surface-2:rgba(238,234,250,.72); /* lavande dense translucide (laisse voir les confettis) */
  --surface-hi:#FFFFFF;
  --line:#E4E0F2;             /* bordure lavande (séparateurs internes) */
  --shadow-card:rgba(26,26,26,.0);   /* neutralise les ombres douces héritées */
  --shadow-card-lg:rgba(26,26,26,.0);
  /* Relief v4 — ombres dures sans flou */
  --enc:#1A1A1A;
  --sh-card:5px 6px 0 var(--enc);
  --sh-btn:0 5px 0 var(--enc);
  --sh-badge:3px 3px 0 var(--enc);
  --sh-nav:4px 5px 0 var(--enc);
  --sh-phone:9px 11px 0 var(--enc);
  --sh-reco:7px 8px 0 var(--action);
  --bd:2.5px solid var(--enc);
}

/* ─── Racine : fond clair (l'ancien thème sombre laissait html en var(--bg)=#0A0816,
   visible en flash lors du rebond de sur-défilement mobile) ─── */
html{background:#F7F5FC !important}

/* ─── Fond confettis (signature) ─── */
body{
  background-color:#F7F5FC;
  background-image:
    radial-gradient(rgba(124,58,237,.13) 3px,transparent 3.5px),
    radial-gradient(rgba(232,71,127,.11) 3px,transparent 3.5px),
    radial-gradient(rgba(47,196,174,.11) 3px,transparent 3.5px),
    radial-gradient(rgba(245,201,62,.15) 3px,transparent 3.5px) !important;
  background-size:220px 220px,260px 260px,300px 300px,340px 340px !important;
  background-position:0 0,60px 110px,150px 40px,90px 200px !important;
  color:var(--ink-soft);
}

/* ─── Sections : fond transparent (laisse voir les confettis) ─── */
.block, section{background:transparent !important}
.block.alt, .alt, .sable{
  background:var(--surface-2) !important;
  border-top:var(--bd);border-bottom:var(--bd);
}

/* ─── Typographie ─── */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em;font-weight:800;line-height:1.12}
h1{line-height:1.2}   /* charte 1,04 assoupli : le surlignage solaire respire */
/* ═══════════ REFONTE ARCADE — titres cernés + surlignages autocollants ═══════════ */
/* Titres cernés d'un halo blanc : le contour est peint DERRIÈRE le remplissage
   (paint-order: stroke fill) → les lettres restent pleines, le halo les détache. */
.hero h1{color:var(--ink);-webkit-text-stroke:4px #fff;paint-order:stroke fill;
  letter-spacing:-.01em;line-height:1.24}
/* Titres de section (h2) : même halo, épaisseur réduite (titres plus petits). */
h2{-webkit-text-stroke:2.6px #fff;paint-order:stroke fill;line-height:1.18}

/* ═══ Correctif COMMUN — hauteur de ligne des titres surlignés ═══
   Un sticker jaune (.grad-text / .hl / .hlpen) fait ~1,4 × la police + un cadre de
   2,5 px : avec une line-height de 1,15–1,24 il déborde et remonte dans la ligne
   du dessus (titres sectoriels, blog, sections…). UNE règle via :has() couvre tous
   les titres surlignés d'un coup, plutôt qu'une rustine par page. L'accueil
   (.home-hero) est protégé juste après : il a sa hauteur tunée + l'extrusion.
   !important car theme-commercial force .hero h1{line-height:1.15/1.14 !important}
   en mobile ; sans !important notre règle perdrait. */
:is(h1,h2):has(.grad-text,.hl,.hlpen){line-height:1.5 !important}
.home-hero h1{line-height:1.24 !important}   /* accueil desktop inchangé (mobile = 1.7 plus bas) */
@media(max-width:768px){
  :is(h1,h2):has(.grad-text,.hl,.hlpen){line-height:1.65 !important}
}

/* « 5 ★ » (dans le sous-titre, plus petit) : jaune solaire, contour encre + ombre
   pleine décalée, étoile SVG inline. Contour réduit à 2 px pour ne pas empâter le
   chiffre à cette taille. */
.hero .et{color:#F5C93E;-webkit-text-stroke:2px #141414;paint-order:stroke fill;
  text-shadow:1.5px 2px 0 #141414;white-space:nowrap}
.hero .et svg{display:inline-block;width:.92em;height:.92em;vertical-align:-.1em;margin-left:.1em;
  filter:drop-shadow(1.5px 2px 0 #141414)}

/* ═══ Hero MOBILE : titre centré, « Inondez » seul sur sa 1re ligne ═══ */
/* La grille se replie déjà à ≤940 px (theme-commercial) → le centrage est hérité.
   On n'ajoute QUE le retour à la ligne après « Inondez » + l'équilibrage des lignes.
   Le <br class="br-mob"> est neutralisé en desktop → le hero 2 colonnes reste intact. */
.home-hero h1 .br-mob{display:none}
.home-hero h1 .hl{white-space:nowrap;text-shadow:none}  /* insécable + PAS d'extrusion dans le jaune */
/* Titre du hero en CAPITALES (le HTML garde la casse mixte pour Google et les
   lecteurs d'écran ; réversible en retirant cette seule ligne). */
.home-hero h1{text-transform:uppercase}
/* Extrusion arcade « léger » : 2 couches dures décalées vers le bas-droite + une
   couche lointaine translucide qui décolle le titre du fond. Même sens de lumière
   que les cartes (--sh-card 5px 6px) et les stickers (3px 4px). Le surlignage jaune
   garde SON propre relief (cadre + ombre) → text-shadow:none sur .hl ci-dessus. */
.home-hero h1{text-shadow:1px 1px 0 var(--enc),2px 2px 0 var(--enc),4px 5px 0 rgba(26,26,26,.22)}
/* Contour blanc RETIRÉ sur l'accueil : l'extrusion assure désormais le détachement
   du fond confettis ; le halo ne faisait qu'épaissir les capitales et fermer les
   contreformes. (Les hero sectoriels gardent leur halo : pas d'extrusion chez eux.)
   paint-order devient inerte avec un contour nul, on le laisse — sans effet.
   !important car des media queries plus bas (≈l.129/138) réduisaient déjà le halo
   par étapes (4px→3px→0) sur .hero h1 à spécificité égale ; on neutralise partout. */
.home-hero h1{-webkit-text-stroke:0 !important}
@media(max-width:940px){
  .home-hero h1 .br-mob{display:inline}
  .home-hero h1{text-wrap:balance}
}
/* Mobile (≤768 px) : le thème force line-height:1.15, trop serré pour les blocs
   autocollants (hauteur ~35 px pour un titre de 23 px, padding + bordure 2.5 px).
   Résultat : le sticker « fiche Google » remonte de ~6 px DANS la ligne « Inondez »
   et masque son bas. On rouvre la hauteur de ligne (≥ hauteur du sticker) pour que
   chaque ligne respire et que « Inondez » soit entièrement lisible. Desktop intact. */
@media(max-width:768px){
  .home-hero h1{line-height:1.7 !important}
  /* Extrusion réduite en mobile : à ~23 px, la couche lointaine (4px/5px, 22 %)
     crée un « fantôme » translucide qui déborde sur la ligne suivante. On garde
     les 2 couches dures rapprochées (volume léger), on retire l'ombre au sol. */
  .home-hero h1{text-shadow:1px 1px 0 var(--enc),2px 2px 0 var(--enc)}
  /* Taille mobile relevée 23 → 28 px : sans le halo (qui épaississait les lettres)
     le titre paraissait maigre sur petit écran. 28 px est le max qui tient toutes
     les contraintes (« FICHE GOOGLE » d'un bloc avec marge, CTA au-dessus du pli
     même sur iPhone SE). !important pour battre .hero h1{font-size:23px!important}
     de theme-commercial (spécificité égale, v4.css chargé après). */
  .home-hero h1{font-size:28px !important}
}

/* Sous-titre du hero : plus grand et semi-gras (desktop + mobile), hiérarchie
   préservée sous le H1. */
.home-hero p.sub{font-size:21px;font-weight:600;color:var(--ink)}
@media(max-width:940px){ .home-hero p.sub{font-size:17.5px !important} }

/* « 5 ★ » du sous-titre vitrine : on retire le style arcade (ni contour, ni ombre).
   Le chiffre reprend la couleur du sous-titre, l'étoile reste jaune mais sans contour.
   (.et arcade reste intact ailleurs — ex. landing starter.) */
.home-hero .sub .et{color:inherit;-webkit-text-stroke:0;text-shadow:none}
.home-hero .sub .et svg{filter:none}
.home-hero .sub .et svg path{stroke:none}

/* Surlignages jaunes → blocs autocollants. Le halo blanc est COUPÉ à l'intérieur
   du bloc (-webkit-text-stroke:0), sinon les lettres ont une auréole sale. */
.grad-text, .hlpen>span, .hl{
  background:#F5C93E !important;color:#141414 !important;-webkit-text-fill-color:#141414 !important;
  border:2.5px solid #141414 !important;border-radius:8px;
  padding:.02em .18em !important;box-shadow:3px 4px 0 #141414;
  -webkit-text-stroke:0 !important;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hlpen{background:none !important;-webkit-text-stroke:0 !important}

@media(max-width:640px){
  .hero h1{-webkit-text-stroke-width:3px}
  .hero .et{-webkit-text-stroke-width:1.6px;text-shadow:1.2px 1.6px 0 #141414}
  h2{-webkit-text-stroke-width:2px}
}

/* Repli : paint-order non supporté → on retire le contour des titres (sinon le
   stroke par-dessus le remplissage creuse les lettres et les rend illisibles).
   Les blocs jaunes gardent leur fond+bordure, lisibles sans contour de texte. */
@supports not (paint-order: stroke){
  .hero h1, h2, .hero .et{-webkit-text-stroke:0}
  .grad-text, .hlpen>span, .hl{-webkit-text-stroke:0 !important}
}

/* ═══ Trois cartes arcade fines sous le hero : 3 stickers SÉPARÉS ═══ */
.arcade-cards{padding:8px 0 14px}
.arcade-cards .wrap{display:flex;gap:16px}
.acard{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#fff;border:2.5px solid #141414;border-radius:12px;box-shadow:3px 4px 0 #141414;
  padding:13px 16px}
.acard-ic{width:26px;height:26px;flex:none}
.acard span{font-weight:800;font-size:15px;color:var(--ink);line-height:1.2;white-space:nowrap}
/* Tablette + mobile : 3 cartes séparées, empilées, chacune garde bordure + ombre. */
@media(max-width:820px){
  .arcade-cards .wrap{flex-direction:column;gap:11px}
  .acard{justify-content:flex-start}
}
@media(max-width:380px){ .acard span{font-size:14px} }

/* ─── Boutons — pression 3D ─── */
.btn{border:var(--bd) !important;box-shadow:var(--sh-btn) !important;border-radius:999px !important;
  min-height:52px;font-weight:800 !important;transition:transform .12s,box-shadow .12s,background .14s !important;filter:none !important}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--enc) !important}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--enc) !important}
.btn-primary{background:var(--action) !important;color:#fff !important}
.btn-primary:hover{background:var(--action-deep) !important}
/* secondaire (ex-.btn-demo, ex-.btn-ghost) : blanc, encre */
.btn-demo, .btn-ghost{background:#fff !important;color:var(--enc) !important}
.btn-demo:hover, .btn-ghost:hover{background:var(--surface-2) !important;color:var(--enc) !important}
.btn-demo svg{color:var(--action)}
/* solaire — dernier appel à l'action */
.btn-sol, .btn.sol{background:var(--sun) !important;color:var(--ink) !important}

/* ─── Barre promo ─── */
.topbar{background:var(--action) !important;color:#fff !important;border-bottom:var(--bd) !important;
  box-shadow:none !important;font-weight:700}
.topbar b{color:#fff}

/* ─── Nav : pilule blanche flottante, NON fixe (défile normalement avec la page) ─── */
header{background:transparent !important;border:none !important;box-shadow:none !important;
  position:static !important}
header .nav{background:#fff !important;border:var(--bd) !important;border-radius:999px !important;
  box-shadow:var(--sh-nav) !important;padding:9px 12px 9px 18px !important;margin:16px auto 8px !important;
  max-width:900px;display:flex;align-items:center;justify-content:space-between;gap:12px}
header .logo{color:var(--ink) !important}
header .mark{background:var(--action) !important;border:var(--bd) !important;border-radius:11px !important;color:#fff !important;box-shadow:none !important}
.nav-links a{color:var(--ink-soft) !important;font-weight:700}
.nav-links a:hover, .dd-btn:hover{color:var(--action) !important}
.dd-menu, .mm-sub{background:#fff !important;border:var(--bd) !important;box-shadow:var(--sh-card) !important;border-radius:14px !important}
.dd-menu a, .mm-sub a{color:var(--ink-soft) !important}
.dd-menu a:hover, .mm-sub a:hover{background:var(--surface-2) !important;color:var(--action) !important}
.burger{color:var(--enc) !important}
.mmenu{background:#fff !important;border:var(--bd) !important;box-shadow:var(--sh-card) !important;border-radius:16px !important}
.mm-lnk{color:var(--ink-soft) !important}

/* ─── Ancres : la barre n'étant plus fixe, on laisse les décalages d'origine du
   thème (scroll-margin-top 90 px desktop / 70 px ≤768 px). Aucun override ici. ─── */

/* ─── Barre mobile : logo (gauche) · « Créer mon jeu » (centre) · burger (droite) ───
   Le CTA n'existe qu'en mobile (desktop : barre inchangée). Il réutilise .btn.btn-primary
   → même style sticker accent que les boutons principaux, même lien que le CTA du hero. */
.nav-cta-m{display:none}
@media(max-width:940px){
  /* GRILLE 3 colonnes : logo (gauche) | CTA (centre EXACT) | burger (droite).
     minmax(0,1fr) sur les côtés → colonnes latérales STRICTEMENT égales (quelle que
     soit la largeur du logo/burger) → la colonne centrale (auto = CTA) est centrée.
     Padding pilule SYMÉTRIQUE (12 px) → centre du contenu = centre de l'écran. */
  header .nav{display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:6px;padding:8px 12px !important}
  header .nav > .logo{justify-self:start;min-width:0}
  header .nav > .nav-cta-m{justify-self:center}
  header .nav > .nav-cta{justify-self:end;margin:0 3px 0 0 !important}

  /* Logo EMPILÉ (mobile uniquement) : symbole au-dessus du mot, centrés l'un sur
     l'autre ; compact (symbole réduit) pour ne pas grandir la barre. */
  .logo{flex-direction:column;gap:2px;line-height:1}
  header .logo{font-size:16px !important}
  /* Symbole « S » : carré arrondi, MÊME forme que le desktop (34px / rayon 11px →
     ratio ~0,32). On réduit la taille ET le rayon proportionnellement pour qu'il
     reste carré (un rayon de 11px sur 24px le rendait presque rond). */
  .logo .mark{width:24px !important;height:24px !important;border-radius:7px !important}
  .logo .mark svg{width:14px;height:14px}

  /* CTA « Créer mon jeu » : sticker accent (réutilise .btn.btn-primary), compact. */
  .nav-cta-m{display:inline-flex !important;align-items:center;justify-content:center;
    padding:9px 13px !important;font-size:14px !important;line-height:1;white-space:nowrap;
    box-shadow:var(--sh-badge) !important}
  .nav-cta-m:active{transform:translateY(3px);box-shadow:0 0 0 var(--enc) !important}

  /* Burger en sticker arcade v4 : bordure encre 2,5 px + ombre dure sans flou + coins
     arrondis + pression. margin-right:3px → l'OMBRE (décalée de 3 px) se termine à la
     même marge intérieure que le logo à gauche (entièrement dans la pilule). */
  .burger{display:inline-flex !important;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:var(--bd) !important;border-radius:12px;
    background:#fff !important;box-shadow:var(--sh-badge) !important;
    transition:transform .08s ease,box-shadow .08s ease}
  .burger svg{width:22px;height:22px}
  .burger:active{transform:translateY(3px);box-shadow:0 0 0 var(--enc) !important}
}

/* ─── Cartes (sticker) ─── */
.card, .pb-card, .feat, .po-card, .serp, .rating-card, .cmp2-col, .rank-gain,
.quote-card, .tcard, .promo-card, .su-box, .rb-box, .game{
  background:#fff !important;border:var(--bd) !important;border-radius:14px !important;
  box-shadow:var(--sh-card) !important;
}
/* Gros chiffre "problème" : stat, pas une carte imbriquée */
.pb-big{background:transparent !important;border:none !important;box-shadow:none !important;
  font-size:34px;font-weight:800;color:var(--action);line-height:1}
.pb-big span{display:block;font-size:14px;font-weight:700;color:var(--ink-pale)}
/* Source : mention discrète (pas une pastille) */
.pb-src{display:inline-block;color:var(--ink-pale);font-size:12px;font-weight:400;
  text-transform:none;letter-spacing:0;border:none;background:none;box-shadow:none;transform:none;padding:0}
/* Champs de formulaire : sticker */
.lead-form input, .full, .rb-f input, .su-f input, input.full{
  border:2px solid var(--enc) !important;border-radius:12px !important;background:#fff !important;
  box-shadow:none !important;color:var(--ink) !important}
.lead-form input:focus, .full:focus{outline:none;box-shadow:0 3px 0 var(--enc) !important}
/* Grille des 4 jeux */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
@media(max-width:860px){.games{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.games{grid-template-columns:1fr}}
.game{padding:22px;text-align:center}

/* ─── Pastilles / sur-titres / rubans "avant-après" ─── */
.pb-rib, .ng-rib, .rib, .po-tag, .flag-pill{
  display:inline-block;background:#fff;border:var(--bd);border-radius:999px;
  padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--action);box-shadow:var(--sh-badge);transform:rotate(-1.5deg)}
.ng-rib{background:var(--action);color:#fff;transform:none}

/* ─── Sur-titres unifiés → pastille blanche inclinée (autocollant), partout + blog ─── */
.eyebrow:not(.hero-badge), .pcard .tag{
  display:inline-flex !important;align-items:center;gap:8px;
  background:#fff !important;border:var(--bd) !important;border-radius:999px !important;
  box-shadow:var(--sh-badge) !important;padding:6px 14px !important;
  color:var(--step-deep) !important;font-weight:800 !important;letter-spacing:.12em !important;
  transform:rotate(-1.5deg)}
/* dans une carte en flex-colonne, la pastille ne doit pas s'étirer sur toute la largeur */
.pcard .tag{align-self:flex-start;width:fit-content}

/* ─── Argument retour client (conclusion du parcours) ─── */
.pcv-punch{max-width:640px;margin:26px auto 0;text-align:center;font-size:18px;line-height:1.5;color:var(--ink);font-weight:600}
.pcv-punch b{color:var(--action);font-weight:800}

/* ─── Cartes problème : chiffre TRÈS gros/gras, "%" ~moitié aligné sur la ligne de base ─── */
.pb-card .pb-big{line-height:1}
.pb-card .pb-big .cnum{display:inline;font-size:52px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--action)}
.pb-card .pb-big .pct{display:inline;font-size:26px;font-weight:800;margin-left:4px;color:var(--action)}
.pb-card .pb-big span:not(.cnum):not(.pct){margin-top:6px}

/* ─── Padding intérieur confortable des cartes autocollant (comme .game) : sinon texte/icône
   collent à la bordure encre en haut/à gauche (section problème + « On s'occupe de tout ») ─── */
.pb-card{padding:24px}
.feat{padding:24px}

/* ─── Icônes autocollant : plus de carré lavande, l'icône EST le sticker.
   Contour encre + ombre dure uniformes sur les onze (problème, jeux, on s'occupe de tout). ─── */
.feat .fi, .game .ico, .pb-card .pb-ic{background:transparent !important;border:none !important;height:auto;overflow:visible}
.feat .fi svg, .game .ico svg, .pb-card .pb-ic svg{width:52px;height:52px;filter:drop-shadow(2.5px 2.5px 0 var(--enc));overflow:visible}
/* cartes à texte gauche : icône calée à gauche */
.feat .fi, .pb-card .pb-ic{width:fit-content;justify-content:flex-start;margin-bottom:14px}
/* section jeux : cartes centrées → icône centrée */
.game .ico{width:auto;margin:0 auto 16px}

/* ═══ Barre fixe CTA (accueil) — apparaît à la carte 74 %, glisse depuis le bas ═══ */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:var(--bd);
  box-shadow:0 -7px 22px rgba(26,26,26,.13);
  transform:translateY(115%);transition:transform .34s cubic-bezier(.2,.7,.2,1);
  padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.sbar.on{transform:translateY(0)}
.sbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px 18px;flex-wrap:wrap}
.sbar-btn{min-height:46px !important;padding:0 24px;white-space:nowrap}
.sbar-info{display:inline-flex;align-items:center;gap:10px;min-width:0}
.sbar-ic{width:28px;height:28px;flex:none;filter:drop-shadow(1.5px 1.5px 0 var(--enc))}
.sbar-info b{font-weight:800;color:var(--ink);font-size:15px;line-height:1.25}
/* WhatsApp remonté au-dessus de la barre quand elle est visible */
body.sb-bar-on .wa-float{transform:translateY(-66px);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
/* marge basse du footer pour que les liens légaux restent lisibles sous la barre (accueil) */
body:has(#sbar) footer{padding-bottom:92px}
@media(prefers-reduced-motion:reduce){
  .sbar{transition:none}
  body.sb-bar-on .wa-float{transition:none}
}
@media(max-width:520px){
  .sbar-in{gap:8px}
  .sbar-btn{width:100%;order:2}
  .sbar-info{order:1;justify-content:center;text-align:center;flex-wrap:wrap}
  .sbar-info b{font-size:13.5px}
}

/* ─── Source sous les cartes problème ─── */
.pb-srcline{max-width:1000px;margin:22px auto 0;text-align:center;font-size:12px;font-style:italic;color:var(--ink-pale)}
.pb-srcline a{color:var(--action);font-weight:700}

/* ─── Simulateur CA ─── */
.csim{max-width:560px;margin:32px auto 0;background:#fff;border:var(--bd);border-radius:20px;box-shadow:var(--sh-card);padding:26px 24px}
.csim-row{margin-bottom:22px}
.csim-row label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:12px}
.csim-row label b{font-size:18px;font-weight:800;color:var(--action);white-space:nowrap}
.rg{--fill:0%}
.rg input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;border:2.5px solid var(--enc);
  background:linear-gradient(90deg,var(--action) 0 var(--fill),#fff var(--fill) 100%);cursor:pointer;outline:none}
.rg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2.5px solid var(--enc);box-shadow:var(--sh-badge)}
.rg input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2.5px solid var(--enc);border-radius:50%;background:#fff;box-shadow:var(--sh-badge)}
.rg input[type=range]:focus-visible{outline:3px solid var(--action-line);outline-offset:2px}
.csim-res{margin-top:8px;background:var(--surface-2);border:var(--bd);border-radius:16px;box-shadow:var(--sh-badge);padding:18px 16px;text-align:center}
.csim-lb{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-pale)}
.csim-big{font-size:clamp(28px,7vw,38px);font-weight:800;color:var(--action);line-height:1.1;margin:6px 0}
.csim-sub{font-size:14.5px;color:var(--ink)}
.csim-sub b{color:var(--action);font-weight:800}
.csim-an{margin-top:6px;font-size:13px;color:var(--ink-pale)}
.csim-src{margin:16px 2px 0;font-size:11.5px;font-style:italic;line-height:1.5;color:var(--ink-pale)}
.csim-top{font-size:15px;font-weight:700;line-height:1.5;color:var(--ink)}

/* ─── /temoignages : nom visible sous chaque stat (aligné sur l'accueil) ─── */
.testi-name{margin-top:12px;font-size:13px;font-weight:700;color:var(--ink)}

/* ─── Badges flottants du hero ─── */
.hbub{background:#fff !important;border:var(--bd) !important;box-shadow:var(--sh-badge) !important;
  border-radius:999px !important;color:var(--enc) !important;font-weight:700}
.hb-ic{border:1.5px solid var(--enc) !important}

/* ─── Coches menthe (inclus) ─── */
.po-tick, .tick, .tk li svg, .plan li svg{
  color:#fff !important;background:var(--valid) !important;border:1.5px solid var(--enc) !important;
  border-radius:50% !important}

/* ─── Numéros d'étape (corail) ─── */
.num, .step-num, .sec-i{background:var(--step) !important;color:#fff !important;border:var(--bd) !important;border-radius:50% !important}

/* ─── Hero ─── */
.grad-text{}
.hero, .home-hero{background:transparent !important;overflow:hidden;position:relative}
/* halos diffus violet + framboise */
.home-hero::before{content:"";position:absolute;top:-80px;right:-120px;width:460px;height:460px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(124,58,237,.15),rgba(124,58,237,0) 70%)}
.home-hero::after{content:"";position:absolute;top:220px;left:-160px;width:420px;height:420px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(232,71,127,.11),rgba(232,71,127,0) 70%)}
.home-hero .wrap{position:relative;z-index:1}
.hero-stats{border-top:var(--bd) !important}
.cnum, .stats .s b, .hero-stats .s .cnum{color:var(--action) !important}

/* ─── Deux classements côte à côte (avant / après) ─── */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;align-items:start}
@media(max-width:860px){.rank-grid{grid-template-columns:1fr}}

/* ─── Ranking SERP ─── */
.serp{padding:16px}
.serp-row{border-radius:9px}
.serp-row .pos{background:var(--surface-2);border:1.5px solid var(--line);border-radius:6px;color:var(--ink-pale)}
.serp-row.dim, .serp-row.moi.dim{opacity:.62;background:#EFECF6;border:2px dashed var(--ink-pale)}
.serp-row.moi{background:#F3EDFE;border:2px solid var(--action)}
.serp-row.moi .pos{background:var(--action);color:#fff;border-color:var(--enc)}
.serp-sep, .serp-foot{color:var(--ink-pale)}

/* ─── Comparatif : rubans diagonaux (piège du filtre → z-index) ─── */
#le-support .cmp2-col, .cmp2-col{position:relative;overflow:hidden}
.cmp2-ribbon, .cmp2-col .band{
  position:absolute;z-index:3 !important;top:34px;left:-54px;right:auto !important;width:206px !important;
  transform:rotate(-45deg) !important;text-align:center;padding:7px 0 !important;line-height:1.1 !important;
  font-size:13.5px !important;font-weight:800;letter-spacing:.03em !important;text-transform:uppercase;color:#fff;
  white-space:nowrap;border-top:2px solid var(--enc) !important;border-bottom:2px solid var(--enc) !important;box-shadow:none !important}
.cmp2-col.dull .cmp2-ribbon{background:#5E5A6B !important}
.cmp2-col.live .cmp2-ribbon{background:var(--action) !important}
.cmp2-col.dull .cmp2-img{filter:saturate(.38) brightness(1.04)}
.cmp2-verdict{font-weight:800}
.cmp2-col.live .cmp2-verdict{color:var(--proof-ink)}

/* ─── Offre ─── */
.po-card.reco, .po-plan.reco, .reco{border-width:3px !important;box-shadow:var(--sh-reco) !important}
.po-price, .plan .pr{color:var(--ink) !important;font-weight:800}
.po-badge, .po-plan .pop, .plan .pop{background:var(--sun) !important;border:var(--bd) !important;color:var(--ink) !important;
  box-shadow:var(--sh-badge) !important;border-radius:999px !important;
  font-size:14px !important;font-weight:800 !important;padding:7px 18px !important;letter-spacing:0}

/* ─── FAQ ─── */
.faq-item{background:#fff !important;border:var(--bd) !important;border-radius:13px !important;
  box-shadow:var(--sh-nav) !important;overflow:hidden}
.faq-q{color:var(--ink) !important;font-weight:800 !important;min-height:44px}
.faq-a{color:var(--ink-soft) !important}

/* ─── Clôture : lavande dense + halo solaire (PAS de sombre) ─── */
#cle-en-main, .fin{background:var(--surface-2) !important;border-top:var(--bd) !important;
  border-bottom:none !important;color:var(--ink-soft) !important;position:relative}
#cle-en-main::before, .fin::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:520px;height:340px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(245,201,62,.16),rgba(245,201,62,0) 70%)}
#cle-en-main .wrap, .fin .wrap{position:relative;z-index:1}
#cle-en-main h2, #cle-en-main h3, .fin h2{color:var(--ink) !important}

/* ─── Pied de page : blanc ─── */
footer{background:#fff !important;border-top:var(--bd) !important;color:var(--ink-soft) !important}
footer h4, footer b{color:var(--ink) !important}
footer a{color:var(--ink-soft) !important}
footer a:hover{color:var(--action) !important}

/* ─── Popups (sticker) ─── */
.promo-card, .su-box, .rb-box{border:var(--bd) !important;box-shadow:var(--sh-card) !important;border-radius:16px !important}
.promo-cta, .su-box .btn, .rb-btn{border:var(--bd) !important;box-shadow:var(--sh-btn) !important}
.promo-hl{background:var(--action);color:#fff;border-radius:9px}

/* ─── WhatsApp flottant : bordure encre + ombre dure ─── */
.wa-float{border:var(--bd) !important;box-shadow:var(--sh-badge) !important}
.wa-float::after{border:var(--bd) !important;box-shadow:var(--sh-badge) !important}

/* ─── Halos offre ─── */
#tarifs, .offre{position:relative}
#tarifs::before{content:"";position:absolute;top:60px;right:-100px;width:420px;height:420px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(245,201,62,.15),rgba(245,201,62,0) 70%)}
#tarifs .wrap{position:relative;z-index:1}

/* ─── Mockup du hero : écran SOMBRE (seule zone sombre du site) ─── */
.hero-visual .phone-screen{
  background:linear-gradient(168deg,#2A1065,#3B1191 55%,#4C1D95) !important;
  color:#fff !important;border-color:#C4B5FD !important}
.hero-visual .phone-screen::before{display:none}
.hero-visual .pc-brand{display:inline-block;margin:2px auto 0;padding:6px 13px;
  border:1.5px solid rgba(196,181,253,.55);border-radius:10px;background:rgba(255,255,255,.07);
  color:#fff;font-weight:800;font-size:11.5px;box-shadow:none}
.hero-visual .pc-canvas{margin-top:16px}
/* Desktop uniquement (iPhone dans la colonne de droite) : on masque le badge
   « Nom de votre commerce » (peu lisible à cette taille). On masque en CSS — le
   markup reste, l'injection dynamique n'est pas cassée. On compense les ~35 px du
   badge (réparti haut/bas) pour garder la hauteur du téléphone et recentrer la roue.
   En mobile (≤940 px) : rien ne change, le badge reste. */
@media(min-width:941px){
  .home-hero .hero-visual .pc-brand{display:none}
  .home-hero .hero-visual .phone-screen{padding-top:90px;padding-bottom:73px}
}
/* Bouton « LANCER LA ROUE » : violet + liseré clair + BALAYAGE lumineux (conservé) */
.hero-visual .play-btn{position:relative;background:var(--action) !important;color:#fff !important;
  border:2px solid #C4B5FD !important;border-radius:13px !important;overflow:hidden;box-shadow:none !important}
.hero-visual .play-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.hero-visual .play-btn::after{animation:pbShine 5.5s ease-in-out infinite}}
@keyframes pbShine{0%{left:-60%}14%{left:120%}100%{left:120%}}

/* ─── Annotations du mockup (à l'extérieur, sur lavande → sticker) ─── */
.hero-visual .anno{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;background:#fff;
  border:var(--bd);border-radius:12px;padding:8px 14px;font-size:12px;font-weight:800;color:var(--action);
  box-shadow:var(--sh-badge);white-space:nowrap;pointer-events:none}
.hero-visual .anno svg{width:30px;height:18px;flex:none;color:var(--action)}
.hero-visual .anno-scr{top:18px;right:-10px}
.hero-visual .anno-whl{top:52%;left:-12px;transform:translateY(-50%)}
.hero-visual .anno-mob{display:none}
@media(max-width:1080px){
  .hero-visual{flex-direction:column;align-items:center}
  .hero-visual .anno{display:none}
  .hero-visual .anno-mob{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0;max-width:340px}
  .hero-visual .anno-mob span{display:inline-flex;align-items:center;border:var(--bd);border-radius:999px;
    padding:8px 18px;font-size:12.5px;font-weight:800;color:var(--action);background:#fff;box-shadow:var(--sh-badge)}
}

/* ─── Cadre vidéo du parcours (téléphone charte v4) ─── */
#parcours .pcv-frame{width:372px;max-width:86vw;margin:34px auto 0;padding:6px;border-radius:46px;
  border:3px solid var(--enc);box-shadow:var(--sh-phone);
  background:linear-gradient(148deg,#9A9AA0,#5A5A60 16%,#2E2E33 48%,#5A5A60 80%,#9A9AA0)}
#parcours .pcv-frame video{display:block;width:100%;height:auto;border-radius:40px;background:#08080A}
@media(max-width:420px){#parcours .pcv-frame{width:320px}}

/* ─── Corrections de contraste (audit) ─── */
/* Tuiles anti-fraude (#jeux .sec-i) : corail plein → blanc sticker, texte encre */
.secure .sec-i, .sec-i{background:#fff !important;border:var(--bd) !important;border-radius:14px !important;
  box-shadow:var(--sh-card) !important;color:var(--ink-soft) !important}
.sec-i b{color:var(--ink) !important}
.sec-i .ic{color:var(--valid-ink) !important;background:transparent !important}
/* Badge « en option » : violet sur violet → lavande clair + violet foncé */
.po-optmark{background:#F3EDFE !important;color:var(--action-deep) !important;border:1.5px solid var(--action-line-soft) !important}
/* Mention légale de la promo : gris trop clair → encre pâle (lien en violet) */
.promo-legal{color:var(--ink-pale) !important}
.promo-legal a{color:var(--action) !important}
/* Footer blanc : tagline + copyright en --muted-2 (4,45) → encre pâle (≈5:1) */
footer p, footer .cp, footer small, footer li, .ftb, .ftb span, footer span, .ft-tag{color:var(--ink-pale) !important}
/* Étoiles solaires : contour encre fin (lisibles sur blanc + esprit sticker) */
.rc-stars{-webkit-text-stroke:1.2px var(--enc);color:var(--sun)}

/* ─── prefers-reduced-motion ─── */
@media(prefers-reduced-motion:reduce){
  .btn{transition:none !important}
  body{background-attachment:scroll !important}
}

/* ═══ #1 — Bande de logos clients sous le hero ═══ */
/* Cadre existant conservé (deux traits encre) ; défilé continu desktop + mobile.
   Série de 18 cartes (17 logos + carte « Et bien d'autres commerces ») dupliquée
   une fois pour une boucle sans couture : translateX(-50%) = une série pile. */
.metiers-band{overflow:hidden;padding:18px 0;border-top:var(--bd);border-bottom:var(--bd);
  background:var(--surface-2);position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.logos-track{list-style:none;margin:0;padding:0 8px;display:flex;gap:16px;width:max-content;
  align-items:center;animation:logosDefile 55s linear infinite;will-change:transform}
.logos-track li{flex:none}
.logo-card,.logo-more{display:flex;align-items:center;justify-content:center;background:#fff;
  border:var(--bd);border-radius:16px;box-shadow:var(--sh-badge);height:96px;box-sizing:border-box}
.logo-card{padding:12px 18px}
.logo-card img{display:block;height:100%;width:auto;max-width:230px;object-fit:contain}
/* Carte de clôture, même style sticker — texte arcade (Plus Jakarta 800, encre) */
.logo-more{width:172px;padding:10px 16px;text-align:center}
.logo-more span{font-weight:800;font-size:15px;line-height:1.15;color:var(--ink);
  letter-spacing:.2px;text-wrap:balance}
@keyframes logosDefile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
/* Pause au survol : ordinateur uniquement (pointeur fin) */
@media(hover:hover){
  .metiers-band:hover .logos-track{animation-play-state:paused}
}
/* Mobile : cartes plus petites, défilé un peu plus court → vitesse perçue voisine */
@media(max-width:760px){
  .logos-track{animation-duration:38s}
  .logo-card,.logo-more{height:64px}
  .logo-card{padding:8px 12px}
  .logo-card img{max-width:150px}
  .logo-more{width:134px;padding:8px 12px}
  .logo-more span{font-size:12.5px}
}
/* Accessibilité : mouvement coupé → bande fixe, consultable par défilement manuel */
@media(prefers-reduced-motion:reduce){
  .logos-track{animation:none}
  .metiers-band{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ═══ #4 — Fiche Google vivante sous le téléphone ═══ */
.hero-visual{display:flex;flex-direction:column;align-items:center}
.hero-visual .gf{width:min(330px,90%);margin:18px auto 0;background:#fff;border:var(--bd);
  border-radius:16px;box-shadow:var(--sh-card);padding:14px 16px;text-align:left;position:relative;z-index:5}
.gf-h{display:flex;align-items:center;gap:9px;min-width:0}
.gf-g{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--enc);background:#fff;
  color:#4285F4;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.gf-h b{font-size:15.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.gf-tag{flex:none;margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-pale);background:var(--surface-2);border:1.5px solid var(--enc);border-radius:999px;padding:3px 9px}
.gf-note{display:flex;align-items:center;gap:9px;margin-top:11px;position:relative}
.gf-note>b{font-size:22px;color:var(--ink);font-weight:800;line-height:1;min-width:2.1ch}
.gf-stars{color:var(--sun);font-size:16px;letter-spacing:2px;-webkit-text-stroke:1px var(--enc)}
.gf-c{font-size:14px;color:var(--ink-pale);font-weight:700}
.gf-c.pop{animation:gfPop .55s ease}
@keyframes gfPop{35%{transform:scale(1.3);color:var(--proof-ink)}}
.gf-plus{position:absolute;right:2px;top:-2px;font-weight:800;font-size:15px;color:var(--proof-ink);opacity:0;pointer-events:none}
.gf-plus.go{animation:gfPlus 1.1s ease forwards}
@keyframes gfPlus{0%{opacity:0;transform:translateY(6px)}22%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.gf-rev{margin-top:11px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px;
  padding:9px 12px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.gf-rev.in{animation:gfRev .45s ease}
@keyframes gfRev{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gf-rev.in,.gf-c.pop,.gf-plus.go{animation:none !important}}

/* ═══ #1 — Bloc preuves sur l'accueil (deux témoignages vidéo) ═══ */
.preuves-home{position:relative}
.preuves-home::before{content:"";position:absolute;left:50%;top:14%;width:460px;height:460px;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(47,196,174,.16),transparent 70%);
  pointer-events:none;z-index:0}
.preuves-home .wrap{position:relative;z-index:1}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.ph-card{display:flex;gap:16px;background:#fff;border:var(--bd);border-radius:16px;
  box-shadow:var(--sh-card);padding:16px}
.ph-media{position:relative;flex:none;width:136px;aspect-ratio:9/16;border:2px solid var(--enc);
  border-radius:12px;overflow:hidden;padding:0;cursor:pointer;background:#000;display:block}
.ph-media img{width:100%;height:100%;object-fit:cover;display:block}
.ph-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:var(--action);border:2.5px solid #fff;color:#fff;display:flex;
  align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .12s}
.ph-media:hover .ph-play{transform:translate(-50%,-50%) scale(1.09)}
.ph-iframe{width:136px;aspect-ratio:9/16;border:2px solid var(--enc);border-radius:12px;flex:none;background:#000}
.ph-body{display:flex;flex-direction:column;gap:11px;min-width:0}
.ph-stat{display:flex;flex-direction:column;line-height:1.05}
.ph-stat b{font-size:26px;color:var(--proof-ink);font-weight:800}
.ph-stat span{font-size:12.5px;color:var(--ink-pale);font-weight:600;margin-top:3px}
.ph-quote{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.ph-quote footer{margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
@media(max-width:860px){.ph-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}
@media(max-width:430px){.ph-card{flex-direction:column;align-items:center;text-align:center}
  .ph-media,.ph-iframe{width:100%;max-width:190px}.ph-stat{align-items:center}}

/* ── Spot témoignage : vidéo sticker sous la vidéo parcours ── */
.spot-frame{position:relative;width:372px;max-width:86vw;aspect-ratio:9/16;margin:24px auto 0;
  border:var(--bd);border-radius:24px;overflow:hidden;background:#000;box-shadow:var(--sh-card)}
.spot-vid{width:100%;height:100%;object-fit:cover;display:block}
.spot-sound{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(10,8,22,.58);border:2px solid #fff;color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0;transition:transform .12s;z-index:2}
.spot-sound:hover{transform:scale(1.08)}
.spot-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;
  border-radius:50%;background:var(--action);border:3px solid #fff;color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:2}
.spot-play[hidden]{display:none}
@media(max-width:420px){.spot-frame{width:320px}}

/* ── Bannières de durée (pastille sticker v4) ── */
.dur-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;
  white-space:nowrap;font-size:11px;font-weight:800;line-height:1;padding:6px 10px;border-radius:999px;
  border:2px solid var(--enc);box-shadow:var(--sh-badge)}
.dur-badge--court{background:var(--sun);color:var(--on-sun)}
.dur-badge--long{background:var(--action);color:var(--on-action)}
@media(max-width:360px){.dur-badge{font-size:10px;padding:5px 8px}}

/* ═══ #7 — Offre : Starter étroite, Business dominante ═══ */
#tarifs .po-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:start;
  max-width:1160px;margin:32px auto 0}
#tarifs .po-card.reco{position:relative}
@media(max-width:900px){#tarifs .po-grid{grid-template-columns:1fr;max-width:460px}}

/* ═══ #5 — Lot révélé sur l'écran du téléphone (tours suivants) ═══ */
.pc-prize{margin:11px auto 0;display:none;align-items:center;justify-content:center;gap:8px;
  background:var(--sun);border:2.5px solid var(--enc);border-radius:999px;color:var(--ink);
  font-weight:800;font-size:15px;padding:9px 16px;box-shadow:3px 3px 0 var(--enc);max-width:90%}
.pc-prize.show{display:inline-flex;animation:pcPrizePop .5s ease}
@keyframes pcPrizePop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.pc-prize.show{animation:none}}

/* ═══ A — Flottement léger des bulles du hero (décalé, discret) ═══ */
@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:no-preference){
  .hbub{animation:hbFloat 5.4s ease-in-out infinite}
  .hb1{animation-delay:-.6s}
  .hb2{animation-delay:-2.3s;animation-duration:6.2s}
  .hb3{animation-delay:-3.8s;animation-duration:5.8s}
}

/* ═══ B — Violet sous le surlignage : CAUSE = theme-commercial .hlpen::before ═══
   Ce pseudo peint un marqueur violet (var(--accent-soft) = #A78BFA) DERRIÈRE le mot.
   Le surlignage solaire est désormais porté par .hlpen>span ; le marqueur violet
   n'a plus lieu d'être et dépassait autour de la pastille jaune. On le supprime. */
.hlpen::before{display:none !important}

/* ═══ Émojis en orbite autour du mockup (lot A2, révisé) ═══
   Enfants de .phone (270px) → collés au cadre. z-index dans le contexte de .phone
   (z-index:2) → structurellement DERRIÈRE les bulles (5) et annotations (6) de
   .hero-visual : aucun recouvrement possible. Mouvement orbital (translation circulaire). */
.hemoji{position:absolute;z-index:5;font-size:28px;line-height:1;pointer-events:none;
  filter:drop-shadow(2px 3px 1px rgba(26,26,26,.22))}
.he1{top:-20px;left:112px}      /* étoile — au-dessus du cadre, centrée */
.he2{bottom:70px;right:-20px}   /* burger — bord droit, bas */
.he3{top:104px;left:-20px}      /* café — bord gauche, haut */
@keyframes orbCW{0%{transform:translate(8px,0)}25%{transform:translate(0,8px)}50%{transform:translate(-8px,0)}75%{transform:translate(0,-8px)}100%{transform:translate(8px,0)}}
@keyframes orbCCW{0%{transform:translate(-8px,0)}25%{transform:translate(0,8px)}50%{transform:translate(8px,0)}75%{transform:translate(0,-8px)}100%{transform:translate(-8px,0)}}
@media(prefers-reduced-motion:no-preference){
  .he1{animation:orbCW 8.5s linear infinite}
  .he2{animation:orbCCW 9.5s linear infinite;animation-delay:-3s}
  .he3{animation:orbCW 10s linear infinite;animation-delay:-6s}
}
@media(max-width:1080px){.hemoji{display:none}}  /* décor desktop, comme les bulles */

/* ═══ #4 lot — Sous-titres de section : encre + gras (taille inchangée) ═══
   Titre h2 = 800 + grande taille → hiérarchie conservée. Sous-titre hero (.hero .lead) exclu. */
.head-center p, .pb-sub, .rating-band .lead{color:var(--ink) !important;font-weight:700 !important}

/* ═══ CORRECTIF débordement horizontal mobile ═══
   Les halos décoratifs v4 (::before) débordent volontairement de leur section
   (charte « en débord »). Mais body{overflow-x:hidden} ne les rattrape pas de
   façon fiable sur iOS → bande noire + scroll latéral sous ~460px.
   Cause : #tarifs::before (right:-100px), .preuves-home::before (460px centré),
   #cle-en-main/.fin::before (520px centré).
   Fix : on confine chaque halo à SA section (overflow-x:clip garde l'axe vertical
   visible → badge « Le + populaire » intact). Pas de rustine overflow sur body. */
.preuves-home, #tarifs, .offre, #cle-en-main, .fin{overflow-x:clip}

/* ═══ #2/#3 — Éclat d'emoji à l'ouverture des popups ═══
   .popfx = 2 moitiés (clip-path) qui grossissent → se fendent → explosent,
   + particules ; puis l'offre (.promo-card/.rb-box/.su-box) apparaît.
   Déclenché par l'ouverture (.on / .open). 🍔 sur #winPopup, 🎁 sur les 3 autres.
   #modal (jeu 100% gagnant) non concerné. reduced-motion : aucune séquence. */
.popfx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;z-index:6;pointer-events:none;opacity:0}
.popfx .pfx-a,.popfx .pfx-b{position:absolute;left:-32px;top:-32px;width:64px;height:64px;font-size:58px;line-height:64px;text-align:center;opacity:0;filter:drop-shadow(2px 3px 0 rgba(26,26,26,.25))}
.popfx .pfx-a{clip-path:inset(0 0 50% 0)}          /* moitié haute (couvercle) */
.popfx .pfx-b{clip-path:inset(50% 0 0 0)}          /* moitié basse */
.popfx i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;opacity:0}
.popfx i:nth-child(3){background:var(--sun);--dx:0px;--dy:-72px}
.popfx i:nth-child(4){background:var(--reward);--dx:52px;--dy:-52px}
.popfx i:nth-child(5){background:var(--valid);--dx:72px;--dy:0px}
.popfx i:nth-child(6){background:var(--action);--dx:52px;--dy:52px}
.popfx i:nth-child(7){background:var(--sun);--dx:0px;--dy:72px}
.popfx i:nth-child(8){background:var(--reward);--dx:-52px;--dy:52px}
.popfx i:nth-child(9){background:var(--valid);--dx:-72px;--dy:0px}
.popfx i:nth-child(10){background:var(--action);--dx:-52px;--dy:-52px}

.promo.on .popfx, .rb-ov.open .popfx, .su-ov.open .popfx{opacity:1}
.promo.on .popfx .pfx-a, .rb-ov.open .popfx .pfx-a, .su-ov.open .popfx .pfx-a{animation:pfxTop 1.05s ease forwards}
.promo.on .popfx .pfx-b, .rb-ov.open .popfx .pfx-b, .su-ov.open .popfx .pfx-b{animation:pfxBot 1.05s ease forwards}
.promo.on .popfx i, .rb-ov.open .popfx i, .su-ov.open .popfx i{animation:pfxPart 1.05s ease-out forwards}
.promo.on .promo-card, .rb-ov.open .rb-box, .su-ov.open .su-box{animation:offerIn .5s .82s both}

@keyframes pfxTop{
  0%{opacity:0;transform:scale(.3)}
  22%{opacity:1;transform:scale(1.25) translateY(0) rotate(0)}
  38%{transform:scale(1) translateY(0) rotate(0)}
  52%{transform:scale(1) translateY(-3px) rotate(-4deg)}
  64%{opacity:1;transform:scale(1.03) translateY(-13px) rotate(-9deg)}
  100%{opacity:0;transform:scale(1.7) translateY(-34px) rotate(-15deg)}
}
@keyframes pfxBot{
  0%{opacity:0;transform:scale(.3)}
  22%{opacity:1;transform:scale(1.25) translateY(0) rotate(0)}
  38%{transform:scale(1) translateY(0) rotate(0)}
  52%{transform:scale(1) translateY(3px) rotate(4deg)}
  64%{opacity:1;transform:scale(1.03) translateY(13px) rotate(9deg)}
  100%{opacity:0;transform:scale(1.7) translateY(34px) rotate(15deg)}
}
@keyframes pfxPart{
  0%,54%{opacity:0;transform:translate(0,0) scale(.4)}
  62%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}
}
@keyframes offerIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .popfx{display:none !important}
  .promo.on .promo-card, .rb-ov.open .rb-box, .su-ov.open .su-box{animation:none !important}
}

/* ═══ Roue du hero qui sort du cadre (une fois, à l'arrivée) ═══
   On lève le rognage de l'écran (theme .phone-screen{overflow:hidden}) : le fond
   reste arrondi (background respecte border-radius), le voile ::before est déjà
   désactivé sur l'accueil, donc seule la roue s'échappe. Le débord est contenu
   par .home-hero{overflow:hidden} → pas de scroll horizontal. */
.hero-visual .phone-screen{overflow:visible}
.hero-visual .pc-canvas{overflow:visible}

/* La ROUE déborde du cadre — le TÉLÉPHONE garde sa taille d'origine (canvas inchangé,
   aucune hauteur ajoutée).
   Desktop : roue agrandie (×1,9) décalée vers le HAUT → elle sort par le haut et les
   côtés ; le bouton reste dégagé dessous, le nom passe au premier plan.
   Mobile : roue dimensionnée par sa LARGEUR fluide (≈330 px, jamais moins de 16 px de
   marge de chaque côté quelle que soit la largeur d'écran) → débord latéral net,
   logée dans le canvas d'origine (nom + bouton dégagés). */
.hero-visual{--wout-scale:1.9;--wout-ty:-44px}

/* Nom du commerce + bouton « LANCER LA ROUE » au PREMIER PLAN (visibles, cliquables)
   devant la roue qui déborde. */
.hero-visual .pc-brand{position:relative;z-index:8}
.hero-visual .play-btn{z-index:8}
.hero-visual .wheel-box{transform-origin:50% 50%;z-index:7}

/* Style sticker charte v4 : filet encre + ombre portée DURE sous la roue (relief). */
.hero-visual .wheel-box{filter:drop-shadow(0 8px 0 rgba(26,26,26,.92))}
.hero-visual .wheel-box::after{content:"";position:absolute;inset:2px;border-radius:50%;
  box-shadow:0 0 0 3px #1A1A1A;pointer-events:none;z-index:1}

/* « Elle sort de l'écran » : agrandissement + décalage (translateY), déclenché par
   .wheel-out (ajoutée en JS à l'arrivée dans le champ). Reste sortie (fill both). */
.hero-visual .wheel-box.wheel-out{animation:wheelOut 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes wheelOut{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(var(--wout-ty)) scale(var(--wout-scale))}
}
@media(prefers-reduced-motion:reduce){
  /* roue directement en position sortie, sans animation */
  .hero-visual .wheel-box{transform:translateY(var(--wout-ty)) scale(var(--wout-scale))}
  .hero-visual .wheel-box.wheel-out{animation:none}
}
/* Tablette/mobile (≤940 px, hero en 1 colonne, canvas d'origine 340 px inchangé) :
   la roue est dimensionnée par sa LARGEUR fluide → elle déborde nettement des côtés
   (≈330 px) tout en gardant ≥16 px de marge à l'écran et zéro scroll horizontal, et
   tient dans la hauteur du canvas (nom + bouton dégagés). Entrée : léger « pop » + décalage. */
@media(max-width:940px){
  .hero-visual{--wout-scale:1;--wout-ty:-6px}
  .hero-visual .wheel-box{width:min(330px, 100vw - 32px)}
  .hero-visual .wheel-box.wheel-out{animation:wheelOutMob 1s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes wheelOutMob{
  from{transform:translateY(0) scale(.86)}
  to{transform:translateY(var(--wout-ty)) scale(1)}
}

/* ═══ Balancement au repos : la roue frétille ~1 s puis se repose ~4 s (cycle 5 s),
   pour donner envie de recliquer. Sur un conteneur SÉPARÉ (.wheel-wob) → se cumule
   avec l'agrandissement (.wheel-box) et la rotation du tour (#wheel) sans les écraser.
   Activé/coupé en JS via la classe .wob (retirée pendant que la roue tourne). */
.hero-visual .wheel-wob{transform-origin:50% 7%}      /* pivot au niveau du pointeur (haut) */
.hero-visual .wheel-wob.wob{animation:wheelWob 5s ease-in-out infinite}
@keyframes wheelWob{
  0%,80%{transform:rotate(0deg)}                       /* ~4 s au repos */
  83%{transform:rotate(4deg)} 86%{transform:rotate(-3.2deg)}
  89%{transform:rotate(2.2deg)} 92%{transform:rotate(-1.4deg)}
  95%{transform:rotate(.7deg)} 97.5%{transform:rotate(-.3deg)}
  100%{transform:rotate(0deg)}                         /* ~1 s de frétillement amorti */
}
@media(prefers-reduced-motion:reduce){ .hero-visual .wheel-wob.wob{animation:none} }

/* ═══ #2 — Téléphone plus grand en mobile (Option B : écran allongé) ═══
   Largeur INCHANGÉE (pas plus large), écran plus long → téléphone plus grand ET
   plus réaliste (ratio ~2,1, comme un vrai smartphone). Scopé accueil. */
@media(max-width:940px){
  .hero-visual .pc-canvas{height:340px}
}

/* ═══ Correctif — espace entre les boutons du hero ═══
   Desktop : .hero-actions est en flex → on augmente le gap (l'ombre dure 3D de
   5px mangeait l'espace). Mobile (≤768px) : le thème passe en display:block avec
   margin:0 → les boutons se touchent ; on rétablit une marge explicite. */
.hero-actions{gap:18px}
@media(max-width:768px){.hero-actions .btn + .btn{margin-top:16px}}

/* ═══ Roue du hero — rendu identique à l'aperçu /creer (palette crème-marron) ═══
   Repro fidèle du composant WheelFace (spinboost-app), posée dans le téléphone du
   hero (écran sombre conservé). L'anneau .cw-ring porte l'ombre dure + le filet
   encre (on neutralise l'ancien filtre et le ::after). Tout scale avec .wheel-box
   (effet de sortie inchangé). Géométrie identique → arrêt « 14 jours » préservé. */
.hero-visual #wheelFrame{display:none}
.hero-visual .wheel-box{filter:none}
.hero-visual .wheel-box::after{display:none}
/* Lève toute la roue au-dessus de l'encoche (z6) et des emojis (z5), sous le
   nom + bouton (z8). Niveau posé sur .wheel-wob, enfant direct du contexte du
   téléphone (le transform de .wheel-box/.wheel-wob piège sinon son z-index). */
.hero-visual .wheel-wob{position:relative;z-index:7}
.hero-visual #wheel{top:4.5%;left:4.5%;right:auto;bottom:auto;width:91%;height:91%}
.cw-halo{position:absolute;left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(201,123,74,.12) 0deg 7deg, transparent 7deg 15deg)}
@media(prefers-reduced-motion:no-preference){.cw-halo{animation:cwSun 42s linear infinite}}
@keyframes cwSun{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cw-ring{position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from 90deg,#9C5A33,#C97B4A,#E3B48E,#9C5A33,#C97B4A,#E3B48E,#9C5A33);
  box-shadow:calc(7px / var(--wout-scale,1)) calc(8px / var(--wout-scale,1)) 0 #1A1A1A, inset 0 0 0 3px #1A1A1A}
.cw-bulb{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
  z-index:3;animation:cwTwinkle 1.5s ease-in-out infinite}
.cw-bulb.bright{background:#F5C93E;box-shadow:0 0 8px 1px rgba(245,201,62,.9)}
.cw-bulb.dim{background:#ffffff;box-shadow:inset 0 0 0 1.5px #1A1A1A}
@keyframes cwTwinkle{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.cw-bulb,.cw-halo{animation:none}}
.hero-visual .wheel-pointer{top:-3%;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid #C97B4A;
  border-bottom:0;background:none;filter:drop-shadow(2px 2px 0 #1A1A1A);z-index:5}
.hero-visual .wheel-hub{width:17%;height:17%;border:none;z-index:4;
  background:radial-gradient(circle at 35% 30%,#E3B48E,#C97B4A 45%,#9C5A33);
  box-shadow:inset 0 0 0 2.5px #1A1A1A, 2px 2px 0 #1A1A1A;display:flex;align-items:center;justify-content:center}
.hero-visual .wheel-hub svg{display:none}
.cw-knob{width:58%;height:58%;border-radius:50%;background:#C97B4A;box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
/* Bouton « LANCER LA ROUE » — style du jeu live (dégradé terracotta, ombre dure encre) */
.hero-visual .play-btn{background:linear-gradient(180deg,#E3B48E,#C97B4A 45%,#9C5A33) !important;
  color:#fff !important;border:2.5px solid #1A1A1A !important;border-radius:14px !important;
  box-shadow:0 5px 0 #1A1A1A !important;font-weight:800}
.hero-visual .play-btn::after{display:none}