/* Garde-robe — accueil (htdocs/assets/garderobe/accueil.css), lot 0.
   La mise en page de garderobe.html (§ 7.2) : grille .g-app, colonne latérale (bureau),
   colonne principale, panneau de détail (bureau) ou écran poussé (mobile), barre d'onglets
   (mobile), masquage de la barre des Tools. Les écrans eux-mêmes (.ec-*) ont leur feuille.
   État posé sur <html> par accueil.js :
     data-detail  : un écran de détail (fiche, formulaire, compositeur) est ouvert ;
     data-pousse  : un écran poussé couvre l'écran (mobile) : la barre d'onglets s'efface ;
     --g-haut     : hauteur de la barre des Tools quand elle est visible (bureau). */

/* La barre des Tools : seulement au bureau, et jamais dans l'app de l'écran d'accueil (§ 7.2). */
@media (max-width: 1023px), (display-mode: standalone) {
    .gr .topbar { display: none; }
}
.gr .topbar { z-index: var(--z-barre); }
/* Le bouton de thème (la lune) est « supprimé des pages de la Garde-robe », remplacé par sun-moon dans
   Réglages, Apparence (§ 4.3). La barre des Tools reste inchangée dans la page (§ 12.3) : il y est seulement masqué. */
.gr .topbar .theme-toggle { display: none; }

/* Un élément qui prend le focus au clavier ne passe jamais sous une barre fixe ou collante (WCAG 2.4.11). */
html.gr { scroll-padding-top: calc(var(--g-haut, 0px) + 8px); }

.g-app { min-height: 100dvh; }
.g-principal { display: block; min-width: 0; }
.g-principal > section, .g-detail > section { min-width: 0; }

/* ---------------- Mobile et tablette (< 1024) ---------------- */
@media (max-width: 1023px) {
    .g-app { display: block; }
    .g-lateral { display: none; }
    .g-principal {
        max-width: 680px; margin: 0 auto;
        padding-bottom: calc(50px + env(safe-area-inset-bottom) + 24px);
    }
    /* Écran poussé : la fiche et le formulaire couvrent la page, avec leur propre défilement. */
    .g-detail {
        position: fixed; inset: 0; z-index: var(--z-detail); display: none;
        background: var(--gr-fond); overflow-y: auto; overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-top: 52px;       /* barre compacte collante (44) + 8 ; un écran à bande collée (le compositeur)
                                           pose le sien dans sa feuille : lui seul connaît la hauteur de sa bande */
    }
    .g-detail > section { max-width: 680px; margin: 0 auto; min-height: 100%; }
    html[data-detail] .g-detail { display: block; animation: g-pousse-entree var(--d-moyen) var(--c-sortie); }
    html[data-detail][data-vt-en-cours] .g-detail { animation: none; }
    html[data-detail] body { overflow: hidden; }
    /* Les annonces flottent 8 px au-dessus de la barre d'onglets. */
    .gr { --g-annonce-bas: calc(50px + env(safe-area-inset-bottom) + 8px); }
    /* Barre compacte collante en haut (44), barre d'onglets fixe en bas (50 + sécurité). */
    html.gr { scroll-padding-top: 52px; scroll-padding-bottom: calc(50px + env(safe-area-inset-bottom) + 8px); }
    html.gr[data-pousse] { --g-annonce-bas: calc(24px + env(safe-area-inset-bottom)); }
    .gr .appfoot { padding-bottom: calc(50px + env(safe-area-inset-bottom) + 26px); }
    html[data-detail] .appfoot { display: none; }
}

/* Écran poussé générique (sous-pages de Réglages, mobile) : <div class="g-pousse"> dans sa section. */
.g-pousse { position: fixed; inset: 0; z-index: var(--z-detail); background: var(--gr-fond); overflow-y: auto;
            overscroll-behavior: contain; animation: g-pousse-entree var(--d-moyen) var(--c-sortie); scroll-padding-top: 52px; }
@media (min-width: 1024px) { .g-pousse { position: static; inset: auto; z-index: auto; overflow: visible; animation: none; } }
@keyframes g-pousse-entree { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- Barre d'onglets (mobile, § 6.9) ---------------- */
.g-onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre);
    height: calc(50px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: flex; border-top: 1px solid var(--gr-ligne);
    background: var(--gr-barre); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    transition: transform var(--d-court) var(--c-standard);
}
html[data-pousse] .g-onglets { transform: translateY(100%); }
.g-onglet {
    flex: 1 1 0; min-width: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--gr-texte-2); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.g-onglet[aria-current="page"] { color: var(--gr-texte); }
.g-onglet-ic { position: relative; display: block; width: 24px; height: 24px; }
.g-onglet .t-micro { white-space: nowrap; }
.g-onglet:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: -4px; border-radius: var(--r-ctrl); }
@media (min-width: 1024px) { .g-onglets { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .g-onglets { background: var(--gr-fond); } }
@media (prefers-reduced-transparency: reduce) { .g-onglets { background: var(--gr-fond); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------------- Bureau (≥ 1024) : colonne latérale, principale, panneau de détail ---------------- */
@media (min-width: 1024px) {
    .gr { --g-haut: 58px; }
    .g-app {
        display: grid; grid-template-columns: 232px minmax(0, 1fr) 440px; align-items: start;
        min-height: calc(100dvh - var(--g-haut));
    }
    .g-principal { --gr-marge: 40px; --gr-marge-d: 40px; max-width: 1240px; width: 100%; padding-bottom: 64px; }
    .g-detail {
        position: sticky; top: var(--g-haut); height: calc(100dvh - var(--g-haut)); overflow-y: auto; overscroll-behavior: contain;
        border-left: 1px solid var(--gr-ligne); background: var(--gr-fond);
    }
    /* Grand écran du compositeur (html[data-detail-large], compositeur.js) : le panneau prend la place de la colonne
       principale ; la colonne latérale reste. */
    html[data-detail-large] .g-app { grid-template-columns: 232px minmax(0, 1fr); }
    html[data-detail-large] .g-principal { display: none; }
    html[data-detail-large] .g-detail { border-left: 0; }
    html[data-detail-large] .g-detail > section { max-width: none; }
    .g-lateral {
        position: sticky; top: var(--g-haut); height: calc(100dvh - var(--g-haut)); overflow-y: auto;
        display: flex; flex-direction: column; gap: 4px; padding: 24px 16px 16px;
        border-right: 1px solid var(--gr-ligne); background: var(--gr-fond);
    }
}

/* ---------------- Colonne latérale (bureau, § 6.9) ---------------- */
.g-lateral-titre { margin: 0 8px 16px; font: 400 34px/1 var(--gr-serif); color: var(--gr-texte); text-decoration: none; display: block; }
.g-releve-jour {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; border-radius: var(--r-ctrl);
    background: var(--gr-surface); color: var(--gr-texte); text-decoration: none;
}
.g-releve-jour .t-surtitre { color: var(--gr-texte-2); }
.g-releve-jour-vgs { display: flex; gap: 6px; --vg: 40px; }
.g-releve-jour-vgs .g-emplacement { --vg: 40px; }
.g-releve-jour-etat { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.g-releve-jour-etat.ok { color: var(--gr-ok); }
.g-releve-jour-etat .g-ic { width: 16px; height: 16px; }
.g-entree {
    display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px;
    color: var(--gr-texte); text-decoration: none; font: 500 15px/20px var(--gr-sans);
}
.g-entree .g-ic { width: 20px; height: 20px; }
.g-entree-nb { margin-left: auto; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-3); font-variant-numeric: tabular-nums; }
.g-entree-nb.trous { color: var(--gr-accent); }
.g-entree[aria-current="page"] { background: var(--gr-presse); }
@media (hover: hover) { .g-entree:not([aria-current="page"]):hover { background: var(--gr-survol); } }
.g-entree:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 0; }
.g-lateral-filet { height: 1px; margin: 8px 10px; background: var(--gr-ligne); }
/* Les rubriques de la colonne (« Ma garde-robe », « Style ») : une étiquette discrète au-dessus de leurs entrées. */
.g-lateral-rubrique { margin: 18px 10px 4px; font: 600 12px/16px var(--gr-sans); letter-spacing: .1em; text-transform: uppercase; font-stretch: 88%;
    color: var(--gr-texte-3); }
.g-lateral-pied { margin-top: auto; padding: 12px 10px 0; display: flex; align-items: center; gap: 6px;
                  font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.g-lateral-pied .g-ic { width: 16px; height: 16px; }
.g-lateral-pied.attente { color: var(--gr-attention); }
.g-tourne { animation: g-tourne 800ms linear infinite; }
@keyframes g-tourne { to { transform: rotate(360deg); } }

/* ---------------- Aperçu du panneau (bureau, sans pièce ouverte) ---------------- */
.ec-apercu { padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 16px; --gr-marge: 0px; }
.ec-apercu .apercu-titre { margin: 0; color: var(--gr-texte-2); }
.ec-apercu .apercu-surveiller { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--gr-texte); text-decoration: none; }
.ec-apercu .apercu-surveiller .t-chapo { flex: 1; }
.ec-apercu .apercu-surveiller .g-ic { margin-top: 6px; color: var(--gr-texte-3); }
.ec-apercu .apercu-actions { display: flex; gap: 8px; }
.ec-apercu .apercu-neutre { margin: 0; color: var(--gr-texte-2); max-width: 34ch; }