:root{
  --green:#0C9444; --green2:#097a37; --green3:#064d24; --gold:#755323; --gold2:#FFD680;
  --ink:#0c1b1a; --slate:#4e6058; --line:#e3ece6; --card:#f7fbf8; --red:#b3261e; --amber:#8a5a00;

  /*  CODE COULEUR PAR DOMAINE — vert = comptabilite, or = paie.
      /!\ L'alternance est SEMANTIQUE, pas positionnelle. Une alternance par rang
          (:nth-child) se recalculerait a chaque changement de largeur, puisque la grille est
          en `auto-fit` : le damier changerait de dessin en redimensionnant la fenetre, ce qui
          se lit comme un defaut d'affichage. Ici la couleur dit toujours la meme chose. */
  --compta-bg:#f1f8f4; --compta-line:#cfe7db;
  --paie-bg:#fdf8ef;   --paie-line:#ecdcbd;

  /*  Fond de page de l'ACCUEIL seulement : les cartes sont blanches, il leur faut un fond
      d'ou emerger. Les pages d'etats gardent le blanc — rien derriere un tableau. */
  --wash:#eef3f0;
}
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:"Segoe UI",system-ui,Arial,sans-serif; color:var(--ink); background:#fff;
  font-size:14px; line-height:1.5 }

.bandeau{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 22px; border-bottom:3px solid; border-image:linear-gradient(90deg,var(--gold),var(--gold2)) 1 }
.marque{ display:flex; align-items:center; gap:12px }
.pastille{ background:var(--green3); color:#fff; font-weight:700; letter-spacing:.06em;
  padding:8px 11px; border-radius:8px; font-size:13px }
.marque .t{ font-weight:700; color:var(--green3); font-size:15px }
.marque .st{ color:var(--slate); font-size:12px }
.retour{ color:var(--green2); text-decoration:none; font-weight:600; font-size:13px;
  border:1px solid var(--line); padding:7px 13px; border-radius:7px }
.retour:hover{ background:var(--card) }

main{ padding:22px }
footer{ padding:16px 22px; color:var(--slate); font-size:11.5px; border-top:1px solid var(--line);
  margin-top:26px }

.intro h1{ font-size:20px; color:var(--green3); margin-bottom:5px }
.intro p{ color:var(--slate); max-width:70ch; margin-bottom:18px }

.grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px }
.carte{ border:1px solid var(--line); border-radius:12px; padding:15px 17px; background:#fff }
.carte h2{ font-size:16px; color:var(--green3); margin-bottom:5px }
.bases{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px }
.bases span{ font-family:Consolas,monospace; font-size:10.5px; background:var(--card);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--slate) }
.periode{ display:flex; gap:11px; margin-bottom:9px }
.periode label{ font-size:11.5px; color:var(--slate); display:flex; flex-direction:column; gap:3px }
.periode select,.periode input{ font:inherit; font-size:13px; padding:6px 8px;
  border:1px solid var(--line); border-radius:7px; background:#fff }
.periode input{ width:92px }
.dispo{ font-size:11.5px; color:var(--slate); background:var(--card); border-radius:7px;
  padding:8px 10px; margin-bottom:12px; line-height:1.65 }
.groupe{ margin-bottom:9px }
.groupe .lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color:var(--gold); margin-bottom:5px }
.groupe a{ display:inline-block; font-size:12.5px; color:var(--green2); text-decoration:none;
  border:1px solid var(--line); border-radius:7px; padding:5px 10px; margin:0 5px 5px 0;
  cursor:pointer; background:#fff }
.groupe a:hover{ background:var(--green3); color:#fff; border-color:var(--green3) }

/*  Les liens reprennent la couleur de leur domaine, mais RESTENT A PLAT (pas de panneau) :
    deux zones teintees l'une sur l'autre s'annuleraient. Le panneau dit « voici les chiffres »,
    la couleur du lien dit « et voici ou les lire en detail ». */
.groupe.compta .lbl{ color:var(--green3) }
.groupe.compta a{ border-color:var(--compta-line) }
.groupe.paie .lbl{ color:var(--gold) }
.groupe.paie a{ color:var(--gold); border-color:var(--paie-line) }
.groupe.paie a:hover{ background:var(--gold); color:#fff; border-color:var(--gold) }

/*  Frontiere entre « ce qu'on lit » et « ou l'on va » : sans elle, les liens paraissent
    appartenir au dernier bloc de chiffres. */
.kpis + .groupe{ border-top:1px dashed var(--line); padding-top:11px }

/* Bandeau de DEMONSTRATION — n'apparait que sur une entree portant "demo": true.
   Volontairement DEPAREILLE du reste de la charte (fond ambre, trait a gauche) : on doit
   voir d'un coup d'oeil que cette zone n'est pas un ecran de production. */
.groupe.demo{ background:#FFF8E8; border:1px solid #F0DFB2; border-left:3px solid var(--gold);
  border-radius:8px; padding:8px 10px; margin-top:12px }
.groupe.demo .lbl{ color:var(--gold); margin-bottom:6px }
.groupe.demo .lbl span{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--slate) }
.groupe.demo .lbl span.ko{ color:#B4232A }
.groupe.demo button{ font-size:12.5px; font-family:inherit; color:var(--green2); background:#fff;
  border:1px solid var(--line); border-radius:7px; padding:5px 10px; margin:0 5px 5px 0;
  cursor:pointer }
.groupe.demo button:hover:not(:disabled){ background:var(--green3); color:#fff; border-color:var(--green3) }
.groupe.demo button:disabled{ opacity:.5; cursor:default }

.entete-vue{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:12px }
.entete-vue h1{ font-size:19px; color:var(--green3) }
.sous{ color:var(--slate); font-size:12.5px; margin-top:2px }
.tag{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1px 9px;
  font-size:10.5px; color:var(--amber); font-weight:600; margin-left:6px }
.tag.ok{ color:var(--green2) }
.actions{ display:flex; gap:9px; align-items:center }
#filtre{ font:inherit; font-size:13px; padding:7px 11px; border:1px solid var(--line);
  border-radius:7px; min-width:210px }
.btn{ background:var(--green3); color:#fff; text-decoration:none; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:7px; white-space:nowrap }
.btn:hover{ background:var(--green2) }
/*  Le CSV passe en second plan : deux boutons pleins de meme poids obligeraient a lire pour
    choisir. L'edition Sage est celle qu'on veut par defaut, le CSV reste disponible. */
.btn.secondaire{ background:#fff; color:var(--green2); border:1px solid var(--line) }
.btn.secondaire:hover{ background:var(--card); color:var(--green3) }

.onglets{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; border-bottom:1px solid var(--line);
  padding-bottom:9px; margin-bottom:14px }
.onglets a{ font-size:12.5px; color:var(--slate); text-decoration:none; padding:6px 11px;
  border-radius:7px }
.onglets a:hover{ background:var(--card) }
.onglets a.on{ background:var(--green3); color:#fff; font-weight:600 }
.onglets .sep{ width:1px; height:20px; background:var(--line); margin:0 7px }

.alerte{ border-left:4px solid var(--red); background:var(--card); border-radius:0 9px 9px 0;
  padding:12px 15px; margin-bottom:15px; color:var(--ink); font-size:13px }
.alerte.amber{ border-left-color:var(--amber) }
.alerte ul{ margin:7px 0 0 18px }
.alerte li{ margin-bottom:3px }

table{ width:100%; border-collapse:collapse; font-size:12.5px }
th{ background:var(--card); color:var(--green3); text-align:left; padding:8px 10px;
  border-bottom:2px solid var(--green2); font-size:11.5px; position:sticky; top:0; z-index:2 }
td{ padding:6px 10px; border-bottom:1px solid var(--line); color:var(--slate); vertical-align:top }
tbody tr:hover td{ background:#fbfdfc }
td.n,th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
td.mono{ font-family:Consolas,monospace; font-size:11.5px; color:var(--ink); white-space:nowrap }
tr.report td{ background:var(--card); font-style:italic; color:var(--green3) }
/*  Total par compte du grand-livre : il ferme un compte, il doit donc se distinguer d'une
    ligne d'ecriture sans pour autant peser autant que le total general du pied de tableau. */
tr.total-compte td{ background:var(--compta-bg); font-weight:600; color:var(--green3);
  border-top:1px solid var(--compta-line) }
tfoot td{ background:var(--card); font-weight:700; color:var(--ink);
  border-top:2px solid var(--green2); border-bottom:none; position:sticky; bottom:0 }

/* ------------------------------------------------ accueil : chiffres cles */
.intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:18px }
.maj{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--slate) }
.maj button{ font:inherit; font-size:12.5px; font-weight:600; color:#fff; background:var(--green3);
  border:0; border-radius:7px; padding:8px 14px; cursor:pointer }
.maj button:hover{ background:var(--green2) }
.maj label{ display:flex; align-items:center; gap:5px; cursor:pointer }

/* Compte a rebours de la relecture automatique. Discret par construction : il informe,
   il ne doit pas attirer l'oeil plus que les chiffres eux-memes. */
#rebours{ display:flex; align-items:center; gap:7px; min-width:104px }
#rebours.off{ opacity:.35 }
#rebours .piste{ width:52px; height:4px; background:var(--line); border-radius:3px; overflow:hidden }
#rebours .jauge{ height:100%; width:0; background:var(--green);
  border-radius:3px; transition:width .95s linear }
/* Les 15 dernieres secondes : la jauge passe a l'or, pour annoncer que ca va bouger. */
#rebours.bientot .jauge{ background:var(--gold2); transition:width .95s linear, background .4s }
#rebours .jauge.plein{ transition:none }        /* remise a zero instantanee, sans animation arriere */
#reste{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--slate) }
#horodatage{ font-variant-numeric:tabular-nums }

/*  LA CARTE DOIT SE VOIR AVANT SON CONTENU.
    Elle etait blanche, sur fond blanc, bordee d'un filet a 1px presque de la meme couleur :
    au premier regard la page ne montrait pas six dossiers, elle montrait une nappe de texte.
    Le fond de page teinte fait le plus gros du travail ; l'ombre et le filet de tete achevent
    de lui donner un bord. */
body.page-accueil{ background:var(--wash) }
body.page-accueil .bandeau, body.page-accueil footer{ background:#fff }
.page-accueil .plage{ background:#fff }          /* la barre de periode est un outil, pas un fond */

.page-accueil .carte{ position:relative; overflow:hidden; padding-top:18px;
  box-shadow:0 1px 2px rgba(12,27,26,.05), 0 8px 20px -12px rgba(12,27,26,.22) }
.page-accueil .carte::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold2)) }
.page-accueil .carte:hover{ border-color:#cddcd3;
  box-shadow:0 1px 2px rgba(12,27,26,.06), 0 12px 26px -12px rgba(12,27,26,.28) }

.carte header{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:11px; padding-bottom:9px; border-bottom:1px solid var(--line) }

/*  L'etat passe en pastille : c'est le seul element de la carte qui puisse exiger une action,
    il doit se lire sans etre cherche.
    /!\ `.wa` n'avait AUCUNE regle alors que le script l'emet (rattachement au mois suivant) :
        le message sortait donc en gris d'encre, indistinct d'un libelle ordinaire. */
.etat{ font-size:10.5px; font-weight:600; white-space:nowrap; padding:2px 9px; border-radius:20px;
  border:1px solid transparent }
.etat:empty{ display:none }
.etat.ok{ color:#0C7a3a; background:#f0f9f4; border-color:var(--compta-line) }
.etat.ko{ color:var(--red); background:#fef2f2; border-color:#f2cfcc }
.etat.wa{ color:var(--amber); background:var(--paie-bg); border-color:var(--paie-line) }

.kpis{ margin-bottom:13px }
.kpis .chargement{ color:var(--slate); font-size:12px; font-style:italic; padding:14px 0 }

/*  Un bloc de chiffres est un PANNEAU, pas une suite de tuiles : fond teinte, filet a gauche
    a la couleur de son domaine. C'est ce qui le fait exister au premier regard — avant, le
    seul separateur etait un titre minuscule, identique a celui des liens juste en dessous. */
.bloc{ background:#fbfdfc; border:1px solid var(--line); border-left:3px solid var(--slate);
  border-radius:9px; padding:9px 11px 11px; margin-bottom:9px }
.bloc .titre{ font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color:var(--gold); margin-bottom:6px }
.bloc.compta{ background:var(--compta-bg); border-color:var(--compta-line); border-left-color:var(--green) }
.bloc.compta .titre{ color:var(--green3) }
.bloc.paie{ background:var(--paie-bg); border-color:var(--paie-line); border-left-color:var(--gold) }
.bloc.paie .titre{ color:var(--gold) }

/*  96px ne tenait pas « 316 464 936 » : le nombre passait a la ligne au milieu de la tuile.
    Maintenant qu'il est insecable (formateur `f`, gabarit index.html), il faut la place de
    l'ecrire d'un trait — 124px couvre 10 chiffres signes en 16px gras, marge interieure
    comprise. On perd une colonne sur les cartes larges ; un montant lisible la vaut. */
.rangee{ display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:7px }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 10px }
/*  Sur un panneau teinte, la tuile repasse en BLANC : le rapport s'inverse, et c'est le
    chiffre qui ressort, pas son contenant. */
.bloc .kpi{ background:#fff }
.bloc.compta .kpi{ border-color:var(--compta-line) }
.bloc.paie .kpi{ border-color:var(--paie-line) }
/*  Ceinture : meme si un jour un montant depassait la largeur prevue, il DEBORDE plutot que de
    se couper en deux. Un nombre tronque se voit ; un nombre coupe en deux se lit de travers
    sans qu'on remarque qu'il est entier. */
.kpi .v{ font-size:16px; font-weight:700; color:var(--green2); line-height:1.15;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.kpi .v.ko,.kpi.ko .v{ color:var(--red) }
.kpi .l{ font-size:9px; color:var(--slate); margin-top:3px; line-height:1.35 }
.kpi.ok .v{ color:#0C7a3a } .kpi.wa .v{ color:var(--amber) }
.kpi.ko{ border-color:#f0cfcc }

/* ------------------------------------------------ barre de periode */
.plage{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:9px 13px; margin-bottom:12px }
.raccourcis{ display:flex; gap:5px; flex-wrap:wrap }
.raccourcis a{ font-size:12px; color:var(--green2); text-decoration:none; cursor:pointer;
  border:1px solid var(--line); background:#fff; border-radius:7px; padding:5px 11px }
.raccourcis a:hover{ background:var(--green3); color:#fff; border-color:var(--green3) }
.plage label{ font-size:11.5px; color:var(--slate); display:flex; align-items:center; gap:5px }
.plage input[type=date]{ font:inherit; font-size:12.5px; padding:5px 8px;
  border:1px solid var(--line); border-radius:7px; background:#fff }
.plage button{ font:inherit; font-size:12.5px; font-weight:600; color:#fff; background:var(--green3);
  border:0; border-radius:7px; padding:7px 14px; cursor:pointer }
.plage button:hover{ background:var(--green2) }
.plage .dispo{ font-size:11px; color:var(--slate); margin-left:auto; background:none; padding:0 }

/* le titre ramene a l'accueil */
a.marque{ text-decoration:none; color:inherit }
a.marque:hover .t{ color:var(--green) }

.note{ font-size:11.5px; color:var(--slate); line-height:1.6; background:var(--card);
  border-left:3px solid var(--gold); border-radius:0 8px 8px 0; padding:10px 14px; margin-top:12px }
.note code{ font-size:10.5px }

/* Rendue au bloc qu'elle explique (cf. peindre() dans index.html) : elle se cale donc SOUS
   les tuiles, a l'interieur du panneau, au lieu de flotter entre deux blocs. */
.socle{ font-size:9.5px; color:var(--slate); line-height:1.45; margin:8px 0 0; font-style:italic }

/* Les dates de derniere ecriture / derniere saisie sont des FAITS MESURES, pas une reserve de
   lecture comme la note ci-dessus : elles sortent donc de l'italique, qui se lit comme un
   avertissement. Elles se comparent d'une carte a l'autre, d'ou le blanc au-dessus qui les
   detache de la note et les aligne a l'oeil sur les trois cartes. */
.socle.saisies{ font-style:normal; margin-top:6px }
.socle.saisies b{ color:var(--green3); font-weight:600; white-space:nowrap }

.raccourcis a.on{ background:var(--green3); color:#fff; border-color:var(--green3); font-weight:600 }
.raccourcis .libre{ font-size:11px; color:var(--gold); font-weight:600; align-self:center }

.hp{ font-size:9.5px; color:var(--red); font-weight:600; border:1px solid #f0cfcc; border-radius:10px;
  padding:0 6px; margin-left:6px; white-space:nowrap }
.hp.wa{ color:var(--amber); border-color:#e6d3a8 }

/* balance : lecture par blocs (AN / mouvements / solde) */
tr.groupes th{ border-bottom:1px solid var(--line); padding-bottom:4px }
tr.groupes th.g{ text-align:center; color:var(--gold); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; background:#fff }
tfoot tr.equilibre td{ font-weight:600; font-size:11.5px; border-top:1px solid var(--line) }
tfoot tr.equilibre td.ok{ color:#0C7a3a } tfoot tr.equilibre td.ko{ color:var(--red) }

/* Separation des exercices anterieurs : ils restent consultables, mais ne doivent pas
   disputer l'attention aux dossiers courants. */
.titre-groupe{ margin:26px 0 12px; font-size:13px; font-weight:600; letter-spacing:.06em;
               text-transform:uppercase; color:#64748b;
               border-top:1px solid var(--line); padding-top:14px }
.titre-groupe span{ display:block; margin-top:3px; font-size:12px; font-weight:400;
                    letter-spacing:0; text-transform:none; color:#94a3b8 }
.grille-archives .carte{ background:#fbfcfd }
.grille-archives .carte h2{ color:#475569 }
/* Filet de tete neutralise : une archive ne porte pas les couleurs du suivi courant. */
.page-accueil .grille-archives .carte::before{ background:#cbd5e1 }

/* --- Page de connexion ------------------------------------------------------------------
   Volontairement nue : ni menu, ni lien, ni bandeau. Rien a explorer avant de s'etre
   identifie, et rien qui renseigne sur ce que le portail contient. */
/*  FOND ANIME DE LA PAGE DE CONNEXION -------------------------------------------------------
    Une trame de registre comptable, immobile, et deux halos aux couleurs du cabinet qui
    derivent lentement derriere le formulaire.

    /!\ `background-color` + `background-image` en LONGHAND, jamais le raccourci `background`.
        Le raccourci remet `background-image` a `none` : ecrit apres, il effacerait la trame ;
        ecrit avant, il marcherait — donc le rendu dependrait de l'ORDRE des declarations, et
        une reorganisation du fichier ferait disparaitre le fond sans erreur nulle part. Meme
        piege que la specificite des selecteurs `.connexion` plus bas.                          */
.page-connexion{ display:flex; align-items:center; justify-content:center;
                 min-height:100vh; padding:20px; position:relative;
                 background-color:#f1f5f9;
                 background-image:
                   repeating-linear-gradient(to right,  rgba(6,77,36,.05) 0 1px, transparent 1px 72px),
                   repeating-linear-gradient(to bottom, rgba(6,77,36,.05) 0 1px, transparent 1px 72px); }

/*  /!\ `position:fixed` et NON `absolute`. Un halo absolu de 60vmax deborderait le body,
        rallongerait la page et ferait apparaitre une barre de defilement ; il faudrait alors
        `overflow:hidden` sur le body — qui couperait le formulaire sur un ecran bas. Fixed ne
        participe pas au flux : le probleme n'existe pas.
    /!\ SEUL `transform` est anime. Pas de `left`/`top`, qui recalculeraient la mise en page
        60 fois par seconde ; le flou, lui, est applique une fois et transporte par le
        compositeur. C'est ce qui rend l'effet gratuit sur un poste modeste.                    */
.page-connexion::before,
.page-connexion::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:60vmax; height:60vmax; border-radius:50%; filter:blur(52px); will-change:transform; }

.page-connexion::before{ left:-14vmax; top:-18vmax;
  background:radial-gradient(circle, rgba(12,148,68,.28), rgba(12,148,68,0) 70%);
  animation:derive-vert 26s ease-in-out infinite alternate; }
.page-connexion::after{ right:-16vmax; bottom:-20vmax;
  background:radial-gradient(circle, rgba(255,214,128,.40), rgba(255,214,128,0) 70%);
  animation:derive-or 34s ease-in-out infinite alternate; }

/*  Deux durees PREMIERES ENTRE ELLES (26 s et 34 s) : la paire ne retrouve la meme
    configuration qu'au bout de plusieurs minutes. Avec deux durees egales, l'oeil percoit un
    battement regulier et l'animation se met a compter le temps au lieu de se faire oublier.  */
@keyframes derive-vert{
  from{ transform:translate3d(-8vw,-6vh,0) scale(1)    }
  to  { transform:translate3d( 7vw,  8vh,0) scale(1.16) } }
@keyframes derive-or{
  from{ transform:translate3d( 7vw,  7vh,0) scale(1.10) }
  to  { transform:translate3d(-6vw, -5vh,0) scale(.92)  } }

/*  Le mouvement est un agrement, jamais une information : qui le desactive ne perd rien.
    Les halos restent en place — la page garde ses couleurs, elle cesse seulement de bouger.  */
@media (prefers-reduced-motion:reduce){
  .page-connexion::before,
  .page-connexion::after{ animation:none } }

/*  z-index explicite plutot qu'un `z-index:-1` sur les halos : la classe est portee par le
    BODY, dont le fond se propage au canvas, et un enfant en z-index negatif y disparaitrait
    selon le navigateur. On empile vers le haut, c'est previsible partout.                     */
.connexion{ width:100%; max-width:380px; background:#fff; border:1px solid var(--line);
            border-radius:12px; padding:26px 28px 20px;
            position:relative; z-index:1;
            /* le carton doit se detacher d'un fond desormais colore et mouvant */
            box-shadow:0 10px 34px rgba(6,77,36,.13) }
.connexion .marque{ display:flex; align-items:center; gap:11px; margin-bottom:22px }
.connexion .marque .t{ font-size:15px; font-weight:600; color:var(--green3) }
.connexion .marque .st{ font-size:11.5px; color:#64748b; margin-top:2px }
.connexion label{ display:block; font-size:12px; font-weight:600; color:#475569;
                  margin:14px 0 5px }
.connexion input{ width:100%; padding:9px 11px; border:1px solid var(--line);
                  border-radius:7px; font-size:14px; font-family:inherit }
.connexion input:focus{ outline:none; border-color:var(--green3);
                        box-shadow:0 0 0 3px rgba(22,101,52,.12) }
/*  Gris franc : une indication de saisie trop foncee se lit comme un champ deja rempli, et
    l'utilisateur clique « Se connecter » sans rien taper. */
.connexion input::placeholder{ color:#a8b4ad; opacity:1 }
.connexion input#motdepasse::placeholder{ letter-spacing:.18em }
.connexion button{ width:100%; margin-top:20px; padding:10px; border:0; border-radius:7px;
                   background:var(--green3); color:#fff; font-size:14px; font-weight:600;
                   font-family:inherit; cursor:pointer }
.connexion button:hover{ filter:brightness(1.08) }
/*  Afficher / masquer le mot de passe.
    /!\ Selecteurs prefixes par `.connexion` : sans cela ils auraient la MEME specificite que
        `.connexion button` ci-dessus (bouton vert pleine largeur), et le resultat dependrait de
        l'ordre des regles - un equilibre qu'une reorganisation du fichier casserait en silence. */
.connexion .champ-mdp{ position:relative }
.connexion .champ-mdp input{ padding-right:44px }       /* le texte ne passe pas sous l'icone */
/*  Edge pose son PROPRE oeil sur les champs de mot de passe : sans ceci, deux yeux cote a cote. */
.connexion .champ-mdp input::-ms-reveal,
.connexion .champ-mdp input::-ms-clear{ display:none }
.connexion .champ-mdp button{ position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; margin:0; padding:0; border:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:none; color:#94a3b8; cursor:pointer }
.connexion .champ-mdp button:hover{ color:var(--green3); background:#eef2f7 }
.connexion .champ-mdp button:focus-visible{ outline:2px solid var(--green3); outline-offset:1px }
.connexion .champ-mdp button svg{ width:18px; height:18px; display:block }
/*  L'icone suit `aria-pressed` : l'etat d'accessibilite EST l'etat d'affichage, il n'y a donc
    aucun moyen que les deux se desynchronisent. */
.connexion .champ-mdp button .i-oeil-barre{ display:none }
.connexion .champ-mdp button[aria-pressed="true"]{ color:var(--green3) }
.connexion .champ-mdp button[aria-pressed="true"] .i-oeil{ display:none }
.connexion .champ-mdp button[aria-pressed="true"] .i-oeil-barre{ display:block }

.connexion .alerte{ margin-bottom:4px; padding:9px 11px; border-radius:7px;
                    background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
                    font-size:12.5px }
.connexion .pied{ margin-top:16px; padding-top:13px; border-top:1px solid var(--line);
                  font-size:11px; color:#94a3b8; text-align:center }

/* Identite du compte connecte, dans le bandeau des pages internes. */
.bandeau .compte{ margin-left:auto; display:flex; align-items:center; gap:12px;
                  font-size:12px; color:#64748b }
.bandeau .compte b{ color:#334155; font-weight:600 }
.bandeau .compte a{ color:#64748b; text-decoration:none; border-bottom:1px solid #cbd5e1 }
.bandeau .compte a:hover{ color:#b91c1c; border-color:#b91c1c }