@layer jetons, base, composants, utilitaires;





@layer jetons {
  :root {
    

    
    --fond: #eef1ee; 
    --surface: #ffffff; 
    --surface-elevee: #ffffff;
    --fond-doux: #e2e6e3; 

    
    --bordure: #6c7771;
    --bordure-discrete: #b9c2bd; 

    
    --texte: #1a232b; 
    --texte-doux: #56626b; 
    --texte-desactive: #68736d;
    --texte-inverse: #ffffff;

    
    --accent: #1a232b; 
    --accent-survol: #33404a; 
    --accent-actif: #26313a; 
    --accent-discret: #fbefc7;

    
    --action: #f5b400; 
    --action-survol: #ffc21a; 
    --action-actif: #d99e00; 
    --action-texte: #1a232b; 
    
    --action-entree: #1a232b; 
    --action-entree-texte: #ffffff; 
    --action-entree-survol: #33404a; 

    
    --ok: #14663d; 
    --ok-fond: #dcf0e3; 
    --ok-plein: #2a8a55; 
    --bientot: #8a4300; 
    --bientot-fond: #fdebd1; 
    --bientot-plein: #b86a0c; 
    --retard: #a1221a; 
    --retard-fond: #fbe0dc; 
    --retard-plein: #c93a2f; 

    
    --succes: #14663d; 
    --succes-fond: #dcf0e3; 
    --avertissement: #8a4300; 
    --avertissement-fond: #fdebd1; 
    --erreur: #a1221a; 
    --erreur-fond: #fbe0dc; 
    --info: #1f3d63;
    --info-fond: #e1e9f2;

    
    --tambour: #1a232b; 
    --tambour-texte: #ffffff; 
    --tambour-decimale: #f5b400; 
    --tambour-decimale-texte: #1a232b; 
    
    --tambours-bord: #1a232b;

    
    --police: "Archivo", "Archivo repli", var(--police-systeme);
    --police-systeme: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --police-chiffres: var(--police);

    --corps: 1rem;
    --corps-reduit: 0.875rem;
    --corps-menu: 0.8125rem;
    --titre-1: 1.75rem;
    --titre-2: 1.3125rem;
    --titre-3: 1.0625rem;
    --titre-4: 0.9375rem;

    --graisse-normale: 400;
    
    --graisse-moyenne: 550;
    --graisse-forte: 650;

    
    --graisse-titre: 750;
    --graisse-marque: 800;
    --graisse-chiffre: 800;
    --largeur-titre: 112%;
    --largeur-titre-3: 106%;
    --largeur-marque: 118%;

    --interligne: 1.55;
    --interligne-titre: 1.2;

    
    --pas: 8px;
    --pas-0: 2px;
    --pas-1: 4px;
    --pas-2: 8px;
    --pas-3: 12px;
    --pas-4: 16px;
    --pas-5: 24px;
    --pas-6: 32px;
    --pas-7: 48px;

    
    --rayon-petit: 6px;
    --rayon: 10px;
    --rayon-grand: 16px;
    --rayon-plein: 999px;

    
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgb(16 21 28 / 0.06), 0 1px 3px rgb(16 21 28 / 0.08);
    --elevation-2: 0 4px 12px rgb(16 21 28 / 0.10), 0 2px 4px rgb(16 21 28 / 0.06);

    
    --cible: 44px;
    --nav-hauteur: 60px;
    --largeur-contenu: 1180px;
    --longueur-ligne: 70ch;
    --epaisseur-focus: 3px;
    
    --hauteur-progression: 6px;

    
    --duree-courte: 120ms;
    --duree-moyenne: 180ms;
    --courbe: cubic-bezier(0.2, 0, 0.2, 1);

    
    --rotation-attente: 900ms;

    
    --rupture-moyenne: 600px;
    --rupture-large: 1024px;
  }

  
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
      
      --fond: #1a232b; 
      --surface: #26313a; 
      --surface-elevee: #2d3944;
      --fond-doux: #33404a; 

      --bordure: #87939b;
      --bordure-discrete: #4a5761;

      --texte: #e9edea; 
      --texte-doux: #a8b3b9; 
      --texte-desactive: #8b979e;
      --texte-inverse: #1a232b; 

      
      --accent: #f5b400; 
      --accent-survol: #ffc93d;
      --accent-actif: #ffd666;
      --accent-discret: #3a3521;

      --action: #f5b400; 
      --action-survol: #ffc93d;
      --action-actif: #d99e00; 
      --action-texte: #1a232b; 
      --action-entree: #e9edea; 
      --action-entree-texte: #1a232b;
      --action-entree-survol: #ffffff;

      --ok: #6fd39a;
      --ok-fond: #143626;
      --ok-plein: #4fbf80;
      --bientot: #f2b35e;
      --bientot-fond: #3a2a12;
      --bientot-plein: #e59a3a;
      --retard: #ff9a8f;
      --retard-fond: #3d1c1a;
      --retard-plein: #f0685c;

      --succes: #8ce3b0;
      --succes-fond: #12301f;
      --avertissement: #f5cc72;
      --avertissement-fond: #33270d;
      --erreur: #ffa9a0;
      --erreur-fond: #3a1a18;
      --info: #a9c9f0;
      --info-fond: #1a2a3d;

      
      --tambour: #0e1419;
      --tambour-texte: #ffffff;
      --tambour-decimale: #f5b400;
      --tambour-decimale-texte: #1a232b;
      --tambours-bord: #87939b;

      --elevation-1: 0 1px 2px rgb(0 0 0 / 0.40);
      --elevation-2: 0 6px 18px rgb(0 0 0 / 0.50);
    }
  }

  
  :root[data-theme="sombre"] {
    
    --fond: #1a232b; 
    --surface: #26313a; 
    --surface-elevee: #2d3944;
    --fond-doux: #33404a; 

    --bordure: #87939b;
    --bordure-discrete: #4a5761;

    --texte: #e9edea; 
    --texte-doux: #a8b3b9; 
    --texte-desactive: #8b979e;
    --texte-inverse: #1a232b; 

    
    --accent: #f5b400; 
    --accent-survol: #ffc93d;
    --accent-actif: #ffd666;
    --accent-discret: #3a3521;

    --action: #f5b400; 
    --action-survol: #ffc93d;
    --action-actif: #d99e00; 
    --action-texte: #1a232b; 
    --action-entree: #e9edea; 
    --action-entree-texte: #1a232b;
    --action-entree-survol: #ffffff;

    --ok: #6fd39a;
    --ok-fond: #143626;
    --ok-plein: #4fbf80;
    --bientot: #f2b35e;
    --bientot-fond: #3a2a12;
    --bientot-plein: #e59a3a;
    --retard: #ff9a8f;
    --retard-fond: #3d1c1a;
    --retard-plein: #f0685c;

    --succes: #8ce3b0;
    --succes-fond: #12301f;
    --avertissement: #f5cc72;
    --avertissement-fond: #33270d;
    --erreur: #ffa9a0;
    --erreur-fond: #3a1a18;
    --info: #a9c9f0;
    --info-fond: #1a2a3d;

    
    --tambour: #0e1419;
    --tambour-texte: #ffffff;
    --tambour-decimale: #f5b400;
    --tambour-decimale-texte: #1a232b;
    --tambours-bord: #87939b;

    --elevation-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --elevation-2: 0 6px 18px rgb(0 0 0 / 0.50);
  }

  
  @media print {
    :root,
    :root[data-theme="sombre"],
    :root:not([data-theme="clair"]) {
      --fond: #ffffff;
      --surface: #ffffff;
      --surface-elevee: #ffffff;
      --fond-doux: #ffffff;

      --bordure: #6c7771;
      --bordure-discrete: #b9c2bd;

      --texte: #1a232b;
      --texte-doux: #56626b;
      --texte-desactive: #68736d;
      --texte-inverse: #ffffff;
    }
  }
}



@layer base {
  
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100% 125%;
    
    font-display: swap;
    src: url("../fonts/archivo-latin-variable.4231766befe3.woff2") format("woff2");
  }

  
  @font-face {
    font-family: "Archivo repli";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    ascent-override: 87.8%;
    descent-override: 21%;
    line-gap-override: 0%;
    size-adjust: 97.8%;
  }

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

  
  [hidden] {
    display: none !important;
  }

  html {
    color-scheme: light dark;
  }

  body {
    margin: 0;
    
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--corps);
    line-height: var(--interligne);
    -webkit-font-smoothing: antialiased;
    
    padding-bottom: calc(var(--nav-hauteur) + env(safe-area-inset-bottom, 0px));
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: var(--interligne-titre);
    font-weight: var(--graisse-forte);
    letter-spacing: -0.01em;
    margin: 0 0 var(--pas-3);
    
    overflow-wrap: anywhere;
  }

  
  h1 {
    font-size: var(--titre-1);
  }
  h2 {
    font-size: var(--titre-2);
  }
  h1,
  h2 {
    font-weight: var(--graisse-titre);
    font-stretch: var(--largeur-titre);
    letter-spacing: -0.015em;
  }
  h3 {
    font-size: var(--titre-3);
    font-weight: var(--graisse-titre);
    font-stretch: var(--largeur-titre-3);
  }
  h4 {
    font-size: var(--titre-4);
  }

  p {
    margin: 0 0 var(--pas-3);
    max-width: var(--longueur-ligne);
  }

  a {
    color: var(--accent);
    text-underline-offset: 0.2em;
  }
  a:hover {
    color: var(--accent-survol);
  }

  
  :focus-visible {
    outline: var(--epaisseur-focus) solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--rayon-petit);
  }
}



@layer composants {
  
  .carte-liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .carte,
  .echeance-carte,
  .releve-carte,
  .anomalie-carte {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bordure-discrete);
    border-radius: var(--rayon);
    padding: var(--pas-4);
    box-shadow: var(--elevation-1);
  }

  .carte + .carte {
    margin-top: var(--pas-3);
  }

  .carte:hover {
    border-color: var(--bordure);
    box-shadow: var(--elevation-2);
  }

  
  .carte:focus-within {
    outline: var(--epaisseur-focus) solid var(--accent);
    outline-offset: 2px;
  }

  .carte-titre {
    font-size: var(--titre-3);
    font-weight: var(--graisse-forte);
    margin: 0 0 var(--pas-1);
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  
  .carte-titre a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rayon);
  }

  
  .carte-actions,
  .carte-lien {
    position: relative;
    z-index: 1;
  }

  .carte-meta {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin: 0;
    overflow-wrap: anywhere;
  }

  
  .carte-attributs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2) var(--pas-4);
    margin: var(--pas-3) 0 0;
    padding: 0;
  }

  .carte-attribut {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .carte-etiquette {
    color: var(--texte-doux);
    font-size: var(--corps-menu);
  }

  .carte-valeur {
    font-weight: var(--graisse-moyenne);
    overflow-wrap: anywhere;
  }

  .carte-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
    margin-top: var(--pas-3);
  }

  
  .carte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    margin: var(--pas-3) 0 0;
  }

  
  .carte-signe {
    display: inline-flex;
    align-items: center;
    padding: var(--pas-0) var(--pas-2);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-plein);
    color: var(--texte-doux);
    font-size: var(--corps-menu);
  }

  .carte-signe-neuf {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--graisse-forte);
  }

  
  .fiche {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 var(--pas-5);
  }

  .fiche-etiquette {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
  }

  .fiche-valeur {
    margin: 0 0 var(--pas-3);
    overflow-wrap: anywhere;
    
    max-width: var(--longueur-ligne);
  }

  
  .filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pas-3);
    background: var(--surface);
    border: 1px solid var(--bordure-discrete);
    border-radius: var(--rayon);
    padding: var(--pas-3);
    margin: 0 0 var(--pas-4);
  }

  
  .filtres > p {
    margin: 0;
  }

  .filtres-champ {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    
    overflow: clip;
    overflow-clip-margin: 4px;
  }

  .filtres-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pas-2);
  }

  
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2) var(--pas-3);
    margin-top: var(--pas-5);
  }

  .pagination-position {
    margin: 0 auto 0 0;
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
  }

  .pagination-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-1);
    min-height: var(--cible);
    min-width: var(--cible);
    padding: 0 var(--pas-3);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    text-decoration: none;
  }

  .pagination-lien:hover {
    background: var(--fond-doux);
  }

  
  .priorite {
    font-weight: var(--graisse-forte);
  }
  .priorite-low {
    color: var(--texte-doux);
  }
  .priorite-medium {
    color: var(--ok);
  }
  .priorite-high {
    color: var(--bientot);
  }
  .priorite-critical {
    color: var(--retard);
  }
  .statut-anomalie {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
  }

  
  .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-2);
    min-height: var(--cible);
    min-width: var(--cible);
    padding: 0 var(--pas-4);
    border: 2px solid transparent;
    border-radius: var(--rayon-petit);
    background: var(--action);
    color: var(--action-texte);
    box-shadow: inset 0 -3px 0 var(--action-actif);
    font: inherit;
    font-weight: var(--graisse-forte);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duree-courte) var(--courbe);
  }

  .action:hover {
    background: var(--action-survol);
    color: var(--action-texte);
  }
  .action:active {
    background: var(--action-actif);
  }
  .action[disabled],
  .action[aria-disabled="true"] {
    background: var(--fond-doux);
    color: var(--texte-desactive);
    border-color: var(--bordure);
    box-shadow: none;
    cursor: not-allowed;
  }

  
  .action-entree,
  .action-entree:active {
    background: var(--action-entree);
    color: var(--action-entree-texte);
    box-shadow: none;
  }
  .action-entree:hover {
    background: var(--action-entree-survol);
    color: var(--action-entree-texte);
  }

  .action-secondaire,
  .action-secondaire:active {
    background: var(--surface);
    color: var(--texte);
    border-color: var(--bordure);
    box-shadow: none;
  }
  .action-secondaire:hover {
    background: var(--fond-doux);
    color: var(--texte);
  }

  .action-discrete,
  .action-discrete:active {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    box-shadow: none;
    padding: 0 var(--pas-2);
  }
  .action-discrete:hover {
    background: var(--accent-discret);
    color: var(--accent);
  }

  
  .champ {
    display: block;
    margin-bottom: var(--pas-4);
  }

  .champ-libelle {
    display: block;
    font-weight: var(--graisse-moyenne);
    margin-bottom: var(--pas-1);
  }

  .champ-saisie {
    width: 100%;
    
    max-width: 100%;
    min-width: 0;
    min-height: var(--cible);
    padding: 0 var(--pas-3);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
  }

  .champ-saisie:hover {
    border-color: var(--texte-doux);
  }
  .champ-saisie[aria-invalid="true"] {
    border-color: var(--erreur);
    border-width: 2px;
  }
  .champ-saisie[disabled] {
    background: var(--fond-doux);
    color: var(--texte-desactive);
    cursor: not-allowed;
  }

  .champ-aide {
    display: block;
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin-top: var(--pas-1);
  }

  .champ-erreur {
    display: block;
    color: var(--erreur);
    font-size: var(--corps-reduit);
    font-weight: var(--graisse-moyenne);
    margin-top: var(--pas-1);
  }

  
  .champ-nombre {
    font-variant-numeric: tabular-nums;
    font-family: var(--police-chiffres);
  }

  
  .groupe {
    border: 1px solid var(--bordure-discrete);
    border-radius: var(--rayon);
    padding: var(--pas-4);
    margin: 0 0 var(--pas-4);
  }

  .groupe-legende {
    padding: 0 var(--pas-2);
    font-weight: var(--graisse-forte);
    color: var(--texte-doux);
  }

  
  .resume-erreurs {
    border: 2px solid var(--erreur);
    background: var(--erreur-fond);
    border-radius: var(--rayon);
    padding: var(--pas-4);
    margin-bottom: var(--pas-4);
  }

  .resume-erreurs-titre {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    color: var(--erreur);
    font-weight: var(--graisse-forte);
    margin: 0 0 var(--pas-2);
  }

  .resume-erreurs-liste {
    margin: 0;
    padding-left: var(--pas-5);
    color: var(--texte);
  }

  .resume-erreurs-liste a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
  }

  
  .formulaire {
    background: var(--surface);
    border: 1px solid var(--bordure-discrete);
    border-radius: var(--rayon);
    padding: var(--pas-4);
    max-width: 40rem;
  }

  
  
  .formulaire-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-3);
    margin: var(--pas-5) 0 0;
  }

  
  .contexte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-1) var(--pas-3);
    color: var(--texte-doux);
    margin: 0 0 var(--pas-4);
    max-width: none;
  }

  .contexte a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
    font-weight: var(--graisse-forte);
  }

  
  .compteur-valeur {
    color: var(--texte);
    font-weight: var(--graisse-forte);
    font-variant-numeric: tabular-nums;
    font-family: var(--police-chiffres);
  }

  
  .compteur-bloc {
    container-type: inline-size;
    margin: 0 0 var(--pas-2);
  }

  .tambours {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--tambours-bord);
    border-radius: var(--rayon-petit);
    background: var(--tambour);
    font-size: var(--titre-2);
    font-weight: var(--graisse-chiffre);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
  }

  .tambour {
    min-width: 1.05em;
    padding: 0 0.1em;
    border-radius: 3px;
    background: var(--tambour);
    color: var(--tambour-texte);
    text-align: center;
  }

  .tambour-decimale {
    background: var(--tambour-decimale);
    color: var(--tambour-decimale-texte);
  }

  .tambours-unite {
    align-self: center;
    padding: 0 0.2em;
    color: var(--tambour-texte);
    font-size: var(--corps-reduit);
  }

  
  .compteur-simple {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    font-size: var(--titre-2);
  }

  @container (width < 18em) {
    .tambours {
      display: none;
    }
    .compteur-simple {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  
  .progression {
    display: block;
    width: 100%;
    height: var(--hauteur-progression);
    margin-top: var(--pas-1);
    border-radius: var(--rayon-plein);
    background: var(--fond-doux);
    overflow: hidden;
  }

  .progression-remplissage {
    display: block;
    height: 100%;
    border-radius: inherit;
  }

  .progression-ok .progression-remplissage {
    background: var(--ok-plein);
  }
  .progression-bientot .progression-remplissage {
    background: var(--bientot-plein);
  }
  .progression-retard .progression-remplissage {
    background: var(--retard-plein);
  }

  
  .progression-0 { width: 0%; }
  .progression-5 { width: 5%; }
  .progression-10 { width: 10%; }
  .progression-15 { width: 15%; }
  .progression-20 { width: 20%; }
  .progression-25 { width: 25%; }
  .progression-30 { width: 30%; }
  .progression-35 { width: 35%; }
  .progression-40 { width: 40%; }
  .progression-45 { width: 45%; }
  .progression-50 { width: 50%; }
  .progression-55 { width: 55%; }
  .progression-60 { width: 60%; }
  .progression-65 { width: 65%; }
  .progression-70 { width: 70%; }
  .progression-75 { width: 75%; }
  .progression-80 { width: 80%; }
  .progression-85 { width: 85%; }
  .progression-90 { width: 90%; }
  .progression-95 { width: 95%; }
  .progression-100 { width: 100%; }

  
  .icone {
    flex: none;
    vertical-align: -0.15em;
  }

  
  .marqueur {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-1);
    padding: var(--pas-0) var(--pas-2);
    border-radius: var(--rayon-plein);
    font-size: var(--corps-reduit);
    font-weight: var(--graisse-forte);
    white-space: nowrap;
  }

  .marqueur::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: currentColor;
  }

  .marqueur-ok {
    color: var(--ok);
    background: var(--ok-fond);
  }
  .marqueur-ok::before {
    border-radius: var(--rayon-plein);
  }

  .marqueur-bientot {
    color: var(--bientot);
    background: var(--bientot-fond);
  }
  
  .marqueur-bientot::before {
    transform: rotate(45deg);
  }

  .marqueur-retard {
    color: var(--retard);
    background: var(--retard-fond);
  }
  
  .marqueur-retard::before {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid currentColor;
  }

  .compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: var(--pas-0) var(--pas-2);
    border-radius: var(--rayon-plein);
    
    background: var(--action);
    color: var(--action-texte);
    font-size: var(--corps-menu);
    font-weight: var(--graisse-forte);
  }

  
  .message {
    display: flex;
    gap: var(--pas-3);
    padding: var(--pas-3) var(--pas-4);
    border: 1px solid currentColor;
    border-radius: var(--rayon);
    margin-bottom: var(--pas-4);
  }

  .message-succes {
    color: var(--succes);
    background: var(--succes-fond);
  }
  .message-avertissement {
    color: var(--avertissement);
    background: var(--avertissement-fond);
  }
  .message-erreur {
    color: var(--erreur);
    background: var(--erreur-fond);
  }
  .message-info {
    color: var(--info);
    background: var(--info-fond);
  }

  .message-texte {
    color: var(--texte);
    margin: 0;
  }

  
  .etat-vide {
    text-align: center;
    padding: var(--pas-6) var(--pas-4);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
  }

  .etat-vide-titre {
    font-size: var(--titre-3);
    font-weight: var(--graisse-forte);
    margin: 0 0 var(--pas-2);
  }

  .etat-vide-texte {
    color: var(--texte-doux);
    margin: 0 auto var(--pas-4);
    max-width: var(--longueur-ligne);
  }

  
  .confirmation {
    border: 2px solid var(--avertissement);
    background: var(--avertissement-fond);
    border-radius: var(--rayon);
    padding: var(--pas-4);
    margin-bottom: var(--pas-4);
  }

  .confirmation-titre {
    color: var(--avertissement);
    font-weight: var(--graisse-forte);
    margin: 0 0 var(--pas-2);
  }

  .confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin-top: var(--pas-4);
  }

  
  .htmx-indicator {
    opacity: 0;
    transition: opacity var(--duree-courte) var(--courbe) 300ms;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
  }

  
  .action-attente,
  .action-attente-miroir {
    width: 20px;
    
    flex: none;
  }

  .action-attente {
    display: inline-flex;
    align-items: center;
  }

  .action-attente svg {
    animation: rotation var(--rotation-attente) linear infinite;
  }

  @keyframes rotation {
    to {
      transform: rotate(360deg);
    }
  }

  
  .colonnes {
    display: grid;
    gap: var(--pas-5);
  }

  .colonne-principale,
  .colonne-laterale {
    
    min-width: 0;
  }

  
  .tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--corps-reduit);
  }

  .tableau th,
  .tableau td {
    text-align: left;
    padding: var(--pas-3);
    border-bottom: 1px solid var(--bordure-discrete);
  }

  .tableau th {
    font-weight: var(--graisse-forte);
    color: var(--texte-doux);
    border-bottom: 2px solid var(--bordure);
  }

  
  .tableau-liste,
  .tableau-liste thead,
  .tableau-liste tbody,
  .tableau-liste tr,
  .tableau-liste th,
  .tableau-liste td {
    display: block;
  }

  .tableau-liste thead {
    display: none;
  }

  .tableau-liste tr {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bordure-discrete);
    border-radius: var(--rayon);
    box-shadow: var(--elevation-1);
    padding: var(--pas-4);
    margin-bottom: var(--pas-3);
  }

  .tableau-liste th,
  .tableau-liste td {
    border-bottom: none;
    padding: 0 0 var(--pas-2);
    color: var(--texte);
    font-weight: var(--graisse-normale);
  }

  .tableau-liste th {
    font-weight: var(--graisse-forte);
    font-size: var(--titre-3);
  }

  .etiquette-repliee {
    display: block;
    color: var(--texte-doux);
    font-size: var(--corps-menu);
    font-weight: var(--graisse-normale);
  }

  
  .compte {
    position: relative;
  }

  .compte-resume {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    min-height: var(--cible);
    padding: 0 var(--pas-3);
    border-radius: var(--rayon-petit);
    cursor: pointer;
    list-style: none;
  }

  .compte-resume::-webkit-details-marker {
    display: none;
  }

  .compte-panneau {
    background: var(--surface-elevee);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--elevation-2);
    padding: var(--pas-4);
    
    min-width: min(15rem, calc(100vw - 2 * var(--pas-4)));
    max-width: calc(100vw - 2 * var(--pas-4));
  }

  .compte-identite {
    font-weight: var(--graisse-forte);
    margin: 0;
  }

  .compte-organisation {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin: 0 0 var(--pas-3);
  }

  
  .ecran {
    max-width: 32rem;
    margin: var(--pas-5) auto;
  }

  .ecran-titre {
    margin: 0 0 var(--pas-4);
  }

  .ecran-texte {
    color: var(--texte-doux);
    max-width: var(--longueur-ligne);
    
    overflow-wrap: anywhere;
  }

  .ecran-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin: var(--pas-5) 0 0;
  }

  .ecran-liens {
    list-style: none;
    margin: var(--pas-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2) var(--pas-4);
  }

  .ecran-liens a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
  }

  
  .bascule {
    
    margin: 0 0 var(--pas-3);
  }

  
  .entete .bascule {
    margin: 0 0 0 auto;
  }

  .bascule-titre {
    margin: 0 0 var(--pas-1);
    color: var(--texte-doux);
    font-size: var(--corps-menu);
  }

  .bascule-choix {
    display: flex;
    gap: var(--pas-1);
  }

  .bascule-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-1);
    flex: 1;
    min-width: 0;
    min-height: var(--cible);
    padding: 0 var(--pas-2);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: var(--corps-reduit);
    cursor: pointer;
  }

  .bascule-option:hover {
    background: var(--fond-doux);
  }

  .bascule-option[aria-pressed="true"] {
    background: var(--accent-discret);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--graisse-forte);
  }

  
  .saut-contenu {
    position: absolute;
    left: -9999px;
  }
  .saut-contenu:focus {
    left: var(--pas-2);
    top: var(--pas-2);
    z-index: 10;
    background: var(--surface);
    color: var(--texte);
    padding: var(--pas-2) var(--pas-3);
    border-radius: var(--rayon);
    box-shadow: var(--elevation-2);
  }

  .entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2) var(--pas-4);
    padding: var(--pas-2) var(--pas-4);
    
    background: var(--fond);
    border-bottom: 1px solid var(--bordure-discrete);
  }

  
  .marque {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    min-height: var(--cible);
    color: var(--texte);
    text-decoration: none;
    font-weight: var(--graisse-forte);
  }

  
  .marque-icone {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--rayon-petit);
  }

  .marque-mot {
    font-size: var(--titre-3);
    font-weight: var(--graisse-marque);
    font-stretch: var(--largeur-marque);
    letter-spacing: -0.01em;
  }

  .contenu {
    padding: var(--pas-5) var(--pas-4);
    max-width: var(--largeur-contenu);
    margin: 0 auto;
  }

  .zone-messages {
    margin-bottom: var(--pas-4);
  }

  

  .nav-bureau {
    display: none;
  }

  .nav-liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-2);
    min-height: var(--cible);
    min-width: var(--cible);
    padding: 0 var(--pas-3);
    border-radius: var(--rayon-petit);
    color: var(--texte-doux);
    text-decoration: none;
    font-size: var(--corps-reduit);
    font-weight: var(--graisse-moyenne);
  }

  .nav-lien:hover {
    background: var(--fond-doux);
    color: var(--texte);
  }

  
  .nav-lien[aria-current="page"],
  .compte-resume[aria-current="page"] {
    color: var(--accent);
    font-weight: var(--graisse-forte);
    background: var(--accent-discret);
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  .nav-organisation {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-mobile {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 5;
    background: var(--surface);
    border-top: 1px solid var(--bordure-discrete);
    
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .nav-mobile .nav-liste {
    flex-wrap: nowrap;
    gap: 0;
  }

  .nav-mobile .nav-liste > li {
    
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
  }

  .nav-mobile .nav-lien,
  .nav-mobile .compte-resume {
    flex: 1;
    flex-direction: column;
    gap: var(--pas-0);
    min-height: var(--nav-hauteur);
    padding: var(--pas-1) var(--pas-0);
    font-size: var(--corps-menu);
    border-radius: 0;
    
    min-width: 0;
    text-align: center;
    overflow: hidden;
  }

  .nav-mobile .nav-lien[aria-current="page"],
  .nav-mobile .compte-resume[aria-current="page"] {
    background: transparent;
    box-shadow: inset 0 3px 0 var(--accent);
  }

  
  .compte {
    position: relative;
  }

  .nav-mobile .compte {
    flex: 1;
    display: flex;
  }

  .nav-bureau .compte-panneau,
  .nav-mobile .compte-panneau {
    position: absolute;
    right: 0;
    z-index: 6;
  }

  .nav-bureau .compte-panneau {
    top: calc(100% + var(--pas-1));
  }

  .nav-mobile .compte-panneau {
    bottom: 100%;
  }

  .compte-liens {
    list-style: none;
    margin: 0 0 var(--pas-3);
    padding: 0;
  }

  .compte-liens a {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    min-height: var(--cible);
  }

  
  .fil-retour {
    margin: 0 0 var(--pas-2);
  }

  .fil-lien {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-1);
    min-height: var(--cible);
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    text-decoration: none;
  }

  .fil-lien:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  
  .resume {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pas-2);
    list-style: none;
    margin: 0 0 var(--pas-5);
    padding: 0;
  }

  
  .resume-item {
    border: 1px solid var(--bordure-discrete);
    border-left: var(--pas-1) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    
    min-width: 0;
  }

  
  .resume-lien,
  .resume-inerte {
    display: flex;
    flex-direction: column;
    gap: var(--pas-0);
    min-height: var(--cible);
    padding: var(--pas-3);
    color: inherit;
    text-decoration: none;
  }

  .resume-lien:hover {
    background: var(--fond-doux);
  }

  .resume-nombre {
    font-size: var(--titre-1);
    font-weight: var(--graisse-chiffre);
    font-stretch: 110%;
    line-height: var(--interligne-titre);
    font-variant-numeric: tabular-nums;
    font-family: var(--police-chiffres);
  }

  .resume-libelle {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
  }

  
  .resume-retard.resume-charge {
    border-left-color: var(--retard-plein);
  }
  .resume-bientot.resume-charge {
    border-left-color: var(--bientot-plein);
  }
  
  .resume-compteurs,
  .resume-anomalies {
    border-left-color: var(--bordure);
  }

  

  .bloc {
    margin-bottom: var(--pas-6);
  }

  .bloc-titre {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    font-size: var(--titre-2);
    margin-bottom: var(--pas-3);
  }

  
  .bloc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    margin-bottom: var(--pas-3);
  }

  
  .bloc-urgent {
    border-left: var(--pas-1) solid var(--retard);
    border-radius: var(--rayon);
    background: var(--retard-fond);
    padding: var(--pas-4);
  }

  .bloc-urgent .bloc-titre {
    font-size: var(--titre-1);
    color: var(--retard);
  }

  

  .echeance-liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .echeance-carte {
    display: grid;
    
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pas-1) var(--pas-3);
    padding: var(--pas-3);
  }

  .echeance-carte + .echeance-carte {
    margin-top: var(--pas-2);
  }

  .echeance-machine {
    grid-column: 1;
    font-weight: var(--graisse-forte);
  }

  .echeance-plan {
    grid-column: 1;
    color: var(--texte-doux);
  }

  
  .echeance-mesure {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-1) var(--pas-2);
    font-size: var(--corps-reduit);
    color: var(--texte-doux);
  }

  .echeance-ecart {
    font-weight: var(--graisse-forte);
    font-variant-numeric: tabular-nums;
    font-family: var(--police-chiffres);
    color: var(--texte);
  }

  .echeance-ecart-depasse {
    color: var(--retard);
  }

  .echeance-etat {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .echeance-action {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }

  
  .echeance-carte .progression {
    grid-column: 1 / -1;
  }

  

  .releve-liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .releve-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2) var(--pas-3);
    padding: var(--pas-3);
  }

  .releve-carte + .releve-carte {
    margin-top: var(--pas-2);
  }

  .releve-nom {
    font-weight: var(--graisse-forte);
    min-height: var(--cible);
    display: inline-flex;
    align-items: center;
  }

  .releve-date {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin-right: auto;
  }

  

  .anomalie-liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .anomalie-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2) var(--pas-3);
    padding: var(--pas-3);
  }

  .anomalie-carte + .anomalie-carte {
    margin-top: var(--pas-2);
  }

  .anomalie-titre {
    font-weight: var(--graisse-forte);
    min-height: var(--cible);
    display: inline-flex;
    align-items: center;
  }

  .anomalie-machine {
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin-right: auto;
  }

  
  .ligne-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
    margin: 0 0 var(--pas-2);
  }

  .ligne-actions .champ-saisie {
    
    flex: 0 1 12rem;
    min-width: 0;
  }

  
  textarea.champ-saisie {
    padding: var(--pas-2) var(--pas-3);
    min-height: calc(var(--cible) * 3);
    resize: vertical;
  }

  
  .qr-imprimable {
    text-align: center;
    padding: var(--pas-4);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    
    max-width: min(320px, 100%);
    min-width: 0;
    margin-inline: auto;
  }
  .qr-imprimable svg {
    width: 100%;
    height: auto;
    
    display: block;
    aspect-ratio: 1;
    margin-inline: auto;
  }
  .qr-legende {
    font-weight: var(--graisse-forte);
    margin: var(--pas-2) 0 0;
  }
  .qr-adresse {
    color: var(--texte-doux);
    font-size: var(--corps-menu);
    word-break: break-all;
  }

  @media print {
    
    body:has(.qr-imprimable) *:not(.qr-imprimable, .qr-imprimable *, :has(.qr-imprimable)) {
      display: none !important;
    }
    .qr-imprimable {
      border: none;
      max-width: none;
      padding: 0;
    }
    
    .qr-imprimable svg {
      width: 60mm;
      height: 60mm;
    }
    .qr-legende,
    .qr-adresse {
      overflow-wrap: anywhere;
    }
  }

  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  @media (min-width: 600px) {
    .resume {
      grid-template-columns: repeat(4, 1fr);
    }
    
    .carte {
      padding: var(--pas-3) var(--pas-4);
    }
    .carte + .carte {
      margin-top: var(--pas-2);
    }
    .fiche {
      grid-template-columns: minmax(8rem, 16rem) 1fr;
      gap: var(--pas-2) var(--pas-4);
    }
    .fiche-valeur {
      margin-bottom: 0;
    }
  }

  
  @media (min-width: 1024px) {
    
    .carte-liste {
      display: grid;
      
      grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
      gap: var(--pas-3);
      align-items: start;
    }

    
    .carte + .carte {
      margin-top: 0;
    }

    .colonnes {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: start;
    }

    
    .tableau-liste,
    .tableau-liste tbody,
    .tableau-liste tr {
      display: table;
      width: 100%;
    }
    .tableau-liste tbody {
      display: table-row-group;
    }
    .tableau-liste tr {
      display: table-row;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      margin: 0;
    }
    .tableau-liste thead {
      display: table-header-group;
    }
    .tableau-liste th,
    .tableau-liste td {
      display: table-cell;
      padding: var(--pas-3);
      border-bottom: 1px solid var(--bordure-discrete);
      font-size: var(--corps-reduit);
    }
    .tableau-liste thead th {
      font-weight: var(--graisse-forte);
      color: var(--texte-doux);
      border-bottom: 2px solid var(--bordure);
    }
    .etiquette-repliee {
      display: none;
    }
  }


  @media (min-width: 600px) {
    
    body {
      padding-bottom: 0;
    }
    .nav-mobile {
      display: none;
    }
    .nav-bureau {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--pas-2) var(--pas-4);
      flex: 1;
      justify-content: flex-end;
    }
    .nav-bureau .nav-liste {
      margin-right: auto;
    }
  }

  

  
  .listes-referentiel {
    display: block;
  }

  .liste-choix {
    
    min-width: 0;
  }

  .liste-choix-champ {
    max-width: 100%;
    min-width: 0;
  }

  
  .liste-choix-note {
    font-style: italic;
  }

  .liste-choix-valider {
    margin-top: var(--pas-2);
  }

  
  :root[data-script] .liste-choix-valider {
    display: none;
  }

  .liste-choix-echec {
    margin-bottom: var(--pas-4);
  }

  
  .liste-choix-recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
    margin-bottom: var(--pas-2);
  }

  .liste-choix-terme {
    flex: 1 1 12ch;
    min-width: 0;
    max-width: 100%;
  }

  
  .liste-choix-troncature {
    margin-top: var(--pas-1);
  }

  .liste-choix-vide {
    margin-top: var(--pas-2);
    padding: var(--pas-2) var(--pas-3);
    border-radius: var(--rayon-petit);
    background: var(--fond-doux);
    min-width: 0;
  }

  .liste-choix-vide-texte {
    margin: 0 0 var(--pas-2);
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
  }

  
  .liste-choix-ajout {
    margin: 0;
  }

  
  .liste-choix-message {
    margin-bottom: var(--pas-4);
    min-width: 0;
  }

  
  .referentiel-onglets {
    display: flex;
    gap: var(--pas-2);
    overflow-x: auto;
    margin: 0 0 var(--pas-4);
    border-bottom: 1px solid var(--bordure-discrete);
  }

  .referentiel-onglet {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
    padding: 0 var(--pas-3);
    border-bottom: 3px solid transparent;
    color: var(--texte-doux);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
    white-space: nowrap;
  }

  .referentiel-onglet:hover {
    color: var(--texte);
  }

  .referentiel-onglet[aria-current] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--graisse-forte);
  }

  
  .referentiel-table th,
  .referentiel-table td {
    min-width: 0;
    vertical-align: top;
  }

  .referentiel-table .ligne-actions:last-child {
    margin-bottom: 0;
  }

  .referentiel-table .champ-saisie {
    max-width: 100%;
  }
}



@layer utilitaires {
  
  .hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  
  .aide {
    display: block;
    color: var(--texte-doux);
    font-size: var(--corps-reduit);
    margin-top: var(--pas-1);
  }
  .sous-titre {
    color: var(--texte-doux);
    margin-top: 0;
  }
  .vide {
    color: var(--texte-doux);
  }
  .identite {
    font-weight: var(--graisse-forte);
  }
  .nombre {
    font-variant-numeric: tabular-nums;
    font-family: var(--police-chiffres);
  }
  .archivee {
    color: var(--texte-doux);
    font-style: italic;
  }
  .mesure {
    max-width: var(--longueur-ligne);
  }

  
  @media (forced-colors: active) {
    .carte,
    .echeance-carte,
    .releve-carte,
    .anomalie-carte,
    .resume-item,
    .etat-vide,
    .filtres,
    .formulaire,
    .groupe,
    .confirmation,
    .resume-erreurs,
    .compte-panneau,
    .compteur,
    .carte-signe,
    .bloc-urgent,
    .marqueur,
    .progression,
    .tambour {
      border: 1px solid;
    }

    
    .progression-remplissage {
      border-block-start: var(--hauteur-progression) solid;
    }

    
    .action,
    .action-entree {
      border: 2px solid;
    }

    
    .tableau-liste tr {
      border: 1px solid;
    }

    
    .nav-lien[aria-current="page"],
    .compte-resume[aria-current="page"] {
      border: 2px solid;
    }

    
    .bascule-option[aria-pressed="true"] {
      border-width: 2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}