/* Maquette — console MaitriSol, charte de la carte (bleu nuit rgba(11,22,34), bleu actif #2b6cff, texte #dbe7f3) */
:root {
  --encre: #0b1622; --fond: #0e1a28; --panneau: #132234; --panneau-2: #182b40; --bord: rgba(219,231,243,.16);
  --texte: #dbe7f3; --sourd: #8ba3bd; --blanc: #fff;
  --bleu: #2b6cff; --bleu-doux: rgba(43,108,255,.18); --vert: #7bc47f; --ambre: #e8a14b; --rouge: #e06c75;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--texte); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* coque : rail à gauche, contenu, volet à droite */
.coque { display: grid; grid-template-columns: 220px 1fr 380px; height: 100%; }
.coque.sans-volet { grid-template-columns: 220px 1fr; }

.rail { background: var(--encre); border-right: 1px solid var(--bord); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.rail .marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--blanc); font-weight: 700; font-size: 15px; }
.rail .marque .sigle { width: 26px; height: 26px; border-radius: 7px; background: var(--bleu); display: grid; place-items: center; }
.rail .marque .sigle svg { width: 16px; height: 16px; }
.rail .ville { margin: 4px 0 10px; padding: 10px 10px 10px 12px; border-radius: 10px; background: var(--panneau); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail .ville b { display: block; color: var(--blanc); font-size: 14px; }
.rail .ville small { color: var(--sourd); }
.rail .ville svg { width: 14px; height: 14px; color: var(--sourd); flex: none; }
.rail nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--sourd); }
.rail nav a svg { width: 16px; height: 16px; flex: none; }
.rail nav a:hover { background: var(--panneau); color: var(--texte); }
.rail nav a.actif { background: var(--bleu); color: var(--blanc); }
.rail nav a .n { margin-left: auto; font-size: 12px; color: inherit; opacity: .8; }
.rail nav a .pastille { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); }
.rail .bas { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bord); }
.rail .moi { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.rail .moi:hover { background: var(--panneau); }
.rail .moi small { display: block; color: var(--sourd); font-size: 12px; }

.contenu { padding: 22px 30px 40px; overflow: auto; min-width: 0; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.entete h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--blanc); letter-spacing: -.01em; }
.entete p { margin: 4px 0 0; color: var(--sourd); }
.entete .actions { display: flex; gap: 8px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bord); background: var(--panneau); }
.btn:hover { background: var(--panneau-2); }
.btn.primaire { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.btn.primaire:hover { background: #3f7cff; }
.btn.danger { color: var(--rouge); }
.btn.petit { padding: 5px 10px; font-size: 13px; }
.btn svg { width: 15px; height: 15px; }

.outils { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.recherche { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--encre); border: 1px solid var(--bord); color: var(--sourd); }
.recherche svg { width: 15px; height: 15px; }
.filtres { display: flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
.filtres button { padding: 7px 12px; background: var(--encre); border: 0; color: var(--sourd); }
.filtres button + button { border-left: 1px solid var(--bord); }
.filtres button.on { background: var(--bleu-doux); color: var(--texte); }

/* liste des membres : une ligne = une personne, clic → volet */
.liste { border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; background: var(--panneau); }
.liste .tete, .ligne { display: grid; grid-template-columns: minmax(240px, 1fr) 130px 140px 100px 24px; align-items: center; gap: 10px; padding: 10px 14px; }
.qui small { white-space: nowrap; }
.liste .tete { font-size: 12px; color: var(--sourd); background: var(--encre); }
.ligne { border-top: 1px solid var(--bord); cursor: pointer; }
.ligne:hover { background: var(--panneau-2); }
.ligne.ouverte { background: var(--bleu-doux); box-shadow: inset 3px 0 0 var(--bleu); }
.ligne.eteinte { color: var(--sourd); }
.qui { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--blanc); flex: none; }
.avatar.a { background: #4b6fb3; } .avatar.b { background: #5a8f6b; } .avatar.c { background: #9a6cc9; } .avatar.d { background: #b57a46; } .avatar.e { background: #4e5d6f; }
.ligne.eteinte .avatar { background: #30404f; color: var(--sourd); }
.qui b { display: block; color: var(--blanc); font-weight: 600; }
.ligne.eteinte .qui b { color: var(--sourd); }
.qui small { color: var(--sourd); font-size: 12px; }
.role { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--bord); }
.role.admin { background: var(--bleu-doux); border-color: rgba(43,108,255,.5); }
.role svg { width: 12px; height: 12px; }
.etat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.etat.attente::before { background: var(--ambre); }
.etat.retire::before { background: #4e5d6f; }
.acces { display: flex; gap: 4px; }
.acces i { width: 10px; height: 10px; border-radius: 2px; background: var(--bleu); opacity: .95; }
.acces i.non { background: transparent; border: 1px solid var(--sourd); opacity: .6; }
.acces i.hors { background: transparent; border: 1px dashed var(--sourd); opacity: .4; }
.deux-fa { color: var(--sourd); display: grid; place-items: center; }
.deux-fa svg { width: 16px; height: 16px; }
.deux-fa.ok { color: var(--vert); }

.vide { padding: 18px 16px; color: var(--sourd); border-top: 1px solid var(--bord); }

/* volet : fiche d'un membre */
.volet { background: var(--encre); border-left: 1px solid var(--bord); padding: 22px 24px 30px; overflow: auto; display: flex; flex-direction: column; gap: 22px; }
.volet .fermer { position: absolute; }
.fiche .identite { display: flex; gap: 14px; align-items: center; }
.fiche .identite .avatar { width: 48px; height: 48px; font-size: 17px; }
.fiche .identite h2 { margin: 0; font-size: 18px; color: var(--blanc); }
.fiche .identite p { margin: 2px 0 0; color: var(--sourd); font-size: 13px; }
.fiche .identite .x { margin-left: auto; align-self: flex-start; color: var(--sourd); background: none; border: 0; font-size: 18px; }
.fiche h3 { margin: 0 0 8px; font-size: 13px; color: var(--sourd); font-weight: 600; }
.fiche h3 span { color: var(--texte); }
.fiche section > p.aide { margin: 8px 0 0; font-size: 12px; color: var(--sourd); }

/* « Sur la carte » : la même grammaire que le menu Éléments (case, pastille, libellé) */
.couches { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.couche { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panneau); }
.couche + .couche { border-top: 1px solid var(--bord); }
.couche .case { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--sourd); display: grid; place-items: center; flex: none; }
.couche.oui .case { background: var(--bleu); border-color: var(--bleu); }
.couche.oui .case svg { width: 11px; height: 11px; color: var(--blanc); }
.couche .pastille { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.couche .lib { flex: 1; }
.couche small { color: var(--sourd); font-size: 12px; }
.couche.hors { opacity: .55; }
.couche.hors .case { border-style: dashed; }
.couche .lien { font-size: 12px; color: #6ea8ff; }

.projets-membre { display: flex; flex-direction: column; gap: 6px; }
.pm { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--bord); border-radius: 8px; background: var(--panneau); }
.pm b { font-weight: 600; color: var(--blanc); }
.pm .role { margin-left: auto; }
.pm.plus { border-style: dashed; color: var(--sourd); background: transparent; justify-content: center; }

.securite { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; background: var(--panneau); }
.securite svg { width: 18px; height: 18px; color: var(--vert); flex: none; }
.securite .t { flex: 1; } .securite small { display: block; color: var(--sourd); font-size: 12px; }

.zone-rouge { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.zone-rouge .btn { white-space: nowrap; }
.zone-rouge small { color: var(--sourd); font-size: 12px; }

/* projets */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.projet { border: 1px solid var(--bord); border-radius: 12px; background: var(--panneau); overflow: hidden; }
.projet header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.projet header .vignette { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #1f4d8a, #2b6cff); flex: none; position: relative; overflow: hidden; }
.projet header .vignette::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.14) 6px 7px), repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.14) 8px 9px); }
.projet header .vignette.orage { background: linear-gradient(135deg, #3b4a63, #6a7fa3); }
.projet header h2 { margin: 0; font-size: 16px; color: var(--blanc); }
.projet header small { color: var(--sourd); font-size: 12px; }
.projet .visib { margin-left: auto; display: flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; font-size: 13px; }
.projet .visib span { padding: 6px 11px; color: var(--sourd); background: var(--encre); }
.projet .visib span + span { border-left: 1px solid var(--bord); }
.projet .visib span.on { background: var(--bleu); color: var(--blanc); }
.projet .corps { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.projet .corps h3 { margin: 0 0 8px; font-size: 12px; color: var(--sourd); font-weight: 600; }
.personnes { display: flex; flex-direction: column; gap: 6px; }
.personne { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; background: var(--encre); border: 1px solid var(--bord); width: max-content; max-width: 100%; }
.personne .avatar { width: 24px; height: 24px; font-size: 10px; }
.personne .x { margin-left: 4px; color: var(--sourd); font-size: 14px; line-height: 1; }
.personne.ajout { border-style: dashed; color: var(--sourd); background: transparent; padding: 6px 12px; }
.projet footer { padding: 10px 16px; border-top: 1px solid var(--bord); font-size: 12px; color: var(--sourd); display: flex; gap: 14px; }
.projet footer b { color: var(--texte); font-weight: 600; }
.bandeau-ville { padding: 10px 16px; font-size: 13px; color: var(--sourd); background: rgba(123,196,127,.08); border-bottom: 1px solid var(--bord); display: flex; gap: 8px; align-items: center; }
.bandeau-ville::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }

/* --- compléments du service (hors maquette) ------------------------------------------------------------------------ */
.icones { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.js .sans-js { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .ligne, .rail nav a, .volet { transition: background-color 150ms, color 150ms, transform 150ms; }
}

/* rail : ville en menu déroulant, section courante, pastille, rôle */
.rail details.ville-menu { margin: 4px 0 10px; }
.rail details.ville-menu > summary { list-style: none; cursor: pointer; padding: 10px 10px 10px 12px; border-radius: 10px; background: var(--panneau); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail details.ville-menu > summary::-webkit-details-marker { display: none; }
.rail details.ville-menu > summary b { display: block; color: var(--blanc); font-size: 14px; }
.rail details.ville-menu > summary small { color: var(--sourd); }
.rail details.ville-menu > summary svg { width: 14px; height: 14px; color: var(--sourd); flex: none; transition: transform 150ms; }
.rail details.ville-menu[open] > summary svg { transform: rotate(90deg); }
.rail details.ville-menu ul { list-style: none; margin: 4px 0 0; padding: 4px; border-radius: 10px; background: var(--panneau); border: 1px solid var(--bord); }
.rail details.ville-menu li a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--texte); }
.rail details.ville-menu li a:hover { background: var(--panneau-2); }
.rail details.ville-menu li a[aria-current="true"] { color: var(--blanc); background: var(--bleu-doux); }
.rail details.ville-menu li small { color: var(--sourd); margin-left: 6px; }
.rail nav a[aria-current="page"] { background: var(--bleu); color: var(--blanc); }
.rail .groupe { margin: 10px 0 2px; padding: 0 10px; font-size: 11px; color: var(--sourd); font-weight: 600; }
.rail .moi .avatar.petit { width: 30px; height: 30px; font-size: 12px; }
.rail .moi > span:last-child { min-width: 0; }
.rail .moi b { display: block; color: var(--texte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .deconnexion { margin: 4px 0 0; }
.rail .deconnexion button { background: none; border: 0; color: var(--sourd); padding: 6px 8px; border-radius: 8px; font-size: 12px; }
.rail .deconnexion button:hover { color: var(--texte); background: var(--panneau); }

/* accès par fonction (liste des membres) : vue / retirée à ce compte / pas encore inscrite */
.acces i.acces-vue { background: var(--bleu); }
.acces i.acces-retiree { background: transparent; border: 1px solid var(--sourd); opacity: .6; }
.acces i.acces-hors { background: transparent; border: 1px dashed var(--sourd); opacity: .4; }

/* pastilles des fonctions : couleurs de la maquette, par code (aucun style= dans les gabarits) */
.pastille.f-elements { background: #c9a66b; }
.pastille.f-projets { background: #e64980; }
.pastille.f-hydrographie { background: #3fa9f5; }
.pastille.f-ecoulements { background: #6ea8ff; }
.pastille.f-courbes { background: #9b7bd6; }

/* volet : fermé par défaut quand la coque est « sans-volet », ouvert par console.js ou rendu serveur */
.volet { position: relative; }
.coque.sans-volet .volet { display: none; }
.coque.sans-volet.ouverte { grid-template-columns: 220px 1fr 380px; }
.coque.sans-volet.ouverte .volet { display: flex; }

/* confirmation (console.js) */
dialog.confirmer { background: var(--panneau); color: var(--texte); border: 1px solid var(--bord); border-radius: 12px; padding: 20px 22px; max-width: 420px; }
dialog.confirmer::backdrop { background: rgba(0,0,0,.55); }
dialog.confirmer p { margin: 0 0 16px; }
dialog.confirmer .actions { display: flex; gap: 8px; justify-content: flex-end; }

/* pages hors espace (connexion, mot de passe, second facteur, erreur, choix de ville) */
main.etroit { max-width: 26rem; margin: 3rem auto; padding: 0 1rem 3rem; }
.barre-etroite { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 16px; color: var(--sourd); font-size: 13px; }
.barre-etroite form { display: inline; }
.barre-etroite button { background: none; border: 0; color: var(--sourd); padding: 0; text-decoration: underline; }

/* éléments communs des pages (formulaires, cartes, tableaux) : repris de l'ancien base.html, charte de la carte */
h1 { font-size: 22px; margin: 0 0 1rem; color: var(--blanc); letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 1.75rem 0 .75rem; color: var(--blanc); }
.contenu a:where(:not(.btn, .ligne, .x, .lien)), main.etroit a { color: #6ea8ff; }
.contenu a:where(:not(.btn, .ligne, .x)):hover, main.etroit a:hover { text-decoration: underline; }
form.carte, .carte { background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; padding: 1.25rem; }
label { display: block; margin: .75rem 0 .25rem; color: var(--sourd); font-size: 13px; }
input, select, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--encre); color: var(--texte); font: inherit; }
input[type="checkbox"], input[type="radio"] { width: auto; }
button, .bouton { display: inline-block; margin-top: 1rem; padding: .55rem 1rem; border: 0; border-radius: 8px; background: var(--bleu); color: var(--blanc); font: inherit; cursor: pointer; text-decoration: none; }
button.secondaire { background: var(--panneau-2); color: var(--texte); border: 1px solid var(--bord); }
button.discret { background: transparent; color: var(--sourd); padding: 0; margin: 0; }
button.discret:hover { color: var(--texte); text-decoration: underline; }
.btn, .btn.primaire { margin-top: 0; }
.erreur { color: var(--rouge); margin: .75rem 0 0; }
.ok { color: var(--vert); }
.sourd { color: var(--sourd); }
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--sourd); font-weight: 600; font-size: 12px; }
code, .code { font-family: ui-monospace, Menlo, monospace; background: var(--encre); padding: .1rem .35rem; border-radius: 4px; font-size: 13px; }
.liste-villes a { display: block; padding: .75rem 1rem; margin: .5rem 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px; color: var(--texte); }
.liste-villes a:hover { border-color: var(--bleu); text-decoration: none; }
.en-ligne { display: inline; }
.en-ligne button { margin: 0; }
.qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 6px; display: block; margin: 0 auto .75rem; }
.codes { columns: 2; list-style: none; padding: 0; margin: 1rem 0; }
.codes li { margin: .35rem 0; }
.codes code { font-size: 1.05rem; letter-spacing: .05em; }

/* largeurs : sous 1100 px le volet passe en page pleine ; sous 720 px le rail devient une barre horizontale */
@media (max-width: 1100px) {
  .coque, .coque.sans-volet, .coque.sans-volet.ouverte { grid-template-columns: 220px 1fr; }
  .coque .volet, .coque.sans-volet.ouverte .volet { display: none; }
  .coque.ouverte .contenu { display: none; }
  .coque.ouverte .volet, .coque.sans-volet.ouverte .volet { display: flex; border-left: 0; }
}
@media (max-width: 720px) {
  .coque, .coque.sans-volet, .coque.sans-volet.ouverte { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100%; }
  .rail { flex-direction: row; align-items: center; overflow-x: auto; gap: 4px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--bord); }
  .rail .marque { padding: 4px 8px; }
  .rail .marque span + span, .rail .moi > span:last-child, .rail .groupe { display: none; }
  .rail .deconnexion { margin: 0; }
  .rail .deconnexion button { white-space: nowrap; padding: 6px 6px; }
  .rail nav { display: flex; gap: 4px; }
  .rail nav a { white-space: nowrap; padding: 6px 10px; }
  .rail .ville, .rail details.ville-menu { margin: 0; }
  .rail .ville b, .rail details.ville-menu > summary b { white-space: nowrap; }
  .rail .ville small, .rail details.ville-menu > summary small { display: none; }
  .projet header { flex-wrap: wrap; }
  .projet .visib { margin-left: 0; width: 100%; }
  .projet .visib form { flex: 1; }
  .projet .visib button, .projet .visib span { width: 100%; text-align: center; white-space: nowrap; }
  .rail .bas { margin-top: 0; margin-left: auto; padding-top: 0; border-top: 0; display: flex; align-items: center; gap: 2px; }
  .contenu { padding: 16px; }
  .entete { flex-wrap: wrap; align-items: flex-start; }
  .entete .actions .btn { white-space: nowrap; }
  .bloc, details.bloc { overflow-x: auto; }
  .liste .tete, .ligne { grid-template-columns: 1fr 100px; }
  .liste .tete span:nth-child(n+3), .ligne > *:nth-child(n+3) { display: none; }
  .cartes { grid-template-columns: 1fr; }
  .projet .corps { grid-template-columns: 1fr; }
}

/* page Membres : recherche en formulaire GET (champ filtré côté client avec JavaScript), filtres en liens */
form.outils { margin-bottom: 12px; }
.recherche input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0; color: var(--texte); font: inherit; }
.recherche input:focus { outline: none; }
.recherche input::placeholder { color: var(--sourd); }
.recherche:focus-within { border-color: var(--bleu); }
.filtres a { padding: 7px 12px; background: var(--encre); color: var(--sourd); white-space: nowrap; }
.filtres a + a { border-left: 1px solid var(--bord); }
.filtres a:hover { color: var(--texte); text-decoration: none; }
.filtres a.on { background: var(--bleu-doux); color: var(--texte); }
.contenu .ligne, .contenu .ligne:hover { color: inherit; text-decoration: none; }
.ligne[hidden] { display: none; }

/* volet : en-tête, résultat d'une invitation, formulaires */
.fiche .identite .x:hover { color: var(--texte); text-decoration: none; }
.fiche .resultat { padding: 12px 14px; border: 1px solid var(--bord); border-radius: 10px; background: var(--panneau); }
.fiche .resultat p { margin: 0 0 8px; }
.fiche .resultat code { display: block; word-break: break-all; margin: 6px 0 10px; padding: 8px 10px; }
.fiche .resultat .btn { margin: 0; }
.fiche form label:first-of-type { margin-top: 0; }
.fiche form .btn { margin-top: 14px; }
.fiche p.aide { margin: 8px 0 0; font-size: 12px; color: var(--sourd); }

/* fiche d'un membre : même bloc dans le volet et en pleine page */
.fiche { display: flex; flex-direction: column; gap: 22px; flex: 1; min-height: 0; }
.pleine-page .fiche { max-width: 620px; }
.fiche .identite p .etat { margin-top: 4px; }
form.couche { margin: 0; }
.couche .case { position: relative; cursor: pointer; }
.couche .case input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.couche .case svg { display: none; }
.couche.oui .case svg { display: block; width: 11px; height: 11px; color: var(--blanc); }
.couche .btn { margin: 0; }
.couche .lien { white-space: nowrap; }
.couche .lien:hover { text-decoration: underline; }
.pm { flex-wrap: wrap; }
.pm small { color: var(--sourd); font-size: 12px; }
details.pm.plus { display: block; }
details.pm.plus summary { cursor: pointer; text-align: center; list-style: none; }
details.pm.plus summary::-webkit-details-marker { display: none; }
details.pm.plus ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
details.pm.plus li form { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--texte); }
details.pm.plus li form .btn { margin: 0; }
.securite.off svg { color: var(--sourd); }
.fiche section form.en-bas { margin-top: 8px; }
.fiche section form.en-bas .btn { margin: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.zone-rouge form { margin: 0; }
.zone-rouge .btn { margin: 0; }
.zone-rouge form + small { margin-top: 8px; }

/* projets en cartes : interrupteur en deux formulaires, jetons avec « × », ajout en <details> (select sans JavaScript, liste filtrable avec) */
.projet header .vignette.publie { background: linear-gradient(135deg, #2e6b4a, #7bc47f); }
.projet .visib form { margin: 0; display: flex; }
.projet .visib button { margin: 0; padding: 6px 11px; border: 0; border-radius: 0; background: var(--encre); color: var(--sourd); font-size: 13px; }
.projet .visib form + form button, .projet .visib span + span { border-left: 1px solid var(--bord); }
.projet .visib button:hover { color: var(--texte); }
.projet .visib button.on, .projet .visib button[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); cursor: default; opacity: 1; }
.personne form { display: inline; margin: 0; }
.personne button.x { background: none; border: 0; margin: 0 0 0 4px; padding: 0 4px; color: var(--sourd); font-size: 14px; line-height: 1; border-radius: 50%; }
.personne button.x:hover { color: var(--rouge); }
details.personne.ajout { display: block; width: auto; max-width: 100%; }
details.personne.ajout summary { list-style: none; cursor: pointer; }
details.personne.ajout summary::-webkit-details-marker { display: none; }
details.personne.ajout[open] { border-radius: 12px; color: var(--texte); }
details.personne.ajout form { margin: 8px 0 0; }
details.personne.ajout .sans-js { display: flex; gap: 6px; align-items: center; }
.js details.personne.ajout .sans-js { display: none; }
details.personne.ajout select { font-size: 13px; padding: 5px 8px; }
details.personne.ajout .btn { margin: 0; white-space: nowrap; }
.choix-filtre { margin: 0 0 6px; padding: 5px 8px; font-size: 13px; border-radius: 6px; }
.choix { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.choix button { background: none; border: 0; margin: 0; padding: 5px 8px; width: 100%; text-align: left; color: var(--texte); border-radius: 6px; font-size: 13px; }
.choix button:hover { background: var(--panneau-2); }
.projet .corps small.sourd { font-size: 12px; }

/* pages hors espace : marque en tête, bloc étroit centré */
.marque-etroite { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.marque-etroite .marque { display: flex; align-items: center; gap: 10px; color: var(--blanc); font-weight: 700; font-size: 15px; }
.marque-etroite .marque .sigle { width: 26px; height: 26px; border-radius: 7px; background: var(--bleu); display: grid; place-items: center; }
.marque-etroite .marque .sigle svg { width: 16px; height: 16px; }
.marque-etroite .qui-etroit { color: var(--sourd); font-size: 13px; }
.barre-etroite { padding-top: 4px; }
main.etroit h1 { margin-bottom: .75rem; }
main.etroit .carte + .carte, main.etroit .carte + form.carte { margin-top: 1rem; }
main.etroit button[type="submit"]:not(.discret) { width: 100%; }

/* relecture des captures du lot A : fonction pas encore inscrite (lien sur sa propre ligne), jetons qui ne débordent pas */
.couche.hors { flex-wrap: wrap; }
.couche.hors .lien { flex-basis: 100%; padding-left: 36px; }
.couche small { white-space: nowrap; }
.couche .lib { min-width: 0; }
.projet .corps > div { min-width: 0; }
.personne { min-width: 0; }
.personne .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* vue d'ensemble : tuiles, « À faire », dernières actions */
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.tuile { display: block; padding: 16px 18px; border: 1px solid var(--bord); border-radius: 12px; background: var(--panneau); color: var(--texte); }
.tuile:hover { background: var(--panneau-2); text-decoration: none; }
.tuile .chiffre { display: block; font-size: 28px; line-height: 1.1; color: var(--blanc); font-weight: 700; }
.tuile span { color: var(--texte); }
.tuile small { display: block; margin-top: 6px; color: var(--sourd); font-size: 12px; }
.contenu .tuile, .contenu .ligne-simple { color: var(--texte); }
.bloc { margin-top: 22px; }
.bloc h2 { margin: 0 0 8px; font-size: 13px; color: var(--sourd); font-weight: 600; }
.ligne-simple { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--bord); }
.ligne-simple:first-child { border-top: 0; }
.ligne-simple:hover { background: var(--panneau-2); text-decoration: none; }
.ligne-simple b { display: block; font-weight: 600; color: var(--blanc); }
.ligne-simple small { color: var(--sourd); font-size: 12px; }
.ligne-simple .lien { color: #6ea8ff; white-space: nowrap; font-size: 13px; }
.journal-court { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: 12px; background: var(--panneau); overflow: hidden; }
.journal-court li { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--bord); }
.journal-court li:first-child { border-top: 0; }
.journal-court time { color: var(--sourd); white-space: nowrap; font-size: 12px; min-width: 100px; }
.bloc p.aide { margin: 8px 0 0; font-size: 12px; color: var(--sourd); }
@media (max-width: 720px) { .tuiles { grid-template-columns: 1fr; } }

/* page Fonctions : une carte par fonction du registre */
.fonctions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.fonction { border: 1px solid var(--bord); border-radius: 12px; background: var(--panneau); display: flex; flex-direction: column; }
.fonction.cible { box-shadow: 0 0 0 2px var(--bleu); }
.fonction header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.fonction header .pastille { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.fonction header h2 { margin: 0; font-size: 16px; color: var(--blanc); }
.fonction header small { color: var(--sourd); font-size: 12px; }
.fonction header .etat { margin-left: auto; white-space: nowrap; }
.fonction:not(.inscrite) header .pastille { opacity: .45; }
.fonction .corps { padding: 12px 16px; flex: 1; }
.fonction .corps p { margin: 0; color: var(--sourd); }
.fonction .corps p b { color: var(--texte); }
.fonction .demandes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fonction .demandes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--encre); }
.fonction .demandes small { display: block; color: var(--sourd); font-size: 12px; }
.fonction .demandes form { margin: 0; }
.fonction footer { padding: 10px 16px; border-top: 1px solid var(--bord); min-height: 46px; display: flex; align-items: center; }
.fonction footer form { margin: 0; }
.fonction footer .btn { margin: 0; }

/* page Activité : quatre tuiles, tableau replié, filtres du journal */
.tuiles.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuile:not(a) { cursor: default; }
details.bloc > summary { cursor: pointer; font-size: 13px; color: var(--sourd); font-weight: 600; margin-bottom: 8px; }
.outils.filtres-journal { flex-wrap: wrap; }
.filtres-journal select, .filtres-journal input { width: auto; min-width: 150px; padding: 6px 10px; font-size: 13px; }
.filtres-journal .btn { margin: 0; }
.filtres-journal .lien { color: #6ea8ff; font-size: 13px; }
.journal li span { flex: 1; min-width: 0; }
.journal li small { color: var(--sourd); font-size: 12px; white-space: nowrap; }
.journal li.vide { color: var(--sourd); }
@media (max-width: 720px) { .tuiles.quatre { grid-template-columns: 1fr 1fr; } .journal li { flex-direction: column; gap: 2px; } }

/* pages Actissima et Mon compte à la charte */
.carte.tableau { padding: 0 .5rem; overflow-x: auto; }
.carte.tableau table { margin: 0; }
.carte.etroite { max-width: 480px; }
.cartes.trois { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.carte h2 { margin: 0 0 10px; font-size: 13px; color: var(--sourd); font-weight: 600; }
.carte .securite { margin: 4px 0 10px; }
.carte p.aide { margin: 8px 0 0; font-size: 12px; color: var(--sourd); }
.carte .btn { margin-top: 12px; }
.carte p .btn { margin-top: 0; }
.en-ligne .btn { margin: 0; }