/* TRACE — mise-en-page.css : la coquille, la grille, les points de rupture.
   Les points de rupture sont des requêtes de conteneur sur la racine .app (1280 · 900 · 640 px) :
   dans l'application, la racine mesure la fenêtre ; dans l'aperçu, la largeur choisie pour la scène.
   Aucune couleur en dur : tout vient de jetons.css. */

/* ---------- Le conteneur des requêtes ---------- */
/* Le conteneur doit être un ancêtre des éléments qu'il gouverne : .app-conteneur enveloppe la coquille. */
.app-conteneur {
  container-type: inline-size;
  container-name: app;
  min-height: 100vh;
}

/* ---------- La coquille du SAV ---------- */
.app {
  display: grid;
  grid-template-columns: var(--largeur-barre) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
}
.app.est-repliee { grid-template-columns: var(--largeur-barre-repliee) minmax(0, 1fr); }

.barre {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--nav-fond);
  color: var(--nav-texte);
}

.app-corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--pas-4);
  height: var(--hauteur-entete);
  padding: 0 var(--pas-6);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.entete-replier { display: none; }
.entete .fil-ariane { flex: 1 1 auto; min-width: 0; }
.entete .recherche { flex: 0 1 500px; }
.entete-utilisateur { flex: none; }

.contenu {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--pas-6);
}

.pied {
  display: flex;
  gap: var(--pas-4);
  align-items: center;
  padding: var(--pas-3) var(--pas-6);
  border-top: 1px solid var(--bordure);
  color: var(--texte-faible);
  font-size: var(--taille-secondaire);
}

/* Grille interne à 12 colonnes, gouttière 16 px ; fiche : 2/3 + 1/3 */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); }
.grille-principal { grid-column: span 8; min-width: 0; }
.grille-panneau { grid-column: span 4; min-width: 0; }

/* ---------- La coquille sans navigation (E00, E18) ---------- */
.app-public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
}
.app-public .contenu { display: flex; align-items: center; justify-content: center; }

/* ---------- Points de rupture ---------- */
@container app (max-width: 1280px) {
  .grille-principal, .grille-panneau { grid-column: span 12; }
  .entete .recherche { flex-basis: 300px; }
}

@container app (max-width: 900px) {
  .app, .app.est-repliee { grid-template-columns: minmax(0, 1fr); }
  .barre {
    position: fixed;
    left: 0; top: 0;
    width: var(--largeur-barre);
    z-index: 30;
    transform: translateX(-100%);
    box-shadow: none;
    transition: transform var(--transition);
  }
  .app.est-ouverte .barre { transform: none; box-shadow: var(--ombre-panneau); }
  .entete-replier { display: inline-flex; }
  .barre-replier { display: none; }
  .contenu { padding: var(--pas-4); }
}

@container app (max-width: 640px) {
  .entete { gap: var(--pas-2); padding: 0 var(--pas-3); }
  .entete .fil-ariane { display: none; }
  .entete .recherche { flex: 1 1 auto; }
  .entete-utilisateur .personne-nom { display: none; }
  .contenu { padding: var(--pas-3); }
  .grille { gap: var(--pas-3); }
}