/* Pilotage EARL : composants (boutons, chips, stat-cards, listes, feuille, toasts, page Iris, connexion). */

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--cible); padding: var(--esp-2) var(--esp-4); font-weight: 600; background: var(--panneau); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); text-decoration: none; }
.btn:hover { border-color: var(--or); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primaire { background: var(--or); border-color: var(--or); color: var(--encre-sur-or); }
.btn-primaire:hover { filter: brightness(0.92); }
.btn-danger { background: transparent; border-color: var(--rouge); color: var(--rouge); }
.btn-danger:hover { background: var(--rouge-pale); }
.btn-danger-plein { background: var(--rouge); border-color: var(--rouge); color: var(--sur-rouge); }
.btn-large { min-height: 56px; width: 100%; font-size: 1.05rem; }

/* Chips : couleur et texte vont toujours ensemble */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--t-legende); font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip-crit { background: var(--rouge-pale); color: var(--rouge); }
.chip-warn { background: var(--orange-pale); color: var(--orange); }
.chip-ok { background: var(--vert-pale); color: var(--vert); }
.chip-neutre { background: var(--gris-pale); color: var(--gris); }

/* Stat-cards : le chiffre reste en encre neutre tant que tout va bien */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); align-items: start; }
.stat { position: relative; background: var(--panneau-doux); border-radius: 8px; padding: var(--esp-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat.span2 { grid-column: 1 / -1; }
.stat-val { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.5rem; color: var(--encre); overflow-wrap: anywhere; }
.stat-val[data-etat="warn"] { color: var(--orange); }
.stat-val[data-etat="crit"] { color: var(--rouge); }
.stat-leg { font-size: var(--t-legende); color: var(--encre-douce); line-height: 1.25; }
.stat-pastille { position: absolute; top: var(--esp-3); right: var(--esp-3); width: 12px; height: 12px; border-radius: 50%; }
.stat-pastille.p-warn { background: var(--orange); }
.stat-pastille.p-crit { background: var(--rouge); }

/* Sparklines : un bouton avec titre, unité et détail en clair */
.spark { display: block; width: 100%; margin-top: var(--esp-2); padding: var(--esp-2) 0; min-height: var(--cible); background: transparent; border: 0; color: var(--or-texte); border-radius: var(--rayon-sm); text-align: left; }
.spark svg { display: block; width: 100%; height: 36px; overflow: visible; }
.spark-base { stroke: var(--ligne); stroke-dasharray: 3 3; }
.spark-sel { stroke: var(--encre-douce); }
.spark-detail { font-size: var(--t-legende); font-weight: 600; color: var(--encre); background: var(--sol); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); padding: var(--esp-2) var(--esp-3); }

/* Listes */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ligne { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) 0; border-bottom: 1px solid var(--ligne); }
.ligne:last-child { border-bottom: 0; }
.ligne-retard { background: var(--rouge-pale); margin-inline: calc(-1 * var(--esp-2)); padding-inline: var(--esp-2); border-radius: var(--rayon-sm); border-bottom-color: transparent; }
.ligne-haut { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.ligne-nom { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.montant { font-family: "IBM Plex Mono", monospace; font-weight: 600; white-space: nowrap; }
.ligne-bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ligne-sous { font-size: var(--t-legende); color: var(--encre-douce); }
.actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-1); }
.actions .btn { flex: 1 1 120px; }
.plus { align-self: stretch; }
.vide { color: var(--encre-douce); padding: var(--esp-2) 0; }
.sous-titre { font-size: var(--t-legende); color: var(--encre-douce); }
.progress-wrap { display: flex; align-items: center; gap: var(--esp-2); }
.progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panneau-doux); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--or); border-radius: 999px; }
.progress-label { font-size: var(--t-legende); color: var(--encre-douce); white-space: nowrap; }
.lien-outil { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: 600; color: var(--or-texte); text-decoration: none; align-self: flex-start; }
.lien-outil::after { content: " \2197"; white-space: pre; }
.lien-outil:hover { text-decoration: underline; }

/* États de tuile : chargement, panne, vide */
.tuile-panne { background: var(--orange-pale); color: var(--orange); border: 1px solid var(--orange); border-radius: var(--rayon-sm); padding: var(--esp-3) var(--esp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); justify-content: space-between; font-weight: 600; }
.panel-erreur { padding: var(--esp-5) var(--esp-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
.squelette { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); min-height: 120px; }
.sq-barre { height: 16px; border-radius: 999px; background: var(--panneau-doux); }
.sq-barre.titre { width: 40%; height: 20px; }
.sq-barre.court { width: 65%; }
@media (prefers-reduced-motion: no-preference) {
  .sq-barre { animation: pouls 1.4s ease-in-out infinite; }
  @keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* Page Iris */
.retour { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--or-texte); font-weight: 600; text-decoration: none; }
.titre-page { font-size: 1.6rem; }
.titre-page:focus { outline: none; }
.lead { color: var(--encre-douce); }
.carte { border: 1px solid var(--ligne); background: var(--panneau-doux); border-radius: var(--rayon-sm); padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.carte-action { font-weight: 600; }
.carte-faits { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); font-size: var(--t-legende); color: var(--encre-douce); }
.carte-faits b { color: var(--encre); font-family: "IBM Plex Mono", monospace; }
.journal-ligne { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--ligne); }
.journal-ligne:last-child { border-bottom: 0; }
.journal-heure { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.journal-action { font-weight: 600; }
.journal-res { grid-column: 2; color: var(--encre-douce); font-size: var(--t-legende); }
.journal-ligne.echec .journal-action { color: var(--rouge); }
.reglage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--ligne); }
.reglage:last-of-type { border-bottom: 0; }
code { font-family: "IBM Plex Mono", monospace; font-size: 0.9em; background: var(--panneau-doux); padding: 1px 6px; border-radius: 4px; }
.note { background: var(--panneau-doux); border-radius: var(--rayon-sm); padding: var(--esp-3) var(--esp-4); }

/* Feuille d'action (bottom sheet) */
.voile { position: fixed; inset: 0; background: var(--voile); z-index: 40; }
.feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 520px; margin: 0 auto; background: var(--panneau); border-top: 3px solid var(--or); border-radius: 16px 16px 0 0; padding: var(--esp-5) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--esp-3); max-height: 92dvh; overflow-y: auto; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25); }
.feuille h2 { font-size: 1.25rem; }
.feuille h2:focus { outline: none; }
.feuille .erreur { background: var(--orange-pale); color: var(--orange); border: 1px solid var(--orange); border-radius: var(--rayon-sm); padding: var(--esp-3); font-weight: 600; }
.champ { display: flex; flex-direction: column; gap: var(--esp-1); }
.champ label { font-size: var(--t-legende); color: var(--encre-douce); }
.champ input { min-height: 48px; padding: 0 var(--esp-3); font: inherit; color: var(--encre); background: var(--sol); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); }
.affiche { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: var(--t-kpi); text-align: center; padding: var(--esp-3); background: var(--sol); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); min-height: 64px; }
.affiche small { display: block; font-family: "IBM Plex Sans", sans-serif; font-weight: 400; font-size: var(--t-legende); color: var(--encre-douce); }
.clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.clavier button { min-height: 56px; font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; font-weight: 600; background: var(--panneau-doux); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); }
.clavier button:active { background: var(--or-pale); }
.feuille-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.feuille-actions > [data-k="sh-verifier"] { grid-column: 1 / -1; }

/* Toasts */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding-inline: var(--esp-4); pointer-events: none; }
@media (min-width: 800px) { .toasts { bottom: var(--esp-5); } }
.toast { background: var(--encre); color: var(--sol); padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon); font-weight: 600; box-shadow: var(--ombre); max-width: 520px; }

/* Connexion */
.login-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--esp-4); }
.login-box { width: 100%; max-width: 380px; background: var(--panneau); border: 1px solid var(--ligne); border-top: 3px solid var(--or); border-radius: var(--rayon); box-shadow: var(--ombre); padding: var(--esp-5) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-4); }
.login-box h1 { font-size: 1.6rem; }
.login-box form { display: flex; flex-direction: column; gap: var(--esp-3); }
.login-box label { font-weight: 600; }
.login-box input { min-height: 56px; padding: 0 var(--esp-3); font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; color: var(--encre); background: var(--sol); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); }
.login-box .erreur { background: var(--rouge-pale); color: var(--rouge); border: 1px solid var(--rouge); border-radius: var(--rayon-sm); padding: var(--esp-3); font-weight: 600; }

/* Journal des actions (panel de l'accueil) */
.journal-quand { font-family: "IBM Plex Mono", monospace; font-size: var(--t-legende); color: var(--encre-douce); white-space: nowrap; }