@charset "UTF-8";

/* =====================================================================
   GESA CVL — Feuille de style unique
   Charte issue du logo : marine #013C64, cramoisi #A80927, rose #D3A595.
   Conçue mobile d'abord : le rail de navigation est un tiroir en dessous
   de 900 px, une colonne fixe au-dessus. Aucun JavaScript n'est requis.
   ===================================================================== */

:root{
  --marine:#013C64; --marine-fonce:#012840; --marine-clair:#0A5285;
  --cramoisi:#A80927; --cramoisi-fonce:#8C0721;
  --rose:#D3A595; --rose-pale:#EFE0DA; --rose-voile:#F8EDE9;
  --ivoire:#FBF7F5; --blanc:#FFFFFF;
  --encre:#0B1E2D; --gris:#6C7A85; --gris-clair:#9AA6AE; --filet:#F4EEEB;

  --display:"Bodoni Moda", Didot, Georgia, serif;
  --ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --rail:264px;
  --biseau:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivoire);color:var(--encre);
  font-family:var(--ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none !important}
a{color:var(--marine)}
:focus-visible{outline:2px solid var(--cramoisi);outline-offset:2px}
.hors-ecran{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------
   1. Ossature et tiroir de navigation
   --------------------------------------------------------------------- */

.app{min-height:100vh;display:flex;flex-direction:column}

.bascule-menu{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:40;
  background:var(--marine);color:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.bascule-menu:checked ~ .rail{transform:translateX(0)}

.voile{
  position:fixed;inset:0;z-index:35;background:rgba(1,40,64,.5);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.bascule-menu:checked ~ .voile{opacity:1;pointer-events:auto}

.rail-entete{padding:20px 18px 16px;border-bottom:1px solid rgba(211,165,149,.28)}
.rail-entete img{display:block;width:84px;background:#fff;padding:7px 9px}
.rail-entete .portail{
  display:block;margin-top:12px;font-family:var(--display);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);
}

.rail nav{padding:12px 8px;flex:1}
.groupe{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose);padding:14px 12px 6px;
}
.lien{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px;color:rgba(255,255,255,.84);font-size:15px;
  text-decoration:none;border-left:2px solid transparent;
}
.lien:hover{background:rgba(255,255,255,.07);color:#fff}
.lien.actif{background:rgba(255,255,255,.11);border-left-color:var(--rose);color:#fff;font-weight:600}
.lien .compte{font-family:var(--mono);font-size:11.5px;color:var(--rose)}

.rail-pied{
  padding:14px 18px;border-top:1px solid rgba(211,165,149,.28);
  font-size:12.5px;color:rgba(255,255,255,.6);
}
.rail-pied .echeance{color:var(--rose)}
.rail-pied a{color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid var(--rose)}

/* ---------------------------------------------------------------------
   2. Barre haute
   --------------------------------------------------------------------- */

.haut{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:var(--blanc);
  border-bottom:1px solid var(--rose-pale);
  position:sticky;top:0;z-index:20;
}
.bouton-menu{
  display:grid;place-content:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--rose-pale);background:var(--ivoire);cursor:pointer;
}
.bouton-menu span{
  display:block;width:18px;height:2px;background:var(--marine);position:relative;
}
.bouton-menu span::before,.bouton-menu span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--marine);
}
.bouton-menu span::before{top:-6px}
.bouton-menu span::after{top:6px}

.titre-page{
  font-family:var(--display);font-weight:400;font-size:20px;color:var(--marine);
  flex:1;min-width:0;
}
.recherche{order:5;flex:1 1 100%;min-width:0}
.recherche input{
  width:100%;font-family:var(--ui);font-size:15px;padding:10px 12px;
  background:var(--ivoire);border:1px solid var(--rose-pale);border-radius:0;color:var(--encre);
}
.recherche input:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(1,60,100,.12)}
.espace{display:none}

.profil-demo{
  order:6;display:flex;align-items:center;gap:8px;flex:1 1 100%;
  margin:0;font-size:12.5px;color:var(--gris);
}
.profil-demo select{
  flex:1;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--marine);
  background:var(--blanc);border:1px solid var(--rose);padding:9px 10px;border-radius:0;
}
.profil-demo .bouton{padding:9px 12px;font-size:13px}

.utilisateur{display:flex;align-items:center;gap:9px}
.pastille{
  width:36px;height:36px;background:var(--marine);color:#fff;flex-shrink:0;
  display:grid;place-content:center;font-size:12.5px;font-weight:600;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);
}
.utilisateur .bloc{display:none}
.utilisateur .nom{font-size:13.5px;font-weight:600;line-height:1.2}
.utilisateur .role{font-size:12px;color:var(--gris)}

/* ---------------------------------------------------------------------
   3. Contenu
   --------------------------------------------------------------------- */

main{padding:18px 16px 56px}

.bandeau-droits,.bandeau-source{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;margin-bottom:22px;font-size:13.5px;
}
.bandeau-droits{background:var(--rose-voile);border-left:3px solid var(--rose);color:#5C4A44}
.bandeau-droits b{color:var(--marine)}
.bandeau-source{
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-left:3px solid var(--marine);color:var(--gris);
}
.bandeau-source b{color:var(--marine)}
.bandeau-source i,.verrou i{
  width:8px;height:8px;background:var(--marine);transform:rotate(45deg);
  display:inline-block;flex-shrink:0;margin-top:6px;
}
.verrou i{background:var(--rose)}

.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.carte{
  background:var(--blanc);border:1px solid var(--rose-pale);padding:16px;
  clip-path:polygon(0 0,calc(100% - var(--biseau)) 0,100% var(--biseau),100% 100%,0 100%);
}
.carte .etiquette{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.carte .valeur{font-family:var(--display);font-size:32px;line-height:1.05;margin-top:6px;color:var(--marine)}
.carte .valeur.alerte{color:var(--cramoisi)}
.carte .detail{font-size:12.5px;color:var(--gris);margin-top:5px}

.section-titre{margin:0 0 12px}
.section-titre h2{font-family:var(--display);font-weight:400;font-size:20px;color:var(--marine)}
.section-titre p{font-size:13px;color:var(--gris);margin-top:2px}
.section-espacee{margin-top:28px}

/* Parcours en chevrons : la diagonale à 45° du cœur du logo */
.parcours{display:flex;flex-direction:column;gap:3px;margin-bottom:28px}
.phase{
  background:var(--blanc);border:1px solid var(--rose-pale);border-left:3px solid var(--rose);
  padding:13px 16px;
}
.phase.validation,.phase.actif{border-left-color:var(--marine)}
.phase.sortie{border-left-color:var(--cramoisi)}
.phase .nom{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.phase .nb{font-family:var(--display);font-size:26px;color:var(--marine);line-height:1.1;margin-top:2px}
.phase .liste{font-size:12.5px;color:var(--gris);margin-top:4px}

/* ---------------------------------------------------------------------
   4. Boutons, filtres, tableaux
   --------------------------------------------------------------------- */

.barre-outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filtre{
  flex:1 1 140px;font-family:var(--ui);font-size:13.5px;padding:10px 11px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);border-radius:0;
}

.bouton{
  font-family:var(--ui);font-size:14px;font-weight:600;
  padding:11px 16px;border:1px solid var(--marine);background:var(--marine);color:#fff;
  cursor:pointer;text-decoration:none;display:inline-block;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.bouton:hover{background:var(--marine-fonce)}
.bouton.secondaire{background:var(--blanc);color:var(--marine);border-color:var(--rose)}
.bouton.secondaire:hover{background:var(--rose-voile)}
.bouton.danger{background:var(--cramoisi);border-color:var(--cramoisi)}
.bouton.danger:hover{background:var(--cramoisi-fonce)}
.bouton.large{width:100%;text-align:center}

.verrou{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--blanc);border:1px dashed var(--rose);
  padding:11px 14px;margin-bottom:12px;font-size:13.5px;color:var(--gris);
}

.tableau-cadre{background:var(--blanc);border:1px solid var(--rose-pale);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
thead th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marine);font-weight:600;padding:11px 13px;
  border-bottom:1px solid var(--rose-pale);white-space:nowrap;
}
tbody td{padding:11px 13px;border-bottom:1px solid var(--filet);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td.ref{font-family:var(--mono);font-size:12.5px;color:var(--gris);white-space:nowrap}
td.nom strong{font-weight:600}
td.nom span{display:block;font-size:12.5px;color:var(--gris)}
td.date{font-family:var(--mono);font-size:13px;white-space:nowrap}
td.actions{text-align:right;white-space:nowrap}

.lien-action{
  background:none;border:none;font-family:var(--ui);font-size:13px;font-weight:600;
  color:var(--marine);cursor:pointer;padding:6px;
}
.lien-action:hover{color:var(--cramoisi)}

.pastille-statut{
  display:inline-block;font-size:12px;padding:4px 9px;white-space:nowrap;border:1px solid;
}
.st-marine{color:var(--marine);border-color:rgba(1,60,100,.3);background:rgba(1,60,100,.06)}
.st-cramoisi{color:var(--cramoisi);border-color:rgba(168,9,39,.3);background:rgba(168,9,39,.05)}
.st-rose{color:#8C5C4A;border-color:var(--rose);background:var(--rose-voile)}
.st-gris{color:var(--gris);border-color:#DCD6D2;background:#F5F2F0}

.taches{background:var(--blanc);border:1px solid var(--rose-pale)}
.tache{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--filet);font-size:14px;
}
.tache:last-child{border-bottom:none}
.tache .quand{font-family:var(--mono);font-size:12.5px;color:var(--cramoisi);flex-shrink:0}
.tache .quand.plus-tard{color:var(--gris)}
.tache .quoi{flex:1 1 200px}
.tache .quoi em{font-style:normal;font-weight:600}

/* Tableau de bord : la référence ouvre la fiche, et une ligne explicite
   remplace un tableau vide. La référence reprend le gris et le mono de
   td.ref, y compris dans la liste des actions à traiter. */
.tb-lien{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.tb-lien:hover{color:var(--cramoisi)}
.tache .quoi .tb-lien{font-family:var(--mono);font-size:12.5px;color:var(--gris)}
.tb-vide{color:var(--gris);font-style:italic;text-align:center;padding:20px 13px}

.grille-bas{display:grid;gap:24px;margin-top:28px}

/* ---------------------------------------------------------------------
   5. Espace adhérent (front-office)
   --------------------------------------------------------------------- */

.accueil-adherent{
  background:var(--marine);color:#fff;padding:22px 18px;margin-bottom:22px;position:relative;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
}
.accueil-adherent .salutation{
  font-family:var(--display);font-size:26px;font-weight:400;line-height:1.15;
}
.accueil-adherent .salutation em{font-style:italic;color:var(--rose)}
.accueil-adherent .reference{
  font-family:var(--mono);font-size:12.5px;color:var(--rose);margin-top:8px;
  letter-spacing:.04em;
}
.accueil-adherent .resume{margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.8);max-width:52ch}

.jalons{list-style:none;margin:0 0 26px;padding:0;background:var(--blanc);border:1px solid var(--rose-pale)}
.jalon{display:flex;gap:14px;padding:14px;border-bottom:1px solid var(--filet)}
.jalon:last-child{border-bottom:none}
.jalon .puce{
  width:12px;height:12px;flex-shrink:0;margin-top:5px;transform:rotate(45deg);
  background:var(--rose-pale);border:1px solid var(--rose);
}
.jalon.fait .puce{background:var(--marine);border-color:var(--marine)}
.jalon.encours .puce{background:var(--cramoisi);border-color:var(--cramoisi)}
.jalon .titre{font-weight:600;font-size:14.5px}
.jalon .note{font-size:13px;color:var(--gris);margin-top:2px}
.jalon.fait .titre{color:var(--gris);font-weight:400}

.pieces{list-style:none;margin:0;padding:0;background:var(--blanc);border:1px solid var(--rose-pale)}
.piece{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 14px;border-bottom:1px solid var(--filet);
}
.piece:last-child{border-bottom:none}
.piece .libelle{flex:1 1 180px;font-size:14.5px}
.piece .libelle small{display:block;color:var(--gris);font-size:12.5px}

.definitions{background:var(--blanc);border:1px solid var(--rose-pale);padding:4px 14px}
.definitions dl{margin:0}
.definitions div{display:flex;flex-wrap:wrap;gap:6px 14px;padding:11px 0;border-bottom:1px solid var(--filet)}
.definitions div:last-child{border-bottom:none}
.definitions dt{
  flex:1 1 150px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin:0;
}
.definitions dd{flex:2 1 200px;margin:0;font-size:14.5px}

/* ---------------------------------------------------------------------
   6. Connexion
   --------------------------------------------------------------------- */

.ecran{min-height:100vh;display:flex;flex-direction:column}

.enseigne{
  position:relative;background:var(--marine);color:#fff;
  padding:28px 22px 26px;overflow:hidden;
  display:flex;flex-direction:column;gap:26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 56px),calc(100% - 56px) 100%,0 100%);
}
.enseigne::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:56px;height:56px;
  background:var(--rose);clip-path:polygon(0 0,100% 0,0 100%);
}
.trame{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(211,165,149,.13) 0 1px,transparent 1px 22px);
}
.coeur{position:absolute;right:-80px;bottom:-50px;width:250px;opacity:.4;pointer-events:none}
.coeur path{
  fill:none;stroke:var(--rose);stroke-width:1.6;stroke-linejoin:miter;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:tracer 2.4s cubic-bezier(.5,0,.2,1) .25s forwards;
}
.coeur path.doublure{stroke:rgba(255,255,255,.22);animation-delay:.55s}
@keyframes tracer{to{stroke-dashoffset:0}}

.marque{
  position:relative;font-family:var(--display);font-size:14px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--rose);
}
.accroche{position:relative}
.accroche h1{
  font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;
  margin-bottom:14px;letter-spacing:-.01em;
}
.accroche h1 em{font-style:italic;color:var(--rose)}
.accroche p{max-width:34ch;color:rgba(255,255,255,.76);font-size:15px}

.pied-enseigne{
  position:relative;display:flex;gap:22px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.pied-enseigne span{display:flex;align-items:center;gap:8px}
.pied-enseigne i{width:6px;height:6px;background:var(--rose);display:inline-block;transform:rotate(45deg)}

.acces{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px 22px 48px}
.carte-acces{width:100%;max-width:400px}
.logo-acces{display:block;width:118px;margin-bottom:26px}

.etape h2{font-family:var(--display);font-weight:500;font-size:27px;line-height:1.15;color:var(--marine)}
.etape .intro{margin:8px 0 26px;color:var(--gris);font-size:15px}

.champ{margin-bottom:18px}
.champ label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marine);margin-bottom:7px;
}
.saisie{position:relative}
input[type=email],input[type=password],input[type=text],input[type=tel],textarea{
  width:100%;font-family:var(--ui);font-size:16px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-bottom:1.5px solid var(--rose);border-radius:0;padding:13px 14px;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:#B9AFA9}
input:focus,textarea:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(1,60,100,.13)}
.champ.erreur input{border-color:var(--cramoisi);border-bottom-color:var(--cramoisi)}
.champ.erreur input:focus{box-shadow:0 0 0 3px rgba(168,9,39,.13)}

.bascule{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-family:var(--ui);font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--marine);
  padding:12px;cursor:pointer;
}
.bascule:hover{color:var(--cramoisi)}
.message{margin-top:7px;font-size:13px;color:var(--cramoisi)}

.alerte{
  display:flex;align-items:flex-start;gap:11px;background:#FCF0F2;
  border-left:3px solid var(--cramoisi);padding:12px 14px;margin-bottom:20px;
  font-size:14px;color:#7C0A20;
}
.options{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 24px;flex-wrap:wrap}
.memoriser{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.memoriser input{
  appearance:none;width:18px;height:18px;border:1.5px solid var(--rose);
  background:var(--blanc);display:grid;place-content:center;cursor:pointer;
}
.memoriser input:checked{background:var(--marine);border-color:var(--marine)}
.memoriser input:checked::after{
  content:"";width:5px;height:9px;border:solid var(--blanc);
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px);
}
.acces a{color:var(--marine);text-decoration:none;border-bottom:1px solid var(--rose)}
.acces a:hover{color:var(--cramoisi);border-color:var(--cramoisi)}
.valider{
  width:100%;font-family:var(--ui);font-size:15.5px;font-weight:600;
  color:#fff;background:var(--marine);border:none;padding:15px 20px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.valider:hover{background:var(--marine-fonce)}
.code{font-family:var(--mono);font-size:24px;letter-spacing:.5em;text-align:center;padding-left:24px}
.lien-retour{display:inline-block;margin-top:18px;font-size:14px}

.pied-acces{
  margin-top:32px;padding-top:16px;border-top:1px solid var(--rose-pale);
  display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--gris);
}
.pied-acces .ref{font-family:var(--mono)}

.comptes-demo{
  margin-top:22px;background:var(--blanc);border:1px solid var(--rose-pale);
  border-left:3px solid var(--rose);padding:13px 15px;font-size:13px;color:var(--gris);
}
.comptes-demo b{color:var(--marine)}
.comptes-demo ul{margin:8px 0 0;padding-left:18px}
.comptes-demo code{font-family:var(--mono);font-size:12.5px;color:var(--encre)}

/* ---------------------------------------------------------------------
   7. Écrans larges
   --------------------------------------------------------------------- */

@media (min-width:900px){
  .app{display:grid;grid-template-columns:var(--rail) 1fr}
  .rail{position:sticky;top:0;height:100vh;transform:none;z-index:1}
  .voile,.bouton-menu{display:none}
  .colonne{min-width:0}

  .haut{padding:16px 30px;gap:20px}
  .titre-page{font-size:25px;flex:0 0 auto}
  .recherche{order:0;flex:1 1 auto;max-width:340px}
  .espace{display:block;flex:1}
  .profil-demo{order:0;flex:0 0 auto}
  .profil-demo select{flex:0 0 auto}
  .utilisateur .bloc{display:block}

  main{padding:26px 30px 60px}
  .cartes{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
  .carte .valeur{font-size:40px}
  .parcours{flex-direction:row;flex-wrap:wrap}
  .phase{
    flex:1;min-width:150px;padding:14px 16px 13px 20px;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
  }
  .phase:last-child{clip-path:none}
  .grille-bas{grid-template-columns:1.35fr 1fr}
  .section-titre{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .section-titre h2{font-size:22px}

  .accueil-adherent{padding:30px 32px;clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),calc(100% - 46px) 100%,0 100%)}
  .accueil-adherent .salutation{font-size:34px}

  .ecran{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
  .enseigne{
    padding:56px 56px 44px;justify-content:space-between;gap:0;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 88px),calc(100% - 88px) 100%,0 100%);
  }
  .enseigne::after{width:88px;height:88px}
  .coeur{right:-130px;bottom:-70px;width:min(470px,62%);opacity:.55}
  .accroche{max-width:22ch}
  .accroche h1{font-size:clamp(38px,4.2vw,60px);margin-bottom:20px}
  .acces{align-items:center;padding:48px 40px}
  .logo-acces{width:132px;margin-bottom:34px}
}

@media (prefers-reduced-motion:reduce){
  .coeur path{animation:none;stroke-dashoffset:0}
  .rail,.voile{transition:none}
}

/* Pied de l'étape « code » : les deux actions secondaires, groupées. */
.pied-etape {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(1, 60, 100, .12);
  text-align: center;
}

.pied-etape .aide {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #6C7A85;
}

.pied-etape form { margin: 0; }

/* Un bouton qui doit se lire comme un lien : l'action passe par POST
   (jeton CSRF), mais rien ne justifie de la présenter comme le bouton
   principal, déjà pris par « Vérifier et ouvrir la session ». */
.lien-action {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #013C64;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(1, 60, 100, .35);
}

.lien-action:hover { text-decoration-color: currentColor; }

.lien-action:focus-visible {
  outline: 2px solid #013C64;
  outline-offset: 3px;
  border-radius: 2px;
}

.lien-action[disabled] {
  color: #6C7A85;
  cursor: default;
  text-decoration: none;
}

.pied-etape .lien-retour {
  display: block;
  margin-top: 14px;
}

/* ---------------------------------------------------------------------
   8. Adhésion — renvoi depuis la connexion + page dédiée (rejoindre.php)
   --------------------------------------------------------------------- */

/* Renvoi vers rejoindre.php, groupé avec les badges de confiance dans le
   panneau de marque : même nombre d'enfants flex qu'avant (.enseigne-pied
   remplace .pied-enseigne en tant qu'enfant direct), donc la répartition
   verticale existante (justify-content:space-between en desktop) n'est
   pas perturbée. */
.enseigne-pied{display:flex;flex-direction:column;gap:18px}
.enseigne-adhesion{
  padding-top:18px;border-top:1px solid rgba(211,165,149,.28);
  display:flex;flex-direction:column;gap:12px;
}
.enseigne-adhesion p{
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);max-width:30ch;
}
.enseigne-adhesion .bouton{align-self:flex-start}

/* En-tête minimal des pages publiques hors connexion (rejoindre.php...). */
.entete-simple{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:var(--blanc);border-bottom:1px solid var(--rose-pale);
}
.entete-logo{display:block;line-height:0}
.entete-logo img{display:block;height:32px;width:auto}
.entete-retour{
  font-size:13.5px;color:var(--marine);text-decoration:none;
  border-bottom:1px solid var(--rose);
}
.entete-retour:hover{color:var(--cramoisi);border-color:var(--cramoisi)}

.presentation{background:var(--ivoire);padding:40px 20px 56px}
.presentation-cadre{max-width:960px;margin:0 auto}

/* Même traitement que .accueil-adherent : bandeau marine, coin biseauté,
   trame héritée de l'écran de connexion. */
.presentation-invite{
  position:relative;overflow:hidden;background:var(--marine);color:#fff;
  padding:22px 18px;margin-bottom:28px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
}
.presentation-invite .etiquette{
  position:relative;display:block;font-family:var(--display);font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin-bottom:10px;
}
.presentation-invite h2{
  position:relative;font-family:var(--display);font-weight:400;font-size:26px;
  line-height:1.14;letter-spacing:-.01em;margin-bottom:12px;max-width:24ch;
}
.presentation-invite h2 em{font-style:italic;color:var(--rose)}
.presentation-invite p{
  position:relative;color:rgba(255,255,255,.78);font-size:14.5px;
  max-width:46ch;margin-bottom:22px;
}
.presentation-invite .bouton{position:relative}

.presentation-section{margin-bottom:32px}
.presentation-section:last-child{margin-bottom:0}
.presentation-section h3{
  font-family:var(--display);font-weight:400;font-size:19px;color:var(--marine);
  margin-bottom:10px;
}
.presentation-section > p{font-size:14.5px;color:var(--gris);margin-bottom:14px}

.liste-categories{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0;
}

.liste-losange{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.liste-losange li{
  display:flex;align-items:flex-start;gap:11px;font-size:14.5px;
  color:var(--encre);line-height:1.5;
}
.liste-losange .losange{
  width:6px;height:6px;flex-shrink:0;margin-top:7px;
  background:var(--rose);transform:rotate(45deg);
}

.presentation-grille{display:grid;gap:22px;margin-bottom:36px}

/* Tarifs : réutilise .tableau-cadre / table déjà défini en section 4. */
.presentation-section .tableau-cadre{margin-bottom:14px}
td.montant{font-family:var(--mono);font-size:13px;white-space:nowrap}
td.a-verifier{color:var(--gris);font-style:italic}
.note-tableau{margin:0;font-size:12.5px;color:var(--gris);font-style:italic}

.grille-atouts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-top:18px;
}
.atout{
  background:var(--blanc);border:1px solid var(--rose-pale);padding:18px 18px 20px;
  clip-path:polygon(0 0,calc(100% - var(--biseau)) 0,100% var(--biseau),100% 100%,0 100%);
}
.atout .icone{
  width:36px;height:36px;display:grid;place-content:center;margin-bottom:14px;
  background:var(--rose-voile);color:var(--marine);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);
}
.atout .icone svg{width:18px;height:18px}
.atout h4{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--marine);margin-bottom:6px}
.atout p{font-size:13.5px;color:var(--gris);line-height:1.55;margin:0}

.presentation-action{margin-top:28px;text-align:center}

@media (min-width:900px){
  .presentation{padding:64px 40px 80px}
  .presentation-invite{
    padding:30px 32px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),calc(100% - 46px) 100%,0 100%);
  }
  .presentation-invite h2{font-size:32px;max-width:20ch}
  .presentation-grille{grid-template-columns:1fr 1fr;gap:26px}
  .entete-simple{padding:18px 40px}
}

/* État vide d'un tableau (ex. adherents.php sans résultat) */
td.vide{
  padding:32px 16px;text-align:center;color:var(--gris);font-size:14px;
}

/* ---------------------------------------------------------------------
   9. Demande d'adhésion — formulaire en 3 volets (demande-adhesion.php)
   --------------------------------------------------------------------- */

.formulaire-cadre{max-width:680px;margin:0 auto}
@media (min-width:900px){
  .formulaire-cadre{max-width:720px}
}

input[type=date]{
  width:100%;font-family:var(--ui);font-size:16px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-bottom:1.5px solid var(--rose);border-radius:0;padding:12px 14px;
}

/* Repère d'avancement (1. Votre adhésion / 2. Votre recherche / 3. Votre structure) */
.progression-etapes{list-style:none;display:flex;margin:0 0 30px;padding:0}
.progression-etapes li{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-clair);text-align:center;
}
.progression-etapes li::before{
  content:"";position:absolute;top:6px;left:-50%;width:100%;height:1px;
  background:var(--rose-pale);z-index:0;
}
.progression-etapes li:first-child::before{content:none}
.progression-etapes .puce{
  position:relative;z-index:1;width:13px;height:13px;background:var(--rose-pale);
  border:1px solid var(--rose);transform:rotate(45deg);
}
.progression-etapes li.fait .puce{background:var(--marine);border-color:var(--marine)}
.progression-etapes li.fait::before{background:var(--marine)}
.progression-etapes li.encours .puce{background:var(--cramoisi);border-color:var(--cramoisi)}
.progression-etapes li.encours{color:var(--marine);font-weight:600}

/* Regroupement de plusieurs champs sur une même ligne (SIRET + code APE,
   nom/prénom/statut du représentant, téléphone + e-mail...) */
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:560px){
  .champ-duo,.champ-trio{grid-template-columns:1fr}
}

/* Un champ à l'intérieur d'un .champ-duo/.champ-trio : même traitement
   que .champ/.champ label, mais sans la marge basse (gérée par le gap
   de la grille parente) et scopé pour ne pas dupliquer .champ. */
.sous-groupe{margin-bottom:0}
.sous-groupe .sous-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marine);margin-bottom:6px;
}
.sous-groupe.erreur input{border-color:var(--cramoisi);border-bottom-color:var(--cramoisi)}

/* Petit texte d'aide sous un intitulé de question */
.aide-champ{font-size:12.5px;color:var(--gris);margin:-3px 0 9px}

/* Champ révélé conditionnellement (ex. « Autre : précisez ») */
.sous-champ{margin-top:10px}
.sous-champ input{
  width:100%;font-family:var(--ui);font-size:15px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);border-bottom:1.5px solid var(--rose);
  border-radius:0;padding:11px 13px;
}
.sous-champ.erreur input{border-color:var(--cramoisi);border-bottom-color:var(--cramoisi)}

/* Cases à cocher / boutons radio, même recette visuelle que .memoriser
   (case de connexion.php) généralisée aux deux types de contrôle.
   Scopé sous .groupe-options (spécificité 0,2,0) pour battre .champ label
   (0,1,1) — sinon .champ label{display:block} écrase .option{display:flex}
   puisque le <label class="option"> est aussi un descendant de .champ. */
.groupe-options{display:grid;gap:10px;margin:6px 0}
.groupe-options.horizontal{display:flex;flex-wrap:wrap;gap:10px 24px}
.groupe-options .option{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--encre);cursor:pointer;line-height:1.4}
.groupe-options .option input{
  appearance:none;width:18px;height:18px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--rose);background:var(--blanc);display:grid;place-content:center;cursor:pointer;
}
.groupe-options .option input[type=radio]{border-radius:50%}
.groupe-options .option input:checked{background:var(--marine);border-color:var(--marine)}
.groupe-options .option input[type=checkbox]:checked::after{
  content:"";width:5px;height:9px;border:solid var(--blanc);
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px);
}
.groupe-options .option input[type=radio]:checked::after{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blanc);
}

/* Question atténuée visuellement (ex. page 2 : la question non pertinente
   selon la case cochée en Q9 reste visible et remplissable, juste grisée). */
.champ-attenue{opacity:.42}
.champ-attenue textarea,.champ-attenue input{cursor:not-allowed;background:var(--filet)}

/* Disclosure « Pour informations » (journée de solidarité, DUERP...) */
.en-savoir-plus{margin-top:8px}
.en-savoir-plus summary{
  font-size:13px;font-weight:600;color:var(--marine);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px;
}
.en-savoir-plus summary::-webkit-details-marker{display:none}
.en-savoir-plus summary::before{content:"+";font-family:var(--mono)}
.en-savoir-plus[open] summary::before{content:"–"}
.en-savoir-plus p{
  margin:8px 0 0;padding:10px 12px;background:var(--rose-voile);font-size:13px;
  color:#5C4A44;line-height:1.55;
}

/* Petit badge « Obligation légale » à côté d'une question (DUERP) */
.etiquette-obligation{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cramoisi);border:1px solid rgba(168,9,39,.3);
  background:rgba(168,9,39,.05);padding:2px 7px;margin-left:6px;vertical-align:middle;
}

/* Barre Précédent / Suivant / Envoyer en bas de chaque volet */
.actions-formulaire{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;
}
.valider.etroit{width:auto;padding:13px 26px}

/* Écran de confirmation */
.confirmation-envoi{background:var(--blanc);border:1px solid var(--rose-pale);padding:28px 24px}
.etiquette-confirmation{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marine);background:var(--rose-voile);padding:4px 10px;margin-bottom:12px;
}
.confirmation-envoi h2{font-family:var(--display);font-weight:400;font-size:24px;color:var(--marine);margin-bottom:10px}
.confirmation-envoi p{font-size:14.5px;color:var(--gris);line-height:1.6;margin-bottom:14px}
.confirmation-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 28px}
.recapitulatif-impression{margin-top:8px}
.recap-section{margin-bottom:24px}
.recap-section:last-child{margin-bottom:0}
.recap-section h3{
  font-family:var(--display);font-weight:400;font-size:16px;color:var(--marine);
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rose-pale);
}

/* En-tête dédié à l'impression : redondant à l'écran (la même info est
   déjà dans .intro-confirmation, juste au-dessus, en plus chaleureux),
   donc masqué par défaut et affiché uniquement via @media print. */
.entete-impression{display:none}
.marque-impression{
  display:block;font-family:var(--display);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:#013C64;margin-bottom:6px;
}
.titre-impression{font-family:var(--display);font-weight:400;font-size:19px;color:#013C64;margin:0 0 6px}
.meta-impression{font-family:var(--mono);font-size:11px;color:#555;margin:0}

/* ---------------------------------------------------------------------
   14. Processus devis — pastille d'action, horodatage de statut et
   compteur de nouveautés. Même grammaire visuelle que .pastille-statut :
   angles francs, biseau réservé aux cadres, couleurs de la charte.
   --------------------------------------------------------------------- */

/* Action attendue sur un dossier, colonne « Action » de back/adherents.php.
   Reprend les modificateurs .st-* déjà définis en section 4. */
.pastille-action{
  display:inline-block;font-size:12px;padding:4px 9px;white-space:nowrap;
  border:1px dashed;font-family:var(--mono);letter-spacing:.01em;
}

/* Horodatage du statut courant, sous la pastille : information de second
   plan, elle ne doit pas concurrencer le libellé du statut. */
.depuis-le{
  display:block;margin-top:4px;font-family:var(--mono);
  font-size:11px;color:var(--gris);white-space:nowrap;
}

/* Compteur de documents non lus dans le rail de navigation. Le rail est
   sur fond marine : le cramoisi seul manquerait de contraste, d'où le
   texte blanc et le liseré rose. */
.badge-nombre{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--cramoisi);border:1px solid var(--rose);
  color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:600;line-height:1;
}

/* Même compteur près du nom de l'utilisateur en en-tête de back-office :
   fond clair, donc cramoisi plein sans liseré. */
.cloche{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;padding:6px;cursor:pointer;color:var(--marine);
}
.cloche .badge-nombre{
  border-color:transparent;
}
.cloche:hover{color:var(--cramoisi)}

/* Bandeau de confirmation, pendant clair de .alerte (section 6). */
.succes{
  display:flex;align-items:flex-start;gap:11px;background:#EDF3F7;
  border-left:3px solid var(--marine);padding:12px 14px;margin-bottom:20px;
  font-size:14px;color:var(--marine);
}

/* Rappel d'un devis en attente, en tête du tableau de bord adhérent. */
.rappel-devis{
  background:var(--rose-voile);border:1px solid var(--rose);
  padding:20px 22px;margin:24px 0 4px;
  clip-path:polygon(var(--biseau) 0,100% 0,100% calc(100% - var(--biseau)),calc(100% - var(--biseau)) 100%,0 100%,0 var(--biseau));
}
.rappel-devis p{margin:0 0 6px;font-size:14.5px;color:#7A4E3E}
.rappel-devis .rappel-titre{
  font-family:var(--display);font-size:19px;font-weight:400;color:var(--marine);margin-bottom:8px;
}
.rappel-devis .bouton{margin-top:10px}

/* En-tête de la fiche individuelle (back/adherent.php) */
.fiche-entete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--blanc);border:1px solid var(--rose-pale);padding:22px 24px;margin-bottom:24px;
}
.fiche-reference{font-family:var(--mono);font-size:12px;color:var(--cramoisi);margin:0}
.fiche-nom{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;
  color:var(--marine);margin:4px 0 6px;
}
/* Prénom et nom de l'adhérent, à gauche de la raison sociale. Police
   d'interface et corps réduit : la pastille accompagne le titre sans lui
   disputer la lecture. */
.fiche-personne{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marine);line-height:1.4;white-space:nowrap;
  background:var(--rose-voile);border:1px solid var(--rose-pale);padding:4px 10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.fiche-structure{min-width:0}
.fiche-meta{font-size:14px;color:var(--gris);margin:0}
.fiche-etat{text-align:right}

/* Valeur de carte moins imposante que .carte .valeur : ces cartes-là
   portent des dates et des adresses, pas des chiffres. */
.carte .valeur-moyenne{
  font-family:var(--ui);font-size:16px;font-weight:600;line-height:1.35;
  margin-top:6px;color:var(--marine);word-break:break-word;
}

/* Formulaires de la fiche : dépôt de pièce, mise à jour de l'action. */
.depot-document{
  background:var(--blanc);border:1px solid var(--rose-pale);padding:20px 22px;margin-bottom:8px;
}
.depot-document .actions-formulaire{margin-top:6px}

/* Dépôt suspendu tant que l'adhérent n'a pas répondu : la section reste
   lisible — le gestionnaire doit voir ce qui existe — mais recule d'un
   plan et n'appelle plus le geste. */
.depot-document.inerte{opacity:.55;background:var(--ivoire)}
.depot-document.inerte label,
.depot-document.inerte .aide{color:var(--gris)}
.depot-document.inerte input,
.depot-document.inerte select,
.depot-document.inerte .bouton{cursor:not-allowed}

.mention-inerte{
  margin:0 0 18px;padding:11px 14px;
  background:var(--rose-voile);border-left:3px solid var(--rose);
  font-size:13.5px;line-height:1.6;color:#7A4E3E;opacity:1;
}
.aide{display:block;font-size:12.5px;font-weight:400;color:var(--gris);margin-top:2px}

input[type=file]{
  width:100%;font-family:var(--ui);font-size:14px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-bottom:1.5px solid var(--rose);padding:11px 13px;
}

/* Un bouton d'envoi placé dans une cellule de tableau : le formulaire ne
   doit pas casser l'alignement de la colonne. */
.ligne-formulaire{display:inline}
.precision-ligne{
  width:150px;font-family:var(--ui);font-size:12.5px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  padding:5px 8px;margin-right:4px;vertical-align:middle;
}
.ligne-motif td{background:var(--rose-voile);font-size:13.5px;color:#7A4E3E}
.ligne-motif .etiquette{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:4px;
}

/* Documents côté adhérent */
.document{
  background:var(--blanc);border:1px solid var(--rose-pale);
  padding:20px 22px;margin-bottom:16px;
}
.document-entete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.document-categorie{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:0 0 6px;
}
.document-nom{font-family:var(--display);font-size:20px;font-weight:400;color:var(--marine);margin:0 0 4px}
.document-date{font-size:13px;color:var(--gris);margin:0}
.document-etat{text-align:right}
.document-actions{margin-top:16px}
.document-suite{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--filet);
  font-size:14px;color:var(--gris);
}
.document-motif{
  margin-top:16px;border-left:3px solid var(--cramoisi);
  background:var(--rose-voile);padding:12px 16px;
}
.document-motif p{margin:0;font-size:14px;color:#7A4E3E}
.document-motif .etiquette{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:5px;
}
.marque-nouveau{
  display:inline-block;margin-left:8px;padding:2px 7px;
  background:var(--cramoisi);color:#fff;font-family:var(--ui);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}

/* Décision sur un devis */
.decision-devis{margin-top:18px;padding-top:16px;border-top:1px solid var(--filet)}
.decision-consigne{margin:0 0 12px;font-size:14.5px;color:var(--encre)}
.obligatoire{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cramoisi);margin-left:6px;
}

/* Le motif n'est révélé qu'au choix « Je refuse » : la règle s'appuie sur
   l'état du bouton radio, sans JavaScript. Sur un navigateur sans :has(),
   le champ reste affiché en permanence — moins élégant, mais le refus
   demeure possible ; le contrôle du motif est de toute façon fait côté
   serveur, seul endroit qui fasse foi. */
.champ-motif{display:none;margin-top:14px}
.decision-devis:has(.declencheur-motif:checked) .champ-motif{display:block}
@supports not selector(:has(*)){
  .champ-motif{display:block}
}

/* Nom de l'adhérent devenu lien vers sa fiche. Il porte le poids d'un
   <strong> comme avant, le soulignement n'apparaissant qu'au survol :
   une colonne entière de liens soulignés serait illisible. */
td.nom .lien-fiche{
  font-weight:600;color:var(--marine);text-decoration:none;
  border-bottom:1px solid transparent;
}
td.nom .lien-fiche:hover,
td.nom .lien-fiche:focus-visible{
  color:var(--cramoisi);border-bottom-color:var(--rose);
}

/* Icônes de fin de ligne. Zone cliquable de 32px : en dessous, la cible
   devient difficile à viser, notamment sur écran tactile. */
.icone-action{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;margin-left:2px;
  background:none;border:1px solid transparent;color:var(--marine);
  cursor:pointer;vertical-align:middle;
}
.icone-action svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.icone-action:hover,
.icone-action:focus-visible{
  border-color:var(--rose);color:var(--cramoisi);background:var(--rose-voile);
}
.icone-action.danger:hover,
.icone-action.danger:focus-visible{color:var(--cramoisi);border-color:var(--cramoisi)}

/* Suppression pas encore branchée : l'icône reste visible pour annoncer
   la fonction, mais n'appelle pas le clic. */
.icone-action[disabled]{opacity:.35;cursor:not-allowed}
.icone-action[disabled]:hover{border-color:transparent;background:none;color:var(--marine)}
.champ-motif textarea{
  width:100%;font-family:var(--ui);font-size:15px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-bottom:1.5px solid var(--rose);border-radius:0;padding:12px 14px;resize:vertical;
}

@media print{
  @page{margin:14mm}

  .entete-simple,.progression-etapes,.confirmation-actions,.actions-formulaire,
  .intro-confirmation{display:none !important}

  body{background:#fff;font-size:12.5px}
  .presentation{padding:0}
  .confirmation-envoi{border:none;padding:0}

  .entete-impression{display:block;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid #013C64}

  .recap-section{break-inside:avoid;margin-bottom:16px}
  .recap-section h3{font-size:14px;border-bottom-color:#B9AEA6}
  .definitions{border-color:#B9AEA6}
  .definitions div{break-inside:avoid;padding:7px 0;border-bottom-color:#E4DED0}
  .definitions dt{color:#555}
  .definitions dd{font-size:12.5px}
}

/* ---------------------------------------------------------------------
   GESA CVL — Écrans « Utilisateurs »

   À coller à la fin de gesa.css. La CSP en place (style-src 'self')
   interdit tout <style> en ligne et tout attribut style="…" : le style ne
   peut pas voyager avec la page.

   Presque tout est repris de l'existant — .tableau-cadre, .barre-outils,
   .pastille-statut, .champ, .cartes, .taches, .alerte, .succes. Seules les
   classes réellement nouvelles sont définies ici.
   --------------------------------------------------------------------- */

/* Chiffre de carte qui appelle l'attention. Volontairement distinct de
   .alerte, qui est un bandeau : accolé à .valeur il lui apporterait aussi
   son fond, son filet et son display:flex. */
.carte .valeur.chiffre-alerte,
.carte .valeur-moyenne.chiffre-alerte{color:var(--cramoisi)}

/* Retour en tête de fiche. */
.fil-retour{margin:0 0 16px;font-size:13.5px}
.fil-retour a{color:var(--gris);text-decoration:none}
.fil-retour a:hover{color:var(--marine)}

/* Mention discrète en regard d'un profil : « votre compte », « non
   réglable ici ». Nommée à part de .etiquette, déjà prise ailleurs. */
.marque-compte{
  display:inline-block;margin-left:6px;padding:2px 7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);
  background:#F5F2F0;border:1px solid #E6E0DC;
}

/* Un bouton d'action de ligne vit dans son propre formulaire — il poste,
   il n'est pas un lien. Sans cela chaque bouton casserait la ligne du
   tableau en passant à la ligne. */
.forme-ligne{display:inline}
.forme-ligne .lien-action{vertical-align:middle}

.lien-action.danger,
.lien-danger{color:var(--cramoisi)}
.lien-action.danger:hover,
.lien-danger:hover{color:var(--cramoisi-fonce)}

/* Nom cliquable dans la liste : même traitement que .lien-fiche des
   adhérents, redéfini ici pour que la feuille tienne seule. */
td.nom .lien-fiche{color:var(--marine);text-decoration:none}
td.nom .lien-fiche:hover{color:var(--cramoisi);text-decoration:underline}

/* Le lien d'invitation, affiché une seule fois quand l'e-mail n'est pas
   parti. Il doit pouvoir se sélectionner d'un coup et se recopier :
   word-break, et rien qui le tronque. */
.lien-invitation{
  margin:0 0 20px;padding:12px 14px;
  font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:var(--encre);background:var(--blanc);
  border:1px solid var(--rose-pale);border-left:3px solid var(--marine);
  word-break:break-all;user-select:all;
}

/* Menu déroulant de formulaire : les <input> sont déjà habillés dans
   gesa.css, pas les <select>. Même trait, même hauteur, sans la flèche
   grise du navigateur qui jurerait avec la charte. */
.champ select{
  width:100%;font-family:var(--ui);font-size:16px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--rose-pale);
  border-bottom:1.5px solid var(--rose);border-radius:0;
  padding:13px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--marine) 50%),
                   linear-gradient(135deg,var(--marine) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.champ select:focus{
  outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(1,60,100,.13);
}

/* Précision entre parenthèses collée au libellé d'un champ : elle ne doit
   pas hériter des majuscules et de l'interlettrage du label. */
.aide-inline{
  font-weight:400;font-size:11px;letter-spacing:0;text-transform:none;color:var(--gris);
}

/* Rappel de ce que recouvre chaque profil, sous le menu déroulant. */
.rappel-profils{
  margin:-4px 0 24px;padding:14px 16px;
  background:var(--rose-voile);border-left:3px solid var(--rose);
  font-size:13.5px;line-height:1.6;
}
.rappel-profils p{margin:0 0 6px}
.rappel-profils p:last-child{margin-bottom:0}
.rappel-profils strong{color:var(--marine)}

/* Écran de confirmation d'une suppression. Volontairement encadré de
   cramoisi et placé au-dessus du formulaire : on ne l'atteint que par un
   clic délibéré, il doit se voir. */
.zone-retrait{
  margin:0 0 28px;padding:20px 22px;
  background:#FCF0F2;border:1px solid var(--cramoisi);
}
.zone-retrait h3{
  margin:0 0 10px;font-family:var(--display);font-size:20px;
  font-weight:400;color:#7C0A20;
}
.zone-retrait p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#7C0A20}
.zone-retrait ul{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.65;color:#7C0A20}
.zone-retrait li{margin-bottom:4px}
.zone-retrait .aide{color:#8C5C4A}
.zone-retrait .actions-formulaire{margin-top:16px}

/* Sous 700 px, les actions de ligne s'empilent plutôt que de forcer un
   défilement horizontal du tableau entier. */
@media (max-width:700px){
  td.actions{white-space:normal}
  .forme-ligne{display:block}
}

/* =====================================================================
   GESA CVL — Contacts invités et modale d'invitation
   ---------------------------------------------------------------------
   À coller à la fin de gesa.css. Aucune règle existante n'est modifiée :
   uniquement des classes nouvelles, plus deux ajustements sur .bouton
   pour qu'un <a> se comporte comme le <button> voisin.

   La CSP de l'application interdit les styles en ligne (style-src
   'self') : tout ce qui suit doit vivre dans la feuille, jamais dans un
   attribut style="".
   ===================================================================== */

/* ---------------------------------------------------------------------
   Un lien qui doit ressembler à un bouton
   ---------------------------------------------------------------------
   La barre d'outils mêle désormais <button> et <a>. Sans ces trois
   lignes, le lien se pose sur la ligne de base du texte et dépasse d'un
   ou deux pixels ses voisins.
   --------------------------------------------------------------------- */

a.bouton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Filtres en liens
   ---------------------------------------------------------------------
   Sur l'écran des contacts, le filtre ne porte que sur un champ : un
   menu déroulant y serait plus lourd que la chose qu'il filtre.
   --------------------------------------------------------------------- */

.filtre-lien {
  display: inline-block;
  padding: 7px 13px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  color: #5A6C7A;
  text-decoration: none;
  border: 1px solid #D6E0E8;
  background: #FFFFFF;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: color .15s ease, border-color .15s ease;
}

.filtre-lien:hover,
.filtre-lien:focus-visible {
  color: #013C64;
  border-color: #8FB4CE;
}

.filtre-lien.actif {
  color: #FFFFFF;
  background: #013C64;
  border-color: #013C64;
}

/* ---------------------------------------------------------------------
   Actions en ligne dans le tableau
   --------------------------------------------------------------------- */

.action-en-ligne {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.menu-motif {
  max-width: 160px;
  font-size: 12.5px;
  padding: 5px 8px;
}

/* ---------------------------------------------------------------------
   Modale
   ---------------------------------------------------------------------
   Ouverte par :target — le bouton est un lien vers #invitation. Pas de
   JavaScript : la CSP l'interdit en ligne, et un écran de saisie ne doit
   pas dépendre du chargement d'un script. .ouverte est posée par le
   serveur quand le formulaire revient en erreur, pour que la saisie ne
   disparaisse pas sous les yeux de celui qui la corrige.
   --------------------------------------------------------------------- */

.modale {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.modale:target,
.modale.ouverte {
  display: flex;
}

.modale-voile {
  position: fixed;
  inset: 0;
  background: rgba(1, 30, 50, .55);
  cursor: default;
}

.modale-boite {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #FFFFFF;
  border: 1px solid #C9D8E2;
  box-shadow: 0 24px 60px rgba(1, 30, 50, .22);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.modale-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 32px 20px;
  border-bottom: 1px solid #E4EBF0;
}

.modale-surtitre {
  margin: 0 0 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6C7A85;
}

.modale-titre {
  margin: 0;
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
  color: #013C64;
}

.modale-fermer {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #6C7A85;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.modale-fermer:hover,
.modale-fermer:focus-visible {
  color: #013C64;
  border-color: #C9D8E2;
}

.modale-corps {
  padding: 24px 32px 28px;
}

.modale-chapeau {
  margin: 0 0 22px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: #5A6C7A;
}

.modale-mention {
  margin: 18px 0 0;
  padding: 12px 16px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5A6C7A;
  background: #F5F8FA;
  border-left: 2px solid #8FB4CE;
}

.modale-mention code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: #013C64;
}

.modale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #E4EBF0;
}

/* Message d'erreur sous un champ de la modale. */
.champ-erreur {
  margin: 6px 0 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #A80927;
}

.modale textarea {
  width: 100%;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

/* --------------------------------------------------------------------- */

@media (max-width: 700px) {
  .modale { padding: 20px 12px; }
  .modale-entete,
  .modale-corps { padding-left: 20px; padding-right: 20px; }
  .modale-actions { flex-direction: column-reverse; }
  .modale-actions .bouton { width: 100%; justify-content: center; }
}

/* =====================================================================
   FACTURATION
   Montant saisi au dépôt d'une facture (back/adherent.php) et règlement
   proposé à l'adhérent (espace/mon-adhesion.php).
   ===================================================================== */

/* Le champ « Montant de la facture » n'a de sens que pour une facture.
   La CSP interdisant le JavaScript en ligne, la révélation s'appuie sur
   l'option cochée du menu. La règle MASQUE sur les autres natures au
   lieu de RÉVÉLER sur la facture : là où :has() n'est pas supporté, le
   champ reste visible — utilisable, simplement moins discret — alors que
   la formulation inverse le rendrait inatteignable. */
.depot-document:has(#categorie option:checked:not([value="facture"])) .champ-montant{display:none}

/* Montant et bouton de règlement sur la même ligne de .definitions. Le
   bouton ne s'affiche que s'il reste quelque chose à régler ; il est rendu
   inerte tant qu'aucune plateforme n'est désignée. */
.ligne-reglement{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
}
.ligne-reglement .somme{font-weight:600;color:var(--marine)}

.bouton.compact{padding:7px 13px;font-size:13px}

/* Inerte, mais pas grisé : le bouton reste lisible et annonce ce qui
   arrive. L'infobulle porte l'explication, et la note sous le tableau
   indique la marche à suivre en attendant. */
.bouton.inerte{cursor:default;opacity:.72}
.bouton.inerte:hover{background:var(--marine)}

.note-reglement{
  margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--gris);
}

/* =====================================================================
   RÈGLEMENTS
   Modale de report (back/cotisations.php) et suivi côté adhérent.
   ===================================================================== */

/* Montant restant et date limite ne concernent qu'un règlement partiel.
   Même mécanique que le champ « Motif de votre refus » : masqué par
   défaut, révélé par l'état du bouton radio, sans JavaScript. Sur un
   navigateur sans :has(), les deux champs restent affichés en
   permanence — moins élégant, mais le report demeure possible ; le
   contrôle est de toute façon fait côté serveur, seul endroit qui fasse
   foi.

   Les deux champs forment un bloc à part, légèrement en retrait : ils
   dépendent d'un choix fait juste au-dessus. */
.champs-solde{
  display:none;
  border-left:2px solid var(--rose-pale);padding-left:16px;margin:0 0 4px;
}
.modale-reglement:has(.declencheur-solde:checked) .champs-solde{display:block}
@supports not selector(:has(*)){
  .champs-solde{display:block}
}

/* Le tableau des règlements de l'espace adhérent est plus étroit que ceux
   du back-office : quatre colonnes courtes n'ont pas besoin des 540px
   imposés par défaut. */
.tableau-cadre table.reglements{min-width:0}

/* =====================================================================
   Journal d'audit — REMPLACE intégralement le bloc précédent dans
   gesa.css. Supprime l'ancien avant de coller celui-ci : les classes
   .journal-table, .detail-audit et .ligne-technique de la première
   version n'existent plus.
   =====================================================================

   Les couleurs passent par var(--nom, repli) : si tes variables portent
   ces noms elles prennent la main, sinon le repli s'applique.

   Le tableau HTML a disparu. Chaque ligne est un <details> dont le
   <summary> est une grille CSS : l'alignement des colonnes est celui
   d'un tableau, mais le corps dépliant n'est plus prisonnier d'une
   cellule et occupe toute la largeur.
   ===================================================================== */

.journal-liste {
  --colonnes-journal: 4.5rem minmax(8rem, 12rem) minmax(12rem, 1.4fr) minmax(10rem, 1fr) 4.5rem;

  margin: 0 0 1.5rem;
  border: 1px solid var(--trait, #e2ddd6);
  border-top: 0;
}

/* --- Barre de filtres ------------------------------------------------ */

.journal-filtres {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--fond-doux, #f6f4f1);
  border: 1px solid var(--trait, #e2ddd6);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.journal-filtres .barre-actions {
  margin-top: 1rem;
}

/* Case désactivée : elle informe sans laisser croire qu'on peut agir. */
.journal-filtres input[type="checkbox"]:disabled + label {
  color: var(--texte-doux, #7a7169);
  cursor: default;
}

.journal-total {
  margin: 0 0 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--texte-doux, #7a7169);
}

.journal-vide {
  margin: 2rem 0;
  padding: 2rem;
  text-align: center;
  color: var(--texte-doux, #7a7169);
  background: var(--fond-doux, #f6f4f1);
}

/* --- En-tête de journée ---------------------------------------------- */

.journee {
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.4rem;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--marine, #1c2d4f);
  border-bottom: 1px solid var(--trait, #e2ddd6);
}

.journee:first-of-type {
  margin-top: 1rem;
}

/* --- En-tête de colonnes --------------------------------------------- */

.journal-colonnes {
  display: grid;
  grid-template-columns: var(--colonnes-journal);
  gap: 1rem;
  margin: 0;
  padding: 0.45rem 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-doux, #7a7169);
  background: var(--fond-doux, #f6f4f1);
  border-top: 1px solid var(--trait, #e2ddd6);
  border-bottom: 1px solid var(--trait, #e2ddd6);
}

/* --- Une entrée ------------------------------------------------------- */

.entree-audit {
  border-bottom: 1px solid var(--trait, #e2ddd6);
}

.entree-audit:last-child {
  border-bottom: 0;
}

.entree-audit > summary {
  display: grid;
  grid-template-columns: var(--colonnes-journal);
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
  cursor: pointer;
  list-style: none;
}

.entree-audit > summary::-webkit-details-marker {
  display: none;
}

.entree-audit > summary::marker {
  content: "";
}

.entree-audit > summary:hover,
.entree-audit > summary:focus-visible {
  background: var(--fond-doux, #f6f4f1);
}

.entree-audit[open] > summary {
  background: var(--fond-doux, #f6f4f1);
}

.col-heure {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--texte-doux, #7a7169);
}

.col-auteur,
.col-action,
.col-objet {
  min-width: 0;
  overflow-wrap: anywhere;
}

.auteur-absent {
  font-style: italic;
  color: var(--texte-doux, #7a7169);
}

.role-auteur,
.objet-adherent {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux, #7a7169);
}

.role-auteur {
  text-transform: uppercase;
}

.objet-nom {
  display: block;
}

.col-objet .ref {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--texte-doux, #7a7169);
}

.col-voir {
  justify-self: end;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--rose-fonce, #a4436a);
}

.col-voir::before {
  content: "\25B8";
  margin-right: 0.3rem;
}

.entree-audit[open] .col-voir::before {
  content: "\25BE";
}

/* Une ligne de maintenance reste lisible mais ne tire pas l'œil : elle
   n'apparaît que si l'Administrateur a décoché le masquage. */
.entree-audit.technique > summary {
  color: var(--texte-doux, #7a7169);
}

.entree-audit.technique .etiquette {
  background: transparent;
  color: var(--texte-doux, #7a7169);
  border: 1px solid var(--trait, #e2ddd6);
}

/* --- Le corps déplié, sur toute la largeur ---------------------------- */

.detail-corps {
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px dashed var(--trait, #e2ddd6);
}

.detail-vide {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--texte-doux, #7a7169);
}

/* Les champs se répartissent en autant de colonnes que la largeur le
   permet, au lieu de s'empiler dans un couloir de trois centimètres. */
.ecarts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.9rem 1.75rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.ecart {
  min-width: 0;
}

.ecart dt {
  margin: 0 0 0.15rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-doux, #7a7169);
}

.ecart dd {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ecarts .avant {
  color: var(--texte-doux, #7a7169);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ecarts .fleche {
  margin: 0 0.35rem;
  color: var(--rose-fonce, #a4436a);
}

.ecarts .apres {
  color: var(--marine, #1c2d4f);
  font-weight: 500;
}

.detail-technique {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding-top: 0.7rem;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--texte-doux, #7a7169);
  border-top: 1px dotted var(--trait, #e2ddd6);
}

.detail-technique .agent {
  flex-basis: 100%;
  overflow-wrap: anywhere;
  opacity: 0.75;
}

/* --- Pagination -------------------------------------------------------- */

.pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 0;
}

.pagination .position {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--texte-doux, #7a7169);
}

/* --- Écrans étroits ---------------------------------------------------- */

@media (max-width: 780px) {
  .journal-colonnes {
    display: none;
  }

  .entree-audit > summary {
    grid-template-columns: 3.5rem 1fr auto;
    grid-template-areas:
      "heure  action voir"
      "heure  objet  voir"
      "auteur auteur voir";
    gap: 0.2rem 0.75rem;
    align-items: start;
  }

  .col-heure  { grid-area: heure; }
  .col-action { grid-area: action; font-weight: 500; }
  .col-objet  { grid-area: objet; }
  .col-auteur { grid-area: auteur; font-size: 0.8125rem; }
  .col-voir   { grid-area: voir; align-self: center; }

  .journal-filtres {
    padding: 1rem;
  }

  .ecarts {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Signature électronique — espace/signer.php et mentions associées
   ===================================================================== */

.signature-retour{
  display:inline-block;margin:0 0 18px;font-size:14px;
  text-decoration:none;border-bottom:1px solid var(--rose);
}
.signature-retour:hover{color:var(--cramoisi);border-color:var(--cramoisi)}

/* L'empreinte se lit par groupes de huit : une suite de 64 caractères
   d'un seul tenant ne se compare pas à l'œil. */
.signature-empreinte{
  margin-top:16px;padding:12px 16px;
  background:var(--ivoire);border-left:3px solid var(--marine);
}
.signature-empreinte .etiquette{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin:0 0 5px;
}
.empreinte{
  margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.03em;
  word-spacing:.3em;color:var(--encre);overflow-wrap:anywhere;
}
.signature-empreinte .aide{margin:8px 0 0;font-size:12.5px;color:var(--gris)}

.document-actions{display:flex;flex-wrap:wrap;gap:10px}

.signature-etape{margin-top:18px;padding-top:16px;border-top:1px solid var(--filet)}
.signature-procede{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--encre)}
.signature-etape .en-savoir-plus{margin:12px 0 4px}
.signature-etape .actions-formulaire{justify-content:flex-start;margin-top:20px}
.signature-code{margin-top:18px;max-width:280px}

.signature-pied{text-align:left}
.signature-pied form{display:inline-block;margin:0 22px 0 0}

/* Mes documents : l'annonce de la signature n'apparaît qu'au choix
   « J'accepte », comme le motif au choix « Je refuse ». Sans :has(), elle
   reste affichée — le message vaut aussi pour qui ne l'a pas encore coché. */
.annonce-signature{
  display:none;margin:12px 0 0;padding:10px 14px;
  background:#EDF3F7;border-left:3px solid var(--marine);
  font-size:13.5px;color:var(--marine);
}
.decision-devis:has(.declencheur-signature:checked) .annonce-signature{display:block}
@supports not selector(:has(*)){
  .annonce-signature{display:block}
}

/* Cartouche signé : le nom du signataire, lu comme une signature. Angles
   coupés et italique de la police de titre — même bloc que celui qui
   ouvre le certificat PDF. */
.cartouche-signature{
  margin-top:16px;padding:18px 22px;
  background:var(--ivoire);border:1px solid var(--rose-pale);
  clip-path:polygon(var(--biseau) 0,100% 0,100% calc(100% - var(--biseau)),calc(100% - var(--biseau)) 100%,0 100%,0 var(--biseau));
}
.cartouche-signature .etiquette{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin:0 0 7px;
}
.cartouche-nom{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:27px;line-height:1.15;color:var(--marine);margin:0 0 9px;
}
.cartouche-detail{margin:0;font-size:13px;color:var(--gris)}
.cartouche-signature .empreinte{margin-top:8px;font-size:11.5px;color:var(--gris-clair)}

/* Rappel sous « Paragraphe de contexte » (modale d'invitation) : le champ
   arrive pré-rempli, et un texte type envoyé tel quel à un contact qui
   n'est pas concerné se voit tout de suite. D'où un rappel qui accroche
   l'œil, en cramoisi sur voile rose, sans passer pour une erreur. */
.rappel-verification{
  display:flex;align-items:center;gap:8px;
  margin:0 0 8px;padding:7px 11px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.4;
  color:var(--cramoisi);background:var(--rose-voile);
  border-left:3px solid var(--cramoisi);
}
.rappel-verification::before{
  content:"!";flex:0 0 18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--cramoisi);color:#fff;
  font-size:12px;font-weight:700;line-height:1;
}