/* ============================================================
   IPTV4U — GUIDE GEO (nouveau système de templates)
   PALETTE ALIGNÉE sur guide-template.php (guide-v2.css) :
   fond vert-noir #010d08, émeraude #10b981/#34d399/#6ee7b7,
   textes #f0fdf4 / #d1fae5 / #a7f3d0.
   Accent piloté par --gtpl-accent / --gtpl-accent2 (défaut = émeraude).
   ============================================================ */

#gtpl-page{
  --acc: var(--gtpl-accent, #10b981);
  --acc2: var(--gtpl-accent2, #34d399);
  --acc3: #6ee7b7;
  --bg: #010d08;
  --panel: rgba(4,30,20,.45);
  --panel2: rgba(4,30,20,.30);
  --bd: rgba(16,185,129,.12);
  --bd-em: rgba(52,211,153,.22);
  --tx: #f0fdf4;
  --tx2: #d1fae5;
  --tx3: #a7f3d0;
  --radius: 20px;
  --radius-sm: 14px;
  position: relative;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.75;
  font-size: 17px;
  overflow-x: clip;
  padding-bottom: 90px;
}
#gtpl-page *{ box-sizing: border-box; }
#gtpl-page::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px circle at 12% -4%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 55%),
    radial-gradient(640px circle at 90% 4%, rgba(16,185,129,.08), transparent 55%);
}
#gtpl-page > *{ position: relative; z-index: 1; }

#gtpl-page .gtpl-ct{ max-width: 1120px; margin: 0 auto; padding: 0 22px; }
#gtpl-page .gtpl-narrow{ max-width: 820px; }
#gtpl-page .gtpl-wide{ max-width: 1120px; }

/* ── Reading progress ── */
.gtpl-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gtpl-accent,#10b981), var(--gtpl-accent2,#34d399), #6ee7b7);
  box-shadow: 0 0 12px var(--gtpl-accent,#10b981);
  z-index: 9999; transition: width .1s linear;
}

/* ── HERO ── */
#gtpl-page .gtpl-hero{ padding: clamp(70px,10vw,130px) 0 clamp(34px,5vw,60px); text-align: center; }
#gtpl-page .gtpl-badge{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color: var(--acc2);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  padding:8px 16px; border-radius:100px; margin-bottom:26px;
}
#gtpl-page .gtpl-badge-dot{ width:7px; height:7px; border-radius:50%; background: var(--acc); box-shadow:0 0 10px var(--acc); animation: gtplPulse 1.8s infinite; }
@keyframes gtplPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.8)} }
#gtpl-page .gtpl-title{
  font-size: clamp(2.1rem,5.4vw,3.6rem); font-weight:900; line-height:1.1; letter-spacing:-.02em;
  margin:0 auto 20px; max-width:16ch;
  background: linear-gradient(180deg,#fff 30%, #94a3b8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#gtpl-page .gtpl-sub{ font-size:clamp(1.02rem,2.2vw,1.28rem); color:var(--tx2); max-width:62ch; margin:0 auto; font-weight:300; }
#gtpl-page .gtpl-meta{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:18px; font-size:.82rem; color:rgba(167,243,208,.6); }
#gtpl-page .gtpl-meta span{ display:inline-flex; align-items:center; gap:6px; }

/* ── Boutons (gradient émeraude comme guide-template) ── */
#gtpl-page .gtpl-btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  padding:15px 34px; border-radius:100px; font-weight:800; font-size:1rem; text-decoration:none;
  color:#021a12; background: linear-gradient(135deg, var(--acc), var(--acc2), var(--acc3));
  box-shadow: 0 10px 34px -8px color-mix(in srgb, var(--acc) 60%, transparent);
  transition: transform .25s, box-shadow .25s; position:relative; overflow:hidden;
}
#gtpl-page .gtpl-btn:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--acc) 78%, transparent); }
#gtpl-page .gtpl-btn::after{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); transition:left .6s; }
#gtpl-page .gtpl-btn:hover::after{ left:220%; }
#gtpl-page .gtpl-arr{ transition: transform .25s; }
#gtpl-page .gtpl-btn:hover .gtpl-arr{ transform: translateX(4px); }

/* ── TL;DR (réponse rapide GEO) ── */
#gtpl-page .gtpl-tldr{
  margin: 8px 0 34px; padding: 22px 24px 22px 26px; border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, transparent), var(--panel));
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent); position:relative; overflow:hidden;
  box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--acc) 55%, transparent);
}
#gtpl-page .gtpl-tldr::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--acc),var(--acc2)); }
#gtpl-page .gtpl-tldr-tag{ display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--acc2); margin-bottom:9px; }
#gtpl-page .gtpl-tldr-tag svg{ width:1em; height:1em; }
#gtpl-page .gtpl-tldr-text{ margin:0; font-size:1.02rem; color:#e9fbf2; line-height:1.65; }

/* ── Sommaire (TOC) ── */
#gtpl-page .gtpl-toc{ margin:0 0 34px; }
#gtpl-page .gtpl-toc details{ background:var(--panel); border:1px solid var(--bd); border-radius:var(--radius-sm); overflow:hidden; backdrop-filter:blur(10px); }
#gtpl-page .gtpl-toc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 18px; font-weight:700; font-size:.9rem; color:var(--tx); }
#gtpl-page .gtpl-toc summary::-webkit-details-marker{ display:none; }
#gtpl-page .gtpl-toc-ic svg{ width:1.05em; height:1.05em; color:var(--acc); }
#gtpl-page .gtpl-toc-tg{ margin-left:auto; color:var(--tx3); transition:transform .2s; }
#gtpl-page .gtpl-toc details[open] .gtpl-toc-tg{ transform:rotate(180deg); }
#gtpl-page .gtpl-toc ol{ margin:0; padding:4px 18px 16px 40px; }
#gtpl-page .gtpl-toc li{ margin:7px 0; }
#gtpl-page .gtpl-toc a{ color:var(--tx2); text-decoration:none; font-size:.9rem; transition:color .18s, padding .18s; border-left:2px solid transparent; padding-left:0; }
#gtpl-page .gtpl-toc a:hover{ color:var(--acc2); }
#gtpl-page .gtpl-toc a.active{ color:var(--acc2); font-weight:700; padding-left:10px; border-left-color:var(--acc); }

/* ── Sections ── */
#gtpl-page .gtpl-sec{ margin: 40px 0; }
#gtpl-page .gtpl-intro p{ font-size:1.16rem; color:#e2fbef; line-height:1.8; font-weight:300; }
#gtpl-page .gtpl-h2{
  display:flex; align-items:center; gap:13px; font-size:clamp(1.5rem,3vw,2rem); font-weight:800;
  letter-spacing:-.015em; margin:0 0 20px; color:#fff; scroll-margin-top:90px;
}
#gtpl-page .gtpl-h2-ic{ display:inline-flex; width:42px; height:42px; flex-shrink:0; align-items:center; justify-content:center; border-radius:12px; background:color-mix(in srgb,var(--acc) 14%,transparent); border:1px solid color-mix(in srgb,var(--acc) 28%,transparent); }
#gtpl-page .gtpl-h2-ic svg{ width:1.15em; height:1.15em; color:var(--acc2); }
#gtpl-page .gtpl-content{ position:relative; }
#gtpl-page .gtpl-num{ font-size:3.4rem; font-weight:900; color:color-mix(in srgb,var(--acc) 22%,transparent); line-height:.8; margin-bottom:-6px; }
#gtpl-page .gtpl-sec p{ color:var(--tx2); margin:0 0 18px; }
#gtpl-page .gtpl-ilink{ color:var(--acc2); text-decoration:none; border-bottom:1px dashed color-mix(in srgb,var(--acc) 55%,transparent); }
#gtpl-page .gtpl-ilink:hover{ border-bottom-style:solid; color:#fff; }
#gtpl-page .gtpl-clink{ color:var(--acc2); font-weight:700; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--acc) 60%,transparent); }

/* ── Figures ── */
#gtpl-page .gtpl-fig{ text-align:center; }
#gtpl-page .gtpl-fig img{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; box-shadow:0 14px 44px -14px rgba(0,0,0,.6); }
#gtpl-page .gtpl-fig figcaption{ font-size:.72rem; color:var(--tx3); margin-top:8px; opacity:.75; }
#gtpl-page .gtpl-fig a{ color:inherit; }

/* ── Steps / timeline ── */
#gtpl-page .gtpl-steps{ position:relative; padding-left:6px; }
#gtpl-page .gtpl-steps::before{ content:""; position:absolute; left:24px; top:20px; bottom:20px; width:2px; background:linear-gradient(180deg,var(--acc),transparent); opacity:.4; }
#gtpl-page .gtpl-step{ display:flex; gap:20px; margin-bottom:22px; align-items:flex-start; }
#gtpl-page .gtpl-step-n{
  flex-shrink:0; width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.05rem; color:#021a12; background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--acc) 70%,transparent); position:relative; z-index:1;
}
#gtpl-page .gtpl-step-body{ flex:1; background:var(--panel2); border:1px solid var(--bd); border-radius:14px; padding:16px 20px; transition:border-color .25s, transform .25s; }
#gtpl-page .gtpl-step-body:hover{ border-color:var(--bd-em); transform:translateX(3px); }
#gtpl-page .gtpl-step-ic{ display:inline-flex; margin-bottom:6px; }
#gtpl-page .gtpl-step-ic svg{ width:1.3em; height:1.3em; color:var(--acc2); }
#gtpl-page .gtpl-step-body h3{ margin:0 0 6px; font-size:1.12rem; color:#fff; }
#gtpl-page .gtpl-step-body p{ margin:0; font-size:.95rem; }

/* ── Tip ── */
#gtpl-page .gtpl-tip{ background:linear-gradient(135deg,rgba(245,158,11,.08),var(--panel2)); border:1px solid rgba(245,158,11,.3); border-radius:14px; padding:20px 22px; }
#gtpl-page .gtpl-tip-h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
#gtpl-page .gtpl-tip-ic svg{ width:1.3em; height:1.3em; color:#f59e0b; }
#gtpl-page .gtpl-tip h3{ margin:0; font-size:1.1rem; color:#fde68a; }
#gtpl-page .gtpl-tip p{ margin:0; }

/* ── Features grid ── */
#gtpl-page .gtpl-feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
#gtpl-page .gtpl-feat{ position:relative; background:var(--panel2); border:1px solid var(--bd); border-radius:14px; padding:20px 18px 16px; transition:transform .25s, border-color .25s; }
#gtpl-page .gtpl-feat:hover{ transform:translateY(-4px); border-color:var(--bd-em); }
#gtpl-page .gtpl-feat-n{ position:absolute; top:12px; right:14px; font-size:1.5rem; font-weight:900; color:color-mix(in srgb,var(--acc) 20%,transparent); }
#gtpl-page .gtpl-feat-ic{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:color-mix(in srgb,var(--acc) 12%,transparent); margin-bottom:12px; }
#gtpl-page .gtpl-feat-ic svg{ width:1.35em; height:1.35em; color:var(--acc2); }
#gtpl-page .gtpl-feat h3{ margin:0 0 6px; font-size:1.05rem; color:#fff; }
#gtpl-page .gtpl-feat p{ margin:0; font-size:.9rem; }

/* ── Table ── */
#gtpl-page .gtpl-table-wrap{ overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--bd); }
#gtpl-page .gtpl-table{ width:100%; border-collapse:collapse; background:rgba(1,13,8,.4); font-size:.92rem; }
#gtpl-page .gtpl-table th{ background:color-mix(in srgb,var(--acc) 16%,transparent); color:var(--acc2); font-weight:800; text-transform:uppercase; font-size:.75rem; letter-spacing:.04em; padding:14px 16px; text-align:left; }
#gtpl-page .gtpl-table td{ padding:14px 16px; border-top:1px solid var(--bd); color:var(--tx2); }
#gtpl-page .gtpl-table tr:hover td{ background:rgba(16,185,129,.04); }
#gtpl-page .gtpl-row-hl td{ background:color-mix(in srgb,var(--acc) 9%,transparent)!important; color:#fff; }
#gtpl-page .gtpl-tag{ display:inline-block; margin-left:8px; font-size:.62rem; font-weight:800; text-transform:uppercase; color:#021a12; background:var(--acc); padding:2px 8px; border-radius:100px; vertical-align:middle; }

/* ── FAQ ── */
#gtpl-page .gtpl-faq{ display:flex; flex-direction:column; gap:10px; }
#gtpl-page .gtpl-faq-item{ background:var(--panel2); border:1px solid var(--bd); border-radius:12px; overflow:hidden; transition:border-color .2s; }
#gtpl-page .gtpl-faq-item[open]{ border-color:var(--bd-em); }
#gtpl-page .gtpl-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; font-weight:700; font-size:1rem; color:#fff; }
#gtpl-page .gtpl-faq-item summary::-webkit-details-marker{ display:none; }
#gtpl-page .gtpl-faq-tg{ margin-left:auto; font-size:1.4rem; font-weight:400; color:var(--acc2); transition:transform .25s; line-height:1; }
#gtpl-page .gtpl-faq-item[open] .gtpl-faq-tg{ transform:rotate(45deg); }
#gtpl-page .gtpl-faq-a{ padding:0 18px 16px; color:var(--tx2); font-size:.95rem; animation:gtplFade .3s ease; }
@keyframes gtplFade{ from{opacity:0;transform:translateY(-4px)} to{opacity:1} }

/* ── CTA ── */
#gtpl-page .gtpl-cta-mid{ text-align:center; background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 10%,transparent),var(--panel2)); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); border-radius:var(--radius); padding:30px 24px; }
#gtpl-page .gtpl-cta-mid p{ font-size:1.15rem; color:#fff; margin:0 0 6px; }
#gtpl-page .gtpl-product{ text-align:center; background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,transparent),rgba(1,13,8,.5)); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent); border-radius:var(--radius); padding:34px 24px 28px; position:relative; }
#gtpl-page .gtpl-product-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--acc); color:#021a12; padding:4px 15px; border-radius:100px; font-size:.72rem; font-weight:800; text-transform:uppercase; white-space:nowrap; box-shadow:0 6px 16px -4px color-mix(in srgb,var(--acc) 70%,transparent); }
#gtpl-page .gtpl-product h3{ font-size:1.5rem; color:#fff; margin:6px 0 10px; }
#gtpl-page .gtpl-product p{ max-width:520px; margin:0 auto; }
#gtpl-page .gtpl-cta-final{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:radial-gradient(circle at top left,var(--em-dark,#064e3b),rgba(1,13,8,.9)); border:1px solid var(--bd-em); border-radius:22px; padding:36px 34px; }
#gtpl-page .gtpl-cta-final h3{ margin:0 0 4px; font-size:1.35rem; color:#fff; }
#gtpl-page .gtpl-cta-final p{ margin:0; }
#gtpl-page .gtpl-cta-final .gtpl-btn{ margin-top:0; background:#fff; color:#021a12; }

/* ── Related ── */
#gtpl-page .gtpl-rel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
#gtpl-page .gtpl-rel-card{ display:flex; flex-direction:column; gap:8px; background:var(--panel2); border:1px solid var(--bd); border-radius:14px; padding:18px; text-decoration:none; transition:transform .25s, border-color .25s; }
#gtpl-page .gtpl-rel-card:hover{ transform:translateY(-4px); border-color:var(--bd-em); }
#gtpl-page .gtpl-rel-cat{ font-size:.64rem; font-weight:800; letter-spacing:.08em; color:var(--acc2); }
#gtpl-page .gtpl-rel-card h3{ margin:0; font-size:1rem; color:#fff; line-height:1.35; }
#gtpl-page .gtpl-rel-go{ margin-top:auto; font-size:.82rem; font-weight:700; color:var(--acc2); }

/* ── Author ── */
#gtpl-page .gtpl-author{ display:flex; gap:22px; align-items:flex-start; background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 8%,transparent),rgba(4,30,20,.75) 55%); border:1px solid var(--bd-em); border-radius:var(--radius); padding:26px 28px; }
#gtpl-page .gtpl-author-av{ flex-shrink:0; width:80px; height:80px; border-radius:50%; padding:3px; background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 0 22px -4px color-mix(in srgb,var(--acc) 60%,transparent); }
#gtpl-page .gtpl-author-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #010d08; display:block; }
#gtpl-page .gtpl-author-av span{ width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#04121c; border:2px solid #010d08; font-size:1.5rem; font-weight:900; color:var(--acc2); }
#gtpl-page .gtpl-author-eye{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:4px; }
#gtpl-page .gtpl-author-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:9px; }
#gtpl-page .gtpl-author-row h3{ margin:0; font-size:1.3rem; color:#fff; }
#gtpl-page .gtpl-author-role{ font-size:.66rem; font-weight:700; text-transform:uppercase; color:var(--acc2); background:color-mix(in srgb,var(--acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); padding:4px 12px; border-radius:100px; }
#gtpl-page .gtpl-author-bio{ font-size:.9rem; color:var(--tx2); margin:0 0 12px; }
#gtpl-page .gtpl-author-trust{ display:flex; gap:16px; flex-wrap:wrap; font-size:.74rem; color:var(--tx3); }

/* ── Disclaimer ── */
#gtpl-page .gtpl-disclaimer{ margin-top:56px; }
#gtpl-page .gtpl-disclaimer p{ text-align:center; font-size:.68rem; line-height:1.5; color:var(--tx3); opacity:.5; font-style:italic; margin:0; }

/* ── Back to top ── */
.gtpl-top{
  position:fixed; right:22px; bottom:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gtpl-accent,#10b981); background:rgba(1,13,8,.85); color:var(--gtpl-accent,#34d399);
  font-size:1.2rem; cursor:pointer; opacity:0; transform:translateY(14px); transition:opacity .25s, transform .25s, background .2s;
  z-index:9998; backdrop-filter:blur(8px);
}
.gtpl-top.show{ opacity:1; transform:translateY(0); }
.gtpl-top:hover{ background:var(--gtpl-accent,#10b981); color:#021a12; }

/* ── Reveal ── */
#gtpl-page .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
#gtpl-page .reveal.in{ opacity:1; transform:none; }

@media (max-width:640px){
  #gtpl-page{ font-size:16px; }
  #gtpl-page .gtpl-cta-final{ flex-direction:column; text-align:center; padding:28px 22px; }
  #gtpl-page .gtpl-author{ flex-direction:column; align-items:center; text-align:center; }
  #gtpl-page .gtpl-author-row{ justify-content:center; }
  #gtpl-page .gtpl-step-n{ width:44px; height:44px; }
  #gtpl-page .gtpl-steps::before{ left:21px; }
}
@media (prefers-reduced-motion: reduce){
  #gtpl-page .reveal{ opacity:1; transform:none; transition:none; }
  #gtpl-page *{ animation:none!important; }
}