/* Relief et repères de navigation (décision de l'utilisateur du 30/10/2026) : sous la souris, un onglet, une carte ou
   un lien se soulève un peu et s'entoure de bleu, pour que l'on voie toujours où l'on va cliquer. Le menu de gauche,
   le panneau du profil, les boutons de l'en-tête et les tuiles de l'accueil suivent la même règle. Les volets (menu de
   gauche, panneau du profil) s'ouvrent en glissant. Fenêtre de confirmation des actions sensibles (confirmation.js).
   Mouvement réduit si le système le demande. Jetons de couleur repris de style.css (thèmes clair et sombre). */

:root {
  --relief-bleu: #1f6fd1;
  --relief-halo: rgba(31, 111, 209, 0.28);
  --relief-ombre: 0 10px 22px rgba(16, 42, 84, 0.22), 0 2px 6px rgba(16, 42, 84, 0.16);
  --relief-duree: 0.18s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --relief-bleu: #6aa8ef; --relief-halo: rgba(106, 168, 239, 0.32);
    --relief-ombre: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); }
}
:root[data-theme="sombre"] { --relief-bleu: #6aa8ef; --relief-halo: rgba(106, 168, 239, 0.32);
  --relief-ombre: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); }

/* ---------- Effet commun : se soulever et s'entourer de bleu ---------- */
.groupe > summary,
.groupe-lien,
.liste-nav a,
.panneau-profil-liens a,
.panneau-profil-deconnexion,
.bouton-profil,
.bascule-theme,
.tuile,
.educ-carte,
.espace-choix {
  transition: transform var(--relief-duree) ease, box-shadow var(--relief-duree) ease,
    background-color var(--relief-duree) ease, color var(--relief-duree) ease;
  will-change: transform;
}
.groupe > summary:hover,
.groupe-lien:hover,
.liste-nav a:hover,
.panneau-profil-liens a:hover,
.panneau-profil-deconnexion:hover,
.bouton-profil:hover,
.bascule-theme:hover,
.tuile:hover,
.educ-carte:hover,
.espace-choix:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--relief-bleu), var(--relief-ombre);
  text-decoration: none;
}
.groupe > summary:focus-visible,
.liste-nav a:focus-visible,
.panneau-profil-liens a:focus-visible,
.tuile:focus-visible,
.educ-carte:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--relief-bleu), 0 0 0 6px var(--relief-halo);
}
.groupe > summary:active,
.liste-nav a:active,
.panneau-profil-liens a:active,
.tuile:active,
.educ-carte:active,
.espace-choix:active { transform: translateY(0) scale(0.98); }

/* Cartes larges (tuiles, cartes d'Éduque, choix de l'espace) : inclinaison qui suit la souris (interface.js pose
   --incl-x et --incl-y) ; la partie survolée s'éclaire en bleu (--lum-x, --lum-y). */
.tuile[data-relief-actif], .educ-carte[data-relief-actif], .espace-choix[data-relief-actif] {
  transform: perspective(700px) rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg)) translateY(-3px);
  background-image: radial-gradient(circle at var(--lum-x, 50%) var(--lum-y, 50%), var(--relief-halo), transparent 60%);
}

/* ---------- Menu de gauche : groupe ouvert repéré, contenu qui glisse ---------- */
.groupe > summary { position: relative; margin: 2px 4px; }
.groupe[open] > summary { background: var(--survol); box-shadow: inset 4px 0 0 var(--relief-bleu); }
.groupe[open] > summary ~ * { animation: volet-ouverture 0.2s ease both; }
.liste-nav a { margin: 2px 4px 2px 0; }
.liste-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--relief-bleu), 0 0 0 1px var(--relief-halo); }
@keyframes volet-ouverture {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Panneau du profil : couleurs et cartes ---------- */
.panneau-profil { padding: 0; background: var(--fond); }
.panneau-profil-entete { padding: 18px 16px 16px; border-bottom: none; color: #ffffff;
  background: linear-gradient(135deg, #1f5fa8 0%, #2b7bd6 55%, #1b7a5a 140%); }
body.espace-educ .panneau-profil-entete { background: linear-gradient(135deg, #1b7a5a 0%, #23a077 60%, #1f5fa8 150%); }
.panneau-profil-entete .panneau-profil-nom { color: #ffffff; }
.panneau-profil-entete .panneau-profil-role { color: rgba(255, 255, 255, 0.86); }
.panneau-profil-entete .panneau-profil-fermer { background: rgba(255, 255, 255, 0.16); color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5); }
.panneau-profil-entete .panneau-profil-fermer:hover { background: rgba(255, 255, 255, 0.3); }
.panneau-profil nav, .panneau-profil .option-deux-ecrans, .panneau-profil .etat-deux-ecrans,
.panneau-profil .panneau-profil-deconnexion { margin-left: 14px; margin-right: 14px; }
.panneau-profil-liens { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.panneau-profil-liens a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: var(--carte);
  border: 1px solid var(--bordure); border-radius: 10px; font-weight: 600; }
.panneau-profil-liens a:hover { background: var(--carte); color: var(--relief-bleu); }
.panneau-profil-deconnexion { margin-bottom: 16px; background: var(--carte); }
.puce { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.25); }
.puce-espace { background: #1f6fd1; }
.puce-profil { background: #17a2b8; }
.puce-securite { background: #7b4bd1; }
.puce-identifiants { background: #e0a100; }
.puce-avatar { background: #d6478f; }
.puce-notifications { background: #e0542e; }
.puce-aide { background: #2e9b5f; }
.panneau-profil-espace { border-left: 5px solid #1f6fd1 !important; }
body.espace-educ .panneau-profil-espace { border-left-color: #1b7a5a !important; }

/* ---------- Gestion des identifiants ---------- */
.identifiants-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px;
  margin: 16px 0; }
.identifiants-carte { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--carte);
  border: 1px solid var(--bordure); border-radius: 10px; color: inherit; text-decoration: none;
  transition: transform var(--relief-duree) ease, box-shadow var(--relief-duree) ease; }
.identifiants-carte:hover, .identifiants-carte:focus-visible { transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--relief-bleu), var(--relief-ombre); outline: none; }
.identifiants-carte strong { color: var(--relief-bleu); font-size: 1.05rem; }
.identifiants-carte span { color: var(--secondaire); font-size: 0.95rem; }
.identifiants-carte-sensible { border-left: 5px solid #e0a100; }

/* ---------- Cycle d'une arrivée et niveaux d'apurement des demandes ---------- */
.cycle-arrivee, .niveaux-apurement { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; padding: 0;
  list-style: none; counter-reset: etape; }
.cycle-arrivee li, .niveaux-apurement li { flex: 1 1 180px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bordure); background: var(--carte); color: var(--secondaire); }
.cycle-arrivee li.cycle-fait, .niveaux-apurement li.niveau-fait { border-color: var(--ok); color: var(--texte);
  box-shadow: inset 4px 0 0 var(--ok); }
.cycle-arrivee li.cycle-actuel { border-color: var(--relief-bleu); color: var(--texte); font-weight: 700;
  box-shadow: 0 0 0 2px var(--relief-halo), inset 4px 0 0 var(--relief-bleu); }
.cases-apurement { white-space: nowrap; font-size: 1.15rem; letter-spacing: 2px; }
.case { color: var(--secondaire); }
.case-ok { color: var(--ok); }
.badge-etat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--bordure-champ); white-space: nowrap; }
.badge-apuree { border-color: var(--ok); color: var(--ok); }
.badge-en_cours, .badge-attente_debut { border-color: var(--relief-bleu); color: var(--relief-bleu); }
.badge-non_aboutie, .badge-retard { border-color: var(--erreur); color: var(--erreur); }
.badge-relance { border-color: var(--alerte); color: var(--alerte); }
.table-demandes tr.etat-non_aboutie td:first-child, .table-demandes tr.etat-retard td:first-child { box-shadow: inset 4px 0 0 var(--erreur); }
.table-demandes tr.etat-relance td:first-child { box-shadow: inset 4px 0 0 var(--alerte); }
.table-demandes tr.alerte-prioritaire td { background: color-mix(in srgb, var(--erreur) 7%, transparent); }
.alerte-prioritaire-texte { color: var(--erreur); font-size: 0.85rem; }
.doc-rubriques a.filtre-alerte { border-color: var(--erreur); color: var(--erreur); font-weight: 600; }
.doc-rubriques a.filtre-alerte[aria-current="page"] { background: var(--erreur); color: #ffffff; }
.choix-condition { display: block; padding: 4px 0; }
.choix-actions label { display: inline-block; margin: 4px 14px 4px 0; }
.actions-apurement details { margin: 10px 0; }
.actions-apurement summary { cursor: pointer; font-weight: 600; color: var(--relief-bleu); }
.historique-apurement li { margin-bottom: 4px; }

/* ---------- En-têtes des rapports : aperçu schématique d'une page A4 (réduite au tiers) ---------- */
.apercus-pages { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.apercu-page { margin: 0; overflow: hidden; }
.apercu-portrait { width: 7.35cm; height: 10.7cm; }
.apercu-paysage { width: 10.4cm; height: 7.65cm; }
.apercu-feuille { box-sizing: border-box; padding: 1.2cm; background: #ffffff; color: #111111; border: 1px solid #9aa4b5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); transform: scale(0.35); transform-origin: top left; }
.apercu-portrait .apercu-feuille { width: 21cm; height: 29.7cm; }
.apercu-paysage .apercu-feuille { width: 29.7cm; height: 21cm; }
.apercu-titre { width: 60%; height: 0.6cm; margin: 0.8cm auto 0.6cm; background: #c9d3e1; }
.apercu-tableau { height: 5cm; border: 2px solid #9aa4b5; margin-bottom: 0.6cm;
  background: repeating-linear-gradient(#ffffff 0 0.8cm, #eef2f7 0.8cm 1.6cm); }
.apercu-tableau.court { height: 3cm; }
.apercu-page figcaption { font-size: 0.85rem; color: var(--secondaire); margin-top: -2px; }

/* ---------- Rapports vides de simulation : ce que contient chaque case ---------- */
.maquette-case { display: block; font-size: 0.72rem; line-height: 1.2; }
.maquette-source { display: inline-block; padding: 0 5px; margin-bottom: 2px; border-radius: 4px; font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.03em; color: #ffffff; }
.source-auto { background: #1f6fd1; }
.source-calcul { background: #7b4bd1; }
.source-saisie { background: #b36b00; }
.source-fixe { background: #4d5b70; }
.source-vide { background: #8a94a6; }
.legende-sources { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; font-size: 0.85rem; }
@media print { .legende-sources { break-inside: avoid; } }

/* ---------- Fenêtre de confirmation (confirmation.js) ---------- */
.confirmation-dialogue { max-width: min(460px, 92vw); padding: 0; border: none; border-radius: 12px;
  background: var(--carte); color: var(--texte); box-shadow: 0 0 0 2px var(--relief-bleu), var(--relief-ombre); }
.confirmation-dialogue::backdrop { background: rgba(10, 20, 40, 0.45); }
.confirmation-dialogue form { margin: 0; padding: 20px; }
.confirmation-titre { margin: 0 0 8px; font-size: 1.15rem; color: var(--relief-bleu); }
.confirmation-message { margin: 0 0 18px; line-height: 1.45; }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.confirmation-actions button { min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 600; border-radius: 8px;
  cursor: pointer; }
.confirmation-non { background: var(--carte); color: var(--texte); border: 1px solid var(--bordure-champ); }
.confirmation-oui { background: var(--relief-bleu); color: #ffffff; border: 1px solid var(--relief-bleu); }
.confirmation-oui:hover, .confirmation-non:hover { box-shadow: 0 0 0 3px var(--relief-halo); }

@media (prefers-reduced-motion: reduce) {
  .groupe > summary, .liste-nav a, .panneau-profil-liens a, .panneau-profil-deconnexion, .bouton-profil, .bascule-theme,
  .tuile, .educ-carte, .espace-choix, .identifiants-carte { transition: none; transform: none !important; }
  .groupe[open] > summary ~ * { animation: none; }
}
@media print { .confirmation-dialogue { display: none; } }

/* ---------- Lisibilité au survol (30/10/2026) ---------- */
/* Un bouton du menu (Nouvelle escale…) garde son fond et sa couleur au survol et quand il est la page courante :
   le fond gris de survol de style.css rendait son texte illisible, surtout en mode sombre. */
.liste-nav a.bouton:hover, .liste-nav a.bouton:focus-visible,
.liste-nav a.bouton[aria-current="page"] { background: var(--accent); color: var(--accent-texte); }
/* Groupe d'une seule entrée (Accueil) : lien direct, à l'allure d'un titre de groupe. */
.groupe-lien { display: block; margin: 2px 4px; padding: 8px; border-radius: 6px; font-weight: 600;
  color: var(--texte); text-decoration: none; }
.groupe-lien:hover { background: var(--survol); }
.groupe-lien[aria-current="page"] { background: var(--survol); box-shadow: inset 4px 0 0 var(--relief-bleu); }
/* La tuile survolée passe au premier plan : sa bulle s'affiche par-dessus les tuiles voisines, jamais derrière. */
.tuile:hover, .tuile:focus-visible { z-index: 30; }
/* Bulle cachée : rangée dans la tuile (elle n'allonge pas la page) ; affichée : sous la tuile, ou au-dessus quand la
   place manque en bas de l'écran (classe bulle-haut posée par interface.js). */
.tuile-bulle { top: 0; max-height: 100%; overflow: hidden; }
.tuile:hover .tuile-bulle, .tuile:focus-visible .tuile-bulle { top: calc(100% + 6px); max-height: none; }
.tuile.bulle-haut:hover .tuile-bulle, .tuile.bulle-haut:focus-visible .tuile-bulle { top: auto; bottom: calc(100% + 6px); }
@media (hover: none) { .tuile-bulle { max-height: none; overflow: visible; } }
/* ---------- Avis d'arrivée et messagerie dans la barre du haut (30/10/2026) ---------- */
.acces-entete { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lien-entete { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--bordure-champ); background: var(--carte); color: var(--texte); font-weight: 600;
  font-size: 0.9rem; text-decoration: none; transition: transform var(--relief-duree) ease, box-shadow var(--relief-duree) ease; }
.lien-entete:hover, .lien-entete:focus-visible { transform: translateY(-2px); color: var(--texte);
  box-shadow: 0 0 0 2px var(--relief-bleu), var(--relief-ombre); text-decoration: none; }
.lien-entete[aria-current="page"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
@media (max-width: 700px) { .acces-entete { order: 10; width: 100%; } }
/* ---------- « Choisir un fichier » : téléphone (QR code) et scanner (fichier_source.js) ---------- */
.fichier-sources { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 6px; vertical-align: middle; }
.fichier-source-zone { margin: 8px 0; }
.fichier-qr { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--bordure);
  border-radius: 8px; background: var(--carte); }
.fichier-qr svg { width: 170px; height: 170px; background: #ffffff; padding: 6px; border-radius: 6px; }
.fichier-qr p { margin: 0; max-width: 420px; }
/* ---------- Demandes : formulaires aérés (30/10/2026) ---------- */
.formulaire-demande { margin: 0 0 14px; }
.bloc-demande { border: 1px solid var(--bordure); border-radius: 10px; padding: 16px 18px; margin: 0 0 18px;
  background: var(--carte); }
.bloc-demande > legend { font-weight: 700; padding: 0 6px; }
.grille-demande { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 20px;
  margin: 0 0 12px; align-items: end; }
.grille-demande .champ { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.grille-demande .champ > span { font-weight: 600; font-size: 0.92rem; }
.grille-demande input, .grille-demande select { width: 100%; box-sizing: border-box; padding: 8px 10px; }
.sous-titre-demande { font-weight: 700; margin: 6px 0 8px; }
.choix-conditions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 14px; }
.choix-condition { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bordure);
  border-radius: 8px; cursor: pointer; background: var(--fond); }
.choix-condition small { display: block; color: var(--secondaire); font-size: 0.85rem; margin-top: 3px; }
.choix-condition:has(input:checked) { border-color: var(--relief-bleu); box-shadow: 0 0 0 2px var(--relief-halo); }
.choix-quantite { margin: 4px 0 12px; }
.sens-quantite { border: 0; padding: 0; display: flex; gap: 16px; align-items: center; }
.etapes-demande { border-left: 4px solid var(--relief-bleu); padding: 6px 0 6px 14px; margin: 14px 0; }
.etapes-demande ol { margin: 6px 0 10px; padding-left: 20px; }
.etapes-demande li { margin: 4px 0; }
.etapes-demande li.etape-faite strong { text-decoration: line-through; opacity: 0.75; }
.recherche-demandes h2 { margin-top: 0; }
/* ---------- Assistant en relief, qui grandit au survol et sort en marchant (30/10/2026) ---------- */
.assistant-robot .assistant-bouton {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #dbe8f6 38%, #9fbfe0 78%, #6f94bd 100%);
  border: 2px solid #1d3557;
  box-shadow: inset -5px -7px 12px rgba(16, 42, 84, 0.35), inset 4px 5px 10px rgba(255, 255, 255, 0.9),
    0 10px 20px rgba(16, 42, 84, 0.35), 0 3px 6px rgba(16, 42, 84, 0.25);
  transform: perspective(500px) rotateX(8deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.assistant-robot .assistant-bouton:hover, .assistant-robot .assistant-bouton:focus-visible {
  transform: perspective(500px) rotateX(0deg) translateY(-4px) scale(1.18);
  box-shadow: inset -5px -7px 12px rgba(16, 42, 84, 0.3), inset 4px 5px 10px rgba(255, 255, 255, 0.95),
    0 16px 30px rgba(16, 42, 84, 0.4), 0 0 0 3px var(--relief-halo);
}
/* Sortie : le robot avance en marchant (petits pas qui se balancent) */
.assistant-robot.assistant-sortie .assistant-bouton { animation: assistant-marche 1.1s ease-out both; }
@keyframes assistant-marche {
  0%   { transform: perspective(500px) translateX(70px) rotate(0deg) scale(0.9); }
  20%  { transform: perspective(500px) translateX(52px) translateY(-6px) rotate(-6deg) scale(1); }
  40%  { transform: perspective(500px) translateX(34px) translateY(0) rotate(6deg) scale(1.05); }
  60%  { transform: perspective(500px) translateX(18px) translateY(-6px) rotate(-5deg) scale(1.08); }
  80%  { transform: perspective(500px) translateX(6px) translateY(0) rotate(4deg) scale(1.1); }
  100% { transform: perspective(500px) translateX(0) translateY(-2px) rotate(0deg) scale(1.1); }
}
.assistant-bulle-accueil { position: absolute; right: 5.4rem; bottom: 0.9rem; max-width: 15rem; padding: 10px 14px;
  border-radius: 14px; background: #ffffff; color: #1d3557; font-weight: 600; box-shadow: 0 8px 22px rgba(16, 42, 84, 0.3);
  animation: assistant-bulle 0.35s 0.9s ease-out both; }
.assistant-bulle-accueil::after { content: ""; position: absolute; right: -8px; bottom: 16px; border: 8px solid transparent;
  border-right: 0; border-left-color: #ffffff; }
@keyframes assistant-bulle { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
.assistant-voix { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .assistant-robot .assistant-bouton, .assistant-robot.assistant-sortie .assistant-bouton,
  .assistant-bulle-accueil { animation: none; transition: none; transform: none; }
}
/* ---------- Section sélectionnée (2e relecture du 30/10/2026) : nettement marquée, et son groupe aussi ---------- */
.liste-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-texte); font-weight: 700;
  box-shadow: inset 5px 0 0 var(--relief-bleu), 0 2px 6px rgba(16, 42, 84, 0.25); }
.groupe:has(a[aria-current="page"]) > summary { color: var(--accent); font-weight: 700;
  box-shadow: inset 4px 0 0 var(--relief-bleu); }
.groupe-lien[aria-current="page"] { background: var(--accent); color: var(--accent-texte); font-weight: 700; }
.liste-nav a:active, .groupe-lien:active, .lien-entete:active { transform: translateY(1px); filter: brightness(0.92); }
/* ---------- Alertes réunies : « Alertes » et un nombre ; résumé au survol, détail au clic ---------- */
.alertes-compactes { margin: 0 0 10px; }
.alertes-compactes > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--avertissement, #c98a00); font-weight: 700;
  background: var(--carte); }
.alertes-compactes > summary::-webkit-details-marker { display: none; }
.alertes-compactes.urgentes > summary { border-color: var(--erreur); color: var(--erreur); }
.alertes-nombre { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--avertissement, #c98a00); color: #ffffff; font-size: 0.85rem; }
.alertes-compactes.urgentes .alertes-nombre { background: var(--erreur); }
.alertes-detail { margin-top: 8px; }
.alertes-detail .message { margin: 0 0 6px; }
/* ---------- Icône d'imprimante ---------- */
.icone-imprimer { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  margin-left: 4px; padding: 0; border: 1px solid var(--bordure); border-radius: 6px; background: var(--carte);
  color: var(--texte); cursor: pointer; vertical-align: middle; }
.icone-imprimer:hover, .icone-imprimer:focus-visible { background: var(--survol); color: var(--accent); }
.imprimer-page { width: 34px; height: 34px; }
.avec-icone-imprimer { display: inline-flex; align-items: center; gap: 6px; }
.icone-imprimante { flex: none; }
/* ---------- Tableaux longs ou larges : barre de défilement en haut, en-têtes figés (tableaux.js) ---------- */
.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; }
.tableau-defilant { max-height: 72vh; overflow: auto; }
.tableau-defilant thead th { position: sticky; top: 0; z-index: 3; background: var(--carte);
  box-shadow: 0 1px 0 var(--bordure); }
.tableau-defilant table { border-collapse: separate; border-spacing: 0; }
@media print {
  .tableau-defilant { max-height: none; overflow: visible; }
  .tableau-defilant thead th { position: static; }
}
/* ---------- « Utiliser un périphérique » ---------- */
.fichier-peripheriques { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.fichier-peripheriques p { flex-basis: 100%; margin: 0; }

/* ---------- Situations modulables et pages harmonisées (2e relecture du 30/10/2026) ---------- */
.choix-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin: 8px 0; }
.situation-modulable td.nombre, .situation-modulable th.nombre { text-align: right; white-space: nowrap; }
.situation-modulable tfoot th { background: var(--survol); }
.titre-situation { text-align: center; text-decoration: underline; font-size: 1.05rem; margin: 14px 0 4px; }
.actions-rapport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.barre-boutons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.barre-boutons .bouton { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.6em; margin: 0; }
.filtres-harmonises { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; align-items: end; }
.filtres-harmonises .champ { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.filtres-harmonises select, .filtres-harmonises input { width: 100%; box-sizing: border-box; padding: 7px 9px; }
.modifier-ligne[open] { min-width: 560px; }
.modifier-ligne > summary { list-style: none; cursor: pointer; margin-top: 4px; }
.modifier-ligne > summary::-webkit-details-marker { display: none; }

/* ---------- Icônes des sections du menu (31/10/2026) ---------- */
.icone-groupe { display: inline-block; flex: none; width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.15em; background: currentColor; opacity: 0.85; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
.icone-accueil { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.icone-escales { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a3 3 0 0 1 1 5.8V10h4v2h-4v7.9A7 7 0 0 0 19 13h2a9 9 0 0 1-18 0h2a7 7 0 0 0 6 6.9V12H7v-2h4V7.8A3 3 0 0 1 12 2z'/%3E%3C/svg%3E"); }
.icone-demandes { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3zm-1 8v2h8v-2zm0 4v2h8v-2z'/%3E%3C/svg%3E"); }
.icone-avis { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3z'/%3E%3C/svg%3E"); }
.icone-conferences { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h16v2H4zm2 3h2v7H6zm10 0h2v7h-2zM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E"); }
.icone-saisies { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3C/svg%3E"); }
.icone-caboteurs { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16l2 5h14l2-5-9-3zM6 13V8h5V4h2v4h5v5l-6-2z'/%3E%3C/svg%3E"); }
.icone-eaux { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s7 8 7 13a7 7 0 0 1-14 0c0-5 7-13 7-13z'/%3E%3C/svg%3E"); }
.icone-declarations { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zm8 0v6h6'/%3E%3C/svg%3E"); }
.icone-agences { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V5l8-3 8 3v16h-6v-5h-4v5z'/%3E%3C/svg%3E"); }
.icone-rapports { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4zM6 10h3v8H6zm5-6h3v14h-3zm5 9h3v5h-3z'/%3E%3C/svg%3E"); }
.icone-documents { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h7l2 2h11v12H2z'/%3E%3C/svg%3E"); }
.icone-educ { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.9V17h2V9zM5 13v4l7 4 7-4v-4l-7 4z'/%3E%3C/svg%3E"); }
.icone-documentation { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3zm18 0h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E"); }
.icone-compte { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-9 10a9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); }
.icone-numeriser { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E"); }
/* Raccourcis près du logo : numériser un document, bibliothèque */
.raccourcis-entete { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 14px; vertical-align: middle; }
.raccourci { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.raccourci:hover, .raccourci:focus-visible { background: var(--survol); color: var(--accent); }
@media (max-width: 720px) { .raccourcis-entete { margin-left: 0; } .raccourci { padding: 5px 9px; font-size: 0.85rem; } }
/* Bibliothèque : cartes illustrées d'un livre */
.bibliotheque-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 16px 0; }
.bibliotheque-carte { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); color: var(--texte); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.bibliotheque-carte:hover, .bibliotheque-carte:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16, 42, 84, 0.18), 0 0 0 2px var(--relief-halo); }
.bibliotheque-carte .livre { width: 84px; height: 105px; align-self: center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.bibliotheque-titre { font-weight: 700; font-size: 1.05rem; }
.bibliotheque-nombre { margin-top: auto; font-weight: 600; color: var(--accent); }
/* Agréments devant chaque agence */
.badge-agrement { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 0.82rem; border: 1px solid var(--bordure); background: var(--fond); white-space: nowrap; }
.badge-agrement.statut-valide { border-color: #2e7d32; color: #2e7d32; }
.badge-agrement.statut-bientot { border-color: #b26a00; color: #b26a00; }
.badge-agrement.statut-expire { border-color: var(--erreur); color: var(--erreur); text-decoration: line-through; }
.table-agences td.nombre { text-align: right; }

/* ---------- Assistant humanoïde (31/10/2026) : il marche, ses services en cercles autour de lui ---------- */
.assistant-humanoide .assistant-bouton { display: inline-flex; align-items: flex-end; justify-content: center; overflow: visible; }
.assistant-humanoide .assistant-bouton .humanoide { margin-bottom: -4px; }
.humanoide .hum-jambe, .humanoide .hum-bras { transform-box: fill-box; transform-origin: 50% 8%; }
.assistant-sortie .humanoide .hum-jambe-g, .assistant-arrivee .humanoide .hum-jambe-g,
.assistant-sortie .humanoide .hum-bras-d, .assistant-arrivee .humanoide .hum-bras-d { animation: hum-pas 0.36s ease-in-out 4 alternate; }
.assistant-sortie .humanoide .hum-jambe-d, .assistant-arrivee .humanoide .hum-jambe-d,
.assistant-sortie .humanoide .hum-bras-g, .assistant-arrivee .humanoide .hum-bras-g { animation: hum-pas 0.36s ease-in-out 4 alternate-reverse; }
@keyframes hum-pas { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.assistant-arrivee .assistant-bouton { animation: assistant-venue 1.4s ease-out both; }
@keyframes assistant-venue { from { transform: translateX(-60vw); } to { transform: translateX(0); } }
.assistant-services { position: relative; width: 300px; height: 300px; margin: 6px auto 4px; max-width: 100%; }
.assistant-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.assistant-service { position: absolute; left: 50%; top: 50%; width: 82px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; text-decoration: none; color: var(--texte); text-align: center; font-size: 0.74rem; line-height: 1.15;
  transform: rotate(calc(360deg * var(--rang) / var(--total))) translate(112px) rotate(calc(-360deg * var(--rang) / var(--total))) translate(-50%, -50%);
  animation: service-apparait 0.35s ease-out both; animation-delay: calc(0.05s * var(--rang)); }
.assistant-service-rond { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #cfe0f3 60%, #8fb3da); border: 2px solid #1d3557;
  color: #1d3557; font-weight: 800; box-shadow: 0 4px 10px rgba(16, 42, 84, 0.25); transition: transform 0.15s ease; }
.assistant-service:hover .assistant-service-rond, .assistant-service:focus-visible .assistant-service-rond { transform: scale(1.15); }
@keyframes service-apparait { from { opacity: 0; } to { opacity: 1; } }
.assistant-annonce { margin: 4px 0; padding: 8px 12px; border-radius: 12px; background: var(--survol); font-weight: 600; }
@media (max-width: 420px) { .assistant-services { width: 260px; height: 260px; } .assistant-service { transform: rotate(calc(360deg * var(--rang) / var(--total))) translate(95px) rotate(calc(-360deg * var(--rang) / var(--total))) translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .humanoide .hum-jambe, .humanoide .hum-bras, .assistant-arrivee .assistant-bouton, .assistant-service { animation: none !important; } }
/* ---------- Page d'aide : onglets et fil d'échanges en bulles ---------- */
.aide-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.aide-onglet { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--carte); text-decoration: none; color: var(--texte); font-weight: 600; }
.aide-onglet[aria-current="page"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.aide-formulaire textarea { width: 100%; box-sizing: border-box; }
.aide-fil { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.bulle { padding: 10px 14px; border-radius: 14px; max-width: 85%; box-shadow: 0 2px 6px rgba(16, 42, 84, 0.12); }
.bulle p { margin: 4px 0; }
.bulle-vous { align-self: flex-end; background: var(--survol); border-bottom-right-radius: 4px; }
.bulle-assistant { align-self: flex-start; background: var(--carte); border: 1px solid var(--bordure); border-bottom-left-radius: 4px; }

.puce-formation { background: #b8860b; }
.puce-ia { background: #5a4fcf; }

/* ---------- Travail hors ligne : page plus claire (31/10/2026) ---------- */
.page-hors-ligne { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; }
.hors-ligne-intro { font-size: 1.02rem; line-height: 1.5; }
.hors-ligne-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; }
.hors-ligne-carte { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; text-decoration: none;
  color: var(--texte, #1d3557); background: var(--carte, #ffffff); border: 1px solid var(--bordure, #c9d3df);
  box-shadow: 0 4px 12px rgba(16, 42, 84, 0.10); border-top: 5px solid #1f6fb8; }
.hors-ligne-carte:nth-child(2) { border-top-color: #2e9b5f; } .hors-ligne-carte:nth-child(3) { border-top-color: #b8860b; }
.hors-ligne-carte:nth-child(4) { border-top-color: #6a3d7a; }
.hors-ligne-carte strong { font-size: 1.05rem; } .hors-ligne-carte span { font-size: 0.9rem; opacity: 0.85; }
.hors-ligne-carte:hover, .hors-ligne-carte:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 84, 0.18); }
.hors-ligne-regles { padding: 12px 16px; border-radius: 10px; background: var(--survol, #eef4fb); }
.champ-a-synchroniser input[readonly] { font-style: italic; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(31, 111, 184, 0.06) 6px 12px); }
.champ-a-synchroniser .bouton { margin-top: 4px; align-self: flex-start; }

/* ---------- 4e relecture (31/10/2026) : indicateurs, chiffres alignés, menu contextuel, alertes de section ---------- */
th.nombre, td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-conferences td, .table-conferences th { vertical-align: middle; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.indicateur { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--bordure);
  border-radius: 10px; background: var(--carte); }
.indicateur-libelle { font-size: 0.85rem; color: var(--secondaire, inherit); opacity: 0.85; }
.indicateur-valeur { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-avancement { display: block; height: 6px; border-radius: 3px; background: var(--survol); overflow: hidden; }
.barre-avancement > span { display: block; height: 100%; background: var(--accent); }
.menu-contextuel { position: fixed; z-index: 2000; min-width: 160px; padding: 6px; border-radius: 8px; background: var(--carte);
  border: 1px solid var(--bordure); box-shadow: 0 10px 24px rgba(16, 42, 84, 0.25); display: flex; flex-direction: column; }
.menu-contextuel a { padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--texte); }
.menu-contextuel a:hover, .menu-contextuel a:focus-visible { background: var(--survol); color: var(--accent); }
[data-statut] { cursor: context-menu; }
[data-statut] a, [data-statut] button { cursor: pointer; }
.alerte-section { margin: 4px 0 14px; }
.liste-jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 12px; padding-left: 18px; }

/* ---------- Harmonisation générale (4e relecture du 31/10/2026) ---------- */
/* Barres de commandes : groupes titrés, boutons de même hauteur, espacés */
.barre-commandes { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 10px 0 16px; }
.groupe-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); }
.groupe-commandes-titre { flex-basis: 100%; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; opacity: 0.75; }
.barre-commandes .bouton, .barre-boutons .bouton, .actions-rapport .bouton { min-height: 2.4em; min-width: 6.5em;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
/* Paragraphes de plusieurs boutons : espacés, alignés, sans entassement */
main p:has(> .bouton + .bouton), main p:has(> a.bouton ~ a.bouton) { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
main p:has(> .bouton + .bouton) > .bouton { margin: 0; }
/* Filtres : grille régulière, champs de même largeur */
.filtres-saisies .grille-demande { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.actions-filtres { display: flex; gap: 10px; margin: 6px 0 0; }
/* Repère Numérisation / Documents / Archives / Bibliothèque */
.orientation-documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.orientation-carte { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); text-decoration: none; }
.orientation-carte span { font-size: 0.85rem; opacity: 0.8; }
.orientation-carte:hover, .orientation-carte:focus-visible { background: var(--survol); }
.orientation-ici { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
/* Lignes d'actions dans les tableaux : boutons côte à côte, réguliers */
td.actions-ligne { white-space: nowrap; }
td.actions-ligne .bouton, td.actions-ligne form { margin: 2px 4px 2px 0; }

/* Marges d'impression communes (relecture du 31/10/2026 : 12 mm coupaient les bords à l'impression).
   Mêmes valeurs que mise_en_page.py : 16 mm en haut, 18 mm sur les côtés, 20 mm en bas. */
@page { margin: 16mm 18mm 20mm 18mm; }
@page portrait-officiel { margin: 16mm 18mm 28mm 18mm; }
@media print {
  .tableau-officiel, .rapport table { max-width: 100%; }
  .tableau-officiel td, .tableau-officiel th { word-break: break-word; }
}