/* Pages des comptes ToolsPro (connexion, inscription, mon compte, tarifs, conditions, admin).
   Même habillage que le portail (static/accueil.html) : fond ardoise, accent bleu ciel,
   clair ou sombre selon le réglage de l'ordinateur. */
:root{
  --fond:#0f172a; --carte:rgba(30,41,59,.62); --texte:#e2e8f0; --doux:#94a3b8;
  --accent:#38bdf8; --accent-fort:#0284c7; --trait:rgba(148,163,184,.22);
  --champ:#0b1222; --ok:#34d399; --err:#f87171; --alerte:#fbbf24;
  --ombre:0 18px 40px rgba(2,6,23,.45);
}
@media (prefers-color-scheme: light){
  :root{ --fond:#f8fafc; --carte:#fff; --texte:#0f172a; --doux:#475569;
         --trait:rgba(15,23,42,.12); --champ:#fff; --ok:#047857; --err:#b91c1c; --alerte:#b45309;
         --ombre:0 18px 40px rgba(15,23,42,.10); }
}
*{box-sizing:border-box}
html{background-color:var(--fond);
  background-image:radial-gradient(1100px 520px at 50% -70px, #1e3a5f 0%, transparent 62%);
  background-repeat:no-repeat}
@media (prefers-color-scheme: light){
  html{background-image:radial-gradient(1100px 520px at 50% -70px, #e0f2fe 0%, transparent 62%)}
}
body{margin:0; min-height:100vh; color:var(--texte);
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding:40px 16px 56px}
main{width:100%; max-width:720px; margin:0 auto}
main.etroit{max-width:440px}
main.large{max-width:1100px}
a{color:var(--accent)}
.marque{display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none;
  color:inherit; font-size:28px; font-weight:600; letter-spacing:-.02em; margin-bottom:26px}
.marque span span{color:var(--accent)}
.haut{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:24px}
.haut .marque{margin:0; font-size:22px}
.haut nav{display:flex; gap:16px; font-size:14px; flex-wrap:wrap}
.haut nav a{color:var(--doux); text-decoration:none}
.haut nav a:hover{color:var(--accent)}
h1{font-size:24px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px}
h2{font-size:17px; font-weight:600; margin:0 0 12px}
p.sous{color:var(--doux); margin:0 0 22px; font-size:15px}
.carte{background:var(--carte); border:1px solid var(--trait); border-radius:16px; padding:24px;
  margin-bottom:16px}
label{display:block; font-size:14px; font-weight:500; margin:14px 0 6px}
input[type=email],input[type=password],input[type=text],input[type=number]{
  width:100%; font:inherit; font-size:15px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--trait); background:var(--champ); color:var(--texte)}
input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.case{display:flex; gap:10px; align-items:flex-start; font-size:14px; margin-top:16px; font-weight:400}
.case input{margin-top:4px; flex:none}
button,.bouton{font:inherit; font-weight:600; font-size:15px; border:0; border-radius:10px;
  padding:11px 18px; cursor:pointer; background:var(--accent-fort); color:#fff; text-decoration:none;
  display:inline-block}
button:hover,.bouton:hover{filter:brightness(1.08)}
button:disabled{opacity:.55; cursor:default; filter:none}
button.secondaire{background:transparent; color:var(--texte); border:1px solid var(--trait)}
button.large{width:100%; margin-top:20px}
.liens{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px; margin-top:16px}
.msg{font-size:14px; margin-top:12px; min-height:1em}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.bandeau{border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:14.5px;
  border:1px solid var(--trait); background:var(--carte)}
.bandeau.ok{border-color:var(--ok)} .bandeau.err{border-color:var(--err)} .bandeau.alerte{border-color:var(--alerte)}
.cache{display:none !important}
.solde{font-size:40px; font-weight:650; letter-spacing:-.02em; line-height:1.1}
.solde small{font-size:18px; font-weight:500; color:var(--doux); margin-right:6px}
.solde.negatif{color:var(--err)}
.montants{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px}
.montants button{background:transparent; color:var(--texte); border:1px solid var(--trait); min-width:88px}
.montants button.choisi{border-color:var(--accent); background:rgba(56,189,248,.14)}
.libre{display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap}
.libre input{width:140px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-weight:600; color:var(--doux); font-size:12.5px; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 8px; border-bottom:1px solid var(--trait)}
td{padding:9px 8px; border-bottom:1px solid var(--trait); vertical-align:top}
td.n,th.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
td.plus{color:var(--ok)} td.moins{color:var(--texte)}
.defile{overflow-x:auto}
.grille-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:720px){ .grille-2{grid-template-columns:1fr} .solde{font-size:34px} }
.aide{font-size:13.5px; color:var(--doux)}
.pastille{display:inline-block; font-size:12px; font-weight:600; padding:1px 9px; border-radius:999px;
  border:1px solid var(--trait); color:var(--doux)}
.pastille.ok{color:var(--ok); border-color:var(--ok)} .pastille.err{color:var(--err); border-color:var(--err)}
.texte h2{margin-top:26px}
.texte p,.texte li{color:var(--texte); font-size:15px}
.texte ul{padding-left:20px}
footer{margin-top:28px; text-align:center; color:var(--doux); font-size:13px}
footer a{color:var(--doux)}
/* Vidéo de présentation (page de connexion, 0.54-0.55) : plus large que la colonne de connexion */
.video{width:min(720px, calc(100vw - 32px)); margin:32px 0 0 50%; transform:translateX(-50%)}
.video h2{text-align:center}
.video .aide{text-align:center; margin:10px 0 0}
.lecteur{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--trait);
  background:#0b1222; box-shadow:var(--ombre)}
.lecteur iframe{position:absolute; inset:0; width:100%; height:100%; border:0}