/* Material Design 3 aux couleurs de Cigoflam's (flyer de lancement + cigoflams.fr, voir docs/charte-graphique.md).
   Orange de marque #ec7e23 et anthracite #272524 (flyer) ; rôles M3 dérivés, contrastes AA vérifiés. */
@font-face { font-family: Roboto; font-weight: 400; font-style: normal; font-display: swap;
             src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 500; font-style: normal; font-display: swap;
             src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 700; font-style: italic; font-display: swap;
             src: url("../fonts/roboto-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 700; font-style: normal; font-display: swap;
             src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  --marque: #ec7e23;              --anthracite: #272524;
  --primaire: #9a4600;            --sur-primaire: #ffffff;
  --primaire-conteneur: #ffdcc6;  --sur-primaire-conteneur: #321300;
  --tertiaire-conteneur: #dbe2ff; --sur-tertiaire-conteneur: #00164f;   /* bleu pâle de la marque */
  --surface: #fffbff;             --sur-surface: #272524;
  --surface-1: #fbf3ee;           --surface-2: #f6ebe4;                 /* teintes d'élévation */
  --sur-surface-variante: #52443c;
  --contour: #85736a;             --contour-doux: #d8c2b8;
  --erreur: #ba1a1a;              --erreur-conteneur: #ffdad6;          --sur-erreur-conteneur: #410002;
  --ombre-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --ombre-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --rayon-m: 12px; --rayon-l: 16px; --rayon-xl: 28px;
  --police: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--police); font-size: 1rem; line-height: 1.5; color: var(--sur-surface);
       background: var(--surface-1); }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.25; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1rem; }
a { color: var(--primaire); }
p { margin: 0 0 1rem; }
.masque, .evitement:not(:focus) { position: absolute; left: -9999px; }
.evitement:focus { position: fixed; top: .5rem; left: .5rem; z-index: 10; padding: .5rem 1rem;
                   background: var(--primaire); color: var(--sur-primaire); border-radius: 8px; }
:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }

/* Icônes (sprite static/icons.svg) */
.icone { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.icone-s { width: 1.125rem; height: 1.125rem; }

/* Coque : barre d'application + tiroir de navigation */
.coque { display: grid; grid-template-columns: 17rem 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.barre { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.5rem;
         background: var(--surface); box-shadow: var(--ombre-1); border-bottom: 3px solid var(--marque);
         position: sticky; top: 0; z-index: 5; }
.marque { display: flex; align-items: center; gap: .75rem; color: var(--sur-surface); text-decoration: none; font-weight: 700; }
.marque img { height: 3.5rem; width: auto; }
.barre .espace { flex: 1; }
.utilisateur { display: flex; align-items: center; gap: .5rem; }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
          background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.utilisateur .nom { font-weight: 500; line-height: 1.2; }
.utilisateur .role { font-size: .8125rem; color: var(--sur-surface-variante); }
.tiroir { padding: 1rem .75rem; background: var(--surface); border-right: 1px solid var(--contour-doux); }
.tiroir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tiroir .titre { font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--sur-surface-variante); padding: .75rem 1rem .25rem; }
.nav { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: 0 1rem; border-radius: 28px;
       color: var(--sur-surface-variante); text-decoration: none; font-weight: 500; }
a.nav:hover { background: var(--surface-2); }
.nav[aria-current="page"] { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.nav.desactive { opacity: .72; cursor: default; }
.puce { margin-left: auto; font-size: .6875rem; font-weight: 500; padding: .1rem .5rem; border-radius: 8px;
        background: var(--tertiaire-conteneur); color: var(--sur-tertiaire-conteneur); }
main { padding: 1.5rem; max-width: 72rem; width: 100%; }
.page-simple { display: block; }

/* Cartes */
.carte { background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre-1); padding: 1.25rem; }
.grille { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 1rem; }
.kpi { display: grid; gap: .25rem; position: relative; overflow: hidden; }
.kpi .pastille { width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center;
                 background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); margin-bottom: .5rem; }
.kpi.bleu .pastille { background: var(--tertiaire-conteneur); color: var(--sur-tertiaire-conteneur); }
.kpi .libelle { color: var(--sur-surface-variante); font-weight: 500; }
.kpi .valeur { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.kpi .aide { font-size: .8125rem; color: var(--sur-surface-variante); }
.kpi::after { content: ""; position: absolute; right: -1.5rem; top: -1.5rem; width: 6rem; height: 6rem; border-radius: 50%;
              background: var(--marque); opacity: .12; }

/* Bandeau d'accueil : panneau orange en biais et filet anthracite, comme l'en-tête des devis du flyer */
.heros { position: relative; overflow: hidden; display: flex; align-items: stretch; min-height: 11rem; margin-bottom: 1rem;
         background: var(--surface); border-radius: var(--rayon-xl); box-shadow: var(--ombre-2); }
.heros .logo { display: grid; place-items: center; padding: 1rem 1.5rem; flex: none; }
.heros .logo img { height: 8rem; width: auto; }
.heros .panneau { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 2rem 2rem 6rem;
         background: var(--marque); color: var(--anthracite); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.heros h1 { font-size: 1.75rem; font-style: italic; font-weight: 700; text-transform: uppercase; margin-bottom: .25rem; }
.heros p { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.heros::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .7rem; background: var(--anthracite);
         clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%); }
.vide { display: grid; justify-items: center; text-align: center; gap: .5rem; padding: 2rem 1rem; color: var(--sur-surface-variante); }
.vide svg { width: 12rem; max-width: 100%; height: auto; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: 0 1.5rem;
       border-radius: 20px; border: 1px solid transparent; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn-plein { background: var(--primaire); color: var(--sur-primaire); }
.btn-plein:hover { box-shadow: var(--ombre-1); filter: brightness(1.12); }
.btn-tonal { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.btn-contour { background: transparent; color: var(--primaire); border-color: var(--contour); }
.btn-contour:hover, .btn-tonal:hover { background: var(--surface-2); }

/* Champs M3 (contour, libellé flottant) */
.champ { position: relative; margin-bottom: 1.25rem; }
.champ input, .champ select { width: 100%; height: 3.5rem; padding: 1rem 1rem 0; font: inherit; color: var(--sur-surface);
       background: var(--surface); border: 1px solid var(--contour); border-radius: 4px; }
.champ select { padding-top: 1.25rem; }
.champ label { position: absolute; left: .75rem; top: 1rem; padding: 0 .25rem; color: var(--sur-surface-variante);
       background: var(--surface); pointer-events: none; transition: all .12s ease-out; transform-origin: left top; }
.champ input:focus ~ label, .champ input:not(:placeholder-shown) ~ label, .champ select ~ label {
       top: -.5rem; font-size: .75rem; font-weight: 500; }
.champ input:focus ~ label, .champ select:focus ~ label { color: var(--primaire); }
.champ input:focus, .champ select:focus { outline: none; border: 2px solid var(--primaire); padding: calc(1rem - 1px) calc(1rem - 1px) 0; }
.champ select:focus { padding-top: calc(1.25rem - 1px); }
.champ .aide { display: block; margin: .25rem 1rem 0; font-size: .75rem; color: var(--sur-surface-variante); }

/* Messages */
.alerte { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--rayon-m); margin-bottom: 1rem;
          background: var(--erreur-conteneur); color: var(--sur-erreur-conteneur); font-weight: 500; }

/* Tableaux et puces de rôle */
.tableau { width: 100%; border-collapse: collapse; }
.tableau caption { text-align: left; font-weight: 500; padding-bottom: .75rem; }
.tableau th, .tableau td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--contour-doux); vertical-align: middle; }
.tableau thead th { color: var(--sur-surface-variante); font-weight: 500; font-size: .875rem; }
.tableau tbody tr:hover { background: var(--surface-1); }
.puce-role { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 8px; font-size: .875rem;
             font-weight: 500; background: var(--tertiaire-conteneur); color: var(--sur-tertiaire-conteneur); }
.puce-role.gerant { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.ligne-mdp { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ligne-mdp .champ { margin: 0; flex: 1 1 12rem; }

/* Page de connexion */
.connexion { min-height: 100vh; display: grid; grid-template-columns: 1.25fr 1fr; }
.connexion .visuel { display: grid; place-items: center; padding: 2rem; color: #000;
       background: linear-gradient(100deg, var(--marque) 0 85%, var(--anthracite) 85% 87.5%, var(--surface) 87.5%); }
.connexion .visuel .contenu { max-width: 26rem; }
.connexion .visuel h2 { font-size: 2rem; font-style: italic; font-weight: 700; text-transform: uppercase; }
.connexion .visuel ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.connexion .visuel li { display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.connexion .formulaire { display: grid; place-items: center; padding: 2rem; background: var(--surface); }
.connexion .carte-connexion { width: 100%; max-width: 24rem; }
.connexion .carte-connexion img { height: 6rem; width: auto; margin-bottom: 1rem; }

@media (max-width: 52rem) {
  .coque { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tiroir { display: none; }

  .barre { padding: .375rem 1rem; gap: .5rem; }
  .marque img { height: 2.75rem; }
  .utilisateur .texte, .marque span, .utilisateur form { display: none; }
  main { padding: 1rem; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.5rem; }
  .heros { flex-direction: column; min-height: 0; border-radius: var(--rayon-l); }
  .heros .logo { padding: .5rem 1rem 0; }
  .heros .logo img { height: 4.5rem; }
  .heros .panneau { clip-path: none; padding: .75rem 1.25rem 1.5rem; }
  .heros h1 { font-size: 1.375rem; }
  .grille { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .kpi { padding: 1rem; }
  .kpi .valeur { font-size: 1.375rem; }
  .kpi .pastille { width: 2.5rem; height: 2.5rem; }
  .carte { padding: 1rem; }
  .btn { min-height: 3rem; }
  .formulaire .btn-plein, .actions-rapides .btn { width: 100%; }
  .connexion { grid-template-columns: 1fr; }
  .connexion .visuel { display: none; }
  /* Tableaux -> cartes empilées */
  .tableau thead { position: absolute; left: -9999px; }
  .tableau, .tableau tbody, .tableau tr, .tableau th, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: .75rem 0; border-bottom: 1px solid var(--contour-doux); }
  .tableau th, .tableau td { border: 0; padding: .125rem 0; }
  .tableau th[scope="row"] { font-size: 1.0625rem; padding-bottom: .25rem; }
  .tableau td[data-label] { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tableau td[data-label]::before { content: attr(data-label); color: var(--sur-surface-variante); text-align: left; }
  .tableau .actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; }
  .tableau td.actions { padding-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.espace-haut { margin-top: 1rem; }

/* Formulaires : champs date/heure toujours étiquetés en haut, cases, groupes */
.champ input[type="date"] ~ label, .champ input[type="time"] ~ label, .champ input[type="number"] ~ label {
  top: -.5rem; font-size: .75rem; font-weight: 500; }
fieldset { border: 1px solid var(--contour); border-radius: var(--rayon-m); margin: 0 0 1rem; padding: .75rem 1rem 0; }
legend { padding: 0 .5rem; font-weight: 500; color: var(--sur-surface-variante); }
.case { display: flex; align-items: center; gap: .75rem; min-height: 3rem; margin-bottom: 1rem; }
.case input { width: 1.25rem; height: 1.25rem; accent-color: var(--primaire); }

/* Ergonomie : formulaires en grille, actions rapides, navigation du bas, menu */
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; align-items: start; }
.formulaire > .large, .formulaire > fieldset, .formulaire > .btn, .formulaire > .alerte, .formulaire > .duo, .formulaire > .champ-texte { grid-column: 1 / -1; }
.formulaire > .btn { justify-self: start; }
fieldset.taux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
fieldset.taux legend { grid-column: 1 / -1; }
.champ .aide { margin-top: .25rem; }
details.depliant { background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre-1); margin-top: 1rem; }
details.depliant > summary { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: 0 1.25rem; cursor: pointer;
  font-weight: 500; color: var(--primaire); list-style: none; border-radius: var(--rayon-l); }
details.depliant > summary::-webkit-details-marker { display: none; }
details.depliant > summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; }
details.depliant[open] > summary::after { content: "\2212"; }
details.depliant > .corps { padding: 0 1.25rem 1.25rem; }
.actions-rapides { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.actions-rapides .btn { flex: 1 1 14rem; min-height: 3.5rem; font-size: 1.0625rem; }
.bas { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface-2); border-top: 1px solid var(--contour-doux); padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom)); }
.bas a { display: grid; justify-items: center; gap: .125rem; min-height: 3.5rem; align-content: center; text-decoration: none;
  font-size: .75rem; font-weight: 500; color: var(--sur-surface-variante); border-radius: 16px; }
.bas a .icone { width: 1.5rem; height: 1.5rem; padding: .25rem 1rem; box-sizing: content-box; border-radius: 16px; }
.bas a[aria-current="page"] { color: var(--sur-surface); }
.bas a[aria-current="page"] .icone { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.liste-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.liste-menu .titre { font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sur-surface-variante); padding: 1rem 1rem .25rem; }
.liste-menu .nav, .liste-menu button.nav { width: 100%; background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
@media (min-width: 52.01rem) { .bas, .seulement-mobile { display: none; } }

/* Boutons-icônes (archiver, réouvrir, supprimer) et validation des actions importantes */
.btn-icone { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--contour);
  background: transparent; color: var(--primaire); cursor: pointer; text-decoration: none; padding: 0; }
.btn-icone:hover { background: var(--surface-2); }
.btn-icone.danger { color: var(--erreur); border-color: var(--erreur); }
.btn-icone.danger:hover { background: var(--erreur-conteneur); }
.btn-danger { background: var(--erreur); color: #fff; }
.btn-danger:hover { box-shadow: var(--ombre-1); filter: brightness(1.12); }
.tableau .actions { display: flex; gap: .5rem; align-items: center; }
.tableau td.actions { justify-content: flex-start; }

/* Sous-onglets (Ma franchise) : défilement horizontal sur téléphone, sans JavaScript */
.onglets { overflow-x: auto; margin-bottom: 1rem; }
.onglets ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; width: max-content; min-width: 100%; }
.onglets a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.25rem; border-radius: 20px;
  border: 1px solid var(--contour); color: var(--sur-surface-variante); text-decoration: none; font-weight: 500; white-space: nowrap; }
.onglets a[aria-current="page"] { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); border-color: transparent; }
.coque > main { min-width: 0; }

/* Pilotage : couleurs de résultat, graphiques SVG, jauges (aucun style en ligne : CSP) */
:root { --succes: #1b6e2a; --succes-conteneur: #c9efc6; --sur-succes-conteneur: #002106; }
.entete-accueil { margin-bottom: 1rem; }
.entete-accueil h1 { font-style: italic; font-weight: 700; text-transform: uppercase; margin: 0; }
.entete-accueil p { margin: 0; color: var(--sur-surface-variante); font-weight: 500; }
.duo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.carte.jour { border-top: 6px solid var(--contour-doux); }
.carte.jour.gagne { border-top-color: var(--succes); }
.carte.jour.perd { border-top-color: var(--erreur); }
.carte.jour h2, .carte.mois h2 { font-size: 1rem; color: var(--sur-surface-variante); }
.verdict { font-weight: 700; font-style: italic; text-transform: uppercase; margin: 0; }
.gagne .verdict, .gagne .gros { color: var(--succes); }
.perd .verdict, .perd .gros { color: var(--erreur); }
.gros { font-size: 3rem; font-weight: 700; line-height: 1.1; margin: .25rem 0; }
.sous { font-size: .875rem; color: var(--sur-surface-variante); margin-bottom: .5rem; }
.jauge-ligne { height: .75rem; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: .75rem 0 .5rem; }
.jauge-ligne .rempli { display: block; height: 100%; border-radius: 6px; }
.jauge-ligne .ok { background: var(--succes); } .jauge-ligne .ko { background: var(--marque); }
.jauge-ligne .l0 { width: 0%; }
.jauge-ligne .l5 { width: 5%; }
.jauge-ligne .l10 { width: 10%; }
.jauge-ligne .l15 { width: 15%; }
.jauge-ligne .l20 { width: 20%; }
.jauge-ligne .l25 { width: 25%; }
.jauge-ligne .l30 { width: 30%; }
.jauge-ligne .l35 { width: 35%; }
.jauge-ligne .l40 { width: 40%; }
.jauge-ligne .l45 { width: 45%; }
.jauge-ligne .l50 { width: 50%; }
.jauge-ligne .l55 { width: 55%; }
.jauge-ligne .l60 { width: 60%; }
.jauge-ligne .l65 { width: 65%; }
.jauge-ligne .l70 { width: 70%; }
.jauge-ligne .l75 { width: 75%; }
.jauge-ligne .l80 { width: 80%; }
.jauge-ligne .l85 { width: 85%; }
.jauge-ligne .l90 { width: 90%; }
.jauge-ligne .l95 { width: 95%; }
.jauge-ligne .l100 { width: 100%; }
.mois-corps { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.anneau { width: 9rem; height: 9rem; flex: none; }
.anneau circle { fill: none; stroke-width: 12; }
.anneau .fond { stroke: var(--surface-2); }
.anneau .valeur { stroke-linecap: round; }
.anneau.atteint .valeur { stroke: var(--succes); } .anneau.proche .valeur { stroke: var(--marque); } .anneau.loin .valeur { stroke: var(--erreur); }
.anneau-texte { font-size: 1.5rem; font-weight: 700; fill: var(--sur-surface); }
.anneau-sous { font-size: .7rem; fill: var(--sur-surface-variante); }
.chiffres { margin: 0; display: grid; gap: .5rem; flex: 1 1 12rem; }
.chiffres div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--contour-doux); padding-bottom: .25rem; }
.chiffres dt { color: var(--sur-surface-variante); font-size: .875rem; }
.chiffres dd { margin: 0; font-weight: 700; text-align: right; }
.pos { color: var(--succes); } .neg { color: var(--erreur); }
.tendance { font-weight: 700; } .tendance.hausse { color: var(--succes); } .tendance.baisse { color: var(--erreur); }
.graphe { margin: 0; }
.graphe svg { width: 100%; height: 12rem; display: block; }
.barre.positif { fill: var(--succes); } .barre.negatif { fill: var(--erreur); } .barre.nul { fill: var(--contour-doux); }
.graphe .axe { stroke: var(--sur-surface-variante); stroke-width: 1; }
.graphe .etiquette { font-size: 12px; fill: var(--sur-surface-variante); }
.donnees summary { cursor: pointer; color: var(--primaire); font-size: .875rem; min-height: 2.5rem; display: flex; align-items: center; }
.donnees ul { margin: 0; padding-left: 1.25rem; font-size: .875rem; }
.legende { font-size: .875rem; color: var(--sur-surface-variante); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pastille-leg { width: .875rem; height: .875rem; border-radius: 3px; display: inline-block; }
.pastille-leg.positif { background: var(--succes); } .pastille-leg.negatif { background: var(--erreur); }
.alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alertes li { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem .75rem; border-radius: var(--rayon-m); font-weight: 500; }
.alertes .critique { background: var(--erreur-conteneur); color: var(--sur-erreur-conteneur); }
.alertes .attention { background: var(--primaire-conteneur); color: var(--sur-primaire-conteneur); }
.alertes .info { background: var(--tertiaire-conteneur); color: var(--sur-tertiaire-conteneur); }
.rien { display: flex; gap: .5rem; align-items: center; color: var(--succes); font-weight: 500; }
.classement { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.classement a { display: grid; grid-template-columns: 1fr auto; gap: .125rem .75rem; padding: .625rem .75rem; border-radius: var(--rayon-m);
  text-decoration: none; color: var(--sur-surface); min-height: 3rem; }
.classement a:hover { background: var(--surface-1); }
.classement .nom { font-weight: 500; } .classement .detail { grid-column: 1 / -1; font-size: .875rem; color: var(--sur-surface-variante); }
.puce-etat { font-size: .75rem; font-weight: 700; padding: .125rem .5rem; border-radius: 8px; align-self: center; }
.puce-etat.ok { background: var(--succes-conteneur); color: var(--sur-succes-conteneur); }
.puce-etat.ko { background: var(--erreur-conteneur); color: var(--sur-erreur-conteneur); }
.filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.filtres .champ { margin: 0; min-width: 12rem; }
@media (max-width: 52rem) { .gros { font-size: 2.25rem; } .anneau { width: 7.5rem; height: 7.5rem; } .graphe svg { height: 10rem; } }

/* Z de caisse complet : zones de texte et liste simple */
.champ-texte { margin-bottom: 1.25rem; }
.champ-texte label { display: block; margin: 0 .25rem .25rem; color: var(--sur-surface-variante); font-size: .875rem; }
.champ-texte textarea { width: 100%; padding: .75rem 1rem; font: .9375rem/1.4 ui-monospace, "Roboto Mono", monospace; color: var(--sur-surface);
  background: var(--surface); border: 1px solid var(--contour); border-radius: var(--rayon-s, 4px); resize: vertical; }
.champ-texte textarea:focus { outline: none; border: 2px solid var(--primaire); padding: calc(.75rem - 1px) calc(1rem - 1px); }
.champ-texte .aide { display: block; margin: .25rem 1rem 0; font-size: .75rem; color: var(--sur-surface-variante); }
.liste-simple { margin: 0 0 1rem; padding-left: 1.25rem; }