/* La coquille du site (20/10/2026) : ce qui entoure les pages et sert partout.
   Fichier servi par le site (gardé par le navigateur, adresse à empreinte) plutôt que collé dans
   chaque page, qui pèse déjà 500 à 700 Ko.
   1. La fenêtre de confirmation (`.cf`), qui remplace l'alerte du navigateur. Préfixe `cf-`.
   2. La navigation latérale (`.lateral`), le rail d'icônes à gauche. Préfixe `lat-`. */

/* --- 1. La fenêtre de confirmation ---------------------------------------------------------------
   Une question, une phrase au besoin, éventuellement un petit mot avec des réponses rapides, puis
   deux boutons : celui qu'on ne regrette pas (garder) à gauche, l'action à droite. Sur téléphone, elle
   monte du bas de l'écran comme une feuille, sous le pouce. */
dialog.cf { width: min(420px, calc(100% - 24px)); max-height: calc(100% - 32px); padding: 24px 22px 20px;
  border-radius: 22px; background: #0e1318; color: var(--texte, #e6edf3); text-align: center;
  border: 1px solid #2a323d; box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: auto; }
dialog.cf[open] { animation: cf-ouvre .24s cubic-bezier(.2,.8,.25,1); }
dialog.cf::backdrop { background: rgba(5,8,12,.74); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); }
@keyframes cf-ouvre { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.cf-icone { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 16px; margin: 0 0 12px; color: #a6e9bd; background: rgba(29,185,84,.14);
  box-shadow: inset 0 0 0 1px rgba(29,185,84,.35); }
.cf-icone .icone { width: 26px; height: 26px; }
dialog.cf.danger .cf-icone { color: #ff8f88; background: rgba(229,83,75,.14);
  box-shadow: inset 0 0 0 1px rgba(229,83,75,.4); }
.cf-titre { margin: 0 0 6px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cf-texte { margin: 0 auto 4px; max-width: 340px; font-size: 13.5px; line-height: 1.5; color: #9aa4b0; }
.cf-texte:empty { display: none; }
/* Le petit mot (refuser une offre) : des réponses qui le remplissent d'un toucher, puis le champ libre. */
.cf-champ { display: grid; gap: 10px; margin: 14px 0 2px; text-align: left; }
.cf-champ[hidden] { display: none; }
.cf-reponses { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-puce { height: 32px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
  color: #c9d1d9; background: rgba(255,255,255,.05); border: 1px solid #2f3945; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .15s, border-color .15s, color .15s; }
.cf-puce[aria-pressed="true"] { color: #fff; background: rgba(229,83,75,.18); border-color: rgba(229,83,75,.6); }
dialog.cf:not(.danger) .cf-puce[aria-pressed="true"] { background: rgba(29,185,84,.18); border-color: rgba(29,185,84,.6); }
.cf-saisie { position: relative; display: block; margin: 0; }
.cf-saisie input { width: 100%; height: 44px; padding: 0 56px 0 14px; border-radius: 12px; font: inherit;
  font-size: 16px; color: var(--texte, #e6edf3); background: #0a0e13; border: 1px solid #2f3945; box-sizing: border-box; }
.cf-saisie input:focus { outline: 2px solid var(--vert, #1db954); outline-offset: 1px; }
.cf-compte { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11.5px;
  color: #7d8793; font-variant-numeric: tabular-nums; pointer-events: none; }
.cf-compte.plein { color: #f0b46c; }
.cf-boutons { display: flex; gap: 10px; margin-top: 18px; }
.cf-boutons button { flex: 1 1 0; height: 46px; padding: 0 14px; border-radius: 999px; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; border: 0; min-width: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cf-non { color: var(--texte, #e6edf3); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px #3a4450; }
.cf-non:hover { background: rgba(255,255,255,.1); }
.cf-oui { color: #04120a; background: var(--vert, #1db954); }
.cf-oui:hover { filter: brightness(1.08); }
dialog.cf.danger .cf-oui { color: #fff; background: #d9423a; }
dialog.cf.danger .cf-oui:hover { background: #e5534b; filter: none; }
.cf-boutons button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) {
  dialog.cf { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  dialog.cf[open] { animation: cf-monte .26s cubic-bezier(.2,.8,.25,1); }
}
@keyframes cf-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.cf[open] { animation: none; }
}


/* --- 2. La navigation latérale (20/10/2026) ---------------------------------------------------------
   Un rail d'icônes à gauche, qui s'ouvre au survol et se range comme on le veut : épinglé (ouvert en
   permanence), compact (le rail, d'office) ou masqué (la souris au bord gauche le fait revenir). Sur
   téléphone, le même panneau glisse depuis la gauche, sous le bouton menu. Préfixe `lat-`.
   L'état vit sur <html data-nav="epingle|masque"> (rien : le rail) ; `--lat-pad` est la place que le
   contenu lui laisse. Les visiteurs et le back-office n'ont pas cette navigation (`body.avec-lateral`). */
html { --lat-rail: 64px; --lat-large: 248px; --lat-pad: var(--lat-rail); }
html[data-nav="epingle"] { --lat-pad: var(--lat-large); }
html[data-nav="masque"] { --lat-pad: 0px; }
.lateral, .lat-bord, .lat-voile, .lat-profil { display: none; }
body.avec-lateral .lateral { display: flex; }

.lateral { position: fixed; z-index: 9; top: var(--entete, 61px); bottom: 0; left: 0; width: var(--lat-rail);
  flex-direction: column; gap: 14px; padding: 12px 0; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none; background: #0b0f14; border-right: 1px solid var(--bord, #21262d);
  transition: width .2s cubic-bezier(.2,.8,.25,1), transform .26s cubic-bezier(.2,.8,.25,1), box-shadow .2s ease; }
.lateral::-webkit-scrollbar { display: none; }
.lat-liens { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.lat-lien { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px;
  border-radius: 12px; color: var(--doux, #8b949e); font-size: 14.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease; }
.lat-lien .icone { width: 20px; height: 20px; flex: none; }
.lat-lien:hover { background: rgba(255,255,255,.06); color: var(--texte, #e6edf3); }
/* La page où l'on est : un fond plus clair, le pictogramme en vert, une barre au bord, comme la
   playlist ouverte dans la bibliothèque de Spotify. */
.lat-lien.actif { background: rgba(255,255,255,.1); color: var(--texte, #e6edf3); }
.lat-lien.actif .icone { color: var(--vert, #1db954); }
.lat-lien.actif::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--vert, #1db954); }
.lat-lien:focus-visible, .lat-outil:focus-visible { outline: 2px solid var(--vert, #1db954); outline-offset: -2px; }
/* La pastille rouge garde sa forme ; elle se pose au coin du pictogramme. */
.lateral .pastille-nav { top: 8px; left: 28px; right: auto; }
.lateral .pastille-nav[hidden], .lateral .lat-lien.actif .pastille-nav { display: none; }
.lat-pied { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.lat-outil { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; height: 40px;
  padding: 0 12px; border-radius: 12px; color: var(--doux, #8b949e); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lat-outil:hover { background: rgba(255,255,255,.06); color: var(--texte, #e6edf3); }
.lat-outil[aria-pressed="true"] { color: var(--vert, #1db954); }
.lat-outil .icone { width: 18px; height: 18px; flex: none; }

/* La barre du haut, avec la navigation latérale : le logo, la série, la bourse, et le joueur. */
body.avec-lateral > header .barre { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 14px; }
body.avec-lateral > header .marque, body.avec-lateral > header .moi { order: 0; }
.nav-menu { all: unset; box-sizing: border-box; display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; color: var(--texte, #e6edf3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.nav-menu:hover { background: rgba(255,255,255,.07); }
.nav-menu:focus-visible { outline: 2px solid var(--vert, #1db954); outline-offset: 1px; }
.nav-menu .icone { width: 22px; height: 22px; }
body.avec-lateral .moi { margin-left: auto; gap: 14px; }
.profil-puce { display: inline-flex; align-items: center; gap: 9px; padding: 3px 12px 3px 3px; min-width: 0;
  border-radius: 999px; background: rgba(255,255,255,.04); transition: background .15s ease; }
.profil-puce:hover { background: rgba(255,255,255,.08); }
.profil-puce img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.pc-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.1; }
.pc-nom { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; }
.pc-niveau { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--doux, #8b949e); }
.pc-niveau b { font-weight: 700; letter-spacing: .02em; }
.pc-niveau .barre-niveau { width: 66px; height: 4px; }
.profil-bouton { font-size: 12.5px; font-weight: 600; color: var(--doux, #8b949e); padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--bord, #21262d); white-space: nowrap;
  transition: color .15s ease, border-color .15s ease; }
.profil-bouton:hover { color: var(--texte, #e6edf3); border-color: #3a4450; }

@media (min-width: 900px) {
  /* Le contenu laisse sa place au rail ; la barre du haut, elle, reste sur toute la largeur. */
  body.avec-lateral { padding-left: var(--lat-pad); }
  body.avec-lateral > header { margin-left: calc(-1 * var(--lat-pad)); }
  html[data-nav="epingle"] .lateral { width: var(--lat-large); }
  /* Ouvert au survol ou au clavier, PAR-DESSUS la page (épinglé, il la pousse déjà). */
  .lateral:hover, .lateral:focus-within, .lateral.ouvert { width: var(--lat-large);
    box-shadow: 26px 0 60px -34px rgba(0,0,0,.95); }
  html[data-nav="epingle"] .lateral { box-shadow: none; }
  html[data-nav="masque"] .lateral { transform: translateX(-102%); }
  html[data-nav="masque"] .lateral.ouvert, html[data-nav="masque"] .lateral:focus-within {
    transform: none; width: var(--lat-large); }
  /* Masqué : la souris tout à gauche le fait revenir, et le bouton menu le range de nouveau. */
  html[data-nav="masque"] .lat-bord { display: block; position: fixed; z-index: 8; left: 0;
    top: var(--entete, 61px); bottom: 0; width: 14px; }
  html[data-nav="masque"] .nav-menu { display: inline-flex; }
}
/* Un écran tactile large (tablette) n'a pas de survol : le menu y est ouvert d'office. */
@media (min-width: 900px) and (hover: none) {
  html:not([data-nav]) { --lat-pad: var(--lat-large); }
  html:not([data-nav]) .lateral { width: var(--lat-large); box-shadow: none; }
}

/* Téléphone : le panneau glisse depuis la gauche, sous le bouton menu ; la barre du haut ne garde que
   le logo, la série, la bourse et la photo (le nom, le niveau et « Mon profil » passent dans le panneau). */
@media (max-width: 899px) {
  body.avec-lateral > header .barre { padding: 9px 14px; gap: 10px; }
  .nav-menu { display: inline-flex; margin-left: -6px; }
  .moi .profil-bouton, .moi .pc-texte { display: none; }
  .moi .profil-puce { padding: 0; background: none; }
  .lateral { top: 0; z-index: 70; width: min(310px, 86vw); padding-top: 14px; gap: 10px;
    transform: translateX(-102%); }
  body.lat-ouvert .lateral { transform: none; box-shadow: 30px 0 80px rgba(0,0,0,.75); }
  .lat-voile { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(4,7,11,.62);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  body.lat-ouvert .lat-voile { opacity: 1; pointer-events: auto; }
  body.lat-ouvert { overflow: hidden; }
  .lat-profil { display: flex; padding: 4px 16px 10px; }
  .lat-profil .profil-puce { padding: 3px 14px 3px 3px; background: rgba(255,255,255,.05); }
  .lat-lien { height: 50px; font-size: 16px; }
  .lat-pied { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .lat-voile, .lat-lien { transition: none; }
}