/* inerWeb Fluide — © 2026 Franck Henninot — Tous droits réservés (voir LICENSE) — inerweb.ovh */
/* ============================================================
   inerWeb Fluide — composants.css
   Composants de la charte : boutons, cartes, chips, barres,
   tableaux, modales, toasts, badges, états vides.
   ============================================================ */

/* ============================================================
   Boutons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--rayon-bouton);
  font-family: var(--police-corps);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Bouton principal : dégradé turquoise */
.btn-primaire {
  background: var(--degrade-bouton);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(18, 181, 201, .3);
}

.btn-primaire:hover:not(:disabled) {
  filter: brightness(1.06);
}

/* Bouton secondaire : blanc bordé */
.btn-secondaire {
  background: var(--carte);
  border-color: var(--bordure);
  color: var(--texte-2);
  box-shadow: var(--ombre-douce);
}

.btn-secondaire:hover:not(:disabled) {
  background: var(--fond-2);
}

/* Bouton contour turquoise */
.btn-contour {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-fort);
}

.btn-contour:hover:not(:disabled) {
  background: var(--accent-fond-2);
}

/* Bouton contour danger (suppression) */
.btn-danger-contour {
  background: transparent;
  border-color: var(--danger-bordure);
  color: var(--danger);
}

.btn-danger-contour:hover:not(:disabled) {
  background: var(--danger-fond);
}

/* Bouton marine plein */
.btn-marine {
  background: var(--marine-900);
  color: #ffffff;
}

.btn-marine:hover:not(:disabled) {
  background: var(--marine-800);
}

/* Bouton pleine largeur */
.btn-bloc {
  width: 100%;
}

/* Petit bouton compact (actions de tableau) */
.btn-petit {
  padding: 6px 11px;
  font-size: 12.5px;
}

/* ============================================================
   Cartes
   ============================================================ */

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: 18px 20px;
}

/* ---- Carte KPI ---- */

.carte-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* Libellé en capitales espacées grises */
.kpi-libelle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  padding-top: 4px;
}

/* Pastille d'icône colorée en haut à droite */
.kpi-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--rayon-bouton);
}

.kpi-pastille svg {
  width: 19px;
  height: 19px;
}

.kpi-pastille-accent { background: var(--accent-fond);  color: var(--accent-fort); }
.kpi-pastille-rose   { background: #ffe4e6;             color: var(--danger-2); }
.kpi-pastille-vert   { background: var(--succes-fond);  color: var(--succes); }
.kpi-pastille-violet { background: var(--violet-fond);  color: var(--violet); }

/* Valeur énorme en Space Grotesk */
.kpi-valeur {
  font-family: var(--police-titres);
  font-size: 34px;
  font-weight: 700;
  color: var(--texte);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-sous-texte {
  font-size: 12px;
  color: var(--texte-3);
}

/* ============================================================
   Chips (pilules d'état)
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--rayon-chip);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.chip-vert   { background: var(--succes-fond);   color: var(--succes); }
.chip-rouge  { background: var(--danger-fond);   color: var(--danger); }
.chip-ambre  { background: var(--avert-fond);    color: var(--avert); }
.chip-violet { background: var(--violet-fond);   color: var(--violet); }
.chip-bleu   { background: var(--info-fond);     color: var(--info); }
.chip-teal   { background: var(--accent-fond);   color: var(--accent-fort); }
.chip-orange { background: var(--orange-fond);   color: var(--orange); }
.chip-gris   { background: var(--fond-2);        color: var(--texte-3); }
.chip-marine { background: var(--marine-900);    color: #ffffff; }

/* Code fluide en mono (ex. R-404A) */
.chip-mono {
  font-family: var(--police-mono);
  letter-spacing: .02em;
}

/* ============================================================
   Barres de progression
   ============================================================ */

.barre {
  height: 8px;
  border-radius: var(--rayon-chip);
  background: var(--fond-2);
  overflow: hidden;
}

.barre-remplissage {
  height: 100%;
  border-radius: var(--rayon-chip);
  transition: width .35s ease;
}

.barre-accent { background: var(--degrade-bouton); }
.barre-vert   { background: var(--succes); }
.barre-rouge  { background: var(--danger); }
.barre-ambre  { background: var(--avert-icone); }

/* ============================================================
   Tableaux
   ============================================================ */

.tableau-defilement {
  overflow-x: auto;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
}

.tableau {
  width: 100%;
  font-size: 13px;
}

/* En-têtes : capitales espacées grises */
.tableau thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-3);
  white-space: nowrap;
}

/* Lignes blanches séparées par filets fins, survol léger */
.tableau tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure-2);
  color: var(--texte-2);
  vertical-align: middle;
}

.tableau tbody tr:last-child td {
  border-bottom: none;
}

.tableau tbody tr:hover {
  background: var(--fond-3);
}

.tableau .align-droite  { text-align: right; }
.tableau .align-centre  { text-align: center; }

/* Quantités signées et codes en mono */
.tableau .cellule-mono {
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
}

.quantite-positive { color: var(--succes); }
.quantite-negative { color: var(--violet); }

/* Échéance dépassée : rouge gras */
.echeance-depassee {
  color: var(--danger);
  font-weight: 600;
}

/* ============================================================
   Badges
   ============================================================ */

/* Compteur rouge (alertes dans la sidebar) */
.badge-rouge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  flex: none;
  border-radius: var(--rayon-chip);
  background: var(--danger);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   Modales
   ============================================================ */

.modale-fond {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 42, 71, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}

.modale-fond.visible {
  opacity: 1;
}

.modale {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-haute);
  transform: translateY(10px);
  transition: transform .2s ease;
  overflow: hidden;
}

.modale-fond.visible .modale {
  transform: translateY(0);
}

.modale-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bordure);
}

.modale-titre {
  font-size: 16px;
  font-weight: 600;
}

.modale-fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--rayon-bouton);
  color: var(--texte-3);
  transition: background .15s ease, color .15s ease;
}

.modale-fermer:hover {
  background: var(--fond-2);
  color: var(--texte);
}

.modale-fermer svg {
  width: 18px;
  height: 18px;
}

.modale-corps {
  padding: 20px;
  overflow-y: auto;
  color: var(--texte-2);
  font-size: 13.5px;
}

.modale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--bordure);
  background: var(--fond-3);
}

/* Feuille attachée en bas sur mobile (« bottom sheet ») */
@media (max-width: 639px) {
  .modale-fond {
    align-items: flex-end;
    padding: 0;
  }

  .modale {
    max-width: none;
    max-height: 88vh;
    border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
    transform: translateY(24px);
  }
}

/* ---- Modale de sauvegarde ---- */

.modale-intro {
  margin-bottom: 16px;
  color: var(--texte-2);
}

.options-sauvegarde {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 639px) {
  .options-sauvegarde {
    grid-template-columns: 1fr;
  }
}

.option-sauvegarde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--fond-3);
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}

.option-sauvegarde:hover {
  border-color: var(--accent);
  background: var(--accent-fond-2);
}

.option-sauvegarde svg {
  width: 22px;
  height: 22px;
  color: var(--accent-fort);
}

.option-titre {
  font-weight: 600;
  color: var(--texte);
  font-size: 13.5px;
}

.option-detail {
  font-size: 12px;
  color: var(--texte-3);
  line-height: 1.45;
}

/* ============================================================
   Toasts (notifications éphémères, coin bas droit)
   ============================================================ */

#zone-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--marine-900);
  color: #e8f1f9;
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-haute);
  font-size: 13px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}

.toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-icone {
  display: flex;
  flex: none;
}

.toast-icone svg {
  width: 18px;
  height: 18px;
}

.toast-succes .toast-icone { color: #4ade80; }
.toast-erreur .toast-icone { color: #f87171; }
.toast-info   .toast-icone { color: var(--accent-clair); }

/* ============================================================
   État vide
   ============================================================ */

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--texte-faible);
}

.etat-vide svg {
  width: 34px;
  height: 34px;
  opacity: .6;
}

.etat-vide p {
  font-size: 13px;
  color: var(--texte-3);
}

/* ============================================================
   En-tête de vue (helper enteteVue)
   ============================================================ */

.entete-vue {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.entete-vue-titre {
  font-size: 22px;
  font-weight: 700;
}

.entete-vue-sous-titre {
  margin-top: 3px;
  font-size: 13px;
  color: var(--texte-3);
}

.entete-vue-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   Panneau « Vue en construction »
   ============================================================ */

.vue-construction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
  background: var(--carte);
  border: 1px dashed var(--bordure-3);
  border-radius: var(--rayon-carte);
  color: var(--texte-3);
}

.vue-construction svg {
  width: 38px;
  height: 38px;
  color: var(--texte-faible);
}

.vue-construction h2 {
  font-size: 17px;
  color: var(--texte-2);
}

.vue-construction p {
  font-size: 13px;
  max-width: 42ch;
}

/* ============================================================
   Formulaires génériques (Phase B)
   ============================================================ */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ > label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: 14px;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--texte-faible);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo);
}

.champ.invalide input,
.champ.invalide select,
.champ.invalide textarea {
  border-color: var(--danger);
}

.champ-erreur {
  font-size: 12px;
  color: var(--danger);
}

.grille-form-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

@media (max-width: 640px) {
  .grille-form-2 {
    grid-template-columns: 1fr;
  }
}

/* Champ avec suffixe d'unité (« kg ») affiché DANS le champ */
.champ-unite {
  position: relative;
}

.champ-unite input {
  width: 100%;
  padding-right: 44px;
}

.champ-unite::after {
  content: attr(data-unite);
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 13px;
  color: var(--texte-faible);
  pointer-events: none;
}

/* ============================================================
   Wizard (assistant pas à pas, ex. « Nouveau mouvement »)
   ============================================================ */

.wizard-etapes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--bordure-2);
}

.wizard-etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.wizard-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rayon-chip);
  font-size: 13px;
  font-weight: 700;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  color: var(--texte-3);
  transition: background .15s, color .15s, border-color .15s;
}

.wizard-etape-libelle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--texte-faible);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Étape ACTIVE : pastille turquoise pleine */
.wizard-etape.active .wizard-pastille {
  background: var(--degrade-bouton);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--accent-halo);
}

.wizard-etape.active .wizard-etape-libelle {
  color: var(--accent-fort);
}

/* Étape FAITE : pastille marine avec coche (le numéro est masqué) */
.wizard-etape.faite .wizard-pastille {
  background: var(--marine-900);
  border-color: var(--marine-900);
  color: transparent;
  position: relative;
}

.wizard-etape.faite .wizard-pastille::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  width: 8px;
  height: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.wizard-etape.faite .wizard-etape-libelle {
  color: var(--texte-2);
}

.wizard-corps {
  padding: 18px 2px;
  min-height: 220px;
}

.wizard-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--bordure-2);
}

/* Le bouton « Continuer » se pousse à droite ; « Annuler » reste au centre */
.wizard-pied .pousser-droite,
.wizard-pied > :last-child {
  margin-left: auto;
}

/* ============================================================
   Carte de choix (grande carte cliquable du wizard)
   ============================================================ */

.carte-choix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texte);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.carte-choix:hover {
  border-color: var(--accent);
}

.carte-choix:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo);
}

.carte-choix.selectionnee {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo);
  background: var(--accent-fond-2);
}

/* ============================================================
   Bandeaux d'avertissement et d'erreur
   ============================================================ */

.bandeau-avertissement,
.bandeau-erreur {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--rayon-bouton);
  font-size: 13px;
  line-height: 1.45;
}

.bandeau-avertissement {
  background: var(--avert-fond);
  color: var(--avert);
}

.bandeau-erreur {
  background: var(--danger-fond);
  color: var(--danger);
}

.bandeau-avertissement svg,
.bandeau-erreur svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CR-5 : bandeau d'intégrité du registre — fixe en tête de la zone
   principale, sous l'en-tête collant, pleine largeur, non fermable
   (aucun bouton de fermeture posé côté JS). */
#bandeau-integrite.bandeau-erreur {
  position: sticky;
  top: 0;
  z-index: 30;
  border-radius: 0;
  padding: 11px 28px;
  font-weight: 500;
}

/* ============================================================
   Pièces jointes (Phase C) : liste + zone de dépôt
   ============================================================ */

.zone-pj {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-pj .pj-vide {
  font-size: 13px;
  color: var(--texte-3);
  margin: 0;
}

.pj-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--fond-3);
  border: 1px solid var(--bordure-2);
  border-radius: var(--rayon-bouton);
}

.pj-ligne + .pj-ligne {
  margin-top: 6px;
}

.pj-ligne .pj-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pj-ligne .pj-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-ligne .pj-meta {
  font-size: 12px;
  color: var(--texte-3);
}

.pj-ligne .pj-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pj-ligne .pj-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  color: var(--texte-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.pj-ligne .pj-actions button:hover {
  border-color: var(--accent);
  color: var(--accent-fort);
}

.pj-ligne .pj-actions button.pj-supprimer:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.pj-ligne .pj-actions svg {
  width: 14px;
  height: 14px;
}

/* Zone de dépôt : pointillés, survol turquoise */
.pj-depot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px dashed var(--bordure-3);
  border-radius: var(--rayon-carte);
  background: var(--fond-3);
  color: var(--texte-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.pj-depot:hover,
.pj-depot.pj-depot-survol {
  border-color: var(--accent);
  background: var(--accent-fond-2);
}

.pj-depot svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-fort);
}

.pj-depot .pj-depot-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.pj-depot .pj-depot-texte strong {
  font-size: 13px;
  color: var(--texte);
}

.pj-message {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--rayon-bouton);
  background: var(--fond-2);
  color: var(--texte-2);
}

.pj-message.pj-message-erreur {
  background: var(--danger-fond);
  color: var(--danger);
}

/* ============================================================
   Tableau « balance matière » (variante dense du tableau)
   Colonne écart colorée : vert nul, rouge non justifié,
   ambre justifié.
   ============================================================ */

.tableau-balance table {
  font-size: 12.5px;
}

.tableau-balance th,
.tableau-balance td {
  padding: 7px 10px;
  white-space: nowrap;
}

.tableau-balance td.nombre {
  font-family: var(--police-mono);
  text-align: right;
}

.tableau-balance .ecart-nul {
  color: var(--succes);
  font-weight: 600;
}

.tableau-balance .ecart-non-justifie {
  color: var(--danger);
  font-weight: 700;
  background: var(--danger-fond);
}

.tableau-balance .ecart-justifie {
  color: var(--avert);
  font-weight: 600;
  background: var(--avert-fond);
}

/* ============================================================
   Encart d'aide (ex. grilles de catégories 2008 / 2025)
   ============================================================ */

.encart-aide {
  padding: 12px 14px;
  background: var(--accent-fond-2);
  border: 1px solid var(--accent);
  border-radius: var(--rayon-carte);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte-2);
}

.encart-aide strong {
  color: var(--texte);
}

/* ============================================================
   Liste-fiche : paires libellé / valeur (dossier opérateur…)
   ============================================================ */

.liste-fiche {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 8px 18px;
  font-size: 13px;
}

.liste-fiche dt {
  color: var(--texte-3);
}

.liste-fiche dd {
  margin: 0;
  color: var(--texte);
  font-weight: 500;
}

.liste-fiche dd.valeur-mono {
  font-family: var(--police-mono);
}

@media (max-width: 700px) {
  .liste-fiche {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .liste-fiche dd {
    margin-bottom: 8px;
  }
}

/* ============================================================
   Écran de connexion (V9-E5, vague 5)
   ============================================================ */

.ecran-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 24px;
}

.carte-connexion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  padding: 32px 28px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  text-align: center;
}

.connexion-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--accent-fond-2);
  color: var(--accent);
}

.connexion-pastille svg {
  width: 24px;
  height: 24px;
}

.connexion-titre {
  font-size: 18px;
  color: var(--texte);
}

.connexion-sous-titre {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--texte-3);
}

.carte-connexion .formulaire {
  width: 100%;
  text-align: left;
}

/* ============================================================
   Bouton de déconnexion (pied de la sidebar, V9-E5)
   ============================================================ */

.pied-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  border-top: 1px solid var(--bordure);
}

.pied-session-identite {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.pied-session-login {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pied-session-role {
  font-size: 11px;
  color: var(--texte-3);
}

.bouton-deconnexion {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  background: var(--carte);
  color: var(--texte-3);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.bouton-deconnexion:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-fond);
}

.bouton-deconnexion svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Notice « Protection des données » (lot E ③, RGPD)
   ============================================================ */
.rgpd-notice {
  max-width: 820px;
  line-height: 1.55;
  color: var(--texte);
}
.rgpd-intro {
  font-size: 15px;
  color: var(--texte-2);
  margin-bottom: 20px;
}
.rgpd-section {
  margin: 22px 0;
  padding-top: 4px;
  border-top: 1px solid var(--bordure);
}
.rgpd-titre {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--texte);
}
.rgpd-section ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.rgpd-section li { margin: 4px 0; }
.rgpd-note { margin-top: 12px; }
.rgpd-pied {
  margin-top: 24px;
  font-size: 13px;
  color: var(--texte-faible);
}

/* ============================================================
   Visite guidée de la démonstration (13/08/2026)
   docs/PLAN-VISITE-GUIDEE.md — le repère ne bloque JAMAIS un clic
   (pointer-events: none), le panneau se pose dans un coin libre
   (data-coin, choisi par choisirCoin pour ne pas recouvrir la cible).
   ============================================================ */

.visite-panneau {
  position: fixed;
  z-index: 70; /* sous les modales (80+) : une boîte ouverte passe devant */
  width: min(340px, calc(100vw - 32px));
  background: var(--carte);
  border: 1px solid var(--bordure-2);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-haute);
  font-size: 13px;
}
.visite-panneau[data-coin="bas-droite"]  { right: 16px; bottom: 16px; }
.visite-panneau[data-coin="bas-gauche"]  { left: 16px;  bottom: 16px; }
.visite-panneau[data-coin="haut-droite"] { right: 16px; top: 16px; }
.visite-panneau[data-coin="haut-gauche"] { left: 16px;  top: 16px; }

.visite-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
}
.visite-entete-icone { color: var(--accent); display: inline-flex; }
.visite-entete-icone svg { width: 18px; height: 18px; }
.visite-entete-titre {
  font-family: var(--police-titres);
  font-weight: 600;
  color: var(--marine-900);
}
.visite-entete-parcours {
  color: var(--texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.visite-replier,
.visite-fermer {
  border: none;
  background: none;
  color: var(--texte-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
}
.visite-replier:hover,
.visite-fermer:hover { background: var(--fond-2); color: var(--marine-900); }
.visite-replier svg, .visite-fermer svg { width: 16px; height: 16px; }
.visite-replier[aria-expanded="false"] svg { transform: rotate(180deg); }

.visite-corps { padding: 10px 12px 12px; }

.visite-missions {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
}
.visite-mission {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texte-2);
}
.visite-mission:hover { background: var(--fond-2); }
.visite-mission--courante { background: var(--accent-fond); color: var(--marine-900); }
.visite-mission--faite .visite-mission-titre { color: var(--succes); }
.visite-mission-etat { display: inline-flex; width: 16px; justify-content: center; }
.visite-mission-etat svg { width: 14px; height: 14px; color: var(--succes); }
.visite-mission-rond {
  width: 10px; height: 10px;
  border: 2px solid var(--bordure-3);
  border-radius: 50%;
  display: inline-block;
}
.visite-mission-titre { flex: 1; }
.visite-mission-libelle { font-size: 11px; color: var(--texte-2); }

.visite-etape-numero {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-bottom: 2px;
}
.visite-etape-titre {
  margin: 0 0 6px;
  font-family: var(--police-titres);
  font-size: 15px;
  color: var(--marine-900);
}
.visite-consigne { margin: 0 0 6px; color: var(--texte-2); }
.visite-attendu {
  margin: 0;
  padding: 8px;
  background: var(--fond-2);
  border-radius: var(--rayon-bouton);
  color: var(--texte-2);
}

.visite-pied {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.visite-pied .btn { flex: 1; justify-content: center; }
.visite-suivant--pret { box-shadow: 0 0 0 3px var(--accent-halo); }

/* Le repère : un liseré posé PAR-DESSUS l'écran mais transparent aux
   clics — l'élément visé reste pleinement cliquable, rien n'est voilé. */
.visite-repere {
  position: fixed;
  z-index: 69; /* sous le panneau, au-dessus du contenu */
  pointer-events: none;
  border: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--accent-halo);
}
.visite-repere-etiquette {
  position: absolute;
  top: -26px;
  left: 0;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .visite-repere { animation: visite-halo 1.6s ease-in-out infinite; }
  @keyframes visite-halo {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-halo); }
    50%      { box-shadow: 0 0 0 9px var(--accent-halo); }
  }
}

/* La souris-enseignant (v2 voix, 14/08) : la flèche qui glisse jusqu'à
   l'élément visé puis montre le clic. Décorative par nature (consigne,
   liseré et étiquette portent déjà tout) : sous prefers-reduced-motion,
   elle n'apparaît pas. Jamais un obstacle : pointer-events none, même
   couche que le repère (sous le panneau). */
.visite-souris {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 69;
  pointer-events: none;
  transition: transform 0.8s ease-in-out;
  filter: drop-shadow(0 2px 4px rgba(15, 40, 70, 0.45));
}
.visite-souris svg { display: block; }
.visite-souris-onde {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.visite-souris-onde--active { animation: visite-souris-clic 0.5s ease-out; }
@keyframes visite-souris-clic {
  0%   { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .visite-souris { display: none; }
}

/* Le speech de présentation dans la modale de choix du parcours (v2 voix) */
.visite-presentation {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.visite-presentation-texte {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--texte-2);
}
.visite-presentation-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--texte-2);
}

/* Revue du 14/08 : sur petit écran (téléphone), les cartes « Derniers
   mouvements » et « Alertes réglementaires » débordaient d'environ 30 px —
   le contenu large défile DANS sa carte, jamais la page entière. */
@media (max-width: 480px) {
  .carte[aria-label="Derniers mouvements"],
  .carte[aria-label="Alertes réglementaires"] {
    overflow-x: auto;
    min-width: 0;
  }
}

/* La durée dans les cartes de choix du parcours */
.visite-choix-duree {
  font-weight: 400;
  font-size: 12px;
  color: var(--texte-2);
}

/* Petits écrans : le panneau devient une bande en bas, repliable */
@media (max-width: 720px) {
  .visite-panneau { width: calc(100vw - 16px); }
  .visite-panneau[data-coin] { left: 8px; right: 8px; bottom: 8px; top: auto; }
  .visite-missions { max-height: 96px; }
}