/* Charte CADENCE — reprise de la page de connexion du site, pour que l'espace
   réservé ne ressemble pas à un outil étranger posé à côté. */

:root{
  --vert:#234739; --vert-nuit:#16302A; --fluo:#E7FF54; --ivoire:#F2F5E8;
  --rouge:#FF6B5B; --display:'Poppins',system-ui,sans-serif; --texte:'Karla',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--vert-nuit); color:var(--ivoire);
  font-family:var(--texte); font-size:16px; line-height:1.55;
}
a{color:var(--fluo)}
:focus-visible{outline:3px solid var(--fluo); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

h1{font-family:var(--display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em; margin:0 0 .4rem}
h2{font-family:var(--display); font-weight:800; font-size:1.15rem; margin:0 0 .6rem}
p{margin:0 0 1rem; max-width:62ch}

/* --- Formulaires ------------------------------------------------------- */
label{display:block; font-size:.85rem; opacity:.8; margin-bottom:.35rem}
input,select{
  width:100%; font:inherit; font-size:.98rem; padding:.72rem .9rem; border-radius:10px;
  border:1px solid rgba(242,245,232,.3); background:rgba(0,0,0,.22); color:var(--ivoire);
}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fluo) 50%),linear-gradient(135deg,var(--fluo) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.4rem}
input::placeholder{color:rgba(242,245,232,.4)}
input:disabled,select:disabled{opacity:.5}

button{
  font-family:var(--display); font-weight:800; font-size:.95rem; cursor:pointer;
  padding:.72rem 1.3rem; border-radius:100px; border:2px solid var(--fluo);
  background:var(--fluo); color:var(--vert); transition:background .18s,color .18s;
}
button:hover:not(:disabled){background:transparent; color:var(--fluo)}
button:disabled{opacity:.45; cursor:default}
button.discret{background:transparent; color:var(--ivoire); border-color:rgba(242,245,232,.35); font-weight:500}
button.discret:hover:not(:disabled){border-color:var(--fluo); color:var(--fluo)}
button.danger{background:transparent; color:var(--rouge); border-color:rgba(255,107,91,.5); font-weight:500}
button.danger:hover:not(:disabled){background:var(--rouge); color:var(--vert-nuit); border-color:var(--rouge)}
button.pleine{width:100%; padding:.85rem}

/* --- Messages ----------------------------------------------------------- */
.avis{margin:1.2rem 0; padding:.85rem 1.05rem; border-left:3px solid var(--fluo);
  background:rgba(231,255,84,.08); font-size:.9rem; line-height:1.55}
.avis.erreur{border-left-color:var(--rouge); background:rgba(255,107,91,.1)}
.avis:empty{display:none}

/* --- Ossature ----------------------------------------------------------- */
.centre{display:grid; place-items:center; padding:2rem 1.25rem; min-height:100vh}
.panneau{width:100%; max-width:26rem}
/* Dans les panneaux, les champs s'enchaînent verticalement : sans respiration,
   l'anneau de focus d'un champ vient mordre l'étiquette du suivant. */
.panneau input{margin-bottom:1.15rem}
.marque{width:170px; height:auto; display:block; margin:0 auto 2.2rem}

.barre{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem; background:var(--vert); border-bottom:1px solid rgba(231,255,84,.18)}
.barre .marque{width:120px; margin:0}
.barre .qui{font-size:.88rem; opacity:.8; margin-left:auto}
.barre .qui strong{font-weight:700; opacity:1}
.page{max-width:60rem; margin:0 auto; padding:2.4rem 1.5rem 4rem}
.page.large{max-width:70rem}

/* --- Cartes d'outils ---------------------------------------------------- */
.outil{display:block; text-decoration:none; color:inherit; padding:1.15rem 1.25rem; border-radius:12px;
  border:1px solid rgba(242,245,232,.22); background:rgba(0,0,0,.18); margin-bottom:.85rem;
  transition:border-color .18s,background .18s}
.outil:hover{border-color:var(--fluo); background:rgba(231,255,84,.07)}
.outil-nom{display:block; font-family:var(--display); font-weight:800; font-size:1.08rem;
  color:var(--fluo); margin-bottom:.25rem}
.outil-desc{display:block; font-size:.88rem; opacity:.75}
.outil.ferme{opacity:.45; pointer-events:none; border-style:dashed}
.outil.ferme .outil-nom{color:var(--ivoire)}

/* --- Tableau des comptes ------------------------------------------------ */
table{width:100%; border-collapse:collapse; font-size:.92rem}
th{text-align:left; font-family:var(--display); font-weight:500; font-size:.82rem; opacity:.6;
  padding:.5rem .6rem; border-bottom:1px solid rgba(242,245,232,.2)}
td{padding:.7rem .6rem; border-bottom:1px solid rgba(242,245,232,.1); vertical-align:middle}
tr.inactif td:not(.actions){opacity:.45}
td select{padding:.42rem .55rem; font-size:.88rem; width:auto; min-width:9.5rem}
td input[type=email]{padding:.42rem .55rem; font-size:.86rem; min-width:10rem; max-width:13rem;
  border-color:transparent; background:rgba(0,0,0,.28)}
td input[type=email]:hover{border-color:rgba(242,245,232,.3)}
td input[type=email]::placeholder{font-style:italic; opacity:.45}
td.actions{white-space:nowrap; text-align:right}
td.actions button{padding:.36rem .75rem; font-size:.8rem; margin-left:.3rem}
.identifiant{font-weight:700}
td:first-child{min-width:11rem}
.secondaire{display:block; font-size:.8rem; opacity:.6}
.enveloppe-tableau{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* --- Le mot de passe provisoire, montré une seule fois ------------------- */
.revelation{margin:1.4rem 0; padding:1.5rem; border-radius:14px; background:var(--fluo); color:var(--vert)}
.revelation h2{margin:0 0 .3rem; font-size:1.05rem}
.revelation p{margin:0 0 1rem; font-size:.88rem; max-width:none}
.secret{display:block; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:1.5rem;
  font-weight:700; letter-spacing:.06em; word-break:break-all; background:var(--vert-nuit);
  color:var(--fluo); padding:.9rem 1rem; border-radius:10px; margin-bottom:.9rem}
.revelation button{border-color:var(--vert); background:var(--vert); color:var(--fluo)}
.revelation button:hover{background:transparent; color:var(--vert)}

.formulaire-nouveau{padding:1.35rem 1.5rem; border-radius:14px; border:1px solid rgba(242,245,232,.22);
  background:rgba(0,0,0,.18); margin-bottom:2.4rem}
.champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem; margin-bottom:1rem}
.champs > div{min-width:0}

.section{margin-top:3rem}
.vide{opacity:.6; font-style:italic}

@media (max-width:640px){
  .page{padding:1.8rem 1.1rem 3rem}
  h1{font-size:1.55rem}
  td.actions{text-align:left}
  td.actions button{margin:.25rem .35rem .25rem 0}
}