/* Vivier — interface.
   Identité IT Club : noir et or du logo. Les barres empilées du logo deviennent l'échelle d'avancement des profils.
   Titres en Bodoni Moda, texte en Instrument Sans, les deux hébergées ici (licence SIL OFL). */

@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("polices/instrument-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("polices/bodoni-moda-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("polices/bodoni-moda-latin-wght-italic.woff2") format("woff2");
}

:root {
  --noir: #000000;
  --encre: #1c1c1a;
  --gris: #5a6066;
  --trait: #d3d8dc;
  --fond: #eceff1;
  --surface: #ffffff;
  --or: #ceb73b;
  --or-fonce: #74640c;      /* texte doré lisible sur blanc */
  --or-pale: #f7f2d4;
  --petrole: #0d4a5d;       /* liens et repère de focus */
  --brique: #a3341f;
  --brique-pale: #fbe9e4;
  --texte: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --titre: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --gouttiere: clamp(1rem, 3vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 0.9375rem/1.5 var(--texte);
}

a { color: var(--petrole); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
/* Survol : :where() ôte tout poids à la règle. Un lien coloré par une classe (logo, menu, bouton, lien sur fond noir)
   garde sa couleur au survol. Sans cela, « Vivier » passait en noir sur l'en-tête noir. */
:where(a:hover) { color: var(--noir); }

h1 { font: 500 clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem)/1.1 var(--titre); margin: 0; letter-spacing: -0.005em; }
main > h1 { margin-bottom: 1.25rem; }
h1 small { font: 400 0.9375rem var(--texte); color: var(--gris); margin-left: 0.6rem; letter-spacing: 0; }
h2 { font: 600 1rem/1.3 var(--texte); margin: 0 0 0.8rem; }
h3 { font: 600 1rem/1.3 var(--texte); margin: 0; }
p { margin: 0 0 0.6rem; }
em { color: var(--gris); }
code { font-size: 0.9em; background: var(--fond); padding: 0.05em 0.3em; border-radius: 3px; }

:focus-visible { outline: 3px solid var(--petrole); outline-offset: 2px; }
.entete :focus-visible, .porte :focus-visible { outline-color: var(--or); }

.evitement { position: absolute; left: -999rem; top: 0; background: var(--or); color: var(--noir); padding: 0.6rem 1rem; z-index: 10; font-weight: 600; }
.evitement:focus { left: 0; }
[hidden], .cachee { display: none !important; }

/* En-tête ----------------------------------------------------------------
   Une seule ligne, fixe en haut de page : la marque, cinq rubriques, le sous-menu Gestion,
   puis la recherche, le bouton Importer et le menu du compte. */
.entete { position: sticky; top: 0; z-index: 30; background: var(--noir); color: #fff; padding: 0 var(--gouttiere); display: flex; align-items: center; gap: 1.75rem; min-height: 3.25rem; view-transition-name: entete; }
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marque { display: flex; align-items: center; gap: 0.65rem; color: #fff; text-decoration: none; }
.marque img { height: 24px; width: auto; display: block; }
.marque span { font: italic 500 1.3rem/1 var(--titre); padding-left: 0.65rem; border-left: 1px solid #4a4a4a; transition: color 0.12s; }
.marque:hover { color: #fff; }
.marque:hover span { color: var(--or); }
.menu-bouton { display: none; }

.entete-menu { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.entete nav { display: flex; align-items: stretch; gap: 0 1.35rem; flex: 1; font-size: 0.9375rem; }
.entete nav > a, .menu-plus > summary {
  display: flex; align-items: center; gap: 0.4rem; min-height: 3.25rem; color: #cfcfcf; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent; transition: color 0.12s, box-shadow 0.12s;
}
.entete nav > a:hover, .menu-plus > summary:hover, .menu-plus[open] > summary { color: #fff; }
.entete nav > a[aria-current], .menu-plus.actif > summary { color: #fff; box-shadow: inset 0 -3px 0 var(--or); }
.pastille { background: var(--or); color: var(--noir); border-radius: 999px; padding: 0 0.42rem; font-size: 0.75rem; font-weight: 700; line-height: 1.5; }

/* Sous-menus : Gestion et compte */
.menu-plus { position: relative; margin: 0; }
.menu-plus > summary { list-style: none; cursor: pointer; font-weight: 400; padding: 0; margin: 0; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus > summary::after { content: ""; width: 0.36rem; height: 0.36rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.15s; }
.menu-plus[open] > summary::after { transform: translateY(0.08rem) rotate(225deg); }
.menu-plus-liste {
  position: absolute; left: -1rem; top: 100%; z-index: 40; min-width: 13.5rem; display: grid; padding: 0.35rem;
  background: #141414; border: 1px solid #333; border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  animation: derouler 0.14s ease-out;
}
.menu-plus-liste a, .menu-plus-liste .lien {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: 2.4rem; padding: 0.4rem 0.7rem;
  color: #dedede; text-decoration: none; text-align: left; border-radius: 4px; font-size: 0.9375rem;
}
.menu-plus-liste a:hover, .menu-plus-liste .lien:hover { background: #262626; color: #fff; }
.menu-plus-liste a[aria-current] { color: #fff; box-shadow: inset 3px 0 0 var(--or); }
@keyframes derouler { from { opacity: 0; transform: translateY(-4px); } }

/* Recherche, import, compte */
.recherche-rapide { display: flex; position: relative; }
.recherche-rapide input[type="search"] {
  width: 13rem; min-height: 2.15rem; padding: 0.3rem 2.3rem 0.3rem 0.75rem; font: inherit; font-size: 0.9375rem; color: #fff;
  background: #1c1c1c; border: 1px solid #4a4a4a; border-radius: 999px; transition: width 0.18s ease, border-color 0.12s, background 0.12s;
}
.recherche-rapide input[type="search"]::placeholder { color: #9c9c9c; }
.recherche-rapide input[type="search"]:hover { border-color: #777; }
.recherche-rapide input[type="search"]:focus { width: 19rem; background: #000; border-color: var(--or); outline: 0; }
.recherche-rapide button { position: absolute; right: 0.15rem; top: 50%; transform: translateY(-50%); min-height: 0; width: 1.9rem; height: 1.9rem; padding: 0; background: none; border: 0; border-radius: 50%; color: #cfcfcf; }
.recherche-rapide button:hover { background: #2a2a2a; color: var(--or); }
.recherche-rapide svg { width: 1rem; height: 1rem; display: block; }
.bouton.bouton-entete { min-height: 2.15rem; padding: 0.3rem 0.95rem; font-size: 0.9375rem; white-space: nowrap; }
.bouton.bouton-entete[aria-current] { background: #fff; border-color: #fff; }

.menu-compte > summary { gap: 0.5rem; }
.menu-compte .initiales { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid #6a6a6a; font-size: 0.75rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; transition: border-color 0.12s; }
.menu-compte > summary:hover .initiales, .menu-compte[open] .initiales, .menu-compte.actif .initiales { border-color: var(--or); }
.menu-compte.actif > summary { box-shadow: none; }
.menu-compte .menu-plus-liste { left: auto; right: -0.5rem; min-width: 15rem; }
.compte-qui { margin: 0; padding: 0.55rem 0.7rem 0.6rem; border-bottom: 1px solid #2c2c2c; color: #fff; font-weight: 600; line-height: 1.3; }
.compte-qui small { display: block; color: #9c9c9c; font-weight: 400; font-size: 0.8125rem; }
.compte-langue { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.7rem; color: #dedede; font-size: 0.9375rem; }
.menu-plus-liste .sortie form { display: contents; }
.menu-plus[open] > summary { margin-bottom: 0; }
.menu-plus-liste .lien { background: none; border: 0; font-weight: 400; cursor: pointer; }
.menu-plus-liste .sortie { border-top: 1px solid #2c2c2c; margin-top: 0.25rem; padding-top: 0.25rem; }
.menu-plus-liste .sortie .lien { text-decoration: none; }

main { padding: 1.5rem var(--gouttiere) 3rem; max-width: 100rem; margin: 0 auto; }

/* Page de connexion ------------------------------------------------------ */
body.accueil { background: var(--noir); color: #fff; min-height: 100vh; display: grid; place-items: center; }
body.accueil main { width: 100%; max-width: 24rem; padding: 2rem 1.25rem; }
.porte { text-align: center; }
.porte img { width: 14rem; max-width: 70%; height: auto; }
.porte-nom { font: italic 500 3.25rem/1 var(--titre); margin: 1.4rem 0 0.4rem; color: #fff; }
.porte-role { color: #bdbdbd; margin-bottom: 2rem; }
.porte form { text-align: left; }
.porte label { color: #e6e6e6; }
.porte input[type="text"], .porte input[type="password"] { background: #151515; border-color: #555; color: #fff; }
.porte button { margin-top: 0.4rem; }
.porte .flash { text-align: left; }

/* Blocs ------------------------------------------------------------------ */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 6px; padding: 1.15rem 1.3rem; margin: 0 0 1rem; }
.carte.etroit { max-width: 28rem; margin-left: auto; margin-right: auto; }
.carte.etroit.gauche { margin-left: 0; }
.carte.moyen { max-width: 56rem; margin-left: auto; margin-right: auto; }
.carte.attention { border-left: 4px solid var(--or); }
.carte.mise-en-avant { border-top: 4px solid var(--or); }
.carte > :last-child { margin-bottom: 0; }
.carte ul { margin: 0; padding-left: 1.1rem; }
.carte h1 + .aide { margin-top: 0.5rem; }
.carte > h1 { margin-bottom: 1rem; }

.barre-titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.fil { margin: 0 0 0.9rem; font-size: 0.875rem; color: var(--gris); }
.aide, .vide { color: var(--gris); font-size: 0.875rem; max-width: 70ch; }
.centre { text-align: center; }
.retard { color: var(--brique); font-weight: 600; }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr); gap: 1rem; align-items: start; }
.deux-colonnes.inverse { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); }
.deux-egales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; align-items: start; }
.deux-colonnes > *, .deux-egales > * { min-width: 0; }
.deux-egales > .carte { margin: 0; }

/* Formulaires ------------------------------------------------------------ */
.pile { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.7rem; font-weight: 400;
  background: #fff; border: 1px solid #98a1a8; border-radius: 4px;
}
textarea { min-height: 5rem; resize: vertical; }
input[type="file"] { font-weight: 400; max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 0.7rem; padding: 0.45rem 0.8rem; cursor: pointer;
  background: #fff; border: 1px solid var(--encre); border-radius: 4px;
}

button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.6rem;
  padding: 0.5rem 1.1rem; cursor: pointer; text-decoration: none; text-align: center; font-weight: 600; line-height: 1.2;
  background: var(--or); color: var(--noir); border: 1px solid var(--or); border-radius: 4px;
}
button:hover, .bouton:hover { background: #e0cb55; border-color: #e0cb55; color: var(--noir); }
button.secondaire, .bouton.secondaire { background: #fff; border-color: var(--encre); color: var(--encre); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--encre); color: #fff; }
button.dangereux { background: #fff; border-color: var(--brique); color: var(--brique); }
button.dangereux:hover { background: var(--brique); color: #fff; }
button.lien { min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--petrole); font-weight: 400; text-decoration: underline; text-underline-offset: 0.15em; }
button.lien:hover { background: none; color: var(--noir); }
button[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; font-size: 0.875rem; }
td.actions-ligne { justify-content: flex-end; }
.actions-ligne form { display: inline; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin: 0 0 1rem; }
.filtres label { min-width: 10rem; flex: 0 1 12rem; }
.filtres label.large { flex: 1 1 18rem; }
.filtres .fin { margin-left: auto; }
.barre-titre .filtres { margin: 0; flex: 1 1 28rem; justify-content: flex-end; }

.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.champs .large { grid-column: 1 / -1; }

details { margin: 0 0 0.8rem; }
summary { cursor: pointer; color: var(--petrole); font-weight: 600; padding: 0.3rem 0; }
details[open] summary { margin-bottom: 0.7rem; }
.danger { border-top: 1px solid var(--trait); padding-top: 0.9rem; }

/* Messages --------------------------------------------------------------- */
.flash { padding: 0.7rem 0.95rem; margin: 0 0 1rem; border-radius: 4px; border-left: 4px solid var(--petrole); background: #e4eef1; color: var(--encre); }
.flash-succes { border-left-color: #2e7d4f; background: #e5f2ea; }
.flash-erreur { border-left-color: var(--brique); background: var(--brique-pale); }
.flash-info { border-left-color: var(--or); background: var(--or-pale); }
.flash ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* Tableaux et listes ----------------------------------------------------- */
.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--gris); }
th, td { padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
td small, li small { color: var(--gris); font-size: 0.8125rem; }

.grille { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0 0 1rem; align-items: baseline; }
.grille.serre { grid-template-columns: 6.5rem minmax(0, 1fr); }
.grille dt { color: var(--gris); font-size: 0.875rem; }
.grille dd { margin: 0; overflow-wrap: anywhere; }
ul.simple { list-style: none; padding: 0 !important; margin: 0 0 0.9rem; display: grid; gap: 0.6rem; }
ul.simple small { display: block; }

/* Repères : séniorité, statut, échelle d'avancement ---------------------- */
.badge { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid #98a1a8; border-radius: 3px; font-size: 0.75rem; font-weight: 600; color: var(--encre); background: #fff; white-space: nowrap; }
.badge-expert { background: var(--noir); border-color: var(--noir); color: var(--or); }
.badge-confirme { background: var(--or-pale); border-color: #cbbb62; color: #4d4204; }
.badge-junior { color: var(--gris); }
.etat { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; white-space: nowrap; }

.echelle { display: inline-grid; gap: 2px; flex: none; vertical-align: middle; }
.echelle i { display: block; width: 14px; height: 2px; background: #c4cace; }
.echelle i.plein { background: var(--noir); }
.echelle-refus i:last-child { background: var(--brique); }
.echelle-grande { gap: 4px; }
.echelle-grande i { width: 34px; height: 5px; }
.echelle-grande i.plein { background: var(--or); box-shadow: 0 0 0 1px #b8a22f inset; }

.technos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0; }
.technos span { background: var(--fond); border-radius: 3px; padding: 0.05rem 0.45rem; font-size: 0.8125rem; }
.technos span.trouve { background: var(--or); color: var(--noir); font-weight: 600; }
.technos-ligne { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--gris); }

/* Kanban ----------------------------------------------------------------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.75rem, 1fr); gap: 0.9rem; overflow-x: auto; padding: 0.25rem 0 1.5rem; align-items: start; scroll-snap-type: x proximity; }
.colonne { min-width: 0; scroll-snap-align: start; }
.colonne h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--noir); font-size: 0.9375rem; line-height: 1.2; min-height: 3.1rem; }
.colonne-non_retenu h2 { border-bottom-color: var(--brique); }
.nom-colonne { flex: 1; }
.compteur { font: 500 1.25rem/1 var(--titre); color: var(--gris); }
.cartes { list-style: none; margin: 0; padding: 0; min-height: 5rem; display: grid; gap: 0.5rem; align-content: start; }
.fiche { background: var(--surface); border: 1px solid var(--trait); border-radius: 4px; padding: 0.65rem 0.75rem; }
.kanban[data-modifiable="1"] .fiche { cursor: grab; }
.kanban[data-modifiable="1"] .fiche:hover { border-color: var(--encre); }
.fiche > a { font-weight: 600; color: var(--encre); text-decoration: none; }
.fiche > a:hover { text-decoration: underline; }
.fiche .poste { margin: 0.1rem 0 0.45rem; color: var(--gris); font-size: 0.875rem; line-height: 1.35; }
.fiche .meta { margin: 0; font-size: 0.8125rem; display: flex; gap: 0.5rem; align-items: center; }
.fiche .motif { margin: 0.5rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--trait); font-size: 0.8125rem; color: var(--brique); }
.fantome { opacity: 0.35; }

/* Fiche profil ----------------------------------------------------------- */
.entete-profil { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.identite-profil { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.sous-titre { margin: 0.45rem 0 0; color: var(--gris); display: flex; gap: 0.3rem 0.9rem; align-items: center; flex-wrap: wrap; }
.exports { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.barre-statut { margin-bottom: 1rem; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: 6px; }
.statut-form { display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap; }
.statut-form label { flex: 0 1 16rem; }
.statut-form label + label { flex: 1 1 16rem; }

.experience { padding: 0.9rem 0; border-top: 1px solid var(--trait); }
.experience:first-of-type { border-top: 0; padding-top: 0; }
.experience:last-child { padding-bottom: 0; }
.experience p { margin: 0.3rem 0 0; max-width: 75ch; }
.periode { font-size: 0.8125rem; color: var(--or-fonce); font-weight: 600; margin: 0 0 0.15rem !important; }
.employeur { color: var(--gris); }

.commentaire { border-top: 1px solid var(--trait); padding-top: 0.7rem; margin-top: 0.7rem; }
.commentaire p { margin: 0; }
.auteur { font-size: 0.8125rem; color: var(--gris); margin-bottom: 0.15rem !important; }
.historique { list-style: none; padding: 0 !important; margin: 0 0 0.8rem; display: grid; gap: 0.55rem; font-size: 0.875rem; }
.historique span { display: block; font-size: 0.8125rem; color: var(--gris); }

.groupe-mots { margin: 0.7rem 0 0.3rem; font-size: 0.8125rem; color: var(--gris); }
.mots { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0 !important; }
.mots li { display: inline-flex; align-items: center; background: var(--fond); border-radius: 3px; padding: 0.1rem 0.15rem 0.1rem 0.5rem; font-size: 0.8125rem; }
.mots li.manuel { background: var(--or-pale); }
.mots form { display: inline-flex; }
.mots button { min-height: 1.5rem; min-width: 1.5rem; padding: 0; background: none; border: 0; color: var(--gris); font-weight: 700; }
.mots button:hover { background: none; color: var(--brique); }
.ajout-mot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) auto; gap: 0.5rem; align-items: end; margin-top: 1rem; }

/* Recherche -------------------------------------------------------------- */
.resultats { list-style: none; margin: 0; padding: 0; }
.resultats .carte { margin-bottom: 0.6rem; padding: 0.9rem 1.2rem; }
.resultat-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; flex-wrap: wrap; }
.resultats .nom { font: 500 1.35rem/1.2 var(--titre); color: var(--encre); text-decoration: none; }
.resultats .nom:hover { text-decoration: underline; }
.resultats .sous-titre { font-size: 0.875rem; margin-top: 0.3rem; }

/* Comptes ---------------------------------------------------------------- */
.comptes { list-style: none; margin: 0; padding: 0; }
.comptes .carte.inactif { background: #f6f7f8; }
.compte-nom { font-weight: 600; font-size: 1.0625rem; margin: 0 0 0.2rem; }
.compte-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; color: var(--gris); font-size: 0.875rem; margin-bottom: 0.7rem; }
.compte-meta strong { color: var(--encre); }

/* Tableau de bord -------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; margin: 0 0 1.25rem; background: var(--noir); color: #fff; border-radius: 6px; overflow: hidden; }
.chiffres div { padding: 1.1rem 1.3rem 1.2rem; border-left: 1px solid #333; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.4rem; }
.chiffres div:first-child { border-left: 0; }
.chiffres dt { color: #c9c9c9; font-size: 0.875rem; }
.chiffres dt a { color: inherit; }
.chiffres dd { order: -1; margin: 0; font: 500 3rem/1 var(--titre); color: var(--or); font-variant-numeric: lining-nums; }

.mesures th { color: var(--encre); font-size: 0.9375rem; font-weight: 400; white-space: nowrap; width: 1%; vertical-align: middle; }
.mesures th:has(.echelle) { position: relative; padding-left: 1.6rem; }
.mesures th .echelle { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.mesures td { vertical-align: middle; }
.mesures .nombre { width: 1%; font-weight: 600; }
.mesures .nombre small { font-weight: 400; margin-left: 0.3rem; }
.barre { display: block; height: 0.6rem; background: var(--fond); min-width: 4rem; }
.barre span { display: block; height: 100%; background: var(--noir); }
.l0 { width: 0; } .l1 { width: 5%; } .l2 { width: 10%; } .l3 { width: 15%; } .l4 { width: 20%; } .l5 { width: 25%; }
.l6 { width: 30%; } .l7 { width: 35%; } .l8 { width: 40%; } .l9 { width: 45%; } .l10 { width: 50%; }
.l11 { width: 55%; } .l12 { width: 60%; } .l13 { width: 65%; } .l14 { width: 70%; } .l15 { width: 75%; }
.l16 { width: 80%; } .l17 { width: 85%; } .l18 { width: 90%; } .l19 { width: 95%; } .l20 { width: 100%; }

/* Rapport ---------------------------------------------------------------- */
.rapport h2 { font: 500 1.75rem/1.15 var(--titre); margin: 0 0 1rem; }
.rapport h3 { font: 600 1.0625rem/1.3 var(--texte); margin: 1.5rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--or); }
.rapport h4, .rapport h5 { font-size: 1rem; margin: 1rem 0 0.3rem; }
.rapport p, .rapport li { max-width: 75ch; }
.rapport ul, .rapport ol { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.rapport pre { background: var(--fond); padding: 0.7rem; border-radius: 4px; overflow-x: auto; }
.rapport table { margin-bottom: 1rem; }

dialog { border: 1px solid var(--encre); border-radius: 6px; padding: 1.3rem; width: min(27rem, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

/* Écrans étroits --------------------------------------------------------- */
@media (max-width: 1180px) {
  .entete { display: block; position: static; }
  .entete-barre { min-height: 3.25rem; }
  .menu-bouton {
    display: inline-flex; min-height: 2.15rem; padding: 0.25rem 0.9rem;
    background: none; border: 1px solid #777; color: #fff;
  }
  .menu-bouton:hover { background: #222; border-color: #fff; color: #fff; }
  .menu-bouton[aria-expanded="true"] { background: var(--or); border-color: var(--or); color: var(--noir); }
  .entete-menu { display: none; flex-direction: column; align-items: stretch; gap: 0.8rem; padding: 0.2rem 0 1.1rem; }
  .entete-menu.ouvert { display: flex; animation: derouler 0.16s ease-out; }
  .entete nav { flex-direction: column; gap: 0; font-size: 1rem; }
  .entete nav > a, .menu-plus > summary { min-height: 2.9rem; border-bottom: 1px solid #2c2c2c; box-shadow: inset 3px 0 0 transparent; justify-content: space-between; }
  .entete nav > a[aria-current], .menu-plus.actif > summary { box-shadow: inset 3px 0 0 var(--or); padding-left: 0.75rem; }
  .menu-plus > summary::after { margin-right: 0.3rem; }
  .menu-plus-liste, .menu-compte .menu-plus-liste { position: static; min-width: 0; border: 0; box-shadow: none; background: none; padding: 0.2rem 0 0.4rem 0.75rem; animation: none; }
  .recherche-rapide input[type="search"], .recherche-rapide input[type="search"]:focus { flex: 1; width: auto; min-height: 2.6rem; }
  .bouton.bouton-entete { min-height: 2.6rem; }
  .menu-compte > summary { border-bottom: 0; border-top: 1px solid #2c2c2c; }
  .menu-compte .nom-compte { flex: 1; }
}

@media (max-width: 900px) {
  .deux-colonnes, .deux-colonnes.inverse { grid-template-columns: minmax(0, 1fr); }
  .kanban { grid-auto-columns: min(82vw, 20rem); scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
  .colonne h2 { min-height: 0; }
}

@media (max-width: 640px) {
  .carte { padding: 1rem; }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .ajout-mot { grid-template-columns: minmax(0, 1fr); }
  .grille, .grille.serre { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .grille dd { margin-bottom: 0.5rem; }
  .filtres label, .filtres label.large, .statut-form label, .statut-form label + label { flex: 1 1 100%; }
  .filtres > button, .filtres > .bouton, .statut-form > button { flex: 1 1 100%; }
  .filtres .fin { margin-left: 0; }
  .exports { width: 100%; }
  .exports .bouton { flex: 1 1 calc(50% - 0.25rem); }
  .actions > * { flex: 1 1 auto; }
  .echelle-grande i { width: 24px; height: 4px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres div { border-left: 0; border-top: 1px solid #333; }
  .chiffres div:nth-child(-n+2) { border-top: 0; }
  .chiffres div:nth-child(even) { border-left: 1px solid #333; }
  .chiffres div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .chiffres dd { font-size: 2.4rem; }
  .barre-titre .filtres label { flex: 1 1 40%; min-width: 0; }
  .mesures th { white-space: normal; }
  .barre { min-width: 2.5rem; }
  th, td { padding-right: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .entete, .filtres, .exports, .barre-statut form { display: none; }
  body { background: #fff; }
}

/* Portraits -------------------------------------------------------------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--fond); }
.avatar-vide { font-size: 0.75rem; font-weight: 600; color: var(--gris); border: 1px solid var(--trait); letter-spacing: 0.02em; }
.avatar-moyen { width: 3.5rem; height: 3.5rem; }
.avatar-moyen.avatar-vide { font-size: 1.05rem; }
.avatar-grand { width: 6rem; height: 6rem; border-radius: 6px; }
.avatar-grand.avatar-vide { font: 500 2rem var(--titre); }
.fiche-tete { display: flex; gap: 0.6rem; align-items: flex-start; }
.fiche-tete > div { min-width: 0; }
.fiche-tete a { font-weight: 600; color: var(--encre); text-decoration: none; }
.fiche-tete a:hover { text-decoration: underline; }
.resultat { display: flex; gap: 1rem; align-items: flex-start; }
.resultat-corps { flex: 1; min-width: 0; }
.relecture { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.relecture .grille { flex: 1 1 20rem; }
.relecture-photo { display: grid; gap: 0.5rem; justify-items: start; }
label.case { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; }
label.case input { width: 1.1rem; height: 1.1rem; }

/* Choix de la langue ----------------------------------------------------- */
.langues { display: inline-flex; border: 1px solid #555; border-radius: 4px; overflow: hidden; }
.langues button { min-height: 1.75rem; padding: 0.05rem 0.55rem; background: none; border: 0; border-radius: 0; color: #d9d9d9; font-size: 0.8125rem; font-weight: 600; }
.langues button:hover { background: #2a2a2a; color: #fff; }
.langues button[aria-pressed="true"] { background: var(--or); color: var(--noir); }
.langues-accueil { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 640px) {
  .avatar-grand { width: 4.5rem; height: 4.5rem; }
  .resultat { gap: 0.7rem; }
  .avatar-moyen { width: 2.75rem; height: 2.75rem; }
}

/* Version 1.4 : suivi, besoins, lot, sauvegarde -------------------------- */
input[type="date"], input[type="time"] {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.7rem; font-weight: 400;
  background: #fff; border: 1px solid #98a1a8; border-radius: 4px;
}
h2 small { font-weight: 400; color: var(--gris); margin-left: 0.3rem; }
.barre-titre h2 { margin: 0; }
.carte.inactif { background: #f6f7f8; }
.actions.gauche { justify-content: flex-start; }
details.ajout { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--trait); }
.depot { margin-bottom: 1rem; }

/* Repères sur les cartes du Kanban */
.fiche .reperes { margin: 0.45rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--trait); font-size: 0.8125rem; display: grid; gap: 0.1rem; color: var(--or-fonce); font-weight: 600; }

/* Badges d'état */
.badge-attente { background: var(--or-pale); border-color: #cbbb62; color: #4d4204; }
.badge-avis-favorable, .badge-besoin-pourvu, .badge-proposition-retenu, .badge-lot-pret { background: #e5f2ea; border-color: #7fb597; color: #1d5a37; }
.badge-avis-reserve, .badge-proposition-presente, .badge-lot-analyse { background: var(--or-pale); border-color: #cbbb62; color: #4d4204; }
.badge-avis-defavorable, .badge-lot-erreur { background: var(--brique-pale); border-color: #d99a8c; color: var(--brique); }
.badge-besoin-ouvert { background: var(--noir); border-color: var(--noir); color: var(--or); }
.badge-besoin-ferme, .badge-proposition-ecarte, .badge-lot-en_attente { color: var(--gris); }
.etat .badge { margin-right: 0.2rem; }

/* Entretiens et relances sur la fiche */
.entretien { padding: 0.9rem 0; border-top: 1px solid var(--trait); }
.entretien:first-of-type { border-top: 0; padding-top: 0; }
.entretien p { margin: 0.3rem 0 0; max-width: 75ch; }
.entretien .periode { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.entretien details { margin: 0.5rem 0 0; }
.relances li.faite, .agenda li.faite { color: var(--gris); }
.relances li.faite > span { text-decoration: line-through; }
.bandeau-archive { display: flex; gap: 0.8rem 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bandeau-archive p { margin: 0; }

/* Listes avec portrait : suivi, propositions, rapprochement */
.agenda li { display: flex; gap: 0.75rem; align-items: flex-start; padding-bottom: 0.7rem; border-bottom: 1px solid var(--trait); }
.agenda li:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda li > div { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.agenda li > div > a { font-weight: 600; color: var(--encre); justify-self: start; }
.agenda p { margin: 0; }
.agenda .technos { margin: 0.15rem 0; }
.agenda details { margin: 0.2rem 0 0; }
.agenda .badge { justify-self: start; }
.rapprochement li > div { position: relative; padding-right: 4.2rem; }
.note-rapprochement { position: absolute; right: 0; top: 0; font: 500 1.6rem/1 var(--titre); color: var(--encre); font-variant-numeric: lining-nums; }
.note-rapprochement small { font: 400 0.75rem var(--texte); color: var(--gris); margin-left: 0.1rem; }
.technos span.absent { background: #fff; border: 1px dashed #98a1a8; color: var(--gris); }
.description-besoin { margin-top: 0.8rem; max-width: 75ch; }
.besoin-etroit .champs { grid-template-columns: minmax(0, 1fr); }
.entete-profil .statut-form label { flex: 0 1 12rem; }

/* Import en lot */
table.lot td { vertical-align: middle; }
table.lot .detail-lot { margin: 0.3rem 0 0; font-size: 0.8125rem; font-weight: 400; max-width: 46ch; }

@media (max-width: 640px) {
  .rapprochement li > div { padding-right: 0; }
  .note-rapprochement { position: static; }
}

.deux-egales { margin-bottom: 1rem; }
.carte > form + form { margin-top: 0.8rem; }
.actions-ligne.droite { display: flex; justify-content: flex-end; }
.entete-profil .statut-form { flex-wrap: nowrap; }

/* Finitions ---------------------------------------------------------------
   Le mouvement répond à un geste : ouvrir, déposer, confirmer. Rien ne bouge tout seul. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
::selection { background: var(--or); color: var(--noir); }

.carte { border-radius: 8px; box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04); }
.carte h2 { font-size: 1.0625rem; }
.barre-statut { border-radius: 8px; }

button, .bouton { transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.06s; }
button:active, .bouton:active { transform: translateY(1px); }
button.lien:active { transform: none; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select, textarea { transition: border-color 0.12s, box-shadow 0.12s; }
main input[type="text"]:focus, main input[type="email"]:focus, main input[type="password"]:focus, main input[type="search"]:focus, main input[type="date"]:focus, main input[type="time"]:focus, main select:focus, main textarea:focus {
  border-color: var(--petrole); box-shadow: 0 0 0 3px rgba(13, 74, 93, 0.16); outline: 0;
}
body.accueil main input:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(206, 183, 59, 0.25); }

/* Blocs repliables : une flèche qui tourne, un contenu qui se déroule */
summary { list-style: none; display: flex; align-items: center; gap: 0.45rem; }
summary::-webkit-details-marker { display: none; }
main summary::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
main details[open] > summary::before { transform: translateY(-0.1rem) rotate(45deg); }
main details[open] > :not(summary) { animation: derouler 0.16s ease-out; }
dialog[open] { animation: derouler 0.16s ease-out; }

/* Messages : ils arrivent, se ferment d'un clic, et les confirmations s'effacent seules */
.flash { animation: derouler 0.2s ease-out; }
.flash.fermable { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.flash .fermer { flex: none; min-height: 0; width: 1.6rem; height: 1.6rem; padding: 0; margin: -0.1rem -0.3rem 0 0; background: none; border: 0; border-radius: 50%; color: inherit; font-size: 1.15rem; line-height: 1; opacity: 0.6; }
.flash .fermer:hover { background: rgba(0, 0, 0, 0.08); opacity: 1; }
.flash.part { opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s; }

tbody tr { transition: background-color 0.1s; }
.defile tbody tr:hover { background: #f5f7f8; }

/* Kanban : des couloirs visibles, une carte qui se soulève, une zone de dépôt qui s'annonce */
.kanban { gap: 0.6rem; }
.colonne { background: rgba(255, 255, 255, 0.45); border-radius: 8px; padding: 0.7rem 0.55rem 0.55rem; }
.colonne h2 { padding: 0 0.2rem 0.6rem; min-height: 2.9rem; }
.cartes { min-height: 6rem; border-radius: 6px; transition: background-color 0.12s, box-shadow 0.12s; }
.cartes:not(:has(.fiche:not(.cachee)))::after { content: attr(data-vide); display: block; padding: 1.2rem 0.5rem; text-align: center; color: #8a9096; font-size: 0.8125rem; border: 1px dashed #c4cace; border-radius: 6px; }
.fiche { border-radius: 6px; transition: border-color 0.12s, box-shadow 0.12s; }
.kanban[data-modifiable="1"] .fiche:hover { box-shadow: 0 2px 6px rgba(28, 28, 26, 0.08); }
.kanban.en-glisse .cartes { background: rgba(206, 183, 59, 0.1); box-shadow: inset 0 0 0 1px rgba(206, 183, 59, 0.55); }
.fiche.saisie { cursor: grabbing; }
.fiche.glisse { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); transform: rotate(1.2deg); border-color: var(--encre); }
.fantome { opacity: 1; background: var(--or-pale); border: 1px dashed #b8a22f; }
.fantome > * { visibility: hidden; }

.resultats .carte { transition: border-color 0.12s; }
.resultats .carte:hover { border-color: #98a1a8; }

/* Fiche profil : bandeau, onglets, panneaux ------------------------------
   Le bandeau reste en tête de fiche. Les onglets restent collés sous l'en-tête.
   Sans JavaScript, les onglets servent de sommaire et les quatre panneaux s'enchaînent. */
.barre-statut-ligne { display: flex; flex-wrap: wrap; gap: 0.9rem 2.5rem; align-items: flex-end; justify-content: space-between; }
.barre-statut-ligne .statut-form { flex: 1 1 26rem; }
.statut-lecture { margin: 0; }
.reperes-profil { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; }
.reperes-profil div { display: grid; gap: 0.1rem; min-width: 0; }
.reperes-profil dt { color: var(--gris); font-size: 0.8125rem; }
.reperes-profil dd { margin: 0; font-weight: 600; }
.reperes-profil dd em { font-weight: 400; }
.motif-profil { margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--trait); color: var(--brique); }
.a-faire { list-style: none; margin: 0.8rem 0 0 !important; padding: 0.75rem 0 0 !important; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.a-faire a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--fond); color: var(--encre); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: box-shadow 0.12s; }
.a-faire a::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--or); }
.a-faire .urgent a { background: var(--brique-pale); color: var(--brique); }
.a-faire .urgent a::before { background: var(--brique); }
.a-faire a:hover { box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.a-faire .urgent a:hover { color: var(--brique); }

/* CV IT Club : un bouton, deux versions */
.menu-deroulant { position: relative; margin: 0; }
.menu-deroulant > summary { padding: 0.5rem 1.1rem; }
main .menu-deroulant > summary::before { display: none; }
.menu-deroulant > summary::after { content: ""; flex: none; width: 0.36rem; height: 0.36rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.15s; }
.menu-deroulant[open] > summary { margin-bottom: 0; }
.menu-deroulant[open] > summary::after { transform: translateY(0.1rem) rotate(225deg); }
.menu-deroulant-liste { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; min-width: 12rem; display: grid; padding: 0.3rem; background: #fff; border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 12px 28px rgba(28, 28, 26, 0.14); }
.menu-deroulant-liste a { display: block; padding: 0.55rem 0.75rem; border-radius: 4px; color: var(--encre); text-decoration: none; }
.menu-deroulant-liste a:hover { background: var(--fond); color: var(--noir); }

.onglets { position: sticky; top: 3.25rem; z-index: 5; display: flex; gap: 0.15rem; margin: 0 calc(-1 * var(--gouttiere)) 1.25rem; padding: 0 var(--gouttiere); overflow-x: auto; background: rgba(236, 239, 241, 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.9rem; padding: 0 1rem; color: var(--gris); text-decoration: none; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; transition: color 0.12s, box-shadow 0.12s; }
.onglets a:hover { color: var(--encre); box-shadow: inset 0 -3px 0 var(--trait); }
.onglets a[aria-selected="true"] { color: var(--noir); box-shadow: inset 0 -3px 0 var(--or); }
.onglets a:focus-visible { outline-offset: -3px; }
.onglets small { color: var(--gris); font-weight: 400; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pastille-alerte { background: var(--brique); color: #fff; }
html:has(.onglets) { scroll-padding-top: 7rem; }

.titre-panneau { font: 500 1.35rem/1.2 var(--titre); margin: 1.75rem 0 0.9rem; }
.panneau:first-of-type .titre-panneau { margin-top: 0; }
.avec-onglets .titre-panneau { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.avec-onglets .panneau:not([hidden]) { animation: derouler 0.16s ease-out; }
.panneau:focus { outline: 0; }

details.suite { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--trait); }
details.suite .experience:first-of-type { padding-top: 0.2rem; }
details.suite table { margin-top: 0.2rem; }
.suite-historique { margin-top: 0.6rem; }

@media (max-width: 1180px) {
  .onglets { top: 0; }
  html:has(.onglets) { scroll-padding-top: 3.6rem; }
  html { scroll-padding-top: 1rem; }
}
@media (max-width: 640px) {
  .onglets a { padding: 0 0.75rem; }
  .barre-statut-ligne { gap: 0.9rem; }
  .barre-statut-ligne .statut-form { flex-basis: 100%; }
  .reperes-profil { gap: 0.5rem 1.5rem; }
  .exports .menu-deroulant { flex: 1 1 calc(50% - 0.25rem); }
  .exports .menu-deroulant > summary { width: 100%; }
  .menu-deroulant-liste { left: 0; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
}
@media print {
  .onglets { display: none; }
  .avec-onglets .panneau[hidden] { display: block !important; }
  .avec-onglets .titre-panneau { position: static; width: auto; height: auto; clip: auto; margin: 1.5rem 0 0.8rem; }
}

/* Aide --------------------------------------------------------------------- */
.lien-aide { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid #6a6a6a; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: border-color 0.12s, color 0.12s; }
.lien-aide:hover, .lien-aide[aria-current] { border-color: var(--or); color: var(--or); }
.lien-aide b { display: none; font-weight: 400; }
.aide-tete { align-items: center; }
.aide-outils { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.versions { display: inline-flex; border: 1px solid #98a1a8; border-radius: 4px; overflow: hidden; background: #fff; }
.versions a { padding: 0.45rem 0.8rem; color: var(--encre); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.versions a[aria-current] { background: var(--noir); color: var(--or); }
.aide-page { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.aide-sommaire { position: sticky; top: 4.25rem; max-height: calc(100vh - 5.25rem); overflow-y: auto; font-size: 0.9375rem; }
.aide-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.aide-sommaire ol a { display: block; padding: 0.35rem 0.7rem; border-left: 2px solid var(--trait); color: var(--encre); text-decoration: none; line-height: 1.3; transition: border-color 0.12s, background-color 0.12s; }
.aide-sommaire ol a:hover { border-left-color: var(--or); background: #fff; }
.aide-guides { display: grid; gap: 0.3rem; margin: 0 0 1rem; }
.aide-guides a { padding: 0.45rem 0.7rem; border: 1px solid var(--trait); border-radius: 6px; background: #fff; color: var(--encre); text-decoration: none; font-weight: 600; }
.aide-guides a[aria-current] { background: var(--noir); border-color: var(--noir); color: var(--or); }
.aide-texte { padding: 1.6rem 2rem 2rem; margin: 0; }
.aide-texte h2 { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--trait); }
.aide-texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.aide-texte h3 { margin-top: 1.7rem; }
.aide-texte p, .aide-texte li { max-width: 72ch; line-height: 1.6; }
.aide-texte li { margin-bottom: 0.25rem; }
.aide-texte .defile { margin: 0.4rem 0 1.1rem; }
.aide-texte table { max-width: 60rem; }
.aide-texte th { white-space: nowrap; }
.aide-texte td:first-child { white-space: nowrap; font-weight: 600; }
.aide-texte code { white-space: nowrap; }

@media (max-width: 1180px) {
  .lien-aide { width: auto; height: auto; min-height: 2.6rem; display: flex; justify-content: flex-start; border: 0; border-radius: 0; border-top: 1px solid #2c2c2c; font-weight: 400; font-size: 1rem; }
  .lien-aide span { display: none; }
  .lien-aide b { display: inline; }
}
@media (max-width: 900px) {
  .aide-page { grid-template-columns: minmax(0, 1fr); }
  .aide-sommaire { position: static; max-height: none; }
  .aide-sommaire ol { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .aide-texte { padding: 1.1rem 1rem 1.4rem; }
  .aide-texte td:first-child, .aide-texte th, .aide-texte code { white-space: normal; }
}
@media print {
  .aide-page { display: block; }
  .aide-sommaire, .aide-outils, .evitement, main > .flash { display: none; }
  .aide-texte { border: 0; box-shadow: none; padding: 0; }
  .aide-texte h2 { break-after: avoid; }
  .aide-texte h3 { break-after: avoid; }
  .aide-texte table, .aide-texte li { break-inside: avoid; }
  .aide-texte .defile { overflow: visible; }
}

/* Les guides et les rapports gardent leurs grands titres */
.carte.rapport h2 { font-size: 1.75rem; }
.carte.rapport h3 { font-size: 1.125rem; }
/* Version 1.5 : demande de compte, validation, corbeille ------------------ */
.porte-lien { margin: 1.4rem 0 0; font-size: 0.9375rem; }
.porte-lien a { color: var(--or); }
.porte-lien a:hover { color: #fff; }
/* Champ piège de la demande de compte : hors de l'écran, ignoré des lecteurs d'écran et du clavier */
.piege { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }
.carte.demandes { border-left: 4px solid var(--or); }
.carte.demandes h2 small { color: var(--gris); font-weight: 400; }
.liste-demandes { list-style: none; margin: 0; padding: 0; }
.liste-demandes li { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--trait); }
.liste-demandes .compte-meta { margin-bottom: 0; }
.compte-menu { color: #9a9a9a; font-weight: 400; }
.profil-ligne { display: flex; gap: 0.7rem; align-items: center; }
.profil-ligne .avatar { flex: none; }
p.aide.danger { margin-bottom: 0; }
@page { margin: 16mm 15mm; }
@media print { main { padding: 0; max-width: none; } .aide-tete h1 { font-size: 26pt; margin-bottom: 6mm; } }

/* Version 1.7 : finitions d'usage ------------------------------------------ */
/* Un bouton d'état ne se coupe pas sur deux lignes */
.statut-form button { white-space: nowrap; }

/* Profils : sur écran étroit, les filtres se replient derrière un bouton (le script l'ajoute) */
.bouton-filtres { display: none; }
@media (max-width: 640px) {
  .bouton-filtres { display: inline-flex; flex: 1 1 100%; }
  .bouton-filtres[aria-expanded="true"] { background: var(--encre); color: #fff; }
  form[data-repli].replie > label:not(.large) { display: none; }
}

/* Écran tactile : des cibles d'au moins 24 px pour les liens d'action et les noms cliquables */
@media (pointer: coarse), (max-width: 640px) {
  button.lien { min-height: 1.75rem; }
  .fiche > a, .fiche-tete a, .agenda li > div > a, .resultat a.nom { display: inline-block; padding: 0.15rem 0; }
  .mots button { min-width: 1.75rem; min-height: 1.75rem; }
}

/* Formulaire de la fiche : trois blocs titrés */
fieldset.groupe { border: 0; border-top: 1px solid var(--trait); margin: 0; padding: 1.1rem 0 0; min-width: 0; }
fieldset.groupe legend { font: 600 1.0625rem/1.3 var(--texte); padding: 0 0.6rem 0 0; }
fieldset.groupe > .aide { margin: 0.2rem 0 0.9rem; }
.aide-champ { font-weight: 400; color: var(--gris); font-size: 0.8125rem; }

.champs > label { align-content: start; }

/* Version 1.8 : sécurité des accès, traductions, nationalité, Europass ------ */
/* Pages d'entrée : connexion, code, invitation, double authentification */
.porte-note { margin: 1rem 0 0; color: #bdbdbd; font-size: 0.875rem; text-align: left; }
.porte-texte { text-align: left; color: #e6e6e6; }
.porte-texte p { margin: 0 0 0.8rem; }
.porte-details { margin: 1.2rem 0 0; text-align: left; color: #d0d0d0; font-size: 0.9375rem; }
.porte-details summary { cursor: pointer; color: var(--or); }
.porte-details p { margin: 0.6rem 0 0; }
body.accueil main:has(.porte-large) { max-width: 34rem; }
.code-saisie { font: 600 1.5rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.25em; text-align: center; }
.porte input.code-saisie { background: #151515; border-color: #555; color: #fff; }
.etapes-2fa { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; text-align: left; }
.etapes-2fa > li { counter-increment: etape; position: relative; padding-left: 2.4rem; display: grid; gap: 0.5rem; justify-items: start; }
.etapes-2fa > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--or); color: var(--noir); font-weight: 700; font-size: 0.875rem;
}
.etapes-2fa > li > span { color: var(--gris); font-size: 0.9375rem; }
.porte .etapes-2fa > li > span { color: #c9c9c9; }
.etapes-2fa form { width: 100%; }
.qr { display: block; width: 12rem; max-width: 100%; aspect-ratio: 1; background: #fff; border-radius: 6px; padding: 0.3rem; }
.qr svg { display: block; width: 100%; height: 100%; }
.cle-2fa { display: inline-block; font-size: 1rem; letter-spacing: 0.08em; padding: 0.35rem 0.6rem; user-select: all; overflow-wrap: anywhere; }
.porte .cle-2fa { background: #151515; color: #fff; border: 1px solid #555; }
.codes-secours { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.codes-secours code { display: block; text-align: center; font-size: 1.0625rem; padding: 0.5rem; letter-spacing: 0.06em; border: 1px dashed var(--trait); }

/* Page publique : guide Sécurité lu sans être connecté */
body.public { background: var(--fond); }
.entete-public { justify-content: space-between; }

/* Comptes et invitations */
.intertitre { margin: 1.1rem 0 0.6rem; font-size: 0.9375rem; }
.ajout-ligne { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; margin: 0 0 0.8rem; }
.ajout-ligne label { flex: 1 1 16rem; }
.lien-invitation { background: var(--or-pale); border-left: 4px solid var(--or); padding: 0.8rem 1rem; margin: 0 0 1rem; border-radius: 4px; }
.lien-invitation p { margin: 0 0 0.5rem; }
.copie { display: flex; gap: 0.5rem; }
.copie input { flex: 1 1 auto; min-width: 0; font: 0.875rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fff; }
.copie button { flex: none; }
.ligne-action { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; justify-content: space-between; }
.ligne-action form { display: inline; }
.connexions-courtes li { font-size: 0.9375rem; }
.bloc-action { margin: 0.9rem 0 0.4rem; }
.comptes details { margin: 0.4rem 0 0; }
.comptes details > summary { cursor: pointer; color: var(--petrole); font-size: 0.9375rem; }
.comptes details[open] > summary { margin-bottom: 0.6rem; }
.comptes .actions-ligne { margin-top: 0.8rem; }

/* Profil : traduction et mission */
.bandeau-traduction { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.bandeau-traduction p { margin: 0; flex: 1 1 24rem; }
.bandeau-traduction form { flex: none; }
.note-traduction { color: var(--gris); font-size: 0.8125rem; margin: -0.4rem 0 0.9rem; }
.note-traduction a { margin-left: 0.4rem; }
.cadre-mission { color: var(--gris); font-size: 0.875rem; margin: 0.2rem 0 0.4rem; }
.mission { font-style: italic; }
.permis-libre { margin: 0 0 0.9rem; }

@media print {
  body:has(.codes-secours) .entete, body:has(.codes-secours) .actions { display: none; }
}