/* ════════════════════════════════════════════════════════════════════════
   GARDIEN — DESIGN 2026  (couche partagée par les 4 pages + la connexion)
   Principe : ce fichier est chargé APRÈS le <style> de chaque page. Il ne
   renomme ni ne retire aucune classe/id : il ajoute des jetons (tokens),
   de la matière (ombres, verre, grain) et du mouvement par-dessus les
   variables de thème existantes (--bg --surf --elev --gold --txt …).
   Documentation : documentation/DESIGN-GARDIEN-2026.md
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS (valeurs par défaut = thème « nuit ») ─────────────────── */
:root{
  --d-font:"Inter var","Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"SF Pro Text",Roboto,"Helvetica Neue",Arial,sans-serif;
  --d-font-titre:"Segoe UI Variable Display","SF Pro Display","Inter var","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --d-ease:cubic-bezier(.22,1,.36,1);
  --d-spring:cubic-bezier(.34,1.4,.64,1);
  --d-r-sm:10px; --d-r:16px; --d-r-lg:22px; --d-r-pill:999px;
  --d-tint:5 9 26;          /* rgb des ombres (teinté par thème)      */
  --d-glass:74%;            /* opacité des surfaces « verre »         */
  --d-grain:.055;           /* intensité du grain                      */
  --d-hl:rgb(255 255 255/.07);/* liseré de lumière en haut des objets  */
  --d-orb-a:30%;            /* intensité des lueurs d'ambiance        */
  --atm1:#D4AF37; --atm2:#2F5DD1; --atm3:#7B4DD8;
}
body{
  --gold-2:color-mix(in srgb,var(--gold) 84%,#fff);   /* fin de dégradé : s'éloigne du texte sombre -> contraste conservé */
  --btn-a:var(--gold);--btn-b:var(--gold-2);
  --d-line:color-mix(in srgb,var(--border) 62%,transparent);
  --d-card:color-mix(in srgb,var(--surf) var(--d-glass),transparent);
  --d-card-solid:color-mix(in srgb,var(--surf) 94%,var(--atm1));
  --d-sh1:0 1px 1px rgb(var(--d-tint)/.10),0 2px 8px rgb(var(--d-tint)/.12);
  --d-sh2:0 2px 4px rgb(var(--d-tint)/.10),0 10px 28px rgb(var(--d-tint)/.22);
  --d-sh3:0 4px 8px rgb(var(--d-tint)/.12),0 20px 56px rgb(var(--d-tint)/.36);
  --d-ring:0 0 0 1px color-mix(in srgb,var(--gold) 60%,transparent),0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent);
  --d-glow:0 0 22px color-mix(in srgb,var(--gold) 34%,transparent);
  font-family:var(--d-font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.004em;
}
/* Certaines pages posent un fond sur <html> : il masquerait l'ambiance (z-index:-1). On le rend transparent ;
   le fond du <body> se propage alors à toute la page, comme dans le chat. */
html{background:transparent!important}
.hidden{display:none!important} /* surveillance-gardien.html l'utilisait sans le définir : un cadre blanc vide restait visible */
@supports(height:100dvh){ body,#app,.layout,.side{height:100dvh} #login{height:100dvh} }

/* ── 2. AMBIANCE : lueurs d'atmosphère + grain (statique, sans JS) ───── */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(110% 70% at 8% -8%,color-mix(in srgb,var(--atm1) var(--d-orb-a),transparent),transparent 62%),
    radial-gradient(90% 70% at 102% 8%,color-mix(in srgb,var(--atm2) var(--d-orb-a),transparent),transparent 58%),
    radial-gradient(100% 80% at 48% 125%,color-mix(in srgb,var(--atm3) var(--d-orb-a),transparent),transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--d-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* Fond animé (créé par design-2026.js) : 3 lueurs qui dérivent + canvas de particules */
#d26-fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#d26-fond .d26-o{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:.9;will-change:transform;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--atm1) var(--d-orb-a),transparent),transparent)}
#d26-fond .d26-o1{left:-18vmax;top:-22vmax;animation:d26-d1 46s ease-in-out infinite alternate}
#d26-fond .d26-o2{right:-22vmax;top:8vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--atm2) var(--d-orb-a),transparent),transparent);animation:d26-d2 58s ease-in-out infinite alternate}
#d26-fond .d26-o3{left:18vmax;bottom:-34vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--atm3) var(--d-orb-a),transparent),transparent);animation:d26-d3 70s ease-in-out infinite alternate}
#d26-fond canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes d26-d1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vmax,10vmax,0) scale(1.18)}}
@keyframes d26-d2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16vmax,12vmax,0) scale(.92)}}
@keyframes d26-d3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-10vmax,-14vmax,0) scale(1.2)}}
html[data-d26-pause] #d26-fond .d26-o{animation-play-state:paused}
/* Les orbes statiques de body::before cèdent la place aux orbes animés quand le JS est là */
html[data-d26] body::before{opacity:.55}

/* Les grandes surfaces laissent voir l'ambiance */
.layout,.view,#v-chat,.chat-wrap,#chat,.main{background:transparent}
#login{background:transparent!important}
::selection{background:color-mix(in srgb,var(--gold) 38%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 38%,transparent) transparent}

/* ── 3. SURFACES : verre, profondeur, rayons ─────────────────────────── */
.side{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surf) calc(var(--d-glass) + 8%),transparent),color-mix(in srgb,var(--surf) calc(var(--d-glass) - 6%),transparent));
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-right:1px solid var(--d-line);
  box-shadow:inset -1px 0 0 var(--d-hl),14px 0 44px -22px rgb(var(--d-tint)/.55);
}
.topbar{
  background:color-mix(in srgb,var(--surf) calc(var(--d-glass) - 8%),transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--d-line);box-shadow:0 8px 28px -18px rgb(var(--d-tint)/.6);
}
.card,.cfg-pane,.panel,.cf-form,.eq-card,.sp-carte,.ap-carte,.at-cahier,.ou-detail{
  border-radius:var(--d-r)!important;
  background:var(--d-card);
  border:1px solid var(--d-line)!important;
  box-shadow:var(--d-sh1),inset 0 1px 0 var(--d-hl);
}
.card{border-radius:var(--d-r-lg)!important;box-shadow:var(--d-sh3),inset 0 1px 0 var(--d-hl);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  animation:d26-pop .7s var(--d-ease) backwards}
.cf-item,.ou-ligne,.eq-col{
  border-radius:14px!important;border:1px solid var(--d-line)!important;
  background:color-mix(in srgb,var(--surf) 78%,transparent);
  box-shadow:var(--d-sh1);transition:transform .25s var(--d-ease),box-shadow .25s var(--d-ease),border-color .2s;
}
@media(hover:hover){.cf-item:hover,.ou-ligne:hover{transform:translateY(-1px);box-shadow:var(--d-sh2);border-color:var(--border2)!important}}

/* ── 4. TYPOGRAPHIE ───────────────────────────────────────────────────── */
h1,h2,h3,.card h1,.topbar h2,.brand .b-name,.cq-titre{font-family:var(--d-font-titre);letter-spacing:-.012em}
.card h1{font-size:23px;font-weight:700;
  background:linear-gradient(120deg,var(--gold-l),var(--gold) 55%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .b-name{font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.brand .b-sub{letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
label.lbl,.hist-mois,.section-tete{letter-spacing:.07em}
.msg{font-size:14.5px;line-height:1.68;text-wrap:pretty}

/* ── 5. BOUTONS, CHAMPS, ÉTATS (hover / press / focus) ───────────────── */
.btn,.send-rond,.cq-envoyer{
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b))!important;color:var(--on-gold)!important;
  border:0!important;box-shadow:0 1px 0 var(--d-hl) inset,0 6px 16px -6px color-mix(in srgb,var(--gold) 70%,transparent),var(--d-sh1);
  transition:transform .18s var(--d-ease),box-shadow .25s var(--d-ease),filter .2s;
}
.btn{border-radius:12px}
@media(hover:hover){
  .btn:hover:not(:disabled),.send-rond:hover:not(:disabled),.cq-envoyer:hover:not(:disabled){
    transform:translateY(-1px);filter:brightness(1.07) saturate(1.05);
    box-shadow:0 1px 0 var(--d-hl) inset,0 10px 24px -8px color-mix(in srgb,var(--gold) 80%,transparent),var(--d-sh2)}
  .send-rond:hover:not(:disabled){transform:scale(1.07)}
}
.btn:active:not(:disabled),.send-rond:active:not(:disabled),.cq-envoyer:active:not(:disabled){transform:scale(.96);filter:none;transition-duration:.08s}
.ghost,.mini-btn,.eye,.collapse-rond,.sp-nbtn,.ico-btn,.hist-select-btn{
  border:1px solid var(--d-line)!important;background:color-mix(in srgb,var(--elev) 60%,transparent);
  box-shadow:inset 0 1px 0 var(--d-hl);transition:transform .18s var(--d-ease),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
@media(hover:hover){
  .ghost:hover,.mini-btn:hover,.eye:hover,.collapse-rond:hover,.sp-nbtn:hover,.ico-btn:hover{
    background:color-mix(in srgb,var(--gold) 12%,var(--elev));border-color:color-mix(in srgb,var(--gold) 55%,transparent)!important;transform:translateY(-1px)}
}
.ghost:active,.mini-btn:active,.eye:active,.ico-btn:active,.collapse-rond:active{transform:scale(.94)}
.field,textarea.field,.hist-recherche,.sp-navurl,select.field{
  border:1px solid var(--d-line)!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--bg) 70%,var(--surf))!important;
  box-shadow:inset 0 2px 4px rgb(var(--d-tint)/.16);transition:box-shadow .2s,border-color .2s;
}
.field:focus,.hist-recherche:focus,.sp-navurl:focus,.cq-libre:focus{
  border-color:var(--gold)!important;box-shadow:var(--d-ring)!important;outline:none}
:where(button,a,[role=button],.nav,.hist-item,.theme-vignette,.cq-opt):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:inherit}

/* ── 6. BARRE LATÉRALE ───────────────────────────────────────────────── */
.new-disc{
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,transparent),color-mix(in srgb,var(--gold) 8%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent)!important;border-radius:14px!important;font-weight:600;
  box-shadow:var(--d-sh1),inset 0 1px 0 var(--d-hl);transition:transform .2s var(--d-ease),box-shadow .25s,filter .2s}
.new-disc:hover{transform:translateY(-1px);box-shadow:var(--d-sh2),var(--d-glow);filter:brightness(1.1)}
.new-disc:active{transform:scale(.97)}
.collapse-rond{border-radius:14px!important}
.hist-item,.nav{border-radius:12px;transition:background .2s,color .2s,transform .2s var(--d-ease),box-shadow .2s;position:relative}
.hist-item{border:1px solid transparent}
.hist-item:hover{background:color-mix(in srgb,var(--hover) 70%,transparent);transform:translateX(2px)}
.hist-item.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 3%,transparent))!important;
  border-color:color-mix(in srgb,var(--gold) 24%,transparent)!important;box-shadow:inset 3px 0 0 var(--gold)}
.profil-carte{border-radius:16px;transition:background .2s}
.profil-avatar{background:linear-gradient(135deg,var(--gold-l),var(--gold))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent),var(--d-sh1)}
.b-logo-img{border-radius:12px;box-shadow:var(--d-sh1),0 0 0 1px var(--d-line)}
.logo-img{border-radius:20px;box-shadow:var(--d-sh2),0 0 0 1px var(--d-line),0 0 38px -6px color-mix(in srgb,var(--gold) 40%,transparent);
  animation:d26-flotte 6s ease-in-out infinite}
.side-bas{border-top:1px solid var(--d-line)}
.section-tete{border-radius:10px;transition:background .2s,color .2s}
.section-tete:hover{background:color-mix(in srgb,var(--hover) 55%,transparent)}

/* ── 7. BARRE DU HAUT : pastilles + icônes SVG cohérentes ────────────── */
.topnav .nav{
  border:0!important;background:color-mix(in srgb,var(--elev) 58%,transparent);
  box-shadow:inset 0 0 0 1px var(--d-line),inset 0 1px 0 var(--d-hl);
  padding:8px 13px;gap:7px;font-weight:550;letter-spacing:-.005em;
  transition:transform .2s var(--d-ease),background .2s,box-shadow .25s,color .2s}
@media(hover:hover){.topnav .nav:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--gold) 13%,var(--elev));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent),var(--d-sh1)}}
.topnav .nav:active{transform:scale(.95)}
.topnav .nav.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 28%,var(--elev)),color-mix(in srgb,var(--gold) 10%,var(--elev)))!important;
  color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 65%,transparent),var(--d-sh1),0 6px 18px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
.topnav .nav .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  font-size:0!important;width:15px;height:15px;display:inline-block;position:relative;flex-shrink:0}
.topnav .nav .ico::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.topnav .nav[data-v=kb] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E")}
.topnav .nav[data-v=journal] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.topnav .nav[data-v=atelier] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9V3'/%3E%3C/svg%3E")}
.topnav .nav[data-v=source] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E")}
.topnav .nav[data-v=pont] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")}
.topnav .nav[data-v=creations] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8Z'/%3E%3Cpath d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8Z'/%3E%3C/svg%3E")}
.topnav .nav[data-v=routines] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.2L3 16M3 21v-5h5'/%3E%3C/svg%3E")}
.topnav .nav[data-v=maintenance] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4Z'/%3E%3C/svg%3E")}
#navSurveillance .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
#navAvis .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L3 21l1.9-6.2A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E")}
.topnav .nav[data-v=bac-a-sable] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-9-5-9 5v8l9 5 9-5Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
.topnav .nav[data-v=connexions] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0ZM12 17v5'/%3E%3C/svg%3E")}
.topnav .nav[data-v=utilisateurs] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.2A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E")}
.topnav .nav[data-v=eq-kanban] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5' height='18' rx='1'/%3E%3Crect x='10' y='3' width='5' height='11' rx='1'/%3E%3Crect x='17' y='3' width='4' height='7' rx='1'/%3E%3C/svg%3E")}
.topnav .nav[data-v=eq-sprints] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}
.topnav .nav[data-v=eq-reunions] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.topnav .nav[data-v=eq-performance] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}


/* ── 7 bis. JEU D'ICÔNES UNIQUE (SVG, trait 2 px, bouts arrondis, 24×24) ──
   Chaque icône est un masque coloré par currentColor : elle suit donc le thème
   et le contraste. Mêmes dimensions (15 px) partout dans le Gardien. */
:is(.cfg-tab,.sp-tab) .ico{font-size:0!important;width:16px;height:16px;display:inline-block;position:relative;flex-shrink:0;vertical-align:-3px;margin-right:2px}
:is(.cfg-tab,.sp-tab) .ico::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.cfg-tab[data-cfg=cerveau] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 6 1V4a3 3 0 0 0-3 0ZM15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-6 1V4'/%3E%3C/svg%3E")}
.cfg-tab[data-cfg=voix] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4ZM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.cfg-tab[data-cfg=autonomie] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.4 8 8 9 4.6-1 8-4 8-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.cfg-tab[data-cfg=integrations] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.7l1-1'/%3E%3C/svg%3E")}
.cfg-tab[data-cfg=bac-a-sable] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-9-5-9 5v8l9 5 9-5Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
.cfg-tab[data-cfg=categories] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E")}
.sp-tab[data-sptab=navigateur] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.sp-tab[data-sptab=resultats] .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-9-5-9 5v8l9 5 9-5Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8M7.5 5.5l9 5'/%3E%3C/svg%3E")}
.listen::before{content:"";display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4ZM15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4ZM15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center/contain no-repeat}
.tag::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
/* Les emojis restants (corps de message) gardent leur rendu natif ; seuls les contrôles de l'interface sont en SVG. */

/* ── 8 bis. LE GARDIEN RÉFLÉCHIT : étapes lisibles, étape en cours vivante ─ */
.rais-corps .msg.step{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:9px;flex-wrap:wrap}
.rais-corps .msg.step::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;
  background:color-mix(in srgb,var(--green) 85%,transparent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}
/* Étape terminée = pastille verte évidée d'une coche ; étape en cours = anneau qui tourne (raisonnement encore ouvert) */
.msg.raisonnement:has(.rais-tete.ouvert) .rais-corps>.msg.step:last-child::before{
  -webkit-mask:none;mask:none;background:none;border:2px solid color-mix(in srgb,var(--gold) 30%,transparent);border-top-color:var(--gold);
  animation:d26-tourne .8s linear infinite}
.msg.raisonnement:has(.rais-tete.ouvert) .rais-corps>.msg.step:last-child{color:var(--txt);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 14%,transparent),color-mix(in srgb,var(--elev) 55%,transparent))!important}
.msg.raisonnement:has(.rais-tete.ouvert){position:relative;box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 28%,transparent),0 10px 30px -14px color-mix(in srgb,var(--gold) 55%,transparent)}
.msg.raisonnement:has(.rais-tete.ouvert) .rais-tete{position:relative;overflow:hidden}
.msg.raisonnement:has(.rais-tete.ouvert) .rais-tete::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 16%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:d26-balaye 2.4s ease-in-out infinite}
@keyframes d26-tourne{to{transform:rotate(360deg)}}

/* ── 8. MESSAGES : bulles, présentation du texte ─────────────────────── */
#chat{gap:15px;padding-top:6px}
.msg{border-radius:20px;padding:13px 18px}
.msg.user{
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-gold);border:0;
  border-bottom-right-radius:6px;font-weight:500;
  box-shadow:0 1px 0 var(--d-hl) inset,0 10px 26px -10px color-mix(in srgb,var(--gold) 65%,transparent),var(--d-sh1)}
.msg.user a,.msg.user a.msg-lien{color:inherit;text-decoration:underline}
.msg.bot{
  background:var(--d-card);border:1px solid var(--d-line);border-bottom-left-radius:6px;
  font-weight:450;max-width:min(94%,74ch);padding:15px 20px;
  box-shadow:var(--d-sh1),inset 0 1px 0 var(--d-hl)}
.msg.bot strong{font-weight:700;color:var(--txt)}
.msg.bot a.msg-lien{color:var(--gold);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .25s var(--d-ease);padding-bottom:1px}
.msg.bot a.msg-lien:hover{background-size:100% 100%;color:var(--on-gold)}
.msg.bot code,.msg code{font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;font-size:.88em;
  padding:.12em .45em;border-radius:7px;background:color-mix(in srgb,var(--gold) 12%,var(--elev));border:1px solid var(--d-line)}
.msg.sys{letter-spacing:.01em}
.msg.step{border-left:0!important;background:color-mix(in srgb,var(--elev) 55%,transparent)!important;border-radius:999px!important;
  padding:5px 14px!important;box-shadow:inset 0 0 0 1px var(--d-line)}
.msg.reflexion{border-left:0!important;padding:8px 16px!important;border-radius:14px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent)!important;
  box-shadow:inset 3px 0 0 var(--gold)}
.msg.pensee{border-left:0!important;box-shadow:inset 2px 0 0 var(--d-line)}
.msg.raisonnement,.msg.compaction{border-radius:14px!important;border:1px solid var(--d-line)!important;background:color-mix(in srgb,var(--surf) 55%,transparent)!important}
.listen{border-radius:999px;border:1px solid var(--d-line);background:color-mix(in srgb,var(--elev) 60%,transparent);transition:background .2s,transform .2s var(--d-ease)}
.listen:hover{background:color-mix(in srgb,var(--gold) 14%,var(--elev));transform:translateY(-1px)}
.tag{border-radius:999px;padding:3px 10px;backdrop-filter:none;transition:transform .2s var(--d-ease)}
.tag:hover{transform:translateY(-1px)}
.msg img.msg-img{border-radius:14px;box-shadow:var(--d-sh2)}

/* « Le Gardien travaille » : pastille vivante, orbe qui respire + balayage de lumière */
.msg.think{display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;font-style:normal;
  color:var(--txt2);background:var(--d-card);border:1px solid var(--d-line);border-radius:999px;padding:9px 18px 9px 16px;box-shadow:var(--d-sh1)}
.msg.think::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent);animation:d26-respire 1.6s var(--d-ease) infinite}
.msg.think::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 28%,color-mix(in srgb,var(--gold) 20%,transparent) 50%,transparent 72%);
  transform:translateX(-100%);animation:d26-balaye 2.1s ease-in-out infinite}
.charge-fil{height:3px!important;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-l))!important;box-shadow:0 0 14px var(--gold)}

/* ── 9. COMPOSER FLOTTANT ─────────────────────────────────────────────── */
.composer{border-top:0!important;padding-top:4px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
.composer-pilule{
  background:color-mix(in srgb,var(--surf) 86%,transparent)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--d-line)!important;border-radius:28px!important;padding:12px 12px 10px;
  box-shadow:var(--d-sh2),inset 0 1px 0 var(--d-hl);transition:box-shadow .3s var(--d-ease),border-color .25s,transform .3s var(--d-ease)}
.composer-pilule:focus-within{border-color:color-mix(in srgb,var(--gold) 70%,transparent)!important;
  box-shadow:var(--d-sh3),0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent),0 0 36px -8px color-mix(in srgb,var(--gold) 45%,transparent)}
.composer textarea{font-size:15.5px;caret-color:var(--gold)}
.composer textarea::placeholder{color:var(--muted)}
.ico-btn{border-radius:50%;background:transparent}
.send-rond{box-shadow:0 8px 20px -6px color-mix(in srgb,var(--gold) 75%,transparent),var(--d-sh1)}
.plus-menu{border-radius:18px!important;border:1px solid var(--d-line)!important;background:color-mix(in srgb,var(--surf) 92%,transparent)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--d-sh3)!important;animation:d26-menu .22s var(--d-ease) backwards;transform-origin:bottom left}
.plus-menu button{border-radius:12px;transition:background .15s,transform .15s var(--d-ease)}
.plus-menu button:hover{transform:translateX(2px)}
.att-chip{border-radius:14px;box-shadow:var(--d-sh1);animation:d26-in .3s var(--d-ease) backwards}
#jauge{border-radius:999px}

/* ── 10. CARTE DE QUESTIONS (poser_questions) ─────────────────────────── */
.msg.carte-q{
  position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--d-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surf) 92%,transparent),color-mix(in srgb,var(--surf) 80%,var(--atm1) 6%));
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 2px 3px rgb(var(--d-tint)/.12),0 9px 13px -5px rgb(var(--d-tint)/.30),inset 0 1px 0 var(--d-hl);padding:22px 22px 18px;gap:20px;
  animation:d26-carte .7s var(--d-spring) backwards}
.msg.carte-q::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--atm1),var(--gold),var(--atm2),var(--atm3));background-size:200% 100%;animation:d26-ruban 8s linear infinite}
.carte-q.cq-fait::before{animation:none;opacity:.35}
.cq-titre{font-size:11.5px;letter-spacing:.09em}
.cq-etat{background:color-mix(in srgb,var(--gold) 14%,transparent);border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
.cq-int{font-size:16px;font-weight:650;letter-spacing:-.01em}
.cq-opt{
  border-radius:16px;border:1px solid var(--d-line);background:color-mix(in srgb,var(--elev) 70%,transparent);
  box-shadow:var(--d-sh1);padding:13px 15px;
  transition:transform .22s var(--d-ease),box-shadow .25s,border-color .2s,background .2s}
@media(hover:hover){.cq-opt:hover{transform:translateY(-2px);box-shadow:var(--d-sh2);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}}
.cq-opt:active{transform:scale(.985)}
.cq-opt:has(input:checked){
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,var(--elev)),color-mix(in srgb,var(--gold) 6%,var(--elev)));
  border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent),var(--d-sh2)}
.cq-marque{width:20px;height:20px;border-width:2px;transition:transform .3s var(--d-spring),background .2s,border-color .2s}
.cq-opt input:checked~.cq-marque{transform:scale(1.12)}
.cq-reco{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 16%,transparent);margin-right:8px}
.cq-libre{border-radius:14px;border:1px dashed var(--d-line);background:color-mix(in srgb,var(--bg) 40%,transparent);transition:border-color .2s,box-shadow .2s}
.cq-expl{border-style:solid;min-height:40px;font-size:13px;color:var(--txt2)}
.cq-manque{font-size:12.5px;color:var(--txt2);padding:2px 2px 0;transition:color .25s}
.cq-manque.cq-complet{color:var(--green)}
.cq-envoyer{border-radius:14px;padding:13px 26px}
.cq-rep{border-left:0;border-radius:14px;box-shadow:inset 3px 0 0 var(--gold);background:color-mix(in srgb,var(--elev) 75%,transparent)}
.cq-suivre{transition:color .2s}.cq-suivre:hover{color:var(--gold)}

/* ── 11. SÉLECTEUR DE THÈMES : aperçus visuels ───────────────────────── */
.themes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.theme-groupe{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 2px -4px}
.theme-groupe:first-child{margin-top:0}
.theme-vignette{
  border:0!important;padding:8px 8px 11px!important;border-radius:18px!important;
  background:color-mix(in srgb,var(--elev) 55%,transparent)!important;box-shadow:inset 0 0 0 1px var(--d-line),var(--d-sh1);
  transition:transform .28s var(--d-ease),box-shadow .28s var(--d-ease)}
@media(hover:hover){.theme-vignette:hover{transform:translateY(-3px) scale(1.015);box-shadow:inset 0 0 0 1px var(--border2),var(--d-sh2)}}
.theme-vignette:active{transform:scale(.97)}
.theme-vignette.active{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent),var(--d-sh2)!important}
.theme-vignette.active .theme-nom::after{content:" ✓";color:var(--gold)}
.theme-apercu{position:relative;height:74px!important;border:0!important;border-radius:12px!important;overflow:hidden;margin-bottom:9px;
  background:radial-gradient(120% 90% at 20% 0%,var(--ta-g,var(--ta-ac)),transparent 70%),linear-gradient(165deg,var(--ta-bg),var(--ta-el));
  box-shadow:inset 0 0 0 1px rgb(128 128 128/.28)}
.theme-apercu span{position:absolute;display:block;flex:none;border-radius:8px;background:none}
.theme-apercu span:nth-child(1){display:none}
.theme-apercu span:nth-child(2){left:9px;top:12px;width:56%;height:15px;background:var(--ta-el);box-shadow:0 2px 6px rgb(0 0 0/.25);border-radius:8px 8px 8px 2px}
.theme-apercu span:nth-child(3){right:9px;top:33px;width:46%;height:15px;background:var(--ta-ac);box-shadow:0 3px 8px rgb(0 0 0/.3);border-radius:8px 8px 2px 8px}
.theme-apercu::after{content:"";position:absolute;left:9px;right:9px;bottom:8px;height:11px;border-radius:99px;background:color-mix(in srgb,var(--ta-el) 80%,transparent);box-shadow:inset 0 0 0 1px rgb(128 128 128/.3)}
.theme-vignette[data-anime="1"] .theme-apercu::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgb(255 255 255/.22) 50%,transparent 65%);transform:translateX(-100%);animation:d26-balaye 3.2s ease-in-out infinite}
.theme-nom{font-size:13px;letter-spacing:-.005em}


/* ── 11 bis. PANNEAU DE DROITE, ONGLETS, RÉGLAGES ────────────────────── */
.side-panel{border-left:1px solid var(--d-line)}
.side-panel.agrandi,.side-panel:where(.agrandi){background:color-mix(in srgb,var(--bg) 94%,var(--atm1))}
.sp-tab,.cfg-tab,.sp-navtab{border-radius:12px;transition:background .2s,color .2s,transform .2s var(--d-ease),box-shadow .2s}
.sp-tab:hover,.cfg-tab:hover{background:color-mix(in srgb,var(--hover) 65%,transparent)}
.sp-tab.active,.cfg-tab.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,var(--elev)),color-mix(in srgb,var(--gold) 6%,var(--elev)))!important;
  border-color:color-mix(in srgb,var(--gold) 35%,transparent)!important;box-shadow:var(--d-sh1)}
.sp-navsurface,.sp-vide{border-radius:16px}
.sp-navsurface{border:1px solid var(--d-line);box-shadow:var(--d-sh2)}
#spToggle{border-radius:50%!important;box-shadow:var(--d-sh2)!important;background:var(--d-card)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pill{border-radius:999px}
.cfg-pane{padding:4px 2px}
.status,.dot{transition:background .3s}

@media(max-width:980px){#jauge,#idxBandeau{width:calc(100% - 46px);margin-left:0;margin-right:auto}}

/* ── 12. THÈMES — NOUVELLES AMBIANCES (existants : jetons ajoutés) ───── */
/* Palettes des thèmes « nature » : identiques à celles de index.html (valeur pour valeur).
   Redéclarées ici car avis-gardien / maintenance / surveillance-gardien n'embarquaient
   que 5 thèmes — un thème choisi dans le chat y retombait sur « nuit ». */
body[data-theme="ciel"]{--bg:#EAF4FC;--surf:#FFFFFF;--elev:#DCEEFB;--hover:#CCE6F9;--border:rgba(30,100,160,.14);--border2:rgba(30,100,160,.3);--gold:#2380C4;--gold-l:#57B2F0;--on-gold:#FFFFFF;--txt:#0C243A;--txt2:#2C4A64;--muted:#4F6E88;font-weight:500}
body[data-theme="foret"]{--bg:#0F1F17;--surf:#14261C;--elev:#1B3325;--hover:#234030;--border:rgba(150,200,140,.14);--border2:rgba(150,200,140,.3);--gold:#4CAF6D;--gold-l:#6FCB8C;--on-gold:#0b1220;--txt:#E7F3EA;--txt2:#9FC2AC;--muted:#6A8977}
body[data-theme="lune"]{--bg:#0D1420;--surf:#131C2C;--elev:#1B2740;--hover:#22304D;--border:rgba(180,200,230,.14);--border2:rgba(180,200,230,.3);--gold:#B8C7E0;--gold-l:#D6E0F0;--on-gold:#0D1420;--txt:#E9EEF7;--txt2:#9FB0CC;--muted:#69789A}
body[data-theme="soleil"]{--bg:#FFF6E5;--surf:#FFFFFF;--elev:#FFEBC2;--hover:#FFDFA0;--border:rgba(180,120,20,.16);--border2:rgba(180,120,20,.32);--gold:#F2A93C;--gold-l:#FFC868;--on-gold:#3A2400;--txt:#3A2B12;--txt2:#6B4E20;--muted:#8A6B3C}
body[data-theme="feu"]{--bg:#1A0D0A;--surf:#241109;--elev:#33170D;--hover:#432012;--border:rgba(255,140,80,.16);--border2:rgba(255,140,80,.32);--gold:#E8562A;--gold-l:#FF7A45;--on-gold:#1A0D0A;--txt:#FBE9DE;--txt2:#D19B7C;--muted:#8C6350}
body[data-theme="eau"]{--bg:#071A22;--surf:#0B2530;--elev:#113340;--hover:#174252;--border:rgba(120,210,220,.14);--border2:rgba(120,210,220,.3);--gold:#2FB6C4;--gold-l:#5CD3DF;--on-gold:#04141A;--txt:#E4F6F8;--txt2:#8FC4CC;--muted:#5C8790}
/* Existants : on garde chaque palette valeur pour valeur ; on ajoute
   atmosphère, ombres teintées et lumière. */
body[data-theme="ardoise"]{--atm1:#8993A8;--atm2:#4B5568;--atm3:#C9A227;--d-orb-a:16%;--d-tint:0 0 0;--d-grain:.06}
body[data-theme="clair"]{--atm1:#E9D9A2;--atm2:#C7D5F7;--atm3:#F3E1EF;--d-orb-a:46%;--d-tint:24 34 78;--d-hl:rgb(255 255 255/.9);--d-grain:.04;--d-glass:80%}
body[data-theme="ciel"]{--atm1:#7CC4F5;--atm2:#BFE3FA;--atm3:#FFFFFF;--d-orb-a:52%;--d-tint:20 80 140;--d-hl:rgb(255 255 255/.9);--d-grain:.035;--d-glass:78%}
body[data-theme="foret"]{--atm1:#2E8B57;--atm2:#1F6E52;--atm3:#8DB83A;--d-orb-a:30%;--d-tint:0 12 6}
body[data-theme="lune"]{--atm1:#5E72B0;--atm2:#3A4A7A;--atm3:#B8C7E0;--d-orb-a:26%;--d-tint:2 5 18}
body[data-theme="soleil"]{--atm1:#FFC25E;--atm2:#FFE3A0;--atm3:#FF9E5E;--d-orb-a:50%;--d-tint:140 80 10;--d-hl:rgb(255 255 255/.85);--d-grain:.04;--d-glass:80%}
body[data-theme="feu"]{--atm1:#E8562A;--atm2:#FF8A3D;--atm3:#8A220C;--d-orb-a:30%;--d-tint:18 4 0}
body[data-theme="eau"]{--atm1:#2FB6C4;--atm2:#1C6E8C;--atm3:#5CD3DF;--d-orb-a:30%;--d-tint:0 10 16}


/* Texte secondaire (--muted) relevé pour atteindre le contraste AA (4,5:1) sur les surfaces */
body:not([data-theme]){--muted:#8099B9}
body[data-theme="ardoise"]{--muted:#8C939F}
body[data-theme="foret"]{--muted:#7FA08D}
body[data-theme="lune"]{--muted:#7C8DB0}
body[data-theme="feu"]{--muted:#A67A67}
body[data-theme="eau"]{--muted:#72A0A9}
body[data-theme="clair"]{--muted:#627088}
/* Soleil : l'accent doré est trop clair pour du TEXTE sur fond blanc -> variante foncée pour les libellés */
body[data-theme="soleil"] :is(.msg.bot a.msg-lien,.topnav .nav.active,.hist-item.active,.cfg-tab.active,.sp-tab.active,.brand .b-name,.new-disc,.cq-reco,.cq-etat,.section-tete.ouvert,.profil-nom){color:#7A4A00}
body[data-theme="soleil"] .card h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#7A4A00}

/* Nouveaux thèmes colorés */
body[data-theme="aurore"]{--bg:#09131F;--surf:#0E1C2E;--elev:#15293F;--hover:#1C3550;
  --border:rgba(120,240,200,.15);--border2:rgba(120,240,200,.32);
  --gold:#5EEAC0;--gold-l:#8CF5D6;--on-gold:#04201A;
  --txt:#E8F7F3;--txt2:#9CC8C0;--muted:#6C9992;
  --atm1:#18E3B0;--atm2:#7C4DFF;--atm3:#00A8FF;--d-orb-a:40%;--d-tint:0 8 14}
body[data-theme="abysses"]{--bg:#030D1E;--surf:#07182F;--elev:#0C2545;--hover:#12335C;
  --border:rgba(90,170,255,.16);--border2:rgba(90,170,255,.34);
  --gold:#4DA8FF;--gold-l:#86C6FF;--on-gold:#021128;
  --txt:#E6F1FF;--txt2:#95B8E0;--muted:#6588B3;
  --atm1:#1E6BFF;--atm2:#00E5FF;--atm3:#6A2CFF;--d-orb-a:36%;--d-tint:0 4 16}
body[data-theme="crepuscule"]{--bg:#190F2E;--surf:#221540;--elev:#2D1C52;--hover:#3A2666;
  --border:rgba(255,170,150,.17);--border2:rgba(255,170,150,.34);
  --gold:#FF8F6B;--gold-l:#FFB08F;--on-gold:#2A0F1A;
  --txt:#FBEFF2;--txt2:#D0B6CB;--muted:#B096B5;
  --atm1:#FF5C8A;--atm2:#FF9A5C;--atm3:#7B4DD8;--d-orb-a:42%;--d-tint:12 2 26}
body[data-theme="sakura"]{--bg:#FFF2F6;--surf:#FFFFFF;--elev:#FDE3EC;--hover:#F9D0DF;
  --border:rgba(190,70,110,.16);--border2:rgba(190,70,110,.32);
  --gold:#C2255F;--gold-l:#DE4A7E;--on-gold:#FFFFFF;
  --txt:#3A1624;--txt2:#6B3A4E;--muted:#85566A;font-weight:500;
  --atm1:#FFB3C8;--atm2:#FFD6E2;--atm3:#C5E8C9;--d-orb-a:55%;--d-tint:130 30 70;--d-hl:rgb(255 255 255/.9);--d-grain:.035;--d-glass:82%}
body[data-theme="aurore"] #d26-fond .d26-o{width:80vmax;height:44vmax;border-radius:50%}
body[data-theme="crepuscule"] #d26-fond .d26-o3{opacity:1}


/* ── Thèmes portés de Nexus (code réel du VPS, 09/10/2026) ─────────────── */
body[data-theme="nuit-doree"]{--bg:#1A1712;--surf:#211C15;--elev:#2B251B;--hover:#352E22;
  --border:rgba(245,239,226,.14);--border2:rgba(245,239,226,.30);
  --gold:#D4A24C;--gold-l:#F0CD8A;--on-gold:#000000;
  --txt:#F5EFE2;--txt2:#B8AD96;--muted:#9A917D;
  --atm1:#D4A24C;--atm2:#9A6F22;--atm3:#F0CD8A;--d-orb-a:24%;--d-tint:8 5 0}
body[data-theme="lueur"]{--bg:#F7F8FB;--surf:#FFFFFF;--elev:#EFF2F8;--hover:#E6EBF4;
  --border:rgba(31,35,40,.12);--border2:rgba(31,35,40,.26);
  --gold:#1558B8;--gold-l:#2F6FD0;--on-gold:#FFFFFF;
  --txt:#1F2328;--txt2:#57606A;--muted:#656D76;
  --atm1:#9CC0F5;--atm2:#DCE8FB;--atm3:#F0F4FA;--d-orb-a:50%;--d-tint:20 40 90;--d-hl:rgb(255 255 255/.9);--d-grain:.03;--d-glass:82%}
body[data-theme="confort-lecture"]{--bg:#FBF3E3;--surf:#FFFAF0;--elev:#F5ECD8;--hover:#F0E6CC;
  --border:#E6D9BD;--border2:#CDBB8A;
  --gold:#8A6410;--gold-l:#A87A14;--on-gold:#FFFFFF;
  --txt:#2B2419;--txt2:#5F5339;--muted:#6F6247;
  --atm1:#F3E2B3;--atm2:#FBF3E3;--atm3:#F0E0C0;--d-orb-a:40%;--d-tint:90 60 10;--d-hl:rgb(255 255 255/.8);--d-grain:0;--d-glass:92%;
  font-family:"Comic Sans MS","Comic Sans","Segoe UI",Arial,sans-serif;font-weight:500;letter-spacing:.02em}
body[data-theme="confort-lecture"] .msg{line-height:1.95;letter-spacing:.025em;word-spacing:.08em}
body[data-theme="terracotta"]{--bg:#170E08;--surf:#26170E;--elev:#332013;--hover:#43291A;
  --border:rgba(255,215,175,.12);--border2:rgba(224,90,60,.44);
  --gold:#E8694A;--gold-l:#FF8A6B;--on-gold:#1A0A05;
  --txt:#FFF4E8;--txt2:#DCBDA1;--muted:#BD9C7E;
  --atm1:#E05A3C;--atm2:#B8512E;--atm3:#F0A070;--d-orb-a:30%;--d-tint:14 4 0}
/* Confort de lecture : aucun mouvement ni verre superflu (dyslexie) */
body[data-theme="confort-lecture"] #d26-fond{display:none}
body[data-theme="confort-lecture"] .msg.user{box-shadow:none}

/* Thèmes dont le texte de bouton est BLANC : le dégradé s'assombrit (contraste AA) */
body[data-theme="clair"],body[data-theme="ciel"],body[data-theme="sakura"],body[data-theme="lueur"],body[data-theme="confort-lecture"]{
  --gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 90%,#000);--btn-b:color-mix(in srgb,var(--gold) 74%,#000)}
/* Thèmes clairs : les verres sont plus laiteux, l'ombre est un voile doux */
body[data-theme="clair"] .msg.user,body[data-theme="ciel"] .msg.user,body[data-theme="soleil"] .msg.user,body[data-theme="sakura"] .msg.user{
  box-shadow:0 1px 0 rgb(255 255 255/.35) inset,0 10px 24px -10px color-mix(in srgb,var(--gold) 55%,transparent)}

/* ── 13. THÈMES À FORT CONTRASTE : tout est plat, net, accessible ─────── */
body[data-theme^="contraste"]{--d-glass:100%;--d-tint:0 0 0;--d-hl:transparent;--d-orb-a:0%;--d-grain:0;
  --d-line:var(--border);--d-card:var(--surf);--gold-2:var(--gold);--btn-a:var(--gold);--btn-b:var(--gold)}
body[data-theme^="contraste"]::before,body[data-theme^="contraste"]::after,body[data-theme^="contraste"] #d26-fond{display:none}
body[data-theme^="contraste"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important}
body[data-theme^="contraste"] .msg.user{background:var(--gold);border:2px solid var(--border)}
body[data-theme^="contraste"] .msg.think::after,body[data-theme^="contraste"] .msg.carte-q::before{display:none}
body[data-theme^="contraste"] .card h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold)}
body[data-theme^="contraste"] :where(button,a,[role=button],.nav,.hist-item,.cq-opt,input,textarea):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body[data-theme^="contraste"] .cq-opt:has(input:checked){border-width:3px}

/* ── 14. ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes d26-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes d26-pop{from{opacity:0;transform:translate3d(0,16px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes d26-carte{0%{opacity:0;transform:translate3d(0,22px,0) scale(.95)}100%{opacity:1;transform:none}}
@keyframes d26-menu{from{opacity:0;transform:translate3d(0,8px,0) scale(.94)}to{opacity:1;transform:none}}
@keyframes d26-respire{0%{transform:scale(.8);box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}70%{transform:scale(1.15);box-shadow:0 0 0 9px transparent}100%{transform:scale(.8);box-shadow:0 0 0 0 transparent}}
@keyframes d26-balaye{to{transform:translateX(100%)}}
@keyframes d26-ruban{to{background-position:200% 0}}
@keyframes d26-flotte{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
#chat>*{animation:d26-in .42s var(--d-ease) backwards;flex-shrink:0}
#chat>.msg.bot{animation-duration:.6s}
.view>*,.cfg-pane>*{animation:d26-in .35s var(--d-ease) backwards}
.view>*:nth-child(2){animation-delay:.04s}.view>*:nth-child(3){animation-delay:.08s}.view>*:nth-child(4){animation-delay:.12s}

/* Tiroir latéral mobile : transform (GPU) au lieu de left — fluide à 60 fps.
   Les position:fixed ne sont PAS limités au @media (piège connu). */
@media(max-width:720px){
  .side{left:0!important;transform:translate3d(-104%,0,0);transition:transform .38s var(--d-ease)!important;box-shadow:var(--d-sh3)}
  .side.open{transform:none}
  .msg{border-radius:18px;padding:12px 15px}
  .msg.bot{max-width:96%;padding:13px 16px}
  .msg.carte-q{padding:18px 15px 15px;border-radius:20px}
  .composer-pilule{border-radius:24px!important}
  .topnav .nav{padding:8px 12px}
  /* Moins de verre sur mobile milieu de gamme : un seul flou, sur le composer */
  .topbar,.msg.carte-q,.card{-webkit-backdrop-filter:none;backdrop-filter:none}
  .topbar{background:color-mix(in srgb,var(--surf) 90%,transparent)}
  .msg.carte-q{background:color-mix(in srgb,var(--surf) 96%,transparent)}
  .themes{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}

/* ── 15. MOUVEMENT RÉDUIT : tout est coupé proprement ────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #d26-fond canvas{display:none}
  .msg.think::before{box-shadow:none}
}

/* ════════════════════════════════════════════════════════════════════════
   14. THÈMES PHOTO (10/2026) — une photo = un thème (Paysages / Cosmos)
   Palette extraite de la photo ; la photo (version travaillée, servie par le
   Gardien depuis /themes/) est un décor plein écran chargé PARESSEUSEMENT
   par design-2026.js (seule la photo du thème actif est téléchargée).
   Voile dégradé + surfaces en verre dépoli : le texte ne touche jamais la
   photo nue. Mouvement : zoom/dérive très lents (transform seul).
   ════════════════════════════════════════════════════════════════════════ */
body[data-theme="recif"][data-mode="sombre"],body[data-theme="recif"]:not([data-mode]){--bg:#0B1012;--surf:#13181C;--elev:#1C2328;--hover:#262F36;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#3CC8F5;--gold-l:#8BE0FA;--on-gold:#031A2A;--txt:#F3F3F4;--txt2:#B3BAC1;--muted:#969DA6;--atm1:#3CC8F5;--atm2:#3CC8F5;--atm3:#3CC8F5;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="recif"][data-mode="clair"]{--bg:#F8FDFF;--surf:#FDFEFF;--elev:#E9F0F4;--hover:#DBE5EC;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#164A5B;--gold-l:#164A5B;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#164A5B;--atm2:#164A5B;--atm3:#164A5B;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="lagune"][data-mode="sombre"]{--bg:#0B1010;--surf:#131919;--elev:#1C2425;--hover:#263032;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#3DD9B4;--gold-l:#8AF0D6;--on-gold:#04201A;--txt:#F3F3F4;--txt2:#B3BBBE;--muted:#969EA3;--atm1:#3DD9B4;--atm2:#3DD9B4;--atm3:#3DD9B4;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="lagune"][data-mode="clair"],body[data-theme="lagune"]:not([data-mode]){--bg:#F8FEFC;--surf:#FDFFFE;--elev:#E9F1F1;--hover:#DBE6E7;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#175043;--gold-l:#175043;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#175043;--atm2:#175043;--atm3:#175043;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="cascade"][data-mode="sombre"]{--bg:#0E1012;--surf:#16191C;--elev:#202328;--hover:#2B2F36;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#8ACFF5;--gold-l:#BEE5FB;--on-gold:#05202E;--txt:#F3F3F4;--txt2:#B7BAC1;--muted:#9A9EA6;--atm1:#8ACFF5;--atm2:#8ACFF5;--atm3:#8ACFF5;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="cascade"][data-mode="clair"],body[data-theme="cascade"]:not([data-mode]){--bg:#FBFDFF;--surf:#FEFEFF;--elev:#EDF0F4;--hover:#E0E5EC;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#334D5B;--gold-l:#334D5B;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#334D5B;--atm2:#334D5B;--atm3:#334D5B;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="lancement"][data-mode="sombre"],body[data-theme="lancement"]:not([data-mode]){--bg:#0C0F13;--surf:#14171C;--elev:#1D2228;--hover:#282D37;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#58B2FF;--gold-l:#9AD0FF;--on-gold:#021024;--txt:#F3F3F4;--txt2:#B4B9C1;--muted:#989CA7;--atm1:#58B2FF;--atm2:#58B2FF;--atm3:#58B2FF;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="lancement"][data-mode="clair"]{--bg:#F9FCFF;--surf:#FDFEFF;--elev:#EAEFF5;--hover:#DDE3EC;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#234766;--gold-l:#234766;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#234766;--atm2:#234766;--atm3:#234766;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="planetes"][data-mode="sombre"],body[data-theme="planetes"]:not([data-mode]){--bg:#100F12;--surf:#18181C;--elev:#222228;--hover:#2F2E36;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#C4B5F5;--gold-l:#DDD2FF;--on-gold:#150F2E;--txt:#F3F3F4;--txt2:#BAB9C1;--muted:#9D9CA6;--atm1:#C4B5F5;--atm2:#C4B5F5;--atm3:#C4B5F5;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="planetes"][data-mode="clair"]{--bg:#FDFCFF;--surf:#FEFEFF;--elev:#F0EFF4;--hover:#E5E4EC;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#49435B;--gold-l:#49435B;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#49435B;--atm2:#49435B;--atm3:#49435B;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="nebuleuse"][data-mode="sombre"],body[data-theme="nebuleuse"]:not([data-mode]){--bg:#100E13;--surf:#19161C;--elev:#232028;--hover:#302B37;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#D58BFF;--gold-l:#E9BAFF;--on-gold:#200838;--txt:#F3F3F4;--txt2:#BAB7C1;--muted:#9E9AA7;--atm1:#D58BFF;--atm2:#D58BFF;--atm3:#D58BFF;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="nebuleuse"][data-mode="clair"]{--bg:#FEFBFF;--surf:#FEFEFF;--elev:#F1EDF5;--hover:#E6E1EC;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#5C3C6E;--gold-l:#5C3C6E;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#5C3C6E;--atm2:#5C3C6E;--atm3:#5C3C6E;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="onde"][data-mode="sombre"],body[data-theme="onde"]:not([data-mode]){--bg:#110E11;--surf:#1A161B;--elev:#252026;--hover:#312B34;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#F08AD0;--gold-l:#FFB4E6;--on-gold:#240A20;--txt:#F3F3F4;--txt2:#BCB7BF;--muted:#9F9AA4;--atm1:#F08AD0;--atm2:#F08AD0;--atm3:#F08AD0;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="onde"][data-mode="clair"]{--bg:#FEFBFD;--surf:#FFFEFE;--elev:#F2EDF2;--hover:#E8E0E9;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#603753;--gold-l:#603753;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#603753;--atm2:#603753;--atm3:#603753;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="allee-verte"][data-mode="sombre"]{--bg:#0E100C;--surf:#161915;--elev:#20241E;--hover:#2B302B;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#8DDB3A;--gold-l:#BDEE7C;--on-gold:#0E2204;--txt:#F3F3F4;--txt2:#B7BBB7;--muted:#9A9E9D;--atm1:#8DDB3A;--atm2:#8DDB3A;--atm3:#8DDB3A;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="allee-verte"][data-mode="clair"],body[data-theme="allee-verte"]:not([data-mode]){--bg:#FBFEF8;--surf:#FEFFFD;--elev:#EDF1EB;--hover:#E1E6DF;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#345115;--gold-l:#345115;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#345115;--atm2:#345115;--atm3:#345115;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="allee-or"][data-mode="sombre"]{--bg:#11100B;--surf:#1A1814;--elev:#24231E;--hover:#312F2B;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#E8C834;--gold-l:#F5E07A;--on-gold:#221C02;--txt:#F3F3F4;--txt2:#BBBAB7;--muted:#9F9D9C;--atm1:#E8C834;--atm2:#E8C834;--atm3:#E8C834;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="allee-or"][data-mode="clair"],body[data-theme="allee-or"]:not([data-mode]){--bg:#FEFDF8;--surf:#FFFEFD;--elev:#F2F0EA;--hover:#E7E5DE;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#564A13;--gold-l:#564A13;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#564A13;--atm2:#564A13;--atm3:#564A13;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="allee-feu"][data-mode="sombre"],body[data-theme="allee-feu"]:not([data-mode]){--bg:#120E0B;--surf:#1B1714;--elev:#25201E;--hover:#322C2A;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#FF9B2E;--gold-l:#FFC070;--on-gold:#2A1202;--txt:#F3F3F4;--txt2:#BCB8B7;--muted:#A09B9C;--atm1:#FF9B2E;--atm2:#FF9B2E;--atm3:#FF9B2E;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="allee-feu"][data-mode="clair"]{--bg:#FFFCF8;--surf:#FFFEFC;--elev:#F3EEEA;--hover:#E9E2DE;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#663E12;--gold-l:#663E12;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#663E12;--atm2:#663E12;--atm3:#663E12;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="lac-automne"][data-mode="sombre"],body[data-theme="lac-automne"]:not([data-mode]){--bg:#120D0D;--surf:#1B1616;--elev:#251F20;--hover:#322B2D;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#FF855A;--gold-l:#FFB090;--on-gold:#220C02;--txt:#F3F3F4;--txt2:#BCB6B9;--muted:#A09A9E;--atm1:#FF855A;--atm2:#FF855A;--atm3:#FF855A;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="lac-automne"][data-mode="clair"]{--bg:#FFFBF9;--surf:#FFFEFD;--elev:#F3EDEC;--hover:#E9E0E1;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#6E3927;--gold-l:#6E3927;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#6E3927;--atm2:#6E3927;--atm3:#6E3927;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="lac-cimes"][data-mode="sombre"]{--bg:#110F0D;--surf:#191816;--elev:#242220;--hover:#302E2D;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#E2C262;--gold-l:#F2DC96;--on-gold:#1A1405;--txt:#F3F3F4;--txt2:#BBB9B9;--muted:#9F9D9F;--atm1:#E2C262;--atm2:#E2C262;--atm3:#E2C262;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="lac-cimes"][data-mode="clair"],body[data-theme="lac-cimes"]:not([data-mode]){--bg:#FEFDFA;--surf:#FFFEFD;--elev:#F1F0ED;--hover:#E7E4E1;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#544824;--gold-l:#544824;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#544824;--atm2:#544824;--atm3:#544824;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="voie-lactee"][data-mode="sombre"],body[data-theme="voie-lactee"]:not([data-mode]){--bg:#120F0D;--surf:#1B1816;--elev:#252220;--hover:#322E2D;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#FFB45C;--gold-l:#FFD29A;--on-gold:#2A1202;--txt:#F3F3F4;--txt2:#BCB9B9;--muted:#A09C9E;--atm1:#FFB45C;--atm2:#FFB45C;--atm3:#FFB45C;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="voie-lactee"][data-mode="clair"]{--bg:#FFFCF9;--surf:#FFFEFD;--elev:#F3EFEC;--hover:#E9E3E1;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#5E4322;--gold-l:#5E4322;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#5E4322;--atm2:#5E4322;--atm3:#5E4322;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}
body[data-theme="sommets"][data-mode="sombre"],body[data-theme="sommets"]:not([data-mode]){--bg:#120E0D;--surf:#1B1716;--elev:#252120;--hover:#322C2D;--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.24);--gold:#FF9D5C;--gold-l:#FFC096;--on-gold:#2A1002;--txt:#F3F3F4;--txt2:#BCB8B9;--muted:#A09B9E;--atm1:#FF9D5C;--atm2:#FF9D5C;--atm3:#FF9D5C;--d-tint:0 0 0;--d-glass:93%;--d-orb-a:0%;--d-grain:.03;--d-hl:rgb(255 255 255/.05)}
body[data-theme="sommets"][data-mode="clair"]{--bg:#FFFCF9;--surf:#FFFEFD;--elev:#F3EEEC;--hover:#E9E2E1;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.28);--gold:#663F25;--gold-l:#663F25;--on-gold:#FFFFFF;--txt:#15151A;--txt2:#44444C;--muted:#5C5C64;--atm1:#663F25;--atm2:#663F25;--atm3:#663F25;--d-tint:20 20 32;--d-glass:94%;--d-orb-a:0%;--d-grain:.02;--d-hl:rgb(255 255 255/.9);--veil-a:10%;--gold-2:color-mix(in srgb,var(--gold) 82%,#000);--btn-a:color-mix(in srgb,var(--gold) 92%,#000);--btn-b:color-mix(in srgb,var(--gold) 76%,#000);color-scheme:light}

/* Couche photo (créée par design-2026.js). La photo n'est JAMAIS agrandie au-delà de ~1,4x sa taille d'origine :
   le JS (placerPhoto) la dimensionne ; si elle est plus petite que l'écran, elle est posée en haut sur le fond noir,
   avec des bords fondus (masque). Aucun flou, aucun grain, aucun zoom. */
#d26-photo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .9s ease}
html[data-d26-photo] #d26-photo{opacity:1}
#d26-photo .d26-ph{position:absolute;left:0;top:0;width:100%;height:100%;background-size:100% 100%;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.1s ease;will-change:opacity;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;animation:d26-drift var(--kb-dur,120s) ease-in-out infinite alternate}
#d26-photo .d26-ph.on{opacity:1}
/* léger voile de lisibilité (uniforme, très discret) : la photo reste nette */
#d26-photo::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) var(--veil-a,22%),transparent)}
@keyframes d26-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--kb-x,-6px),var(--kb-y,0px),0)}}
html[data-d26-pause] #d26-photo .d26-ph{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#d26-photo .d26-ph{animation:none}}
html[data-d26-photo] body::before,html[data-d26-photo] #d26-fond .d26-o{display:none}
html[data-d26-photo] #d26-fond canvas{opacity:.7}
/* Aperçu dans le sélecteur de thèmes */
.theme-vignette[data-photo] .theme-apercu{background:linear-gradient(180deg,rgb(0 0 0/0) 30%,rgb(0 0 0/.35)),var(--ta-img) center/cover no-repeat,var(--ta-bg)}
.theme-vignette[data-photo] .theme-apercu span:nth-child(2){background:color-mix(in srgb,var(--ta-bg) 78%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* PRINCIPE (comme Nexus lac-montagne) : surfaces quasi noires et neutres + UN accent tiré de la photo,
   réservé aux éléments actifs. Les bulles utilisateur ne sont plus des aplats d'accent. */
html[data-d26-photo] .msg.user{background:var(--elev)!important;color:var(--txt)!important;border:1px solid var(--d-line);
  border-left:3px solid var(--gold);box-shadow:var(--d-sh1)!important}
html[data-d26-photo] :is(.sp-tab,.cfg-tab):not(.active){background:color-mix(in srgb,var(--surf) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-d26-photo] .side,html[data-d26-photo] .topbar{background:var(--surf);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-d26-photo] .msg.bot{background:color-mix(in srgb,var(--surf) 93%,transparent)}
body[data-theme="recif"]{--kb-dur:100s;--kb-x:6px}
body[data-theme="lagune"]{--kb-dur:107s;--kb-x:-6px}
body[data-theme="cascade"]{--kb-dur:114s;--kb-x:6px}
body[data-theme="lancement"]{--kb-dur:121s;--kb-x:-6px}
body[data-theme="planetes"]{--kb-dur:128s;--kb-x:6px}
body[data-theme="nebuleuse"]{--kb-dur:135s;--kb-x:-6px}
body[data-theme="onde"]{--kb-dur:142s;--kb-x:6px}
body[data-theme="allee-verte"]{--kb-dur:149s;--kb-x:-6px}
body[data-theme="allee-or"]{--kb-dur:156s;--kb-x:6px}
body[data-theme="allee-feu"]{--kb-dur:163s;--kb-x:-6px}
body[data-theme="lac-automne"]{--kb-dur:170s;--kb-x:6px}
body[data-theme="lac-cimes"]{--kb-dur:177s;--kb-x:-6px}
body[data-theme="voie-lactee"]{--kb-dur:184s;--kb-x:6px}
body[data-theme="sommets"]{--kb-dur:191s;--kb-x:-6px}
/* Boutons ronds/ghost posés sur la photo : fond plein (aucun symbole sur la photo nue) */
html[data-d26-photo] :is(.collapse-rond,.ico-btn,.mini-btn,.ghost,.eye,.sp-nbtn,.hist-select-btn,.sp-navurl){background:var(--elev)}
/* Variante claire d'un thème photo : ombres douces, particules plus foncées gérées par le JS */
body[data-mode="clair"] .theme-vignette{}
html[data-d26-photo] body[data-mode="clair"] .msg.user{box-shadow:0 6px 18px -8px rgb(20 20 32/.25)!important}
html[data-d26-photo] body[data-mode="clair"] .msg.bot{background:color-mix(in srgb,var(--surf) 95%,transparent)}
/* sélecteur : interrupteur Sombre / Clair / Auto sur chaque thème photo */
.theme-carte{display:flex;flex-direction:column;gap:6px;min-width:0}
.theme-carte>.theme-vignette{flex:1}
.theme-mode{display:flex;gap:2px;padding:2px;border-radius:99px;border:1px solid var(--d-line);background:color-mix(in srgb,var(--elev) 70%,transparent)}
.theme-mode button{flex:1;border:0;background:transparent;color:var(--muted);font:600 10.5px/1 var(--d-font);padding:6px 4px;border-radius:99px;cursor:pointer;min-height:26px}
.theme-mode button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold)}
.theme-mode button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.theme-vignette[data-photo][data-mode="clair"] .theme-apercu{background:linear-gradient(180deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.45)),var(--ta-img) center/cover no-repeat,var(--ta-bg)}

/* ── Fonds générés par le code (design-2026-scenes.js) : aucune image, aucun droit à régler ── */
#d26-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s ease}
html[data-d26-scene] #d26-scene{opacity:1}
#d26-scene::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 14%,transparent)}
html[data-d26-scene] body::before,html[data-d26-scene] #d26-fond .d26-o{display:none}
html[data-d26-scene] #d26-fond canvas{opacity:.75}
html[data-d26-scene] .msg.user{background:var(--elev)!important;color:var(--txt)!important;border:1px solid var(--d-line);border-left:3px solid var(--gold);box-shadow:var(--d-sh1)!important}
html[data-d26-scene] .msg.bot{background:color-mix(in srgb,var(--surf) 93%,transparent)}
html[data-d26-scene] :is(.side,.topbar){background:var(--surf);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-d26-scene] :is(.sp-tab,.cfg-tab):not(.active){background:color-mix(in srgb,var(--surf) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-d26-scene] :is(.collapse-rond,.ico-btn,.mini-btn,.ghost,.eye,.sp-nbtn,.hist-select-btn,.sp-navurl){background:var(--elev)}
#d26-scene svg *{transform-box:fill-box}
.d26-tw{animation:d26-tw 6s ease-in-out infinite}
.d26-float{animation:d26-float 90s ease-in-out infinite alternate}
.d26-ribbon{animation:d26-ribbon 60s ease-in-out infinite alternate;transform-origin:center}
.d26-chute{animation:d26-chute 5s ease-in-out infinite alternate}
.d26-onde{animation:d26-onde 12s ease-out infinite;transform-origin:center}
.d26-refl{animation:d26-refl 14s ease-in-out infinite alternate}
@keyframes d26-tw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes d26-blob{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--bx,4%),var(--by,3%),0) scale(1.08)}}
@keyframes d26-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-8px,0)}}
@keyframes d26-ondule{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@keyframes d26-ribbon{from{transform:translate3d(-2%,-3%,0) scaleY(.9)}to{transform:translate3d(2%,3%,0) scaleY(1.12)}}
@keyframes d26-rais{from{opacity:.25;transform:skewX(-18deg) translateX(-2%)}to{opacity:.9;transform:skewX(-18deg) translateX(2%)}}
@keyframes d26-nage{from{transform:translateX(0)}to{transform:translateX(120vw)}}
@keyframes d26-pulse{from{opacity:.55}to{opacity:1}}
@keyframes d26-monte{from{transform:translateY(0)}to{transform:translateY(-120vh)}}
@keyframes d26-chute-v{from{background-position:0 0}to{background-position:0 160px}}
@keyframes d26-chute{from{fill-opacity:.25}to{fill-opacity:.8}}
@keyframes d26-onde{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes d26-refl{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
html[data-d26-pause] #d26-scene *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#d26-scene *{animation:none!important}}

.d26-fall{animation:d26-fall 3.4s linear infinite}
@keyframes d26-fall{from{stroke-dashoffset:0}to{stroke-dashoffset:-460}}

/* ── ONGLET TÂCHES (09/10/2026) — suivi vivant des tâches d'arrière-plan ───────────────────────────────
   Mêmes jetons que le reste (--surf --elev --border --txt --txt2 --muted --gold --green --red), icônes SVG en masque
   (currentColor : suivent le thème et le contraste), mouvement limité à transform/opacity, coupé sous prefers-reduced-motion. */
.tf-i{display:inline-block;width:14px;height:14px;vertical-align:-2px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}
.tf-i[data-i=horloge]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207v5l3%202%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=eclair]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202%204%2014h7l-1%208%209-12h-7Z%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=oeil]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207S2%2012%202%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=coche]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=retour]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2012a9%209%200%200%201%2015-6.7L21%208M21%203v5h-5M21%2012a9%209%200%200%201-15%206.7L3%2016M3%2021v-5h5%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=alerte]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%202%2020h20Z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4M12%2017.5v.01%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=question]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9.5%209a2.5%202.5%200%201%201%203.5%202.3c-.7.4-1%201-1%201.7M12%2017v.01%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=croix]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m9%209%206%206M15%209l-6%206%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=pause]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%205v14M15%205v14%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=stop]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E")}
.tf-i[data-i=taches]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%207%202%202%204-4M3%2017l2%202%204-4M13%206h8M13%2012h8M13%2018h8%27%2F%3E%3C%2Fsvg%3E")}
.sp-tab[data-sptab=taches] .ico{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%207%202%202%204-4M3%2017l2%202%204-4M13%206h8M13%2012h8M13%2018h8%27%2F%3E%3C%2Fsvg%3E")}
.tf-pastille,.tf-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1;color:var(--on-gold,#0b1220);background:var(--gold);margin-left:5px;vertical-align:1px}
.tf-pastille.tf-attend,.tf-badge.tf-attend{background:var(--red);color:#fff}
.tf-pastille.tf-tourne,.tf-badge.tf-tourne{position:relative}
.tf-pastille.tf-tourne::after,.tf-badge.tf-tourne::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid var(--gold);opacity:0;animation:tfPouls 1.8s ease-out infinite}
.tf-badge{position:absolute;top:8px;right:10px;z-index:26;margin:0;pointer-events:none;box-shadow:0 0 0 2px var(--bg)}
@keyframes tfPouls{0%{opacity:.65;transform:scale(.85)}100%{opacity:0;transform:scale(1.5)}}
#sp-taches{gap:10px;padding:2px 2px 14px}
.tf-entete{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:24px}
.tf-pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--txt2);background:color-mix(in srgb,var(--elev) 80%,transparent)}
.tf-pill.run{color:color-mix(in srgb,var(--gold) 55%,var(--txt))}
.tf-pill.dec{color:color-mix(in srgb,var(--red) 62%,var(--txt));border-color:color-mix(in srgb,var(--red) 40%,var(--border))}
.tf-cap{margin-left:auto;font-size:11px;color:var(--muted)}
.tf-decisions{border:1px solid color-mix(in srgb,var(--red) 38%,var(--border));border-radius:var(--d-r,14px);padding:10px;background:color-mix(in srgb,var(--red) 7%,var(--surf));display:flex;flex-direction:column;gap:6px}
.tf-dec-titre{margin:0 0 2px;font-size:12.5px;font-weight:700;color:var(--txt)}
.tf-dec{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--elev);color:var(--txt);cursor:pointer;font:inherit;transition:transform .18s var(--d-ease,ease),border-color .18s}
.tf-dec:hover{transform:translateY(-1px);border-color:var(--tf-c)}
.tf-dec-t{display:flex;flex-direction:column;min-width:0;flex:1;font-size:12px;gap:1px}
.tf-dec-t b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-dec-t span{color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-dec-go{font-size:11.5px;font-weight:700;color:var(--gold);flex:none}
.tf-liste{display:flex;flex-direction:column;gap:9px}
.tf-carte{position:relative;border:1px solid var(--border);border-radius:var(--d-r,14px);padding:10px 11px 9px 14px;background:var(--surf);box-shadow:var(--d-sh1,none);overflow:hidden}
.tf-carte.tf-neuf{animation:tfEntre .32s var(--d-ease,ease) both}
.tf-carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tf-c)}
@keyframes tfEntre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tf-tete{display:flex;align-items:flex-start;gap:7px}
.tf-pt{width:9px;height:9px;border-radius:50%;background:var(--tf-c);flex:none;margin-top:5px}
.tf-titre{margin:0;flex:1;min-width:0;font-size:13px;line-height:1.35;font-weight:650;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.tf-chip{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--txt2);background:color-mix(in srgb,var(--muted) 16%,transparent)}
.tf-s-run .tf-chip{color:color-mix(in srgb,var(--gold) 52%,var(--txt));background:color-mix(in srgb,var(--gold) 16%,transparent)}
.tf-s-ok .tf-chip{color:color-mix(in srgb,var(--green) 55%,var(--txt));background:color-mix(in srgb,var(--green) 16%,transparent)}
.tf-s-ko .tf-chip,.tf-s-dec .tf-chip{color:color-mix(in srgb,var(--red) 60%,var(--txt));background:color-mix(in srgb,var(--red) 14%,transparent)}
.tf-etape{display:flex;align-items:center;gap:7px;margin:5px 0 0 16px;font-size:11.8px;color:var(--txt2);min-height:16px}
.tf-etape-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tf-vivant{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;animation:tfVivant 1.4s ease-in-out infinite}
@keyframes tfVivant{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.tf-prog{display:flex;align-items:center;gap:8px;margin:7px 0 0 16px}
.tf-barre{flex:1;height:5px;border-radius:99px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden}
.tf-rempli{height:100%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:99px;transition:width .5s var(--d-ease,ease)}
.tf-prog-t{font-size:11px;color:var(--txt2);white-space:nowrap}
.tf-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0 16px;font-size:11px;color:var(--muted)}
.tf-verdict{margin:8px 0 0 16px;padding:7px 9px;border-radius:10px;font-size:11.8px;line-height:1.45;color:var(--txt);background:color-mix(in srgb,var(--muted) 12%,transparent);word-break:break-word}
.tf-v-validee{background:color-mix(in srgb,var(--green) 13%,transparent)}
.tf-v-renvoyee{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.tf-v-a_decider{background:color-mix(in srgb,var(--red) 11%,transparent)}
.tf-verdict ul{margin:4px 0 0;padding-left:16px}
.tf-lien{display:block;margin:8px 0 0 16px;max-width:calc(100% - 16px);text-align:left;font:inherit;font-size:12px;font-weight:700;color:var(--gold);background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-actions{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0 16px}
.tf-btn{font:inherit;font-size:11.8px;font-weight:650;padding:6px 11px;min-height:30px;border-radius:9px;border:1px solid var(--border);background:var(--elev);color:var(--txt);cursor:pointer;transition:transform .15s var(--d-ease,ease),background .15s}
.tf-btn:hover{background:var(--hover);transform:translateY(-1px)}
.tf-btn.tf-primaire{border-color:color-mix(in srgb,var(--gold) 55%,var(--border));color:color-mix(in srgb,var(--gold) 60%,var(--txt))}
.tf-btn.tf-danger{color:color-mix(in srgb,var(--red) 62%,var(--txt))}
.tf-btn:focus-visible,.tf-lien:focus-visible,.tf-dec:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tf-rapport{margin:8px 0 0 16px;padding:9px;border-radius:10px;background:color-mix(in srgb,var(--bg) 60%,var(--surf));border:1px solid var(--border);font:11.5px/1.5 var(--d-font,system-ui);color:var(--txt2);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}
#tfVide{padding:26px 14px}
.tf-vide-ico .tf-i{width:30px;height:30px;opacity:.5}
.eq-exec{margin-top:4px;font-size:11px;font-weight:650;color:color-mix(in srgb,var(--gold) 55%,var(--txt))}
@media(max-width:480px){.tf-chip{font-size:10px;padding:3px 6px}.tf-btn{flex:1 1 auto;min-height:34px}.tf-titre{font-size:12.8px}}
@media(prefers-reduced-motion:reduce){.tf-carte.tf-neuf,.tf-vivant,.tf-pastille::after,.tf-badge::after{animation:none!important}.tf-rempli,.tf-btn,.tf-dec{transition:none!important}.tf-btn:hover,.tf-dec:hover{transform:none}}
.sp-tab[data-sptab=taches]{white-space:nowrap;display:inline-flex;align-items:center}
.sp-tab[data-sptab=taches] .tf-pastille{margin-left:4px}