/* =====================================================================
   layout.css — mise en page
   Structure de l'application (sidebar, barre mobile), conteneur,
   en-tête de page, grilles, piles.
   ===================================================================== */

/* Contenu centré, largeur max 1200px, gouttière 16px sur mobile */
.page {
  width: 100%;
  max-width: var(--contenu-max);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}
@media (min-width: 768px) {
  .page { padding: var(--s6) var(--s6) var(--s7); }
}

/* En-tête de page : titre + actions */
.page-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.page-entete h1 { font-size: clamp(28px, 5vw, 34px); }
.page-entete p { margin-top: var(--s1); color: var(--text-2); }

/* Section avec titre */
.section { margin-top: var(--s7); }
.section:first-child { margin-top: 0; }
.section-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

/* Grilles responsives */
.grille { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr)); }
.grille-2 { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.grille-3 { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.grille-stats { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-stats { gap: var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Piles verticales et rangées horizontales */
.pile { display: flex; flex-direction: column; gap: var(--s4); }
.pile-sm { display: flex; flex-direction: column; gap: var(--s2); }
.rangee { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.rangee-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.pousse { margin-left: auto; }

/* =====================================================================
   Structure de l'application
   Ordinateur ≥ 1024px : sidebar 240px (repliable en 72px)
   Tablette 768–1023px : sidebar en icônes (72px)
   Mobile < 768px      : barre de navigation en bas
   ===================================================================== */

/* Lien « Aller au contenu » (clavier uniquement) */
.lien-evitement {
  position: fixed;
  top: var(--s3);
  left: var(--s3);
  z-index: 200;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  transform: translateY(-200%);
  transition: transform var(--t) var(--ease);
}
.lien-evitement:focus-visible { transform: none; color: #fff; }

.contenu {
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--sidebar);
  transition: margin-left var(--t-slow) var(--ease);
}
.contenu:focus { outline: none; }

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sidebar);
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--border);
  background: var(--surface-1);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: width var(--t-slow) var(--ease);
  view-transition-name: sidebar;          /* reste immobile pendant les changements de page */
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 48px;
  padding: 0 var(--s2);
  margin-bottom: var(--s4);
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sidebar-logo:hover { color: var(--text); }
.sidebar-logo-marque {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  color: #fff;
  box-shadow: 0 4px 14px rgba(223, 99, 58, 0.3);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-titre {
  height: 24px;
  padding: 0 var(--s3);
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
}

.nav-lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  height: 40px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-lien:hover { background: var(--surface-3); color: var(--text); }
.nav-lien:active { transform: scale(0.98); }
.nav-lien[aria-current="page"] { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.nav-lien[aria-current="page"] .icone { color: var(--accent); }
.nav-lien[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-libelle { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--t) var(--ease); }

.sidebar-pied {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.sidebar-compte {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s2) var(--s2);
  min-width: 0;
}
.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-4);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sidebar-compte-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sidebar-compte-nom { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-compte-email { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bouton replier / déplier (ordinateur uniquement) */
.sidebar-replier {
  position: absolute;
  top: 24px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: #1a1a1c;
  color: var(--text-2);
  opacity: 0;
  transition: opacity var(--t) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar:hover .sidebar-replier, .sidebar-replier:focus-visible { opacity: 1; }
.sidebar-replier:hover { color: var(--text); }
.sidebar-replier .icone { width: 16px; height: 16px; }
.sidebar-replier .icone-deplier { display: none; }

/* ---------------------------------------------------------------------
   Sidebar repliée (icônes seules) : tablette, ou ordinateur sur demande
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar-replier { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --sidebar: var(--sidebar-repliee); }
}
@media (min-width: 1024px) {
  html[data-sidebar="repliee"] { --sidebar: var(--sidebar-repliee); }
  html[data-sidebar="repliee"] .sidebar-replier .icone-replier { display: none; }
  html[data-sidebar="repliee"] .sidebar-replier .icone-deplier { display: block; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-libelle { opacity: 0; width: 0; }
  .sidebar-nav { overflow: visible; }
  .sidebar .nav-titre { height: 1px; margin: var(--s2) var(--s3); padding: 0; background: var(--border); }
  .sidebar .nav-lien, .sidebar-logo { justify-content: center; padding: 0; gap: 0; }
  .sidebar-compte { justify-content: center; padding-left: 0; padding-right: 0; }
}
@media (min-width: 1024px) {
  html[data-sidebar="repliee"] .sidebar .nav-libelle { opacity: 0; width: 0; }
  html[data-sidebar="repliee"] .sidebar-nav { overflow: visible; }
  html[data-sidebar="repliee"] .sidebar .nav-titre { height: 1px; margin: var(--s2) var(--s3); padding: 0; background: var(--border); }
  html[data-sidebar="repliee"] .sidebar .nav-lien,
  html[data-sidebar="repliee"] .sidebar-logo { justify-content: center; padding: 0; gap: 0; }
  html[data-sidebar="repliee"] .sidebar-compte { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Infobulle au survol quand la sidebar est repliée */
@media (min-width: 768px) {
  .sidebar .nav-lien[data-infobulle]::after {
    content: attr(data-infobulle);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #1f1f21;
    color: var(--text);
    font-size: var(--fs-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-lien[data-infobulle]::after { display: block; }
  .sidebar .nav-lien:hover::after, .sidebar .nav-lien:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
}
@media (min-width: 1024px) {
  html[data-sidebar="repliee"] .sidebar .nav-lien[data-infobulle]::after { display: block; }
  html[data-sidebar="repliee"] .sidebar .nav-lien:hover::after,
  html[data-sidebar="repliee"] .sidebar .nav-lien:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
}

/* ---------------------------------------------------------------------
   Barre de navigation mobile (en bas, floutée)
   --------------------------------------------------------------------- */
.barre-mobile { display: none; }

@media (max-width: 767px) {
  .sidebar { display: none; }
  .contenu { margin-left: 0; }
  .contenu .page { padding-bottom: calc(var(--barre-mobile) + env(safe-area-inset-bottom) + var(--s6)); }

  .barre-mobile {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--barre-mobile) + env(safe-area-inset-bottom));
    padding: 0 var(--s1) env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    view-transition-name: barre-mobile;
  }
}

.barre-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-touch-callout: none;
}
.barre-lien:hover { color: var(--text-2); }
.barre-lien:active { transform: scale(0.92); }
.barre-lien[aria-current="page"] { color: var(--accent); }

/* Menu « Plus » */
.menu-liste {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.menu-lien {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: 0 var(--s4);
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--t-fast) var(--ease);
}
.menu-lien:last-child { border-bottom: 0; }
.menu-lien:hover, .menu-lien:active { background: var(--surface-3); color: var(--text); }
.menu-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-4);
  color: var(--text-2);
}
.menu-lien[aria-current="page"] .menu-icone { background: var(--accent-soft); color: var(--accent); }
.menu-libelle { flex: 1; }
.menu-chevron { color: var(--text-3); }
.menu-compte {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s1) var(--s4);
}