/* =====================================================================
   guide.css — Guide interactif BetWinProno
   Styles partagés : hub, panneaux annotés (card + table), TOC, onglets,
   accordéons, recherche, progression. Thème SOMBRE premium.
   ===================================================================== */

.guide{
  --g-navy:#1e3a5f;
  --g-navy2:#2c4a6e;
  --g-blue:#2c5fb3;
  --g-blue-bright:#5b9dff;
  --g-ink:#0f172a;          /* texte sur cartes blanches */
  --g-muted:#64748b;        /* texte secondaire sur cartes blanches */
  --g-text:#eaf1ff;         /* texte sur fond sombre */
  --g-text-muted:#a8bcdc;   /* texte secondaire sur fond sombre */
  --g-line:#e2e8f0;
  --g-card:#ffffff;
  --g-won:#10b981;
  --g-lost:#ef4444;
  --g-gold:#f5c542;

  position:relative;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(91,157,255,.22) 0%, transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(16,185,129,.14) 0%, transparent 55%),
    linear-gradient(160deg, #1a3e7a 0%, #142e58 38%, #0c1f3d 100%);
  color:var(--g-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  border-radius:18px;
  padding:30px 22px 60px;
  margin:18px 0 40px;
  line-height:1.55;
  overflow:hidden;
}
.guide *{box-sizing:border-box;}
.guide h1,.guide h2,.guide h3,.guide h4,.guide p,.guide ul,.guide ol{margin:0;}

/* ===== Hero ===== */
.guide-hero{text-align:center;max-width:760px;margin:0 auto 6px;position:relative;z-index:2;}
.guide-hero h1{font-size:32px;font-weight:800;letter-spacing:-.5px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.25);}
.guide-hero h1 .accent{color:var(--g-gold);}
.guide-hero p{color:var(--g-text-muted);font-size:15px;margin-top:8px;}

/* Tout le contenu sur une seule colonne, centrée (plus de colonne vide) */
.guide-hero,.guide-tools,.guide-toc,.guide-content{max-width:960px;margin-left:auto;margin-right:auto;}

/* ===== Barre outils du guide (recherche + progression) ===== */
.guide-tools{
  position:sticky;top:0;z-index:20;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:rgba(13,30,58,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:10px 14px;margin-top:22px;margin-bottom:8px;
}
.guide-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:9px 12px;}
.guide-search svg{flex:0 0 auto;color:var(--g-blue-bright);}
.guide-search input{border:0;outline:0;width:100%;font-size:14px;color:#fff;background:transparent;}
.guide-search input::placeholder{color:#9fb3d4;}
.guide-progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--g-text-muted);font-weight:600;}
.guide-progress .bar{width:120px;height:8px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden;}
.guide-progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g-blue-bright),var(--g-won));transition:width .4s ease;}

/* ===== Sommaire horizontal (chips), centré et collant ===== */
.guide-toc{position:sticky;top:64px;z-index:19;
  background:rgba(13,30,58,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:8px;margin-bottom:26px;}
.guide-toc h4{display:none;}
.guide-toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.guide-toc a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  font-size:13.5px;color:var(--g-text-muted);text-decoration:none;font-weight:700;
  border:1px solid transparent;transition:.15s;}
.guide-toc a:hover{background:rgba(255,255,255,.08);color:#fff;}
.guide-toc a.active{background:linear-gradient(135deg,var(--g-blue),var(--g-blue-bright));color:#fff;
  box-shadow:0 4px 14px rgba(44,95,179,.45);}
.guide-toc a .num{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.guide-toc a.active .num{background:rgba(255,255,255,.28);}

/* ----- Contenu ----- */
.guide-content{min-width:0;position:relative;z-index:2;}
.guide-chapter{scroll-margin-top:130px;margin-bottom:48px;}
.guide-chapter > .ch-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.guide-chapter .ch-num{flex:0 0 auto;width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,var(--g-blue-bright),var(--g-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;
  box-shadow:0 6px 16px rgba(44,95,179,.45);}
.guide-chapter .ch-title{font-size:23px;font-weight:800;letter-spacing:-.3px;color:#fff;}
.guide-chapter .ch-intro{color:var(--g-text-muted);font-size:14.5px;margin:2px 0 0;}

.guide-block{margin:26px 0;}
.guide-block > h3{font-size:17px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:9px;color:#fff;}
.guide-block > h3 .dot{width:9px;height:9px;border-radius:50%;background:var(--g-gold);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(245,197,66,.2);}
.guide-block > p.lead{color:var(--g-text-muted);font-size:14px;margin-bottom:12px;}

/* ===== Onglets (Cartes / Tableau) ===== */
.guide-tabs{display:inline-flex;background:#e3eaf5;border-radius:12px;padding:5px;gap:5px;margin-bottom:16px;}
.guide-tabs button{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font-weight:700;font-size:14px;padding:9px 18px;border-radius:8px;color:#64748b;background:transparent;}
.guide-tabs button.active{background:var(--g-blue);color:#fff;box-shadow:0 3px 8px rgba(44,95,179,.35);}
.guide-tabpane{display:none;}
.guide-tabpane.active{display:block;animation:guideFade .25s ease;}
@keyframes guideFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* =====================================================================
   PANNEAUX ANNOTÉS — moteur de connecteurs commun
   ===================================================================== */
.guide-panel{position:relative;}
.guide-panel .glines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;}
.guide-panel .band{position:relative;z-index:2;}

/* --- Callout générique --- */
.callout{
  background:#fff;border:1px solid var(--g-line);border-radius:13px;
  padding:11px 13px;box-shadow:0 6px 16px rgba(15,27,61,.06);
  display:flex;gap:10px;align-items:flex-start;
}
.callout .badge{flex:0 0 auto;width:24px;height:24px;border-radius:50%;color:#fff;font-size:12px;
  font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.callout h3{font-size:13px;font-weight:700;margin-bottom:2px;line-height:1.2;color: var(--primary-color-darker);}
.callout p{font-size:11.5px;line-height:1.4;color:var(--g-muted);}

/* =====================================================================
   PANNEAU « CARD »  (.guide-panel--card)
   3 colonnes : callouts gauche / card centrale / callouts droite
   ===================================================================== */
.guide-panel--card{
  display:grid;grid-template-columns:1fr minmax(330px,400px) 1fr;gap:32px;align-items:center;
}
.guide-panel--card .col{display:flex;flex-direction:column;gap:16px;z-index:2;position:relative;}
.guide-panel--card .col-left{align-items:flex-end;}
.guide-panel--card .col-right{align-items:flex-start;}
.guide-panel--card .callout{max-width:320px;}

.gp-card-wrap{display:flex;justify-content:center;z-index:2;position:relative;}
.gp-card{width:100%;max-width:400px;background:#fff;border-radius:24px;
  box-shadow:0 20px 50px rgba(15,27,61,.14);padding:22px;position:relative;}
.gp-card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.gp-hgroup{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--g-ink);}
.gp-hgroup svg{flex:0 0 auto;}
.gp-hr{height:1px;background:var(--g-line);margin:15px 0;}
.gp-match-box{border:1px solid var(--g-line);border-radius:16px;padding:22px 30px 18px 16px;
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.gp-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1 1 0;min-width:0;}
.gp-star{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#f7c948,#e8a90c);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(247,201,72,.25),0 6px 14px rgba(232,169,12,.4);}
.gp-logo{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;border:2px solid #d7deea;}
.gp-logo.viking{background:#10243f;color:#cfe0f5;border-color:#10243f;}
.gp-logo.skala{background:#fff;color:#e8761c;border:2px solid #e8761c;}
.gp-team .tname{font-weight:800;font-size:15px;line-height:1.15;}
.gp-center-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;}
.gp-vs{font-weight:800;color:var(--g-muted);font-size:16px;letter-spacing:1px;}
.gp-country{font-size:12px;font-weight:700;color:#94a3b8;letter-spacing:1px;}
.gp-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#94a3b8;}
.gp-prono-box{border:1px solid #cdd7ea;border-radius:14px;padding:16px;text-align:center;margin-top:18px;background:#fbfcfe;}
.gp-prono-label{font-size:12px;font-weight:700;letter-spacing:2px;color:#94a3b8;}
.gp-prono-main{font-size:22px;font-weight:800;margin:8px 0 6px;}
.gp-prono-prob{font-size:15px;font-weight:700;color:var(--g-blue);}
.gp-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;}
.gp-btn{border-radius:12px;padding:13px 14px;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;}
.gp-btn-cote{background:#f6d2d2;color:#9b2c2c;}
.gp-btn-analyse{background:#fff;border-color:#cbd5e1;color:var(--g-ink);}
.gp-btn-even{background:var(--g-navy);color:#5aa9e6;}

/* =====================================================================
   PANNEAU « TABLE / PRONO+ »  (.guide-panel--table)
   bandes empilées : callouts haut / toolbar+table / callouts bas
   ===================================================================== */
.guide-panel--table .callrow{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}
.guide-panel--table .callout{flex:1 1 0;min-width:150px;max-width:220px;}
.guide-panel--table .callout.wide{max-width:300px;}

.gt-toolbar{background:#fff;border:1px solid #e6ebf3;border-radius:18px;box-shadow:0 12px 30px rgba(15,27,61,.08);
  padding:14px 16px;margin:16px 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.gt-toggle{display:inline-flex;background:#eef2f8;border-radius:11px;padding:4px;gap:4px;}
.gt-toggle .seg{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;padding:9px 16px;border-radius:8px;color:#64748b;}
.gt-toggle .seg.active{background:var(--g-blue);color:#fff;box-shadow:0 3px 8px rgba(44,95,179,.35);}
.gt-pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cbd5e1;border-radius:11px;padding:11px 16px;font-weight:600;font-size:14px;color:var(--g-ink);}
.gt-grow{flex:1 1 auto;}
.gt-field{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cbd5e1;border-radius:11px;padding:11px 14px;color:#94a3b8;font-size:14px;}
.gt-field.search{min-width:220px;}
.gt-field.conf{width:120px;}
.gt-reset{width:44px;height:44px;border-radius:11px;border:1px solid #f0b4b4;color:#dc2626;display:flex;align-items:center;justify-content:center;background:#fff;}
.gt-count{font-size:14px;font-weight:600;color:#94a3b8;margin:4px 2px 14px;}
.gt-count b{color:#475569;}

.gt-tablewrap{border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(15,27,61,.1);background:#fff;}
.gt-tablewrap table{width:100%;border-collapse:collapse;font-size:13.5px;}
.gt-tablewrap thead th{background:linear-gradient(180deg,var(--g-navy),var(--g-navy2));color:#fff;text-align:left;
  padding:15px 12px;font-size:13px;font-weight:700;white-space:nowrap;}
.gt-tablewrap thead th .caret{opacity:.55;font-size:10px;margin-left:4px;}
.gt-tablewrap thead th.c{text-align:center;}
.gt-tablewrap tbody td{padding:13px 12px;border-bottom:1px solid #eef1f6;vertical-align:middle;}
.gt-tablewrap tbody tr:last-child td{border-bottom:none;}
.gt-date-main{font-weight:700;color:var(--g-ink);}
.gt-date-sub{display:flex;align-items:center;gap:7px;margin-top:3px;color:#64748b;font-size:12.5px;}
.gt-even{border:1px solid #bcd2f0;color:#3b6fc4;border-radius:6px;font-size:10.5px;font-weight:700;padding:1px 6px;}
.gt-league{display:flex;align-items:center;gap:8px;}
.gt-flag{font-size:18px;line-height:1;}
.gt-league .lg-main{font-weight:700;}
.gt-league .lg-sub{color:#64748b;font-size:12px;}
.gt-match{display:flex;flex-direction:column;gap:8px;}
.gt-teamrow{display:flex;align-items:center;gap:8px;}
.gt-tlogo{width:24px;height:24px;border-radius:50%;background:#10243f;color:#cfe0f5;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1px solid #d7deea;}
.gt-teamrow span{font-weight:700;}
.gt-sc{text-align:center;font-weight:800;font-size:17px;white-space:nowrap;}
.gt-pred{border-left:3px solid var(--g-won);padding:3px 0 3px 10px;}
.gt-pred.lost{border-left-color:var(--g-lost);}
.gt-pred .pl{font-weight:700;color:var(--g-ink);}
.gt-pred .pc{color:#64748b;font-size:12px;margin-top:1px;}
.gt-pred.best .pl{color:var(--g-blue);}
.gt-conseil{color:#475569;font-size:13px;line-height:1.35;max-width:230px;}

/* =====================================================================
   Cartes pédagogiques (marchés, navigation, services)
   ===================================================================== */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.gcard{background:#fff;border:1px solid var(--g-line);border-radius:14px;padding:16px;
  box-shadow:0 6px 16px rgba(15,27,61,.05);display:flex;flex-direction:column;gap:6px;}
.gcard .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;margin-bottom:4px;}
.gcard h4{font-size:14.5px;font-weight:800;color: var(--primary-color-darker);}
.gcard .tag{font-size:11px;font-weight:700;color:var(--g-blue);text-transform:uppercase;letter-spacing:.5px;}
.gcard p{font-size:13px;color:var(--g-muted);}
.gcard .ex{font-size:12.5px;color:#475569;background:#f4f7fc;border-radius:8px;padding:7px 10px;margin-top:4px;}

/* Figures / posters illustrés */
.guide-figure{margin:20px 0 6px;text-align:center;}
.guide-figure img{display:inline-block;max-width:min(100%,560px);width:100%;height:auto;
  border-radius:18px;border:1px solid var(--g-line);box-shadow:0 22px 55px rgba(15,27,61,.18);}
.guide-figure--tall img{max-width:min(100%,420px);}
.guide-figure figcaption{margin-top:10px;font-size:12.5px;color:var(--g-text-muted);font-style:italic;}

/* Encadrés d'info */
.gnote{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:14px 0;
  border:1px solid var(--g-line);background:#fff;font-size:13.5px;color:#475569;}
.gnote .ic{flex:0 0 auto;font-size:18px;}
.gnote.info{border-left:4px solid var(--g-blue);}
.gnote.tip{border-left:4px solid var(--g-won);}
.gnote.warn{border-left:4px solid var(--g-gold);background:#fffbf2;}

/* ===== Accordéon (FAQ) ===== */
.guide-acc{display:flex;flex-direction:column;gap:10px;}
.guide-acc .item{background:#fff;border:1px solid var(--g-line);border-radius:12px;overflow:hidden;}
.guide-acc .q{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:15px 16px;font-size:14.5px;font-weight:700;color:var(--g-ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;}
.guide-acc .q .chev{transition:transform .25s;color:#94a3b8;flex:0 0 auto;}
.guide-acc .item.open .q .chev{transform:rotate(180deg);}
.guide-acc .a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.guide-acc .a-inner{padding:0 16px 16px;font-size:13.5px;color:var(--g-muted);line-height:1.6;}

/* ===== Recherche : surlignage / masquage ===== */
.guide-hit{background:#fff6cc;border-radius:3px;}
.guide-chapter.search-hidden,.guide-block.search-hidden,.gcard.search-hidden,.guide-acc .item.search-hidden{display:none;}
.guide-noresult{text-align:center;color:var(--g-text-muted);font-size:14px;padding:30px;display:none;}
.guide.searching .guide-noresult.show{display:block;}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .guide-panel .glines{display:none;}
  .guide-panel--card{grid-template-columns:1fr;}
  .guide-panel--card .col-left,.guide-panel--card .col-right{align-items:stretch;}
  .guide-panel--card .col{order:2;}
  .guide-panel--card .gp-card-wrap{order:1;}
  .guide-panel--card .callout{max-width:none;}
  .guide-panel--table .callout{max-width:none;flex-basis:46%;}
}
@media (max-width:640px){
  .guide{padding:22px 12px 44px;}
  .guide-hero h1{font-size:24px;}
  .gt-tablewrap{overflow-x:auto;}
  .guide-panel--table .callout{flex-basis:100%;}
}