/* =====================================================================
   SIG ProCaR – espace gestion (chargé après portail.css)
   Principe : le projet est l'unité de travail. Sa couleur (charte du logo) le suit partout :
   puce, avatar, ligne du registre. Le reste de l'interface reste neutre.
   ===================================================================== */
.gestion {
  --fond: #F2F4EF;
  --papier: #FFFFFF;
  --ligne: #E1E6DB;
  --texte: #24301F;
  --doux: #5D6A57;
  --accent: #2B7B31;
  --accent-pale: #EAF3E7;
  --r-panneau: 10px;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
}
.gestion h1, .gestion h2, .gestion h3 { color: var(--texte); }
.ico { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Ossature : rail + scène ---------- */
.avec-rail { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--papier);
  border-right: 1px solid var(--ligne); padding: 1rem .85rem 1rem; overflow-y: auto; }
.rail::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #8CC63F 0 55%, #F6EA3B 55% 80%, #E74E3B 80%); }   /* filet tricolore du logo */
.rail-marque { display: flex; align-items: center; gap: .65rem; padding: .35rem .4rem 1rem; text-decoration: none; color: var(--texte); }
.rail-marque img { border-radius: 6px; }
.rail-marque strong { display: block; font-size: 1.02rem; line-height: 1.15; }
.rail-marque small { display: block; color: var(--doux); font-size: .82rem; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px; color: var(--doux);
  text-decoration: none; font-weight: 600; font-size: .95rem; }
.rail-nav a:hover { background: var(--fond); color: var(--texte); }
.rail-nav a[aria-current="page"] { background: var(--accent-pale); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.rail-pied { margin-top: auto; display: flex; flex-direction: column; gap: .8rem; padding-top: 1rem; }
.rail-perimetre { padding: .7rem; border-radius: 8px; background: var(--fond); }
.rail-intitule { display: block; font-size: .8rem; color: var(--doux); margin-bottom: .35rem; }
.puces { display: flex; flex-wrap: wrap; gap: .3rem; }
.rail-lien { display: flex; align-items: center; gap: .55rem; padding: .3rem .7rem; color: var(--doux); font-size: .9rem; text-decoration: none; }
.rail-lien:hover { color: var(--accent); }
.rail-compte { display: grid; grid-template-columns: auto 1fr; gap: .2rem .65rem; align-items: center; padding: .75rem .4rem 0; border-top: 1px solid var(--ligne); }
.rail-qui a { display: block; color: var(--texte); font-weight: 600; text-decoration: none; font-size: .92rem; line-height: 1.2; }
.rail-qui small { color: var(--doux); font-size: .78rem; }
.rail-compte form { grid-column: 1 / -1; margin: .2rem 0 0; }
.rail-sortie { font: inherit; font-size: .85rem; width: 100%; padding: .4rem; border: 1px solid var(--ligne); border-radius: 8px;
  background: var(--papier); color: var(--doux); cursor: pointer; }
.rail-sortie:hover { border-color: var(--doux); color: var(--texte); }

.scene { min-width: 0; }
.gestion .zone-gestion { max-width: none; margin: 0; padding: 2rem clamp(1.25rem, 3vw, 3rem) 4rem; }   /* pleine largeur de la scène */
.gestion .messages { max-width: none; margin: 1.25rem 0 0; padding: 0 clamp(1.25rem, 3vw, 3rem); }
.gestion .message { border-radius: 8px; background: var(--papier); border: 1px solid var(--ligne); border-left: 4px solid var(--accent); }

/* ---------- Éléments partagés ---------- */
.avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--c) 16%, white); color: color-mix(in srgb, var(--c) 70%, black);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, white); font-weight: 700; font-size: .82rem; text-decoration: none; letter-spacing: .02em; }
.puce-projet { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem .12rem .4rem; border-radius: 6px; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--c) 13%, white); color: color-mix(in srgb, var(--c) 62%, black); white-space: nowrap; }
.puce-projet::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--c); }
.etat { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--doux); }
.etat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.etat-publiee, .etat-actif { color: #23794A; }
.etat-brouillon { color: #9A6B00; }
.etat-brouillon::before { background: transparent; border: 2px solid currentColor; width: .5rem; height: .5rem; box-sizing: border-box; }
.etat-archivee { color: #8A9384; }
.gestion .bouton { border-radius: 8px; font-weight: 600; }
.bouton-ico { display: inline-flex; align-items: center; gap: .45rem; }
.bouton-large { width: 100%; padding: .7rem; font-size: 1rem; }
.sec { display: flex; flex-wrap: wrap; gap: 0 .9rem; color: var(--doux); font-size: .84rem; margin-top: .1rem; }
.sec-inline { color: var(--doux); }
.sec code { font-size: .78rem; background: none; padding: 0; color: #7D8977; }

/* En-tête de page */
.tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.tete h1 { font-size: 1.85rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
.tete-sous { margin: 0; color: var(--doux); max-width: 80ch; }

/* Panneaux génériques (formulaires existants, encadrés) */
.gestion .boite, .panneau-g { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-panneau); padding: 1.35rem 1.5rem; }
.gestion .boite { margin-bottom: 1.25rem; }
.gestion .boite > h2, .panneau-g > h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.gestion .entete-zone h1 { font-size: 1.85rem; }
.gestion .formulaire input[type=text], .gestion .formulaire input[type=email], .gestion .formulaire input[type=password],
.gestion .formulaire input[type=number], .gestion .formulaire input[type=date], .gestion .formulaire input[type=search],
.gestion .formulaire select, .gestion .formulaire textarea, .gestion .formulaire input:not([type]) { border-radius: 8px; border-color: #B9C2B2; }
.gestion .formulaire .actions { border-radius: 0 0 var(--r-panneau) var(--r-panneau); }

/* ---------- Tableau de bord : registre des cartes par projet ---------- */
.registre { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-panneau); padding: 1.35rem 1.5rem 1rem; margin-bottom: 1.5rem; }
.registre-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: .6rem; }
.registre-tete h2 { font-size: 1.05rem; margin: 0; }
.registre-totaux { display: flex; gap: 1.25rem; margin: 0; font-size: .9rem; }
.registre-totaux a { color: var(--doux); text-decoration: none; }
.registre-totaux a:hover { color: var(--accent); }
.registre-totaux strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.registre-lignes { list-style: none; margin: 0; padding: 0; }
.registre-lignes li { display: grid; grid-template-columns: minmax(14rem, 24rem) minmax(8rem, 1fr) auto; align-items: center; gap: .5rem 1.75rem;
  padding: .95rem 0 .95rem 1rem; border-top: 1px solid var(--ligne); position: relative; }
.registre-lignes li::before { content: ""; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 4px; border-radius: 2px; background: var(--c); }
.registre-projet { text-decoration: none; color: var(--texte); min-width: 0; }
.registre-projet .sigle { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; color: color-mix(in srgb, var(--c) 72%, black); }
.registre-projet .intitule { display: block; font-size: .84rem; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registre-projet:hover .sigle { text-decoration: underline; text-underline-offset: 3px; }
.jauge { display: flex; height: .8rem; border-radius: 99px; overflow: hidden; background: var(--fond); }
.jauge .j-pub { background: var(--c); }
.jauge .j-bro { background: repeating-linear-gradient(135deg, var(--c) 0 2px, color-mix(in srgb, var(--c) 22%, white) 2px 6px); }
.jauge .j-arc { background: #C9CFC4; }
.jauge .j-vide { font-size: .72rem; color: var(--doux); padding: 0 .6rem; line-height: .8rem; }
.registre-chiffres { display: flex; gap: 1.4rem; margin: 0; }
.registre-chiffres div { min-width: 3.6rem; }
.registre-chiffres dt { font-size: .76rem; color: var(--doux); }
.registre-chiffres dd { margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.registre-chiffres div { display: flex; flex-direction: column-reverse; }
.registre-chiffres .a-relire dd { color: #9A6B00; }
.registre-cle { display: flex; align-items: center; gap: .4rem 1rem; margin: .6rem 0 0; font-size: .78rem; color: var(--doux); flex-wrap: wrap; }
.registre-cle .k { display: inline-block; width: 1.4rem; height: .55rem; border-radius: 99px; margin-right: -.6rem; vertical-align: middle; }
.k-pub { background: #5D6A57; }
.k-bro { background: repeating-linear-gradient(135deg, #5D6A57 0 2px, #DADFD5 2px 6px); }
.k-arc { background: #C9CFC4; }

.duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.liste-relire { list-style: none; margin: 0; padding: 0; }
.liste-relire li { padding: .7rem 0; border-top: 1px solid var(--ligne); }
.liste-relire li:first-child { border-top: 0; padding-top: 0; }
.liste-relire a { font-weight: 600; text-decoration: none; }
.liste-relire a:hover { text-decoration: underline; }
.liste-relire .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .25rem; font-size: .84rem; color: var(--doux); }
.fil { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--ligne); }
.fil li { position: relative; padding: 0 0 .85rem .35rem; font-size: .9rem; }
.fil li::before { content: ""; position: absolute; left: -1.38rem; top: .45rem; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--papier); border: 2px solid #A9B3A2; }
.fil time { display: block; font-size: .76rem; color: var(--doux); font-variant-numeric: tabular-nums; }
.suite { margin: .25rem 0 0; font-size: .9rem; }
.vide-g { color: var(--doux); margin: 0; }

/* ---------- Listes en tableau ---------- */
.barre-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem; margin-bottom: 1rem; }
/* Filtre de statut : quatre onglets, chacun avec le symbole d'état du tableau et son effectif */
.segments { display: inline-flex; flex-wrap: wrap; align-items: stretch; background: var(--papier); border: 1px solid var(--ligne); border-radius: 10px; padding: 4px; gap: 4px; }
.seg { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .75rem; border-radius: 7px; text-decoration: none;
  color: var(--doux); font-weight: 600; font-size: .9rem; line-height: 1.2; }
.seg::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; flex: none; box-sizing: border-box; }
.seg-tout::before { display: none; }
.seg-publiee::before { background: #23794A; }
.seg-brouillon::before { border: 2px solid #9A6B00; }
.seg-archivee::before { background: #8A9384; }
.seg-nb { min-width: 1.6rem; text-align: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--doux); background: var(--fond); border-radius: 99px; padding: .18rem .45rem; }
.seg:hover { background: var(--fond); color: var(--texte); }
.seg[aria-current="true"] { background: var(--texte); color: #fff; }
.seg[aria-current="true"] .seg-nb { background: rgba(255,255,255,.18); color: #fff; }
.seg[aria-current="true"].seg-publiee::before { background: #7FD3A0; }
.seg[aria-current="true"].seg-brouillon::before { border-color: #F2C14E; }
.seg[aria-current="true"].seg-archivee::before { background: #C9CFC4; }
.seg-vide:not([aria-current="true"]) { color: #9AA394; }
.seg-vide:not([aria-current="true"]) .seg-nb { color: #9AA394; }
.recherche-g { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.recherche-g select, .recherche-g input { font: inherit; font-size: .92rem; padding: .48rem .65rem; border: 1px solid #B9C2B2; border-radius: 8px; background: var(--papier); color: var(--texte); }
.champ-loupe { position: relative; display: block; }
.champ-loupe .ico { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--doux); width: 1rem; height: 1rem; }
.champ-loupe input { padding-left: 2rem; width: min(19rem, 70vw); }
.effacer-g { font-size: .88rem; color: var(--doux); }

.table-g { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-panneau); overflow: hidden; }
.table-g table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table-g th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--doux); padding: .7rem 1rem; background: #F8F9F6; border-bottom: 1px solid var(--ligne); }
.table-g td { padding: .85rem 1rem; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.table-g tbody tr:last-child td { border-bottom: 0; }
.table-g tbody tr:hover td { background: #FAFBF8; }
.t-carte a, .t-personne a { font-weight: 600; text-decoration: none; color: var(--texte); }
.t-carte a:hover, .t-personne a:hover { color: var(--accent); text-decoration: underline; }
.t-carte .sec { gap: .5rem; }
.t-personne { display: flex; align-items: center; gap: .8rem; }
.t-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.theme-g { display: inline-flex; align-items: center; gap: .5rem; }
tr.inactif td { opacity: .6; }
.vide-bloc { background: var(--papier); border: 1px dashed #C3CBBC; border-radius: var(--r-panneau); padding: 2rem; text-align: center; color: var(--doux); }
.vide-bloc p { margin: .2rem 0; }
.gestion .pagination a { font-weight: 600; }

/* ---------- Thématiques ---------- */
.themes-g { list-style: none; margin: 0; padding: 0; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-panneau); overflow: hidden; }
.themes-g li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 7.5rem 5.5rem; align-items: center; gap: 1.1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--ligne); }
.themes-g li:first-child { border-top: 0; }
.themes-nuance { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--c);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c) 55%, white); }
.themes-texte a { font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--texte); }
.themes-texte a:hover { color: var(--accent); text-decoration: underline; }
.themes-texte p { margin: .15rem 0 0; color: var(--doux); font-size: .88rem; }
.themes-g code { font-size: .8rem; background: var(--fond); color: var(--doux); }
.themes-nb { font-size: .9rem; color: var(--doux); }
.themes-nb strong { color: var(--texte); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.themes-nb .sec { display: inline; }
.themes-action { text-align: right; }
.themes-action form { margin: 0; }
.bouton-lien.supprimer { color: var(--alerte); font-size: .88rem; }

/* ---------- Connexion ---------- */
.gestion:not(.avec-rail) .scene { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.gestion:not(.avec-rail) .zone-gestion { padding: 0; width: 100%; max-width: 25rem; }
.connexion-g { background: var(--papier); border: 1px solid var(--ligne); border-radius: 14px; padding: 2rem 2rem 1.5rem; position: relative; overflow: hidden; }
.connexion-g::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #8CC63F 0 55%, #F6EA3B 55% 80%, #E74E3B 80%); }
.connexion-g img { display: block; margin: .25rem 0 1rem; border-radius: 8px; }
.connexion-g h1 { font-size: 1.35rem; margin: 0 0 .35rem; }
.connexion-g .tete-sous { font-size: .92rem; margin-bottom: 1.25rem; }
.connexion-g .formulaire { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
.connexion-g .aide { font-size: .84rem; color: var(--doux); }
.connexion-g p { margin: .3rem 0; font-size: .9rem; }

/* ---------- Petits écrans : le rail devient une barre ---------- */
@media (max-width: 960px) {
  .avec-rail { display: block; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem .5rem; border-right: 0; border-bottom: 1px solid var(--ligne); }
  .rail-marque { padding: 0; }
  .rail-nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .rail-nav a { white-space: nowrap; }
  .rail-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .rail-pied { margin: 0 0 0 auto; flex-direction: row; align-items: center; padding: 0; }
  .rail-perimetre, .rail-lien, .rail-qui { display: none; }
  .rail-compte { border: 0; padding: 0; grid-template-columns: auto auto; }
  .rail-compte form { grid-column: auto; margin: 0; }
  .gestion .zone-gestion { padding: 1.5rem 1rem 3rem; }
  .gestion .messages { padding: 0 1rem; }
  .duo { grid-template-columns: 1fr; }
  .registre-lignes li { grid-template-columns: 1fr; gap: .55rem; }
  .themes-g li { grid-template-columns: auto minmax(0, 1fr); }
  .themes-g code, .themes-g .masquable { display: none; }
  .themes-nb, .themes-action { grid-column: 2; text-align: left; }
  .table-g { overflow-x: auto; }
  .table-g .masquable { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .rail-nav a, .seg, .rail-sortie { transition: background-color .15s, color .15s; }
}