/* =============================================================
   AGORA DES MOTS — ANAGRAMMES
   Feuille de style de l'écran d'accueil / configuration.

   Copie fidèle de design-handoff/styles/anagrammes.css.
   DESIGN VALIDÉ — ne pas "harmoniser" les valeurs.

   Chargée dans le shadow DOM de <agora-config-view> (voir
   src/ui/config-view.js) : les règles ci-dessous ne s'appliquent
   donc qu'à cet écran, sans risque de collision avec game.css.

   Deux adaptations techniques uniquement, aucune valeur changée :
   1. `:root` -> `:host` : dans un shadow DOM, `:root` désigne
      toujours le <html> du document entier (donc partagé avec
      l'autre écran) alors que `:host` scope les tokens à CET
      écran. C'est la manière standard de scoper des design tokens
      dans un composant.
   2. `url('../assets/background/fond.webp')` ->
      `url('../assets/background/config-fond.webp')` : renommage
      du fichier copié dans app/assets/ (l'image de fond de
      design-handoff et celle de game-handoff partagent le même
      nom d'origine mais ne sont pas identiques ; les deux copies
      cohabitent dans app/assets/background/ sous des noms
      distincts).
   ============================================================= */

/* ----------------------------- TOKENS ----------------------------- */
:host {
  /* Verts */
  --agora-green-page:        #07150f;               /* fond du document */
  --agora-green-behind:      #0a1f16;               /* couleur sous l'image de fond */
  --agora-green-card:        rgba(7, 33, 22, .9);   /* carte de mode non sélectionnée */
  --agora-green-card-grad:   linear-gradient(180deg, rgba(7,33,22,.92), rgba(7,33,22,.92));
  --agora-green-panel:       rgba(6, 30, 20, .9);   /* panneau de configuration */
  --agora-green-control:     rgba(12, 46, 31, .8);  /* fond des steppers */
  --agora-green-slot:        rgba(12, 44, 30, .75); /* fond des emplacements avatar */
  --agora-green-header-a:    rgba(6, 26, 18, .88);
  --agora-green-header-b:    rgba(6, 26, 18, .58);
  --agora-green-inner-ring:  #0a1c12;               /* liseré sombre intérieur des avatars */
  --agora-green-back-btn:    linear-gradient(180deg, #0d2a1c, #061a11);
  --agora-green-back-hover:  linear-gradient(180deg, #123824, #0a2416);

  /* Or */
  --agora-gold:              #d6ac60;
  --agora-gold-light:        #e9c987;
  --agora-gold-line:         rgba(214, 172, 96, .55);
  --agora-gold-line-strong:  rgba(214, 172, 96, .75);
  --agora-gold-line-soft:    rgba(214, 172, 96, .45);
  --agora-gold-tint:         rgba(214, 172, 96, .10);
  --agora-gold-tint-hover:   rgba(214, 172, 96, .18);
  --agora-gold-btn:          linear-gradient(180deg, #f6e2b0, #dca94f);
  --agora-gold-btn-border:   #c99a48;
  --agora-gold-back-border:  #c9a253;

  /* Ivoire / crème (état sélectionné) */
  --agora-ivory:             #f3e8d1;
  --agora-ivory-title:       #eccf8f;
  --agora-sel-bg:            linear-gradient(180deg, #fbf3df, #eddcb4);
  --agora-sel-border:        #c79a45;
  --agora-sel-fg:            #123a27;
  --agora-sel-shadow:        inset 0 0 0 3px rgba(18, 58, 39, .9), 0 6px 22px rgba(0, 0, 0, .35);

  /* Gris argent (modes Contre l'ordinateur / En ligne) */
  --agora-silver-line:       rgba(190, 196, 192, .45);
  --agora-silver-line-2:     rgba(190, 196, 192, .55);
  --agora-silver-text:       #dfe3e1;

  /* Textes */
  --agora-text:              #f2e6cd;
  --agora-text-white:        #ffffff;
  --agora-text-soft:         rgba(238, 226, 200, .82);
  --agora-text-muted:        rgba(232, 218, 188, .6);

  /* Rayons */
  --agora-radius-card:       14px;
  --agora-radius-btn:        12px;
  --agora-radius-modal:      16px;
  --agora-radius-pill:       999px;

  /* Structure */
  /* Palier 13D, section 1 — page moins étirée horizontalement (1480px ->
     1320px), plus proche des proportions de la première version. */
  --agora-max-width:         1320px;

  /* Transitions */
  --agora-transition-card:   transform .18s ease, box-shadow .18s ease;
  --agora-transition-choice: transform .16s ease;
}

/* ----------------------------- BASE ----------------------------- */
* { box-sizing: border-box; }
img { -webkit-user-drag: none; }
button { font-family: inherit; }

a { color: #e3bd77; text-decoration: none; }
a:hover { color: #f4dcae; }

:focus-visible { outline: 2px solid #e3bd77; outline-offset: 3px; border-radius: 4px; }

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

@keyframes agoraFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ----------------------------- PAGE ----------------------------- */
.agora-page {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--agora-green-behind);
  background-image: url('../assets/background/config-fond.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: 'Lora', Georgia, serif;
  color: var(--agora-text);
}

/* ----------------------------- HEADER ----------------------------- */
/* Palier P2H.2, section 7/8 — CAUSE EXACTE du panneau Notifications masqué par les cartes de
   modes : `backdrop-filter` (ligne ci-dessous) crée un NOUVEAU contexte d'empilement sur
   .agora-header, qu'il soit positionné ou non (règle CSS, pas liée à z-index). Or .agora-header
   n'avait ni `position` ni `z-index` : son contexte restait donc au niveau "auto", ordonné par
   simple ordre DOM parmi ses frères au niveau racine. `.notif-bell-panel` (position:absolute,
   z-index:60 — voir plus bas) est un DESCENDANT du header : son z-index:60 ne compte QUE DANS
   le contexte local du header, jamais contre `.modes`/`.config-panel` qui viennent APRÈS dans
   le DOM et peignent donc PAR-DESSUS tout le bloc header (notifications comprises), malgré son
   z-index interne élevé — vérifié par capture réelle (15 notifications, desktop 1366).
   Correctif : élève le header LUI-MÊME (position + z-index), jamais un z-index au hasard sur le
   panneau (déjà à 60, insuffisant tant que le header n'est pas positionné) — 45 reste
   délibérément sous les z-index de modales existants (50/52/55/56/60 dans ce fichier) pour
   qu'une modale ouverte continue de recouvrir le header normalement. */
.agora-header {
  position: relative;
  z-index: 45;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 28px;
  padding: 10px clamp(16px, 3vw, 44px);
  background: linear-gradient(180deg, var(--agora-green-header-a), var(--agora-green-header-b));
  border-bottom: 1px solid var(--agora-gold-line-soft);
  backdrop-filter: blur(2px);
}

/* Dernier patch pré-publication — .brand est maintenant un vrai <a> (voir config-view.js) :
   neutralise le style de lien natif (jamais de bleu/soulignement), garde exactement le même
   rendu visuel que le <div> d'origine (display:flex inchangé), focus-visible conservé pour le
   clavier (mandat section 2 : "clavier/focus-visible fonctionnels"). */
.brand {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  text-decoration: none; color: inherit; cursor: pointer;
}
.brand:focus-visible {
  outline: 2px solid var(--agora-gold-light, #eccf8f);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Palier responsive — vrai logo Agora des Mots (assets/brand/agora-des-mots-logo-stacked.webp,
   asset réel déjà présent dans le projet, jamais un bloc de lettre approximatif) : le badge
   carré porte déjà son propre cadre/fond doré, `border`/`background` d'origine retirés ici. */
.brand-mark {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
}
/* Palier responsive — bouton hamburger : masqué par défaut (desktop), affiché uniquement
   sous le breakpoint tablette (voir @media plus bas). Trois barres simples, cohérentes
   avec le langage graphique or/vert du header. */
.hamburger-btn {
  display: none;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--agora-radius-btn);
  border: 1px solid var(--agora-gold-line-strong);
  background: rgba(20, 52, 38, .75);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger-btn:hover { background: rgba(214, 172, 96, .16); }
.hamburger-line { width: 20px; height: 2px; border-radius: 2px; background: var(--agora-gold-light); }
/* Micro-palier UX P2G.2 — croix de fermeture du tiroir mobile : masquée par défaut (desktop,
   où le tiroir n'existe pas), repositionnée uniquement sous le breakpoint tablette
   (voir @media plus bas). Caractère simple (✕), jamais une image. */
.nav-drawer-close {
  display: none;
  cursor: pointer;
  border: 1px solid var(--agora-gold-line-strong);
  border-radius: var(--agora-radius-btn);
  background: rgba(20, 52, 38, .75);
  color: var(--agora-gold-light);
  font-size: 18px;
  line-height: 1;
}
.nav-drawer-close:hover { background: rgba(214, 172, 96, .16); }
/* Fond assombri du tiroir mobile — cliquable pour fermer (voir _closeNavDrawer). */
.nav-drawer-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(4, 16, 10, .55);
}
.nav-drawer-backdrop[hidden] { display: none; }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.5vw, 23px); font-weight: 600;
  letter-spacing: .06em; color: var(--agora-ivory-title);
}
.brand-baseline {
  font-family: 'Lora', serif; font-size: 10px;
  letter-spacing: .18em; color: rgba(226, 206, 163, .72);
}

.agora-nav { position: relative; display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); flex-wrap: wrap; }
.agora-nav a {
  font-family: 'Cormorant Garamond', serif; font-size: 19px;
  color: #f0e6cf; padding: 10px 2px;
}
.agora-nav a.is-current { color: #f3dda8; border-bottom: 2px solid var(--agora-gold); }

/* Micro-palier 18A.2, point 3 — petite info premium "bientôt disponible" (Dictionnaire/
   Accueil/Communauté), voir config-view.js#_showNavSoonToast. Auto-masquée, jamais bloquante. */
.nav-soon-toast {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  padding: 9px 16px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid var(--agora-gold-line-strong);
  background: linear-gradient(180deg, var(--agora-green-header-a), var(--agora-green-behind));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
  color: var(--agora-ivory);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  white-space: nowrap;
}
.nav-soon-toast[hidden] { display: none; }
.nav-soon-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
  .nav-soon-toast { white-space: normal; max-width: min(86vw, 320px); }
}

/* Vague 3.5 — l'avatar rejoint maintenant Son/Cloche sur TOUS les écrans (desktop
   inclus, voir .header-avatar-btn plus bas) : le cluster devient un vrai groupe flex
   partout (plus un simple display:contents passif), pour que space-between sur
   .agora-header distribue l'espace entre exactement 3 blocs (logo / nav / cluster
   d'actions), jamais entre chaque bouton pris séparément — comportement prévisible
   identique à celui déjà validé en mobile/tablette (margin-left:auto y reste géré
   par le @media ci-dessous, inchangé). */
.header-actions-cluster { display: flex; align-items: center; gap: 14px; }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* Palier 19E.1, section 3/4 — Favoris supprimé (bouton sans handler réel, hérité du
   shell Agora, aucune fonctionnalité utile à Anagrammes, voir _wire() : jamais câblé).
   Remplacé par le vrai avatar du joueur.
   Vague 3.5 — désormais visible PARTOUT, y compris desktop (c'était le seul écran où
   il manquait encore : Son/Cloche/Avatar à droite, navigation centrale inchangée,
   jamais de hamburger desktop qui reste display:none par défaut, inchangé). */
.header-avatar-btn {
  display: flex; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border-radius: var(--agora-radius-pill);
  border: 1px solid var(--agora-gold-line-strong);
  background: rgba(20, 52, 38, .75);
  align-items: center; justify-content: center; overflow: hidden;
}
/* Micro-palier ONLINE O2.1d, Partie A/B — `display:flex` ci-dessus (et ses reprises
   dans les @media plus bas) a une spécificité CSS auteur plus forte que la règle UA
   par défaut `[hidden]{display:none}` : sans cette ligne (placée APRÈS toutes les
   reprises `display:flex`, donc gagnante à spécificité égale), le bouton resterait
   visuellement affiché même masqué en invité par _renderHeaderAvatar() — même piège
   déjà rencontré et corrigé sur .account-menu-panel au palier O2.1. */
.header-avatar-btn[hidden] { display: none; }
.header-avatar-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(226, 206, 163, .6); }

/* --- Micro-palier ONLINE O2.1d, Partie A/B (structure), affiné au Micro-palier
   O2.1e (hiérarchie visuelle) — actions Connexion/Inscription (header invité),
   remplacent l'avatar de compte fictif. Mêmes dimensions que les autres boutons
   du cluster (Son/Cloche/Avatar, 40-44px).
   Hiérarchie reprise de Mots & Stratégie (CSS uniquement, jamais une recopie
   aveugle) : « Se connecter » = SECONDAIRE (fond sombre/transparent, contour
   doré, texte ivoire — mêmes tokens que .btn-outline déjà utilisé partout
   ailleurs dans Anagrammes) ; « Créer un compte » = PRINCIPAL doré chaud, texte
   vert très sombre (mêmes tokens --agora-gold-btn/--agora-gold-btn-border que
   .btn-start, LE bouton premium déjà établi de l'app — jamais une nouvelle
   couleur inventée pour ce palier). --- */
.header-auth-actions { display: flex; align-items: center; gap: 8px; }
.header-auth-actions[hidden] { display: none; }
.header-auth-btn {
  min-height: 40px; padding: 0 16px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .6);
  background: var(--agora-gold-tint); color: #f2dcab;
  font-family: 'Lora', serif; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.header-auth-btn:hover { background: rgba(214, 172, 96, .22); border-color: rgba(214, 172, 96, .85); }
/* Jamais uniquement la couleur pour le focus clavier (section « focus » du palier
   O2.1e) : contour ÉPAIS + décalage, visible même en cas de daltonisme. */
.header-auth-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.header-auth-btn--primary {
  border-color: var(--agora-gold-btn-border);
  background: var(--agora-gold-btn);
  color: #20340f;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
}
.header-auth-btn--primary:hover { filter: brightness(1.05); }
/* Contour doré hérité de .header-auth-btn:focus-visible ci-dessus (jamais un vert
   foncé ici : avec outline-offset, l'anneau retombe sur le fond sombre de la page,
   où un contour sombre serait quasi invisible — le doré reste lisible dans les deux
   cas, bouton ET fond). */
/* Variante compacte (« Connexion »/« Inscription ») en dessous du seuil mobile ;
   l'aria-label du bouton reste la formulation complète dans les deux cas (section
   accessibilité du palier — jamais un libellé tronqué pour un lecteur d'écran). */
.header-auth-btn-compact { display: none; }
@media (max-width: 480px) {
  .header-auth-btn { padding: 0 12px; font-size: 13px; }
  .header-auth-btn-full { display: none; }
  .header-auth-btn-compact { display: inline; }
}
.header-avatar-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ----------------------------- BOUTON SON (Micro-palier 17B.2, section 4) ----------------------------- */
.btn-sound-toggle {
  position: relative;
  width: 44px; height: 44px; border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .7);
  background: rgba(20, 52, 38, .75);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-sound-toggle:hover { background: rgba(214, 172, 96, .2); }
.btn-sound-toggle img { width: 22px; height: 22px; object-fit: contain; }

/* ----------------------------- CLOCHE DE NOTIFICATIONS (Micro-palier 15F, point 3) ----------------------------- */
.notif-bell-wrap { position: relative; }
.btn-notif-bell {
  position: relative;
  width: 44px; height: 44px; border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .7);
  background: rgba(20, 52, 38, .75);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-notif-bell:hover { background: rgba(214, 172, 96, .2); }
.btn-notif-bell img { width: 22px; height: 22px; object-fit: contain; }
.notif-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; border: 1.5px solid var(--agora-panel, #001e14);
  background: #d6483f; color: #fff8ec;
  font-family: 'Lora', serif; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center;
}
.notif-bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(360px, 88vw); max-height: 70vh; overflow: auto;
  border-radius: 14px; border: 1px solid var(--agora-gold-line-strong);
  background: linear-gradient(180deg, rgba(12, 46, 31, .98), rgba(6, 26, 18, .98));
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  padding: 6px;
}
.notif-bell-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; }
.notif-bell-panel-head h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--agora-gold-light); }
.notif-bell-panel-close { width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: #f0e6cf; font-size: 18px; cursor: pointer; line-height: 1; }
.notif-bell-panel-close:hover { background: rgba(214, 172, 96, .16); }
.notif-bell-empty { margin: 4px; padding: 22px 14px; text-align: center; font-family: 'Lora', serif; font-size: 14px; color: rgba(232, 238, 235, .65); }
.notif-bell-list { display: flex; flex-direction: column; gap: 6px; }
.notif-bell-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(214, 172, 96, .18);
}
.notif-bell-item-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(240, 215, 138, .6); background: rgba(9, 68, 43, .5); }
.notif-bell-item-body { flex: 1 1 auto; min-width: 0; }
.notif-bell-item-title { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 15.5px; font-weight: 600; color: #f0e6cf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-bell-item-sub { margin: 2px 0 0; font-family: 'Lora', serif; font-size: 11.5px; color: rgba(232, 238, 235, .65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-bell-item-btn {
  flex: 0 0 auto; min-height: 32px; padding: 0 14px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid var(--agora-gold-line-strong);
  background: var(--agora-gold-strong, rgba(216,180,92,0.8)); color: #17301f;
  font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; cursor: pointer;
}
.notif-bell-item-btn:hover { filter: brightness(1.06); }
/* Constaté en test réel (390px) : ancré à `right:0` du bouton cloche, le panneau
   débordait hors de l'écran à gauche dès que le ruban d'actions du header passe à la
   ligne (la cloche n'est alors plus proche du bord droit). Bascule en feuille flottante
   centrée sur la largeur de l'écran plutôt qu'ancrée à un bouton dont la position varie. */
@media (max-width: 480px) {
  .notif-bell-panel { position: fixed; top: 72px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); max-width: 360px; }
}

/* --- Micro-palier ONLINE O2.1 — menu compte (clic sur l'avatar du header).
   Même recette que .notif-bell-wrap/.notif-bell-panel ci-dessus (ancrage,
   largeur, repli mobile en feuille centrée) : jamais un second mécanisme de
   dropdown, mêmes tokens de couleur que le reste du fichier. --- */
.account-menu-wrap { position: relative; }
.account-menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  /* Micro-palier ONLINE O2.1c, point 1 — légèrement élargi pour accueillir les
     textes agrandis ci-dessous sans les tasser (jamais un menu massif). */
  width: min(320px, 88vw); max-height: 70vh; overflow: auto;
  border-radius: 14px; border: 1px solid var(--agora-gold-line-strong);
  background: linear-gradient(180deg, rgba(12, 46, 31, .98), rgba(6, 26, 18, .98));
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
/* `display:flex` ci-dessus a une spécificité CSS auteur plus forte que la règle UA
   par défaut `[hidden]{display:none}` : sans cette ligne, le panneau resterait
   visuellement affiché même avec l'attribut `hidden` posé par _renderAccountMenu()
   (même piège que .modal-backdrop[hidden] ci-dessous, déjà traité pour les modales). */
.account-menu-panel[hidden] { display: none; }
.account-menu-identity { display: flex; align-items: center; gap: 12px; }
.account-menu-avatar {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--agora-radius-pill);
  border: 2px solid var(--agora-gold); background-size: cover, cover;
  background-position: center top, center center; background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
}
/* Micro-palier ONLINE O2.1c, point 1 — textes du menu compte légèrement agrandis (lisibilité desktop), hiérarchie premium conservée. */
.account-menu-name { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 18.5px; font-weight: 600; color: var(--agora-text-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-country { margin: 2px 0 0; font-family: 'Lora', serif; font-size: 13.5px; color: var(--agora-text-soft); }
.account-menu-guest-text, .account-menu-restoring { margin: 0; font-family: 'Lora', serif; font-size: 14px; line-height: 1.55; color: var(--agora-text-soft); }
.account-menu-actions { display: flex; flex-direction: column; gap: 6px; }
.account-menu-item {
  min-height: 42px; padding: 0 14px; text-align: left;
  border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .4);
  background: transparent; color: var(--agora-text-white);
  font-family: 'Lora', serif; font-size: 15px; cursor: pointer;
}
.account-menu-item:hover { background: rgba(214, 172, 96, .14); }
.account-menu-item:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.account-menu-item--primary { border-color: var(--agora-gold); background: var(--agora-gold-tint); color: #f2dcab; font-weight: 600; }
.account-menu-item--primary:hover { background: rgba(214, 172, 96, .3); }
.account-menu-item--danger { color: #e2a25a; }
@media (max-width: 480px) {
  .account-menu-panel { position: fixed; top: 72px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); max-width: 320px; }
}

/* ----------------------------- MAIN ----------------------------- */
.agora-main {
  max-width: var(--agora-max-width);
  margin: 0 auto;
  /* Palier 13B, section 7/8 — vertical trim : le bouton « Commencer la
     partie » doit rester visible sans scroll à 1920×1080/1440×900. */
  padding: clamp(10px, 1.2vw, 18px) clamp(16px, 3vw, 44px) clamp(16px, 2vw, 28px);
}

/* ----------------------------- HERO ----------------------------- */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.hero-kicker {
  margin: 0; font-family: 'Lora', serif;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .34em;
  color: rgba(235, 216, 175, .85);
}
/* Palier 13D, section 4 — le symbole décoratif et les palmes avaient
   perdu de leur présence au Palier 13B (trim de hauteur agressif) ;
   restaurés ici à une taille proche de l'originale, avec davantage
   d'air vertical autour (kicker -> ornement -> titre). */
.hero-ornament {
  display: block; width: clamp(140px, 16vw, 240px); height: auto;
  margin: 16px 0 6px; opacity: .95;
}
.hero-title-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vw, 26px); width: 100%;
}
.hero-palm { width: clamp(32px, 4vw, 66px); height: auto; opacity: .95; }
.hero-palm--right { transform: scaleX(-1); }
.hero-title { margin: 0; line-height: 1; }
.hero-title img { display: block; width: clamp(260px, 40vw, 600px); height: auto; }
.hero-subtitle {
  margin: 10px 0 0; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(15px, 1.3vw, 20px); color: #f4ead3;
}
.hero-benefits {
  list-style: none; margin: clamp(14px, 1.6vw, 22px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 3.4vw, 58px);
}
.hero-benefits li { display: flex; align-items: center; gap: 12px; text-align: left; }
.hero-benefits img { width: 42px; height: 42px; flex: 0 0 auto; }
.hero-benefits span {
  font-family: 'Lora', serif; font-size: 15px; line-height: 1.35; color: #f2e7d0;
}

/* ----------------------------- CARTES DE MODES ----------------------------- */
.modes { margin-top: clamp(14px, 1.6vw, 22px); }
/* Palier 13D, section 1 — les 5 cartes du haut étaient devenues trop
   rectangulaires (larges/basses) une fois étirées sur toute la largeur
   du conteneur principal. Un max-width propre à la grille (plus étroit
   que --agora-max-width) les rapproche d'un format quasi carré, sans
   changer la largeur du reste de la page (hero/paramètres). */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  max-width: 1040px;
  margin: 0 auto;
}

.mode-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  /* Palier 13D, section 1 — hauteur restaurée (152px -> 208px) pour un
     format plus proche du carré, esprit de la première version. */
  padding: 16px 12px 38px;
  min-height: 208px;
  border-radius: var(--agora-radius-card);
  border: 1px solid var(--agora-gold-line);
  background-color: var(--agora-green-card);
  background-image: var(--agora-green-card-grad);
  color: var(--agora-ivory);
  cursor: pointer; text-align: center;
  transition: var(--agora-transition-card);
}
.mode-card--silver { border-color: var(--agora-silver-line); }
.mode-card:hover { transform: translateY(-2px); }

.mode-card.is-selected {
  background-image: var(--agora-sel-bg);
  border-color: var(--agora-sel-border);
  color: var(--agora-sel-fg);
  box-shadow: var(--agora-sel-shadow);
}

.mode-icon { width: 52px; height: 52px; object-fit: contain; }
.mode-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: inherit; }
.mode-desc  { font-family: 'Lora', serif; font-size: 13.5px; line-height: 1.35; color: inherit; }

/* Feuillages : vert sur carte inactive, dorée/sèche sur carte sélectionnée */
.leaf { position: absolute; }
.leaf--green { bottom: 6px; width: 54px; opacity: .55; }
.leaf--dry   { bottom: 10px; width: 52px; opacity: .6; display: none; }
.leaf--left  { left: 10px; transform: scaleX(-1); }
.leaf--right { right: 10px; }
.mode-card.is-selected .leaf--green { display: none; }
.mode-card.is-selected .leaf--dry   { display: block; }

/* Icône Multijoueur : deux variantes fournies */
.mode-icon--on { display: none; }
.mode-card.is-selected .mode-icon--off { display: none; }
.mode-card.is-selected .mode-icon--on  { display: block; }

/* Marque de sélection */
.mode-check {
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  width: 32px; height: 32px; display: none;
}
.mode-card.is-selected .mode-check { display: block; }

/* ----------------------------- PANNEAU DE CONFIGURATION ----------------------------- */
.config-panel {
  margin-top: clamp(8px, 0.9vw, 12px);
  border: 1px solid var(--agora-gold-line);
  border-radius: var(--agora-radius-card);
  background: var(--agora-green-panel);
  padding: clamp(10px, 1.1vw, 14px);
}
/* align-items:flex-start (au lieu de stretch) : évite qu'une colonne plus
   courte (ex. les paramètres, section 12, une fois le stepper « Type de
   jeu » retiré) soit étirée artificiellement pour matcher l'autre — plus
   de grand vide inutile en bas d'une colonne. */
.config-row { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 36px); align-items: flex-start; }
.config-left  { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.config-right { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Palier 13C, section 2 — en Local/Duel, la zone joueurs (plusieurs cartes
   agrandies côte à côte) a besoin de nettement plus de largeur que les
   paramètres : rééquilibre le partage de l'espace au lieu du split
   ~égal par défaut, plutôt que de re-rétrécir les cartes (autorisé
   explicitement par la consigne — "rééquilibrer... mais pas minuscule").
   Palier 13D — ratio adouci (2:1 -> 3:2) : la page globale ayant été
   resserrée (section 1), un partage 2:1 rendait la colonne paramètres
   trop étroite (le libellé « Type de jeu » s'enroulait sur 2 lignes). */
/* Micro-palier final, section 1 — ratio légèrement réajusté (3:2 -> 4:2.4)
   pour absorber les cartes joueurs élargies (148px -> 162px) et garder
   les 4 joueurs sur une seule ligne, sans re-rétrécir les cartes ni
   faire réapparaître le repli à 2 lignes du libellé « Type de jeu ». */
.config-row.is-local-wide .config-left  { flex: 3.4 1 540px; }
.config-row.is-local-wide .config-right { flex: 2.4 1 320px; }
.config-divider {
  flex: 0 0 1px; align-self: stretch;
  background: linear-gradient(180deg, rgba(214,172,96,0), rgba(214,172,96,.45), rgba(214,172,96,0));
}
/* Palier 13, section 7/39 — sans cette règle, l'attribut `hidden` posé
   par config-view.js (Solo/Contre l'ordinateur, plus rien à afficher
   à gauche une fois l'avatar/pseudo/pays déplacés vers la carte
   profil) n'a AUCUN effet visuel : une règle de classe avec `display`
   (ci-dessus) l'emporte toujours sur le `display:none` par défaut du
   navigateur pour `[hidden]` (même filet de sécurité déjà en place
   pour `.game-shell[hidden]` côté jeu). */
.config-left[hidden], .config-divider[hidden] { display: none; }
.config-title {
  margin: 0; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 1.3vw, 21px); font-weight: 600;
  color: var(--agora-text-white);
}
#left-body { display: flex; flex-direction: column; gap: 14px; }

/* --- Bloc avatar solo --- */
.solo-avatar-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 26px); }
.avatar-holder { position: relative; flex: 0 0 auto; }

/* .avatar-disc/.avatar-empty sont désormais de vrais <button> (cercle entier
   cliquable, comme le bouton texte « Changer d’avatar ») : padding/cursor
   ajoutés pour neutraliser le chrome par défaut du navigateur, aucune valeur
   visuelle existante modifiée (taille/bordure/image/palette inchangées). */
.avatar-disc {
  width: 160px; height: 160px; padding: 0; cursor: pointer;
  border-radius: var(--agora-radius-pill);
  border: 2.5px solid var(--agora-gold);
  box-shadow: inset 0 0 0 2px var(--agora-green-inner-ring);
  background-size: cover, cover;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
}
.avatar-empty {
  width: 160px; height: 160px; padding: 0; cursor: pointer;
  border-radius: var(--agora-radius-pill);
  border: 2px dashed rgba(214, 172, 96, .6);
  background: var(--agora-green-slot);
  display: flex; align-items: center; justify-content: center;
  color: rgba(226, 206, 163, .5);
}
.avatar-edit {
  position: absolute; right: -2px; bottom: 0;
  width: 44px; height: 44px; border-radius: var(--agora-radius-pill);
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.avatar-edit img { width: 30px; height: 30px; }

.solo-copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.solo-headline { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #f4e8ce; }
.solo-text {
  margin: 0; font-family: 'Lora', serif; font-size: 14px; line-height: 1.5;
  color: var(--agora-text-soft); max-width: 42ch;
}

.btn-outline {
  min-height: 44px; white-space: nowrap; padding: 10px 22px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .8);
  background: var(--agora-gold-tint); color: #f2dcab;
  font-family: 'Cormorant Garamond', serif; font-size: 19px; cursor: pointer;
}
.solo-copy .btn-outline { margin-top: 4px; }
.btn-outline:hover { background: rgba(214, 172, 96, .22); }

/* --- Emplacements joueurs (local / duel / ordi) --- */
.slots-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: clamp(8px, 1.4vw, 22px); }
.slot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 1 176px; min-width: 0; }
.slot-media { position: relative; width: 100%; max-width: 152px; }
.slot-disc {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--agora-radius-pill);
  border: 2.5px solid var(--agora-gold);
  box-shadow: inset 0 0 0 2px var(--agora-green-inner-ring);
  background-size: cover, cover;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
}
.slot-empty {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--agora-radius-pill);
  border: 2px dashed rgba(214, 172, 96, .6);
  background: var(--agora-green-slot);
  color: rgba(226, 206, 163, .5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slot-empty:hover { background: rgba(214, 172, 96, .16); }
.slot-edit {
  position: absolute; right: -4px; bottom: 2px;
  width: 44px; height: 44px; border-radius: var(--agora-radius-pill);
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slot-edit img { width: 30px; height: 30px; }
.slot-name {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600;
  color: var(--agora-text-white); text-align: center;
}

/* --- Palier ONLINE O1 — onglet « En ligne » de la modale Profil : compte Agora
   (lecture seule, aucun gameplay en ligne). Réutilise les tokens déjà définis
   dans :host ci-dessus (--agora-gold, --agora-green-*, --agora-radius-*),
   jamais une nouvelle palette. --- */
.profile-online-account {
  display: flex; flex-direction: column; gap: 14px;
  /* Micro-palier ONLINE O2.1c, point 2 — max-width légèrement élargi pour
     accueillir les textes agrandis ci-dessous sans multiplier les retours
     à la ligne (desktop reste compact, voir .agora-account-modal). */
  padding: 22px; max-width: 49ch;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-card);
  background: var(--agora-green-panel);
}
.profile-online-eyebrow {
  margin: 0; font-family: 'Lora', serif; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--agora-text-muted);
}
.profile-online-account h3 {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 600; color: var(--agora-ivory-title);
}
.profile-online-desc { margin: 0; font-family: 'Lora', serif; font-size: 15px; line-height: 1.55; color: var(--agora-text-soft); }
.profile-online-loading { margin: 0; font-family: 'Lora', serif; font-size: 14px; color: var(--agora-text-soft); }
.profile-online-error { margin: 0; font-family: 'Lora', serif; font-size: 13.5px; color: #e2a25a; }

/* Palier MICRO-PATCH UI — indicateur TRÈS discret pendant un changement de filtre déjà visible
   (cartes de l'ancien filtre gardées à l'écran, voir _buildServerOnlineStatsBodyHtml) : jamais un
   gros message qui déplacerait le contenu, juste une mention en italique sous le badge. */
.profile-online-updating { margin: 0 0 6px; font-family: 'Lora', serif; font-style: italic; font-size: 11.5px; color: var(--agora-text-muted); }

/* --- Micro-palier ONLINE O2.1b — bloc bénéfices SIGNUP (repris de M&S,
   index.html#playerAccountSignupIntro), vocabulaire CSS Anagrammes existant
   uniquement (.profile-online-*), jamais une feuille de style copiée.
   Tailles légèrement agrandies au Micro-palier O2.1c, point 2. --- */
.profile-online-intro { display: flex; flex-direction: column; gap: 10px; }
.profile-online-intro-context { margin: 0; font-family: 'Lora', serif; font-size: 13px; color: var(--agora-text-muted); }
.profile-online-intro-context strong { color: var(--agora-ivory-title); font-weight: 600; }
.profile-online-benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.profile-online-benefits li { display: flex; flex-direction: column; gap: 1px; }
.profile-online-benefits b { font-family: 'Cormorant Garamond', serif; font-size: 16.5px; font-weight: 600; color: var(--agora-ivory-title); }
.profile-online-benefits span { font-family: 'Lora', serif; font-size: 13.5px; line-height: 1.4; color: var(--agora-text-soft); }
.profile-online-intro-trust { margin: 0; font-family: 'Lora', serif; font-size: 12.5px; color: var(--agora-text-muted); }

.profile-online-otp-form { display: flex; flex-direction: column; gap: 8px; }
.profile-online-label { font-family: 'Lora', serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--agora-text-muted); }
.profile-online-input {
  min-height: 44px; padding: 0 14px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .5); background: rgba(6, 26, 18, .65);
  color: var(--agora-text); font-family: 'Lora', serif; font-size: 15.5px;
}
.profile-online-input:focus { outline: none; border-color: var(--agora-gold); background: rgba(6, 26, 18, .9); }
.profile-online-input:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-online-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.profile-online-actions .btn-outline { min-height: 42px; padding: 0 18px; font-size: 15.5px; }

/* --- Micro-palier ONLINE O2.1g, Partie C — étape OTP enrichie (compte à
   rebours de renvoi, aide Spam, message de succès). Mêmes tokens que le
   reste du fichier, jamais une nouvelle palette. --- */
.profile-online-notice-success {
  margin: 0; padding: 8px 12px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(166, 199, 146, .5); background: rgba(166, 199, 146, .1);
  font-family: 'Lora', serif; font-size: 13px; color: #c8e3b8;
}
.profile-online-otp-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.profile-online-otp-field { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; }
.profile-online-resend-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; white-space: nowrap;
  border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .5); background: transparent;
  color: var(--agora-text-soft); font-family: 'Lora', serif; font-size: 13px; cursor: pointer;
}
.profile-online-resend-btn:not(:disabled):hover { background: rgba(214, 172, 96, .16); color: #f2dcab; }
.profile-online-resend-btn:disabled { cursor: default; opacity: .6; }
.profile-online-resend-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-online-help { display: flex; flex-direction: column; gap: 8px; }
.profile-online-help-toggle {
  align-self: flex-start; padding: 0; border: none; background: transparent;
  color: var(--agora-text-soft); font-family: 'Lora', serif; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.profile-online-help-toggle:hover { color: #f2dcab; }
.profile-online-help-toggle:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-online-help-panel {
  padding: 10px 12px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .3); background: rgba(214, 172, 96, .06);
  display: flex; flex-direction: column; gap: 6px;
}
/* `display:flex` ci-dessus a une spécificité CSS auteur plus forte que la règle UA
   par défaut `[hidden]{display:none}` — même piège déjà rencontré et corrigé sur
   .account-menu-panel/.header-avatar-btn (O2.1/O2.1d) : jamais sans cette ligne. */
.profile-online-help-panel[hidden] { display: none; }
.profile-online-help-panel p { margin: 0; font-family: 'Lora', serif; font-size: 12.5px; line-height: 1.5; color: var(--agora-text-soft); }
.profile-online-help-panel strong { color: var(--agora-ivory-title); }

.profile-online-identity { display: flex; align-items: center; gap: 14px; }
.profile-online-avatar {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--agora-radius-pill);
  border: 2px solid var(--agora-gold); background-size: cover, cover;
  background-position: center top, center center; background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
}
.profile-online-identity-text { min-width: 0; }
.profile-online-pseudo { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--agora-text-white); }
.profile-online-country { margin: 2px 0 0; font-family: 'Lora', serif; font-size: 13px; color: var(--agora-text-soft); }

/* --- Palier P2H.1, section 10 — variante COMPACTE du bloc compte connecté, réservée à
   l'onglet En ligne (voir _buildAgoraConnectedIdentityCompactHtml, config-profile-panel.js) :
   une seule ligne (avatar+identité à gauche, Déconnexion à droite) au lieu du bloc pleine
   largeur empilé verticalement — laisse davantage de place aux statistiques en dessous. La
   modale « Mon compte Agora » garde .profile-online-account--connected (non compact),
   inchangée. --- */
.profile-online-account--compact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  max-width: none;
}
.profile-online-account--compact .profile-online-identity { gap: 10px; min-width: 0; }
.profile-online-account--compact .profile-online-avatar--sm { width: 40px; height: 40px; }
.profile-online-account--compact .profile-online-pseudo { font-size: 16px; }
.profile-online-account--compact .profile-online-country { font-size: 12px; }
.profile-online-account--compact .btn-outline { flex: 0 0 auto; min-height: 36px; padding: 0 16px; font-size: 13.5px; }
@media (max-width: 420px) {
  .profile-online-account--compact { justify-content: flex-start; }
  .profile-online-account--compact .btn-outline { width: 100%; }
}

/* --- Palier P2H.2, section 6 — bandeau minimal non connecté (onglet En ligne) : pas de bloc
   pleine largeur, pas de bouton (le CTA réel vit dans .profile-rank-cta ci-dessous, jamais une
   répétition) — un simple rappel textuel pour que les statistiques restent l'élément principal
   de l'onglet. --- */
.profile-online-guest-note {
  margin: 0 0 16px;
  font-family: 'Lora', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--agora-text-muted);
}

/* --- Palier P2H.2, section 5 — bloc compact « Classements Agora » (non connecté uniquement) :
   remplace les 3 cartes Pays/Continent/Monde (réservées au connecté, voir ci-dessous) par une
   seule invitation claire — le classement futur dépendra de l'identité liée au COMPTE, jamais
   présenté comme un classement personnel à un joueur anonyme. --- */
.profile-rank-cta {
  padding: 16px;
  margin: 0 0 18px;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-card);
  background: var(--agora-green-panel);
}
.profile-rank-cta .profile-section-title { margin-top: 0; }
.profile-rank-cta .btn-outline { margin-top: 4px; }

/* --- Palier P2I.4d — cartes « Votre classement Anagrammes » (Pays/Continent/Monde),
   onglet En ligne : vraies valeurs serveur (fn_get_anagrammes_account_ranks_v1), jamais un
   rang inventé. Mêmes tokens/mêmes gabarits que .profile-online-account ci-dessus. --- */
.profile-rank-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.profile-rank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 112px;
  padding: 14px 8px;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-card);
  background:
    radial-gradient(circle at 50% 18%, var(--agora-gold-tint-hover), transparent 56%),
    var(--agora-green-panel);
  text-align: center;
}
/* Palier P2I.4f — hiérarchie visuelle reprise de M&S (agora-rank-card__scope/__rank) : le nom
   géographique et surtout le rang doivent être immédiatement lisibles, jamais des libellés
   discrets noyés dans le reste de la carte. */
.profile-rank-card-scope {
  overflow: hidden;
  font-family: 'Lora', serif; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--agora-gold-light);
}
/* Palier P2I.4h — police RÉELLEMENT identifiée côté M&S (audit P2I.4g : .agora-rank-card__rank
   n'a pas de font-family propre, hérite de body { font-family: "Palatino Linotype", "Book
   Antiqua", Georgia, serif } — styles/app.css:251 côté mots-strategie). Appliquée ICI de façon
   CIBLÉE (classe dédiée), jamais en changeant la police globale d'Anagrammes. */
.profile-rank-card-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Palier P2I.4g/P2I.4h — le rang (#1) doit être BLANC/ivoire très clair (jamais doré : repris
   littéralement de M&S, .agora-rank-card__rank color:#fff7e8), élément visuellement
   dominant de la carte ; seul le nom géographique (ci-dessus) reste doré. Glow discret,
   jamais agressif (même proportion que M&S : text-shadow faible opacité). */
.profile-rank-card-value {
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: .95;
  color: var(--agora-text-white);
  text-shadow: 0 0 14px rgba(214, 172, 96, .2);
}
/* Palier P2I.4h, section 2/3 — lauriers (asset déjà existant, assets/results/palme-l.png,
   déjà utilisé pour signaler une victoire en fin de partie — même asset repris ici, jamais une
   nouvelle image) : discrets, de part et d'autre du rang, UNIQUEMENT si ce rang précis fait
   partie du Top 5 (voir _buildOnlineRankCardsHtml — logique par carte, indépendante entre
   Pays/Continent/Monde). */
.profile-rank-card-laurel {
  width: 20px;
  height: auto;
  flex: 0 0 auto;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(240, 215, 138, .3));
}
.profile-rank-card-laurel--r { transform: scaleX(-1); }
.profile-rank-card-meta {
  font-family: 'Lora', serif; font-size: 11.5px; font-weight: 600; color: var(--agora-text-muted);
}
@media (max-width: 520px) {
  .profile-rank-cards { grid-template-columns: 1fr; }
}

/* --- Palier P2I.4e/P2I.4f — bloc « Classements Anagrammes » (onglet En ligne, compte
   connecté uniquement) : onglets Pays/Continent/Global + top 5 réel, classé EXCLUSIVEMENT
   par la Cote Anagrammes (jamais l'XP M&S). Même carte/mêmes tokens que .profile-rank-cta
   ci-dessus ; onglets repris de .profile-online-stats-filter-btn (même famille de
   segmented control que le filtre Toutes/Classique/Ruée) pour rester visuellement
   cohérent avec le reste de l'onglet. --- */
.profile-leaderboard-card {
  padding: 16px;
  margin: 0 0 18px;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-card);
  background: var(--agora-green-panel);
}
.profile-leaderboard-card .profile-section-title { margin-top: 0; margin-bottom: 1px; }
/* Palier P2I.4f/P2I.4g — nom réel de la portée active, repris de M&S (agoraLeaderboardScopeTitle) :
   jamais un libellé générique une fois la portée choisie. Simplifié en P2I.4g (plus de phrase
   "Pays sélectionné :") : le nom géographique seul, bien visible sous le titre. Palier P2I.4i —
   blanc cassé/ivoire clair (jamais doré, pour une identification immédiate, même principe que
   .profile-rank-card-value) : --agora-gold-light rendait le texte trop proche du fond doré des
   onglets juste en dessous. */
.profile-leaderboard-scope-subtitle {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--agora-text-white);
}
.profile-leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.profile-leaderboard-tab {
  appearance: none;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-pill);
  background: transparent;
  color: var(--agora-text-soft);
  font-family: 'Lora', serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 13px;
  cursor: pointer;
  transition: var(--agora-transition-choice);
}
.profile-leaderboard-tab:hover { color: var(--agora-text); border-color: var(--agora-gold-line-soft); }
.profile-leaderboard-tab:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-leaderboard-tab.is-active {
  background: var(--agora-gold-tint);
  border-color: var(--agora-gold-line);
  color: var(--agora-ivory-title);
}
/* Palier P2I.4h, section 5 — sélecteur compact Top 5 / Autour de moi, affiché UNIQUEMENT
   quand le joueur est classé au-delà du Top 5 dans la portée active (sinon il est déjà
   visible, aucun sélecteur nécessaire). Même famille visuelle que .profile-leaderboard-tab
   ci-dessus, juste plus compact (toujours 2 choix seulement). */
.profile-leaderboard-mode-toggle {
  display: flex;
  gap: 6px;
  margin: -2px 0 12px;
}
.profile-leaderboard-mode-btn {
  appearance: none;
  min-height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 172, 96, .3);
  border-radius: var(--agora-radius-pill);
  background: transparent;
  color: var(--agora-text-soft);
  font-family: 'Lora', serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 11px;
  cursor: pointer;
  transition: var(--agora-transition-choice);
}
.profile-leaderboard-mode-btn:hover { color: var(--agora-text); border-color: var(--agora-gold-line-soft); }
.profile-leaderboard-mode-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-leaderboard-mode-btn.is-active {
  background: var(--agora-gold-tint);
  border-color: var(--agora-gold-line);
  color: var(--agora-ivory-title);
}
.profile-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-leaderboard-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid rgba(214, 172, 96, .18);
  border-radius: var(--agora-radius-card);
  background: var(--agora-green-slot);
}
.profile-leaderboard-row.is-current-player {
  background: var(--agora-gold-tint);
  border-color: var(--agora-gold-line);
}
.profile-leaderboard-rank {
  flex: 0 0 26px;
  text-align: right;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--agora-text-muted);
}
.profile-leaderboard-row.is-current-player .profile-leaderboard-rank { color: var(--agora-ivory-title); }
.profile-leaderboard-player {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 140px;
  min-width: 0;
}
.profile-leaderboard-avatar {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(214, 172, 96, .4);
}
.profile-leaderboard-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Lora', serif;
  font-size: 13px;
  color: var(--agora-text);
}
.profile-leaderboard-you-badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--agora-radius-pill);
  background: var(--agora-gold-tint);
  border: 1px solid var(--agora-gold-line);
  color: var(--agora-ivory-title);
  font-family: 'Lora', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.profile-leaderboard-country { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.country-flag-mini {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(214, 172, 96, .4);
  background: var(--agora-green-slot);
}
.profile-leaderboard-country-name {
  font-family: 'Lora', serif;
  font-size: 11.5px;
  color: var(--agora-text-soft);
  white-space: nowrap;
}
/* Palier P2I.4g — typographie reprise de M&S pour une valeur de classement en ligne : le
   libellé ("Cote") reste petit/discret, la VALEUR domine visuellement (même logique que
   .agora-leaderboard-xp de M&S, qui n'affiche qu'un nombre fort suivi de son unité). */
.profile-leaderboard-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.profile-leaderboard-rating-label {
  font-family: 'Lora', serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--agora-text-muted);
}
.profile-leaderboard-rating-value {
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--agora-text-white);
}
.profile-leaderboard-xp {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Lora', serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--agora-gold-light);
}
.profile-leaderboard-meta {
  flex: 1 0 100%;
  padding-left: 32px;
  font-family: 'Lora', serif;
  font-size: 11px;
  color: var(--agora-text-muted);
}
.profile-leaderboard-own-rank {
  margin: 10px 0 0;
  font-family: 'Lora', serif;
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  color: var(--agora-text-muted);
}
@media (max-width: 520px) {
  .profile-leaderboard-tabs { gap: 8px; }
  .profile-leaderboard-tab { flex: 1 1 auto; text-align: center; }
  .profile-leaderboard-mode-btn { flex: 1 1 auto; text-align: center; }
  .profile-leaderboard-meta { padding-left: 0; }
}

/* --- Palier P2I.3d — badges discrets distinguant la SOURCE des statistiques affichées dans
   l'onglet En ligne : "Vérifiées par Agora" (compte connecté, ledger serveur
   anagrammes_player_results) vs "Données de cet appareil" (repli local, voir
   _buildServerOnlineStatsBodyHtml/_buildLocalOnlineStatsBodyHtml). Jamais un gros bandeau :
   un simple petit pill, même famille visuelle que .choice-new-badge (teinte or) pour le
   premium verified, muted pour le repli local. --- */
.profile-online-verified-badge {
  display: inline-flex; align-items: center; margin: 0 0 6px;
  padding: 3px 11px; border-radius: var(--agora-radius-pill);
  background: linear-gradient(170deg, #f0d089, #d9ab4f); color: #1d3325;
  font-family: 'Lora', serif; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.profile-online-local-badge {
  margin: 0 0 6px; font-family: 'Lora', serif; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--agora-text-muted);
}

/* --- Palier P2H, section 3 — segmented control Toutes/Anagrammes classiques/Ruée de mots
   (onglet En ligne) : même famille visuelle que .profile-tabs (pilules, état actif en teinte
   or), en plus compact pour rester un filtre secondaire, jamais une seconde navigation
   principale. --- */
.profile-online-stats-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.profile-online-stats-filter-btn {
  appearance: none;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 172, 96, .35);
  border-radius: var(--agora-radius-pill);
  background: transparent;
  color: var(--agora-text-soft);
  font-family: 'Lora', serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  transition: var(--agora-transition-choice);
}
.profile-online-stats-filter-btn:hover { color: var(--agora-text); border-color: var(--agora-gold-line-soft); }
.profile-online-stats-filter-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.profile-online-stats-filter-btn.is-active {
  background: var(--agora-gold-tint);
  border-color: var(--agora-gold-line);
  color: var(--agora-ivory-title);
}
@media (max-width: 520px) {
  .profile-online-stats-filter { gap: 8px; }
  .profile-online-stats-filter-btn { flex: 1 1 auto; text-align: center; }
}

/* --- Palier ONLINE O2 — bande discrète « Compte Agora » sous l'avatar/XP du
   profil principal (jamais un gros panneau, voir en-tête de
   _renderAgoraLinkRowHtml dans config-view.js). Mêmes tokens que le reste du
   fichier (--agora-gold/--agora-radius-*), jamais une nouvelle palette. --- */
.agora-link-row {
  margin-top: 10px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(214, 172, 96, .32);
  border-radius: var(--agora-radius-btn);
  background: rgba(214, 172, 96, .06);
}
.agora-link-account { margin: 0; font-family: 'Lora', serif; font-size: 12.5px; color: var(--agora-text-soft); }
.agora-link-account strong { color: var(--agora-ivory-title); font-weight: 600; }
.agora-link-suggestion { display: flex; align-items: center; flex-wrap: wrap; }
.agora-link-suggestion-text { margin: 0; font-family: 'Lora', serif; font-size: 12px; line-height: 1.4; color: var(--agora-text-muted); }
.agora-link-btn {
  min-height: 30px; padding: 0 14px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .6);
  background: var(--agora-gold-tint); color: #f2dcab;
  font-family: 'Lora', serif; font-size: 12.5px; cursor: pointer;
}
.agora-link-btn:hover { background: rgba(214, 172, 96, .22); }
.agora-link-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }

/* --- Micro-palier ONLINE O2.1 — modale légère « Mon compte Agora » (#agora-
   account-modal). Réutilise .modal/.modal-backdrop/.modal-head/.modal-title/
   .modal-close déjà définis plus haut (MODALE AVATAR), jamais une nouvelle
   charte de modale — juste une largeur plus compacte (« modale légère »,
   jamais les 720px de la modale avatar/pays à 84 choix). --- */
/* Micro-palier ONLINE O2.1c, point 2 — légèrement élargie (440 -> 470px) pour
   accueillir les textes agrandis sans les tasser ; reste compacte (jamais les
   720px de la modale avatar/pays). */
.agora-account-modal { width: min(470px, 100%); }
.agora-account-modal-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.agora-account-edit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.agora-account-edit-avatar-row { display: flex; align-items: center; gap: 14px; }
.agora-account-edit-avatar {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--agora-radius-pill);
  border: 2px solid var(--agora-gold); background-size: cover, cover;
  background-position: center top, center center; background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
  display: flex; align-items: center; justify-content: center; color: rgba(226, 206, 163, .6);
}
.agora-account-edit-country-row { display: flex; flex-direction: column; gap: 6px; }
.agora-account-edit-country-row .local-country-btn { align-self: flex-start; }

/* --- Micro-palier ONLINE O2.1c, point 4/5 — fiche d'identité « Mon compte
   Agora » (avatar/pseudo/pays/email + crayons premium). Mêmes tokens que le
   reste du fichier (--agora-gold/--agora-radius-*), jamais une nouvelle
   palette. --- */
.agora-account-fiche { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.agora-account-fiche-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(214, 172, 96, .16);
}
.agora-account-fiche-row:last-of-type { border-bottom: none; }
.agora-account-fiche-avatar {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--agora-radius-pill);
  border: 2px solid var(--agora-gold); background-size: cover, cover;
  background-position: center top, center center; background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
  display: flex; align-items: center; justify-content: center; color: rgba(226, 206, 163, .6);
}
.agora-account-fiche-field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agora-account-fiche-label { font-family: 'Lora', serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--agora-text-muted); }
.agora-account-fiche-value { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--agora-text-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agora-account-fiche-value--muted { font-family: 'Lora', serif; font-size: 14px; font-weight: 400; color: var(--agora-text-muted); }
.agora-account-pencil {
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .5);
  background: transparent; color: var(--agora-gold-light);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.agora-account-pencil:hover { background: rgba(214, 172, 96, .16); }
.agora-account-pencil:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
.agora-account-fiche-id { margin: 2px 0 0; font-family: 'Lora', serif; font-size: 11.5px; color: var(--agora-text-muted); }
.agora-account-email-pending { margin: 2px 0 0; font-family: 'Lora', serif; font-size: 12.5px; line-height: 1.4; color: var(--agora-gold-light); }
.agora-account-email-form { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.agora-account-fiche .agora-link-row { margin-top: 10px; }
.agora-account-fiche > .btn-outline { align-self: flex-start; margin-top: 10px; }

/* La modale avatar/pays (#profile-modal), réutilisée pour le brouillon de
   compte (pickerSlot « account »), doit s'empiler AU-DESSUS de
   #agora-account-modal (restée ouverte dessous) — même principe que
   .locked-avatar-modal au-dessus de #profile-modal (section « sous-fenêtre
   dédiée »), jamais une fermeture forcée de la modale compte en dessous. */
.modal-backdrop#profile-modal.is-account-picker { z-index: 52; }

/* Correctif — #locked-avatar-modal s'empilait uniquement via l'ordre DOM
   (même z-index de base 50 que #profile-modal, voir sa définition plus
   bas), ce qui suffisait au-dessus du picker « profil de jeu » classique
   mais le faisait passer SOUS #profile-modal.is-account-picker (52) dès
   qu'un avatar verrouillé était cliqué depuis « Avatar et pays de mon
   compte Agora ». z-index explicite > 52 : reste au-dessus dans les deux
   contextes, quel que soit l'ordre DOM. */
#locked-avatar-modal { z-index: 53; }

/* Palier P2I.4g, section 2 — modale d'explication de la Cote Anagrammes, ouverte depuis
   l'onglet En ligne (à l'intérieur de #progression-modal, z-index de base 50) : même
   principe de superposition que #locked-avatar-modal ci-dessus. */
#cote-info-modal { z-index: 54; }
.cote-info-modal { max-width: 420px; }

/* ÉCLATS-HD-01e.3 — quand la modale compte est ouverte depuis le bouton "Se connecter"
   d'une fiche Éclat révélée (opts.overEclats, voir config-view.js#_openAgoraAccountModal),
   la collection/fiche restent ouvertes DERRIÈRE elle au lieu d'être fermées : z-index 85,
   au-dessus de .eclats-modal-backdrop (80, styles/eclats-sagesse.css), sous le lightbox HD
   (95, jamais atteignable simultanément par un invité). Classe retirée dans tous les autres
   cas (header, menu compte) : #agora-account-modal garde alors son z-index de base (50),
   indispensable pour rester SOUS .modal-backdrop#profile-modal.is-account-picker (52,
   avatar/pays édités depuis le compte déjà connecté — voir juste au-dessus). */
#agora-account-modal.is-above-eclats { z-index: 85; }
.cote-info-modal-text {
  margin: 0 0 10px;
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--agora-text-soft);
}
.cote-info-modal-example {
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 172, 96, .3);
  border-radius: var(--agora-radius-card);
  background: var(--agora-gold-tint);
  font-family: 'Lora', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--agora-text);
}
/* Bouton ⓘ discret, même famille visuelle que les contrôles verts/dorés existants (ex.
   .avatar-disc), taille confortable au tap mobile (28px, > la cible minimale 24px usuelle). */
.profile-cote-line { display: flex; align-items: center; gap: 6px; }
.profile-cote-info-btn {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 172, 96, .4);
  border-radius: 50%;
  background: var(--agora-green-slot);
  color: var(--agora-gold-light);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: var(--agora-transition-choice);
}
.profile-cote-info-btn:hover { border-color: var(--agora-gold-line); color: var(--agora-ivory-title); }
.profile-cote-info-btn:focus-visible { outline: 2px solid var(--agora-gold); outline-offset: 2px; }
@media (max-width: 520px) {
  .profile-cote-info-btn { width: 28px; height: 28px; font-size: 15px; }
}

/* --- Note « En ligne » --- */
.online-note {
  border: 1px dashed rgba(190, 196, 192, .5);
  border-radius: var(--agora-radius-btn);
  padding: 22px; background: rgba(12, 44, 30, .55);
  display: flex; flex-direction: column; gap: 8px;
}
.online-note h4 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: #e8ecea; }
.online-note p  { margin: 0; font-family: 'Lora', serif; font-size: 14px; line-height: 1.55; color: rgba(232, 238, 235, .75); max-width: 52ch; }
.online-invite-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* --- Palier ONLINE O3 — lobby de salons Anagrammes (2 à 8 joueurs) --- */
.online-lobby-screen, .online-lobby-active {
  border: 1px solid rgba(190, 196, 192, .35);
  border-radius: var(--agora-radius-btn);
  padding: 22px; background: rgba(12, 44, 30, .55);
  display: flex; flex-direction: column; gap: 16px;
}
.online-lobby-active h4, .online-create h4, .online-join h4 {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: #e8ecea;
}
.online-error {
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(176, 56, 56, .18); border: 1px solid rgba(214, 120, 120, .4);
  font-family: 'Lora', serif; font-size: 13.5px; color: #f3d6d6;
}
.online-field-label {
  margin: 0; font-family: 'Lora', serif; font-size: 13px; color: rgba(232, 238, 235, .75);
}
.online-create, .online-join { display: flex; flex-direction: column; gap: 10px; }
.online-divider { height: 1px; background: rgba(190, 196, 192, .25); }

/* Grille dynamique 2 à 8 (jamais de nth-child figé) : se replie naturellement sur l'espace disponible. */
.online-players-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 8px;
}
.online-players-option {
  min-height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(190, 196, 192, .4); background: rgba(255, 255, 255, .04);
  color: #e8ecea; font-family: 'Lora', serif; font-size: 15px; font-weight: 600;
}
.online-players-option.is-selected { border-color: var(--agora-gold-btn-border); background: var(--agora-gold-btn); color: #20340f; }
.online-players-option:disabled { opacity: .5; cursor: not-allowed; }

.online-create-btn, .online-join-btn, .online-leave-btn, .online-copy-btn, .online-start-btn {
  min-height: 42px; border-radius: var(--agora-radius-btn); cursor: pointer;
  font-family: 'Lora', serif; font-size: 14px; font-weight: 600;
}
.online-create-btn:disabled, .online-join-btn:disabled, .online-leave-btn:disabled, .online-start-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Palier ONLINE O4.2 — salon READY (plein, en attente du démarrage par
   l'hôte) et écran transitoire post-démarrage, mêmes codes visuels que
   .online-room-count/.online-error déjà établis ci-dessus (jamais une
   nouvelle direction artistique). */
.online-waiting-host-msg, .online-game-started-msg {
  margin: 0; font-family: 'Lora', serif; font-size: 13.5px; color: rgba(232, 238, 235, .75);
}

/* Palier ONLINE O4.5.1, mandat Partie F, section 39 — décompte d'auto-démarrage :
   simple texte discret sous l'action existante (hôte comme participants), jamais
   une modale/bannière, aucune animation (cohérent avec le reste du lobby premium). */
.online-auto-start-countdown {
  margin: 6px 0 0; font-family: 'Lora', serif; font-size: 13px; color: #f0dca8;
}

/* =============================================================
   Palier O4.7A (RÉVISÉ O4.7D, mandat Section B) — barre de temps
   premium du lobby, RÉUTILISÉE telle quelle par game.css pour
   l'intermanche (même famille de classes, feuille de style SÉPARÉE
   car <agora-config-view> et <agora-game-view> sont deux shadow DOM
   distincts, voir premium-timer.js en-tête).

   Mandat B1 — même grammaire visuelle EXACTE que la barre XP du
   profil (.solo-progress-row .xp-track/.xp-fill, voir plus haut dans
   ce fichier) : track vert très sombre, contour fin doré, coins
   totalement arrondis (999px), remplissage doré/ivoire — AUCUNE
   flamme/étincelle/knob (mandat B3, "ne doit plus donner l'impression
   d'un slider HTML"). Fluidité (transform:scaleX interpolé en RAF) :
   intégralement gérée par premium-timer.js, cette feuille ne peint
   que le résultat. */
.online-lobby-timer-slot { margin: 8px 0 2px; max-width: 300px; }
.premium-timer-bar { width: 100%; }
.premium-timer-track {
  height: 10px; border: 1px solid var(--agora-gold-line); border-radius: 999px;
  background: rgba(9, 30, 20, .8); overflow: hidden;
}
.premium-timer-fill {
  width: 100%; height: 100%; border-radius: inherit;
  transform-origin: left center; will-change: transform;
  background: linear-gradient(90deg, var(--agora-gold), var(--agora-gold-light));
  box-shadow: 0 0 6px rgba(214, 172, 96, .3);
}
.premium-timer-bar.is-warm .premium-timer-fill { box-shadow: 0 0 11px rgba(233, 201, 135, .55); }
.premium-timer-bar.is-hot .premium-timer-fill { box-shadow: 0 0 14px rgba(255, 196, 120, .7); }
.premium-timer-bar.is-done .premium-timer-fill { animation: premiumTimerFlash .5s ease-out; }
@keyframes premiumTimerFlash { 0% { filter: brightness(1); } 40% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) {
  .premium-timer-bar.is-done .premium-timer-fill { animation: none !important; }
}

.online-join-form { display: flex; flex-direction: column; gap: 8px; }
.online-join-input {
  min-height: 42px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(190, 196, 192, .4); background: rgba(255, 255, 255, .06);
  color: #e8ecea; font-family: 'Lora', serif; font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
}

.online-room-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.online-room-code-label { font-family: 'Lora', serif; font-size: 13px; color: rgba(232, 238, 235, .7); }
.online-room-code-value {
  font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; letter-spacing: .12em; color: #f0dca8;
}
.online-copied-notice { font-family: 'Lora', serif; font-size: 12.5px; color: #9fe3b0; }
.online-room-count { margin: 0; font-family: 'Lora', serif; font-size: 13.5px; color: rgba(232, 238, 235, .75); }

/* Liste compacte, construite depuis players.map(...) — jamais un nombre fixe
   de cartes : 2 à 8 joueurs restent lisibles sans cartes énormes (mandat O3,
   "RESPONSIVE 2→8"). Le nombre de colonnes est fixé en ligne (voir
   _renderOnlineRoomLobbyHtml), plafonné à 4 ici pour ne jamais écraser une
   ligne sur les petits écrans. */
.online-players-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}
.online-player-chip {
  /* Micro-palier ONLINE O3.5b.2 — flex-wrap:wrap (absent jusqu'ici) :
     l'identité enrichie (drapeau + pays + niveau + badges Invité/Hôte,
     tous O3.5b/O3.5b.2) dépasse la largeur d'une colonne sur grand
     écran dès 4 colonnes (panneau gauche à largeur fixe, PAS la
     largeur du viewport — reproduit et mesuré via Playwright à
     1440x900/1920x1080, 4/6/8 joueurs). Permettre un retour à la ligne
     À L'INTÉRIEUR d'une même carte (jamais un débordement horizontal
     de la grille) coûte seulement une carte plus haute, jamais un
     scroll horizontal. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
  padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(190, 196, 192, .25);
}
.online-player-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background-size: cover; background-position: center;
  background-color: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center; color: rgba(232, 238, 235, .55);
}
.online-player-name {
  font-family: 'Lora', serif; font-size: 13px; font-weight: 600; color: #e8ecea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.online-player-country { font-family: 'Lora', serif; font-size: 11.5px; color: rgba(232, 238, 235, .6); }
/* Micro-palier ONLINE O3.5b.2 — drapeau du joueur (country.flagAsset),
   même proportions/arrondi que .country-row-flag/.country-flag-current
   (voir ces classes) mais réduit pour la carte compacte du lobby. */
.online-player-flag {
  width: 18px; height: 13px; object-fit: cover; border-radius: 2px;
  border: 1px solid rgba(214, 172, 96, .4); flex: 0 0 auto;
}
.online-player-host-badge {
  margin-left: auto; font-family: 'Lora', serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #20340f;
  background: var(--agora-gold-btn); border-radius: 6px; padding: 2px 6px;
}
/* Micro-palier ONLINE O3.5b — niveau déclaré (INDICATIF, voir
   anagrammes-room-view.ts) + badge invité. .online-player-level ne
   pousse jamais .online-player-host-badge hors de la ligne : lui seul
   garde margin-left:auto quand aucun badge hôte n'est présent (voir
   _renderOnlineRoomLobbyHtml, isGuest sans isCreator). */
.online-player-level {
  font-family: 'Lora', serif; font-size: 11px; color: rgba(232, 238, 235, .55);
  white-space: nowrap;
}
/* Palier P2J.1 — icône discrète du type d'appareil (salle d'attente). Taille de base
   commune aux 4 icônes (laptop/tablet/phone), Desktop légèrement agrandi : son asset a
   visuellement moins de « masse » dans un même cadre (moniteur + tour fin, voir rapport
   P2J.1) — compense sans dénaturer les proportions (object-fit: contain, jamais déformé). */
.device-icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  object-fit: contain;
  opacity: .92;
}
.device-icon--desktop { width: 29px; height: 29px; }
.online-player-guest-badge {
  font-family: 'Lora', serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; color: rgba(232, 238, 235, .7);
  border: 1px solid rgba(190, 196, 192, .4); border-radius: 6px; padding: 2px 6px;
  white-space: nowrap;
}
.online-player-guest-badge:last-child, .online-player-host-badge:last-child { margin-left: auto; }

/* Micro-palier ONLINE O3.5b — champ pseudo invité au-dessus de Créer/
   Rejoindre (aucun compte Agora requis pour cet écran). */
.online-guest-identity {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(190, 196, 192, .25);
}
.online-guest-pseudo-input {
  min-height: 42px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(190, 196, 192, .4); background: rgba(255, 255, 255, .06);
  color: #e8ecea; font-family: 'Lora', serif; font-size: 15px;
}
.online-guest-hint {
  margin: 0; font-family: 'Lora', serif; font-size: 12.5px; line-height: 1.5;
  color: rgba(232, 238, 235, .65);
}
.link-button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Lora', serif; font-size: inherit; color: #f0dca8;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Écrans étroits (téléphone portrait/paysage) — une seule colonne, jamais de
   débordement horizontal, même à 8 joueurs (mandat O3, viewports 375×667/
   393×852/667×375/852×393). */
@media (max-width: 600px) {
  .online-players-list { grid-template-columns: 1fr !important; }
  .online-players-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Contrôles de configuration --- */
.ctl-row { display: flex; align-items: center; gap: 14px; }
.ctl-row[hidden] { display: none; }

/* Micro-palier ONLINE O3.5b.2 — panneau figé : un salon en ligne actif
   impose sa configuration AUTORITAIRE (voir _isOnlineConfigFrozen).
   pointer-events:none est une seconde ligne de défense PUREMENT
   visuelle/UX (le vrai verrou vit dans les gestionnaires de clic côté
   JS, voir _wire) — jamais le seul mécanisme de protection. */
.config-right.is-frozen .stepper { opacity: .55; pointer-events: none; }
.config-right.is-frozen .stepper button { cursor: not-allowed; }
/* .gametype-pill (sélecteur proéminent, hors .config-right) a sa PROPRE
   classe .is-frozen posée directement par _renderGametypePills(), voir
   la règle .gametype-pill.is-frozen plus bas. */
.config-right-frozen-note {
  margin: 0 0 4px; padding: 8px 12px; border-radius: 8px;
  background: rgba(214, 172, 96, .12); border: 1px solid rgba(214, 172, 96, .35);
  font-family: 'Lora', serif; font-size: 12.5px; color: rgba(232, 238, 235, .85);
}
.gametype-pill.is-frozen { opacity: .55; pointer-events: none; cursor: not-allowed; }
.ctl-icon { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.ctl-icon--svg { display: flex; align-items: center; justify-content: center; color: var(--agora-gold-light); }
.ctl-row label { flex: 1 1 auto; font-family: 'Lora', serif; font-size: 15px; color: var(--agora-text-white); }

.stepper {
  display: flex; align-items: center;
  border: 1px solid rgba(214, 172, 96, .6);
  border-radius: var(--agora-radius-pill);
  background: var(--agora-green-control);
  overflow: hidden;
}
.stepper--silver { border-color: var(--agora-silver-line-2); }
.stepper button {
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--agora-gold-light); font-size: 16px; cursor: pointer;
}
.stepper--silver button { color: var(--agora-silver-text); }
.stepper button:hover { background: rgba(214, 172, 96, .18); }
.stepper-value {
  min-width: 64px; text-align: center;
  font-family: 'Lora', serif; font-size: 16px; color: var(--agora-text-white);
}
.stepper-value--num   { font-variant-numeric: tabular-nums; }
.stepper-value--wide  { min-width: 104px; }
.stepper-value--wider { min-width: 120px; }

/* Micro-palier 16A, point 9A — ligne « Barème » : automatique, donc
   PAS de stepper (rien à régler), même langage visuel que les autres
   lignes .ctl-row/.stepper-value ci-dessus pour rester cohérente. */
.ctl-row--static .ctl-scoring-value {
  display: flex; align-items: center; gap: 10px;
}
.ctl-scoring-info-btn {
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(214, 172, 96, .6);
  background: var(--agora-green-control);
  color: var(--agora-gold-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ctl-scoring-info-btn:hover,
.ctl-scoring-info-btn:focus-visible { background: rgba(214, 172, 96, .18); }
.ctl-scoring-info-text {
  margin: -6px 0 0 44px;
  font-family: 'Lora', serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--agora-text-soft, rgba(243,236,221,0.82));
}

/* ----------------------------- ACTIONS ----------------------------- */
.actions {
  margin-top: clamp(6px, 0.9vw, 12px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 32px);
}

.btn-start {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  white-space: nowrap; min-height: 58px; padding: 0 46px;
  border-radius: var(--agora-radius-btn);
  border: 1px solid var(--agora-gold-btn-border);
  background: var(--agora-gold-btn);
  color: #20340f; font-family: 'Cormorant Garamond', serif;
  font-size: 25px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  opacity: 1;
}
.btn-start:hover { filter: brightness(1.05); }
.btn-start:disabled { opacity: .45; cursor: not-allowed; filter: none; }
/* Palier ONLINE O3 — piège [hidden] déjà connu dans ce fichier (voir
   .header-auth-btn[hidden]/.account-menu-panel[hidden] plus bas) :
   .btn-start a un display:flex inconditionnel ci-dessus, de spécificité
   supérieure au [hidden]{display:none} du navigateur. Override explicite
   nécessaire pour masquer réellement le bouton en mode En ligne. */
.btn-start[hidden] { display: none; }

.quote {
  margin: 0; padding-left: clamp(10px, 1.4vw, 22px);
  border-left: 1px solid rgba(214, 172, 96, .4);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 19px; line-height: 1.4; color: rgba(240, 228, 200, .86);
}

.start-hint {
  margin: 10px 0 0; text-align: center;
  font-family: 'Lora', serif; font-size: 13px; color: var(--agora-text-muted);
}

/* ----------------------------- MODALE AVATAR ----------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 15, 10, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(720px, 100%); max-height: 90vh; overflow: auto;
  border: 1px solid rgba(214, 172, 96, .65);
  border-radius: var(--agora-radius-modal);
  background: rgba(7, 33, 22, .97);
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: agoraFade .22s ease both;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-title { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: #f2dcac; }
.modal-subtitle { margin: 4px 0 0; font-family: 'Lora', serif; font-size: 14px; color: rgba(238, 226, 200, .78); }
.modal-close {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .5);
  background: transparent; color: var(--agora-gold-light);
  font-size: 18px; cursor: pointer;
}
.modal-close:hover { background: rgba(214, 172, 96, .18); }

/* --- Micro-palier ONLINE O3.3b — liaison progression Anagrammes/compte Agora --- */
.progression-link-note { display: flex; flex-direction: column; gap: 14px; }
.progression-link-note h4 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: #f2dcac; }
.progression-link-note > p { margin: 0; font-family: 'Lora', serif; font-size: 14.5px; line-height: 1.55; color: rgba(232, 238, 235, .82); }
.progression-link-summary { display: grid; gap: 12px; grid-template-columns: 1fr; }
.progression-link-summary--two { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.progression-link-side {
  border: 1px solid rgba(214, 172, 96, .35); border-radius: 12px;
  padding: 14px 16px; background: rgba(255, 255, 255, .04);
}
.progression-link-side-label { margin: 0 0 6px; font-family: 'Lora', serif; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: rgba(232, 238, 235, .6); }
.progression-link-stat { margin: 0; font-family: 'Lora', serif; font-size: 14px; color: #e8ecea; }
.progression-link-stat strong { color: #f0dca8; font-family: 'Cormorant Garamond', serif; font-size: 17px; }
.progression-link-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.progression-link-actions .header-auth-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Micro-palier O3.3b.1 — correctif trouvé en vérifiant la lisibilité mobile
   (section 8 du mandat) : .header-auth-btn impose white-space:nowrap
   (nécessaire pour les libellés courts du header) ; le libellé long
   "Remplacer la progression du compte par celle de cet appareil"
   dépassait alors la largeur de la modale sur petit écran, texte
   partiellement illisible. Autoriser le retour à la ligne RÉSOUT ceci
   sans toucher .header-auth-btn lui-même (jamais le header). */
.progression-link-actions .header-auth-btn { white-space: normal; text-align: center; min-width: 0; max-width: 100%; }

/* Micro-palier O3.3b.1 — confort visuel DESKTOP uniquement (901px+, même
   seuil que le reste du fichier pour "desktop"). Mobile intégralement
   inchangé (aucune règle ci-dessous ne s'applique sous ce seuil).
   Scoping STRICT à .progression-link-actions .header-auth-btn : ne touche
   jamais .header-auth-btn du header (Se connecter/Créer un compte),
   partagé ailleurs sur la page. Mêmes classes pour la modale LOCAL_ONLY
   ("Associer cette progression") ET la modale CONFLICT ("Ce compte
   Agora"/"Cet appareil") — polish appliqué aux deux par construction,
   jamais dupliqué (section 9 du mandat). */
@media (min-width: 901px) {
  /* 720px -> 760px (~+5,5%) : reste dans la fourchette explicitement
     demandée (700-760px) plutôt que de viser mécaniquement +10-15% sur
     une base déjà proche du haut de cette fourchette — voir le rapport
     du palier pour le détail de cet arbitrage. */
  .modal.progression-link-modal { width: min(760px, 100%); }

  .progression-link-note { gap: 18px; }
  .progression-link-note h4 { font-size: 27px; }
  .progression-link-note > p { font-size: 15.5px; line-height: 1.62; }

  .progression-link-summary { gap: 16px; }
  .progression-link-side { padding: 18px 20px; }
  .progression-link-side-label { font-size: 13.5px; }
  .progression-link-stat { font-size: 15px; }
  .progression-link-stat strong { font-size: 18.5px; }

  .progression-link-actions { gap: 14px; }
  .progression-link-actions .header-auth-btn {
    min-height: 46px; padding: 0 22px; font-size: 16.5px;
  }
}

.modal-ornament { display: block; width: 180px; margin: 12px auto 16px; opacity: .85; }

/* Micro-palier ONLINE O3.5c — invitation facultative « créer un compte
   Agora » au niveau 10. .modal/.modal-backdrop/.modal-head/.modal-title/
   .modal-close/.progression-link-note/.progression-link-actions/
   .header-auth-btn(--primary) sont TOUS réutilisés tels quels
   (ci-dessus) : seule cette liste à puces est réellement nouvelle. */
.signup-invite-benefits {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.signup-invite-benefits li {
  font-family: 'Lora', serif; font-size: 14px; color: rgba(232, 238, 235, .82);
  padding-left: 22px; position: relative;
}
.signup-invite-benefits li::before {
  content: '✓'; position: absolute; left: 0; color: var(--agora-gold-light);
  font-weight: 700;
}
.modal.signup-invite-modal { width: min(520px, 100%); }

.modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 8px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .35);
  background: rgba(12, 46, 31, .7);
  cursor: pointer; transition: var(--agora-transition-choice);
}
.choice:hover { transform: translateY(-2px); }
.choice.is-active { border-color: var(--agora-gold); background: rgba(214, 172, 96, .18); }
.choice-disc {
  width: 104px; height: 104px; border-radius: var(--agora-radius-pill);
  border: 2.5px solid var(--agora-gold-line-strong);
  box-shadow: inset 0 0 0 2px var(--agora-green-inner-ring);
  background-size: cover, cover;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--agora-green-slot);
}
.choice-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #f4e8cd; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.modal-actions .btn-outline { background: transparent; border-color: rgba(214, 172, 96, .6); color: #f0dcb0; padding: 0 24px; }

/* =============================================================
   JALON 8 — profil réel (pseudo, 84 avatars, 250 pays).
   Nouvelles règles uniquement : aucune valeur validée ci-dessus
   n'est modifiée.
   ============================================================= */

/* --- Micro-palier 17B, section 14/15 — progression carrière (niveau + barre XP),
   compacte et rattachée au profil (avatar/pseudo), jamais un gros bloc indépendant. --- */
.solo-progress-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; max-width: 420px;
  margin: 2px 0 4px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--agora-gold-line-soft); background: rgba(9, 68, 43, .35);
}
.solo-progress-level {
  flex: 0 0 auto; font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 700;
  letter-spacing: .02em; color: var(--agora-gold-light);
}
.solo-progress-row .xp-track {
  flex: 1 1 auto; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(9, 30, 20, .8); border: 1px solid var(--agora-gold-line-soft);
}
.solo-progress-row .xp-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--agora-gold), var(--agora-gold-light));
  transition: width .3s ease;
}
.solo-progress-xp {
  flex: 0 0 auto; font-family: 'Lora', serif; font-size: 11.5px; color: var(--agora-ivory);
  white-space: nowrap;
}
/* Micro-palier 17B.2, section 2 — XP total cumulé, discret (jamais dominant), passe à la ligne si l'espace manque. */
.solo-progress-total {
  flex: 1 1 100%; font-family: 'Lora', serif; font-size: 10.5px; color: rgba(226, 206, 163, .6);
  white-space: nowrap;
}

/* --- Pseudo (bloc avatar solo) --- */
.pseudo-country-row { display: contents; }
.avatar-progress-row { display: contents; }
.pseudo-field { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; width: 100%; max-width: 260px; }
/* Jalon 8/9/10 : sans cette règle, l'attribut `hidden` posé par
   config-view.js n'a AUCUN effet visuel — une règle de classe avec
   `display` (ci-dessus) l'emporte toujours sur le `display:none`
   par défaut du navigateur pour `[hidden]` (même filet de sécurité
   que `.ctl-row[hidden]`/`.modal-backdrop[hidden]` dans ce fichier). */
.pseudo-field[hidden] { display: none; }
.pseudo-label { font-family: 'Lora', serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--agora-text-muted); }
.pseudo-input {
  min-height: 40px; padding: 0 14px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .5); background: rgba(6, 26, 18, .65);
  color: var(--agora-text); font-family: 'Lora', serif; font-size: 15px;
}
.pseudo-input:focus { outline: none; border-color: var(--agora-gold); background: rgba(6, 26, 18, .9); }
.pseudo-hint { font-family: 'Lora', serif; font-size: 12px; color: rgba(238, 226, 200, .55); min-height: 15px; }
.pseudo-hint.is-invalid { color: #e2a25a; }

/* --- Pays (bloc avatar solo) --- */
.country-field { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.country-field[hidden] { display: none; }
.country-flag-current { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(214, 172, 96, .5); background: var(--agora-green-slot); }
.country-name-current { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #f4e8ce; }

/* --- Choix avatar verrouillé (modale des 84 avatars) --- */
.choice.is-locked { cursor: default; opacity: .55; }
.choice.is-locked:hover { transform: none; }
.choice.is-locked .choice-disc { filter: grayscale(65%); }
/* .choice-lock-badge : voir Palier 13B, section 13-15, plus bas dans ce
   fichier — position corrigée (ancienne règle, bugguée, retirée d'ici). */
.choice-condition {
  font-family: 'Lora', serif; font-size: 11px; line-height: 1.35; color: rgba(238, 226, 200, .6);
  max-width: 15ch; text-align: center;
}

/* --- Modale pays (recherche + liste, 250 entrées) --- */
.country-search-input {
  width: 100%; min-height: 44px; margin: 4px 0 16px; padding: 0 16px;
  border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .5); background: rgba(6, 26, 18, .65);
  color: var(--agora-text); font-family: 'Lora', serif; font-size: 15px;
}
.country-search-input:focus { outline: none; border-color: var(--agora-gold); }
.country-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.country-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .25); background: rgba(12, 46, 31, .55);
  cursor: pointer; text-align: left; transition: var(--agora-transition-choice);
}
.country-row:hover { background: rgba(214, 172, 96, .12); }
.country-row.is-active { border-color: var(--agora-gold); background: rgba(214, 172, 96, .18); }
.country-row-flag { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
.country-row-name { font-family: 'Lora', serif; font-size: 15px; color: #f4e8ce; }
.country-empty { font-family: 'Lora', serif; font-size: 14px; color: rgba(238, 226, 200, .6); text-align: center; padding: 18px 0; }

/* =============================================================
   JALON 11 — persistance locale, reprise de partie et progression.
   Nouvelles règles uniquement : aucune valeur validée ci-dessus
   n'est modifiée.
   ============================================================= */

/* --- Bannière « Reprendre la partie » (section 20) --- */
.resume-banner {
  margin-top: clamp(14px, 1.6vw, 22px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .5); background: rgba(12, 46, 31, .55);
}
/* Comme .modal-backdrop/.pseudo-field/.country-field ci-dessus : une règle avec `display` sur
   .resume-banner exige sa propre exception [hidden], sans quoi l'attribut n'a aucun effet visuel. */
.resume-banner[hidden] { display: none; }
.resume-banner-text { display: flex; flex-direction: column; gap: 2px; font-family: 'Lora', serif; font-size: 13px; color: rgba(238, 226, 200, .82); }
.resume-banner-text strong { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #f2dcac; font-weight: 600; }

/* --- Progression (section 34) --- */
.progression-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; margin-top: 6px; }
.progression-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .25); background: rgba(12, 46, 31, .5);
  font-family: 'Lora', serif; font-size: 14px; color: rgba(238, 226, 200, .85);
}
.progression-row strong { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: #f2dcac; }
.progression-avatars-note { margin: 16px 2px 0; font-family: 'Lora', serif; font-size: 13px; color: rgba(238, 226, 200, .6); }
.progression-reset-confirm p { font-family: 'Lora', serif; font-size: 14px; color: rgba(238, 226, 200, .85); line-height: 1.5; }

/* --- Palier 15, section A — historique global des parties (modale Progression) --- */
.progression-section-title {
  margin: 22px 2px 10px; padding-top: 16px; border-top: 1px solid rgba(214, 172, 96, .2);
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: #f2dcac;
}
.progression-history-empty { margin: 0 2px; font-family: 'Lora', serif; font-size: 13.5px; color: rgba(238, 226, 200, .6); font-style: italic; }
.progression-history-more { margin: 10px 2px 0; font-family: 'Lora', serif; font-size: 12px; color: rgba(238, 226, 200, .5); }
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.history-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 10px 14px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .22); background: rgba(12, 46, 31, .45);
}
.history-row--won { border-color: rgba(214, 172, 96, .6); background: rgba(214, 172, 96, .1); }
.history-row-main, .history-row-detail, .history-row-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.history-row-main { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 140px; }
.history-row-date { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #f2dcac; }
.history-row-mode { font-family: 'Lora', serif; font-size: 11.5px; color: rgba(238, 226, 200, .6); }
.history-row-detail { font-family: 'Lora', serif; font-size: 12px; color: rgba(238, 226, 200, .7); flex: 1 1 200px; }
.history-row-detail span + span { padding-left: 10px; border-left: 1px solid rgba(214, 172, 96, .25); }
.history-row-result { flex: 0 0 auto; justify-content: flex-end; }
.history-row-badge { font-size: 15px; }
.history-row-outcome { font-family: 'Lora', serif; font-size: 12.5px; color: rgba(238, 226, 200, .75); }
.history-row-score { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #f2dcac; }

/* =============================================================
   JALON 9 — Partie locale / Duel local (2-4 profils indépendants).
   Nouvelles règles uniquement : réutilise .slot-disc/.slot-empty/
   .slot-edit/.slot-name (Jalon 4) et .pseudo-input/.country-flag-
   current (Jalon 8) telles quelles.
   ============================================================= */
/* Correctif — passage de flex-wrap à une vraie grille CSS (nombre de
   colonnes = nombre de joueurs, fixé en JS via un style inline sur
   grid-template-columns, voir _renderLeft). Le flex-wrap précédent
   calculait des largeurs de carte "au plus juste" pour tenir sur une
   ligne : un écart de quelques pixels (ex. barre de défilement verticale
   du navigateur réel, absente des mesures automatisées sans défilement)
   suffisait à faire retomber le 4e joueur à la ligne suivante. Une
   grille à N colonnes ne "retombe" JAMAIS à la ligne : les cartes se
   partagent toujours la largeur disponible (elles rétrécissent
   légèrement plutôt que de déborder sur une 2e ligne). */
.local-slots-row { display: grid; gap: clamp(8px, 1.2vw, 18px); }
.local-slot {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; /* autorise la carte à rétrécir sous sa largeur de contenu naturelle si l'espace de la grille est serré, au lieu de déborder */
  padding: 15px 13px; border-radius: var(--agora-radius-card);
  border: 1px solid rgba(214, 172, 96, .25); background: rgba(12, 46, 31, .4);
}
/* Micro-palier final, section 1 — avatars légèrement agrandis (104px -> 120px) pour mieux attirer l'œil en Local/Duel. */
.local-slot .slot-media { width: 100%; max-width: 120px; }
.local-slot .slot-name { font-size: 20px; }
.local-pseudo-input { width: 100%; min-height: 38px; font-size: 14px; text-align: center; }
.local-country-btn {
  /* Micro-palier final, section 2 — align-items:center (au lieu de
     flex-start) : le drapeau (30x22px) et le texte (une ligne ~15.6px,
     ou plusieurs pour un pays long) étaient alignés par le HAUT, donc
     visuellement décalés l'un par rapport à l'autre dès que leurs
     hauteurs respectives différaient. Centrer les fait paraître
     "sur la même ligne visuelle", y compris quand le texte s'enroule
     sur 2 lignes (le drapeau se centre alors sur le bloc entier). */
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 42px; padding: 7px 10px; border-radius: var(--agora-radius-btn);
  border: 1px solid rgba(214, 172, 96, .4); background: rgba(6, 26, 18, .5);
  color: var(--agora-text-soft); font-family: 'Lora', serif; font-size: 13.5px;
  cursor: pointer; text-align: left;
}
.local-country-btn:hover { background: rgba(214, 172, 96, .14); }
/* Palier 13C, section 2 — le pays ne doit JAMAIS être tronqué (l'ellipse
   précédente coupait même le libellé par défaut « Pays non renseigné ») :
   le texte peut désormais passer sur 2 lignes plutôt que d'être coupé. */
.local-country-btn span { overflow: visible; text-overflow: unset; white-space: normal; line-height: 1.25; }

/* =============================================================
   PALIER 13B — bénéfices compactés (section 11), remontés sous le
   kicker pour libérer la place occupée par le sélecteur de type de
   jeu, désormais beaucoup plus visible (section 10, voir plus bas).
   Conserve la valeur éditoriale des 3 textes, en une ligne fine.
   ============================================================= */
/* Palier 13D, section 4a — davantage d'air entre le kicker et les 3
   libellés (6px -> 18px), signalé trop proches. */
/* Micro-palier final, section 3 — les 3 libellés (icône/texte/espacement)
   légèrement agrandis pour plus de présence visuelle, sans déséquilibrer
   le hero (toujours une ligne fine, alignée). */
.hero-benefits--compact {
  margin: 18px 0 0;
  gap: clamp(16px, 2.8vw, 38px);
}
.hero-benefits--compact li { gap: 9px; }
.hero-benefits--compact img { width: 24px; height: 24px; }
.hero-benefits--compact span {
  font-size: 13.5px; line-height: 1.3; color: rgba(242, 231, 208, .85);
  white-space: nowrap;
}

/* =============================================================
   PALIER 13 — sélecteur de type de jeu (section 22/23).
   Palier 13B, section 9/10 — agrandi et déplacé à l'emplacement
   auparavant occupé par les 3 bénéfices (juste sous le sous-titre) :
   c'est désormais le choix visuellement le plus important après le
   titre, avant même « Choix du mode » (solo/local/IA/en ligne).
   ============================================================= */
.gametype-selector {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: min(720px, 100%); margin: 16px auto 0;
}
.gametype-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .4);
  background: rgba(7, 33, 22, .55); color: var(--agora-text-soft);
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600;
  cursor: pointer; min-height: 44px;
}
.gametype-pill img { width: 20px; height: 20px; opacity: .85; }
.gametype-pill:hover { border-color: rgba(214, 172, 96, .7); }
.gametype-pill.is-selected {
  border-color: var(--agora-gold); background: rgba(214, 172, 96, .22); color: #f6ecd2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.gametype-selector--prominent {
  width: min(820px, 100%); margin: clamp(6px, 1vw, 12px) auto 0; gap: 16px;
}
.gametype-selector--prominent .gametype-pill {
  flex: 1 1 300px; justify-content: center;
  padding: 13px 26px; gap: 12px;
  border-width: 1.5px; font-size: 19px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.gametype-selector--prominent .gametype-pill img { width: 24px; height: 24px; }
.gametype-selector--prominent .gametype-pill.is-selected {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Palier 13D, section 2 — le bouton compact « Personnaliser mon profil »
   a été retiré des cartes de la partie locale (voir config-view.js) ;
   .local-slot--main garde uniquement une bordure/fond légèrement
   distincts pour repérer le profil principal parmi les invités. */
.local-slot--main { border-color: rgba(214, 172, 96, .45); background: rgba(12, 46, 31, .5); }

/* =============================================================
   PALIER 13 — modale unique « Personnaliser mon profil »
   (section 9/10/28/29). En-tête + onglets FIXES ; seul le contenu de
   l'onglet actif défile (jamais toute la modale, jamais la page).
   ============================================================= */
.profile-modal { display: flex; flex-direction: column; max-height: 84vh; }
.profile-modal-identity { display: flex; align-items: center; gap: 16px; }
/* Palier 13C, section 4 — avatar de l'en-tête agrandi (52px -> 76px) pour
   une meilleure présence/cohérence premium quand un avatar est choisi. */
.profile-modal-avatar {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--agora-radius-pill);
  border: 2.5px solid var(--agora-gold); background: var(--agora-green-slot);
  background-size: cover; background-position: center top;
}
.profile-modal-tabs { display: flex; gap: 8px; margin-top: 16px; border-bottom: 1px solid rgba(214, 172, 96, .25); }
.profile-tab {
  padding: 10px 18px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--agora-text-muted);
  font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600;
  cursor: pointer; min-height: 44px;
}
.profile-tab:hover { color: var(--agora-text-soft); }
.profile-tab[aria-selected="true"] { color: var(--agora-gold-light); border-bottom-color: var(--agora-gold); }
/* Micro-palier 15C, point 13 — gouttière avant la scrollbar (0 avant :
   la dernière colonne de la grille d'avatars touchait la scrollbar,
   bordure droite des cartes peu visible). Léger retrait négatif à
   droite pour compenser visuellement et garder le contenu centré. */
.profile-tab-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px 0 0; margin-right: -14px; }
.profile-tab-panel[hidden] { display: none; }

.avatar-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.avatar-search-input {
  flex: 1 1 220px; min-height: 40px; padding: 0 14px; border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .45); background: rgba(6, 26, 18, .7);
  color: #f4e8ce; font-family: 'Lora', serif; font-size: 14px;
}
.avatar-search-input:focus { outline: none; border-color: var(--agora-gold); }
.avatar-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-filter-chip {
  min-height: 32px; padding: 4px 14px; border-radius: var(--agora-radius-pill);
  border: 1px solid rgba(214, 172, 96, .35); background: transparent;
  color: var(--agora-text-soft); font-family: 'Lora', serif; font-size: 12.5px; cursor: pointer;
}
.avatar-filter-chip:hover { border-color: rgba(214, 172, 96, .7); }
.avatar-filter-chip[aria-pressed="true"] { border-color: var(--agora-gold); background: rgba(214, 172, 96, .22); color: #f6ecd2; }

.country-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.country-toolbar .country-search-input { flex: 1 1 220px; margin: 0; }
.country-none-btn { min-height: 40px; padding: 0 18px; white-space: nowrap; }

/* Palier 13C/13D, section 3 — un avatar verrouillé reste CLIQUABLE (ouvre
   la sous-fenêtre dédiée, voir .locked-avatar-modal plus bas) : plus de
   `pointer-events:none` ici (l'ancienne règle, couplée à l'attribut natif
   `disabled` retiré du JS, bloquait entièrement le clic — c'était la
   cause du silence total signalé). aria-disabled (posé en JS) suffit à
   décrire l'état sans empêcher l'interaction. */
.choice.is-locked { cursor: pointer; }

/* =============================================================
   PALIER 13D, section 3 — sous-fenêtre dédiée avatar verrouillé :
   superposée au-dessus de la modale profil (jamais un bandeau qui
   pouvait rester hors champ), centrée, impossible à manquer. Réutilise
   .modal-backdrop/.modal/.modal-head/.modal-title/.modal-subtitle
   (styles déjà validés) — seule l'identité (avatar) est spécifique.
   ============================================================= */
.locked-avatar-modal { width: min(420px, 100%); }
.locked-avatar-modal-identity { display: flex; align-items: center; gap: 16px; }
.locked-avatar-modal-disc {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--agora-radius-pill);
  border: 2.5px solid var(--agora-gold); object-fit: cover; object-position: center top;
  background: var(--agora-green-slot); filter: grayscale(40%);
}

@media (max-width: 640px) {
  .gametype-selector .gametype-pill { flex: 1 1 auto; justify-content: center; }
}
.local-country-btn .country-flag-current { flex: 0 0 auto; margin: 0; }

/* =============================================================
   PALIER 13B — en-tête de la modale profil (pseudo + pays en direct,
   section 16/17/18).
   ============================================================= */
.profile-modal-identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-modal-pseudo {
  margin: 2px 0 0; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600;
  color: #f4e8ce;
}
.profile-modal-country-line {
  margin: 2px 0 0; display: flex; align-items: center; gap: 6px;
  font-family: 'Lora', serif; font-size: 13px; color: var(--agora-text-soft);
}
.profile-modal-country-line .country-flag-current { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; }

/* =============================================================
   PALIER 13B, section 13-15 — position EXACTE du cadenas : corrige un
   bug réel (les cadenas flottaient hors des cartes, ancrés au fond
   assombri de la modale, car .choice n'avait jamais `position:
   relative` — .choice-lock-badge se positionnait alors par rapport à
   .modal-backdrop, seul ancêtre positionné). NOUVELLE RÈGLE : chaque
   cadenas est désormais un enfant positionné de SA carte, ancré en
   haut à GAUCHE (et non plus à droite, cf. instruction explicite de
   ce palier — remplace le placement d'origine du Palier 13).
   ============================================================= */
.choice { position: relative; }
.choice-lock-badge {
  position: absolute; top: 8px; left: 8px; margin: 0;
  width: 24px; height: 24px; border-radius: var(--agora-radius-pill);
  background: rgba(6, 20, 13, .92); border: 1px solid rgba(214, 172, 96, .6);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--agora-gold-light);
}

/* =============================================================
   Micro-palier 14C, section 7/30 — avatar récemment débloqué et
   encore non consulté : halo doux + badge texte (jamais uniquement
   la couleur, section 30) + très légère apparition initiale. Jamais
   sur un LOCKED (garanti en amont par isNew, config-view.js). Pas de
   clignotement ni de flash — une seule apparition, jamais en boucle.
   ============================================================= */
.choice.is-new {
  border-color: rgba(214, 172, 96, .85);
  box-shadow: 0 0 0 1px rgba(214, 172, 96, .3), 0 0 22px rgba(214, 172, 96, .28);
  animation: agoraChoiceNewIn .4s cubic-bezier(.2,.8,.3,1) both;
}
.choice-new-badge {
  position: absolute; top: 8px; right: 8px; margin: 0;
  padding: 2px 9px; border-radius: var(--agora-radius-pill);
  background: linear-gradient(170deg, #f0d089, #d9ab4f); color: #1d3325;
  font-family: 'Lora', serif; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
@keyframes agoraChoiceNewIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

/* Micro-palier 15F, point D — surbrillance BRÈVE (3s, voir openAvatarNotification)
   de la carte visée depuis une notification : anneau doré pulsé, jamais permanent,
   jamais confondu avec .is-new (qui reste tant que l'avatar n'est pas consulté). */
.choice.is-notif-highlight { animation: agoraNotifPulse 1.1s ease-out 2; }
@keyframes agoraNotifPulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 215, 138, .65); }
  70% { box-shadow: 0 0 0 12px rgba(240, 215, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 215, 138, 0); }
}

/* =====================================================================
   PALIER RESPONSIVE UI/UX — Accueil / choix du mode / paramètres.

   Patch CIBLÉ : n'ajoute que des règles sous @media, ne modifie AUCUNE
   valeur par défaut ci-dessus (le rendu desktop reste strictement
   inchangé). Priorité mobile/tablette demandée : menu hamburger, cartes
   de mode compactes (esprit filtres d'avatar) pour atteindre les
   paramètres de la partie sans scroll excessif.
   ===================================================================== */

/* ---- Tablette et mobile (≤ 1024px) : menu hamburger ---- */
@media (max-width: 1024px) {
  .hamburger-btn { display: flex; }
  /* Bug réel trouvé en test navigateur (375/390px) : .agora-header a un
     backdrop-filter (rendu desktop, jamais touché ci-dessus), qui crée un
     nouveau "containing block" pour tout descendant position:fixed —
     ici .agora-nav (le tiroir mobile). Résultat observé : le tiroir se
     positionnait par rapport à la boîte du header (126px de haut) au lieu
     du viewport, et s'affichait tronqué/mal placé au lieu de glisser
     depuis la droite. Neutralisé UNIQUEMENT à cette largeur (le flou de
     2px est imperceptible ici, largement préférable à un menu cassé). */
  .agora-header { backdrop-filter: none; flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  /* Bug réel trouvé en test (375px) : sur une seule ligne (nowrap ci-dessus), avatar +
     logo + texte + son + cloche + hamburger ne laissent plus assez de place au texte de
     marque pour tenir sur une ligne à sa taille desktop -> "AGORA DES MOTS" s'enroulait
     sur 3 lignes et écrasait le header. Réduit ici, jamais en desktop/tablette large. */
  .brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .brand-text { min-width: 0; overflow: hidden; }
  .brand-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-baseline { display: none; } /* tagline, redondante avec le logo, sacrifiée en premier pour la largeur */
  .brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
  .header-actions { gap: 6px; flex-shrink: 0; }
  .btn-sound-toggle, .btn-notif-bell { width: 34px; height: 34px; }

  /* Micro-correctif — vrai cluster d'actions à droite (Son/Cloche/Avatar/Hamburger),
     jamais une distribution par justify-content:space-between sur 4 enfants séparés
     du header. .header-actions-cluster porte margin-left:auto (pousse TOUT le
     groupe à droite, l'espace libre reste entre .brand et le cluster, jamais réparti
     entre les icônes) et un gap petit et constant entre ses propres enfants. */
  .agora-header { justify-content: flex-start; }
  .header-actions-cluster {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; flex-shrink: 0;
  }
  .header-actions { gap: 8px; }
  .header-avatar-btn { display: flex; }

  .agora-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 56;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 84px 22px 24px;
    background: linear-gradient(180deg, var(--agora-green-header-a), var(--agora-green-behind) 60%);
    border-left: 1px solid var(--agora-gold-line-strong);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .45);
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  .agora-nav.is-open { transform: translateX(0); }
  .agora-nav a { width: 100%; padding: 12px 4px; font-size: 20px; border-bottom: 1px solid rgba(214, 172, 96, .16); }
  .agora-nav a.is-current { border-bottom-color: var(--agora-gold); }

  /* Micro-palier UX P2G.2 — cible tactile ~44×44px (WCAG), ancrée en haut à droite du tiroir
     (position:absolute, .agora-nav est position:fixed ci-dessus : un bloc de positionnement
     valide). Les 84px de padding-top existants sur .agora-nav laissaient déjà la place
     nécessaire sans toucher aux liens eux-mêmes ni au reste de la composition. */
  .nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 18px;
    width: 44px;
    height: 44px;
  }
}

/* ---- Cartes de mode compactes (esprit filtres d'avatar) : dès que la
   grille pleine ne tient plus confortablement sur une seule ligne
   lisible. Icône + titre seulement (description/feuillages/coche
   décoratifs masqués, l'état sélectionné restant lisible via le fond/la
   bordure déjà existants de .mode-card.is-selected). ---- */
@media (max-width: 760px) {
  /* Vague 1, points 11-14 — vrai carrousel horizontal, une seule ligne, jamais un
     enroulement sur plusieurs lignes NI des cartes minuscules/illisibles (bug trouvé :
     une ancienne règle à 480px imposait flex:31% qui écrasait la largeur des cartes
     et tronquait le texte "Partie locale" -> "Pa/loc" — supprimée). Cartes assez
     larges pour lire le texte, icône confortable ; la carte suivante partiellement
     visible + scroll-snap signalent naturellement qu'on peut défiler. */
  .modes-grid {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 10px; max-width: 100%;
    scroll-snap-type: x proximity; padding-bottom: 4px;
  }
  .mode-card {
    flex: 0 0 172px;
    min-height: 0;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    scroll-snap-align: start;
  }
  .mode-card .leaf, .mode-card .mode-check { display: none !important; }
  .mode-icon { width: 32px; height: 32px; }
  .mode-title { font-size: 17px; }
  .mode-desc { display: none; }
}

@media (max-width: 480px) {
  .hero-benefits--compact { display: none; } /* bénéfices marketing : premier élément sacrifié, jamais les paramètres eux-mêmes */
}

/* ---- Mobile (≤ 640px) : le vrai goulot d'étranglement du scroll excessif
   après choix du mode n'est PAS le bandeau hero/mode-cards ci-dessus
   (déjà compacts) mais le panneau de paramètres lui-même — mesuré en
   test réel (Playwright, 375px) : la ligne avatar+texte (.solo-avatar-row)
   passe seule de ~90px (desktop, en ligne) à ~307px car son gros avatar
   de 160px et son texte de présentation (240px min) ne rentrent plus
   côte à côte et s'empilent. Corrigé en forçant explicitement la ligne à
   rester horizontale avec un avatar réduit à une taille de vignette
   (l'aperçu détaillé reste inutile ici : le bouton « Sélectionner un
   avatar » ouvre déjà le vrai sélecteur). Aucune valeur desktop
   ci-dessus n'est modifiée. */
@media (max-width: 640px) {
  /* Palier 19E.2, section 2.3 — "Votre avatar" retiré (redondant avec "Choisissez
     votre avatar" juste en dessous), avatar encore réduit, pseudo/pays resserrés. */
  #left-title { display: none; }
  /* Palier 19E.3, section 6 — pseudo + pays sur la même ligne compacte. */
  .pseudo-country-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
  .pseudo-field { flex: 1 1 120px; max-width: none; margin-top: 0; }
  .country-field { flex: 1 1 140px; margin-top: 0; }
  .country-field .btn-outline { min-height: 30px; padding: 4px 10px; font-size: 12px; }
  .country-name-current { font-size: 12px; }
  /* Vague 1, points 19-20 — avatar et bouton réagrandis (la version précédente les
     avait trop réduits : 48px était identifiable mais peu valorisant). */
  .solo-avatar-row { flex-wrap: nowrap; gap: 12px; }
  .avatar-disc, .avatar-empty { width: 68px; height: 68px; }
  .avatar-edit { width: 26px; height: 26px; }
  .avatar-edit img { width: 16px; height: 16px; }
  .solo-headline { font-size: 16px; }
  /* Texte de présentation marketing, redondant avec le titre + bouton : sacrifié ici en premier, jamais le pseudo/pays/avatar eux-mêmes. */
  .solo-text { display: none; }
  .solo-copy { gap: 6px; }
  .solo-copy .btn-outline { min-height: 42px; padding: 9px 20px; font-size: 15px; margin-top: 2px; }

  /* Points 21-22 — barre XP remontée juste sous l'avatar/bouton (même bloc, deuxième
     sous-ligne compacte), hauteur globale réduite. */
  .avatar-progress-row { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .solo-progress-row { margin: 0; padding: 5px 10px; max-width: none; }

  .config-left, .config-right { gap: 6px; }
  .ctl-row { gap: 8px; }
  .ctl-icon { width: 22px; height: 22px; }
  .ctl-row label { font-size: 13px; }
  .stepper button { width: 36px; height: 36px; font-size: 14px; }
  .stepper-value { min-width: 46px; font-size: 13.5px; }
  .stepper-value--wide { min-width: 84px; }
  .stepper-value--wider { min-width: 96px; }
  .ctl-scoring-info-btn { width: 22px; height: 22px; font-size: 12px; }
}

/* Palier 19E.1, section 47/48 — bug réel trouvé en test (375×667 ET 667×375) : les
   actions de la modale "Une partie est déjà en cours" utilisent .btn-outline, qui a
   white-space:nowrap (desktop, jamais touché) ; les deux libellés côte à côte (dont
   « Commencer une nouvelle partie », le plus long) dépassaient la largeur utile de
   la modale sans jamais s'enrouler (.modal-actions n'avait pas de flex-wrap), et le
   second bouton se retrouvait partiellement hors champ. Corrigé pour TOUTES les
   modales génériques (.modal-actions), pas seulement resume-confirm : empilées en
   pleine largeur sous les faibles largeurs/hauteurs, jamais de bouton hors écran. */
@media (max-width: 640px), (max-height: 420px) and (orientation: landscape) {
  .modal-actions { flex-direction: column-reverse; gap: 10px; }
  .modal-actions .btn-outline { width: 100%; white-space: normal; }
}

/* =====================================================================
   Micro-palier responsive — CHANTIER 1, points 1-3 : téléphone en PAYSAGE
   (hauteur faible, déclenché par la hauteur, jamais la largeur seule —
   couvre tous les modèles, pas seulement 667×375).
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .agora-header { padding: 6px 10px; }
  /* Vague 2, point 1/2 — cluster d'actions resserré à droite (Son/Cloche/Avatar/
     Hamburger perçus comme UN groupe) ; la devise Agora revient (largeur suffisante
     en paysage), compacte, jamais au prix d'un retour à la ligne du header. */
  .header-actions { gap: 5px; }
  .brand-baseline { display: block; font-size: 7px; letter-spacing: .1em; white-space: nowrap; }

  .hero { gap: 0; }
  .hero-kicker { display: none; }
  /* Vague 2, points 4/5 — l'ornement doré est RESTAURÉ (pas un nouvel asset : même
     image que le desktop, juste réduite), les palmes réagrandies, le sous-titre
     restauré : on retrouve la composition ornement/titre/sous-titre plutôt qu'un
     titre nu, sans reprendre les dimensions desktop telles quelles. */
  .hero-ornament { display: block; width: 90px; margin: 0 0 2px; }
  .hero-title-row { margin: 0; gap: 6px; }
  /* Point 7 — titre encore réagrandi (demande explicite : "sensiblement plus grand"). */
  .hero-title img { width: clamp(220px, 27vw, 360px); }
  .hero-palm { width: 30px; }
  .hero-subtitle { display: block; font-size: 11px; margin: 2px 0 0; white-space: nowrap; }

  /* Point 11 — Classique/Ruée : réduction LÉGÈRE seulement, restent nettement plus
     importants que les 5 modes de participation (point 12, hiérarchie conservée). */
  .gametype-selector { margin: 6px auto 0; gap: 8px; }
  .gametype-pill { padding: 7px 16px; min-height: 34px; font-size: 15px; gap: 6px; }
  .gametype-pill img { width: 16px; height: 16px; }

  /* Point 2 — les 3 slogans tiennent sur UNE ligne : fondu cyclique CSS pur (option B),
     un seul visible à la fois, jamais 2-3 lignes empilées. */
  .hero-benefits--compact { position: relative; height: 20px; margin: 4px 0 0; display: block; }
  /* Micro-correctif — rythme ralenti (était 9s/3 slogans = ~1,3s réellement lisible,
     donnait une impression de clignotement). Nouveau : cycle de 18s pour 3 slogans
     (6s par slogan entre deux changements), fondu ~800ms (dans la fourchette
     700-1000ms demandée), un seul en transition à la fois (jamais deux superposés
     à pleine opacité : le suivant ne commence à apparaître qu'une fois le
     précédent totalement effacé, voir les paliers 33.3%/37.7% ci-dessous). */
  .hero-benefits--compact li {
    position: absolute; inset: 0; justify-content: center;
    opacity: 0; animation: agoraSloganCycle 18s ease-in-out infinite;
  }
  .hero-benefits--compact li:nth-child(1) { animation-delay: 0s; }
  .hero-benefits--compact li:nth-child(2) { animation-delay: 6s; }
  .hero-benefits--compact li:nth-child(3) { animation-delay: 12s; }
  .hero-benefits--compact img { width: 16px; height: 16px; }
  .hero-benefits--compact span { font-size: 11px; white-space: nowrap; }
  @keyframes agoraSloganCycle {
    0% { opacity: 0; }
    4.4% { opacity: 1; }
    33.3% { opacity: 1; }
    37.7% { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Vague 2, points 13-17 — abandon de la ligne écrasée (pastilles illisibles du
     palier précédent) : vrai carrousel horizontal, cartes lisibles (icône/texte
     confortables), défilable, jamais forcé à montrer les 5 intégralement si cela
     les rend minuscules. Affordance : carte suivante partiellement visible +
     scroll-snap (jamais une grosse scrollbar système ni une flèche intrusive). */
  .modes-grid {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; margin-top: 4px; max-width: 100%;
    scroll-snap-type: x proximity; padding-bottom: 2px;
  }
  /* Vague 3.3 — bug racine trouvé en diagnostic précis (computed style, pas une
     supposition) : cette règle ne redéfinissait jamais `min-height` (hérité tel
     quel de la règle desktop NON qualifiée, 208px, voir tout en haut de ce
     fichier). À 667×375, le bloc @media(max-width:760px) voisin posait déjà
     min-height:0 et masquait le problème par coïncidence (les deux media queries
     correspondent à cette largeur) ; dès qu'un téléphone paysage dépasse 760px de
     large (iPhone 16 ≈852px, Pixel 9 ≈915px, 844×390…), SEUL ce bloc (basé sur la
     hauteur, pas la largeur) s'applique, et les 208px hérités forçaient une carte
     deux fois plus haute que son contenu (icône+texte) sur l'axe transversal du
     flex row — exactement les « grandes cartes verticales » constatées. */
  .mode-card {
    flex: 0 0 138px; min-width: 0; min-height: 0; height: auto;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 10px; scroll-snap-align: start;
  }
  .mode-icon { width: 26px; height: 26px; }
  .mode-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mode-desc, .mode-card .leaf, .mode-card .mode-check { display: none !important; }

  .modes { margin-top: 4px; }
  .config-panel { margin-top: 4px; padding-top: 6px; }

  /* Vague 1, point 4/19/20/23 — bloc avatar paysage : compact mais réagrandi
     (40px était trop petit), bouton plus lisible/tactile. */
  #left-title { display: none; }
  .solo-avatar-row { flex-wrap: nowrap; gap: 8px; }
  .avatar-disc, .avatar-empty { width: 48px; height: 48px; }
  .avatar-edit { width: 20px; height: 20px; }
  .avatar-edit img { width: 13px; height: 13px; }
  .solo-headline { font-size: 14px; }
  .solo-text { display: none; }
  .solo-copy { gap: 3px; }
  .solo-copy .btn-outline { min-height: 32px; padding: 6px 14px; font-size: 13px; }

  /* Point 23 — profite de la largeur : avatar+bouton et Niveau/XP sur la même zone
     horizontale compacte plutôt qu'empilés. */
  .avatar-progress-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; }
  .solo-avatar-row { flex: 0 1 auto; }
  .solo-progress-row { flex: 1 1 180px; min-width: 0; margin: 0; padding: 4px 10px; max-width: none; }

  .pseudo-country-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .pseudo-field { flex: 1 1 100px; max-width: none; margin-top: 0; }
  .country-field { flex: 1 1 120px; margin-top: 0; }
}

/* =====================================================================
   Vague 3.4, Partie A/B — TÉLÉPHONE PAYSAGE LARGE (iPhone 16 ≈852×393,
   Pixel 9 ≈915×412, 844×390…), sous-cas du breakpoint paysage téléphone
   ci-dessus (même condition de hauteur, + largeur ≥760px — le seuil déjà
   utilisé ailleurs dans ce fichier pour distinguer « assez large pour une
   présentation différente »). 667×375 (< 760px de large) ne matche PAS
   ce bloc et conserve donc exactement le rail compact ci-dessus, inchangé.
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) and (min-width: 760px) {
  /* Priorité 1-8 — la rangée des 5 modes utilise le même plafond de largeur que
     la rangée Classique/Ruée (.gametype-selector--prominent, min(820px,100%)),
     pour un alignement gauche/droite réel, jamais une rangée plus étroite. Cartes
     en flex-grow (jamais une largeur figée par carte) : les libellés courts
     (Solo) restent plus courts que les longs (Contre l'ordinateur) sans
     troncature inutile, l'ensemble se partage harmonieusement la ligne. */
  .modes-grid {
    width: min(820px, 100%); max-width: min(820px, 100%);
    margin: 4px auto 0; overflow-x: visible;
  }
  /* flex:1 1 auto (jamais 1 1 0) — la base de chaque carte part de sa largeur de
     CONTENU réelle (icône + libellé), donc "Contre l'ordinateur" est naturellement
     plus large que "Solo" sans troncature ; le grow:1 ne distribue que l'espace
     EXCÉDENTAIRE à parts égales par-dessus, jamais un système de poids séparé
     nécessaire (voir options plus complexes envisagées, inutiles ici). */
  .mode-card {
    flex: 1 1 auto; height: 50px; padding: 8px 16px;
  }
  .mode-icon { width: 28px; height: 28px; }
  .mode-title { font-size: 15.5px; overflow: visible; text-overflow: clip; }

  /* Priorité 14-18 — logo + devise un peu plus présents (largeur disponible),
     header jamais plus haut (aucune marge/padding du header touchée). */
  .brand-name { font-size: 20px; }
  .brand-baseline { font-size: 9px; }
}

/* =====================================================================
   Vague 3.4, Parties C/D/E — TABLETTES TACTILES (iPad Mini 768×1024/
   1024×768, iPad Pro 13 ≈1032×1376/1376×1032…).

   Cause identifiée par inspection :
   - l'avatar (.header-avatar-btn) ne devient visible qu'au breakpoint
     générique `@media (max-width:1024px)` plus haut — un simple seuil de
     LARGEUR. iPad Pro 13 mesure ~1032px de large en PORTRAIT (dépasse déjà
     1024px) et ~1366-1376px en PAYSAGE : aucun des deux ne matche jamais
     ce seuil, d'où l'avatar invisible dans les deux orientations.
   - la devise (.brand-baseline) est explicitement masquée par ce même
     bloc générique ≤1024px (display:none), pensé pour les TÉLÉPHONES
     (où la largeur manque réellement) mais appliqué aussi aux tablettes
     dans sa plage (iPad Mini 768/1024px de large), qui ont pourtant la
     place.

   Correction : un ciblage TABLETTE dédié, basé sur la capacité tactile
   réelle (pointer:coarse + hover:none, jamais vrai sur un laptop/desktop
   à souris) combinée à une plage de largeur raisonnable (700-1400px, qui
   couvre iPad Mini et iPad Pro 13 dans les deux orientations sans
   capturer un laptop 13"), PLUTÔT qu'un simple max-width qui toucherait
   aussi des fenêtres de laptop réduites. Exclut explicitement le
   téléphone paysage bas (min-height:481px) : ce cas a déjà sa propre
   présentation ci-dessus (devise 7-9px, volontairement plus petite). */
@media (pointer: coarse) and (hover: none) and (min-width: 700px) and (max-width: 1400px) and (min-height: 481px) {
  /* Priorité 19-25 — avatar restauré (même bouton/image/handler existants,
     aucune duplication DOM), toujours au même endroit dans le cluster
     d'actions (Son/Cloche/Avatar/Hamburger, ordre déjà défini ailleurs). */
  .header-avatar-btn { display: flex; }

  /* Priorité 26-33 — devise restaurée sur tablette (iPad Mini : absente
     avant correctif ; iPad Pro : déjà présente sur certaines captures,
     agrandie ici pour les deux), toujours sur une seule ligne, gap réduit
     avec le nom pour rester compact. */
  .brand-text { gap: 1px; }
  .brand-baseline { display: block; font-size: 12px; white-space: nowrap; }
  .brand-name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-benefits--compact li { animation: none; opacity: 1; position: static; }
  .hero-benefits--compact { height: auto; }
}

/* Chantier 1, point 5 — modale de choix d'avatar : moins de vide, plus d'avatars
   visibles d'un coup d'œil, en portrait comme en paysage. */
@media (max-width: 640px), (max-height: 480px) and (orientation: landscape) {
  .modal-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
  .choice { padding: 8px 4px; gap: 6px; }
  .choice-disc { width: 62px; height: 62px; }
  .modal { padding: 14px 14px 18px; }
}

/* Vague 1, points 26/28/30 — bug réel trouvé en test (667×375) : l'en-tête de la
   modale (avatar de profil + nom/pays + onglets + barre de recherche) prenait à lui
   seul la quasi-totalité des 375px de hauteur, laissant la galerie quasi invisible
   (juste le haut des puces de filtre visible). Compacté ICI, spécifiquement en
   paysage téléphone (hauteur faible), pour que la galerie apparaisse réellement. */
@media (max-height: 480px) and (orientation: landscape) {
  .modal { max-height: 94vh; padding: 8px 14px 10px; }
  .profile-modal-avatar { width: 40px; height: 40px; }
  .profile-modal-identity { gap: 8px; }
  .modal-title { font-size: 18px; }
  .profile-modal-pseudo, .profile-modal-country-line { font-size: 11px; }
  .profile-modal-tabs { margin-top: 6px; }
  .profile-tab { padding: 4px 10px; font-size: 13px; }
  .avatar-toolbar { margin-bottom: 8px; gap: 6px; }
  .avatar-search-input { min-height: 32px; padding: 4px 12px; font-size: 12px; }
  .avatar-filter-row .avatar-filter-chip { min-height: 26px; padding: 2px 10px; font-size: 11px; }
  .modal-grid { max-height: 34vh; overflow-y: auto; }
}

/* Palier 19E.1, section 12/13 — sélection des joueurs en Partie locale/Duel : la
   grille à N colonnes (largeur fixée en JS, voir _renderLeft) rétrécissait chaque
   carte à mesure que le nombre de joueurs augmentait (3-4 joueurs : noms/pays
   serrés). Remplacée ICI par un carrousel horizontal (2 cartes confortables
   visibles, comme la référence 2 joueurs ; 3e/4e accessible par défilement) —
   jamais une grille à colonnes qui rétrécit. Le nombre réel de joueurs (moteur,
   ordre des tours) n'est pas affecté : uniquement une présentation UI. */
@media (max-width: 640px) {
  .local-slots-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px;
  }
  .local-slot { flex: 0 0 47%; scroll-snap-align: start; }
}