/* Thèmes de la console — choisis par chaque utilisateur (Mon compte) ou par défaut pour l'opérateur (Réglages → Marque).
   Le thème « athomes » (espace profond) est réservé à Athomes Solutions ; les autres sont pour tous. Chargé après style.css. */

/* ───── Finitions communes : transitions, survols, apparitions ───── */
.carte,.kpi,.btn,.nav a,.table-l tbody tr,.liste-l a,.choix,.el-tk,.tache-c{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .15s,border-color .15s,color .15s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(17,24,39,.1)}
.carte:hover{box-shadow:0 6px 24px rgba(17,24,39,.08)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--marque) 28%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sec:hover,.btn.fantome:hover,.btn.mini:hover{box-shadow:none}
.table-l tbody tr{position:relative}
.table-l tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--marque)}
.nav a{position:relative}
.nav a[aria-current=page]::before{content:"";position:absolute;left:-.35rem;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .principal>*{animation:entree .35s cubic-bezier(.2,.8,.2,1) both}
  .principal>*:nth-child(2){animation-delay:.05s} .principal>*:nth-child(3){animation-delay:.1s} .principal>*:nth-child(4){animation-delay:.15s}
  @keyframes entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .tiroir{animation:glisse .28s cubic-bezier(.2,.8,.2,1) both} @keyframes glisse{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
  .toast{animation:pop .25s cubic-bezier(.2,.8,.2,1) both} @keyframes pop{from{transform:translate(-50%,8px) scale(.96);opacity:0}to{opacity:1}}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ───── Athomes « espace profond » : clair et aéré, barre latérale nuit étoilée, accents orbite / onde ───── */
html[data-theme="athomes"]{
  --nuit:#060B1A; --orbite:#70EDD9; --onde:#4C8DFF;
  --fond:#F2F5FC; --surface:#FFFFFF; --surface2:#F7F9FF; --trait:#E3E8F4; --trait2:#CBD4EA; --encre:#0B1328; --encre2:#3B4866; --encre3:#6B7897;
  --marque-fonce:var(--nuit); --marque-pale:#E9F3FF; --marque-voile:rgba(76,141,255,.18); --gris-fond:#EEF2FA;
  --rayon:14px; --ombre:0 1px 2px rgba(11,19,40,.04),0 8px 24px rgba(11,19,40,.06);
  --police:"Montserrat","Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
}
html[data-theme="athomes"] body{background:var(--fond);background-image:radial-gradient(900px 400px at 100% -10%,rgba(76,141,255,.12),transparent 60%),radial-gradient(600px 300px at 0% 100%,rgba(112,237,217,.12),transparent 60%);background-attachment:fixed}
html[data-theme="athomes"] .cote,html[data-theme="athomes"] .haut-mobile{background:var(--nuit);background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.9),transparent 60%),radial-gradient(1.5px 1.5px at 78% 9%,rgba(112,237,217,.9),transparent 60%),radial-gradient(1px 1px at 55% 33%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 88% 52%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.2px 1.2px at 22% 61%,rgba(76,141,255,.9),transparent 60%),radial-gradient(1px 1px at 68% 74%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.5px 1.5px at 35% 88%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 90% 92%,rgba(112,237,217,.8),transparent 60%),radial-gradient(700px 400px at 50% 120%,rgba(76,141,255,.25),transparent 60%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
html[data-theme="athomes"] .nav a[aria-current=page]{background:linear-gradient(135deg,rgba(112,237,217,.22),rgba(76,141,255,.22));color:#fff;box-shadow:inset 0 0 0 1px rgba(112,237,217,.25)}
html[data-theme="athomes"] .nav a[aria-current=page]::before{background:var(--orbite)}
html[data-theme="athomes"] .nav a:hover{background:rgba(255,255,255,.07)}
html[data-theme="athomes"] .cote .tete img.icone-produit{box-shadow:0 0 0 1px rgba(112,237,217,.35),0 0 18px rgba(112,237,217,.25)}
html[data-theme="athomes"] .avatar{background:linear-gradient(135deg,var(--orbite),var(--onde));color:var(--nuit)}
html[data-theme="athomes"] .btn{background:linear-gradient(135deg,var(--onde),#2F6BE8);border:0;box-shadow:0 4px 14px rgba(76,141,255,.3)}
html[data-theme="athomes"] .btn:hover{box-shadow:0 8px 22px rgba(76,141,255,.38)}
html[data-theme="athomes"] .btn.sec,html[data-theme="athomes"] .btn.fantome,html[data-theme="athomes"] .btn.danger,html[data-theme="athomes"] .btn.mini.sec{background:var(--surface);color:var(--encre);border:1px solid var(--trait2);box-shadow:none}
html[data-theme="athomes"] .btn.sec:hover,html[data-theme="athomes"] .btn.fantome:hover{border-color:var(--onde);color:var(--onde)}
html[data-theme="athomes"] .btn.danger{color:var(--rouge);border-color:var(--rouge-fond)}
html[data-theme="athomes"] h1{letter-spacing:-.02em;font-weight:800}
html[data-theme="athomes"] .kpi b{background:linear-gradient(90deg,var(--nuit),var(--onde));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="athomes"] .kpi:hover{border-color:var(--onde)}
html[data-theme="athomes"] .carte{border-color:var(--trait)}
html[data-theme="athomes"] .carte h2{letter-spacing:-.01em}
html[data-theme="athomes"] .table-l th{background:#F4F7FF;color:var(--encre3)}
html[data-theme="athomes"] .table-l tbody tr:hover{background:#F0F6FF} html[data-theme="athomes"] .table-l tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--orbite)}
html[data-theme="athomes"] .tabs [role=tab][aria-selected=true],html[data-theme="athomes"] .onglets button[aria-pressed=true]{color:var(--onde);box-shadow:inset 0 -2px 0 var(--onde)}
html[data-theme="athomes"] .pastille.p-client{background:#DDF8F3;color:#0F766E}
html[data-theme="athomes"] .toast{background:var(--nuit)}
html[data-theme="athomes"] .ia-m.moi .bulle{background:linear-gradient(135deg,var(--onde),#2F6BE8);border:0}
html[data-theme="athomes"] .tab-ia svg{color:var(--onde)}

/* ───── Nuit : sombre partout ───── */
html[data-theme="nuit"]{
  --fond:#0F1420; --surface:#161C2B; --surface2:#1B2233; --trait:#263047; --trait2:#34405C; --encre:#EEF2FF; --encre2:#B7C0D8; --encre3:#7F8AA8; --gris-fond:#1B2233;
  --marque-pale:color-mix(in srgb,var(--marque) 22%,#161C2B); --marque-voile:color-mix(in srgb,var(--marque) 30%,transparent); --marque-fonce:#0A0E18;
  --vert:#5EEAD4; --vert-fond:rgba(94,234,212,.16); --ambre:#FBBF24; --ambre-fond:rgba(251,191,36,.16); --rouge:#FB7185; --rouge-fond:rgba(251,113,133,.16); --bleu:#93C5FD; --bleu-fond:rgba(96,165,250,.18);
  --ombre:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark;
}
html[data-theme="nuit"] body{background:var(--fond)}
html[data-theme="nuit"] .cote{box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
html[data-theme="nuit"] .champ input,html[data-theme="nuit"] .champ select,html[data-theme="nuit"] .champ textarea,html[data-theme="nuit"] .saisie,html[data-theme="nuit"] .cel{background:#111726;border-color:var(--trait2);color:var(--encre)}
html[data-theme="nuit"] .table-l th{background:#1B2233;color:var(--encre3)}
html[data-theme="nuit"] .table-l tbody tr:hover{background:#1E2740}
html[data-theme="nuit"] .toast{background:#F3F4F6;color:#111827}
html[data-theme="nuit"] .tiroir,html[data-theme="nuit"] .tiroir .t-tete,html[data-theme="nuit"] .tiroir .t-pied{background:var(--surface)}
html[data-theme="nuit"] .info{background:var(--bleu-fond);color:#DCE7FF} html[data-theme="nuit"] .info.ambre{background:var(--ambre-fond);color:#FDE68A}
html[data-theme="nuit"] .pastille{filter:saturate(.9)}
html[data-theme="nuit"] .ia-m .bulle,html[data-theme="nuit"] .assistant .ia-fil{background:#111726;border-color:var(--trait)}
html[data-theme="nuit"] .etiquette{background:#263047;color:var(--encre2)}

/* ───── Océan (Amiral) : bleu profond et doré ───── */
html[data-theme="ocean"]{--fond:#F1F6FA;--surface:#FFFFFF;--surface2:#F6FAFD;--trait:#DCE7F0;--trait2:#C3D4E2;--encre:#0C2238;--encre2:#35506A;--encre3:#64809A;--marque-fonce:#0B2540;--marque-pale:#E6F0F8;--gris-fond:#EAF1F7;--ombre:0 1px 2px rgba(12,34,56,.05),0 8px 24px rgba(12,34,56,.07)}
html[data-theme="ocean"] .cote,html[data-theme="ocean"] .haut-mobile{background:linear-gradient(180deg,#0B2540,#123B5F)}
html[data-theme="ocean"] .btn{background:linear-gradient(135deg,#1A5B8F,#0B2540);border:0}
html[data-theme="ocean"] .btn.sec,html[data-theme="ocean"] .btn.fantome{background:var(--surface);color:var(--encre);border:1px solid var(--trait2)}
html[data-theme="ocean"] .nav a[aria-current=page]{background:rgba(214,170,74,.18)} html[data-theme="ocean"] .nav a[aria-current=page]::before{background:#D6AA4A}
html[data-theme="ocean"] .avatar{background:#D6AA4A;color:#0B2540}
html[data-theme="ocean"] .kpi b{color:#123B5F}

/* ───── Halloween : citrouille et violet, chauves-souris discrètes ───── */
html[data-theme="halloween"]{--fond:#F6F1F9;--surface:#FFFFFF;--surface2:#FBF7FD;--trait:#E8DDEF;--trait2:#D3C2DF;--encre:#1E1230;--encre2:#4A3A5E;--encre3:#7A6A8E;--marque-fonce:#1B1030;--marque-pale:#FFF1E6;--marque-voile:rgba(255,122,24,.2);--gris-fond:#F1EAF5;--ombre:0 1px 2px rgba(30,18,48,.06),0 8px 24px rgba(30,18,48,.08)}
html[data-theme="halloween"] .cote,html[data-theme="halloween"] .haut-mobile{background:linear-gradient(180deg,#1B1030,#2A1545);background-image:radial-gradient(400px 200px at 80% 0%,rgba(255,122,24,.18),transparent 60%),linear-gradient(180deg,#1B1030,#2A1545)}
html[data-theme="halloween"] .btn{background:linear-gradient(135deg,#FF7A18,#E0530F);border:0;color:#fff}
html[data-theme="halloween"] .btn.sec,html[data-theme="halloween"] .btn.fantome{background:var(--surface);color:var(--encre);border:1px solid var(--trait2)}
html[data-theme="halloween"] .nav a[aria-current=page]{background:rgba(255,122,24,.2)} html[data-theme="halloween"] .nav a[aria-current=page]::before{background:#FF7A18}
html[data-theme="halloween"] .avatar{background:#FF7A18}
html[data-theme="halloween"] .kpi b{color:#C2410C}
html[data-theme="halloween"] .table-l tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #FF7A18}
html[data-theme="halloween"] .cote::after{content:"🎃";position:absolute;right:.7rem;bottom:.8rem;font-size:1.3rem;filter:drop-shadow(0 0 8px rgba(255,122,24,.7));pointer-events:none}
html[data-theme="halloween"] .cote,html[data-theme="noel"] .cote{position:sticky}

/* ───── Noël : sapin, rouge et or, neige légère ───── */
html[data-theme="noel"]{--fond:#F3F7F4;--surface:#FFFFFF;--surface2:#F7FAF8;--trait:#DDE8E0;--trait2:#C4D5C9;--encre:#10261A;--encre2:#2E4A38;--encre3:#5F7A68;--marque-fonce:#0E2A1C;--marque-pale:#FDEBEA;--marque-voile:rgba(190,32,46,.18);--gris-fond:#ECF2EE;--ombre:0 1px 2px rgba(16,38,26,.05),0 8px 24px rgba(16,38,26,.07)}
html[data-theme="noel"] .cote,html[data-theme="noel"] .haut-mobile{background:linear-gradient(180deg,#0E2A1C,#163F2A);background-image:radial-gradient(1.5px 1.5px at 20% 12%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 70% 30%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.5px 1.5px at 40% 70%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 85% 85%,rgba(255,255,255,.7),transparent 60%),linear-gradient(180deg,#0E2A1C,#163F2A)}
html[data-theme="noel"] .btn{background:linear-gradient(135deg,#C8232F,#9E1B24);border:0;color:#fff}
html[data-theme="noel"] .btn.sec,html[data-theme="noel"] .btn.fantome{background:var(--surface);color:var(--encre);border:1px solid var(--trait2)}
html[data-theme="noel"] .nav a[aria-current=page]{background:rgba(214,170,74,.2)} html[data-theme="noel"] .nav a[aria-current=page]::before{background:#D6AA4A}
html[data-theme="noel"] .avatar{background:#C8232F}
html[data-theme="noel"] .kpi b{color:#9E1B24}
html[data-theme="noel"] .table-l tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #C8232F}
html[data-theme="noel"] .cote::after{content:"🎄";position:absolute;right:.7rem;bottom:.8rem;font-size:1.3rem;pointer-events:none}
#deco-theme{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
#deco-theme span{position:absolute;top:-2rem;animation:tombe linear infinite;opacity:.85;will-change:transform}
@keyframes tombe{to{transform:translateY(110vh) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#deco-theme{display:none}}

/* ───── Choix du thème (Mon compte, Réglages) ───── */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.7rem}
.theme-c{border:2px solid var(--trait);border-radius:12px;padding:.6rem;cursor:pointer;background:var(--surface);text-align:left;display:grid;gap:.4rem}
.theme-c:hover{border-color:var(--trait2)} .theme-c[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--marque-voile)}
.theme-c .ap{height:3.2rem;border-radius:8px;display:grid;grid-template-columns:30% 1fr;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.theme-c .ap i{display:block} .theme-c .ap i+i{display:grid;gap:.25rem;padding:.4rem;align-content:start} .theme-c .ap i+i b{display:block;height:.4rem;border-radius:3px;opacity:.85}
.theme-c b.nom{font-size:.88rem} .theme-c small{color:var(--encre3)}
.theme-c .verrou{font-size:.7rem;color:var(--encre3)}