/* ==========================================================================
   SMARTFIX MOUSCRON — feuille de style globale
   Thème clair SmartFix (dégradé #F5A03C → #EF6B01 → #D04C03), inchangé.
   Mise en page inspirée d'onfix.be (cartes, configurateur par étapes, tuiles).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Marque */
  --or-1:#F5A03C; --or-2:#EF6B01; --or-3:#D04C03;
  --grad:linear-gradient(180deg,var(--or-1) 0%,var(--or-2) 48%,var(--or-3) 100%);
  --grad-h:linear-gradient(180deg,#F8B25C 0%,#F5751A 52%,#E0560A 100%);

  /* Surfaces (thème clair) */
  --dark:#101720; --bg:#FFFFFF; --bg-2:#F6F8FA; --bg-3:#EEF2F6;
  --surface:#FFFFFF; --surface-2:#F6F8FA;

  /* Surfaces sombres premium (héro, ticker, CTA final) */
  --obsidian:#0B0E14; --obsidian-2:#12161F; --obsidian-line:rgba(255,255,255,.10);
  --ink-dark-2:#AEB5C2; --mute-dark:#8891A0;

  /* Texte & lignes */
  --ink:#0F1319; --ink-2:#39424F; --mute:#5C6673; --line:#E4E8EE; --line-2:#CFD6E0;

  /* États */
  --ok:#12A150; --warn:#B45309;

  --r-s:10px; --r:14px; --r-l:20px;
  --shadow:0 1px 2px rgba(16,23,32,.06), 0 8px 24px rgba(16,23,32,.10);
  --shadow-l:0 2px 4px rgba(16,23,32,.08), 0 18px 48px rgba(16,23,32,.14);
  --maxw:1240px;
  --display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --head-h:70px;
}

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1rem}
:focus-visible{outline:2.5px solid var(--or-2);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{font-family:var(--mono);font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-3);display:block;margin:0 0 12px;font-weight:700}
.lead{color:var(--ink-2);font-size:1.06rem}
.mute{color:var(--mute)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

section{padding:72px 0}
section.tight{padding:48px 0}
section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.head{max-width:680px;margin:0 auto 38px;text-align:center}
.head p{color:var(--mute);margin:12px 0 0}
.head-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:34px}
.head-row .head{margin-bottom:0;text-align:left;margin-inline:0}

/* --- 3. Boutons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:background .16s,transform .16s,border-color .16s,color .16s,box-shadow .16s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(239,107,1,.28)}
.btn-primary:hover{background:var(--grad-h);transform:translateY(-1px);box-shadow:0 10px 24px rgba(239,107,1,.36)}
.btn-outline{background:transparent;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--or-2);color:var(--or-3)}
.btn-ghost{background:transparent;color:var(--or-3);padding-inline:8px}
.btn-ghost:hover{text-decoration:underline}
.btn-sm{padding:9px 16px;font-size:.86rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* --- 4. En-tête --------------------------------------------------------- */
.topbar{background:var(--dark);color:#9AA3B0;font-size:.79rem;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px}
.topbar-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){ .topbar{font-size:.74rem} }
@media(max-width:480px){ .topbar{display:none} }
.topbar a:hover{color:var(--or-1)}
.topbar-links{display:none;gap:20px}
@media(min-width:760px){.topbar-links{display:flex}}
.topbar b{color:#fff;font-weight:600}

.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:32px;width:auto}
.brand-word{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:.01em;color:var(--ink)}
.brand-word b{font-weight:700}
.nav{display:none;align-items:center;gap:4px;margin-left:22px}
.nav a{position:relative;padding:10px 14px;border-radius:999px;font-size:.94rem;font-weight:500;
  color:var(--ink-2);transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--bg-2)}
.nav a.is-active{color:var(--or-3);font-weight:600}
.nav a.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--grad)}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr-cta .btn{padding:10px 18px;font-size:.88rem}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);cursor:pointer;align-items:center}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}
@media(max-width:640px){ .hdr-cta .btn{padding:9px 14px;font-size:.82rem} }
@media(max-width:480px){ .hdr-cta .btn{display:none} }
.mobile-nav .mnav-cta{display:block;margin:14px 22px 18px;text-align:center;border-bottom:0}
@media(min-width:1040px){ .nav{display:flex} .burger{display:none} }
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 22px;border-bottom:1px solid var(--line);font-weight:500}
.mobile-nav a.is-active{color:var(--or-3);border-left:3px solid var(--or-2)}
@media(min-width:1040px){.mobile-nav{display:none!important}}

/* --- 5. Bandeau atouts -------------------------------------------------- */
.usp{background:var(--bg-2);border-bottom:1px solid var(--line)}
.usp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line)}
@media(min-width:560px){.usp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.usp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.usp-grid-3{grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.usp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.usp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.usp-item{background:var(--bg-2);padding:16px 18px;display:flex;gap:12px;align-items:center}
.usp-item svg{flex:none;stroke:var(--or-2)}
.usp-item b{display:block;font-size:.88rem;font-weight:600}
.usp-item span{font-size:.79rem;color:var(--mute)}

/* --- 6. Hero (façon onfix : centré, 3 cartes d'accès rapide) ------------ */
.hero{position:relative;overflow:hidden;padding:64px 0 0;text-align:center;
  background:radial-gradient(900px 480px at 50% -10%,rgba(239,107,1,.10),transparent 65%),var(--bg)}
.hero-in{position:relative;max-width:760px;margin:0 auto}
.hero .eyebrow{display:inline-block}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--ink-2);font-size:1.08rem;max-width:42rem;margin:16px auto 0}
.btn-hero{margin:26px auto 0;padding:17px 34px;font-size:1.05rem}
.quick-grid{display:grid;gap:16px;grid-template-columns:1fr;max-width:900px;margin:26px auto 0}
.quick-grid .quick-card{padding:20px 16px}
.quick-grid .quick-ico{width:42px;height:42px;border-radius:12px;margin-bottom:10px}
.quick-grid .quick-ico svg{width:19px;height:19px}
.quick-grid b{font-size:.92rem}
@media(min-width:700px){.quick-grid{grid-template-columns:repeat(3,1fr)}}
.quick-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 20px;text-align:center;transition:.18s;display:block;box-shadow:var(--shadow)}
.quick-card:hover{border-color:var(--or-2);transform:translateY(-3px);box-shadow:var(--shadow-l)}
.quick-ico{width:52px;height:52px;border-radius:14px;background:var(--grad);display:grid;place-items:center;
  margin:0 auto 14px;box-shadow:0 8px 20px rgba(239,107,1,.28)}
.quick-ico svg{stroke:#fff}
.quick-card b{display:block;font-size:1.02rem;margin-bottom:4px}
.quick-card span{font-size:.83rem;color:var(--mute)}
.hero-note{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:28px 0 0;
  padding:20px 0;border-top:1px solid var(--line);font-size:.83rem;color:var(--mute)}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{stroke:var(--or-2);flex:none}
.hero-note b{color:var(--ink);font-weight:600}

/* Ancien bandeau de page interne (conservé pour les pages secondaires) */
.pagehead{background:var(--bg-2);border-bottom:1px solid var(--line);padding:38px 0 42px;position:relative;overflow:hidden}
.pagehead .wrap{position:relative;z-index:2}
.crumb{font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;color:var(--mute);margin-bottom:14px}
.crumb a:hover{color:var(--or-3)}
.pagehead p{color:var(--ink-2);max-width:62ch;margin:14px 0 0}
.pagehead-art{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:300px;opacity:.5;
  pointer-events:none;display:none;filter:drop-shadow(0 0 30px rgba(239,107,1,.15))}
@media(min-width:1280px){.pagehead-art{width:360px;right:40px}}
@media(min-width:1000px){.pagehead-art{display:block}}
.pagehead-art.art-sm{width:170px;opacity:.4;right:60px}
@media(min-width:1280px){.pagehead-art.art-sm{width:190px}}

/* --- 8. Cartes / grilles ------------------------------------------------ */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.18s}
.card.hoverable:hover{border-color:var(--or-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .k{font-family:var(--display);font-size:2rem;line-height:1;display:block;margin-bottom:10px}
.card p{color:var(--mute);font-size:.9rem;margin:8px 0 0}
.card-ico{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:16px}
.card-ico svg{stroke:var(--or-2)}

/* Catégories d'appareils */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:820px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-align:center;
  cursor:pointer;transition:.18s;display:block;padding:0;overflow:hidden}
.cat:hover{border-color:var(--or-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.cat svg{margin:0 auto 12px;stroke:var(--or-2)}
.cat b{display:block;font-weight:700;font-size:1.02rem}
.cat span{font-size:.82rem;color:var(--mute)}
.cat img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);background:#fff}
.cat-txt{padding:16px 18px 20px}
.cat-go{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--or-3);
  display:inline-flex;gap:6px;align-items:center;margin-top:10px}
.cat:hover .cat-go{gap:10px}

/* Marques */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:700px){.brands{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.brands{grid-template-columns:repeat(6,1fr)}}
.brand-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 8px;text-align:center;
  font-size:.87rem;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.16s}
.brand-tile:hover{border-color:var(--or-2);color:var(--or-3);transform:translateY(-2px);box-shadow:var(--shadow)}

/* --- 9. Onglets ---------------------------------------------------------- */
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;
  scrollbar-width:none;margin-bottom:28px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:transparent;border:0;border-bottom:3px solid transparent;padding:12px 16px;
  font-size:.93rem;font-weight:500;color:var(--mute);cursor:pointer;white-space:nowrap;transition:.15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--or-3);font-weight:700;border-bottom-color:var(--or-2)}

/* --- 10. Configurateur de réparation (façon onfix) ---------------------- */
.stepper{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px;margin:32px 0 44px}
.stepper-item{display:flex;align-items:center;gap:10px}
.stepper-num{width:30px;height:30px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--mute);flex:none}
.stepper-item.is-done .stepper-num,.stepper-item.is-current .stepper-num{background:var(--grad);color:#fff;border-color:transparent}
.stepper-item.is-current .stepper-num{box-shadow:0 0 0 4px rgba(239,107,1,.18)}
.stepper-label{font-size:.86rem;color:var(--mute);font-weight:600;white-space:nowrap}
.stepper-item.is-current .stepper-label,.stepper-item.is-done .stepper-label{color:var(--ink)}
.stepper-line{width:36px;height:2px;background:var(--line-2);margin:0 6px}
.stepper-item.is-done ~ .stepper-line{background:var(--or-2)}
@media(max-width:640px){.stepper-label{display:none}.stepper-line{width:20px}}

.tunnel-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  margin-bottom:18px;opacity:.5;pointer-events:none;transition:opacity .25s,border-color .25s,box-shadow .25s}
.tunnel-panel.is-open{opacity:1;pointer-events:auto;border-color:var(--line-2);box-shadow:var(--shadow)}
.tunnel-panel-hd{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tunnel-panel-hd .num{font-family:var(--mono);font-size:.72rem;font-weight:700;color:#fff;background:var(--grad);
  border-radius:7px;padding:4px 9px;flex:none}
.tunnel-panel-hd h3{margin:0}
.tunnel-panel-hd .count{margin-left:auto;font-size:.82rem;color:var(--mute)}

.tile-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.tile-grid.cols-6{grid-template-columns:repeat(6,1fr)}}
@media(min-width:820px){.tile-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 10px;
  text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.tile:hover{border-color:var(--or-2)}
.tile[aria-pressed="true"]{border-color:var(--or-2);background:rgba(239,107,1,.08);box-shadow:0 0 0 1px var(--or-2) inset}
.tile-ico{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.tile-ico img{width:20px;height:20px}
.tile b{font-size:.83rem;font-weight:600;line-height:1.3}

.tile-row{flex-direction:row;justify-content:flex-start;text-align:left;padding:13px 14px}
.tile-row .tile-ico{width:32px;height:32px}
.tile-row .tile-ico img{width:17px;height:17px}
.tile-row b{font-size:.85rem}

.search{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;font-size:.95rem;color:var(--ink)}
.search::placeholder{color:var(--mute)}
.search:focus{border-color:var(--or-2)}
.field-select{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;font-size:.95rem;color:var(--ink)}
.field-select:focus{border-color:var(--or-2)}
.field input,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:10px;padding:12px 14px;font-size:.95rem;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--or-2)}
.hint{color:var(--mute);font-size:.88rem;margin:0}

/* Carte résultat (devis) */
.result-card{background:#fff;border:1px solid var(--or-2);border-radius:var(--r-l);padding:28px;
  box-shadow:var(--shadow-l)}
.result-hd{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.result-thumb{width:56px;height:56px;border-radius:12px;background:var(--bg-2);display:grid;place-items:center;flex:none;padding:8px;border:1px solid var(--line)}
.result-thumb img{width:100%;height:100%;object-fit:contain}
.result-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.result-title{font-size:1.25rem;font-weight:800}
.result-sub{color:var(--or-3);font-size:.92rem;font-weight:600}
.result-variants{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.variant-chip{background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;
  font-size:.85rem;cursor:pointer;transition:.15s}
.variant-chip:hover{border-color:var(--or-2)}
.variant-chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.result-price-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin:22px 0 20px;padding-top:20px;border-top:1px solid var(--line)}
.result-price{font-family:var(--display);font-size:2.4rem;line-height:1}
.result-meta-list{display:flex;flex-wrap:wrap;gap:18px;font-size:.84rem;color:var(--mute)}
.result-meta-list b{color:var(--ink);font-weight:600}
.result-actions{display:flex;flex-wrap:wrap;gap:12px}
.result-fine{font-size:.78rem;color:var(--mute);margin-top:16px}

/* --- 11. Tableau de tarifs ---------------------------------------------- */
.table-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.table-tools .search{max-width:320px}
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;overflow-y:hidden;background:var(--surface);-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:100%}
table{width:100%;border-collapse:collapse;font-size:.92rem}
thead th{background:var(--bg-2);text-align:left;padding:14px 16px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-2)}
td.model{font-weight:600;white-space:nowrap;color:var(--ink)}
td.price{font-family:var(--mono);font-weight:700;color:var(--or-3);white-space:nowrap}
td.devis{font-family:var(--mono);font-size:.82rem;color:var(--mute)}
.table-scroll{overflow-x:auto}
.empty{padding:40px 20px;text-align:center;color:var(--mute)}

/* --- 12. Avis ----------------------------------------------------------- */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.review{flex:0 0 86%;max-width:380px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
@media(min-width:760px){.review{flex:0 0 42%}}
.stars{color:var(--or-2);letter-spacing:2px;font-size:.9rem}
.review p{font-size:.94rem;margin:12px 0;color:var(--ink-2)}
.review footer{font-size:.8rem;color:var(--mute);font-family:var(--mono)}
.rail-nav{display:flex;gap:10px;margin-top:16px;justify-content:center}
.rail-nav button{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);
  cursor:pointer;font-size:1.05rem;color:var(--ink)}
.rail-nav button:hover{border-color:var(--or-2);color:var(--or-3)}

.reviews-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:44px 28px;text-align:center;box-shadow:var(--shadow)}
.reviews-cta .stars-row{display:flex;justify-content:center;gap:5px;margin-bottom:16px}
.reviews-cta .stars-row svg{width:22px;height:22px;fill:var(--or-2)}
.reviews-cta h2{margin:0 0 10px}
.reviews-cta p{color:var(--mute);max-width:48ch;margin:0 auto 22px}
.reviews-cta .btn{display:inline-flex;align-items:center;gap:9px}
.reviews-cta .g-logo{width:19px;height:19px;flex:none}
.reviews-widget{text-align:left;margin-top:6px}
/* Le widget tiers Featurable impose une largeur interne minimale de 320px
   (min-width sur son propre conteneur) : sur mobile, il ne peut donc pas
   rétrécir pour tenir dans la carte .reviews-cta (44px 28px de padding),
   et déborde vers la droite au lieu de rester centré ("avis décalés").
   Fix : laisser le widget déborder des marges de page ET du padding de la
   carte pour lui donner presque toute la largeur de l'écran (même
   technique que le widget Atelier Gestion, section 15bis) — largeur
   disponible ainsi toujours ≥320px sur un vrai téléphone. Aucun effet sur
   desktop, où la carte a largement la place. */
@media(max-width:640px){
  .reviews-widget{margin:6px -50px 0;padding:0 8px}
}

/* --- 13. FAQ ------------------------------------------------------------ */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin-bottom:12px}
.faq details[open]{border-color:var(--or-2);box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or-2);font-family:var(--mono);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mute);font-size:.93rem;margin:12px 0 0;max-width:70ch}
.faq p a{color:var(--or-3);text-decoration:underline}

/* --- 14. Bannière CTA / bande pré-pied de page --------------------------- */
.cta-band{background:var(--dark);border:1px solid var(--dark);color:#fff;border-radius:var(--r-l);
  padding:44px;overflow:hidden;position:relative;text-align:center}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,107,1,.35),transparent 66%)}
.cta-band h2{max-width:26ch;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.75);max-width:52ch;margin:12px auto 0}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.cta-band .btn-outline{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-band .btn-outline:hover{color:var(--or-1);border-color:var(--or-1)}

.precta{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;text-align:center}
.precta .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.precta p{margin:0;color:var(--ink-2);font-size:.95rem}

/* --- 15. Barre d'action fixe ---------------------------------------------- */
body{padding-bottom:66px}
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  background:var(--dark);border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -10px 28px rgba(16,23,32,.22);
  padding-bottom:env(safe-area-inset-bottom)}
.action-bar-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:14px 6px;color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.005em;
  border-right:1px solid rgba(255,255,255,.1);transition:background .15s}
.action-bar-btn:last-child{border-right:0}
.action-bar-btn svg{flex:none;width:19px;height:19px}
.action-bar-btn:not(.is-primary):hover,.action-bar-btn:not(.is-primary):active{background:rgba(255,255,255,.08)}
.action-bar-btn.is-primary{background:var(--grad);flex:1.15}
.action-bar-btn.is-primary:hover{background:var(--grad-h)}
.action-bar-btn.is-whatsapp svg{fill:#25D366;stroke:none}
@media(max-width:420px){ .action-bar-btn span{display:none} .action-bar-btn svg{width:22px;height:22px} }
@media(min-width:640px){ .action-bar-btn{font-size:.85rem;gap:9px} }

/* --- 15bis. Widget de réservation (Atelier Gestion) — largeur maximale sur
   mobile : le widget déborde des marges de page (.wrap) et, quand il est
   posé dans une carte (contact.html), déborde aussi du padding de la carte,
   pour donner le plus de place possible au calendrier sur petit écran. ---- */
@media(max-width:640px){
  .widget-wrap{margin:0 -22px;padding:0 8px}
  .widget-wrap .card{margin:0 -8px;padding:12px 8px;border:none;box-shadow:none;border-radius:0}
}

/* --- 15ter. Bouton de secours « remonter en haut du formulaire » --------
   Le widget Atelier Gestion ne signale pas toujours un changement de
   hauteur lors d'un vrai changement d'étape (ex. étape 4 → étape 5), donc
   l'auto-scroll basé sur ses messages ne peut pas être fiable à 100 %.
   Ce bouton flottant offre un rattrapage toujours fonctionnel : il
   n'apparaît que lorsque le haut du formulaire est remonté au-dessus de
   l'écran, et remonte la page d'un simple tap/clic. ------------------- */
.atelier-scroll-top{
  position:fixed;right:18px;bottom:84px;z-index:45;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:var(--grad);color:#fff;
  box-shadow:var(--shadow-l);cursor:pointer;transition:transform .15s,background .15s;
}
.atelier-scroll-top:hover{background:var(--grad-h);transform:translateY(-2px)}
.atelier-scroll-top[hidden]{display:none}
@media(max-width:640px){ .atelier-scroll-top{right:14px;bottom:78px;width:42px;height:42px} }

/* --- 16. Contact -------------------------------------------------------- */
.contact-grid{display:grid;gap:30px}
@media(min-width:940px){.contact-grid{grid-template-columns:1.1fr .9fr}}
.field{margin-bottom:15px}
.field label{display:block;font-size:.72rem;color:var(--mute);margin-bottom:6px;font-family:var(--mono);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.field textarea{min-height:120px;resize:vertical}
.info dl{margin:0}
.info dt{font-family:var(--mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-3);margin-top:20px;font-weight:700}
.info dt:first-child{margin-top:0}
.info dd{margin:5px 0 0;color:var(--ink-2)}
.todo{background:var(--bg-2);border:1px dashed var(--or-1);border-radius:var(--r-s);padding:12px 14px;
  font-size:.85rem;color:var(--warn)}

/* --- 17. Pied de page --------------------------------------------------- */
.ftr{background:var(--dark);color:#8A93A1;padding:56px 0 26px;font-size:.9rem;margin-top:0;border-top:1px solid rgba(255,255,255,.08)}
.ftr-grid{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:700px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{color:#fff;font-size:.78rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:14px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ftr a{display:block;padding:9px 0}
.ftr a:hover{color:var(--or-1)}
.ftr-logo{width:130px;margin-bottom:16px}
.ftr-map{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);overflow:hidden;margin:16px 0}
.ftr-map iframe{display:block;width:100%;height:190px;border:0}
.ftr-social{display:flex;gap:10px;margin-top:16px}
.ftr-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:.15s;color:#8A93A1}
.ftr-social a:hover{border-color:var(--or-2);color:var(--or-1)}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;color:#606B79}

/* --- 18. Animations ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   19. Carrousel de bannières
   ========================================================================== */
.slider{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l);background:var(--dark)}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,.1,.2,1)}
.slide{flex:0 0 100%;position:relative;aspect-ratio:1100/380;min-height:230px}
.slide img{width:100%;height:100%;object-fit:cover}
.slide a{position:absolute;inset:0}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(16,23,32,.72);border:1px solid rgba(255,255,255,.25);cursor:pointer;font-size:1.1rem;color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow);transition:.15s}
.slider-btn:hover{background:rgba(16,23,32,.9);color:var(--or-1)}
.slider-btn.prev{left:14px}
.slider-btn.next{right:14px}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:var(--or-1);width:26px;border-radius:5px}
@media(max-width:640px){.slider-btn{display:none}}

/* ==========================================================================
   20. Petits éléments illustrés
   ========================================================================== */
.pane-ico{width:56px;height:56px;margin-bottom:16px}

.tips{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.tips{grid-template-columns:repeat(3,1fr)}}
.tip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s}
.tip:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.tip img{width:100%;height:150px;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.tip-txt{padding:20px 22px 24px}
.tip-txt h3{font-size:1.05rem;margin-bottom:8px}
.tip-txt p{color:var(--mute);font-size:.89rem;margin:0}
.tip-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-3);display:block;margin-bottom:8px;font-weight:700}

.badges{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center;
  padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-top:28px}
.badges img{width:88px;height:88px}
.badges div{text-align:center;max-width:170px}
.badges p{font-size:.82rem;color:var(--mute);margin:8px 0 0}

/* Illustration du hero */
.hero-art{width:100%;max-width:540px;margin:0 auto}

/* ==========================================================================
   21. Filtres de grille
   ========================================================================== */
.filters{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:16px}
@media(min-width:820px){.filters{grid-template-columns:2fr 1fr 1.2fr}}
.filters .search,.filters .field-select{max-width:none}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips-row .chip{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;padding:8px 14px}
.chips-row .chip img{width:18px;height:18px}
.chip{background:var(--bg-2);border:1px solid var(--line-2);padding:10px 16px;border-radius:999px;
  font-size:.89rem;cursor:pointer;transition:.15s;color:var(--ink)}
.chip:hover{border-color:var(--or-2);color:var(--or-3)}
.chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 5px 14px rgba(239,107,1,.28)}
.chips-row .chip[aria-pressed="true"] img{filter:brightness(0) invert(1)}
.result-count{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;margin:0 0 12px;color:var(--mute)}
td.dur{font-family:var(--mono);font-size:.8rem;color:var(--mute);white-space:nowrap}
.ta-r{text-align:right}
thead th.ta-r{text-align:right}
.table-scroll{max-height:70vh;overflow:auto}
tbody td{padding:11px 16px}
@media(max-width:700px){
  thead th:nth-child(3),tbody td:nth-child(3){display:none}
  tbody td,thead th{padding:10px 12px;font-size:.86rem}
}

/* ==========================================================================
   22. Page juridique (conditions générales)
   ========================================================================== */
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
@media(min-width:1000px){.legal{grid-template-columns:250px minmax(0,1fr)}}
.legal-toc{position:sticky;top:calc(var(--head-h) + 20px);display:none}
@media(min-width:1000px){.legal-toc{display:block}}
.legal-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border-left:2px solid var(--line);}
.legal-toc a{display:block;padding:7px 14px;font-size:.86rem;color:var(--mute);
  border-left:2px solid transparent;margin-left:-2px;transition:.14s}
.legal-toc a:hover{color:var(--or-3);border-left-color:var(--or-2);background:var(--bg-2)}

.legal-body{max-width:76ch}
.legal-body h2{font-size:1.35rem;margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--head-h) + 24px)}
.legal-body h2:first-of-type{border-top:0;margin-top:8px}
.legal-body h3{font-size:1.05rem;margin-bottom:10px}
.legal-body p{font-size:.94rem;color:var(--ink-2);margin:0 0 12px}
.legal-body strong{color:var(--ink)}
.legal-lead{font-style:italic;color:var(--mute)!important;font-size:.88rem!important}
.legal-list{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:.94rem}
.legal-list li{margin-bottom:6px}
.legal-body .table-wrap{margin:16px 0 20px}
.legal-body table{font-size:.9rem}
.legal-body tbody td:last-child{font-weight:600;color:var(--or-3);white-space:nowrap}
.legal-id{background:var(--bg-2);margin-bottom:10px}
.legal-sep{border:0;border-top:2px solid var(--line);margin:52px 0 32px;scroll-margin-top:calc(var(--head-h) + 24px)}
.legal-short{background:var(--bg-2)}
.legal-short h2{border-top:0;padding-top:0;margin-top:26px;font-size:1.15rem}
.legal-short p{font-size:.9rem}
.legal-check{border:1.5px dashed var(--or-1);border-radius:var(--r-s);padding:14px 16px;
  background:var(--bg-2);font-size:.88rem!important;margin-top:18px!important}
.print-note{margin-top:18px}

/* Impression : version courte imprimable pour joindre au devis */
@media print{
  .hdr,.topbar,.mobile-nav,.ftr,.legal-toc,.pagehead-art,.btn,.precta{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .legal-body{max-width:none}
  .card,.legal-short{border:1px solid #999;box-shadow:none;background:#fff;color:#000}
  .legal-body h2{page-break-after:avoid}
  a{color:#000;text-decoration:none}
}

/* ==========================================================================
   23. Produits reconditionnés
   ========================================================================== */
.cat-tile-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-bottom:26px}
@media(min-width:700px){.cat-tile-grid{grid-template-columns:repeat(4,1fr)}}
.cat-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 14px;
  text-align:center;cursor:pointer;transition:.16s}
.cat-tile:hover{border-color:var(--or-2);transform:translateY(-2px)}
.cat-tile[aria-pressed="true"]{border-color:var(--or-2);background:rgba(239,107,1,.08);box-shadow:0 0 0 1px var(--or-2) inset}
.cat-tile .tile-ico{width:48px;height:48px;margin:0 auto 10px;background:#fff}
.cat-tile .tile-ico img{width:30px;height:30px}
.cat-tile b{font-size:.9rem}

.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 8px}
.badge-pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.82rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.badge-pill svg{stroke:var(--or-2);flex:none}

.product-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:700px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.product-grid{grid-template-columns:repeat(4,1fr)}}
.product-grid.g3{grid-template-columns:1fr}
@media(min-width:700px){.product-grid.g3{grid-template-columns:repeat(3,1fr)}}
.product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:.18s;display:flex;flex-direction:column}
.product-card:hover{border-color:var(--or-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.product-media{background:var(--bg-2);border-bottom:1px solid var(--line);padding:26px 20px;
  display:grid;place-items:center;position:relative}
.product-media img{width:76px;height:76px}
.product-grade{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #D8DEE7;
  color:#39424F}
.product-grade.grade-a{color:#0F8A44;border-color:#B9E6C9}
.product-grade.grade-b{color:var(--or-3);border-color:#F5D3B0}
.product-grade.grade-c{color:#B45309;border-color:#F0D9B3}
.product-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-body b{font-size:.95rem;color:var(--ink)}
.product-body .mute{font-size:.83rem}
.product-price{font-family:var(--display);font-size:1.35rem;margin-top:4px}
.product-body .btn{align-self:flex-start;margin-top:6px}
.product-tpl{border-style:dashed;border-color:var(--line-2)}
.product-tpl .product-media{background:repeating-linear-gradient(135deg,#EEF2F6,#EEF2F6 10px,#E4E8EE 10px,#E4E8EE 20px)}
.soon-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.soon-icons{display:flex;gap:10px}
.soon-icons img{width:32px;height:32px;padding:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.soon-card b{font-size:1rem;color:var(--ink)}
.soon-card .mute{max-width:52ch}

/* ==========================================================================
   24. Héro premium (thème sombre) — page d'accueil uniquement
   ========================================================================== */
.hero-premium{
  background:radial-gradient(900px 520px at 8% 0%,rgba(239,107,1,.22),transparent 60%),
             radial-gradient(700px 460px at 100% 100%,rgba(245,160,60,.14),transparent 60%),
             var(--obsidian);
  color:#fff;text-align:left;padding:76px 0 0;overflow:hidden
}
.hero-premium .hero-in{max-width:var(--maxw);display:flex;align-items:center;gap:56px;flex-wrap:wrap;text-align:left}
.hero-premium .eyebrow{color:var(--or-1);display:inline-flex;align-items:center;gap:8px}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--or-1);display:inline-block;flex:none}
.hero-premium h1{color:#fff;text-align:left}
.hero-premium .hero-sub{color:var(--ink-dark-2);text-align:left;margin:20px 0 0;max-width:34rem}
.hero-copy{flex:1 1 480px;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 0}
.hero-actions .btn-hero{margin:0}
.btn-ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.hero-stats{display:flex;gap:26px;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--obsidian-line)}
.hero-stats b{display:block;font-family:var(--mono);font-weight:700;font-size:1.2rem;color:#fff}
.hero-stats span{display:block;font-size:.76rem;color:var(--mute-dark);margin-top:2px}

.hero-visual{flex:1 1 360px;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;padding:20px 0 56px}
.device-mock{width:220px;height:440px;border-radius:38px;background:linear-gradient(160deg,#232a37 0%,#12161f 60%,var(--obsidian) 100%);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 80px rgba(0,0,0,.5)}
.device-screen{position:relative;margin:8px;height:calc(100% - 16px);border-radius:30px;overflow:hidden;display:flex}
.device-before{position:relative;width:50%;background:radial-gradient(120% 100% at 30% 0%,#3a1610 0%,#1c0d0b 60%,var(--obsidian) 100%)}
.device-before .crack{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.4}
.device-before span,.device-after span{position:absolute;top:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.device-before span{left:12px}
.device-after{position:relative;width:50%;background:linear-gradient(165deg,#3a2410 0%,#EF6B01 55%,#F5A03C 100%);display:flex;align-items:center;justify-content:center}
.device-after span{right:12px;color:rgba(255,255,255,.85)}
.hero-chip{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 14px;
  box-shadow:0 14px 30px rgba(0,0,0,.32);animation:heroFloat 4.6s ease-in-out infinite}
.hero-chip b{display:block;font-size:.82rem;color:#fff}
.hero-chip span{display:block;font-size:.68rem;color:var(--mute-dark)}
.chip-top{top:26px;right:6%}
.chip-bottom{bottom:60px;left:2%;animation-delay:.6s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:1039px){
  .hero-premium .hero-in{flex-direction:column;text-align:center}
  .hero-premium h1,.hero-premium .hero-sub{text-align:center;margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-copy{max-width:640px}
}
@media(max-width:640px){.device-mock{width:180px;height:360px}.hero-visual{min-height:360px;padding:10px 0 46px}}

/* Mobile : le bouton "Réserver" doit rester proche du premier écran, sans défiler */
.h1-short{display:none}
@media(max-width:480px){
  .h1-full{display:none}
  .h1-short{display:inline}
}
@media(max-width:640px){
  .hero-premium{padding:34px 0 0}
  .hero-actions{margin-top:20px}
  .hero-stats{margin-top:22px;padding-top:16px}
  .hero-sub{margin-top:14px}
}

/* Ticker de confiance */
.ticker{background:var(--obsidian);overflow:hidden;padding:20px 0;border-bottom:1px solid var(--obsidian-line)}
.ticker-track{display:flex;width:max-content}
.ticker-set{display:flex;gap:44px;padding-right:44px;animation:tickerScroll 28s linear infinite}
.ticker-set span{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--ink-dark-2);white-space:nowrap}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Bento — grille avantages */
.bento-grid{grid-template-columns:1fr}
@media(min-width:760px){.bento-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(176px,auto)}}
.bento-grid .card{display:flex;flex-direction:column;justify-content:space-between}
.bento-grid .card-ico{border:1px solid var(--line);background:var(--bg);transition:background .2s,border-color .2s}
.bento-grid .card-ico svg{transition:stroke .2s}
.bento-grid .card.hoverable:hover{border-color:var(--or-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.bento-grid .card.hoverable:hover .card-ico{background:var(--grad);border-color:transparent}
.bento-grid .card.hoverable:hover .card-ico svg{stroke:#fff}
@media(min-width:760px){.bento-lg{grid-column:1 / 3;grid-row:1 / 3}.bento-lg h3{font-size:1.3rem}}

/* CTA final — variante sombre premium (héro + CTA se répondent) */
.cta-band.is-premium{
  background:radial-gradient(700px 420px at 50% -30%,rgba(239,107,1,.24),transparent 65%),var(--obsidian);
  border-color:var(--obsidian)
}

@media(prefers-reduced-motion:reduce){
  .hero-chip{animation:none}
  .ticker-set{animation:none}
}