/* Console de parc Kaydan Shield — feuille de style du design retenu par Ismael
   le 2026-09-02 (« Kaydan Console », archivé dans docs/design du dépôt Android).
   Les valeurs sont celles du design ; aucune nuance inventée. Jamais la couleur
   seule : chaque niveau porte son mot, chaque valeur absente son italique. */

/* Polices : Roboto Flex et Roboto Mono via Google Fonts (socle.html) ; en repli
   hors ligne, l'Archivo et la Roboto Mono embarquées. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.3084864834b6.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Roboto Mono Locale"; src: url("fonts/roboto_mono.a4841851afb3.ttf") format("truetype"); font-weight: 100 700; font-display: swap; }

:root {
  --fond: #EEF3F8; --surface: #FFFFFF; --surface-2: #F7FAFD; --surface-3: #F1F5FA; --surface-4: #EFF3F8;
  --bordure: #E5EDF6; --bordure-2: #EDF2F8; --bordure-3: #F1F5FA; --bordure-champ: #DCE6F0; --bordure-tiret: #C7D8EA;
  --marine: #0B2D52; --marine-2: #123A63; --marine-3: #081F3A; --marine-trait: #1E4573;
  --bleu: #2A78D6; --bleu-pale: #CFE2F7; --bleu-clair: #EAF1FA;
  --encre: #0D1B29; --encre-2: #17283A; --encre-3: #4A5A6B; --encre-4: #6D7F92; --encre-5: #7C8B9C; --encre-6: #8395A8; --encre-7: #93A5B8;
  --sur-marine: #EAF1FA; --sur-marine-2: #A9C0D8; --sur-marine-3: #8FA9C6; --sur-marine-4: #7E9CBC; --sur-marine-5: #6E8CAB; --sur-marine-6: #B9CFE6;
  --vert-vif: #4FD98A;
  /* Niveaux */
  --alerte-fg: #A3231C; --alerte-bg: #FDECEA; --alerte-bord: #F6D5D1; --alerte-point: #C5382E;
  --surveil-fg: #8A5300; --surveil-bg: #FEF4E4; --surveil-bord: #F7E1BE; --surveil-point: #E08A16;
  --sain-fg: #14664C; --sain-bg: #E9F6F0; --sain-bord: #CCE7DC; --sain-point: #1E9270;
  --attente-fg: #4A5A6B; --attente-bg: #EFF3F8; --attente-bord: #DCE6F0; --attente-point: #93A5B8;
  --silence: #F0C9C4;
  --ombre-carte: 0 1px 2px rgba(11,45,82,.04), 0 10px 24px rgba(11,45,82,.05);
  --ombre-tableau: 0 1px 2px rgba(11,45,82,.04), 0 12px 30px rgba(11,45,82,.06);
  --ombre-fine: 0 1px 2px rgba(11,45,82,.04);
  --sans: "Roboto Flex", "Archivo", Roboto, system-ui, sans-serif;
  --mono: "Roboto Mono", "Roboto Mono Locale", ui-monospace, monospace;
  --colonnes-liste: 1.6fr 2.2fr .95fr .95fr .8fr .8fr .85fr .8fr;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fond); color: var(--encre); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--marine); text-decoration: underline; }
::selection { background: var(--bleu-pale); }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.absent { color: var(--encre-7); font-style: italic; }
.texte-chaud { color: var(--alerte-fg); font-weight: 600; }
.petit { font-size: 12px; word-break: break-all; }
.texte { font-size: 13px; line-height: 1.6; color: var(--encre-4); margin: 8px 0 14px; text-wrap: pretty; }
.texte-vide { color: var(--encre-6); font-size: 13px; padding: 12px 0; }

/* Niveaux : une classe, quatre variables, tout le reste en découle */
.niveau-alerte  { --n-fg: var(--alerte-fg);  --n-bg: var(--alerte-bg);  --n-bord: var(--alerte-bord);  --n-point: var(--alerte-point); }
.niveau-surveil { --n-fg: var(--surveil-fg); --n-bg: var(--surveil-bg); --n-bord: var(--surveil-bord); --n-point: var(--surveil-point); }
.niveau-sain    { --n-fg: var(--sain-fg);    --n-bg: var(--sain-bg);    --n-bord: var(--sain-bord);    --n-point: var(--sain-point); }
.niveau-attente { --n-fg: var(--attente-fg); --n-bg: var(--attente-bg); --n-bord: var(--attente-bord); --n-point: var(--attente-point); }
.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-point, var(--encre-7)); flex: none; }

/* Tons d'une valeur */
.ton-encre  { --t-fg: var(--encre); --t-style: normal; }
.ton-chaud  { --t-fg: var(--alerte-fg); --t-style: normal; }
.ton-tiede  { --t-fg: var(--surveil-fg); --t-style: normal; }
.ton-absent { --t-fg: var(--encre-7); --t-style: italic; }

/* ---- Barre ---- */
.barre { position: sticky; top: 0; z-index: 30; background: var(--marine); color: var(--sur-marine); padding: 0 26px; height: 66px; display: flex; align-items: center; gap: 26px; box-shadow: 0 2px 14px rgba(11,45,82,.22); }
.marque { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marque:hover { color: inherit; text-decoration: none; }
.marque-icone { width: 28px; height: 28px; border-radius: 9px; background: var(--bleu); display: flex; align-items: center; justify-content: center; flex: none; }
.marque-icone span { width: 10px; height: 12px; background: #fff; border-radius: 2px 2px 5px 5px; }
.marque-nom { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.marque-section { white-space: nowrap; font-size: 11.5px; color: var(--sur-marine-4); letter-spacing: .04em; padding-left: 8px; border-left: 1px solid var(--marine-trait); }
.onglets { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.06); padding: 5px; border-radius: 999px; }
.onglet { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--sur-marine-6); text-decoration: none; }
.onglet:hover { color: #fff; text-decoration: none; }
.onglet-compte { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--sur-marine-3); }
.onglet.actif { background: #fff; color: var(--marine); box-shadow: 0 2px 8px rgba(4,18,35,.25); }
.onglet.actif:hover { color: var(--marine); }
.onglet.actif .onglet-compte { background: var(--bleu-clair); color: var(--bleu); }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.jeton-barre { white-space: nowrap; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12px; color: var(--sur-marine-6); }
.jeton-barre.jeton-admin { color: var(--sur-marine-6); text-decoration: none; }
.jeton-barre.jeton-admin:hover { color: #fff; }
.jeton-version { padding-right: 6px; }
.jeton-libelle { color: var(--sur-marine-3); }
.jeton-valeur { font-size: 13px; font-weight: 600; color: #fff; }
.jeton-fleche { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--bleu-pale); display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; text-decoration: none; }
.jeton-fleche:hover { background: var(--bleu); color: #fff; text-decoration: none; }
.point-vif { width: 7px; height: 7px; border-radius: 50%; background: var(--vert-vif); animation: kdPulse 2.2s ease-in-out infinite; }
.compte { margin: 0; }
.compte-bouton { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; color: var(--sur-marine-6); font-size: 12.5px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bleu); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

/* ---- En-tête de page ---- */
.entete-page { padding: 24px 26px 12px; display: flex; align-items: flex-end; gap: 18px; }
.surtitre { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-5); min-height: 1.2em; }
.titre-page { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; }
.entete-page .bouton { margin-left: auto; }
.page { padding: 6px 26px 56px; }

/* ---- Boutons et champs ---- */
.bouton { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--bordure-champ); background: #fff; color: var(--encre); font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bouton:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.bouton-primaire { border: none; background: var(--bleu); color: #fff; font-weight: 600; box-shadow: 0 8px 18px rgba(42,120,214,.24); }
.bouton-primaire:hover { background: var(--marine); color: #fff; box-shadow: 0 8px 20px rgba(11,45,82,.3); }
.bouton-large { width: 100%; height: 48px; font-size: 14.5px; }
.bouton-retour { height: 34px; padding: 0 16px; font-size: 13px; color: var(--bleu); margin-bottom: 14px; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.champ > span { font-size: 12px; font-weight: 600; color: var(--encre-3); }
.champ small { font-size: 12px; color: var(--encre-6); }
.champ input[type=text], .champ input[type=password], .champ textarea, .champ input[type=file] { height: 44px; border: 1.5px solid var(--bordure-champ); background: var(--surface-2); border-radius: 14px; padding: 0 14px; font-family: var(--sans); font-size: 14px; color: var(--encre); outline: none; width: 100%; }
.champ textarea { height: auto; min-height: 88px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.champ input[type=file] { padding: 9px 14px; }
.champ input.mono, .champ input[name=numero_de_serie] { font-family: var(--mono); }
.champ input:focus, .champ textarea:focus { border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px rgba(42,120,214,.14); }
.champ .errorlist, .formulaire .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--alerte-fg); font-size: 12.5px; }
.formulaire .bouton { margin-top: 4px; }

/* ---- Messages ---- */
.messages { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--bordure); background: #fff; font-size: 13.5px; animation: kdRise .2s ease-out; }
.message-success { background: var(--sain-bg); border-color: var(--sain-bord); color: var(--sain-fg); }
.message-error { background: var(--alerte-bg); border-color: var(--alerte-bord); color: var(--alerte-fg); }
.message-info { background: var(--bleu-clair); border-color: var(--bleu-pale); color: var(--marine); }

/* ---- Cartes ---- */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 20px; padding: 20px 22px; box-shadow: var(--ombre-carte); }
.carte-tableau { padding: 0; border-radius: 22px; box-shadow: var(--ombre-tableau); overflow: hidden; margin-top: 18px; }
.carte-marine { background: var(--marine); color: var(--sur-marine); border: none; box-shadow: none; }
.sur-libelle { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.sur-libelle.clair { color: var(--sur-marine-3); }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; align-items: start; }

/* ---- Résumé ---- */
.resume { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.carte-resume { padding: 18px 20px; position: relative; overflow: hidden; }
.resume-tete { display: flex; align-items: center; gap: 8px; }
.resume-mot { font-size: 12.5px; font-weight: 600; color: var(--n-fg); }
.resume-chiffre { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.grand-chiffre { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--n-fg); }
.resume-total { font-size: 12px; color: var(--encre-7); padding-bottom: 5px; }
.resume-indice { font-size: 12.5px; color: var(--encre-4); margin-top: 7px; text-wrap: pretty; }
.resume-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--n-point); }
.carte-resume.vide .resume-barre { background: var(--bordure); }

/* ---- Liste ---- */
.rangee { display: grid; grid-template-columns: var(--colonnes-liste); gap: 16px; align-items: center; padding: 13px 22px; border-bottom: 1px solid var(--bordure-3); color: inherit; text-decoration: none; background: #fff; }
a.rangee:hover { background: var(--surface-2); color: inherit; text-decoration: none; }
.rangee-entete { padding: 13px 22px; border-bottom: 1px solid var(--bordure-2); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--encre-6); }
.groupe-tete { display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: var(--n-bg); }
.groupe-mot { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--n-fg); }
.groupe-compte { font-size: 11.5px; color: var(--n-fg, var(--encre-3)); background: #fff; padding: 2px 9px; border-radius: 999px; }
.tableau-titre .groupe-compte { background: var(--surface-4); }
.groupe-indice { font-size: 12.5px; color: var(--encre-5); }
.cellule-terminal { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tuile { width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--n-bg); color: var(--n-fg); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; }
.cellule-terminal-texte { min-width: 0; display: flex; flex-direction: column; }
.terminal-nom { font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terminal-sous { display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0; }
.serie { font-size: 11.5px; color: var(--bleu); }
.site { font-size: 12px; color: var(--encre-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { display: inline-flex; align-items: center; gap: 7px; background: var(--n-bg); border: 1px solid var(--n-bord); border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 12.5px; color: var(--encre-2); }
.puce-etiquette { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--n-fg); }
.cellule-valeur { font-size: 14px; font-weight: 500; color: var(--t-fg); font-style: var(--t-style); }
.cellule-valeur:not(.mono) { font-size: 13.5px; }
.cellule-note { font-size: 11.5px; color: var(--encre-7); margin-top: 2px; }
.legende { margin-top: 14px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-5); }
.tableau-vide { padding: 40px 22px; text-align: center; color: var(--encre-6); font-size: 13.5px; }
.tableau-vide-titre { font-size: 16px; font-weight: 600; color: var(--encre); margin-bottom: 6px; }
.tableau-titre { padding: 17px 22px; border-bottom: 1px solid var(--bordure-2); display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.tableau-titre .section-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tableau-pied { padding: 17px 22px; font-size: 12.5px; color: var(--encre-6); line-height: 1.6; }

/* ---- Fiche ---- */
.carte-fiche-tete { padding: 24px 26px; display: flex; gap: 34px; align-items: flex-start; border-radius: 22px; box-shadow: var(--ombre-tableau); }
.fiche-identite { min-width: 0; }
.fiche-niveau { display: flex; align-items: center; gap: 10px; }
.pastille-niveau { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--n-fg); background: var(--n-bg); border: 1px solid var(--n-bord); padding: 5px 12px 5px 10px; border-radius: 999px; }
.fiche-niveau .serie { font-size: 12.5px; }
.fiche-nom { font-size: 30px; font-weight: 600; letter-spacing: -.025em; margin-top: 12px; }
.fiche-sous { font-size: 14px; color: var(--encre-4); margin-top: 4px; }
.fiche-motifs { margin-left: auto; max-width: 470px; width: 100%; }
.fiche-motifs .sur-libelle { font-size: 11px; font-weight: 600; color: var(--encre-6); margin-bottom: 9px; }
.motifs { display: flex; flex-direction: column; gap: 7px; }
.motif { display: flex; align-items: baseline; gap: 10px; background: var(--n-bg); border: 1px solid var(--n-bord); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; color: var(--encre-2); text-wrap: pretty; }
.section { margin-top: 24px; }
.section-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.section-titre { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.section-note { font-size: 12.5px; color: var(--encre-7); }
.carte-mesure { border-radius: 18px; padding: 16px 18px; box-shadow: var(--ombre-fine); }
.mesure-libelle { font-size: 11.5px; font-weight: 600; color: var(--encre-6); }
.mesure-valeur { font-size: 21px; font-weight: 500; margin-top: 8px; line-height: 1.25; letter-spacing: -.01em; color: var(--t-fg); font-style: var(--t-style); overflow-wrap: anywhere; }
.mesure-note { font-size: 12.5px; color: var(--encre-4); margin-top: 4px; text-wrap: pretty; }
.grille-frise { margin-top: 24px; display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: stretch; }
.grille-frise .section-note { display: block; margin-top: 5px; }
.frise { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin-top: 20px; }
.barre-frise { flex: 1; border-radius: 999px; min-height: 4px; }
.barre-frise.ton-recu { background: var(--sain-point); }
.barre-frise.ton-silence { background: var(--silence); }
.barre-frise.ton-aucun { background: var(--bordure); }
.frise-axe { display: flex; justify-content: space-between; font-size: 11px; color: var(--encre-7); margin-top: 9px; }
.position-valeur { font-size: 16px; margin-top: 14px; color: var(--sur-marine); }
.position-valeur.ton-absent { color: var(--sur-marine-3); font-style: italic; }
.position-note { font-size: 12.5px; color: var(--sur-marine-2); margin-top: 7px; line-height: 1.6; text-wrap: pretty; }
.position-pied { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--marine-trait); font-size: 12px; color: var(--sur-marine-4); line-height: 1.6; }

/* Agir */
.code-bloc { background: var(--surface-2); border: 1px dashed var(--bordure-tiret); border-radius: 14px; padding: 12px 16px; margin: 12px 0 8px; }
.code-libelle { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-6); }
.code { font-size: 34px; font-weight: 600; letter-spacing: .14em; color: var(--marine); margin-top: 4px; line-height: 1.2; }
.code-aide { font-size: 12.5px; color: var(--encre-4); margin-top: 6px; line-height: 1.55; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.actions form { margin: 0; }
.note-commande { font-size: 12.5px; color: var(--encre-4); line-height: 1.55; margin: -6px 0 12px; }
.liste-commandes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-commandes li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--bordure-3); font-size: 13px; }
.pastille-statut { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-fg); background: var(--n-bg); border: 1px solid var(--n-bord); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.commande-type { font-weight: 600; }
.commande-meta { grid-column: 2; font-size: 11.5px; color: var(--encre-7); }
.commande-detail { grid-column: 2; font-size: 12.5px; color: var(--encre-4); }

/* Tableaux */
.tableau-defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--encre-6); padding: 12px 22px; border-bottom: 1px solid var(--bordure-2); white-space: nowrap; }
td { padding: 11px 22px; border-bottom: 1px solid var(--bordure-3); white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }

/* ---- Enrôlement ---- */
.grille-enrolement { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.grille-enrolement .carte-tableau { margin-top: 0; }
.attente { padding: 18px 22px; border-bottom: 1px solid var(--bordure-3); display: flex; align-items: center; gap: 20px; }
.attente-identite { min-width: 0; flex: 1; }
.code-cadre { background: var(--surface-2); border: 1px dashed var(--bordure-tiret); border-radius: 14px; padding: 8px 14px; text-align: center; min-width: 150px; }
.code-cadre-vif { background: var(--bleu-clair); border-style: solid; border-color: var(--bleu-pale); }
.code-cadre-libelle { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-6); }
.code-cadre-valeur { font-size: 19px; font-weight: 600; letter-spacing: .14em; color: var(--marine); margin-top: 2px; }
.code-cadre .code { font-size: 24px; margin-top: 2px; }
.attente-validite { font-size: 12.5px; color: var(--encre-4); width: 200px; text-wrap: pretty; }
.attente form { margin: 0; }
.lien-fiche { font-size: 12.5px; white-space: nowrap; }

/* ---- Logiciel ---- */
.grille-logiciel { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; }
.grille-logiciel .carte-marine { padding: 24px; border-radius: 22px; }
.version-chiffre { font-size: 46px; font-weight: 600; margin-top: 10px; line-height: 1; letter-spacing: -.03em; }
.version-chiffre.absent { color: var(--sur-marine-3); }
.version-sous { font-size: 13px; color: var(--sur-marine-2); margin-top: 7px; }
.version-texte { margin-top: 20px; font-size: 13px; line-height: 1.65; color: var(--sur-marine-2); text-wrap: pretty; }
.repartition { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; }
.repartition-ligne { display: flex; align-items: center; gap: 14px; }
.repartition-version { font-size: 13.5px; font-weight: 500; width: 84px; }
.repartition-jauge { flex: 1; height: 22px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.repartition-remplissage { display: block; height: 100%; border-radius: 999px; min-width: 6px; }
.repartition-remplissage.ton-ajour { background: var(--sain-point); }
.repartition-remplissage.ton-retard { background: var(--surveil-point); }
.repartition-remplissage.ton-retards { background: var(--alerte-point); }
.repartition-remplissage.ton-aucune { background: var(--bordure-tiret); }
.repartition-nombre { font-size: 13px; width: 30px; text-align: right; }
.repartition-libelle { font-size: 12.5px; color: var(--encre-4); width: 200px; }
.details { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.details > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; font-size: 13px; }
.details dt { color: var(--encre-6); font-size: 12px; font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.refus { padding: 16px 22px; border-bottom: 1px solid var(--bordure-3); display: flex; align-items: center; gap: 18px; }
.refus .serie { font-size: 13px; width: 76px; flex: none; }
.refus-nom { font-size: 14.5px; font-weight: 600; width: 160px; flex: none; }
.refus-raison { font-size: 13.5px; color: var(--encre-2); flex: 1; text-wrap: pretty; }
.refus-quand { font-size: 12.5px; color: var(--encre-4); white-space: nowrap; }

/* ---- Refus apres coup (fiche et page d'un terminal) ---- */
.carte-refus { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.carte-refus-chiffre { min-width: 92px; }
.carte-refus-chiffre .mesure-valeur { margin-top: 0; }
.carte-refus-texte { flex: 1; min-width: 240px; margin: 0; }
.refus-ligne { padding: 15px 22px; border-bottom: 1px solid var(--bordure-3); display: flex; align-items: flex-start; gap: 18px; }
.refus-ligne.refus-vu { background: var(--surface-2); }
.refus-quand { width: 124px; flex: none; }
.refus-heure { font-size: 13.5px; font-weight: 500; color: var(--t-fg); font-style: var(--t-style); }
.refus-heure-note { font-size: 11.5px; color: var(--encre-7); margin-top: 2px; }
.refus-corps { flex: 1; min-width: 0; }
.refus-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.refus-operation { font-size: 14.5px; font-weight: 600; }
.refus-qui { font-size: 13.5px; color: var(--encre-2); }
.refus-repere { font-size: 11.5px; color: var(--encre-6); }
.refus-motif { font-size: 13px; color: var(--encre-4); margin-top: 5px; line-height: 1.55; text-wrap: pretty; overflow-wrap: anywhere; }
.refus-action { flex: none; }
.refus-action form { margin: 0; }

/* ---- Connexion ---- */
.corps-connexion { background: #fff; }
.connexion { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; }
.connexion-panneau { padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(120% 90% at 12% 8%, var(--marine-2) 0%, var(--marine) 52%, var(--marine-3) 100%); color: var(--sur-marine); }
.marque-grande .marque-icone { width: 30px; height: 30px; border-radius: 10px; }
.marque-grande .marque-icone span { width: 11px; height: 13px; }
.marque-grande .marque-nom { display: block; font-size: 13.5px; letter-spacing: .05em; }
.marque-sous { display: block; font-size: 11.5px; color: var(--sur-marine-3); letter-spacing: .08em; }
.connexion-accroche { margin: 38px 0; }
.connexion-accroche h1 { font-size: 32px; line-height: 1.18; font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; }
.connexion-accroche p { margin-top: 16px; font-size: 14.5px; line-height: 1.65; color: var(--sur-marine-2); text-wrap: pretty; }
.connexion-pied { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--sur-marine-5); letter-spacing: .06em; }
.point-vert { width: 6px; height: 6px; border-radius: 50%; background: var(--vert-vif); display: inline-block; }
.connexion-formulaire { padding: 56px 48px; display: flex; align-items: center; justify-content: center; }
.connexion-boite { width: 100%; max-width: 400px; }
.connexion-boite h2 { font-size: 28px; font-weight: 600; letter-spacing: -.015em; }
.connexion-sous { margin: 7px 0 30px; font-size: 13.5px; color: var(--encre-4); }
.connexion-boite .champ { margin-bottom: 16px; gap: 7px; }
.connexion-boite .champ input { height: 48px; padding: 0 15px; font-size: 14.5px; }
.connexion-boite .bouton-large { height: 50px; margin-top: 8px; font-size: 15px; }
.connexion-note { margin-top: 26px; font-size: 12.5px; line-height: 1.6; color: var(--encre-6); }

/* ---- Animations ---- */
@keyframes kdPulse { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes kdRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page > * { animation: kdRise .2s ease-out; }

/* ---- Tablette et étroit ---- */
@media (max-width: 1100px) {
  .barre { gap: 14px; padding: 0 16px; }
  .marque-section, .jeton-admin, .compte-nom { display: none; }
  .entete-page, .page { padding-left: 16px; padding-right: 16px; }
  .resume, .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: 1fr; }
  .grille-frise, .grille-2, .grille-enrolement, .grille-logiciel { grid-template-columns: 1fr; }
  .carte-fiche-tete { flex-direction: column; gap: 18px; }
  .fiche-motifs { margin-left: 0; max-width: none; }
  :root { --colonnes-liste: 1.6fr 2.2fr .9fr .9fr; }
  .rangee > :nth-child(n+5), .rangee-entete > :nth-child(n+5) { display: none; }
  .attente { flex-wrap: wrap; }
  .refus-ligne { flex-wrap: wrap; }
  .refus-quand { width: auto; }
  .refus-corps { flex-basis: 100%; }
  .connexion { grid-template-columns: 1fr; }
  .connexion-panneau { min-height: 320px; padding: 36px 32px; }
}
@media (max-width: 700px) {
  .onglets { display: none; }
  .resume, .grille-4 { grid-template-columns: 1fr; }
  :root { --colonnes-liste: 1fr; }
  .rangee > :nth-child(n+3), .rangee-entete { display: none; }
  .rangee > :nth-child(2) { display: flex; }
}