/* ============================================================
 * BARA Hub, design system du site baramind.ci
 * Refonte 29/07/2026 · positionnement Cockpit PME B2B
 * Feuille unique partagée par toutes les pages du site.
 * Palette or/nuit BARA MIND conservée, structure repensée.
 * ============================================================ */

:root{
  --bg:#0a0c11; --bg-2:#0f1219; --bg-3:#141822; --card:#11151e;
  --gold:#d4a64a; --gold-bright:#e9c574; --gold-deep:#b8862f;
  --cream:#f4efe3; --text:#c4c9d2; --muted:#838a97;
  --line:rgba(212,166,74,.16); --line-soft:rgba(255,255,255,.06);
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --grad-gold:linear-gradient(95deg,#b8862f 0%,#e9c574 50%,#d4a64a 100%);
  --display:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
section{position:relative}
::selection{background:rgba(212,166,74,.28);color:var(--cream)}

h1,h2,h3,h4,h5{font-family:var(--display);color:var(--cream);font-weight:600;line-height:1.1;letter-spacing:-.022em}
h1{font-size:clamp(34px,4.6vw,56px);font-weight:700;letter-spacing:-.032em}
h2{font-size:clamp(28px,3.8vw,44px)}
h3{font-size:clamp(20px,2.4vw,26px)}
b,strong{color:var(--cream);font-weight:600}

.bar-top{height:3px;background:var(--grad-gold)}

/* ---- Bandeau promo global, haut de page, 6 pages du site ----
   Se place entre .bar-top et <nav>, donc AU-DESSUS de la nav sticky : il reste
   visible sans scroller, puis défile normalement, la nav vient ensuite se coller
   en haut. Ne casse ni la nav sticky ni le padding du contenu.
   RÈGLE : jamais de montant dans ce bandeau. Les prix vivent uniquement sur
   /tarifs ; dupliquer un chiffre ici créerait une divergence à la première
   évolution tarifaire. On s'en tient à "-50%" et à la date de fin.
   Extinction automatique après le 14/09/2026 par le script inline de chaque page
   (même patron de date que la bascule de prix de tarifs.html). */
.promo-bar{background:linear-gradient(90deg,rgba(212,166,74,.17),rgba(212,166,74,.06) 52%,rgba(212,166,74,.17));border-bottom:1px solid var(--line)}
.promo-bar-in{max-width:var(--maxw);margin:0 auto;padding:9px 24px;display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;text-align:center;font-size:13.5px;line-height:1.45;color:var(--text)}
.promo-bar-tag{background:var(--grad-gold);color:#1a1206;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap}
.promo-bar-txt b{color:var(--gold-bright)}
.promo-bar-link{color:var(--gold-bright);font-weight:600;white-space:nowrap;border-bottom:1px solid rgba(233,197,116,.45);transition:color .2s var(--ease),border-color .2s var(--ease)}
.promo-bar-link:hover{color:var(--cream);border-bottom-color:var(--cream)}
/* Texte long à partir de 768px, texte court en dessous. Deux spans dans le même
   bandeau, zéro JS : sur mobile le bandeau doit tenir en 2 lignes maximum, sinon
   il repousse le logo et mange le haut de page sur du trafic payant. On raccourcit
   le texte plutôt que de réduire la police, qui deviendrait illisible. */
.promo-bar-short{display:none}
@media(max-width:767px){
  .promo-bar-full{display:none}
  .promo-bar-short{display:inline}
}
/* Gouttière alignée sur celle du site : .wrap vaut 24px, et 18px sous 680px.
   Sans ce padding le texte colle au bord gauche de l'écran en 375px. */
@media(max-width:680px){
  .promo-bar-in{padding:8px 18px;gap:6px 10px;font-size:12.5px}
  .promo-bar-tag{font-size:9.8px;padding:3px 10px}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-tight{max-width:900px;margin:0 auto;padding:0 24px}
.sec{padding:92px 0}
.sec.alt{background:var(--bg-2)}
.sec.tight{padding:64px 0}
.gold{color:var(--gold)}
.center{text-align:center}
.mt0{margin-top:0}

.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-block;margin-bottom:14px}
.lead{color:var(--muted);font-size:clamp(16px,2.1vw,18.5px);max-width:660px;line-height:1.66}
.sec-head{margin-bottom:52px;max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--muted);font-size:16.5px;margin-top:16px;line-height:1.65}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;padding:14px 26px;border-radius:40px;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s;white-space:nowrap;text-align:center}
.btn-gold{background:var(--grad-gold);color:#1a1206;box-shadow:0 6px 22px rgba(212,166,74,.22)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,166,74,.36)}
.btn-ghost{border:1px solid var(--line);color:var(--cream);background:rgba(212,166,74,.04)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(212,166,74,.1)}
.btn-lg{font-size:16px;padding:16px 32px}
.btn-full{width:100%}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);background:rgba(10,12,17,.72);border-bottom:1px solid transparent;transition:.35s var(--ease)}
nav.scrolled{background:rgba(10,12,17,.94);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--cream);flex-shrink:0}
.logo b{color:var(--gold);font-weight:700}
.logo-mark{height:38px;width:auto;flex-shrink:0}
.logo-txt{line-height:1}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text);transition:.2s;position:relative}
.nav-links a:hover{color:var(--gold)}
.nav-links a.on{color:var(--cream);font-weight:600}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grad-gold);border-radius:2px}
.nav-links a.btn::after{display:none}
/* 🔴 Spécificité : `.nav-links a` (0,1,1) l'emporte sur `.btn-gold` (0,1,0) et repeignait
   le texte du CTA en gris clair sur fond or, contraste mesuré 1,01:1, texte illisible.
   Détecté au QC sur le live le 29/07/2026. Ne pas retirer ces deux règles. */
.nav-links a.btn-gold{color:#1a1206}
.nav-links a.btn-ghost{color:var(--cream)}
.menu-btn{display:none;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer;line-height:1;padding:6px}

/* ---------- HERO ---------- */
.hero{padding:64px 0 72px;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;top:-180px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(212,166,74,.13),transparent 62%);pointer-events:none;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 26%;opacity:.6}
/* Double voile : vertical pour la base, horizontal pour garder le texte lisible à gauche.
   Allégé le 16/08 (retour de revue interne : image de fond peu visible, rendu trop sombre) :
   opacité image .34→.6, voile droit .42→.22 pour que la photo reste visible sous le device
   mockup, voile gauche gardé fort (.9) pour que le texte hero reste lisible. Contrôlé au
   rendu réel, ne pas alléger le voile gauche sans revérifier le contraste du H1/lead. */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,17,.32) 0%,rgba(10,12,17,.5) 55%,rgba(10,12,17,.88) 100%),linear-gradient(90deg,rgba(10,12,17,.9) 0%,rgba(10,12,17,.72) 46%,rgba(10,12,17,.22) 100%)}
.hero>.wrap{position:relative;z-index:2}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero h1 .sub{display:block;font-weight:500;color:var(--gold);font-size:clamp(19px,2.9vw,31px);margin-top:12px;letter-spacing:-.02em;line-height:1.24}
.hero .lead{margin:24px 0 32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:34px;display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.hero-meta span{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* Bandeau hero court (pages internes) */
.phead{padding:76px 0 44px;position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.phead::before{content:"";position:absolute;top:-220px;right:-160px;width:600px;height:600px;background:radial-gradient(circle,rgba(212,166,74,.1),transparent 64%);pointer-events:none}
.phead .wrap{position:relative}
.phead h1{font-size:clamp(32px,4.6vw,54px);max-width:16ch}
.phead .lead{margin-top:20px}

/* ---------- MOCKUP DASHBOARD (natif, données fictives) ---------- */
.device{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.device.tilt{transform:rotateY(-7deg) rotateX(3deg);transition:transform .6s var(--ease)}
.hero-visual{position:relative;perspective:1600px}
.hero-visual:hover .device.tilt{transform:none}
.device .bar{background:#0d1017;border-bottom:1px solid var(--line);padding:11px 16px;display:flex;align-items:center;gap:8px}
.device .bar i{width:10px;height:10px;border-radius:50%;display:block}
.device .bar i:nth-child(1){background:#ff5f57}.device .bar i:nth-child(2){background:#febc2e}.device .bar i:nth-child(3){background:#28c840}
.device .bar span{font-size:11px;color:var(--muted);margin-left:8px;font-family:var(--mono)}
.dv-body{padding:16px}
.dv-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.dv-kpis.k3{grid-template-columns:repeat(3,1fr)}
.dv-kpi{background:var(--card);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px}
.dv-kpi .l{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dv-kpi .v{font-family:var(--display);font-size:19px;font-weight:600;color:var(--cream);margin-top:4px;line-height:1.15}
.dv-kpi .d{font-size:10.5px;margin-top:3px;color:var(--muted)}
.dv-kpi .d.up{color:var(--ok)}.dv-kpi .d.down{color:var(--bad)}.dv-kpi .d.warn{color:var(--warn)}
.dv-chart{background:var(--card);border:1px solid var(--line-soft);border-radius:10px;padding:14px}
.dv-chart .h{font-size:11px;color:var(--cream);font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.dv-chart .h em{font-style:normal;color:var(--muted);font-weight:500;font-size:10px}
.dv-bars{display:flex;align-items:flex-end;gap:7px;height:78px}
.dv-bars .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.dv-bars .b{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));transform-origin:bottom;animation:rise 1s var(--ease) both}
.dv-bars .b.mut{background:linear-gradient(180deg,#2b3140,#1b2029)}
.dv-bars .bl{font-size:9px;color:var(--muted)}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Lignes de tableau dans les mockups */
.dv-rows{background:var(--card);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.dv-row{display:grid;grid-template-columns:1.4fr .8fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:11.5px}
.dv-row:last-child{border-bottom:none}
.dv-row .n{color:var(--cream);font-weight:500}
.dv-row .n em{display:block;font-style:normal;color:var(--muted);font-size:10px;margin-top:2px}
.dv-row .a{font-family:var(--display);color:var(--cream);font-weight:600;text-align:right;font-size:12.5px}
.tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap}
.tag.ok{background:rgba(74,222,128,.14);color:#86efac}
.tag.late{background:rgba(248,113,113,.14);color:#fca5a5}
.tag.wait{background:rgba(251,191,36,.14);color:#fcd34d}

/* Barres de répartition */
.dv-split{background:var(--card);border:1px solid var(--line-soft);border-radius:10px;padding:14px}
.dv-line{margin-bottom:11px}
.dv-line:last-child{margin-bottom:0}
.dv-line .t{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px}
.dv-line .t b{color:var(--cream);font-weight:600}
.dv-line .t span{color:var(--muted)}
.dv-line .track{height:7px;background:rgba(255,255,255,.05);border-radius:6px;overflow:hidden}
.dv-line .fill{height:100%;border-radius:6px;background:var(--grad-gold)}
.dv-line .fill.c2{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.dv-line .fill.c3{background:linear-gradient(90deg,#10b981,#34d399)}
.dv-line .fill.c4{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}

.float-badge{position:absolute;background:rgba(17,21,30,.94);border:1px solid var(--line);border-radius:12px;padding:10px 14px;backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:12px;display:flex;align-items:center;gap:9px;animation:floaty 4.4s ease-in-out infinite;color:var(--text)}
.float-badge .pill{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(74,222,128,.18);flex-shrink:0}
.fb-1{top:-16px;left:-22px}
.fb-2{bottom:-18px;right:-14px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.mock-caption{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- CARTES / GRILLES ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(212,166,74,.34)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px;line-height:1.62}
.card .ico{width:44px;height:44px;border-radius:12px;background:rgba(212,166,74,.1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--gold)}
.card .ico svg{width:22px;height:22px}

/* Preuves chiffrées */
.statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center}
.stat .v{font-family:var(--display);font-size:clamp(30px,4vw,42px);font-weight:700;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.05}
.stat .l{color:var(--cream);font-size:14.5px;font-weight:600;margin-top:10px}
.stat .s{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.5}

/* Bandeau preuves rapides */
.proof-strip{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.proof-pill{background:var(--card);border:1px solid var(--line);border-radius:40px;padding:9px 18px;font-size:13.5px;color:var(--text)}

/* Références clients */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ref{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:13px}

/* ---- Bande de références défilante (marquee CSS pur, zéro librairie) ----
   Le DOM contient 3 jeux IDENTIQUES de cartes : le 1er est lu normalement, les
   2 copies portent aria-hidden pour ne pas être relues par un lecteur d'écran.
   La piste se translate d'exactement UN jeu, soit calc(-100%/3) de sa propre
   largeur (width:max-content = 3 jeux), donc la boucle se referme au pixel près :
   aucun saut visible, aucun blanc en bout de piste même en 1440px de large.
   Chaque jeu porte un padding-right égal au gap, pour que l'écart entre la
   dernière carte d'un jeu et la première du suivant soit identique aux autres.
   Ne pas passer à 2 jeux : à 1440px la piste deviendrait trop courte et un vide
   apparaîtrait à droite en fin de cycle. Contrôlé au rendu réel en 375/768/1440. */
.refs-marquee{--ref-w:clamp(268px,30vw,340px);--ref-gap:18px;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.refs-track{display:flex;width:max-content;animation:refs-scroll 36s linear infinite;will-change:transform}
.refs-set{display:flex;flex:0 0 auto;gap:var(--ref-gap);padding-right:var(--ref-gap)}
.refs-marquee .ref{flex:0 0 var(--ref-w);width:var(--ref-w)}
/* Pause au survol et au focus clavier : le visiteur doit pouvoir lire une référence. */
.refs-marquee:hover .refs-track,
.refs-marquee:focus-within .refs-track{animation-play-state:paused}
@keyframes refs-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% / 3))}}
/* Accessibilité : mouvement réduit = zéro défilement, on retombe sur une grille
   statique lisible (auto-fit, donc 1 colonne en mobile, 3 en desktop, sans media
   query supplémentaire) et les 2 jeux dupliqués disparaissent. Les !important
   priment sur le bloc prefers-reduced-motion global (sélecteur * moins spécifique). */
@media(prefers-reduced-motion:reduce){
  .refs-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .refs-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ref-gap,18px);width:auto;animation:none!important;transform:none!important}
  .refs-set{display:contents}
  .refs-set[aria-hidden="true"]{display:none}
  .refs-marquee .ref{flex:none;width:auto}
}

/* Plaque CLAIRE obligatoire : les logos clients sont dessinés pour un fond blanc
   (texte foncé) et disparaissent sur le fond nuit. Contrôlé au rendu réel, ne pas
   repasser cette plaque en sombre sans revérifier la lisibilité de chaque logo. */
.ref-logo{height:82px;display:flex;align-items:center;justify-content:center;background:#f6f4ef;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 16px}
.ref-logo img{height:60px;width:auto;max-width:100%;object-fit:contain}
/* Carte sans logo : plaque sombre, wordmark en clair */
.ref-logo.dark{background:var(--bg-3);border-color:var(--line-soft);justify-content:flex-start}
.ref-name{font-family:var(--display);font-size:18.5px;color:var(--cream);font-weight:600;letter-spacing:-.012em;line-height:1.2}
.ref-word{font-family:var(--display);font-size:21px;color:var(--cream);font-weight:600;letter-spacing:-.01em}
.ref-meta{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-top:-6px}
.ref p{color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.ref .since{font-size:12px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:12px}

/* Comparatif avant/après */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs .col{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:28px 26px}
.vs .col.win{border-color:var(--gold);background:linear-gradient(165deg,rgba(212,166,74,.09),var(--card))}
.vs h4{font-size:16px;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.vdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.vs ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.vs li{font-size:14.5px;display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.vs .lose li::before{content:"✕";color:#6b7280;font-weight:700;flex-shrink:0}
.vs .win li::before{content:"✓";color:var(--gold);font-weight:700;flex-shrink:0}

/* Étapes */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative}
.step .num{font-family:var(--display);font-size:13px;font-weight:700;color:#1a1206;background:var(--grad-gold);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{color:var(--muted);font-size:13.5px;line-height:1.58}
.step .when{margin-top:12px;font-size:11.5px;color:var(--gold);font-weight:600;letter-spacing:.05em;text-transform:uppercase}

/* ---------- TARIFS ---------- */
/* 4 colonnes : Gratuit + 3 formules payantes tiennent sur une seule ligne, sans
   décalage du 4e élément (Premium/Famille & Transmission) sur une ligne à part.
   Recalé le 16/08 soir suite à l'ajout du palier Gratuit (auparavant 3 cartes). */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s;min-width:0;overflow-wrap:anywhere;position:relative}
.plan:hover{transform:translateY(-5px)}
.plan.feat{background:linear-gradient(170deg,rgba(212,166,74,.11),var(--card));border-color:var(--gold)}
.badge-feat{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#1a1206;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 16px;border-radius:20px;white-space:nowrap}
/* Offre de lancement -50% : partagée entre /tarifs et la zone tarifs de la home
   (auparavant dupliquée uniquement dans le <style> local de tarifs.html, ce qui
   a laissé la home sans le prix barré ni le badge -50% sur Starter, repéré
   au premier rendu de la V2 le 16/08). Source de vérité unique ici. */
.old-amt{font-family:var(--display);font-size:15px;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(230,180,90,.6);margin-right:2px}
.badge-promo{position:absolute;top:-12px;right:18px;background:var(--grad-gold);color:#1a1206;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 13px;border-radius:20px;white-space:nowrap}
/* Spécificité : `.ptier.normal-price` (0,2,0) doit battre `.ptier{display:flex}`
   plus bas dans ce fichier (0,1,0), sinon la cascade retombe sur flex et les
   prix "plein tarif" s'affichent EN PLUS des prix promo au lieu d'être masqués
   (repéré le 16/08, les deux prix apparaissaient empilés). */
.ptier.normal-price{display:none}
.plan .pname{font-family:var(--display);font-size:24px;color:var(--cream);font-weight:600}
.plan .pfor{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-top:5px}
.pprice{margin:22px 0 14px;display:flex;flex-direction:column;gap:12px}
.ptier{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ptier .amt{font-family:var(--display);font-size:31px;font-weight:700;color:var(--cream);line-height:1}
.ptier .cur{font-family:var(--display);font-size:16px;color:var(--cream);font-weight:600}
.ptier .per,.ptier .ttl{font-size:12.5px;color:var(--muted);width:100%;margin-top:1px}
.ptier .plus{font-size:12.5px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.06em;width:100%}
.ptier-month .amt{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan .pnote{font-size:12px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:12px;line-height:1.5}
.plan .pdesc{font-size:14px;color:var(--muted);margin:16px 0 18px}
.pfeat-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
.plan li{font-size:14px;color:var(--text);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.plan li::before{content:"✓";color:var(--gold);font-weight:700;flex-shrink:0}
.plan.bespoke{grid-column:1/-1;display:grid;grid-template-columns:1.5fr .9fr;gap:30px;align-items:center;background:linear-gradient(140deg,rgba(212,166,74,.09),var(--card));border-color:rgba(212,166,74,.42)}
.badge-bespoke{position:absolute;top:16px;right:20px;border:1px solid var(--gold);color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 13px;border-radius:20px}
.plan.bespoke{position:relative}
.pdevis{font-family:var(--display);font-size:27px;font-weight:700;color:var(--cream);margin-bottom:10px}

.guarantee{margin-top:30px;background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:20px 26px;display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;font-size:14.5px}
.pay-strip{margin-top:22px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pay-badge{background:var(--bg-3);border:1px solid var(--line-soft);border-radius:30px;padding:7px 15px;display:flex;align-items:center;gap:7px;color:var(--text);font-size:13px}
.pay-badge .pd{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.tarif-note{margin-top:26px;font-size:12.5px;color:var(--muted);text-align:center;max-width:820px;margin-left:auto;margin-right:auto;line-height:1.65}
.tarif-note a{color:var(--gold)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden}
.faq summary{cursor:pointer;padding:19px 24px;font-family:var(--display);font-size:16.5px;color:var(--cream);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400;flex-shrink:0;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 24px 20px;color:var(--muted);font-size:14.5px;line-height:1.68}
.faq .fa a{color:var(--gold)}

/* ---------- CTA FINAL ---------- */
.cta-final{background:linear-gradient(165deg,var(--bg-3),var(--card));border:1px solid var(--line);border-radius:24px;padding:56px 44px;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:620px;height:400px;background:radial-gradient(ellipse,rgba(212,166,74,.15),transparent 68%);pointer-events:none}
.cta-final>*{position:relative}
.cta-final p{color:var(--muted);font-size:16px;max-width:600px;margin:16px auto 28px;line-height:1.66}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FORMULAIRE ---------- */
.contact-form{max-width:560px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:16px}
.contact-form label{display:block;font-size:13px;font-weight:600;color:var(--cream);margin-bottom:7px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px;color:var(--cream);font-family:var(--sans);font-size:15px;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--gold);outline:none}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 21px) calc(1em + 4px),calc(100% - 16px) calc(1em + 4px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-cond{display:flex;flex-direction:column;gap:16px}
.cf-help{display:block;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
.cf-opt{color:var(--muted);font-weight:400}
.cf-check{display:flex!important;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer;font-weight:400!important;margin-bottom:0!important}
.cf-check input{width:auto;flex-shrink:0;margin-top:3px;accent-color:var(--gold)}
.contact-alt{margin-top:22px;font-size:14px;color:var(--muted);text-align:center}
.contact-alt a{color:var(--gold)}

.contact-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.contact-side{display:flex;flex-direction:column;gap:16px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.side-card h3{font-size:17px;margin-bottom:10px}
.side-card p{color:var(--muted);font-size:14px;line-height:1.6}
.side-card a.big{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:600;font-size:15.5px;margin-top:12px;word-break:break-word}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot-brand p{color:var(--muted);font-size:13.5px;margin-top:16px;line-height:1.65;max-width:330px}
.foot-social{display:flex;gap:11px;margin-top:18px}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--muted);transition:.2s}
.foot-social a:hover{color:var(--gold);border-color:var(--gold)}
.foot-col h5{font-family:var(--display);color:var(--cream);font-size:14px;margin-bottom:16px;letter-spacing:.02em}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:13.5px;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--gold)}
.foot-news{margin-top:36px;padding:26px 24px;background:var(--bg-3);border:1px solid var(--line);border-radius:16px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot-news h5{font-family:var(--display);color:var(--cream);font-size:17px;margin-bottom:6px}
.foot-news p{color:var(--muted);font-size:13.5px;margin:0}
.foot-news form{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:280px;max-width:460px}
.foot-news input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:40px;padding:13px 18px;color:var(--cream);font-family:var(--sans);font-size:14.5px}
.foot-news input:focus{border-color:var(--gold);outline:none}
.foot-legal{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12.5px}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--gold)}

/* Bulle WhatsApp flottante, présente sur l'ancien site, conservée : en CI c'est le
   canal de contact par défaut, et c'est le raccourci de conversion le plus court.
   Masquée sous 820px pour ne pas heurter le CTA collant du bas. */
.wa-float{position:fixed;right:22px;bottom:26px;z-index:75;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.34);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 34px rgba(37,211,102,.5)}
.wa-float svg{width:30px;height:30px;fill:#fff}
@media(max-width:820px){.wa-float{display:none}}

/* CTA mobile collant */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(10,12,17,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mobile-cta .btn{width:100%}

/* ---------- ANIMATIONS ---------- */
/* Les animations d'apparition ne s'activent QUE si le JS a posé la classe .js sur <html>
   (script inline en tête de page). Sans JS, ou si bara-site.js ne charge pas, le contenu
   reste visible au lieu de rester à opacity:0, une page blanche n'est jamais acceptable. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(1){transition-delay:.04s}
.js .stagger.in>*:nth-child(2){transition-delay:.11s}
.js .stagger.in>*:nth-child(3){transition-delay:.18s}
.js .stagger.in>*:nth-child(4){transition-delay:.25s}
.js .stagger.in>*:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .device.tilt{transform:none}
  .hero-visual{max-width:560px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-cols{grid-template-columns:1fr}
  .plan.bespoke{grid-template-columns:1fr;gap:20px}
  .statbar{grid-template-columns:1fr}
  .refs{grid-template-columns:1fr}
}
@media(max-width:820px){
  .nav-links{position:absolute;top:68px;left:0;right:0;background:rgba(10,12,17,.98);backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
  .nav-links a.on::after{display:none}
  .nav-links a.btn{margin-top:14px;border-bottom:none;text-align:center}
  .menu-btn{display:block}
  .mobile-cta{display:block}
  body{padding-bottom:74px}
}
@media(max-width:820px){
  /* En colonne, le voile horizontal ne protège plus le texte : on renforce le voile
     vertical et on baisse la photo. Contrôlé au rendu réel en 430×900. */
  .hero-bg img{opacity:.4}
  .hero-bg::after{background:linear-gradient(180deg,rgba(10,12,17,.62) 0%,rgba(10,12,17,.74) 50%,rgba(10,12,17,.95) 100%)}
}
@media(max-width:680px){
  .sec{padding:64px 0}
  .hero{padding:48px 0 56px}
  .phead{padding:52px 0 34px}
  .g2,.g3,.g4,.vs,.steps,.plans,.row2{grid-template-columns:1fr}
  .cta-final{padding:40px 22px;border-radius:18px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .float-badge{display:none}
  .dv-kpis,.dv-kpis.k3{grid-template-columns:repeat(2,1fr)}
  .wrap,.wrap-tight{padding:0 18px}
  .foot-news{flex-direction:column;align-items:flex-start}
  .dv-row{grid-template-columns:1.3fr auto;row-gap:4px}
  .dv-row .a{grid-column:2;text-align:right}
  .dv-row .tag{grid-column:1/-1;justify-self:start}
}
@media(min-width:1900px){
  :root{--maxw:1320px}
  body{font-size:17px}
}

/* ============================================================
 * REFONTE IMAGES PAGE UNIQUE, 16/08/2026
 * Composants ajoutés pour la home longue à ancres : photos
 * d'ambiance, galerie de captures produit réelles + lightbox,
 * blocs alternants texte/capture (repris de l'ancienne page
 * /produit). Purement additif, ne touche à aucune règle
 * existante ci-dessus.
 * ============================================================ */

/* ---- Photo + texte, côte à côte (offre, perso) ---- */
.photo-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block}
.pme-illus{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.pme-illus .photo-card{aspect-ratio:4/3}
.pme-illus .txt h3{font-size:clamp(20px,3vw,27px);margin-bottom:12px;line-height:1.18}
.pme-illus .txt p{color:var(--muted);font-size:15px;line-height:1.62}
.pme-illus .txt .mini{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.pme-illus .txt .mini span{font-size:12.5px;color:var(--text);background:rgba(212,166,74,.07);border:1px solid var(--line);border-radius:20px;padding:6px 13px}
@media(max-width:960px){.pme-illus{grid-template-columns:1fr;gap:24px}}

/* ---- Trois vignettes photo (avant / avec / après) ---- */
.vigs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vig{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s var(--ease),border-color .35s}
.vig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0}
.vig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,17,.22) 12%,rgba(10,12,17,.82) 55%,rgba(10,12,17,.97) 100%);z-index:1}
.vig .vc{position:relative;z-index:2;padding:22px}
.vig:hover{transform:translateY(-6px)}
.vig.v1{border-color:rgba(248,113,113,.25)}.vig.v2{border-color:rgba(212,166,74,.32)}.vig.v3{border-color:rgba(74,222,128,.25)}
.vig .step-k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;display:inline-block;margin-bottom:8px;padding:4px 11px;border-radius:20px}
.vig.v1 .step-k{color:#fca5a5;background:rgba(248,113,113,.16)}
.vig.v2 .step-k{color:#1a1206;background:var(--grad-gold)}
.vig.v3 .step-k{color:#86efac;background:rgba(74,222,128,.16)}
/* Couleurs volontairement en dur (pas var(--cream)/var(--text)) : la carte a son propre
   fond photo + dégradé sombre, toujours foncé quelle que soit la section (claire ou
   sombre) qui l'entoure. section.light redéfinit --cream/--text en couleurs foncées
   pour le texte courant de la page, ce qui rendait ce texte illisible une fois la
   carte placée dans une section claire (texte foncé sur overlay déjà foncé). Bug du
   21/08/2026, texte illisible signalé dans la section Perso, corrigé ainsi.
   RÉCIDIVE 03/09/2026 : texte encore illisible signalé sur la home (photos claires,
   pull blanc, mur clair, le dégradé montait trop tard et trop peu opaque pour couvrir
   ces zones). Dégradé renforcé (démarre plus tôt, quasi opaque dès 55%) + text-shadow
   ajouté sur .cap/.d comme filet de sécurité indépendant de l'image. */
.vig .cap{font-family:var(--display);color:#f4efe3;font-size:18px;margin:2px 0 6px;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.6)}
.vig .d{color:#f1f2f5;font-size:13.5px;line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.85)}
@media(max-width:960px){.vigs{grid-template-columns:1fr}.vig{min-height:300px}}

/* ---- Galerie de captures produit réelles (données fictives) + lightbox ---- */
.demo-banner{display:flex;align-items:center;justify-content:center;gap:10px;max-width:760px;margin:0 auto 32px;background:rgba(212,166,74,.07);border:1px solid var(--line);border-radius:30px;padding:11px 22px;text-align:center;font-size:13.5px;color:var(--text)}
.demo-banner b{color:var(--gold);font-weight:700}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.demo-shot{background:var(--bg-3);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:zoom-in;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s var(--ease);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.demo-shot:hover{transform:translateY(-4px);border-color:rgba(212,166,74,.45);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.demo-shot img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.demo-shot .cap{display:flex;align-items:center;gap:9px;padding:13px 18px;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--cream)}
.demo-shot .cap .d{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0}
@media(max-width:760px){.demo-grid{grid-template-columns:1fr}}

.lbox{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
.lbox.open{display:flex}
.lbox figure{max-width:1200px;width:100%;text-align:center}
.lbox img{max-width:100%;max-height:82vh;border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lbox figcaption{margin-top:14px;color:var(--cream);font-family:var(--display);font-size:15.5px}
.lbox-close{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(17,21,30,.9);color:var(--cream);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbox-close:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Blocs alternants texte / capture (repris de l'ancienne page /produit) ---- */
.feature{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;margin-bottom:80px}
.feature:last-of-type{margin-bottom:0}
.feature.flip .ftxt{order:2}
.feature .ftag{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.feature .ftag i{width:26px;height:26px;border-radius:8px;background:rgba(212,166,74,.12);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--display);font-size:12px;color:var(--gold)}
.feature h3{font-size:clamp(21px,2.8vw,29px);margin-bottom:14px}
.feature p{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:14px}
.fpoints{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.fpoints li{font-size:14px;display:flex;gap:10px;align-items:flex-start;line-height:1.5;color:var(--text)}
.fpoints li::before{content:"→";color:var(--gold);font-weight:700;flex-shrink:0}
@media(max-width:960px){
  .feature{grid-template-columns:1fr;gap:28px;margin-bottom:56px}
  .feature.flip .ftxt{order:0}
}

/* ============================================================
 * REFONTE V2, 16/08/2026, retour de revue interne sur la V1 du matin
 * PME avant Perso, tarifs regroupés, alternance fond clair/sombre,
 * captures redistribuées façon Finary, section sécurité, bandeau
 * logos, palier Gratuit. Purement additif.
 * ============================================================ */

/* ---- Sections en fond clair (WCAG AA vérifié : texte muted 5.6:1,
   titres 16:1, liens/eyebrow en --gold-ink 6.2:1 sur #f7f4ee) ----
   Portée : uniquement les sections qui montrent des captures produit
   ou les références clients (brief V2 §6), jamais plus de 3 sur la page. */
section.light{
  --bg-3:#ffffff; --card:#ffffff; --text:#3a3f4a; --muted:#5b6270; --cream:#14171d;
  --line:rgba(20,23,29,.12); --line-soft:rgba(20,23,29,.07);
  --gold-ink:#7a5313;
  background:#f7f4ee; color:var(--text);
}
section.light .eyebrow{color:var(--gold-ink)}
section.light .gold{color:var(--gold-ink)}
section.light a:not(.btn){color:var(--gold-ink)}
section.light .fpoints li::before,
section.light .vs .win li::before,
section.light .plan li::before{color:var(--gold-ink)}
section.light .card .ico{color:var(--gold-ink)}
section.light .ref-logo{background:#fff;border-color:rgba(20,23,29,.12);box-shadow:0 1px 3px rgba(20,23,29,.06)}
section.light .side-card,section.light .card,section.light .plan,section.light .step,section.light .stat{box-shadow:0 1px 2px rgba(20,23,29,.04)}
section.light .btn-ghost{background:rgba(122,83,19,.05)}

/* Note : un essai de carte "logo seul" (.ref.logo-only) a existé ici brièvement
   le 16/08, retiré le lendemain matin sur retour de revue interne : on garde
   UNE bande unique en conservant le détail de chaque référence, pas des
   logos nus agrandis. Cf .ref standard plus haut, réutilisé pour toutes les cartes. */

/* ---- Zone tarifaire unifiée : bascule PME / Perso (repris du tab-bar
   de l'ancien site juin, jamais encore dans bara.css) ---- */
.tab-bar{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.tab-btn{font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 26px;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.2s var(--ease)}
.tab-btn:hover{border-color:var(--gold);color:var(--cream)}
.tab-btn.active{background:var(--grad-gold);color:#1a1206;border-color:transparent;box-shadow:0 4px 16px rgba(212,166,74,.26)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Palier Gratuit : même carte .plan, marqueur visuel dédié ---- */
.plan.free{border-color:rgba(255,255,255,.16)}
.plan.free .pname{display:flex;align-items:center;gap:9px}
.plan.free .pname::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex-shrink:0}
section.light .plan.free{border-color:rgba(20,23,29,.14)}

/* ---- Captures produit réelles, cadre "Finary" : chrome de navigateur
   sombre + capture, carte claire fixe quel que soit le fond de la
   section (comme chez Finary, la capture flotte toujours sur blanc). ---- */
.shot-frame{background:#ffffff;border:1px solid rgba(20,23,29,.10);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(20,23,29,.14)}
.shot-frame .bar{background:#0d1017;padding:10px 14px;display:flex;align-items:center;gap:7px}
.shot-frame .bar i{width:9px;height:9px;border-radius:50%;display:block;flex-shrink:0}
.shot-frame .bar i:nth-child(1){background:#ff5f57}.shot-frame .bar i:nth-child(2){background:#febc2e}.shot-frame .bar i:nth-child(3){background:#28c840}
.shot-frame .bar span{font-size:10.5px;color:#9099a8;margin-left:6px;font-family:var(--mono)}
.shot-frame .crop{overflow:hidden;width:100%}
.shot-frame .crop img{display:block;width:100%;height:100%;object-fit:cover}
.shot-cap{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}

/* ---- Grille sécurité (4 garanties), réutilise .steps/.step déjà stylés ---- */
.steps.sec4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.steps.sec4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.steps.sec4{grid-template-columns:1fr}}