/* OtaWeb — structure du site et ajustements de Pico.css (OTA-52, OTA-55).
   Ordre de chargement (_Layout.cshtml) : lib/pico/pico.min.css, theme.css,
   site.css. Les valeurs (couleurs, tailles) viennent de theme.css ; ce
   fichier ne fait que la mise en page. Sans dépendance externe : la politique
   de contenu n'autorise que les ressources du serveur lui-même.

   Structure (OTA-55) : menu à gauche, puis ruban, zone de travail et barre
   d'état. La fenêtre ne défile pas ; seules la zone de travail et la liste
   du menu défilent.

   Points de rupture :
     fenêtre < 768 px          téléphone : menu replié derrière un bouton
     zone de travail ≥ 28rem   champs .fields sur 2 colonnes (moyen écran)
     zone de travail ≥ 60rem   sections de la page sur 2 colonnes
     zone de travail ≥ 75rem   champs .fields sur 3 colonnes (grand écran)
   Les seuils sur la zone de travail sont des requêtes de conteneur : ils
   suivent la place réellement disponible (le menu en prend une partie). */

/* --- Structure : menu, ruban, zone de travail, barre d'état ------------- */
body.app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.menu-open { display: none; }
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Menu aux couleurs de la palette choisie (OTA-145). */
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--ota-menu-bg); color: var(--ota-menu-text); border-right: 1px solid var(--ota-border); }
.sidebar .brand { display: flex; align-items: center; justify-content: space-between; padding: .75rem var(--pico-spacing); }
.sidebar .brand a { display: flex; gap: .5rem; align-items: center; font-size: 1.25rem; font-weight: 700; color: var(--ota-menu-text); text-decoration: none; }
/* Logo (OTA-148) : le logo simple a son propre fond gris ; le logo complet,
   transparent à texte noir, est posé sur une pastille claire (thème sombre). */
.sidebar .brand .logo { width: 2rem; height: 2rem; border-radius: var(--ota-radius); }
.login-logo { display: block; width: 10rem; height: auto; padding: .5rem; margin-bottom: var(--pico-spacing); background: var(--ota-logo-bg); border-radius: var(--ota-radius); }
.sidebar .selector { display: flex; padding: 0 var(--pico-spacing) .75rem; }
.sidebar .selector select { flex: 1; min-width: 0; }
.sidebar .menu { flex: 1; min-height: 0; overflow-y: auto; display: block; }
.sidebar .menu ul { display: block; margin: 0; padding: 0; }
.sidebar .menu li { display: block; list-style: none; margin: 0; padding: 0; }
.sidebar .menu a { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .5rem var(--pico-spacing); border-radius: 0; color: var(--ota-menu-text); text-decoration: none; }
.sidebar .menu a:hover { background: var(--ota-menu-hover-bg); }
.sidebar .menu a[aria-current] { background: var(--ota-menu-current-bg); color: var(--ota-menu-current-text); font-weight: 600; }
.sidebar .preferences { display: flex; gap: .6rem; align-items: center; padding: .75rem var(--pico-spacing); border-top: 1px solid var(--ota-menu-hover-bg); color: var(--ota-menu-text); text-decoration: none; }
.sidebar .preferences > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ota-primary); color: #fff; font-size: .8rem; font-weight: 700; }
/* Dans le menu, l'avatar prend la couleur de l'entrée active : visible sur toutes les palettes (OTA-145). */
.sidebar .avatar { background: var(--ota-menu-current-bg); color: var(--ota-menu-current-text); }
.menu-close, .menu-button { display: none; cursor: pointer; align-items: center; }

.base { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Filet de la palette sous le ruban (OTA-145) : une image, pour la palette Sobre à quatre couleurs. */
.ribbon { display: flex; gap: .5rem; align-items: center; padding: .5rem var(--pico-spacing) calc(.5rem + 3px); background: var(--ota-ribbon-line) bottom / 100% 3px no-repeat, var(--ota-panel); }
.ribbon .actions { display: flex; flex: 1; flex-wrap: wrap; gap: .5rem; }
.ribbon .actions > * { display: inline-flex; gap: .4rem; align-items: center; width: auto; margin: 0; padding: .35rem .75rem; font-size: .9rem; }
.ribbon .section { display: inline-flex; margin-right: calc(var(--ota-ribbon-section-gap) - .5rem); /* le gap du ruban complète */ color: var(--ota-muted); }
.ribbon .section .icon { width: 1.5rem; height: 1.5rem; }
/* Aide (OTA-133) : zone de travail | poignée | panneau d'aide. */
.split { display: flex; flex: 1; min-height: 0; }
.split > .work { min-width: 0; }
.splitter { flex: none; width: 6px; cursor: col-resize; background: var(--ota-border); }
.splitter:hover, .splitter:focus-visible { background: var(--ota-primary); outline: none; }
.help { flex: none; width: var(--ota-help-width); max-width: 70%; overflow-y: auto; padding: var(--pico-spacing); background: var(--ota-panel); font-size: .9rem; }
.help h1 { font-size: 1.4rem; }
.help h2 { font-size: 1.1rem; margin-top: 1.25rem; }
.help-close { float: right; width: auto; margin: 0 0 .5rem .5rem; padding: .2rem .6rem; font-size: .8rem; }
.ribbon .help-button { display: inline-flex; gap: .4rem; align-items: center; width: auto; margin: 0; padding: .35rem .75rem; font-size: .9rem; }
/* Aide générale (OTA-186) : lien-bouton secondaire, juste à droite de l'aide. */
.ribbon .manual-button { display: inline-flex; gap: .4rem; align-items: center; width: auto; margin: 0; padding: .35rem .75rem; font-size: .9rem; background: transparent; color: var(--ota-primary); border: 1px solid var(--ota-primary); }
/* Manuel (OTA-186) : menu des chapitres à gauche, collé en défilant ; une colonne sur téléphone. */
.manual { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: calc(var(--pico-spacing) * 2); align-items: start; }
.manual-menu { position: sticky; top: var(--pico-spacing); max-height: calc(100vh - 2 * var(--pico-spacing)); overflow-y: auto; font-size: .9rem; }
/* Pico met les <nav> et leurs listes en ligne, avec des marges négatives : ici, une colonne. */
.manual-menu, .manual-menu ul, .manual-menu li { display: block; }
nav.manual-menu ul { margin: 0 0 var(--pico-spacing); padding: 0; }
nav.manual-menu li { list-style: none; margin: 0; padding: 0; }
nav.manual-menu a { display: block; margin: 0; padding: .2rem .5rem; border-radius: var(--ota-radius); text-decoration: none; }
.manual-menu a[aria-current] { background: var(--ota-selected-bg); font-weight: 700; }
.manual-menu .manual-brand { display: flex; gap: .5rem; align-items: center; margin-bottom: var(--pico-spacing); font-size: 1.1rem; font-weight: 700; }
.manual-menu .manual-brand .logo { width: 2rem; height: 2rem; border-radius: var(--ota-radius); }
.manual-menu p { margin: 0 0 .25rem; padding: 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.manual-content { min-width: 0; margin: 0; }
/* Apparence (OTA-145) : bouton icône juste avant l'aide ; sa zone de choix
   s'ouvre dessous au survol, au clic ou au clavier (js/appearance.js). */
.appearance { position: relative; }
.ribbon .appearance-button { display: inline-flex; align-items: center; width: auto; margin: 0; padding: .35rem .5rem; background: transparent; color: var(--ota-text); border-color: var(--ota-border); }
.appearance-button .icon { width: 1.25rem; height: 1.25rem; }
.appearance-panel { display: none; position: absolute; top: 100%; right: 0; z-index: 20; gap: .75rem; width: max-content; max-width: calc(100vw - 1rem); padding: .75rem 1rem; background: var(--ota-panel); border: 1px solid var(--ota-border); border-radius: var(--ota-radius); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .2); font-size: .85rem; }
@media (hover: hover) {
    .appearance:hover .appearance-panel { display: grid; }
}
.appearance.open .appearance-panel, .appearance:focus-within .appearance-panel { display: grid; }
.appearance-group { display: grid; gap: .3rem; }
.appearance-group > span { color: var(--ota-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.appearance-choices { display: flex; flex-wrap: wrap; gap: .3rem; }
.appearance-choices button { display: inline-flex; gap: .4rem; align-items: center; width: auto; margin: 0; padding: .25rem .65rem; font-size: .85rem; background: var(--ota-code-bg); color: var(--ota-text); border: 1px solid transparent; }
.appearance-choices button:hover { border-color: var(--ota-border); }
.appearance-choices button[aria-pressed="true"] { color: var(--ota-primary); border-color: var(--ota-primary); font-weight: 700; }
.swatch { width: .75rem; height: .75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ota-border); }
.swatch.nuage { background: var(--ota-swatch-nuage); }
.swatch.marine { background: var(--ota-swatch-marine); }
.swatch.carte { background: var(--ota-swatch-carte); }
.swatch.sobre { background: var(--ota-swatch-sobre); }
.work { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pico-spacing) calc(var(--pico-spacing) * 1.5); container: work / inline-size; }
.status { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: .35rem var(--pico-spacing); background: var(--ota-panel); border-top: 1px solid var(--ota-border); color: var(--ota-muted); font-size: .85rem; }

@media (max-width: 767px) {
    /* Téléphone : boutons du mini-menu en icône seule (OTA-136). */
    .grid-menu :is(a[role=button], button) > span:not([class]) { display: none; }
    /* Téléphone : l'aide recouvre la page. */
    .help { position: fixed; inset: 0; z-index: 30; width: auto; max-width: none; }
    .splitter { display: none; }
    body.app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; position: fixed; inset: 0; z-index: 10; }
    .menu-open:checked ~ .sidebar { display: flex; }
    .menu-close, .menu-button { display: inline-flex; }
    .manual { grid-template-columns: minmax(0, 1fr); }
    /* Téléphone : le chapitre d'abord, le menu des chapitres ensuite. */
    .manual-menu { position: static; max-height: none; order: 2; }
    /* Téléphone : la zone Apparence s'ouvre sous le ruban (qui peut passer
       sur deux lignes), sur la largeur de l'écran. */
    .ribbon { position: relative; }
    .appearance { position: static; }
    .appearance-panel { left: .5rem; right: .5rem; width: auto; max-width: none; }
}

/* --- Mise en page de la zone de travail --------------------------------- */

/* Page : <div class="page">. Sur une zone large, les sections (et .panel) se
   rangent sur 2 colonnes ; le reste (titres, liens de retour, messages,
   tableaux hors section) prend toute la largeur. .wide : une section sur
   toute la largeur (grand tableau). */
.page { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: calc(var(--pico-spacing) * 2); align-items: start; }
.page > * { min-width: 0; }
/* Tableau posé directement dans la page : défile seul sur petit écran au
   lieu d'élargir la page. */
.page > table { display: block; overflow-x: auto; }

@container work (min-width: 60rem) {
    .page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page > :not(section, .panel), .page > .wide { grid-column: 1 / -1; }
}

/* Grille des champs (contrôles) : 1, 2 ou 3 colonnes selon la largeur de
   l'écran (OTA-55, remplace les 2 colonnes d'OTA-52) ; .full : un élément sur
   toute la largeur. */
.fields { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--pico-spacing); }
.fields > * { min-width: 0; }
.fields > .full { grid-column: 1 / -1; }

@container work (min-width: 28rem) {
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container work (min-width: 75rem) {
    .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Petit formulaire seul (connexion, profil) : largeur limitée. Un panneau
   .narrow est limité sur une page à 1 colonne ; sur une zone large, il occupe
   sa colonne. */
section.narrow:not(.panel) { max-width: 420px; }
section.panel.narrow { max-width: 560px; }

@container work (min-width: 60rem) {
    section.panel.narrow { max-width: none; }
}

.panel {
    background: var(--ota-panel); border: 1px solid var(--ota-border); border-radius: var(--ota-radius);
    padding: var(--pico-spacing); margin-bottom: var(--pico-spacing); overflow-x: auto;
}

/* --- Formulaires -------------------------------------------------------- */
textarea { min-height: 8rem; font-family: var(--ota-font-family-mono); }
textarea.code { font-size: .9rem; }

/* Formulaires en ligne (sélecteur d'Entreprise, actions dans un tableau) :
   pas de pleine largeur ni de marges de Pico. */
.selector, form.inline { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: 0; }
.selector :is(input, select, button), form.inline :is(input, select, button) { width: auto; margin: 0; }
label.inline { display: inline-flex; gap: .25rem; align-items: center; margin-right: .75rem; }
label.inline input { margin: 0; }

/* Boutons : couleur danger, et bouton qui a l'air d'un lien (déconnexion). */
button.danger { --pico-background-color: var(--ota-danger); --pico-border-color: var(--ota-danger); }
button.link { background: none; border: 0; padding: 0; margin: 0; width: auto; color: var(--pico-primary); text-decoration: underline; }
td form { margin: 0; }
td :is(button, input, select) { margin-bottom: .25rem; }

/* --- Messages ----------------------------------------------------------- */
.muted { color: var(--ota-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.errors ul { margin: .5rem 0; padding: .5rem 1rem .5rem 2rem; background: var(--ota-danger-bg); color: var(--ota-danger); border-radius: var(--ota-radius); }
.errors ul li { list-style: disc; }
/* Résumé de validation sans erreur : ASP.NET le masque par un attribut
   style, refusé par la politique de contenu ; on le masque ici. */
.validation-summary-valid { display: none; }
.field-error { display: block; color: var(--ota-danger); font-size: .9em; margin-top: -.5rem; margin-bottom: .5rem; }
.success { padding: .5rem 1rem; background: var(--ota-success-bg); color: var(--ota-success); border-radius: var(--ota-radius); }
.notice { padding: .5rem 1rem; background: var(--ota-warning-bg); border-radius: var(--ota-radius); }
.secret { font-family: var(--ota-font-family-mono); padding: .5rem; background: var(--ota-warning-bg); word-break: break-all; }

/* --- Listes et tableaux ------------------------------------------------- */
ul.choices { padding: 0; }
ul.choices li { list-style: none; padding: .5rem 0; border-bottom: 1px solid var(--ota-border); }
.tag { display: inline-block; padding: 0 .4rem; border-radius: var(--ota-radius); background: var(--ota-tag-bg); font-size: .85em; }
.tag.current { background: var(--ota-tag-current-bg); }
.tag.deleted { background: var(--ota-tag-deleted-bg); }
.inline-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.pager { display: flex; gap: 1rem; align-items: center; }

/* Lignes marquées par une grille (RowClass). */
tr.selected td { background: var(--ota-selected-bg); }

/* Grilles (OTA-90) : largeur maximale, puis défilement horizontal ; ligne
   cliquable (détail ou sélection) ; ligne sélectionnée grisée. */
.grid { max-width: var(--ota-grid-max-width); overflow-x: auto; }
.grid > table { margin-bottom: 0; }
/* Mini-menu des grilles (OTA-131) : Créer, Modifier, Supprimer. */
/* Mini-menu des grilles (OTA-131, OTA-136) : barre collée à la grille, boutons
   secondaires (contour), icône + texte ; texte masqué sur téléphone (info-bulle). */
.grid-menu { display: flex; flex-wrap: wrap; gap: .4rem; max-width: var(--ota-grid-max-width); padding: .4rem .5rem; background: var(--ota-grid-menu-bg); border-bottom: 1px solid var(--ota-border); border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0; }
.grid-menu form { display: contents; }
.grid-menu [data-grid-delete-ids] { display: none; }
.grid-menu :is(a[role=button], button) { display: inline-flex; gap: .35rem; align-items: center; width: auto; margin: 0; padding: .2rem .65rem; font-size: .85rem; background: transparent; color: var(--ota-primary); border: 1px solid var(--ota-primary); }
.grid-menu :is(a[role=button], button):hover:not([disabled]) { background: var(--ota-selected-bg); }
.grid-menu .outline.danger { color: var(--ota-danger); border-color: var(--ota-danger); }
.grid-menu [disabled] { opacity: .45; cursor: not-allowed; }
.grid-menu .icon { width: 1rem; height: 1rem; }
/* Bascule de la sélection multiple (OTA-143) : une icône par état, fond teinté si activée. */
.grid-menu [data-grid-multi][aria-pressed="false"] .grid-multi-on, .grid-menu [data-grid-multi][aria-pressed="true"] .grid-multi-off { display: none; }
.grid-menu [data-grid-multi][aria-pressed="true"] { background: var(--ota-selected-bg); }
.grid-menu .grid-count { margin-left: auto; align-self: center; color: var(--ota-muted); font-size: .85rem; }
.grid-menu + .grid { max-width: var(--ota-grid-max-width); }
.grid.audit, .grid-menu:has(+ .grid.audit) { max-width: none; }
/* Journal d'audit (OTA-130) : toute la largeur ; les colonnes courtes à leur
   contenu, Auteur (2e) à largeur fixe, Détails (dernière) prend le reste. */
.grid.audit { max-width: none; }
.grid.audit th, .grid.audit td { width: 1%; }
.grid.audit :is(th, td):nth-child(2) { width: var(--ota-audit-actor-width); min-width: var(--ota-audit-actor-width); }
.grid.audit :is(th, td):last-child { width: 100%; }
.grid tbody tr[tabindex] { cursor: pointer; }
/* Accueil (OTA-89) : listes de 10 lignes, appareils du groupe sur 5, défilement
   au-delà ; l'en-tête reste visible en défilant. */
.home-list .grid { max-height: calc(var(--ota-grid-row-height) * 11); overflow-y: auto; }
.home-list .subgrid .grid { max-height: calc(var(--ota-grid-row-height) * 6); }
.home-list .grid thead th { position: sticky; top: 0; z-index: 1; background: var(--pico-background-color); }
.grid tbody tr[tabindex]:hover td { background: var(--ota-selected-bg); }
.grid tbody tr.is-selected td { background: var(--ota-grid-selected-bg); color: var(--ota-muted); }
/* Coche des lignes sélectionnées (OTA-140) : sa place reste quand la ligne ne l'est pas. */
.grid .grid-check { width: var(--ota-grid-check-width); padding-left: .5rem; padding-right: 0; text-align: center; }
.grid td.grid-check::before { content: "✓"; visibility: hidden; color: var(--ota-primary); font-weight: 700; }
.grid tr.is-selected td.grid-check::before { visibility: visible; }
.grid tbody tr[tabindex]:focus-visible { outline: 2px solid var(--ota-primary); outline-offset: -2px; }
.subgrid { margin-top: var(--pico-spacing); }

/* Formulaire de filtres (journal d'audit). */
form.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-bottom: 1rem; }
form.filters label { margin: 0; }
form.filters :is(input, select, button) { width: auto; margin: 0; }

/* Onglets (OTA-54) : barre de liens ?tab=, onglet actif marqué par
   aria-current, rendu côté serveur. */
.tabs > nav { border-bottom: 1px solid var(--ota-border); margin-bottom: var(--pico-spacing); }
.tabs > nav ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0; padding: 0; }
.tabs > nav li { list-style: none; padding: 0; margin: 0; }
.tabs > nav a { display: block; padding: .5rem 1rem; margin-bottom: -1px; border: 1px solid transparent; border-radius: var(--ota-radius) var(--ota-radius) 0 0; text-decoration: none; }
.tabs > nav a[aria-current] { background: var(--ota-panel); border-color: var(--ota-border); border-bottom-color: var(--ota-panel); color: var(--ota-text); font-weight: 600; }

/* Fiches (OTA-69) : le titre suit le lien de retour sans la marge que Pico
   met au-dessus d'un titre qui suit un paragraphe ; entrée dépréciée grisée. */
.page > p + h1 { margin-top: 0; }
tr.deprecated td { color: var(--ota-muted); }

/* Releases (OTA-70) : empreinte SHA-256 coupée au besoin ; un module par article. */
code.hash { word-break: break-all; }
.page article { margin: 0 0 var(--pico-spacing); padding: var(--pico-spacing); }

/* Taille (OTA-78) : nombre puis unité, côte à côte. */
.size { display: flex; gap: .5rem; }
.size input { flex: 1; min-width: 0; }
.size select { width: auto; }

/* Membres d'un groupe (OTA-80) : liste d'appareils, un clic ajoute ou retire. */
ul.members { padding: 0; }
ul.members li { list-style: none; margin: 0 0 .25rem; }
ul.members form { margin: 0; }
ul.members .member { display: flex; gap: .5rem; align-items: center; width: 100%; margin: 0; padding: .4rem .75rem; text-align: left; background: var(--ota-panel); color: var(--ota-text); border: 1px solid var(--ota-border); border-radius: var(--ota-radius); }
ul.members .member.on { background: var(--ota-selected-bg); border-color: var(--ota-primary); }
ul.members .check { display: inline-block; width: 1.2em; color: var(--ota-primary); font-weight: 700; }