/* ==========================================================================
   CONTRATATOR — mise en page
   À charger APRÈS charte-graphique.css.
   Ce fichier n'introduit AUCUNE couleur : il n'utilise que les jetons de la
   charte (couleurs, espacements, rayons, ombres, typographie). Il ne fait
   qu'assembler les composants de la charte en écrans.
   ========================================================================== */

/* --- Police Inter, embarquée (fonctionne hors ligne) ---------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Coquille : rail dépoli + colonne principale -------------------------- */
html, body, #root { height: 100%; }
.coquille { display: flex; height: 100vh; overflow: hidden; }
.coquille > .rail { height: 100vh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.principal > .barre { position: relative; z-index: var(--z-barre); }
/* Le contenu défile ; il n'est jamais flouté (règle Aurore). */
.contenu {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-5);
}
.contenu-etroit { max-width: 860px; width: 100%; }
/* Les blocs gardent leur hauteur naturelle : sans cela, un tableau long
   (enveloppe en overflow: hidden) est écrasé à la hauteur de l'écran et
   ses dernières lignes deviennent inaccessibles. C'est .contenu qui défile. */
.contenu > *, .pile > *, .pile-serree > * { flex-shrink: 0; }

/* --- Logo (repris de l'écran type de la charte) --------------------------- */
.logo { width: 26px; height: 26px; border-radius: 7px; background: var(--marque); position: relative; flex: none; }
.logo::after { content: ''; position: absolute; inset: 8px 8px auto 8px; height: 3px; border-radius: 2px; background: var(--marque-contre); }
.rail-titre .logo { width: 22px; height: 22px; }
.rail-titre .logo::after { inset: 7px 6px auto 6px; }

/* --- Pied du rail ---------------------------------------------------------- */
a.rail-item, a.btn { text-decoration: none; }
.rail-pied {
  margin-top: auto; padding: var(--e-4) var(--e-2) 0;
  border-top: 1px solid var(--voile-bordure);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.rail-utilisateur { font-size: var(--t-sm); font-weight: var(--gras-moyen); color: var(--texte-primaire); }
.rail-pied .btn-discret { justify-content: flex-start; padding: 0 var(--e-2); }

/* --- Grilles et empilements (repris de la page de la charte) -------------- */
.grille { display: grid; gap: var(--e-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-portefeuille { grid-template-columns: 280px minmax(0, 1fr); }
@media (max-width: 1100px) { .g2, .g3, .g4, .g-2-1, .g-portefeuille { grid-template-columns: 1fr; } }
.rangee { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.pile { display: flex; flex-direction: column; gap: var(--e-3); }
.pile-serree { display: flex; flex-direction: column; gap: var(--e-2); }
.aligne-debut { align-self: start; }
.pousse { margin-left: auto; }
.pousse-droite { margin-right: auto; }

/* --- Titre de la barre ------------------------------------------------------ */
.barre-titre { font-weight: var(--gras-fort); letter-spacing: var(--ls-titre); font-size: var(--t-lg); color: var(--texte-primaire); }

/* --- En-tête de page ------------------------------------------------------- */
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
.entete-page h1 { font-size: var(--t-2xl); }
.entete-page .aide { margin-top: var(--e-1); }

/* --- Texte ----------------------------------------------------------------- */
.code { font-family: var(--police-mono); font-size: var(--t-xs); color: var(--texte-tertiaire); font-weight: var(--gras-normal); }
.sous-ligne { display: block; font-size: var(--t-xs); color: var(--texte-tertiaire); font-weight: var(--gras-normal); }
.texte-secondaire { color: var(--texte-secondaire); }
.texte-tertiaire { color: var(--texte-tertiaire); }
.texte-danger { color: var(--danger); }
.texte-alerte { color: var(--alerte); }
.fort { font-weight: var(--gras-fort); color: var(--texte-primaire); }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Champs de lecture (fiche agent) --------------------------------------- */
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); margin: 0; }
.champs dt { font-size: var(--t-xs); color: var(--texte-tertiaire); }
.champs dd { margin: 2px 0 0; color: var(--texte-primaire); font-weight: var(--gras-moyen); }
.fil { color: var(--texte-secondaire); line-height: var(--lh-large); }
.fil b { color: var(--texte-primaire); }

/* --- Tableau : défilement horizontal et cellule d'actions ------------------ */
.tableau-defile { overflow-x: auto; }
.tableau td.actions, .tableau th.actions { text-align: right; white-space: nowrap; }
.tableau td.actions .btn + .btn { margin-left: var(--e-1); }
.tableau td.vide { text-align: center; padding: var(--e-8) var(--e-4); color: var(--texte-tertiaire); font-weight: var(--gras-normal); }

/* --- Listes à cocher (portefeuilles, organigramme) ------------------------- */
input[type="checkbox"] { accent-color: var(--action); width: 16px; height: 16px; margin: 0; flex: none; }
.liste { border: 1px solid var(--bordure); border-radius: var(--r-md); background: var(--fond-surface); overflow-y: auto; }
.ligne {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 8px var(--e-3); border-bottom: 1px solid var(--bordure-discrete); cursor: pointer;
}
.ligne:last-child { border-bottom: 0; }
.ligne:hover { background: var(--fond-survol); }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-titre { display: block; font-weight: var(--gras-moyen); color: var(--texte-primaire); }
.ind0 { padding-left: var(--e-3); } .ind1 { padding-left: 36px; } .ind2 { padding-left: 60px; }
.ind3 { padding-left: 84px; } .ind4 { padding-left: 108px; }
.liste-vide { padding: var(--e-4); font-size: var(--t-sm); color: var(--texte-tertiaire); }

/* Pastille retirable (unité d'un portefeuille) */
.retirer {
  border: 0; background: none; padding: 0; margin-left: 2px;
  display: inline-flex; color: inherit; cursor: pointer; border-radius: var(--r-xs);
}
.retirer:hover { color: var(--texte-primaire); }

/* --- Zone de dépôt (import) ------------------------------------------------ */
.zone-depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-12) var(--e-6); text-align: center; cursor: pointer;
  background: var(--fond-surface); border: 2px dashed var(--bordure-forte); border-radius: var(--r-lg);
  transition: border-color var(--transition), background var(--transition);
}
.zone-depot:hover { background: var(--fond-survol); border-color: var(--neige-400); }
.zone-depot.survol { background: var(--fond-selection); border-color: var(--action); }
.zone-depot-titre { font-size: var(--t-lg); font-weight: var(--gras-fort); color: var(--texte-primaire); }

/* --- Suggestions de recherche (menu de la charte) -------------------------- */
.recherche { position: relative; }
.recherche .menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; }

/* --- Aperçu du mail -------------------------------------------------------- */
.apercu-mail { height: 460px; border: 1px solid var(--bordure); border-radius: var(--r-md); overflow: hidden; background: var(--neige-0); }
.apercu-mail iframe { width: 100%; height: 100%; border: 0; display: block; }
.etat-vide {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 200px; padding: var(--e-6);
  border: 1px dashed var(--bordure-forte); border-radius: var(--r-md);
  color: var(--texte-tertiaire); font-size: var(--t-sm);
}

/* --- Chargement ------------------------------------------------------------ */
.chargement { display: flex; align-items: center; justify-content: center; gap: var(--e-3); padding: var(--e-8); color: var(--texte-tertiaire); font-size: var(--t-sm); }
.roue {
  width: 18px; height: 18px; border-radius: var(--r-plein); flex: none;
  border: 2px solid var(--bordure); border-top-color: var(--action);
  animation: roue 700ms linear infinite;
}
@keyframes roue { to { transform: rotate(360deg); } }

/* --- Notifications (bandeaux de la charte, flottants) ---------------------- */
.notifications { position: fixed; top: var(--e-4); right: var(--e-4); z-index: var(--z-modale); display: flex; flex-direction: column; gap: var(--e-2); width: 380px; max-width: calc(100vw - 32px); }
.notifications .bandeau { box-shadow: var(--ombre-md); background-clip: padding-box; }
.notifications .bandeau { background-color: var(--fond-surface); }
.notifications .bandeau-succes { background-image: linear-gradient(var(--succes-fond), var(--succes-fond)); }
.notifications .bandeau-danger { background-image: linear-gradient(var(--danger-fond), var(--danger-fond)); }
.notifications .bandeau-info   { background-image: linear-gradient(var(--info-fond), var(--info-fond)); }
.notifications .bandeau-alerte { background-image: linear-gradient(var(--alerte-fond), var(--alerte-fond)); }

/* --- Modale : bouton de fermeture ----------------------------------------- */
.modale-entete .btn-icone { margin-left: auto; flex: none; }
/* En-tête et pied restent visibles ; seul le corps défile. */
.modale { display: flex; flex-direction: column; overflow: hidden; }
.modale-entete, .modale-pied { flex: none; }
.modale-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* --- Indicateur cliquable (tableau de bord → alertes) --------------------- */
.kpi-bouton {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.kpi-bouton:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-md); }

/* --- Connexion ------------------------------------------------------------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--e-5); }
.connexion .carte { width: 100%; max-width: 400px; }
.connexion-marque { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-xl); font-weight: var(--gras-titre); letter-spacing: var(--ls-titre); }