/* ══ VARIABLES CSS (Design System OptimizzTonBizz) ══
 * Permet de modifier la charte graphique en un seul endroit.
 * Utilisables via var(--nom-variable) partout dans le CSS.
 */
:root {
  /* Couleurs principales */
  --bg-primary:   #0E1120;
  --bg-card:      #141828;
  --bg-input:     #0E1120;
  --border:       #1E2A42;
  --border-soft:  rgba(30,42,66,.5);

  /* Texte */
  --text-primary:    #E8ECF4;
  --text-secondary:  #8A9BBC;
  --text-muted:      #4F6080;

  /* Accents (couleurs business) */
  --accent-blue:     #3B7BFF;
  --accent-purple:   #7C3AED;
  --accent-green:    #22C55E;   /* économies, succès */
  --accent-gold:     #F5A623;   /* commission, CTA premium */
  --accent-red:      #EF4444;   /* alertes, sortie d'argent */

  /* Spacings standards */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .25s ease;
}

/* ══ CLASSES UTILITAIRES (réduisent les styles inline répétitifs) ══ */

/* Checkbox alignée standard (était répété 8 fois dans audit.html) */
.chk-row {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.chk-row input[type="checkbox"] {
  accent-color: var(--accent-blue);
  width: 15px;
  height: 15px;
}

/* Bloc de détail tarifaire (grille 3 colonnes HT / TTC / label) */
.tarif-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px 14px;
  font-size: 11.5px;
}

/* Stat-block réutilisable (label + chiffre) */
.stat-block {
  text-align: left;
}
.stat-block .lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.stat-block .val {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-green);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#07090F;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden;color:#E8ECF4}

/* LAYOUT */
#shell{display:flex;height:100vh;background:#07090F}
#sidebar{width:230px;min-height:100%;background:#0E1120;border-right:1px solid #1E2A42;display:flex;flex-direction:column;flex-shrink:0}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#topbar{height:60px;background:#0E1120;border-bottom:1px solid #1E2A42;display:flex;align-items:center;padding:0 26px;flex-shrink:0}
#content{flex:1;overflow-y:auto;padding:26px 26px 60px;background:#07090F}
.page{display:none}.page.active{display:block}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#0E1120}
::-webkit-scrollbar-thumb{background:#1E2A42;border-radius:10px}

/* SIDEBAR */
.logo-wrap{padding:20px 18px 16px;border-bottom:1px solid #1E2A42}
.logo{font-weight:800;font-size:16px;color:#E8ECF4;letter-spacing:-.3px}
.logo span{color:#3B7BFF}
.logo-sub{font-size:9.5px;color:#4F6080;text-transform:uppercase;letter-spacing:1.5px;margin-top:3px}
.nav{padding:12px 10px;flex:1}
.nav-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#2A3A55;font-weight:700;padding:0 8px;margin:10px 0 5px}
.ni{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:#8A9BBC;border:none;background:transparent;width:100%;text-align:left;transition:all .15s;position:relative;margin-bottom:2px;text-decoration:none;box-sizing:border-box}
a.ni:hover{text-decoration:none}
.ni:hover{background:#141729;color:#E8ECF4}
.ni.on{background:linear-gradient(135deg,rgba(59,123,255,.18),rgba(59,123,255,.05));color:#3B7BFF;font-weight:600;border:1px solid rgba(59,123,255,.2)}
.ni.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:65%;background:#3B7BFF;border-radius:0 3px 3px 0}
.nbadge{background:#3B7BFF;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;margin-left:auto}
.nbadge.gold{background:#F5A623}
.sb-foot{padding:12px;border-top:1px solid #1E2A42}
.urow{display:flex;align-items:center;gap:10px;padding:10px;background:#141729;border-radius:10px}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3B7BFF,#7C3AED);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}

/* TOPBAR */
.tb-title{font-size:17px;font-weight:700;color:#E8ECF4}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:#3B7BFF;color:#fff;transition:all .15s;font-family:inherit}
.btn:hover{background:#2558D9;box-shadow:0 4px 14px rgba(59,123,255,.3)}
.btn-out{background:transparent;color:#8A9BBC;border:1px solid #1E2A42}.btn-out:hover{border-color:#3B7BFF;color:#3B7BFF;background:rgba(59,123,255,.05)}
.btn-gold{background:linear-gradient(135deg,#F5A623,#E8940F);color:#fff}.btn-gold:hover{box-shadow:0 4px 14px rgba(245,166,35,.3)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-full{width:100%;justify-content:center}

/* CARDS */
.card{background:#111827;border-radius:14px;border:1px solid #1E2A42;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cp{padding:22px}

/* FORM */
.inp{width:100%;background:#141729;border:1px solid #1E2A42;border-radius:8px;color:#E8ECF4;padding:9px 12px;font-size:13px;outline:none;transition:border .15s;font-family:inherit}
.inp:focus{border-color:#3B7BFF;box-shadow:0 0 0 3px rgba(59,123,255,.15)}
.inp option{background:#141729}
label.lbl{font-size:11.5px;font-weight:600;color:#8A9BBC;margin-bottom:5px;display:block}
.fg{margin-bottom:13px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hr{height:1px;background:#1E2A42;margin:16px 0}

/* INPUT + UNITÉ */
.iu{display:flex}
.iu .inp{border-radius:8px 0 0 8px;border-right:none;flex:1}
.unit-tag{display:flex;align-items:center;padding:0 11px;background:#1E2A42;border:1px solid #1E2A42;border-left:none;border-radius:0 8px 8px 0;font-size:11.5px;font-weight:600;color:#8A9BBC;white-space:nowrap;flex-shrink:0}

/* TABS */
.tbbar{background:#0E1120;border:1px solid #1E2A42;border-radius:12px;padding:4px;display:inline-flex;gap:3px;margin-bottom:20px;flex-wrap:wrap}
.tb{padding:8px 15px;font-size:13px;font-weight:500;cursor:pointer;color:#8A9BBC;border-radius:8px;border:none;background:transparent;transition:all .15s;font-family:inherit}
.tb:hover{color:#E8ECF4;background:#141729}
.tb.on{background:#3B7BFF;color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(59,123,255,.3)}

/* BADGES */
.bdg{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.b-bl{background:rgba(59,123,255,.15);color:#3B7BFF}
.b-gr{background:rgba(34,197,94,.12);color:#22C55E}
.b-am{background:rgba(245,166,35,.12);color:#F5A623}
.b-rd{background:rgba(239,68,68,.12);color:#EF4444}

/* ═══ TYPE ÉNERGIE (NOUVEAU) ═══ */
.et-wrap{display:flex;gap:10px;margin-bottom:4px}
.et-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 8px;border-radius:10px;cursor:pointer;border:1.5px solid #1E2A42;background:#141729;transition:all .18s;font-family:inherit}
.et-btn:hover{border-color:#3B7BFF;background:rgba(59,123,255,.08)}
.et-btn.sel{border-color:#3B7BFF;background:rgba(59,123,255,.15);box-shadow:0 0 0 3px rgba(59,123,255,.1)}
.et-ico{font-size:24px;line-height:1}
.et-lbl{font-size:12px;font-weight:600;color:#8A9BBC}
.et-btn.sel .et-lbl{color:#3B7BFF}
.et-sub{font-size:10px;color:#4F6080}
.et-btn.sel .et-sub{color:#8A9BBC}

/* SECTION BLOCK */
.sb{background:#0E1120;border:1px solid #1E2A42;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.sb-ttl{font-size:10.5px;font-weight:700;color:#4F6080;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}

/* PARTNER CARD */
.pc{background:#141729;border:1.5px solid #1E2A42;border-radius:12px;padding:16px;margin-bottom:10px;transition:all .18s}
.pc:hover{border-color:#3B7BFF;box-shadow:0 4px 16px rgba(59,123,255,.15)}
.pc.best{border-color:#3B7BFF;background:rgba(59,123,255,.05)}

/* PROGRESS */
.pb{height:5px;background:#1E2A42;border-radius:10px;overflow:hidden}
.pf{height:100%;border-radius:10px}

/* STAT CARD */
.sc{background:#111827;border:1px solid #1E2A42;border-radius:14px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* TABLE */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#4F6080;padding:9px 14px;border-bottom:1px solid #1E2A42;font-weight:600;white-space:nowrap}
td{padding:12px 14px;font-size:13px;color:#8A9BBC;border-bottom:1px solid #141729;vertical-align:middle}
tr:hover td{background:#141729}
tr:last-child td{border-bottom:none}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-bg.open{display:flex}
.modal-box{background:#111827;border:1px solid #1E2A42;border-radius:18px;padding:28px;width:460px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* TOAST */
#toast{position:fixed;bottom:22px;right:22px;z-index:99999;background:#111827;border:1px solid #22C55E;color:#E8ECF4;padding:12px 18px;border-radius:10px;font-size:13px;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none}
#toast.show{display:flex}

/* GMB */
.gcr{display:flex;align-items:flex-start;gap:12px;padding:11px 8px;border-bottom:1px solid #1E2A42;cursor:pointer;border-radius:8px;transition:background .15s}
.gcr:last-child{border-bottom:none}
.gcr:hover{background:#141729}
.gcr-box{width:21px;height:21px;border-radius:6px;border:2px solid #1E2A42;background:#0E1120;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.gcr-box.checked{background:#3B7BFF;border-color:#3B7BFF}
.checkmark{display:none;width:11px;height:11px}
.gcr-box.checked .checkmark{display:block}

/* SUMMARY BAR */
.summary{background:linear-gradient(135deg,rgba(59,123,255,.12),rgba(59,123,255,.05));border:1px solid rgba(59,123,255,.25);border-radius:12px;padding:14px 18px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* SCORE RING */
#score-circle{transition:stroke-dashoffset .8s ease,stroke .4s}

/* PW TOGGLE */

/* ═══ GAMIFICATION ═══ */
.game-tabs{display:flex;gap:4px;background:#0E1120;border:1px solid #1E2A42;border-radius:12px;padding:4px;margin-bottom:22px;flex-wrap:wrap}
.game-tab{padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;color:#8A9BBC;border-radius:8px;border:none;background:transparent;transition:all .15s;font-family:inherit}
.game-tab:hover{color:#E8ECF4;background:#141729}
.game-tab.on{background:#3B7BFF;color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(59,123,255,.3)}
.game-panel{display:none}.game-panel.active{display:block}

/* Spin Wheel */
.wheel-wrap{position:relative;display:inline-block;cursor:pointer}
.wheel-pointer{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:26px solid #F5A623;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:10}
.wheel-result{background:linear-gradient(135deg,rgba(59,123,255,.15),rgba(59,123,255,.05));border:1px solid rgba(59,123,255,.3);border-radius:14px;padding:16px 20px;text-align:center;animation:popIn .5s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
@keyframes popIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}

/* Scratch Card */
.scratch-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.scratch-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.scratch-canvas{position:absolute;inset:0;cursor:pointer;touch-action:none}

/* Loyalty Card */
.lc-card{background:linear-gradient(145deg,#1a1a2e,#16213e,#0f3460);border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.6);max-width:360px}
.lc-stamp{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s;cursor:pointer;border:2px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.lc-stamp.filled{border-style:solid;box-shadow:0 4px 12px rgba(59,123,255,.3)}
.lc-stamp.new{animation:stampIn .5s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
@keyframes stampIn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}

/* Coupon card */
.coupon-card{background:#141729;border:1px solid #1E2A42;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:border-color .15s}

/* ═══ AUDIT GMB : Items floutés ═══ */
.gmb-action-item{display:flex;gap:10px;padding:11px 14px;background:#141729;border:1px solid #1E2A42;border-radius:10px;margin-bottom:8px;align-items:flex-start;transition:all .2s}
.gmb-action-item.blurred{filter:blur(5px);user-select:none;pointer-events:none}
.gmb-action-item .ai-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(245,166,35,.15);color:#F5A623;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.gmb-action-item .ai-content{flex:1}
.gmb-action-item .ai-title{font-size:13px;font-weight:700;color:#E8ECF4;margin-bottom:2px}
.gmb-action-item .ai-desc{font-size:11.5px;color:#8A9BBC;line-height:1.45}
.gmb-action-item .ai-pts{flex-shrink:0;font-size:10.5px;font-weight:700;color:#3B7BFF;background:rgba(59,123,255,.12);padding:3px 8px;border-radius:12px}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
═══════════════════════════════════════ */

/* Mobile menu button (caché par défaut, visible en mobile) */
#menu-btn{display:none;background:none;border:none;cursor:pointer;color:#E8ECF4;font-size:24px;padding:4px 10px;margin-right:4px;line-height:1;font-family:inherit}

/* Overlay (apparait quand sidebar ouverte en mobile) */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:998;display:none;backdrop-filter:blur(2px)}
#overlay.show{display:block}

/* ═══ TABLET (≤ 1024px) ═══ */
@media (max-width:1024px){
  /* Layout audit : passe en 1 colonne */
  .audit-grid{grid-template-columns:1fr !important}
  /* Pillars page d'accueil */
  .g4{grid-template-columns:repeat(2,1fr) !important}
  /* Visibilité : 2 colonnes deviennent 1 */
  #page-visibilite > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  /* Dashboard graphes */
  #page-dashboard div[style*="grid-template-columns:1.6fr"]{grid-template-columns:1fr !important}
}

/* ═══ MOBILE (≤ 768px) ═══ */
@media (max-width:768px){
  /* Sidebar coulissante */
  #sidebar{position:fixed;top:0;bottom:0;left:-260px;width:240px;z-index:999;transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:8px 0 32px rgba(0,0,0,.6)}
  #sidebar.open{left:0}

  /* Menu burger visible */
  #menu-btn{display:flex;align-items:center;justify-content:center}

  /* Main prend toute la largeur */
  #main{width:100%}

  /* Topbar plus compact */
  #topbar{padding:0 14px;height:54px;gap:8px}
  .tb-title{font-size:14px}
  .tb-right{gap:6px}
  .btn-sm{padding:6px 10px;font-size:11.5px}
  /* Bouton "Audit gratuit" → on l'abrège */
  #topbar .tb-right .btn-sm:last-child{padding:6px 10px}

  /* Content padding réduit */
  #content{padding:14px 14px 80px}

  /* Tailles de titres réduites */
  h1{font-size:24px !important;line-height:1.25 !important}
  h2{font-size:18px !important}

  /* Toutes les grilles en 1 colonne */
  .g4,.g3,.g2{grid-template-columns:1fr !important;gap:12px !important}

  /* Inline grids → 1 colonne */
  div[style*="grid-template-columns:1fr 1fr"]:not([style*="repeat"]){grid-template-columns:1fr !important}
  /* Audit page form/result layout — single col on mobile */
  div[style*="grid-template-columns:1.6fr"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}

  /* EXCEPTIONS : les tampons de carte fidélité restent en 10 colonnes mais plus petits */
  div[style*="grid-template-columns:repeat(10,1fr)"]{grid-template-columns:repeat(10,1fr) !important;gap:2px !important}
  /* La grille de 5 tampons reste en 5 colonnes */
  div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(5,1fr) !important}

  /* Cards padding réduit */
  .cp{padding:16px}
  .card{border-radius:12px}
  .sc{padding:14px;border-radius:12px}

  /* Tables scrollables horizontalement */
  .card > table,
  .card > div > table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* Tabs scrollables horizontalement */
  .tbbar,.game-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;max-width:100%}
  .tbbar::-webkit-scrollbar,.game-tabs::-webkit-scrollbar{height:0;display:none}
  .tb,.game-tab{white-space:nowrap;flex-shrink:0;font-size:12px;padding:7px 12px}

  /* Roue de la fortune plus petite */
  #wheel-canvas{width:240px !important;height:240px !important}

  /* Scratch card largeur fluide */
  .scratch-wrap{width:260px !important;height:148px !important}
  #scratch-canvas{width:260px !important;height:148px !important}

  /* Carte fidélité largeur fluide */
  .lc-card{max-width:100%}

  /* Modals plein écran sur mobile */
  .modal-box{padding:20px;width:100%;border-radius:16px;max-height:88vh}

  /* Footer légal : réorganisation */
  #legal-footer{left:0;padding:8px 14px;font-size:10px;gap:10px}
  #legal-footer > span:last-child{margin-left:0;width:100%;font-size:9px;color:#4F6080}

  /* Cookie banner */
  #cookie-banner{padding:12px 14px;gap:10px;flex-direction:column;align-items:stretch}
  #cookie-banner > div:first-child{display:none}

  /* Type d'énergie : boutons plus compacts */
  .et-btn{padding:10px 6px}
  .et-ico{font-size:20px}
  .et-lbl{font-size:11px}

  /* Hero CTAs : empilés */
  #page-dashboard div[style*="display:flex;gap:10px;justify-content:center"]{flex-direction:column;align-items:stretch}

  /* Tampons fidélité card plus compacts */
  .lc-stamp{font-size:14px !important}

  /* Coupon cards : empilage */
  .coupon-card{flex-wrap:wrap;gap:10px}
  .coupon-code{font-size:13px;letter-spacing:1px}

  /* Inputs un peu plus grands pour le tactile */
  .inp{padding:11px 13px;font-size:14px}
  .btn{padding:10px 16px}
  .btn-full{padding:13px !important}

  /* Summary bar : empile */
  .summary{flex-direction:column;align-items:stretch;gap:12px}
  .summary > div:nth-of-type(2){display:none} /* Cache la flèche → */
  .summary > div:last-child{margin-left:0 !important}

  /* Before/After comparison : empilé en mobile */
  .ba-compare{grid-template-columns:1fr !important}
  .ba-arrow{transform:rotate(90deg);font-size:24px !important;padding:6px 0}
  #before-after-demo div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
}

/* ═══ SMALL MOBILE (≤ 480px) ═══ */
@media (max-width:480px){
  /* Hero ultra compact */
  h1{font-size:22px !important}
  /* Stats cards en 1 colonne */
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr !important}
  /* Topbar : retirer "Audit gratuit" */
  #topbar .tb-right .btn-sm:first-child{display:none}
  /* Cards encore plus compactes */
  .cp{padding:14px}
  /* Logo subtitle plus petit */
  .logo-sub{font-size:8.5px}
}
.coupon-card:hover{border-color:#3B7BFF}
.coupon-code{font-family:monospace;font-size:15px;font-weight:800;color:#F5A623;letter-spacing:2px;background:#0E1120;border:1px solid #1E2A42;border-radius:8px;padding:4px 10px}

/* ── FAQ details/summary ── */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary > span:last-child{transform:rotate(45deg);transition:transform .2s}
details summary > span:last-child{transition:transform .2s;display:inline-block}

/* ── Lien logo dans sidebar ── */
.logo-wrap a{text-decoration:none;color:inherit;display:block}

/* ══ ANIMATION "PULSE ATTENTION" ══
 * Utilisée par scrollToCumulWidget() pour attirer l'œil sur le bouton "audit suivant"
 * juste après qu'un calcul d'audit soit terminé.
 */
@keyframes pulse-attention {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 18px rgba(59,123,255,.3);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 8px 28px rgba(59,123,255,.55);
  }
}

.btn-next-audit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(59,123,255,.45) !important;
  transition: all .2s ease;
}

/* ══ LOADER DE CALCUL ══
 * Spinner et état désactivé des boutons "Calculer" pendant l'analyse.
 */
.btn-loading {
  cursor: wait !important;
  opacity: 0.85;
  position: relative;
}
.btn-loading:hover {
  transform: none !important;
}
.calc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: rgba(255,255,255,.95);
  border-radius: 50%;
  animation: calc-spin .7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes calc-spin {
  to { transform: rotate(360deg); }
}
button:disabled {
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════
 * COMPLÉMENTS RESPONSIVE & ACCESSIBILITÉ (audit pro)
 * ══════════════════════════════════════════════════════ */

/* ─── Très petits écrans (≤ 360px : iPhone SE 1ère gén, Android budget) ─── */
@media (max-width: 360px) {
  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; }
  #topbar { padding: 0 10px; height: 50px; }
  .tb-title { font-size: 13px; }
  .btn-sm { padding: 5px 8px; font-size: 11px; }
  .cp { padding: 12px; }
  .inp { padding: 9px 11px; font-size: 13px; }
  /* Tampons fidélité ultra compact */
  .lc-stamp { font-size: 12px !important; }
  /* Cumul widget : padding réduit */
  #cumul-widget { padding: 14px 14px !important; }
}

/* ─── Mode paysage mobile (forms d'audit cramped) ─── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  /* Topbar plus fin pour libérer de la hauteur */
  #topbar { height: 44px; }
  /* Tabs plus petits */
  .tb, .game-tab { padding: 5px 10px; font-size: 11px; }
  /* Hero plus compact */
  h1 { font-size: 20px !important; }
  /* Wheel et scratch redimensionnés */
  #wheel-canvas { width: 200px !important; height: 200px !important; }
  .scratch-wrap, #scratch-canvas { width: 220px !important; height: 130px !important; }
}

/* ─── Grand desktop (> 1440px) : limiter la largeur pour éviter les lignes trop longues ─── */
@media (min-width: 1440px) {
  #content {
    max-width: 1320px;
    margin: 0 auto;
  }
}

/* ─── ACCESSIBILITÉ : préférence "mouvement réduit" (WCAG 2.3.3) ─── */
/* Les utilisateurs avec troubles vestibulaires ou migraines settent cette préférence
   au niveau OS (iOS/macOS/Windows). On respecte leur choix : animations désactivées. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Annule spécifiquement nos animations custom */
  .calc-spinner { animation: none; }
  .btn-next-audit { animation: none !important; }
}

/* ─── ACCESSIBILITÉ : contraste élevé (utilisateurs malvoyants) ─── */
@media (prefers-contrast: more) {
  body { background: #000; color: #fff; }
  .card, .cp, .sc { border-color: #fff; }
  .btn { border: 2px solid #fff; }
  a { text-decoration: underline; }
}

/* ─── ACCESSIBILITÉ : focus visible améliorée (utilisateurs clavier) ─── */
*:focus-visible {
  outline: 3px solid #3B7BFF;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid #F5A623;
  outline-offset: 3px;
}

/* ─── STYLES POUR L'IMPRESSION (les prospects peuvent imprimer leur audit) ─── */
@media print {
  /* Couleurs imprimables (économise l'encre + meilleure lisibilité) */
  body {
    background: #fff !important;
    color: #000 !important;
  }
  /* Cacher les éléments non pertinents */
  #sidebar, #topbar, #legal-footer, #cookie-banner,
  #modal, #toast, #admin-badge,
  .btn, button {
    display: none !important;
  }
  /* Le main prend toute la page */
  #main { width: 100% !important; margin: 0 !important; }
  #content { padding: 0 !important; max-width: 100% !important; }
  /* Cartes en noir et blanc, contours nets */
  .card, .cp, .sc, #cumul-widget {
    background: #fff !important;
    border: 1px solid #999 !important;
    color: #000 !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }
  /* Textes lisibles */
  h1, h2, h3 { color: #000 !important; }
  .lbl, .val { color: #333 !important; }
  /* Forcer les liens à montrer leur URL en print */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 80%;
    color: #555;
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after { content: ""; }
}

/* ─── TARGETING TACTILE : agrandit les tap targets sur écrans tactiles (WCAG 2.5.5) ─── */
@media (hover: none) and (pointer: coarse) {
  /* Standard Apple HIG / Material : minimum 44×44px pour les targets tactiles */
  .btn,
  button:not(.btn-sm):not(.tb),
  .ni { min-height: 44px; }
  /* Liens dans le texte : plus de padding pour faciliter le tap */
  details summary { padding: 8px 0; }
  .chk-row { padding: 8px 0; }
}