/* =========================================================
   Beyond Lightspeed — Gabarit des rubriques : liste latérale et fiche
   ---------------------------------------------------------
   Systèmes, Flottes, Commerce, Plans, Radars, Stratégies, Lieutenants,
   Diplomatie, Dons, Journal (Ordres, Évènements, Rapports, Statistiques),
   Renseignement et lobby posent tous la même page : une liste de cartes à
   gauche, collée sous l'en-tête, et la fiche de l'élément choisi à droite.
   Le bloc était recopié dans chaque feuille, avec ses propres largeurs et ses
   propres seuils : il est ici une seule fois. Une rubrique n'ajuste que ses
   variables, sur son propre conteneur :

     --tpl-list-w       largeur de la liste (300 px par défaut)
     --tpl-min-h        hauteur minimale de la page (520 px)
     --tpl-sticky-top   décalage sous l'en-tête collant (110 px)
     --tpl-list-max-h   hauteur de la liste quand elle passe au-dessus de la
                        fiche (300 px)

   Le seuil d'empilement (900 px) est STACKED_QUERY dans
   frontend/src/utils/breakpoints.js, qui fait défiler jusqu'à la fiche après
   un choix dans la liste.
   ========================================================= */

.tpl-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    min-height: var(--tpl-min-h, 520px);
}
.tpl-sidebar {
    width: var(--tpl-list-w, 300px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(8, 16, 30, 0.85), rgba(4, 9, 18, 0.85));
}
/* La liste est bornée à la hauteur visible et défile pour elle-même ;
   « overscroll-behavior: contain » empêche la molette de repartir sur la
   page une fois le bas atteint. */
.tpl-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 10px;
    display: grid;
    align-content: start;
    gap: 6px;
}
.tpl-main {
    flex: 1;
    min-width: 0;
    scroll-margin-top: var(--tpl-sticky-top, 110px);
}

/* ── Conteneur « sheet » ──
   Les encarts d'une fiche s'adaptent à la place qu'ils ont, pas à la largeur
   de l'écran : à 1 100 px avec le menu déplié, la fiche n'a que 450 px à côté
   de la liste, quand un téléphone en portrait en offre 330 et une tablette
   760. Les feuilles des rubriques écrivent donc leurs seuils de fiche en
   `@container sheet (max-width: …)`. La fiche, le corps des modales (une
   fiche ouverte depuis la vue Tableau) et, à défaut, le corps de page sont
   des conteneurs : une règle de fiche s'applique où qu'elle s'affiche.
   Aucun descendant de ces blocs n'est en position fixe (les modales passent
   par un portail vers <body>), que le confinement retiendrait. */
.page-body,
.tpl-main,
.modal > .modal-body {
    container: sheet / inline-size;
}
/* Un conteneur ne tire plus sa largeur de son contenu : il doit la recevoir
   de son parent. D'où la largeur explicite de la fiche une fois empilée sous
   la liste (une colonne flex qui n'étire pas ses enfants, comme Systèmes,
   la laissait à 0 px). */

/* Le panneau reste collé sous l'en-tête de page (lui-même collant) : faire
   défiler la fiche ne l'emporte pas hors de vue. */
@media (min-width: 901px) {
    .tpl-sidebar {
        position: sticky;
        top: var(--tpl-sticky-top, 110px);
        align-self: flex-start;
        max-height: calc(100vh - var(--tpl-sticky-top, 110px) - 16px);
        max-height: calc(100dvh - var(--tpl-sticky-top, 110px) - 16px);
    }
}

/* Écran étroit : la liste passe au-dessus de la fiche, toute largeur, avec
   une hauteur bornée pour que la fiche reste à portée. Au doigt, arrivé au
   bout de la liste, le geste continue sur la page au lieu de rester piégé
   dans le cadre. */
@media (max-width: 900px) {
    .tpl-layout {
        flex-direction: column;
        min-height: 0;
    }
    .tpl-sidebar,
    .tpl-main {
        width: 100%;
        box-sizing: border-box;
    }
    .tpl-list {
        max-height: var(--tpl-list-max-h, 300px);
        overscroll-behavior-y: auto;
    }
}