/* ══════════════════════════════════════════════════════════════
   Annotation des jets textuels — feuille de style
   Chaire de recherche, Université de Moncton
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Fonds */
  --fond: #f6f7f9;
  --surface: #ffffff;
  --surface-douce: #fbfcfd;

  /* Bordures */
  --bordure: #e2e6ec;
  --bordure-forte: #c9d0da;

  /* Texte */
  --texte: #161d26;
  --texte-doux: #5f6b7a;
  --texte-tres-doux: #8a94a2;

  /* Accent — bleu académique */
  --accent: #1b4f72;
  --accent-vif: #2a6a96;
  --accent-clair: #e9f1f7;
  --accent-bord: #c3d8e8;

  /* États */
  --succes: #1a6b45;
  --succes-clair: #e7f4ed;
  --succes-bord: #b5ddc7;
  --alerte: #8a5011;
  --alerte-clair: #fdf2e5;
  --alerte-bord: #eed3ae;
  --erreur: #93221e;
  --erreur-clair: #fcedec;
  --erreur-bord: #eeb9b6;
  --violet: #4a3f77;
  --violet-clair: #efedf7;
  --violet-bord: #d6d0e8;

  --rayon: 8px;
  --rayon-petit: 5px;
  --ombre: 0 1px 2px rgba(22, 29, 38, .05);
  --ombre-moyenne: 0 2px 8px rgba(22, 29, 38, .08);
  --ombre-forte: 0 8px 24px rgba(22, 29, 38, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-vif); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* ══ En-tête ═══════════════════════════════════════════════ */
.entete {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--ombre);
}

.marque { display: flex; align-items: center; gap: 10px; }

.marque-sceau {
  width: 32px; height: 32px;
  border-radius: var(--rayon-petit);
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-vif) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: -.3px;
  flex-shrink: 0;
}

.marque a {
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
  color: var(--texte);
  letter-spacing: -.2px;
  display: block;
  line-height: 1.2;
}

.sous-marque {
  display: block;
  font-size: 11px;
  color: var(--texte-tres-doux);
  font-weight: 400;
  letter-spacing: .1px;
}

.entete nav { display: flex; gap: 2px; flex: 1; }

.entete nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  color: var(--texte-doux);
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.entete nav a svg { width: 16px; height: 16px; opacity: .75; flex-shrink: 0; }
.entete nav a:hover { background: var(--fond); color: var(--texte); }
.entete nav a:hover svg { opacity: 1; }
.entete nav a.actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }
.entete nav a.actif svg { opacity: 1; }

.utilisateur { display: flex; align-items: center; gap: 12px; }

.pastille-utilisateur {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-clair);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 12px;
  border: 1px solid var(--accent-bord);
  text-transform: uppercase;
}

.nom-utilisateur { color: var(--texte-doux); font-size: 13px; }

.lien-bouton {
  background: none; border: none;
  color: var(--texte-tres-doux);
  cursor: pointer; font-size: 13px; padding: 0;
  font-family: inherit;
}
.lien-bouton:hover { color: var(--erreur); text-decoration: underline; }

/* ══ Mise en page ══════════════════════════════════════════ */
.contenu { max-width: 1180px; margin: 0 auto; padding: 28px 22px 72px; }
.contenu-large { max-width: none; padding: 20px 22px 72px; }

h1 { font-size: 24px; margin: 0 0 5px; letter-spacing: -.4px; font-weight: 650; }
h2 {
  font-size: 13px; margin: 32px 0 12px;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--texte-tres-doux); font-weight: 650;
}
h2:first-child { margin-top: 0; }

.description { color: var(--texte-doux); margin: 0 0 24px; max-width: 76ch; }

.entete-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.entete-page .description { margin-bottom: 0; }

/* ══ Cartes de statistiques ════════════════════════════════ */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 17px 18px;
  box-shadow: var(--ombre);
  transition: box-shadow .15s, transform .15s;
}

.carte-lien { text-decoration: none; color: inherit; display: block; }
.carte-lien:hover { box-shadow: var(--ombre-moyenne); transform: translateY(-1px); color: inherit; }

.carte .chiffre {
  font-size: 29px; font-weight: 650;
  letter-spacing: -1px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.carte .etiquette-carte {
  color: var(--texte-tres-doux);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 650;
  margin-bottom: 7px;
}

.carte .precision { color: var(--texte-doux); font-size: 12px; margin-top: 6px; }

.carte-accent { border-left: 3px solid var(--accent); }
.carte-succes { border-left: 3px solid var(--succes); }
.carte-alerte { border-left: 3px solid var(--alerte); }
.carte-violet { border-left: 3px solid var(--violet); }

/* ══ Graphique en barres ═══════════════════════════════════ */
.barres { display: flex; flex-direction: column; gap: 9px; }

.barre-ligne {
  display: grid;
  grid-template-columns: 108px 1fr 62px;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 3px 4px;
  border-radius: var(--rayon-petit);
}
.barre-ligne:hover { background: var(--surface-douce); color: inherit; }

.barre-nom { font-size: 12px; font-weight: 600; }

.barre-piste {
  display: block;               /* sans cela, la largeur ne s'applique pas */
  height: 9px;
  background: var(--fond);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--bordure);
}

.barre-valeur {
  display: block;               /* idem : un span en ligne ignore width */
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-vif) 100%);
  border-radius: 4px;
  min-width: 3px;
}

.barre-valeur.est-alerte { background: linear-gradient(90deg, #a35f16 0%, #c07a2a 100%); }
.barre-valeur.est-vide { background: linear-gradient(90deg, #574b8f 0%, #7166ae 100%); }
.barre-valeur.est-succes { background: linear-gradient(90deg, #1a6b45 0%, #2a8a5c 100%); }

.barre-chiffre {
  text-align: right; font-size: 12px;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

/* ══ Tableaux ══════════════════════════════════════════════ */
.cadre-tableau {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: auto;
  max-height: calc(100vh - 320px);
  box-shadow: var(--ombre);
}

.cadre-tableau-court { max-height: none; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }

thead th {
  position: sticky; top: 0;
  background: #eef1f5;
  border-bottom: 1px solid var(--bordure-forte);
  padding: 9px 11px;
  text-align: left;
  white-space: nowrap;
  z-index: 10;
  font-weight: 650;
  font-size: 12px;
  color: var(--texte-doux);
}

thead th a { text-decoration: none; color: var(--texte-doux); display: inline-flex; gap: 4px; align-items: center; }
thead th a:hover { color: var(--accent); }
thead th .fleche { color: var(--accent); font-size: 10px; }

tbody td {
  border-bottom: 1px solid var(--bordure);
  padding: 6px 11px;
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-douce); }
tbody tr.corrige { background: var(--succes-clair); }
tbody tr.corrige:hover { background: #dcefe4; }
tbody tr.corrige td:first-child { box-shadow: inset 3px 0 0 var(--succes); }

.cellule-longue {
  max-width: 250px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--texte-doux);
  cursor: zoom-in;
}

/* Au survol ou au clic, le contenu se déploie sur plusieurs lignes et
   agrandit la ligne du tableau. « overflow-wrap: anywhere » est
   indispensable : la frappe brute est une suite de caractères sans
   espaces, que le navigateur refuserait sinon de couper — elle
   déborderait alors sur les colonnes voisines. */
.cellule-longue:hover,
.cellule-longue.deploye {
  white-space: pre-wrap;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--texte);
}

.cellule-longue.deploye {
  cursor: zoom-out;
  background: var(--surface-douce);
  box-shadow: inset 2px 0 0 var(--accent);
}

.monospace { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 12px; }

/* Les identifiants courts ne doivent pas se couper sur deux lignes */
tbody td.monospace:not(.cellule-longue) { white-space: nowrap; }

/* ══ Jetons ════════════════════════════════════════════════ */
.jeton {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 650;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: .2px;
}

.jeton-neutre { background: #eef0f4; color: #45505f; border-color: #dce1e8; }
.jeton-alerte { background: var(--alerte-clair); color: var(--alerte); border-color: var(--alerte-bord); }
.jeton-vide   { background: var(--violet-clair); color: var(--violet); border-color: var(--violet-bord); }
.jeton-succes { background: var(--succes-clair); color: var(--succes); border-color: var(--succes-bord); }
.jeton-accent { background: var(--accent-clair); color: var(--accent); border-color: var(--accent-bord); }

.marque-modifie {
  display: inline-block;
  background: var(--alerte-clair);
  color: var(--alerte);
  border: 1px solid var(--alerte-bord);
  border-radius: 9px;
  font-size: 10px; font-weight: 650;
  padding: 1px 6px; margin-left: 4px;
  vertical-align: middle;
}

/* ══ Formulaires ═══════════════════════════════════════════ */
input[type=text], input[type=password], input[type=number], select, textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}

input:hover, select:hover, textarea:hover { border-color: var(--texte-tres-doux); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-vif);
  box-shadow: 0 0 0 3px rgba(42, 106, 150, .14);
}

label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 12px; color: var(--texte-doux); }
.champ { margin-bottom: 15px; }
.aide { color: var(--texte-tres-doux); font-size: 12px; margin-top: 4px; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--accent);
  border-radius: var(--rayon-petit);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, box-shadow .12s;
}

.bouton svg { width: 15px; height: 15px; }
.bouton:hover { background: #163f5c; color: #fff; box-shadow: var(--ombre-moyenne); }

.bouton-secondaire { background: var(--surface); color: var(--accent); border-color: var(--bordure-forte); }
.bouton-secondaire:hover { background: var(--accent-clair); color: var(--accent); border-color: var(--accent-bord); }

.bouton-danger { background: var(--surface); color: var(--erreur); border-color: var(--erreur-bord); }
.bouton-danger:hover { background: var(--erreur-clair); color: var(--erreur); }

.bouton-petit { padding: 4px 9px; font-size: 12px; }

/* ══ Panneaux ══════════════════════════════════════════════ */
.panneau {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 17px 18px;
  margin-bottom: 16px;
  box-shadow: var(--ombre);
}

.panneau-titre {
  font-size: 14px; font-weight: 650;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.panneau-titre svg { width: 17px; height: 17px; color: var(--accent); }

.ligne-filtres { display: flex; flex-wrap: wrap; gap: 11px; align-items: flex-end; }
.ligne-filtres .champ { margin-bottom: 0; }

.condition {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px; flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--surface-douce);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}
.condition select, .condition input { flex: 0 1 auto; }
.condition .valeur { flex: 1 1 200px; }

details.recherche-avancee { margin-top: 14px; border-top: 1px solid var(--bordure); padding-top: 12px; }
details.recherche-avancee summary {
  cursor: pointer; font-weight: 600; font-size: 13px;
  padding: 4px 0; user-select: none; color: var(--accent);
  list-style: none;
}
details.recherche-avancee summary::-webkit-details-marker { display: none; }
details.recherche-avancee summary::before { content: "▸ "; display: inline-block; transition: transform .15s; }
details.recherche-avancee[open] summary::before { content: "▾ "; }

/* ══ Pagination ════════════════════════════════════════════ */
.pagination {
  display: flex; gap: 5px; align-items: center;
  justify-content: center; padding: 18px 0; flex-wrap: wrap;
}

.pagination a, .pagination span {
  padding: 6px 11px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  text-decoration: none;
  background: var(--surface);
  font-size: 13px;
}

.pagination a:hover { background: var(--accent-clair); border-color: var(--accent-bord); }
.pagination .courant { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pagination .inactif { color: var(--texte-tres-doux); background: var(--fond); }

/* ══ Messages ══════════════════════════════════════════════ */
.messages { margin-bottom: 18px; }

.message {
  padding: 11px 15px;
  border-radius: var(--rayon);
  border: 1px solid;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.55;
  /* Volontairement en bloc : en flex, un <strong> deviendrait un element
     separe et le texte se casserait en colonnes etroites. */
  display: block;
}

.message-success { background: var(--succes-clair); border-color: var(--succes-bord); color: var(--succes); }
.message-error   { background: var(--erreur-clair); border-color: var(--erreur-bord); color: var(--erreur); }
.message-warning { background: var(--alerte-clair); border-color: var(--alerte-bord); color: var(--alerte); }
.message-info    { background: var(--accent-clair); border-color: var(--accent-bord); color: var(--accent); }

/* ══ Connexion ═════════════════════════════════════════════ */
.page-connexion {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1100px 550px at 50% -8%, #e6eef6 0%, transparent 62%),
    var(--fond);
}

.boite-connexion {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 34px 32px;
  width: 100%;
  max-width: 396px;
  box-shadow: var(--ombre-forte);
}

.connexion-sceau {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-vif) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
  margin-bottom: 16px;
}

.boite-connexion h1 { margin-bottom: 5px; font-size: 20px; }
.boite-connexion .description { margin-bottom: 22px; font-size: 13px; }
.boite-connexion input { width: 100%; padding: 9px 11px; }
.boite-connexion .bouton { width: 100%; justify-content: center; padding: 10px; margin-top: 4px; }

.mention-connexion {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--bordure);
  font-size: 11.5px; color: var(--texte-tres-doux);
  text-align: center; line-height: 1.5;
}

/* ══ Indicateur d'enregistrement ═══════════════════════════ */
.indicateur {
  position: fixed; right: 22px; bottom: 22px;
  padding: 10px 17px;
  border-radius: var(--rayon);
  font-weight: 600; font-size: 13px;
  box-shadow: var(--ombre-forte);
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 100;
  display: flex; align-items: center; gap: 8px;
}

.indicateur.visible { opacity: 1; transform: translateY(0); }
.indicateur.ok { background: var(--succes); color: #fff; }
.indicateur.erreur { background: var(--erreur); color: #fff; }

/* ══ Champs éditables du tableau ═══════════════════════════ */
td.editable select, td.editable input {
  width: 100%; min-width: 92px;
  border-color: transparent; background: transparent;
  padding: 4px 6px;
}

td.editable select:hover, td.editable input:hover {
  border-color: var(--bordure-forte); background: var(--surface);
}
td.editable select:focus, td.editable input:focus { background: var(--surface); }
td.editable input { min-width: 132px; }

.barre-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 13px; flex-wrap: wrap;
}

.compteur { color: var(--texte-doux); font-size: 13px; }
.compteur strong { color: var(--texte); font-size: 16px; font-variant-numeric: tabular-nums; }

/* ══ Journal d'exécution ═══════════════════════════════════ */
.journal {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.6;
  background: #151a21; color: #cdd5e0;
  padding: 14px 16px;
  border-radius: var(--rayon);
  max-height: 330px; overflow: auto;
  white-space: pre-wrap; margin: 0;
  border: 1px solid #232b35;
}

/* ══ État vide ═════════════════════════════════════════════ */
.etat-vide {
  text-align: center; padding: 44px 20px;
  color: var(--texte-doux);
}
.etat-vide svg { width: 36px; height: 36px; color: var(--bordure-forte); margin-bottom: 12px; }
.etat-vide p { margin: 0 0 5px; }
.etat-vide .aide { margin-top: 6px; }

/* ══ Pulsation « en cours » ════════════════════════════════ */
.point-actif {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-vif);
  margin-right: 7px;
  animation: pulsation 1.4s ease-in-out infinite;
}

@keyframes pulsation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.82); }
}

/* ══ Impression ════════════════════════════════════════════ */
@media print {
  .entete, .panneau form, .pagination, .barre-actions { display: none; }
  .cadre-tableau { max-height: none; border: none; box-shadow: none; }
  body { background: #fff; }
}


/* ══ Défilement horizontal au-dessus du tableau ════════════ */
.defilement-haut {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 2px;
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.defilement-haut .largeur-miroir { height: 1px; }

/* ══ Choix du nombre de lignes affichées ═══════════════════ */
.actions-droite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.choix-lignes { display: flex; align-items: center; gap: 7px; }

.choix-lignes label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--texte-doux);
  white-space: nowrap;
}

.choix-lignes select, .choix-lignes input { font-size: 13px; padding: 5px 7px; }
.choix-lignes input { width: 92px; }

/* ══ Les deux formats de fichier acceptés à l'import ══════ */
.formats-acceptes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.formats-acceptes .format {
  background: var(--surface-douce);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
}

.formats-acceptes .format-nom {
  font-weight: 650;
  color: var(--accent);
  margin-bottom: 5px;
  font-size: 13px;
}

.formats-acceptes p {
  font-size: 12.5px;
  color: var(--texte-doux);
  line-height: 1.45;
  margin: 0 0 6px;
}
.formats-acceptes p:last-child { margin-bottom: 0; }
.formats-acceptes .monospace { font-size: 11.5px; color: var(--texte); }

/* ══ Menu de masquage des colonnes ════════════════════════ */
.menu-colonnes { position: relative; }

.menu-colonnes summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--bordure-forte);
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}
.menu-colonnes summary::-webkit-details-marker { display: none; }
.menu-colonnes summary:hover { background: var(--accent-clair); }
.menu-colonnes summary svg { width: 15px; height: 15px; }
.menu-colonnes[open] summary { background: var(--accent-clair); }

.compte-masquees {
  background: var(--alerte);
  color: #fff;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 11px;
  min-width: 17px;
  text-align: center;
}

.panneau-colonnes {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 60;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 11px 13px;
}

.entete-colonnes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--bordure);
  font-size: 12px;
  font-weight: 650;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.lien-discret {
  background: none;
  border: none;
  color: var(--accent-vif);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.lien-discret:hover { text-decoration: underline; }

.liste-colonnes { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }

.liste-colonnes label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 3px;
}
.liste-colonnes label:hover { background: var(--surface-douce); }
.liste-colonnes input { margin: 0; cursor: pointer; }

.note-colonnes {
  font-size: 11.5px;
  color: var(--texte-tres-doux);
  line-height: 1.4;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--bordure);
}

/* ══ Grille de masquage dans la page Colonnes ═════════════ */
.grille-masquage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 14px;
}

.grille-masquage label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 3px;
}
.grille-masquage label:hover { background: var(--surface-douce); }
.grille-masquage input { margin: 0; cursor: pointer; }

/* ══ Fiches des colonnes personnalisées ═══════════════════ */
.liste-colonnes-perso { display: flex; flex-direction: column; gap: 10px; }

.fiche-colonne {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.fiche-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.rang-colonne { display: flex; flex-direction: column; gap: 2px; }

.fleche-ordre {
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: 3px;
  width: 24px;
  height: 17px;
  line-height: 1;
  font-size: 9px;
  color: var(--texte-doux);
  cursor: pointer;
  padding: 0;
}
.fleche-ordre:hover:not(:disabled) { background: var(--accent-clair); color: var(--accent); }
.fleche-ordre:disabled { opacity: .3; cursor: default; }

.fiche-titre { flex: 1; min-width: 180px; }
.fiche-titre strong { font-size: 14px; }

.fiche-meta {
  display: block;
  font-size: 12px;
  color: var(--texte-tres-doux);
  margin-top: 2px;
}

.fiche-actions { display: flex; gap: 6px; }

.fiche-modification {
  border-top: 1px solid var(--bordure);
  background: var(--surface-douce);
}

.fiche-modification summary {
  cursor: pointer;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-vif);
  user-select: none;
}
.fiche-modification summary:hover { background: var(--accent-clair); }
.fiche-modification form { padding: 4px 14px 14px; }