/* CloudCleaner : habillage commun des pages client (clair / sombre selon le système) */
:root {
  --fond:#f5f6f8; --carte:#ffffff; --texte:#1c2128; --doux:#5f6b7a; --bord:#dfe3e8; --accent:#1f6feb; --accent-texte:#ffffff;
  --accent-doux:#e8f0fe; --ok:#1a7f37; --ok-doux:#e6f4ea; --alerte:#9a6700; --alerte-doux:#fff6dd; --err:#cf222e; --err-doux:#ffebe9;
  --piste:#e9ecf0; --ombre:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:#15181d; --carte:#1d2127; --texte:#e6e9ee; --doux:#9aa4b2; --bord:#2f353e; --accent:#4c8dff; --accent-texte:#0b1320;
    --accent-doux:#1b2a45; --ok:#5cc878; --ok-doux:#183424; --alerte:#e2b340; --alerte-doux:#3a2f12; --err:#ff7b72; --err-doux:#3d1c1c;
    --piste:#2a3038; --ombre:none;
  }
}
:root[data-theme="dark"] {
  --fond:#15181d; --carte:#1d2127; --texte:#e6e9ee; --doux:#9aa4b2; --bord:#2f353e; --accent:#4c8dff; --accent-texte:#0b1320;
  --accent-doux:#1b2a45; --ok:#5cc878; --ok-doux:#183424; --alerte:#e2b340; --alerte-doux:#3a2f12; --err:#ff7b72; --err-doux:#3d1c1c;
  --piste:#2a3038; --ombre:none;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* sinon un élément à display explicite (bouton, flex) ignore l'attribut hidden */
html,body { margin:0; background:var(--fond); color:var(--texte); font:15px/1.5 system-ui,"Segoe UI",sans-serif; }
a { color:var(--accent); }
header.barre { background:var(--carte); border-bottom:1px solid var(--bord); }
header.barre .int { max-width:960px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; }
.marque { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--texte); text-decoration:none; letter-spacing:-.01em; }
.marque svg { width:28px; height:28px; }
/* logo : symbole (nuage et profilé) + « Cloud » léger, « Cleaner » gras, comme le logo ; variante claire sur fond sombre */
.marque img { height:30px; width:auto; display:block; }
.marque .mot { font-weight:400; letter-spacing:-.01em; } .marque .mot b { font-weight:700; }
.marque .sombre { display:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marque .claire { display:none; } :root:not([data-theme="light"]) .marque .sombre { display:block; } }
:root[data-theme="dark"] .marque .claire { display:none; } :root[data-theme="dark"] .marque .sombre { display:block; }
header.barre .droite { margin-left:auto; color:var(--doux); font-size:13px; }
/* menu du compte (commun.js) */
.menu-compte { position:relative; }
.menu-btn { background:none; border:1px solid transparent; color:var(--accent); font:inherit; font-size:14px; cursor:pointer; padding:6px 10px; border-radius:8px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color:var(--bord); background:var(--carte); }
.menu-liste { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:var(--carte); border:1px solid var(--bord); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); padding:6px; z-index:50; text-align:left; }
.menu-liste[hidden] { display:none; }
.menu-id { padding:8px 10px 10px; font-size:13px; border-bottom:1px solid var(--bord); margin-bottom:4px; word-break:break-all; color:var(--texte); }
.menu-id small { display:block; color:var(--doux); margin-top:2px; }
.menu-liste a, .menu-liste button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:6px; background:none; color:var(--texte); font:inherit; font-size:14px; text-decoration:none; cursor:pointer; }
.menu-liste a:hover, .menu-liste button:hover { background:var(--accent-doux); }
.menu-liste .menu-quitter { color:var(--err); border-top:1px solid var(--bord); border-radius:0 0 6px 6px; margin-top:4px; padding-top:10px; }
.sup-compte { display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--err); color:#fff; font-size:11px; font-weight:700; text-align:center; }
/* bulle « Un souci, une question ? » (commun.js) */
.sup-bulle { position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:8px; padding:11px 16px 11px 13px;
  border:0; border-radius:999px; background:var(--accent); color:var(--accent-texte); font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; box-shadow:0 6px 20px rgba(16,24,40,.28); }
.sup-bulle:hover { filter:brightness(1.08); }
.sup-bulle svg { width:20px; height:20px; flex:none; }
.sup-badge { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--err);
  color:#fff; font-size:12px; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--fond); }
.sup-panneau { position:fixed; right:20px; bottom:76px; z-index:61; width:370px; max-height:min(560px, calc(100vh - 100px)); display:flex;
  flex-direction:column; background:var(--carte); color:var(--texte); border:1px solid var(--bord); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden; }
.sup-gauche { right:auto; left:20px; }
.sup-tete { display:flex; justify-content:space-between; align-items:start; gap:10px; padding:14px 16px; background:var(--accent); color:var(--accent-texte); }
.sup-tete small { display:block; opacity:.85; font-size:12px; margin-top:2px; }
.sup-fermer { background:none; border:0; color:inherit; font-size:16px; cursor:pointer; padding:2px 4px; line-height:1; }
.sup-fil { flex:1; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:10px; min-height:120px; }
.sup-vide { color:var(--doux); font-size:14px; }
.sup-msg { max-width:85%; padding:8px 12px; border-radius:12px; font-size:14px; word-wrap:break-word; }
.sup-msg small { display:block; margin-top:3px; font-size:11px; opacity:.7; }
.sup-moi { align-self:flex-end; background:var(--accent-doux); border-bottom-right-radius:4px; }
.sup-eux { align-self:flex-start; background:var(--piste); border-bottom-left-radius:4px; }
.sup-etiq { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:2px; }
.sup-moi .sup-etiq { color:var(--err); }
.sup-form { border-top:1px solid var(--bord); padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.sup-types { display:flex; gap:6px; }
.sup-types label { flex:1; text-align:center; font-size:13px; padding:6px 8px; border:1px solid var(--bord); border-radius:8px; cursor:pointer; color:var(--doux); }
.sup-types input { position:absolute; opacity:0; pointer-events:none; }
.sup-types label:has(input:checked) { border-color:var(--accent); background:var(--accent-doux); color:var(--accent); font-weight:600; }
.sup-types label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; }
.sup-form textarea { width:100%; resize:vertical; min-height:64px; max-height:220px; padding:8px 10px; border:1px solid var(--bord); border-radius:8px;
  background:var(--fond); color:var(--texte); font:inherit; font-size:14px; }
.sup-form textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.sup-pied { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sup-note { color:var(--doux); font-size:12px; }
.sup-err { color:var(--err); font-size:13px; }
@media (max-width:640px) {
  .sup-bulle { right:16px; bottom:16px; padding:12px; } .sup-bulle .sup-txt { display:none; }
  .sup-gauche.sup-bulle { left:16px; }
  .sup-panneau, .sup-gauche.sup-panneau { left:8px; right:8px; bottom:72px; width:auto; max-height:calc(100vh - 90px); }
}
/* console d'administration : menu à gauche, commun à admin.html et support.html */
.console { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:24px; max-width:1360px; margin:0 auto; padding:22px 18px 40px; align-items:start; }
.menu { position:sticky; top:16px; background:var(--carte); border:1px solid var(--bord); border-radius:14px; padding:10px; box-shadow:var(--ombre); }
.menu .titre-menu { padding:6px 10px 10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--doux); font-weight:700; }
.menu a { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 11px; border-radius:9px; color:var(--doux); text-decoration:none; font-size:14px; }
.menu a:hover { background:var(--accent-doux); color:var(--texte); }
.menu a.on { background:var(--accent-doux); color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
.menu a.bientot { opacity:.5; cursor:default; } .menu a.bientot:hover { background:none; color:var(--doux); }
.menu .sep { height:1px; background:var(--bord); margin:8px 4px; }
.badge { background:var(--err); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:1px 7px; } .badge[hidden] { display:none; }
.petit-tag { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--doux); border:1px solid var(--bord); border-radius:6px; padding:0 5px; }
@media (max-width:980px) { .console { grid-template-columns:1fr; } .menu { position:static; display:flex; overflow-x:auto; gap:4px; } .menu .titre-menu, .menu .sep { display:none; } .menu a { white-space:nowrap; } }
/* pied de page (pied.js) */
.pied-complet { background:#0f1b48; color:#c9d8f2; font-size:14px; margin-top:0; }
.pied-complet .pied-int { max-width:1120px; margin:0 auto; padding:48px 20px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.pied-complet h4 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:4px 0 12px; }
.pied-complet nav a { display:block; color:#c9d8f2; text-decoration:none; padding:4px 0; }
.pied-complet nav a:hover { color:#fff; text-decoration:underline; }
.pied-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:18px; }
.pied-logo img { height:34px; } .pied-logo b { font-weight:700; }
.pied-marque p { margin:12px 0 0; color:#9fb6da; max-width:320px; }
.pied-ue span { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#003399; color:#ffcc00; font-size:11px; margin-right:6px; }
.pied-bas { border-top:1px solid rgba(255,255,255,.12); max-width:1120px; margin:0 auto; padding:16px 20px 24px; color:#8296bd; font-size:13px; }
.pied-compact { border-top:1px solid var(--bord); color:var(--doux); font-size:13px; }
.pied-compact .pied-int { max-width:960px; margin:0 auto; padding:16px 16px 80px; display:flex; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; }
.pied-compact nav { display:flex; gap:6px 16px; flex-wrap:wrap; } .pied-compact a { color:var(--doux); text-decoration:none; } .pied-compact a:hover { color:var(--accent); text-decoration:underline; }
@media (max-width:800px) { .pied-complet .pied-int { grid-template-columns:1fr 1fr; } .pied-marque { grid-column:1 / -1; } }
@media (max-width:480px) { .pied-complet .pied-int { grid-template-columns:1fr; } }
main { max-width:960px; margin:0 auto; padding:24px 16px 64px; }
h1 { font-size:24px; margin:0 0 4px; letter-spacing:-.01em; } h2 { font-size:17px; margin:0 0 12px; }
.doux { color:var(--doux); } .petit { font-size:13px; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:12px; padding:20px; box-shadow:var(--ombre); }
.bouton { display:inline-flex; align-items:center; gap:8px; background:var(--carte); color:var(--texte); border:1px solid var(--bord);
          border-radius:8px; padding:9px 16px; font:inherit; font-weight:500; cursor:pointer; text-decoration:none; }
.bouton:hover { border-color:var(--accent); }
.bouton.prim { background:var(--accent); border-color:var(--accent); color:var(--accent-texte); font-weight:600; }
.bouton.prim:hover { filter:brightness(1.08); }
.bouton.danger { color:var(--err); }
.bouton:disabled { opacity:.45; cursor:default; }
.pastille { display:inline-block; font-size:12px; font-weight:600; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.p-ok { background:var(--ok-doux); color:var(--ok); } .p-alerte { background:var(--alerte-doux); color:var(--alerte); }
.p-err { background:var(--err-doux); color:var(--err); } .p-info { background:var(--accent-doux); color:var(--accent); }
.p-neutre { background:var(--piste); color:var(--doux); }
.jauge { height:8px; background:var(--piste); border-radius:4px; overflow:hidden; }
.jauge > div { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.chiffres { font-variant-numeric:tabular-nums; }
@media (max-width:640px) { main { padding:16px 16px 48px; } .carte { padding:16px; } h1 { font-size:20px; } }