/* Supervision QHSE — thème sombre façon Airtable. Aucune police externe, aucun style en ligne (CSP stricte). */
:root {
  --fond: #1f2128;
  --fond-2: #262830;
  --fond-3: #2e313a;
  --fond-4: #383b46;
  --barre: #17191e;
  --grille: #15171c;
  --ligne: #1b1d23;
  --ligne-survol: #22252d;
  --entete: #22242b;
  --bord: #2c2f38;
  --bord-fort: #3a3e4a;
  --texte: #e6e8ee;
  --texte-2: #b0b5c1;
  --texte-3: #7c8291;
  --accent: #2d7ff9;
  --accent-doux: rgba(45, 127, 249, .18);
  --danger: #f8577f;
  --succes: #3bd16f;
  --alerte: #fcb400;
  --rayon: 6px;
  --ombre: 0 8px 28px rgba(0, 0, 0, .45);
  --h-ligne: 33px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--texte); font: 13px/1.4 var(--police); overflow: hidden; }
a { color: #7fb0ff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.cache { display: none !important; }
.muet { color: var(--texte-3); }
.petit { font-size: 12px; }
.gras { font-weight: 600; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* ------------------------------------------------------------ boutons et champs */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--fond-3); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon); padding: 6px 12px; color: var(--texte); white-space: nowrap; }
.btn:hover { background: var(--fond-4); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primaire:hover { background: #4b92fb; }
.btn.danger { color: var(--danger); }
.btn.plat { background: transparent; border-color: transparent; color: var(--texte-2); padding: 5px 8px; }
.btn.plat:hover { background: var(--fond-3); color: var(--texte); }
.btn.plat.actif { background: var(--accent-doux); color: #9cc3ff; }
.btn.plat.actif-vert { background: rgba(59, 209, 111, .14); color: #8ce8ad; }
.btn.plat.actif-violet { background: rgba(139, 70, 255, .2); color: #cdb0ff; }
.btn.plat.actif-orange { background: rgba(255, 111, 44, .18); color: #ffb48f; }
.saisie, select.saisie, textarea.saisie { background: var(--grille); border: 1px solid var(--bord-fort); border-radius: var(--rayon);
  padding: 7px 10px; width: 100%; outline: none; }
.saisie:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
textarea.saisie { resize: vertical; min-height: 70px; }
label.etiquette { display: block; font-size: 12px; color: var(--texte-2); margin: 10px 0 4px; }
.erreur-texte { color: var(--danger); min-height: 18px; margin-top: 8px; }
.ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.plein { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ structure */
#appli { height: 100%; display: flex; flex-direction: column; }
.barre-haut { height: 48px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--barre);
  border-bottom: 1px solid var(--bord); }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--texte); text-decoration: none; }
.logo .pastille-logo { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #20c9b5, #2d7ff9);
  display: grid; place-items: center; color: #fff; font-size: 13px; }
.nom-base { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.onglets-haut { display: flex; gap: 4px; margin-left: 10px; }
.onglets-haut a { color: var(--texte-2); text-decoration: none; padding: 6px 12px; border-radius: 16px; font-weight: 550; }
.onglets-haut a:hover { background: var(--fond-3); color: var(--texte); }
.onglets-haut a.actif { background: rgba(255, 255, 255, .1); color: #fff; }
.espace { flex: 1; }
.direct { display: flex; align-items: center; gap: 6px; color: var(--texte-3); font-size: 12px; }
.direct .point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); }
.direct.connecte .point { background: var(--succes); box-shadow: 0 0 0 3px rgba(59, 209, 111, .18); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #6b47c9; color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border: 0; flex: none; }
.avatar.petit { width: 22px; height: 22px; font-size: 10px; }
.contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* onglets des tables */
.barre-tables { height: 36px; flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px;
  background: #1a1c22; border-bottom: 1px solid var(--bord); overflow-x: auto; }
.barre-tables a { padding: 7px 14px; color: var(--texte-2); text-decoration: none; border-radius: 6px 6px 0 0; white-space: nowrap; }
.barre-tables a.actif { background: var(--fond); color: #fff; font-weight: 600; border: 1px solid var(--bord); border-bottom-color: var(--fond); margin-bottom: -1px; }

/* barre d'outils de la vue */
.barre-vue { min-height: 44px; flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  border-bottom: 1px solid var(--bord); background: var(--fond); flex-wrap: wrap; }
.barre-vue .nom-vue { font-weight: 650; display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.barre-vue .separateur { width: 1px; height: 20px; background: var(--bord-fort); margin: 0 4px; }
.recherche { position: relative; margin-left: auto; }
.recherche input { width: 220px; padding-left: 28px; }
.recherche .ico { position: absolute; left: 8px; top: 8px; color: var(--texte-3); }
.bandeau-filtre { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: rgba(45, 127, 249, .12);
  border-bottom: 1px solid var(--bord); color: #b9d3ff; }

.corps-vue { flex: 1; min-height: 0; display: flex; }
.laterale { width: 240px; flex: none; border-right: 1px solid var(--bord); background: var(--fond); padding: 10px 8px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.laterale h4 { margin: 8px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.laterale a, .laterale button.lien { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  color: var(--texte-2); text-decoration: none; background: none; border: 0; text-align: left; width: 100%; }
.laterale a:hover, .laterale button.lien:hover { background: var(--fond-3); color: var(--texte); }
.laterale a.actif { background: var(--accent-doux); color: #cfe1ff; font-weight: 600; }
.laterale .ico-vue { color: #6aa5ff; }
.zone { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* ------------------------------------------------------------ grille */
.grille { flex: 1; overflow: auto; background: var(--grille); position: relative; outline: none; }
.g-lignes { min-width: max-content; padding-bottom: 60px; }
.g-ligne { display: flex; height: var(--h-ligne); background: var(--ligne); border-bottom: 1px solid var(--bord); position: relative; }
.g-ligne:hover { background: var(--ligne-survol); }
.g-ligne:hover .g-num, .g-ligne:hover .g-cel.figee { background: var(--ligne-survol); }
.g-ligne.flash { animation: flash 2.2s ease-out; }
@keyframes flash { 0% { background: rgba(252, 180, 0, .28); } 100% { background: var(--ligne); } }
.g-entete { display: flex; height: 33px; position: sticky; top: 0; z-index: 6; background: var(--entete); border-bottom: 1px solid var(--bord-fort); }
.g-entete .g-cel { color: var(--texte-2); font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: default; user-select: none; background: var(--entete); }
.g-entete .g-cel .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.g-entete .g-cel .menu-champ { opacity: 0; border: 0; background: none; color: var(--texte-3); padding: 0 2px; }
.g-entete .g-cel:hover .menu-champ { opacity: 1; }
.g-entete .g-cel.survol-depot { box-shadow: inset 3px 0 0 var(--accent); }
.g-poignee { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.g-poignee:hover, .g-poignee.active { background: var(--accent); }
.g-cel { flex: none; padding: 0 8px; border-right: 1px solid var(--bord); overflow: hidden; display: flex; align-items: center;
  white-space: nowrap; text-overflow: ellipsis; position: relative; }
.g-cel .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hauteur-moyenne .g-cel, .hauteur-haute .g-cel, .hauteur-tres_haute .g-cel { align-items: flex-start; padding-top: 7px; }
.hauteur-moyenne .g-cel .txt, .hauteur-haute .g-cel .txt, .hauteur-tres_haute .g-cel .txt { white-space: normal; display: -webkit-box;
  -webkit-box-orient: vertical; overflow: hidden; }
.hauteur-moyenne .g-cel .txt { -webkit-line-clamp: 2; }
.hauteur-haute .g-cel .txt { -webkit-line-clamp: 4; }
.hauteur-tres_haute .g-cel .txt { -webkit-line-clamp: 6; }
.hauteur-moyenne .g-cel.wrap, .hauteur-haute .g-cel.wrap, .hauteur-tres_haute .g-cel.wrap { flex-wrap: wrap; align-content: flex-start; gap: 3px; }
.g-num { width: 64px; flex: none; color: var(--texte-3); font-size: 11px; display: flex; align-items: center; gap: 4px; padding-left: 10px;
  position: sticky; left: 0; z-index: 3; background: var(--ligne); border-right: 1px solid var(--bord); }
.g-entete .g-num { background: var(--entete); z-index: 7; }
.g-num .developper { opacity: 0; border: 0; background: none; color: var(--accent); padding: 2px; margin-left: auto; margin-right: 4px; }
.g-ligne:hover .g-num .developper { opacity: 1; }
.g-cel.figee { position: sticky; left: 64px; z-index: 3; background: var(--ligne); box-shadow: 2px 0 0 rgba(0, 0, 0, .35); font-weight: 500; }
.g-entete .g-cel.figee { z-index: 7; background: var(--entete); }
.g-ligne .g-num .barre-couleur { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.g-cel.selection { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 4; }
.g-cel.trouve { background: rgba(252, 180, 0, .16); }
.g-cel.nombre { justify-content: flex-end; }
.g-cel.lecture-seule { color: var(--texte-2); }
.g-cel a { color: #8fb9ff; }
.g-cel.case { justify-content: center; }
.case-coche { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--bord-fort); display: inline-grid; place-items: center; }
.case-coche.oui { background: var(--succes); border-color: var(--succes); color: #062; }
.g-ajout { display: flex; height: 32px; align-items: center; color: var(--texte-3); background: var(--ligne); border-bottom: 1px solid var(--bord);
  padding-left: 12px; cursor: pointer; position: sticky; left: 0; width: var(--l-visible, 100%); }
.g-ajout:hover { color: var(--texte); background: var(--ligne-survol); }
.g-groupe { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; background: #1d2027; border-bottom: 1px solid var(--bord);
  border-top: 10px solid var(--grille); cursor: pointer; position: sticky; left: 0; width: var(--l-visible, 100%); user-select: none; }
.g-groupe.niveau-1 { height: 36px; border-top-width: 4px; padding-left: 30px; background: #1b1e24; }
.g-groupe .chevron { transition: transform .15s; color: var(--texte-3); }
.g-groupe.replie .chevron { transform: rotate(-90deg); }
.g-groupe .libelle { color: var(--texte-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.g-groupe .compte { color: var(--texte-3); font-size: 12px; background: var(--fond-3); padding: 1px 8px; border-radius: 10px; }
.g-pied { padding: 10px 14px; color: var(--texte-3); position: sticky; left: 0; width: var(--l-visible, 100%); }
.vide-grille { position: sticky; left: 0; width: var(--l-visible, 100%); }
.vide-grille { padding: 60px 20px; text-align: center; color: var(--texte-3); }

/* éditeur de cellule */
.editeur { position: absolute; z-index: 30; background: var(--fond-2); border: 2px solid var(--accent); border-radius: 4px;
  box-shadow: var(--ombre); }
.editeur input, .editeur textarea { width: 100%; height: 100%; background: transparent; border: 0; outline: none; padding: 6px 8px; color: var(--texte); }
.editeur textarea { resize: none; min-height: 120px; line-height: 1.45; }

/* ------------------------------------------------------------ pastilles des listes (couleurs Airtable, thème sombre) */
.pastille { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 11px; font-size: 12px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; line-height: 20px; flex: none; }
.puce-lien { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; background: #24324a; color: #cfe0ff;
  font-size: 12px; margin-right: 4px; white-space: nowrap; }
.c-blueLight2 { background: #203a64; color: #d6e4ff; } .c-blueLight1 { background: #2b5191; color: #e8f0ff; } .c-blueBright { background: #2d7ff9; color: #fff; } .c-blueDark1 { background: #2750ae; color: #fff; }
.c-cyanLight2 { background: #19475a; color: #d2f2fe; } .c-cyanLight1 { background: #1a6684; color: #e6f8ff; } .c-cyanBright { background: #18bfff; color: #052433; } .c-cyanDark1 { background: #0b76b7; color: #fff; }
.c-tealLight2 { background: #174a40; color: #c8f7ec; } .c-tealLight1 { background: #156b5c; color: #e1fbf5; } .c-tealBright { background: #20d9d2; color: #052d2b; } .c-tealDark1 { background: #06a09b; color: #fff; }
.c-greenLight2 { background: #22471d; color: #d6f8ca; } .c-greenLight1 { background: #2f6a24; color: #e8fde0; } .c-greenBright { background: #20c933; color: #062a0a; } .c-greenDark1 { background: #338a17; color: #fff; }
.c-yellowLight2 { background: #54420f; color: #ffecbc; } .c-yellowLight1 { background: #7a5e0b; color: #fff4d6; } .c-yellowBright { background: #fcb400; color: #2e2100; } .c-yellowDark1 { background: #b87503; color: #fff; }
.c-orangeLight2 { background: #5a3018; color: #ffe3d6; } .c-orangeLight1 { background: #84411b; color: #fff0e8; } .c-orangeBright { background: #ff6f2c; color: #fff; } .c-orangeDark1 { background: #d74d26; color: #fff; }
.c-redLight2 { background: #5c2131; color: #ffdee7; } .c-redLight1 { background: #872c43; color: #fff0f4; } .c-redBright { background: #f82b60; color: #fff; } .c-redDark1 { background: #ba1e45; color: #fff; }
.c-pinkLight2 { background: #571f4a; color: #ffdcf7; } .c-pinkLight1 { background: #82296b; color: #ffeefb; } .c-pinkBright { background: #ff08c2; color: #fff; } .c-pinkDark1 { background: #b2158b; color: #fff; }
.c-purpleLight2 { background: #3b2a60; color: #efe5ff; } .c-purpleLight1 { background: #553b8c; color: #f6f0ff; } .c-purpleBright { background: #8b46ff; color: #fff; } .c-purpleDark1 { background: #6b1cb0; color: #fff; }
.c-grayLight2 { background: #393c45; color: #e9e9ea; } .c-grayLight1 { background: #4c505b; color: #f2f2f2; } .c-grayBright { background: #666; color: #fff; } .c-grayDark1 { background: #444; color: #fff; }
/* barre de couleur des lignes (« Colorer ») */
.b-blue { background: #4c8dff; } .b-cyan { background: #18bfff; } .b-teal { background: #20d9d2; } .b-green { background: #3bd16f; }
.b-yellow { background: #fcb400; } .b-orange { background: #ff8a4c; } .b-red { background: #f8577f; } .b-pink { background: #ff5ad0; }
.b-purple { background: #a073ff; } .b-gray { background: #8b8f99; }
.g-ligne.teinte-blue { background: #1b2232; } .g-ligne.teinte-cyan { background: #172530; } .g-ligne.teinte-teal { background: #17262a; }
.g-ligne.teinte-green { background: #19261d; } .g-ligne.teinte-yellow { background: #29251a; } .g-ligne.teinte-orange { background: #2a201b; }
.g-ligne.teinte-red { background: #2a1b21; } .g-ligne.teinte-pink { background: #291b27; } .g-ligne.teinte-purple { background: #211c2d; }
.g-ligne.teinte-gray { background: #202227; }

/* ------------------------------------------------------------ fenêtres, menus, panneaux */
.voile { position: fixed; inset: 0; background: rgba(5, 6, 9, .62); z-index: 50; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; }
.fenetre { background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: 10px; box-shadow: var(--ombre); width: 100%;
  max-width: 520px; padding: 20px 22px; }
.fenetre h2 { margin: 0 0 12px; font-size: 18px; }
.fenetre .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.secret-affiche { background: var(--grille); border: 1px dashed var(--alerte); border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace;
  word-break: break-all; margin: 10px 0; color: #ffe39a; user-select: all; }
.menu { position: fixed; z-index: 60; background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: 8px; box-shadow: var(--ombre);
  min-width: 200px; padding: 5px; max-height: 70vh; overflow-y: auto; }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 10px; border: 0; background: none;
  text-align: left; border-radius: 5px; color: var(--texte); text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button.focus { background: var(--fond-3); }
.menu hr { border: 0; border-top: 1px solid var(--bord); margin: 4px 0; }
.menu .danger { color: var(--danger); }
.menu .titre-menu { padding: 6px 10px 4px; font-size: 11px; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; }
.panneau { position: fixed; z-index: 55; background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: 8px; box-shadow: var(--ombre);
  padding: 12px; min-width: 340px; max-width: min(640px, calc(100vw - 20px)); max-height: 75vh; overflow-y: auto; }
.panneau h3 { margin: 0 0 10px; font-size: 13px; color: var(--texte-2); font-weight: 600; }
.ligne-cond { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ligne-cond select, .ligne-cond input { padding: 5px 8px; }
.ligne-cond .conj { width: 64px; flex: none; color: var(--texte-3); }
.liste-champs .item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 5px; }
.liste-champs .item:hover { background: var(--fond-3); }
.liste-champs .item .nom { flex: 1; }
.interrupteur { width: 28px; height: 16px; border-radius: 8px; background: var(--fond-4); position: relative; border: 0; flex: none; }
.interrupteur::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #aaa; transition: left .12s; }
.interrupteur.oui { background: var(--succes); }
.interrupteur.oui::after { left: 14px; background: #fff; }
.liste-choix .option { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.liste-choix .option:hover, .liste-choix .option.focus { background: var(--fond-3); }
.liste-choix .option .coche { width: 16px; color: var(--accent); }
.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #2a2d36; border: 1px solid var(--bord-fort); border-left: 3px solid var(--accent); padding: 9px 14px; border-radius: 6px;
  box-shadow: var(--ombre); max-width: 380px; animation: entree .2s ease-out; }
.toast.erreur { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--succes); }
@keyframes entree { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ fiche d'enregistrement */
.fiche { background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: 10px; box-shadow: var(--ombre); width: 100%; max-width: 1080px;
  height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.fiche-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.fiche-tete h2 { margin: 0; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-corps { flex: 1; min-height: 0; display: flex; }
.fiche-champs { flex: 1.6; overflow-y: auto; padding: 14px 24px 40px; }
.fiche-histo { flex: 1; overflow-y: auto; padding: 14px 18px; border-left: 1px solid var(--bord); background: #23252c; }
.fiche-histo h3 { margin: 0 0 12px; font-size: 13px; color: var(--texte-2); }
.f-champ { margin-bottom: 16px; }
.f-champ .f-nom { display: flex; align-items: center; gap: 6px; color: var(--texte-2); font-size: 12px; margin-bottom: 5px; }
.f-champ .f-val { min-height: 34px; }
.f-champ .f-val .saisie { background: var(--fond); }
.f-champ .f-val.lecture { padding: 7px 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte-2);
  white-space: pre-wrap; min-height: 34px; }
.f-select { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border: 1px solid var(--bord-fort); border-radius: var(--rayon);
  background: var(--fond); min-height: 34px; cursor: pointer; }
.f-select:hover { border-color: var(--texte-3); }
.f-select.desactive { cursor: default; }
.pj-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pj { position: relative; width: 96px; height: 72px; border-radius: 6px; border: 1px solid var(--bord-fort); background: var(--fond); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 4px; color: var(--texte-2); text-decoration: none; }
.pj img { width: 100%; height: 100%; object-fit: cover; }
.pj .retirer { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 50%; width: 20px; height: 20px; padding: 0; }
.vignette { height: 22px; width: 30px; border-radius: 3px; object-fit: cover; margin-right: 4px; border: 1px solid var(--bord-fort); }
.h-evt { display: flex; gap: 10px; margin-bottom: 14px; }
.h-evt .h-corps { flex: 1; min-width: 0; }
.h-evt .h-tete { font-size: 12px; color: var(--texte-2); }
.h-evt .h-tete b { color: var(--texte); }
.h-modif { margin-top: 5px; font-size: 12px; background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; padding: 7px 9px; }
.h-modif .h-champ { color: var(--texte-3); margin-bottom: 3px; }
.h-avant { text-decoration: line-through; color: #f39aad; word-break: break-word; }
.h-apres { color: #9fe6b9; word-break: break-word; }

/* ------------------------------------------------------------ pages : connexion, accueil, administration */
.page { flex: 1; overflow-y: auto; padding: 32px 24px; }
.page-centre { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 24px 16px; }
.carte { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 12px; padding: 26px 28px; width: 100%; max-width: 400px; box-shadow: var(--ombre); }
.carte h1 { margin: 0 0 4px; font-size: 20px; }
.carte .sous { color: var(--texte-3); margin-bottom: 18px; }
.carte .btn.primaire { width: 100%; justify-content: center; margin-top: 16px; padding: 9px; }
.grille-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 1100px; }
.tuile-base { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px; padding: 16px; display: flex; gap: 14px; align-items: center;
  text-decoration: none; color: var(--texte); }
.tuile-base:hover { border-color: var(--accent); }
.tuile-base .icone-base { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #11a39a, #1f6fe0); flex: none; }
.page h1 { font-size: 22px; margin: 0 0 18px; }
.onglets-page { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 18px; flex-wrap: wrap; }
.onglets-page button { background: none; border: 0; padding: 9px 14px; color: var(--texte-2); border-bottom: 2px solid transparent; }
.onglets-page button.actif { color: #fff; border-bottom-color: var(--accent); }
table.tableau { width: 100%; border-collapse: collapse; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
table.tableau th, table.tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
table.tableau th { color: var(--texte-3); font-weight: 600; font-size: 12px; background: var(--entete); }
.formulaire-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--fond-2); border: 1px solid var(--bord);
  padding: 14px; border-radius: 8px; margin-bottom: 16px; }
.formulaire-ligne > div { min-width: 180px; flex: 1; }
.cases { display: flex; flex-wrap: wrap; gap: 12px; }
.cases label { display: flex; align-items: center; gap: 6px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: var(--fond-4); color: var(--texte-2); }
.badge.vert { background: rgba(59, 209, 111, .16); color: #8ce8ad; } .badge.rouge { background: rgba(248, 87, 127, .16); color: #ff9db5; }
.badge.bleu { background: var(--accent-doux); color: #a8c8ff; }
.qr { background: #fff; padding: 8px; border-radius: 8px; width: 200px; height: 200px; }
.codes-secours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; font-family: ui-monospace, Consolas, monospace; }

/* ------------------------------------------------------------ tableau de bord */
.tdb { flex: 1; overflow-y: auto; padding: 26px 30px 60px; background: #1c1e24; }
.tdb h1 { margin: 0; font-size: 24px; }
.tdb .sous-titre { color: var(--texte-3); margin: 4px 0 20px; }
.tdb-filtres { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.tdb-filtres select { width: auto; min-width: 220px; }
.tdb-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tdb-carte { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px; padding: 16px; min-width: 0; }
.tdb-carte h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--texte); }
.tdb-carte.l2 { grid-column: span 2; } .tdb-carte.l3 { grid-column: span 3; } .tdb-carte.l4 { grid-column: span 4; } .tdb-carte.l6 { grid-column: span 6; }
.tdb-carte .graph { position: relative; height: 300px; }
.tdb-carte.tuile .chiffre { font-size: 46px; font-weight: 700; color: #fff; margin-top: 18px; }
.tdb-carte.tuile .legende { color: var(--texte-3); }
.tdb-astuce { color: var(--texte-3); font-size: 12px; margin-top: 8px; }

/* ------------------------------------------------------------ cartes (portable) */
.cartes-mobile { flex: 1; overflow-y: auto; padding: 10px; background: var(--grille); }
.carte-enreg { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; position: relative; overflow: hidden; }
.carte-enreg .titre { font-weight: 600; margin-bottom: 6px; }
.carte-enreg .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--texte-2); font-size: 12px; }
.carte-enreg .barre-couleur { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.groupe-mobile { padding: 10px 4px 6px; color: var(--texte-2); font-weight: 600; display: flex; gap: 8px; align-items: center; }

@media (max-width: 1100px) {
  .tdb-carte.l2, .tdb-carte.l3 { grid-column: span 3; }
  .tdb-carte.l4 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .g-lignes { min-width: 0; padding-bottom: 20px; }
  .carte-enreg .titre { overflow-wrap: anywhere; }
  .barre-haut { gap: 8px; padding: 0 8px; }
  .laterale { display: none; }
  .laterale.ouverte { display: flex; position: fixed; z-index: 45; top: 48px; bottom: 0; left: 0; box-shadow: var(--ombre); }
  .barre-vue .libelle-btn { display: none; }
  .recherche { margin-left: 0; flex: 1; }
  .recherche input { width: 100%; }
  .onglets-haut { margin-left: 0; }
  .nom-base .texte-base { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .direct .libelle-direct { display: none; }
  .fiche { height: 100%; max-width: none; border-radius: 0; }
  .voile.voile-fiche { padding: 0; }
  .fiche-corps { flex-direction: column; overflow-y: auto; }
  .fiche-champs, .fiche-histo { overflow: visible; flex: none; }
  .fiche-histo { border-left: 0; border-top: 1px solid var(--bord); }
  .tdb { padding: 16px; }
  .tdb-carte.l2, .tdb-carte.l3, .tdb-carte.l4 { grid-column: span 6; }
  .page { padding: 18px 14px; }
  .panneau { left: 10px !important; right: 10px; min-width: 0; }
}

/* ------------------------------------------------------------ activation par lien */
.carte-activation { max-width: 440px; }
.secret-affiche { user-select: all; cursor: text; overflow-wrap: anywhere; }
.carte-activation .saisie[readonly] { color: var(--texte-2); }
.regles-mdp { list-style: none; margin: 6px 0 2px; padding: 0; font-size: 12px; color: var(--texte-3); }
.regles-mdp li { padding-left: 18px; position: relative; line-height: 18px; }
.regles-mdp li::before { content: "○"; position: absolute; left: 2px; }
.regles-mdp li.ok { color: #8ce8ad; }
.regles-mdp li.ok::before { content: "✓"; }
.case-voir { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--texte-3); }
.carte-activation a.btn { margin-top: 8px; }