/* Révision générale de l'interface (demande du 01/11/2026) : une grille d'espacements unique, des blocs alignés sur
   les mêmes bords, des éléments flottants qui ne se recouvrent plus. Chargée après les autres feuilles : elle harmonise
   sans rien retirer. Les règles de base passent par :where() (aucune priorité) pour laisser gagner les réglages propres
   à une page. */

/* ---------- Échelle d'espacement : 4 · 8 · 12 · 16 · 24 · 32 ---------- */
:root {
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --marge-page: 24px;
  --hauteur-champ: 40px;
  --hauteur-assistant: 4.25rem;
  --pied-flottant: calc(1rem + var(--hauteur-assistant) + var(--espace-3));
}
@media (max-width: 720px) { :root { --marge-page: 16px; } }
@media (max-width: 380px) { :root { --marge-page: 10px; } }

/* ---------- Page : contenu et fil d'Ariane sur les mêmes bords ---------- */
.zone-principale > main { padding: var(--espace-4) var(--marge-page) var(--espace-6); }
.zone-principale > .fil-ariane { padding: var(--espace-3) var(--marge-page) 0; }
body:has(.assistant-robot) .zone-principale > main { padding-bottom: calc(var(--pied-flottant) + var(--espace-3)); }

/* ---------- Titres : un rythme régulier ---------- */
main h1 { margin: var(--espace-1) 0 var(--espace-4); line-height: 1.3; }
main h2 { margin: 0 0 var(--espace-3); line-height: 1.35; }
main h3 { margin: var(--espace-4) 0 var(--espace-2); font-size: 1rem; line-height: 1.4; }
main h2 + .compte, main h1 + .compte { margin-top: calc(-1 * var(--espace-2)); }

/* ---------- Blocs : même largeur, même écart entre eux, jamais collés ---------- */
.fiche { padding: var(--espace-4) 18px 18px; margin: 0 0 var(--espace-5); }
.carte { padding: var(--espace-3) var(--espace-4); margin: 0 0 var(--espace-4); }
.formulaire fieldset { padding: var(--espace-3) var(--espace-4) var(--espace-4); margin: 0 0 var(--espace-5); }
main > .tableau, main > .tableau-defilant, main > form, main > section, main > details, main > .tuiles,
main > .carrousel, main > ul, main > ol, main > dl { margin-bottom: var(--espace-5); }
.fiche > :last-child, .carte > :last-child, .message > :last-child, fieldset > :last-child { margin-bottom: 0; }
.fiche > :first-child, .carte > :first-child { margin-top: 0; }
.fiche .tableau, .fiche .tableau-defilant { margin: var(--espace-3) 0; }
details > summary { cursor: pointer; }
main > details > summary { margin-bottom: var(--espace-2); }

/* Les messages ont la largeur des autres blocs (un paragraphe de texte garde, lui, sa largeur de lecture) */
.message, main p.message { max-width: none; margin: 0 0 var(--espace-4); }
.message + .message { margin-top: calc(-1 * var(--espace-2)); }

/* ---------- Grilles de champs et actions ---------- */
.grille { gap: var(--espace-4); }
.grille-fiche { gap: var(--espace-3) var(--espace-4); }
.actions { flex-wrap: wrap; gap: var(--espace-3); margin: var(--espace-3) 0 var(--espace-5); }
.fiche .actions:last-child { margin-bottom: 0; }

/* Champs sans classe propre (formulaires de filtre, cellules de tableau) : même hauteur, même cadre */
:where(main) :where(input:not([type]), input[type="text"], input[type="date"], input[type="time"], input[type="number"],
  input[type="search"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], select) {
  min-height: var(--hauteur-champ);
  padding: 6px 10px;
  font: inherit;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
  box-sizing: border-box;
  max-width: 100%;
}
:where(main) :where(textarea) {
  padding: 8px 10px; font: inherit; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon); box-sizing: border-box; max-width: 100%;
}

/* Formulaires de recherche et de filtre (« Du … Au … », listes, cases) : une ligne qui passe à la ligne proprement,
   chaque libellé au-dessus de son champ, tout aligné sur le bas. */
.recherche { align-items: flex-end; gap: var(--espace-3) var(--espace-4); margin-bottom: var(--espace-4); }
.recherche > label { display: inline-flex; flex-direction: column; gap: var(--espace-1); font-size: 0.9rem;
  color: var(--secondaire); min-width: 0; }
.recherche > label > :where(input, select) { color: var(--texte); }
/* La règle « .recherche input » (barre de recherche) donne 220 px de base aux champs : dans un libellé en colonne,
   cette base deviendrait une hauteur */
.recherche > label > input:not([type="checkbox"]):not([type="radio"]), .recherche > label > select {
  flex: 0 0 auto; min-width: 9rem; }
.recherche > label:has(> input[type="checkbox"]), .recherche > label:has(> input[type="radio"]) {
  flex-direction: row; align-items: center; gap: var(--espace-2); min-height: var(--hauteur-champ); }
.recherche > fieldset { margin: 0; padding: var(--espace-2) var(--espace-3); border: 1px solid var(--bordure);
  border-radius: var(--rayon); display: inline-flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); align-items: center; }
.recherche > fieldset > legend { padding: 0 var(--espace-1); font-size: 0.85rem; color: var(--secondaire); }
.recherche > .bouton, .recherche > button { min-height: var(--hauteur-champ); }

/* Groupes de boutons posés les uns après les autres (raccourcis de période, actions d'une ligne) */
.raccourcis-periode, .boutons, .groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin: 0 0 var(--espace-3); }
:where(main) :where(p, div, td, li) > .bouton.petit + .bouton.petit { margin-left: var(--espace-1); }

/* ---------- Tableaux : lignes aérées, actions de ligne qui ne débordent pas ---------- */
th, td { vertical-align: middle; }
td .en-ligne, td form.en-ligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
td > form + form { margin-top: var(--espace-1); }
.tableau, .tableau-defilant { border-radius: 10px; }
.tableau-defilant { border: 1px solid var(--bordure); background: var(--carte); }
.fiche .tableau-defilant { border-color: var(--bordure); }

/* ---------- Éléments flottants : chacun sa place, plus de recouvrement ----------
   Ordre de superposition : contenu < en-tête figé (60) < assistant ouvert (65) < volet du profil (70/80)
   < guides et menus contextuels (1500/2000). */
/* Le bandeau de connexion (coupure, brouillons) se place sous l'en-tête figé au lieu de glisser dessous */
.continuite-bandeau { top: calc(var(--hauteur-entete, 0px) + var(--espace-2)); }
/* Les en-têtes de tableau figés restent sous l'en-tête de la page quand c'est la page qui défile */
.conf thead th { top: var(--hauteur-entete, 0px); }
/* Le message de mise à jour s'affiche au-dessus de l'assistant, plus par-dessus */
body:has(.assistant-robot) .maj-message { bottom: var(--pied-flottant); }
/* Le guide d'inscription laisse l'assistant visible sur téléphone */
@media (max-width: 720px) {
  body:has(.assistant-robot) .tuto-guide { bottom: var(--pied-flottant); }
}
/* Sur un écran étroit, le contenu qui finit à droite ne passe pas sous l'assistant */
@media (max-width: 720px) {
  body:has(.assistant-robot) .zone-principale > main .actions:last-child { padding-right: calc(var(--hauteur-assistant) + var(--espace-3)); }
}

/* ---------- Téléphones ---------- */
@media (max-width: 720px) {
  /* L'en-tête (logo, raccourcis, menu, profil) occupe un tiers de l'écran d'un téléphone : figé, il cachait le
     contenu à chaque défilement. Il défile désormais avec la page. */
  .entete { position: relative; }
  .continuite-bandeau { top: var(--espace-2); }
  .conf thead th { top: 0; }
  /* Les petits boutons (raccourcis de période, actions de ligne) restent à leur taille, en puces qui passent à la
     ligne ; seuls les boutons principaux prennent toute la largeur. */
  .bouton.petit { width: auto; }
  .recherche > a.bouton, .recherche > .bouton.petit, .raccourcis-periode .bouton, .groupe-boutons .bouton {
    width: auto; flex: 1 1 auto; padding: 8px 12px; font-size: 0.9rem; }
  .recherche > label { flex: 1 1 9rem; }
  .recherche > label:has(> input[type="checkbox"]), .recherche > label:has(> input[type="radio"]) { flex: 1 1 100%; }
  .recherche > label > input:not([type="checkbox"]):not([type="radio"]), .recherche > label > select { min-width: 0; width: 100%; }
  td .bouton { width: auto; }
}

/* ---------- En-tête : raccourcis alignés sur une même hauteur ---------- */
.raccourcis-entete { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; }
.entete { row-gap: var(--espace-3); }

/* ---------- Tuiles de l'accueil : même hauteur par rangée ---------- */
.tuiles { gap: var(--espace-4); align-items: stretch; }

/* ---------- Espace d'administration : compartiments et tuiles ---------- */
.admin-sommaire { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin: 0 0 var(--espace-5); }
.admin-sommaire a { padding: 6px 12px; border: 1px solid var(--bordure-champ); border-radius: 999px;
  color: var(--texte); text-decoration: none; font-size: 0.9rem; background: var(--carte); }
.admin-sommaire a:hover, .admin-sommaire a:focus-visible { background: var(--survol); border-color: var(--accent); }
.admin-compartiment { scroll-margin-top: calc(var(--hauteur-entete, 0px) + var(--espace-4)); }
.admin-tuiles { display: grid; gap: var(--espace-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: var(--espace-3); }
.admin-tuile { display: flex; flex-direction: column; gap: var(--espace-1); min-height: 5.5rem;
  padding: var(--espace-3) var(--espace-4); border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--fond); color: var(--texte); text-decoration: none; }
.admin-tuile strong { color: var(--accent); }
.admin-tuile span { font-size: 0.88rem; color: var(--secondaire); line-height: 1.4; }
.admin-tuile:hover, .admin-tuile:focus-visible { background: var(--survol); border-color: var(--accent); }
/* Bande d'accès en bas de l'accueil */
.acces-administration { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espace-3); }
.acces-administration p { margin: 0; flex: 1 1 18rem; }
.acces-administration .bouton { width: auto; }

/* Documents liés à une escale (avis A, clearance C, demandes D, rapports) */
.liste-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.liste-liens li { display: flex; flex-direction: column; padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.liste-liens .compte { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Message d'accompagnement du lien d'inscription (Comptes agents) */
.message-inscription textarea { width: 100%; min-height: 12rem; resize: vertical; line-height: 1.45; }

/* ---------- Adresse BMD Digital (profil, comptes) ---------- */
.adresse-bmd-profil { margin: 0 0 var(--espace-4); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon);
  background: var(--survol); max-width: none; }
.adresse-bmd input { width: 9.5rem; min-height: 32px; padding: 4px 8px; font-family: monospace; }

@media print {
  .zone-principale > main { padding: 0; }
  .message { break-inside: avoid; }
}