/* =====================================================================
   PARIZII — design system 2026
   Clair / sombre, surfaces chaudes, accents terre cuite (marque) et indigo (analyse).
   ===================================================================== */

:root {
  color-scheme: light;
  --bg: #f6f5f1;
  --bg-2: #efede7;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f2f0eb;
  --surface-verre: rgba(255, 255, 255, .72);
  --border: #e7e4dd;
  --border-2: #d8d4ca;
  --text: #1b1a17;
  --text-2: #57534b;
  --text-3: #6f6a62;
  --text-inverse: #ffffff;

  --brand: #c2461e;
  --brand-2: #a53b17;
  --brand-soft: #fcede6;
  --brand-ink: #9a3412;
  --accent: #5b5bf0;
  --accent-2: #4747d6;
  --accent-soft: #eeeefe;

  --ok: #0f8a4c;     --ok-soft: #e3f5ea;
  --warn: #a86400;   --warn-soft: #fdf1da;
  --danger: #c93636; --danger-soft: #fce9e9;
  --info: #2a78d6;   --info-soft: #e7f0fc;
  --violet: #7c3aed; --violet-soft: #f1eafe;

  /* graphiques (palette validée — voir skill dataviz) */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948;
  --grille: #ebe9e3; --axe: #c9c5bb;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  --ombre-1: 0 1px 2px rgba(28, 22, 12, .05);
  --ombre-2: 0 1px 2px rgba(28, 22, 12, .04), 0 10px 28px -10px rgba(28, 22, 12, .14);
  --ombre-3: 0 30px 80px -20px rgba(28, 22, 12, .35), 0 2px 6px rgba(28, 22, 12, .06);
  --anneau: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  --r-xl: 20px; --r: 14px; --r-sm: 10px; --r-xs: 7px;
  --police: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --menu-l: 252px;
  --transition: 160ms cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0e;
  --bg-2: #161615;
  --surface: #1a1a19;
  --surface-2: #1f1f1d;
  --surface-3: #282826;
  --surface-verre: rgba(26, 26, 25, .78);
  --border: #2d2c29;
  --border-2: #3c3b37;
  --text: #f4f3ee;
  --text-2: #c3c2b7;
  --text-3: #8f8c83;

  --brand: #f0703f;
  --brand-2: #ff8656;
  --brand-soft: #3a2018;
  --brand-ink: #ffb08f;
  --accent: #8b8bff;
  --accent-2: #a3a3ff;
  --accent-soft: #24244a;

  --ok: #3cc47c;     --ok-soft: #14301f;
  --warn: #f0b44a;   --warn-soft: #382a10;
  --danger: #f07272; --danger-soft: #3d1c1c;
  --info: #5aa0f0;   --info-soft: #162a42;
  --violet: #a78bfa; --violet-soft: #2a1f47;

  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
  --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767;
  --grille: #2a2a28; --axe: #3a3936;
  --seq-1: #16304f; --seq-2: #184f95; --seq-3: #1c5cab; --seq-4: #2a78d6; --seq-5: #5598e7; --seq-6: #86b6ef; --seq-7: #cde2fb;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --ombre-3: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 var(--police); font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--police-titre); margin: 0; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 14.5px; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--anneau); border-radius: var(--r-xs); }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muet { color: var(--text-3); }
.secondaire { color: var(--text-2); }
.petit { font-size: 12.5px; }
.tres-petit { font-size: 11.5px; }
.gras { font-weight: 600; }
.chiffres { font-variant-numeric: tabular-nums; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ligne { display: flex; align-items: center; gap: 8px; }
.ligne-l { display: flex; align-items: center; gap: 12px; }
.pile { display: flex; flex-direction: column; gap: 4px; }
.pousse { margin-left: auto; }
.flex-1 { flex: 1; min-width: 0; }
.centre { text-align: center; }
.droite { text-align: right; }
.enveloppe { flex-wrap: wrap; }
.ok-texte { color: var(--ok); } .warn-texte { color: var(--warn); } .danger-texte { color: var(--danger); } .info-texte { color: var(--info); }
kbd {
  font: 600 11px/1 var(--police); padding: 3px 6px; border-radius: 6px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 0 var(--border-2);
}
hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone.plein { fill: currentColor; stroke: none; }

/* ---------- Mise en page de l'application ---------- */
.app { display: grid; grid-template-columns: var(--menu-l) minmax(0, 1fr); min-height: 100vh; }
.app.reduit { --menu-l: 72px; }

.menu-lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px 12px; background: var(--bg); border-right: 1px solid var(--border); overflow: hidden;
}
.espace {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 4px; border-radius: var(--r-sm);
  border: 0; background: none; text-align: left; width: 100%;
}
.espace:hover { background: var(--surface-3); }
.logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, #ef7a43 0%, #d4532a 55%, #a63b1c 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(212, 83, 42, .7);
}
.logo svg { width: 22px; height: 22px; }
.espace-nom { font: 650 15px/1.1 var(--police-titre); letter-spacing: -.01em; }
.espace-sous { font-size: 12px; color: var(--text-3); }
.recherche-globale {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; margin: 6px 0 4px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-3); width: 100%;
  box-shadow: var(--ombre-1); transition: border-color var(--transition);
}
.recherche-globale:hover { border-color: var(--border-2); color: var(--text-2); }
.recherche-globale span { flex: 1; text-align: left; }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.nav-section { margin-top: 12px; }
.nav-titre {
  display: flex; align-items: center; gap: 4px; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600;
  color: var(--text-3); letter-spacing: .01em; border: 0; background: none; width: 100%;
}
.nav-titre .icone { width: 13px; height: 13px; transition: transform var(--transition); }
.nav-section.ferme .nav-titre .icone { transform: rotate(-90deg); }
.nav-section.ferme .nav-liens { display: none; }
.nav-lien {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px;
  color: var(--text-2); font-weight: 500; position: relative; white-space: nowrap; text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}
.nav-lien:hover { background: var(--surface-3); color: var(--text); }
.nav-lien.actif { background: var(--surface); color: var(--text); box-shadow: var(--ombre-1), inset 0 0 0 1px var(--border); }
.nav-lien.actif .icone { color: var(--brand); }
.nav-lien .pastille { margin-left: auto; }
.pastille {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--brand); color: #fff;
}
.pastille.douce { background: var(--surface-3); color: var(--text-2); }
.menu-bas { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.carte-moi {
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); border: 0; background: none; width: 100%; text-align: left;
}
.carte-moi:hover { background: var(--surface-3); }
.app.reduit .espace-texte, .app.reduit .recherche-globale span, .app.reduit .recherche-globale kbd, .app.reduit .nav-titre,
.app.reduit .nav-lien span, .app.reduit .nav-lien .pastille, .app.reduit .carte-moi .pile { display: none; }
.app.reduit .nav-lien { justify-content: center; padding: 0; }
.app.reduit .recherche-globale { justify-content: center; padding: 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barre-mobile { display: none; }
.page { padding: 22px 28px 48px; max-width: 1640px; width: 100%; margin: 0 auto; animation: apparition .22s ease-out; }
.page.pleine { max-width: none; }
@keyframes apparition { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.entete-page { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.entete-page .titres { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tuile-icone {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff;
  background: var(--c, var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px var(--c, var(--brand));
}
.tuile-icone .icone { width: 20px; height: 20px; }
.entete-page .sous-titre { color: var(--text-3); font-size: 13px; margin-top: 1px; }
.entete-page .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 550; white-space: nowrap; box-shadow: var(--ombre-1);
  transition: background var(--transition), border-color var(--transition), transform 80ms, box-shadow var(--transition);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .icone { width: 16px; height: 16px; }
.btn-primaire { background: var(--brand); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primaire:hover { background: var(--brand-2); border-color: transparent; }
.btn-accent { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-accent:hover { background: var(--accent-2); border-color: transparent; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.btn-danger-plein { background: var(--danger); color: #fff; border-color: transparent; }
.btn-danger-plein:hover { background: color-mix(in srgb, var(--danger) 85%, black); border-color: transparent; }
.btn-fantome { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-fantome:hover { background: var(--surface-3); color: var(--text); border-color: transparent; }
.btn-icone { width: 36px; padding: 0; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn-sm.btn-icone { width: 30px; padding: 0; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-bloc { width: 100%; }
.groupe-btn { display: inline-flex; }
.groupe-btn .btn { border-radius: 0; margin-left: -1px; }
.groupe-btn .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.groupe-btn .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.segment {
  display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--border); gap: 2px;
}
.segment button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 550; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.segment button:hover { color: var(--text); }
.segment button.actif { background: var(--surface); color: var(--text); box-shadow: var(--ombre-1), 0 0 0 1px var(--border); }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ > label, .etiquette { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.champ .aide { font-size: 12px; color: var(--text-3); }
.champ .requis { color: var(--brand); }
.saisie, .champ input:not([type=checkbox]):not([type=radio]):not([type=color]), .champ select, .champ textarea, select.saisie {
  height: 38px; width: 100%; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea, textarea.saisie { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.saisie:hover, .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--border-2); }
.saisie:focus, .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--brand); box-shadow: var(--anneau); }
.champ input[type=color] { width: 44px; height: 38px; padding: 3px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); }
select.saisie, .champ select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a857b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.saisie.sm { height: 32px; font-size: 13px; padding: 0 10px; border-radius: 8px; }
select.saisie.sm { padding-right: 30px; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--danger); }
.champ .erreur { font-size: 12px; color: var(--danger); }
.grille-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 14px; }
.grille-form > .plein { grid-column: span 6; }
.grille-form > .demi { grid-column: span 3; }
.grille-form > .tiers { grid-column: span 2; }
.grille-form > .deux-tiers { grid-column: span 4; }
.grille-form > .titre-section { grid-column: span 6; font-weight: 650; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.case { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-weight: 500; }
.case input { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }
.interrupteur { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.interrupteur input { appearance: none; width: 36px; height: 21px; border-radius: 999px; background: var(--border-2); margin: 0; position: relative; transition: background var(--transition); cursor: pointer; flex: none; }
.interrupteur input::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--transition); }
.interrupteur input:checked { background: var(--brand); }
.interrupteur input:checked::after { transform: translateX(15px); }
.recherche { position: relative; }
.recherche .icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 16px; height: 16px; pointer-events: none; }
.recherche input { padding-left: 34px !important; }
.puces-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-choix {
  height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 550;
  color: var(--text-2); display: inline-flex; align-items: center; gap: 6px;
}
.puce-choix:hover { border-color: var(--border-2); color: var(--text); }
.puce-choix.actif { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.puce-choix .point { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* ---------- Cartes, tuiles ---------- */
.carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--ombre-1); }
.carte-corps { padding: 18px; }
.carte-entete { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); min-height: 54px; }
.carte-entete h2, .carte-entete h3 { font-size: 14.5px; }
.carte-entete .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.carte-pied { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.grille { display: grid; gap: 16px; }
.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-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mt { margin-top: 16px; } .mt-s { margin-top: 8px; } .mb { margin-bottom: 16px; } .mb-s { margin-bottom: 8px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tuile { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--ombre-1); position: relative; overflow: hidden; }
.tuile .libelle { font-size: 12.5px; color: var(--text-2); font-weight: 550; display: flex; align-items: center; gap: 7px; }
.tuile .libelle .icone { width: 15px; height: 15px; color: var(--text-3); }
.tuile .valeur { font: 650 26px/1.15 var(--police-titre); margin-top: 8px; letter-spacing: -.02em; }
.tuile .valeur small { font-size: 14px; font-weight: 550; color: var(--text-3); margin-left: 3px; }
.tuile .detail { font-size: 12.5px; color: var(--text-3); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tuile.vedette { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 60%); }
.tuile .sparkline { position: absolute; right: 14px; top: 14px; width: 84px; height: 28px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; font-size: 12px; padding: 1px 6px; border-radius: 999px; }
.delta.haut { color: var(--ok); background: var(--ok-soft); }
.delta.bas { color: var(--danger); background: var(--danger-soft); }
.delta.neutre { color: var(--text-2); background: var(--surface-3); }
.delta .icone { width: 12px; height: 12px; stroke-width: 2.4; }

/* ---------- Badges, avatars ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap; letter-spacing: .005em;
}
.badge .icone { width: 12px; height: 12px; stroke-width: 2.2; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.marque { background: var(--brand-soft); color: var(--brand-ink); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.badge.contour { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
.badge .point, .point-c { width: 7px; height: 7px; border-radius: 50%; background: var(--c, currentColor); flex: none; display: inline-block; }
.puce-boutique { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.puce-boutique::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }

.avatar {
  --taille: 34px; width: var(--taille); height: var(--taille); border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: calc(var(--taille) * .38); font-weight: 700; color: #fff; letter-spacing: .02em;
  background: var(--c, #8a857b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); overflow:hidden; position:relative;
}
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.produit-photo { aspect-ratio:4/3; width:100%; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 40% 32%,#fffdf8,#f1e6d3 68%,#e6d5bd); color:#78634b; font-size:12px; font-weight:650; text-align:center; padding:12px; }
.produit-photo img { width:100%; height:100%; object-fit:cover; }
.produit-photo-admin { width:140px; flex:none; border-radius:12px; }
.vh-photo { width:76px; height:66px; border-radius:15px; flex:none; display:grid; place-items:center; background:linear-gradient(145deg,#e8f5f8,#d8e8ec); font-size:34px; overflow:hidden; position:relative; }
.vh-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.avatar.sm { --taille: 26px; }
.avatar.xs { --taille: 22px; }
.avatar.lg { --taille: 48px; }
.avatar.xl { --taille: 72px; }
.pile-avatars { display: flex; }
.pile-avatars .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.pile-avatars .avatar:first-child { margin-left: 0; }

/* ---------- Onglets ---------- */
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.onglet {
  height: 40px; padding: 0 14px; border: 0; background: none; color: var(--text-2); font-weight: 550; position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.onglet:hover { color: var(--text); }
.onglet.actif { color: var(--text); }
.onglet.actif::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }

/* ---------- Tableaux ---------- */
.table-conteneur { overflow-x: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--text-3); padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; user-select: none;
}
.table th.triable { cursor: pointer; }
.table th.triable:hover { color: var(--text); }
.table th .fleche { opacity: .6; margin-left: 3px; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr.cliquable { cursor: pointer; }
.table tbody tr.cliquable:hover, .table tbody tr:hover { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 650; background: var(--surface-2); border-top: 1px solid var(--border); padding: 11px 14px; }
.table .actions-ligne { display: flex; gap: 4px; justify-content: flex-end; opacity: .35; transition: opacity var(--transition); }
.table tr:hover .actions-ligne { opacity: 1; }
.barre-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.barre-outils .recherche { width: 260px; max-width: 100%; }
.pagination { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }

/* ---------- États vides, chargement ---------- */
.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--text-3); }
.vide .rond { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); margin-bottom: 4px; }
.vide .rond .icone { width: 24px; height: 24px; }
.vide h3 { color: var(--text); }
.squelette { border-radius: 8px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: miroir 1.2s infinite linear; }
@keyframes miroir { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.chargement { display: grid; place-items: center; padding: 60px; color: var(--text-3); }
.rouage { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border-2); border-top-color: var(--brand); animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.attenue { opacity: .55; transition: opacity var(--transition); pointer-events: none; }

/* ---------- Superpositions : modales, tiroirs, menus, notifications ---------- */
.voile {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 16, 10, .32); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px; animation: fondu .16s ease-out;
}
:root[data-theme="dark"] .voile { background: rgba(0, 0, 0, .55); }
@keyframes fondu { from { opacity: 0; } }
.modale {
  width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--ombre-3); border: 1px solid var(--border); animation: zoom .2s cubic-bezier(.2, .8, .3, 1.1);
}
.modale.sm { width: min(420px, 100%); } .modale.lg { width: min(820px, 100%); } .modale.xl { width: min(1100px, 100%); }
@keyframes zoom { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modale-entete { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; }
.modale-entete .sous { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.modale-corps { padding: 6px 22px 18px; overflow-y: auto; }
.modale-pied { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modale-pied .gauche { margin-right: auto; display: flex; gap: 8px; }
.fermer { margin-left: auto; margin-top: -4px; margin-right: -8px; }

.voile.tiroir-voile { place-items: stretch end; padding: 10px; }
.tiroir {
  width: min(520px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--ombre-3); animation: glisse .24s cubic-bezier(.2, .8, .3, 1);
}
.tiroir.large { width: min(760px, 100%); }
@keyframes glisse { from { transform: translateX(30px); opacity: 0; } }
.tiroir .modale-corps { flex: 1; padding-top: 8px; }
.tiroir .modale-pied { border-radius: 0 0 var(--r-xl) var(--r-xl); }

.menu-flottant {
  position: fixed; z-index: 200; min-width: 200px; max-width: 320px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--ombre-3); animation: zoom .14s ease-out; max-height: 70vh; overflow-y: auto;
}
.menu-flottant .entree {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 8px;
  text-align: left; color: var(--text); font-size: 13.5px;
}
.menu-flottant .entree:hover, .menu-flottant .entree.survol { background: var(--surface-3); }
.menu-flottant .entree .icone { width: 16px; height: 16px; color: var(--text-2); }
.menu-flottant .entree.danger { color: var(--danger); }
.menu-flottant .entree.danger .icone { color: var(--danger); }
.menu-flottant .entree .coche { margin-left: auto; color: var(--brand); }
.menu-flottant .sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu-flottant .titre-menu { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 650; color: var(--text-3); }

.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 11px 12px 11px 14px; border-radius: 12px;
  background: #1f1d1a; color: #f5f3ee; box-shadow: var(--ombre-3); animation: zoom .2s ease-out; font-size: 13.5px;
}
:root[data-theme="dark"] .toast { background: #f4f3ee; color: #1b1a17; }
.toast .icone { width: 18px; height: 18px; }
.toast.ok .icone { color: #3cc47c; } .toast.erreur .icone { color: #ff7a7a; } .toast.info .icone { color: #8fb8ff; }
:root[data-theme="dark"] .toast.ok .icone { color: var(--ok); }
.toast button { margin-left: auto; border: 0; background: rgba(255,255,255,.12); color: inherit; border-radius: 7px; height: 28px; padding: 0 10px; font-weight: 600; }
.toast.sortie { animation: sortie .2s ease-in forwards; }
@keyframes sortie { to { opacity: 0; transform: translateY(6px); } }

[data-tip] { position: relative; }
.infobulle {
  position: fixed; z-index: 400; pointer-events: none; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.4;
  background: #1f1d1a; color: #f5f3ee; box-shadow: var(--ombre-2); max-width: 300px; white-space: pre-line;
}
:root[data-theme="dark"] .infobulle { background: #f4f3ee; color: #1b1a17; }

/* ---------- Palette de commandes (Ctrl+K) ---------- */
.palette { width: min(620px, 100%); align-self: start; margin-top: 10vh; background: var(--surface); border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--ombre-3); overflow: hidden; animation: zoom .16s ease-out; }
.palette-saisie { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette-saisie input { flex: 1; height: 54px; border: 0; outline: none; background: none; font-size: 16px; }
.palette-resultats { max-height: 420px; overflow-y: auto; padding: 6px; }
.palette-groupe { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 0; background: none; text-align: left; }
.palette-item.actif { background: var(--surface-3); }
.palette-item .icone { color: var(--text-2); }
.palette-item .sous { font-size: 12px; color: var(--text-3); }
.palette-pied { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); background: var(--surface-2); }

/* ---------- Connexion ---------- */
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); background: var(--bg); }
.connexion-visuel {
  position: relative; overflow: hidden; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(255, 196, 140, .55), transparent 55%),
    radial-gradient(800px 500px at -10% 110%, rgba(120, 40, 20, .65), transparent 60%),
    linear-gradient(150deg, #e9773f 0%, #c94a22 45%, #7a2a14 100%);
}
.connexion-visuel::after {
  content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.connexion-visuel .marque { display: flex; align-items: center; gap: 12px; font: 700 22px/1 var(--police-titre); letter-spacing: -.02em; z-index: 1; }
.connexion-visuel .marque .logo { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); backdrop-filter: blur(6px); }
.connexion-visuel h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; color: #fff; font-weight: 700; letter-spacing: -.03em; max-width: 560px; z-index: 1; }
.connexion-visuel .accroche { z-index: 1; }
.connexion-visuel .accroche p { margin-top: 14px; font-size: 16px; opacity: .88; max-width: 480px; }
.connexion-visuel .villes { display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
.connexion-visuel .villes span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
.connexion-visuel .cartes-deco { position: absolute; right: -40px; top: 13%; display: grid; gap: 12px; transform: rotate(-8deg); opacity: .95; z-index: 0; }
@media (max-width: 1250px) { .connexion-visuel .cartes-deco { display: none; } }
.connexion-visuel .carte-deco { width: 250px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(8px); font-size: 12.5px; }
.connexion-visuel .carte-deco b { display: block; font-size: 13.5px; }
.connexion-form { display: grid; place-items: center; padding: 40px 28px; }
.connexion-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.connexion-form h2 { font-size: 26px; letter-spacing: -.02em; }
.alerte {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-sm); font-size: 13.5px;
  background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.alerte.info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alerte.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.alerte.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alerte .icone { margin-top: 1px; }
.mdp-force { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.mdp-force i { display: block; height: 100%; border-radius: 999px; transition: width .2s, background .2s; }

/* ---------- Planning ---------- */
.pl-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-nav { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.pl-periode {
  height: 36px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--ombre-1); position: relative; min-width: 250px; justify-content: center;
}
.pl-periode input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pl-conteneur { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--ombre-1); overflow: auto; max-height: calc(100vh - 190px); position: relative; }
.pl-grille { display: grid; grid-template-columns: 240px repeat(7, minmax(134px, 1fr)); min-width: 1180px; }
.pl-grille > div { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.pl-grille > div.der-col { border-right: 0; }
.pl-tete { position: sticky; top: 0; z-index: 5; background: var(--surface-2); padding: 9px 10px 8px; font-size: 11.5px; font-weight: 650; color: var(--text-3); letter-spacing: .03em; text-transform: uppercase; }
.pl-tete.jour.aujourdhui { color: var(--brand); }
.pl-tete.jour.aujourdhui .num { background: var(--brand); color: #fff; }
.pl-tete .num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 7px; margin-left: 3px; font-size: 12px; color: var(--text); }
.pl-tete .ferie { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--violet); margin-top: 2px; font-size: 11px; }
.pl-tete .ferme { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-3); margin-top: 2px; font-size: 11px; }
.pl-coin { position: sticky; left: 0; top: 0; z-index: 7; background: var(--surface-2); }
.pl-stats { position: sticky; top: 46px; z-index: 5; background: var(--surface-2); padding: 6px 10px; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pl-stats.pl-coin { z-index: 7; left: 0; font-weight: 650; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.pl-stats .sous-eff { color: var(--warn); display: inline-flex; align-items: center; gap: 3px; font-weight: 650; }
.pl-groupe { grid-column: 1 / -1; position: sticky; left: 0; background: var(--bg-2); padding: 6px 12px; font-size: 12px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 8px; border-right: 0 !important; }
.pl-emp { position: sticky; left: 0; z-index: 3; background: var(--surface); padding: 10px 10px 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.pl-emp::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, transparent); }
.pl-emp .nom { font-weight: 600; font-size: 13px; line-height: 1.25; }
.pl-emp .poste { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-top: 1px; }
.pl-emp .compteurs { display: flex; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.pl-emp .compteurs span { display: inline-flex; align-items: center; gap: 4px; }
.pl-emp .compteurs .icone { width: 13px; height: 13px; color: var(--text-3); }
.pl-emp .compteurs .depasse { color: var(--danger); font-weight: 650; }
.pl-emp .compteurs .manque { color: var(--warn); font-weight: 650; }
.pl-emp .compteurs .juste { color: var(--ok); font-weight: 650; }
.pl-cellule { padding: 5px; min-height: 86px; display: flex; flex-direction: column; gap: 5px; position: relative; transition: background var(--transition); }
.pl-cellule.aujourdhui { background: color-mix(in srgb, var(--brand) 3.5%, transparent); }
.pl-cellule.ferme { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-3) 7px 8px); }
.pl-cellule.survol-depot { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.pl-cellule .ajouter {
  position: absolute; inset: 5px; border-radius: 10px; border: 1.5px dashed var(--border-2); background: transparent; color: var(--text-3);
  display: grid; place-items: center; opacity: 0; transition: opacity var(--transition);
}
.pl-cellule:hover .ajouter { opacity: 1; }
.pl-cellule .ajouter:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pl-cellule.a-contenu .ajouter { position: static; height: 24px; opacity: 0; }
.pl-cellule.a-contenu:hover .ajouter { opacity: 1; }
.creneau {
  --c: #2a78d6; position: relative; z-index: 1; border-radius: 10px; padding: 6px 8px 6px 10px; font-size: 12px; line-height: 1.35; cursor: pointer;
  background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--text);
  box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform 80ms, box-shadow var(--transition);
}
.creneau:hover { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), var(--ombre-2); transform: translateY(-1px); }
.creneau .code { font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.creneau .heures { font-weight: 600; font-variant-numeric: tabular-nums; }
.creneau .lieu { color: var(--text-2); font-size: 11.5px; }
.creneau .icones { display: flex; gap: 5px; margin-top: 3px; color: var(--text-2); }
.creneau .icones .icone { width: 13px; height: 13px; }
.creneau.brouillon { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 9%, var(--surface)) 0 6px, color-mix(in srgb, var(--c) 4%, var(--surface)) 6px 12px); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 60%, transparent); outline: 1px dashed color-mix(in srgb, var(--c) 55%, transparent); outline-offset: -1px; }
.creneau .etat-brouillon { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.creneau .alerte-pt { position: absolute; top: 5px; right: 6px; color: var(--danger); }
.creneau .alerte-pt .icone { width: 14px; height: 14px; }
.creneau.atelier { --c: var(--violet); }
.creneau.glisse { opacity: .4; }
.absence {
  border-radius: 10px; padding: 6px 9px; font-size: 12px; line-height: 1.35;
  background: repeating-linear-gradient(135deg, var(--warn-soft) 0 7px, color-mix(in srgb, var(--warn-soft) 55%, var(--surface)) 7px 14px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 22%, transparent); color: var(--text);
}
.absence.approuve { background: repeating-linear-gradient(135deg, var(--info-soft) 0 7px, color-mix(in srgb, var(--info-soft) 55%, var(--surface)) 7px 14px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent); }
.absence b { display: block; font-size: 12px; }
.absence span { color: var(--text-2); font-size: 11.5px; }
.pl-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-2); align-items: center; }

/* Vue jour (frise) */
.frise { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-width: 980px; }
.frise > div { border-bottom: 1px solid var(--border); }
.frise-echelle { position: relative; height: 34px; background: var(--surface-2); position: sticky; top: 0; z-index: 4; }
.frise-echelle span { position: absolute; top: 9px; font-size: 11px; color: var(--text-3); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.frise-nom { padding: 8px 12px; display: flex; align-items: center; gap: 10px; position: sticky; left: 0; background: var(--surface); z-index: 2; border-right: 1px solid var(--border); }
.frise-piste { position: relative; height: 48px; background-image: linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: var(--pas) 100%; }
.frise-barre {
  position: absolute; top: 8px; height: 32px; border-radius: 9px; padding: 0 9px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--c) 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  overflow: hidden; white-space: nowrap; cursor: pointer;
}
.frise-barre.brouillon { outline: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); outline-offset: -1px; }
.frise-maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); z-index: 3; pointer-events: none; }
.frise-maintenant::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

/* ---------- Graphiques ---------- */
.graphe { position: relative; width: 100%; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe text { font: 11px var(--police); fill: var(--text-3); font-variant-numeric: tabular-nums; }
.graphe .grille-l { stroke: var(--grille); stroke-width: 1; shape-rendering: crispEdges; }
.graphe .axe-l { stroke: var(--axe); stroke-width: 1; shape-rendering: crispEdges; }
.graphe .marque-g { transition: opacity var(--transition), filter var(--transition); }
.graphe .marque-g:hover, .graphe .marque-g.survol { filter: brightness(1.08) saturate(1.1); }
.graphe.attenue-g .marque-g:not(.survol) { opacity: .45; }
.graphe .ligne-serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .aire { opacity: .1; }
.graphe .viseur { stroke: var(--text-3); stroke-width: 1; }
.graphe .etiquette-g { fill: var(--text-2); font-weight: 600; }
.legende-g { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.legende-g span { display: inline-flex; align-items: center; gap: 6px; }
.legende-g i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.legende-g i.trait { width: 14px; height: 2px; border-radius: 2px; }
.bulle-g {
  position: fixed; z-index: 400; pointer-events: none; min-width: 140px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--ombre-3); color: var(--text);
}
.bulle-g .t { font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; font-weight: 600; }
.bulle-g .r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.bulle-g .r b { font-variant-numeric: tabular-nums; }
.bulle-g .r span { color: var(--text-2); }
.bulle-g .r i { width: 12px; height: 2px; border-radius: 2px; background: var(--c); }
.echelle-seq { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.echelle-seq .degrade { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.echelle-seq .degrade i { width: 18px; }
.basculer-table { font-size: 12px; }

.barres-h { display: flex; flex-direction: column; gap: 10px; }
.barre-h { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.barre-h .piste { height: 10px; border-radius: 0 4px 4px 0; background: transparent; position: relative; }
.barre-h .piste i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--c, var(--serie-1)); min-width: 2px; }
.barre-h .val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); text-align: right; }

.jauge { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--serie-1)) 16%, transparent); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--serie-1)); }
.jauge.ok { --c: var(--ok); } .jauge.warn { --c: var(--warn); } .jauge.danger { --c: var(--danger); }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(250px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.colonne { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; transition: background var(--transition); }
.colonne.survol-depot { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--accent); }
.colonne-tete { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; font-weight: 650; font-size: 13px; }
.colonne-tete .point-c { width: 9px; height: 9px; }
.fiche { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; box-shadow: var(--ombre-1); cursor: pointer; transition: box-shadow var(--transition), transform 80ms; }
.fiche:hover { box-shadow: var(--ombre-2); transform: translateY(-1px); }
.fiche .titre { font-weight: 600; font-size: 13.5px; }
.fiche .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* ---------- Listes ---------- */
.liste { display: flex; flex-direction: column; }
.liste-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.liste-item:last-child { border-bottom: 0; }
.liste-item.cliquable { cursor: pointer; }
.liste-item.cliquable:hover { background: var(--surface-2); }
.liste-item .titre { font-weight: 600; }
.liste-item .sous { font-size: 12.5px; color: var(--text-3); }
.notif-non-lue { position: relative; }
.notif-non-lue::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); transform: translateY(-50%); }

/* ---------- Accueil ---------- */
.salut { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.salut h1 { font-size: 26px; letter-spacing: -.025em; }
.salut .date { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }
.prochain {
  border-radius: var(--r-xl); padding: 22px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(500px 240px at 100% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(140deg, #e3683a, #b8441f 70%);
  box-shadow: 0 18px 40px -22px rgba(184, 68, 31, .8);
}
.prochain .lbl { font-size: 12.5px; opacity: .85; font-weight: 600; }
.prochain .gros { font: 700 30px/1.1 var(--police-titre); letter-spacing: -.02em; margin-top: 6px; }
.prochain .btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; }
.prochain .btn:hover { background: rgba(255,255,255,.26); }
.mini-frise { display: flex; flex-direction: column; gap: 6px; }
.mini-frise .ligne-f { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; }
.mini-frise .piste { position: relative; height: 18px; border-radius: 6px; background: var(--surface-3); }
.mini-frise .piste i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--c); }
.mini-frise .piste .mnt { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--brand); border-radius: 2px; }

/* ---------- Badgeuse (kiosque) ---------- */
.kiosque { min-height: 100vh; background: radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%), var(--bg); padding: 28px 36px; display: flex; flex-direction: column; gap: 24px; }
.kiosque-tete { display: flex; align-items: center; gap: 16px; }
.kiosque-heure { font: 700 64px/1 var(--police-titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kiosque-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.kiosque-carte {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; cursor: pointer; box-shadow: var(--ombre-1); transition: transform 80ms, box-shadow var(--transition);
}
.kiosque-carte:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
.kiosque-carte.present { box-shadow: inset 0 0 0 2px var(--ok), var(--ombre-1); }
.pave { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; justify-content: center; }
.pave button { height: 64px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2); font: 600 24px var(--police-titre); }
.pave button:hover { background: var(--surface-3); }
.points-pin { display: flex; gap: 12px; justify-content: center; margin: 8px 0 18px; }
.points-pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--border-2); }
.points-pin i.plein { background: var(--brand); box-shadow: none; }
.points-pin.secoue { animation: secoue .35s; }
@keyframes secoue { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Divers ---------- */
.calendrier-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.calendrier-mois > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.calendrier-mois .tete-j { min-height: 0; padding: 8px; font-size: 11.5px; font-weight: 650; color: var(--text-3); text-transform: uppercase; background: var(--surface-2); }
.calendrier-mois .num-j { font-size: 12px; font-weight: 650; color: var(--text-2); }
.calendrier-mois .hors { background: var(--surface-2); }
.calendrier-mois .hors .num-j { color: var(--text-3); opacity: .6; }
.calendrier-mois .auj .num-j { color: #fff; background: var(--brand); border-radius: 6px; padding: 0 6px; align-self: flex-start; }
.evt { font-size: 11.5px; padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: inset 2px 0 0 var(--c); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.etape { display: flex; gap: 12px; padding: 10px 0; }
.etape .rond { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; flex: none; font-weight: 700; font-size: 12px; }
.code-bloc { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--surface-3); padding: 2px 6px; border-radius: 6px; }
.secret { font-family: Consolas, "Cascadia Mono", monospace; font-size: 18px; letter-spacing: .02em; padding: 14px 16px; border-radius: 12px; background: var(--surface-3); text-align: center; user-select: all; border: 1px dashed var(--border-2); }
.matrice td, .matrice th { text-align: center; }
.matrice td:first-child, .matrice th:first-child { text-align: left; }
.ok-ico { color: var(--ok); } .non-ico { color: var(--text-3); opacity: .5; }
.horaires-grille { display: grid; grid-template-columns: 90px 70px 1fr 1fr; gap: 8px 12px; align-items: center; }

/* ---------- Réactif ---------- */
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-21, .g-12 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu-lateral { position: fixed; z-index: 150; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--ombre-3); background: var(--surface); }
  .app.menu-ouvert .menu-lateral { transform: none; }
  .app.menu-ouvert::after { content: ""; position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.3); }
  .app.reduit { --menu-l: 0px; }
  .barre-mobile { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-verre); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
  .page { padding: 16px 16px 40px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .grille-form > .demi, .grille-form > .tiers, .grille-form > .deux-tiers { grid-column: span 6; }
  .connexion { grid-template-columns: minmax(0, 1fr); }
  .connexion-visuel { min-height: 240px; padding: 28px; }
  .connexion-visuel .cartes-deco { display: none; }
  .entete-page .actions { margin-left: 0; width: 100%; }
  .pl-nav { margin: 0; width: 100%; justify-content: space-between; }
  .pl-periode { min-width: 0; flex: 1; }
  .kiosque { padding: 18px 16px; }
  .kiosque-heure { font-size: 44px; }
  .voile { padding: 10px; }
  .toasts { left: 16px; right: 16px; align-items: stretch; }
  .barre-h { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) auto; }
}

@media print {
  .menu-lateral, .barre-mobile, .entete-page .actions, .pl-barre, .toasts, .ne-pas-imprimer { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .page { padding: 0; }
  .pl-conteneur { max-height: none; overflow: visible; border: 0; box-shadow: none; }
  .pl-tete, .pl-stats, .pl-emp { position: static; }
  .carte { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Dashboard mensuel et cartes illustrées des boutiques. */
.dashboard-filtres { display:flex; align-items:end; gap:14px; padding:16px 18px; margin:0 0 18px; }
.dashboard-filtres label { display:grid; gap:6px; min-width:220px; font-size:12px; color:var(--text-2); font-weight:650; }
.dashboard-filtres .saisie { min-width:200px; }
.dashboard-periode { margin-left:auto; padding-bottom:10px; color:var(--text-3); text-transform:capitalize; font-size:13px; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:18px; }
.dashboard-kpi { min-height:145px; padding:19px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); box-shadow:var(--ombre-1); display:flex; flex-direction:column; gap:10px; }
.dashboard-kpi>span { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; }
.dashboard-kpi>span svg { width:17px; color:var(--brand); }
.dashboard-kpi>b { font-size:30px; letter-spacing:-.04em; }
.dashboard-kpi>b small { font-size:14px; font-weight:600; letter-spacing:0; }
.dashboard-kpi>small { color:var(--text-3); font-size:12px; }
.dashboard-resume { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 20px; }
.dashboard-resume>div { display:grid; gap:8px; padding:14px; background:var(--surface-2); border-radius:var(--r-sm); }
.dashboard-resume span { color:var(--text-3); font-size:12px; }
.dashboard-resume b { font-size:20px; }
.dashboard-options { display:grid; gap:10px; }
.dashboard-options label { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; }
.boutique-carte { cursor:pointer; overflow:hidden; transform-style:preserve-3d; transition:transform .28s ease,box-shadow .28s ease; }
.boutique-carte:hover { transform:translateY(-5px) perspective(900px) rotateX(1deg); box-shadow:var(--ombre-2); }
.boutique-scene { height:180px; position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--boutique-c) 17%,var(--surface)),var(--surface-2)); perspective:900px; }
.boutique-illustration { width:min(100%,440px); height:100%; filter:drop-shadow(0 13px 12px rgba(69,42,20,.12)); transform:rotateY(-7deg) rotateX(2deg); transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.boutique-carte:hover .boutique-illustration { transform:rotateY(5deg) rotateX(-2deg) scale(1.035); }
.boutique-batiment { transform-origin:230px 100px; animation:boutique-vie 5s ease-in-out infinite; }
.boutique-pain { animation:boutique-flot 3.6s ease-in-out infinite; }
.boutique-scene-reflet { position:absolute; inset:auto -30% -52% -30%; height:75%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--boutique-c) 17%,transparent),transparent 68%); pointer-events:none; }
.boutique-corps { padding-top:17px; }
.boutique-ville { font-size:21px; font-weight:760; letter-spacing:-.03em; }
.boutique-action { display:flex; align-items:center; justify-content:flex-end; gap:5px; border-top:1px solid var(--border); padding-top:12px; margin-top:14px; color:var(--boutique-c); font-size:12px; font-weight:700; }
.boutique-action svg { width:14px; }
@keyframes boutique-vie { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes boutique-flot { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-5px) rotate(2deg)} }
@media(max-width:680px) { .dashboard-filtres { align-items:stretch; flex-direction:column; } .dashboard-filtres label,.dashboard-filtres .saisie { min-width:0; width:100%; } .dashboard-periode { margin:0; padding:0; } .dashboard-resume { grid-template-columns:repeat(2,1fr); } .boutique-scene { height:155px; } }
@media(max-width:520px) { .dashboard-kpis { grid-template-columns:1fr; } .dashboard-kpi { min-height:120px; } .dashboard-resume { grid-template-columns:1fr 1fr; padding:12px; gap:8px; } .dashboard-resume>div { padding:11px; } .dashboard-filtres { padding:14px; } .boutique-carte .carte-corps { padding:14px; } .vh-stats { grid-template-columns:1fr 1fr; } .modale-pied .btn { min-height:40px; } .liste-item .btn-sm { min-width:36px; height:36px; } .grille-form>.tiers,.grille-form>.demi,.grille-form>.deux-tiers { grid-column:span 12; } }
@media(prefers-reduced-motion:reduce) { .boutique-carte,.boutique-illustration,.boutique-batiment,.boutique-pain { animation:none; transition:none; } }

/* Présentation des fiches et cartes de la flotte. */
.vh-carte { overflow:hidden; cursor:pointer; transition:transform var(--transition),box-shadow var(--transition); }
.vh-carte:hover { transform:translateY(-3px); box-shadow:var(--ombre-2); }
.vh-tete { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); background:linear-gradient(110deg,color-mix(in srgb,var(--c) 11%,var(--surface)),var(--surface)); }
.vh-ico { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--c,var(--brand)) 13%,var(--surface)); font-size:25px; flex:none; }
.vh-plaque { font-size:18px; font-weight:800; letter-spacing:.04em; }
.vh-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vh-stats>div { display:grid; gap:4px; }
.vh-stats span { color:var(--text-3); font-size:11px; }
.vh-stats b { font-size:14px; }
.dashboard-note { overflow:hidden; }
.dashboard-mois-titre { display:flex; align-items:end; justify-content:space-between; margin:6px 0 12px; }
.dashboard-mois-titre h2 { font-size:20px; }
.dashboard-mois-titre span { color:var(--text-3); font-size:13px; text-transform:capitalize; }
.dashboard-existant { margin-top:26px; border-top:1px solid var(--border); padding-top:24px; }
.vh-docs .carte-entete { gap:12px; }
.vh-docs .carte-entete>div { min-width:0; }
.vh-docs .carte-entete h3 { margin-bottom:4px; }
.vh-docs .liste-item .sous { overflow-wrap:anywhere; }
.dashboard-entete { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; }
.dashboard-entete h1 { font-size:clamp(25px,3vw,34px); letter-spacing:-.04em; }
.dashboard-entete p { color:var(--text-3); margin-top:3px; }
.dashboard-eyebrow,.dashboard-ops-entete>div>span { color:var(--brand); font-size:10px; font-weight:800; letter-spacing:.16em; margin-bottom:5px; }
.dashboard-layout { display:grid; grid-template-columns:228px minmax(0,1fr); align-items:start; gap:18px; }
.dashboard-rail { position:sticky; top:18px; min-width:0; padding:18px 16px; border-radius:18px; color:#f7fbf6; background:linear-gradient(160deg,#063c3c,#075453 72%,#0b6860); box-shadow:0 14px 34px -24px rgba(2,52,50,.85); overflow:hidden; }
.dashboard-rail::after { content:""; position:absolute; right:-46px; top:76px; width:148px; height:148px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.035),0 0 0 38px rgba(255,255,255,.025); pointer-events:none; }
.dashboard-rail-intro { position:relative; z-index:1; padding:2px 0 18px; border-bottom:1px solid rgba(255,255,255,.2); }
.dashboard-orbite { width:43px; height:43px; display:grid; place-items:center; margin-bottom:14px; border-radius:14px; color:#fff; background:linear-gradient(145deg,#f28b55,#da5234); box-shadow:0 9px 20px rgba(0,0,0,.16); }
.dashboard-orbite svg { width:22px; height:22px; }
.dashboard-rail-title { font-size:16px; font-weight:750; }
.dashboard-rail-copy { max-width:180px; margin-top:6px; color:rgba(247,251,246,.72); font-size:12px; line-height:1.55; }
.dashboard-filter { position:relative; z-index:1; display:grid; gap:7px; margin-top:18px; color:rgba(247,251,246,.84); font-size:11px; font-weight:650; }
.dashboard-filter>span { display:flex; align-items:center; gap:7px; }
.dashboard-filter>span .icone { width:14px; height:14px; }
.dashboard-filter .saisie { width:100%; min-width:0; min-height:39px; border-color:rgba(255,255,255,.25); color:var(--text); font-size:12px; }
.dashboard-rail-period { position:relative; z-index:1; display:grid; gap:3px; padding:13px 0; margin-top:18px; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.dashboard-rail-period span { color:rgba(247,251,246,.7); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.dashboard-rail-period b { text-transform:capitalize; font-size:14px; }
.dashboard-rail-foot { position:relative; z-index:1; display:flex; gap:7px; align-items:center; margin-top:15px; color:rgba(247,251,246,.72); font-size:10px; }
.dashboard-rail-foot i { width:7px; height:7px; border-radius:50%; background:#90db86; box-shadow:0 0 0 4px rgba(144,219,134,.13); }
.dashboard-main { min-width:0; }
.dashboard-hero { position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:132px; padding:22px 26px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--brand) 15%,var(--border)); border-radius:18px; overflow:hidden; background:linear-gradient(115deg,var(--surface) 5%,color-mix(in srgb,#f1e1c9 44%,var(--surface)) 100%); }
.dashboard-hero::after { content:""; position:absolute; width:220px; height:220px; right:100px; top:-130px; border:1px solid rgba(196,119,71,.16); border-radius:50%; box-shadow:0 0 0 17px rgba(196,119,71,.045),0 0 0 38px rgba(196,119,71,.03); }
.dashboard-hero-tag { color:var(--brand); font-size:10px; font-weight:800; letter-spacing:.13em; }
.dashboard-hero h2 { margin:8px 0 4px; font-size:clamp(20px,2.5vw,27px); letter-spacing:-.035em; }
.dashboard-hero p { color:var(--text-3); font-size:12px; }
.dashboard-hero-orbite { position:relative; z-index:1; display:flex; align-items:center; gap:12px; max-width:190px; padding:13px 15px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:rgba(255,255,255,.62); box-shadow:var(--ombre-1); }
.dashboard-hero-orbite>span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#d98b4f; }
.dashboard-hero-orbite small { color:var(--text-2); font-size:10px; line-height:1.45; }
.dashboard-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.dashboard-kpi { position:relative; min-height:148px; padding:15px 15px 46px; gap:7px; border-radius:14px; overflow:hidden; }
.dashboard-kpi::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--kpi,#d4532a); }
.dashboard-kpi .kpi-ico { position:absolute; top:13px; right:13px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--kpi,#d4532a); background:color-mix(in srgb,var(--kpi,#d4532a) 12%,var(--surface)); }
.dashboard-kpi .kpi-ico .icone { width:16px; height:16px; }
.dashboard-kpi .kpi-name { color:var(--text-2); font-size:11px; font-weight:620; }
.dashboard-kpi>b { font-size:clamp(21px,2vw,29px); margin-top:2px; }
.dashboard-kpi>b em { color:var(--text-3); font-size:11px; font-style:normal; letter-spacing:0; }
.dashboard-kpi>small { max-width:calc(100% - 8px); color:var(--text-3); font-size:10px; line-height:1.3; }
.dashboard-kpi.kpi-terracotta { --kpi:#dc2626; }
.dashboard-kpi.kpi-sage { --kpi:#2563eb; }
.dashboard-kpi.kpi-blue { --kpi:#ef4444; }
.dashboard-kpi.kpi-violet { --kpi:#60a5fa; }
.dashboard-kpi .kpi-spark { position:absolute; right:13px; bottom:12px; height:27px; width:72px; display:flex; gap:3px; align-items:end; }
.dashboard-kpi .kpi-spark i { flex:1; min-width:2px; border-radius:3px 3px 0 0; background:color-mix(in srgb,var(--kpi) 62%,transparent); transform-origin:bottom; animation:kpi-entree .5s ease-out both; }
@keyframes kpi-entree { from { transform:scaleY(.15); opacity:.35; } to { transform:scaleY(1); opacity:1; } }
.dashboard-graphs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dashboard-graphs .carte { min-width:0; overflow:hidden; border-radius:15px; }
.dashboard-graphs .graph-grand { grid-column:1/-1; }
.dashboard-graphs .carte-entete { align-items:center; gap:10px; padding:13px 16px 0; }
.dashboard-graphs .carte-entete h3 { font-size:14px; }
.dashboard-graphs .carte-entete .sous { display:block; margin-top:3px; font-size:10px; }
.dashboard-graphs .carte-corps { padding:10px 12px 12px; }
.dashboard-graphs [data-chart] { min-width:0; }
.dashboard-legende { display:flex; gap:6px; align-items:center; color:var(--text-3); font-size:10px; white-space:nowrap; }
.dashboard-legende i { width:12px; height:3px; border-radius:4px; background:#171b1a; }
.dashboard-legende i.ancien { margin-left:7px; background:#a9b0ae; }
.atelier-remplissage { min-height:150px; display:grid; align-content:center; gap:8px; text-align:center; }
.atelier-remplissage>b { font-size:42px; line-height:1; color:var(--serie-3); }
.atelier-remplissage>span { color:var(--text-3); font-size:11px; }
.atelier-remplissage .jauge { margin:4px auto 0; width:min(230px,90%); }
.dashboard-ops { margin-top:28px; padding-top:18px; border-top:1px solid var(--border); }
.dashboard-ops-entete { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.dashboard-ops-entete h2 { font-size:21px; letter-spacing:-.03em; }
.dashboard-ops-entete p { color:var(--text-3); font-size:11px; }
.dashboard-periodes { position:relative; z-index:1; display:flex; align-items:center; gap:9px; width:100%; padding:10px; margin-top:15px; border:1px solid rgba(255,255,255,.18); border-radius:12px; color:inherit; text-align:left; background:rgba(255,255,255,.08); cursor:pointer; }
.dashboard-periodes>.icone:first-child { width:17px; height:17px; color:#ffd19e; flex:none; }
.dashboard-periodes>.icone:last-child { width:15px; height:15px; margin-left:auto; opacity:.75; }
.dashboard-periodes>span { display:grid; gap:2px; }
.dashboard-periodes b { font-size:11px; }
.dashboard-periodes small { color:rgba(247,251,246,.68); font-size:10px; }
.dashboard-periode-resume { margin:0 0 8px 2px; color:var(--text-3); font-size:10px; }
.dashboard-modeles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.dashboard-modele { min-width:0; display:grid; gap:6px; padding:11px; border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s; }
.dashboard-modele:has(input:checked) { border-color:var(--modele-c); box-shadow:0 0 0 2px color-mix(in srgb,var(--modele-c) 16%,transparent); transform:translateY(-1px); }
.dashboard-modele>input { accent-color:var(--modele-c); }
.dashboard-modele>b { font-size:12px; }
.dashboard-modele>small { color:var(--text-3); font-size:10px; line-height:1.4; }
.dashboard-modele-apercu { height:40px; display:flex; align-items:end; gap:5px; padding:6px; border-radius:8px; background:color-mix(in srgb,var(--modele-c) 8%,var(--surface)); }
.dashboard-modele-apercu i { flex:1; height:55%; border-radius:4px 4px 1px 1px; background:var(--modele-c); opacity:.75; }
.dashboard-modele-apercu i:nth-child(2) { height:85%; opacity:.5; }
.dashboard-modele-apercu i:nth-child(3) { height:38%; opacity:.9; }
.dashboard-modele-apercu i:nth-child(4) { height:68%; opacity:.62; }
.dashboard-selecteurs-periode { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dashboard-selecteurs-periode fieldset { min-width:0; padding:12px; border:1px solid var(--border); border-radius:12px; }
.dashboard-selecteurs-periode legend { padding:0 5px; font-size:12px; font-weight:700; }
.dashboard-mois-choix { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.dashboard-mois-choix label,.dashboard-annees-choix label { display:flex; align-items:center; gap:5px; min-width:0; padding:6px; border-radius:7px; background:var(--surface-2); cursor:pointer; }
.dashboard-mois-choix label { justify-content:center; }
.dashboard-mois-choix label:has(input:checked),.dashboard-annees-choix label:has(input:checked) { color:var(--brand-ink); background:var(--brand-soft); }
.dashboard-mois-choix input,.dashboard-annees-choix input { accent-color:var(--brand); }
.dashboard-mois-choix span,.dashboard-annees-choix span { font-size:10px; }
.dashboard-annees-choix { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dashboard-annees-choix label { padding:7px 8px; }
.dashboard-modele[data-modele="equilibre"] { --modele-c:#dc2626; }
.dashboard-main[data-modele="energie"] .dashboard-hero { border-color:rgba(22,163,74,.28); background:linear-gradient(115deg,var(--surface) 6%,color-mix(in srgb,#bbf7d0 34%,var(--surface)) 100%); }
.dashboard-main[data-modele="energie"] .dashboard-hero-orbite>span { background:#16a34a; }
.dashboard-main[data-modele="energie"] .dashboard-kpi.kpi-terracotta { --kpi:#16a34a; }
.dashboard-main[data-modele="energie"] .dashboard-kpi.kpi-sage { --kpi:#eab308; }
.dashboard-main[data-modele="energie"] .dashboard-kpi.kpi-blue { --kpi:#22c55e; }
.dashboard-main[data-modele="energie"] .dashboard-kpi.kpi-violet { --kpi:#f59e0b; }
.dashboard-main[data-modele="analytique"] .dashboard-hero { border-color:rgba(29,78,216,.24); background:linear-gradient(115deg,var(--surface) 6%,color-mix(in srgb,#bfdbfe 34%,var(--surface)) 100%); }
.dashboard-main[data-modele="analytique"] .dashboard-hero-orbite>span { background:#1d4ed8; }
.dashboard-main[data-modele="analytique"] .dashboard-kpi.kpi-terracotta { --kpi:#1d4ed8; }
.dashboard-main[data-modele="analytique"] .dashboard-kpi.kpi-sage { --kpi:#059669; }
.dashboard-main[data-modele="analytique"] .dashboard-kpi.kpi-blue { --kpi:#38bdf8; }
.dashboard-main[data-modele="analytique"] .dashboard-kpi.kpi-violet { --kpi:#84cc16; }
.dashboard-legende>span { display:inline-flex; align-items:center; gap:4px; }
.dashboard-legende>span i { margin-left:5px; }
@media(max-width:1180px) { .dashboard-layout { grid-template-columns:210px minmax(0,1fr); gap:13px; } .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .dashboard-layout { display:block; } .dashboard-rail { position:relative; top:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin-bottom:14px; padding:14px; } .dashboard-rail-intro { grid-column:1/-1; display:grid; grid-template-columns:42px 1fr; align-items:center; column-gap:12px; padding-bottom:12px; } .dashboard-orbite { grid-row:span 2; margin:0; } .dashboard-rail-title { align-self:end; } .dashboard-rail-copy { max-width:none; margin:0; } .dashboard-filter { margin-top:0; } .dashboard-rail-period,.dashboard-rail-foot { display:none; } }
@media(max-width:680px) { .dashboard-entete { align-items:flex-start; } .dashboard-edit { min-height:40px; } .dashboard-hero { min-height:112px; padding:16px; } .dashboard-hero-orbite { display:none; } .dashboard-graphs { grid-template-columns:minmax(0,1fr); } .dashboard-graphs .graph-grand { grid-column:auto; } .dashboard-graphs .carte-corps { padding:8px; } .dashboard-ops-entete { align-items:flex-start; flex-direction:column; gap:3px; } }
@media(max-width:520px) { .dashboard-rail { grid-template-columns:1fr; } .dashboard-rail-intro { grid-template-columns:38px 1fr; } .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-kpi { min-height:137px; padding:13px 11px 43px; } .dashboard-kpi>b { font-size:21px; } .dashboard-kpi .kpi-ico { width:26px; height:26px; top:10px; right:10px; } .dashboard-kpi .kpi-spark { width:52px; } .dashboard-legende { font-size:9px; } }
@media(max-width:620px) { .dashboard-modeles { grid-template-columns:1fr; } .dashboard-modele { grid-template-columns:18px minmax(0,1fr); align-items:center; } .dashboard-modele>input { grid-row:1/4; } .dashboard-modele-apercu { display:none; } .dashboard-selecteurs-periode { grid-template-columns:1fr; } }



.boite-grille { grid-template-columns:minmax(220px,.78fr) minmax(0,2fr); }
@media(max-width:760px) { .boite-grille { grid-template-columns:1fr; } .boite-grille [data-form-message] { grid-template-columns:1fr !important; } .boite-grille [data-form-message] button { width:100%; } }


.boite-canaux { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.boite-canal { min-width:0; display:flex; align-items:center; gap:12px; padding:14px; text-align:left; border:1px solid var(--border); cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }
.boite-canal:hover,.boite-canal.actif { border-color:var(--canal); transform:translateY(-1px); box-shadow:0 3px 14px color-mix(in srgb,var(--canal) 12%,transparent); }
.boite-canal-icone { width:40px; height:40px; display:grid; place-items:center; flex:none; color:var(--canal); border-radius:12px; background:color-mix(in srgb,var(--canal) 12%,var(--surface)); }
.boite-canal-icone .icone { width:19px; height:19px; }
.boite-canal-contenu { display:grid; gap:3px; min-width:0; }
.boite-canal-contenu b { font-size:14px; }
.boite-canal-contenu small { color:var(--text-3); font-size:11px; }
.boite-canal-pastille { margin-left:auto; flex:none; padding:5px 8px; border-radius:999px; color:var(--text-3); background:var(--surface-2); font-size:10px; }
.boite-canal-pastille.nouveau { color:#fff; background:var(--canal); font-weight:700; }
.boite-conv-entete { align-items:center; gap:12px; }
.boite-messages { max-height:520px; min-height:250px; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:16px; scroll-behavior:smooth; }
.boite-message { position:relative; width:min(88%,700px); padding:11px 13px 9px; border:1px solid var(--border); border-radius:14px 14px 14px 4px; background:var(--surface-2); }
.boite-message.moi { align-self:flex-end; border-radius:14px 14px 4px 14px; background:color-mix(in srgb,var(--brand) 8%,var(--surface)); }
.boite-message.supprime { opacity:.7; }
.boite-auteur { font-size:11px; }
.boite-message time { margin-left:auto; }
.boite-texte { margin-top:5px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5; }
.boite-citation { display:grid; gap:3px; margin-bottom:8px; padding:7px 9px; border-left:3px solid var(--brand); border-radius:5px; background:color-mix(in srgb,var(--brand) 7%,var(--surface)); }
.boite-citation b { font-size:10px; }
.boite-citation span { color:var(--text-2); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boite-actions-message { display:flex; align-items:center; gap:4px; margin-top:5px; }
.boite-actions-message .btn { min-height:28px; padding:3px 7px; font-size:11px; }
.boite-emoji-rapides { display:flex; gap:2px; }
.boite-emoji-rapides button { width:28px; height:28px; border:0; border-radius:7px; background:transparent; cursor:pointer; }
.boite-emoji-rapides button:hover { background:var(--surface); transform:scale(1.15); }
.boite-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.boite-reaction { padding:3px 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface); cursor:pointer; font-size:11px; }
.boite-reaction.active { border-color:var(--brand); background:var(--brand-soft); }
.boite-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; border-top:1px solid var(--border); padding:12px; }
.boite-composer textarea { resize:vertical; min-height:48px; max-height:150px; }
.boite-reponse-cible { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-left:3px solid var(--brand); border-radius:7px; background:var(--surface-2); }
.boite-reponse-cible span { display:grid; gap:2px; min-width:0; }
.boite-reponse-cible b { font-size:11px; }
.boite-reponse-cible small { color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:760px) { .boite-grille { grid-template-columns:1fr; } .boite-canaux { grid-template-columns:1fr; gap:8px; } .boite-canal { padding:10px 12px; } .boite-messages { min-height:220px; max-height:60vh; padding:10px; } .boite-message { width:min(96%,700px); } .boite-emoji-rapides button { width:30px; height:30px; } }


/* Discussions façon Teams : navigation à gauche, fil principal et réponses latérales. */
.teams-page { max-width:1440px; }
.teams-shell { min-height:460px; height:min(680px,calc(100vh - 235px)); display:grid; grid-template-columns:265px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--ombre-1); }
.teams-sidebar { display:flex; flex-direction:column; min-height:0; color:#fff; background:#202030; }
.teams-sidebar-titre { padding:22px 20px 16px; }
.teams-sidebar-titre small { color:#aeb2c4; font-size:10px; font-weight:700; letter-spacing:.1em; }
.teams-sidebar-titre h2 { margin-top:5px; color:#fff; font-size:19px; }
.teams-sidebar nav { flex:1; padding:0 10px; }
.teams-canal { width:100%; min-height:72px; display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; border-radius:11px; text-align:left; color:#f8f8fb; background:transparent; cursor:pointer; }
.teams-canal:hover { background:rgba(255,255,255,.08); }
.teams-canal.actif { background:rgba(255,255,255,.15); }
.teams-canal.actif::after { content:""; width:6px; height:40px; margin-left:auto; border-radius:8px; background:var(--canal); }
.teams-canal-dot { width:24px; height:24px; flex:none; border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff9,transparent 27%),linear-gradient(145deg,color-mix(in srgb,var(--canal) 73%,white),var(--canal) 75%); box-shadow:0 2px 6px color-mix(in srgb,var(--canal) 40%,transparent); }
.teams-canal-dot.grand { width:34px; height:34px; }
.teams-canal-txt { flex:1; min-width:0; display:grid; gap:4px; }
.teams-canal-txt b { font-size:14px; }
.teams-canal-txt small { overflow:hidden; color:#b7bbca; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.teams-unread { min-width:22px; padding:3px 6px; border-radius:999px; color:#fff; background:#dc3545; text-align:center; font-size:10px; font-weight:800; }
.teams-moderateur { display:flex; align-items:center; gap:9px; padding:13px 15px; border-top:1px solid rgba(255,255,255,.12); color:#d5d7e0; }
.teams-moderateur>span:last-child { display:grid; gap:3px; }
.teams-moderateur b { font-size:11px; }
.teams-moderateur small { color:#aeb2c4; font-size:10px; }
.teams-avatar { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:50%; color:white; background:var(--avatar,#6264a7); font-size:11px; font-weight:700; }
.teams-avatar.admin { width:27px; height:27px; background:#c239b3; font-size:9px; }
.teams-main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.teams-header { min-height:76px; display:flex; align-items:center; gap:13px; padding:14px 20px; border-bottom:1px solid var(--border); }
.teams-header h2 { margin:0 0 3px; font-size:20px; }
.teams-header p { color:var(--text-3); font-size:12px; }
.teams-moderation { margin-left:auto; color:var(--text-3); font-size:10px; }
.teams-corps { flex:1; min-height:0; display:flex; }
.teams-timeline { flex:1; min-width:0; overflow:auto; padding:13px 16px; }
.teams-message { display:flex; align-items:flex-start; gap:10px; padding:8px 8px 7px; border-radius:9px; }
.teams-message:hover { background:var(--surface-2); }
.teams-message.supprime { opacity:.75; }
.teams-message-contenu { flex:1; min-width:0; }
.teams-meta { display:flex; align-items:center; gap:7px; min-height:22px; }
.teams-meta b { color:var(--text); font-size:12px; }
.teams-meta time,.teams-meta small { color:var(--text-3); font-size:10px; }
.teams-meta time { margin-left:2px; }
.teams-texte { margin-top:3px; color:var(--text-2); font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.teams-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.teams-reaction { padding:3px 8px; border:1px solid var(--border); border-radius:999px; color:var(--text-2); background:var(--surface); cursor:pointer; font-size:11px; }
.teams-reaction.active { border-color:#6264a7; background:color-mix(in srgb,#6264a7 9%,var(--surface)); }
.teams-actions { display:flex; align-items:center; gap:2px; margin-top:4px; opacity:0; transition:opacity .15s; }
.teams-message:hover .teams-actions,.teams-actions:focus-within { opacity:1; }
.teams-actions .btn { min-height:25px; padding:2px 6px; font-size:10px; }
.teams-thread-link { padding:2px 0; border:0; color:#5851d8; background:none; cursor:pointer; font-size:11px; font-weight:700; }
.teams-emoji-picker { display:flex; flex-wrap:wrap; gap:3px; width:max-content; max-width:100%; padding:5px; border:1px solid var(--border); border-radius:9px; background:var(--surface); box-shadow:var(--ombre-2); }
.teams-emoji-picker button { width:30px; height:30px; border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:17px; }
.teams-emoji-picker button:hover { background:var(--surface-2); transform:scale(1.1); }
.teams-composer { display:flex; align-items:end; gap:9px; padding:11px 14px; border-top:1px solid var(--border); }
.teams-composer textarea { flex:1; min-height:42px; max-height:110px; resize:vertical; }
.teams-thread { display:none; width:340px; min-width:280px; flex:none; border-left:1px solid var(--border); background:var(--surface); }
.teams-thread.ouvert { display:flex; flex-direction:column; min-height:0; }
.teams-thread>header { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-bottom:1px solid var(--border); font-size:13px; }
.teams-thread-parent { padding:12px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.teams-thread-parent b { font-size:11px; }
.teams-thread-parent p { margin-top:5px; color:var(--text-2); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.teams-thread-messages { flex:1; min-height:70px; overflow:auto; padding:8px; }
.teams-thread-messages .teams-message { padding:7px 3px; }
.teams-thread-composer { padding:10px; border-top:1px solid var(--border); }
.teams-thread-composer textarea { width:100%; margin-bottom:7px; }
.teams-thread-composer button { float:right; }
.teams-below { margin-top:16px; }
@media(max-width:900px) { .teams-shell { grid-template-columns:220px minmax(0,1fr); height:calc(100vh - 230px); } .teams-thread { width:300px; } .teams-moderation { display:none; } }
@media(max-width:680px) { .teams-shell { height:auto; min-height:0; display:flex; flex-direction:column; } .teams-sidebar { flex:none; } .teams-sidebar-titre { padding:13px 15px 7px; } .teams-sidebar-titre h2 { font-size:16px; } .teams-sidebar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:0 8px 8px; } .teams-canal { min-height:54px; gap:7px; padding:8px; } .teams-canal-dot { width:16px; height:16px; } .teams-canal.actif::after { width:4px; height:27px; } .teams-canal-txt b { font-size:11px; } .teams-canal-txt small { display:none; } .teams-unread { min-width:18px; padding:2px 4px; font-size:9px; } .teams-moderateur { padding:7px 12px; } .teams-moderateur small { display:none; } .teams-header { min-height:62px; padding:9px 12px; } .teams-header h2 { font-size:17px; } .teams-corps { min-height:300px; height:48vh; } .teams-thread.ouvert { position:absolute; z-index:5; inset:180px 8px auto; width:auto; max-height:calc(100vh - 240px); min-height:260px; border:1px solid var(--border); border-radius:12px; box-shadow:var(--ombre-2); } .teams-composer { padding:8px; } .teams-composer .btn { padding:8px 10px; } .teams-actions { opacity:1; } .teams-below { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .teams-shell * { scroll-behavior:auto !important; transition:none !important; } }


.teams-sidebar-titre p { margin-top:4px; color:#aeb2c4; font-size:10px; }
@media(max-width:680px) { .teams-sidebar-titre p { display:none; } }

/* Utilisation tactile et fenêtres adaptées aux écrans de téléphone. */
.teams-creer { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; margin:0 12px 10px; padding:8px 12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#fff; background:rgba(255,255,255,.09); cursor:pointer; font-weight:650; }
.teams-creer:hover { background:rgba(255,255,255,.16); }
.teams-canal-dot.groupe { display:grid; place-items:center; color:white; }
.teams-canal-dot.groupe .icone { width:14px; height:14px; }
.teams-lu { margin-left:auto; color:#4269c7 !important; font-weight:650; }
.teams-sidebar nav { overflow-y:auto; overscroll-behavior:contain; }
.teams-membres { display:grid; gap:6px; max-height:260px; overflow:auto; padding:2px; }
.teams-membre { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.teams-membre:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.teams-membre input { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.teams-membre span { display:grid; gap:2px; }
.teams-membre b { font-size:13px; }
.teams-membre small { color:var(--text-3); font-size:11px; }
.teams-shell,.teams-shell * { min-width:0; }
.teams-shell { width:100%; }
.teams-composer textarea,.teams-thread-composer textarea { font-size:16px; }
.teams-entete-info { flex:1; min-width:0; }
.teams-entete-info>p { margin-top:3px; }
.teams-entete-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.teams-typing { display:block; min-height:14px; color:var(--accent); font-size:11px; }
.teams-presences { display:flex; align-items:center; gap:5px; margin-top:6px; }
.teams-presence { position:relative; display:inline-grid; place-items:center; width:27px; height:27px; flex:none; border-radius:50%; color:#fff; background:#5b6684; font-size:9px; font-weight:700; }
.teams-presence i { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border:2px solid var(--surface); border-radius:50%; background:#858b91; }
.teams-presence i.available { background:#33a36b; }
.teams-presence i.busy { background:#d13438; }
.teams-presence i.away { background:#c19c00; }
.teams-presences small { margin-left:4px; color:var(--text-3); font-size:10px; }
.teams-fichiers { display:grid; gap:5px; margin-top:7px; }
.teams-fichier { display:flex; align-items:center; gap:9px; width:min(100%,360px); padding:9px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface); text-align:left; cursor:pointer; }
.teams-fichier>span { display:grid; min-width:0; }
.teams-fichier b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.teams-fichier small,.teams-selection-fichiers { color:var(--text-3); font-size:10px; }
.teams-selection-fichiers { flex-basis:100%; }
.teams-message .teams-actions { opacity:1; }
@media(max-width:680px){.teams-entete-actions .teams-moderation{display:none}.teams-entete-actions .btn{min-height:38px;padding:6px 8px;font-size:11px}.teams-header{align-items:flex-start}.teams-presences{flex-wrap:wrap}.teams-message{gap:7px;padding:8px 3px}.teams-thread.ouvert{height:min(66dvh,520px)}.teams-thread-composer{display:grid;gap:7px}.teams-thread-composer button{float:none;justify-self:end;min-height:42px}}
@media(max-width:900px) {
  .page { min-width:0; }
  .teams-shell { height:min(72dvh,720px); min-height:420px; }
  .teams-actions { opacity:1; }
}
@media(max-width:680px) {
  .page { padding:12px 12px 28px; }
  .entete-page { gap:10px; margin-bottom:12px; }
  .entete-page .actions { display:grid; grid-template-columns:1fr; gap:7px; }
  .entete-page .actions .btn { width:100%; min-height:44px; }
  .teams-page { padding-left:10px; padding-right:10px; }
  .teams-shell { position:relative; height:auto; min-height:0; border-radius:14px; }
  .teams-sidebar nav { display:flex; flex-direction:row; overflow-x:auto; gap:6px; padding:0 8px 8px; -webkit-overflow-scrolling:touch; }
  .teams-canal { width:auto; min-width:120px; min-height:54px; flex:0 0 auto; }
  .teams-creer { min-height:44px; }
  .teams-moderateur { display:none; }
  .teams-corps { height:clamp(280px,44dvh,520px); min-height:280px; }
  .teams-thread.ouvert { position:absolute; inset:auto 8px 8px; width:auto; height:min(70dvh,520px); max-height:calc(100% - 16px); }
  .teams-composer { position:sticky; bottom:0; z-index:2; background:var(--surface); padding:9px; padding-bottom:max(9px,env(safe-area-inset-bottom)); }
  .teams-composer textarea { min-height:44px; max-height:100px; }
  .teams-composer .btn { min-height:44px; }
  .teams-below { gap:12px; }
  .teams-below .carte { min-width:0; }
  .teams-meta { flex-wrap:wrap; }
  .teams-actions { flex-wrap:wrap; }
  .teams-actions .btn { min-height:36px; font-size:12px; }
}
@media(max-width:480px) {
  .grille-form { grid-template-columns:minmax(0,1fr); }
  .grille-form > .plein,.grille-form > .demi,.grille-form > .tiers,.grille-form > .deux-tiers,.grille-form > .titre-section { grid-column:1/-1; }
  .champ .saisie,.champ input:not([type=checkbox]):not([type=radio]):not([type=color]),.champ select,.champ textarea,.saisie { min-height:44px; font-size:16px; }
  .champ textarea,.champ textarea.saisie,.saisie textarea { min-height:96px; }
  .btn:not(.btn-sm) { min-height:42px; }
  .calendrier-mois > div { min-height:70px; padding:3px; }
  .calendrier-mois .tete-j { padding:5px 2px; font-size:9px; }
}
@media(max-width:680px) {
  .pl-barre { align-items:stretch; gap:7px; }
  .pl-barre > .btn { min-height:40px; }
  .pl-nav { order:-1; width:100%; margin:0; gap:5px; }
  .pl-nav [data-action="aujourdhui"] { padding:0 9px; font-size:12px; }
  .pl-periode { min-width:0; flex:1; padding:0 8px; font-size:12px; }
  .pl-barre > .segment[data-seg="vue"] { flex:1; min-width:0; display:flex; }
  .pl-barre > .segment[data-seg="vue"] button { flex:1; padding:0 7px; font-size:12px; }
  .pl-conteneur { max-height:calc(100dvh - 250px); border-radius:11px; }
  .pl-grille { grid-template-columns:132px repeat(7,minmax(76px,1fr)); min-width:664px; }
  .pl-tete { padding:7px 5px; font-size:9px; }
  .pl-stats { padding:5px; font-size:10px; gap:5px; }
  .pl-emp { padding:7px 5px 7px 8px; gap:5px; }
  .pl-emp .nom { font-size:11px; }
  .pl-emp .poste,.pl-emp .compteurs { font-size:9px; }
  .pl-cellule { padding:3px; }
  .pl-legende { gap:5px; font-size:10px; }
  .page.pleine:has(.pl-barre) { padding-left:10px; padding-right:10px; }
  .page.pleine:has(.pl-barre) > [data-zone] > div[style*="max-width"] { width:100%; }
  .page.pleine:has(.pl-barre) [data-zone] .carte.mb-s { margin-bottom:8px; }
  .page.pleine:has(.pl-barre) [data-zone] .carte-entete { gap:6px; padding:8px 10px !important; }
  .page.pleine:has(.pl-barre) [data-zone] .carte-entete h3 { font-size:13px; }
  .page.pleine:has(.pl-barre) [data-zone] .liste-item { gap:8px; padding:8px 10px; }
  .page.pleine:has(.pl-barre) [data-zone] .liste-item .titre { font-size:12px; }
  .page.pleine:has(.pl-barre) [data-zone] .liste-item .sous { font-size:10.5px; line-height:1.35; }
}
@media(max-width:680px) {
  .voile { align-items:end; padding:0; padding-top:env(safe-area-inset-top); }
  .modale { width:100%; max-width:none; max-height:calc(100dvh - env(safe-area-inset-top)); border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .modale-entete { padding:16px 16px 10px; }
  .modale-corps { padding:6px 16px 14px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .modale-pied { position:sticky; bottom:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 16px max(10px,env(safe-area-inset-bottom)); }
  .modale-pied .btn { width:100%; min-height:44px; white-space:normal; }
  .modale-pied .gauche { margin:0; }
  .modale-pied:has(.gauche:empty) { grid-template-columns:1fr; }
  .tiroir,.tiroir.large { width:100%; height:100dvh; border-radius:18px 18px 0 0; }
}


/* =====================================================================
   Discussion (dsc-*) : 3 zones façon Teams, plein écran sur téléphone.
   ===================================================================== */
.dsc-page { max-width:none; padding:16px 20px 16px; }
.dsc { --teams:#5b5fc7; --teams-soft:color-mix(in srgb,#5b5fc7 10%,var(--surface)); position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); height:calc(100dvh - 32px); min-height:520px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--ombre-2); }
.dsc.avec-fil { grid-template-columns:300px minmax(0,1fr) 360px; }
.dsc * { min-width:0; }
.dsc-nav { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); background:var(--surface-2); }
.dsc-nav-tete { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 14px 10px 18px; }
.dsc-nav-titre h1 { font-size:20px; letter-spacing:-.01em; }
.dsc-statut { display:inline-flex; align-items:center; gap:6px; margin-top:3px; padding:2px 6px 2px 0; border:0; background:none; color:var(--text-3); font-size:12px; cursor:pointer; }
.dsc-statut .icone { width:12px; height:12px; }
.dsc-statut:hover { color:var(--text); }
.dsc-nav-actions { display:flex; gap:2px; }
.dsc-recherche { display:flex; align-items:center; gap:8px; margin:0 12px 8px; padding:0 11px; height:38px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-3); }
.dsc-recherche:focus-within { border-color:var(--teams); box-shadow:0 0 0 3px color-mix(in srgb,var(--teams) 18%,transparent); }
.dsc-recherche input { flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; }
.dsc-liste { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 8px 14px; }
.dsc-section h2 { margin:14px 10px 5px; color:var(--text-3); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.dsc-item { position:relative; display:flex; align-items:center; gap:11px; width:100%; min-height:56px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; cursor:pointer; transition:background var(--transition); }
.dsc-item:hover { background:var(--surface-3); }
.dsc-item.est-actif { background:var(--surface); box-shadow:var(--ombre-1),inset 0 0 0 1px var(--border); }
.dsc-item.est-actif::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--c); }
.dsc-item.vide { min-height:44px; color:var(--teams); font-size:13px; font-weight:600; }
.dsc-item.vide .icone { width:16px; height:16px; }
.dsc-item-txt { flex:1; display:grid; gap:2px; }
.dsc-item-l1 { display:flex; align-items:baseline; gap:8px; }
.dsc-item-l1 b { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.dsc-item-l1 time { flex:none; color:var(--text-3); font-size:11px; }
.dsc-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-3); font-size:12px; }
.dsc-item small em { color:var(--teams); font-style:normal; font-weight:600; }
.dsc-item.non-lu b, .dsc-item.non-lu small { color:var(--text); font-weight:700; }
.dsc-badge { flex:none; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:#c4314b; color:#fff; font-size:11px; font-weight:700; }
.dsc-pastille { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:var(--c); font-size:12px; font-weight:700; }
.dsc-pastille.canal { border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 30%),radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 80%,white),var(--c) 70%); box-shadow:0 3px 10px color-mix(in srgb,var(--c) 45%,transparent),inset 0 -3px 6px rgba(0,0,0,.18); }
.dsc-pastille .icone { width:18px; height:18px; }
.dsc-pastille.grand, .dsc-av.grand { width:42px; height:42px; }
.dsc-pastille.geant { width:72px; height:72px; border-radius:22px; font-size:24px; }
.dsc-pastille.geant.canal { border-radius:50%; }
.dsc-pastille.geant .icone { width:32px; height:32px; }
.dsc-av { position:relative; flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--av,#6264a7); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; }
.dsc-av.mini { width:28px; height:28px; margin-left:-6px; border:2px solid var(--surface); font-size:10px; }
.dsc-av.mini:first-child { margin-left:0; }
.dsc-av.mini.plus { background:var(--surface-3); color:var(--text-2); }
.dsc-av.micro { width:20px; height:20px; margin-left:-5px; border:2px solid var(--surface); font-size:8px; }
.dsc-av .icone { width:16px; height:16px; }
.dsc-av-place { flex:none; width:36px; }
.dsc-pres { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border:2px solid var(--surface-2); border-radius:50%; background:#8a8f98; }
.dsc-statut .dsc-pres { position:static; border:0; width:9px; height:9px; }
.dsc-pres.ok { background:#13a10e; } .dsc-pres.occupe { background:#c4314b; } .dsc-pres.absent { background:#e9a100; }
.dsc-av.mini .dsc-pres, .dsc-av.micro .dsc-pres { display:none; }

.dsc-conv { position:relative; display:flex; flex-direction:column; min-height:0; background:var(--surface); }
.dsc-tete { display:flex; align-items:center; gap:12px; min-height:68px; padding:10px 18px; border-bottom:1px solid var(--border); }
.dsc-retour { display:none; }
.dsc-tete-txt { flex:1; }
.dsc-tete-txt h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.dsc-tete-txt p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-3); font-size:12px; }
.dsc-tete-actions { display:flex; align-items:center; gap:8px; }
.dsc-membres { display:flex; padding-right:4px; }
.dsc-epingles { border-bottom:1px solid var(--border); background:color-mix(in srgb,#e3730b 6%,var(--surface)); }
.dsc-epingles button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 18px; border:0; background:none; color:var(--text-2); text-align:left; font-size:13px; cursor:pointer; }
.dsc-epingles button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsc-epingles .icone { flex:none; width:16px; height:16px; color:#e3730b; }
.dsc-flux { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:8px 18px 12px; background:linear-gradient(180deg,var(--surface-2),var(--surface) 140px); }
.dsc-jour { position:relative; display:flex; justify-content:center; margin:16px 0 8px; }
.dsc-jour::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--border); }
.dsc-jour span { position:relative; padding:2px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-3); font-size:11px; font-weight:600; }
.dsc-msg { position:relative; display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding-right:40px; }
.dsc-msg.suite { margin-top:3px; }
.dsc-msg.moi { flex-direction:row-reverse; padding:0 0 0 40px; }
.dsc-bulle { max-width:min(680px,100%); padding:8px 12px 9px; border-radius:4px 14px 14px 14px; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.08); border:1px solid var(--border); }
.dsc-msg.suite .dsc-bulle { border-radius:14px; }
.dsc-msg.moi .dsc-bulle { border-radius:14px 4px 14px 14px; border-color:transparent; background:var(--teams-soft); }
.dsc-msg.moi.suite .dsc-bulle { border-radius:14px; }
.dsc-msg.cite .dsc-bulle { border-left:3px solid #c4314b; }
.dsc-msg.epingle .dsc-bulle { box-shadow:0 0 0 1px color-mix(in srgb,#e3730b 45%,transparent); }
.dsc-msg.supprime .dsc-bulle { background:var(--surface-2); color:var(--text-3); }
.dsc-msg.flash .dsc-bulle { animation:dsc-flash 1.5s ease; }
@keyframes dsc-flash { 0%,40% { box-shadow:0 0 0 3px color-mix(in srgb,var(--teams) 45%,transparent); } }
.dsc-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-bottom:2px; }
.dsc-meta b { font-size:13px; }
.dsc-meta time, .dsc-meta small { color:var(--text-3); font-size:11px; }
.dsc-role { padding:0 6px; border-radius:5px; background:color-mix(in srgb,#c239b3 14%,var(--surface)); color:#a3189b; font-size:10px; font-weight:700; text-transform:uppercase; }
.dsc-epingle-ico .icone { width:12px; height:12px; color:#e3730b; vertical-align:-1px; }
.dsc-texte { color:var(--text); font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.dsc-texte a { color:var(--teams); text-decoration:underline; }
.dsc-mention { padding:0 3px; border-radius:4px; color:var(--teams); font-weight:600; background:color-mix(in srgb,var(--teams) 10%,transparent); }
.dsc-mention.moi { color:#fff; background:#c4314b; }
.dsc-fichiers { display:grid; gap:6px; margin-top:8px; }
.dsc-fichier { display:flex; align-items:center; gap:10px; width:min(100%,340px); padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.dsc-fichier:hover { border-color:var(--teams); }
.dsc-fichier > .icone { flex:none; width:22px; height:22px; color:var(--teams); }
.dsc-fichier span { display:grid; }
.dsc-fichier b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.dsc-fichier small { color:var(--text-3); font-size:11px; }
.dsc-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.dsc-reaction { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:13px; cursor:pointer; }
.dsc-reaction span { color:var(--text-2); font-size:11px; font-weight:700; }
.dsc-reaction.moi { border-color:var(--teams); background:var(--teams-soft); }
.dsc-lien-fil { display:inline-flex; align-items:center; gap:8px; margin-top:7px; padding:3px 8px 3px 4px; border:0; border-radius:8px; background:transparent; color:var(--teams); font-size:12px; font-weight:600; cursor:pointer; }
.dsc-lien-fil:hover { background:var(--teams-soft); }
.dsc-mini-avs { display:flex; padding-left:5px; }
.dsc-lu { display:block; margin-top:3px; color:var(--text-3); font-size:10px; text-align:right; }
.dsc-outils { position:absolute; top:-16px; right:48px; z-index:3; display:none; align-items:center; gap:1px; padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--ombre-2); }
.dsc-msg.moi .dsc-outils { right:auto; left:48px; }
.dsc-outils button { display:grid; place-items:center; width:32px; height:30px; border:0; border-radius:7px; background:none; color:var(--text-2); font-size:16px; cursor:pointer; }
.dsc-outils button:hover { background:var(--surface-3); }
.dsc-outils .icone { width:17px; height:17px; }
@media (hover:hover) { .dsc-msg:hover .dsc-outils, .dsc-outils:focus-within { display:flex; } }
.dsc-msg.ouvert .dsc-outils { display:flex; }
.dsc-menu-emojis { display:grid; grid-template-columns:repeat(4,1fr); min-width:0 !important; }
.dsc-menu-emojis .entree { justify-content:center; padding:6px; font-size:20px; }
.dsc-vide { display:grid; justify-items:center; gap:10px; max-width:420px; margin:12vh auto 0; text-align:center; }
.dsc-vide h3 { font-size:18px; }
.dsc-vide p { color:var(--text-3); font-size:14px; }
.dsc-chargement { display:grid; place-items:center; height:100%; }
.dsc-frappe { display:flex; align-items:center; gap:7px; min-height:20px; padding:0 22px; color:var(--text-3); font-size:12px; }
.dsc-points { display:inline-flex; gap:3px; }
.dsc-points i { width:5px; height:5px; border-radius:50%; background:var(--teams); animation:dsc-rebond 1.2s infinite; }
.dsc-points i:nth-child(2) { animation-delay:.15s; } .dsc-points i:nth-child(3) { animation-delay:.3s; }
@keyframes dsc-rebond { 0%,60%,100% { transform:none; opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }

.dsc-saisie { position:relative; margin:0 16px 14px; padding:8px; border:1px solid var(--border-2); border-radius:14px; background:var(--surface); box-shadow:var(--ombre-1); transition:border-color var(--transition),box-shadow var(--transition); }
.dsc-saisie:focus-within { border-color:var(--teams); box-shadow:0 0 0 3px color-mix(in srgb,var(--teams) 16%,transparent); }
.dsc-saisie-ligne { display:flex; align-items:flex-end; gap:4px; }
.dsc-zone { position:relative; flex:1 1 auto; }
.dsc-zone textarea { display:block; width:100%; min-height:40px; max-height:160px; padding:9px 6px; border:0; outline:0; resize:none; background:transparent; color:var(--text); font:inherit; font-size:15px; line-height:1.45; }
.dsc-outil { flex:none; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:10px; background:none; color:var(--text-3); cursor:pointer; }
.dsc-outil:hover { background:var(--surface-3); color:var(--text); }
.dsc-outil .icone { width:20px; height:20px; }
.dsc-envoyer { flex:none; display:grid; place-items:center; width:42px; height:40px; border:0; border-radius:10px; background:var(--teams); color:#fff; cursor:pointer; transition:transform var(--transition),filter var(--transition); }
.dsc-envoyer:hover { filter:brightness(1.08); }
.dsc-envoyer:active { transform:scale(.94); }
.dsc-envoyer:disabled { opacity:.55; }
.dsc-envoyer .icone { width:19px; height:19px; }
.dsc-aide { display:block; padding:2px 6px 0; color:var(--text-3); font-size:11px; }
.dsc-pj { display:flex; flex-wrap:wrap; gap:6px; }
.dsc-pj:not(:empty) { padding:2px 2px 8px; }
.dsc-pj-item { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 6px 5px 9px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:12px; }
.dsc-pj-item span { overflow:hidden; max-width:200px; text-overflow:ellipsis; white-space:nowrap; }
.dsc-pj-item small { color:var(--text-3); }
.dsc-pj-item button { display:grid; place-items:center; width:22px; height:22px; border:0; border-radius:6px; background:none; color:var(--text-3); cursor:pointer; }
.dsc-pj-item .icone { width:14px; height:14px; }
.dsc-emojis { display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin-top:6px; padding:6px; border-top:1px solid var(--border); }
.dsc-emojis button { height:34px; border:0; border-radius:8px; background:none; font-size:19px; cursor:pointer; }
.dsc-emojis button:hover { background:var(--surface-3); }
.dsc-suggest { position:absolute; left:0; bottom:calc(100% + 10px); z-index:6; display:grid; width:min(320px,90vw); max-height:300px; overflow:auto; padding:5px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--ombre-3); }
.dsc-suggest button { display:flex; align-items:center; gap:10px; padding:7px 9px; border:0; border-radius:8px; background:none; color:var(--text); text-align:left; cursor:pointer; }
.dsc-suggest button span:last-child { display:grid; }
.dsc-suggest button b { font-size:13px; } .dsc-suggest button small { color:var(--text-3); font-size:11px; }
.dsc-suggest button.actif, .dsc-suggest button:hover { background:var(--teams-soft); }
.dsc-annonce { display:flex; align-items:center; gap:10px; margin:0 16px 14px; padding:12px 14px; border-radius:12px; background:var(--surface-2); color:var(--text-2); font-size:13px; }
.dsc-annonce .icone { width:18px; height:18px; color:#e3730b; }
.dsc.depot .dsc-conv::after { content:"Déposez vos fichiers ici"; position:absolute; inset:10px; z-index:9; display:grid; place-items:center; border:2px dashed var(--teams); border-radius:14px; background:color-mix(in srgb,var(--surface) 85%,transparent); color:var(--teams); font-weight:700; }

.dsc-fil { display:none; flex-direction:column; min-height:0; border-left:1px solid var(--border); background:var(--surface-2); }
.dsc.avec-fil .dsc-fil { display:flex; }
.dsc-fil > header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:68px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--border); }
.dsc-fil > header div { display:grid; }
.dsc-fil > header small { color:var(--text-3); font-size:12px; }
.dsc-fil-flux { flex:1; overflow-y:auto; padding:4px 12px 12px; }
.dsc-fil-flux .dsc-msg { padding-right:0; } .dsc-fil-flux .dsc-msg.moi { padding-left:0; }
.dsc-fil-flux .dsc-outils { right:8px; } .dsc-fil-flux .dsc-msg.moi .dsc-outils { left:8px; }
.dsc-fil-saisie { display:flex; align-items:flex-end; gap:6px; margin:0 12px 12px; padding:6px; border:1px solid var(--border-2); border-radius:12px; background:var(--surface); }
.dsc-fil-saisie:focus-within { border-color:var(--teams); }
.dsc-fil-saisie textarea { flex:1; min-height:40px; max-height:140px; padding:8px 6px; border:0; outline:0; resize:vertical; background:transparent; color:var(--text); font:inherit; font-size:15px; }

.dsc-personnes { display:grid; gap:6px; max-height:min(52vh,380px); overflow:auto; padding:2px; }
.dsc-personne { display:flex; align-items:center; gap:11px; min-height:52px; padding:8px 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.dsc-personne.bouton { width:100%; }
.dsc-personne:hover { border-color:var(--teams); }
.dsc-personne:has(input:checked) { border-color:var(--teams); background:var(--teams-soft); }
.dsc-personne input { flex:none; width:18px; height:18px; accent-color:var(--teams); }
.dsc-personne-txt { flex:1; display:grid; gap:1px; }
.dsc-personne-txt b { font-size:14px; } .dsc-personne-txt small { color:var(--text-3); font-size:12px; }
.dsc-personne .dsc-pres { border-color:var(--surface); }

@media (max-width:1180px) { .dsc.avec-fil { grid-template-columns:270px minmax(0,1fr); } .dsc.avec-fil .dsc-fil { position:absolute; top:0; right:0; bottom:0; z-index:8; width:min(380px,100%); box-shadow:var(--ombre-3); } .dsc { grid-template-columns:270px minmax(0,1fr); } }
@media (max-width:900px) {
  .dsc-page { padding:0; }
  .dsc { height:calc(100dvh - 61px); min-height:0; border:0; border-radius:0; box-shadow:none; grid-template-columns:minmax(0,1fr) !important; }
  .dsc[data-vue="liste"] .dsc-conv, .dsc[data-vue="liste"] .dsc-fil { display:none; }
  .dsc[data-vue="conv"] .dsc-nav { display:none; }
  .dsc-nav { border-right:0; }
  .dsc-retour { display:grid; margin-left:-8px; }
  .dsc-tete { min-height:60px; padding:8px 12px; gap:10px; }
  .dsc-tete-actions .btn span { display:none; }
  .dsc-membres { display:none; }
  .dsc-flux { padding:4px 12px 10px; }
  .dsc-msg { padding-right:18px; } .dsc-msg.moi { padding-left:18px; }
  .dsc-msg .dsc-av:not(.micro), .dsc-av-place { width:30px; height:30px; font-size:11px; }
  .dsc-outils { top:auto; bottom:calc(100% + 2px); right:0; } .dsc-msg.moi .dsc-outils { left:0; }
  .dsc-outils button { width:38px; height:36px; }
  .dsc-saisie { margin:0 8px; margin-bottom:max(8px,env(safe-area-inset-bottom)); padding:5px; border-radius:22px; }
  .dsc-aide { display:none; }
  .dsc-emojis { grid-template-columns:repeat(8,1fr); }
  .dsc-outil { width:38px; } .dsc-envoyer { border-radius:50%; width:40px; }
  .dsc-annonce { margin:0 8px 8px; }
  .dsc.avec-fil .dsc-fil { position:absolute; inset:0; width:auto; z-index:8; }
  .dsc-item { min-height:62px; }
  .dsc-item-l1 b { font-size:15px; }
  .dsc-nav-tete { padding:12px 10px 8px 16px; }
  .dsc-recherche { height:42px; }
}

/* =====================================================================
   Tableau de bord (tb-*) : petits multiples N/N-1, jauges, tendance, barres, anneau, entonnoir.
   ===================================================================== */
.tb-page { max-width:1500px; }
.tb-entete { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px 20px; margin-bottom:10px; }
.tb-sur { color:var(--brand); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.tb-entete h1 { margin-top:2px; font:700 clamp(26px,3vw,34px)/1.1 var(--police-titre); letter-spacing:-.02em; }
.tb-filtres { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.tb-filtre { display:flex; align-items:center; gap:8px; height:40px; padding:0 4px 0 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text-3); }
.tb-filtre select { height:100%; max-width:240px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.tb-mois { display:flex; align-items:center; height:40px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.tb-mois input { width:150px; height:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; text-align:center; }
.tb-contexte { margin:0 0 14px; color:var(--text-3); font-size:13px; }
.tb-contexte b { color:var(--text); }
.tb-grille { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.tb-bloc { min-width:0; padding:16px 18px 18px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--ombre-1); animation:tb-entree .45s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i,0) * 60ms); }
@keyframes tb-entree { from { opacity:0; transform:translateY(10px); } }
.tb-large, .tb-ops { grid-column:1/-1; }
.tb-ops { padding:0; border:0; background:none; box-shadow:none; }
.tb-ops .tb-bloc-tete { padding:6px 2px 0; }
.tb-bloc-tete { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:12px; }
.tb-bloc-tete h2 { font-size:16px; letter-spacing:-.01em; }
.tb-bloc-tete p { margin-top:2px; color:var(--text-3); font-size:12px; }
.tb-legende { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--text-2); font-size:12px; }
.tb-legende span { display:inline-flex; align-items:center; gap:6px; }
.tb-legende i { width:16px; height:3px; border-radius:2px; background:var(--c); }
.tb-legende i.pointille { height:0; border-top:2px dashed var(--c); background:none; }
.tb-legende i.rond { width:10px; height:10px; border-radius:50%; }
.tb-graphe { position:relative; min-height:200px; }
.tb-graphe svg { display:block; width:100%; height:auto; overflow:visible; }
.tb-graphe text { fill:var(--text-3); font-size:11px; font-family:var(--police); }
.tb-graphe .grille-l { stroke:var(--grille); stroke-width:1; }
.tb-graphe .etiquette-g { fill:var(--text); font-weight:700; font-size:12px; }
.tb-pt { cursor:pointer; }
.tb-pt:hover circle:last-child { r:8; }
.tb-bulle { position:absolute; z-index:4; display:grid; gap:1px; width:150px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--ombre-2); font-size:12px; pointer-events:none; }
.tb-bulle span { font-size:15px; font-weight:700; } .tb-bulle small { color:var(--text-3); }
.tb-table { margin-top:8px; font-size:13px; }
.tb-table summary { color:var(--text-3); font-size:12px; cursor:pointer; }
.tb-table table { margin-top:8px; }

.tb-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tb-kpi { position:relative; display:grid; gap:4px; padding:14px 14px 8px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,var(--surface),var(--surface-2)); overflow:hidden; transition:transform var(--transition),box-shadow var(--transition); }
.tb-kpi:hover { transform:translateY(-2px); box-shadow:var(--ombre-2); }
.tb-kpi-tete { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:12px; font-weight:600; }
.tb-kpi-ico { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--serie-1) 12%,var(--surface)); color:var(--serie-1); }
.tb-kpi-ico .icone { width:15px; height:15px; }
.tb-kpi-val { font:700 clamp(20px,2.2vw,26px)/1.15 var(--police-titre); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tb-delta { display:inline-flex; align-items:center; gap:4px; width:max-content; padding:2px 8px 2px 5px; border-radius:999px; background:var(--surface-3); color:var(--text-3); font-size:12px; font-weight:700; }
.tb-delta .icone { width:14px; height:14px; }
.tb-delta small { color:inherit; font-weight:500; opacity:.8; }
.tb-delta.ok { background:var(--ok-soft); color:var(--ok); }
.tb-delta.ko { background:var(--danger-soft); color:var(--danger); }
.tb-mini { display:block; width:100%; height:64px; margin-top:4px; }

.tb-jauges { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tb-jauge { display:grid; justify-items:center; gap:1px; text-align:center; }
.tb-jauge .jauge-svg { width:100%; max-width:180px; height:auto; }
.tb-jauge b { margin-top:-6px; font:700 20px var(--police-titre); }
.tb-jauge span { font-size:13px; font-weight:600; }
.tb-jauge small { color:var(--text-3); font-size:11px; }

.tb-barres { display:grid; gap:12px; }
.tb-barre { display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:10px; }
.tb-barre-nom { display:flex; align-items:center; gap:8px; overflow:hidden; font-size:13px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
.tb-barre-nom i { flex:none; width:10px; height:10px; border-radius:3px; background:var(--c); }
.tb-barre-piste { height:14px; border-radius:7px; background:var(--surface-3); overflow:hidden; }
.tb-barre-piste span { display:block; width:var(--w); height:100%; border-radius:7px; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,white),var(--c)); transform-origin:left; animation:tb-barre .8s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i) * 80ms + .15s); }
@keyframes tb-barre { from { transform:scaleX(0); } }
.tb-barre-val { display:grid; justify-items:end; min-width:86px; }
.tb-barre-val b { font-size:13px; font-variant-numeric:tabular-nums; }
.tb-barre-val small { font-size:11px; font-weight:700; }
.tb-barre-val small.ok { color:var(--ok); } .tb-barre-val small.ko { color:var(--danger); }

.tb-donut .donut-bloc { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.tb-donut .legende-donut { flex:1; min-width:180px; display:grid; gap:7px; font-size:13px; }
.tb-donut .legende-donut > div { display:flex; align-items:center; gap:8px; }
.tb-donut .legende-donut i { flex:none; width:10px; height:10px; border-radius:3px; background:var(--c); }

.tb-entonnoir { display:grid; gap:8px; }
.tb-etape { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center; gap:12px; }
.tb-etape-barre { justify-self:center; display:grid; place-items:center; width:var(--w); height:42px; border-radius:10px; background:var(--c); color:#fff; clip-path:polygon(0 0,100% 0,96% 100%,4% 100%); animation:tb-entree .5s both; animation-delay:calc(var(--i) * 90ms + .1s); }
.tb-etape-barre b { font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.tb-etape > span { display:grid; font-size:13px; font-weight:600; }
.tb-etape small { color:var(--text-3); font-size:11px; font-weight:500; }

@media (max-width:1100px) { .tb-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
  .tb-grille { grid-template-columns:minmax(0,1fr); }
  .tb-entete { align-items:stretch; }
  .tb-filtres { width:100%; }
  .tb-filtre { flex:1 1 100%; } .tb-filtre select { max-width:none; flex:1; }
  .tb-mois { flex:1; } .tb-mois input { flex:1; width:auto; }
}
@media (max-width:560px) {
  .tb-bloc { padding:14px 12px 14px; border-radius:16px; }
  .tb-kpis { gap:8px; }
  .tb-kpi { padding:11px 10px 6px; }
  .tb-kpi-tete span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tb-kpi-ico { display:none; }
  .tb-delta small { display:none; }
  .tb-mini { height:44px; }
  .tb-jauges { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .tb-jauge b { font-size:16px; } .tb-jauge small { display:none; } .tb-jauge span { font-size:11px; }
  .tb-barre { grid-template-columns:72px minmax(0,1fr) auto; gap:8px; }
  .tb-barre-val { min-width:70px; }
  .tb-etape { grid-template-columns:minmax(0,1fr); gap:4px; } .tb-etape > span { text-align:center; }
}
.tb-perso { display:grid; gap:6px; }
.tb-perso-ligne { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.tb-perso-ligne label { flex:1; display:flex; align-items:center; gap:10px; cursor:pointer; }
.tb-perso-ligne label span { display:grid; } .tb-perso-ligne small { color:var(--text-3); font-size:12px; }
.tb-perso-ligne input { flex:none; width:18px; height:18px; accent-color:var(--brand); }
.tb-perso-ligne:has(input:checked) { border-color:color-mix(in srgb,var(--brand) 45%,var(--border)); background:var(--brand-soft); }
.tb-perso-ordre { display:flex; gap:2px; }
.tb-choix { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0; border:0; }
.tb-choix legend { margin-bottom:6px; color:var(--text-2); font-size:13px; font-weight:600; }
.tb-choix label { position:relative; }
.tb-choix input { position:absolute; opacity:0; }
.tb-choix span { display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; cursor:pointer; }
.tb-choix input:checked + span { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); font-weight:600; }
.tb-choix input:focus-visible + span { box-shadow:var(--anneau); }
@media (prefers-reduced-motion:reduce) { .tb-bloc, .tb-barre-piste span, .tb-etape-barre { animation:none; } }

/* ---------- En-têtes de page et barre du planning compactes sur téléphone ---------- */
@media (max-width:680px) {
  .entete-page { flex-wrap:wrap; }
  .entete-page .actions { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
  .entete-page .actions .btn { width:auto; flex:1 1 auto; min-height:42px; }
  .entete-page .actions .btn.btn-icone { flex:0 0 42px; }
  .pleine .entete-page { margin-bottom:8px; }
  .pleine .entete-page .titres { display:none; }
  .pleine .entete-page .actions { flex-wrap:nowrap; }
  .pleine .entete-page .actions [data-action="modeles"], .pleine .entete-page .actions [data-action="analyser"] { flex:0 0 44px; padding:0; }
  .pleine .entete-page .actions [data-action="modeles"] > span, .pleine .entete-page .actions [data-action="analyser"] > span { display:none; }
  .pleine .entete-page .actions [data-action="publier"] { flex:1 1 auto; }
  .pl-barre { display:grid !important; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:6px !important; }
  .pl-barre > .pl-nav { grid-column:1 / -1; order:-1; width:100%; display:flex; }
  .pl-barre > .pl-nav .pl-periode { flex:1; min-width:0; }
  .pl-barre > [data-action="filtre"], .pl-barre > [data-action="tri"] { min-width:42px; padding:0 10px; }
  .pl-barre > [data-action="filtre"] > span:not(.pastille), .pl-barre > [data-action="tri"] [data-lib-tri], .pl-barre > [data-action="tri"] > .icone:last-child { display:none; }
  .pl-barre > .segment[data-seg="vue"] { min-width:0; width:100%; display:flex; }
  .pl-barre > .segment[data-seg="vue"] button { flex:1; min-width:0; padding:0 4px; font-size:13px; }
  .pl-barre > .segment[data-seg="moi"] { grid-column:1 / 3; min-width:0; display:flex; }
  .pl-barre > .segment[data-seg="moi"] button { flex:1; min-width:0; padding:0 6px; font-size:13px; white-space:nowrap; }
  .pl-barre > .segment[data-seg="moi"] + .pl-nav + .segment[data-seg="vue"] { grid-column:3 / -1; }
  .pl-barre > [data-action="couts"] { width:42px; }
}

.dsc [hidden], .tb-page [hidden] { display:none !important; }

/* ---------- Dépenses & achats (dp-*) ---------- */
.dp-filtres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.dp-filtres .saisie { width:auto; min-width:150px; flex:0 1 auto; }
.dp-recherche { flex:1 1 260px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text-3); }
.dp-recherche input { flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.dp-recherche:focus-within { border-color:var(--brand); box-shadow:var(--anneau); }
.dp-grille { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
.dp-cote { display:grid; gap:14px; }
.dp-liste { display:grid; }
.dp-ligne { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px 16px; border:0; border-top:1px solid var(--border); background:none; color:var(--text); text-align:left; cursor:pointer; transition:background var(--transition); }
.dp-ligne:first-child { border-top:0; }
.dp-ligne:hover { background:var(--surface-2); }
.dp-ligne::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--c); opacity:.8; }
.dp-date { display:grid; justify-items:center; padding:5px 0; border-radius:10px; background:var(--surface-3); line-height:1.1; }
.dp-date b { font-size:17px; } .dp-date small { color:var(--text-3); font-size:10px; text-transform:uppercase; }
.dp-txt { display:grid; gap:2px; }
.dp-txt > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.dp-txt > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-3); font-size:12px; }
.dp-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:3px; }
.dp-montant { display:grid; justify-items:end; font-variant-numeric:tabular-nums; }
.dp-montant b { font-size:15px; } .dp-montant small { color:var(--text-3); font-size:11px; }
.dp-a-valider { border-color:color-mix(in srgb,var(--warn) 40%,var(--border)); background:linear-gradient(180deg,var(--warn-soft),var(--surface) 70px); }
.dp-a-valider .liste-item { flex-wrap:wrap; }
.dp-ttc { display:flex; align-items:center; min-height:40px; padding:0 12px; border-radius:var(--r-sm); background:var(--surface-3); font-weight:700; font-variant-numeric:tabular-nums; }
.dp-statut { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.dp-total-abos { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); color:var(--text-2); font-size:13px; }
.warn-texte { color:var(--warn); }
@media (max-width:1100px) { .dp-grille { grid-template-columns:minmax(0,1fr); } .dp-cote { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } }
@media (max-width:680px) {
  .dp-filtres .saisie { flex:1 1 calc(50% - 4px); min-width:0; }
  .dp-ligne { grid-template-columns:44px minmax(0,1fr); padding:12px; }
  .dp-ligne .dp-montant { grid-column:2; justify-items:start; grid-auto-flow:column; gap:8px; align-items:baseline; }
  .dp-date b { font-size:15px; }
}

/* Agenda externe (collaborateurs connectés) : indisponibilités en lecture seule dans le planning. */
.absence.agenda { background: repeating-linear-gradient(135deg, color-mix(in srgb, #64748b 14%, var(--surface)) 0 7px, color-mix(in srgb, #64748b 7%, var(--surface)) 7px 14px); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64748b 30%, transparent); }
.absence.agenda b { display: flex; align-items: center; gap: 4px; }
.absence.agenda .icone { width: 12px; height: 12px; }
.absence.agenda.conflit { box-shadow: inset 0 0 0 2px var(--warn); }
.frise-barre.agenda { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.35) 6px 12px); }