/* DA commune des outils (25/10/2026, Nicolas : « appliquer toutes les évolutions de DA de la maquette Car Avenue sur tous
   nos outils ») : suivi de projet, espace commercial, simulateur, rapports Star et site. Reprise des règles « od-projet » de
   maquette.html (qui garde les siennes) : deux plans de couleur, sans ombre portée, en-tête clair dessiné en natif, pastilles
   d'icônes à anneau net, chat et bouton d'Opera. Chargée après app-shell.css. */

/* ── Les deux plans (24/10/2026) : arrière-plan (en-tête, navigation, centre, filtres) teinte la plus sombre, légèrement
   transparente ; premier plan (cartes, blocs des volets, filtres ouverts) teinte plus claire, opaque ── */
body.app-shell{--sh-bg:rgba(236,235,233,.93);--sh-blk:#f7f6f4}
html.theme-dk body.app-shell{--sh-bg:rgba(8,9,11,.93);--sh-blk:#26272d}
body.app-shell main,html.theme-dk.dk-native body.app-shell main{background:var(--sh-bg)!important}
@media (min-width:901px){
  /* bloc central fixe : fond opaque (le liseré verre est peint sous le fond) */
  body.app-shell.shell-fixed main{background:linear-gradient(rgb(236,235,233),rgb(236,235,233)) padding-box,
    linear-gradient(135deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.45) 20%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.42) 80%,rgba(0,0,0,.9) 100%) border-box!important}
  html.theme-dk.dk-native body.app-shell.shell-fixed main{background:linear-gradient(rgb(8,9,11),rgb(8,9,11)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.45) 20%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.42) 80%,rgba(255,255,255,.9) 100%) border-box!important}
}
body.app-shell main .card{background:var(--sh-blk)!important}
body.app-shell main .card :is(.kpi,.kpi.win){background:transparent!important}
body.app-shell .flt-side :is(.pgrp .pbody,.fs-body){background:var(--sh-blk)!important}
html.theme-dk.dk-native body.app-shell .flt-side :is(.pgrp .pbody,.fs-body){filter:none}
/* les 4 blocs d'arrière-plan : même forme, sans ombre portée, dans les deux modes */
body.app-shell :is(header,.nav-side,.flt-side,main){box-shadow:none!important}

/* ── En-tête : 4ᵉ bloc d'arrière-plan, dessiné en natif en clair (le filtre d'inversion rendait icônes et titre flous) ── */
html:not(.theme-dk) body.app-shell header{filter:none!important;background:var(--sh-bg)!important;--g:0,0,0}
html.theme-dk body.app-shell header{background:var(--sh-bg)!important}
html:not(.theme-dk) body.app-shell header .hdr-logo :is(.lo,.da){color:#111!important}
html:not(.theme-dk) body.app-shell header .hdr-ic{filter:invert(1)}
html:not(.theme-dk) body.app-shell header .mob-burger span{background:#111!important}
html:not(.theme-dk) body.app-shell header .mob-burger{background:transparent!important}
/* pastilles : lune et soleil pleins, symboles un peu plus francs */
body.app-shell header .theme-toggle svg :is(path,circle){fill:currentColor}
body.app-shell header .theme-toggle .ico-sun path{stroke-width:2.6}
body.app-shell header .hdr-ic svg{stroke-width:2.4}
/* écrans de PC (densité < 2) : 1,5 px y est arrondi et lissé (gris, flou) ; 2 px pleins y sont nets */
@media (max-resolution:1.99dppx){
  body.app-shell header .hdr-ic{box-shadow:inset 0 0 0 2px #fff!important}
}

/* ── Opera (chat et bouton), comme dans la maquette ── */
body{--pj-ar:#ecebe9;--pj-av:#f7f6f4;--pj-tx:#111;--pj-tr:rgba(0,0,0,.55);--pj-tf:rgba(0,0,0,.12);
  --pj-g1:rgba(0,0,0,.95);--pj-g2:rgba(0,0,0,.35);--pj-g3:rgba(0,0,0,.12)}
html.theme-dk body{--pj-ar:#08090b;--pj-av:#26272d;--pj-tx:#fff;--pj-tr:rgba(255,255,255,.55);--pj-tf:rgba(255,255,255,.12);
  --pj-g1:rgba(255,255,255,.95);--pj-g2:rgba(255,255,255,.35);--pj-g3:rgba(255,255,255,.12)}
/* chat : fond = arrière-plan, bulles et saisie = premier plan, boutons en contour avec le symbole dedans, liseré verre */
#opera-panel{border:1.5px solid transparent!important;border-radius:22px!important;
  background:linear-gradient(var(--pj-ar),var(--pj-ar)) padding-box,linear-gradient(135deg,var(--pj-g1) 0%,var(--pj-g2) 20%,var(--pj-g3) 50%,var(--pj-g2) 80%,var(--pj-g1) 100%) border-box!important}
:is(.op-head,.op-body,.op-sugg,.op-foot){background:var(--pj-ar)!important;color:var(--pj-tx)}
.op-head{border-bottom:1px solid var(--pj-tf)}
.op-foot{border-top-color:var(--pj-tf)!important}
:is(.op-msg.bot,.op-msg.op-chart,.op-chip,.op-foot input){background:var(--pj-av)!important;color:var(--pj-tx)!important;border:1px solid var(--pj-tr)!important}
.op-chip:hover{border-color:var(--pj-tx)!important}
.op-chip{text-align:left}
.op-sugg{justify-content:flex-start}
.op-msg.me{background:var(--pj-tx)!important;color:var(--pj-ar)!important;border-color:var(--pj-tx)!important}
:is(.op-head .op-ic,.op-mic,.op-tel,.op-foot .op-send){background:transparent!important;color:var(--pj-tx)!important;border:1.5px solid var(--pj-tx)!important;box-shadow:none!important}
.op-head .op-ic{width:28px;height:28px}
.op-tel svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
html.theme-dk .op-head .op-spk img{filter:invert(1)}
.op-head .op-ic svg{width:15px;height:15px}
:is(.op-mic,.op-tel,.op-foot .op-send) svg{width:19px;height:19px}
.op-mic svg{stroke-width:40}
:is(.op-foot .op-send,.op-head .op-ic) svg{stroke-width:2.4}
@media (max-resolution:1.99dppx){
  :is(.op-head .op-ic,.op-mic,.op-tel,.op-foot .op-send){border-width:2px!important}
  .op-foot input{border-width:1px!important}
}
@media (max-width:640px){
  #opera-panel:not(.focus){left:12px!important;right:12px!important;width:auto!important;max-width:none!important}
  .op-foot input{min-width:0}
}
/* bouton : sphère plus franche (traits opaques, sans halo ni flou), sans les trois arcs extérieurs, agrandie de 25 % ;
   en sombre, sur fond blanc (sphère en noir) pour la mettre en valeur */
#opera-fab .opc-svg{transform:scale(1.25)}
#opera-fab .opc-svg>g.s4>path{display:none}
html:not(.theme-dk) #opera-fab .opc-svg,html:not(.theme-dk) #opera-fab .opc-svg .core{filter:none}
#opera-fab .opc-svg .mesh{opacity:1}
#opera-fab .opc-svg .tick{opacity:.95}
#opera-fab .opc-svg :is(path,circle,line){stroke-opacity:1}
html:not(.theme-dk) #opera-fab::before{display:none}
html.theme-dk #opera-fab{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35)}
html.theme-dk #opera-fab .opc-svg{filter:invert(1)}
html.theme-dk #opera-fab .opc-svg .core{filter:none}
/* Site (index.html, classe theme-split) : écrit en sombre, inversé d'un bloc en mode clair (theme-inv) ; il prend donc
   toujours la version sombre, que le filtre retourne en version claire */
html.theme-split body{--pj-ar:#08090b;--pj-av:#26272d;--pj-tx:#fff;--pj-tr:rgba(255,255,255,.55);--pj-tf:rgba(255,255,255,.12);
  --pj-g1:rgba(255,255,255,.95);--pj-g2:rgba(255,255,255,.35);--pj-g3:rgba(255,255,255,.12)}
html.theme-split .op-head .op-spk img{filter:invert(1)}
html.theme-split #opera-fab{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35)}
html.theme-split #opera-fab .opc-svg{filter:invert(1)}
html.theme-split #opera-fab .opc-svg .core{filter:none}
/* info-bulle « Une question ? » du site (26/10/2026) : premier plan, contour net, comme les bulles du chat */
#opera-tip{font-weight:400!important}   /* 28/10/2026 : texte d'Opera sans gras, même DA partout */
/* Site en mode clair (28/10/2026) : la fenêtre et la bulle d'Opera ne sont plus inversées par filtre (le texte inversé
   paraissait en gras) ; elles prennent directement les couleurs claires, comme dans les outils */
html.theme-split.theme-inv :is(#opera-panel,#opera-tip){filter:none!important;--pj-ar:#ecebe9;--pj-av:#f7f6f4;--pj-tx:#111;
  --pj-tr:rgba(0,0,0,.55);--pj-tf:rgba(0,0,0,.12);--pj-g1:rgba(0,0,0,.95);--pj-g2:rgba(0,0,0,.35);--pj-g3:rgba(0,0,0,.12)}
html.theme-split.theme-inv #opera-panel .op-spk img{filter:none!important}
html:is(.theme-split,.theme-dk) #opera-tip{background:var(--pj-av);color:var(--pj-tx);border:1px solid var(--pj-tr);box-shadow:none}
html:is(.theme-split,.theme-dk) #opera-tip::after{background:var(--pj-av);border-color:var(--pj-tr)}

/* ══ DA de la démo pour l'espace commercial et le simulateur (26/10/2026, Nicolas : « plusieurs outils, une seule DA »).
   Pages marquées body.od-da : titres de blocs, cartes, indicateurs, tableaux, bouton focus et listes à cocher de la démo
   (maquette.html, html.od-projet). Couleurs en variables (--pj-*) : dark-native.js ne les reconvertit pas. ══ */
body.od-da{--pj-tw:1.5px}
@media (max-resolution:1.99dppx){ body.od-da{--pj-tw:2px} }
/* blocs : premier plan, filet net, angles de la démo */
body.od-da main .card{border:1px solid var(--pj-tx)!important;border-radius:8px!important}
body.od-da main .card-title{font-family:'Poppins',sans-serif!important;font-size:12.5px!important;font-weight:600!important;color:var(--pj-tx)!important;line-height:1.35}
body.od-da main .card-title :is(b,.ttl-hl){font-size:inherit!important;font-weight:inherit!important;color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor!important}
body.od-da main .card-sub{font-size:11px!important;color:var(--pj-tr)!important;margin-top:3px}
body.od-da main .card-hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
body.od-da main .card-hdr .card-title{margin-right:auto}
/* indicateurs : cadre fin, sans fond propre (comme les cartes d'indicateurs de la démo) */
body.od-da main .kpi{background:transparent!important;border:1px solid var(--pj-tr)!important;border-radius:8px!important;box-shadow:none!important}
/* bouton focus (agrandir) : celui de la démo */
body.od-da .card-focus-btn{width:26px;height:26px;flex:0 0 26px;border-radius:6px;border:var(--pj-tw) solid var(--pj-tx)!important;background:transparent!important;
  color:var(--pj-tx)!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
body.od-da .card-focus-btn svg{width:14px;height:14px;stroke-width:2.4}
body.od-da .card-focus-btn:hover{opacity:.7}
/* tableaux : contour et ligne d'en-tête à l'épaisseur des icônes, en-têtes de la couleur des lignes */
body.od-da main .card.tbl{padding:18px!important;overflow:visible!important}
body.od-da main .tbl-scroll-wrap{overflow:auto;border:var(--pj-tw) solid var(--pj-tx);border-radius:8px}
body.od-da main table.cmp{border:0!important;border-collapse:separate;border-spacing:0}
body.od-da main table.cmp th{background:var(--sh-blk)!important;color:var(--pj-tx)!important;font-family:'Inter',sans-serif!important;font-size:9.5px!important;
  font-weight:600!important;letter-spacing:0!important;padding:7px 8px!important;border:0!important;box-shadow:inset 0 calc(-1*var(--pj-tw)) 0 var(--pj-tx)}
body.od-da main table.cmp td{background:var(--sh-blk);font-size:11px;padding:6px 8px;border-bottom:1px solid var(--pj-tf)!important}
body.od-da main table.cmp tr.tot td{background:var(--sh-blk)!important;color:var(--pj-tx)!important;border-top:0!important;border-bottom:0!important;
  box-shadow:inset 0 var(--pj-tw) 0 var(--pj-tx);font-weight:600}
body.od-da main table.cmp tbody tr:not(.tot):hover td{background:linear-gradient(var(--pj-tf),var(--pj-tf)),var(--sh-blk)}
/* listes à cocher (filtres) : le menu déroulant de la démo */
body.od-da .flt-row{margin-bottom:6px}
body.od-da .flt-lbl{display:block;font-size:10.5px;font-weight:400;color:var(--pj-tr);margin-bottom:3px}
body.od-da .ms{position:relative;width:100%}
body.od-da .ms-btn{width:100%;text-align:left;background:var(--sh-blk);border:1px solid var(--pj-tr);color:var(--pj-tx);padding:6px 24px 6px 8px;border-radius:4px;
  font-family:'Inter',sans-serif;font-size:10.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
body.od-da .ms-btn::after{content:'';position:absolute;right:9px;top:50%;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.7}
body.od-da .ms-btn:hover{border-color:var(--pj-tx)}
body.od-da .ms-btn.on{background:var(--pj-tx);border-color:var(--pj-tx);color:var(--pj-ar)}
body.od-da .ms-btn:disabled{opacity:.6;cursor:not-allowed}
body.od-da .ms-panel{display:none;margin-top:3px;background:var(--sh-blk);border:1px solid var(--pj-tr);border-radius:4px;max-height:190px;overflow-y:auto;padding:3px}
body.od-da .ms-panel.open{display:block}
body.od-da .ms-actions{display:flex;justify-content:space-between;gap:8px;padding:1px 7px 6px;margin-bottom:3px;border-bottom:1px solid var(--pj-tf)}
body.od-da .ms-action-btn{background:none;border:none;padding:0;font-family:'Inter',sans-serif;font-size:9.5px;color:var(--pj-tr);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
body.od-da .ms-action-btn:hover{color:var(--pj-tx)}
body.od-da .ms-opt{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:3px;cursor:pointer;font-size:10.5px;color:var(--pj-tx);user-select:none}
body.od-da .ms-opt:hover{background:var(--pj-tf)}
body.od-da .ms-opt input{width:13px;height:13px;accent-color:#111;cursor:pointer;flex-shrink:0;margin:0}
html.theme-dk body.od-da .ms-opt input{accent-color:#fff}
/* icônes de la démo (images) dans les pastilles rondes de l'en-tête */
body.app-shell header .hdr-ic.ic-img{background:transparent!important;box-shadow:none!important;overflow:hidden}
body.app-shell header .hdr-ic .hdr-ico-img{width:100%;height:100%;display:block;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff}
@media (max-resolution:1.99dppx){ body.app-shell header .hdr-ic .hdr-ico-img{box-shadow:inset 0 0 0 2px #fff} }
/* bouton Opera de l'en-tête (afficher / masquer le widget), comme la démo */
body.app-shell header .hdr-ic.op-toggle svg{width:19px;height:19px}
.op-toggle .op-barre{display:none}
.op-toggle[aria-pressed="false"] .op-barre{display:inline}
html.op-cache :is(#opera-fab,#opera-tip,#opera-panel){display:none!important}
/* mode focus d'un bloc (bouton de la démo) : le bloc occupe tout l'écran, comme dans la démo */
body.od-da.has-focus main{z-index:440!important}
body.od-da main .card.focused{position:fixed!important;inset:0;z-index:450;width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0!important;
  border-radius:0!important;border:none!important;padding:22px 30px 26px!important;overflow:auto;display:flex!important;flex-direction:column;box-shadow:none!important}
body.od-da main .card.focused .chartbox{flex:1 1 auto;height:auto!important;min-height:0}
body.od-da main .card.focused .card-hdr{margin-bottom:18px}

/* ── 27/10/2026 (retours de Nicolas) ── */
/* sphère du nuage (simulateur, ROI) à la DA d'Opera : encre noire ; en sombre, pastille blanche (comme le bouton d'Opera) */
/* 28/10/2026 : sphère du nuage à la DA d'Opera, sans pastille ; bleu verre renforcé en mode clair */
body.od-da #card-orb{--orb-ink:#111;--orb-disc:transparent;--orb-web:#0B6AA3}
html.theme-dk body.od-da #card-orb{--orb-ink:#fff;--orb-disc:transparent;--orb-web:#8FE8FF}
/* curseurs des paramètres : sans bleu, à la couleur du texte */
html:root body.app-shell.od-da .flt-side .prange::-webkit-slider-thumb{background:var(--pj-tx)!important;border:2px solid var(--pj-ar)!important;box-shadow:0 0 0 1px var(--pj-tx)}
html:root body.app-shell.od-da .flt-side .prange::-moz-range-thumb{background:var(--pj-tx)!important;border:2px solid var(--pj-ar)!important;box-shadow:0 0 0 1px var(--pj-tx)}
/* parcours : le champ à remplir en blanc, entouré de bleu ; la zone éclairée entourée de bleu (visible sur téléphone) */
body.od-da .tour-champ{background:#fff!important;color:#111!important;border:2px solid #35D7FF!important;box-shadow:0 0 0 3px rgba(53,215,255,.35)!important;-webkit-text-fill-color:#111}
:is(.tour-hi,#tour-spot){outline:2px solid #35D7FF!important;outline-offset:0}
/* bouton Opera de l'en-tête : globe aussi grand que dans la démo */
body.app-shell header .hdr-ic.op-toggle svg{width:23px!important;height:23px!important}
/* téléphone (comme la démo) : sans le titre, icônes centrées entre les deux menus, à la taille de la démo */
@media(max-width:480px){
  body.app-shell header .hdr-logo{display:none!important}
  body.app-shell header .hdr-after-logo{flex:1 1 auto!important;justify-content:center!important;min-width:0;padding:0!important}
  body.app-shell header .hdr-tools{margin:0 auto!important;gap:7px!important;justify-content:center}
  body.app-shell header :is(.hdr-ic,#deck-full .bulle){width:27px!important;height:27px!important}
  body.app-shell header .hdr-ic svg{width:15px!important;height:15px!important}
  body.app-shell header .hdr-ic.op-toggle svg{width:20px!important;height:20px!important}
  body.app-shell header .hdr-ic.theme-toggle svg{width:14px!important;height:14px!important}
}
@media(max-width:480px){ body.app-shell header :is(.mob-burger,.mob-burger-right){background:transparent!important} }
/* mode focus plein écran sur tous les outils (27/10/2026) : fenêtre du simulateur et blocs du suivi de projet */
body.app-shell .focus-ov{padding:0!important;z-index:450!important}
body.app-shell .focus-ov .focus-panel{width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;border:0!important;background:var(--sh-blk)!important}
body.app-shell .focus-ov .focus-head{border-bottom:0!important;padding:22px 30px 8px!important}
body.app-shell .focus-ov .focus-ttl{font-family:'Poppins',sans-serif!important;font-size:12.5px!important;font-weight:600!important;color:var(--pj-tx)!important}
body.app-shell .focus-ov .focus-ttl :is(b,.ttl-hl){font-size:inherit!important;color:inherit!important}
body.app-shell .focus-ov .focus-body{padding:8px 30px 26px!important}
body.app-shell main .card.bloc-focus{inset:0!important;border-radius:0!important;border:0!important;padding:22px 30px 26px!important}
body.app-shell main .card.bloc-focus :is(.chartbox,.scroll-box){flex:1 1 auto;height:auto!important;max-height:none!important;min-height:0}
body.app-shell .focus-btn.card-focus-btn{position:absolute;top:14px;right:14px;opacity:1;z-index:3;width:26px;height:26px;border-radius:6px;
  border:var(--pj-tw,1.5px) solid var(--pj-tx)!important;background:transparent!important;color:var(--pj-tx)!important;display:flex;align-items:center;justify-content:center;padding:0}
body.app-shell .focus-btn.card-focus-btn svg{width:14px;height:14px;stroke-width:2.4}
body.app-shell main:has(.focus-ov:not([hidden])){z-index:440!important;transform:none!important}
/* téléphone (28/10/2026) : bouton d'Opera plus bas, au ras du bord */
@media(max-width:900px){ body.app-shell #opera-fab{bottom:max(10px,env(safe-area-inset-bottom))!important;right:12px!important} }