/* Paolia 5 — démonstration 2.0 : niveaux de priorité (glyphe + libellé + couleur), planning commun, Ma journée, conquête, communication, ADV, manager, direction.
   Une palette limitée ; la couleur n'est jamais seule : un glyphe ou un libellé l'accompagne toujours. */
:root {
  --niv-rouge: #B3261E; --niv-rouge-bg: #FDEBE9; --niv-orange: #B24E00; --niv-orange-bg: #FFEED6; --niv-jaune: #7A6400; --niv-jaune-bg: #FBF2C2;
  --niv-vert: #0B7A55; --niv-vert-bg: #DDF6EE; --niv-gris: #55627C; --niv-gris-bg: #F2E1C8;
  --f-terrain: #2750C8; --f-rendez_vous: #6547C0; --f-appel: #0B805A; --f-reunion: #55627C; --f-formation: #9A6200; --f-echeance: #B3261E; --f-decision: #00788A; --f-absence: #7A869E;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --niv-rouge: #FF9A8F; --niv-rouge-bg: #3B1D24; --niv-orange: #FFB26B; --niv-orange-bg: #3C2A15; --niv-jaune: #EBD566; --niv-jaune-bg: #3A3410; --niv-vert: #52DDB2; --niv-vert-bg: #0F3432; --niv-gris: #A1ACC6; --niv-gris-bg: #2A3D61;
  --f-terrain: #B9C8E2; --f-rendez_vous: #BBA7FF; --f-appel: #52DDB2; --f-reunion: #A1ACC6; --f-formation: #F2BE5C; --f-echeance: #FF9A8F; --f-decision: #5BD3E3; --f-absence: #8C98B5; } }
:root[data-theme="dark"] {
  --niv-rouge: #FF9A8F; --niv-rouge-bg: #3B1D24; --niv-orange: #FFB26B; --niv-orange-bg: #3C2A15; --niv-jaune: #EBD566; --niv-jaune-bg: #3A3410; --niv-vert: #52DDB2; --niv-vert-bg: #0F3432; --niv-gris: #A1ACC6; --niv-gris-bg: #2A3D61;
  --f-terrain: #B9C8E2; --f-rendez_vous: #BBA7FF; --f-appel: #52DDB2; --f-reunion: #A1ACC6; --f-formation: #F2BE5C; --f-echeance: #FF9A8F; --f-decision: #5BD3E3; --f-absence: #8C98B5;
}

/* ---------- Niveaux ---------- */
.niv { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .08rem .6rem .08rem .4rem; white-space: nowrap; line-height: 1.5; border: 1px solid transparent }
.niv i { font-style: normal; font-size: .72rem; line-height: 1 }
.niv.rouge { background: var(--niv-rouge-bg); color: var(--niv-rouge); border-color: color-mix(in srgb, var(--niv-rouge) 30%, transparent) }
.niv.orange { background: var(--niv-orange-bg); color: var(--niv-orange); border-color: color-mix(in srgb, var(--niv-orange) 30%, transparent) }
.niv.jaune { background: var(--niv-jaune-bg); color: var(--niv-jaune); border-color: color-mix(in srgb, var(--niv-jaune) 30%, transparent) }
.niv.vert { background: var(--niv-vert-bg); color: var(--niv-vert); border-color: color-mix(in srgb, var(--niv-vert) 30%, transparent) }
.niv.gris { background: var(--niv-gris-bg); color: var(--niv-gris); border: 1px dashed var(--muted) }
.regle { font-size: .8rem; color: var(--slate); margin: .3rem 0 }
.regles { margin: .3rem 0; padding-left: 1.1rem; font-size: .8rem; color: var(--slate) } .regles li { margin: .15rem 0 }
.chemin { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; font-size: .82rem }
.chemin span { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .7rem } .chemin b { color: var(--accent); margin-right: .25rem } .chemin i { color: var(--muted); font-style: normal }
.courbe { width: 100%; height: auto; max-height: 160px } .courbe + .legende { margin-top: .2rem }
.barre-h { height: 6px; background: var(--grey-soft); border-radius: 99px; overflow: hidden; margin: .15rem 0 .35rem } .barre-h i { display: block; height: 100%; background: var(--accent); border-radius: 99px }

/* ---------- Bandeau de démonstration : environnement du Responsable Secteur ---------- */
.env-demo { display: flex; align-items: center; gap: .3rem } .env-demo .texte { margin-right: .2rem }
.env-demo button { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; padding: .12rem .6rem; font-size: .76rem; font-weight: 600 }
.env-demo button[aria-pressed="true"] { background: var(--oh-vert); color: var(--oh-nuit); border-color: var(--oh-vert) }
.env-message { padding: .35rem 1.4rem; font-size: .8rem; background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line) }

/* ---------- Planning commun ---------- */
.fam-terrain { --fc: var(--f-terrain) } .fam-rendez_vous { --fc: var(--f-rendez_vous) } .fam-appel { --fc: var(--f-appel) } .fam-reunion { --fc: var(--f-reunion) }
.fam-formation { --fc: var(--f-formation) } .fam-echeance { --fc: var(--f-echeance) } .fam-decision { --fc: var(--f-decision) } .fam-absence { --fc: var(--f-absence) }
.pl-titre { font-weight: 700; font-size: 1.05rem; margin: -.2rem 0 .6rem } .pl-titre::first-letter { text-transform: uppercase }
.pl-avec-panneau { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: .9rem; align-items: start } .pl-panneau { position: sticky; top: 4rem }
.pl-semaine { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.pl-tete, .pl-corps { display: grid; grid-template-columns: 48px repeat(var(--n), minmax(0, 1fr)) }
.pl-tete > div { padding: .35rem .4rem; border-left: 1px solid var(--line-2); font-size: .8rem; text-transform: capitalize } .pl-tete > div:first-child { border-left: 0 }
.pl-jour.auj { background: var(--accent-soft); color: var(--accent) } .pl-entiers { border-top: 1px solid var(--line-2); background: var(--panel-2) } .pl-h-axe { font-size: .66rem; color: var(--muted); text-align: right }
.pl-bandeau { display: flex; flex-direction: column; gap: 2px; min-height: 26px; padding: 2px !important }
.pl-corps { border-top: 1px solid var(--line); max-height: 74vh; overflow-y: auto }
.pl-axe > div { position: relative; border-top: 1px solid var(--line-2) } .pl-axe span { position: absolute; top: -.55rem; right: 5px; font-size: .66rem; color: var(--muted); background: var(--panel); padding: 0 2px }
.pl-col { position: relative; border-left: 1px solid var(--line-2); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, var(--line-2) 45px, var(--line-2) 46px) }
.pl-ev { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 2px 5px; overflow: hidden; cursor: grab; font-size: .74rem; line-height: 1.25; touch-action: none; user-select: none;
  background: color-mix(in srgb, var(--fc) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent); border-left: 4px solid var(--fc); color: var(--ink); box-shadow: 0 1px 2px rgba(48,73,111,.1) }
.pl-ev:hover { box-shadow: 0 3px 10px rgba(48,73,111,.22); z-index: 4 } .pl-ev.glisse { opacity: .85; cursor: grabbing; z-index: 20; box-shadow: var(--shadow-lg) } .pl-ev.fait { opacity: .6 }
.pl-ev-t { display: flex; gap: .25rem; align-items: center; font-weight: 650 } .pl-ev-t i { font-style: normal; color: var(--fc); font-size: .7rem } .pl-ev-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-ev-h { color: var(--slate); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pl-zone { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none }
.pl-libre { position: absolute; left: 3px; right: 3px; border: 1.5px dashed var(--muted); border-radius: 6px; background: transparent; color: var(--slate); font-size: .7rem; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; opacity: .85 }
.pl-libre:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); opacity: 1 }
.pl-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; border-radius: 6px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1px 2px 1px 0; cursor: default;
  background: color-mix(in srgb, var(--fc, var(--slate)) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--fc, var(--slate)) 35%, transparent); color: var(--ink) } .pl-chip i { font-style: normal; color: var(--fc, var(--slate)) }
.pl-chip[data-ev] { cursor: pointer }
.pl-ech { --fc: var(--f-echeance); border-style: dashed; font-weight: 600 } .fam-absence { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--f-absence) 18%, transparent) 6px 12px) }
.pl-legende { display: flex; gap: .4rem .9rem; flex-wrap: wrap; margin-top: .7rem; font-size: .74rem; color: var(--slate); align-items: center } .pl-leg i { font-style: normal; color: var(--fc, var(--slate)); margin-right: .25rem } .pl-leg-titre { font-weight: 600 }
.pl-regles { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; font-size: .72rem; color: var(--muted) }
.pl-bulle { position: absolute; z-index: 90; width: 300px; box-shadow: var(--shadow-lg) !important; padding: .8rem !important }
.pl-mois { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden }
.pl-mois-tete, .pl-mois-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) } .pl-mois-tete div { padding: .3rem .5rem; font-size: .74rem; color: var(--slate); background: var(--panel-2); text-transform: capitalize }
.pl-mois-j { display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 96px; text-align: left; border: 0; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); background: var(--panel); padding: .25rem .3rem; color: var(--ink) }
.pl-mois-j:hover { background: var(--accent-soft) } .pl-mois-j.hors { opacity: .45 } .pl-mois-j.auj b { background: var(--accent); color: var(--on-accent); border-radius: 99px; padding: 0 .4rem; align-self: flex-start }
.pl-charge { display: block; height: 3px; background: var(--grey-soft); border-radius: 3px } .pl-charge i { display: block; height: 100%; background: var(--accent); border-radius: 3px }
.pl-trim td { vertical-align: top } .pl-annee { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem } .pl-mois-carte { text-align: left; cursor: pointer; position: relative; min-height: 130px }
.pl-saison { position: absolute; right: .8rem; top: 2.2rem; width: 26px; height: 56px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center }
.pl-saison i { display: block; width: 18px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .75 } .pl-saison span { font-size: .6rem; color: var(--slate) } .pl-pilules { margin-top: .4rem; max-width: calc(100% - 34px) }

/* ---------- Ma journée ---------- */
.frise-jour { position: relative; height: 62px; margin: 1.3rem 0 .3rem; border-top: 1px solid var(--line); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--line-2) calc(100% / 12 - 1px), var(--line-2) calc(100% / 12)) }
.fj-h { position: absolute; top: -1.15rem; font-size: .66rem; color: var(--muted); transform: translateX(-50%) }
.fj-ev, .fj-libre { position: absolute; top: 6px; height: 48px; border-radius: 7px; overflow: hidden; font-size: .72rem; text-decoration: none; padding: 3px 6px; display: flex; gap: .25rem; align-items: flex-start }
.fj-ev { background: color-mix(in srgb, var(--fc) 18%, var(--panel)); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); border-left: 4px solid var(--fc); color: var(--ink); font-weight: 600 } .fj-ev i { font-style: normal; color: var(--fc) } .fj-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fj-libre { border: 1.5px dashed var(--muted); color: var(--slate); align-items: center; justify-content: center; font-size: .68rem } .fj-libre:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }
.visite-j { display: grid; grid-template-columns: 62px 1fr; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line-2) } .visite-j:first-of-type { border-top: 0 } .visite-j.fait { opacity: .6 } .vj-h { display: flex; flex-direction: column }
.vj-info { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .78rem; color: var(--slate); margin-top: .2rem } .vj-info b { color: var(--ink-2); font-weight: 600; margin-right: .2rem }
.suggestion { display: grid; grid-template-columns: 112px 1fr auto; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--line-2); align-items: start } .sg-h { display: flex; flex-direction: column } .sg-raisons { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 }
.sg-g { display: flex; flex-direction: column; gap: .3rem } .suggestion .nom { color: var(--ink); font-weight: 700; text-decoration: none }

/* ---------- Conquête ---------- */
.conq-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .7rem }
.conq-carte { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--r); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .3rem }
.conq-carte.p-rouge { border-left-color: var(--niv-rouge) } .conq-carte.p-orange { border-left-color: var(--niv-orange) } .conq-carte.p-vert { border-left-color: var(--niv-vert) }
.conq-t { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; flex-wrap: wrap } .suggestion-p { background: var(--violet-soft); border-radius: 8px; padding: .3rem .5rem }
.conq-carte .btn.actif { border-color: var(--accent); background: var(--accent-soft) } .conq-carte .nom { color: var(--ink); text-decoration: none }
.mention { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; margin-bottom: .6rem } .mention.possible { border-style: dashed; background: var(--panel-2) } .mention.fait { border-left: 4px solid var(--niv-vert) }
.chip { display: inline-block; background: var(--grey-soft); color: var(--slate); border-radius: 6px; padding: 0 .4rem; margin-right: .25rem; font-size: .72rem }

/* ---------- Communication ---------- */
.com-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: .9rem; align-items: start } .com-liste { position: sticky; top: 4rem; max-height: 82vh; overflow-y: auto }
.com-c { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: .5rem .3rem; position: relative; color: var(--ink) } .com-c:hover, .com-c.on { background: var(--accent-soft) }
.com-c .badge { position: absolute; right: .4rem; top: .5rem; background: var(--oh-vert); color: var(--oh-nuit); border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 0 .45rem }
.stepper { display: flex; gap: .25rem; align-items: center; font-size: .7rem; color: var(--muted); flex-wrap: wrap; justify-content: flex-end } .stepper span { display: inline-flex; align-items: center; gap: .2rem }
.stepper i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid var(--muted); font-size: .65rem; font-weight: 700 }
.stepper .ok { color: var(--niv-vert) } .stepper .ok i { background: var(--niv-vert); border-color: var(--niv-vert); color: var(--on-accent) } .stepper .cur { color: var(--accent); font-weight: 700 } .stepper .cur i { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.demande { padding: .5rem 0; border-top: 1px solid var(--line-2) } .demande.fini { opacity: .65 } .reponse { color: var(--niv-vert); margin-top: .15rem } .epingle { background: var(--amber-soft); border-radius: 8px; padding: .35rem .55rem; margin-bottom: .3rem; font-size: .84rem }

/* ---------- Télévente, ADV ---------- */
.plan td { vertical-align: top } .plan tr.fait { opacity: .62 } .gestes-l { display: flex; flex-direction: column; gap: .25rem; align-items: stretch }
.tache { display: grid; grid-template-columns: 30px 1fr auto; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--line-2) } .tache:first-of-type { border-top: 0 } .tache.fini { opacity: .55 } .tache-n { font-weight: 800; color: var(--muted); text-align: center }
.tache-g { display: flex; flex-direction: column; gap: .25rem } .note-r { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .5rem; background: var(--panel-2) } .note-r.fait { opacity: .7 }
.barres-m { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-bottom: .6rem } .barres-m div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100% } .barres-m i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .8 } .barres-m span { font-size: .62rem; color: var(--muted) }

/* ---------- Manager ---------- */
.situations { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem } .sit { display: inline-flex; gap: .3rem; align-items: center; text-decoration: none; color: var(--ink) }
.alerte-m { border-top: 1px solid var(--line-2); padding: .5rem 0 } .point { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .5rem; background: var(--panel-2) }
.pistes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .35rem } .piste { display: inline-flex; align-items: center; gap: .3rem; border: 1px dashed var(--muted); border-radius: 9px; padding: 2px 4px }
table.equipe td { vertical-align: top } table.equipe th, table.equipe td { padding-left: .4rem; padding-right: .4rem; font-size: .8rem } .plan th, .plan td { padding-left: .45rem; padding-right: .45rem }

/* ---------- Direction ---------- */
.sante .dom { min-height: 150px } .dom-v { font-size: 1.05rem; font-weight: 700; margin: .35rem 0 } .dom-non_renseigne { background: var(--panel-2); border-style: dashed } .dom-rouge { border-left: 5px solid var(--niv-rouge) } .dom-orange { border-left: 5px solid var(--niv-orange) }
.dom-jaune { border-left: 5px solid var(--niv-jaune) } .dom-vert { border-left: 5px solid var(--niv-vert) }
.prio { display: flex; gap: .7rem; padding: .6rem .3rem; border-top: 1px solid var(--line-2) } .prio:first-of-type { border-top: 0 } .prio-r { width: 28px; height: 28px; border-radius: 50%; background: var(--grey-soft); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none }
.prio.rouge .prio-r { background: var(--niv-rouge-bg); color: var(--niv-rouge) } .prio.orange .prio-r { background: var(--niv-orange-bg); color: var(--niv-orange) } .prio.compact { padding: .4rem 0 }
.niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin: .8rem 0 } .niv-carte { padding: .6rem .8rem }
.dossier { margin-bottom: .6rem } .dossier.fini { opacity: .6 } .cap-carte { display: grid; grid-template-columns: 38px 1fr; gap: .8rem } .cap-n { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800 }
.planche-v { background: var(--panel-2) } .planche-nav { border-bottom: 1px solid var(--line); margin: .5rem 0; padding-bottom: .3rem } .planche-nav .actif { border-bottom: 2px solid var(--accent); font-weight: 700; padding-bottom: .15rem }
.planche-l { font-size: .84rem; padding: .25rem 0; border-top: 1px solid var(--line-2) } .planche-l b { color: var(--accent); margin-right: .3rem }
fieldset.q { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; margin: 0 0 .5rem } fieldset.q legend { padding: 0 .35rem; font-size: .84rem }

@media (max-width: 1000px) { .pl-avec-panneau, .com-grille { grid-template-columns: 1fr } .suggestion { grid-template-columns: 1fr } .pl-panneau, .com-liste { position: static } }
@media print { .side, .top, .bandeau-demo, .outils, .toast { display: none !important } .shell { display: block } .page { padding: 0 } }

/* Suppléance, réaffectation et bloc « relation » (fin de démonstration 2.0) */
.mini-titre { margin: .7rem 0 .2rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.rel-bloc .kv { margin: .3rem 0 }
.tv-charge { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) }
.tv-charge .card { margin: 0 }

/* Petits écrans : une colonne de grille ne doit jamais être élargie par un tableau (le tableau défile dans son cadre, pas la page). */
@media (max-width: 1150px) { .g-main, .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 900px) { .g2, .g-main, .g3, .g4 { grid-template-columns: minmax(0, 1fr) } }
.grid > * { min-width: 0 }
@media (max-width: 900px) { .top { flex-wrap: wrap } .top .fraicheur { min-width: 0; flex: 1 1 8rem } .top .espace { flex: 0 0 0 } }

/* ---------- Commandes (lot 2) ---------- */
.carte-espace { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; min-height: 210px; transition: border-color .15s, transform .15s }
.carte-espace:hover { border-color: var(--accent); transform: translateY(-2px) } .carte-espace h2 { margin: 0; font-size: 1.25rem } .carte-espace p { flex: 1; margin: 0 }
.carte-espace .btn { align-self: flex-start } .ic-espace { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.chip-jeton { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .65rem; background: var(--panel) }
.chip-jeton.hidden { display: none }

/* ---------- Technicien et logistique (lot 3) ---------- */
.frise { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: .4rem 0 .6rem }
.frise li { flex: 1 1 90px; text-align: center; font-size: .75rem; font-weight: 600; padding: .35rem .4rem; border-radius: 8px; background: var(--grey-soft); color: var(--slate) }
.frise li.fait { background: var(--green-soft); color: var(--green) } .frise li.courant { background: var(--accent); color: var(--on-accent) }
.stepper { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem } .stepper button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: var(--ink-2) }
.stepper button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.carte-choix { text-align: left; display: flex; flex-direction: column; gap: .2rem; cursor: pointer; border: 1px solid var(--line) } .carte-choix:hover:not(:disabled) { border-color: var(--accent) } .carte-choix:disabled { opacity: .5; cursor: not-allowed }
.carte-int { text-decoration: none; color: inherit; display: block } .carte-int:hover { background: var(--accent-soft) }
.planning-sem { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) } .jour-card h3 { margin: 0 0 .4rem; font-size: .85rem; text-transform: capitalize } .jour-card.aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }
ol.liste-verif { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .35rem } ol.liste-verif li { display: block }
@media (max-width: 760px) { .grid[style*="grid-template-columns:minmax"] { grid-template-columns: 1fr !important } }

/* Habitudes d'achat (espace Commandes) : le tableau prend toute la largeur de l'écran ; en-têtes triables au clic ou au clavier. */
.page:has(.hab-pleine) { max-width: none }
.hab-pleine .t { font-size: .92rem } .hab-pleine .t td { padding: .6rem .9rem } .hab-pleine .t th { padding: 0 }
.th-tri { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .35rem; width: 100%; padding: .6rem .9rem; cursor: pointer; font: inherit; color: inherit; white-space: nowrap }
.t th.n .th-tri { justify-content: flex-end } .th-tri:hover { color: var(--accent) } .th-tri:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.t th[aria-sort="ascending"], .t th[aria-sort="descending"] { color: var(--accent); background: var(--accent-soft) } .th-tri span { font-size: .7rem; opacity: .75 }

/* ---------- Démonstration personnalisée d'un prospect : barre dans le bandeau, logo sur pastille blanche ---------- */
.bandeau-demo.prospect { background: var(--side-bg); }
.bandeau-demo .pr-groupe { display: inline-flex; align-items: center; gap: .3rem .35rem; flex-wrap: wrap }
.bandeau-demo .pr-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 7px; padding: .12rem .65rem; font: 600 .76rem/1.4 inherit; text-decoration: none; cursor: pointer; min-height: 28px; display: inline-flex; align-items: center }
.bandeau-demo .pr-btn:hover { background: rgba(255,255,255,.16) }
.bandeau-demo .pr-btn[aria-pressed="true"], .bandeau-demo .pr-btn.plein { background: #FFEED6; color: #30496F; border-color: #FFEED6 }
.bandeau-demo .pr-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px }
.brand img.logo-prospect { background: #fff; border-radius: 8px; padding: 4px; object-fit: contain; width: auto; max-width: 150px; height: 44px }

/* Espace Dirigeant : colonnes du pipeline (défilement horizontal dans la zone, jamais sur la page) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .7rem; overflow-x: auto; padding-bottom: .6rem }
.kb-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: .55rem; min-height: 120px }
.kb-carte { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .55rem; margin-top: .4rem; font-size: .84rem }
.kb-carte a { color: var(--ink); text-decoration: none }

/* Espace Dirigeant : recherche globale et création rapide permanentes dans la barre du haut (l'espace libre leur revient) */
.top:has(#dg-barre) .espace { display: none }
.top #dg-barre { flex: 1 1 280px; min-width: 200px; max-width: none }
.top #dg-barre input[type="search"] { width: 100%; min-width: 0 }
@media (max-width: 760px) { .top #dg-barre { flex-basis: 100%; order: 5 } }

/* Commande : espace de travail plein écran (produits, panier, marge, livraison), totaux toujours visibles */
.cm-outils { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem }
.cm-outils input[type="search"] { flex: 1 1 320px; min-width: 220px; font-size: 1rem; padding: .6rem .8rem }
.cm-scroll { max-height: calc(100vh - 23rem); min-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
.cm-t thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2, var(--panel)); box-shadow: 0 1px 0 var(--line) }
.cm-t td { vertical-align: middle }
.cm-t tr.cm-dans { background: var(--accent-soft) }
.cm-t input[type="number"] { text-align: right }
.cm-offre { cursor: pointer; margin: .1rem .15rem .1rem 0; white-space: nowrap }
.cm-offre:hover { background: var(--accent-soft); border-color: var(--accent) }
.cm-pan[hidden] { display: none }
.cm-badge:not(:empty) { margin-left: .4rem; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 700 }
.cm-glob { margin-top: .7rem; gap: 1rem; align-items: end; flex-wrap: wrap }
.cm-vide { padding: 2.5rem 1rem; text-align: center }
.cm-bar { flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center }
.cm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin-bottom: .8rem }
.cm-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem }
.cm-kpi b { font-size: 1.45rem; line-height: 1.2 }
.cm-jauge { position: relative; height: 14px; background: var(--grey-soft); border-radius: 999px; margin: 1.6rem .6rem .4rem }
.cm-jauge .cm-val { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; transition: width .25s }
.cm-jauge .cm-rep { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink) }
.cm-jauge .cm-rep i { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; white-space: nowrap; color: var(--slate) }
@media (max-width: 760px) { .cm-scroll { max-height: calc(100vh - 17rem) } .cm-outils input[type="search"] { flex-basis: 100% } }
.cm-outils > input[type="search"] { width: auto }
.cm-outils > select { width: auto; flex: 0 0 auto; min-width: 12rem; max-width: 20rem }
.cm-offre-fort { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); font-weight: 700 }
.cm-offre-gen { opacity: .8; font-weight: 500 }
.cm-kpis > .card, .cm-pan .grid > .card, .cm-pan .grid > .stack > .card { margin-top: 0 }

/* Conquête : lecture plus claire (entonnoir, indicateurs, cartes prospect, filtres repliés) */
.cq-pipe { display: flex; align-items: stretch; gap: .3rem; margin: .4rem 0 .6rem; flex-wrap: wrap }
.cq-etape { position: relative; flex: 1 1 130px; min-width: 120px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .8rem .7rem; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: .05rem; transition: border-color .15s, transform .15s }
.cq-etape:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px) } .cq-etape:disabled { opacity: .55; cursor: default }
.cq-etape .cq-n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink) } .cq-etape .cq-l { font-size: .78rem; color: var(--slate); font-weight: 600 }
.cq-etape i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); border-radius: 0 3px 0 0; opacity: .85 }
.cq-etape.e-qualifie i { background: var(--blue) } .cq-etape.e-priorise i { background: var(--green) } .cq-etape.e-en_action i { background: var(--amber) } .cq-etape.e-converti i { background: var(--green) }
.cq-fl { align-self: center; color: var(--slate); font-size: 1.4rem; line-height: 1 }
.cq-info { margin: 0 0 .4rem; font-size: .84rem } .cq-info summary { cursor: pointer; color: var(--slate) } .cq-info p { margin: .3rem 0 0 }
.cq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; margin-bottom: .9rem }
.cq-kpi { display: flex; flex-direction: column; gap: .1rem; text-align: left; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; font: inherit; color: inherit; cursor: pointer }
.cq-kpi[role="status"] { cursor: default } .cq-kpi:disabled { opacity: .6; cursor: default } .cq-kpi:hover:not(:disabled):not([role="status"]) { border-color: var(--accent) }
.cq-kpi small { color: var(--slate); font-weight: 600; font-size: .78rem } .cq-kpi b { font-size: 1.9rem; line-height: 1.15 } .cq-kpi span { color: var(--slate); font-size: .78rem }
.cq-kpi.t-bleu { border-top-color: var(--blue) } .cq-kpi.t-ambre { border-top-color: var(--amber) } .cq-kpi.t-vert { border-top-color: var(--green) } .cq-kpi.t-rouge { border-top-color: var(--red) } .cq-kpi.t-violet { border-top-color: var(--violet, var(--accent)) } .cq-kpi.t-gris { border-top-color: var(--line-2, var(--line)) }
.cq-opp { display: flex; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line) } .cq-opp:first-of-type { border-top: 0 }
.cq-rang { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: grid; place-items: center; font-size: .85rem }
.cq-jauge { height: 6px; border-radius: 99px; background: var(--grey-soft); margin: .35rem 0; overflow: hidden } .cq-jauge i { display: block; height: 100%; background: var(--accent); border-radius: 99px }
.cq-raisons { display: flex; flex-wrap: wrap; gap: .25rem } .cq-raisons .chip { margin: 0; white-space: normal }
.cq-barre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem } .cq-barre input[type="search"] { flex: 1 1 240px; min-width: 200px; max-width: 360px }
.cq-barre select, .cq-plus select { width: auto; max-width: 17rem }
.cq-plus { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem; margin-bottom: .5rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r) } .cq-plus[hidden] { display: none }
.cq-outils { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .8rem }
.conq-liste { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: .9rem }
.conq-carte { gap: .55rem; padding: .9rem 1rem; border-left-width: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04) }
.cq-tete { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; flex-wrap: wrap } .cq-tete .nom b { font-size: 1.02rem } .cq-sous { color: var(--slate); font-size: .82rem; margin-top: .1rem } .cq-pills { display: flex; gap: .35rem; flex-wrap: wrap }
.cq-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; background: var(--panel-2); border-radius: 10px; padding: .55rem .7rem }
.cq-stats small { display: block; color: var(--slate); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em } .cq-stats b { font-size: 1rem } .cq-stats .cq-u { font-weight: 500; color: var(--slate); font-size: .78rem } .cq-stats .cq-txt { font-size: .85rem; font-weight: 600 }
.cq-pourquoi { font-size: .84rem } .cq-pourquoi summary { cursor: pointer; color: var(--accent); font-weight: 600 }
.cq-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--line) }
.cq-prio { display: inline-flex; gap: .2rem }
@media (max-width: 760px) { .conq-liste { grid-template-columns: minmax(0, 1fr) } .cq-fl { display: none } .cq-etape { flex-basis: 45% } .cq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.cq-outils select { width: auto; max-width: 18rem }
.cm-outils > input[type="search"] { flex: 2 1 380px } .cm-outils > select { flex: 0 1 12rem; min-width: 9rem }
.grid[hidden], .stack[hidden], .form[hidden], label.f[hidden] { display: none !important }

/* Commande : contexte client, vues d'habitudes, alertes */
.cm-ctx { margin: .4rem 0 .6rem; padding: .6rem .9rem } .cm-ctx > summary { cursor: pointer; list-style: revert }
.cm-ctx-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-top: .6rem }
.cm-ctx-t { display: flex; flex-direction: column; gap: .05rem; background: var(--panel-2); border-radius: 10px; padding: .5rem .7rem }
.cm-ctx-t small { color: var(--slate); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em } .cm-ctx-t b { font-size: 1.05rem } .cm-ctx-t span { color: var(--slate); font-size: .74rem }
.cm-alertes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem }
.cm-al { display: inline-flex; gap: .35rem; align-items: baseline; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .25rem .5rem } .cm-al.alerte { background: var(--amber-soft); border-color: var(--amber) }
.cm-vues { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem } .cm-vue { font-size: .84rem; padding: .3rem .8rem } .cm-vue b { margin-left: .2rem }
.cm-outils > select[hidden] { display: none }
.cm-ctx-grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; margin-top: .4rem } .cm-ctx-t { padding: .3rem .6rem } .cm-ctx-t b { font-size: .95rem } .cm-ctx-t small { font-size: .66rem }
.cm-prec { margin-top: .5rem } .cm-prec > summary { cursor: pointer }
.cm-digest { display: block; margin-top: .15rem; color: var(--slate) } .cm-ctx[open] .cm-digest { display: none }


/* Carte : zones par jour de passage, conquête et veille */
.legende-jours { display: grid; gap: .3rem }
.jz { display: grid; grid-template-columns: auto auto 1fr auto; gap: .5rem; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 9px; padding: .4rem .6rem; font: inherit; color: inherit; cursor: pointer }
.jz i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); display: inline-block } .jz span { color: var(--slate); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .jz small { color: var(--slate) }
.jz:hover { border-color: var(--c) } .jz.actif { background: color-mix(in srgb, var(--c) 14%, var(--panel)); border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent) }
.cq-marq { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--c); color: var(--c); display: grid; place-items: center; font-size: 12px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .35) }
.cq-veille { font-size: 15px; color: #7A4FD0; text-shadow: 0 0 3px #fff, 0 0 3px #fff; line-height: 1 }

/* Tableaux de commande sans glissière : colonnes réparties, contenus à la ligne, saisies compactes */
.cm-fixe { table-layout: fixed; width: 100% } .cm-fixe th, .cm-fixe td { padding: .45rem .55rem; overflow-wrap: anywhere; vertical-align: top }
.cm-scroll { overflow-x: hidden }
.cm-saisie { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; align-items: center } .cm-saisie input { width: 3.6rem; min-width: 0; padding: .35rem .3rem; text-align: right }
.cm-chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .25rem } .cm-chips .chip-f { margin: 0; white-space: normal; text-align: left }
.cm-fixe .pa, .cm-fixe .r { width: 100%; max-width: 6rem; padding: .35rem .3rem } .cm-act { white-space: normal } .cm-act .btn { margin: 0 .15rem .15rem 0 }
.cm-fixe .cm-t td .btn.small { padding: .25rem .55rem }

/* Commande : saisies centrées sous leur titre, menu latéral masqué (ouvert par ☰) pour laisser la place aux tableaux */
.cm-fixe th.cm-ctr, .cm-fixe td.cm-ctr { text-align: center }
.cm-fixe .cm-in { width: 100%; max-width: 5.6rem; min-width: 0; padding: .35rem .3rem; text-align: center }
body.espace-large .shell { grid-template-columns: 1fr }
body.espace-large .side { position: fixed; z-index: 50; width: var(--side); transform: translateX(-100%); transition: transform .2s, visibility .2s; visibility: hidden }
body.espace-large.menu .side { transform: none; visibility: visible; box-shadow: var(--shadow-lg) }
body.espace-large .menu-btn { display: inline-flex }

/* ---------- Conquête commerciale : poste de pilotage de la prospection (bandeau de mission, entonnoir, anneaux de rang, session) ---------- */
.cq-hero { position: relative; overflow: hidden; background: var(--side-bg); color: var(--side-ink); border-radius: calc(var(--r) + 6px); padding: 1.2rem 1.4rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--shadow-lg) }
.cq-hero > * { position: relative }
.cq-hero h1 { color: #fff; margin: 0 0 .15rem } .cq-hero-sous { margin: 0; color: var(--side-muted); font-size: .86rem }
.cq-hero-haut { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start }
.cq-hero-cta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch }
.cq-go { font-weight: 700; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem; line-height: 1.2; background: var(--accent); color: var(--on-accent); border-color: transparent }
.cq-go small { font-weight: 500; font-size: .7rem; opacity: .8 } .cq-go kbd { margin-left: .3rem }
.cq-hero .cq-go { background: #F2A900; color: #1B1500; padding: .6rem 1.1rem; box-shadow: 0 0 0 0 rgba(242, 169, 0, .5); animation: cq-pouls 3.2s ease-out 1s infinite } .cq-hero .cq-go:hover { filter: brightness(1.08) }
.cq-hero .btn.sec { background: transparent; color: var(--side-ink); border-color: rgba(255, 255, 255, .28) } .cq-hero .btn.sec:hover { background: rgba(255, 255, 255, .1) }
.cq-hero .pill { background: rgba(255, 255, 255, .14); color: #fff }
.cq-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin: 1rem 0 .8rem }
.cq-puce { text-align: left; font: inherit; color: inherit; cursor: pointer; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-left: 4px solid var(--c, rgba(255, 255, 255, .4)); border-radius: 12px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .05rem; transition: background .15s, transform .15s }
.cq-puce:hover:not(:disabled) { background: rgba(255, 255, 255, .13); transform: translateY(-1px) } .cq-puce:disabled { cursor: default; opacity: .7 }
.cq-puce b { font-size: 1.75rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums } .cq-puce span { font-weight: 600; font-size: .84rem } .cq-puce small { color: var(--side-muted); font-size: .72rem }
.cq-puce.t-rouge { --c: #FF8C7F } .cq-puce.t-bleu { --c: #B9C8E2 } .cq-puce.t-vert { --c: #52DDB2 } .cq-puce.t-or { --c: #F2A900 } .cq-puce.t-gris { --c: rgba(255, 255, 255, .35) }
.cq-hero .cq-pipe { margin: 0; gap: .35rem }
.cq-hero .cq-etape { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--side-ink) }
.cq-hero .cq-etape:hover:not(:disabled) { border-color: #F2A900; background: rgba(255, 255, 255, .11) }
.cq-hero .cq-etape .cq-n { color: #fff; font-variant-numeric: tabular-nums } .cq-hero .cq-etape .cq-l { color: var(--side-ink) } .cq-hero .cq-fl { color: var(--side-muted) }
.cq-hero .cq-etape i { height: 5px; background: #F2A900; transform-origin: left; animation: cq-barre .9s cubic-bezier(.2, .8, .2, 1) both }
.cq-hero .cq-etape.e-qualifie i { background: #B9C8E2 } .cq-hero .cq-etape.e-priorise i { background: #52DDB2 } .cq-hero .cq-etape.e-en_action i { background: #F2BE5C } .cq-hero .cq-etape.e-converti i { background: #52DDB2 }
/* anneau de rang d'opportunité */
.cq-anneau { position: relative; display: inline-grid; place-items: center; width: var(--t, 60px); height: var(--t, 60px); flex: none }
.cq-anneau svg { position: absolute; inset: 0; width: 100%; height: 100% } .cq-anneau circle { fill: none; stroke-width: 6 } .cq-anneau .fond { stroke: var(--line) }
.cq-anneau .val { stroke: currentColor; stroke-linecap: round; animation: cq-anneau .9s cubic-bezier(.2, .8, .2, 1) both }
.cq-anneau b { font-size: calc(var(--t, 60px) * .32); font-variant-numeric: tabular-nums; color: var(--ink) }
.cq-anneau.n-h { color: var(--green) } .cq-anneau.n-m { color: var(--amber) } .cq-anneau.n-b { color: var(--slate) } .cq-anneau.n-x { color: var(--muted) }
/* carte prospect */
.cq2 { animation: cq-entree .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); transition: box-shadow .15s, transform .15s } .cq2:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px) }
.cq2 .cq-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem }
.cq-pot { text-align: right; display: flex; flex-direction: column; align-items: flex-end } .cq-pot small { color: var(--slate); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em }
.cq-pot b { font-size: 1.2rem; line-height: 1.15; font-variant-numeric: tabular-nums } .cq-pot .cq-u { color: var(--slate); font-size: .72rem }
.cq2 .cq-pills { margin-top: .35rem }
.cq-suite { background: var(--accent-soft); color: var(--ink); border-radius: 8px; padding: .4rem .65rem; font-size: .83rem; display: flex; gap: .4rem; align-items: baseline } .cq-suite b { white-space: nowrap }
.cq2 .cq-actions .btn.small { min-height: 30px }
/* à faire maintenant */
.cq-focus { display: flex; gap: 1.1rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid #F2A900; border-radius: var(--r); padding: 1rem 1.2rem; margin-bottom: .9rem; box-shadow: var(--shadow); animation: cq-entree .45s cubic-bezier(.2, .8, .2, 1) both }
.cq-focus h2 { margin: .1rem 0 .4rem; font-size: 1.25rem } .cq-focus h2 a { color: var(--ink); text-decoration: none } .cq-eyebrow { color: var(--slate); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem }
.cq-focus-a { margin: .45rem 0 .6rem; font-size: .88rem }
.cq-kpi b { font-variant-numeric: tabular-nums } .cq-kpi { transition: transform .15s, border-color .15s } .cq-kpi:hover:not(:disabled):not([role="status"]) { transform: translateY(-2px) }
/* session de prospection */
.cq-fige { overflow: hidden }
.cq-session { position: fixed; inset: 0; z-index: 800; background: rgba(20, 29, 45, .78); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 4vh 1rem; overflow-y: auto; animation: cq-fondu .2s both }
.cq-s-boite { width: min(780px, 100%); background: var(--panel); color: var(--ink); border-radius: 18px; padding: 1.1rem 1.3rem 1rem; box-shadow: var(--shadow-lg); margin: auto }
.cq-s-haut { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-bottom: .9rem }
.cq-s-prog { height: 8px; border-radius: 99px; background: var(--grey-soft); overflow: hidden } .cq-s-prog i { display: block; height: 100%; background: #F2A900; border-radius: 99px; transition: width .35s cubic-bezier(.2, .8, .2, 1) }
.cq-s-carte { animation: cq-glisse .3s cubic-bezier(.2, .8, .2, 1) both } .cq-s-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: .6rem }
.cq-s-tete h2 { margin: 0 0 .1rem; font-size: 1.35rem } .cq-s-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line) }
.cq-s-pied { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .9rem; flex-wrap: wrap }
.cq-s-fin { text-align: center; padding: 2rem 1.5rem } .cq-s-fin h2 { margin-top: 0 }
kbd { font: 600 .66rem/1 var(--sans, inherit); border: 1px solid currentColor; border-radius: 4px; padding: .1rem .3rem; opacity: .6; margin-left: .25rem }
@keyframes cq-entree { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes cq-glisse { from { opacity: 0; transform: translateX(18px) } to { opacity: 1; transform: none } }
@keyframes cq-fondu { from { opacity: 0 } to { opacity: 1 } }
@keyframes cq-barre { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes cq-anneau { from { stroke-dasharray: 0 999 } }
@keyframes cq-pouls { 0% { box-shadow: 0 0 0 0 rgba(242, 169, 0, .5) } 70%, 100% { box-shadow: 0 0 0 14px rgba(242, 169, 0, 0) } }
@media (max-width: 760px) {
  .cq-hero { padding: 1rem } .cq-brief { grid-template-columns: repeat(2, minmax(0, 1fr)) } .cq-hero-cta { width: 100% } .cq-hero-cta .btn { flex: 1 }
  .cq2 .cq-tete, .cq-s-tete { grid-template-columns: auto minmax(0, 1fr) } .cq-pot { grid-column: 1 / -1; text-align: left; align-items: flex-start }
  .cq-focus { flex-direction: column; align-items: flex-start } .cq-s-haut { grid-template-columns: 1fr auto } .cq-s-prog { grid-column: 1 / -1; order: 3 } .cq-session { padding: 0 } .cq-s-boite { border-radius: 0; min-height: 100%; width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  .cq2, .cq-focus, .cq-s-carte, .cq-session, .cq-hero .cq-go, .cq-hero .cq-etape i, .cq-anneau .val { animation: none !important } .cq2:hover, .cq-kpi:hover, .cq-puce:hover { transform: none }
}

/* Démonstration : outils de l'en-tête (jeton, notifications, IA, thème) rangés dans la bande du haut, qui reste visible au défilement */
.bandeau-demo { position: sticky; top: 0; z-index: 40 }
.top.vide:not(:has(#dg-barre)) { display: none }
.top:empty, .top .fraicheur:empty { display: none }
.outils-bande { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto }
.outils-bande .btn, .outils-bande .chip-jeton { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; min-height: 28px; padding: .1rem .6rem; font-size: .76rem; display: inline-flex; align-items: center; gap: .3rem }
.outils-bande .btn:hover, .outils-bande .chip-jeton:hover { background: rgba(255, 255, 255, .2) }
.outils-bande .btn svg, .outils-bande .chip-jeton svg { flex: none }
.outils-bande .chip-jeton.hidden, .outils-bande .btn.hidden, .outils-bande .hidden { display: none }
.outils-bande .pill { font-size: .72rem; padding: .1rem .55rem }
.bandeau-demo .menu-btn { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25) }
@media (max-width: 760px) { .outils-bande { width: 100%; margin-left: 0; justify-content: flex-end } }

/* Commandes : aperçu du panier et des contrôles, sans quitter le catalogue */
.cm-mini-b { margin-left: auto } .cm-mini-b b { margin-left: .25rem; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 0 .4rem } .cm-mini-t { font-weight: 500; font-size: .8rem } .cm-mini-b .pill { margin-left: .35rem }
.cm-mini { position: relative; z-index: 5; margin: 0 0 .5rem auto; width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .8rem .9rem }
.cm-mini.hidden { display: none }
.cm-mini-l { max-height: 38vh; overflow: auto; margin-top: .4rem; border-top: 1px solid var(--line) }
.cm-mini-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--line-2); font-size: .85rem }
.cm-mini-r small { display: block; color: var(--slate); font-size: .72rem }

/* Carte : épingles à pictogramme (client = boutique, prospect = cible, agence = maison, concurrence = drapeau) */
.ep { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .38)); transform-origin: 50% 100%; transition: transform .15s }
.ep svg { display: block; width: 100%; height: 100%; overflow: visible }
.ep .ep-c { fill: var(--c, #55514A); stroke: #fff; stroke-width: 1.7; stroke-linejoin: round }
.ep .ep-g { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round } .ep .ep-g .plein { fill: #fff; stroke: none }
.ep .ep-t { fill: #fff; font: 800 14px/1 var(--sans, system-ui); }
.ep:hover { transform: scale(1.15) }
.ep.decrochage { --c: #E0473C } .ep.potentiel { --c: #E08E0B } .ep.sain { --c: #0E9F6E } .ep.prospect { --c: #6547C0 }
.ep.jour { --c: #30496F } .ep.jour.acceptee { --c: #0B805A } .ep.jour.ajoutee { --c: #7A5C3E } .ep.jour .ep-t { font-size: 15px }
.ep.approx .ep-c { stroke: #30496F; stroke-dasharray: 3.2 2.4; fill-opacity: .82 }
.ep.selection { transform: scale(1.12); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) } .ep.selection .ep-c { stroke: #30496F; stroke-width: 2.6 }
.ep-mini { display: inline-block; width: 14px; height: 18px; vertical-align: -3px; margin-right: .1rem } .ep-mini .ep { filter: none }
.dot.prospect { background: #6547C0 }
@media (prefers-reduced-motion: reduce) { .ep { transition: none } .ep:hover { transform: none } }

/* Commande en plein écran : tout l'espace est pour le catalogue, le panier et les contrôles */
body.plein-ecran .shell { grid-template-columns: 1fr }
body.plein-ecran .side, body.plein-ecran .top, body.plein-ecran .bandeau-demo { display: none }
body.plein-ecran .page { max-width: none; padding: .7rem 1.1rem 4.5rem }
body.plein-ecran .cm-scroll { max-height: calc(100vh - 14.5rem) }
body.plein-ecran .entete { margin-bottom: .4rem }
@media (max-width: 760px) { body.plein-ecran .page { padding: .5rem .6rem 4.5rem } body.plein-ecran .cm-scroll { max-height: calc(100vh - 16rem) } }

/* Commande : police réduite et lignes compactes pour prendre une commande vite (au moins dix produits visibles sans glissière) */
html:has(body.plein-ecran) { font-size: 12.5px }
body.plein-ecran .page { padding: .5rem .9rem 3.6rem }
body.plein-ecran h1 { font-size: 1.15rem; margin: 0 }
body.plein-ecran .entete { margin: 0 0 .25rem; gap: .5rem } body.plein-ecran .entete .small { font-size: .78rem }
body.plein-ecran .tabs { margin: 0 0 .3rem } body.plein-ecran .tabs button { padding: .3rem .8rem }
body.plein-ecran .btn { min-height: 28px; padding: .15rem .7rem } body.plein-ecran .btn.small { min-height: 26px; padding: .1rem .55rem }
body.plein-ecran input:not([type="checkbox"]):not([type="radio"]), body.plein-ecran select { min-height: 28px; padding: .15rem .45rem }
body.plein-ecran .pill { font-size: .7rem; padding: .02rem .4rem }
body.plein-ecran .cm-vues { margin: 0 0 .3rem; gap: .3rem } body.plein-ecran .cm-vue { padding: .15rem .65rem; font-size: .8rem }
body.plein-ecran .cm-outils { gap: .35rem; margin-bottom: .2rem } body.plein-ecran .cm-outils input[type="search"] { padding: .25rem .6rem; font-size: .95rem; flex: 2 1 300px }
body.plein-ecran #cat-n { margin: 0 0 .25rem !important; font-size: .72rem }
body.plein-ecran .cm-scroll { max-height: calc(100vh - 13.5rem); min-height: 33rem }
body.plein-ecran .cm-fixe th, body.plein-ecran .cm-fixe td { padding: .2rem .4rem; vertical-align: middle }
body.plein-ecran .cm-fixe th { font-size: .7rem } body.plein-ecran .cm-fixe .cm-in { padding: .1rem .25rem; max-width: 4.6rem }
body.plein-ecran .cm-cat td { line-height: 1.25 } body.plein-ecran .cm-cat .tiny { font-size: .68rem }
body.plein-ecran .cm-cat td:first-child > div, body.plein-ecran .cm-cat td:nth-child(2) > div, body.plein-ecran .cm-cat td:nth-child(3) > div { display: inline; margin-right: .4rem }
body.plein-ecran .cm-cat td:nth-child(2) > .pill + div { margin-left: .3rem }
body.plein-ecran .cm-cat .cm-chips { display: inline } body.plein-ecran .cm-cat .cm-offre { padding: 0 .4rem; font-size: .68rem; min-height: 0 }
body.plein-ecran .cm-cat .pn { display: inline; margin-left: .2rem }
body.plein-ecran .cm-bar { padding: .35rem .9rem; font-size: .8rem } body.plein-ecran .cm-mini { font-size: .85rem }
body.plein-ecran .cm-ctx, body.plein-ecran .card { padding: .6rem .8rem }
@media (max-width: 760px) { body.plein-ecran .cm-scroll { max-height: calc(100vh - 15rem) } }
.cm-fam th { background: var(--accent-soft); color: var(--ink); text-align: left; font-size: .78rem; font-weight: 700; padding: .3rem .5rem; letter-spacing: .02em; border-top: 1px solid var(--line) }
body.plein-ecran .cm-cat tr.cm-fam th { padding: .2rem .5rem }
.cm-flyer .cm-tarif b { font-size: 1.12rem; font-variant-numeric: tabular-nums } .cm-vue[data-vue="mercuriale"] { border-color: #F2A900 }

/* Commande : corrections directes dans « Livraison et contrôle » */
.cm-corr { margin: .25rem 0 .1rem } .cm-corr .btn { min-height: 26px }
.cm-manque > span, .cm-manque > legend { color: var(--red) } .cm-manque input { border-color: var(--red) } .cm-manque { border-left: 3px solid var(--red); padding-left: .45rem }
.cm-req { font-size: .66rem; font-weight: 700; background: var(--red-soft); color: var(--red); border-radius: 999px; padding: 0 .4rem; margin-left: .25rem }
.cm-flash { outline: 3px solid #F2A900; outline-offset: 2px; animation: cq-pouls 1.1s ease-out 2 } @media (prefers-reduced-motion: reduce) { .cm-flash { animation: none } }
#f-corr .form { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .4rem .8rem }

/* Catalogues métier : facettes, caractéristiques techniques, indicateurs du panier */
.cm-facettes { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin: 0 0 .3rem } .cm-facettes:empty { display: none }
.cm-facettes select { width: auto; max-width: 14rem; min-height: 28px; font-size: .85rem } .cm-fac-h { display: inline-flex; gap: .25rem; align-items: center; padding: .1rem .35rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2) }
.cm-fac-c { display: inline-flex; gap: .3rem; align-items: center; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2) }
.cm-cars { font-size: .74rem; line-height: 1.35 } .cm-car { display: block } .cm-car i { font-style: normal; color: var(--slate); font-weight: 600; margin-right: .15rem } .cm-car i::after { content: " :" }
body.plein-ecran .cm-cat td.cm-cars { padding-top: .15rem; padding-bottom: .15rem }
.cm-ind { display: inline-flex; gap: .3rem; align-items: baseline; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .02rem .55rem; font-size: .76rem } .cm-ind b { font-variant-numeric: tabular-nums }
.cm-mini-ind { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem }
#f-ctxm.form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem .8rem } #f-ctxm small { display: block }
body.plein-ecran .cm-cat td:first-child > b + div { margin-left: .45rem }
body.plein-ecran .cm-car { display: inline; margin-right: .55rem } body.plein-ecran .cm-car::after { content: ""; }
body.plein-ecran .cm-outils select { font-size: .85rem; max-width: 13rem }