/* ---------------------------------------------------------------------------
   Motchi : la coquille (lot 4).

   Ce que tout écran porte : la barre du haut, le menu, la scène et le pied de
   page. Ce n'est pas le socle de composants (`components.css`), qui ne connaît
   que des pièces réemployables ; la coquille n'existe qu'une fois, dans
   `base.html.twig`, et c'est pour cela qu'elle a sa propre feuille plutôt
   qu'une section de plus dans le socle.

   Les règles du socle valent ici, et le test les applique aux deux feuilles :
   toute encre est un jeton, donc mesurée par le contrôle de contraste, et
   aucune valeur de couleur n'est écrite en clair. L'exception reste le voile,
   un blanc translucide étant une transparence et non une teinte.

   La barre et le menu sont les seuls endroits où un blanc voilé se pose sur le
   feutre : le proto habille ainsi l'entrée courante, la pastille de compte et
   les séparateurs, et un jeton par nuance de voile serait une liste de
   transparences, pas une liste de rôles.
--------------------------------------------------------------------------- */

.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ── Barre du haut ──
   Un bandeau translucide, posé sur la page qui défile dessous et se devine à
   travers. Sa couleur ne suit pas le mode : elle est la même partout, ce qui la
   rend reconnaissable et lui évite de changer de teinte à chaque navigation.
   C'est pour cela que `--topbar` est un jeton de la racine et non un rôle du
   mode. */
.shell-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    background: color-mix(in srgb, var(--topbar) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.shell-brand {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-title); font-weight: 600; font-size: var(--type-section);
    color: var(--light); text-decoration: none; white-space: nowrap;
}

/* La pastille de marque est ronde depuis la refonte, et c'est une image de la
   mascotte, pas un tracé. */
.shell-brand-badge {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%; background: var(--cream); overflow: hidden;
    display: grid; place-items: center;
    box-shadow: var(--hairline), var(--shadow-felt-md);
}
.shell-brand-badge .ui-mascot { width: 100%; height: 100%; object-fit: cover; }

.shell-right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

/* La zone de navigation n'est pas un bloc de positionnement : le menu qu'elle
   contient s'ancre sur la barre, qui est collante, et prend donc sa largeur
   plutôt que celle de la pastille qui l'ouvre. */
.shell-nav-bar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* ── Navigation nommée ──
   Le proto nomme les modes plutôt que de les mettre en icônes : « Accueil »,
   « Défi », et « Entre amis » quand son espace existera. Elle ne paraît qu'à
   partir du moment où la barre a la place de la porter ; en dessous, c'est le
   menu qui la reprend. */
.shell-nav { display: none; align-items: center; gap: var(--space-1); min-width: 0; }

.shell-nav-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--topbar-ink); text-decoration: none;
    font-size: var(--type-sm); font-weight: 900; white-space: nowrap;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
/* Le survol et l'entrée courante sont la seule chose que la barre emprunte à la
   page, et c'est le mode qui en donne la valeur : le proto colore ainsi l'entrée
   d'un espace (prune sur le Défi, bleu-vert entre amis) et garde un voile blanc
   pour l'accueil, qui n'a pas d'accent à lui. L'encre au repos, elle, ne bouge
   pas. */
.shell-nav-link:hover { background: var(--topbar-hover); color: var(--light); }
.shell-nav-link[aria-current] {
    background: var(--topbar-mark);
    color: var(--on-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.shell-nav-link:focus-visible { outline: none; box-shadow: var(--ring); color: var(--light); }
.shell-nav-link svg { flex: none; width: 17px; height: 17px; }

/* Les entrées de l'espace courant, et l'administration : elles se rangent
   derrière le mode auquel elles appartiennent et pèsent moins que lui, sans
   quoi la barre n'aurait plus de premier plan. */
.shell-nav-util { display: none; font-weight: 700; padding-inline: var(--space-2); }
.shell-nav-util svg { width: 15px; height: 15px; opacity: .85; }

.shell-nav-sep {
    width: 1px; height: 27px; flex: none;
    background: rgba(255, 255, 255, .15);
    margin: 0 var(--space-1);
}

/* ── Pastille de compte ──
   Elle dit qui est connecté et ouvre le menu : sur un écran large elle porte le
   pseudo, sur un téléphone l'initiale suffit. Un visiteur n'a pas de pastille,
   c'est le bouton « ⋯ » qui prend sa place. */
.shell-account,
.shell-menu-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    border: 0; cursor: pointer;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--topbar-ink);
    font-family: var(--font-text); font-size: var(--type-sm); font-weight: 800;
    min-width: 0;
}
.shell-account { padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); }
.shell-menu-toggle { padding: var(--space-2) var(--space-3); color: var(--light); }
.shell-account:hover,
.shell-menu-toggle:hover { background: rgba(255, 255, 255, .14); color: var(--light); }
.shell-account:focus-visible,
.shell-menu-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

.shell-account-name {
    display: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.shell-avatar {
    width: 29px; height: 29px; flex: none;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--gold); color: var(--on-gold);
    font-family: var(--font-title); font-size: var(--type-sm); font-weight: 600;
    text-transform: uppercase;
}

/* ── Menu ──
   Un panneau de papier posé sous la barre, et non un ruban qui recouvre
   l'écran : le proto le dessine ainsi, et c'est ce qui permet de le fermer en
   touchant la page derrière lui. Il est ancré sur la barre, qui est collante et
   fait donc bloc de positionnement. */
.shell-menu {
    position: absolute; z-index: 50;
    top: calc(100% + var(--space-2)); left: var(--space-3); right: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3);
    background: var(--cream);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-felt-lg);
    animation: shell-menu-pop var(--dur-fast) ease;
}
.shell-menu[hidden] { display: none; }

/* Le panneau est une surface de papier sans être une carte de papier : ses
   surtitres prennent donc l'encre du crème, que `.ui-paper` donne aux siens. */
.shell-menu .ui-eyebrow { color: var(--cream-sub); margin: var(--space-2) var(--space-2) var(--space-0); }

.shell-menu-user {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-3);
    color: var(--ink); min-width: 0;
}
.shell-menu-identity { min-width: 0; }
.shell-menu-user b {
    display: block;
    font-family: var(--font-title); font-weight: 600; font-size: var(--type-card);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-menu-user small { display: block; color: var(--cream-sub); font-size: var(--type-sm); font-weight: 700; }

.shell-menu-entry {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: var(--space-3);
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--ink); text-align: left; text-decoration: none;
    font-family: var(--font-text); font-size: var(--type-body); font-weight: 700;
    cursor: pointer;
}
.shell-menu-entry svg { flex: none; opacity: .75; }
.shell-menu-entry:hover,
.shell-menu-entry:focus-visible { background: var(--mode-light); outline: none; }

/* L'entrée où l'on est : le fond du mode, son encre, et un filet posé contre
   son bord gauche. Le filet est ce qui distingue « je suis ici » d'un simple
   survol, qui prend le même fond ; il est peint par une ombre intérieure
   plutôt que par une bordure, pour ne pas décaler le libellé de quatre pixels
   par rapport aux autres entrées. */
.shell-menu-entry[aria-current] {
    background: var(--mode-light);
    color: var(--mode-dark);
    box-shadow: inset 4px 0 var(--mode);
}
/* La mention reste lisible sur ce fond : elle se teinte du mode plutôt que de
   garder le sien, qui se confondrait avec l'entrée. */
.shell-menu-entry[aria-current] em {
    background: color-mix(in srgb, var(--mode) 20%, transparent);
    color: var(--mode-dark);
}

/* La mention qui accompagne une entrée (« Aujourd'hui » sous le Défi) : elle
   dit quand, pas où, et se range donc à l'opposé du libellé. */
.shell-menu-entry em {
    margin-left: auto; font-style: normal;
    color: var(--cream-sub); font-size: var(--type-sm); font-weight: 800;
}

/* Le filet ne sépare que ce qui existe. Il annonce la déconnexion après les
   entrées du compte ; quand il n'y en a aucune (un compte sans administration,
   ou une largeur où la barre les porte déjà), il flottait sous l'intertitre. Il
   ne paraît donc que si l'une d'elles est rendue, et rendue à cette largeur. */
/* Ouvrir un compte est doré partout où la proposition paraît, dans la barre
   comme ici : c'est le même geste, et une couleur qui suit le mode le ferait
   changer d'apparence d'un écran à l'autre, là où il doit rester reconnaissable
   et bien visible. Le proto le pose ainsi aux deux endroits. */
.shell-menu-entry.shell-menu-signup {
    background: var(--gold);
    color: var(--on-gold);
    box-shadow: 0 3px 0 var(--gold-dark);
}
.shell-menu-entry.shell-menu-signup:hover,
.shell-menu-entry.shell-menu-signup:focus-visible { background: var(--gold); color: var(--on-gold); }
.shell-menu-entry.shell-menu-signup svg { opacity: 1; }

.shell-menu-sep { display: none; height: 1px; background: var(--paper-border); margin: var(--space-1) var(--space-2); }

@media (max-width: 899px) {
    .shell-menu:has(.shell-menu-account) .shell-menu-sep { display: block; }
}
@media (max-width: 1179px) {
    .shell-menu:has(.shell-menu-admin) .shell-menu-sep { display: block; }
}

@keyframes shell-menu-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ── Scène ──
   La gouttière du proto : serrée sur un téléphone, large sur un écran, et une
   respiration sous le contenu pour que le pied de page ne colle pas à la
   dernière carte. */
.stage {
    flex: 1; display: flex; justify-content: center;
    padding: var(--space-6) var(--space-4) var(--space-8);
}
.wrap { width: 100%; max-width: var(--content-width); animation: shell-fade var(--dur-slow) ease; }
.wrap-narrow { max-width: 460px; }
/* Les anciens noms de variantes restent dans les gabarits pour décrire leur
   écran, mais ne changent plus sa largeur. Les blocs internes gardent leurs
   propres bornes de lecture quand leur contenu le demande. */

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

/* ── Pied de page ──
   Le proto n'en dessine aucun : ces trois liens sont une obligation légale et
   non une décoration, ils restent donc, habillés comme le reste du feutre. */
.shell-foot {
    display: flex; justify-content: center;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.shell-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.shell-foot-nav a {
    color: var(--light-sub); text-decoration: none;
    font-size: var(--type-sm); font-weight: 700;
}
.shell-foot-nav a:hover { color: var(--light); }
.shell-foot-nav a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

/* Ce qui n'existe qu'une fois la barre large : le menu le reprend en dessous.
   Posé après ce qu'il cache, et pas avant : un lien de la barre et cette classe
   ont la même spécificité, donc c'est l'ordre du fichier qui tranche, et
   déclaré plus haut il ne cachait rien. */
.shell-wide-only { display: none; }

/* ── Au-delà du téléphone ──
   La barre passe à la navigation nommée, le menu se resserre sur le compte, et
   la scène prend la gouttière large du proto. Le seuil est celui où les trois
   entrées, la pastille de compte et la marque tiennent sans se serrer. */
@media (min-width: 900px) {
    .shell-topbar { padding: var(--space-3) var(--space-7); }
    .shell-nav { display: flex; }
    .shell-wide-only { display: inline-flex; }
    .shell-menu-toggle { display: none; }
    .shell-account-name { display: block; max-width: 14ch; }
    .shell-menu { left: auto; min-width: 244px; max-width: 320px; }
    .shell-menu-play { display: none; }
    /* Le bouton « Créer un compte » est dans la barre à partir d'ici : le
       reprendre dans le menu ouvert juste en dessous le proposerait deux fois. */
    .shell-menu-account { display: none; }
    .stage { padding: var(--space-8) var(--space-6); }
}

/* ── L'espace courant dans la barre ──
   Son seuil est plus haut que celui des modes, et c'est une mesure : les trois
   modes, les trois entrées de « Entre amis », l'administration et la pastille
   de compte ne tiennent qu'à partir de là. En dessous, elles restent dans le
   menu, qui les garde jusqu'à ce même seuil. */
@media (min-width: 1180px) {
    .shell-nav-util { display: inline-flex; }
    .shell-menu-space { display: none; }
    /* L'administration entre dans la barre au même seuil que les entrées
       d'espace, et quitte le menu avec elles. */
    .shell-menu-admin { display: none; }
}

/* ── Sur un petit téléphone ──
   La marque, les compteurs d'une partie en cours et le bouton du menu doivent
   tenir sur 360 px : c'est la marque qui cède, jamais le bouton. */
@media (max-width: 520px) {
    .shell-topbar { gap: var(--space-2); padding-inline: var(--space-3); }
    .shell-brand { font-size: var(--type-card); gap: var(--space-2); flex-shrink: 0; }
    .shell-brand-badge { width: 32px; height: 32px; }
    .shell-account, .shell-menu-toggle { flex-shrink: 0; }
    .stage { padding: var(--space-5) var(--space-3) var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
    .shell-menu { animation: none; }
    .wrap { animation: none; }
}