/* ===========================================================================
   Rockwell Design × Assist-iA — CRM de démonstration
   Logiciel Assist-iA. Charte Assist-iA par défaut ; couleurs du client en option.
   =========================================================================== */
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* ── Charte Assist-iA (nos logiciels métier) ───────────────────────────────
     Sources : dashboard VoIP (--color-primary #e91e8c, fond slate-50, barre
     latérale claire), console Léa, gabarits PDF Assist-iA. Dégradé signature
     rose → bleu. Les noms de jetons sont ceux d'avant : les écrans ne changent pas. */
  --bleu:#2563eb; --bleu-fonce:#1a2f80; --rose:#e91e8c; --rose-fonce:#c4147a; --mauve:#7c3aed;
  --noir:#0f172a; --blanc:#ffffff;
  /* rôles : « vert » = action secondaire (bleu), « bronze » = accent principal (rose) */
  --vert:#2563eb; --vert-clair:#3b82f6; --vert-pastel:#1d4ed8;
  --bronze:#c4147a; --bronze-vif:#e91e8c; --travertin:#7c3aed;
  --fond-0:#ffffff; --fond:#e7ecf6; --fond-2:#ffffff; --fond-3:#eff3fa; --fond-4:#dde5f1;
  --ligne:rgba(15,23,42,.11); --ligne-2:rgba(15,23,42,.17); --ligne-forte:rgba(15,23,42,.3);
  --relief:inset 0 1px 0 #fff;
  /* surfaces en dégradé : c'est ce qui donne le relief sur un thème clair */
  --carte-fond:linear-gradient(180deg,#fff,#f7f9fd);
  --vedette-fond:linear-gradient(162deg,#fff 0%,#f2f6fd 55%,#eaf0fb 100%);
  --tete-fond:linear-gradient(180deg,#eef2fa,#e4eaf5);
  --rail-fond:linear-gradient(180deg,#fff,#f8fafe);
  --plein-fond:linear-gradient(180deg,#d31783,#b81070);
  --trame:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px) 0 0/100% 32px,
          linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px) 0 0/32px 100%;
  --entete-fond:linear-gradient(180deg,rgba(255,255,255,.92),rgba(231,236,246,.78));
  --vert-fond:linear-gradient(180deg,#2f6ef0,#1e55cd);
  --ombre:0 1px 1px rgba(15,23,42,.04), 0 2px 4px rgba(15,23,42,.05), 0 12px 24px -14px rgba(15,23,42,.22);
  --ombre-haute:0 1px 2px rgba(15,23,42,.06), 0 4px 10px rgba(15,23,42,.07), 0 26px 50px -24px rgba(15,23,42,.34);
  --ombre-flottante:0 18px 44px -16px rgba(15,23,42,.28);
  --lueur:0 0 0 1px rgba(233,30,140,.34), 0 12px 30px -18px rgba(233,30,140,.34);
  --texte:#0f172a; --texte-2:#475569; --texte-3:#64748b;
  --chaud:#15803d; --tiede:#b45309; --froid:#1d4ed8; --alerte:#be123c;
  --marque:linear-gradient(90deg,#e91e8c,#2563eb);
  --piste:rgba(15,23,42,.07); --zebre:rgba(15,23,42,.022); --voile:rgba(15,23,42,.45);
  --actif-fond:linear-gradient(90deg,rgba(233,30,140,.13),rgba(37,99,235,.06));
  --actif-texte:#0f172a; --plein-texte:#ffffff;
  /* #e91e8c ne donne que 4,18 sous du blanc : les aplats et les petits textes
     prennent le rose foncé de la charte (5,63, AA) ; #e91e8c reste l'accent décoratif. */
  --accent-lisible:#c4147a; --plein-survol:#a8106b;
  --halo:radial-gradient(70% 55% at 22% 0%,rgba(37,99,235,.13),transparent 72%),
         radial-gradient(48% 46% at 88% 4%,rgba(233,30,140,.11),transparent 70%),
         radial-gradient(60% 40% at 55% 0%,rgba(124,58,237,.06),transparent 75%);
  --logo-marque:url('../img/logo-horizontal-noir.svg');   /* le logo du client : c'est son logiciel */
  --r:6px; --r-min:4px; --sortie:cubic-bezier(.22,.61,.36,1);
  --barre:268px; --entete:78px;
}

/* ── Option « couleurs de la marque du client » ────────────────────────────
   Le changement de couleur est une OPTION : par défaut le logiciel est aux
   couleurs Assist-iA. Ici, la charte Rockwell Design, activée dans Réglages. */
:root[data-theme="client"]{
  --vert:#1f453f; --vert-clair:#39736a; --vert-pastel:#c6f0dc;
  --bronze:#6e5b3a; --bronze-vif:#c9a86a; --travertin:#b89b74;
  --noir:#111317; --blanc:#fefcf8;
  --fond-0:#050807; --fond:#0a100e; --fond-2:#141d1b; --fond-3:#1d2825; --fond-4:#283531;
  --ligne:rgba(254,252,248,.11); --ligne-2:rgba(254,252,248,.19); --ligne-forte:rgba(254,252,248,.32);
  --relief:inset 0 1px 0 rgba(254,252,248,.05);
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,1);
  --ombre-haute:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -22px rgba(0,0,0,1);
  --ombre-flottante:0 18px 40px -14px rgba(0,0,0,.8);
  --lueur:0 0 0 1px rgba(201,168,106,.3), 0 14px 34px -18px rgba(201,168,106,.42);
  --texte:#fefcf8; --texte-2:#c2cac6; --texte-3:#8d9793;
  --chaud:#7ed9a8; --tiede:#e8c37a; --froid:#8fa8c4; --alerte:#e9927a;
  --marque:linear-gradient(90deg,#255449,#4d998c);
  --piste:rgba(0,0,0,.34); --zebre:rgba(254,252,248,.022); --voile:rgba(4,7,6,.72);
  --actif-fond:linear-gradient(90deg,rgba(31,69,63,.95),rgba(31,69,63,.55));
  --actif-texte:#fefcf8; --plein-texte:#111317;
  --accent-lisible:#c9a86a; --plein-survol:#d8ba7e;
  --carte-fond:var(--fond-2); --vedette-fond:linear-gradient(160deg,var(--fond-3),var(--fond-2) 62%);
  --tete-fond:var(--fond-3); --rail-fond:var(--fond-0);
  --plein-fond:var(--accent-lisible); --vert-fond:var(--vert);
  --trame:linear-gradient(rgba(254,252,248,.022) 1px,transparent 1px) 0 0/100% 32px,
          linear-gradient(90deg,rgba(254,252,248,.022) 1px,transparent 1px) 0 0/32px 100%;
  --entete-fond:color-mix(in srgb,var(--fond) 82%,transparent);
  --halo:radial-gradient(60% 60% at 30% 0%,rgba(31,69,63,.28),transparent 70%),
         radial-gradient(40% 50% at 85% 10%,rgba(201,168,106,.07),transparent 70%);
  --logo-marque:url('../img/logo-horizontal-blanc.svg');
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--fond);background-attachment:fixed;color:var(--texte);
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--bronze-vif);color:var(--plein-texte)}
:focus-visible{outline:2px solid var(--bronze-vif);outline-offset:2px}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- coquille */
.app{display:grid;grid-template-columns:var(--barre) 1fr;min-height:100vh}
/* sans ceci la colonne grandit à la largeur mini du contenu au lieu de le contraindre */
.app > main{min-width:0}

.barre{
  background:var(--rail-fond);border-right:1px solid var(--ligne-2);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;
}
.barre__marque{height:var(--entete);padding:0 1.35rem;border-bottom:1px solid var(--ligne-2);display:flex;align-items:center;gap:.7rem;flex:none}
.barre__marque{gap:0}
.barre__logo{height:26px;width:132px;background:var(--logo-marque) left center/contain no-repeat}
/* notre marque, discrète, en pied de barre */
.barre__pied{display:grid;gap:.5rem}
.barre__editeur{display:flex;align-items:center;gap:.45rem;font-size:11px;color:var(--texte-3)}
.barre__editeur img{height:15px;width:auto;opacity:.85;flex:none}
:root[data-theme="client"] .barre__editeur img{filter:brightness(0) invert(1);opacity:.7}
.barre__marque img{height:28px;width:auto;opacity:.96}
.barre__nav{flex:1;overflow-y:auto;padding:1rem .75rem 1.5rem;display:grid;gap:2px;align-content:start;scrollbar-width:thin}
.barre__groupe{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3);padding:1.25rem .65rem .45rem;font-weight:500}
.barre__nav > .barre__groupe:first-child{padding-top:.2rem}
.nav-item{
  display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:var(--r-min);position:relative;
  color:var(--texte-2);font-size:13.5px;transition:background .18s var(--sortie),color .18s var(--sortie);
}
.nav-item svg{width:17px;height:17px;flex:none;stroke-width:1.5}
.nav-item:hover{background:var(--fond-3);color:var(--texte)}
.nav-item.actif{background:var(--actif-fond);color:var(--actif-texte);font-weight:500}
.nav-item.actif::before{content:"";position:absolute;left:-.75rem;top:50%;transform:translateY(-50%);width:2px;height:18px;border-radius:0 2px 2px 0;background:var(--bronze-vif)}
.nav-item.actif svg{color:var(--accent-lisible)}
.nav-item .pastille{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;background:var(--fond-4);color:var(--texte-2);padding:.1rem .4rem;border-radius:999px}
.nav-item.actif .pastille{background:color-mix(in srgb,var(--bronze-vif) 18%,transparent);color:var(--accent-lisible)}
.barre__pied{padding:1rem 1.35rem;border-top:1px solid var(--ligne-2);font-size:11.5px;color:var(--texte-3);line-height:1.5}
.barre__pied b{display:block;color:var(--texte-2);font-weight:500}

/* ---------------------------------------------------------------- en-tête */
.entete{
  min-height:var(--entete);border-bottom:1px solid var(--ligne-2);display:flex;align-items:center;
  gap:1.5rem;padding:1rem 2rem;position:sticky;top:0;z-index:20;
  background:var(--entete-fond);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 1px 0 var(--ligne),0 6px 16px -14px rgba(15,23,42,.5);
}
.entete h1{font-size:25px;font-weight:300;letter-spacing:-.025em;line-height:1.1}
.entete__fil{font-size:12.5px;color:var(--texte-3);margin-top:.3rem;letter-spacing:.005em}
.entete__actions{margin-left:auto;display:flex;gap:.55rem;align-items:center;flex:none}
.contenu{padding:1.75rem 2rem 3rem;max-width:1560px;display:grid;gap:1.25rem;align-content:start}
.contenu > *{min-width:0}

/* ---------------------------------------------------------------- bandeau démo */
.demo-barre{
  position:relative;background:var(--rail-fond);border-bottom:1px solid var(--ligne-2);color:var(--texte-2);
  display:flex;align-items:center;gap:.9rem;padding:.5rem 2rem;font-size:12.5px;
}
.demo-barre::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--marque)}
.demo-barre b{font-weight:500;color:var(--texte);display:flex;align-items:center;gap:.45rem}
.demo-barre b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bronze-vif);box-shadow:0 0 0 3px color-mix(in srgb,var(--bronze-vif) 20%,transparent)}
.demo-barre b,.demo-barre__sous,.demo-barre__guide{flex:none}
.demo-barre__sous{color:var(--texte-3)}
.demo-barre .etapes{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.demo-barre .etapes::-webkit-scrollbar{display:none}
.demo-barre .etapes button{
  flex:none;white-space:nowrap;
  font-size:11.5px;padding:.3rem .7rem;border:1px solid var(--ligne-2);border-radius:999px;color:var(--texte-3);
  transition:background .2s var(--sortie),border-color .2s var(--sortie),color .2s var(--sortie);
}
.demo-barre .etapes button:hover{background:var(--fond-3);color:var(--texte-2)}
.demo-barre .etapes button.actif{background:var(--vert);color:var(--blanc);border-color:var(--vert-clair);font-weight:500}
@media (max-width:1600px){.demo-barre__sous{display:none}}

/* ---------------------------------------------------------------- éléments */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.55rem 1.05rem;border-radius:var(--r-min);border:1px solid transparent;
  font-size:13.5px;font-weight:500;white-space:nowrap;line-height:1.2;
  transition:background .2s var(--sortie),border-color .2s var(--sortie),color .2s var(--sortie);
}
.bouton svg{width:15px;height:15px;stroke-width:1.6}
.bouton--plein{background:var(--plein-fond);color:var(--plein-texte);box-shadow:0 1px 2px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.18)}
.bouton--plein:hover{background:var(--plein-survol);box-shadow:0 2px 12px -4px color-mix(in srgb,var(--accent-lisible) 55%,transparent)}
.bouton--contour{border-color:var(--ligne-2);color:var(--texte);background:var(--fond-2)}
.bouton--contour:hover{border-color:var(--bronze-vif);color:var(--bronze-vif);background:var(--fond-3)}
.bouton--discret{color:var(--texte-2);padding:.4rem .6rem}
.bouton--discret:hover{color:var(--texte);background:var(--fond-3)}
.bouton--vert{background:var(--vert-fond);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.18)}
.bouton--vert:hover{background:var(--vert-clair)}

.etiq{display:inline-flex;align-items:center;gap:.4rem;font-size:11.5px;letter-spacing:.01em;padding:.22rem .6rem;border-radius:999px;border:1px solid var(--ligne-2);color:var(--texte-2);white-space:nowrap;background:var(--fond-3)}
.etiq--chaud{color:var(--chaud);border-color:color-mix(in srgb,var(--chaud) 45%,transparent);background:color-mix(in srgb,var(--chaud) 12%,transparent)}
.etiq--tiede{color:var(--tiede);border-color:color-mix(in srgb,var(--tiede) 45%,transparent);background:color-mix(in srgb,var(--tiede) 12%,transparent)}
.etiq--froid{color:var(--froid);border-color:color-mix(in srgb,var(--froid) 45%,transparent);background:color-mix(in srgb,var(--froid) 12%,transparent)}
.etiq--bronze{color:var(--accent-lisible);border-color:color-mix(in srgb,var(--bronze-vif) 45%,transparent);background:color-mix(in srgb,var(--bronze-vif) 12%,transparent)}
.etiq--vert{color:var(--vert-pastel);border-color:color-mix(in srgb,var(--vert-pastel) 40%,transparent);background:color-mix(in srgb,var(--vert-pastel) 10%,transparent)}
.point{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.carte{background:var(--carte-fond);border:1px solid var(--ligne-2);border-radius:var(--r);padding:1.35rem 1.45rem;box-shadow:var(--ombre),var(--relief);position:relative}
.carte--vedette{background:var(--vedette-fond);border-color:var(--ligne-forte);box-shadow:var(--ombre-haute),var(--relief)}
/* un filet de marque en tête de carte vedette */
.carte--vedette::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r) var(--r) 0 0;background:var(--marque);opacity:.9}
.carte--accent{border-color:color-mix(in srgb,var(--bronze-vif) 42%,transparent);box-shadow:var(--lueur),var(--relief)}
.carte--plein{padding:0;overflow:hidden}
.carte--plat{background:transparent;box-shadow:none;border-color:var(--ligne)}
.carte h3{font-size:13px;letter-spacing:-.005em;text-transform:none;color:var(--texte);font-weight:500;margin-bottom:.9rem;padding-bottom:.65rem;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:.5rem}
.carte h3 .compte{margin-left:auto;font-size:11.5px;color:var(--texte-3);font-weight:400;font-variant-numeric:tabular-nums}
.grille{display:grid;gap:1.25rem}
.grille > *{min-width:0}  /* même raison que .app > main : sans ça l'item impose sa largeur mini */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:1500px){.app:has(.guide) .g4{grid-template-columns:repeat(2,minmax(0,1fr))}.app:has(.guide) .g-2-1,.app:has(.guide) .g-1-2{grid-template-columns:1fr}}
@media (max-width:1200px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2-1,.g-1-2{grid-template-columns:1fr}}

.kpi{display:flex;flex-direction:column}
.kpi{overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--bronze-vif),transparent 72%);opacity:.7}
.kpi h3{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2);font-weight:500;margin-bottom:1rem;padding-bottom:0;border-bottom:0}
.kpi b{display:block;font-size:40px;font-weight:300;letter-spacing:-.035em;line-height:1;color:var(--texte);font-variant-numeric:tabular-nums}
.kpi .sous{margin-top:.6rem;font-size:12.5px;color:var(--texte-2);line-height:1.45}
.kpi .var{color:var(--chaud);font-size:12px;margin-top:.3rem}

table{width:100%;border-collapse:collapse;font-size:13.5px}
thead{background:var(--tete-fond)}
th{text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2);font-weight:500;padding:.6rem .8rem;border-bottom:1px solid var(--ligne-forte)}
th:first-child{border-top-left-radius:var(--r-min)}th:last-child{border-top-right-radius:var(--r-min)}
td{padding:.95rem .8rem;border-bottom:1px solid var(--ligne);vertical-align:middle;color:var(--texte-2)}
tbody tr:nth-child(even) td{background:var(--zebre)}
tbody tr:last-child td{border-bottom:0}
td.fort{color:var(--texte);font-weight:500}
tr.cliquable{cursor:pointer;transition:background .18s var(--sortie)}
tr.cliquable:hover td{background:var(--fond-3)}
tr.cliquable:hover td.fort,tr.cliquable:hover .num{color:var(--texte)}
tr.cliquable:hover td:first-child{box-shadow:inset 2px 0 0 var(--bronze-vif)}
.tableau{overflow-x:auto}
.num{font-variant-numeric:tabular-nums}

.ligne-perso{display:flex;align-items:center;gap:.7rem}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--fond-4),var(--fond-2));display:grid;place-items:center;font-size:11.5px;color:var(--texte);flex:none;font-weight:500;border:1px solid var(--ligne-2);letter-spacing:.02em;box-shadow:var(--relief)}

.vide{padding:2.5rem 1rem;text-align:center;color:var(--texte-3);font-size:13.5px}

/* barres de progression */
.jauge{height:5px;border-radius:3px;background:var(--piste);overflow:hidden;border:1px solid var(--ligne)}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--bronze),var(--bronze-vif));border-radius:3px;transition:width .8s var(--sortie);box-shadow:0 0 10px -3px color-mix(in srgb,var(--bronze-vif) 50%,transparent)}
.jauge.vert i{background:linear-gradient(90deg,var(--vert),var(--vert-clair));box-shadow:0 0 10px -3px color-mix(in srgb,var(--vert) 50%,transparent)}
.jauge.alerte i{background:var(--alerte)}

/* entonnoir */
.funnel{display:grid;gap:.5rem}
.funnel .l{display:grid;grid-template-columns:150px 1fr 60px;align-items:center;gap:.8rem;font-size:13px}
.funnel .l{position:relative}
.funnel .l::before{content:"";position:absolute;left:calc(150px + .8rem);right:calc(60px + .8rem);top:50%;transform:translateY(-50%);height:30px;background:var(--piste);border-radius:3px}
.funnel .b{position:relative;height:30px;background:var(--marque);border-radius:3px;min-width:3px;transition:width .9s var(--sortie)}
.funnel .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--texte)}
.funnel .l span:first-child{color:var(--texte-2)}

/* fil d'activité */
.fil{display:grid;gap:0;position:relative;padding-left:1.1rem}
.fil::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--ligne)}
.fil li{position:relative;padding:.55rem 0 .55rem .3rem}
.fil li::before{content:"";position:absolute;left:-1.1rem;top:.95rem;width:9px;height:9px;border-radius:50%;background:var(--fond);border:1.5px solid var(--bronze-vif)}
.fil .q{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lisible)}
.fil .d{font-size:13.5px;color:var(--texte-2);margin-top:.15rem}
.fil .t{font-size:11.5px;color:var(--texte-3)}

/* comparateur de simulation */
.simu{position:relative;aspect-ratio:1400/990;overflow:hidden;border:1px solid var(--ligne);border-radius:var(--r);background:var(--fond-3);cursor:ew-resize;user-select:none}
.simu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.simu .apres{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.simu .trait{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.simu .trait::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111317' stroke-width='1.6'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");background-size:17px;background-repeat:no-repeat;background-position:center}
.simu .etiq-img{position:absolute;bottom:.6rem;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.8);pointer-events:none}
.simu .etiq-img.a{left:.8rem}.simu .etiq-img.b{right:.8rem}
.filigrane{position:absolute;inset:0;pointer-events:none;background:url('../img/logo-horizontal-blanc.svg') repeat;background-size:120px auto;opacity:.12}

.nuancier{display:flex;align-items:center;gap:.6rem;font-size:13px}
.nuancier img{width:34px;height:34px;object-fit:cover;border-radius:2px;border:1px solid var(--ligne)}
.logo-client{content:url('../img/logo-horizontal-noir.svg')}
:root[data-theme="client"] .logo-client{content:url('../img/logo-horizontal-blanc.svg')}
.nuancier b{font-weight:500;color:var(--texte)}
.nuancier span{color:var(--texte-3);font-size:12px}

/* notifications de démonstration */
.toast{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;max-width:26rem;
  background:var(--fond-3);border:1px solid var(--ligne-forte);border-left:3px solid var(--bronze-vif);
  border-radius:var(--r);padding:.85rem 1.1rem;box-shadow:var(--ombre-flottante);
  animation:monte .3s var(--sortie) both;
}
.toast b{display:block;font-size:13px;font-weight:500;margin-bottom:.15rem}
.toast p{font-size:12.5px;color:var(--texte-2)}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* panneau latéral (fiche) */
.tiroir{position:fixed;inset:0;z-index:50;display:none}
.tiroir.ouvert{display:block}
.tiroir__voile{position:absolute;inset:0;background:var(--voile);backdrop-filter:blur(2px)}
.tiroir__panneau{position:absolute;top:0;right:0;bottom:0;width:min(760px,92vw);background:var(--fond);border-left:1px solid var(--ligne);overflow-y:auto;animation:glisse .3s var(--sortie) both}
@keyframes glisse{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.tiroir__tete{position:sticky;top:0;background:color-mix(in srgb,var(--fond) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:1rem;z-index:2}
.tiroir__corps{padding:1.4rem}

.sep{height:1px;background:var(--ligne);margin:1.2rem 0}
.paire{display:grid;grid-template-columns:130px 1fr;gap:.6rem 1rem;font-size:13.5px}
.paire dt{color:var(--texte-3);font-size:12px}
.paire dd{margin:0;color:var(--texte)}

.onglets{display:flex;gap:.3rem;border-bottom:1px solid var(--ligne-2);margin-bottom:1.2rem}
.onglets button{padding:.6rem .9rem;font-size:13.5px;color:var(--texte-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.onglets button.actif{color:var(--blanc);border-bottom-color:var(--bronze-vif);font-weight:500}

.note{font-size:12.5px;color:var(--texte-3);line-height:1.5}
.note--ia{border-left:2px solid var(--bronze-vif);padding-left:.8rem}

/* ------------------------------------------------------- guide de démonstration */
.demo-barre__guide{display:flex;align-items:center;gap:.4rem;font-size:12px;padding:.3rem .75rem;border:1px solid var(--ligne-2);border-radius:999px;color:var(--texte-2);margin-left:.5rem}
.demo-barre__guide svg{width:14px;height:14px;stroke-width:1.6}
.demo-barre__guide:hover{background:var(--fond-3);color:var(--texte)}
.app:has(.guide){grid-template-columns:var(--barre) minmax(0,1fr) 310px}
.guide{background:var(--fond-0);border-left:1px solid var(--ligne-2);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.guide__tete{padding:1rem 1.1rem;border-bottom:1px solid var(--ligne-2);display:flex;align-items:start;gap:.6rem;position:sticky;top:0;background:var(--fond-0);z-index:2}
.guide__tete h2{font-size:16px;font-weight:500;margin-top:.15rem}
.guide__tete .bouton{margin-left:auto;flex:none}
.guide__min{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lisible)}
.guide__corps{padding:1.1rem;display:grid;gap:.5rem;align-content:start}
.guide__corps h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);font-weight:500;margin-top:.8rem}
.guide__accroche{font-size:14.5px;line-height:1.45;color:var(--texte);border-left:2px solid var(--bronze-vif);padding-left:.8rem}
.guide__dire{display:grid;gap:.55rem}
.guide__dire li{font-size:13px;line-height:1.5;color:var(--texte-2);padding-left:.9rem;position:relative}
.guide__dire li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--bronze-vif)}
.guide__montrer{font-size:13px;color:var(--texte-2);background:var(--fond-3);border-radius:var(--r);padding:.65rem .8rem;line-height:1.45}
.guide__pieds{display:grid;gap:.5rem;margin-top:1.2rem}
.guide__pieds .bouton{width:100%;justify-content:space-between}
@media (max-width:1400px){.app:has(.guide){grid-template-columns:var(--barre) minmax(0,1fr)}.guide{display:none}}

/* la semaine de l'agenda défile dans son cadre, jamais la page */
.semaine{overflow-x:auto;padding-bottom:.4rem}
.semaine > .grille{min-width:880px}

/* =========================================================================
   Finition premium (19/09) : matière, profondeur, rythme.
   ========================================================================= */

/* une lueur très douce derrière le contenu, pour que le fond ne soit pas mort */
main{position:relative}
main::before{
  content:"";position:fixed;inset:0 0 0 var(--barre);pointer-events:none;z-index:0;
  background:var(--halo);
}
/* et une trame très fine, pour que le fond ait de la matière plutôt que du vide */
main::after{
  content:"";position:fixed;inset:0 0 0 var(--barre);pointer-events:none;z-index:0;opacity:.55;
  background:var(--trame);
}
.demo-barre,.entete,#vue{position:relative;z-index:1}

/* en-tête de page : surtitre bronze au-dessus du titre */
.entete__sur{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lisible);font-weight:500;margin-bottom:.35rem;display:block}

/* bande de matière : le rappel visuel du métier, en haut d'un écran */
.bande-matiere{display:flex;gap:2px;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);height:88px}
.bande-matiere figure{flex:1;margin:0;position:relative;overflow:hidden;min-width:0}
.bande-matiere img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--sortie);filter:saturate(.92)}
.bande-matiere figure:hover img{transform:scale(1.07)}
.bande-matiere figcaption{position:absolute;left:.55rem;bottom:.45rem;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.bande-matiere figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,11,.72),transparent 55%)}

/* vignette de matière dans une liste */
.nuancier img{width:36px;height:36px;border-radius:var(--r-min);box-shadow:0 1px 3px rgba(15,23,42,.25)}

/* séparateur de section : un titre qui structure la page */
.section-titre{display:flex;align-items:baseline;gap:.9rem;margin:.75rem 0 -.25rem}
.section-titre h2{font-size:16px;font-weight:400;letter-spacing:-.015em;color:var(--texte)}
.section-titre span{font-size:12px;color:var(--texte-3)}
.section-titre::after{content:"";flex:1;height:1px;background:var(--ligne);margin-left:.25rem}

/* cartes : légère élévation au survol quand elles sont cliquables */
.carte[data-va]{cursor:pointer;transition:border-color .2s var(--sortie),box-shadow .25s var(--sortie),transform .25s var(--sortie)}
/* survol : la carte se soulève */
.carte[data-va]:hover{border-color:var(--ligne-2);box-shadow:var(--ombre-haute);transform:translateY(-1px)}

/* apparition douce du contenu à chaque changement d'écran */
@keyframes entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#vue > .contenu > *{animation:entree .45s var(--sortie) both}
#vue > .contenu > *:nth-child(2){animation-delay:.04s}
#vue > .contenu > *:nth-child(3){animation-delay:.08s}
#vue > .contenu > *:nth-child(4){animation-delay:.12s}
#vue > .contenu > *:nth-child(n+5){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){#vue > .contenu > *{animation:none}}

/* fil d'activité : pastille plus fine */
.fil li::before{width:7px;height:7px;border-width:1.5px;background:var(--fond-2)}
.fil .q{font-size:10.5px;letter-spacing:.12em}

/* tiroir : même profondeur que les cartes */
.tiroir__panneau{box-shadow:-30px 0 80px -40px rgba(15,23,42,.45)}
.tiroir__tete{padding:1.25rem 1.6rem}
.tiroir__corps{padding:1.6rem;display:grid;gap:1.25rem;align-content:start}

/* comparateur : coins arrondis cohérents */
.simu{border-radius:var(--r)}

/* guide : plus proche d'un panneau de logiciel que d'une bulle d'aide */
.guide{background:var(--rail-fond)}
.guide__tete{background:transparent;border-bottom:1px solid var(--ligne);padding:1.15rem 1.25rem}
.guide__corps{padding:1.25rem}
.guide__accroche{border-left-width:2px}

/* barre de défilement discrète */
*{scrollbar-width:thin;scrollbar-color:var(--fond-4) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--fond-4);border-radius:5px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---- détails de finition (2e passe) ---- */
/* le logo respire mieux sur fond sombre */

/* les pastilles de compteur du menu : plus discrètes */
.nav-item .pastille{background:transparent;border:1px solid var(--ligne-2);color:var(--texte-3);font-size:10.5px;padding:.05rem .4rem;min-width:20px;text-align:center}

.nav-item:hover .pastille{border-color:var(--ligne-forte);color:var(--texte-2)}
/* les icônes du menu : un ton en dessous du texte */
.nav-item svg{opacity:.75}
.nav-item.actif svg,.nav-item:hover svg{opacity:1}
/* la note en bas d'une carte : séparée par un filet */
.carte > .note:last-child{padding-top:.9rem;margin-top:.15rem;border-top:1px solid var(--ligne)}
.carte > .note--ia:last-child{border-top:0;padding-top:0}
/* les étiquettes de température : point plus net */
.etiq .point{width:5px;height:5px;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 22%,transparent)}
/* les listes de paires : alignement propre des valeurs */
.paire dd{font-variant-numeric:tabular-nums}
/* le tiroir s'ouvre plus franchement */

/* focus visible cohérent */
:focus-visible{outline:2px solid var(--bronze-vif);outline-offset:3px;border-radius:2px}
/* impression : au cas où quelqu'un imprime un écran pendant la démonstration */
@media print{.barre,.demo-barre,.guide,.entete__actions{display:none!important}.app{grid-template-columns:1fr}body{background:#fff;color:#111}.carte{border-color:#ddd;box-shadow:none}}

/* =========================================================================
   Petits écrans — déclaré en fin de feuille pour passer après `.app:has(.guide)`
   ========================================================================= */
/* bouton et voile du menu : invisibles tant qu'on est sur grand écran */
.demo-barre__menu{display:none;align-items:center;justify-content:center;padding:.3rem;margin-left:-.35rem;color:var(--texte-2)}
.demo-barre__menu svg{width:20px;height:20px;stroke-width:1.6}
.voile-nav{display:none;position:fixed;inset:0;z-index:35;background:var(--voile);backdrop-filter:blur(2px)}
body.nav-ouverte .voile-nav{display:block}
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  .app,.app:has(.guide){grid-template-columns:1fr}
  .barre{position:fixed;left:0;top:0;bottom:0;width:min(var(--barre),84vw);z-index:40;
    transform:translateX(-100%);transition:transform .3s var(--sortie);box-shadow:24px 0 48px -24px rgba(15,23,42,.5)}
  .barre.ouverte{transform:none}
  .demo-barre__menu{display:inline-flex}
  main::before,main::after{inset:0}   /* plus de barre latérale à décaler */
  .demo-barre{padding:.45rem .8rem;gap:.55rem}
  .demo-barre b{font-size:12px}

  /* l'en-tête cesse d'être collant : sur un écran court il mangeait un tiers de la page */
  .entete{position:static;min-height:0;padding:.9rem 1rem;flex-wrap:wrap;gap:.7rem;backdrop-filter:none;
    background:var(--fond)}
  .entete h1{font-size:21px}
  .entete__fil{margin-top:.25rem}
  .entete__actions{margin-left:0;width:100%;flex-wrap:wrap;gap:.45rem}
  .entete__actions .bouton{flex:1 1 auto;min-width:0}
  .contenu{padding:1.1rem 1rem 2.5rem;gap:.9rem;max-width:none}

  /* une seule colonne partout : deux colonnes sur 390 px hachent les mots.
     Sélecteurs doublés pour passer devant `.app:has(.guide) .g4` (0,3,0). */
  .g2,.g3,.g4,.g-2-1,.g-1-2,
  .app .g2,.app .g3,.app .g4,.app .g-2-1,.app .g-1-2,
  .app:has(.guide) .g4,.app:has(.guide) .g-2-1,.app:has(.guide) .g-1-2{grid-template-columns:1fr}
  .grille{gap:.9rem}
  .carte{padding:1.05rem 1.1rem}
  .kpi b{font-size:32px}
  .kpi h3{margin-bottom:.7rem}

  /* tableaux : ils défilent dans leur cadre, la page reste immobile */
  table{min-width:540px}
  .tableau{border:1px solid var(--ligne);border-radius:var(--r-min);background:var(--piste)}
  .carte > .tableau{margin:0 -.35rem}

  /* entonnoir : libellé au-dessus, barre pleine largeur */
  .funnel .l{grid-template-columns:1fr auto;gap:.15rem .6rem}
  .funnel .l > span:first-child{grid-column:1;grid-row:1}
  .funnel .n{grid-column:2;grid-row:1;align-self:center}
  .funnel .b{grid-column:1/-1;grid-row:2;height:20px}
  .funnel .l::before{display:none}
  .funnel{gap:.9rem}

  .bande-matiere{height:72px}
  .bande-matiere figure:nth-child(n+4){display:none}
  .paire{grid-template-columns:1fr;gap:.1rem .5rem}
  .paire dt{margin-top:.5rem}
  .onglets{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .onglets::-webkit-scrollbar{display:none}
  .onglets button{white-space:nowrap;flex:none}
  .onglets > span{flex:none;white-space:nowrap}   /* le compteur défile au lieu de se chevaucher */

  /* cibles au doigt : les puces de la barre démo passent de 29 à 36 px */
  .demo-barre .etapes button,.demo-barre__guide{padding:.45rem .8rem}
  .demo-barre__menu{padding:.45rem}
  .tiroir__panneau{width:100%}
  .tiroir__corps{padding:1rem}
  .toast{left:1rem;right:1rem;bottom:1rem;max-width:none}

  /* le guide devient une feuille basse : il reste consultable au doigt */
  .guide{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:72vh;width:auto;
    border-left:0;border-top:1px solid var(--ligne-forte);border-radius:var(--r) var(--r) 0 0;
    z-index:45;box-shadow:0 -20px 50px -24px rgba(15,23,42,.5)}
  main.avec-guide{padding-bottom:0}
}

@media (max-width:600px){
  .entete h1{font-size:19px}
  .section-titre h2{font-size:15px}
  .bande-matiere{height:62px}
  .bande-matiere figure:nth-child(n+3){display:none}
}