:root{
  --page:#35aee8;
  --point:rgba(255,255,255,.28);
  --papier:#f3f8fc;
  --champ:#ffffff;
  --onglet:#35aee8;
  --onglet-survol:#62c4f3;
  --creux:#dcebf7;
  --survol:#e3f1fb;
  --encre:#14264a;
  --contour:#14264a;
  --ombre:#14264a;
  --pastille:#14264a;
  --pastille-hover:#243f73;
  --filet:#b5c7dc;
  --filet-pied:rgba(20,38,74,.5);
  --vert:#2a7d36;
  --rouille:#b5500d;
  --gris:#5a6b85;
}
/* mode sombre : mêmes variables, autres couleurs */
html[data-theme="dark"]{
  color-scheme:dark;
  --page:#0d1a33;
  --point:rgba(143,211,255,.10);
  --papier:#15284b;
  --champ:#1c3562;
  --onglet:#1f4f8f;
  --onglet-survol:#2b66b3;
  --creux:#223f73;
  --survol:#27497f;
  --encre:#e8f1fb;
  --contour:#6fa8dc;
  --ombre:#040a17;
  --pastille:#07112a;
  --pastille-hover:#12274f;
  --filet:#34507f;
  --filet-pied:rgba(143,211,255,.35);
  --vert:#74d68f;
  --rouille:#ffa566;
  --gris:#9db3d3;
}
*{box-sizing:border-box}
html{background:var(--page)}
body{
  margin:0;
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:16px;
  line-height:1.45;
  color:var(--encre);
  min-height:100vh;
  background:
    radial-gradient(circle at 1px 1px,var(--point) 1.5px,transparent 2px) 0 0/26px 26px,
    var(--page);
}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}

.haut{
  max-width:1120px;margin:0 auto;
  padding:22px 18px 0;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.mascotte{flex:none;width:124px}
.mascotte img{display:block;width:100%;height:auto;border:3px solid var(--contour);border-radius:16px;box-shadow:4px 4px 0 var(--ombre)}
.titre{display:flex;flex-direction:column;align-items:center}
.retour{display:inline-block;margin:0 0 16px;font-weight:bold;color:var(--encre);background:var(--champ);border:3px solid var(--contour);border-radius:10px;padding:8px 14px;box-shadow:3px 3px 0 var(--ombre);text-decoration:none}
.retour:hover{background:var(--survol)}
.petite-liste .outils{display:none}
h1{
  margin:0;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",Verdana,sans-serif;
  font-size:clamp(26px,6vw,46px);
  line-height:1.08;
  color:#fff;
  -webkit-text-stroke:0;
  text-shadow:
    -2px -2px 0 var(--ombre), 2px -2px 0 var(--ombre),
    -2px 2px 0 var(--ombre), 2px 2px 0 var(--ombre),
    0 3px 0 var(--ombre), 0 -3px 0 var(--ombre),
    3px 0 0 var(--ombre), -3px 0 0 var(--ombre),
    4px 5px 0 var(--ombre);
}
.bulle{
  display:block;
  background:var(--champ);
  border:3px solid var(--contour);
  border-radius:16px;
  padding:10px 22px;
  font-size:15px;
  box-shadow:3px 3px 0 var(--ombre);
  max-width:640px;
}


main{max-width:1120px;margin:0 auto;padding:22px 18px 30px}

.outils{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  margin-bottom:16px;
}
.outils label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--encre);font-weight:bold}
.outils .large{flex:1 1 220px}
.outils input,.outils select{
  font:inherit;font-weight:normal;color:var(--encre);
  background:var(--champ);
  border:3px solid var(--contour);
  border-radius:10px;
  padding:7px 10px;
  min-height:42px;
  box-shadow:3px 3px 0 var(--ombre);
}
.compte{margin-inline-start:auto;font-size:13px;color:var(--encre);padding-bottom:10px}

.tableau{
  list-style:none;margin:0;padding:6px 16px;
  background:var(--papier);
  border:3px solid var(--contour);
  border-radius:14px;
  box-shadow:6px 6px 0 var(--ombre);
}
.ligne{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:18px;
  align-items:center;
  padding:14px 0;
}
.ligne + .ligne{border-top:2px dashed var(--filet)}
.vignette{
  width:88px;height:88px;
  background:var(--creux);
  border:3px solid var(--contour);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.vignette img{width:100%;height:100%;object-fit:contain;display:block}
.corps{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.infos{min-width:0}
.nom{
  margin:0;font-size:20px;font-weight:bold;line-height:1.25;
  overflow-wrap:anywhere;
}
.prix{
  flex:none;
  background:var(--pastille);
  color:#fff;
  border-radius:999px;
  padding:3px 15px;
  font-weight:bold;
  font-size:21px;
  white-space:nowrap;
}
.prix small{font-size:inherit;font-weight:bold;margin-left:5px;color:#8fd3ff}
.droite{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:end}
.tendance{font-size:12px;font-weight:bold;line-height:1.3}
.tendance.hausse{color:var(--vert)}
.tendance.baisse{color:var(--rouille)}
.tendance.stable{color:var(--gris)}
.maj{font-size:14px;color:var(--gris);margin-top:2px}
.maj.frais{color:var(--vert)}
.maj.vieux{color:var(--rouille)}

.rien{padding:26px 6px;text-align:center;color:var(--gris)}

.pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.pages button{
  font:inherit;font-weight:bold;min-width:44px;min-height:44px;padding:6px 14px;
  color:var(--encre);background:var(--champ);border:3px solid var(--contour);border-radius:10px;
  box-shadow:3px 3px 0 var(--ombre);cursor:pointer;
}
.pages button[aria-current="page"]{background:var(--pastille);color:#fff}
.pages button:disabled{opacity:.45;cursor:default}
.pages button:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}



@media (max-width:520px){
  .haut{padding-top:16px}
  .ligne{grid-template-columns:56px 1fr;gap:10px}
  .vignette{width:56px;height:56px}
  .nom{font-size:15px}
  .prix{font-size:15px;padding:0 9px}
  .compte{margin-inline-start:0;padding-bottom:0}
}

/* mascotte cliquable */
a.mascotte{display:block;text-decoration:none}
a.mascotte img{transition:transform .12s,box-shadow .12s}
a.mascotte:hover img,a.mascotte:focus-visible img{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ombre)}

/* logos Discord et Twitch */
.haut{position:relative}
.reseaux{display:flex;align-items:center;gap:16px;padding-inline-end:12px;border-inline-end:2px solid var(--filet)}
.reseau{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:3px solid var(--contour);border-radius:12px;box-shadow:3px 3px 0 var(--ombre);transition:transform .12s,box-shadow .12s}
.reseau svg{width:26px;height:26px;fill:#fff}
.reseau.discord{background:#5865f2}
.reseau.twitch{background:#9146ff}
.reseau:hover,.reseau:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ombre)}

/* page des streamers */
.statut{background:var(--papier);border:3px solid var(--contour);border-radius:14px;box-shadow:6px 6px 0 var(--ombre);padding:22px;text-align:center;font-weight:bold}
.statut[hidden],.tableau[hidden]{display:none}
.flux .ligne{grid-template-columns:160px minmax(0,1fr)}
.miniature{display:block;width:160px;aspect-ratio:16/9;border:3px solid var(--contour);border-radius:10px;overflow:hidden;background:var(--creux)}
.miniature img{display:block;width:100%;height:100%;object-fit:cover}
.flux .nom a{color:var(--encre);text-decoration:none}
.flux .nom a:hover{text-decoration:underline}
.flux .maj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.centre{margin-top:20px;text-align:center}
@media (max-width:520px){
  .flux .ligne{grid-template-columns:104px minmax(0,1fr)}
  .miniature{width:104px}
  .flux .corps{flex-direction:column;align-items:stretch;gap:6px}
  .flux .prix{align-self:flex-start}
}
.note{margin:16px 0 0;font-size:13px;color:var(--encre);max-width:70ch}

/* lignes cliquables et fenêtre des cartes */
.ligne.cliquable{cursor:pointer;transition:background .12s}
.ligne.cliquable:hover{background:var(--survol)}
.nom-bouton{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit;cursor:pointer}
.nom-bouton:focus-visible{outline:none}
.ligne.cliquable:has(.nom-bouton:focus-visible){outline:3px solid var(--encre);outline-offset:-3px}
@supports not selector(:has(*)){.nom-bouton:focus-visible{outline:3px solid var(--encre);outline-offset:3px}}
.voir{display:inline-block;margin-top:4px;font-size:13px;font-weight:bold;text-decoration:underline;text-underline-offset:3px}
.fenetre{width:min(760px,92vw);max-height:88vh;padding:0;border:3px solid var(--contour);border-radius:16px;background:var(--papier);color:var(--encre);box-shadow:8px 8px 0 var(--ombre);overflow:hidden}
.fenetre::backdrop{background:rgba(20,38,74,.62)}
.fenetre-corps{padding:18px 20px 22px;max-height:calc(88vh - 6px);overflow:auto}
.fenetre-haut{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.fenetre-haut img{flex:none;width:56px;height:56px;object-fit:contain;background:var(--creux);border:3px solid var(--contour);border-radius:10px}
.fenetre-haut h2{flex:1;margin:0;font-family:"Arial Rounded MT Bold","Trebuchet MS",Verdana,sans-serif;font-size:26px;line-height:1.15}
.fermer{flex:none;width:46px;height:46px;font:inherit;font-size:30px;line-height:1;color:#fff;background:var(--pastille);border:3px solid var(--contour);border-radius:12px;cursor:pointer}
.fermer:hover{background:var(--pastille-hover)}
.fenetre-sous{margin:0 0 18px;color:var(--gris);font-size:14px}
.cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;justify-content:center}
.carte-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%;max-width:200px;justify-self:center}
.carte-item img{display:block;width:100%;height:auto;filter:drop-shadow(3px 3px 0 var(--ombre))}
.carte-nom{font-weight:bold;font-size:17px;overflow-wrap:anywhere}
body:has(dialog[open]){overflow:hidden}
@media (max-width:520px){.fenetre-haut h2{font-size:21px}.fenetre-corps{padding:14px 14px 18px}}
.carte-vide{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/3;padding:10px;text-align:center;font-weight:bold;color:var(--gris);border:3px dashed var(--gris);border-radius:14px}
.etoiles{display:inline-block;color:#e59a00;letter-spacing:.06em}
.reseau.retro{background:#fff url("data:image/png;base64,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") center / 40px auto no-repeat}

/* pied de page */
.pied{max-width:1120px;margin:14px auto 0;padding:22px 18px 36px;border-top:1px solid var(--filet-pied);text-align:center;color:var(--encre)}
.pied-note{margin:0 auto;max-width:640px;font-size:12.5px;line-height:1.7}

/* liens externes : petite pastille dans le coin, absente du bouton Twitch (page du site) */
.reseau{position:relative}
.reseau[target="_blank"]::after{content:"";position:absolute;inset-inline-end:-8px;bottom:-8px;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--pastille) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat}
.pied-haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;margin-bottom:14px;text-align:start}
.pied-copy{margin:0;font-size:14px}
.pied-liens{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.pied-liens a{color:var(--encre);text-underline-offset:3px}
@media (max-width:600px){.pied-haut{justify-content:center;text-align:center}.pied-liens{justify-content:center}}

/* pages légales */
.texte-legal{max-width:860px;background:var(--papier);border:3px solid var(--contour);border-radius:14px;box-shadow:6px 6px 0 var(--ombre);padding:24px 28px 28px;line-height:1.65}
.texte-legal h2{margin:26px 0 8px;font-size:19px}
.texte-legal h2:first-child{margin-top:0}
.texte-legal p{margin:0 0 10px}
.texte-legal a{color:var(--encre);text-underline-offset:3px}
.maj-legale{margin-top:22px !important;font-size:13px;color:var(--gris)}
.a-completer{background:#fff0a8;border-radius:4px;padding:0 4px;font-weight:bold}
@media (max-width:520px){.texte-legal{padding:18px 16px 22px}}
.colonne-legale{max-width:860px;margin:0 auto}

/* bouton de don (cœur) : dans la marge gauche sur grand écran, au-dessus de la mascotte sinon */
.reseau.don{background:#ffffff}
.reseau.don svg{width:28px;height:28px;fill:#e5384f}

/* formulaire de contact */
.formulaire{margin-top:6px}
.formulaire label{display:block;margin:0 0 5px;font-weight:bold}
.formulaire input:not([type=hidden]),.formulaire textarea{display:block;width:100%;font:inherit;color:var(--encre);background:var(--champ);border:3px solid var(--contour);border-radius:10px;padding:9px 12px;box-shadow:3px 3px 0 var(--ombre)}
.formulaire textarea{resize:vertical;min-height:140px}
.formulaire p{margin:0 0 16px}
.formulaire .note-form{font-size:13px;color:var(--gris)}
.cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.bouton{display:inline-block;text-decoration:none}
.texte-legal a.bouton{color:#fff}
.bouton{font:inherit;font-weight:bold;color:#fff;background:var(--pastille);border:3px solid var(--contour);border-radius:10px;padding:10px 24px;cursor:pointer;box-shadow:3px 3px 0 rgba(20,38,74,.35)}
.bouton:hover{background:var(--pastille-hover)}
.bouton:active{transform:translate(2px,2px);box-shadow:none}

/* sélecteur de langue */
.langue{position:relative;z-index:30}
.langue-bouton{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;font:inherit;color:var(--encre);background:var(--champ);border:3px solid var(--contour);border-radius:12px;box-shadow:3px 3px 0 var(--ombre);cursor:pointer}
.langue-bouton .chev{width:12px;height:12px;flex:none}
.drapeau{display:inline-block;flex:none;width:26px;height:17px;border:1px solid rgba(20,38,74,.4);border-radius:3px;overflow:hidden}
.drapeau svg{display:block;width:100%;height:100%}
.langue-liste{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:180px;margin:0;padding:6px;list-style:none;background:var(--champ);border:3px solid var(--contour);border-radius:12px;box-shadow:4px 4px 0 var(--ombre)}
.langue-liste[hidden]{display:none}
.langue-liste button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;font:inherit;font-size:16px;color:var(--encre);background:none;border:0;border-radius:8px;cursor:pointer;text-align:start}
.langue-liste button:hover,.langue-liste button[aria-pressed="true"]{background:var(--survol)}

/* prix toujours lus de gauche à droite, même en arabe */
.prix{direction:ltr;unicode-bidi:isolate}
.avis-langue{margin:0 0 14px;padding:10px 14px;font-weight:bold;background:var(--survol);border:2px solid var(--contour);border-radius:10px}

/* arabe : écriture de droite à gauche */
html[lang="ar"] body{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif}
html[lang="ar"] h1,html[lang="ar"] .fenetre-haut h2{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;font-weight:bold;line-height:1.3}
html[lang="ar"] .langue-liste button[lang="ar"]{letter-spacing:0}
html[dir="rtl"] .tendance{text-align:end}

/* carte trouvée par la recherche, formulaire anti-spam */
.trouve{margin-top:2px;font-size:13px;font-weight:bold}
.erreur-form{margin:0 0 14px !important;padding:10px 14px;font-weight:bold;color:#7a1f10;background:#ffe3dc;border:2px solid #b5500d;border-radius:10px}
.erreur-form[hidden]{display:none}
.bouton:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* bandeau du haut : logo et titre du site, onglets, liens externes, langue et thème */
.entete{position:relative;z-index:20;max-width:1120px;margin:0 auto;padding:16px 18px 0}
.bandeau{background:var(--papier);border:3px solid var(--contour);border-radius:16px;box-shadow:6px 6px 0 var(--ombre)}
.bandeau-in{padding-block:0;padding-inline:0 18px;min-height:108px;display:flex;align-items:center;gap:16px}
.marque{flex:none;align-self:stretch;display:flex;align-items:center;gap:14px;color:var(--encre);text-decoration:none}
.marque .mascotte{display:block;flex:none;align-self:stretch;width:108px}
.marque .mascotte img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-inline-end:3px solid var(--contour);border-start-start-radius:13px;border-end-start-radius:13px;border-start-end-radius:0;border-end-end-radius:0;box-shadow:none}
.marque:hover .mascotte img{filter:brightness(1.08)}
.marque-nom{display:block;flex:none;width:172px;line-height:0}
.logo-titre{display:block;width:100%;height:auto;overflow:visible;transition:transform .12s}
.marque:hover .logo-titre{transform:translate(-1px,-2px)}
.logo-titre text{font-family:"Arial Black","Arial Rounded MT Bold","Trebuchet MS",Verdana,sans-serif;font-weight:900}
.lg-ruban *{fill:var(--pastille);stroke:var(--contour);stroke-width:3;stroke-linejoin:round}
.lg-filet{fill:none;stroke:#8fd3ff;stroke-width:1.2;opacity:.6}
.lg-ombre{fill:var(--ombre);stroke:var(--ombre);stroke-width:7;stroke-linejoin:round}
.lg-haut{stroke:var(--ombre);stroke-width:7;stroke-linejoin:round;paint-order:stroke}
.lg-bas{fill:#fff}
.lg-etincelle{fill:#fff;stroke:var(--ombre);stroke-width:2;stroke-linejoin:round}
.onglets{flex:1;display:flex;justify-content:center;gap:12px}
.onglets a{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 124px;width:124px;min-height:44px;padding:0 6px;font-weight:bold;color:var(--encre);text-decoration:none;background:var(--champ);border:3px solid var(--contour);border-radius:12px;box-shadow:3px 3px 0 var(--ombre);transition:transform .12s,box-shadow .12s}
.onglets a:hover{background:var(--survol);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ombre)}
.onglets a[aria-current="page"]{background:var(--onglet)}
.onglets a[aria-current="page"] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.onglets svg{width:18px;height:18px;flex:none;fill:#9146ff}
.onglets a[aria-current="page"] svg{fill:#6d28d9}
.onglets a.onglet-image{color:#fff;font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.85),1px 1px 0 rgba(0,0,0,.6)}
.onglets a.onglet-gladia{background:linear-gradient(rgba(8,16,38,.55),rgba(8,16,38,.55)),url("images/gladiatrool.webp") center / cover no-repeat}
.onglets a.onglet-gladia:hover{background:linear-gradient(rgba(8,16,38,.44),rgba(8,16,38,.44)),url("images/gladiatrool.webp") center / cover no-repeat}
.onglets a.onglet-gladia[aria-current="page"]{background:linear-gradient(rgba(8,16,38,.34),rgba(8,16,38,.34)),url("images/gladiatrool.webp") center / cover no-repeat}
.onglets a.onglet-paquets{background:linear-gradient(rgba(8,16,38,.55),rgba(8,16,38,.55)),url("images/onglet-paquets.webp") center / cover no-repeat}
.onglets a.onglet-paquets:hover{background:linear-gradient(rgba(8,16,38,.44),rgba(8,16,38,.44)),url("images/onglet-paquets.webp") center / cover no-repeat}
.onglets a.onglet-paquets[aria-current="page"]{background:linear-gradient(rgba(8,16,38,.34),rgba(8,16,38,.34)),url("images/onglet-paquets.webp") center / cover no-repeat}
.bandeau-droite{flex:none;display:flex;align-items:center;gap:16px}
.theme-bouton{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;color:var(--encre);background:var(--champ);border:3px solid var(--contour);border-radius:12px;box-shadow:3px 3px 0 var(--ombre);cursor:pointer;transition:transform .12s,box-shadow .12s}
.theme-bouton:hover,.theme-bouton:focus-visible{background:var(--survol);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ombre)}
.bandeau .langue-bouton{background:var(--champ)}
.bandeau .langue-bouton:hover{background:var(--survol)}
.theme-bouton svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* champs de saisie et liste de tri : pas de cadre de focus en plus, l'ombre grossit seulement */
body input:focus-visible,body select:focus-visible,body textarea:focus-visible{outline:none;box-shadow:5px 5px 0 var(--ombre)}
.texte-legal.a-propos{max-width:760px;margin:24px auto 0;padding:10px 16px;border-width:2px;border-radius:12px;box-shadow:3px 3px 0 var(--ombre);font-size:12px;line-height:1.45}
.texte-legal.a-propos h2{margin:0 0 3px;font-size:12.5px;line-height:1.3}
.texte-legal.a-propos p{margin:0;font-size:12px;line-height:1.45}
.ligne-bulle{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}
.serveurs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.texte-legal.bientot{padding:56px 24px;text-align:center}
.texte-legal.bientot h2{margin:0;font-size:clamp(26px,5vw,40px);line-height:1.2}
.serveurs a{display:flex;align-items:center;min-height:40px;padding:0 16px;font-size:14px;font-weight:bold;color:var(--encre);text-decoration:none;background:var(--champ);border:3px solid var(--contour);border-radius:12px;box-shadow:3px 3px 0 var(--ombre);transition:transform .12s,box-shadow .12s}
.serveurs a:hover{background:var(--survol);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ombre)}
.serveurs a[aria-current="page"]{background:var(--pastille);color:#fff}
.serveurs a.onglet-marchand{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),1px 1px 0 rgba(0,0,0,.6);background:linear-gradient(rgba(8,16,38,.3),rgba(8,16,38,.3)),url("images/onglet-marchand.webp") center / cover no-repeat}
.serveurs a.onglet-marchand:hover{background:linear-gradient(rgba(8,16,38,.15),rgba(8,16,38,.15)),url("images/onglet-marchand.webp") center / cover no-repeat}
.serveurs a.onglet-marchand[aria-current="page"]{background:linear-gradient(rgba(8,16,38,.05),rgba(8,16,38,.05)),url("images/onglet-marchand.webp") center / cover no-repeat}
.sr-seul{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:1150px){
  .bandeau-in{flex-wrap:wrap;row-gap:14px;padding-block:0 14px;padding-inline:0 14px;min-height:0}
  .marque{align-self:flex-start}
  .marque .mascotte{align-self:auto;width:72px;height:72px}
  .marque-nom{width:150px}
  .marque{order:1}
  .bandeau-droite{order:2;margin-inline-start:auto}
  .onglets{order:3;flex:0 0 calc(100% - 14px);margin-inline-start:14px}
  .onglets a{flex:1 1 0;width:auto;min-width:0}
}
@media (max-width:700px){
  .marque-nom{display:none}
}
@media (max-width:520px){
  .entete{padding-top:12px}
  .bandeau-in{padding:10px 10px 12px}
  .marque{display:none}
  .onglets{flex:0 0 100%;margin-inline-start:0}
  .bandeau-droite{margin-inline-start:0;width:100%;justify-content:space-between;gap:10px}
  .reseaux{gap:12px;padding-inline-end:0;border-inline-end:0}
  .onglets{gap:8px}
  .onglets a{padding:0 6px;gap:6px;font-size:14px;white-space:nowrap}
  .onglets a.onglet-image{font-size:12.5px;letter-spacing:.04em}
}
@media (max-width:400px){
  .serveurs a{padding:0 10px;font-size:13px}
  .bandeau-in{padding:8px 6px 10px}
  .reseaux{gap:10px}
  .reseau,.theme-bouton{width:40px;height:40px}
  .langue-bouton{height:40px;padding:0 8px}
}
@media (max-width:360px){
  .onglets{gap:6px}
  .onglets a{padding:0 4px;font-size:13px}
  .onglets a.onglet-image{font-size:10px;letter-spacing:0}
  .onglets svg{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}