/* SDTO — Gabarit de page unique (lot 4a, directives Benoit 2026-08-11)
   UN entête pour tout le portail : bandeau compact (produit, nav, utilisateur)
   + ligne de titre sobre. Aucune page ne recompose son entête. */

.sdto-topbar {
    display: flex; align-items: center; gap: 1.25rem;
    background: var(--sdto-accent, #16406e); color: #fff;
    padding: 0 1.25rem; height: 52px;
    position: sticky; top: 0; z-index: 900;
    /* Le bandeau et la ligne de titre sont INJECTÉS par gabarit.js, puis body passe
       de visibility:hidden (anti-FOUC) à visible en fin de init. WebKit ne propage
       pas toujours ce flip inline aux nœuds déjà insérés → on force la visibilité
       ici (sinon bandeau + sélecteur de produit rendus « hidden » sur Safari/iOS). */
    visibility: visible;
}
.sdto-topbar .marque {
    font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: #fff;
    text-decoration: none;
}
.sdto-topbar select.produit {
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
    border-radius: 7px; padding: .3rem .5rem; font-size: .85rem; max-width: 12rem;
}
.sdto-topbar nav { display: flex; gap: .25rem; flex: 1; }
.sdto-topbar nav a {
    color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem;
    padding: .35rem .7rem; border-radius: 7px;
}
.sdto-topbar nav a:hover { background: rgba(255,255,255,.12); }
.sdto-topbar nav a.actif { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
.sdto-topbar nav a.a-venir { opacity: .45; cursor: default; pointer-events: none; }
.sdto-topbar .zone-user { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.sdto-topbar .badge-role {
    background: rgba(255,255,255,.15); border-radius: 999px;
    padding: .1rem .55rem; font-size: .72rem;
}
.sdto-topbar button.sortie {
    background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
    border-radius: 7px; padding: .25rem .6rem; font-size: .8rem; cursor: pointer;
}

.sdto-titre {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.5rem .9rem; border-bottom: 1px solid #e7eaf0;
    background: var(--sdto-surface, #fff);
    visibility: visible;   /* injectée dynamiquement — voir .sdto-topbar (WebKit) */
}
.sdto-titre h1 { font-size: 1.25rem; color: var(--sdto-text, #1e293b); margin: 0; flex: 1; }
.sdto-titre .actions { display: flex; gap: .5rem; }

.sdto-contenu { padding: 1.25rem 1.5rem; max-width: 72rem; margin: 0 auto; }

/* Déclencheur de tiroir de filtres — discret, jamais une rangée de boutons */
.sdto-filtre-declencheur {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 1px solid #d6dae1; border-radius: 7px;
    padding: .3rem .6rem; font-size: .85rem; color: #475569; cursor: pointer;
}
.sdto-filtre-declencheur:hover { border-color: var(--sdto-accent, #16406e); }
.sdto-filtre-declencheur .compteur {
    background: var(--sdto-accent, #16406e); color: #fff; border-radius: 999px;
    font-size: .68rem; min-width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
    text-align: center; font-weight: 700;
}
.sdto-filtre-declencheur .compteur:empty { display: none; }