/* BMD · feuille de style commune.
   Couleurs en jetons (variables) : thème clair par défaut ; thème sombre doux (gris-bleu, jamais noir pur) si le
   système le demande ou si l'utilisateur le choisit (attribut data-theme="sombre" sur <html>, choix mémorisé dans
   localStorage). Contraste des textes courants : au moins 4,5:1 dans les deux thèmes.
   Pas de police ni de ressource distante : polices système et polices de la plateforme uniquement. */

/* ---------- Jetons : thème clair ---------- */
:root {
  --fond: #f5f6f8;
  --texte: #1d2430;
  --secondaire: #5b6575;
  --carte: #ffffff;
  --bordure: #d6dbe3;
  --bordure-champ: #8a94a6;
  --survol: #eaf0f7;
  --accent: #1f5fa8;
  --accent-texte: #ffffff;
  --ok: #1e7b4a;
  --alerte: #9a5b00;
  --erreur: #b3261e;
  --ombre: 0 6px 18px rgba(0, 0, 0, 0.18);
  --rayon: 8px;
  --largeur-lecture: 75ch;
  color-scheme: light;
}

/* ---------- Jetons : thème sombre (préférence du système, sauf choix explicite « clair ») ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #151a22;
    --texte: #e6e9ef;
    --secondaire: #9aa4b5;
    --carte: #1b212c;
    --bordure: #2e3644;
    --bordure-champ: #6b778a;
    --survol: #242c3a;
    --accent: #5b9be0;
    --accent-texte: #0d1117;
    --ok: #6fcf97;
    --alerte: #f0b35a;
    --erreur: #ff8f85;
    --ombre: 0 6px 18px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

/* ---------- Jetons : thème sombre choisi explicitement ---------- */
:root[data-theme="sombre"] {
  --fond: #151a22;
  --texte: #e6e9ef;
  --secondaire: #9aa4b5;
  --carte: #1b212c;
  --bordure: #2e3644;
  --bordure-champ: #6b778a;
  --survol: #242c3a;
  --accent: #5b9be0;
  --accent-texte: #0d1117;
  --ok: #6fcf97;
  --alerte: #f0b35a;
  --erreur: #ff8f85;
  --ombre: 0 6px 18px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

img, svg { max-width: 100%; height: auto; }

h1 { font-size: 1.4rem; margin: 8px 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

main p, main li { max-width: var(--largeur-lecture); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Lien d'évitement : visible seulement au clavier ---------- */
.evitement {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--carte);
  color: var(--texte);
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
}
.evitement:focus { left: 8px; }

/* ---------- Bandeau d'identité et zone d'outils ---------- */
.entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
}
.bandeau { gap: 8px 16px; padding: 10px 16px; }

.marque { font-weight: 700; color: var(--texte); text-decoration: none; }
.identite-app { display: flex; flex-direction: column; min-width: 0; }
.sous-titre { color: var(--secondaire); font-size: 0.85rem; }

.outils {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-left: auto;
  font-size: 0.95rem;
}
.outils .compte { margin: 0; }

.bascule-theme {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  cursor: pointer;
}

.bouton-menu {
  display: none;
  padding: 8px 14px;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  cursor: pointer;
}

/* Case du menu : sur téléphone seulement, elle ouvre le menu sans JavaScript (le libellé « Menu » la commande).
   Sur ordinateur elle n'existe pas pour le clavier : le menu est toujours affiché. */
.menu-case { display: none; }
.menu-case:focus-visible ~ .bandeau .bouton-menu { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Mise en page : menu à gauche, contenu à droite ---------- */
.corps {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  align-items: start;
}

.navigation {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 12px 10px 24px;
  background: var(--carte);
  border-right: 1px solid var(--bordure);
}

.groupe { margin-bottom: 2px; }
.groupe > summary {
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  font-weight: 600;
}
.groupe > summary:hover { background: var(--survol); }
.groupe[open] > summary { color: var(--texte); }

.sous-titre-nav {
  margin: 10px 0 4px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondaire);
}

.liste-nav { list-style: none; margin: 0 0 6px; padding: 0 0 0 8px; }
.liste-nav a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--texte);
  text-decoration: none;
}
.liste-nav a:hover { background: var(--survol); text-decoration: underline; }
.liste-nav a[aria-current="page"] {
  background: var(--survol);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--accent);
}
.liste-nav a.bouton { margin: 4px 0 8px; padding: 8px 12px; text-align: center; color: var(--accent-texte); }
.liste-nav a.onglet-numeriser { font-weight: 600; }

.zone-principale { min-width: 0; }

.fil-ariane {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px 0;
  font-size: 0.9rem;
  color: var(--secondaire);
}
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "\203A"; padding: 0 6px 0 2px; color: var(--secondaire); }
.fil-ariane a { color: var(--accent); }

main { padding: 16px; max-width: 1200px; margin: 0 auto; }

.pied-application { text-align: center; color: var(--secondaire); font-size: 0.8rem; padding: 16px; }

/* ---------- Messages ---------- */
.message {
  padding: 10px 12px;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--carte);
}
.message.ok { border-color: var(--ok); }
.message.avertissement { border-color: var(--alerte); }
.message.erreur { border-color: var(--erreur); }

/* ---------- Boutons et champs ---------- */
.bouton {
  display: inline-block;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--accent-texte);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { text-decoration: underline; }
.bouton.petit { padding: 4px 10px; font-size: 0.85rem; }

.lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--erreur);
  font: inherit;
  cursor: pointer;
}

.recherche { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.recherche input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
}

.compte { color: var(--secondaire); margin: 8px 0; }

.tableau {
  overflow-x: auto;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
th { font-size: 0.85rem; color: var(--secondaire); font-weight: 600; }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.formulaire fieldset {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px 16px;
  margin: 0 0 16px;
}
.formulaire legend { font-weight: 700; padding: 0 6px; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 14px;
}

.champ { display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }
.champ.large { grid-column: 1 / -1; }
.champ span { color: var(--secondaire); }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 10px 10px;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
}

.actions { display: flex; gap: 16px; align-items: center; margin: 8px 0 24px; }

/* ---------- Fiches et grilles de données ---------- */
.fiche {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px 16px;
  margin: 0 0 16px;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
}

.grille-fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.grille-fiche dt { font-size: 0.85rem; color: var(--secondaire); }
.grille-fiche dd { margin: 2px 0 0; font-weight: 600; }

.ecarts { list-style: none; padding: 0; margin: 0; }
.ecarts li { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.ecarts li span { flex: 1 1 220px; }
.ecarts em { font-style: normal; font-weight: 600; }

.rapport {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  white-space: pre-wrap;
}

.pieces { list-style: none; padding: 0; margin: 0 0 12px; }
.pieces li { padding: 4px 0; }
.inline { display: inline; margin-left: 8px; }
.ajout-piece { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.ajout-piece .champ { flex: 1 1 220px; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicateur { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 12px 14px; }
.indicateur span { display: block; color: var(--secondaire); font-size: 0.85rem; }
.indicateur strong { font-size: 1.5rem; }

.barres { display: flex; flex-direction: column; gap: 8px; }
.barre { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 48px; gap: 10px; align-items: center; }
.barre .libelle { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piste { background: var(--fond); border-radius: 6px; height: 14px; overflow: hidden; }
.remplissage { background: var(--accent); height: 100%; border-radius: 6px; }

.etapes { list-style: none; padding: 0; margin: 0; }
.etapes li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.etapes .coche { width: 1.4em; text-align: center; font-weight: 700; }
.etapes li.fait .coche { color: var(--ok); }
.etapes li.a-faire .coche { color: var(--secondaire); }
.etapes .libelle { flex: 1; }

.atp { font-size: 0.9rem; color: var(--secondaire); font-weight: 400; }

/* ---------- Documents officiels : charte de la plateforme, usage interne = Georgia ---------- */
.rapport-officiel { font-family: Georgia, "Times New Roman", serif; color: #111; }
.entete-officiel { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.entete-officiel .logo-bloc img { height: 64px; width: auto; }
.entete-officiel .identite p { margin: 0; font-size: 12pt; line-height: 1.3; }
.entete-officiel .identite .cg { font-weight: bold; }
.titre-rapport { font-size: 14pt; text-align: center; margin: 10px 0 2px; text-transform: uppercase; }
.date-rapport { text-align: center; margin: 0 0 12px; font-size: 12pt; }
.tableau-officiel { width: 100%; border-collapse: collapse; font-size: 9pt; }
.tableau-officiel th, .tableau-officiel td { border: 1px solid #555; padding: 4px 5px; white-space: normal; vertical-align: top; }
.tableau-officiel thead th { background: #e8edf3; text-transform: uppercase; font-size: 8.5pt; }
/* Pied de la charte graphique de l'OTR : adresse en police fine italique sous un trait de 0,5 pt, slogan en capitales
   italiques et site en bleu OTR, à droite */
.pied-officiel { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; font-size: 7pt;
  font-family: 'Century Gothic', 'Canal', 'Calibri Light', Arial, sans-serif; font-style: italic; line-height: 1.25; }
.pied-officiel .adresse { border-top: 0.5pt solid #888; padding-top: 3px; color: #333; min-width: 75mm; }
.pied-officiel .slogan { text-align: right; color: #1f6fb4; }
.actions-rapport { margin: 8px 0; font-family: system-ui, sans-serif; }
.texte-whatsapp { margin-top: 16px; font-family: system-ui, sans-serif; }
.legende { margin-top: 6mm; padding-top: 2mm; border-top: 1px solid #999; font-size: 8.5pt; line-height: 1.5; }
.legende span { white-space: nowrap; }

/* Saisie assistée d'une agence : propositions sous le champ, panneau de création */
.agence-champ { position: relative; }
.propositions {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.propositions button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.propositions button[aria-selected="true"], .propositions button:hover { background: var(--survol); }
.propositions button small { display: block; color: var(--secondaire); font-size: 0.8rem; }
.propositions button.autre { border-top: 1px solid var(--bordure); color: var(--accent); font-weight: 600; }
.panneau-agence {
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: var(--carte);
  border: 1px solid var(--accent);
  border-radius: 10px;
}
.panneau-agence .actions { margin: 8px 0 0; }

/* Info-bulle de survol (fiche rapide) : position calculée par survol.js ; hidden l'efface */
.fiche-survol {
  position: absolute;
  z-index: 50;
  background: var(--carte);
  color: var(--texte);
  border: 1px solid var(--bordure-champ);
  padding: 8px 10px;
  max-width: 320px;
  font-size: 0.85rem;
  box-shadow: var(--ombre);
}

/* ---------- Compléments pour les gabarits existants ---------- */
.agents { color: var(--secondaire); }
.alerte, .verifier, .manquant { color: var(--erreur); font-weight: 600; }
.automatique, .neant { color: var(--secondaire); font-style: italic; }
.avis-arrivee { border-left: 4px solid var(--accent); padding-left: 10px; }
.barre-haut {
  position: sticky;
  top: 0;
  z-index: 6;
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
}
.barre-haut > div { height: 1px; }
.bl-quantite { width: 9em; }
.bloc { display: block; margin-bottom: 12px; }
.case-retrait { display: inline-flex; gap: 6px; align-items: center; }
.cases-categories { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.4rem; }
.choix, .choix-sections, .parcours, .preset, .types, .signatures { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.signatures { justify-content: space-between; margin-top: 24px; }
.signature { min-width: 180px; margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--texte); }
.col-detail { font-size: 0.85rem; white-space: nowrap; }
.conf { border-collapse: separate; border-spacing: 0; }
.conf thead th { position: sticky; top: 0; z-index: 3; background: var(--fond); box-shadow: 0 1px 0 var(--bordure-champ); }
.conf-defilement { max-height: 70vh; overflow-x: hidden; overflow-y: auto; }
.conteneur-canevas { max-width: 800px; margin: 0 auto; }
.controles { margin-top: 8px; }
.defilement { overflow-x: auto; }
.detail, .note, .reporte { font-size: 0.9rem; color: var(--secondaire); }
.doc-recu, .doc-vise, .total, .resume { font-weight: 600; }
.en-ligne { display: inline; }
.espace-reserve { border: 1px dashed var(--bordure-champ); padding: 1rem; color: var(--secondaire); font-style: italic; }
.faits { list-style: none; padding: 0; margin: 0; }
.gauche { text-align: left; }
.grille-jours { overflow-x: auto; }
.ligne { display: flex; gap: 8px; align-items: center; }
.ligne-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.lignes { display: flex; flex-direction: column; gap: 8px; }
.masquable { }
@media (max-width: 640px) {
  .masquable { display: none; }
}
.motif-retrait { margin-top: 0.4em; font-size: 0.9rem; }
.n { text-align: center; }
.nonimprime { margin: 8px 0; }
.observation { font-size: 0.9rem; }
.periode { text-align: center; }
.pied { font-size: 0.85rem; }
.qr-code { max-width: 180px; }
.qr-code img { max-width: 100%; height: auto; }
.saut { }
.situation-entete { margin-bottom: 12px; }
.type-case { display: inline-flex; gap: 6px; align-items: center; }
.type-bloc { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.quantite { display: inline-flex; gap: 6px; align-items: center; }
.cargaison-sens { margin: 8px 0; }
.carte-bl {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.carte-bl h3 { margin: 0 0 8px; font-size: 1rem; }
.bl-rang { font-weight: 700; color: var(--accent); }

/* ---------- Mobile : tiroir du menu, marges de 16 px, pas de défilement horizontal de la page ---------- */
@media (max-width: 720px) {
  .corps { grid-template-columns: minmax(0, 1fr); }
  .menu-case {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
  }
  .bouton-menu { display: inline-block; }
  .bandeau { align-items: center; }
  .outils { margin-left: 0; width: 100%; }
  .navigation { display: none; position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--bordure); }
  .menu-case:checked ~ .corps .navigation { display: block; }
  main { padding: 16px; }
  .bouton { width: 100%; text-align: center; }
  .actions { flex-direction: column; align-items: stretch; }
}

/* ---------- Impression ---------- */
@page { size: A4 landscape; margin: 12mm; }

@media print {
  body { background: #fff; color: #000; }
  .entete, .no-print, .actions-rapport, .texte-whatsapp, .navigation, .fil-ariane, .evitement,
  .menu-case, .bouton-menu { display: none !important; }
  .corps { display: block; }
  main { padding: 0; max-width: none; }
  .tableau-officiel tr { page-break-inside: avoid; }
  .nonimprime { display: none; }
  .saut { page-break-before: always; }
  .situation-entete { display: block !important; }
}

/* Documents calqués sur les classeurs (A4 portrait) : le pied de page officiel se répète en bas de chaque feuille */
@page portrait-officiel { size: A4 portrait; margin: 12mm 14mm 28mm 14mm; }
@media print {
  .rapport-portrait { page: portrait-officiel; }
  .rapport-portrait .pied-officiel { position: fixed; bottom: 0; left: 0; right: 0; margin-top: 0; }
}

/* Légende des abréviations : en bas du tableau ou du rapport, lisible à l'impression */
.legende span { white-space: nowrap; }

/* ---------- Petits écrans : marges et défilement ---------- */
@media (max-width: 480px) {
  .outils { font-size: 0.9rem; }
}

/* ---------- Affichage « compact » (téléphone et tablette, attribut data-affichage="compact" sur <html>) ----------
   Toutes les règles sont conditionnées à cet attribut : l'affichage « complet » (ordinateur) n'en est pas modifié.
   Menu en tiroir par-dessus le contenu, cibles tactiles d'au moins 44 px, espacement réduit, un seul niveau de titres,
   pas de défilement horizontal de la page (les tableaux défilent dans leur propre zone). */
html[data-affichage="compact"] .menu-case {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}
html[data-affichage="compact"] .corps {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
html[data-affichage="compact"] .bandeau { align-items: center; gap: 8px 12px; padding: 8px 12px; }
html[data-affichage="compact"] .identite-app .sous-titre { display: none; }
html[data-affichage="compact"] .bouton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 1rem;
}
html[data-affichage="compact"] .outils { width: 100%; margin-left: 0; gap: 6px 12px; font-size: 0.95rem; }
html[data-affichage="compact"] .outils .compte { display: none; }
html[data-affichage="compact"] .bascule-theme { min-width: 44px; min-height: 44px; }
html[data-affichage="compact"] .navigation {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 75vh;
  overflow-y: auto;
  padding: 8px 12px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre);
}
html[data-affichage="compact"] .menu-case:checked ~ .corps .navigation { display: block; }
html[data-affichage="compact"] .groupe > summary { padding: 12px 8px; }
html[data-affichage="compact"] .liste-nav a { padding: 11px 10px; }
html[data-affichage="compact"] .affichage-choix {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--bordure);
  font-size: 0.95rem;
}
html[data-affichage="compact"] .affichage-choix a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 8px;
}

html[data-affichage="compact"] main { padding: 12px; min-width: 0; max-width: 100%; }
html[data-affichage="compact"] .zone-principale { min-width: 0; max-width: 100%; }
html[data-affichage="compact"] .fil-ariane { padding: 8px 12px 0; }
html[data-affichage="compact"] h1,
html[data-affichage="compact"] h2,
html[data-affichage="compact"] h3 { font-size: 1.1rem; font-weight: 700; margin: 4px 0 8px; }
html[data-affichage="compact"] main p,
html[data-affichage="compact"] main li { max-width: 100%; }
html[data-affichage="compact"] .fiche,
html[data-affichage="compact"] .carte,
html[data-affichage="compact"] .formulaire fieldset { padding: 10px 12px 12px; margin: 0 0 10px; }
html[data-affichage="compact"] .message { padding: 8px 10px; margin-bottom: 8px; }
html[data-affichage="compact"] .pied-application { padding: 12px; }
html[data-affichage="compact"] th,
html[data-affichage="compact"] td { padding: 8px 10px; }
html[data-affichage="compact"] .tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
html[data-affichage="compact"] main table { display: block; overflow-x: auto; max-width: 100%; }
@media print {
  html[data-affichage="compact"] main table { display: table; overflow: visible; }
}
html[data-affichage="compact"] img,
html[data-affichage="compact"] svg,
html[data-affichage="compact"] pre,
html[data-affichage="compact"] video,
html[data-affichage="compact"] iframe { max-width: 100%; }

/* Cibles tactiles : boutons, champs, lignes de liste et de menu à 44 px au moins */
html[data-affichage="compact"] .bouton,
html[data-affichage="compact"] .bouton.petit,
html[data-affichage="compact"] .lien,
html[data-affichage="compact"] .propositions button { min-height: 44px; }
html[data-affichage="compact"] .bouton { padding: 12px 16px; }
html[data-affichage="compact"] .lien { padding: 10px 6px; }
html[data-affichage="compact"] .recherche input,
html[data-affichage="compact"] .champ input,
html[data-affichage="compact"] .champ select,
html[data-affichage="compact"] .champ textarea { min-height: 44px; }
html[data-affichage="compact"] input[type="checkbox"],
html[data-affichage="compact"] input[type="radio"] { width: 24px; height: 24px; }

/* Accueil compact : escales en travail et messages */
.accueil-escales { list-style: none; margin: 0; padding: 0; }
.accueil-escales li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.accueil-escales li:last-child { border-bottom: 0; }
.accueil-escales a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* Accueil léger : pages coulissantes à points, puis tuiles des sections avec bulle d'explication */
.accueil-titre { font-size: 1.4rem; margin: 0 0 12px; }
.carrousel { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: 20px; }
.carrousel-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; }
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carrousel-page { flex: 0 0 100%; scroll-snap-align: start; padding: 20px 24px; box-sizing: border-box; }
.carrousel-page h2 { margin: 0 0 6px; font-size: 1.15rem; }
.carrousel-page p { margin: 0; color: var(--secondaire); max-width: var(--largeur-lecture); }
.carrousel-points { display: flex; justify-content: center; gap: 4px; padding: 0 0 10px; }
.carrousel-points button { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.carrousel-points button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bordure-champ);
  transition: transform 0.2s, background 0.2s; }
.carrousel-points button[aria-current="true"]::before { background: var(--accent); transform: scale(1.3); }
/* Flèches (remarque du 01/11/2026) : sans écran tactile, la souris fait aussi coulisser les pages */
.carrousel-points .carrousel-fleche { width: 32px; height: 28px; margin: 0 6px; border: 1px solid var(--bordure-champ);
  border-radius: 999px; color: var(--accent); font-size: 1.25rem; line-height: 1; }
.carrousel-points .carrousel-fleche::before { content: none; }
.carrousel-points .carrousel-fleche:hover, .carrousel-points .carrousel-fleche:focus-visible { background: var(--survol); }
.carrousel-piste.glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carrousel-piste { cursor: grab; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tuile { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72px;
  padding: 14px 16px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  color: var(--texte); text-decoration: none; font-weight: 600; }
.tuile:hover, .tuile:focus-visible { background: var(--survol); border-color: var(--accent); }
.tuile-bulle { position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 20; padding: 8px 10px;
  background: var(--texte); color: var(--fond); border-radius: 6px; box-shadow: var(--ombre); font-weight: 400;
  font-size: 0.88rem; line-height: 1.35; opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; }
.tuile:hover .tuile-bulle, .tuile:focus-visible .tuile-bulle { opacity: 1; visibility: visible; }
/* Écrans tactiles (pas de survol) : l'explication s'affiche sous le titre, sans bulle */
@media (hover: none) {
  .tuile-bulle { position: static; opacity: 1; visibility: visible; background: none; color: var(--secondaire);
    box-shadow: none; padding: 4px 0 0; font-size: 0.85rem; }
}
@media print { .carrousel, .tuiles { display: none; } }

/* Logos : OTR en haut (en-tête), BMD Digital en bas (pied de page ; les lettres suivent la couleur du thème) */
.marque-logo { display: inline-flex; align-items: center; }
.logo-otr { height: 44px; width: auto; display: block; }
html[data-affichage="compact"] .logo-otr { height: 34px; }
.pied-marque { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.logo-bmd-digital { height: 30px; width: auto; display: block; }

/* En-tête figé au défilement ; le menu de gauche se place dessous (hauteur publiée par profil_menu.js) */
.entete { position: sticky; top: 0; z-index: 60; }
.navigation { top: var(--hauteur-entete, 0px); max-height: calc(100vh - var(--hauteur-entete, 0px)); }

/* Bouton de profil (en haut à droite) et panneau coulissant : gestion du profil, déconnexion en bas */
.bouton-profil { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 4px 12px 4px 8px; border: 1px solid var(--bordure-champ); border-radius: 999px; background: var(--carte);
  color: var(--texte); font-weight: 600; text-decoration: none; }
.bouton-profil:hover, .bouton-profil[aria-expanded="true"] { background: var(--survol); border-color: var(--accent); }
.goutte-profil { width: 22px; height: 30px; display: block; flex: none; }
.pastille-notif { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--erreur); color: #ffffff; font-size: 0.75rem; }
.voile-profil { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.3); opacity: 0;
  transition: opacity 0.22s ease; }
.voile-profil.ouvert { opacity: 1; }
.panneau-profil { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; display: flex; flex-direction: column;
  width: min(340px, 88vw); box-sizing: border-box; padding: 16px; overflow-y: auto; background: var(--carte);
  border-left: 1px solid var(--bordure); box-shadow: var(--ombre); transform: translateX(100%);
  transition: transform 0.22s ease; }
.panneau-profil.ouvert { transform: translateX(0); }
.panneau-profil[hidden], .voile-profil[hidden] { display: none; }
.panneau-profil-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.panneau-profil-nom { margin: 0; font-size: 1.05rem; font-weight: 700; }
.panneau-profil-role { margin: 2px 0 0; color: var(--secondaire); font-size: 0.9rem; }
.panneau-profil-fermer { width: 40px; height: 40px; flex: none; font: inherit; font-size: 1.4rem; line-height: 1;
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon); background: var(--carte); color: var(--texte);
  cursor: pointer; }
.panneau-profil-liens { flex: 1; margin: 12px 0; padding: 0; list-style: none; }
.panneau-profil-liens a { display: block; padding: 11px 8px; border-radius: var(--rayon); color: var(--texte);
  text-decoration: none; }
.panneau-profil-liens a:hover, .panneau-profil-liens a:focus-visible { background: var(--survol); }
.panneau-profil-deconnexion { display: block; padding: 12px; border: 1px solid var(--erreur); border-radius: var(--rayon);
  color: var(--erreur); font-weight: 600; text-align: center; text-decoration: none; }
.panneau-profil-deconnexion:hover, .panneau-profil-deconnexion:focus-visible { background: var(--survol); }
html[data-affichage="compact"] .bouton-profil-nom { display: none; }
@media (prefers-reduced-motion: reduce) { .panneau-profil, .voile-profil { transition: none; } }
@media print { .bouton-profil, .panneau-profil, .voile-profil { display: none !important; } }

/* Pied de page (logo BMD Digital, version, copyright) toujours en bas de l'écran, même sur une page courte */
.zone-principale { display: flex; flex-direction: column; min-height: calc(100vh - var(--hauteur-entete, 0px)); }
.zone-principale > main, .zone-principale > .fil-ariane { width: 100%; max-width: 1232px; box-sizing: border-box; }
.zone-principale > main { flex: 1 0 auto; }
.zone-principale > .pied-application { margin-top: auto; }
@media print { .zone-principale { display: block; min-height: 0; } }

/* ---------- Adaptation à tous les écrans ---------- */
/* Encoches et bords arrondis des téléphones (viewport-fit=cover dans base.html) */
.entete { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.zone-principale > .pied-application { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.zone-principale > main img, .zone-principale > main video { max-width: 100%; height: auto; }
/* Très petits téléphones (écran extérieur des pliables, par exemple) : marges resserrées */
@media (max-width: 380px) {
  .zone-principale > main { padding: 10px; }
  .zone-principale > .fil-ariane { padding: 8px 10px 0; }
  .bouton-profil { padding: 4px 8px; }
}
/* Grands écrans : le contenu s'élargit au lieu de laisser des bandes vides */
@media (min-width: 1600px) {
  .zone-principale > main, .zone-principale > .fil-ariane { max-width: 1560px; }
}
@media (min-width: 2200px) {
  .zone-principale > main, .zone-principale > .fil-ariane { max-width: 1960px; }
  html { font-size: 106%; }
}
/* Téléphones pliables ouverts à cheval sur la charnière (deux volets côte à côte) : menu sur le volet de gauche,
   contenu sur celui de droite, l'écart couvrant la charnière. */
@media (horizontal-viewport-segments: 2) {
  .corps, html[data-affichage="compact"] .corps {
    grid-template-columns: env(viewport-segment-width 0 0, 320px) minmax(0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px));
  }
  .navigation, html[data-affichage="compact"] .navigation {
    display: block; position: sticky; top: var(--hauteur-entete, 0px); box-shadow: none;
    max-height: calc(100vh - var(--hauteur-entete, 0px)); border-right: 0;
  }
  html[data-affichage="compact"] .bouton-menu { display: none; }
}
/* Pliables à plat, charnière horizontale (deux volets l'un au-dessus de l'autre) : le contenu commence sous la
   charnière, l'en-tête et le menu restent sur le volet du haut. */
@media (vertical-viewport-segments: 2) {
  .zone-principale { padding-top: calc(env(viewport-segment-top 0 1, 0px) - env(viewport-segment-bottom 0 0, 0px)); }
}
/* Seconde fenêtre du mode deux écrans : contenu en pleine largeur, sans le menu de gauche */
html[data-ecran="2"] .corps { grid-template-columns: minmax(0, 1fr); }
html[data-ecran="2"] .navigation, html[data-ecran="2"] .bouton-menu { display: none; }
.marque-ecran-2 { display: none; }
html[data-ecran="2"] .marque-ecran-2 { display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-texte); font-size: 0.85rem; font-weight: 600; }
.option-deux-ecrans { display: block; width: 100%; margin: 0 0 12px; padding: 11px 8px; font: inherit; text-align: left;
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon); background: var(--carte); color: var(--texte);
  cursor: pointer; }
.option-deux-ecrans:hover, .option-deux-ecrans:focus-visible { background: var(--survol); }
.etat-deux-ecrans { margin: -6px 0 12px; color: var(--secondaire); font-size: 0.85rem; }

/* ---------- Mises à jour (mise_a_jour.js) : deux flèches circulaires, discrètes, en haut à droite ---------- */
.maj-indicateur { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.maj-indicateur:hover, .maj-indicateur:focus-visible { border-color: currentColor; }
.maj-indicateur.maj-vert { color: #2e7d32; }
.maj-indicateur.maj-rouge { color: #c62828; }
.maj-indicateur.maj-orange { color: #ef8a00; }
.maj-indicateur.maj-orange svg { animation: maj-tourne 1.1s linear infinite; }
@keyframes maj-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .maj-indicateur.maj-orange svg { animation-duration: 3s; } }
.maj-message { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(92vw, 26rem); padding: 10px 14px;
  border-radius: 8px; background: #1d3557; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: .95rem; }
.pied-telecharger { margin-left: auto; font-weight: 600; }
.pied-application { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* L'assistant flotte en bas à droite (remarque du 01/11/2026) : le pied de page et le bas de la page lui laissent sa
   place, pour qu'il ne cache plus « Télécharger l'application BMD Digital ». */
body:has(.assistant-robot) .zone-principale > .pied-application { padding-right: 6.5rem; }
body:has(.assistant-robot) .zone-principale > main { padding-bottom: 5.5rem; }
html.niveau-rouge body:has(.assistant-robot) .zone-principale > .pied-application,
html.niveau-gris body:has(.assistant-robot) .zone-principale > .pied-application { padding-right: 16px; }
@media (max-width: 600px) {
  body:has(.assistant-robot) .zone-principale > .pied-application { padding-right: 4.5rem; }
}

/* ---------- Coins de la page (remarque du 01/11/2026) ----------
   La connexion (un simple point) en haut à gauche, la mise à jour et l'imprimante en haut à droite, hors de la ligne
   des raccourcis (Numériser, Bibliothèque, Arrivées, Avis d'arrivée, Messagerie) ; le détail s'affiche au survol. */
.entete { padding-top: 30px; }
.coin-page { position: absolute; top: 3px; z-index: 2; display: flex; align-items: center; gap: 4px; }
.coin-gauche { left: max(8px, env(safe-area-inset-left)); }
.coin-droit { right: max(8px, env(safe-area-inset-right)); }
.coin-page .maj-indicateur, .coin-page .imprimer-page { width: 24px; height: 24px; }
.coin-page .imprimer-page svg { width: 16px; height: 16px; }
.coin-page .reseau-resume { padding: 4px; border: 1px solid transparent; background: transparent; }
.coin-page .reseau-resume:hover { border-color: var(--bordure-champ); }
.coin-page .reseau-pastille { width: 12px; height: 12px; }
.coin-page .reseau-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.coin-page .reseau-attente { font-size: 0.8rem; }
.coin-gauche .reseau-panneau { position: absolute; left: 0; right: auto;
  width: min(24rem, calc(100vw - 2rem)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
/* Le logo et les raccourcis sur une même ligne, à côté des accès de l'en-tête */
.identite-app { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.identite-marque { display: flex; flex-direction: column; min-width: 0; }
.identite-app .raccourcis-entete { margin-left: 0; }

/* ---------- Phase pilote (pilote.py) : inscription, lien d'invitation, conseils du bilan de l'appareil ---------- */
.etape-num { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em;
  margin-right: 8px; border-radius: 50%; background: var(--accent); color: var(--accent-texte, #fff); font-size: 0.9em; }
.lien-invitation { display: flex; gap: 8px; flex-wrap: wrap; }
.lien-invitation input { flex: 1 1 22rem; min-width: 0; font-family: monospace; }
.attribution { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pilote-conseils ul { margin: 6px 0; padding-left: 1.2em; }
.assistant-robot .pilote-conseils { bottom: 5.4rem; right: 0; max-width: min(20rem, calc(100vw - 2rem)); }

/* ---------- Continuité de travail (continuite.js) : bandeau de connexion et brouillons ---------- */
.continuite-bandeau { position: sticky; top: 0; z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid #ef8a00; background: #fff4e5; color: #4a2c00; }
.continuite-bandeau.coupure { border-color: #c62828; background: #fdecea; color: #5a0f0f; }
.continuite-bandeau p { margin: 0; flex: 1 1 16rem; }
.continuite-brouillon { margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid #1f6fb4; background: #eef5fc; }
@media print { .continuite-bandeau, .continuite-brouillon, .maj-indicateur, .maj-message { display: none !important; } }.systeme-actuel { border-color: #1f6fb4 !important; box-shadow: 0 0 0 2px #1f6fb433; }
.systemes-liens { display: flex; flex-wrap: wrap; gap: 8px; }