/* =====================================================================
   FretShare · back-office · MISE EN PAGE
   N'utilise que les variables de theme.css (couleurs, polices, rayons, ombres, espacements) :
   aucune couleur ni police en dur ici. Mobile d'abord ; tablette et ordinateur par paliers.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  line-height: var(--interligne);
  font-weight: var(--graisse-normale);
  font-variant-numeric: lining-nums;            /* chiffres alignés (Raleway dessine par défaut des chiffres elzéviriens) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--police-titres); line-height: var(--interligne-serre); margin: 0 0 var(--espace-3); }
h1 { font-size: var(--taille-h1); font-weight: var(--graisse-forte); }
h2 { font-size: var(--taille-h2); font-weight: var(--graisse-forte); margin-top: var(--espace-5); }
h3 { font-size: var(--taille-h3); font-weight: var(--graisse-forte); margin-top: var(--espace-4); }
section > h2:first-child, .carte > h2:first-child { margin-top: 0; }
p { margin: 0 0 var(--espace-3); }

a { color: var(--couleur-lien); text-underline-offset: 0.15em; }
a:hover { color: var(--couleur-lien-survol); }

/* Focus toujours visible (clavier) */
:focus-visible {
  outline: var(--epaisseur-focus) solid var(--couleur-focus);
  outline-offset: var(--decalage-focus);
  border-radius: var(--rayon-petit);
}

code, pre { font-family: var(--police-code); font-size: var(--taille-petite); }
pre.code { white-space: pre-wrap; word-break: break-word; background: var(--couleur-surface-2); padding: var(--espace-3); border-radius: var(--rayon); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: var(--espace-2); top: calc(-1 * var(--espace-7));
  background: var(--couleur-surface); color: var(--couleur-lien);
  padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon); z-index: 100;
}
.lien-evitement:focus { top: var(--espace-2); }

/* Éléments utiles seulement avec JavaScript (affichés par theme.js qui ajoute la classe « js ») */
.js-seulement { display: none !important; }
.js .js-seulement { display: revert !important; }
.js .filtre-direct.js-seulement { display: block !important; }

/* ---------------------------------------------------------------------
   En-tête et menu
   --------------------------------------------------------------------- */
.entete { background: var(--couleur-entete); color: var(--couleur-sur-entete); }
.entete__haut {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espace-2) var(--espace-4);
  max-width: var(--largeur-max); margin: 0 auto; padding: var(--espace-3) var(--marge-page);
}
.marque { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--espace-2); color: inherit; text-decoration: none; }
.marque:hover { color: inherit; }
.marque__logo { height: var(--hauteur-logo, 2rem); width: auto; align-self: center; filter: var(--filtre-logo, none); }
.marque__nom { font-family: var(--police-titres); font-weight: var(--graisse-forte); font-size: var(--taille-h2); }
.marque__sous-titre { color: var(--couleur-sur-entete-discret); font-size: var(--taille-petite); }
.entete .marque__sous-titre { color: var(--couleur-sur-entete-discret); }

.compte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); font-size: var(--taille-petite); }
.compte a, .compte .bouton-lien { color: var(--couleur-sur-entete); }
.compte__role { color: var(--couleur-sur-entete-discret); }
.compte__deconnexion { margin: 0; display: inline; }

.bouton-lien {
  background: none; border: 0; padding: var(--espace-1) 0; font: inherit; color: var(--couleur-lien);
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; min-height: var(--taille-cible);
}

.menu { background: var(--couleur-menu, transparent); border-top: var(--bordure) solid var(--couleur-menu, var(--couleur-entete-actif)); }
.menu ul {
  list-style: none; margin: 0 auto; padding: 0 var(--marge-page); max-width: var(--largeur-max);
  display: flex; gap: var(--espace-1); overflow-x: auto; scrollbar-width: thin;
  position: relative;            /* contient les textes masqués (accessibilité) dans la zone de défilement */
}
.menu a {
  display: inline-flex; align-items: center; gap: var(--espace-2); white-space: nowrap;
  min-height: var(--taille-cible); padding: var(--espace-2) var(--espace-3);
  color: var(--couleur-sur-menu, var(--couleur-sur-entete)); text-decoration: none; border-bottom: var(--epaisseur-focus) solid transparent;
}
.menu a:hover { background: var(--couleur-menu-actif, var(--couleur-entete-actif)); color: var(--couleur-sur-menu, var(--couleur-sur-entete)); }
.menu a[aria-current="page"] { border-bottom-color: var(--couleur-menu-souligne, var(--couleur-accent)); background: var(--couleur-menu-actif, var(--couleur-entete-actif)); font-weight: var(--graisse-moyenne); }
.menu a:focus-visible { outline-offset: var(--decalage-repere); }

.pastille {
  display: inline-block; min-width: 1.5em; padding: 0 var(--espace-1); border-radius: var(--rayon-pastille);
  background: var(--couleur-pastille); color: var(--couleur-sur-pastille);
  font-size: var(--taille-mini); font-weight: var(--graisse-forte); text-align: center; line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Page
   --------------------------------------------------------------------- */
.page { flex: 1; width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: var(--espace-5) var(--marge-page) var(--espace-7); }
.page:focus { outline: none; }
.pied { color: var(--couleur-texte-discret); font-size: var(--taille-mini); text-align: center; padding: var(--espace-4) var(--marge-page); }
.introduction { color: var(--couleur-texte-secondaire); max-width: 60rem; }
.fil { font-size: var(--taille-petite); }
.discret { color: var(--couleur-texte-discret); font-size: var(--taille-petite); }
.vide { color: var(--couleur-texte-discret); font-style: italic; }
.aide { color: var(--couleur-texte-discret); font-size: var(--taille-petite); margin: var(--espace-1) 0 0; }
.texte-long { min-width: 14rem; max-width: 28rem; overflow-wrap: break-word; }
.sans-coupure { white-space: nowrap; }
.liste-simple { padding-left: var(--espace-5); }

.carte {
  background: var(--couleur-surface); border: var(--bordure) solid var(--couleur-bordure);
  border-radius: var(--rayon-grand); box-shadow: var(--ombre);
  padding: var(--espace-4); margin: 0 0 var(--espace-4);
}
.carte--action { border-color: var(--couleur-bordure-forte); }
.carte > details > summary, details > summary { cursor: pointer; color: var(--couleur-lien); padding: var(--espace-2) 0; min-height: var(--taille-cible); }

.page > section, .page > .carte, .page > .grille-2 { margin-bottom: var(--espace-5); }
.grille-2 { display: grid; grid-template-columns: 1fr; gap: var(--espace-4); }
.grille-2 > .carte { margin: 0; }

/* Connexion */
.page-connexion .page { display: flex; align-items: flex-start; justify-content: center; }
.carte--connexion { width: 100%; max-width: var(--largeur-connexion); margin-top: var(--espace-6); }
.marque--connexion { display: flex; flex-direction: column; color: var(--couleur-texte); margin-bottom: var(--espace-4); }
.marque--connexion .marque__sous-titre { color: var(--couleur-texte-discret); }

/* Erreurs et secrets */
.carte--erreur { max-width: 40rem; }
.code-erreur { color: var(--couleur-texte-discret); font-size: var(--taille-petite); }
.texte-erreur { font-size: var(--taille-h3); }
.secret code { display: inline-block; font-size: var(--taille-h3); padding: var(--espace-2) var(--espace-3); background: var(--couleur-surface-2); border: var(--bordure) solid var(--couleur-bordure-forte); border-radius: var(--rayon); user-select: all; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */
.messages { margin-bottom: var(--espace-4); }
.message {
  border: var(--bordure) solid; border-left-width: var(--espace-1); border-radius: var(--rayon);
  padding: var(--espace-3) var(--espace-4); margin: 0 0 var(--espace-2);
}
.message ul { margin: var(--espace-2) 0; padding-left: var(--espace-5); }
.message__type { font-weight: var(--graisse-forte); }
.message--succes { background: var(--couleur-succes-fond); border-color: var(--couleur-succes); color: var(--couleur-texte); }
.message--erreur { background: var(--couleur-erreur-fond); border-color: var(--couleur-erreur); color: var(--couleur-texte); }
.message--attention { background: var(--couleur-attention-fond); border-color: var(--couleur-attention); color: var(--couleur-texte); }
.message--info { background: var(--couleur-info-fond); border-color: var(--couleur-info); color: var(--couleur-texte); }
.message--succes .message__type { color: var(--couleur-succes); }
.message--erreur .message__type { color: var(--couleur-erreur); }
.message--attention .message__type { color: var(--couleur-attention); }
.message--info .message__type { color: var(--couleur-info); }

/* ---------------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: var(--espace-3); max-width: 48rem; }
.formulaire--ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espace-3); }
.formulaire--ligne > .actions { align-self: flex-end; }
.formulaire--ligne > .champ { flex: 1 1 12rem; }
.formulaire--compact { gap: var(--espace-2); align-items: center; }
.formulaire--compact > .champ { flex: 0 1 auto; }
.formulaire--secondaire { margin-top: var(--espace-5); padding-top: var(--espace-4); border-top: var(--bordure) solid var(--couleur-bordure); }
form.en-ligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); margin: 0; }

.champ { display: flex; flex-direction: column; gap: var(--espace-1); min-width: 0; }
.champ label { font-weight: var(--graisse-moyenne); }
.champ--case { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.champ--case .aide, .champ--case .erreur-champ { flex-basis: 100%; }
.champ--mini { display: inline-flex; align-items: center; gap: var(--espace-1); font-size: var(--taille-petite); }
.obligatoire { color: var(--couleur-erreur); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  font: inherit; color: var(--couleur-texte); background: var(--couleur-surface);
  border: var(--bordure) solid var(--couleur-bordure-forte); border-radius: var(--rayon);
  padding: var(--espace-2) var(--espace-3); min-height: var(--taille-cible); max-width: 100%;
}
textarea { min-height: calc(var(--taille-cible) * 1.6); resize: vertical; }
input[type="file"] { font: inherit; padding: var(--espace-2) 0; max-width: 100%; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--couleur-accent); margin: 0; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--couleur-erreur); border-width: var(--bordure-forte); }
.erreur-champ { color: var(--couleur-erreur); font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); margin: 0; }
.valeur-fixe { margin: 0; font-weight: var(--graisse-moyenne); }

fieldset { border: var(--bordure) solid var(--couleur-bordure); }
legend { font-weight: var(--graisse-forte); font-size: var(--taille-h3); padding: 0 var(--espace-2); }
.groupe-parametres { display: grid; grid-template-columns: 1fr; gap: var(--espace-4); }
.parametre input { max-width: var(--largeur-champ); }

.actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; margin: 0; }
.actions--collantes { position: sticky; bottom: 0; background: var(--couleur-fond); padding: var(--espace-3) 0; border-top: var(--bordure) solid var(--couleur-bordure); }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--taille-cible); padding: var(--espace-2) var(--espace-4);
  font: inherit; font-weight: var(--graisse-moyenne); text-decoration: none; cursor: pointer;
  color: var(--couleur-texte); background: var(--couleur-surface);
  border: var(--bordure) solid var(--couleur-bordure-forte); border-radius: var(--rayon-bouton, var(--rayon));
  transition: background-color var(--duree-transition);
}
.bouton:hover { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.bouton--principal { background: var(--couleur-accent); border-color: var(--couleur-accent); color: var(--couleur-sur-accent); }
.bouton--principal:hover { background: var(--couleur-accent-survol); border-color: var(--couleur-accent-survol); color: var(--couleur-sur-accent); }
.bouton--danger { background: var(--couleur-surface); border-color: var(--couleur-danger); color: var(--couleur-danger); }
.bouton--danger:hover { background: var(--couleur-danger); color: var(--couleur-sur-danger); }
.bouton--discret { border-color: transparent; background: transparent; color: var(--couleur-lien); }
.bouton--petit { min-height: calc(var(--taille-cible) * 0.8); padding: var(--espace-1) var(--espace-3); font-size: var(--taille-petite); }
.bouton[disabled] { opacity: 0.6; cursor: wait; }
td.boutons { white-space: nowrap; }
td.boutons .bouton + .bouton { margin-left: var(--espace-1); }

/* Filtres (formulaires GET au-dessus des listes) */
.filtres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-3);
  background: var(--couleur-surface); border: var(--bordure) solid var(--couleur-bordure); border-radius: var(--rayon-grand);
  padding: var(--espace-3) var(--espace-4); margin-bottom: var(--espace-3);
}
.filtres .champ { flex: 0 1 auto; }
.filtre-direct { max-width: var(--largeur-champ); margin-bottom: var(--espace-3); }

.onglets { display: flex; flex-wrap: wrap; gap: var(--espace-1); margin-bottom: var(--espace-3); border-bottom: var(--bordure) solid var(--couleur-bordure); }
.onglets a {
  display: inline-flex; gap: var(--espace-2); align-items: center; min-height: var(--taille-cible);
  padding: var(--espace-2) var(--espace-3); text-decoration: none; color: var(--couleur-texte-secondaire);
  border-bottom: var(--epaisseur-focus) solid transparent;
}
.onglets a[aria-current="page"] { color: var(--couleur-texte); border-bottom-color: var(--couleur-accent); font-weight: var(--graisse-moyenne); }
.compteur { font-size: var(--taille-mini); background: var(--couleur-surface-3); color: var(--couleur-texte); border-radius: var(--rayon-pastille); padding: 0 var(--espace-2); }

/* Étapes de l'import */
.etapes { list-style: none; padding: 0; margin: 0 0 var(--espace-4); display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); }
.etape { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--couleur-texte-discret); }
.etape__numero {
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: var(--rayon-pastille); border: var(--bordure-forte) solid var(--couleur-bordure-forte); font-weight: var(--graisse-forte);
}
.etape--courante { color: var(--couleur-texte); font-weight: var(--graisse-moyenne); }
.etape--courante .etape__numero { background: var(--couleur-accent); border-color: var(--couleur-accent); color: var(--couleur-sur-accent); }
.etape--faite .etape__numero { border-color: var(--couleur-succes); color: var(--couleur-succes); }

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */
.defilement { overflow-x: auto; margin-bottom: var(--espace-3); border-radius: var(--rayon-grand); position: relative; }
.tableau {
  width: 100%; border-collapse: collapse; background: var(--couleur-surface);
  border: var(--bordure) solid var(--couleur-bordure); font-size: var(--taille-petite);
}
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: var(--espace-2) var(--espace-3); border-bottom: var(--bordure) solid var(--couleur-bordure); }
.tableau thead th { background: var(--couleur-surface-2); font-weight: var(--graisse-forte); vertical-align: bottom; }
.tableau tbody th { font-weight: var(--graisse-moyenne); }
.tableau tbody tr:hover { background: var(--couleur-ligne-survol); }
.tableau--compact th, .tableau--compact td { padding: var(--espace-1) var(--espace-2); }
.nombre, .tableau .nombre { text-align: right; font-family: var(--police-chiffres); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ligne--annulee td, .ligne--annulee th { color: var(--couleur-texte-discret); }
.ligne--annulee td:first-child { text-decoration: line-through; }
.details-journal { font-size: var(--taille-mini); color: var(--couleur-texte-secondaire); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin: var(--espace-3) 0; }
.pagination a, .pagination .inactif { min-height: var(--taille-cible); display: inline-flex; align-items: center; }
.pagination .inactif { color: var(--couleur-texte-discret); }

/* Fiches (listes de définitions) */
.fiche { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--espace-1) var(--espace-4); margin: 0 0 var(--espace-3); }
.fiche dt { color: var(--couleur-texte-discret); }
.fiche dd { margin: 0; }

/* États (étiquettes) : libellé toujours écrit, la couleur ne fait que le souligner */
.etat {
  display: inline-block; font-size: var(--taille-mini); font-weight: var(--graisse-moyenne); white-space: nowrap;
  padding: 0 var(--espace-2); border-radius: var(--rayon-pastille); border: var(--bordure) solid;
  background: var(--couleur-neutre-fond); color: var(--couleur-neutre); border-color: var(--couleur-neutre);
}
.etat--en_vigueur, .etat--applique, .etat--active { background: var(--couleur-succes-fond); color: var(--couleur-succes); border-color: var(--couleur-succes); }
.etat--programmee, .etat--a_venir { background: var(--couleur-info-fond); color: var(--couleur-info); border-color: var(--couleur-info); }
.etat--brouillon, .etat--a_valider { background: var(--couleur-attention-fond); color: var(--couleur-attention); border-color: var(--couleur-attention); }
.etat--rejetee, .etat--refuse, .etat--revoquee { background: var(--couleur-erreur-fond); color: var(--couleur-erreur); border-color: var(--couleur-erreur); }

/* Niveaux de confiance : pictogramme + libellé + couleur */
.confiance { display: inline-flex; align-items: center; gap: var(--espace-1); white-space: nowrap; }
.confiance > span[aria-hidden] { font-size: var(--taille-petite); }
.confiance--vert > span[aria-hidden] { color: var(--couleur-confiance-vert); }
.confiance--orange > span[aria-hidden] { color: var(--couleur-confiance-orange); }
.confiance--rouge > span[aria-hidden] { color: var(--couleur-confiance-rouge); }

/* ---------------------------------------------------------------------
   Tableau de bord
   --------------------------------------------------------------------- */
.alertes { margin-bottom: var(--espace-4); }
.tuiles { list-style: none; padding: 0; margin: 0 0 var(--espace-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--espace-3); }
.tuile {
  background: var(--couleur-surface); border: var(--bordure) solid var(--couleur-bordure);
  border-radius: var(--rayon-grand); padding: var(--espace-3) var(--espace-4); box-shadow: var(--ombre); margin: 0;
}
.tuile--a-traiter { border-color: var(--couleur-attention); border-width: var(--bordure-forte); }
.tuile__libelle { color: var(--couleur-texte-secondaire); font-size: var(--taille-petite); margin: 0; }
.tuile__valeur { font-size: var(--taille-tuile); font-weight: var(--graisse-forte); font-variant-numeric: lining-nums tabular-nums; margin: var(--espace-1) 0; line-height: var(--interligne-serre); }
.tuile__detail { color: var(--couleur-texte-discret); font-size: var(--taille-mini); margin: 0; }
.tuiles--compactes .tuile__valeur { font-size: var(--taille-h2); }

.repartition { margin: 0; }
.repartition figcaption { margin-bottom: var(--espace-2); }
.barre-empilee { display: flex; gap: var(--espace-separateur); height: var(--hauteur-barre-empilee); margin-bottom: var(--espace-2); }
.barre-empilee__segment { display: block; height: 100%; min-width: var(--espace-separateur); }
.barre-empilee__segment:first-child { border-radius: var(--rayon-petit) 0 0 var(--rayon-petit); }
.barre-empilee__segment:last-child { border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; }
.barre-empilee__segment:only-child { border-radius: var(--rayon-petit); }
.barre-empilee__segment--vert { background: var(--couleur-confiance-vert); }
.barre-empilee__segment--orange { background: var(--couleur-confiance-orange); }
.barre-empilee__segment--rouge { background: var(--couleur-confiance-rouge); }
.legende { list-style: none; padding: 0; margin: 0 0 var(--espace-2); display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); font-size: var(--taille-petite); }

.histogramme { margin: 0 0 var(--espace-3); }
.histogramme__barres {
  display: flex; align-items: flex-end; gap: var(--espace-separateur); height: var(--hauteur-histogramme);
  border-bottom: var(--bordure) solid var(--couleur-bordure-forte);
  background-image: linear-gradient(to top, var(--couleur-grille-graphique) var(--bordure), transparent var(--bordure));
  background-size: 100% 25%;
}
.histogramme__colonne { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.histogramme__colonne:hover { background: var(--couleur-ligne-survol); }
.histogramme__barre { display: block; width: 100%; background: var(--couleur-serie-1); border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; min-height: 0; }
.histogramme__axe { display: flex; justify-content: space-between; color: var(--couleur-texte-discret); font-size: var(--taille-mini); margin-top: var(--espace-1); }

/* ---------------------------------------------------------------------
   Grilles tarifaires
   --------------------------------------------------------------------- */
.resume { list-style: none; padding: 0; margin: 0 0 var(--espace-3); display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-5); }
.resume--erreur strong { color: var(--couleur-erreur); }
.resume--attention strong { color: var(--couleur-attention); }
.anomalies { margin-bottom: var(--espace-2); }
.anomalies ul { margin: var(--espace-2) 0; padding-left: var(--espace-5); max-height: 20rem; overflow-y: auto; font-size: var(--taille-petite); }
.carte .anomalies--erreur > summary { color: var(--couleur-erreur); font-weight: var(--graisse-forte); }
.carte .anomalies--a_confirmer > summary { color: var(--couleur-attention); font-weight: var(--graisse-forte); }
.apercu { margin-top: var(--espace-4); }
.apercu-case { margin: 0; font-size: var(--taille-petite); color: var(--couleur-texte-secondaire); }

.legende-grille { font-size: var(--taille-petite); color: var(--couleur-texte-secondaire); display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); }
.legende-grille__item { display: inline-flex; align-items: center; gap: var(--espace-1); }
.echantillon { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: var(--rayon-petit); border: var(--bordure) solid var(--couleur-bordure-forte); }
.echantillon--anomalie { background: var(--couleur-case-anomalie-fond); outline: var(--bordure-forte) dashed var(--couleur-case-anomalie-bord); outline-offset: var(--decalage-repere); }
.echantillon--anomalie-erreur { background: var(--couleur-case-erreur-fond); outline: var(--bordure-forte) solid var(--couleur-case-erreur-bord); outline-offset: var(--decalage-repere); }
.echantillon--modifiee { background: var(--couleur-case-modifiee-fond); box-shadow: inset 0 calc(-1 * var(--epaisseur-repere)) 0 var(--couleur-case-modifiee-bord); }
.echantillon--vide { background: var(--couleur-case-vide-fond); }

.grille-tarifaire {
  overflow: auto; max-height: var(--hauteur-grille); border: var(--bordure) solid var(--couleur-bordure);
  border-radius: var(--rayon-grand); background: var(--couleur-surface); margin-bottom: var(--espace-4);
  overscroll-behavior: contain; position: relative;
}
.grille { border-collapse: separate; border-spacing: 0; font-size: var(--taille-grille); font-variant-numeric: lining-nums tabular-nums; }
.grille th, .grille td {
  border-right: var(--bordure) solid var(--couleur-bordure); border-bottom: var(--bordure) solid var(--couleur-bordure);
  padding: var(--espace-1) var(--espace-2); white-space: nowrap;
}
.grille td { text-align: right; min-width: var(--largeur-case); background: var(--couleur-surface); }
.grille thead th {
  position: sticky; top: 0; z-index: 2; background: var(--couleur-surface-2); font-weight: var(--graisse-forte);
  text-align: right; box-shadow: inset 0 calc(-1 * var(--bordure)) 0 var(--couleur-bordure-forte);
}
.grille tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--couleur-surface-2); text-align: left;
  font-weight: var(--graisse-moyenne); min-width: var(--largeur-colonne-arrivee); max-width: var(--largeur-colonne-arrivee);
  overflow: hidden; text-overflow: ellipsis; box-shadow: inset calc(-1 * var(--bordure)) 0 0 var(--couleur-bordure-forte);
}
.grille thead th.grille__coin { left: 0; z-index: 3; text-align: left; }
.grille__nom { font-weight: var(--graisse-normale); color: var(--couleur-texte-secondaire); }
.grille tbody tr:hover td, .grille tbody tr:hover th { background: var(--couleur-ligne-survol); }
.grille td.vide { background: var(--couleur-case-vide-fond); }
.grille td.anomalie, .grille th.anomalie {
  background: var(--couleur-case-anomalie-fond); outline: var(--bordure-forte) dashed var(--couleur-case-anomalie-bord); outline-offset: var(--decalage-repere);
}
.grille td.anomalie-erreur {
  background: var(--couleur-case-erreur-fond); outline: var(--bordure-forte) solid var(--couleur-case-erreur-bord); outline-offset: var(--decalage-repere);
  font-weight: var(--graisse-forte);
}
.grille td.modifiee { background: var(--couleur-case-modifiee-fond); box-shadow: inset 0 calc(-1 * var(--epaisseur-repere)) 0 var(--couleur-case-modifiee-bord); font-weight: var(--graisse-forte); }
.grille td.ajoutee { background: var(--couleur-case-ajoutee-fond); font-style: italic; }
.grille td.selectionnee { outline: var(--epaisseur-focus) solid var(--couleur-case-selection); outline-offset: var(--decalage-repere); }
.js .grille--cliquable td { cursor: pointer; }

/* ---------------------------------------------------------------------
   Prix négociés
   --------------------------------------------------------------------- */
.lot { margin-top: var(--espace-3); display: flex; flex-direction: column; gap: var(--espace-3); max-width: 48rem; }

/* ---------------------------------------------------------------------
   Tablette et ordinateur
   --------------------------------------------------------------------- */
@media (min-width: 48rem) {
  :root { --marge-page: var(--espace-5); }
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupe-parametres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  :root { --marge-page: var(--espace-6); }
  .groupe-parametres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Petits écrans : la grille garde ses en-têtes figés, colonne des arrivées plus étroite */
@media (max-width: 40rem) {
  .grille tbody th { min-width: 4.5rem; max-width: 4.5rem; }
  .grille__nom { display: none; }
  .fiche { grid-template-columns: 1fr; }
  .fiche dt { margin-top: var(--espace-2); }
}

/* Moins d'animations si demandé */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Contraste forcé (Windows) : les cases signalées gardent un repère visible */
@media (forced-colors: active) {
  .grille td.anomalie, .grille td.anomalie-erreur, .grille td.modifiee { outline: var(--bordure-forte) solid CanvasText; }
  .barre-empilee__segment, .histogramme__barre { forced-color-adjust: none; }
}

/* Impression : contenu seul */
@media print {
  .entete, .pied, .filtres, form .actions, .js-seulement, .lien-evitement { display: none !important; }
  .grille-tarifaire { max-height: none; overflow: visible; }
  .carte { box-shadow: none; }
}