/* ============================================================================
   RCF — HUB EN LIGNE ET ÉCRAN AMIS
   ONLINE 3 (structure) · ONLINE 3.1 (habillage)
   ----------------------------------------------------------------------------
   LE REPROCHE, ET LA RÉPONSE. En 3.0 l'écran était fonctionnel et terne :
   des cartes plates sur un aplat sombre, une interface technique. Ce lot ne
   touche à aucune règle — il donne à Online un décor, une hiérarchie et une
   matière.

   LE FOND VIENT DU JEU. `assets/backgrounds/ambience/montage-01.webp` : une
   travée d'atelier RCF, déjà livrée avec le jeu et déjà utilisée par
   l'Academy. Aucun asset n'est créé, aucune image n'est téléchargée. Elle a
   été retenue sur trois critères mesurés parmi les 50 ambiances disponibles :
     · c'est la plus SOMBRE du lot (luminance moyenne 87/255, et 64 dans le
       quart haut, là où se posent le titre et le pseudo) ;
     · elle est au format 1:2 (768×1536), celui de la scène 9:16 du jeu, donc
       cadrée sans déformation ni recadrage hasardeux ;
     · elle pèse 137 Ko — le hub reste léger sur téléphone (§10).

   POURQUOI LE VOILE EST LÉGER. Une première maquette à 90 % d'opacité rendait
   l'image invisible : on retombait exactement sur l'écran terne qu'on voulait
   corriger. Le voile démarre donc à 44 % en haut — on VOIT l'atelier — et se
   ferme à 80 % en bas. La lisibilité ne vient pas de l'écrasement de l'image
   mais des panneaux posés dessus : c'est la même méthode que l'écran Quêtes
   (`.q5-bg` / `.q5-veil`), et elle a déjà fait ses preuves ici.

   PIÈGE DE CHEMIN, DÉJÀ PAYÉ DANS CE PROJET. Un `url()` écrit dans une
   feuille de style se résout par rapport à LA FEUILLE, pas par rapport au
   document — d'où le `../../`. C'est documenté en tête de
   `themes/theme-rcf-living/ambience.js`, et c'est pour cela que le fond est
   déclaré ici plutôt que posé en style inline depuis le JS.
   ============================================================================ */

#scOnline{ padding:0!important; background:var(--floor)!important }

#scOnline .o3-wrap, #scDuels .o3-wrap{
  height:100%;
  overflow-y:auto; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;          /* les calques négatifs restent DANS l'écran */
  background:transparent;
  /* CE QUI SERT DE RÉFÉRENCE À LA MISE EN PAGE, C'EST CETTE BOÎTE-LÀ. Voir
     le bloc « écrans » en fin de fichier : la largeur de la fenêtre ne dit
     rien de la place disponible dans RCF. */
  container-type:inline-size;
  container-name:o3;
}

/* ------------------------------------------------------------- le décor */
.o3-bg{
  position:fixed; inset:0; z-index:-3;
  background:url('../../assets/backgrounds/ambience/montage-01.webp') center 38%/cover no-repeat;
  /* Désaturer un peu et refroidir : l'atelier d'origine est très blanc, on
     l'amène vers le bleu nuit de RCF sans le repeindre. */
  filter:saturate(.72) brightness(.60) contrast(1.04);
}
.o3-veil{
  position:fixed; inset:0; z-index:-2;
  background:
    /* halo jaune très dilué en haut à droite : une lumière d'atelier, pas un
       effet. C'est lui qui réchauffe l'écran. */
    radial-gradient(120% 60% at 82% 6%, rgba(255,189,25,.16), rgba(255,189,25,0) 58%),
    linear-gradient(180deg,
      rgba(4,13,22,.44) 0%,
      rgba(4,13,22,.62) 32%,
      rgba(5,15,25,.80) 68%,
      rgba(6,17,28,.94) 100%);
}
/* L'écran Amis est fait pour LIRE des listes : même décor, voile plus fermé.
   La classe est posée sur le CONTENEUR par le JS. Un sélecteur de fratrie
   (`.o3-shell--amis ~ .o3-veil`) ne marcherait pas : le voile est écrit AVANT
   la coque, et `~` ne remonte pas. */
#onlineStage.o3-wrap--amis .o3-veil{
  background:
    radial-gradient(120% 50% at 82% 4%, rgba(255,189,25,.10), rgba(255,189,25,0) 55%),
    linear-gradient(180deg, rgba(4,13,22,.62), rgba(6,17,28,.93) 46%, rgba(6,17,28,.97));
}

.o3-shell{ position:relative; min-height:100% }

/* ------------------------------------------------------------- l'en-tête */
.o3-hero{
  position:relative;
  padding:calc(14px + var(--rcf-safe-t, 0px)) 16px 16px;
  border-bottom:1px solid rgba(142,177,209,.16);
  /* Une ligne jaune sous l'en-tête : la signature RCF, discrète. */
  box-shadow:0 1px 0 rgba(255,189,25,.18);
}
.o3-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px }

.o3-retour,.o3-refresh{
  flex:0 0 auto; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(142,177,209,.30); border-radius:11px;
  background:rgba(9,24,39,.66); color:var(--dim);
  font-size:20px; line-height:1; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.o3-refresh svg{ width:18px; height:18px }
.o3-retour:hover,.o3-refresh:hover{
  color:var(--ink); border-color:rgba(255,189,25,.55); background:rgba(14,34,54,.8);
}
.o3-retour:active,.o3-refresh:active{ transform:translateY(1px) }
.o3-refresh--vide{ border-color:transparent; background:none; cursor:default }

.o3-titre{
  flex:1 1 auto; margin:0;
  font-family:"Oswald",system-ui,sans-serif;
  font-size:23px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.o3-sub{
  margin:0; max-width:34ch;
  font-size:12.5px; line-height:1.5; color:rgba(233,241,248,.74);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}

/* --------------------------------------------------- la plaque du joueur */
.o3-joueur{
  display:flex; align-items:center; gap:11px;
  margin:0 0 14px; padding:11px 12px;
  border:1px solid rgba(142,177,209,.22); border-radius:14px;
  background:linear-gradient(135deg, rgba(16,36,58,.80), rgba(8,22,37,.72));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
.o3-joueur-av{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellowgrad); color:#2a1c00;
  font-family:"Oswald",system-ui,sans-serif; font-size:19px; font-weight:700;
  box-shadow:0 0 18px rgba(255,189,25,.30);
}
.o3-joueur-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px }
.o3-joueur-txt i{
  font-style:normal; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint);
}
.o3-joueur-txt b{
  font-family:"Oswald",system-ui,sans-serif; font-size:16px; font-weight:600;
  color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.o3-stats{ flex:0 0 auto; display:flex; gap:7px }
.o3-stat{
  min-width:46px; padding:4px 8px; border-radius:10px; text-align:center;
  border:1px solid rgba(142,177,209,.20); background:rgba(6,17,28,.55);
  display:flex; flex-direction:column; gap:1px;
}
.o3-stat b{ font-family:"Oswald",system-ui,sans-serif; font-size:16px; color:var(--ink) }
.o3-stat i{ font-style:normal; font-size:9px; letter-spacing:.06em; color:var(--faint) }
/* Des demandes en attente : le chiffre s'allume. */
.o3-stat--vif{ border-color:rgba(255,189,25,.50); background:rgba(255,189,25,.10) }
.o3-stat--vif b{ color:var(--hivis) }
.o3-stat--vif i{ color:rgba(255,189,25,.78) }

/* -------------------------------------------------------------- le corps */
.o3-corps{ padding:14px 16px calc(28px + var(--rcf-safe-b, 0px)) }

/* -------------------------------------------------------- les trois cartes */
.o3-cards{ display:flex; flex-direction:column; gap:11px }

.o3-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:13px; width:100%;
  padding:15px 14px; min-height:78px;
  border:1px solid rgba(142,177,209,.24); border-radius:16px;
  background:linear-gradient(135deg, rgba(17,39,62,.78), rgba(7,20,34,.74));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  text-align:left; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Le halo : un noyau de lumière au coin de la carte, découpé par
   `overflow:hidden`. C'est ce qui donne la profondeur sans ajouter d'image. */
.o3-card-glow{
  position:absolute; top:-45%; right:-18%; width:62%; height:170%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,189,25,.20), rgba(255,189,25,0) 68%);
  transition:opacity .22s ease;
}

/* La carte Amis est la seule disponible : elle est plus haute, plus éclairée,
   et son bord gauche porte l'accent jaune. Elle se distingue d'un coup d'œil
   des deux à venir. */
.o3-card--amis{
  /* 104 px, et pas 92 : la description de « Duels » passe à deux lignes et la
     carte à venir devenait alors PLUS HAUTE que la seule disponible, ce qui
     inversait exactement la hiérarchie voulue. Mesuré, pas supposé — la
     recette compare les deux hauteurs à chaque exécution. */
  min-height:104px;
  border-color:rgba(255,189,25,.34);
  background:linear-gradient(135deg, rgba(26,52,78,.84), rgba(9,24,40,.78));
  box-shadow:0 12px 30px rgba(0,0,0,.44), 0 0 0 1px rgba(255,189,25,.06),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.o3-card--amis::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--yellowgrad);
  box-shadow:0 0 14px rgba(255,189,25,.55);
}
.o3-card--on:hover{
  transform:translateY(-2px);
  border-color:rgba(255,189,25,.60);
  box-shadow:0 16px 34px rgba(0,0,0,.50), 0 0 0 1px rgba(255,189,25,.14);
}
.o3-card--on:hover .o3-card-glow{ opacity:1.35 }
/* Retour tactile : sur mobile il n'y a pas de survol, seulement l'appui. */
.o3-card--on:active{ transform:translateY(0) scale(.988) }

/* Une carte à venir garde sa matière — elle n'est pas grisée à mort — mais
   perd son halo, son accent et tout signe d'interactivité. */
.o3-card--soon{
  cursor:default; opacity:.86;
  border-color:rgba(142,177,209,.16);
  background:linear-gradient(135deg, rgba(12,28,46,.62), rgba(6,17,28,.62));
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}
.o3-card--soon .o3-card-glow{ opacity:.35 }
.o3-card--duel .o3-card-ic{ color:var(--orange) }
.o3-card--tour .o3-card-ic{ color:var(--cyan) }

/* L'icône s'aligne sur la PREMIÈRE ligne de texte, pas sur le centre du
   bloc : sur une carte dont la description passe à deux lignes, une icône
   centrée se retrouve en face du vide entre le titre et la description. */
.o3-card{ align-items:flex-start }
.o3-card-ic{ flex:0 0 auto; width:30px; height:30px; margin-top:1px; color:var(--hivis) }
.o3-card-ic svg{ width:30px; height:30px; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) }
.o3-card--soon .o3-card-ic{ opacity:.72 }

.o3-card-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px }
.o3-card-txt b{
  font-family:"Oswald",system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
}
.o3-card-txt i{ font-style:normal; font-size:12px; color:rgba(197,210,223,.82) }
.o3-cta{
  margin-top:3px; font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--hivis);
}
.o3-cta span{ margin-left:2px }

.o3-soon{
  flex:0 0 auto; align-self:flex-start;
  font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(197,210,223,.72);
  border:1px solid rgba(142,177,209,.30); border-radius:99px; padding:4px 9px;
  background:rgba(6,17,28,.55);
}
/* Le seul point rouge de l'écran : la seule chose qui attend une réponse. */
.o3-badge{
  flex:0 0 auto; min-width:24px; height:24px; padding:0 7px;
  display:flex; align-items:center; justify-content:center;
  border-radius:99px; background:var(--red); color:#2a0208;
  font-size:13px; font-weight:800;
  box-shadow:0 0 16px rgba(255,100,115,.55);
}
.o3-note{
  margin:13px 0 0; font-size:12px; color:var(--hivis);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

/* --------------------------------------------------- les panneaux (Amis) */
/* Chaque section est une plaque : c'est elle qui porte la lisibilité, pas un
   assombrissement du fond. */
.o3-panneau{
  padding:13px 13px 14px;
  border:1px solid rgba(142,177,209,.20); border-radius:15px;
  background:linear-gradient(180deg, rgba(13,31,50,.80), rgba(7,19,32,.80));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 8px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.o3-panneau--ajout{ border-color:rgba(255,189,25,.26) }
/* Des demandes à traiter : la plaque se signale. */
.o3-panneau--vif{ border-color:rgba(255,189,25,.40) }

.o3-sec{ margin:0 0 13px }
.o3-sec-t{
  margin:0 0 10px;
  font-family:"Oswald",system-ui,sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--hivis);
  display:flex; align-items:center; gap:8px;
}
.o3-pill{
  font-family:system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink); background:rgba(255,189,25,.14);
  border:1px solid rgba(255,189,25,.34); border-radius:99px; padding:1px 8px;
}
.o3-sec-vide{ margin:0; font-size:12px; color:var(--faint); line-height:1.55 }

.o3-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }

.o3-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; min-height:50px;
  border:1px solid rgba(142,177,209,.16); border-radius:12px;
  background:rgba(6,17,28,.50);
  transition:border-color .16s ease, background .16s ease;
}
.o3-row:hover{ border-color:rgba(142,177,209,.34); background:rgba(10,26,42,.62) }
.o3-list--res .o3-row{ border-color:rgba(255,189,25,.16) }

.o3-av{
  flex:0 0 auto; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(40,74,108,.95), rgba(14,34,54,.95));
  color:var(--hivis);
  font-family:"Oswald",system-ui,sans-serif; font-size:15px; font-weight:600;
  border:1px solid rgba(142,177,209,.22);
}
/* Un pseudo long se coupe plutôt que de pousser les boutons hors de l'écran :
   c'est cette règle qui tient la mise en page à 375 px. */
.o3-nom{
  flex:1 1 auto; min-width:0;
  font-size:14px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.o3-act{ flex:0 0 auto; display:flex; align-items:center; gap:6px }

/* -------------------------------------------------------------- boutons */
.o3-btn{
  min-height:36px; padding:0 13px;
  border:1px solid rgba(142,177,209,.30); border-radius:10px;
  background:rgba(16,36,58,.75); color:var(--dim);
  font-size:12px; font-weight:600; letter-spacing:.04em; cursor:pointer;
  white-space:nowrap;
  transition:transform .14s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.o3-btn:hover{ color:var(--ink); border-color:rgba(142,177,209,.58); background:rgba(22,46,72,.85) }
.o3-btn:active{ transform:scale(.97) }
.o3-btn:disabled{ opacity:.45; cursor:default; transform:none }

/* L'action qu'on vient faire : pleine, jaune, impossible à manquer. */
.o3-btn--fort{
  background:var(--yellowgrad); color:#2a1c00; border-color:rgba(217,146,0,.9);
  box-shadow:0 3px 12px rgba(255,189,25,.26);
}
.o3-btn--fort:hover{ color:#2a1c00; filter:brightness(1.07); background:var(--yellowgrad) }
/* Refuser, annuler : présents, lisibles, sans crier. */
.o3-btn--doux{ background:rgba(6,17,28,.55); color:var(--faint) }
.o3-btn--doux:hover{ color:var(--dim); background:rgba(12,28,46,.7) }
/* Retirer un ami : discret par défaut, identifiable dès qu'on l'approche. */
.o3-btn--danger{ background:rgba(6,17,28,.50); color:rgba(197,210,223,.70) }
.o3-btn--danger:hover{
  color:var(--red); border-color:rgba(255,100,115,.65); background:rgba(40,12,18,.55);
}

/* Les états : un mot, un signe, une couleur — jamais la couleur seule (§9). */
.o3-etat{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; white-space:nowrap;
  padding:5px 9px; border-radius:99px;
  border:1px solid rgba(142,177,209,.22); background:rgba(6,17,28,.5);
  color:var(--faint);
}
.o3-etat--ami{ color:var(--green); border-color:rgba(69,211,148,.34) }
.o3-etat--envoye{ color:rgba(197,210,223,.82) }
.o3-etat--recu{ color:var(--hivis); border-color:rgba(255,189,25,.40) }

/* ------------------------------------------------------------- recherche */
.o3-search{ display:flex; gap:8px; margin:0 0 11px }
.o3-input{
  flex:1 1 auto; min-width:0;
  min-height:44px; padding:0 14px;
  border:1px solid rgba(142,177,209,.30); border-radius:12px;
  background:rgba(4,13,22,.68); color:var(--ink);
  font-size:15px;  /* 15 px au minimum : en dessous, iOS zoome à la mise au point */
  transition:border-color .16s ease, box-shadow .16s ease;
}
.o3-input::placeholder{ color:var(--faint) }
.o3-input:focus{
  outline:none; border-color:rgba(255,189,25,.66);
  box-shadow:0 0 0 3px rgba(255,189,25,.14);
}
.o3-search .o3-btn{ min-height:44px; padding:0 15px }

/* --------------------------------------------------------------- messages */
.o3-msg{
  margin:0 0 12px; font-size:12px; color:var(--dim); line-height:1.55;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.o3-msg--grave{
  color:var(--orange);
  padding:9px 11px; border-radius:11px;
  border:1px solid rgba(255,142,75,.34); background:rgba(40,20,8,.5);
  text-shadow:none;
}

/* ----------------------------------------------------- l'écran d'un invité */
.o3-vide{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:13px; padding:26px 18px 28px;
}
.o3-vide-ic{ width:44px; height:44px; color:var(--hivis); opacity:.85 }
.o3-vide-ic svg{ width:44px; height:44px; display:block;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.6)) }
.o3-vide-t{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink); max-width:30ch }
.o3-vide-s{ margin:0; font-size:12px; line-height:1.6; color:var(--faint); max-width:34ch }
.o3-vide .o3-btn{ min-height:44px; padding:0 20px; font-size:13px }

/* --------------------------------------------------------------- apparition */
/* Une seule transition d'entrée, courte, sans boucle : l'écran se pose, il
   ne s'anime pas. */
@keyframes o3Entree{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.o3-joueur,.o3-cards,.o3-sec,.o3-vide{ animation:o3Entree .26s ease both }
.o3-cards{ animation-delay:.04s }
.o3-sec:nth-of-type(2){ animation-delay:.04s }
.o3-sec:nth-of-type(3){ animation-delay:.07s }
.o3-sec:nth-of-type(4){ animation-delay:.10s }

@media (prefers-reduced-motion:reduce){
  .o3-joueur,.o3-cards,.o3-sec,.o3-vide{ animation:none }
  .o3-card,.o3-btn,.o3-row,.o3-retour,.o3-refresh{ transition:none }
}

/* ----------------------------------------------------------------- écrans */
/* UN PIÈGE MESURÉ, PAS DEVINÉ.
   Première version : `@media (min-width:620px)`. Sur un écran 1280×860 elle
   passait les trois cartes côte à côte… dans une scène large de 484 px, où
   elles devenaient illisibles et où l'étiquette « Prochainement » recouvrait
   l'icône.

   La raison : RCF joue dans une scène 9:16 lettreboxée. Sa largeur ne suit
   pas celle de la FENÊTRE, elle suit sa HAUTEUR. Mesures relevées :

     fenêtre  375 × 812  → scène 375 px
     fenêtre 1280 × 860  → scène 484 px   ← la media query se déclenchait ici
     fenêtre  768 ×1024  → scène 576 px
     fenêtre 1600 ×1200  → scène 675 px   ← la seule où trois colonnes tiennent

   On interroge donc la boîte réelle, pas la fenêtre. Un navigateur sans
   `@container` garde la colonne unique : c'est la mise en page mobile, qui
   est parfaitement lisible — une dégradation, pas une casse. */
@container o3 (min-width:600px){
  .o3-hero{ padding-left:26px; padding-right:26px }
  .o3-corps{ padding-left:26px; padding-right:26px }
  .o3-sub{ max-width:52ch }

  .o3-cards{ flex-direction:row; align-items:stretch; gap:13px }
  .o3-card{
    flex:1 1 0; min-width:0;
    flex-direction:column; align-items:flex-start;
    min-height:190px; padding:16px 14px;
  }
  .o3-card--amis{ min-height:190px }
  .o3-card--amis::before{ top:0; bottom:auto; left:14px; right:14px;
                          width:auto; height:3px; border-radius:0 0 3px 3px }
  .o3-card-txt{ flex:1 1 auto }
  /* L'étiquette et le badge restent DANS le flux, en bas de carte : posés en
     absolu dans le coin, ils recouvraient l'icône dès que la carte
     rétrécissait. */
  .o3-soon{ align-self:flex-start; margin-top:auto }
  .o3-badge{ position:absolute; top:14px; right:14px }
  .o3-cta{ margin-top:auto; padding-top:8px }

  /* Les listes gardent une colonne de lecture : une ligne d'ami large de
     700 px se lit moins bien qu'une colonne. */
  .o3-shell--amis .o3-corps{ max-width:620px; margin:0 auto }
}

/* ============================================================================
   LOT ONLINE 4 — LES CLASSEMENTS DANS L'ÉCRAN DU DÉFI HEBDOMADAIRE
   ----------------------------------------------------------------------------
   Le Défi garde SON écran et SON fond : on n'y importe pas le décor d'atelier
   du hub, qui écraserait une page déjà composée. Ce qu'on y apporte, c'est le
   langage d'RCF Online — panneaux translucides, accents jaunes, rangs lisibles
   — posé dans les cartes `.wk-card` existantes.

   Les styles vivent ici plutôt que dans un nouveau fichier : c'est la feuille
   « social » du projet, et le classement est du social.
   ============================================================================ */

.wk-social{ position:relative }

.wk-pub{
  margin:0 0 12px; padding:9px 11px; border-radius:11px;
  font-size:12px; line-height:1.45;
}
.wk-pub--attente{
  color:var(--dim); border:1px solid rgba(142,177,209,.28); background:rgba(6,17,28,.5);
}
.wk-pub--ok{
  color:var(--green); border:1px solid rgba(69,211,148,.34); background:rgba(8,32,24,.45);
  font-weight:600;
}

/* Deux onglets, pas un menu : Amis et Global, et rien d'autre à choisir. */
.wk-tabs{ display:flex; gap:7px; margin:0 0 12px }
.wk-tab{
  flex:1 1 0; min-height:38px; padding:0 10px;
  border:1px solid rgba(142,177,209,.26); border-radius:10px;
  background:rgba(6,17,28,.5); color:var(--faint);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.wk-tab:hover{ color:var(--dim); border-color:rgba(142,177,209,.45) }
.wk-tab.on{
  color:#2a1c00; background:var(--yellowgrad); border-color:rgba(217,146,0,.9);
  box-shadow:0 3px 12px rgba(255,189,25,.24);
}

.wk-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.wk-rank--moi{ margin-top:6px }

.wk-rk{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; min-height:42px;
  border:1px solid rgba(142,177,209,.16); border-radius:10px;
  background:rgba(6,17,28,.46);
}
/* Le joueur courant : bordure jaune ET fond distinct ET son rang en gras —
   trois signaux, pas seulement une couleur (ONLINE 3.1 §9). */
.wk-rk--moi{
  border-color:rgba(255,189,25,.55); background:rgba(255,189,25,.09);
}
.wk-rk--moi .wk-rk-p{ font-weight:700; color:var(--ink) }
.wk-rk--moi .wk-rk-n{ color:var(--hivis) }

/* Le podium : un liseré, pas une animation. */
.wk-rk--or{ border-left:3px solid #ffd04b }
.wk-rk--argent{ border-left:3px solid #c8d4e0 }
.wk-rk--bronze{ border-left:3px solid #cd8544 }

.wk-rk-n{
  flex:0 0 auto; min-width:28px; text-align:center;
  font-family:"Oswald",system-ui,sans-serif; font-size:15px; font-weight:600;
  color:var(--steel);
}
.wk-rk-p{
  flex:1 1 auto; min-width:0;
  font-size:14px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wk-rk-s{
  flex:0 0 auto;
  font-family:"Oswald",system-ui,sans-serif; font-size:16px; font-weight:600;
  color:var(--ink); white-space:nowrap;
}
/* « non qualifié » : le score existe, mais il est classé après tous les
   qualifiés — la mention le dit, elle ne le cache pas. */
.wk-rk-s i{
  font-style:normal; font-family:system-ui,sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--orange); margin-left:4px;
}

@media (max-width:359px){
  .wk-rk{ gap:7px; padding:7px 8px }
  .wk-rk-p{ font-size:13px }
}

/* ============================================================================
   LOT ONLINE 5 — DUELS EXPRESS ASYNCHRONES
   ----------------------------------------------------------------------------
   Aucun nouveau chantier graphique. L'écran Duels réemploie tel quel le décor
   d'ONLINE 3.1 — `#scDuels` reçoit les mêmes règles que `#scOnline` par la
   liste de sélecteurs ci-dessous, donc le même fond d'atelier, le même voile,
   les mêmes panneaux et les mêmes container queries. Ce qui suit n'ajoute que
   ce que le Duel a de propre : une ligne à deux étages, un verdict, et une
   grille de métiers.

   LE VERDICT NE DÉPEND JAMAIS DE LA SEULE COULEUR. Chaque état porte un MOT
   (« Victoire », « Défaite », « Égalité ») et un signe (▲ ▼ =). C'est la règle
   §9 d'ONLINE 3.1, et elle vaut ici plus qu'ailleurs : un daltonien doit
   pouvoir lire qui a gagné.
   ============================================================================ */

#scDuels{ padding:0!important; background:var(--floor)!important }

/* -------------------------------------------------- le bouton « Défier » */
.o5-defier{ width:100%; min-height:48px; margin:0 0 14px; font-size:14px }

/* ------------------------------------------------ une ligne de Duel */
/* Deux étages : le pseudo, puis ce qui se passe. Une ligne à un seul étage
   obligeait à choisir entre « qui » et « où en est-on », et les deux comptent. */
.o5-row{ align-items:flex-start }
.o5-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto }
.o5-sous{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:11px; line-height:1.45; color:var(--faint);
}
.o5-attente{
  font-size:11px; font-weight:600; color:var(--faint);
  padding:5px 9px; border-radius:99px;
  border:1px solid rgba(142,177,209,.22); background:rgba(6,17,28,.5);
  white-space:nowrap;
}

/* ------------------------------------------------------------- le verdict */
.o5-verdict{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:99px;
  border:1px solid rgba(142,177,209,.22); background:rgba(6,17,28,.55);
}
.o5-v-sig{ font-size:10px; line-height:1 }
.o5-v--gagne{ color:var(--green); border-color:rgba(69,211,148,.40) }
.o5-v--perdu{ color:var(--orange); border-color:rgba(255,142,75,.34) }
.o5-v--nul{ color:var(--dim); border-color:rgba(142,177,209,.30) }

.o5-scores{
  font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:700; color:var(--ink);
}
.o5-conf{ font-size:11px; color:var(--faint) }
.o5-histo .o5-sous{ gap:8px }

/* --------------------------------------------------- le choix du métier */
.o5-note{
  margin:0 0 12px; font-size:11.5px; line-height:1.6; color:var(--faint);
  max-width:46ch;
}
.o5-svc{ margin:0 0 14px }
.o5-svc:last-child{ margin-bottom:0 }
.o5-svc-t{
  margin:0 0 7px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hivis); opacity:.9;
}
/* Une colonne tant que la SCÈNE est étroite — et c'est la scène qui compte,
   pas la fenêtre : le plateau 9:16 fait 484 px de large dans une fenêtre de
   1280. Une media query se tromperait ici ; le container query, non. */
.o5-metiers{ display:grid; grid-template-columns:1fr; gap:7px }
.o5-metier{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-height:48px; padding:9px 12px; text-align:left; width:100%;
}
.o5-metier b{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.3 }
.o5-metier i{ font-size:11px; font-style:normal; color:var(--faint) }

@container o3 (min-width:600px){
  .o5-metiers{ grid-template-columns:1fr 1fr }
}

/* ------------------------------------------------------ le récapitulatif */
.o5-recap-l{ margin:0 0 14px; display:flex; flex-direction:column; gap:1px }
.o5-recap-l > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(142,177,209,.14);
}
.o5-recap-l > div:last-child{ border-bottom:0 }
.o5-recap-l dt{ font-size:11.5px; color:var(--faint) }
.o5-recap-l dd{ margin:0; font-size:14px; font-weight:600; color:var(--ink); text-align:right }
.o5-recap .o3-btn{ width:100%; min-height:48px; font-size:14px }

/* ==========================================================================
   LOT ONLINE 6 — TOURNOIS
   --------------------------------------------------------------------------
   Deux exigences commandent tout ce bloc.

   QUINZE JOUEURS DOIVENT TENIR DANS UN TÉLÉPHONE (§48). Les participants et le
   classement sont donc des LIGNES d'une seule hauteur, en grille à colonnes
   fixes pour que les rangs et les scores s'alignent verticalement. Quinze
   cartes empilées auraient été plus jolies sur une capture et inutilisables au
   pouce.

   LA SCÈNE EST LARGE DE 484 px DANS UNE FENÊTRE DE 1280. C'est le plateau 9:16,
   pas la fenêtre, qui décide de la place disponible : les adaptations passent
   par `@container o3`, jamais par une media query — une media query se
   tromperait de mesure et le prouverait seulement sur un grand écran.
   ========================================================================== */

.o6-creer{ width:100%; min-height:48px; margin:0 0 14px; font-size:14px }

/* ------------------------------------------------- le choix du type (§9) */
/* Deux cartes, pas deux lignes : c'est LA décision du parcours de création, et
   elle mérite la place que les deux autres étapes n'ont pas. */
.o6-types{ display:grid; grid-template-columns:1fr; gap:10px }
.o6-type{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  min-height:76px; padding:13px 14px; text-align:left; width:100%;
  border:1px solid rgba(142,177,209,.22); border-radius:14px;
  background:rgba(6,17,28,.50); color:var(--ink); cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.o6-type:hover{ border-color:rgba(142,177,209,.40); background:rgba(10,26,42,.62) }
/* L'état sélectionné ne tient pas qu'à la couleur : la bordure change ET
   `aria-pressed` le dit aux lecteurs d'écran (§9 d'ONLINE 3.1). */
.o6-type--on{ border-color:rgba(255,189,25,.55); background:rgba(40,32,10,.45) }
.o6-type-t{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.25 }
.o6-type-d{ font-size:11.5px; line-height:1.55; color:var(--faint) }

@container o3 (min-width:600px){
  .o6-types{ grid-template-columns:1fr 1fr }
}

/* --------------------------------------- les participants (sélection §10) */
/* Une liste qui défile dans son propre cadre : sur un téléphone, faire défiler
   trente amis dans la page entière ferait perdre de vue le compteur et le
   bouton Continuer, qui sont précisément ce qu'on regarde en sélectionnant. */
.o6-amis{ max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch }
.o6-ami{ list-style:none }
.o6-ami > button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; min-height:48px;
  border:1px solid rgba(142,177,209,.16); border-radius:12px;
  background:rgba(6,17,28,.50); color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .16s ease, background .16s ease;
}
.o6-ami > button:hover{ border-color:rgba(142,177,209,.34); background:rgba(10,26,42,.62) }
.o6-ami--on > button{ border-color:rgba(255,189,25,.55); background:rgba(40,32,10,.45) }
.o6-ami .o3-nom{ flex:1 1 auto; min-width:0 }
.o6-check{
  flex:0 0 auto; width:22px; text-align:center;
  font-size:14px; font-weight:700; color:var(--hivis);
}

/* Le compteur est la règle rendue visible : 3 à 15, créateur compris. */
.o6-compteur{
  margin:0 0 8px; font-family:"Oswald",system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--ink);
}
.o6-compteur--trop{ color:var(--red) }

/* Le type d'un Tournoi, dit en toutes lettres partout où il apparaît. */
.o6-badge{
  display:inline-block; font-family:system-ui,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink); background:rgba(142,177,209,.14);
  border:1px solid rgba(142,177,209,.28); border-radius:99px;
  padding:1px 7px; margin-right:5px; vertical-align:1px;
}

.o6-row{ align-items:flex-start }
.o6-etat{
  flex:0 0 auto; font-size:11px; color:var(--faint);
  white-space:nowrap; align-self:center;
}

/* -------------------------------------------------- le classement (§32) */
/* Rang, pseudo, métier, score : quatre colonnes fixes. Les rangs ex aequo
   partagent leur numéro — c'est le serveur qui le dit avec RANK(), et cette
   grille le rend lisible en alignant les chiffres les uns sous les autres. */
.o6-cl{
  display:grid; grid-template-columns:28px 1fr auto 42px;
  align-items:center; gap:8px;
  padding:8px 10px; min-height:44px;
  border:1px solid rgba(142,177,209,.16); border-radius:12px;
  background:rgba(6,17,28,.50);
}
.o6-cl--moi{ border-color:rgba(255,189,25,.45); background:rgba(40,32,10,.38) }
.o6-cl-r{
  font-family:"Oswald",system-ui,sans-serif; font-size:15px; font-weight:600;
  color:var(--hivis); text-align:center;
}
.o6-cl-n{
  font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.o6-cl-m{
  font-size:10.5px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:11ch;
}
.o6-cl-s{
  font-family:"Oswald",system-ui,sans-serif; font-size:16px; font-weight:600;
  color:var(--ink); text-align:right;
}
/* §35 — celui qui n'a pas terminé n'est pas classé dernier avec un zéro : il
   est en retrait, sans rang et sans score, et le dit avec un mot. */
.o6-hors{ opacity:.62 }
.o6-hors .o6-cl-r, .o6-hors .o6-cl-s{ color:var(--faint) }

@container o3 (min-width:600px){
  .o6-cl{ grid-template-columns:34px 1fr auto 52px }
  .o6-cl-m{ max-width:20ch }
}

/* ============================================================================
   LOT COMPETITIVE FUN — LES SCÈNES DE RÉSULTAT (`cf-`)
   ----------------------------------------------------------------------------
   LA RÈGLE QUI TIENT TOUT LE BLOC : si l'on masquait TOUS les textes, il
   faudrait encore comprendre en une seconde si le joueur a gagné ou perdu.
   D'où DEUX SILHOUETTES, pas deux teintes :

     .cf-scene--gagne / --sacre   colonne centrée, emblème en haut, halo,
                                  chiffre géant. Ça monte.
     .cf-scene--perdu             un DOCUMENT : cadre rectangulaire, en-tête
                                  plein, lignes réglées, tampon en travers.
                                  Aligné à gauche. Ça constate.
     .cf-scene--nul               deux colonnes égales et un trait vertical
                                  au milieu. Rien ne penche.
     .cf-scene--podium/--milieu   décroissance assumée : médaille, puis rien.
     .cf-scene--absent            trait pointillé, aucun score.

   La couleur ne porte donc jamais le sens seule : il y a la forme, le mot,
   le pictogramme et la composition (§33). Aucun emoji n'est nécessaire à la
   compréhension — ceux des punchlines sont du décor de texte.

   Les animations sont courtes (≤ 620 ms), ne bloquent aucune navigation et
   s'effacent sous `prefers-reduced-motion` — voir la fin du bloc.
   ========================================================================== */

.cf-scene{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:10px; margin:0 0 14px; padding:22px 16px 20px;
  border-radius:var(--radius);
  border:1px solid var(--edge);
  background:var(--panelgrad);
  box-shadow:var(--shadow);
  text-align:center;
  overflow:hidden;              /* le halo et le tampon restent dans la carte */
}

/* ------------------------------------------------------------ LE GAGNANT */
/* Un halo qui monte depuis le bas de l'emblème : la lumière vient de la
   victoire, pas d'un projecteur posé sur la carte. */
.cf-halo{
  position:absolute; left:50%; top:-28%;
  width:min(150%,420px); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,192,46,.30) 0%,rgba(255,192,46,.10) 42%,transparent 68%);
  pointer-events:none;
}
/* §22 — UNE GROSSE VICTOIRE EST LA MÊME SCÈNE, UN CRAN PLUS HAUT.
   Pas un second écran : un trophée plus grand, un halo plus franc, une bordure
   qui prend la couleur du lot. La différence se voit, elle ne se relit pas. */
.cf-scene--ecrasant{ border-color:rgba(255,192,46,.42) }
.cf-scene--ecrasant .cf-embleme--coupe svg{ width:72px; height:72px }
.cf-scene--ecrasant .cf-halo{
  background:radial-gradient(circle,rgba(255,192,46,.40) 0%,rgba(255,192,46,.14) 44%,transparent 70%);
}

.cf-halo--grand{
  top:-34%;
  background:radial-gradient(circle,rgba(255,192,46,.42) 0%,rgba(255,142,75,.16) 38%,transparent 70%);
}

.cf-embleme{ display:block; line-height:0; color:var(--hivis) }
.cf-embleme svg{ width:54px; height:54px; display:block }
.cf-embleme--coupe svg{ width:58px; height:58px }
.cf-embleme--couronne svg{ width:68px; height:68px }
.cf-embleme--medaille{ color:var(--steel) }
.cf-embleme--medaille svg{ width:62px; height:62px }
.cf-embleme--lanterne{ color:var(--red) }
.cf-embleme--lanterne svg{ width:40px; height:40px }
/* LA BANDE SOUS LA LANTERNE N'EST PAS DE L'ESPACEMENT DÉCORATIF.
   La lanterne OSCILLE autour de son anse : en balançant, le bas du corps
   sortait de sa boîte et venait mordre sur le mot « DERNIER » juste dessous.
   Mesuré par la sonde d'occlusion de la recette, qui interroge le navigateur
   point par point. Les 12 px lui laissent sa course — l'amplitude est de 7°
   sur 40 px de haut, soit moins de 5 px de débattement. */
.cf-embleme--lanterne{ margin-bottom:12px }
.cf-embleme--dossier{ color:var(--faint) }
.cf-embleme--dossier svg{ width:52px; height:52px }

.cf-titre{
  margin:0; font-family:var(--disp); font-weight:700;
  font-size:clamp(28px,9cqi,44px); line-height:1;
  letter-spacing:.06em; color:var(--ink);
}
/* L'ACCENT MÉTALLIQUE. Un dégradé court dans la lettre — or clair en haut, or
   profond en bas, comme une plaque gravée prise dans la lumière d'atelier.
   `background-clip:text` n'est pas partout : un navigateur qui l'ignore rend
   exactement l'écran précédent, grâce au @supports plus bas. */
.cf-scene--gagne .cf-titre,
.cf-scene--sacre .cf-titre{
  color:var(--hivis);
  background:linear-gradient(176deg,#ffe089 0%,var(--hivis) 46%,var(--hivis-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cf-scene--sacre .cf-titre{ font-size:clamp(30px,10cqi,50px) }
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .cf-scene--gagne .cf-titre, .cf-scene--sacre .cf-titre{
    background:none; -webkit-text-fill-color:currentColor;
  }
}
.cf-titre--calme{ font-size:clamp(20px,6cqi,28px); color:var(--dim); letter-spacing:.1em }

/* Le « 1 » du Champion : le plus gros chiffre de tout le jeu en ligne. Il est
   `aria-hidden` — le rang est dit en clair juste dessous. */
.cf-rang-geant{
  margin:-4px 0 0; font-family:var(--disp); font-weight:700;
  font-size:clamp(76px,30cqi,140px); line-height:.82;
  color:var(--hivis);
  text-shadow:0 0 34px rgba(255,192,46,.42);
}
/* LE PODIUM CHIFFRÉ — voir le commentaire du SVG dans screen-competitive-fun.js.
   Trois plaques d'acier, chant clair en haut, chiffre gravé. La marche du
   milieu est en or : la hiérarchie se voit avant d'être lue. */
.cf-podium{ display:block; line-height:0; margin-top:6px }
.cf-podium svg{ width:min(72%,230px); height:auto; display:block }
.cf-marche-f{ fill:var(--plate) }
.cf-marche-c{ fill:var(--steel); opacity:.55 }
.cf-marche-n{
  font-family:var(--disp); font-weight:700; font-size:26px;
  fill:var(--faint); letter-spacing:.02em;
}
.cf-marche--1 .cf-marche-f{ fill:rgba(255,192,46,.20) }
.cf-marche--1 .cf-marche-c{ fill:var(--hivis); opacity:1 }
.cf-marche--1 .cf-marche-n{ fill:var(--hivis); font-size:34px }
.cf-marche--3 .cf-marche-f{ opacity:.72 }
.cf-marche--3 .cf-marche-n{ opacity:.8 }

/* LE BADGE. Un cran plus affirmé : un peu plus grand, un liseré intérieur
   clair qui l'ancre dans la matière, une ombre dorée plus franche. Toujours
   une pastille d'atelier, jamais un jeton de casino. */
.cf-badge{
  margin:0; padding:6px 16px; border-radius:999px;
  font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.15em;
  color:#2a1c00; background:var(--yellowgrad);
  box-shadow:0 0 0 1px rgba(255,255,255,.34) inset,
             0 8px 22px -10px rgba(255,174,0,.95);
}
.cf-mention{
  margin:0; font-family:var(--disp); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; color:var(--dim);
}

/* ------------------------------------------------------------- LES SCORES */
.cf-duo{
  margin:4px 0 0; display:flex; align-items:baseline; justify-content:center;
  gap:10px; flex-wrap:nowrap; max-width:100%;
}
.cf-pt{ display:flex; flex-direction:column; align-items:center; min-width:0 }
.cf-pt b{
  font-family:var(--disp); font-weight:700; line-height:1;
  font-size:clamp(26px,8cqi,40px); color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.cf-pt i{
  font-style:normal; font-size:11px; letter-spacing:.08em;
  color:var(--faint); max-width:11ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cf-tiret{ color:var(--faint); font-size:18px; align-self:center }

/* Le score qui a gagné est plus gros ET plus clair : la hiérarchie est
   lisible sans lire un mot. */
.cf-duo--moi .cf-pt--moi b{ font-size:clamp(40px,15cqi,68px); color:var(--hivis) }
.cf-duo--lui .cf-pt--lui b{ font-size:clamp(34px,12cqi,54px); color:var(--ink) }
.cf-duo--lui .cf-pt--moi b{ color:var(--faint) }
.cf-duo--egal .cf-pt b{ font-size:clamp(34px,12cqi,54px); color:var(--ink) }

/* Le miroir de l'égalité : deux colonnes strictement égales, un trait au
   milieu. Personne ne domine, et ça se voit de loin. */
.cf-miroir{
  width:100%; display:flex; justify-content:center;
  padding:10px 0; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
.cf-miroir .cf-tiret{
  width:1px; height:34px; background:var(--edge); color:transparent;
  overflow:hidden; align-self:center;
}

/* --------------------------------------------------------- LE PERDANT */
/* Pas de trophée, pas de halo : une FICHE. C'est l'inverse exact, et c'est
   voulu — on chambre avec les codes de la non-conformité industrielle. */
.cf-scene--perdu{ align-items:stretch; text-align:left; padding-top:16px }
.cf-fiche{
  position:relative; width:100%;
  border:1px solid rgba(255,100,115,.34);
  border-radius:var(--radius-sm);
  background:rgba(4,13,22,.55);
  /* LE BAS EST RÉSERVÉ AU TAMPON, et ce n'est pas un réglage esthétique.
     Mesuré sur la capture de recette : posé en bas à droite sans réserve, le
     tampon passait par-dessus le pseudo de l'adversaire et le rendait
     illisible. Un gag qui mange une donnée n'est plus un gag.
     Le tampon garde sa bande à lui ; il déborde encore sur la bordure — donc
     il a toujours l'air appliqué à la main — mais plus sur un texte. */
  padding:12px 13px 62px;
}
.cf-fiche-t{
  margin:0 0 8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid rgba(255,100,115,.26); padding-bottom:7px;
}
.cf-fiche-lignes{ display:block; margin:0 0 10px }
.cf-fiche-lignes i{
  display:block; height:2px; margin:6px 0;
  background:rgba(170,201,226,.16); border-radius:2px;
}
.cf-fiche-lignes i:nth-child(2){ width:72% }
.cf-fiche-lignes i:nth-child(3){ width:46% }
.cf-scene--perdu .cf-titre{ color:var(--red); font-size:clamp(24px,8cqi,38px) }
.cf-scene--perdu .cf-duo{ justify-content:flex-start; margin-top:8px }
.cf-scene--perdu .cf-punch,
.cf-scene--perdu .cf-meta,
.cf-scene--perdu .cf-place{ text-align:left; align-self:flex-start }

/* LE TAMPON. Rectangulaire, épais, posé EN TRAVERS : c'est lui qui donne
   à l'écran perdu sa silhouette, et il n'existe nulle part ailleurs. */
.cf-tampon{
  position:absolute; right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px;
  border:3px solid var(--red); border-radius:4px;
  font-family:var(--disp); font-size:clamp(13px,4.4cqi,19px); font-weight:700;
  letter-spacing:.10em; color:var(--red);
  background:rgba(255,100,115,.08);
  transform:rotate(-9deg);
  white-space:nowrap; max-width:calc(100% - 16px);
  overflow:hidden; text-overflow:ellipsis;
}
.cf-tampon-sig{ font-size:.82em; opacity:.85 }

/* ------------------------------------------------- LA PLACE AU CLASSEMENT */
.cf-place{
  margin:2px 0 0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  justify-content:center;
}
.cf-place b{
  font-family:var(--disp); font-size:clamp(17px,5.5cqi,24px); font-weight:600;
  color:var(--ink); letter-spacing:.04em;
}
.cf-place i{ font-style:normal; font-size:12.5px; color:var(--faint) }
.cf-scene--sacre .cf-place b{ color:var(--hivis) }

/* ---------------------------------------------------------- LA PUNCHLINE */
/* Elle est le propos de l'écran : grande, entre guillemets français, jamais
   reléguée sous un bouton. */
.cf-punch{
  margin:6px 0 0; max-width:34ch;
  font-size:clamp(15px,4.6cqi,19px); line-height:1.45; font-weight:500;
  color:var(--ink);
  /* Sans cela, une punchline de deux lignes laisse parfois le guillemet
     fermant seul sur la seconde. `balance` égalise les lignes ; les
     navigateurs qui l'ignorent rendent exactement comme avant. */
  text-wrap:balance;
}
.cf-punch::before{ content:"« " }
.cf-punch::after{ content:" »" }
.cf-scene--perdu .cf-punch{ color:var(--ink) }
.cf-scene--milieu .cf-punch{ color:var(--dim) }

.cf-meta{
  margin:2px 0 0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:var(--faint);
}

/* ------------------------------------------------------------ LES BOUTONS */
.cf-actions{
  display:flex; flex-direction:column; gap:8px;
  width:100%; max-width:380px; margin-top:12px;
}
.cf-btn{ width:100%; justify-content:center; min-height:var(--tap) }
.cf-btn--calme{ background:rgba(6,17,28,.55); color:var(--dim) }
/* La relance suit le bouton : elle pousse au clic, elle ne le remplace pas. */
.cf-relance{
  margin:8px 0 0; font-size:13px; font-style:italic; color:var(--faint);
  max-width:32ch;
}
.cf-scene--perdu .cf-relance{ align-self:flex-start; text-align:left }

/* -------------------------------------------------------------- LE MILIEU */
/* Volontairement nu : ni emblème, ni tampon, ni halo. Une ligne réglée, et
   c'est tout — le propos du §28 est justement qu'il ne se passe rien. */
.cf-scene--milieu{ padding:18px 16px; gap:7px }
.cf-scene--milieu::before{
  content:""; display:block; width:52px; height:2px;
  background:var(--edge); border-radius:2px;
}

/* ------------------------------------------------------------- L'ABSENT */
.cf-scene--absent{ border-style:dashed; background:rgba(4,13,22,.5) }
.cf-scene--absent .cf-titre{ color:var(--faint) }

/* ------------------------------------------------------------ ÉCRANS LARGES */
/* Comme partout dans ce fichier : `@container`, jamais une media query — la
   largeur de la FENÊTRE ne dit rien de la place disponible dans la scène 9:16
   de RCF (voir le bloc « écrans » plus haut). */
@container o3 (min-width:600px){
  .cf-scene{ padding:30px 26px 26px }
  .cf-actions{ flex-direction:row }
  .cf-scene--perdu .cf-actions{ max-width:none }
}

/* ------------------------------------------------------------- MOUVEMENT */
/* LA HIÉRARCHIE DU MOUVEMENT SUIT CELLE DU PRESTIGE.
   Ce n'est pas de la décoration au kilomètre : chaque famille a une durée et
   une courbe qui disent, sans un mot, où elle se situe.

     CHAMPION         700 ms  la plus ample, la plus tenue
     GROSSE VICTOIRE  620 ms  forte, un cran en dessous
     VICTOIRE         520 ms  franche et positive
     PODIUM           460 ms  la même famille, plus sobre
     MILIEU / ÉGALITÉ 300 ms  neutre : ça se pose, et c'est tout
     DÉFAITE          260 ms  sèche — ça TOMBE, ça ne monte pas
     GROSSE DÉFAITE   260 ms  + le tampon qui FRAPPE
     DERNIER          260 ms  + la lanterne qui oscille : la petite cérémonie

   « Plus bas » ne veut pas dire moins travaillé : la défaite et le dernier ont
   autant de soin que le sacre, sur le registre de la catastrophe.
   Tout reste court, sans dépendance, sans image, sans cinématique, et rien ne
   tourne en boucle — la lanterne elle-même s'arrête après deux oscillations. */
@keyframes cfMonte{
  from{ opacity:0; transform:translateY(16px) scale(.965) }
  to{ opacity:1; transform:none }
}
@keyframes cfTombe{
  from{ opacity:0; transform:translateY(-10px) }
  to{ opacity:1; transform:none }
}
@keyframes cfFrappe{
  0%{ opacity:0; transform:rotate(-9deg) scale(2.2) }
  70%{ opacity:1; transform:rotate(-9deg) scale(.94) }
  100%{ opacity:1; transform:rotate(-9deg) scale(1) }
}
@keyframes cfSouffle{
  from{ opacity:0; transform:translateX(-50%) scale(.7) }
  to{ opacity:1; transform:translateX(-50%) scale(1) }
}
/* L'emblème se POSE, avec un dépassement très court : un objet qu'on dépose
   sur l'établi, pas un ressort de jouet. */
@keyframes cfPose{
  0%{ opacity:0; transform:translateY(10px) scale(.78) }
  68%{ opacity:1; transform:translateY(0) scale(1.05) }
  100%{ opacity:1; transform:none }
}
/* L'impact lumineux sur le titre : une lueur qui passe et s'éteint. Elle ne
   laisse aucune ombre permanente derrière elle. */
@keyframes cfEclat{
  0%{ text-shadow:0 0 0 rgba(255,192,46,0) }
  28%{ text-shadow:0 0 26px rgba(255,192,46,.80) }
  100%{ text-shadow:0 0 0 rgba(255,192,46,0) }
}
/* Le chiffre du vainqueur se pose un souffle après le reste. */
@keyframes cfChiffre{
  from{ opacity:0; transform:scale(.82) }
  to{ opacity:1; transform:none }
}
/* Les marches montent l'une après l'autre, de la plus basse à la plus haute :
   le 3, puis le 2, puis le 1. C'est le podium qui se construit. */
@keyframes cfMarche{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}
/* La lanterne oscille DEUX FOIS, puis s'arrête. Bornée : rien ne tourne en
   boucle, ni à l'écran ni sur la batterie. */
@keyframes cfBalance{
  0%{ transform:rotate(-7deg) }
  50%{ transform:rotate(7deg) }
  100%{ transform:rotate(0deg) }
}

.cf-scene--gagne{ animation:cfMonte .52s cubic-bezier(.16,.9,.3,1) both }
.cf-scene--gagne.cf-scene--ecrasant{ animation-duration:.62s }
.cf-scene--sacre{ animation:cfMonte .70s cubic-bezier(.16,.9,.3,1) both }
.cf-scene--podium{ animation:cfMonte .46s cubic-bezier(.16,.9,.3,1) both }
.cf-scene--nul, .cf-scene--milieu, .cf-scene--absent{ animation:cfTombe .30s ease-out both }
.cf-scene--perdu{ animation:cfTombe .26s ease-out both }

.cf-halo{ animation:cfSouffle .62s ease-out both }
.cf-halo--grand{ animation-duration:.80s }
.cf-embleme--coupe, .cf-embleme--couronne, .cf-embleme--medaille{
  animation:cfPose .52s cubic-bezier(.22,1.1,.36,1) .06s both;
}
.cf-embleme--couronne{ animation-duration:.62s }
.cf-scene--gagne .cf-titre, .cf-scene--sacre .cf-titre{
  animation:cfEclat .72s ease-out .18s both;
}
.cf-scene--sacre .cf-titre{ animation-duration:.90s }
.cf-duo--moi .cf-pt--moi b{ animation:cfChiffre .40s cubic-bezier(.2,1,.4,1) .14s both }
.cf-rang-geant{ animation:cfChiffre .52s cubic-bezier(.2,1,.4,1) .18s both }
.cf-marche--3{ animation:cfMarche .34s ease-out .22s both }
.cf-marche--2{ animation:cfMarche .34s ease-out .32s both }
.cf-marche--1{ animation:cfMarche .38s ease-out .42s both }
/* Le tampon arrive en dernier, et il FRAPPE : c'est le gag de la défaite. */
.cf-tampon{ animation:cfFrappe .42s cubic-bezier(.3,1.5,.5,1) .16s both }
.cf-embleme--lanterne{
  transform-origin:50% 8%;
  animation:cfBalance .52s ease-in-out .30s 2 both;
}

/* UN JOUEUR QUI A DEMANDÉ MOINS DE MOUVEMENT N'EN A PLUS DU TOUT.
   La liste est exhaustive, et la recette le vérifie dans un vrai navigateur
   qui demande vraiment `reduce` — pas sur parole. */
@media (prefers-reduced-motion:reduce){
  .cf-scene--gagne, .cf-scene--sacre, .cf-scene--podium,
  .cf-scene--perdu, .cf-scene--nul, .cf-scene--milieu, .cf-scene--absent,
  .cf-halo, .cf-tampon,
  .cf-embleme--coupe, .cf-embleme--couronne, .cf-embleme--medaille,
  .cf-embleme--lanterne,
  .cf-scene--gagne .cf-titre, .cf-scene--sacre .cf-titre,
  .cf-duo--moi .cf-pt--moi b, .cf-rang-geant,
  .cf-marche--1, .cf-marche--2, .cf-marche--3{ animation:none }
  .cf-tampon{ transform:rotate(-9deg) }
  .cf-halo{ transform:translateX(-50%) }
  .cf-embleme--lanterne{ transform:none }
}


/* ==========================================================================
   LOT ONLINE — CONTINUITÉ DES PARCOURS
   ========================================================================== */

/* Cibles tactiles : 44 px au minimum, comme l'écran Classement. Seules la
   hauteur et la zone de toucher changent ; la typographie, les couleurs et
   les bordures restent celles d'ONLINE 3.1. */
.o3-retour,.o3-refresh{ width:44px; height:44px }
.o3-btn{ min-height:44px }
.wk-tab{ min-height:44px }
#scWeekly .wk-back.l12-nav-back{ height:44px; min-height:44px }

/* Tournois : le pseudo de l'organisateur ne se réduit plus à « … ».
   Quand la place manque (390 px), les boutons passent sous le texte au lieu
   de l'écraser ; un pseudo très long se replie sur deux lignes plutôt que
   d'être coupé. */
.o6-row{ flex-wrap:wrap }
.o6-row .o5-txt{ flex:1 1 150px }
.o6-row .o3-nom{ white-space:normal; overflow-wrap:anywhere; text-overflow:clip }
.o6-row .o3-act{ margin-left:auto }