:root{
  /* Palette claire, derivee du logo : bleus du globe, vert du mot SPORTS.
     Le fond n'est pas un blanc pur — un blanc absolu eblouit sur ecran et
     fatigue a la lecture prolongee. Un blanc legerement bleute repose l'oeil
     tout en restant lumineux. */
  --bg:#f4f8fc;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7fafd;
  --line:#d8e4f0;
  --line-soft:#e8f0f8;
  --ink:#0f2033;
  --muted:#5a7189;
  --accent:#0a7ec0;
  --accent-2:#0aa5e8;
  --brand-green:#4ea82e;
  --gold:#c98a12;
  --ok:#1a7f4a;
  --warn:#b57a0d;
  --bad:#c92a3d;
  --radius:14px;
  --shadow:0 6px 22px rgba(15,32,51,.10);
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);min-height:100vh;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Deux halos colores tres diffus sur fond sombre : c'est ce qui donne de la
     profondeur sans image de fond, donc sans surcout de chargement. */
  background:
    radial-gradient(1200px 640px at 10% -10%, rgba(10,165,232,.13), transparent 62%),
    radial-gradient(900px 520px at 94% 2%, rgba(78,168,46,.10), transparent 58%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 40%);
  background-attachment:fixed}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.4rem;background:var(--panel);border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.5px}
.brand span{color:var(--accent)}
.topbar nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.wallet{background:#10242c;color:#6fd3f2;padding:.2rem .6rem;border-radius:999px;
  font-size:.85rem}
.cta{background:var(--accent);padding:.35rem .9rem;border-radius:6px}

main{max-width:1080px;margin:0 auto;padding:1.6rem 1.2rem 3rem}
h1{font-size:1.6rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.8rem 0 .7rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem}
.card h3{margin:.1rem 0 .4rem;font-size:1.02rem}
.card .meta{color:var(--muted);font-size:.85rem}

.badge{display:inline-block;padding:.12rem .5rem;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.03em}
.b-on{background:#0d2f1b;color:#4ade80}
.b-off{background:#2a2f36;color:var(--muted)}
.b-live{background:#3b0d12;color:#ff6b7a}
.b-minor{background:#3a1d05;color:#ffb454}

table{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);
  font-size:.92rem}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase}
tr:last-child td{border-bottom:none}

.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
  padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.92rem}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

form.inline{display:inline}
input,select,textarea{background:#fff;border:1px solid var(--line);
  color:var(--ink);padding:.5rem .65rem;border-radius:8px;width:100%;font-size:.95rem}
label{display:block;margin:.7rem 0 .25rem;color:var(--muted);font-size:.85rem}

.messages{max-width:1080px;margin:1rem auto 0;padding:0 1.2rem}
.msg{padding:.6rem .9rem;border-radius:8px;margin-bottom:.5rem;font-size:.92rem}
.msg-success{background:#e6f6ed;color:#166534;border:1px solid #b7e4c7}
.msg-error{background:#fdeaec;color:#9f1239;border:1px solid #f5c2c7}
.msg-warning{background:#fdf4e3;color:#8a5a00;border:1px solid #f2d9a0}
.msg-info{background:#e8f4fb;color:#0a5c8c;border:1px solid #bfe0f2}

.notice{background:#12202a;border-left:3px solid var(--accent);padding:.8rem 1rem;
  border-radius:6px;color:var(--muted);font-size:.9rem;margin:1rem 0}
.notice strong{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:1.4rem;text-align:center;
  color:var(--muted);font-size:.82rem}
.split{display:grid;gap:1.4rem;grid-template-columns:2fr 1fr}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.bar{height:8px;background:#0c1116;border-radius:999px;overflow:hidden;margin-top:.3rem}
.bar>i{display:block;height:100%;background:var(--accent)}

/* ---- Identité de marque ---- */
.brand-logo{display:inline-flex;align-items:center;gap:.55rem;line-height:1.05}
.brand-symbol{flex:0 0 auto;width:44px;height:44px;object-fit:contain}
.brand-words{display:flex;flex-direction:column}
.brand-name{font-weight:800;letter-spacing:.5px;font-size:1.05rem;color:var(--ink)}
.brand-name b{color:var(--brand-green);font-weight:800}
.brand-descriptor{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600}

/* Le descripteur est du TEXTE : il suit la langue, la longueur et la
   direction d'écriture sans qu'aucune image ne soit refaite. */
[dir="rtl"] .brand-logo{flex-direction:row-reverse}
[dir="rtl"] .brand-words{align-items:flex-end}
[dir="rtl"] .brand-descriptor{letter-spacing:normal}

.brand-sm .brand-symbol{width:28px;height:28px}
.brand-sm .brand-name{font-size:.9rem}
.brand-sm .brand-descriptor{font-size:.6rem}
.brand-lg .brand-symbol{width:72px;height:72px}
.brand-lg .brand-name{font-size:1.7rem}
.brand-lg .brand-descriptor{font-size:.8rem}

.brand-tagline{color:var(--muted);font-size:.82rem;letter-spacing:.06em}

/* =====================================================================
   Refonte visuelle
   ===================================================================== */

.topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);padding:.75rem 1.6rem;
  position:sticky;top:0;z-index:50}
.topbar nav a{color:var(--muted);font-size:.94rem;font-weight:500;
  padding:.35rem .1rem;border-bottom:2px solid transparent;transition:.16s}
.topbar nav a:hover{color:var(--ink);border-bottom-color:var(--accent);
  text-decoration:none}
.topbar nav a.cta,.cta{background:linear-gradient(135deg,var(--accent),#0876b8);
  color:#fff;padding:.5rem 1.15rem;border-radius:999px;font-weight:600;
  border:0;box-shadow:0 4px 14px rgba(10,165,232,.35)}
.topbar nav a.cta:hover{border-bottom-color:transparent;filter:brightness(1.12)}
.wallet{background:rgba(10,126,192,.10);color:var(--accent);
  border:1px solid rgba(10,165,232,.3)}

/* --- Bandeau d'accueil : le visuel de marque enfin utilise --- */
.hero{position:relative;overflow:hidden;border-radius:var(--radius);
  margin:0 0 2.2rem;padding:3.4rem 2rem;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(135deg,rgba(10,165,232,.16),rgba(126,217,87,.08)),
             var(--panel)}
.hero::after{content:"";position:absolute;inset:0;opacity:.20;
  background:url("/static/brand/symbol.webp") center right -60px/contain no-repeat;
  pointer-events:none}
.hero h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:0 0 .6rem;font-weight:800;
  letter-spacing:-.5px;position:relative}
.hero .lead{color:var(--muted);font-size:1.06rem;max-width:640px;
  margin:0 auto 1.5rem;position:relative}
.hero .actions{position:relative;display:flex;gap:.7rem;justify-content:center;
  flex-wrap:wrap}

h1{font-size:1.75rem;letter-spacing:-.4px}
h2{font-size:.78rem;letter-spacing:.14em;color:var(--muted);
  margin:2.4rem 0 1rem;font-weight:700;display:flex;align-items:center;gap:.8rem}
h2::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* --- Cartes : relief et reaction au survol --- */
.card{background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:rgba(10,165,232,.45);
  box-shadow:var(--shadow)}
.card h3{font-size:1.05rem;margin:.1rem 0 .5rem}
.card h3 a{background:linear-gradient(90deg,var(--ink),var(--accent-2));
  -webkit-background-clip:text;background-clip:text}
.grid{gap:1.15rem}

.notice{background:linear-gradient(135deg,rgba(10,165,232,.10),transparent);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:1rem 1.15rem;color:var(--muted)}
.notice strong{color:var(--ink)}

table{border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  border-color:var(--line)}
th{background:var(--panel-2);letter-spacing:.1em}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(10,126,192,.05)}

.btn{background:linear-gradient(135deg,var(--accent),#0876b8);
  border-radius:999px;padding:.55rem 1.25rem;font-weight:600;
  box-shadow:0 4px 14px rgba(10,165,232,.3);transition:.16s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.btn-ghost{background:transparent;border:1px solid var(--line);
  box-shadow:none;color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(10,165,232,.08)}

.badge{padding:.2rem .65rem;font-size:.72rem;letter-spacing:.04em}
.b-on{background:rgba(52,209,127,.16);color:var(--ok);
  border:1px solid rgba(52,209,127,.3)}
.b-live{background:rgba(255,107,122,.16);color:var(--bad);
  border:1px solid rgba(255,107,122,.35);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.62}}
.b-off{background:#eef3f8;color:var(--muted);
  border:1px solid var(--line)}
.b-minor{background:rgba(245,185,66,.16);color:var(--gold);
  border:1px solid rgba(245,185,66,.32)}

.bar{height:7px;background:#e3ecf5;border-radius:999px}
.bar>i{background:linear-gradient(90deg,var(--accent),var(--brand-green));
  box-shadow:0 0 12px rgba(10,165,232,.5)}

input,select,textarea{background:#fff;border-color:var(--line);color:var(--ink);
  border-radius:10px;padding:.6rem .8rem;transition:border-color .16s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,165,232,.15)}

footer{border-top:1px solid var(--line-soft);margin-top:4rem;padding:2.2rem 1.4rem;
  background:rgba(255,255,255,.6)}
.brand-tagline{color:var(--accent-2);letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;font-size:.76rem}

/* --- Tuiles de rubriques ---
   Les visuels de marque ne conviennent PAS en fond de tuile : chacun contient
   deja son propre logo et son propre texte, qui entrent en concurrence avec le
   titre. Un degrade sobre et un glyphe restent lisibles a toute taille. */
.tiles{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.2rem}
.tile{position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);padding:1.3rem 1.2rem;display:block;
  background:linear-gradient(150deg,var(--panel),var(--panel-2));
  transition:transform .2s,border-color .2s,box-shadow .2s}
.tile:hover{transform:translateY(-4px);border-color:rgba(10,165,232,.5);
  box-shadow:var(--shadow);text-decoration:none}
.tile::before{content:"";position:absolute;right:-14px;top:-14px;
  width:96px;height:96px;border-radius:50%;opacity:.16;
  background:radial-gradient(circle,var(--tile-color,var(--accent)),transparent 70%);
  transition:opacity .2s}
.tile:hover::before{opacity:.3}
.tile .glyph{font-size:1.6rem;line-height:1;display:block;margin-bottom:.6rem}
.tile span.label{display:block;font-weight:700;font-size:1.04rem;color:var(--ink)}
.tile small{display:block;color:var(--muted);font-size:.82rem;margin-top:.25rem}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--tile-color,var(--accent))}
.t-channels{--tile-color:var(--accent)}
.t-live{--tile-color:var(--bad)}
.t-sports{--tile-color:var(--brand-green)}
.t-culture{--tile-color:var(--gold)}

@media(max-width:640px){
  .hero{padding:2.2rem 1.2rem}
  .hero::after{opacity:.12}
  .topbar{padding:.6rem .9rem}
}

/* Deconnexion : bouton discret aligne sur les liens de navigation. */
.logout-form{display:inline}
.logout-btn{background:none;border:0;color:var(--muted);font:inherit;
  font-size:.94rem;cursor:pointer;padding:.35rem .1rem;
  border-bottom:2px solid transparent;transition:.16s}
.logout-btn:hover{color:var(--bad);border-bottom-color:var(--bad)}

/* --- Document juridique --- */
.legal-layout{display:grid;gap:2rem;grid-template-columns:260px 1fr;align-items:start}
.legal-toc{position:sticky;top:80px;max-height:calc(100vh - 110px);overflow-y:auto;
  list-style:none;padding:1rem;margin:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);font-size:.84rem}
.legal-toc li{margin:.1rem 0;list-style:none}
.legal-toc .toc-title{margin-top:.9rem;font-weight:700}
.legal-toc .toc-title a{color:var(--accent)}
.legal-toc .toc-article a{color:var(--muted);padding-left:.6rem;display:block}
.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:78ch}
.legal-body h2{font-size:1.05rem;color:var(--accent);text-transform:none;
  letter-spacing:0;margin-top:2.4rem;scroll-margin-top:80px}
.legal-body h2::after{display:none}
.legal-body h3{font-size:.98rem;margin:1.6rem 0 .5rem;scroll-margin-top:80px}
.legal-body p{margin:.7rem 0;line-height:1.7}
@media(max-width:860px){
  .legal-layout{grid-template-columns:1fr}
  .legal-toc{position:static;max-height:none}
}

/* Pied de page : liens et selecteur de langue */
.footer-links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:.9rem}
.footer-links a{color:var(--muted);font-size:.86rem}
.footer-links a:hover{color:var(--accent)}
.lang-picker{display:inline-block;margin-top:.4rem}
.lang-picker select{width:auto;font-size:.84rem;padding:.35rem .7rem;
  background:var(--panel);color:var(--muted)}

/* Bandeau de retour vers la plateforme d'origine */
.bridge-bar{display:flex;gap:1rem;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:.7rem 1.2rem;font-size:.9rem;
  background:linear-gradient(90deg,rgba(10,126,192,.12),rgba(78,168,46,.10));
  border-bottom:1px solid var(--line)}
.bridge-bar .btn-ghost{padding:.35rem 1rem;font-size:.86rem}

/* Bandeau d'ouverture */
.hero h1{line-height:1.15}
.hero-accent{background:linear-gradient(90deg,var(--accent),var(--brand-green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-call{position:relative;font-weight:600;letter-spacing:.02em;
  color:var(--accent);margin:.2rem auto 1.6rem;font-size:1.02rem}

/* --- Ecran d'ouverture ---
   Affiche seulement a l'accueil. Un visiteur arrivant par un lien partage
   vers une emission precise ne le traverse pas : il verrait un message de
   presentation au lieu du contenu qu'on lui a recommande. */
.splash{position:relative;overflow:hidden;border-radius:var(--radius);
  margin:0 0 2.4rem;padding:4rem 2rem 3rem;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(135deg,rgba(10,165,232,.14),rgba(126,217,87,.08)),
             var(--panel)}
.splash::after{content:"";position:absolute;inset:0;opacity:.18;
  background:url("/static/brand/symbol.webp") center right -80px/contain no-repeat;
  pointer-events:none}
.splash-inner{position:relative;max-width:760px;margin:0 auto}
.splash h1{font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.15;
  font-weight:800;letter-spacing:-.5px;margin:0 0 1.2rem}
.splash-lead{color:var(--muted);font-size:1.06rem;line-height:1.7;
  max-width:660px;margin:0 auto 1.4rem}
.splash-call{font-weight:700;font-size:1.1rem;color:var(--accent);
  letter-spacing:.01em;margin:0 0 1.8rem}
.splash .actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.splash-sign{margin-top:2rem;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:640px){
  .splash{padding:2.6rem 1.2rem 2rem}
  .splash::after{opacity:.10}
}

/* Contenu masque tant que l'ecran d'ouverture est affiche. La classe est
   posee par JavaScript : sans lui, le contenu reste visible et le lien vers
   l'ancre fait simplement defiler la page. */
.apres-ouverture.masque{display:none}