/* = Layout — coquille de page : sidebar, en-tête mobile, bandeaux,
   pied de page, objets de mise en page partagés (ADR 0002).
   Issu du découpage de main.css (15/09/2026), chargé sur toutes les pages
   dans l'ordre fixé par templates/partials/feuilles_de_style.html.  */

.layout {
  display: flex;
  min-height: 100vh;
}

.layout__main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  transition: margin-left var(--transition-slow);
}

.layout__content {
  padding: var(--space-7) var(--space-9) var(--space-12);

  /* Pas de max-width : utiliser toute la largeur dispo (refresh Notion 4 mai 2026). */
}

.sidebar--collapsed ~ .layout__main,
.sidebar--collapsed + .layout__main {
  margin-left: var(--sidebar-collapsed-width);
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;

  /* UX-K4 — au-dessus de Leaflet (panes a 400, popup a 700) et de la plupart
     des composants tiers ; sous les dialogues (couche supérieure), cf. tokens.css (#162). */
  z-index: var(--z-sidebar);
  transition: width var(--transition-slow);
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-xs);
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2);
  height: 44px;
  flex-shrink: 0;
}

.sidebar__logo a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--sidebar-text-strong);
}

.sidebar__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.sidebar__logo-text {
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--sidebar-text-strong);
}

/* .sidebar__toggle supprimé — la sidebar se déploie au hover */
.sidebar__nav {
  flex: 1;
  padding: 0 var(--space-2) var(--space-3);
}

.sidebar__section {
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-section-text);
  padding: var(--space-3) var(--space-2) var(--space-1);
  white-space: nowrap;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: var(--text-13);
  font-weight: var(--weight-normal);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  margin-bottom: 1px;
  white-space: nowrap;
  border-left: none;
  position: relative;
}

.sidebar__item:hover {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-hover-bg);
  text-decoration: none;
}

.sidebar__item--active {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-active-bg);
  font-weight: var(--weight-medium);
  border-left: none;
}

.sidebar__item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--sidebar-section-text);
  opacity: 1;
}

.sidebar__item:hover svg {
  color: var(--sidebar-text-strong);
}

.sidebar__item--active svg {
  color: var(--sidebar-text-strong);
  opacity: 1;
}

/* --- Footer sidebar --- */
.sidebar__footer {
  padding: var(--space-2);
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) 0 var(--space-1-5) var(--space-1);
  margin-top: 2px;

  /* Hauteur réservée à celle du bloc déployé (nom sur plusieurs lignes) : le groupe du bas
     est ancré en bas, il ne bouge pas quand le nom de l'agence apparaît. */
  min-height: var(--sidebar-user-height);
}

/* Largeur du bloc déployé, posée d'emblée : le nom ne se recoupe pas en lignes pendant que le
   menu s'élargit (il passait de 3 lignes à 2 sous les yeux). Le pied de menu (2 x 8 px), le retrait
   du profil (4 px), l'avatar et la déconnexion (24 px chacun) et deux intervalles se retranchent de
   la largeur du menu. */
.sidebar__user-info {
  flex: none;
  width: calc(var(--sidebar-width) - var(--space-2) * 2 - var(--space-1) - var(--sidebar-user-control) * 2 - var(--space-2) * 2);
  min-width: 0;
  overflow: hidden;
}

.sidebar__user-info strong {
  display: block;
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  color: var(--sidebar-text-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sidebar__user-info span {
  font-size: var(--text-11);
  color: var(--sidebar-section-text);
}

.sidebar__logout-form {
  flex-shrink: 0;
}

.sidebar__logout {
  background: none;
  border: none;
  color: var(--sidebar-text);
  cursor: pointer;
  width: var(--sidebar-user-control);
  height: var(--sidebar-user-control);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.sidebar__logout:hover {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-hover-bg);
}

/* --- Onboarding badge sidebar --- */
.sidebar__onboarding {
  padding: var(--space-2) var(--space-2-5);
  margin-top: auto;
}

.sidebar__onboarding-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-12);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.sidebar__onboarding-link:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
  color: var(--color-text-inverse);
}

.sidebar__count {
  /* Détaché du flow flex : positionné absolu à droite du sidebar__item
     parent (qui passe en relative). Élimine tout risque de débordement
     vertical ou horizontal quand le compteur a beaucoup de chiffres.
     Le dessin est celui du compteur (badge badge--count badge--danger). */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Le badge étant en absolute, son sidebar__item parent doit être relative */

/* Le conteneur nu du compteur (`data-poll-url`) ne produit aucune boîte : sinon il compte comme
   un enfant flex, ajoute un `gap` et décale l'icône de l'entrée (Messagerie) vers la gauche. */
.sidebar__item > [data-poll-url] {
  display: contents;
}

/* Dropdown notifications — règles globales pour cacher le conteneur AVANT
   le premier chargement htmx du partial (qui contient son propre \3c style>).
   Sans ça, le conteneur vide était affiché par défaut → texte parasite. */
.notif-dropdown-container {
  display: none;
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: var(--space-2);
  z-index: var(--z-dropdown);
  width: 360px;
}

.notif-dropdown-container.notif-dropdown--visible {
  display: block;
}

/* Sous-entrée de la sidebar — décalée à droite. */
.sidebar__item--sub {
  padding-left: var(--space-7);
}

/* Cache automatiquement le badge si son contenu est vide (compteur à 0). */

/* --- Collapsed state --- */

/* Refresh 4 mai 2026 :
   - Largeur réduite à 56px (icônes + même padding-left que mode déployé)
   - Icône à la même position horizontale dans les 2 modes (padding 8px gauche)
   - PAS de texte tronqué (data-label retiré)
   - Hover sur la sidebar collapsed → déploiement en overlay (par-dessus le contenu)
   - Transition smooth avec petit délai pour éviter déploiements intempestifs */
.sidebar--collapsed {
  width: var(--sidebar-collapsed-width);
  transition: width var(--transition-base);
}

/* Eléments cachés en collapsed */
.sidebar--collapsed .sidebar__logo-text,
.sidebar--collapsed .sidebar__item-text,
.sidebar--collapsed .sidebar__user-info,
.sidebar--collapsed .sidebar__logout-form,
.sidebar--collapsed .sidebar__onboarding-link .sidebar__item-text,
.sidebar--collapsed .sidebar__onboarding-count,
.sidebar--collapsed .sidebar__count {
  display: none;
}

/* Le titre d'une section se masque sans quitter le flux : sa hauteur reste, donc les
   entrées ne bougent pas verticalement quand le volet s'ouvre au survol. */
.sidebar--collapsed:not(:hover) .sidebar__section {
  visibility: hidden;
}

.sidebar--collapsed .sidebar__top {
  /* On garde flex horizontal : logo-mark à gauche, toggle à droite */
  padding: var(--space-3) var(--space-3) var(--space-2);
  gap: 0;
}

/* Items : on GARDE le même padding-left que mode déployé (8px),
   donc l'icône reste à la même position horizontale. */
.sidebar--collapsed .sidebar__item {
  padding: 0 var(--space-2);
  justify-content: flex-start;
  gap: var(--space-2);
}

.sidebar--collapsed .sidebar__user {
  padding: var(--space-1-5) var(--space-2);
  gap: var(--space-2);
}

.sidebar--collapsed .sidebar__onboarding-link {
  padding: 0 var(--space-2);
}

.sidebar--collapsed:hover {
  width: var(--sidebar-width);

  /* Petit délai pour éviter les déploiements intempestifs */
  transition: width var(--transition-base) 200ms;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-md);
}

/* Au hover, on révèle tout */
.sidebar--collapsed:hover .sidebar__logo-text,
.sidebar--collapsed:hover .sidebar__item-text,
.sidebar--collapsed:hover .sidebar__user-info,
.sidebar--collapsed:hover .sidebar__logout-form,
.sidebar--collapsed:hover .sidebar__onboarding-link .sidebar__item-text,
.sidebar--collapsed:hover .sidebar__onboarding-count,
.sidebar--collapsed:hover .sidebar__count {
  display: revert;
}

.sidebar__item:focus-visible {
  outline: 2px solid var(--sidebar-text-strong);
  outline-offset: -2px;
}

@media (width <= 768px) {
  .layout__main {
    margin-left: 0;
  }

  .layout__content {
    padding: var(--space-5) var(--space-4);
  }
}

/* Impression : ces trois règles battent toute la cascade écran, y compris
   `body:not(.sidebar-pinned) .layout__main` (0,2,1) plus bas — c'est le seul
   `!important` interne de l'application, et il est là pour ça. */
@media print {
  .sidebar,
  .sidebar__onboarding,
  .page-header__actions {
    /* stylelint-disable-next-line declaration-no-important -- impression */
    display: none !important;
  }

  .layout__main {
    /* stylelint-disable-next-line declaration-no-important -- impression */
    margin-left: 0 !important;
  }

  .layout__content {
    /* stylelint-disable-next-line declaration-no-important -- impression */
    padding: 0 !important;
  }
}

.mobile-header {
  display: none;
}

@media (width <= 768px) {
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 var(--space-4);
    background: var(--sidebar-bg);
    color: var(--sidebar-text-strong);
    z-index: var(--z-mobile-header);
  }

  .mobile-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-bold);
    font-size: var(--text-16);
    text-decoration: none;
    color: inherit;
  }

  .mobile-header__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-bold);
    font-size: var(--text-14);
  }

  .mobile-header__toggle {
    background: none;
    border: none;
    color: inherit;
    padding: var(--space-1-5);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .mobile-header__toggle:hover {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
  }

  /* Sidebar en overlay mobile */
  .sidebar {
    display: flex;
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-sidebar);
    overflow-y: auto;
  }

  .sidebar--mobile-open {
    transform: translateX(0);
  }

  /* Overlay sombre derrière la sidebar */
  .mobile-voile {
    display: none;
    position: fixed;
    inset: 52px 0 0;
    background: var(--color-overlay);
    z-index: var(--z-mobile-overlay);
    opacity: 0;
    transition: opacity var(--transition-slow);
  }

  .mobile-voile--visible {
    display: block;
    opacity: 1;
  }

  /* Décaler le contenu principal sous le header mobile */
  .layout__main {
    padding-top: var(--space-12);
  }
}

.page-footer {
  padding: var(--space-5);
  text-align: center;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-12);
  color: var(--color-text-secondary);
  margin-top: var(--space-10);
}

.annonce-banner {
  padding: var(--space-2-5) var(--space-5);
  font-size: var(--text-13);
  text-align: center;
}

.annonce-banner__content {
  max-width: 1200px;
  margin: 0 auto;
}

.annonce-banner--info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-bottom: 1px solid var(--color-info-border);
}

.annonce-banner--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-dark);
  border-bottom: 1px solid var(--color-warning-border);
}

.annonce-banner--maintenance {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-bottom: 1px solid var(--color-danger-border);
}

.annonce-banner--feature {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-bottom: 1px solid var(--color-success-border);
}

/* --- Bannière d'impersonation --- */
.impersonate-banner {
  background: var(--color-warning-bg);
  border-bottom: 2px solid var(--color-warning);
  padding: var(--space-2) var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-indicator);
}

.impersonate-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.impersonate-banner__text {
  font-size: var(--text-13);
  color: var(--color-warning-dark);
}

@media (width <= 768px) {
  /* Sidebar : devient un drawer caché par défaut, ouvert via burger */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: var(--z-sidebar);
  }

  .sidebar--mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px color-mix(in srgb, var(--color-shadow) 15%, transparent);
  }

  /* Le contenu principal prend toute la largeur */
  .layout__main {
    margin-left: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (width > 768px) {
  /* État par défaut : rétractée */
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }

  /* Layout main décalé en conséquence. `sidebar-pinned` n'a jamais été
     posée : la négation est toujours vraie, la règle vit sur toutes les
     pages (la retirer comme « morte », lot ⑰ première version, a décalé
     tout le bureau sous la sidebar). Gardée telle quelle parce que sa
     spécificité (0,2,1) bat aussi `.pf-sidebar + .layout__main
     { margin-left: 0 }` du backoffice (0,2,0) — 56 px de marge parasite
     sur le backoffice, bug latent à corriger à part, avec ses captures. */
  body:not(.sidebar-pinned) .layout__main {
    margin-left: var(--sidebar-collapsed-width);
  }

  /* Hover : on déploie */
  .sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: 4px 0 12px color-mix(in srgb, var(--color-shadow) 6%, transparent);
  }

  /* Cacher les textes (libellés items, badges, sections) en mode rétracté.
     Garder les icônes SVG visibles.
     UX-K1 (6 mai) : width:0 + max-height:0 (height:0 ne marchait pas dans le
     contexte flex du parent .sidebar__user). max-height force le clipping
     vertical sans casser l'animation d'opacity au hover. */
  .sidebar:not(:hover) .sidebar__item-text,
  .sidebar:not(:hover) .sidebar__logo-text,
  .sidebar:not(:hover) .sidebar__user-info,
  .sidebar:not(:hover) .sidebar__count {
    width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }

  /* Le titre d'une section se masque sans perdre sa hauteur : sinon les entrées remontent
     d'une section quand le menu est replié, et redescendent quand il se déploie au survol. */
  .sidebar:not(:hover) .sidebar__section {
    visibility: hidden;
  }

  /* Une sous-entrée n'est décalée qu'une fois le menu déployé : dans le rail, son icône est
     alignée sur celle des autres entrées. */
  .sidebar:not(:hover) .sidebar__item--sub {
    padding-left: var(--space-2);
  }

  /* Au hover, faire réapparaître progressivement */
  .sidebar:hover .sidebar__item-text,
  .sidebar:hover .sidebar__section,
  .sidebar:hover .sidebar__logo-text,
  .sidebar:hover .sidebar__user-info,
  .sidebar:hover .sidebar__count {
    opacity: 1;
    transition: opacity 0.18s ease 0.05s;
  }

  /* Profile bloc en mode rétracté : juste l'avatar */

  .sidebar:not(:hover) .sidebar__logout-form {
    display: none;
  }
}

/* Element cache, porteur de donnees pour un script (ex. data-url d'une
   redirection). Jamais visible : role fixe, pas une variante d'affichage. */

.sidebar__notif-wrapper {
  position: relative;
}

/* Un contenu et une colonne latérale de 320 px (ADR 0006, amendement S-6) : une fiche et
   son encart, un formulaire et son aide ; `--start` met la colonne à gauche (une liste qui
   pilote le contenu). Une colonne sous 1024 px. `minmax(0, 1fr)` et non `1fr` : un enfant
   large (maquette A4, barre de phases) ne gonfle pas la piste au-delà de l'écran (#176). */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
}

.with-aside--start {
  grid-template-columns: 320px minmax(0, 1fr);
}

@media (width <= 1024px) {
  .with-aside,
  .with-aside--start {
    grid-template-columns: minmax(0, 1fr);
  }
}