/* ============================================================
   IPTV Premium Official — iptvpremiumofficial.com
   Design system (crimson / near-black)
   ============================================================ */

:root{
  --ink:#f7f8f9;
  --slate-300:#c9ced6;
  --slate-500:#8e959f;
  --slate-600:#7b828d;
  --muted:#8e959f;
  --faint:#6f7681;

  --bg:#0a0a0b;
  --bg-2:#0e0e10;
  --surface:#141416;
  --surface-2:#1b1b1e;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);

  --crimson:#e11d2a;
  --crimson-500:#ef2b39;
  --crimson-400:#ff4d5a;
  --crimson-soft:rgba(225,29,42,.12);
  --crimson-border:rgba(225,29,42,.35);
  --emerald:#34d399;
  --amber:#fbbf24;

  --accent:var(--crimson);
  --accent-400:var(--crimson-400);
  --grad:linear-gradient(135deg,#ef2b39,#c11020);
  --grad-text:linear-gradient(100deg,#ff5b67 0%,#e11d2a 100%);
  --glow:0 0 0 1px rgba(225,29,42,.35), 0 22px 52px rgba(225,29,42,.28);

  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --shadow-md:0 14px 34px rgba(0,0,0,.45);
  --shadow-lg:0 26px 64px rgba(0,0,0,.55);

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;

  --space-5:1.25rem; --space-6:2rem; --space-7:4rem; --space-8:6rem;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--slate-300); font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; color:var(--ink); line-height:1.12; margin:0 0 .6rem; letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.2rem); margin-bottom:1.2rem}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 1.4rem}
.section{padding:var(--space-8) 0}
.text-grad{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.text-red{color:var(--crimson-400)}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:1rem; top:1rem; z-index:999; background:var(--surface); padding:.6rem 1rem; border-radius:8px; color:var(--ink)}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:.85rem 1.7rem; border-radius:999px; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .2s, border-color .2s; white-space:nowrap}
.btn svg{width:16px; height:16px}
.btn--primary{background:var(--grad); color:#fff; box-shadow:0 12px 30px rgba(225,29,42,.42)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(225,29,42,.55)}
.btn--ghost{background:var(--surface-2); color:var(--ink); border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface); border-color:var(--crimson-border)}
.btn--lg{padding:1rem 2.1rem; font-size:1.02rem}
.btn--block{width:100%}

/* ---------- EYEBROW ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson-400); background:#08080a; border:1px solid rgba(225,29,42,.3); padding:.45rem 1rem; border-radius:999px; margin-bottom:1.4rem}
.eyebrow__icon{width:14px; height:14px; flex-shrink:0}
/* Drapeau tricolore en CSS : l'emoji 🇫🇷 s'affiche "FR" sur Windows */
.flag-fr{display:inline-flex; width:19px; height:13px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.2); flex-shrink:0}
.flag-fr i{flex:1}
.flag-fr .b{background:#0055a4}
.flag-fr .w{background:#fff}
.flag-fr .r{background:#ef4135}

/* ---------- HEADER ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(10,10,11,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--border)}
.site-header .container{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.brand{display:inline-flex; align-items:center; gap:.55rem; flex:1 1 0; min-width:0}
.brand__logo{--logo-h:40px; height:var(--logo-h); width:auto; border-radius:8px; flex-shrink:0}
.site-footer .brand__logo{--logo-h:34px}
.mobile-nav__head .brand__logo{--logo-h:32px}
.brand__text{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.brand__text i{font-style:normal; color:var(--slate-500); font-weight:600}
.nav{display:flex; gap:.2rem; margin:0 auto; flex-shrink:0}
.nav a{font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--slate-500); padding:.5rem .8rem; border-radius:8px; transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.header-actions{display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex:1 1 0}
.nav-toggle{display:none; background:none; border:0; color:var(--ink); padding:.4rem}
.nav-toggle svg,.nav-close svg{width:26px; height:26px}
.mobile-nav{position:fixed; inset:0; z-index:80; background:rgba(10,10,11,.72); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .25s}
.mobile-nav.is-open{opacity:1; pointer-events:auto}
.mobile-nav__panel{position:absolute; right:0; top:0; height:100%; width:min(340px,86vw); background:var(--bg-2); border-left:1px solid var(--border); padding:1.4rem; display:flex; flex-direction:column; gap:.3rem; transform:translateX(100%); transition:transform .28s}
.mobile-nav.is-open .mobile-nav__panel{transform:none}
.mobile-nav__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.mobile-nav__panel a:not(.btn){font-family:var(--font-display); font-weight:600; color:var(--slate-300); padding:.75rem .5rem; border-radius:10px}
.mobile-nav__panel a:not(.btn):hover{background:var(--surface); color:var(--ink)}
.nav-close{background:none; border:0; color:var(--ink)}

/* ---------- FOND SIGNATURE ---------- */
.hero,.cta-final{position:relative; overflow:hidden}
.hero::before,.cta-final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(118deg, transparent 0 64px, rgba(255,255,255,.022) 64px 65px),
    radial-gradient(760px 620px at -6% 6%, rgba(225,29,42,.26), transparent 62%),
    radial-gradient(620px 480px at 104% 88%, rgba(225,29,42,.14), transparent 62%);
}
.hero .container,.cta-final .container{position:relative}

/* ---------- HERO ---------- */
.hero{padding:var(--space-8) 0 var(--space-7); text-align:center}
.hero__lead{font-size:clamp(1.05rem,2vw,1.25rem); color:var(--muted); max-width:660px; margin:0 auto 2rem}
.hero__cta{display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-bottom:2.6rem}
.trust-chips{display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-bottom:3.4rem}
.trust-chip{display:flex; align-items:center; gap:.75rem; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.75rem 1.15rem; text-align:left}
.trust-chip .ic{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:var(--crimson-soft); color:var(--crimson-400); flex-shrink:0}
.trust-chip svg{width:17px; height:17px}
.trust-chip strong{display:block; font-family:var(--font-display); font-size:.9rem; color:var(--ink); line-height:1.3}
.trust-chip span{font-size:.78rem; color:var(--slate-600)}
.stats-label{font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:1.5rem}
.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:920px; margin:0 auto}
.hero-stat{min-width:0}
.hero-stat strong{display:block; font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,2.35rem); font-weight:700; color:var(--crimson-400); line-height:1.1; white-space:nowrap}
.hero-stat span{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

/* ---------- SECTION HEAD ---------- */
.section-head{text-align:center; max-width:640px; margin:0 auto 3rem}
.section-head .eyebrow{margin-bottom:1rem}
.section-head h2{font-size:clamp(1.9rem,4vw,2.9rem)}
.section-head p{color:var(--muted)}

/* ---------- ETAPES ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem 1.6rem 2.1rem; overflow:hidden; text-align:left; transition:transform .2s, border-color .2s}
.step:hover{transform:translateY(-4px); border-color:var(--crimson-border)}
/* Chiffre cale a gauche, icone centree sur la meme ligne */
.step__n{position:absolute; top:1.1rem; left:1.6rem; font-family:var(--font-display); font-size:3.6rem; font-weight:700; color:rgba(255,255,255,.14); line-height:1; pointer-events:none}
.step .ic{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--crimson-soft); border:1px solid var(--crimson-border); color:var(--crimson-400); margin:0 auto 1.6rem}
.step .ic svg{width:23px; height:23px}
.step h3{font-size:1.08rem; margin-bottom:.5rem}
.step p{font-size:.9rem; color:var(--slate-500); margin:0}

/* ---------- PERFORMANCE ---------- */
.perf-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center}
.perf-intro{color:var(--slate-500); margin-bottom:2rem}
.perf-list{display:flex; flex-direction:column; gap:1.6rem; margin-bottom:2rem}
.perf-item{display:flex; gap:1rem}
.ic-chip{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:var(--crimson-soft); border:1px solid var(--crimson-border); color:var(--crimson-400); flex-shrink:0}
.ic-chip svg{width:20px; height:20px}
.perf-item strong{display:block; font-family:var(--font-display); font-size:1rem; color:var(--ink); margin-bottom:.3rem}
.perf-item p{font-size:.95rem; color:var(--slate-500); margin:0}
.perf-cta{display:inline-block; font-family:var(--font-display); font-weight:700; color:var(--crimson-400); margin-bottom:.4rem}
.perf-cta:hover{text-decoration:underline}
.perf-note{font-size:.9rem; color:var(--faint)}
.perf-stats{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.perf-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem 1.4rem; text-align:center; min-width:0}
.perf-stat .ic-chip{margin:0 auto 1rem}
.perf-stat__num{display:block; font-family:var(--font-display); font-size:1.75rem; font-weight:700; color:var(--crimson-400); line-height:1.1; white-space:nowrap}
.perf-stat__label{font-size:.82rem; color:var(--slate-600)}

/* ---------- TARIFS ---------- */
.toggle-wrap{text-align:center}
.pricing-toggle{display:inline-flex; gap:4px; padding:5px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; margin:0 auto 2.6rem}
.pricing-toggle button{border:0; background:transparent; font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--slate-600); padding:.6rem 1.3rem; border-radius:999px; transition:all .2s; white-space:nowrap}
.pricing-toggle button[aria-selected="true"]{background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(225,29,42,.4)}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.pricing-grid[hidden]{display:none !important}
.price-card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem 1.7rem; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s}
.price-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}
.price-card--featured{border-color:var(--crimson); background:linear-gradient(180deg, rgba(225,29,42,.10), var(--surface)); box-shadow:var(--glow); transform:translateY(-12px); z-index:1}
.price-card--featured:hover{transform:translateY(-18px); box-shadow:var(--glow), var(--shadow-md)}
.price-card--featured::before{content:"Le plus populaire"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; padding:.35rem 1rem; border-radius:999px; white-space:nowrap; box-shadow:0 6px 18px rgba(225,29,42,.5)}
.price-card__term{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--ink); margin-bottom:.7rem}
.price-card__save{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--crimson-400); background:var(--crimson-soft); border:1px solid var(--crimson-border); padding:.2rem .55rem; border-radius:999px}
.price-card__price{display:flex; align-items:flex-start; gap:.12rem; font-family:var(--font-display); margin-bottom:.35rem}
.price-card__price .currency{font-size:1.45rem; font-weight:700; color:var(--slate-500); margin-top:.5rem}
.price-card__price .amount{font-size:3rem; font-weight:700; color:var(--ink); line-height:1}
.price-card__note{font-size:.88rem; color:var(--faint); margin-bottom:1.4rem}
.price-card__features{list-style:none; padding:0; margin:0 0 1.7rem; display:flex; flex-direction:column; gap:.65rem}
.price-card__features li{display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--slate-300)}
.price-card__features svg{width:17px; height:17px; color:var(--crimson-400); flex-shrink:0; margin-top:.2rem}
.price-card .btn{margin-top:auto}
.pay-methods{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--border); text-align:center}
.pay-methods>span{display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:.6rem}
.pay-methods .methods{display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap}
.pay-methods .methods span{font-size:.7rem; font-weight:600; color:var(--slate-500); background:var(--surface-2); border:1px solid var(--border); padding:.2rem .55rem; border-radius:6px}
.compare-note{max-width:620px; margin:2.8rem auto 0; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.4rem; font-size:.93rem; color:var(--slate-500)}
.compare-note b{color:var(--ink)}

/* ---------- FONCTIONNALITES ---------- */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem 1.5rem; transition:transform .2s, border-color .2s}
.feature-card:hover{transform:translateY(-4px); border-color:var(--crimson-border)}
.feature-card .ic-chip{margin-bottom:1.2rem}
.feature-card h3{font-size:1.05rem; margin-bottom:.55rem}
.feature-card p{font-size:.9rem; color:var(--slate-500); margin:0}

/* ---------- APPAREILS ---------- */
.device-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.device-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem 1rem; text-align:center; transition:transform .2s, border-color .2s}
.device-card:hover{transform:translateY(-4px); border-color:var(--crimson-border)}
.device-card .ic-chip{margin:0 auto .9rem}
.device-card strong{display:block; font-family:var(--font-display); font-size:.92rem; color:var(--ink); line-height:1.3}
.device-card span{font-size:.78rem; color:var(--faint)}

/* ---------- AVIS ---------- */
.rating-bar{display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.15rem 1.9rem; margin-bottom:2.6rem; text-align:center}
.rating-bar__score,.rating-bar__sat{padding:0 1.5rem}
.rating-bar__score strong,.rating-bar__sat strong{display:block; font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--crimson-400); line-height:1.05; white-space:nowrap}
.rating-bar__sat strong{color:var(--emerald)}
.rating-bar__score span{display:block; font-size:.78rem; color:var(--faint); margin-top:.15rem}
.rating-bar__sat span{display:block; font-size:.78rem; color:var(--slate-600); margin-top:.15rem}
.rating-bar__mid{padding:0 1.6rem; border-left:1px solid var(--border); border-right:1px solid var(--border)}
.rating-bar__stars{color:var(--amber); font-size:1.1rem; letter-spacing:.16em; line-height:1; margin-bottom:.4rem}
.rating-bar__mid p{font-size:.85rem; color:var(--slate-500); margin:0; white-space:nowrap}
.rating-bar__mid p b{color:var(--ink); font-weight:700}
.review-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem 1.5rem; height:100%; display:flex; flex-direction:column; text-align:left}
.review-card__head{display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem}
.review-card__avatar{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; background:var(--grad); color:#fff; font-family:var(--font-display); font-weight:700; flex-shrink:0}
.review-card__who strong{display:block; font-family:var(--font-display); font-size:.95rem; color:var(--ink); line-height:1.3}
.review-card__who span{font-size:.78rem; color:var(--faint)}
.review-card__stars{color:var(--amber); font-size:.9rem; letter-spacing:.08em; margin-bottom:.7rem}
.review-card p{font-size:.93rem; color:var(--slate-300); margin:0 0 1.1rem}
.review-card__tag{align-self:flex-start; margin-top:auto; font-size:.72rem; font-weight:600; color:var(--crimson-400); background:var(--crimson-soft); border:1px solid var(--crimson-border); padding:.25rem .7rem; border-radius:999px}
.reviews-empty{max-width:620px; margin:0 auto; text-align:center; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:2.8rem 1.8rem}
.reviews-empty p{color:var(--slate-500); max-width:440px; margin:0 auto 1.4rem}

/* ---------- CARROUSEL ---------- */
.card-scroller{display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - .94rem); gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:.4rem; scrollbar-width:none}
.card-scroller::-webkit-scrollbar{display:none}
.card-scroller>*{scroll-snap-align:start}
.scroller-nav{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2rem}
.scroller-nav button{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); transition:background .2s, border-color .2s}
.scroller-nav button:hover{background:var(--surface-2); border-color:var(--crimson-border)}
.scroller-nav button svg{width:18px; height:18px}
.scroller-dots{display:flex; align-items:center; gap:.4rem}
.scroller-dots i{display:block; width:7px; height:7px; border-radius:999px; background:var(--border-strong); cursor:pointer; transition:width .25s, background .25s}
.scroller-dots i:hover{background:var(--crimson-border)}
.scroller-dots i.is-active{width:22px; background:var(--crimson); cursor:default}

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:.7rem}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s}
.faq-item[aria-expanded="true"]{border-color:var(--crimson-border)}
.faq-item__q{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; background:none; border:0; padding:1.15rem 1.35rem; font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--ink)}
.faq-item__q .icon{display:inline-flex; color:var(--crimson-400); flex-shrink:0; transition:transform .25s}
.faq-item__q .icon svg{width:18px; height:18px}
.faq-item[aria-expanded="true"] .faq-item__q .icon{transform:rotate(45deg)}
.faq-item__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease}
.faq-item[aria-expanded="true"] .faq-item__a{grid-template-rows:1fr}
.faq-item__a-inner{overflow:hidden; padding:0 1.35rem}
.faq-item[aria-expanded="true"] .faq-item__a-inner{padding-bottom:1.2rem}
.faq-item__a-inner p{font-size:.95rem; color:var(--slate-500); margin:0}

/* ---------- CTA FINAL ---------- */
.cta-final{padding:var(--space-8) 0}
.cta-box{position:relative; text-align:center; background:linear-gradient(160deg, rgba(225,29,42,.16), rgba(20,20,22,.9)); border:1px solid var(--crimson-border); border-radius:26px; padding:3.4rem 2rem; box-shadow:var(--glow)}
.cta-box p{max-width:520px; margin:0 auto 2rem; color:var(--slate-300)}
.cta-box .hero__cta{margin-bottom:0}

/* ---------- FIL D'ARIANE ---------- */
.breadcrumbs{padding-top:var(--space-5)}
.breadcrumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; padding:0; margin:0; font-size:.84rem; color:var(--faint)}
.breadcrumbs a{color:var(--slate-500)}
.breadcrumbs a:hover{color:var(--crimson-400)}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-left:.5rem; color:var(--faint); opacity:.6}
.breadcrumbs [aria-current="page"]{color:var(--ink)}

/* ---------- PAGES TEXTE / LEGALES ---------- */
.page-head{max-width:820px; margin:0 auto var(--space-6); text-align:center}
.page-head h1{font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:.8rem}
.page-head p{color:var(--muted); margin:0}
.page-updated{display:inline-block; margin-top:1rem; font-size:.8rem; color:var(--faint); background:var(--surface); border:1px solid var(--border); padding:.35rem .9rem; border-radius:999px}
.legal{max-width:820px; margin:0 auto}
.legal section{margin-bottom:2.6rem}
.legal h2{font-size:1.4rem; margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--border)}
.legal h3{font-size:1.05rem; margin:1.6rem 0 .5rem; color:var(--crimson-400)}
.legal p{color:var(--slate-300); margin-bottom:1rem}
.legal ul,.legal ol{padding-left:1.3rem; margin:0 0 1.2rem; display:flex; flex-direction:column; gap:.55rem}
.legal li{color:var(--slate-300)}
.legal li::marker{color:var(--crimson-400)}
.legal strong{color:var(--ink)}
.legal a:not(.btn){color:var(--crimson-400); text-decoration:underline; text-underline-offset:3px}
.legal a.btn{text-decoration:none}
.legal-callout{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--crimson); border-radius:var(--radius); padding:1.2rem 1.4rem; margin:0 0 1.4rem}
.legal-callout p:last-child{margin-bottom:0}
.legal-contact{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem 1.6rem; text-align:center; margin-top:var(--space-6)}
.legal-contact p{color:var(--muted)}

/* ---------- BLOG ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.blog-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; height:100%; transition:transform .2s, border-color .2s}
.blog-card[hidden]{display:none !important}
.blog-card:hover{transform:translateY(-4px); border-color:var(--crimson-border)}
.blog-card__media{display:block; aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--grad)}
.blog-card__media::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(122deg,transparent 0 22px,rgba(0,0,0,.12) 22px 23px)}
.blog-card__media svg{position:absolute; inset:0; margin:auto; width:50px; height:50px; color:rgba(255,255,255,.9); z-index:1}
.blog-card__media img{position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block}
.blog-card__body{padding:1.3rem; display:flex; flex-direction:column; flex:1}
.blog-card__toprow{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
.blog-card__cat{font-size:.7rem; font-weight:700; color:var(--crimson-400); background:var(--crimson-soft); border:1px solid var(--crimson-border); padding:.2rem .6rem; border-radius:999px}
.blog-card__read{display:inline-flex; align-items:center; gap:.3rem; font-size:.76rem; color:var(--faint)}
.blog-card__read svg{width:13px; height:13px}
.blog-card h2,.blog-card h3{font-size:1.1rem; line-height:1.35; margin-bottom:.5rem}
.blog-card h2 a:hover,.blog-card h3 a:hover{color:var(--crimson-400)}
.blog-card p{font-size:.88rem; color:var(--slate-500); margin:0 0 1.1rem}
.blog-card__meta{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.9rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--faint)}
.blog-card__meta a{color:var(--crimson-400); font-weight:600}
.blog-empty{max-width:620px; margin:0 auto; text-align:center; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:3.2rem 1.8rem}
.blog-empty .ic-chip{margin:0 auto 1.4rem; width:52px; height:52px; border-radius:14px}
.blog-empty .ic-chip svg{width:26px; height:26px}
.blog-empty h2{font-size:1.35rem; margin-bottom:.7rem}
.blog-empty p{color:var(--muted); max-width:440px; margin:0 auto 1.6rem}

/* ---------- PAGINATION ---------- */
.pagination{display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:2.8rem; flex-wrap:wrap}
.pagination:empty{display:none}
.pagination button{min-width:44px; height:44px; padding:0 .85rem; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1; transition:background .2s, border-color .2s, transform .15s}
.pagination button:hover:not(:disabled):not(.active){background:var(--surface-2); border-color:var(--crimson-border); transform:translateY(-1px)}
.pagination button.active{background:var(--grad); border-color:var(--crimson); color:#fff}
.pagination button:disabled{opacity:.4; cursor:not-allowed}
.pagination button:focus-visible{outline:2px solid var(--crimson-400); outline-offset:2px}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- COMPARATIF ---------- */
.compare{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-md)}
.compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare table{width:100%; min-width:660px; border-collapse:collapse; text-align:left}
.compare th,.compare td{padding:1.05rem 1.4rem; vertical-align:middle; border-bottom:1px solid var(--border)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--ink); background:var(--surface-2); letter-spacing:-.01em; white-space:nowrap}
.compare tbody th{font-family:var(--font-display); font-weight:700; font-size:.94rem; color:var(--ink); width:34%}
.compare td{font-size:.94rem; color:var(--slate-500)}
.compare tbody tr:nth-child(even) th,.compare tbody tr:nth-child(even) td{background:rgba(255,255,255,.016)}

/* Colonne mise en avant */
.compare .col-us{background:linear-gradient(180deg,rgba(225,29,42,.10),rgba(225,29,42,.045)); border-left:1px solid var(--crimson-border); border-right:1px solid var(--crimson-border)}
.compare thead .col-us{color:var(--crimson-400); background:linear-gradient(180deg,rgba(225,29,42,.20),rgba(225,29,42,.09))}
.compare tbody .col-us{color:var(--ink); font-weight:600}
.compare tbody tr:nth-child(even) .col-us{background:linear-gradient(180deg,rgba(225,29,42,.13),rgba(225,29,42,.065))}
.compare tbody tr:last-child .col-us{border-bottom:1px solid var(--crimson-border)}

.compare td small{display:block; margin-top:.22rem; font-size:.86em; color:var(--faint); font-weight:400}
.compare .cell{display:inline-flex; align-items:center; gap:.55rem}
.compare .cell svg{width:15px; height:15px; flex-shrink:0}
.compare .yes svg{color:var(--emerald)}
.compare .no svg{color:var(--slate-600); opacity:.75}
.compare-savings{max-width:720px; margin:1.6rem auto 0; padding:1.05rem 1.4rem; border:1px dashed var(--crimson-border); border-radius:var(--radius); background:rgba(225,29,42,.05); text-align:center; font-size:.9rem; color:var(--slate-500)}
.compare-savings strong{color:var(--crimson-400)}


@media (max-width:820px){
  /* Le tableau tient entierement dans l'ecran : plus de defilement horizontal */
  .compare table{min-width:0}
  .compare th,.compare td{padding:.85rem .8rem}
  .compare thead th{font-size:.82rem; white-space:normal; line-height:1.3}
  .compare tbody th{font-size:.84rem; width:30%}
  .compare td{font-size:.82rem}
  .compare .cell{align-items:flex-start; gap:.4rem}
  .compare .cell svg{width:13px; height:13px; margin-top:.2rem}
}
@media (max-width:520px){
  .compare th,.compare td{padding:.75rem .55rem}
  .compare thead th{font-size:.72rem}
  .compare tbody th{font-size:.74rem; width:28%}
  .compare td{font-size:.72rem}
  .compare .cell{gap:.3rem}
  .compare .cell svg{width:11px; height:11px; margin-top:.22rem}
}
@media (max-width:380px){
  .compare th,.compare td{padding:.65rem .4rem}
  .compare thead th{font-size:.66rem}
  .compare tbody th{font-size:.68rem}
  .compare td{font-size:.66rem}
}

/* ---------- ARTICLE ---------- */
.article-wrap{max-width:820px; margin:0 auto}
.article-head{margin-bottom:var(--space-6)}
.article-head h1{font-size:clamp(1.9rem,4.2vw,3rem); margin-bottom:1rem}
.article-lead{font-size:1.08rem; color:var(--muted); margin-bottom:1.4rem}
.article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.1rem; font-size:.82rem; color:var(--faint); padding-bottom:1.4rem; border-bottom:1px solid var(--border)}
.article-meta span{display:inline-flex; align-items:center; gap:.4rem}
.article-meta svg{width:14px; height:14px; color:var(--crimson-400)}
.article-cover{margin:0 0 var(--space-6); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--grad); aspect-ratio:16/9; position:relative}
.article-cover img{width:100%; height:100%; object-fit:cover; display:block}
.article-cover figcaption{position:absolute; inset:auto 0 0 0; padding:.7rem 1rem; font-size:.78rem; color:rgba(255,255,255,.9); background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}

.toc{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--crimson); border-radius:var(--radius); padding:1.3rem 1.5rem; margin:0 0 var(--space-6)}
.toc h2{font-size:.82rem; font-family:var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--crimson-400); border:0; padding:0; margin:0 0 .8rem}
.toc ol{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem}
.toc a{color:var(--slate-300); font-size:.92rem}
.toc a:hover{color:var(--crimson-400); text-decoration:underline; text-underline-offset:3px}
.toc li::marker{color:var(--crimson-400); font-weight:700}

.key-points{background:linear-gradient(180deg,rgba(225,29,42,.09),rgba(225,29,42,.03)); border:1px solid var(--crimson-border); border-radius:var(--radius-lg); padding:1.5rem 1.6rem; margin:0 0 var(--space-6)}
.key-points h2{font-size:1rem; border:0; padding:0; margin:0 0 .9rem; color:var(--ink)}
.key-points ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
.key-points li{display:block; position:relative; padding-left:1.65rem; font-size:.94rem; line-height:1.55; color:var(--slate-300)}
.key-points svg{position:absolute; left:0; top:.28em; width:16px; height:16px; color:var(--emerald)}

.article-cta{background:var(--surface); border:1px solid var(--crimson-border); border-radius:var(--radius-lg); padding:1.9rem 1.6rem; text-align:center; margin:var(--space-6) 0}
.article-cta h2{font-size:1.3rem; border:0; padding:0; margin:0 0 .6rem}
.article-cta p{color:var(--muted); max-width:520px; margin:0 auto 1.4rem}

.article-faq{margin-top:var(--space-6)}
.article-faq > h2{margin-bottom:1.4rem}

.article-nav{display:flex; flex-wrap:wrap; gap:1rem; margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--border)}
.article-nav a{flex:1 1 240px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem; transition:border-color .2s}
.article-nav a:hover{border-color:var(--crimson-border)}
.article-nav small{display:block; font-size:.74rem; color:var(--faint); margin-bottom:.25rem}
.article-nav strong{font-family:var(--font-display); font-size:.94rem; color:var(--ink)}

/* .legal a:not(.btn) souligne tous les liens : on l'annule sur les composants
   de navigation, qui ne sont pas des liens de texte courant. */
.article-wrap .toc a{color:var(--slate-300); text-decoration:none}
.article-wrap .toc a:hover{color:var(--crimson-400); text-decoration:underline; text-underline-offset:3px}
.article-wrap .article-nav a{color:inherit; text-decoration:none}
.article-wrap .breadcrumbs a{text-decoration:none}

/* ---------- APERCU BLOG (accueil) ---------- */
.blog-teaser .card-scroller{grid-auto-columns:calc(33.333% - .94rem)}
@media (max-width:1000px){ .blog-teaser .card-scroller{grid-auto-columns:calc(50% - .7rem)} }
@media (max-width:560px){ .blog-teaser .card-scroller{grid-auto-columns:85%} }

/* ---------- MODAL ---------- */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(5,5,6,.8); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s}
.modal.is-open{opacity:1; visibility:visible}
.modal[hidden]{display:none !important}
.modal__panel{width:100%; max-width:460px; text-align:center; background:var(--surface); border:1px solid var(--border-strong); border-radius:22px; padding:2.4rem 2rem 1.8rem; box-shadow:0 30px 80px rgba(0,0,0,.65); transform:translateY(12px) scale(.97); transition:transform .26s cubic-bezier(.2,.8,.3,1); max-height:calc(100vh - 2.4rem); overflow-y:auto}
.modal.is-open .modal__panel{transform:none}
.modal__check{display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:999px; margin-bottom:1.2rem; background:rgba(16,110,74,.5); border:1px solid rgba(52,211,153,.35); color:var(--emerald)}
.modal__check svg{width:30px; height:30px}
.modal__title{font-size:1.32rem; margin-bottom:1.1rem}
.modal__plan{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); background:var(--surface-2); border:1px solid var(--border-strong); padding:.65rem 1.4rem; border-radius:999px; margin-bottom:1.2rem}
.modal__text{font-size:.95rem; color:var(--slate-500); max-width:340px; margin:0 auto 1.6rem}
.modal__cta{display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; background:var(--grad); padding:1rem 1.6rem; border-radius:999px; border:0; box-shadow:0 14px 32px rgba(225,29,42,.45); transition:transform .18s, box-shadow .18s}
.modal__cta:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(225,29,42,.55)}
.modal__cta svg{width:20px; height:20px; flex-shrink:0}
.modal__dismiss{display:inline-block; margin-top:1.1rem; background:none; border:0; font-size:.88rem; color:var(--faint); transition:color .2s}
.modal__dismiss:hover{color:var(--ink); text-decoration:underline}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg-2); border-top:1px solid var(--border); padding:var(--space-7) 0 2rem}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:2.4rem}
.footer-about p{font-size:.9rem; color:var(--slate-500); margin:1rem 0}
.footer-tags{display:flex; flex-wrap:wrap; gap:.4rem}
.footer-tags span{font-size:.72rem; font-weight:600; color:var(--slate-500); background:var(--surface); border:1px solid var(--border); padding:.25rem .65rem; border-radius:999px}
.footer-col h4{font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:1.1rem}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
.footer-col a{font-size:.9rem; color:var(--slate-500); transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-contact{display:flex; flex-direction:column; gap:.8rem}
.footer-contact a{display:inline-flex; align-items:center; gap:.6rem; font-size:.9rem}
.footer-contact .ic{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:var(--crimson-soft); color:var(--crimson-400); flex-shrink:0}
.footer-contact svg{width:16px; height:16px}
.footer-legal-note{margin:2.6rem 0 1.4rem; padding-top:1.6rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--faint); line-height:1.65}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--faint)}
.footer-bottom nav{display:flex; gap:1.2rem; flex-wrap:wrap}
.footer-bottom a:hover{color:var(--ink)}

/* ---------- WHATSAPP ---------- */
.wa-float{position:fixed; right:1.1rem; bottom:1.1rem; z-index:70; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; background:#25d366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.4); transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:29px; height:29px}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .device-grid{grid-template-columns:repeat(3,1fr)}
  .perf-grid{grid-template-columns:1fr; gap:2.6rem}
  .perf-stats{max-width:480px; margin:0 auto}
  .perf-copy{text-align:center}
  .perf-copy .eyebrow{justify-content:center}
  .perf-intro{max-width:620px; margin-left:auto; margin-right:auto}
  .perf-item{flex-direction:column; align-items:center; gap:.75rem}
  .perf-item .ic-chip{margin:0 auto}
  .steps{grid-template-columns:1fr; max-width:440px; margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr; gap:2rem}
  .footer-about{grid-column:1 / -1}
  .card-scroller{grid-auto-columns:calc(50% - .7rem)}
}
@media (max-width:820px){
  .nav,.header-actions .btn{display:none}
  .nav-toggle{display:inline-flex}
  .pricing-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto}
  .blog-grid{grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto}
  .price-card--featured{transform:none; margin-top:.6rem}
  .price-card--featured:hover{transform:translateY(-5px)}
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:1.6rem}
  .card-scroller{grid-auto-columns:85%}
  .scroller-nav{gap:.7rem; margin-top:1.6rem}
  .scroller-nav button{width:38px; height:38px}
  .scroller-nav button svg{width:16px; height:16px}
  .scroller-dots{gap:.35rem}
  .rating-bar{padding:1rem 1.1rem}
  .rating-bar__score,.rating-bar__sat{padding:0 .8rem}
  .rating-bar__score strong,.rating-bar__sat strong{font-size:1.7rem}
  .rating-bar__mid{padding:0 .9rem}
  .rating-bar__mid p{white-space:normal}
}
@media (max-width:560px){
  body{font-size:16px}
  .section,.hero,.cta-final{padding:var(--space-7) 0}
  .features-grid{grid-template-columns:1fr}
  /* Les appareils restent sur 2 colonnes, comme sur atlastv.uk */
  .device-grid{grid-template-columns:1fr 1fr; gap:.8rem}
  .device-card{padding:1.3rem .7rem}
  .device-card strong{font-size:.88rem}
  .device-card span{font-size:.74rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
  .trust-chips{flex-direction:column; align-items:stretch}
  .cta-box{padding:2.4rem 1.3rem}
  .eyebrow{white-space:nowrap; font-size:clamp(.52rem,2.4vw,.72rem); letter-spacing:.04em; gap:.35rem; padding:.42rem .8rem}
  .eyebrow .flag-fr{width:15px; height:10px}
  .brand__logo{--logo-h:34px}
  .brand__text{font-size:1.02rem}
  .pricing-toggle{display:flex; width:100%; max-width:380px; gap:2px; padding:4px}
  .pricing-toggle button{flex:1 1 0; min-width:0; padding:.6rem .35rem; font-size:.8rem}
  .perf-stat{padding:1.5rem .9rem}
  .perf-stat__num{font-size:1.5rem}
  .hero-stat strong{font-size:clamp(1.35rem,7vw,1.9rem)}
  .rating-bar{width:100%; max-width:420px; padding:.9rem .5rem}
  .rating-bar__score,.rating-bar__sat{padding:0 .45rem; flex:0 0 auto}
  .rating-bar__score strong,.rating-bar__sat strong{font-size:1.45rem}
  .rating-bar__mid{padding:0 .6rem; flex:1 1 auto; min-width:0}
  .rating-bar__mid p{font-size:.68rem; line-height:1.35}
  .modal__panel{padding:2rem 1.4rem 1.5rem}
}
@media (max-width:360px){
  .pricing-toggle button{padding:.55rem .2rem; font-size:.72rem}
  .rating-bar__score strong,.rating-bar__sat strong{font-size:1.25rem}
}