/* Molena Admin : colonne de pages à gauche (en haut sur téléphone), cartes de chiffres, tableaux qui défilent seuls. */
:root{
  --fond:#F3F6F4; --carte:#FFFFFF; --texte:#16211C; --sourd:#5A6962; --ligne:#D7E0DB;
  --accent:#0F6B4F; --accent-doux:#DCEFE7; --sur-accent:#FFFFFF;
  --orange:#8A5A00; --orange-doux:#FBF0D9; --rouge:#A33A2A; --rouge-doux:#F9E4DF;
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#0E1512; --carte:#17211C; --texte:#E7EFEA; --sourd:#9DAEA6; --ligne:#2B3A33;
  --accent:#5CCFA6; --accent-doux:#183A2E; --sur-accent:#08201A;
  --orange:#E8B85C; --orange-doux:#3A2E14; --rouge:#F0917F; --rouge-doux:#3D1F19; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font:400 15px/1.5 var(--police)}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.2;margin:0}
h1{font-size:26px} h2{font-size:22px} h3{font-size:17px}
p{margin:0}
a{color:var(--accent)}
.sourd{color:var(--sourd)} .petit{font-size:13.5px}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.principal{background:var(--accent);color:var(--sur-accent);border:0;border-radius:8px;padding:9px 16px;font-weight:600}
.principal:disabled{opacity:.55;cursor:default}
.secondaire{background:transparent;color:var(--texte);border:1px solid var(--ligne);border-radius:8px;padding:8px 14px}
.danger{background:transparent;color:var(--rouge);border:1px solid var(--rouge);border-radius:8px;padding:6px 12px}
.lien{background:none;border:0;color:var(--sourd);padding:0;text-decoration:underline}
input,select{font:inherit;color:var(--texte);background:var(--fond);border:1px solid var(--ligne);border-radius:8px;padding:9px 11px;width:100%}
code{font-size:13px;word-break:break-all}

.connexion{min-height:100vh;display:grid;place-items:center;padding:16px}
.carte-connexion{background:var(--carte);border:1px solid var(--ligne);border-radius:20px;padding:36px 32px 30px;width:min(380px,100%);display:grid;gap:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);text-align:center}
.carte-connexion h1{font-size:24px;letter-spacing:-.01em}
.carte-connexion h1 span{color:var(--accent)}
.carte-connexion form{text-align:left}
.carte-connexion label{font-size:14px;color:var(--sourd)}
.carte-connexion .principal{padding:12px 16px;font-size:15px;border-radius:10px}
.logo{width:44px;height:44px;border-radius:50%;justify-self:center;
  background:radial-gradient(circle at 35% 30%,#9FF0CF 0,var(--accent) 45%,#08392A 100%);box-shadow:0 0 24px rgba(92,207,166,.35)}
.carte-connexion form{display:grid;gap:10px}
.qr{display:grid;gap:8px;justify-items:center}
.qr img{width:200px;height:200px;background:#fff;border-radius:8px;padding:8px}
.erreur{color:var(--rouge);min-height:1.5em}

.appli{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
.menu{background:var(--carte);border-right:1px solid var(--ligne);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.marque{font-weight:700;font-size:19px;padding:4px 10px 14px}
.marque span{color:var(--accent)}
.menu button[data-page]{background:none;border:0;text-align:left;padding:9px 12px;border-radius:8px;color:var(--texte)}
.menu button[data-page]:hover{background:var(--accent-doux)}
.menu button[aria-current="page"]{background:var(--accent-doux);font-weight:700}
.moi{margin-top:auto;display:grid;gap:4px;padding:10px;font-size:13px;color:var(--sourd);word-break:break-all}
main{padding:28px;display:grid;gap:22px;align-content:start;max-width:1200px;width:100%}
main:focus{outline:none}
.entete{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}

.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.chiffre{background:var(--carte);border:1px solid var(--ligne);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.chiffre .valeur{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.chiffre .nom{color:var(--sourd);font-size:13.5px}
.bloc{background:var(--carte);border:1px solid var(--ligne);border-radius:12px;padding:16px;display:grid;gap:12px}
.liste-attention{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.liste-attention li{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;background:var(--fond)}
.liste-attention li button{margin-left:auto}
.point{width:10px;height:10px;border-radius:50%;flex:none;background:var(--sourd)}
.point.rouge{background:var(--rouge)} .point.orange{background:var(--orange)} .point.vert{background:var(--accent)}
.defile{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-weight:600;color:var(--sourd);padding:8px 10px;border-bottom:1px solid var(--ligne);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--ligne);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pastille{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:1px 9px;white-space:nowrap;background:var(--accent-doux);color:var(--accent)}
.pastille.orange{background:var(--orange-doux);color:var(--orange)} .pastille.rouge{background:var(--rouge-doux);color:var(--rouge)}
.pastille.gris{background:var(--fond);color:var(--sourd);border:1px solid var(--ligne)}
.barre{height:6px;background:var(--fond);border-radius:3px;overflow:hidden;min-width:70px}
.barre > i{display:block;height:100%;background:var(--accent)}
.barre.orange > i{background:var(--orange)} .barre.rouge > i{background:var(--rouge)}
.outils{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.outils input{max-width:320px}
.etapes{margin:0;padding-left:22px;display:grid;gap:10px}
.actions-ligne{display:flex;gap:6px;flex-wrap:wrap}
.actions-ligne select{width:auto;padding:5px 8px}
.chargement{color:var(--sourd)}
dialog{border:1px solid var(--ligne);border-radius:12px;background:var(--carte);color:var(--texte);padding:20px;max-width:420px}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .boutons{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

@media (max-width:760px){
  .appli{grid-template-columns:minmax(0,1fr)}
  .menu{position:sticky;top:0;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ligne);padding:8px 16px;z-index:5}
  .marque{display:none}
  .menu button[data-page]{white-space:nowrap}
  .moi{margin:0;padding:0 0 0 8px;flex-direction:row;display:flex;align-items:center;white-space:nowrap}
  .moi #moi-email{display:none}
  main{padding:18px 16px}
}
td.court{white-space:nowrap}
.detail{line-height:1.35}
.moi .lien{justify-self:start}
.bloc > button,.bloc > a{justify-self:start}
.champs{display:grid;gap:10px;margin-top:12px}
.champs label{display:grid;gap:4px;font-size:14px}
.cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cases input{text-align:center;font-size:24px;font-weight:600;padding:12px 0;font-variant-numeric:tabular-nums}
.erreur:empty{display:none}
.qr .lien{font-size:13.5px}
.cle{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.cle code{font-size:14px;letter-spacing:.06em;user-select:all}
.cle .secondaire{padding:5px 12px;font-size:13.5px}
.cache-visuel{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.carte-connexion input::placeholder{color:var(--sourd);opacity:.7}
.carte-connexion #cx-champ{padding:13px 14px;font-size:15px;border-radius:10px}