/* ============================================================
   Planning Boutique — Feuille de style
   Design épuré inspiré des logiciels de planning modernes.
   ============================================================ */

:root {
  /* Couleurs de marque */
  --primary: #6c5ce7;
  --primary-dark: #5a48d6;
  --primary-soft: #efedff;
  --primary-soft-2: #f6f5ff;

  /* Surfaces & fond */
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #fafbfd;

  /* Texte */
  --text: #1d2033;
  --text-2: #5b6075;
  --text-3: #9398ad;

  /* Lignes */
  --border: #ebecf3;
  --border-2: #e1e2ec;

  /* Sémantique */
  --success: #20bf73;
  --success-soft: #e4f8ee;
  --warning: #f3a712;
  --warning-soft: #fdf1d8;
  --danger: #f0506e;
  --danger-soft: #fde6ea;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(29, 32, 51, 0.06), 0 1px 3px rgba(29, 32, 51, 0.05);
  --shadow-md: 0 4px 14px rgba(29, 32, 51, 0.08);
  --shadow-lg: 0 12px 40px rgba(29, 32, 51, 0.16);

  /* Divers */
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 248px;
  --topbar-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
svg { width: 20px; height: 20px; flex-shrink: 0; }

#app { display: flex; height: 100vh; overflow: hidden; }

/* ===================== Barre latérale ===================== */
.sidebar {
  position: relative;
  width: var(--sidebar-w);
  flex-shrink: 0;
  /* v5.235.0 « coque douce » : plus de trait de séparation — le menu repose sur le canevas commun,
     détaché du contenu par une ombre très douce au lieu d'une bordure nette. */
  background: transparent;
  border-right: 0;
  box-shadow: 9px 0 26px rgba(70, 70, 130, .05);
  display: flex;
  flex-direction: column;
  padding: 14px 14px;
  height: 100vh;
}

/* v5.245.0 (idée de Mika) : le SOLEIL du bandeau « déborde » sur le menu — écho lumineux au haut-droit
   de la sidebar (côté bandeau), DERRIÈRE les entrées (z-index 0) : ça prolonge le ciel du hero et
   réchauffe le menu sans jamais masquer les libellés. Teinté par heroTick (doré jour / froid nuit). */
.sidebar__glow { position: absolute; z-index: 0; top: 104px; left: -44px; right: auto; width: 230px; height: 200px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 32%, rgba(255,201,92,.55), rgba(255,176,74,.24) 42%, rgba(255,176,74,0) 70%); filter: blur(3px); opacity: 0; transition: opacity .5s ease; } /* v5.247.0 : halo à GAUCHE (près de l'icône soleil « Météo » du menu) — effet « rappel météo » */
.sidebar__glow.on { opacity: 1; }
/* v5.274 : le halo prend la FORME de la météo — silhouette floutée de l'icône du menu, centrée sur elle. */
.sidebar__glow .sbg-wx { position: absolute; left: 40%; top: 36%; width: 128px; height: 128px; transform: translate(-50%, -50%); }
.sidebar__glow .sbg-wx .wxm { width: 100%; height: 100%; filter: none; }
.sidebar__brand, .sidebar__navarrows, .sidebar__nav, .sidebar__footer { position: relative; z-index: 1; }
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 14px;
  flex-shrink: 0;
}
.sidebar__logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: transparent;   /* la tuile colorée est dessinée par ::before, AU-DESSUS de la comète */
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.35);
  cursor: pointer;
  position: relative;
  overflow: visible;         /* v5.315 : la lueur de la comète peut DÉBORDER de la tuile */
  z-index: 0;                /* contexte d'empilement : la comète passe DERRIÈRE la tuile du logo */
}
/* TUILE du logo (fond) — calque AU-DESSUS de la comète (z-index:-2) mais SOUS l'image/le texte. */
.sidebar__logo::before {
  content: ""; position: absolute; inset: 0; border-radius: 11px; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, var(--primary) 0%, #8a7bff 100%);
}
/* v5.308 : tuile du logo en VERRE DÉPOLI teinté ciel (demande Mika) — au lieu du caisson blanc. Teintes posées par teinteNav. */
.sidebar__logo.has-img::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; } /* v5.310 : FOND TRANSPARENT (demande Mika) — le logo (loups + LEME, PNG transparent) flotte, la comète passe derrière */
/* COMÈTE MULTICOLORE (v5.222.0) : UN point lumineux qui orbite DERRIÈRE la tuile du logo et dont la
   couleur DÉFILE sur tout l'arc-en-ciel du hub (mêmes teintes et même tempo 14 s que l'ancienne barre
   du haut, qu'elle remplace — demande de Mika). */
/* v5.334 : comète du logo RETIRÉE (demande Mika). */
.sidebar__logo::after { content: none; }
@keyframes cometeOrbit {
  /* v5.315 : rayon -24px — la comète (couleur horloge) reste DERRIÈRE le logo mais sa lueur DÉBORDE
     subtilement en périphérie et tourne autour (demande Mika). */
  from { transform: rotate(0deg) translateY(-24px); }
  to   { transform: rotate(360deg) translateY(-24px); }
}
@keyframes cometeArc { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .sidebar__logo::after { animation: none; opacity: 0; } }
/* v5.311 : LOGO ANIMÉ — reflet lumineux qui balaie le dessin (masqué à la forme du logo via son PNG). */
.sidebar__logo .logo-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: 11px;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: logoShine 5.5s ease-in-out infinite;
}
@keyframes logoShine { 0%, 62% { background-position: 135% 0; } 100% { background-position: -35% 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .sidebar__logo .logo-shine { animation: none; opacity: 0; } }
/* Halo BLEU au clic sur le logo (les loups) — onde qui se diffuse, dans le ton du logo. */
@keyframes logoHaloBleu {
  0%   { box-shadow: 0 0 0 0 rgba(45, 156, 219, 0.6), 0 0 14px 2px rgba(45, 156, 219, 0.55), 0 6px 16px rgba(108, 92, 231, 0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(45, 156, 219, 0), 0 0 20px 6px rgba(45, 156, 219, 0.35), 0 6px 16px rgba(108, 92, 231, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(45, 156, 219, 0), 0 0 0 0 rgba(45, 156, 219, 0), 0 6px 16px rgba(108, 92, 231, 0.35); }
}
.sidebar__logo.halo-anim { animation: logoHaloBleu 0.9s ease-out; }
/* ÉCHO au clic du logo, propagé en cascade sur les icônes du cluster, dans la COULEUR DU MOMENT (--echo-col). */
@keyframes echoHaloCluster {
  0%   { box-shadow: 0 0 0 1px var(--echo-col, rgba(45,156,219,0.95)), 0 0 9px 3px var(--echo-col, rgba(45,156,219,0.8)); }
  45%  { box-shadow: 0 0 0 3px var(--echo-col, rgba(45,156,219,0.95)), 0 0 16px 6px var(--echo-col, rgba(45,156,219,0.8)); }
  100% { box-shadow: 0 0 0 11px transparent, 0 0 20px 10px transparent; }
}
.topbar-cluster .topbar-icon.echo-halo, .topbar-cluster button.echo-halo, .topbar-cluster .topbar-user.echo-halo { animation: echoHaloCluster 0.9s ease-out !important; z-index: 5; }
/* Halo flottant (clic sur une icône du cluster) : indépendant de l'icône → survit à un re-rendu du cluster. */
.echo-floating { animation: echoHaloCluster 0.9s ease-out; box-sizing: border-box; }
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar__title { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; }
.sidebar__subtitle { font-size: 11px; color: var(--text-3); font-weight: 600; align-self: flex-start; padding: 1px 8px; border-radius: 999px; margin-top: 3px; letter-spacing: .2px; } /* v5.293 : sous-titre boutique en pastille teintée ciel (couleurs posées par teinteNav) */
.sidebar__clock { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px 10px; margin-top: -2px;
  /* Nuances VIOLETTES de la palette (clair → profond) */
  --ck-v1: #a78bfa; --ck-v2: #8b5cf6; --ck-v3: #7c3aed; --ck-v4: #6d28d9; }
.flip { position: relative; display: inline-block; width: 38px; height: 48px; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; perspective: 200px; }
.flip > div { position: absolute; left: 0; width: 100%; height: 24px; overflow: hidden; }
.flip > div span { position: absolute; left: 0; width: 100%; height: 48px; line-height: 48px; text-align: center; color: #fff; }
.flip .fc-top, .flip .fc-foldtop { top: 0; border-radius: 7px 7px 0 0; background: linear-gradient(var(--ck-v2), var(--ck-v3)); }
.flip .fc-top span, .flip .fc-foldtop span { top: 0; }
.flip .fc-bot, .flip .fc-foldbot { top: 24px; border-radius: 0 0 7px 7px; background: linear-gradient(var(--ck-v3), var(--ck-v4)); }
.flip .fc-bot span, .flip .fc-foldbot span { bottom: 0; }
.flip .fc-foldtop { transform-origin: 50% 100%; backface-visibility: hidden; z-index: 3; }
.flip .fc-foldbot { transform-origin: 50% 0; transform: rotateX(90deg); backface-visibility: hidden; z-index: 3; }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-1px); background: rgba(0,0,0,.28); z-index: 4; pointer-events: none; }
.flip.go .fc-foldtop { animation: fcFoldTop .28s ease-in forwards; }
.flip.go .fc-foldbot { animation: fcFoldBot .28s ease-out .28s forwards; }
@keyframes fcFoldTop { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes fcFoldBot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.flip-sep { color: var(--ck-v1); font-size: 20px; font-weight: 800; }
/* Flèches de navigation (Précédent / Suivant) sous l'horloge */
.sidebar__navarrows { display: flex; justify-content: flex-start; gap: 10px; padding: 2px 8px 10px; } /* alignés à gauche, même bord que le logo (v5.203.0) */
.navarrow { width: 38px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--primary); cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s, color .15s; }
.navarrow svg { width: 22px; height: 22px; } /* v5.292 : icônes du haut du menu plus grandes (17 → 22px, demande Mika) */
.navarrow:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 38%, transparent); }
.navarrow:active:not(:disabled) { transform: translateY(0); }
/* Désactivé : la TUILE garde sa pleine couleur ciel (comme l'horloge) — seul le chevron s'estompe.
   v5.217.0 : blanc plus prononcé (opacité .8, trait épaissi) — à .55 il restait trop discret. */
.navarrow:disabled { cursor: default; }
.navarrow:disabled svg { opacity: .8; }
.navarrow svg { stroke-width: 2.8; }
.navarrow--home { margin-right: 4px; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #000)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 32%, transparent); }
.navarrow--home:hover:not(:disabled) { background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #000)); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 42%, transparent); }
/* Pas de rectangle noir au clic souris sur les boutons du menu (maison, flèches, items) ; anneau thème au clavier seulement (accessibilité). v5.360.0 (demande Mika) */
.navarrow:focus, .nav-item:focus { outline: none; }
.navarrow:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .flip.go .fc-foldtop, .flip.go .fc-foldbot { animation: none; } .flip .fc-foldbot { transform: rotateX(90deg); } }
/* Actions du briefing (Imprimer / PDF / Export / Teams) — sous-entrées VERTICALES sous l'onglet Briefing (façon sous-app) */
.bf-nav-acts { display: none; flex-direction: column; gap: 1px; }   /* JS met display:flex quand l'onglet Briefing est visible */
.bf-nav-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px 7px 34px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; font-size: 13px; text-align: left; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.bf-nav-act svg { width: 16px; height: 16px; flex-shrink: 0; }
.bf-nav-act:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.bf-nav-act:active { transform: translateY(0); }
/* v5.324 : icônes du sous-menu Briefing en COULEUR (demande Mika « des icônes de couleurs partout dans les sous-menus »). */
.bf-nav-act[data-bf-act="print"] svg { color: #4dabf7; }
.bf-nav-act[data-bf-act="pdf"] svg { color: #fa5252; }
.bf-nav-act[data-bf-act="json"] svg { color: #12b886; }
.bf-nav-act[data-bf-act="teams"] svg { color: #6264a7; }
/* Organisation du jour — mêmes gestes, mêmes couleurs que le briefing (v5.833.15, demande Mika). */
.bf-nav-act[data-org-act="print"] svg { color: #4dabf7; }
.bf-nav-act[data-org-act="pdf"] svg { color: #fa5252; }
.bf-nav-act[data-org-act="csv"] svg { color: #2f9e44; }
.bf-nav-act[data-org-act="json"] svg { color: #12b886; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; } /* v5.478 : barre de défilement INVISIBLE (le défilement molette/tactile marche toujours) — demande Mika « pas de barre pour slider » */
.sidebar__nav::-webkit-scrollbar { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 600; font-size: 14px;
  text-align: left;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; }
/* v5.317 : survol/clic en LAVIS CIEL subtil (fini le fond blanc qui jurait sur le fond ciel) */
.nav-item:hover:not(:disabled) { background: color-mix(in srgb, var(--nav-ink, var(--primary)) 9%, transparent); color: var(--text); transform: translateY(-1px); }
/* v5.316 : item actif du menu en TEINTE CIEL (posée par teinteNav) + barre d'accent — fini le violet */
.nav-item.is-active { background: linear-gradient(160deg, var(--nav-t1, var(--primary-soft)), var(--nav-t2, var(--primary-soft))); color: var(--nav-ink, var(--primary-dark)); box-shadow: inset 3px 0 0 var(--nav-ink, var(--primary)); }
.nav-item.is-active svg { color: var(--nav-ink, var(--primary)); }
/* v5.317 : couleurs des icônes de menu jusque-là grises (par section) — plus aucune icône sans couleur */
.nav-item[data-vue="briefing"] svg { color: #f59f00; }
.nav-item[data-vue="suiviCaisse"] svg, .nav-item[data-vue="caisseRapport"] svg { color: #15aabf; }
.nav-item[data-vue="suiviPlannings"] svg { color: #4dabf7; }  /* v5.321 : bleu (≠ Planning violet) */
.nav-item[data-vue="mesPlanningsSignes"] svg { color: #6c5ce7; }
.nav-item[data-vue="absSupp"] svg { color: #e8590c; }
.nav-item[data-vue="stc"] svg { color: #f76707; }            /* v5.321 : orange (≠ verts Salaires) */
/* v5.321 : icônes RH — chacune sa couleur parlante (fini le bleu uniforme) */
.nav-item[data-vue="rh"] svg { color: #4c6ef5; }              /* RH — indigo */
.nav-item[data-vue="rhConvention"] svg { color: #7048e8; }    /* convention collective — violet */
.nav-item[data-vue="rhAvertissements"] svg { color: #fa5252; }/* avertissements — rouge alerte */
.nav-item[data-vue="rhRupture"] svg { color: #f76707; }       /* rupture conventionnelle — orange */
.nav-item[data-vue="rhFinContrat"] svg { color: #e64980; }    /* fin de contrat — rose */
.nav-item[data-vue="contrat"] svg { color: #1098ad; }         /* contrats — cyan */
.nav-item[data-vue="contratCDI"] svg { color: #37b24d; }      /* CDI — vert (stable) */
.nav-item[data-vue="contratCDD"] svg { color: #f59f00; }      /* CDD — ambre (temporaire) */
/* v5.318 : chaque icône météo une couleur parlante (au lieu du bleu uniforme) */
.nav-item[data-vue="meteo"] svg { color: #f59f00; }            /* soleil — doré */
.nav-item[data-vue="meteoCartes"] svg { color: #20c997; }      /* cartes — turquoise */
.nav-item[data-vue="meteoHoraire"] svg { color: #4dabf7; }     /* prévision horaire — bleu ciel */
.nav-item[data-vue="meteoMensuel"] svg { color: #7048e8; }     /* mensuel — violet */
.nav-item[data-vue="meteoTendances"] svg { color: #f06595; }   /* tendances — rose */
.nav-item[data-vue="meteoIntemperies"] svg { color: #fa5252; } /* intempéries — rouge alerte */
.nav-item[data-vue="meteoAir"] svg { color: #82c91e; }         /* qualité de l'air — vert */
.nav-item[data-vue="meteoPollen"] svg { color: #fab005; }      /* pollen — jaune */
.nav-item[data-vue="meteoDetails"] svg { color: #15aabf; }     /* détails — cyan */
.nav-item:disabled { opacity: 0.55; cursor: default; }
.nav-item__soon {
  margin-left: auto; font-size: 10px; font-style: normal; font-weight: 700;
  background: var(--border); color: var(--text-3);
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px;
}

.sidebar__footer { border-top: 1px solid var(--border); padding-top: 5px; margin-top: 4px; display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } /* v5.555 : pied COMPACT → le menu d'apps a plus de place (demande Mika) */
.sync-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 7px 10px; border-radius: 8px; background: var(--surface-2);
}
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.sync-badge { cursor: help; }
.sync-badge.is-local .sync-dot { background: var(--text-3); }
.sync-badge.is-online .sync-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.sync-badge.is-online { color: #0c6b43; }
.sync-badge.is-multi .sync-dot { background: var(--warning, #e6912a); box-shadow: 0 0 0 3px var(--warning-soft); }
.sync-badge.is-multi { color: #8a5a00; background: var(--warning-soft, #fdf0dc); }
.sync-badge.is-offline .sync-dot { background: var(--danger, #e0364f); box-shadow: 0 0 0 3px var(--danger-soft); }
.sync-badge.is-offline { color: var(--danger, #e0364f); background: var(--danger-soft, #fde8ec); }
.sync-badge.is-syncing .sync-dot { background: var(--warning); }
.sidebar__user { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--text); padding: 2px 4px; }
.copyright { font-size: 9.5px; color: var(--text-3); text-align: center; padding: 2px 6px 2px; opacity: .65; letter-spacing: .2px; } /* v5.555 : compact */
.copyright__txt { display: block; line-height: 1.35; white-space: nowrap; font-size: 8.5px; letter-spacing: 0; }
.app-version { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--primary); font-size: 10px; font-weight: 700; cursor: pointer; opacity: 1; padding: 1px 6px; border-radius: 5px; }
.app-version:hover { background: var(--primary-soft); text-decoration: underline; }
/* v5.276 : pied du menu = rangée [téléphone à gauche + version], puis le copyright EN DESSOUS. */
.cr-verrow { display: flex; align-items: center; justify-content: center; gap: 5px; }
.copyright .app-version { display: inline-block; margin: 0; vertical-align: middle; }
.copyright .copyright__txt { margin-top: 1px; } /* v5.555 : compact */
.app-install { display: inline-flex; align-items: center; vertical-align: middle; margin: 0; padding: 1px 4px; background: none; border: 0; color: var(--primary); cursor: pointer; border-radius: 5px; opacity: .85; }
.app-install svg { width: 14px; height: 14px; }
.app-install:hover { background: var(--primary-soft); opacity: 1; }
/* Champ heure : saisie manuelle (input) + liste déroulante (select chevron) */
.input--heure { text-align: center; letter-spacing: 1px; }
.heure-combo { position: relative; display: inline-flex; align-items: center; }
.heure-combo .input--heure { width: 100px; padding-right: 24px; }
.heure-combo::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 11px; pointer-events: none; }
.heure-sel { position: absolute; right: 0; top: 0; height: 100%; width: 28px; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; opacity: 0; }
/* Journal des versions */
.changelog { display: flex; flex-direction: column; gap: 14px; }
.changelog__item { border-left: 3px solid var(--primary); padding: 2px 0 2px 12px; }
.changelog__head { display: flex; align-items: center; gap: 8px; }
.changelog__v { font-weight: 800; font-size: 14px; }
.changelog__now { font-size: 10px; font-weight: 700; color: #0a7d2c; background: #e6f7ec; border: 1px solid #9fdcb3; border-radius: 999px; padding: 1px 7px; }
.changelog__date { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.changelog__notes { margin: 6px 0 0; padding-left: 18px; }
.changelog__notes li { font-size: 12.5px; line-height: 1.5; }
.poste-bulle { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.15); }

/* Bouton « Accueil » (retour au hub d'applications) — distinct des menus */
/* v5.316 : bouton « Accueil » slim + teinte ciel (au lieu du pavé violet à 2 lignes jugé « moche ») */
.nav-item--home { background: var(--nav-t1, var(--surface-2)); color: var(--nav-ink, var(--primary-dark)); font-weight: 600; border: 1px solid var(--nav-t2, var(--border)); border-radius: 11px; margin-bottom: 10px; padding-top: 7px; padding-bottom: 7px; }
.nav-item--home:hover { background: var(--nav-t2, var(--surface-2)); }
.nav-item--home svg { color: var(--nav-ink, var(--primary)); }

/* Menu des applications dans la barre latérale (page d'accueil / hub) */
.sidebar__hubapps { display: flex; flex-direction: column; gap: 4px; }
.sidebar__navlbl { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); padding: 4px 12px 5px; }
.sidebar__rac-lbl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } /* « Raccourcis » : séparation au-dessus de Mon planning — demande Mika */
.nav-item--hubapp { gap: 12px; }
/* Icônes du menu hub en GRAND format, TOUTES dans le MÊME gabarit : tuile blanche arrondie
   uniforme (demandes Mika 03/07/2026 : « qu'on profite de nos belles icônes » + « même format »). */
.nav-item--hubapp .nav-app__ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 46px; line-height: 1; background: transparent; border: none; box-shadow: none; flex: 0 0 auto; overflow: visible; }
/* v5.670 (Mika) — icônes PB.ico (emi) du menu forcées à 46px comme les nav-ic9 ; météo exclue (cas à part). */
.nav-item--hubapp .nav-app__ic:not([data-meteo-ic]):not(.nav-ic9):not(.nav-icf) svg { width: 46px; height: 46px; }
/* v5.675 : l'icône Cartographie « bouge » — la constellation tourne doucement (fiable même si le menu est reconstruit) + les signaux SMIL circulent. */
@keyframes cartoTileSpin { to { transform: rotate(360deg); } }
.nav-ic-carto svg { transform-box: fill-box; transform-origin: center; animation: cartoTileSpin 20s linear infinite; }
.nav-item--hubapp:hover .nav-ic-carto svg { animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) { .nav-ic-carto svg { animation: none; } }
/* « Demande à LEME » — assistant IA (v5.677) */
.da-wrap{display:flex;flex-direction:column;height:calc(100dvh - 128px);min-height:440px;max-width:860px;margin:0 auto;width:100%}
.da-fil{flex:1;overflow-y:auto;padding:14px 6px 8px;display:flex;flex-direction:column;gap:12px}
.da-row{display:flex;gap:9px;align-items:flex-end}
.da-row--u{justify-content:flex-end}
.da-ava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--panel2,#eef1f7);display:flex;align-items:center;justify-content:center}
.da-bw{display:flex;flex-direction:column;align-items:flex-start;max-width:74%;min-width:0}
/* v5.873 — signature « quel Lémo a répondu » (Mika 03/08). Visible du GÉRANT seulement.
   Discrète et SOUS la bulle : elle sert au diagnostic du routage, pas à la lecture. */
.da-sig{margin:3px 0 0 3px;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--text-3,#9398ad);opacity:.8}
.da-sig__m{font-weight:600;opacity:.75}
.da-b{max-width:100%;padding:11px 14px;border-radius:15px;font-size:14.5px;line-height:1.55;background:var(--panel2,#f1f3f8);color:var(--text-1,#1b2333);border:1px solid var(--border,#e5e8f0);border-bottom-left-radius:5px}
.da-b--u{background:linear-gradient(135deg,#2b86d8,#1a5aa0);color:#fff;border:none;border-radius:15px;border-bottom-right-radius:5px}
.da-b ul{margin:6px 0;padding-left:18px}.da-b li{margin:2px 0}
.da-hello{display:flex;gap:14px;align-items:center;padding:18px 6px 4px}
.da-htxt b{display:block;font-size:16px;margin-bottom:3px}.da-htxt span{font-size:14px;color:var(--text-2,#5a6475);line-height:1.5}
.da-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:12px 6px}
.da-chip{background:var(--panel2,#eef1f7);border:1px solid var(--border,#e0e4ee);color:var(--text-1,#26304a);border-radius:11px;padding:9px 13px;font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:.15s}
.da-chip:hover{border-color:#2b86d8;color:#2b86d8}
.da-bar{display:flex;gap:9px;align-items:flex-end;padding:8px 6px;border-top:1px solid var(--border,#e5e8f0)}
.da-ta{flex:1;resize:none;background:var(--panel2,#f4f6fb);border:1px solid var(--border,#dde3ee);border-radius:13px;padding:11px 14px;font-size:14.5px;font-family:inherit;color:var(--text-1,#1b2333);outline:none;max-height:120px}
.da-ta:focus{border-color:#2b86d8}
.da-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;background:linear-gradient(135deg,#2b86d8,#1a5aa0);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 6px 16px rgba(31,114,194,.32)}
.da-send:hover{filter:brightness(1.08)}
.da-note{font-size:11.5px;color:var(--text-3,#8a94a4);text-align:center;padding:6px 8px 2px}
.da-typing i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-3,#9aa3b4);margin:0 2px;animation:daT 1.2s infinite}
.da-typing i:nth-child(2){animation-delay:.2s}.da-typing i:nth-child(3){animation-delay:.4s}
@keyframes daT{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.lemo-flo{animation:lemoFlo 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.lemo-eyes{animation:lemoBlink 4.6s infinite;transform-box:fill-box;transform-origin:center}
.lemo-tw{animation:lemoTw 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lemoFlo{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes lemoBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes lemoTw{0%,100%{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.lemo-flo,.lemo-eyes,.lemo-tw,.da-typing i{animation:none}}
.nav-app__nom { font-weight: 600; }
.nav-app__ext { margin-left: auto; font-size: 11px; color: var(--text-3); }
/* Survol d'une app du hub : AUCUNE bande de couleur sur la ligne (demande Mika 03/07/2026) —
   seul l'ICÔNE réagit (halo + élévation via body.fx-glow plus bas). */
.nav-item--hubapp:hover:not(:disabled) { background: transparent; transform: none; box-shadow: none; }

/* ===================== Page d'accueil (hub) ===================== */
.page-ic--accueil { color: var(--primary); }
.accueil-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.accueil-hero__home { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--surface)); }
.accueil-hero__h { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.accueil-hero__s { color: var(--text-3); font-size: 14px; margin-top: 2px; }
/* Barre d'infos défilante (repos / congés / absences du jour) */
.accueil-ticker { display: flex; align-items: stretch; gap: 0; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.accueil-ticker__lbl { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 9px 16px; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 58%, #000)); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.accueil-ticker__win { flex: 1; overflow: hidden; position: relative; }
.accueil-ticker__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker 72s linear infinite; }
.accueil-ticker__track span { padding: 9px 30px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.accueil-ticker:hover .accueil-ticker__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(50%); } to { transform: translateX(-50%); } }
/* KPI de la veille sur le hub */
.acc-kveille { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; flex-wrap: wrap; }
.acc-kveille__ttl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); flex: 0 0 auto; margin-right: 4px; }
/* v5.652 (demande Mika) — KPI Veille en mini-cartes avec pastille d'icône teintée. */
.acc-kv { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 14px; transition: background .15s ease, transform .15s ease; }
.acc-kv:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); transform: translateY(-2px); }
.acc-kv__ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; background: color-mix(in srgb, var(--kc, var(--primary)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--kc, var(--primary)) 28%, transparent); }
.acc-kv__ic svg, .acc-kv__ic img { width: 30px !important; height: 30px !important; }
.acc-kv__v { font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.acc-kv__l { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.acc-kv.acc-kv__ok .acc-kv__v { color: #1aa653; }
.acc-kv.acc-kv__ok .acc-kv__ic { background: color-mix(in srgb, #1aa653 16%, var(--surface)); }
.acc-kv.acc-kv__warn .acc-kv__v { color: #c47a16; }
.acc-kv.acc-kv__warn .acc-kv__ic { background: color-mix(in srgb, #c47a16 18%, var(--surface)); }
.acc-kv.acc-kv__bad .acc-kv__v { color: #e03050; }
.acc-kv.acc-kv__bad .acc-kv__ic { background: color-mix(in srgb, #e03050 15%, var(--surface)); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 16px; background: color-mix(in srgb, var(--ac, var(--primary)) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac, var(--primary)) 18%, var(--surface)); border-top: 4px solid color-mix(in srgb, var(--ac, var(--primary)) 42%, var(--surface)); border-radius: 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; text-align: center; }
.app-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.app-tile__ic { font-size: 38px; line-height: 1; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: color-mix(in srgb, var(--ac, var(--primary)) 15%, var(--surface)); }
.app-tile__nom { font-weight: 800; font-size: 15.5px; color: var(--text); }
.app-tile__type { font-size: 11px; color: var(--text-3); font-weight: 600; }
/* Icône Planning = mini-calendrier à la date du jour (style iOS) */
.cal-ic { background: #fff !important; padding: 0 !important; overflow: hidden; flex-direction: column; }
.cal-ic__m { width: 100%; text-align: center; background: var(--ac, var(--primary)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 5px 0 3px; }
.cal-ic__d { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
/* Mini-calendrier (icône Planning dans le menu de gauche) */
.cal-ic--mini .cal-ic__m { font-size: 9.5px; letter-spacing: 0; padding: 3px 0 2px; }
.cal-ic--mini .cal-ic__d { font-size: 23px; }
/* Badge du MOIS : icône animée de la collection (img/icones-mois/) à cheval sur le coin bas-droit
   du mini-calendrier du menu — elle déborde volontairement (« qui ressort »), sans gêner le clic. */
.cal-wrap { position: relative; flex: 0 0 auto; display: flex; }
.cal-wrap .cal-badge-mois { position: absolute; right: -18px; bottom: -12px; width: 46px; height: 46px; pointer-events: none; z-index: 2; }
.cal-wrap .cal-badge-mois svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Anneaux métal du calendrier (concept Pikbest validé) : à cheval sur le haut du mini-calendrier. */
.cal-rings { position: absolute; top: -5px; left: 0; width: 100%; display: flex; justify-content: center; gap: 14px; z-index: 3; pointer-events: none; }
.cal-rings i { width: 5px; height: 11px; border-radius: 3px; background: linear-gradient(#c8ccd5, #8c93a0); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }

/* ---- Icônes du menu v9 : l'icône EST la tuile (carré arrondi plein gabarit, comme le calendrier) ---- */
.nav-app__ic.nav-ic9 { background: transparent; border: none; box-shadow: none; }
.nav-app__ic.nav-ic9 svg { width: 46px; height: 46px; display: block; overflow: visible; }
/* ---- v5.509 : icônes FILAIRES ANIMÉES, SANS FOND — l'icône EST la tuile (comme les icônes v9),
   tracé à la couleur de l'app (color inline). Chaque icône a une animation subtile et distincte. Demande Mika. ---- */
.nav-app__ic.nav-icf { background: transparent; border: none; box-shadow: none; overflow: visible; }
.nav-app__ic.nav-icf svg { width: 40px; height: 40px; display: block; overflow: visible; }
.mob-tile__ic .nav-app__ic.nav-icf { width: 46px; height: 46px; border-radius: 0; background: transparent; border: 0; box-shadow: none; }
.mob-tile__ic .nav-app__ic.nav-icf svg { width: 42px; height: 42px; }
.mob-tab__ic .nav-app__ic.nav-icf { background: transparent; border: 0; box-shadow: none; }
.mob-tab__ic .nav-app__ic.nav-icf svg { width: 26px; height: 26px; }
.page-ic9 .nav-app__ic.nav-icf, .mob-pl__ttlic .nav-app__ic.nav-icf, .msg-rc__ic .nav-app__ic.nav-icf { background: transparent; border: 0; box-shadow: none; }
/* Animations des icônes filaires (subtiles, façon météo) — voir classes af-* dans accueil.js (FILAIRE). */
.nav-icf .af-sway { transform-box: fill-box; transform-origin: center; animation: afSway 3.8s ease-in-out infinite; }
.nav-icf .af-pulse { transform-box: fill-box; transform-origin: center; animation: afPulse 2.8s ease-in-out infinite; }
.nav-icf .af-pulse.af-d2 { animation-delay: .5s; }
.nav-icf .af-bob { transform-box: fill-box; transform-origin: center; animation: afBob 3.2s ease-in-out infinite; }
.nav-icf .af-plus { transform-box: fill-box; transform-origin: center; animation: afPulse 2.6s ease-in-out infinite; }
.nav-icf .af-draw { stroke-dasharray: 22; animation: afDraw 3.6s ease-in-out infinite; }
.nav-icf .af-draw.af-l2 { animation-delay: .4s; }
.nav-icf .af-draw.af-l3 { animation-delay: .8s; }
.nav-icf .af-wave { stroke-dasharray: 16; opacity: .75; animation: afDraw 2.6s ease-in-out infinite; }
.nav-icf .af-dot { animation: afType 1.5s ease-in-out infinite; }
.nav-icf .af-dot.af-d2 { animation-delay: .22s; }
.nav-icf .af-dot.af-d3 { animation-delay: .44s; }
.nav-icf .af-hand-m { transform-box: view-box; transform-origin: 12px 12px; animation: afSpin 6s linear infinite; }
.nav-icf .af-hand-h { transform-box: view-box; transform-origin: 12px 12px; animation: afSpin 36s linear infinite; }
@keyframes afSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes afPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes afBob { 0%,100% { transform: translateY(.6px); } 50% { transform: translateY(-1.4px); } }
@keyframes afDraw { 0% { stroke-dashoffset: 22; } 50% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 22; } }
@keyframes afType { 0%,55%,100% { opacity: .28; } 28% { opacity: 1; } }
@keyframes afSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .nav-icf [class*="af-"] { animation: none !important; } }
@keyframes ic9swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes ic9wrt{0%{stroke-dashoffset:34}55%{stroke-dashoffset:0}88%{stroke-dashoffset:0}100%{stroke-dashoffset:34}}
@keyframes ic9penm{0%{transform:translate(-9px,3px)}55%{transform:translate(7px,-3px)}88%{transform:translate(7px,-3px)}100%{transform:translate(-9px,3px)}}
@keyframes ic9drop{0%{transform:translateY(-15px);opacity:0}30%{opacity:1}60%{transform:translateY(0);opacity:1}74%{transform:translateY(0)}100%{transform:translateY(0);opacity:0}}
@keyframes ic9coinin{0%{transform:translateY(-22px) scale(.85);opacity:0}25%{opacity:1}66%{transform:translateY(4px) scale(1);opacity:1}85%{transform:translateY(8px);opacity:0}100%{opacity:0}}
@keyframes ic9keyin{0%{transform:translateX(22px);opacity:0}18%{opacity:1}40%{transform:translateX(0)}70%{transform:translateX(0)}86%{transform:translateX(22px);opacity:0}100%{opacity:0}}
@keyframes ic9shack{0%,42%{transform:translateY(0)}58%,76%{transform:translateY(-5px)}90%,100%{transform:translateY(0)}}
@keyframes ic9breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ic9chk{0%{stroke-dashoffset:11}30%{stroke-dashoffset:0}92%{stroke-dashoffset:0}100%{stroke-dashoffset:11}}
@keyframes ic9spin{to{transform:rotate(360deg)}}
@keyframes ic9tiroir{0%,20%{transform:translateY(0)}42%,60%{transform:translateY(4.5px)}82%,100%{transform:translateY(0)}}
@keyframes ic9feuille{0%,20%{transform:translateY(11px);opacity:.12}44%,60%{transform:translateY(0);opacity:1}82%,100%{transform:translateY(11px);opacity:.12}}
@keyframes ic9whaleFly{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,-2px)}50%{transform:translate(-4px,.5px)}75%{transform:translate(-2px,1.8px)}}
@keyframes ic9wing{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-24deg)}}
@keyframes ic9fishJump{0%{transform:translate(0,4px) rotate(32deg);opacity:0}14%{opacity:1}50%{transform:translate(9px,-8px) rotate(-6deg)}86%{opacity:1}100%{transform:translate(19px,4px) rotate(-44deg);opacity:0}}
@keyframes ic9typing{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-4px)}}
@keyframes ic9smoke{0%{transform:translateY(0) scale(.6);opacity:.85}100%{transform:translateY(-9px) scale(1.35);opacity:0}}
@keyframes ic9bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.6px) rotate(-2.5deg)}}
@keyframes ic9blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes ic9soft{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ic9line{0%,100%{transform:scaleX(.32)}50%{transform:scaleX(1)}}
@keyframes ic9win{0%,100%{fill:#e9f6ef}50%{fill:#ffd861}}
@keyframes ic9glow{0%,100%{fill:#f2b53c}50%{fill:#ffe79a}}
@keyframes ic9shiftDn{0%,100%{transform:translateY(0)}18%{transform:translateY(-2px) scale(1.04)}50%{transform:translateY(9px)}82%{transform:translateY(9px)}}
@keyframes ic9shiftUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ic9sweep{0%{transform:translateX(0);opacity:0}15%{opacity:.55}85%{opacity:.55}100%{transform:translateX(40px);opacity:0}}
@keyframes ic9ddBar{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@keyframes ic9ddRing{0%{stroke-dashoffset:75}55%{stroke-dashoffset:22}85%{stroke-dashoffset:22}100%{stroke-dashoffset:75}}
@keyframes ic9swing2{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* Badge température : tuile Météo (centre) + item Météo du menu de gauche */
.app-tile { position: relative; }
.app-tile__badge { position: absolute; top: 10px; right: 10px; background: var(--ac, var(--primary)); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 9px; border-radius: 999px; box-shadow: var(--shadow-sm); letter-spacing: .3px; }
.nav-app__temp { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--ac, var(--primary)); background: color-mix(in srgb, var(--ac, var(--primary)) 14%, var(--surface)); padding: 4px 11px; border-radius: 999px; }
/* v5.478 : badge de notification des apps du menu (ex. Messages non lus) — pastille rouge à droite, comme la pastille des conversations */
.nav-app__badge { margin-left: auto; background: var(--danger, #e0364f); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 2px 6px rgba(224,54,79,.35); }

/* ===================== Suivi caisse (écarts KS) ===================== */
.sc-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; }
.sc-tab { padding: 7px 15px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.sc-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* v5.335 : groupe d'export Excel du suivi caisse (semaine/mois/année). */
.sc-export { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.sc-export__lbl { font-size: 12px; color: var(--text-2); font-weight: 600; }
.sc-weeknav { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.sc-weeknav__lbl { font-weight: 800; font-size: 16px; }
.sc-weeknav__range { color: var(--text-2); font-weight: 600; font-size: 13px; }
.sc-weeknav__an { color: var(--text-3); font-weight: 600; font-size: 12px; }
.sc-sel { margin-left: auto; max-width: 240px; }
.table-wrap { overflow-x: auto; }
.sc-table { width: 100%; }
.sc-table th.sc-num, .sc-table td.sc-num { text-align: right; white-space: nowrap; }
.sc-table thead th { font-size: 12px; }
.sc-jour { white-space: nowrap; }
.sc-date { color: var(--text-3); font-weight: 600; font-size: 12px; margin-left: 4px; }
.sc-in { width: 80px; text-align: right; padding: 6px 7px; }
.sc-tot, .sc-coltot, .sc-grand { font-weight: 800; }
.sc-grand { color: var(--primary-dark); }
.sc-neg { color: var(--danger, #e0364f) !important; }
.sc-foot td { background: var(--surface-2); font-weight: 800; border-top: 2px solid var(--border); }
.sc-recaphead { font-size: 15px; font-weight: 700; margin: 2px 0 14px; }
.sc-recap tbody tr.sc-row { cursor: pointer; transition: background .12s; }
.sc-recap tbody tr.sc-row:hover { background: var(--primary-soft); }
.sc-recap tbody tr.sc-zero { color: var(--text-3); }
/* Saisie : écart négatif en rouge dans la case */
.sc-in.sc-neg { color: var(--danger, #e0364f); font-weight: 700; }
/* Verrouillage de semaine */
.sc-weeknav__lockbox { margin-left: 8px; display: inline-flex; align-items: center; gap: 8px; }
/* v5.488 : Suivi caisse MOBILE en cartes par jour (visu validé par Mika) */
/* v5.489 : sur téléphone, la barre du haut du Suivi caisse se fait DISCRÈTE — l'« Export Excel » et le
   sélecteur d'année disparaissent (l'export vit dans Bilan/ordinateur, les flèches de semaine passent
   d'année en année toutes seules) ; c'était la « partie bizarre » signalée par Mika. */
body.mob-hub .sc-export, body.mob-hub .sc-year { display: none !important; }
.sc-m-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: nowrap; }
.sc-m-nav .week-nav__label { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-m-liste { display: flex; flex-direction: column; gap: 8px; }
.sc-m-jour { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.sc-m-jour.is-ajd { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sc-m-hd { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; background: none; border: 0; font: inherit; text-align: left; }
.sc-m-hd__n { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.sc-m-hd__d { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.sc-m-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.sc-m-badge--ok { background: var(--success-soft, #d3f9d8); color: #0a5535; }
.sc-m-badge--ajd { background: var(--primary-soft); color: var(--primary); }
.sc-m-vide { font-size: 11.5px; color: var(--text-3); }
.sc-m-chev { color: var(--text-3); font-size: 11px; }
.sc-m-tot { font-size: 13px; }
.sc-m-corps { padding: 4px 12px 12px; border-top: 1px solid var(--border); }
.sc-m-grille { display: grid; grid-template-columns: 1fr 104px; gap: 7px 10px; align-items: center; padding-top: 8px; }
.sc-m-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.sc-m-in { width: 100%; height: 34px; font-size: 14px; text-align: right; }
.sc-m-val { text-align: right; font-size: 14px; font-weight: 600; }
.sc-m-jtot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.sc-m-jtot b { color: var(--text); }
.sc-m-semtot { display: flex; justify-content: space-between; align-items: center; background: var(--primary-soft); color: var(--primary); border-radius: 12px; padding: 10px 14px; font-weight: 800; margin: 12px 0 8px; }
.sc-m-lockinfo { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.sc-m-actions { display: flex; gap: 8px; }
/* v5.491 : bascule Jour | Semaine + vue Semaine (lecture/contrôle) — visu validé par Mika */
.sc-m-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.sc-m-switch button { padding: 6px 18px; font-size: 12.5px; font-weight: 700; background: none; border: 0; color: var(--text-2); font-family: inherit; }
.sc-m-switch button.is-on { background: var(--primary-soft); color: var(--primary); }
.sc-s-liste { display: flex; flex-direction: column; gap: 6px; }
.sc-s-jour { display: grid; grid-template-columns: 1fr auto 76px; gap: 8px; align-items: center; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: inherit; text-align: left; box-shadow: var(--shadow-sm); }
.sc-s-jour.is-ajd { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sc-s-jour__n { font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 5px; }
.sc-s-jour__e { justify-self: end; }
.sc-s-jour__t { text-align: right; font-weight: 700; font-size: 13px; }
.sc-s-ttl { font-size: 12.5px; font-weight: 800; color: var(--text-2); margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.sc-s-grille { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.sc-s-lbl { color: var(--text-2); }
.sc-s-val { text-align: right; font-weight: 600; }
/* v5.495 : PLANNING MOBILE managers/responsables — cartes par salarié + vue semaine (visu validé par Mika) */
.plm-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.plm-badge { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }
.plm-badge--br { background: #FAEEDA; color: #854F0B; }
.plm-badge--ok { background: #EAF3DE; color: #27500A; }
.plm-badge--env { background: #E6F1FB; color: #0C447C; }
.plm-pills { display: flex; gap: 4px; margin-bottom: 8px; }
.plm-pill { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 5px 0; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-2); font-family: inherit; line-height: 1.25; }
.plm-pill.is-ajd { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.plm-pill.is-on { background: var(--primary-soft); color: var(--primary); }
.plm-info { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.plm-liste { display: flex; flex-direction: column; gap: 8px; }
.plm-emp { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 9px 11px; box-shadow: var(--shadow-sm); }
.plm-emp.is-vide { opacity: .6; }
.plm-emp__hd { display: flex; align-items: center; gap: 8px; }
.plm-emp__n { flex: 1; font-size: 13.5px; font-weight: 800; display: flex; flex-direction: column; line-height: 1.2; }
.plm-emp__n i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-3); }
.plm-emp__t { font-size: 12.5px; color: var(--text-2); }
.plm-mini { width: 26px; height: 26px; border-radius: 8px; border: 1px dashed var(--border-2); background: none; color: var(--text-3); font-size: 15px; line-height: 1; font-family: inherit; }
.plm-emp__ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.plm-emp__rien { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.plm-chip { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 9px; border: 1px solid transparent; font-family: inherit; }
.plm-abs { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--border-2); background: var(--surface-1); color: var(--text-2); font-family: inherit; }
.plm-abs--cg { border-style: solid; background: #e7f6ec; color: #1faa6b; border-color: transparent; }
.plm-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.plm-fab { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 45%, transparent); font-family: inherit; }
/* v5.499 : BRIEFING compact sur téléphone (la jauge géante et les grands vides mangeaient l'écran) — demande Mika */
body.mob-hub .bf2-hero__body { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
body.mob-hub .bf2-hero__l { flex: 1; }
body.mob-hub .bf2-hero__r { flex: 0 0 auto; }
body.mob-hub .bf2-hero__r svg { width: 108px; height: 108px; }
body.mob-hub .bf2-hero__ca { font-size: 24px; }
body.mob-hub .bf2-daybar { padding: 10px 14px; gap: 10px; }
body.mob-hub .bf2-daybar__title { font-size: 16px; }
body.mob-hub .bf2-card { padding: 10px 12px; }
body.mob-hub .bf2-obj__big { font-size: 24px; }
body.mob-hub .bf2-demo { padding: 8px 12px; font-size: 12px; }
/* v5.497 : demandes de congés/absences en attente — bandeau + fenêtre de validation (planning mobile) */
.plm-dem { width: 100%; text-align: left; font-size: 12.5px; font-weight: 600; padding: 9px 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid #ffd8a8; background: #fff4e6; color: #d9480f; font-family: inherit; }
.plm-dem-liste { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.plm-dem-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.plm-dem-row__c { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; min-width: 0; }
.plm-dem-row__c span { font-size: 12px; color: var(--text-2); }
.plm-dem-row__c i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.plm-dem-ok { background: #e7f6ec; border-color: transparent; }
.plm-dem-ko { background: #fde8e8; border-color: transparent; }
.plm-sem { display: flex; flex-direction: column; gap: 8px; }
.plm-ligne { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 8px 10px; box-shadow: var(--shadow-sm); }
.plm-ligne__hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.plm-ligne__hd span { flex: 1; }
.plm-ligne__hd b { font-size: 12px; color: var(--text-2); }
.plm-ligne__cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.plm-cell { font-size: 10.5px; font-weight: 700; padding: 6px 0; border-radius: 8px; border: 0; background: var(--surface-1); color: var(--text-3); font-family: inherit; }
.plm-cell.is-trav { background: color-mix(in srgb, var(--success) 16%, #fff); color: #0a5535; }
.plm-cell.is-abs { background: #FAEEDA; color: #854F0B; }
/* --- Lisibilité planning mobile v5.504 : sections, lignes fines, pastilles repos, entête semaine --- */
.plm-info b { color: var(--text-2); font-weight: 800; }
.plm-sec { display: flex; align-items: center; gap: 7px; margin: 14px 2px 7px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.plm-sec b { background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; }
.plm-videj { border: 1px dashed var(--border-2); border-radius: 14px; padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-3); background: var(--surface-1); margin-top: 4px; }
.plm-emp--slim { padding: 7px 11px; }
.plm-emp--slim .plm-emp__n { flex: 0 1 auto; }
.plm-emp__badges { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; min-width: 0; }
.plm-grp { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 10px; box-shadow: var(--shadow-sm); }
.plm-pl { border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--text-2); font-family: inherit; }
.plm-pl.is-vide { border-style: dashed; background: none; color: var(--text-3); font-weight: 600; }
.plm-ligne--head { border: 0; background: none; box-shadow: none; padding: 2px 11px 0; }
.plm-ch { text-align: center; font-size: 10px; font-weight: 800; line-height: 1.2; color: var(--text-3); }
.plm-ch.is-ajd { color: var(--primary); }
.plm-cell.is-ajd { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
/* ============ CALENDRIER sur téléphone v5.505 : tout tient dans l'écran, zéro slide latéral ============ */
.cal-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; } /* bureau : empilés comme avant */
body.mob-hub .topbar--planning { padding-left: 14px; padding-right: 14px; gap: 7px; }
body.mob-hub .topbar--planning .week-block { width: 100%; align-items: stretch; min-width: 0; } /* v5.508 : contraint la barre à la largeur de l'écran → le label (flex) se compresse (fini le coupé à droite sur Flip) */
body.mob-hub .topbar--planning .week-nav { width: 100%; gap: 4px; min-width: 0; }
body.mob-hub .topbar--planning .week-nav__label { width: auto; flex: 1 1 0; min-width: 0; font-size: 13px; padding: 4px 2px; } /* la largeur FIXE 320px faisait déborder toute la page */
body.mob-hub .topbar--planning .week-nav__btn { width: 30px; height: 30px; flex: 0 0 30px; }
body.mob-hub .topbar--planning .btn-today { padding: 6px 9px; font-size: 11.5px; flex: 0 0 auto; white-space: nowrap; }
body.mob-hub .cal-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
body.mob-hub .cal-actions .btn { flex: 1 1 auto; justify-content: center; padding: 7px 6px; font-size: 11.5px; gap: 4px; white-space: nowrap; min-height: 0; }
/* v5.508 : écrans très étroits (Flip ~320px) — les 3 boutons ne rentraient pas sur une ligne et débordaient
   (le flex-shrink les compressait au lieu de les faire passer à la ligne). On force 2 boutons par ligne. */
@media (max-width: 360px) { body.mob-hub .cal-actions .btn { flex: 1 1 44%; font-size: 11px; padding: 6px 4px; } }
body.mob-hub .cal-hint { display: none; } /* la longue phrase d'aide n'a pas sa place sur téléphone */
body.mob-hub .cal-vueseg { width: 100%; display: flex; }
body.mob-hub .cal-vueseg__b { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 11.5px; }
body.mob-hub .cal-legend { font-size: 10.5px; gap: 8px; }
body.mob-hub .cal-week-gut, body.mob-hub .cal-tg-hours { width: 30px; flex: 0 0 30px; }
body.mob-hub .cal-week-gut--lbl { font-size: 7px; letter-spacing: 0; overflow: hidden; } /* « JOURNÉE » tient dans les 30px */
body.mob-hub .cal-week-row, body.mob-hub .cal-tg { gap: 4px; }
body.mob-hub .cal-week-cols, body.mob-hub .cal-tg-days { gap: 3px; }
body.mob-hub .cal-tg-hr { font-size: 9px; padding-right: 3px; }
body.mob-hub .cal-chip { font-size: 9.5px; padding: 1px 3px; border-radius: 5px; }
body.mob-hub .cal-allday-cell { padding: 2px; min-height: 22px; border-radius: 6px; }
body.mob-hub .cal-tg-ev { font-size: 9px; left: 1px; right: 1px; border-radius: 5px; }
body.mob-hub .cal-week-dnum { font-size: 12px; }
body.mob-hub .cal-cell { min-height: 54px; padding: 3px; } /* vue Mois : cases plus basses */
body.mob-hub .cal-multi--tri, body.mob-hub .cal-multi--annee { grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* v5.494 : pages d'app sur téléphone — cloche/boîte/tâches/rappels/présents + profil + sortie regroupés
   sur UNE SEULE ligne TOUT EN HAUT de la page (sauf l'accueil, où le cluster vit dans le bandeau) — demande Mika. */
body.mob-hub .topbar .topbar-cluster { order: -1; flex: 1 0 100%; display: flex; flex-wrap: wrap; row-gap: 5px; justify-content: flex-end; align-items: center; gap: 3px; margin-left: 0; max-width: 100%; padding-top: 8px; } /* v5.507 : flex-wrap:wrap → jamais d'icône coupée (elle passe à la ligne) ; v5.506 : de l'air pour badges/halos */
/* v5.506 : sur téléphone la 1re rangée d'icônes touchait le bord haut de l'écran (barre d'état / encoche)
   → cloche et badges coupés. On descend la barre sous la zone sûre (safe-area) — demande Mika. */
body.mob-hub .topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
body.mob-hub .topbar--planning { padding-top: calc(11px + env(safe-area-inset-top, 0px)); }
body.mob-hub .topbar .topbar-cluster .topbar-icon,
body.mob-hub .topbar .topbar-cluster .tool-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; padding: 4px; flex: 0 0 auto; } /* v5.501 : TOUTES les icônes à la même taille (les .tool-icon rappels/présents échappaient à la règle) — demande Mika */
body.mob-hub .topbar .topbar-cluster .topbar-icon svg,
body.mob-hub .topbar .topbar-cluster .tool-icon svg { width: 16px !important; height: 16px !important; }
body.mob-hub .topbar .topbar-cluster .topbar-user { padding: 2px 6px; gap: 4px; }
body.mob-hub .topbar .topbar-cluster .topbar-user .topbar-user__av { width: 24px; height: 24px; }
body.mob-hub .topbar .topbar-user__nom { max-width: 50px; font-size: 12px; }
/* v5.532 : de l'air AVANT le chip profil pour que le badge (rose/rouge) de la dernière icône ne déborde plus sur la photo (demande Mika). */
body.mob-hub .topbar .topbar-cluster .tu-sep { margin-left: 8px; }
body.mob-hub .topbar .topbar-cluster .topbar-user { margin-left: 2px; }
/* v5.507 : TELEPHONES ETROITS (Samsung Flip ~320px) — rangee d'icones qui debordait a GAUCHE (icones
   boite/taches/journal coupees hors ecran). On autorise le retour a la ligne + on resserre les icones. */
@media (max-width: 440px) {
  body.mob-hub .topbar .topbar-cluster { gap: 2px; }
  body.mob-hub .topbar .topbar-cluster .topbar-icon,
  body.mob-hub .topbar .topbar-cluster .tool-icon { width: 25px !important; height: 25px !important; min-width: 25px !important; padding: 3px; }
  body.mob-hub .topbar .topbar-cluster .topbar-icon svg,
  body.mob-hub .topbar .topbar-cluster .tool-icon svg { width: 15px !important; height: 15px !important; }
  body.mob-hub .topbar .topbar-user__nom { display: none; }
  body.mob-hub .topbar .topbar-cluster .topbar-user { padding: 2px 4px; }
  body.mob-hub .topbar .topbar-cluster .sidebar__tools { gap: 2px; }
}
/* v5.513 : Flip 7 (~380px) — la rangée débordait de ~2px (les gaps) → le bouton Sortie basculait sur une
   2e ligne et l'avatar dépassait en hauteur (aspect « pas aligné »). On resserre les gaps et on cale
   l'avatar à la taille des icônes → tout tient sur UNE ligne, bien aligné. Demande Mika. */
@media (max-width: 412px) {
  body.mob-hub .topbar .topbar-cluster { gap: 1px; }
  body.mob-hub .topbar .topbar-cluster .sidebar__tools { gap: 1px; }
  body.mob-hub .topbar .topbar-cluster .topbar-user { padding: 1px 3px; gap: 2px; align-self: center; }
  body.mob-hub .topbar .topbar-cluster .topbar-user .tu-avwrap,
  body.mob-hub .topbar .topbar-cluster .topbar-user .topbar-user__av { width: 25px !important; height: 25px !important; }
}
/* v5.517 : téléphones ÉTROITS (Flip 7 replié ~340-380px) — sur le Calendrier (topbar--planning, qui a plus
   de padding), le bouton Sortie basculait encore en 2e ligne. On rétrécit un cran de plus les icônes et on
   réduit le padding de cette barre → tout tient sur une seule ligne, même à ~340px. Demande Mika. */
@media (max-width: 384px) {
  body.mob-hub .topbar .topbar-cluster .topbar-icon,
  body.mob-hub .topbar .topbar-cluster .tool-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; padding: 2px; }
  body.mob-hub .topbar .topbar-cluster .topbar-icon svg,
  body.mob-hub .topbar .topbar-cluster .tool-icon svg { width: 13px !important; height: 13px !important; }
  body.mob-hub .topbar .topbar-cluster .topbar-user .tu-avwrap,
  body.mob-hub .topbar .topbar-cluster .topbar-user .topbar-user__av { width: 22px !important; height: 22px !important; }
  body.mob-hub .topbar--planning { padding-left: 8px !important; padding-right: 8px !important; }
}
/* v5.493 : Bilan caisse sur téléphone — liste dépliable par période (total direct, tap = détail des 8 postes) — demande Mika */
.sc-b-liste { display: flex; flex-direction: column; gap: 6px; }
.sc-b-per { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.sc-b-per.sc-zero { opacity: .55; }
.sc-b-per summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 13.5px; list-style: none; cursor: pointer; }
.sc-b-per summary::-webkit-details-marker { display: none; }
.sc-b-per__n b { font-weight: 800; }
.sc-b-per__n { font-weight: 800; }
.sc-b-tot { font-weight: 700; font-size: 13px; }
.sc-b-per[open] summary { border-bottom: 1px solid var(--border); }
.sc-b-grille { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12.5px; padding: 10px 12px; }
.sc-b-per .btn { margin: 0 12px 10px; }
/* v5.492 : « Heures validées » sur téléphone — cartes par salarié (le tableau à 20 colonnes était illisible) — demande Mika */
.rap-m-liste { display: flex; flex-direction: column; gap: 8px; }
.rap-m-emp { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.rap-m-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.rap-m-grille { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.rap-m-grille span { color: var(--text-2); }
.rap-m-grille b { text-align: right; }
.rap-m-x { font-size: 12px; color: var(--text-2); margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); }
.rap-m-x--abs { border-top: 0; padding-top: 0; margin-top: 4px; }
/* v5.532 : cartes de paie DÉTAILLÉES par personne (sections + chips) */
.rap-m-meta { font-size: 11.5px; color: var(--text-3); margin: -3px 0 8px; line-height: 1.35; }
.rap-m-sec { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rap-m-sec__t { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 5px; }
.rap-m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rap-m-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.rap-m-chip b { font-weight: 800; }
.rap-m-chip--tot { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.rap-m-vide { font-size: 12px; color: var(--text-3); font-style: italic; }
.rap-m-inp { max-width: 120px; height: 30px; font-size: 13px; text-align: right; }
.rap-m-inp.pay-inp--txt { max-width: 100%; width: 100%; text-align: left; }
.sc-lock { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: #0c6b43; background: #e6f7ec; border: 1px solid #9fdcb3; border-radius: 999px; padding: 4px 12px; }
/* Bilan : barre de granularité (filtre) + barre d'outils */
.sc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.sc-granbar { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.sc-gran { padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.sc-gran.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* Tableau de bord écarts (hub + bilan) */
.sc-dash__head { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.sc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sc-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.sc-kpi__v { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.sc-kpi__l { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.sc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.sc-card__t { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.sc-chart { width: 100%; height: auto; display: block; }
.sc-chart__lbl { font-size: 10px; fill: var(--text-3); }
.sc-dash__foot { font-size: 12px; color: var(--text-3); font-weight: 600; }
/* Tableau de bord écarts caisse — version design */
.scd { margin-top: 14px; }
.scd__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.scd__title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.scd__badge { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.scd__badge--alert { color: #8a5a00; background: var(--warning-soft, #fdf3e0); border-color: color-mix(in srgb, #c47a16 30%, transparent); }
.scd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 14px; }
.scd-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border)); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.scd-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.scd-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.scd-card__ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.scd-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scd-card__v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--c-strong, var(--c)); overflow: hidden; text-overflow: ellipsis; }
.scd-card__l { font-size: 12px; color: var(--text-3); font-weight: 600; }
.scd-card--green { --c: #1aa653; --c-strong: #0c6b43; }
.scd-card--red { --c: #e0364f; --c-strong: #c0233a; }
.scd-card--blue { --c: #2178b8; --c-strong: #1c6aa3; }
.scd-card--violet { --c: var(--primary); --c-strong: var(--primary-dark); }
/* ===== Accueil — refonte visuelle (plus design) ===== */
/* Résumé du jour — grille de cartes KPI */
.acc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 20px; }
.acc-datecard { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 16px; border-radius: 16px; color: #fff; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000)); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 32%, transparent); }
.acc-datecard__jour { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; opacity: .92; }
.acc-datecard__num { font-size: 40px; font-weight: 800; line-height: 1; margin: 3px 0; }
.acc-datecard__mois { font-size: 12px; font-weight: 600; opacity: .92; }
.acc-kpi { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.acc-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 10px 24px rgba(0,0,0,.10)); border-color: color-mix(in srgb, var(--c-strong, var(--primary)) 32%, var(--border)); }
.acc-kpi__ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--c-soft, var(--primary-soft)); }
.acc-kpi__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-kpi__v { font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--c-strong, var(--text)); overflow: hidden; text-overflow: ellipsis; }
.acc-kpi__l { font-size: 12px; color: var(--text-3); font-weight: 600; }
.acc-kpi--green  { --c-soft: var(--success-soft); --c-strong: #0c6b43; }
.acc-kpi--blue   { --c-soft: #e3f1fb; --c-strong: #2178b8; }
.acc-kpi--amber  { --c-soft: var(--warning-soft); --c-strong: #8a5a00; }
.acc-kpi--violet { --c-soft: var(--primary-soft); --c-strong: var(--primary-dark); }
.acc-kpi--red    { --c-soft: var(--danger-soft); --c-strong: var(--danger, #e0364f); }
/* Hero */
.accueil-hero { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface) 78%); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 20px; box-shadow: var(--shadow-sm); margin-bottom: 18px; position: relative; overflow: visible; } /* v5.240.0 : overflow visible -> l'icône météo DÉBORDE de la tuile (le ::after ornemental fade avant le bord, donc pas de fuite ; l'icône reste en z-index 1, derrière le message z-index 2) */
.accueil-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--hero-orn, color-mix(in srgb, var(--primary) 16%, transparent)), transparent 70%); pointer-events: none; } /* --hero-orn : teinte horloge posée par heroTick (v5.220.0) */
.accueil-hero__home { width: 58px; height: 58px; border-radius: 17px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); border: 0; color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 42%, transparent); }
.accueil-hero__h { font-size: 32px; font-weight: 800; letter-spacing: -.6px; line-height: 1.08; }
.accueil-hero__s { color: var(--text-3); font-size: 14px; margin-top: 3px; }
.accueil-hero__txt { flex: 1 1 auto; min-width: 0; }
.accueil-hero .acc-datecard { flex: 0 0 auto; margin-left: auto; padding: 16px 32px; min-width: 132px; position: relative; z-index: 1; border-radius: 20px; }
.accueil-hero .acc-datecard__num { font-size: 54px; }
.accueil-hero .acc-datecard__jour, .accueil-hero .acc-datecard__mois { font-size: 14px; }

/* ===== Bandeau héro v5.195.0 : boutique animée + horloge flip aux couleurs du ciel =====
   Les éléments .hero-ciel (boutique, tuiles de l'horloge, carte date) reçoivent leur dégradé
   ciel en style inline via accueil.js (heroTick) ; le CSS ci-dessous n'est que le repli violet. */
.accueil-hero .acc-datecard { box-shadow: 0 8px 18px var(--ckgl, color-mix(in srgb, var(--primary) 32%, transparent)), inset 0 1px 0 rgba(255,255,255,.3); }
/* La boutique EST la tuile (règle des icônes du menu) : pas de tuile support, la façade remplit
   le carré arrondi ; l'ombre suit la forme (drop-shadow) et prend la couleur du ciel (--ckgl). */
.accueil-hero__home.hero-boutik { width: 112px; height: 112px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; filter: drop-shadow(0 10px 16px var(--ckgl, color-mix(in srgb, var(--primary) 40%, transparent))); }
.hero-boutik svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .accueil-hero__home.hero-boutik { width: 88px; height: 88px; } }
/* Scène bureau « trait » v5.220.0 (retour de Mika) : PAS de tuile ni de halo — l'icône blanche est
   posée directement sur le bandeau ; c'est le DÉGRADÉ DU BANDEAU (teinté horloge par heroTick) qui
   la met en valeur. */
.accueil-hero__home.hero-boutik:has([data-trait]) { background: none; border-radius: 0; filter: none; box-shadow: none; width: 128px; height: 128px; }
.hero-boutik [data-trait] { width: 124px; height: 124px; margin: auto; } /* v5.221.0 : icône agrandie */
@media (max-width: 640px) { .hero-boutik [data-trait] { width: 86px; height: 86px; } }
/* v5.230.0 : l'icône de gauche est la MÉTÉO animée (même mécanique que la tuile du menu).
   v5.231.0 : les ÉCRITURES passent DEVANT l'icône (le grand soleil déborde dessous, en décor). */
.hero-boutik .hero-wx-ic { display: flex; align-items: center; justify-content: center; overflow: visible; }
.hero-boutik .hero-wx-ic .wxm { width: 100%; height: 100%; transform: scale(3.35); overflow: visible; }
/* v5.240.0 (demande de Mika) : l'icône météo SORT de la tuile — décalée vers la gauche/haut, elle
   déborde par le bord gauche et le haut/bas du bandeau tout en restant DERRIÈRE le message (z-index 1). */
.accueil-hero__home.hero-boutik:has([data-meteo-ic]) { transform: translate(-28px, -44px); margin-right: -50px; } /* v5.249.0 : soleil REMONTÉ pour combler le vide en haut à gauche ; v5.263 : marge négative -> l'icône (derrière, z-index 1) empiète pour laisser plus de largeur à la salutation agrandie */
@media (max-width: 640px) { .accueil-hero__home.hero-boutik:has([data-meteo-ic]) { transform: translate(-14px, -24px); } }
.accueil-hero .accueil-hero__home.hero-boutik { position: relative; z-index: 1; }
.accueil-hero .accueil-hero__txt { position: relative; z-index: 2; }
@keyframes hsTCurve { 0% { stroke-dashoffset: 34; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 34; } }
@keyframes hsTDot { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes hsTVap { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-4.5px); opacity: 0; } }
.hs-tcurve { stroke-dasharray: 34; animation: hsTCurve 4.2s ease-in-out infinite; }
.hs-tdot { transform-box: fill-box; transform-origin: center; animation: hsTDot 1.6s ease-in-out infinite; }
.hs-tv1 { animation: hsTVap 2.6s ease-out infinite; }
.hs-tv2 { animation: hsTVap 2.6s ease-out 1.2s infinite; }
/* Salutation dynamique v5.228.0 : prénom en dégradé ciel, ICÔNE MÉTÉO du moment (bibliothèque wxm
   validée de meteo.js, versions nuit incluses) à la place de l'emoji, pastille + trait ciel.
   La main 👋 est retirée (demande de Mika). */
.accueil-hero__h .hero-nom { background: var(--gradnom, linear-gradient(120deg, var(--primary), #4a3fb5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accueil-hero__h .hero-emo { font-size: 30px; margin-left: 6px; display: inline-flex; align-items: center; vertical-align: middle; overflow: visible; }
.accueil-hero__h .hero-emo svg { width: 42px; height: 42px; } /* v5.271 : icône de salutation agrandie + alignée */
/* Icônes de salutation animées (8 créneaux, rendues dans #hero-emo) — validées avec Mika. */
.ge-sbob { transform-box: fill-box; animation: geSbob 3.6s ease-in-out infinite; }
@keyframes geSbob { 0%, 100% { transform: translateY(2.2px); } 50% { transform: translateY(-1.5px); } }
.ge-sglow { animation: geSglow 3.2s ease-in-out infinite; }
@keyframes geSglow { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
.ge-steam { transform-box: fill-box; transform-origin: bottom; animation: geSteam 2.6s ease-out infinite; }
@keyframes geSteam { 0% { opacity: 0; transform: translateY(3px); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-10px); } }
.ge-rock { transform-box: fill-box; transform-origin: center; animation: geRock 3.8s ease-in-out infinite; }
@keyframes geRock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ge-tw { transform-box: fill-box; transform-origin: center; animation: geTw 2.2s ease-in-out infinite; }
@keyframes geTw { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
.ge-clkL { transform-box: fill-box; transform-origin: bottom; animation: geClkL 2.4s ease-in-out infinite; }
@keyframes geClkL { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(1deg); } }
.ge-clkR { transform-box: fill-box; transform-origin: bottom; animation: geClkR 2.4s ease-in-out infinite; }
@keyframes geClkR { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-1deg); } }
.ge-sway { transform-box: fill-box; transform-origin: top; animation: geSway 3s ease-in-out infinite; }
@keyframes geSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ge-mbr { transform-box: fill-box; transform-origin: center; animation: geMbr 3.4s ease-in-out infinite; }
@keyframes geMbr { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.16); } }
.ge-zz { transform-box: fill-box; transform-origin: center; animation: geZz 2.8s ease-in-out infinite; }
@keyframes geZz { 0% { opacity: 0; transform: translate(0, 4px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -11px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .ge-sbob, .ge-sglow, .ge-steam, .ge-rock, .ge-tw, .ge-clkL, .ge-clkR, .ge-sway, .ge-mbr, .ge-zz { animation: none; } } /* v5.229.0 : icône du MOMENT (café/couverts/sacs/ville/lune), convertie en SVG animé par le moteur d'icônes */
.accueil-hero__s.hero-sub { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 1px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dotciel, var(--primary)); box-shadow: 0 0 6px var(--dotciel, var(--primary)); flex: 0 0 auto; }
.hero-ligne { margin-top: 8px; height: 3px; width: 64px; border-radius: 2px; background: var(--gradnom, linear-gradient(120deg, var(--primary), #4a3fb5)); } /* v5.275 : trait aligné sur le début des lettres (retour Mika) */
/* ===== Hero PANORAMIQUE v5.243.0 (maquette validée par Mika) : UNE seule surface teintée ciel qui
   AVALE salutation + horloge (flip-flap + secondes) + date + barre météo (icônes conservées). Horloge
   et date passent en VERRE DÉPOLI tiré du ciel (fini les blocs pleins qui tranchent) ; la barre des
   absents / congés reste inchangée, juste dessous. ===== */
.accueil-hero--pano { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
/* v5.246.0 : le cluster d'icônes (notifs + profil + déconnexion) et le bouton « installer » s'intègrent
   DANS le bandeau, en haut à droite (au-dessus de l'horloge) — la barre du haut de l'accueil disparaît. */
.topbar.topbar--vide { display: none; }
.hero-topline { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 0; position: relative; z-index: 3; min-height: 40px; }
.hero-topline .topbar-cluster { margin-left: 8px; } /* neutralise le margin-left:auto : install + cluster regroupés à droite */
/* v5.248.0 (choix de Mika) : icônes NUES sur le ciel — plus de pilule blanche ni de fond ; les icônes
   et le nom du chip prennent l'encre du ciel (--ckink, posée par heroTick) comme les chiffres de l'horloge. */
.hero-topline .topbar-cluster { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; padding: 0; }
.hero-topline .topbar-icon { color: var(--ckink, #2f4a74); background: transparent; }
.hero-topline .topbar-icon:hover, .hero-topline .tool-icon:hover { background: rgba(255,255,255,.45); }
/* v5.250.0 : UNIFORMISE toutes les icônes du bandeau (bloc notifications .tool-icon + cluster .topbar-icon
   + install) — même gabarit de bouton, même taille de SVG, centrées et alignées, même encre du ciel. */
.hero-topline .topbar-cluster { display: flex; align-items: center; gap: 8px; background: transparent; }
.hero-topline .sidebar__tools { display: flex; align-items: center; gap: 8px; background: transparent; margin: 0; } /* margin-bottom:10px d'origine décalait le bloc notifs de 5px vers le haut */
.hero-topline .topbar-icon, .hero-topline .tool-icon { width: 34px; height: 34px; min-width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ckink, #2f4a74); }
.hero-topline .topbar-icon svg, .hero-topline .tool-icon svg,
.hero-topline .topbar-cluster .topbar-icon svg, .hero-topline .topbar-cluster .tool-icon svg { width: 21px !important; height: 21px !important; } /* bat la règle .topbar-cluster ... svg (ligne 588) */
.hero-topline .topbar-cluster .topbar-user { background: transparent; border: 0; box-shadow: none; padding: 4px 6px; animation: none; }
.hero-topline .topbar-cluster .topbar-user .topbar-user__nom { color: var(--ckink, #2f4a74); }
.accueil-hero__top { display: flex; align-items: center; gap: 16px; padding: 20px 24px 10px; position: relative; min-height: 210px; } /* v5.244.0 : rangée haute plus HAUTE pour contenir le soleil (il ne déborde plus que sur le côté gauche, plus par le haut hors bandeau) */
.accueil-hero--pano .accueil-wxbar { margin: 6px 16px 16px; }
.accueil-hero--pano .wxbar { background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.5); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.accueil-hero--pano .wxbar:hover { border-color: rgba(255,255,255,.85); }
.accueil-hero--pano .wxchip { border-right-color: rgba(255,255,255,.45); }
.accueil-hero--pano .hero-fl { background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px var(--ckgl, rgba(80,110,160,.28)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.accueil-hero--pano .hero-fl b { color: var(--ckink, #2f4a74); text-shadow: none; }
.accueil-hero--pano .hero-fl::before { background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.08)); }
.accueil-hero--pano .hero-fl::after { background: rgba(50,74,116,.16); }
.accueil-hero--pano .hero-sep { color: var(--ckink, #6b7f9f); }
.accueil-hero--pano .acc-datecard { background: rgba(255,255,255,.30); color: var(--ckink, #2f4a74); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px var(--ckgl, rgba(80,110,160,.28)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.accueil-hero--pano .acc-datecard__jour, .accueil-hero--pano .acc-datecard__mois { opacity: .78; }
.hero-ck-zone { position: relative; display: flex; align-items: center; flex: 0 0 auto; z-index: 1; }
.hero-ck-halo { position: absolute; inset: -22px -34px; border-radius: 50%; pointer-events: none; }
.hero-ck-row { position: relative; display: flex; align-items: center; gap: 7px; }
.hero-fl { position: relative; width: 66px; height: 102px; border-radius: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000)); box-shadow: 0 8px 18px var(--ckgl, color-mix(in srgb, var(--primary) 35%, transparent)), inset 0 1px 0 rgba(255,255,255,.28); }
.hero-fl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.hero-fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.4px; background: rgba(20,10,40,.22); }
.hero-fl b { position: relative; font-size: 48px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.hero-fl.tk { animation: heroTickFlip .32s ease-out; }
.hero-fl.tk b { animation: heroNumIn .32s ease-out; }
@keyframes heroTickFlip { 0% { transform: perspective(300px) rotateX(0); } 40% { transform: perspective(300px) rotateX(-15deg) scaleY(.94); } 100% { transform: perspective(300px) rotateX(0); } }
@keyframes heroNumIn { 0% { transform: translateY(-44%); opacity: .2; } 100% { transform: translateY(0); opacity: 1; } }
.hero-sep { font-size: 38px; font-weight: 800; color: color-mix(in srgb, var(--primary) 50%, var(--text-3)); padding-bottom: 8px; animation: heroSepBeat 2s ease-in-out infinite; }
@keyframes heroSepBeat { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Les 3 scènes du bandeau (bureau / coin planning / comptoir) : micro-animations désynchronisées
   « sauce Météo » — oiseau, étoiles, lampe et suspension pendulaires, écrans qui tapent, ticket,
   néon qui grésille, barre de shift qui se remplit… (classes hs-*, keyframes hs*). */
@keyframes hsNuage { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes hsVap { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateY(-3.5px); opacity: 0; } }
@keyframes hsSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hsCurve { 0% { stroke-dashoffset: 26; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes hsBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hsShift { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes hsPulseG { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hsBird { 0%, 50% { transform: translate(-2px, .6px); opacity: 0; } 55% { opacity: .8; } 70% { transform: translate(7px, -1.6px); opacity: .8; } 79%, 100% { transform: translate(11px, -2.6px); opacity: 0; } }
@keyframes hsTw { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes hsPend { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes hsShine { 0%, 55% { transform: translateX(0); opacity: 0; } 62% { opacity: .4; } 80% { transform: translateX(15px); opacity: .35; } 92%, 100% { transform: translateX(19px); opacity: 0; } }
@keyframes hsType { 0% { transform: scaleX(.18); } 38% { transform: scaleX(1); } 88% { transform: scaleX(1); } 100% { transform: scaleX(.18); } }
@keyframes hsGrow { 0%, 12% { transform: scaleX(.22); opacity: .55; } 52%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(.22); opacity: .55; } }
@keyframes hsTout { 0%, 16% { transform: translateY(3.4px); } 50%, 86% { transform: translateY(0); } 100% { transform: translateY(3.4px); } }
@keyframes hsNeonF { 0%, 6.5%, 8.5%, 41%, 43.5%, 100% { opacity: 1; } 7.5% { opacity: .25; } 42% { opacity: .4; } 77% { opacity: .7; } }
@keyframes hsKey { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hsBook { 0%, 68%, 100% { transform: rotate(0); } 78%, 88% { transform: rotate(-7deg); } }
@keyframes hsFrame { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes hsChair { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
@keyframes hsPost { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes hsFlick { 0%, 91%, 95%, 100% { opacity: 1; } 93% { opacity: .82; } 97% { opacity: .9; } }
@keyframes hsDig { 0% { transform: scaleX(.45); } 25% { transform: scaleX(.85); } 50% { transform: scaleX(.6); } 75% { transform: scaleX(1); } 100% { transform: scaleX(.45); } }
@keyframes hsDot { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.3); opacity: 1; } }
.hs-nuage { animation: hsNuage 11s ease-in-out infinite; }
.hs-vap1 { animation: hsVap 2.6s ease-out infinite; }
.hs-vap2 { animation: hsVap 2.6s ease-out 1.2s infinite; }
.hs-f1 { transform-box: fill-box; transform-origin: center bottom; animation: hsSway 3.4s ease-in-out infinite; }
.hs-f2 { transform-box: fill-box; transform-origin: center bottom; animation: hsSway 4.1s ease-in-out -1.3s infinite; }
.hs-f3 { transform-box: fill-box; transform-origin: center bottom; animation: hsSway 3.8s ease-in-out -2.2s infinite; }
.hs-curve { stroke-dasharray: 26; animation: hsCurve 4.2s ease-in-out infinite; }
.hs-cur { animation: hsBlink 1.1s steps(1) infinite; }
.hs-s1 { animation: hsShift 2.8s ease-in-out infinite; }
.hs-s2 { animation: hsShift 2.8s ease-in-out .45s infinite; }
.hs-s3 { animation: hsShift 2.8s ease-in-out .9s infinite; }
.hs-ticket { transform-box: fill-box; transform-origin: center bottom; animation: hsSway 2.9s ease-in-out infinite; }
.hs-cb { animation: hsPulseG 2.2s ease-in-out infinite; }
.hs-bird { animation: hsBird 11s linear infinite; }
.hs-tw { animation: hsTw 2.1s ease-in-out infinite; }
.hs-tw2 { animation: hsTw 2.9s ease-in-out -1.1s infinite; }
.hs-lamp { transform-box: view-box; transform-origin: 7.9px 25.2px; animation: hsPend 4.6s ease-in-out infinite; }
.hs-susp { transform-box: view-box; transform-origin: 24px 0px; animation: hsPend 5.4s ease-in-out -1.6s infinite; }
.hs-shine { animation: hsShine 6.5s ease-in-out infinite; }
.hs-t1 { transform-box: fill-box; transform-origin: left center; animation: hsType 3.8s ease-in-out infinite; }
.hs-t2 { transform-box: fill-box; transform-origin: left center; animation: hsType 4.4s ease-in-out -1.3s infinite; }
.hs-t3 { transform-box: fill-box; transform-origin: left center; animation: hsType 4s ease-in-out -2.5s infinite; }
.hs-grow { transform-box: fill-box; transform-origin: left center; animation: hsGrow 5.6s ease-in-out infinite; }
.hs-tout { animation: hsTout 5.2s ease-in-out infinite; }
.hs-neon { animation: hsNeonF 7s linear infinite; }
.hs-key { animation: hsKey 2.6s ease-in-out infinite; }
.hs-book { transform-box: fill-box; transform-origin: right bottom; animation: hsBook 8s ease-in-out infinite; }
.hs-frame { transform-box: fill-box; transform-origin: center top; animation: hsFrame 5s ease-in-out infinite; }
.hs-chair { transform-box: fill-box; transform-origin: center bottom; animation: hsChair 6s ease-in-out infinite; }
.hs-post { transform-box: fill-box; transform-origin: left bottom; animation: hsPost 4.4s ease-in-out -1s infinite; }
.hs-flick { animation: hsFlick 3.7s linear infinite; }
.hs-dig { transform-box: fill-box; transform-origin: left center; animation: hsDig 2.8s steps(1) infinite; }
.hs-dot { transform-box: fill-box; transform-origin: center; animation: hsDot 1.6s ease-in-out infinite; }
/* Petits écrans : les secondes puis l'horloge s'effacent pour laisser respirer le bandeau. */
@media (max-width: 1080px) { .hero-fl--s, .hero-sep--s { display: none; } }
@media (max-width: 900px) { .hero-ck-zone { display: none; } }
/* v5.478 : FENÊTRE ÉTROITE (≤560px) — tout s'adapte, plus jamais de chevauchement ni de barre à
   glisser (demande Mika « toujours adapter l'affichage à la fenêtre ») :
   (a) salutation pleine largeur, carte date qui passe DESSOUS (fini la carte sur le texte) ;
   (b) la bande météo PASSE À LA LIGNE (2 rangées de chips) au lieu d'être coupée/défilante ;
   (c) cloche/boîte/tâches/présents + profil + sortie : rangées propres alignées à droite. */
@media (max-width: 560px) {
  .accueil-hero__top { flex-wrap: wrap; row-gap: 10px; min-height: 0; padding: 16px 16px 8px; }
  .accueil-hero__txt { flex: 1 1 100%; }
  .accueil-hero__h { font-size: 26px; }
  .accueil-hero .acc-datecard { margin-left: auto; margin-right: auto; padding: 12px 26px; min-width: 0; }
  .accueil-hero .acc-datecard__num { font-size: 40px; }
  .accueil-hero__home.hero-boutik:has([data-meteo-ic]) { transform: translate(-6px, -10px); margin-right: -10px; } /* le décor météo ne mord plus sur la salutation */
  .wxbar { flex-wrap: wrap; row-gap: 8px; overflow-x: visible; }
  .wxchip { flex: 1 1 22%; min-width: 70px; border-right: 0 !important; }
  .hero-topline { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
  .hero-topline .topbar-cluster { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-left: 0; gap: 4px; }
  .hero-topline .topbar-user__nom { max-width: 92px; } /* nom raccourci → cloche + profil + sortie tiennent sur UNE seule ligne alignée */
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .hero-fl.tk, .hero-fl.tk b, .hero-sep, .hero-boutik svg * { animation: none !important; } }

/* ===== Barre du haut (v5.211.0) : icônes filaires SANS contour — l'icône est la tuile, les
   halos de notification (notif-halo) restent autour. !important : les règles génériques
   .topbar-icon/.tool-icon (fond blanc + bordure) sont déclarées plus bas dans le fichier.
   Les keyframes it* ci-dessous servent la collection de tuiles dessinées (js/icones-top.js),
   conservée sur disque mais non chargée depuis la v5.211.0. */
.topbar-cluster .topbar-icon, .topbar-cluster .tool-icon { background: transparent !important; border: 0 !important; }
.topbar-cluster .topbar-icon svg, .topbar-cluster .tool-icon svg { width: 21px; height: 21px; }
.topbar-cluster .topbar-icon:hover, .topbar-cluster .tool-icon:hover { color: var(--ckink, var(--primary)); transform: translateY(-1px) scale(1.08); background: transparent !important; } /* v5.282 : au survol SANS notif, l'icône GARDE la couleur du hero (--ckink) au lieu de virer au violet (retour Mika) */
/* Bouton « Installer l'app » (v5.232.0) : ICÔNE SEULE sans cadre, comme les autres icônes de la
   barre du haut — téléphone filaire avec le logo LEME dans l'écran, libellé en info-bulle. */
#hub-install-app { background: transparent !important; border: 0 !important; padding: 0; width: 34px; height: 34px; }
#hub-install-app svg { width: 22px; height: 22px; }
#hub-install-app:hover { color: var(--primary); transform: translateY(-1px) scale(1.08); }
@keyframes itBell { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes itClap { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes itWave { 0%, 10%, 90%, 100% { opacity: 0; } 30%, 70% { opacity: .85; } }
@keyframes itLet { 0%, 60%, 100% { transform: translateY(0); } 25%, 40% { transform: translateY(-9px); } }
@keyframes itChk { 0% { stroke-dashoffset: 13; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 13; } }
@keyframes itStrike { 0%, 15% { stroke-dashoffset: 26; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }
@keyframes itRot { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes itRew { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes itMart { 0%, 72%, 100% { transform: rotate(0); } 75% { transform: rotate(-17deg); } 78% { transform: rotate(15deg); } 81% { transform: rotate(-12deg); } 84% { transform: rotate(10deg); } 87% { transform: rotate(-5deg); } 90% { transform: rotate(0); } }
@keyframes itSpark { 0%, 72%, 92%, 100% { opacity: 0; } 76%, 88% { opacity: 1; } }
@keyframes itShk { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-2.5deg); } 80% { transform: rotate(2deg); } 84% { transform: rotate(-1.5deg); } 88% { transform: rotate(1deg); } 92% { transform: rotate(0); } }
@keyframes itDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .6; } }
@keyframes itCarte { 0%, 18% { transform: translateY(0); } 45%, 62% { transform: translateY(13px); } 85%, 100% { transform: translateY(0); } }
@keyframes itTamp { 0%, 44%, 70%, 100% { opacity: 0; } 48%, 64% { opacity: 1; } }
@keyframes itAnse { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-3px) rotate(-2deg); } 82% { transform: translateY(0) rotate(1.5deg); } 87% { transform: translateY(-1.5px) rotate(0); } 92% { transform: translateY(0); } }
@keyframes itBang { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes itScan { 0% { transform: translateY(-16px); opacity: 0; } 25% { opacity: .45; } 75% { opacity: .45; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes itInst { 0% { transform: translateY(-16px); opacity: 0; } 20% { opacity: 1; } 45%, 72% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes itProg { 0%, 40% { transform: scaleX(.1); } 72%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.1); } }
@keyframes itRay { 0%, 100% { opacity: .28; } 50% { opacity: .55; } }
@keyframes itGlow { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes itOut { 0%, 100% { transform: translateX(0); opacity: 1; } 42% { transform: translateX(15px); opacity: .1; } 52% { transform: translateX(-9px); opacity: 0; } 64% { opacity: 1; } }
.it-bsw { transform-box: view-box; transform-origin: 32px 25px; animation: itBell 2.6s ease-in-out infinite; }
.it-bcl { transform-box: view-box; transform-origin: 32px 30px; animation: itClap 2.6s ease-in-out -.5s infinite; }
.it-bwv { animation: itWave 2.6s ease-in-out infinite; }
.it-let { animation: itLet 5s ease-in-out infinite; }
.it-chk { stroke-dasharray: 13; animation: itChk 4s ease-in-out infinite; }
.it-strike { stroke-dasharray: 26; animation: itStrike 4s ease-in-out infinite; }
.it-rew { transform-box: view-box; transform-origin: 32px 40px; animation: itRew 8s linear infinite; }
.it-rshk { transform-box: fill-box; transform-origin: center bottom; animation: itShk 4.6s ease-in-out infinite; }
.it-rmart { transform-box: view-box; transform-origin: 32px 17px; animation: itMart 4.6s ease-in-out infinite; }
.it-rspk { animation: itSpark 4.6s ease-in-out infinite; }
.it-rsec { transform-box: view-box; transform-origin: 32px 38px; animation: itRot 6s linear infinite; }
.it-dot { transform-box: fill-box; transform-origin: center; animation: itDot 2.1s ease-in-out infinite; }
.it-carte { animation: itCarte 5s ease-in-out infinite; }
.it-pmin { transform-box: view-box; transform-origin: 32px 36px; animation: itRot 9s linear infinite; }
.it-tamp { animation: itTamp 5s ease-in-out infinite; }
.it-anse { transform-box: fill-box; transform-origin: center bottom; animation: itAnse 4.4s ease-in-out infinite; }
.it-bang { transform-box: fill-box; transform-origin: center; animation: itBang 1.6s ease-in-out infinite; }
.it-scan { animation: itScan 3.4s linear infinite; }
.it-inst { animation: itInst 4.2s ease-in-out infinite; }
.it-prog { transform-box: fill-box; transform-origin: left center; animation: itProg 4.2s ease-in-out infinite; }
.it-wv { animation: itWave 4.2s ease-in-out infinite; }
.it-ray { animation: itRay 3.2s ease-in-out infinite; }
.it-glow { animation: itGlow 2.4s ease-in-out infinite; }
.it-qout { animation: itOut 3.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .tool-icon--tile svg *, .topbar-icon--tile svg *, .btn-tile-ic svg * { animation: none !important; } }
/* Bloc veille — carte dégradée */
/* v5.664 (retour Mika « la tuile CA est toujours blanche ») — le bandeau Veille prend le MÊME dégradé pêche que le hero/météo via --acc-sky (posé en inline par heroTick, accueil.js), comme .acc-today / .rap-card / .acc-resume. */
.acc-kveille { background: var(--acc-sky, var(--surface)); border: 1px solid var(--acc-brd, var(--border)); border-radius: 16px; padding: 12px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.acc-kveille:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.acc-kveille__ttl { color: var(--primary-dark); }
/* Tuile « Journée de solidarité » (accueil) */
.acc-solid { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 18px; background: linear-gradient(135deg, color-mix(in srgb, #f76707 9%, var(--surface)), var(--surface) 78%); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.acc-solid:hover { border-color: #f76707; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.acc-solid__ic { font-size: 24px; flex: 0 0 auto; }
.acc-solid__body { flex: 1; min-width: 0; }
.acc-solid__ttl { font-weight: 800; font-size: 14px; }
.acc-solid__sub { font-size: 12.5px; color: var(--text-2); margin: 1px 0 6px; }
.acc-solid__bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, #f76707 18%, var(--surface)); overflow: hidden; }
.acc-solid__bar > span { display: block; height: 100%; background: #f76707; border-radius: 999px; }
.acc-solid__pct { font-size: 18px; font-weight: 800; color: #f76707; flex: 0 0 auto; }
.acc-kv__v { font-size: 20px; }
/* ===== Prochains rappels — v5.566 : mini-cartes façon hero (.scd-card) =====
   Le CONTENEUR garde .card.rap-card (fond « ciel » --acc-sky/--acc-brd posé en inline par heroTick,
   accueil.js l.295) et l'EN-TÊTE .rap-head ; seules les lignes deviennent des mini-cartes teintées. */
.card.rap-card { margin-top: 14px; padding: 14px 16px; background: var(--acc-sky, var(--surface)); border-color: var(--acc-brd, var(--border)); }
.rap-head { display: flex; align-items: center; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.rap-head .lien { margin-left: auto; }
/* Grille : 2 colonnes GARANTIES sur bureau (repeat(2,…), jamais 3 sur dashboard large), 1 colonne sur mobile.
   minmax(0,1fr) laisse le titre se tronquer proprement en ellipsis. */
.rp2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rp2-grid { grid-template-columns: 1fr; } }
/* La carte = reset du <button> (focusable clavier) + déclinaison fidèle de .scd-card. */
.rp2-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border)); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rp2-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.rp2-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); }
.rp2-card:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* Pastille d'icône ~40px teintée --c (comme .scd-card__ic). */
.rp2-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; background: color-mix(in srgb, var(--c) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
/* Bloc texte : titre en gras tronqué en ellipsis + jour/numéro en sous-titre discret. */
.rp2-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.rp2-titre { font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-jour { font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; }
/* Pilule « dans X j » teintée --c ; texte mixé vers --text (82 % --c) pour rester lisible même en teinte pastel, clair comme sombre. */
.rp2-rel { flex: 0 0 auto; align-self: center; font-size: 11px; font-weight: 700; white-space: nowrap; padding: 4px 10px; border-radius: 999px; color: color-mix(in srgb, var(--c) 82%, var(--text)); background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.rp2-rel--now { color: #fff; background: var(--c); border-color: transparent; }
/* Événement du jour : carte nettement mise en avant (fond plus soutenu + liseré + halo + barre 5px). */
.rp2-card--now { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--surface)), var(--surface) 74%); border-color: color-mix(in srgb, var(--c) 52%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), var(--shadow-sm); }
.rp2-card--now::before { width: 5px; }
.rp2-card--now:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 10px 24px rgba(0, 0, 0, .10); }
/* Titre de section */
.sc-dash__head { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
/* Cartes KPI — accent coloré + survol */
.sc-kpis { gap: 14px; }
.sc-kpi { position: relative; overflow: hidden; border-radius: 16px; padding: 16px 18px; transition: transform .16s ease, box-shadow .16s ease; }
.sc-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); opacity: .9; }
.sc-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 30, 60, .10); }
.sc-kpi:nth-child(1)::before { background: linear-gradient(90deg, #6c5ce7, #a29bfe); }
.sc-kpi:nth-child(2)::before { background: linear-gradient(90deg, #00b894, #55efc4); }
.sc-kpi:nth-child(3)::before { background: linear-gradient(90deg, #0984e3, #74b9ff); }
.sc-kpi:nth-child(4)::before { background: linear-gradient(90deg, #e17055, #fab1a0); }
.sc-kpi__v { font-size: 25px; }
.sc-kpi__l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; margin-top: 4px; }
/* Sélecteur d'année (Suivi caisse) */
.sc-year { display: inline-flex; align-items: center; gap: 6px; }
.sc-year__v { font-weight: 800; font-size: 15px; min-width: 46px; text-align: center; }
.sc-card__hi { color: var(--text-3); font-weight: 600; font-size: 11px; }

/* ===================== Application Météo (fenêtre style Windows 11) ===================== */
.mto-win { width: 560px; max-width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.mto-head { display: flex; align-items: center; gap: 8px; background: #15151f; padding: 9px 12px; }
.mto-head__ic { font-size: 15px; }
.mto-head__ttl { font-size: 13px; font-weight: 700; color: #f0f1f6; letter-spacing: .3px; }
.mto-search { position: relative; flex: 1; max-width: 240px; margin-left: 6px; }
.mto-search input { width: 100%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; color: #eef0f7; }
.mto-search input::placeholder { color: #9aa0b8; }
.mto-res { position: absolute; top: 34px; left: 0; right: 0; background: #23233a; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; overflow: hidden auto; display: none; z-index: 5; max-height: 230px; }
.mto-res div { padding: 8px 11px; font-size: 12.5px; color: #e6e8f2; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06); }
.mto-res div:hover { background: rgba(255,255,255,.09); }
.mto-res small { color: #9aa0b8; }
.mto-btn { background: rgba(255,255,255,.08); border: 0; color: #dfe2ee; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 5px 9px; border-radius: 7px; }
.mto-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.mto-body { background: linear-gradient(160deg, #3a2f63 0%, #46396f 45%, #3b2c5e 100%); min-height: 280px; padding-bottom: 10px; }
.mto-load { padding: 40px 16px; text-align: center; color: #c4c8db; font-size: 13px; }
.mto-loc { padding: 12px 18px 0; font-size: 14px; color: #eef0f7; font-weight: 600; }
.mto-cur { display: flex; align-items: center; gap: 14px; padding: 8px 18px 6px; }
.mto-cur__emo { font-size: 54px; line-height: 1; }
.mto-cur__big { font-size: 56px; font-weight: 300; line-height: 1; color: #fff; }
.mto-cur__cond { font-size: 15px; color: #f0f1f6; margin-top: 4px; }
.mto-cur__feel { font-size: 12.5px; color: #c4c8db; margin-top: 3px; }
.mto-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); margin: 8px 16px 0; border-radius: 10px; overflow: hidden; }
.mto-m { background: rgba(20,18,40,.4); padding: 10px 12px; }
.mto-m__l { font-size: 11px; color: #b9bdd2; }
.mto-m__v { font-size: 16px; color: #fff; font-weight: 600; margin-top: 3px; }
.mto-sec { font-size: 12px; color: #c4c8db; letter-spacing: .5px; margin: 16px 0 4px 18px; text-transform: uppercase; font-weight: 700; }
.mto-hours { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 6px; }
.mto-hours::-webkit-scrollbar { height: 6px; } .mto-hours::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.mto-h { flex: 0 0 auto; width: 58px; text-align: center; background: rgba(20,18,40,.32); border-radius: 9px; padding: 9px 4px; }
.mto-h .t { font-size: 11px; color: #c4c8db; } .mto-h .e { font-size: 20px; margin: 3px 0; } .mto-h .d { font-size: 14px; color: #fff; font-weight: 600; } .mto-h .p { font-size: 10px; color: #7fc8ff; margin-top: 2px; }
.mto-daily { margin: 4px 16px 8px; }
.mto-dr { display: grid; grid-template-columns: 42px 26px 50px 38px 1fr 38px; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; color: #e6e8f2; }
.mto-dr__e { font-size: 17px; text-align: center; }
.mto-dr__pp { font-size: 10.5px; color: #7fc8ff; }
.mto-dr__lo { color: #9aa0b8; text-align: right; }
.mto-dr__hi { color: #fff; font-weight: 600; text-align: left; }
.mto-track { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); }
.mto-seg { position: absolute; top: 0; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #5fa9e6, #ffd56e, #ef8a4a); }
.mto-foot { font-size: 10px; color: #aab; opacity: .65; padding: 6px 16px 12px; text-align: center; background: #2b2750; }
@media (max-width: 640px) { .mto-win { width: 100%; } .mto-cur__big { font-size: 46px; } .mto-cur__emo { font-size: 44px; } }

/* ===================== App Météo plein écran — design clair (planning) ===================== */
.mto-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mto-tools .mto-search { position: relative; width: 220px; flex: 0 0 auto; margin: 0; max-width: none; }
.mto-tools .mto-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 13px; color: var(--text); }
.mto-tools .mto-search input::placeholder { color: var(--text-3); }
.mto-tools .mto-res { position: absolute; top: 38px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden auto; display: none; z-index: 30; max-height: 240px; box-shadow: var(--shadow-lg); }
.mto-tools .mto-res div { padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); }
.mto-tools .mto-res div:hover { background: var(--primary-soft); }
.mto-tools .mto-res small { color: var(--text-3); }
/* v5.793 (demande Mika « la météo doit prendre tout l'écran ») : plus de bride à 1180 px,
   l'écran occupe toute la largeur disponible. */
.mto-app { max-width: none; margin: 0; padding: 16px; border-radius: 20px; transition: background .7s ease; }
.mto-app__loc { font-weight: 700; font-size: 15px; color: var(--text-2); margin-bottom: 14px; }
.mto-app .mto-load { color: var(--text-3); }
.mto-app__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.mto-app__foot { max-width: none; margin: 12px 0 0; text-align: center; font-size: 11px; color: var(--text-3); }
.mto-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.mto-card--wide { grid-column: 1 / -1; }
.mto-card--hero { display: flex; align-items: center; }
.mto-app .mto-cur { padding: 0; gap: 18px; }
.mto-app .mto-cur__emo { font-size: 64px; }
.mto-app .mto-cur__big { color: var(--text); font-size: 56px; }
.mto-app .mto-cur__cond { color: var(--text-2); font-weight: 600; }
.mto-app .mto-cur__feel { color: var(--text-3); }
.mto-app .mto-metrics { background: transparent; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 0; border-radius: 0; overflow: visible; }
.mto-app .mto-m { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.mto-app .mto-m__l { color: var(--text-3); font-weight: 600; }
.mto-app .mto-m__v { color: var(--text); }
.mto-app .mto-sec { color: var(--text-3); margin: 0 0 10px; }
.mto-app .mto-hours { padding: 2px 0 6px; }
.mto-app .mto-hours::-webkit-scrollbar-thumb { background: var(--border-2, var(--border)); }
.mto-app .mto-h { background: var(--primary-soft); width: 62px; }
.mto-app .mto-h .t { color: var(--text-3); }
.mto-app .mto-h .e { font-size: 22px; }
.mto-app .mto-h .d { color: var(--text); font-weight: 700; }
.mto-app .mto-h .p { color: var(--primary); }
.mto-app .mto-daily { margin: 0; }
.mto-app .mto-dr { border-bottom: 1px solid var(--border); color: var(--text-2); grid-template-columns: 50px 28px 56px 46px 1fr 46px; gap: 10px; font-size: 14px; }
.mto-app .mto-dr:last-child { border-bottom: 0; }
.mto-app .mto-dr__lo { color: var(--text-3); }
.mto-app .mto-dr__hi { color: var(--text); font-weight: 700; }
.mto-app .mto-dr__pp { color: var(--primary); }
.mto-app .mto-track { background: var(--border); height: 6px; }
.mto-app .mto-seg { height: 6px; }
@media (max-width: 760px) { .mto-app__grid { grid-template-columns: 1fr; } .mto-app .mto-cur__big { font-size: 48px; } .mto-app .mto-cur__emo { font-size: 52px; } }

/* ===================== Météo — menu Actuel (style Windows, design clair) ===================== */
.mto-now__head { font-size: 13px; font-weight: 800; color: var(--text-2); margin-bottom: 4px; }
.mto-now__h { color: var(--text-3); font-weight: 600; margin-left: 4px; }
.mto-now__phrase { font-size: 13.5px; color: var(--text-2); margin: 8px 0 14px; }
.mto-now__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mto-nm { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.mto-nm__l { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mto-nm__v { font-size: 19px; color: var(--text); font-weight: 800; margin-top: 3px; }
.mto-nm__s { font-size: 11px; color: var(--text-3); font-weight: 600; }
.mto-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; }
.mto-day { flex: 0 0 auto; width: 78px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.mto-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mto-day.is-today { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.mto-day__j { font-size: 12px; font-weight: 800; color: var(--text-2); }
.mto-day__d { font-size: 10px; color: var(--text-3); }
.mto-day__e { font-size: 26px; margin: 4px 0; }
.mto-day__pp { font-size: 10px; color: var(--primary); min-height: 13px; }
.mto-day__hi { font-size: 15px; font-weight: 800; color: var(--text); }
.mto-day__lo { font-size: 12px; color: var(--text-3); }
.mto-chart__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mto-chart__tabs { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.mto-ctab { padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.mto-ctab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mto-chartsvg { width: 100%; height: auto; display: block; }
.mto-cl__v { font-size: 11px; fill: var(--text); font-weight: 700; }
.mto-cl__h { font-size: 10px; fill: var(--text-3); }
.mto-suncard { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mto-sunsvg { width: 320px; max-width: 100%; height: 120px; }
.mto-suninfo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
.mto-suninfo > div { display: flex; gap: 10px; align-items: baseline; }
.mto-suninfo b { color: var(--text); font-size: 16px; }
.mto-suninfo__dur { color: var(--text-3); font-weight: 600; font-size: 12px; }
.mto-stub { text-align: center; padding: 44px 20px; }
.mto-stub__ic { font-size: 46px; }
.mto-stub__t { font-size: 17px; font-weight: 800; color: var(--text); margin: 10px 0 6px; }
.mto-stub__s { font-size: 13.5px; color: var(--text-2); max-width: 540px; margin: 0 auto; line-height: 1.55; }
/* Météo — menu Horaire */
.mto-htabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.mto-htab { padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); border: 1px solid transparent; }
.mto-htab:hover { background: var(--surface-2); }
.mto-htab.is-active { background: var(--primary-soft); color: var(--primary-dark); }
.mto-htabs__sp { flex: 1; }
.mto-seg2 { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.mto-seg2b { padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.mto-seg2b.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mto-days--sel .mto-day { border-width: 2px; }
.mto-days--sel .mto-day.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.mto-hsub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.mto-rsw { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.mto-chartsvg2 { width: 100%; height: auto; display: block; }
.mto-cl__p { font-size: 9.5px; fill: var(--primary); }
.mto-liste { display: flex; flex-direction: column; }
.mto-lrow { display: grid; grid-template-columns: 64px 32px 1fr 64px; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
.mto-lrow:last-child { border-bottom: 0; }
.mto-lrow__h { color: var(--text-2); font-weight: 600; }
.mto-lrow__e { font-size: 18px; text-align: center; }
.mto-lrow__v { color: var(--text); font-weight: 700; }
.mto-lrow__p { color: var(--primary); text-align: right; font-size: 12px; }
/* Météo — menu Détails */
.mto-detgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mto-det { display: flex; flex-direction: column; }
.mto-det__t { font-size: 13px; font-weight: 800; color: var(--text-2); }
.mto-det__viz { display: flex; align-items: center; justify-content: center; min-height: 74px; margin: 8px 0; }
.mto-det__v { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.mto-det__d { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 3px; }
.mto-spark { width: 130px; height: 44px; }
.mto-bouss { width: 80px; height: 80px; }
.mto-bp { font-size: 10px; fill: var(--text-3); font-weight: 700; }
.mto-jauge { width: 120px; height: 72px; }
.mto-jauge__v { font-size: 22px; font-weight: 800; fill: var(--text); }
.mto-bigemo { font-size: 44px; line-height: 1; }
/* Météo — vue Détails (style MSN) */
.mto-detgrid2 { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.mto-d2 { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.mto-d2__h { font-size: 13px; font-weight: 800; color: var(--text-2); }
.mto-d2__b { display: flex; align-items: center; gap: 12px; min-height: 92px; }
.mto-d2__viz { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mto-d2__b > .mto-d2__viz:only-child { margin-inline: auto; }
.mto-d2__vals { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mto-bigv { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.5px; line-height: 1; }
.mto-bigv small { font-size: 15px; font-weight: 700; color: var(--text-2); }
.mto-pr { line-height: 1.05; }
.mto-pr b { font-size: 19px; font-weight: 800; color: var(--text); }
.mto-pr b small { font-size: 11px; font-weight: 700; color: var(--text-2); }
.mto-pr span { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.mto-d2__d { font-size: 12px; color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.mto-d2--col .mto-d2__b { flex-direction: column; align-items: stretch; gap: 6px; }
.mto-d2--col .mto-d2__vals { flex-direction: row; justify-content: space-between; }
.mto-d2--col .mto-pr { text-align: center; }
.mto-spark { width: 150px; height: 48px; }
.mto-bouss { width: 86px; height: 86px; }
.mto-jauge { width: 134px; height: 80px; }
.mto-jauge__v { font-size: 24px; font-weight: 800; fill: var(--text); }
.mto-bars { width: 120px; height: 46px; }
.mto-pal { width: 118px; height: 50px; }
.mto-slider { width: 120px; height: 30px; }
.mto-arc { width: 100%; max-width: 240px; height: 90px; margin: 0 auto; }
.mto-moon { width: 78px; height: 78px; }
.mto-circd { width: 84px; height: 84px; border-radius: 50%; background: rgba(31,111,214,.10); display: flex; align-items: center; justify-content: center; }
.mto-circd--blue { background: rgba(74,163,223,.14); }
.mto-circd .wxi, .mto-circd svg { width: 50px; height: 50px; }
.mto-circd .emi-wrap, .mto-circd .emi { width: 46px; height: 46px; }
/* Météo — menu Cartes (radar) */
.mto-map { height: 460px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.mto-map .mto-load { padding: 200px 16px; }
.mto-mapbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* Carte météo complète (Windy) */
.mto-mapseg { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mto-windy { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.mto-windy iframe { display: block; width: 100%; height: 480px; border: 0; }
@media (max-width: 700px) { .mto-windy iframe { height: 380px; } }
/* Qualité de l'air */
.mto-aqi { display: flex; align-items: center; gap: 16px; }
.mto-aqi__val { min-width: 76px; height: 76px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 800; }
.mto-aqi__t { font-size: 20px; font-weight: 800; }
.mto-aqi__s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mto-polgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mto-pol { background: var(--surface-2); border-radius: 12px; padding: 14px; text-align: center; }
.mto-pol__v { font-size: 22px; font-weight: 800; }
.mto-pol__l { font-size: 11.5px; color: var(--text-3); font-weight: 600; margin-top: 4px; }
/* Pollen */
.mto-pollist { display: flex; flex-direction: column; gap: 10px; }
.mto-pollen { display: grid; grid-template-columns: 26px 92px 1fr auto; align-items: center; gap: 10px; }
.mto-pollen__ic { font-size: 16px; }
.mto-pollen__n { font-weight: 700; font-size: 13px; }
.mto-pollen__b { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.mto-pollen__bar { display: block; height: 100%; border-radius: 6px; }
.mto-pollen__lv { font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Intempéries */
.mto-alerts { display: flex; flex-direction: column; gap: 10px; }
.mto-alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ac) 9%, var(--surface)); border-left: 4px solid var(--ac); }
.mto-alert__ic { font-size: 20px; line-height: 1; }
.mto-alert__t { font-weight: 800; font-size: 14px; }
.mto-alert__d { color: var(--text-3); font-weight: 600; font-size: 12px; }
.mto-alert__s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
/* En-tête dégradé (hero) Air / Pollen + bandes de prévision */
.mto-hero { border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, var(--g1, var(--primary)), color-mix(in srgb, var(--g2, var(--primary)) 55%, #000)); box-shadow: var(--shadow-sm); }
.mto-hero__loc { font-size: 12.5px; font-weight: 700; opacity: .92; }
.mto-hero__main { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.mto-hero__big { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.mto-hero__sub { font-size: 12px; opacity: .9; margin-top: 2px; }
.mto-hero__emo { font-size: 42px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.mto-hero__msg { margin-top: 12px; font-size: 13px; background: rgba(255,255,255,.18); padding: 8px 12px; border-radius: 10px; }
.mto-hero .mto-aqi__val { min-width: 66px; height: 66px; font-size: 27px; }
.mto-card--soft { margin-bottom: 14px; }
.mto-secttl { font-weight: 800; font-size: 14px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.mto-secttl span { font-size: 11px; font-weight: 600; color: var(--text-3); }
.mto-fc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mto-fc__d { flex: 0 0 auto; min-width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 10px 8px; }
.mto-fc__day { font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.mto-fc__chip { min-width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
.mto-fc__emo { font-size: 24px; line-height: 1; }
.mto-fc__lv { font-size: 10.5px; font-weight: 700; text-align: center; }
/* En-tête de localisation plus soigné (toutes les vues météo) */
.mto-app__loc { font-weight: 800; font-size: 14px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), var(--surface) 80%); border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); }
/* ===== Icônes météo SVG animées ===== */
.wxi { width: 1em; height: 1em; display: inline-block; vertical-align: middle; overflow: visible; }
.wxi-rays { transform-box: fill-box; transform-origin: center; animation: wxiSpin 9s linear infinite; }
.wxi-core { transform-box: fill-box; transform-origin: center; animation: wxiPulse 3s ease-in-out infinite; }
.wxi-cl { transform-box: fill-box; transform-origin: center; animation: wxiFloat 4s ease-in-out infinite; }
.wxi-drop, .wxi-flake { transform-box: fill-box; }
.wxi-drop { animation: wxiDrop 1.1s linear infinite; }
.wxi-flake { animation: wxiFlake 1.7s ease-in infinite; }
.wxi .d2 { animation-delay: .35s; } .wxi .d3 { animation-delay: .7s; }
.wxi-bolt { transform-box: fill-box; transform-origin: center; animation: wxiFlash 2.2s steps(1, end) infinite; }
.wxi-fog1, .wxi-fog2 { transform-box: fill-box; animation: wxiFog 3s ease-in-out infinite; }
.wxi-fog2 { animation-delay: .7s; }
@keyframes wxiSpin { to { transform: rotate(360deg); } }
@keyframes wxiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes wxiFloat { 0%, 100% { transform: translateX(-.6px); } 50% { transform: translateX(.6px); } }
@keyframes wxiDrop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes wxiFlake { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes wxiFlash { 0%, 48%, 60%, 100% { opacity: 1; } 52%, 56% { opacity: .15; } }
@keyframes wxiFog { 0%, 100% { transform: translateX(-1.5px); opacity: .6; } 50% { transform: translateX(1.5px); opacity: 1; } }
/* v5.542 : météo (wxi) TOUJOURS animée, même si le téléphone réduit les animations (Samsung « réduire les animations ») — demande Mika. */
/* Tuile Météo : icône SANS fond, MÊME boîte que les autres (donc centrée), dessin agrandi qui déborde */
/* MÉTÉO : icône VALIDÉE ensemble, NE PAS MODIFIER — fond transparent, le sujet flotte et déborde. */
.nav-app__ic[data-meteo-ic] { background: transparent; border: none; box-shadow: none; overflow: visible; }
.nav-app__ic[data-meteo-ic] .wxm { transform: scale(3.05); }
.app-tile__ic[data-meteo-ic] { background: transparent; overflow: visible; }
.app-tile__ic[data-meteo-ic] .wxm { transform: scale(1.18); }
/* Pilule température : FIXE (pas d'animation) + thermomètre intégré (barre rouge = température) + look soigné */
.nav-app__temp[data-meteo-temp], .app-tile__badge[data-meteo-temp] { animation: none !important; display: inline-flex; align-items: center; gap: 5px; padding: 4px 13px 4px 9px; border-radius: 999px; font-weight: 800; box-shadow: 0 2px 7px rgba(20, 40, 70, .22), inset 0 1px 0 rgba(255, 255, 255, .32); }
.nav-app__temp[data-meteo-temp] .wx-thermo { width: 19px; height: 19px; }
.wx-thermo { width: 14px; height: 14px; display: block; flex: 0 0 auto; }
.app-tile__badge[data-meteo-temp] .wx-thermo { width: 16px; height: 16px; }
/* Icône météo du MENU (jour/nuit, soleil qui respire, nuages en volume, pluie/neige, orage, brume, lune + étoiles) */
.wxm { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(40, 60, 90, .32)); }
/* v5.544 : scènes météo animées (wxm) dans la page météo ordinateur — dimensionnées comme les anciennes plates (1em, piloté par font-size) — demande Mika. */
.mto-cur__emo .wxm, .mto-day__e .wxm, .mto-lrow__e .wxm { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.wxm .wx-cl { transform-box: fill-box; transform-origin: center; animation: wxDriftA 4.5s ease-in-out infinite; }
.wxm .wx-cl2 { transform-box: fill-box; transform-origin: center; animation: wxDriftB 6s ease-in-out infinite; }
.wxm .wx-glow { transform-box: fill-box; transform-origin: center; animation: wxBreathe 3.2s ease-in-out infinite; }
.wxm .wx-disc { transform-box: fill-box; transform-origin: center; animation: wxPulseS 3.2s ease-in-out infinite; }
.wxm .wx-rad { transform-box: fill-box; transform-origin: center; animation: wxRadiate 3.6s ease-out infinite; }
.wxm .wx-drop { transform-box: fill-box; animation: wxFall 1.2s linear infinite; }
.wxm .wx-flake { transform-box: fill-box; animation: wxFall 2.6s linear infinite; }
.wxm .wx-fogb { animation: wxFogB 3.4s ease-in-out infinite; }
.wxm .wx-flash { transform-box: fill-box; transform-origin: center; animation: wxFlash 3s ease-in-out infinite; }
.wxm .wx-bolt { animation: wxStrikeA 3s ease-in-out infinite; }
.wxm .wx-bolt2 { animation: wxStrikeB 3s ease-in-out infinite; }
.wxm .wx-bolt .wx-bd { stroke-dasharray: 100; animation: wxDrawA 3s linear infinite; }
.wxm .wx-bolt2 .wx-bd { stroke-dasharray: 100; animation: wxDrawB 3s linear infinite; }
/* v5.26x : NUAGE 3D (moule validé par Mika) — pluie/neige aléatoires + orage (éclairage interne,
   lueur baladeuse, éclair-halo qui surgit de derrière). Chaque goutte/flocon a sa durée/délai/opacité
   (--op) inline ; l'orage est calé sur un cycle commun de 3.2s. */
.wxm .wx-c3drop { transform-box: fill-box; animation: wxRainFall 1.5s cubic-bezier(.5, 0, .75, .4) infinite; }
.wxm .wx-c3flake { transform-box: fill-box; animation: wxSnowFall 3s ease-in-out infinite; }
.wxm .wx-c3ice { transform-box: fill-box; transform-origin: center; animation: wxIceTw 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wxIceTw { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.wxm .wx-c3lit { animation: wxCloudLit 3.2s ease-in-out infinite; }
.wxm .wx-c3w { animation: wxCloudWander 3.2s ease-in-out infinite, wxCloudFlick 3.2s ease-in-out infinite; }
.wxm .wx-c3halo { animation: wxBoltHalo 3.2s ease-in-out infinite; }
.wxm .wx-c3bolt { animation: wxBoltOn 3.2s ease-in-out infinite; }
.wxm .wx-c3bolt .wx-c3bd { stroke-dasharray: 100; animation: wxBoltReveal 3.2s ease-in infinite; }
@keyframes wxRainFall { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: var(--op); } 80% { opacity: var(--op); } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes wxSnowFall { 0% { transform: translate(0, -4px); opacity: 0; } 22% { opacity: var(--op); } 30% { transform: translate(1.6px, 1px); } 55% { transform: translate(-1.4px, 5px); } 78% { transform: translate(1.2px, 9px); opacity: var(--op); } 100% { transform: translate(-1px, 13px); opacity: 0; } }
@keyframes wxCloudLit { 0%, 50% { opacity: 0; } 56% { opacity: 1; } 64% { opacity: .9; } 72% { opacity: .25; } 78%, 100% { opacity: 0; } }
@keyframes wxCloudWander { 0% { transform: translate(-24px, 5px); } 20% { transform: translate(10px, -6px); } 40% { transform: translate(28px, 7px); } 55% { transform: translate(2px, -3px); } 75% { transform: translate(-14px, 6px); } 100% { transform: translate(-24px, 5px); } }
@keyframes wxCloudFlick { 0%, 6% { opacity: 0; } 9% { opacity: .6; } 12% { opacity: .12; } 16% { opacity: .5; } 21% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: .55; } 37% { opacity: .1; } 41% { opacity: .42; } 47% { opacity: 0; } 54% { opacity: .3; } 58% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wxBoltReveal { 0%, 60% { stroke-dashoffset: 100; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes wxBoltOn { 0%, 59% { opacity: 0; } 61% { opacity: 1; } 80% { opacity: 1; } 86% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wxBoltHalo { 0%, 61% { opacity: 0; } 67% { opacity: .9; } 71% { opacity: .55; } 75% { opacity: .85; } 84% { opacity: 0; } 100% { opacity: 0; } }
/* Nuageux « couvert » : 3 nuages qui dérivent (mouvements aléatoires, non synchronisés). */
.wxm .wx-c3dA { animation: wxCldA 5.1s ease-in-out infinite; }
.wxm .wx-c3dB { animation: wxCldB 6.7s ease-in-out infinite -2s; }
.wxm .wx-c3dC { animation: wxCldC 5.9s ease-in-out infinite -3.5s; }
/* v5.326 : nuage qui PASSE DEVANT le soleil (le masque puis le découvre) — peu nuageux / éclaircies. */
.wxm .wx-c3pass { transform-box: fill-box; animation: wxCloudPass 26s ease-in-out infinite; }
.wxm .wx-c3pass2 { transform-box: fill-box; animation: wxCloudPass2 30s ease-in-out infinite; }
@keyframes wxCloudPass { 0% { transform: translateX(14px); } 50% { transform: translateX(-14px); } 100% { transform: translateX(14px); } }
@keyframes wxCloudPass2 { 0% { transform: translateX(8px); } 50% { transform: translateX(-7px); } 100% { transform: translateX(8px); } }
@keyframes wxCldA { 0% { transform: translate(-1.2px, 0); } 25% { transform: translate(.8px, -.4px); } 55% { transform: translate(1.7px, .3px); } 80% { transform: translate(-.3px, -.2px); } 100% { transform: translate(-1.2px, 0); } }
@keyframes wxCldB { 0% { transform: translate(1.8px, .2px); } 30% { transform: translate(-1px, -.5px); } 60% { transform: translate(-2.3px, .4px); } 85% { transform: translate(.6px, -.1px); } 100% { transform: translate(1.8px, .2px); } }
@keyframes wxCldC { 0% { transform: translate(-1.5px, -.3px); } 20% { transform: translate(.6px, .4px); } 50% { transform: translate(1.3px, -.4px); } 75% { transform: translate(-.9px, .25px); } 100% { transform: translate(-1.5px, -.3px); } }
/* Brouillard : soleil/lune voilé qui respire + nappe cotonneuse (2 couches) qui respire et dérive. */
.wxm .wx-fgsv { transform-box: fill-box; transform-origin: center; animation: wxFgSv 5.2s ease-in-out infinite; }
.wxm .wx-fgn1 { transform-box: fill-box; transform-origin: center; animation: wxFgNap1 6s ease-in-out infinite; }
.wxm .wx-fgn2 { transform-box: fill-box; transform-origin: center; animation: wxFgNap2 7s ease-in-out infinite; }
@keyframes wxFgSv { 0%, 100% { opacity: .45; transform: scale(.98); } 50% { opacity: .72; transform: scale(1.03); } }
@keyframes wxFgNap1 { 0% { transform: translate(-3px, .3px) scale(1); opacity: .72; } 50% { transform: translate(3.5px, -.3px) scale(1.06); opacity: .96; } 100% { transform: translate(-3px, .3px) scale(1); opacity: .72; } }
@keyframes wxFgNap2 { 0% { transform: translate(3px, 0) scale(1.04); opacity: .9; } 50% { transform: translate(-3.5px, .4px) scale(1); opacity: .6; } 100% { transform: translate(3px, 0) scale(1.04); opacity: .9; } }
.wx-star { transform-box: fill-box; transform-origin: center; animation: wxStar 2.4s ease-in-out infinite; }
@keyframes wxStar { 0%, 100% { opacity: .25; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
/* v5.259.0 : SOLEIL — halo global + voile scintillant + disque qui respirent (chacun autour de son centre). */
.wx-sh0 { transform-box: fill-box; transform-origin: center; animation: wxSh0 6s ease-in-out infinite; }
.wx-sh2 { transform-box: fill-box; transform-origin: center; animation: wxSh2 6.5s ease-in-out infinite; }
.wx-sbr { transform-box: fill-box; transform-origin: center; animation: wxSbr 5.5s ease-in-out infinite; }
@keyframes wxSh0 { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes wxSh2 { 0%, 100% { opacity: .9; transform: scale(1.04); } 50% { opacity: .6; transform: scale(1); } }
@keyframes wxSbr { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
/* v5.542 : scènes météo (soleil) toujours animées — demande Mika. */
/* v5.252.0 : étoiles en points-halo — respiration douce et présente (durée pilotée par étoile en inline). */
.wx-stp { animation: wxStp 4.5s ease-in-out infinite; }
@keyframes wxStp { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
/* v5.542 : (wx-stp) toujours animé — demande Mika. */
@keyframes wxDriftA { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2.5px); } }
@keyframes wxDriftB { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(-3px); } }
@keyframes wxBreathe { 0%, 100% { opacity: .45; transform: scale(.88); } 50% { opacity: .95; transform: scale(1.14); } }
@keyframes wxPulseS { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wxRadiate { 0% { transform: scale(.85); opacity: .5; } 70% { opacity: 0; } 100% { transform: scale(1.95); opacity: 0; } }
@keyframes wxFall { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } }
@keyframes wxFogB { 0%, 100% { transform: translateX(-4px); opacity: .5; } 50% { transform: translateX(4px); opacity: .95; } }
@keyframes wxFlash { 0%, 27% { opacity: 0; transform: scale(.5); } 31% { opacity: .95; transform: scale(1.05); } 42% { opacity: 0; transform: scale(1.2); } 60% { opacity: 0; transform: scale(.5); } 64% { opacity: .85; transform: scale(1.05); } 77% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; } }
@keyframes wxStrikeA { 0%, 27% { opacity: 0; } 30% { opacity: 1; } 34% { opacity: .25; } 38% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wxStrikeB { 0%, 60% { opacity: 0; } 63% { opacity: 1; } 67% { opacity: .25; } 71% { opacity: 1; } 81% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wxDrawA { 0%, 27% { stroke-dashoffset: 100; } 31% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes wxDrawB { 0%, 60% { stroke-dashoffset: 100; } 64% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
/* v5.542 : scènes météo « hero » (wxm) TOUJOURS animées, même en mode « réduire les animations » — demande Mika (Fold déplié). */
.mto-aqg { width: 100%; height: auto; display: block; }
/* Tous les émojis de la météo en mouvement (doux) */
@keyframes mtoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes mtoSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes mtoPulse2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.mto-ico { display: inline-block; animation: mtoBob 3s ease-in-out infinite; }
.mto-hero__emo, .mto-bigemo, .mto-fc__emo { display: inline-block; animation: mtoBob 3.2s ease-in-out infinite; }
.mto-pollen__ic { display: inline-block; transform-origin: bottom center; animation: mtoSway 3.4s ease-in-out infinite; }
.mto-alert__ic { display: inline-block; animation: mtoPulse2 2.2s ease-in-out infinite; }
.mto-pollen:nth-child(2n) .mto-pollen__ic { animation-delay: .5s; }
.mto-pollen:nth-child(3n) .mto-pollen__ic { animation-delay: .9s; }
.mto-nm:nth-child(2n) .mto-ico, .mto-fc__d:nth-child(2n) .mto-fc__emo { animation-delay: .4s; }
.mto-nm:nth-child(3n) .mto-ico { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .mto-ico, .mto-hero__emo, .mto-bigemo, .mto-fc__emo, .mto-pollen__ic, .mto-alert__ic { animation: none !important; } }
/* Icônes SVG (remplacent les émojis) : c'est le SVG qui s'anime → on neutralise l'anim des conteneurs */
.mto-ico, .mto-pollen__ic, .mto-hero__emo, .mto-bigemo, .mto-fc__emo, .mto-alert__ic { animation: none; }
.uic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; overflow: visible; }
.uic-pulse { animation: wxiPulse 2.6s ease-in-out infinite; transform-origin: center; }
.uic-bob2 { animation: mtoBob 3s ease-in-out infinite; }
.uic-sway2 { animation: mtoSway 3.4s ease-in-out infinite; transform-origin: bottom center; }
.uic-spin { animation: wxiSpin 14s linear infinite; transform-origin: center; }
.uic-wind { animation: uicWind 2.6s ease-in-out infinite; }
@keyframes uicWind { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
/* v5.542 : icônes du moteur d'icônes (.uic — ex. tuile « Prochains rappels ») TOUJOURS animées, même en mode « réduire les animations » — demande Mika. */

/* ============================================================
   ICÔNES GLOBALES (icones.js) — toutes animées, cohérentes
   ============================================================ */
.emi-wrap { display: inline; }
.emi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; overflow: visible; }
.emi--raw { display: inline-block; }
.emi-pop { animation: emiPop 2.4s ease-in-out infinite; transform-origin: center; }
.emi-pulse { animation: emiPulse 2.6s ease-in-out infinite; transform-origin: center; }
.emi-bob { animation: emiBob 2.8s ease-in-out infinite; }
.emi-float { animation: emiFloat 3.4s ease-in-out infinite; }
.emi-spin { animation: emiSpin 9s linear infinite; transform-origin: center; }
.emi-swing { animation: emiSwing 2.6s ease-in-out infinite; transform-origin: 50% 12%; }
.emi-shake { animation: emiShake 2.4s ease-in-out infinite; transform-origin: center; }
.emi-flash { animation: emiFlash 1.1s ease-in-out infinite; transform-origin: center; }
.emi-slide { animation: emiSlide 2s ease-in-out infinite; }
.emi-fly { animation: emiFly 3s ease-in-out infinite; }
.emi-fly-down { animation: emiFlyDown 2.4s ease-in-out infinite; }
.emi-fly-up { animation: emiFlyUp 2.4s ease-in-out infinite; }
.emi-glow { animation: emiGlow 2.2s ease-in-out infinite; transform-origin: center; }
.emi-search { animation: emiSearch 2.6s ease-in-out infinite; }
.emi-write { animation: emiWrite 1.8s ease-in-out infinite; transform-origin: bottom left; }
.emi-key { animation: emiKey 2.6s ease-in-out infinite; transform-origin: center; }
.emi-shine { animation: emiShine 2.4s ease-in-out infinite; transform-origin: center; }
.emi-twinkle { animation: emiTwinkle 2.6s ease-in-out infinite; transform-origin: center; }
.emi-beat { animation: emiBeat 1.8s ease-in-out infinite; transform-origin: center; }
.emi-wave { animation: emiWave 2.4s ease-in-out infinite; transform-origin: left center; }
.emi-wavehand { animation: emiWaveHand 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.emi-run { animation: emiRun 0.8s ease-in-out infinite; }
.emi-walk { animation: emiWalk 1.1s ease-in-out infinite; }
.emi-bug { animation: emiBug 1.6s ease-in-out infinite; }
.emi-steam { animation: emiBob 3s ease-in-out infinite; }
.emi-flicker { animation: emiFlicker 0.9s ease-in-out infinite; transform-origin: bottom center; }
.emi-rain { animation: emiBob 4s ease-in-out infinite; }
.emi-wind { animation: emiWind 2.6s ease-in-out infinite; }
.emi-sway { animation: emiSway 3.2s ease-in-out infinite; transform-origin: bottom center; }
.emi-dashmove { animation: emiSlide 1.4s ease-in-out infinite; }
.emi-compass { animation: emiBob 3.4s ease-in-out infinite; }
.emi-clock { animation: none; }
.emi-bar { transform-box: view-box; transform-origin: 12px 20.5px; animation: emiBars 2.4s ease-in-out infinite; }
.emi-bar:nth-of-type(2) { animation-delay: .2s; }
.emi-bar:nth-of-type(3) { animation-delay: .4s; }
.emi-hand-m { transform-box: view-box; transform-origin: 12px 12px; animation: emiSpin 3s linear infinite; }
.emi-hand-h { transform-box: view-box; transform-origin: 12px 12px; animation: emiSpin 36s linear infinite; }
.emi-needle { transform-box: view-box; transform-origin: 12px 12px; animation: emiNeedle 3.4s ease-in-out infinite; }
.emi-drops { transform-box: view-box; transform-origin: center; animation: emiDrops 1.1s ease-in infinite; }
.emi-steamline { transform-box: view-box; animation: emiSteam 2s ease-out infinite; }
.emi-dash { stroke-dasharray: 34; animation: emiDraw 3s ease-in-out infinite; }

@keyframes emiPop { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(0.96); } 42% { transform: scale(1.05); } 56% { transform: scale(1); } }
@keyframes emiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
@keyframes emiBob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@keyframes emiFloat { 0%, 100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
@keyframes emiSpin { to { transform: rotate(360deg); } }
@keyframes emiSwing { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes emiShake { 0%, 92%, 100% { transform: translateX(0) rotate(0); } 94% { transform: translateX(-1.4px) rotate(-4deg); } 96% { transform: translateX(1.4px) rotate(4deg); } 98% { transform: translateX(-1px) rotate(-2deg); } }
@keyframes emiFlash { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.08); } }
@keyframes emiSlide { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(2px); } }
@keyframes emiFly { 0%, 100% { transform: translate(-1px, 1px) rotate(-3deg); } 50% { transform: translate(2px, -2px) rotate(3deg); } }
@keyframes emiFlyDown { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }
@keyframes emiFlyUp { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-1.5px); } }
@keyframes emiGlow { 0%, 100% { opacity: .82; filter: drop-shadow(0 0 0 rgba(243,192,22,0)); } 50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(243,192,22,.7)); } }
@keyframes emiSearch { 0%, 100% { transform: translate(-1px, -1px); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(1.5px, 1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes emiWrite { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(1px, -.5px) rotate(-4deg); } 50% { transform: translate(-1px, .5px) rotate(3deg); } 75% { transform: translate(1px, 0) rotate(-2deg); } }
@keyframes emiKey { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes emiShine { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.25); } }
@keyframes emiTwinkle { 0%, 100% { transform: scale(.92) rotate(-6deg); opacity: .85; } 50% { transform: scale(1.12) rotate(6deg); opacity: 1; } }
@keyframes emiBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } }
@keyframes emiWave { 0%, 100% { transform: skewX(0) skewY(0); } 25% { transform: skewX(-6deg) skewY(2deg); } 50% { transform: skewX(0) skewY(0); } 75% { transform: skewX(6deg) skewY(-2deg); } }
@keyframes emiWaveHand { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes emiRun { 0%, 100% { transform: translateX(-1px) rotate(-2deg); } 50% { transform: translateX(1.5px) rotate(2deg); } }
@keyframes emiWalk { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
@keyframes emiBug { 0%, 100% { transform: translate(-1px, 0) rotate(-3deg); } 25% { transform: translate(0, -1px) rotate(2deg); } 50% { transform: translate(1.5px, 0) rotate(3deg); } 75% { transform: translate(0, -1px) rotate(-2deg); } }
@keyframes emiFlicker { 0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; } 30% { transform: scaleY(1.1) scaleX(.94); opacity: .85; } 60% { transform: scaleY(.94) scaleX(1.04); opacity: 1; } }
@keyframes emiWind { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.6px); } }
@keyframes emiSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes emiBars { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes emiNeedle { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes emiDrops { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes emiSteam { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-3px); opacity: 0; } }
@keyframes emiDraw { 0% { stroke-dashoffset: 34; } 55%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .emi, .emi--raw, .emi-bar, .emi-hand-h, .emi-hand-m, .emi-needle, .emi-drops, .emi-steamline, .emi-dash { animation: none !important; } }
/* Tuile-calendrier « Planning » (date du jour) : même flottement doux que les icônes */
.cal-ic { animation: emiBob 2.8s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .cal-ic { animation: none !important; } }

/* Badges animés (température, compteurs de notifications, badge « live ») */
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
@keyframes notifPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(0deg); } }
@keyframes notifPing { 0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 0 var(--ping, rgba(32,191,115,.55)); } 70%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 7px rgba(32,191,115,0); } }
.app-tile__badge, .nav-app__temp, .bf-dirbadge, .trajet-badge, .acc-wc-badge { animation: badgePulse 2.6s ease-in-out infinite; transform-origin: center; }
.notif-badge, .todo-badge, .acc-wcm__badge.is-live { animation: notifPulse 1.5s ease-in-out infinite, notifPing 1.8s ease-out infinite; transform-origin: center; }
.notif-badge.is-error { --ping: rgba(224,54,78,.55); }
/* Le badge ne « rebondit » plus : seul son halo (ping) respire, dans la couleur du badge */
.notif-badge, .todo-badge { animation: notifPing 1.8s ease-out infinite; }
.notif-badge { --ping: rgba(232,50,78,.6); }
.todo-badge { --ping: rgba(243,167,18,.6); }
.notif-badge.badge-ok { --ping: rgba(32,191,115,.6); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .app-tile__badge, .nav-app__temp, .bf-dirbadge, .trajet-badge, .acc-wc-badge, .notif-badge, .todo-badge, .acc-wcm__badge.is-live { animation: none !important; } }

/* Cadenas animé (en-têtes de jour + dimanche) : l'anse s'ouvre, tremble (« souffre ») puis se referme */
.cad-anse { transform-box: view-box; transform-origin: 17px 11px; animation: cadOuvreFerme 3s ease-in-out infinite; }
@keyframes cadOuvreFerme {
  0%, 14% { transform: rotate(0deg); }
  30% { transform: rotate(-36deg); }
  40% { transform: rotate(-27deg); }
  50% { transform: rotate(-36deg); }
  60% { transform: rotate(-29deg); }
  70% { transform: rotate(-36deg); }
  86%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .cad-anse { animation: none !important; } }

/* Apparition animée des graphiques du Briefing (rejoué à chaque rendu) */
.bf-pie, .bf2-pie-svg { animation: bfPieIn .9s cubic-bezier(.22,.9,.3,1) both; transform-origin: 50% 50%; }
.bf2-ring { animation: bfRingIn .8s cubic-bezier(.22,.9,.3,1) both; transform-origin: 50% 50%; }
.bf2-spark__svg { animation: bfWipe 1.05s ease-out both; }
.bf-pie-wrap, .bf2-spark__wrap, .bf2-card { animation: bfCardIn .55s ease-out both; }
@keyframes bfPieIn { 0% { opacity: 0; transform: rotate(-110deg) scale(.55); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes bfRingIn { 0% { opacity: 0; transform: scale(.55) rotate(-35deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes bfWipe { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes bfCardIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .bf-pie, .bf2-pie-svg, .bf2-ring, .bf2-spark__svg, .bf-pie-wrap, .bf2-spark__wrap, .bf2-card { animation: none !important; } }

/* Boîte de dialogue d'impression */
.impr__modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.impr-mode { display: block; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px 10px 36px; position: relative; cursor: pointer; transition: border-color .12s, background .12s; }
.impr-mode input { position: absolute; left: 12px; top: 13px; }
.impr-mode.is-on { border-color: var(--primary); background: var(--primary-soft); }
.impr-mode__t { display: block; font-weight: 700; font-size: 13.5px; color: var(--text-1); }
.impr-mode__d { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.impr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.impr__grid .field { margin: 0; }
.impr__estim { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.impr__estim b { color: var(--text-1); }
.mto-slider { flex: 1; accent-color: var(--primary); }
.mto-frame__t { font-weight: 800; font-size: 14px; color: var(--text); min-width: 54px; text-align: right; }
.leaflet-container { font: inherit; }
/* Météo — menu Mensuel */
.mto-monthtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; }
.mto-mtab { flex: 0 0 auto; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.mto-mtab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.mto-calhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; padding: 0 4px; color: var(--text-3); font-weight: 700; font-size: 12px; }
.mto-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mto-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; min-height: 78px; }
.mto-cell--empty { background: transparent; border: 0; }
.mto-cell.is-today { border: 2px solid var(--primary); }
.mto-cell__n { font-size: 12px; color: var(--text-3); font-weight: 700; }
.mto-cell__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.mto-cell__e { font-size: 26px; line-height: 1; }
.mto-cell__t { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.mto-cell__t b { font-size: 15px; font-weight: 800; color: var(--text); }
.mto-cell__t span { font-size: 12px; color: var(--text-3); }
.mto-cell__na { color: var(--text-3); }
/* Météo — menu Tendances */
.mto-tendsvg { width: 100%; height: auto; display: block; }
.mto-tendleg { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.mto-leg { display: inline-flex; align-items: center; gap: 6px; }
.mto-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ===================== Briefing — dashboard (notre thème) ===================== */
.bf-banner { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--primary), #8a7bff); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .5px; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.bf-banner__d { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .92; }
.bf-band--head { background: var(--primary-soft); color: var(--primary-dark); }
.bf-kpitable th.bf-grp { text-align: center; background: var(--surface-2); font-weight: 800; font-size: 12.5px; color: var(--text); }
.bf-kpitable th.bf-sub { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--surface-2); }
.bf-kpitable th.bf-sub--alt { color: var(--text-3); opacity: .75; }
.bf-in.bf-pos { color: #1a7f37; font-weight: 700; }
.bf-in.bf-neg { color: var(--danger, #e0364f); font-weight: 700; }
.bf-in.bf-amber { color: #c47a16; font-weight: 700; }
.bf-raydot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.bf-row2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.bf-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bf-pie-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px 6px; }
.bf-pie { width: 180px; height: 180px; flex: 0 0 auto; }
.bf-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.bf-leg { display: inline-flex; align-items: center; gap: 7px; }
.bf-leg i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.bf-leg b { color: var(--text); }
.bf-ex { font-size: 11px; font-weight: 600; opacity: .85; }
@media (max-width: 760px) { .bf-row2 { grid-template-columns: 1fr; } }

/* ===================== Briefing v2 — dashboard « magnifique » ===================== */
.bf2 { display: flex; flex-direction: column; gap: 16px; }
.bf2-demo { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--surface)); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.bf2-stale { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 16px; background: linear-gradient(135deg, #fff1f1, #ffe1e1); border: 2px solid #ffb0b0; box-shadow: 0 8px 22px rgba(220, 38, 38, .16); }
.bf2-stale__ic { font-size: 36px; line-height: 1; flex: 0 0 auto; animation: staledPulse 1.6s ease-in-out infinite; }
@keyframes staledPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.bf2-stale__t1 { font-size: 19px; font-weight: 800; color: #b3261e; letter-spacing: .2px; }
.bf2-stale__t2 { font-size: 14px; color: #7a1c16; margin-top: 4px; line-height: 1.45; }
.bf2-stale b { color: #8a1410; font-weight: 800; }
.bf2-ajust { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 14px; background: linear-gradient(135deg, #fff7e6, #ffeecb); border: 2px solid #f3cd7a; box-shadow: 0 6px 18px rgba(181, 116, 12, .14); }
.bf2-ajust__ic { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.bf2-ajust__t1 { font-size: 16px; font-weight: 800; color: #9a6510; }
.bf2-ajust__t2 { font-size: 13px; color: #7a5310; margin-top: 3px; }
.bf2-ajust b { color: #6b4708; font-weight: 800; }
.bf2-hero { display: flex; flex-direction: column; gap: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface) 78%); color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 18px; padding: 0; box-shadow: var(--shadow-sm); overflow: hidden; }
.bf2-hero__hdr { font-size: 13px; font-weight: 800; color: var(--text-2); padding: 12px 20px 11px; border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)); display: flex; align-items: center; gap: 6px; }
.bf2-hero__body { display: flex; align-items: center; gap: 24px; padding: 18px 28px 22px; flex: 1; }
.bf2-hero__l { flex: 1; min-width: 0; }
.bf2-hero__lbl { font-size: 28px; font-weight: 800; opacity: 1; letter-spacing: -.5px; line-height: 1.2; }
.bf2-hero__ca { font-size: 48px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.04; margin: 0 0 4px; color: var(--primary-dark); }
.bf2-hero__cap { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.bf2-hero__sub { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 12px; }
.bf2-hero__prog { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.bf2-hero__prog.bf2-pos { color: #1aa653; }
.bf2-hero__prog.bf2-neg { color: #e0364f; }
.bf2-chip { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; }
.bf2-chip--pos { background: rgba(46, 200, 120, .35); } .bf2-chip--neg { background: rgba(255, 95, 115, .38); }
.bf2-hero__r { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.bf2-ring { width: 164px; height: 164px; }
.bf2-ring__v { font-size: 26px; font-weight: 800; }
.bf2-ring__cap { font-size: 12px; color: var(--text-3); }
.bf2-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
.bf2-top .bf2-hero { margin: 0; }
.bf2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bf2-kpi { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; box-shadow: var(--shadow-sm); }
.bf2-kpi__top { display: flex; align-items: center; gap: 10px; }
.bf2-kpi__ic { width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 14px; background: var(--primary-soft); }
.bf2-kpi__v { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.5px; line-height: 1.1; display: flex; align-items: center; }
.bf2-kpi__win { display: inline-flex; margin-left: 6px; font-size: 12px; color: #1aa653; font-weight: 800; }
.bf2-kpi__l { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
/* Carte Objectif du jour */
.bf2-obj__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bf2-obj__big { display: flex; align-items: baseline; gap: 8px; }
.bf2-obj__v { font-size: 30px; font-weight: 800; color: var(--primary-dark); letter-spacing: -1px; }
.bf2-obj__cap { font-size: 12px; color: var(--text-3); font-weight: 600; }
.bf2-obj__bar { height: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.bf2-obj__fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, transparent 0%, rgba(108,92,231,.28) 20%, var(--primary) 72%, #a080ff 100%); }
.bf2-obj__fill.is-ok { background: linear-gradient(90deg, transparent 0%, rgba(27,174,90,.28) 20%, #1fae5a 72%, #2fd47a 100%); }
.bf2-obj__line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.bf2-obj__reste { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 700; }
.bf2-obj__reste b { font-size: 17px; color: var(--primary-dark); }
.bf2-ranks { display: flex; gap: 10px; }
.bf2-rank { flex: 1; text-align: center; background: var(--primary-soft-2); border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--surface)); border-radius: 10px; padding: 9px 6px; }
.bf2-rank__v { font-size: 22px; font-weight: 800; color: var(--primary-dark); line-height: 1; }
.bf2-rank__v small { font-size: 12px; }
.bf2-rank__l { font-size: 10.5px; color: var(--text-3); font-weight: 600; margin-top: 3px; }
/* Sparkline 7 jours */
.bf2-chip2 { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.bf2-spark__wrap { padding: 4px 0 2px; }
.bf2-spark__svg { width: 100%; height: auto; max-height: 260px; display: block; }
.bf2-spark__d { fill: var(--text-3); font-size: 11px; font-weight: 600; }
.bf2-spark__val { fill: var(--text-2); font-size: 11px; font-weight: 700; }
.bf2-spark__val.is-last { fill: var(--primary-dark); font-size: 13px; }
/* Comparatif périodes : Provins (foncé) vs Champagne (violet) */
.bf2-cmp-leg { margin-left: auto; display: flex; gap: 14px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.bf2-cmp-leg__i { display: flex; align-items: center; gap: 5px; }
.bf2-dotp { width: 9px; height: 9px; border-radius: 3px; background: var(--text-2); display: inline-block; }
.bf2-dotc { width: 9px; height: 9px; border-radius: 3px; background: var(--primary); display: inline-block; }
.bf2-cmp-card { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
.bf2-cmp-table { width: 100%; }
.bf2-cmp-table td { padding: 9px 16px; }
.bf2-cmp__p { display: block; font-weight: 800; font-size: 14px; color: var(--text); letter-spacing: -.2px; }
.bf2-cmp__c { display: block; font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 2px; }
/* Tuile KPI : comparatif région */
.bf2-kpi__reg { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--primary); margin-top: 3px; }
.bf2-autosep { margin: 14px 0 4px; font-size: 12px; font-weight: 800; color: var(--text-2); }
.bf2-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.bf2-card__h { font-size: 14px; font-weight: 800; padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.bf2-card__sub { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-3); }
.bf2-champ { color: #8854d0; }
.bf2-scroll { overflow-x: auto; }
.bf2-table { width: 100%; border-collapse: collapse; }
.bf2-table th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); padding: 10px 12px; text-align: center; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.bf2-table th.bf2-th-ind { text-align: left; }
.bf2-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.bf2-table tbody tr:last-child td { border-bottom: 0; }
.bf2-table tbody tr:hover { background: var(--surface-2); }
.bf2-ind { text-align: left !important; font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.bf2-pv { font-weight: 700; font-size: 14px; color: var(--text); }
.bf2-pc { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.bf2-pos { color: #1a7f37 !important; } .bf2-neg { color: var(--danger, #e0364f) !important; } .bf2-amber { color: #c47a16 !important; }
.bf2-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.bf2-row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf2-rays { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.bf2-ray { display: grid; grid-template-columns: 124px 1fr 78px 62px 38px; align-items: center; gap: 12px; font-size: 13px; }
.bf2-ray__nom { font-weight: 700; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bf2-ray__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.bf2-ray__track { height: 9px; background: var(--surface-2); border-radius: 6px; overflow: visible; position: relative; }
.bf2-ray__bar { display: block; height: 100%; border-radius: 6px; min-width: 3px; position: relative; }
.bf2-ray__bar::after { content: ''; position: absolute; right: -1px; top: -4px; width: 13px; height: calc(100% + 8px); border-radius: 50%; background: var(--bc, #999); filter: blur(6px); opacity: 0.5; pointer-events: none; }
.bf2-ray__ca { text-align: right; font-weight: 800; color: var(--text); }
.bf2-ray__prog { text-align: right; font-weight: 700; }
.bf2-ray__clss { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: 6px; padding: 2px 4px; }
.bf2-pie-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 18px; }
.bf2-pie { width: 180px; height: 180px; flex: 0 0 auto; }
.bf2-pielg { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-2); flex: 1; min-width: 120px; }
.bf2-leg { display: flex; align-items: center; gap: 8px; }
.bf2-leg i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.bf2-leg b { margin-left: auto; color: var(--text); }
.bf2-sats { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.bf2-sat__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.bf2-sat__v small { color: var(--text-3); font-weight: 600; }
.bf2-sat__track { position: relative; height: 10px; background: var(--surface-2); border-radius: 6px; }
.bf2-sat__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; background: var(--primary); }
.bf2-sat__fill.is-ok { background: #2bbf6a; }
.bf2-sat__obj { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--text-2); border-radius: 1px; }
.bf2-orga { display: flex; gap: 14px; padding: 16px 18px 8px; }
.bf2-orgakpi { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.bf2-orgakpi__v { font-size: 23px; font-weight: 800; color: var(--primary-dark); letter-spacing: -.5px; }
.bf2-orgakpi__l { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.bf2-ta { display: block; width: calc(100% - 36px); margin: 8px 18px 0; min-height: 110px; resize: vertical; }
.bf2-ta:last-child { margin-bottom: 16px; }
.bf2-import { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 2px 16px; box-shadow: var(--shadow-sm); }
.bf2-import > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--text-2); padding: 12px 2px; }
.bf2-import__body { padding-bottom: 12px; }
@media (max-width: 920px) { .bf2-top { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .bf2-row, .bf2-row3 { grid-template-columns: 1fr; } .bf2-hero__body { flex-direction: column; align-items: flex-start; } .bf2-hero__ca { font-size: 40px; } }
.bf2-autobox { padding: 2px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.bf2-autobox__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Sélecteur date briefing */
.bf-datebar { display: flex; align-items: center; gap: 10px; }
.bf-datnav { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px 6px; }
.bf-datnav__arr { padding: 4px 10px !important; font-size: 12px !important; min-width: 0 !important; }
.bf-datnav__lbl { font-weight: 700; font-size: 14px; min-width: 88px; text-align: center; color: var(--text); }
.bf-datnav__cal { cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 5px; position: relative; border-radius: 6px; }
.bf-datnav__cal:hover { background: var(--surface); }
/* Daybar — en-tête briefing quotidien */
.bf2-daybar { position: relative; display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface) 78%); color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 16px; padding: 16px 24px; box-shadow: var(--shadow-sm); overflow: hidden; }
.bf2-daybar::after { content: ""; position: absolute; right: -30px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%); pointer-events: none; }
.bf2-daybar__ico { font-size: 28px; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 38%, transparent); }
.bf2-daybar__title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.bf2-daybar__date { font-size: 13px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
/* Comparatif périodes — cellules redessinées */
.bf2-cmptd { vertical-align: top; padding: 9px 14px; }
.bf2-cmptd__mag { font-weight: 800; font-size: 14.5px; color: var(--text); letter-spacing: -.2px; display: flex; align-items: center; gap: 5px; }
.bf2-cmptd__win { color: #1aa653; font-size: 11px; font-weight: 800; }
.bf2-cmptd__lose { color: #e03050; font-size: 11px; font-weight: 800; }
.bf2-cmptd__reg { font-size: 11.5px; font-weight: 700; color: var(--primary); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.bf2-th-per { text-align: center; white-space: nowrap; }

/* Comparatif périodes — redesign en cards */
.bf2-per-wrap { width: 100%; }
.bf2-per-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 18px; }
.bf2-per-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.bf2-per__head { display: flex; justify-content: space-between; align-items: center; }
.bf2-per__plab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); }
.bf2-per__date { font-size: 11px; color: var(--text-3); font-weight: 600; }
.bf2-per__ca { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.3px; line-height: 1.1; }
.bf2-per__reg-ca { font-size: 11.5px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 5px; }
.bf2-per__prog { font-size: 12px; font-weight: 700; color: var(--text-2); }
.bf2-per__bud { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bf2-per__budval { font-size: 14px; font-weight: 800; }
.bf2-per__budlbl { font-size: 11px; color: var(--text-3); font-weight: 600; }
.bf2-per__regval { font-size: 11px; color: var(--primary); font-weight: 700; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bf2-per__bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bf2-per__bar span { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.bf2-per__bar span.is-ok { background: #1aa653; }
.bf2-per__bar span.is-warn { background: #c47a16; }
.bf2-per__bar span.is-low { background: #e03050; }
.bf2-per__bar--comet { overflow: visible; }
.bf2-per__bar--comet span { position: relative; }
.bf2-per__bar--comet span::after { content: ''; position: absolute; right: -1px; top: -4px; width: 13px; height: calc(100% + 8px); border-radius: 50%; background: var(--bc, var(--primary)); filter: blur(6px); opacity: 0.55; pointer-events: none; }
.bf2-per__stats { display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid var(--border); padding-top: 8px; }
.bf2-per__stat { font-size: 11.5px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 3px; padding: 2px 7px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }
@media (max-width: 750px) { .bf2-per-grid { grid-template-columns: repeat(2, 1fr); } }

/* Chip neutre (CA moyen) */
.bf2-chip2.bf2-neu { background: rgba(255,255,255,.15); color: var(--text-2); }
.bf2-chip2.bf2-pos { background: rgba(26,166,83,.2); color: #1aa653; border-color: rgba(26,166,83,.3); }
.bf2-chip2.bf2-neg { background: rgba(224,48,80,.18); color: #e03050; border-color: rgba(224,48,80,.28); }
.bf2-spark__avglab { fill: rgba(255,255,255,.5); font-size: 10px; font-weight: 700; }
.bf2-spark__empty { padding: 32px 20px; text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; }
/* Boutons d'action topbar briefing */
.tool-icon.bf-act { width: 32px; height: 32px; flex: 0 0 32px; }
/* Statuts dossier/fichier dans la sidebar */
.bf-statrow { display: flex; align-items: center; gap: 10px; padding: 4px 12px; margin-top: 2px; }
.bf-stat-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); }
.bf-stat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 8px; transition: background 0.3s; }
.bf-stat-dot--ok { background: #1aa653; box-shadow: 0 0 5px #1aa65388; }
.bf-stat-dot--off { background: var(--text-3); }
/* « Respiration » des pastilles de statut : pulsation douce de la couleur/lueur */
@keyframes bfDotBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes bfDotBreatheOk { 0%, 100% { box-shadow: 0 0 4px #1aa65355; } 50% { box-shadow: 0 0 11px #1aa653; } }
@keyframes bfDotBreatheOff { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bf-stat-dot { animation: bfDotBreathe 2.6s ease-in-out infinite; }
.bf-stat-dot--ok { animation: bfDotBreathe 2.6s ease-in-out infinite, bfDotBreatheOk 2.6s ease-in-out infinite; }
.bf-stat-dot--off { animation: bfDotBreatheOff 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .bf-stat-dot { animation: none; } }
/* Bloc d'indicateurs replacé sous « Administrateur » dans la barre de gauche */
.sidebar__footer #hub-statwrap { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 3px; } /* v5.555 : compact */
/* Réglages / Gérer les apps : en bas de la colonne de gauche */
.sidebar__footer #hub-actions { display: flex; gap: 8px; justify-content: center; padding: 4px; border-top: 1px solid var(--border); margin-top: 3px; } /* v5.555 : compact */
/* Notifications + profil, en haut à droite du hub */
.topbar .sidebar__tools { display: flex; gap: 6px; align-items: center; border: 0; padding: 0; margin: 0 4px 0 0; background: transparent; }
/* Cluster haut-droite (notifications + identité + déconnexion), solidaire et poussé à droite, partout.
   nowrap : les espaceurs flexibles se compriment et le cluster reste sur la 1ʳᵉ ligne (Planning inclus). */
.topbar-host { flex-wrap: nowrap; min-width: 0; }
/* v5.235.0 « coque douce » : les icônes du haut sont réunies dans un panneau GIVRÉ arrondi (au lieu
   de flotter sur le fond) — translucide, léger flou, ombre douce, pour lire comme UN bloc d'outils. */
/* v5.319 : cluster TRANSPARENT et intégré partout (fini le pavé blanc). L'accueil (.hero-topline) le faisait déjà. */
.topbar-cluster { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 0; box-shadow: none; }
.topbar-cluster .topbar-user { background: color-mix(in srgb, var(--surface) 82%, transparent); }
/* Barres multi-lignes (ex. Planning) : rangée d'en-tête tout en haut — ☰ + titre à gauche, cluster à droite. */
.topbar-headrow { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; }
.topbar-headrow .topbar-cluster { margin-left: auto; }
.topbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; flex: 0 0 auto; }
.topbar-icon:hover { border-color: var(--primary); color: var(--primary); }
.topbar-icon:focus { outline: none; } /* pas de rectangle noir au clic souris */
.topbar-icon:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* anneau thème au clavier (accessibilité) */
.topbar-user:focus { outline: none; }
.topbar-user:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.topbar-icon svg { width: 18px; height: 18px; }
.topbar-icon__badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.topbar-icon--avatar { padding: 0; overflow: hidden; }
.topbar-avatar { width: 100%; height: 100%; border-radius: 8px; background-size: cover; background-position: center; }
/* Chip identité (avatar + nom + rôle) en haut à droite — halo bleu respirant */
@keyframes haloBleuLent { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,111,214,.10); } 50% { box-shadow: 0 0 0 3px rgba(47,111,214,.13), 0 0 7px 1px rgba(47,111,214,.32); } }
.topbar-user { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid rgba(47,111,214,.4); border-radius: 11px; padding: 4px 11px 4px 5px; cursor: pointer; flex: 0 0 auto; animation: haloBleuLent 5s ease-in-out infinite; }
.topbar-user:hover { border-color: #2f6fd6; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .topbar-user { animation: none; } }
.topbar-user__av { width: 28px; height: 28px; border-radius: 7px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); flex: 0 0 auto; }
.topbar-user__av svg { width: 17px; height: 17px; }
.topbar-user__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.topbar-user__nom { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.topbar-user__role { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
/* v5.233.0 : chip profil « A + couronne » — anneau ciel, pastille de présence, badge de rôle, chevron. */
.tu-avwrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.tu-ring { width: 34px; height: 34px; border-radius: 50%; padding: 2.5px; display: inline-flex; background: conic-gradient(from 210deg, #79c6f9, #5b8ff9, #8578f2, #79c6f9); }
.tu-ring .topbar-user__av { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); }
.tu-ring .topbar-avatar { border-radius: 50%; }
.tu-pres { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #3ecf8e; border: 2.5px solid var(--surface); box-shadow: 0 0 0 0 rgba(62,207,142,.5); animation: tuPres 2.4s ease-out infinite; }
@keyframes tuPres { 0% { box-shadow: 0 0 0 0 rgba(62,207,142,.5); } 70% { box-shadow: 0 0 0 6px rgba(62,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } }
.tu-role { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 1.5px 7px; color: #fff; white-space: nowrap; }
.tu-role--ger { background: linear-gradient(120deg, #f2b33d, #dd8a10); }
.tu-role--mgr { background: linear-gradient(120deg, #8578f2, #5b4bd6); }
.tu-role--emp { background: var(--surface-2); color: var(--text-2); }
.tu-crown { width: 9px; height: 9px; flex: 0 0 auto; }
/* v5.272 (choix Mika « B + séparateur ») : trait séparateur avant le chip + pastille de rôle sur l'avatar. */
.tu-sep { width: 1px; height: 22px; flex: 0 0 auto; align-self: center; background: color-mix(in srgb, var(--ckink, #334361) 22%, transparent); }
.tu-pin { position: absolute; left: -5px; top: -6px; display: inline-flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
.tu-pin--ger { left: -4px; bottom: -4px; top: auto; transform: none; color: #e9a83a; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)); }
.tu-pin--ger svg { width: 14px; height: 14px; display: block; }
.tu-pin--mgr { left: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: #7c6cf0; border: 2px solid var(--surface); }
/* v5.537 (choix Mika) : ordinateur = badge texte « Gérant » ; téléphone = étoile centrée sur la photo (façon couronne). */
.topbar-user .tu-role { margin-top: 0; font-size: 9.5px; }
body:not(.mob-hub) .tu-pin--ger { display: none; }
body.mob-hub .tu-role--ger { display: none; }
/* v5.273 (retour Mika) : avatar SANS anneau/contour + pastille de présence SANS contour blanc. */
.tu-ring { padding: 0; background: none !important; }
.tu-pres { border: none; }
.tu-chev { width: 14px; height: 14px; color: var(--text-3); flex: 0 0 auto; margin-left: 1px; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .tu-pres { animation: none; } }
/* Badge orange plein commun aux icônes « Salariés connectés » et « Rappels RH ». */
.js-connectes, .js-rappels { position: relative; }
.js-connectes .topbar-icon__badge, .js-rappels .topbar-icon__badge { top: -5px; right: -5px; background: #f59e0b; color: #fff; box-shadow: 0 0 0 2px var(--surface); font-weight: 800; }
.js-bloques .topbar-icon__badge { top: -5px; right: -5px; background: #e0364e; color: #fff; box-shadow: 0 0 0 2px var(--surface); font-weight: 800; } /* badge ROUGE : compte(s) bloqué(s) à débloquer */
/* Halo des icônes de notification : VERT si 0 (aucun badge) · ORANGE si > 0 — respiration LENTE et DISCRÈTE */
.notif-halo { position: relative; }
@keyframes haloVertLent { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,166,83,.08); } 50% { box-shadow: 0 0 0 3px rgba(26,166,83,.10), 0 0 5px 1px rgba(26,166,83,.22); } }
@keyframes haloOrangeLent { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.10); } 50% { box-shadow: 0 0 0 3px rgba(245,158,11,.12), 0 0 5px 1px rgba(245,158,11,.26); } }
.notif-halo--vert { animation: haloVertLent 5s ease-in-out infinite; border-color: rgba(26,166,83,.35) !important; }
.notif-halo--orange { animation: haloOrangeLent 5s ease-in-out infinite; border-color: rgba(245,158,11,.45) !important; }
@keyframes haloRougeLent { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,54,78,.12); } 50% { box-shadow: 0 0 0 3px rgba(224,54,78,.15), 0 0 7px 1px rgba(224,54,78,.38); } }
.notif-halo--rouge { animation: haloRougeLent 2.6s ease-in-out infinite; border-color: rgba(224,54,78,.5) !important; }
/* Halo ROSE : nouvel événement de sécurité (blocage / déblocage / code réinitialisé) à consulter. */
@keyframes haloRoseLent { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,.12); } 50% { box-shadow: 0 0 0 3px rgba(236,72,153,.16), 0 0 7px 1px rgba(236,72,153,.40); } }
.notif-halo--rose { animation: haloRoseLent 2.6s ease-in-out infinite; border-color: rgba(236,72,153,.5) !important; }
.js-secujournal .topbar-icon__badge { top: -5px; right: -5px; background: #ec4899; color: #fff; box-shadow: 0 0 0 2px var(--surface); font-weight: 800; } /* badge ROSE : événements de sécurité non lus */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .notif-halo--vert, .notif-halo--orange, .notif-halo--rouge, .notif-halo--rose { animation: none; } }
/* ===== Cluster (v5.267) : état ACTIF = les TRAITS de l'icône prennent la couleur DÉCIDÉE de la notif
   (mêmes couleurs que les badges/halos) + une animation d'état qui a du sens. Icônes NUES (aucune tuile). ===== */
#btn-notif.notif-halo, #btn-demandes.notif-halo { color: #e8324e !important; }
#btn-todo.notif-halo { color: #f3a712 !important; }
.topbar-icon.js-rappels.notif-halo { color: #f59e0b !important; }
.topbar-icon.js-bloques.notif-halo { color: #e0364e !important; }
.topbar-icon.js-secujournal.notif-halo { color: #ec4899 !important; }
.topbar-icon.js-connectes.notif-halo--orange { color: #f59e0b !important; } /* 2+ connectés = orange (comme son badge) */
.topbar-icon.js-connectes.notif-halo--rouge { color: #e0364e !important; }  /* hors ligne = rouge */
#btn-notif.notif-halo > svg { transform-box: fill-box; transform-origin: top center; animation: clBell 2.8s ease-in-out infinite; }
#btn-demandes.notif-halo > svg { transform-box: fill-box; animation: clMail 2.8s ease-in-out infinite; }
#btn-todo.notif-halo > svg { transform-box: fill-box; transform-origin: center; animation: clTodo 2.8s ease-in-out infinite; }
.js-rappels.notif-halo > svg { transform-box: fill-box; transform-origin: center; animation: clAlarm 2.6s ease-in-out infinite; }
.js-secujournal.notif-halo > svg { transform-box: fill-box; transform-origin: center; animation: clShield 2.4s ease-in-out infinite; }
.js-connectes.notif-halo > svg { transform-box: fill-box; transform-origin: center; animation: clPeople 3s ease-in-out infinite; }
.js-bloques.notif-halo .tbi-shackle { transform-box: fill-box; transform-origin: center; animation: clLock 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes clBell { 0%, 54%, 100% { transform: rotate(0); } 60% { transform: rotate(15deg); } 67% { transform: rotate(-13deg); } 74% { transform: rotate(9deg); } 81% { transform: rotate(-6deg); } 88% { transform: rotate(3deg); } }
@keyframes clMail { 0%, 48%, 100% { transform: translateY(0); } 56% { transform: translateY(-3px); } 64% { transform: translateY(0); } 70% { transform: translateY(-1.4px); } 76% { transform: translateY(0); } }
@keyframes clTodo { 0%, 58%, 100% { transform: scale(1); } 68% { transform: scale(1.16); } 80% { transform: scale(.96); } 90% { transform: scale(1); } }
@keyframes clAlarm { 0%, 48%, 100% { transform: rotate(0); } 54% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } 66% { transform: rotate(-7deg); } 72% { transform: rotate(5deg); } 78% { transform: rotate(0); } }
@keyframes clShield { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes clPeople { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes clLock { 0%, 72% { transform: translateY(0); } 80% { transform: translateY(-2.6px); } 88% { transform: translateY(0); } 100% { transform: translateY(0); } }
.topbar-cluster .topbar-icon > svg, .topbar-cluster .tool-icon > svg { transition: transform .18s ease; }
.topbar-cluster .topbar-icon:hover > svg, .topbar-cluster .tool-icon:hover > svg { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { #btn-notif.notif-halo > svg, #btn-demandes.notif-halo > svg, #btn-todo.notif-halo > svg, .js-rappels.notif-halo > svg, .js-secujournal.notif-halo > svg, .js-connectes.notif-halo > svg, .js-bloques.notif-halo .tbi-shackle { animation: none; } }
/* v5.268 : plus de HALO (glow) autour des icônes du cluster — l'indicateur, c'est la COULEUR des traits.
   Plus de CONTOUR BLANC autour des badges de notification. */
.hero-topline .notif-halo, .topbar-cluster .notif-halo { animation: none !important; box-shadow: none !important; }
.hero-topline .notif-badge, .hero-topline .topbar-icon__badge, .topbar-cluster .notif-badge, .topbar-cluster .topbar-icon__badge { box-shadow: none !important; }
/* Halo de CLIC = SILHOUETTE de l'icône (svg cloné) dans SA couleur du moment (notif ou non), qui s'étend et s'estompe. */
.echo-shape { pointer-events: none; }
.echo-shape svg { animation: echoShape .7s ease-out forwards; filter: drop-shadow(0 0 3px currentColor); } /* v5.281 : plus VISIBLE (Mika : « ne marche plus ») — expansion + halo doux à la couleur de l'icône */
@keyframes echoShape { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }
/* v5.270 : icônes « neutres » du cluster — cas particuliers (retours Mika). Base = encre du ciel. */
.js-modif-actif { color: #3b82c4 !important; }   /* Journal des MODIFS : bleu s'il y a eu des modifs (24h) */
.js-connexions .cx-arrow { stroke: #1aa653; }      /* Journal des CONNEXIONS : la flèche d'ENTRÉE toujours VERTE (symétrie avec la déconnexion rouge) */
.js-connexions:hover { color: #1aa653 !important; } /* toute l'icône verte au survol/clic */
.js-logout .lo-arrow { stroke: #e0364e; }         /* Déconnexion : la FLÈCHE toujours rouge */
.js-logout:hover { color: #e0364e !important; }   /* Déconnexion : toute l'icône rouge au survol */
/* La pastille texte « X connectés » est remplacée par l'état porté par l'icône « Salariés connectés ». */
#sync-badge { display: none; }
/* Pop-up des salariés connectés */
.conn-list { display: flex; flex-direction: column; gap: 6px; }
.conn-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.conn-row__info { flex: 1 1 auto; min-width: 0; }
.conn-row__nom { font-weight: 700; font-size: 14px; }
.conn-row__role { font-size: 12px; color: var(--text-3); }
.conn-row__moi { font-size: 12px; color: var(--text-3); font-style: italic; }
/* Barre de progression Data — style comète */
.data-progress { padding: 4px 12px 6px; }
.data-progress__label { font-size: 10px; color: var(--text-3); margin-bottom: 3px; line-height: 1.4; word-break: break-word; }
.data-progress__track { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; position: relative; }
.data-progress__bar { height: 100%; border-radius: 3px; width: 0%; transition: width 0.3s ease; background: linear-gradient(90deg, rgba(123,97,255,0.15) 0%, rgba(123,97,255,0.5) 40%, rgba(123,97,255,0.85) 75%, #7b61ff 100%); box-shadow: 0 0 8px rgba(123,97,255,0.5), inset 0 0 3px rgba(255,255,255,0.3); position: relative; }
.data-progress__bar::after { content: ""; position: absolute; right: 0; top: -1px; width: 10px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #7b61ff, 0 0 12px rgba(123,97,255,0.6); opacity: 1; transition: opacity 0.3s; }
.data-progress--done .data-progress__bar { background: linear-gradient(90deg, rgba(26,166,83,0.15) 0%, rgba(26,166,83,0.5) 40%, rgba(26,166,83,0.85) 75%, #1aa653 100%); box-shadow: 0 0 8px rgba(26,166,83,0.5); }
.data-progress--done .data-progress__bar::after { background: #fff; box-shadow: 0 0 6px #1aa653, 0 0 12px rgba(26,166,83,0.6); }
/* Bloc de statut « Liaisons & imports » déplacé dans la page Réglages */
.reglages-statslot #hub-statwrap { display: block; }
.reglages-statslot .bf-statrow { padding: 5px 0; gap: 16px; }
.reglages-statslot .bf-stat-item { font-size: 12px; }
.reglages-statslot .data-progress { padding: 4px 0 8px; max-width: 460px; }
.reglages-statslot .data-progress__label { font-size: 11px; }
/* Codes Postaux — Geomarketing */
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 1100px) { .cp-split { grid-template-columns: 1fr; } }
.cp-map-wrap { display: flex; flex-direction: column; gap: 0; }
.cp-map-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px 8px 0 0; font-size: 13px; }
.cp-table-wrap { overflow: hidden; }
.cp-table-wrap .table th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.cp-table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
#cp-map { background: var(--surface-2); }
.cp-legend { display: flex; align-items: center; gap: 14px; padding: 6px 12px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
.cp-leg-item { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.cp-leg-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; opacity: .8; }
.cp-leg-note { font-size: 10px; font-style: italic; color: var(--text-3); opacity: .7; }
/* PDF Viewer */
.pdf-viewer-wrap { margin-top: 12px; }
.pdf-viewer-frame { background: var(--surface-2); border-radius: 8px; overflow: hidden; min-height: 600px; }
.pdf-viewer-loading { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--text-3); font-size: 14px; }
.pdf-iframe { width: 100%; height: 80vh; min-height: 600px; border: none; border-radius: 8px; }
.pdf-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.pdf-kpi { background: var(--surface-2); border-radius: 10px; padding: 14px 20px; min-width: 120px; text-align: center; }
.pdf-kpi-val { font-size: 20px; font-weight: 700; color: var(--text); }
.pdf-kpi-lab { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pdf-section-title { font-size: 14px; font-weight: 700; margin: 18px 0 6px; padding: 6px 10px; background: var(--surface-2); border-radius: 6px; }
.pdf-subtitle { font-size: 12px; color: var(--text-3); margin: 4px 0 8px; }
.pdf-table { font-size: 12px; }
.pdf-table th { font-size: 11px; white-space: nowrap; }
.pdf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; margin: 8px 0; }
/* CDG Charts dashboard */
.cdg-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 14px 0; }
.cdg-chart-card { background: var(--surface-2); border-radius: 12px; padding: 14px; min-height: 260px; position: relative; }
.cdg-chart-sm { max-width: 380px; }
.cdg-details { margin: 10px 0; }
.cdg-details summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; user-select: none; }
.cdg-details summary:hover { background: var(--surface-3); }
.cdg-details[open] summary { border-radius: 8px 8px 0 0; }
@media (max-width: 700px) { .cdg-charts { grid-template-columns: 1fr; } .cdg-chart-card { min-height: 200px; } }
/* ===== App Banque ===== */
.btn--xs { padding: 3px 7px; font-size: 12px; border-radius: 7px; }
.bq-ok { color: #1e7d5a !important; }
.bq-bad { color: #e74c3c !important; }
.pdf-kpi.bq-ok { background: color-mix(in srgb, #1e7d5a 12%, var(--surface-2)); }
.pdf-kpi.bq-bad { background: color-mix(in srgb, #e74c3c 12%, var(--surface-2)); }
.bq-note { color: var(--text-2); font-size: 13px; line-height: 1.5; margin: 12px 0; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; }
.bq-empty { text-align: center; padding: 48px 20px; color: var(--text-3); }
.bq-empty__ic { font-size: 42px; margin-bottom: 10px; }
.bq-empty__txt { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.bq-empty__sub { font-size: 13px; }
.data-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.bq-h3 { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.bq-proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 14px 0; }
.bq-proj-card { background: var(--surface-2); border-radius: 14px; padding: 16px 18px; border-left: 4px solid var(--text-3); }
.bq-proj-card.bq-ok { border-left-color: #1e7d5a; }
.bq-proj-card.bq-bad { border-left-color: #e74c3c; }
.bq-proj-card__t { font-size: 13px; font-weight: 600; color: var(--text-2); }
.bq-proj-card__v { font-size: 26px; font-weight: 800; margin: 6px 0 2px; }
.bq-proj-card.bq-ok .bq-proj-card__v { color: #1e7d5a; }
.bq-proj-card.bq-bad .bq-proj-card__v { color: #e74c3c; }
.bq-proj-card__d { font-size: 12px; color: var(--text-3); }
.bq-proj-card__sub { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.bq-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.bq-rec-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.bq-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); }
.bq-tag.bq-ok { background: color-mix(in srgb, #1e7d5a 16%, var(--surface)); }
.bq-tag.bq-bad { background: color-mix(in srgb, #e74c3c 16%, var(--surface)); }
.bq-rec-off { opacity: .5; }
.bq-sugg { padding: 6px 0; }
.bq-sugg__row { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.bq-sugg__lib { flex: 1; font-weight: 600; font-size: 13px; min-width: 140px; }
.bq-sugg__mnt { font-weight: 700; font-size: 13px; }
.bq-sugg__nb { font-size: 12px; color: var(--text-3); }
@media (max-width: 700px) { .bq-proj-grid, .bq-params { grid-template-columns: 1fr; } }
/* v5.294 : grille de pilotage annuelle — CA mois/semaine + frais de personnel + solde fin de mois */
.bq-pil td { vertical-align: middle; }
.bq-pil .bq-in-cell { width: 118px; max-width: 118px; text-align: right; padding: 5px 8px; font-size: 13px; font-weight: 600; display: inline-block; }
.bq-pil .bq-in-sem { width: 104px; font-weight: 500; }
.bq-pil .bq-in-pct { width: 62px; max-width: 62px; text-align: right; padding: 5px 7px; font-size: 12.5px; font-weight: 600; display: inline-block; } /* v5.301 : colonne % (pilotage par mois/semaine) */
.bq-pil-past td { color: var(--text-2); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.bq-pil-cur td { background: color-mix(in srgb, #1e7d5a 7%, transparent); }
.bq-tag-real { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 1px 7px; border-radius: 20px; background: color-mix(in srgb, #1e7d5a 15%, var(--surface)); color: #1e7d5a; margin-left: 6px; }
.bq-tag-cur { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 1px 7px; border-radius: 20px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); margin-left: 6px; }
.bq-pil-tog { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text-3); padding: 2px 4px; border-radius: 6px; }
.bq-pil-tog:hover { background: var(--surface-2); color: var(--text); }
.bq-pil-hint { font-size: 11px; color: var(--text-3); font-weight: 500; }
.bq-sem-row td { background: color-mix(in srgb, var(--primary) 4%, transparent); border-bottom: 1px dashed var(--border); padding-top: 4px; padding-bottom: 4px; }
.bq-sem-lab { padding-left: 26px !important; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.bq-sem-reel { font-size: 12px; color: var(--text-2); }
.bq-pil-nav { display: inline-flex; gap: 4px; }
/* v5.300 : contrôles de pilotage (base + %) directement dans l'en-tête de la grille */
.bq-pil-ctl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.bq-in-head { height: 30px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; }
select.bq-in-head { max-width: 175px; }
.bq-pil tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }
/* v5.305 : tableaux du CEP (compte d'exploitation + plans de trésorerie pluriannuels) */
.bq-cep td, .bq-cep th { white-space: nowrap; font-size: 12.5px; }
.bq-cep .bq-cep-lib { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bq-cep-tot td { font-weight: 800; background: var(--surface-2); }
.bq-cep-tot .bq-cep-lib { font-size: 12.5px; }
.bq-progress { margin: 4px 0 16px; height: 26px; background: var(--surface-2); border-radius: 13px; position: relative; overflow: hidden; }
.bq-progress__bar { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, #1e7d5a, #00b894); border-radius: 13px; transition: width .2s; }
.bq-progress__lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text); }
.bq-progress--done .bq-progress__bar { background: linear-gradient(90deg, #1e7d5a, #2ecc71); }
.bq-icon-btn { padding-left: 9px; padding-right: 9px; }
/* Donut chart — composition CA */
.bf2-pie-full { display: flex; align-items: center; padding: 18px; gap: 22px; }
.bf2-pie-full .bf2-pie-svg { width: 300px; height: 300px; flex: 0 0 auto; }
.bf2-pleg-list { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bf2-pleg { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.bf2-pleg:hover { background: var(--surface-2); }
.bf2-pleg__rank { font-size: 9px; font-weight: 800; color: var(--text-3); width: 14px; text-align: center; flex: 0 0 auto; }
.bf2-pleg__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.bf2-pleg__name { font-size: 11.5px; font-weight: 700; color: var(--text-2); flex: 0 0 auto; min-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf2-pleg__pct { font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.bf2-sat-google { padding: 12px 0; }
.bf2-sat-google__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf2-sat-google__logo { display: flex; align-items: center; }
.bf2-sat-google__note { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.bf2-sat-google__note small { font-size: 14px; font-weight: 600; color: var(--text-3); }
.bf2-stars { display: inline-flex; gap: 2px; align-items: center; }
.bf2-sat-google__cnt { font-size: 12px; font-weight: 600; color: var(--text-3); }
.bf2-sat-google__obj { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 4px; }
.bf2-pie-new { display: flex; gap: 20px; align-items: flex-start; padding: 16px 18px; flex-wrap: wrap; }
.bf2-pie-chart { flex: 0 0 160px; }
.bf2-pie-svg { width: 160px; height: 160px; display: block; }
.bf2-pie-center-lbl { font-size: 10px; font-weight: 700; fill: var(--text-3); }
.bf2-pie-center-val { font-size: 13px; font-weight: 800; fill: var(--text); }
.bf2-pie-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.bf2-pie-leg { display: grid; grid-template-columns: 10px 82px 1fr 34px; align-items: center; gap: 7px; }
.bf2-pie-leg__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.bf2-pie-leg__name { font-size: 12px; font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf2-pie-leg__bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: visible; }
.bf2-pie-leg__bar span { display: block; height: 100%; border-radius: 3px; position: relative; }
.bf2-pie-leg__bar span::after { content: ''; position: absolute; right: -1px; top: -3px; width: 10px; height: calc(100% + 6px); border-radius: 50%; background: var(--bc, #999); filter: blur(5px); opacity: 0.5; }
.bf2-pie-leg__pct { font-size: 12px; font-weight: 800; color: var(--text); text-align: right; }

/* ===================== Accueil : panneau météo permanent à droite ===================== */
.accueil-layout { display: flex; flex: 1; min-height: 0; }
.accueil-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.accueil-main .page { flex: 1; overflow-y: auto; overflow-x: hidden; } /* v5.477 : jamais de barre horizontale — les décors du héro (overflow visible voulu) et tout léger débord sont clippés au bord de la page ; les tableaux larges gardent leur propre .table-wrap qui défile — demande Mika « toujours adapter à la fenêtre » */
/* Bande météo horizontale (accueil du hub) : petites tuiles à icônes, une seule ligne */
.accueil-wxbar { margin: 0 0 14px; }
.wxbar { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.wxbar:hover { border-color: var(--primary); }
.wxchip { flex: 1 1 0; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 0 6px; border-right: 1px solid var(--border); }
.wxchip:last-child { border-right: 0; }
.wxchip__ic { height: 46px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.wxchip__ic svg, .wxchip__ic img { width: 44px !important; height: 44px !important; }
.wxchip__ic--big { height: 54px; }
.wxchip__ic--big svg, .wxchip__ic--big img { width: 50px !important; height: 50px !important; }
/* Icônes RÉACTIVES de la barre météo (v5.266) — la donnée pilote l'état, + frémissement de vie. */
.wxb-flow { animation: wxbFlow 2s ease-in-out infinite; }
@keyframes wxbFlow { 0% { transform: translateX(-3px); opacity: .25; } 50% { opacity: 1; } 100% { transform: translateX(5px); opacity: .25; } }
.wxb-uhalo { transform-box: fill-box; transform-origin: center; animation: wxbUHalo 3.4s ease-in-out infinite; }
@keyframes wxbUHalo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
.wxb-upulse { transform-box: fill-box; transform-origin: center; animation: wxbUPulse 3s ease-in-out infinite; }
@keyframes wxbUPulse { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.13); opacity: 1; } }
.wxb-udisc { transform-box: fill-box; transform-origin: center; animation: wxbUDisc 3.4s ease-in-out infinite; }
@keyframes wxbUDisc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.wxb-leaf { transform-box: fill-box; transform-origin: bottom; animation: wxbLeaf 3.4s ease-in-out infinite; }
@keyframes wxbLeaf { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.wxb-drop { transform-box: fill-box; animation: wxbDrop 1.3s linear infinite; }
@keyframes wxbDrop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
.wxb-cloud { transform-box: fill-box; transform-origin: center; animation: wxbCloud 5s ease-in-out infinite; }
@keyframes wxbCloud { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
.wxb-shine { transform-box: fill-box; animation: wxbShine 3.2s ease-in-out infinite; }
@keyframes wxbShine { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .wxb-flow, .wxb-uhalo, .wxb-upulse, .wxb-udisc, .wxb-leaf, .wxb-drop, .wxb-cloud, .wxb-shine { animation: none; } }
.wxchip__v { font-size: 15px; font-weight: 800; white-space: nowrap; line-height: 1.1; }
.wxchip__v small { font-size: 9.5px; font-weight: 600; color: var(--text-3); }
.wxchip__l { font-size: 9.5px; color: var(--text-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wxchip--now .wxchip__v { font-size: 18px; }
/* Carte « Aujourd'hui » (absents / congés / repos du jour) */
/* v5.279 (retour Mika) : la barre prend les COULEURS DU HERO (fond + bordure teintés ciel, posés par heroTick)
   et les pastilles COMMENCENT sur la ligne du titre (titre à gauche, contenu à droite qui s'enroule). */
.acc-today { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--acc-sky, var(--surface)); border: 1px solid var(--acc-brd, var(--border)); border-radius: 14px; padding: 11px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.acc-today__head { font-size: 13px; font-weight: 800; color: var(--ckink, var(--primary-dark)); white-space: nowrap; }
.acc-today__items { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; width: 100%; } /* v5.281 : SOUS la ligne du titre, un sous-titre (Congés/Repos) par ligne */
.acc-today__grp { display: flex; align-items: flex-start; gap: 8px; } /* v5.284 : label calé EN HAUT → « Repos » au niveau de la 1re pilule (et non centré entre les 2 lignes) */
.acc-today__lab { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; min-width: 88px; flex: 0 0 auto; padding-top: 3px; } /* v5.281 : largeur fixe → pastilles alignées après les sous-titres ; padding-top v5.284 = même hauteur de texte que la pilule (padding 3px) */
.acc-today__chips { display: flex; gap: 5px; flex-wrap: wrap; }
.acc-today__chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.acc-today__grp--abs .acc-today__chip { background: #fde8e8; color: #c0392b; }
.acc-today__grp--cp .acc-today__chip { background: #e7f6ec; color: #1faa6b; }
.acc-today__grp--rep .acc-today__chip { background: #e8f0fe; color: #1f6fd6; }
.acc-today__grp--cfa .acc-today__chip { background: #efe9fb; color: #8854d0; }
.acc-today__grp--formation .acc-today__chip { background: #e3f2fd; color: #1971c2; } /* v5.322 : Formation — bleu (≠ Absents rouge) */
.acc-today__grp--rcomp .acc-today__chip { background: #d6f3ee; color: #0c8074; }
.acc-today__full { font-size: 13px; font-weight: 700; color: #1faa6b; }
.wxbar .mto-load { padding: 6px 10px; color: var(--text-3); }
/* Contrôles admin relocalisés (météo n'occupe plus la colonne de droite) */
#accueil-topbar #hub-actions { display: flex; gap: 8px; border: 0; padding: 0; background: transparent; }
#accueil-statzone #hub-statwrap { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px 4px; }
/* Panneau accueil : couleurs de l'application planning (clair / violet / teintes pâles) */
.accueil-meteo { width: var(--sidebar-w); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.mto-pan__head { display: flex; align-items: center; justify-content: space-between; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; font-weight: 800; padding: 11px 14px; }
.mto-pan__geo { background: var(--surface); border: 1px solid var(--border); color: var(--primary); border-radius: 6px; cursor: pointer; padding: 3px 7px; font-size: 12px; }
.mto-pan__geo:hover { background: var(--primary-soft); }
.mto-pan__body { flex: 1; overflow-y: auto; padding-bottom: 10px; }
.mto-pan__foot { font-size: 10px; color: var(--text-3); opacity: .85; text-align: center; padding: 6px; background: var(--surface-2); }
.mto-pan__loc { padding: 12px 14px 0; font-size: 13px; color: var(--text); font-weight: 700; }
.mto-pan__cur { display: flex; align-items: center; gap: 10px; padding: 4px 14px 0; }
.mto-pan__cur .emo { font-size: 40px; line-height: 1; }
.mto-pan__cur .big { font-size: 44px; font-weight: 300; color: var(--primary-dark); line-height: 1; }
.mto-pan__cond { padding: 2px 14px 8px; font-size: 13px; color: var(--text-2); }
.mto-pan__hours { display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 8px; }
.mto-pan__hours .mto-h { background: var(--primary-soft); border-radius: 8px; padding: 7px 3px; width: 52px; }
.mto-pan__hours .mto-h .t { font-size: 10.5px; color: var(--text-3); }
.mto-pan__hours .mto-h .e { font-size: 18px; margin: 2px 0; }
.mto-pan__hours .mto-h .d { font-size: 13px; color: var(--text); font-weight: 700; }
.mto-pan__hours .mto-h .p { font-size: 9.5px; color: var(--primary); margin-top: 1px; }
.mto-pan__met { margin: 0 12px; display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 9px; overflow: hidden; }
.mto-pan__met > div { display: flex; align-items: center; justify-content: space-between; background: var(--primary-soft); padding: 7px 11px; font-size: 12px; color: var(--text-2); }
.mto-pan__met > div b { color: var(--text); font-weight: 700; }
.mto-pan__sec { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 800; margin: 14px 0 4px 14px; }
.mto-pan__daily { margin: 0 12px 6px; }
.mto-pdr { display: grid; grid-template-columns: 38px 24px 1fr 1fr; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.mto-pdr .e { font-size: 15px; text-align: center; }
.mto-pdr .lo { color: var(--text-3); text-align: right; }
.mto-pdr .hi { color: var(--text); font-weight: 700; text-align: right; }
/* --- Panneau météo droit, version compacte « icônes » --- */
.accueil-meteo { width: 152px; }
.mto-pan__body--mini { min-height: 0; }
.accueil-meteo #hub-actions, .accueil-meteo #hub-statwrap { flex: 0 0 auto; }
.accueil-meteo #hub-actions { display: flex; gap: 8px; justify-content: center; padding: 8px; border-top: 1px solid var(--border); }
.accueil-meteo #hub-statwrap { border-top: 1px solid var(--border); background: var(--surface-2); padding: 6px 2px 4px; margin-top: 6px; }
.accueil-meteo #hub-statwrap .bf-statrow { padding: 3px 8px; gap: 8px; }
.accueil-meteo #hub-statwrap .data-progress { padding: 3px 8px 5px; }
.accueil-meteo #hub-statwrap .data-progress__label { font-size: 9px; }
.mto-pan__head--mini { padding: 8px; justify-content: center; gap: 6px; }
.mto-pan__open { background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.mto-pan__cur--mini { flex-direction: column; gap: 0; align-items: center; padding: 6px 4px 8px; text-align: center; }
.mto-pan__cur--mini .emo { font-size: 30px; }
.mto-pan__cur--mini .big { font-size: 26px; font-weight: 300; }
/* Heures : lignes fines et épurées */
.mto-pan__hours--mini { flex-direction: column; gap: 1px; overflow-x: hidden; padding: 0 6px 6px; }
.mto-pan__hours--mini .mto-h { display: grid; grid-template-columns: 32px 18px 1fr; align-items: center; width: auto; padding: 2px 5px; gap: 5px; text-align: left; background: transparent; border-radius: 7px; transition: background .15s; }
.mto-pan__hours--mini .mto-h:hover { background: var(--primary-soft); }
.mto-pan__hours--mini .mto-h .t { font-size: 10px; color: var(--text-3); }
.mto-pan__hours--mini .mto-h .e { font-size: 14px; margin: 0; text-align: center; }
.mto-pan__hours--mini .mto-h .d { font-size: 11.5px; font-weight: 700; text-align: right; color: var(--text); }
.mto-pan__hours--mini .mto-h .p { display: none; }
/* Petit séparateur avant les 7 jours */
.mto-pan__daily--mini { margin: 4px 6px 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.mto-pan__daily--mini .mto-pdr { grid-template-columns: 30px 18px 1fr 1fr; gap: 3px; padding: 2px 5px; font-size: 10.5px; border: 0; border-radius: 7px; transition: background .15s; }
.mto-pan__daily--mini .mto-pdr:hover { background: var(--primary-soft); }
.mto-pan__daily--mini .mto-pdr .e { font-size: 13px; }
.mto-pan__daily--mini .mto-pdr .lo { color: var(--text-3); }
.mto-pan__daily--mini .mto-pdr .hi { font-weight: 700; }
@media (max-width: 640px) {
  .accueil-meteo { width: 100% !important; }
  .accueil-layout { flex-direction: column; }
  .accueil-main { overflow: visible; }
  .accueil-meteo { width: 100%; border-left: 0; border-top: 1px solid var(--border); max-height: 70vh; }
}
/* v5.202.0 : la fenêtre « Gérer les applications » s'élargit à la taille de son tableau
   (elle était bloquée à 460 px → colonnes coupées). Sur petit écran, repli en 94vw + défilement. */
.ac-manage { min-width: 0; max-width: none; }
.modal:has(.ac-manage) { max-width: min(920px, 94vw); }
/* Page d'application « à construire » */
.app-vide { text-align: center; padding: 60px 20px; max-width: 520px; margin: 30px auto; background: var(--surface); border: 1px dashed var(--border-2); border-radius: 18px; }
.app-vide__ic { font-size: 56px; line-height: 1; }
.app-vide__t { font-size: 22px; font-weight: 800; margin: 14px 0 8px; }
.app-vide__s { color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* ===================== App Briefing (couleurs Kiabi + style Planning) ===================== */
.bf-page { display: flex; flex-direction: column; gap: 16px; }
.bf-datebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.bf-tag--blue { background: #00B0F0; color: #fff; }
.bf-card { padding: 0; overflow: hidden; }
.bf-card > *:not(.bf-band) { margin-left: 18px; margin-right: 18px; }
.bf-card .bf-scroll, .bf-card .bf-table { margin-left: 0; margin-right: 0; }
.bf-card > .field, .bf-card > .field__hint, .bf-card > .bf-source, .bf-card > .bf-duo { margin-bottom: 14px; }
/* Bandeaux de section aux couleurs du briefing */
.bf-band { font-weight: 800; font-size: 14px; padding: 11px 18px; margin: 0 0 14px; letter-spacing: .2px; }
.bf-band--blue { background: #00B0F0; color: #fff; }
.bf-band--green { background: #92D050; color: #16310a; }
.bf-band--amber { background: #FFC000; color: #4a3500; }
/* Source */
.bf-source { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bf-file code { background: var(--surface-2); padding: 5px 9px; border-radius: 7px; font-size: 12.5px; }
.bf-source__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-load { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: #eaf7ff; border: 1px solid #b6e4fb; border-radius: 11px; }
.bf-load__txt { font-size: 13.5px; line-height: 1.5; max-width: 62%; }
.bf-load__txt code { background: #fff; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.bf-load__state { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.bf-load__state.is-ok { color: #0a7d2c; font-weight: 700; }
.bf-more { margin-top: 12px; }
.bf-more > summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); user-select: none; }
.bf-more[open] > summary { margin-bottom: 6px; }
.bf-autorow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 9px; }
.bf-dirbadge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; background: #e6f7ff; color: #0a4a63; border: 1px solid #00B0F0; padding: 4px 10px; border-radius: 999px; }
/* Tableau briefing */
.bf-scroll { overflow-x: auto; }
.bf-table { width: 100%; border-collapse: collapse; }
.bf-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bf-table .bf-grp { background: var(--surface-2); border-radius: 6px; }
.bf-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.bf-metric { text-align: left !important; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.bf-sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left !important; }
.bf-table--rayon { max-width: 460px; }
/* Cellule + saisie « jaune » (à modifier) */
.bf-cell { display: inline-flex; align-items: center; gap: 3px; }
.bf-card .bf-in { background: #fffbe6; border-color: #f4e08a; }
.bf-card .bf-in:focus { background: #fffdf2; border-color: var(--primary); }
.bf-table .bf-in { width: 78px; padding: 5px 6px; text-align: right; font-size: 12.5px; }
.bf-u { font-size: 11px; color: var(--text-3); font-weight: 700; }
.bf-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; }
.ac-manage .cc-table .input, .ac-manage .cc-table .select { padding: 7px 9px; }

/* ===================== Avatars ===================== */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  flex-shrink: 0; background: var(--primary);
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--xs { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }
.avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.avatar--xl { width: 84px; height: 84px; font-size: 30px; border-radius: 20px; }
.avatar--photo { background-size: cover; background-position: center; color: transparent; }

/* ===================== Zone principale ===================== */
.main { flex: 1; overflow: auto; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  /* v5.235.0 « coque douce » : la barre fond dans le canevas (même couleur, plus de trait) ;
     le contenu défile proprement dessous car le fond reste opaque. */
  background: var(--bg);
  border-bottom: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 26px;
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 10px; }
/* v5.525 : bouton RETOUR (flèche) à gauche du titre, sur les sous-vues — demande Mika */
.topbar__back { flex: 0 0 auto; width: 34px; height: 34px; margin: -2px 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.topbar__back:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.topbar__back:active { transform: translateY(1px); }
.topbar__back svg { width: 19px; height: 19px; }
.tri-bar { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
/* Barre de filtres Congés payés (recherche + tri) */
.cg-filtres { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cg-filtres .tri-bar { margin-left: 0; }
.cg-search { position: relative; flex: 1 1 280px; max-width: 380px; }
.cg-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.cg-search .input { width: 100%; padding-left: 36px; }
.rap-periode { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.rap-periode .field__label { white-space: nowrap; }
.rap-periode .input { flex-shrink: 0; }
.rap-fl { color: var(--text-3); font-weight: 700; }
@media (max-width: 760px) { .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding-top: 8px; padding-bottom: 8px; row-gap: 8px; } }
.tri-bar .field__label { white-space: nowrap; }
.topbar__title .page-ic { width: 23px; height: 23px; }
/* Icône v9 ANIMÉE dans l'en-tête de page (mêmes que le hub) — demande Mika */
.topbar__title .page-ic9 { width: 28px; height: 28px; display: inline-flex; flex: 0 0 auto; }
.topbar__title .page-ic9 .nav-app__ic, .topbar__title .page-ic9 .nav-ic9 { width: 28px; height: 28px; background: transparent; border: 0; box-shadow: none; overflow: visible; display: block; }
.topbar__title .page-ic9 svg { width: 28px; height: 28px; display: block; }
body.mob-hub.mob-emp #main .topbar__title .page-ic9,
body.mob-hub.mob-emp #main .topbar__title .page-ic9 .nav-app__ic,
body.mob-hub.mob-emp #main .topbar__title .page-ic9 svg { width: 26px; height: 26px; }
.page-ic--planning { color: #6c5ce7; }
.page-ic--employes { color: #2d9cdb; }
.page-ic--fiches { color: #00b8a9; }
.page-ic--conges { color: #f0c635; }
.page-ic--tableau { color: #f3a712; }
.page-ic--rapports { color: #8854d0; }
.page-ic--missions { color: #eb3b5a; }
.page-ic--reglages { color: #5b6075; }
.page-ic--postes { color: #fa8231; }
.page-ic--equipes { color: #0fb9b1; }
.page-ic--reglesCompteurs { color: #f0506e; }
.page-ic--acces { color: #e58e26; }
.page-ic--suiviPlannings { color: #6c5ce7; }

/* ----- Onglet Absences (Règles) ----- */
.abs-table { width: 100%; border-collapse: collapse; }
.abs-table thead th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.abs-table thead th:first-child { width: 80px; }
.abs-table th:nth-child(3), .abs-table td:nth-child(3), .abs-table th:nth-child(4), .abs-table td:nth-child(4) { width: 210px; }
.abs-table tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.abs-table tbody tr:last-child td { border-bottom: none; }
.abs-table .abs-nom { font-weight: 600; }
.abs-ic { margin-right: 5px; }
.abs-row.is-off .abs-nom { color: var(--text-3); }
.abs-check input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.abs-check input:disabled { cursor: not-allowed; opacity: 0.5; }
.nav-item[data-vue="acces"] svg { color: #e58e26; }
.topbar__spacer { flex: 1; }

/* Navigation des semaines */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-nav__btn {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.week-nav__btn:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.week-nav__label {
  font-weight: 700; font-size: 15px; width: 320px; text-align: center;
  text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 0 320px;
}
.btn-today {
  padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 13px;
  border: 1px solid var(--border); color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.btn-today:hover { background: var(--surface-2); color: var(--text); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px;
  font-weight: 600; font-size: 14px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); }
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { color: var(--text-2); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--outline { color: var(--primary); border: 1.5px solid var(--primary); background: transparent; }
.btn--outline:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.btn--soft { color: var(--primary-dark); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); box-shadow: none; }
.btn--soft:hover { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary-dark); }
.btn--danger { color: var(--danger); border: 1px solid var(--danger-soft); background: var(--danger-soft); }
.btn--danger:hover { background: #fbdce2; }
.btn--subtle { color: var(--text-2); }
.btn--subtle:hover { background: var(--surface-2); color: var(--text); }

/* ===================== Contenu / pages ===================== */
.page { padding: 24px 26px 60px; overflow-x: clip; } /* v5.477 : jamais de barre horizontale sur aucune page — « clip » n'crée PAS de conteneur de défilement (sticky + défilement de .main préservés) ; les tableaux larges gardent leur propre .table-wrap, le planning défile via .main (il n'utilise pas .page) — demande Mika « toujours adapter à la fenêtre » */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.page-head__title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.page-head__sub { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }

/* ===================== Grille de planning ===================== */
.planning-wrap { padding: 20px 22px 60px; }
.filigrane-dajan { display: none; } /* filigrane DAJAN : visible uniquement à l'impression (cf @media print) */

.planning {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;            /* visible (pas hidden) sinon le sticky de la bande des dates ne fonctionne pas (.planning capterait le sticky alors que c'est .main qui défile) */
  min-width: min-content;       /* la carte épouse toute la grille (tous les jours) ; .main défile horizontalement si l'écran est trop étroit */
  box-shadow: var(--shadow-sm);
}

.planning__row {
  display: grid;
  grid-template-columns: 232px repeat(7, minmax(110px, 1fr)) 152px;
}
.planning__row + .planning__row { border-top: 1px solid var(--border); }

/* Survol d'une ligne employé : cadre net (pseudo-élément) qui sélectionne toute la ligne */
.planning__row--emp { position: relative; transition: background .1s; }
.planning__row--emp:hover { background: var(--primary-soft); z-index: 6; }
.planning__row--emp:hover .emp-cell { background: var(--primary-soft); }
/* Survol : toute la ligne se soulève (effet des fiches employés) */
.planning__row--emp { transition: box-shadow .18s, transform .18s; }
.planning__row--emp:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); position: relative; z-index: 2; border-radius: 10px; }
.planning__row--emp:hover::after,
.planning__row.row-drop::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--primary); border-radius: 3px;
  box-sizing: border-box; pointer-events: none; z-index: 7;
}
.planning__row.row-drop::after { border-style: dashed; }
.planning__row--emp .emp-cell[draggable="true"] { cursor: grab; }
.planning__row--emp .emp-cell[draggable="true"]:active { cursor: grabbing; }
/* Glisser-déposer de ligne (réordonnancement manuel) */
.planning__row.row-dragging { opacity: .45; }
/* Indicateurs d'état du planning (non commencé / brouillon / validé + envoi) */
.pl-etat { display: inline-flex; align-items: center; gap: 8px; }
.etat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 700; cursor: pointer; line-height: 1; transition: filter .12s; }
.etat-pill svg { width: 15px; height: 15px; }
.etat-pill.is-ro { cursor: default; }
.etat-pill:not(.is-ro):hover { filter: brightness(.96); }
.etat-pill--rouge { color: #c0392b; border-color: #f3c2c5; background: #fdeaec; }
.etat-pill--orange { color: #c77c1c; border-color: #f3dcb4; background: #fdf3e3; }
.etat-pill--vert { color: #1e9e5a; border-color: #bfe6cd; background: #e8f7ee; }

/* Suivi des plannings (signatures) */
.sig-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sig-prog { font-size: 12.5px; font-weight: 800; color: #c77c1c; min-width: 130px; }
.sig-prog.is-done { color: #1e9e5a; }
.sig-bar { height: 6px; border-radius: 4px; background: var(--surface-2); margin-top: 5px; overflow: hidden; }
.sig-bar__fill { height: 100%; background: currentColor; border-radius: 4px; transition: width .2s; }
/* Modale de signature (salarié) */
.sig-modal p { margin: 0 0 10px; }
.sig-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin: 10px 0; }
.sig-shift { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.sig-shift__j { font-weight: 700; min-width: 64px; }
.sig-shift__h { font-weight: 600; color: var(--primary-dark); margin-left: auto; }
.sig-shift__p { color: var(--text-2); margin-left: auto; }
.sig-total { font-size: 13.5px; text-align: right; }
/* Pad de signature (canvas) + bloc attestation (signature dessinée). */
.sig-pad { width: 100%; height: 130px; border: 1px dashed var(--border-strong, #b8b8c8); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; display: block; margin-top: 6px; }
.sig-attest { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sig-attest__mention { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.sig-attest__img { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: inline-block; background: #fff; }
.sig-attest__img img { max-height: 110px; display: block; }

/* Sélecteur de tri du planning */
.pl-tri { display: inline-flex; align-items: center; gap: 7px; }
.pl-tri__lbl { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.select--sm { padding: 5px 8px; font-size: 12.5px; min-width: 0; }

/* Calendrier annuel des congés / absences */
.cal-an { padding: 16px 18px; margin-bottom: 18px; }
.cal-an__top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.cal-an__sel { display: inline-flex; align-items: center; gap: 8px; }
.cal-an__nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-an__year { font-size: 16px; font-weight: 800; min-width: 56px; text-align: center; }
.cal-an__solde { font-size: 12.5px; color: var(--text-2); }
.cal-an__spacer { flex: 1; }
.cal-an__grid { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.cal-month { flex: 0 0 auto; }
.cal-month__name { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; text-align: center; }
.cal-month__grid { display: grid; grid-template-columns: repeat(7, 22px); gap: 2px; }
.cal-wd { font-size: 9.5px; font-weight: 700; color: var(--text-3); text-align: center; height: 14px; line-height: 14px; }
.cal-day { height: 22px; line-height: 22px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-2); border-radius: 4px; background: var(--surface-2); }
.cal-day--vide { background: transparent; }
.cal-day--dim { color: var(--text-3); }
.cal-day--auj { box-shadow: 0 0 0 2px var(--primary); }
.cal-day.cal--cp-valide { background: #8bc34a; color: #fff; }
.cal-day.cal--cp-attente { background: #f5a623; color: #fff; }
.cal-day.cal--cp-pose { background: #d0455b; color: #fff; }
.cal-day.cal--abs { background: #4a78b5; color: #fff; }
.cal-day.cal--ferie { background: #b94fa0; color: #fff; }
.cal-day.cal--tp { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, #c9cddb 3px, #c9cddb 5px); color: var(--text-2); }
.cal-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cal-leg__it { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.cal-leg__sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-leg__sw.cal--cp-valide { background: #8bc34a; }
.cal-leg__sw.cal--cp-attente { background: #f5a623; }
.cal-leg__sw.cal--cp-pose { background: #d0455b; }
.cal-leg__sw.cal--abs { background: #4a78b5; }
.cal-leg__sw.cal--ferie { background: #b94fa0; }
.cal-leg__sw.cal--tp { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 2px, #c9cddb 2px, #c9cddb 4px); }
.cal-an__resume { font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; }
.cal-emp { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.cal-emp:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.cal-emp__nom { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.cal-emp__nom .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-emp__solde { font-weight: 600; font-size: 12px; color: var(--text-2); }
.cal-day { position: relative; }
.cal-day__n { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 800; text-align: center; box-shadow: 0 0 0 1.5px var(--surface); }
.cal-an__togs { display: flex; gap: 6px; align-items: center; }
.kpi-link { all: unset; cursor: pointer; display: contents; }
.suivi-week-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 2px; }
.suivi-week-lbl { font-weight: 800; font-size: 15px; min-width: 220px; text-align: center; text-transform: capitalize; }
.suivi-ts { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
/* hauteur fixe -> la fenêtre ne bouge plus quand on change de semaine */
.suivi-shifts { min-height: 196px; max-height: 196px; overflow-y: auto; margin-top: 10px; }
.sig-weeknav { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.sig-weeknav .suivi-week-lbl { min-width: 200px; }
.cal-day[data-cal-people] { cursor: pointer; }
.cal-tip { position: fixed; z-index: 9999; display: none; max-width: 280px; background: #1c1f2b; color: #fff; font-size: 12px; line-height: 1.45; padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: none; }
.cal-tip__row { display: flex; align-items: center; gap: 7px; margin: 4px 0; }
.cal-tip__row .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.cal-tip__ferie { font-weight: 700; opacity: .9; margin-bottom: 5px; }
.check__nom { margin-left: 2px; }
.check .avatar--xs { margin: 0 2px; }

/* Sélecteur d'employé avec avatar (remplace les <select>) */
.emp-pick { position: relative; }
.emp-pick__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; text-align: left; }
.emp-pick__btn:hover { border-color: var(--border-2); }
.emp-pick__cur { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-pick__cur--ph { color: var(--text-3); }
.emp-pick__chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.emp-pick__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 8px; }
.emp-pick__search { width: 100%; margin-bottom: 6px; }
.emp-pick__list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.emp-pick__opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: left; color: var(--text); }
.emp-pick__opt:hover { background: var(--surface-2); }
.emp-pick__opt-txt { display: flex; flex-direction: column; line-height: 1.2; }
.emp-pick__opt-nom { font-weight: 600; font-size: 13.5px; }
.emp-pick__opt-sub { font-size: 11px; color: var(--text-3); }
.emp-pick__ic { background: var(--primary) !important; color: #fff; display: flex; align-items: center; justify-content: center; }

/* En-tête des jours */
.planning__head { position: sticky; top: var(--pl-topbar-h, 162px); z-index: 15; background: var(--surface); box-shadow: 0 6px 10px -6px rgba(20,30,60,.28); }
.day-head {
  padding: 12px 10px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.day-head__name { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.day-head__date { font-size: 13px; color: var(--text-3); font-weight: 600; margin-top: 1px; }
.day-head.is-today .day-head__name,
.day-head.is-today .day-head__date { color: var(--primary); }
.day-head.is-today { background: var(--primary-soft-2); }

.corner {
  display: flex; align-items: center;
  padding: 0 16px;
  font-size: 12px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* Cellule nom employé */
.emp-cell {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: var(--surface);
  position: sticky; left: 0;
}
.emp-cell__photo { position: relative; flex: 0 0 auto; }
.emp-cell__bday { position: absolute; top: -6px; right: -6px; font-size: 13px; background: var(--surface); border-radius: 50%; padding: 0 1px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.emp-cell__bday-ic { font-size: 12px; }
.emp-cell__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.emp-cell__name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-cell__name b { font-weight: 800; }
.emp-cell__mat { margin: 3px 0 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emp-cell__rayon { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.emp-cell__contrat { font-size: 11px; color: var(--text-3); font-weight: 600; }
/* À l'écran : Base / contrat / icônes EMPILÉS (comme avant). En impression : regroupés sur une ligne (voir @media print). */
.emp-cell__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 3px; }
.emp-cell__logos { display: inline-flex; gap: 5px; font-size: 14px; }
.emp-cell__role { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.emp-cell__hours { margin-top: 5px; }
.emp-hours-bar { height: 5px; border-radius: 4px; background: var(--border); overflow: hidden; }
.emp-hours-bar__fill { height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.3s; }
.emp-hours-bar__fill.is-over { background: var(--danger); }
.emp-hours-text { font-size: 11px; font-weight: 600; color: var(--text-2); margin-top: 4px; display: flex; justify-content: space-between; }
.emp-hours-text .over { color: var(--danger); }

/* Cellules jour */
.day-cell {
  border-left: 1px solid var(--border);
  padding: 7px;
  min-height: 84px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.day-cell.is-today { background: var(--primary-soft-2); }
.day-cell.is-weekend { background: var(--surface-2); }
.day-cell.is-today.is-weekend { background: var(--primary-soft-2); }
.month-cell { position: relative; }
.day-cell__bday { position: absolute; top: 3px; right: 4px; font-size: 17px; line-height: 1; z-index: 5; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
/* Jour d'anniversaire : la corbeille du shift passe à GAUCHE (le 🎂 occupe la droite) */
.day-cell.has-bday .shift__del { right: auto; left: 3px; }
.day-cell.has-bday .shift__note-dot { top: auto; bottom: 6px; }

/* ---- Colonne DIMANCHE (grisée) + cadenas vert/rouge ---- */
.day-head.is-dimanche, .month-head.is-dimanche { background: color-mix(in srgb, var(--text-3) 12%, var(--surface)); }
.day-cell.is-dimanche, .month-cell.is-dimanche, .day-track.is-dimanche { background: color-mix(in srgb, var(--text-3) 9%, var(--surface)); }
/* Dimanche FERMÉ : grisé plus marqué + hachures + curseur interdit */
.day-cell.is-dimanche-off, .month-cell.is-dimanche-off, .day-track.is-dimanche-off {
  background-color: color-mix(in srgb, var(--text-3) 15%, var(--surface));
  background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, color-mix(in srgb, var(--text-3) 14%, transparent) 7px, color-mix(in srgb, var(--text-3) 14%, transparent) 14px);
  cursor: not-allowed;
}
.day-head__name .dim-lock { vertical-align: middle; }
.dim-lock { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-left: 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; vertical-align: middle; }
.dim-lock svg { width: 13px; height: 13px; }
.dim-lock:hover { transform: scale(1.12); box-shadow: var(--shadow-sm); }
.dim-lock.is-open { color: #fff; background: var(--success, #1aa251); border-color: var(--success, #1aa251); }
.dim-lock.is-locked { color: #fff; background: var(--danger, #e0364f); border-color: var(--danger, #e0364f); }

/* ---- Badge cadenas par jour (orange managers / rouge paye) + icônes d'événements ---- */
.day-head, .month-head { position: relative; }
.jour-verrou { position: absolute; right: 5px; bottom: 4px; display: inline-flex; align-items: center; justify-content: center; }
.jour-verrou svg { width: 13px; height: 13px; }
.jour-verrou--managers { color: var(--warning, #e6912a); }
.jour-verrou--paye { color: var(--danger, #e0364f); }
.jour-verrou--ouvert { color: var(--success, #1aa251); }
/* Survol d'une ligne : la teinte couvre AUSSI les colonnes week-end / dimanche / aujourd'hui */
.planning__row--emp:hover .day-cell,
.planning__row--emp:hover .day-cell.is-weekend,
.planning__row--emp:hover .day-cell.is-dimanche,
.planning__row--emp:hover .day-cell.is-today { background-color: var(--primary-soft); }
.week-nav__label .jour-verrou { position: static; margin-left: 4px; vertical-align: middle; }
.day-evt { font-size: 12px; margin-left: 2px; }
.day-head.is-ferie .day-head__date, .month-head.is-ferie .month-head__n { color: var(--danger, #e0364f); font-weight: 800; }

/* ---- Frise « Plan commerce » (sous la date, même largeur que le planning) ---- */
.frise { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 14px; padding-bottom: 6px; overflow: hidden; }
.frise__head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); }
.frise__tog { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; transition: all .12s; }
.frise__tog.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.frise__tog:not(.is-on) { opacity: .5; color: var(--text-3); background: var(--surface-2); }
.frise__edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-3); cursor: pointer; margin-left: auto; }
.frise__edit svg { width: 13px; height: 13px; }
.frise__edit:hover { background: var(--surface-2); color: var(--primary); }
/* lignes (1 par couloir de catégorie) */
.frise-row { align-items: center; min-height: 26px; padding: 1px 0; }
.frise--sem .frise-row { display: grid; grid-template-columns: 232px repeat(7, minmax(110px, 1fr)) 152px; }
.frise--prop .frise-row { display: grid; grid-template-columns: 232px 1fr; }
.frise__cat { padding: 0 12px; font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frise--sem .frise__cat { grid-column: 1; }
.frise__zone { position: relative; height: 24px; }
.frise__zone--empty { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-3); font-size: 12.5px; font-style: italic; }
.frise--sem .frise__zone--empty { grid-column: 2 / -1; }
/* barres : fond PÂLE (teinte) + texte/bordure dans la couleur */
.frise__bar { height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; cursor: pointer; overflow: hidden; white-space: nowrap; background: var(--eb, rgba(31,155,216,.12)); color: color-mix(in srgb, var(--ec, #1f9bd8) 72%, #11131c); border-left: 3px solid var(--ec, #1f9bd8); transition: filter .12s, transform .12s, box-shadow .12s; }
.frise--prop .frise__bar { position: absolute; top: 0; }
.frise--sem .frise__bar { margin: 0 2px; }
.frise__bar span { overflow: hidden; text-overflow: ellipsis; }
.frise__bar:hover { transform: translateY(-1px); z-index: 2; box-shadow: var(--shadow-md); filter: brightness(.98); }

/* ---- Poubelle 🗑️ d'un shift (bas-droite, couleur danger) ---- */
.shift__del, .day-bar .shift__del { position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 5px; background: transparent; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, transform .12s; z-index: 4; }
.shift:hover .shift__del, .day-bar:hover .shift__del { opacity: .75; }
.shift__del:hover { opacity: 1; background: var(--danger-soft, #fde8ec); transform: scale(1.18); }

/* ---- Modal de gestion du plan commerce ---- */
.cc-manage { min-width: 640px; max-width: 80vw; }
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); padding: 4px 6px; }
.cc-table td { padding: 4px 6px; vertical-align: middle; }
.cc-table .input, .cc-table .select { padding: 7px 9px; }
.cc-table .cc-debut, .cc-table .cc-fin { max-width: 150px; }
.cc-del { border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.cc-del:hover { background: var(--danger-soft, #fde8ec); }

.add-shift {
  margin-top: auto;
  opacity: 0;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px; border-radius: 7px;
  border: 1px dashed var(--border-2); color: var(--text-3);
  font-size: 12px; font-weight: 600;
  transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.day-cell:hover .add-shift { opacity: 1; }
.add-shift:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.add-shift svg { width: 14px; height: 14px; }

/* Bloc de shift */
.shift {
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  border-left: 3px solid var(--shift-color, var(--primary));
  background: var(--shift-bg, var(--primary-soft));
  transition: transform 0.08s, box-shadow 0.12s;
  position: relative;
}
.shift:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Doubles compteurs dans la colonne Total semaine (absence / maintien) */
/* Colonne TOTAUX : chaque indicateur CENTRÉ, juste icône + texte coloré (pas de fond/pastille). */
.total-cell__sub { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: center; gap: 2px 6px; text-align: center; font-size: 10px; font-weight: 700; margin-top: 4px; line-height: 1.35; max-width: 100%; }
.total-cell__abs { color: var(--text-2); }
.total-cell__abs .tc-moins { color: #d0455b; }
.total-cell__maintien { color: #0a7d2c; }
.total-cell__dim { color: #b94fa0; }
.total-cell__supph { color: #e0852b; font-weight: 800; }
.total-cell__legal { color: #c0293f; font-weight: 800; cursor: help; }
.shift__time { font-weight: 700; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Défilement TOUJOURS actif des libellés trop longs : le texte est enveloppé dans .mq-in (posé
   par le JS) et animé en aller-retour via l'API Web Animations (valeurs px explicites, fiable). */
.mq { overflow: hidden; text-overflow: clip; }
.mq-in { display: inline-block; white-space: nowrap; will-change: transform; flex: 0 0 auto; }
.shift__role { font-size: 11px; font-weight: 600; color: var(--shift-color, var(--primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift__meta { font-size: 10.5px; color: var(--text-3); margin-top: 2px; display: flex; gap: 6px; }
.shift__note-dot { position: absolute; top: 7px; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
/* Indicateur de commentaire sur un shift : petite icône note en bas à gauche (commentaire au survol via le title natif) */
.shift__note { position: absolute; bottom: -3px; left: -9px; top: auto; font-size: 12px; line-height: 1; z-index: 6; pointer-events: none; transition: filter .12s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.day-bar .shift__note { bottom: 0; left: 0; }   /* vue Jour : le bloc coupe ce qui dépasse → on reste à l'intérieur */
/* Au survol d'un shift commenté : halo jaune autour de l'icône note */
.shift:hover .shift__note, .day-bar:hover .shift__note { filter: drop-shadow(0 0 2px #f5c518) drop-shadow(0 0 4px #f5c518) drop-shadow(0 0 7px rgba(245,197,24,.7)); }
.month-chip.has-note { position: relative; }
.month-chip.has-note::after { content: ""; position: absolute; top: 1px; right: 1px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* Ligne de totaux */
.planning__foot { background: var(--surface-2); border-top: 2px solid var(--border-2) !important; }
.foot-label { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.foot-label__leg { display: flex; flex-direction: column; gap: 1px; font-size: 10px; font-weight: 600; color: var(--text-3); margin-top: 4px; }
.foot-cell {
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; gap: 1px;
}
.foot-cell__hours { font-weight: 700; font-size: 13px; color: var(--text); }
.foot-cell__count { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.foot-cell__pers { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10.5px; color: var(--text-2); font-weight: 700; white-space: nowrap; margin-top: 2px; }
.foot-cell.is-today { background: var(--primary-soft-2); }

/* ===================== État vide ===================== */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 70px 20px; color: var(--text-3);
}
.empty svg { width: 54px; height: 54px; opacity: 0.4; margin-bottom: 16px; }
.empty__title { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.empty__text { font-size: 13.5px; max-width: 360px; margin-bottom: 18px; }

/* ===================== Tableaux (équipe) ===================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 12px 18px; font-size: 11.5px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.table td { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface-2); }
.cell-emp { display: flex; align-items: center; gap: 11px; }
.cell-emp__name { font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.tag__dot { width: 8px; height: 8px; border-radius: 50%; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: background 0.15s, color 0.15s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn--danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn svg { width: 16px; height: 16px; }

/* ===================== Modale ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(29, 32, 51, 0.22);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px; animation: fade 0.15s ease;
  /* Pas de flou : on doit pouvoir lire le contenu derrière la fenêtre (déplaçable). */
}
.modal {
  background: var(--surface); border-radius: 16px; width: 100%; max-width: 460px;
  box-shadow: var(--shadow-lg); animation: pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal--wide { max-width: 540px; }
.modal__head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 4px; }
.modal__title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.modal__sub { font-size: 13px; color: var(--text-3); padding: 0 24px; margin-top: 2px; }
.modal__close { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: 18px 24px; overflow: auto; }
.modal__foot { display: flex; gap: 10px; padding: 16px 24px 22px; }
.modal__foot .btn { flex: 1; justify-content: center; }
.modal__foot .spacer { flex: 1; }

/* Formulaires */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.field__row { display: flex; gap: 12px; }
.field__row > .field { flex: 1; margin-bottom: 0; }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.textarea { resize: vertical; min-height: 64px; }
.select { appearance: none; 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='%239398ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* Sélecteur de couleurs */
.color-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.color-swatch { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; position: relative; transition: transform 0.1s; }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.is-active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }

/* Aperçu employé dans la modale */
.shift-emp-preview { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: var(--surface-2); border-radius: 11px; margin-bottom: 18px; }
.shift-emp-preview__name { font-weight: 700; }
.shift-emp-preview__date { font-size: 12.5px; color: var(--text-3); text-transform: capitalize; }

.field__hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.hint-warn { font-size: 1.15em; margin-right: 2px; vertical-align: -1px; }
.duration-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 13px; }

/* ===================== Notifications toast ===================== */
#toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#toast-root.toast-pos-bas-centre { bottom: 24px; top: auto; left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
#toast-root.toast-pos-haut-centre { top: 24px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
#toast-root.toast-pos-haut-droite { top: 24px; bottom: auto; right: 24px; left: auto; transform: none; align-items: flex-end; }
#toast-root.toast-pos-bas-droite { bottom: 24px; top: auto; right: 24px; left: auto; transform: none; align-items: flex-end; }
#toast-root.toast-pos-haut-gauche { top: 24px; bottom: auto; left: 24px; right: auto; transform: none; align-items: flex-start; }
#toast-root.toast-pos-bas-gauche { bottom: 24px; top: auto; left: 24px; right: auto; transform: none; align-items: flex-start; }
.toast {
  background: var(--surface, #fff); color: var(--text, #1a1a2e);
  padding: 11px 16px; border-radius: 13px; font-weight: 600; font-size: 14px; letter-spacing: -0.1px;
  box-shadow: 0 12px 34px rgba(15, 15, 40, 0.16);
  border: 1.5px solid #ced1db; /* contour coloré selon le type (voir .toast--*) — style épuré */
  display: flex; align-items: center; gap: 10px; animation: toastIn 0.26s cubic-bezier(.2, .9, .3, 1.25);
  min-width: 215px;
}
.toast__ic { font-size: 19px; line-height: 1; flex-shrink: 0; } /* emoji natif en couleur, sans fond */
/* v5.733 — micro-animation de Lémo à la place de l'emoji (enregistré / erreur).
   font-size:0 neutralise les 19px hérités ; le SVG porte ses propres dimensions, qu'on agrandit ici. */
.toast__ic--mic { font-size: 0; }
/* v5.737 — format C : l'animation est cadrée en CARRÉ, quel que soit son dessin. */
.toast__ic--mic svg { display: block; width: 84px; height: 84px; }
.toast__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__txt b { font-weight: 700; font-size: 15.5px; letter-spacing: -0.1px; }
.toast__det { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.toast:has(.toast__ic--mic) { padding: 16px 20px; gap: 16px; max-width: 460px; }
/* La grande image centrale : l'animation remplace l'emoji de 130 px. */
.toast-flash--mic { font-size: 0; }
.toast-flash--mic svg { display: block; width: 220px; height: 220px; }
.toast-flash {
  position: fixed; top: 50%; left: 50%; z-index: 4000; pointer-events: none;
  font-size: 130px; line-height: 1;
  transform: translate(-50%, -50%) scale(1); opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28));
  animation: flashIn 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
.toast-flash.is-out { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
@keyframes flashIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.toast--success { border-color: #16a34a; }
.toast--error { border-color: #dc2626; }
.toast--warning { border-color: #f59e0b; }
.toast--save { border-color: #6c5ce7; }
.toast--info { border-color: #2ea6e6; }
/* v5.738 — repère « mi-temps thérapeutique » sur la ligne du salarié dans le planning. */
.emp-cell__mtt { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  background: color-mix(in srgb, #7048e8 16%, var(--surface)); color: #5f3dc4; border: 1px solid color-mix(in srgb, #7048e8 34%, transparent); white-space: nowrap; }
/* v5.928 (Mika 06/08) — GROSSESSE : même pastille, rose poudré, celui déjà retenu pour le créneau
   de réduction maternité (#c2255c) — une seule couleur pour un seul sujet, on ne réapprend rien.
   ⚠️ RÉSERVÉE au gérant, aux responsables et aux managers : c'est une donnée de santé, elle ne
   doit pas s'afficher pour l'équipe. Le filtre est posé CÔTÉ JS (le CSS ne protège rien). */
.emp-cell__gross { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  background: color-mix(in srgb, #c2255c 15%, var(--surface)); color: #a61e4d; border: 1px solid color-mix(in srgb, #c2255c 32%, transparent); white-space: nowrap; }
/* v5.735 — Time Machine : repérer les archives qui portent une modification (demande Mika).
   Bordure orange à gauche + fond très léger : lisible sans écraser la ligne sélectionnée. */
.rs-t tr.rs-mod > td:first-child { box-shadow: inset 3px 0 0 #f59f00; }
.rs-t tr.rs-mod { background: color-mix(in srgb, #f59f00 7%, transparent); }
.rs-t tr.rs-mod.on { background: color-mix(in srgb, #f59f00 15%, transparent); }
.rs-filtres { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 8px; }
.rs-filtre { font: 800 11.5px/1 inherit; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.rs-filtre:hover { border-color: var(--primary); }
.rs-filtre.on { border-color: #f59f00; background: color-mix(in srgb, #f59f00 14%, var(--surface)); color: var(--text); } /* v5.734 : le type « info » n'avait aucun contour — il se confondait avec un toast neutre */

/* ----- Écran de connexion ----- */
#login-root { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #6c5ce7 0%, #4b3fc4 100%); padding: 20px; }
#login-root.is-shown { display: flex; }
.login-card { background: var(--surface); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); padding: 34px 32px; width: 100%; max-width: 360px; text-align: center; animation: toastIn 0.25s ease; }
.login-logo { width: 60px; height: 60px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; overflow: hidden; }
.login-logo.has-img { background: transparent; }
.login-logo img { width: 100%; height: 100%; object-fit: cover; }
/* Logo « les loups » (large) : bannière au lieu du carré, sans rognage */
.login-logo--wolves { width: auto; max-width: 210px; height: 68px; border-radius: 0; margin: 2px auto 12px; overflow: visible; }
.login-logo--wolves img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
/* Logo teinté à la couleur du héro : l'image sert de MASQUE, le fond (dégradé ciel) la remplit */
.login-logo--wolves.is-hero { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.login-logo--wolves.is-hero img { visibility: hidden; }
.login-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.login-sub { font-size: 13px; color: var(--text-3); margin-bottom: 22px; }
.login-form { text-align: left; display: flex; flex-direction: column; }
.login-form .field__label { margin-bottom: 5px; }
.login-warn { font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; margin-top: 12px; line-height: 1.45; }
.login-err { color: #c0334e; font-size: 12.5px; font-weight: 600; min-height: 18px; margin: 8px 2px 4px; }
.login-btn { width: 100%; justify-content: center; margin-top: 6px; background: var(--login-accent, var(--primary)); border-color: var(--login-accent, var(--primary)); }
.login-form .input.is-active, .login-form .input:focus { border-color: var(--login-accent, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent, var(--primary)) 22%, transparent); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kp { font-size: 20px; font-weight: 700; padding: 13px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; transition: background .12s, transform .05s; user-select: none; }
.kp:hover { background: var(--surface-2); }
.kp:active { transform: scale(0.95); background: var(--primary-soft); }
.kp--act { color: var(--primary); font-size: 18px; }
.login-demo-toggle { background: none; border: none; color: var(--text-3); font-size: 12px; font-weight: 600; margin-top: 16px; cursor: pointer; text-decoration: underline; }
.login-demo { margin-top: 10px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; text-align: left; line-height: 1.7; }

/* ----- Rôle / déconnexion / lecture seule ----- */
.sidebar__user-info { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.role-badge { font-size: 10.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.3px; }
.ro-badge { font-size: 12.5px; font-weight: 700; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.nav-item[data-vue="monPlanning"] svg { color: #6c5ce7; }
.nav-item[data-vue="mesConges"] svg { color: #f0c635; }
.nav-item[data-vue="mesAbsences"] svg { color: #e8590c; }
.nav-item[data-vue="maFiche"] svg { color: #00b8a9; }
.nav-item[data-vue="absences"] svg { color: #e8590c; }
.page-ic--absences { color: #e8590c; }
.page-ic--salaires { color: #0ca678; }
.page-ic--salaireMois { color: #12b886; }
.page-ic--variable { color: #d4a017; }
.page-ic--inventaire { color: #8b5e34; }
.nav-item[data-vue="salaires"] svg { color: #0ca678; }
.nav-item[data-vue="salaireMois"] svg { color: #12b886; }
.nav-item[data-vue="variable"] svg { color: #d4a017; }
.nav-item[data-vue="inventaire"] svg { color: #8b5e34; }
.sal-params { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sal-params .field__label { white-space: nowrap; }
.alt-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; margin-top: 12px; }
.alt-params .field__label { white-space: nowrap; }
.alt-params .suffix { justify-content: space-between; }
.role-fixe { font-weight: 600; }

/* ----- Onglet Synthèse (Règles) ----- */
.syn-table { width: 100%; border-collapse: collapse; }
.syn-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.syn-table tr:last-child td { border-bottom: none; }
.syn-table .syn-label { font-weight: 600; width: 40%; }
.syn-table .syn-val { color: var(--text-2); }
.syn-table .syn-act { text-align: right; white-space: nowrap; width: 92px; }

/* ----- Cloche de notifications & journal ----- */
.sidebar__tools { display: flex; gap: 8px; margin-bottom: 10px; }
.sidebar__hub-acts { display: flex; gap: 8px; margin-top: -4px; border-top: 1px solid var(--border); padding-top: 8px; margin-bottom: 2px; }
.hub-act-btn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; }
.hub-act-btn svg { width: 18px; height: 18px; }
.hub-act-btn:hover { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.tool-icon { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s, transform .1s; }
.tool-icon svg { width: 19px; height: 19px; }
.tool-icon:hover { background: var(--surface-2); }
.tool-icon.is-success { color: #176b46; border-color: #9fe0c0; }
.tool-icon.is-warning { color: #b9710a; border-color: #f3cd8e; }
.tool-icon.is-error { color: #c0334e; border-color: #f0a8b5; }
.tool-icon.is-save { color: #5b4bd6; border-color: #c3bcf0; }
.tool-icon.is-flash { animation: notifFlash .6s ease; }
@keyframes notifFlash { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e8324e; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }

#pop-root { position: fixed; inset: 0; z-index: 4500; }
.pop-overlay { position: absolute; inset: 0; }
.pop-panel { position: absolute; left: 16px; bottom: 84px; width: 340px; max-width: calc(100vw - 32px); max-height: 70vh; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; animation: toastIn .18s ease; }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-weight: 800; border-bottom: 1px solid var(--border); }
.pop-close { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 15px; }
.pop-scroll { overflow-y: auto; padding: 6px; }
.pop-sect { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); padding: 10px 10px 6px; }
.pop-sect__hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-3); opacity: .8; }
.pop-empty { padding: 8px 12px 14px; color: var(--text-3); font-size: 13px; }
.notif-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: default; }
.notif-item[data-conge] { cursor: pointer; }
.notif-item[data-conge]:hover { background: var(--surface-2); }
.notif-item__ic { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.notif-item__t { font-size: 13.5px; font-weight: 600; }
.notif-item__cat { font-size: 14px; margin-right: 1px; }
.notif-item__s { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* ---- App Data : hub de sous-applications ---- */
.data-intro { color: var(--text-2); font-size: 13.5px; margin: 0 0 18px; max-width: 720px; line-height: 1.5; }
.data-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.data-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 22px 14px; background: color-mix(in srgb, var(--ac, var(--primary)) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac, var(--primary)) 18%, var(--surface)); border-top: 4px solid color-mix(in srgb, var(--ac, var(--primary)) 48%, var(--surface)); border-radius: 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; text-align: center; }
.data-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.data-tile__ic { font-size: 30px; line-height: 1; }
.data-tile__nom { font-size: 14px; font-weight: 800; color: var(--text); }
.data-tile__cnt { font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--ac, var(--primary)) 70%, var(--text-3)); text-transform: uppercase; letter-spacing: .4px; }
.data-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.data-period { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.data-period select { min-width: 180px; }
.data-meta { font-size: 12px; color: var(--text-3); }
.data-toolbar #data-del { margin-left: auto; }
.data-grid th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; white-space: nowrap; font-size: 12px; }
.data-grid td { font-size: 12.5px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.data-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.data-foot__maj { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.data-foot__src { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.data-foot__src input { width: 15px; height: 15px; cursor: pointer; }
/* Analyse auto + table collapsible */
.data-analyse { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.data-analyse__ttl { font-size: 13px; font-weight: 800; color: var(--primary); margin-bottom: 10px; letter-spacing: .2px; }
.data-analyse__item { font-size: 13px; color: var(--text-2); margin: 0 0 6px; line-height: 1.5; }
.data-analyse__item b { color: var(--text); }
.data-analyse__item:last-child { margin-bottom: 0; }
.data-details { margin-top: 4px; }
.data-details__sum { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text-2); padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.data-details__sum:hover { background: var(--surface-2); filter: brightness(.96); }
.data-details[open] .data-details__sum { border-radius: 10px 10px 0 0; border-bottom: none; }
.data-details[open] > .card { border-radius: 0 0 14px 14px; }
.bf2-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.bf2-card__h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 8px 14px 0; }
/* Sous-applications Data injectées dans la barre latérale */
.data-subnav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
/* Filtres Data : plage de dates + recherche + colonnes + reporting */
.data-fdate { min-width: 138px; padding: 5px 8px; }
.data-cols { margin-bottom: 14px; }
.data-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; margin-top: 6px; }
.data-col-opt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); padding: 3px 0; cursor: pointer; }
.data-col-opt input { width: 14px; height: 14px; flex: 0 0 auto; }
.data-report-head { background: linear-gradient(135deg, var(--primary), #8a7bff); color: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.data-report-title { font-size: 17px; font-weight: 800; }
.data-report-sub { font-size: 12.5px; opacity: .92; margin-top: 4px; }
.data-print-entete { display: none; }
/* Comparatif Provins / Région / France */
.cmp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.cmp-row:last-child { margin-bottom: 0; }
.cmp-lbl { flex: 0 0 168px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.cmp-track { flex: 1; height: 16px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.cmp-bar { height: 100%; border-radius: 8px; transition: width .4s ease; }
.cmp-val { flex: 0 0 78px; text-align: right; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-row--fort .cmp-lbl { color: var(--text); font-weight: 800; }
.cmp-row--fort .cmp-track { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
.cmp-verdict { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.data-navitem .data-nav-ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; background: color-mix(in srgb, var(--ac, var(--primary)) 16%, var(--surface)); }
.data-navitem.nav-item--sub { padding-left: 12px; }
.data-navitem.is-active .data-nav-ic { background: color-mix(in srgb, var(--ac, var(--primary)) 28%, var(--surface)); }
.notif-item.is-pin { background: #fff5e6; border: 1px solid #f5d49a; margin-bottom: 4px; }
.todo-badge { background: #f3a712; }
.notif-badge.badge-ok { background: #20bf73; }
.todo-actions { display: flex; gap: 8px; margin-top: 8px; }
.todo-actions .btn-valide { background: var(--success-soft); color: #0c6b43; }
.todo-actions .btn-refuse { background: #fde7eb; color: #c0334e; }
.pj-zone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prime-mission { display: inline-flex; align-items: center; gap: 8px; }
.prime-in { max-width: 100px; }
.prime-in.is-warn { border-color: #d9821a; color: #b9710a; font-weight: 700; }

/* Icônes de menu colorées (chaque rubrique sa couleur, même active) */
.nav-item[data-vue="planning"] svg { color: #6c5ce7; }
.nav-item[data-vue="employes"] svg { color: #2d9cdb; }
.nav-item[data-vue="fiches"] svg { color: #00b8a9; }
.nav-item[data-vue="conges"] svg { color: #f0c635; }
.nav-item[data-vue="tableau"] svg { color: #f3a712; }
.nav-item[data-vue="rapports"] svg { color: #8854d0; }
.nav-item[data-vue="missions"] svg { color: #eb3b5a; }
.nav-item[data-vue="reglages"] svg { color: #5b6075; }
.nav-item[data-vue="postes"] svg { color: #fa8231; }
.nav-item[data-vue="equipes"] svg { color: #0fb9b1; }
.nav-item[data-vue="reglesCompteurs"] svg { color: #f0506e; }

/* ===================== Réglages ===================== */
/* v5.650 (demande Mika) — Réglages PLEINE LARGEUR en grille de cartes (dashboard). */
.settings-section { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 18px; align-items: start; }
.settings-block { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
/* v5.710 (retour Mika « y a trop de trous entre les options ») — la GRANDE page Réglages passe en flux
   COLONNES. En grille, chaque rangée prend la hauteur de son bloc le plus grand : un bloc court (Chantier
   sécurité) laissait un trou béant sous lui, en face d'un bloc long (Emails). En multi-colonnes, les blocs
   se tassent vers le haut — plus aucun vide. Même respiration responsive : column-width:400px ≡
   minmax(400px,1fr), donc autant de colonnes que la largeur en permet.
   ⚠️ Réservé à --flow : les écrans Postes/Équipes/Règles et Accès partagent .settings-section avec un bloc
   unique porteur d'un large tableau, qu'on laisse en grille. */
/* v5.834 — LA PAGE PREND TOUTE LA LARGEUR (Mika : « c'est dommage d'avoir du vide »).
   Le plafond de 1180 px laissait 200 à 400 px inutilisés sur un écran de bureau. Ici l'élargir
   est sans danger pour la lecture : la mise en colonnes de 400 px signifie que la largeur en plus
   ajoute une COLONNE, elle n'étire jamais les lignes de texte. Réservé à --flow : les écrans
   Postes/Équipes/Règles gardent leur plafond, eux portent de larges tableaux qu'on ne veut pas
   voir s'étaler. Le plafond haut (1900 px) évite qu'un écran ultra-large parte en 5 colonnes. */
.settings-section--flow { display: block; column-width: 400px; column-gap: 18px; max-width: 1900px; }
.settings-section--flow > .settings-block { margin: 0 0 18px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.settings-section--flow > .settings-block:first-child { column-span: all; }

/* ===== v5.711 — Réglages : identité par domaine (maquette validée par Mika le 26/07) =====
   Chaque bloc porte son accent dans --sec (posé par embellir(), js/reglages.js) : un MÉDAILLON coloré
   qui le rend repérable d'un coup d'œil, et une LUMIÈRE d'accent dans l'angle — volontairement pas un
   liseré collé au bord, qui est le tic de toutes les cartes génériques. */
.settings-section--flow > .settings-block { position: relative; overflow: hidden; border-radius: 18px; padding: 19px 21px 21px;
  box-shadow: 0 1px 2px rgba(20,40,90,.04), 0 9px 24px -16px rgba(20,40,90,.22); }
.settings-section--flow > .settings-block::before { content: ""; position: absolute; right: -46px; top: -64px; width: 200px; height: 158px;
  pointer-events: none; transition: opacity .2s ease;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec, var(--primary)) 24%, transparent), transparent); }
.settings-section--flow > .settings-block:hover { transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sec, var(--primary)) 40%, var(--border));
  box-shadow: 0 2px 4px rgba(20,40,90,.05), 0 18px 38px -18px color-mix(in srgb, var(--sec, var(--primary)) 50%, transparent); }
.settings-section--flow > .settings-block:hover::before { opacity: 1.4; }
.sb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; position: relative; }
.sb-med { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sec, var(--primary)) 22%, var(--surface)), color-mix(in srgb, var(--sec, var(--primary)) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--sec, var(--primary)) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 13px -7px color-mix(in srgb, var(--sec, var(--primary)) 65%, transparent);
  transition: transform .24s cubic-bezier(.2,.8,.3,1); }
.sb-med > svg { width: 22px; height: 22px; }                       /* le moteur d'icônes remplace l'emoji : on borne sa taille */
.settings-block:hover .sb-med { transform: scale(1.09) rotate(-5deg); }
.sb-head .settings-block__title { margin: 0; font-size: 15.5px; letter-spacing: -.2px; }
.sb-head .settings-block__title::before { display: none; }         /* le médaillon remplace le petit trait vertical */

/* barre de tête : intitulé + recherche live + compteur */
.reg-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 auto 18px; max-width: 1900px; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.reg-top__t { font-size: 16px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 9px; }
.reg-top__t i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); font-style: normal; }
.reg-find { flex: 1; min-width: 210px; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); transition: border-color .16s, box-shadow .16s; }
.reg-find:focus-within { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.reg-find input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13.5px; font-family: inherit; }
.reg-find svg { flex: none; width: 15px; height: 15px; stroke: var(--text-3); fill: none; stroke-width: 2.2; }
.reg-cnt { font-size: 12px; font-weight: 800; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-vide { max-width: 1900px; margin: 0 auto; padding: 26px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.settings-block:hover { box-shadow: 0 6px 20px rgba(20, 40, 90, .09); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); transform: translateY(-1px); }
.settings-block:first-child { grid-column: 1 / -1; }               /* bloc « Mon entreprise » sur toute la largeur */
.settings-block__title { font-size: 15px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.settings-block__title::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 55%, #7b61ff)); flex: none; }
.settings-block__desc { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
@media (max-width: 720px) { .settings-section { grid-template-columns: 1fr; } .settings-section--flow { columns: 1; } }
.poste-list { display: flex; flex-direction: column; gap: 8px; }
.poste-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.poste-row__name { font-weight: 600; flex: 1; }

/* Animations */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Bandeau d'info Firebase */
.banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 11px; margin-bottom: 18px;
  background: var(--warning-soft); color: #8a5a00; font-size: 13px; font-weight: 500;
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner a { color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ===================== Bandeau planning enrichi ===================== */
.topbar--planning { height: auto; min-height: var(--topbar-h); flex-direction: column; align-items: stretch; gap: 9px; padding-top: 11px; padding-bottom: 11px; }
.pl-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.pl-row__spacer { flex: 1 1 0; min-width: 8px; }
.pl-row--sub { justify-content: center; gap: 0; padding-top: 1px; border-top: 1px solid var(--border); margin-top: -1px; }
.pl-sub-sep { width: 1px; height: 24px; background: var(--border); margin: 0 18px; }
.seg--gran { margin-left: 0; }
.week-block { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.week-nav { position: relative; }
.pb-jump-input { position: absolute; left: 50%; bottom: -2px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.week-nav__label { cursor: pointer; border-radius: 8px; padding: 4px 8px; transition: background 0.15s; }
.week-nav__label:hover { background: var(--surface-2); }

/* Barre d'outils (icônes) */
.tool-btn {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tool-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.tool-btn:disabled { opacity: 0.4; cursor: default; }
.tool-btn.is-on { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.tool-btn svg { width: 18px; height: 18px; }
.toolbar { display: flex; align-items: center; gap: 6px; }
.tool-sep { width: 1px; height: 24px; background: var(--border); margin: 0 3px; }

/* ===== v5.306 : barre du Planning « façon hero » — verre dépoli + teintes du ciel (couleurs posées par teinteNav) ===== */
.topbar--planning { --pl-glass: rgba(255,255,255,.6); --pl-glassbd: rgba(255,255,255,.74); border-bottom: 1px solid var(--pl-brd, var(--border)); }
.topbar--planning .topbar__title { color: var(--ckink, var(--primary-dark)); }
.topbar--planning .topbar__title svg { color: var(--ckink, var(--primary)); }
/* Groupes en VERRE DÉPOLI */
.topbar--planning .week-nav,
.topbar--planning .toolbar,
.topbar--planning .seg,
.topbar--planning .pl-tri {
  background: var(--pl-glass); border: 1px solid var(--pl-glassbd);
  border-radius: 12px; padding: 4px 6px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(40,60,90,.05);
}
.topbar--planning .week-nav { gap: 3px; }
.topbar--planning .seg { margin-left: 0; }
.topbar--planning .pl-tri { gap: 8px; }
/* Boutons internes : transparents (le verre porte le fond), texte en encre du ciel */
.topbar--planning .week-nav__btn,
.topbar--planning .btn-today,
.topbar--planning .tool-btn { background: transparent; border-color: transparent; color: var(--ckink, var(--text-2)); }
.topbar--planning .week-nav__btn:hover,
.topbar--planning .btn-today:hover,
.topbar--planning .tool-btn:hover:not(:disabled) { background: rgba(255,255,255,.72); border-color: transparent; color: var(--ckink, var(--text)); }
.topbar--planning .week-nav__label { color: var(--ckink, var(--text)); }
.topbar--planning .tool-btn.is-on { background: rgba(255,255,255,.9); color: var(--pl-acc2, var(--primary-dark)); border-color: transparent; }
/* Séparateurs discrets + filet de la 2ᵉ ligne teinté ciel */
.topbar--planning .tool-sep, .topbar--planning .pl-sub-sep { background: var(--pl-brd, var(--border)); opacity: .55; }
.topbar--planning .pl-row--sub { border-top-color: var(--pl-brd, var(--border)); }
/* Onglet de granularité actif : accent ciel du moment */
.topbar--planning .seg-btn { color: var(--ckink, var(--text-2)); }
.topbar--planning .seg-btn.is-active { background: linear-gradient(150deg, var(--pl-acc1, var(--primary)), var(--pl-acc2, var(--primary-dark))); color: #fff; box-shadow: 0 2px 8px rgba(47,95,158,.25); }
.topbar--planning .seg-btn.is-active svg { color: #fff; }
/* Tri : label + select intégrés au verre */
.topbar--planning .pl-tri__lbl { color: var(--ckink, var(--text-2)); }
.topbar--planning .pl-tri .select { background: transparent; border-color: transparent; color: var(--ckink, var(--text)); }
/* Bouton principal « Nouveau shift » : dégradé ciel (à la place du violet) */
.topbar--planning .btn--primary { background: linear-gradient(150deg, var(--pl-acc1, var(--primary)), var(--pl-acc2, var(--primary-dark))); border: none; box-shadow: 0 4px 12px rgba(47,95,158,.3); }
.topbar--planning .btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
/* v5.307/v5.319 : cluster (notifs + chip Mika) de TOUTES les barres d'app = MÊME rendu que l'accueil —
   icônes 34px en encre du ciel, chip sans caisson. (Le fond transparent est posé sur .topbar-cluster de base.) */
.topbar-cluster .sidebar__tools { display: flex; align-items: center; gap: 8px; background: transparent; margin: 0; }
.topbar-cluster .topbar-icon,
.topbar-cluster .tool-icon { width: 34px; height: 34px; min-width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ckink, #2f4a74); background: transparent; }
.topbar-cluster .topbar-icon svg,
.topbar-cluster .tool-icon svg { width: 21px !important; height: 21px !important; }
.topbar-cluster .topbar-icon:hover,
.topbar-cluster .tool-icon:hover { background: rgba(255,255,255,.45); }
.topbar-cluster .topbar-user { background: transparent; border: 0; box-shadow: none; padding: 4px 6px; animation: none; }
.topbar-cluster .topbar-user .topbar-user__nom { color: var(--ckink, #2f4a74); }

/* Cadenas (statut de la semaine) */
.cadenas { display: flex; align-items: center; gap: 6px; }
.cadena {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--text-3); background: var(--surface);
  transition: all 0.15s;
}
.cadena svg { width: 15px; height: 15px; }
.cadena:hover { border-color: var(--border-2); }
.cadena.is-off { opacity: 0.5; }
.cadena--vert.is-active { background: var(--success-soft); color: var(--success); border-color: transparent; box-shadow: 0 0 0 2px var(--success-soft); }
.cadena--orange.is-active { background: var(--warning-soft); color: var(--warning); border-color: transparent; box-shadow: 0 0 0 2px var(--warning-soft); }
.cadena--rouge.is-active { background: var(--danger-soft); color: var(--danger); border-color: transparent; box-shadow: 0 0 0 2px var(--danger-soft); }
.cadenas__label { font-size: 12px; font-weight: 700; margin-left: 4px; }
.cadenas__label.cad-ouvert { color: var(--success); }
.cadenas__label.cad-managers { color: var(--warning); }
.cadenas__label.cad-paye { color: var(--danger); }

/* Colonne Total semaine */
.total-head {
  border-left: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.3px;
  line-height: 1.25;
}
.total-cell {
  border-left: 2px solid var(--border-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px;
}
.total-cell__hours { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
.total-cell__ecart { font-size: 11.5px; font-weight: 700; }
.ecart-plus { color: var(--warning); }
.ecart-moins { color: var(--danger); }
.ecart-egal { color: var(--success); }
.ecart-neutre { color: var(--text-3); }
/* v5.616 — dépassement du contrat NON marqué « H+ » : ces heures partent au taux NORMAL.
   Couleur d'alerte distincte du « + X sup. » (heures réellement majorées) — demande de Mika :
   le mot « sup. » ne doit jamais désigner des heures qui ne sont pas payées en supplémentaires. */
.ecart-alerte { color: var(--warning); }
.grand-total { border-left: 2px solid var(--border-2); background: var(--primary-soft-2); }
.grand-total .foot-cell__hours { color: var(--primary-dark); font-size: 15px; }
.emp-cell__base { font-size: 11px; color: var(--text-3); font-weight: 600; }
.planning.is-locked .day-cell { background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(29,32,51,0.018) 9px, rgba(29,32,51,0.018) 18px); }

/* Badge manager */
.mini-badge { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--primary-dark); background: var(--primary-soft); padding: 1px 6px; border-radius: 20px; vertical-align: middle; }

/* Glisser-déposer */
.shift[draggable="true"] { cursor: grab; }
.shift.is-dragging { opacity: 0.4; }
.day-cell.drop-target { background: var(--primary-soft) !important; box-shadow: inset 0 0 0 2px var(--primary); }

/* Menu burger (popover) */
.pb-menu {
  position: fixed; z-index: 150; min-width: 248px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; animation: pop 0.14s ease;
}
.pb-menu__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--text); text-align: left; }
.pb-menu__item svg { width: 17px; height: 17px; color: var(--text-3); }
.pb-menu__item:hover:not(:disabled) { background: var(--surface-2); }
.pb-menu__item:disabled { opacity: 0.4; cursor: default; }
.pb-menu__sep { height: 1px; background: var(--border); margin: 5px 8px; }

/* Listes à cocher (filtres) */
.check-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 9px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; color: var(--text); cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.check:hover { background: var(--surface-2); }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.check .dot { width: 11px; height: 11px; border-radius: 50%; }
.filtre-actions { font-size: 12px; margin-bottom: 6px; color: var(--text-3); }
.lien { color: var(--primary); font-weight: 700; font-size: 12px; }
.lien:hover { text-decoration: underline; }

/* Liste des plannings types */
.modele-list { display: flex; flex-direction: column; gap: 8px; }
.modele-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; }
.modele-row__info { flex: 1; }
.modele-row__name { font-weight: 700; }
.modele-row__meta { font-size: 12px; color: var(--text-3); }
.btn--sm { padding: 7px 13px; font-size: 13px; }

/* Sélecteur de granularité (segmenté) */
.seg { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-left: 8px; }
.seg-btn { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: background 0.15s, color 0.15s; }
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn span { font-size: 12px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.seg-btn.is-active svg { color: var(--primary); }

/* Zones de glissement Déplacer / Copier */
/* v5.945 — bande DISCRÈTE en bas, comme à l'origine (la version pleine hauteur masquait le créneau).
   Le seul vrai défaut était ailleurs : les deux moitiés portaient la MÊME couleur, donc on ne voyait
   pas où finissait « déplacer » et où commençait « copier ». C'est ça qui est corrigé, rien d'autre. */
.dz-hint { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; min-height: 14px; max-height: 22px; display: flex; opacity: 0; pointer-events: none; border-radius: 0 0 6px 6px; overflow: hidden; transition: opacity 0.12s; z-index: 3; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.shift:hover .dz-hint, .day-bar:hover .dz-hint { opacity: 1; }
/* Jamais de "Déplacer/Copier" à l'impression (ni dans l'aperçu d'impression). */
@media print { .dz-hint { display: none !important; } }
.impr-root .dz-hint { display: none !important; }
/* Survol : texte blanc sur la couleur pleine du shift (lisible), séparation légère. */
/* min-width:0 + nowrap : sans ça, sur une colonne étroite le mot se coupait en deux lignes dans une
   bande de 22 px. La couleur porte déjà le sens, le mot ne fait que confirmer. */
.dz { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; font-size: 9px; font-weight: 700; color: #fff; letter-spacing: 0.1px; text-transform: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; }
/* Couleurs FIXES, jamais celle du shift : sur un créneau rose les deux moitiés étaient identiques
   (même fond + brightness .9). Ardoise = ça part · vert = ça se recopie. */
.dz--move { background: rgba(51, 65, 85, 0.88); }
.dz--copy { background: rgba(21, 128, 61, 0.88); border-left: 1px solid rgba(255, 255, 255, 0.7); }
/* Navigation préc/suiv dans la modale de shift */
.shift-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 12px; padding: 4px 6px; background: var(--surface-2); border-radius: 9px; }
.shift-nav__btn { border: 1px solid var(--border); background: var(--surface); color: var(--primary); min-width: 32px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800; }
.shift-nav__btn:hover { background: var(--primary-soft); }
.shift-nav__lbl { font-size: 11.5px; color: var(--text-muted); }
/* Hauteur stable de la modale shift : ne bouge pas quand on navigue entre shifts */
.modal__body:has(#f-type) { min-height: 430px; }
/* Anomalie en bas de la modale shift (réutilise le style toast, mais statique) */
.shift-anomalie.toast { position: relative; margin-top: 14px; width: 100%; box-sizing: border-box; opacity: 1; transform: none; animation: none; }
.shift-anomalie.toast--error { --halo-rgb: 220, 38, 38; }
.shift-anomalie.toast--warning { --halo-rgb: 245, 158, 11; }
/* Halo léger qui « respire » dans la couleur du contour. On anime l'OPACITÉ d'un pseudo-élément
   (porteur d'un box-shadow figé) au lieu du box-shadow lui-même → composité par le GPU, donc fluide
   sans à-coups même quand le fil principal est occupé (horloge, synchro, etc.). */
.shift-anomalie.toast::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 14px 2px rgba(var(--halo-rgb, 220, 38, 38), 0.6);
  opacity: 0.15; will-change: opacity;
  animation: anomalieRespire 2.6s ease-in-out infinite;
}
@keyframes anomalieRespire { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .shift-anomalie.toast::after { animation: none; opacity: 0.45; } }
.shift.is-dragging .dz-hint, .day-bar.is-dragging .dz-hint { opacity: 0; }

/* Blocs "journée" (repos, congé…) */
/* Shift de travail conservé sur un jour d'absence (le salarié est en congé/maladie ce jour-là).
   Il reste BIEN LISIBLE (horaires non barrés) mais différencié : légèrement estompé, grisé,
   et entouré d'un liseré pointillé pour signaler « programmé mais non presté ». */
.shift--attenue { opacity: .72; filter: saturate(.6); outline: 2px dashed var(--shift-color, #94a3b8); outline-offset: -3px; }
.shift--attenue:hover { opacity: 1; }
/* Shifts couverts par une absence (en pointillé) : masqués côté salarié (sauf comptes autorisés)
   et JAMAIS imprimés — pour ne pas faire croire au salarié qu'il est planifié alors qu'il est en CP. */
body.pl-masque-couv .planning .shift--attenue { display: none !important; }
@media print { .impr-root .shift--attenue { display: none !important; } }
/* Impression mode SALARIÉ : planning seul (shifts + H+, repos, congés) ; un jour de CP n'affiche que le congé
   (les shifts pointillés sont déjà masqués ci-dessus). Totaux limités : total semaine + heures sup + dimanche/férié. */
@media print {
  .impr-root.impr-public-salarie .frise { display: none !important; }                 /* bandeau briefing/opérations */
  .impr-root.impr-public-salarie .total-cell__ecart .tc-base,                          /* base contrat / équilibre / manque */
  .impr-root.impr-public-salarie .total-cell__abs,                                     /* heures trav. + détail absences */
  .impr-root.impr-public-salarie .total-cell__maintien,                                /* heures maintenues */
  .impr-root.impr-public-salarie .total-cell__rc,
  .impr-root.impr-public-salarie .total-cell__rc-ok,
  .impr-root.impr-public-salarie .total-cell__rc-0,                                    /* compteur repos compensateur */
  .impr-root.impr-public-salarie .total-cell__legal,                                   /* alerte durée légale */
  .impr-root.impr-public-salarie .rc-jauge { display: none !important; }               /* jauge de compensation (info manager) */
}
/* Impression COMPACTE : lignes & shifts resserrés (marges haut/bas réduites côté @page) pour densifier la page. */
@media print {
  .impr-root.impr-compact .day-cell { min-height: 28px !important; padding: 2px 4px !important; gap: 2px !important; }
  .impr-root.impr-compact .shift { padding: 1px 5px !important; margin-bottom: 1px !important; border-radius: 6px; line-height: 1.02 !important; }
  .impr-root.impr-compact .shift__time { font-size: 10px !important; line-height: 1.05 !important; }
  .impr-root.impr-compact .shift__role, .impr-root.impr-compact .shift__meta { font-size: 8px !important; line-height: 1.0 !important; }
  .impr-root.impr-compact .total-cell { padding: 5px 6px !important; gap: 2px !important; }
  .impr-root.impr-compact .total-cell__hours { font-size: 13px !important; }
  .impr-root.impr-compact .total-cell__sub { font-size: 9px !important; margin-top: 2px !important; }
  .impr-root.impr-compact .frise { padding: 2px 0 !important; margin-bottom: 4px !important; }
  .impr-root.impr-compact .print-entete { margin: 0 0 2px !important; font-size: 11px !important; }
  .impr-root.impr-compact .print-entete__date { font-size: 9.5px !important; }
  /* À l'IMPRESSION seulement : Base + contrat sur UNE ligne (gagne de la place). */
  .impr-root .emp-cell__meta { flex-direction: row !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap; }
  /* Case salarié RESSERRÉE à l'impression : police réduite pour que sa hauteur = celle des shifts (pas de blanc entre les lignes). */
  .impr-root.impr-compact .emp-cell { padding: 2px 8px !important; gap: 7px !important; align-items: flex-start !important; }
  .impr-root.impr-compact .emp-cell__name { font-size: 11px !important; line-height: 1.08 !important; margin: 0 !important; }
  .impr-root.impr-compact .emp-cell__rayon { font-size: 9px !important; line-height: 1.05 !important; margin: 0 !important; }
  .impr-root.impr-compact .emp-cell__meta { font-size: 8.5px !important; margin-top: 0 !important; gap: 5px !important; }
  .impr-root.impr-compact .emp-cell__mat { margin: 1px 0 !important; gap: 5px !important; }
  .impr-root.impr-compact .mat-badge { font-size: 8.5px !important; padding: 0 4px !important; }
  .impr-root.impr-compact .emp-cell__logos { font-size: 10px !important; gap: 4px !important; }
  .impr-root.impr-compact .emp-cell__photo, .impr-root.impr-compact .emp-cell__photo .avatar, .impr-root.impr-compact .avatar { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 10px !important; }
  /* Libellés repos/congé : alignés à GAUCHE, repli sur 2 lignes DANS la case (pas de troncature ni de décalage des autres cases). */
  .impr-root .shift--journee .shift__time, .impr-root .conge-bloc__t {
    white-space: normal !important; overflow: hidden !important; text-overflow: clip !important;
    text-align: left !important; justify-content: flex-start !important; min-width: 0 !important;
  }
  /* Le wrapper de défilement « marquee » (.mq-in : inline-block + nowrap) empêchait le retour à la ligne → neutralisé en impression. */
  .impr-root .mq-in { white-space: normal !important; display: inline !important; animation: none !important; transform: none !important; }
  /* Repos compensateur (congé) : libellé sur 2 lignes comme le repos hebdo (sinon flex en 1 ligne, plus court). */
  .impr-root .conge-bloc__t { display: block !important; white-space: normal !important; }
  .impr-root .conge-nom { white-space: normal !important; display: inline !important; }
  /* « Validé » masqué sous les repos compensateur / congés à l'impression. */
  .impr-root .conge-bloc__s { display: none !important; }
  /* Blocs repos hebdo & repos compensateur : MÊME taille, hauteur NATURELLE (ne remplissent pas la case), en haut. */
  .impr-root .day-cell .shift--journee, .impr-root .day-cell .conge-bloc { flex: 0 0 auto !important; align-self: stretch !important; min-height: 0 !important; display: flex; flex-direction: column; justify-content: flex-start; }
  /* Ajustement par CSS (sans zoom) : le planning prend la LARGEUR de la page, le grid s'adapte → colonnes alignées. */
  .impr-root.impr-cssfit { width: 100% !important; max-width: 100% !important; flex: none !important; zoom: 1 !important; }
  .impr-root.impr-cssfit .planning-wrap, .impr-root.impr-cssfit .planning, .impr-root.impr-cssfit .page { width: 100% !important; max-width: 100% !important; }
}
/* Info-motif transformée en ALERTE (encadré orange) pour repos hebdo / repos compensateur. */
.type-info--warn { background: #fff6e6; border: 1px solid #f1c270; border-radius: 10px; padding: 9px 12px; color: #7c4d00; }
.type-info--warn b { color: #5e3a00; }
.shift--journee { border-left-color: var(--shift-color); background: var(--shift-bg) !important; }
.shift--journee .shift__time { color: var(--shift-color); font-weight: 600; }
.select.is-maladie { color: #dc2626; font-weight: 700; border-color: #dc2626; }

/* ===================== Vue JOUR (timeline) ===================== */
.planning--jour .planning__row { grid-template-columns: 232px minmax(0, 1fr) 152px; }
.day-axis { display: flex; border-left: 1px solid var(--border); }
.day-axis .hour-col { flex: 1; border-right: 1px solid var(--border); padding: 10px 0 8px 6px; min-width: 0; }
.day-axis .hour-col span { font-size: 11px; font-weight: 700; color: var(--text-3); }
.day-axis--foot { background: transparent; border-left: none; }
.day-track { position: relative; border-left: 1px solid var(--border); min-height: 76px; padding: 9px 0; }
.day-grid { position: absolute; inset: 0; display: flex; }
.day-grid .hour-col { flex: 1; border-right: 1px solid var(--border); }
.day-track__add { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 7px; border: 1px dashed var(--border-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s; z-index: 4; }
.day-track:hover .day-track__add { opacity: 1; }
.day-track__add:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.day-track__add svg { width: 14px; height: 14px; }
.day-bar {
  position: absolute;
  border-radius: 8px; padding: 5px 9px; cursor: grab; overflow: hidden;
  border-left: 3px solid var(--shift-color, var(--primary));
  background: var(--shift-bg, var(--primary-soft));
  display: flex; flex-direction: column; justify-content: center; gap: 1px; z-index: 2;
  transition: box-shadow 0.12s, transform 0.08s;
}
.day-bar:hover { box-shadow: var(--shadow-md); z-index: 5; }
.day-bar__title { font-size: 12px; font-weight: 700; color: var(--shift-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-bar__time { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-bar--journee { background: var(--shift-bg) !important; border-left-color: var(--shift-color); padding: 2px 10px; justify-content: center; }
.day-bar--journee .day-bar__title { color: var(--shift-color); font-size: 11px; }
.day-bar.is-dragging { opacity: 0.4; }

/* Libellé de période : n° de semaine distinct + date couleur du cadenas */
.wk-num { display: inline-block; color: var(--primary-dark); background: var(--primary-soft); padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 800; vertical-align: middle; text-transform: none; }
.wk-date { font-weight: 700; }
.wk-date.cad-ouvert { color: var(--success); }
.wk-date.cad-managers { color: var(--warning); }
.wk-date.cad-paye { color: var(--danger); }

/* ===================== Vues larges (Mois) : défilement horizontal ===================== */
.planning--large { overflow-x: auto; }
.month-head { padding: 8px 0; text-align: center; border-left: 1px solid var(--border); }
.month-head__d { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.month-head__n { font-size: 12.5px; font-weight: 700; }
.month-head.is-weekend { background: var(--surface-2); }
.month-head.is-today { background: var(--primary-soft-2); }
.month-head.is-today .month-head__n { color: var(--primary); }
.month-cell { border-left: 1px solid var(--border); min-height: 66px; padding: 4px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.month-cell.is-weekend { background: var(--surface-2); }
.month-cell.is-today { background: var(--primary-soft-2); }
.month-cell:hover { background: var(--primary-soft); }
.month-chip { border-left: none !important; padding: 2px 1px !important; font-size: 10px; font-weight: 800; color: #fff; border-radius: 5px; text-align: center; line-height: 1.3; overflow: hidden; white-space: nowrap; }
.month-chip--journee { background: rgba(139, 144, 160, 0.9); }
.foot-cell--mini { border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-2); }

/* ===================== Vue Année (12 mois) ===================== */
.year-head { padding: 12px 0; text-align: center; border-left: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.3px; }
.year-cell { border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; min-height: 62px; font-size: 13.5px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: background 0.12s; }
.year-cell.has { color: var(--primary-dark); background: var(--primary-soft-2); }
.year-cell:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* Lien sur le nom dans le tableau équipe */
.cell-emp--link { cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; transition: background 0.12s; }
.cell-emp--link:hover { background: var(--primary-soft); }
.cell-emp__mail { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.pastille { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.pastille--ok { background: var(--success-soft); color: #0c6b43; }
.pastille--off { background: var(--surface-2); color: var(--text-3); }
.pastille--amber { background: var(--warning-soft); color: #8a5a00; }

/* v5.526 : MISSIONS sur téléphone — cartes au lieu du tableau 4 colonnes (demande Mika) */
.mm-liste { display: flex; flex-direction: column; gap: 8px; }
.mm-carte { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.mm-carte input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; flex: 0 0 auto; }
.mm-carte.is-on { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.mm-carte:not(.is-on) { opacity: .68; }
.mm-carte__c { display: flex; flex-direction: column; min-width: 0; }
.mm-carte__n { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.mm-carte__d { font-size: 11.5px; color: var(--text-3); }
.mm-carte__p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 13px; white-space: nowrap; }
.mm-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 11px 14px; background: var(--surface-2); border-radius: 12px; font-weight: 700; }
.mm-total b { font-size: 16px; color: var(--primary); }

/* v5.528 : Effectif (Contrats) — le tableau 7 colonnes « Détail de l'effectif » devient des cartes lisibles sur téléphone ; les 2 tableaux de stats s'empilent */
.eff-liste { display: flex; flex-direction: column; gap: 10px; }
.eff-carte { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; background: var(--surface); padding: 11px 13px; }
.eff-carte__hd { display: flex; align-items: center; gap: 10px; }
.eff-carte__id { flex: 1; min-width: 0; }
.eff-carte__n { font-weight: 700; font-size: 14px; line-height: 1.25; }
.eff-carte__pos { font-size: 11.5px; color: var(--text-3); line-height: 1.3; margin-top: 1px; }
.eff-carte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); }
.eff-carte__meta > span { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.eff-carte__meta i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.eff-carte__doc { flex: 1; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 6px !important; }
body.mob-hub .ct-2col { grid-template-columns: 1fr !important; }

/* v5.529 : historiques Contrats créés / Archives — cartes au lieu d'un tableau qui slide sur téléphone */
.hliste { display: flex; flex-direction: column; gap: 10px; }
.hcarte { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; background: var(--surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; }
.hcarte__top { display: flex; align-items: center; gap: 8px; }
.hcarte__n { font-weight: 700; font-size: 14px; line-height: 1.25; flex: 1; min-width: 0; }
.hcarte__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hcarte__meta { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.hcarte__act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.hcarte__act .btn { min-width: 40px; }
/* v5.546 : « Reprendre un ancien salarié » (pré-remplissage du contrat) */
.repr-liste { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.repr-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.repr-row:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.repr-row__info { display: flex; flex-direction: column; min-width: 0; }
.repr-row__nom { font-weight: 700; font-size: 14px; line-height: 1.25; }
.repr-row__meta { font-size: 12px; color: var(--text-3); }

/* ===================== Fiche employé ===================== */
/* Cartes-badges de l'équipe (bandeau PÂLE teinté du poste, comme les shifts ; clic -> pop-up fiche) */
.emp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 22px; }
.emp-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; cursor: pointer; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s; }
.emp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.emp-card__head { height: 72px; background: color-mix(in srgb, var(--cc, var(--primary)) 18%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--cc, var(--primary)) 30%, var(--surface)); }
.emp-card__photo { display: flex; justify-content: center; margin-top: -42px; }
.emp-card__photo .avatar { width: 84px; height: 84px; font-size: 28px; border-radius: 24px; box-shadow: 0 0 0 5px var(--surface), 0 6px 16px rgba(0,0,0,.16); }
/* Bulle d'initiales en teinte PÂLE du poste (comme les shifts) ; une photo garde son image */
.emp-card__photo .avatar:not(.avatar--photo) { background: color-mix(in srgb, var(--cc, var(--primary)) 22%, var(--surface)) !important; color: var(--cc, var(--primary)); }
.emp-card__body { flex: 1; padding: 12px 18px 18px; text-align: center; }
.emp-card__name { font-weight: 800; font-size: 16.5px; letter-spacing: -.3px; }
.emp-card__mat { margin: 7px 0 4px; }
.emp-card__statut { margin-bottom: 10px; }
.emp-card__info { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.emp-card__info > div { line-height: 1.45; }
.emp-card__dates { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.55; }
.emp-card__fin { color: #c77c1c; font-weight: 700; }
.emp-card__cout { margin-top: 12px; font-size: 15px; font-weight: 800; color: var(--cc, var(--primary)); }
.emp-card__foot { border-top: 1px solid var(--border); padding: 13px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); }
.emp-card__poste { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--cc, var(--primary)); background: color-mix(in srgb, var(--cc, var(--primary)) 14%, var(--surface)); padding: 5px 13px; border-radius: 999px; }
.emp-card__poste::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--primary)); flex-shrink: 0; }
.emp-card__icons { display: inline-flex; gap: 6px; font-size: 16px; }
/* Carte réduite (salarié simple) : non cliquable — pas d'effet de survol. */
.emp-card--min { cursor: default; }
.emp-card--min:hover { box-shadow: var(--shadow-sm); transform: none; }
.emp-card--min .emp-card__body { padding: 14px 18px 16px; display: flex; align-items: center; justify-content: center; }

/* Organigramme (vue Équipe) : tiers par rôle reliés par un trait central */
.orga { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0 12px; }
.orga-tier { width: 100%; display: flex; flex-direction: column; align-items: center; }
.orga-tier__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.orga-tier__n { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 11px; padding: 1px 8px; border-radius: 999px; letter-spacing: 0; }
.orga-tier__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; width: 100%; }
.orga-tier__cards .emp-card { width: 248px; flex: 0 0 auto; }
.orga-link { width: 2px; height: 34px; background: var(--border); position: relative; }
.orga-link span { position: absolute; left: 50%; bottom: -1px; width: 9px; height: 9px; border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: translateX(-50%) rotate(45deg); }
.emp-card__del { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.55); color: var(--text-2); border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s, color .12s; z-index: 2; }
.emp-card:hover .emp-card__del { opacity: 1; }
/* v5.526 : carte salarié COMPACTE sur téléphone — avatar à gauche, infos à droite, bordure = couleur du poste
   (fini le bandeau 72px + avatar 84px + tout centré empilé). Cartes ~2,5× plus courtes. Demande Mika. */
body.mob-hub .empm-page .emp-cards, body.mob-hub .empm-page .orga-tier__cards { gap: 10px; }
body.mob-hub .empm-page .emp-card, body.mob-hub .empm-page .orga-tier__cards .emp-card {
  display: grid; grid-template-columns: 54px 1fr; grid-template-areas: "photo body" "photo foot";
  column-gap: 12px; align-items: center; width: auto; max-width: 100%; overflow: visible;
  padding: 10px 12px; border-radius: 14px; border-left: 4px solid var(--cc, var(--primary)); }
body.mob-hub .empm-page .emp-card__head { display: none; }
body.mob-hub .empm-page .emp-card__photo { grid-area: photo; margin: 0; }
body.mob-hub .empm-page .emp-card__photo .avatar { width: 54px !important; height: 54px !important; font-size: 19px; border-radius: 16px; box-shadow: 0 0 0 3px var(--surface); }
body.mob-hub .empm-page .emp-card__body { grid-area: body; text-align: left; padding: 0; }
body.mob-hub .empm-page .emp-card__name { font-size: 15px; }
body.mob-hub .empm-page .emp-card__mat { display: inline-block; margin: 3px 6px 0 0; }
body.mob-hub .empm-page .emp-card__statut { display: inline-block; margin: 0; }
body.mob-hub .empm-page .emp-card__info { flex-direction: row; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 12px; }
body.mob-hub .empm-page .emp-card__dates { flex-basis: 100%; margin-top: 1px; }
body.mob-hub .empm-page .emp-card__cout { display: inline-block; margin: 4px 0 0; font-size: 13.5px; }
body.mob-hub .empm-page .emp-card__foot { grid-area: foot; border-top: 0; background: transparent; padding: 5px 0 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
body.mob-hub .empm-page .emp-card__poste { padding: 3px 10px; }
body.mob-hub .empm-page .emp-card__del { top: 7px; right: 7px; opacity: 1; background: transparent; width: 26px; height: 26px; }
/* Carte réduite salarié : avatar + nom sur une ligne */
body.mob-hub .empm-page .emp-card--min { grid-template-areas: "photo body"; }
body.mob-hub .empm-page .emp-card--min .emp-card__body { display: block; padding: 0; }
.emp-card__del:hover { background: var(--danger-soft); color: var(--danger); }
.emp-card__del svg { width: 16px; height: 16px; }

/* Pop-up fiche employé */
/* v5.745 — élargie de 980 à 1180 px : à 980 la ligne « mi-temps thérapeutique » (4 champs +
   les 7 jours de la semaine + le motif) était illisible, on ne lisait plus les libellés. */
.fiche-modal { background: var(--bg); width: 1180px; max-width: 96vw; max-height: 94vh; overflow: auto; border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.fiche-modal__bar { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0; }
.fiche-modal .page { padding: 20px 22px 26px; }
.fiche-modal .fiche { max-width: none; }

.fiche { max-width: 940px; }
.fiche-head { display: flex; align-items: center; gap: 20px; padding: 20px 22px; margin-bottom: 18px; }
.fiche-head__name { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.fiche-head__sub { color: var(--text-3); font-weight: 600; font-size: 13.5px; margin: 2px 0 12px; }
.fiche-head__actions { display: flex; gap: 8px; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.fiche-nom { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.12; }
.fiche-nom__p { display: block; }
.fiche-nom__n { display: block; font-size: .85em; white-space: nowrap; }
/* Sur téléphone, le nom de la fiche prend le dégradé « ciel » du hero (même effet que le prénom du hero), mis à jour en direct. */
body.mob-hub .fiche-nom { background: linear-gradient(92deg, var(--mob-sky, var(--primary)), color-mix(in srgb, var(--mob-sky, var(--primary)) 55%, #7c4dff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.fiche-photo { position: relative; flex: 0 0 auto; }
.fiche-photo__edit { position: absolute; right: -1px; bottom: -1px; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--surface); background: var(--primary); color: #fff; font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.22); padding: 0; }
.fiche-photo__edit:hover { filter: brightness(1.08); }
.fiche-sec { padding: 20px 22px; margin-bottom: 18px; border: 1px solid var(--border); transition: box-shadow .15s, border-color .15s; }
.fiche-sec:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }
.fiche-head { border: 1px solid var(--border); }
.fiche-sec__title { font-size: 15px; font-weight: 800; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.fiche-sec__desc { font-size: 13px; color: var(--text-3); margin: -8px 0 16px; }
.calc-box { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 800; color: var(--primary-dark); padding: 7px 0; }
.calc-box span { font-variant-numeric: tabular-nums; }
.btn--sm { padding: 7px 13px; font-size: 13px; }

/* Tableau horaires type */
.ht-table { display: flex; flex-direction: column; gap: 6px; }
.ht-row { display: grid; grid-template-columns: 90px 110px 1fr 1fr 70px 1fr; gap: 8px; align-items: center; }
.ht-row--head { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.3px; padding: 0 2px 2px; }
.ht-row__jour { font-weight: 700; font-size: 13px; text-transform: capitalize; }
.ht-row .select { padding: 8px 10px; }
.ht-travail { display: contents; }

/* Horaires type v2 : roulement A/B + 2 plages */
.ht-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.ht-tab { padding: 8px 16px; border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.ht-tab__h { font-size: 10px; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.ht-tab.is-active { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.ht-panel { display: flex; flex-direction: column; gap: 10px; }
.ht2-day { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.ht2-day__head { display: flex; align-items: center; gap: 14px; }
.ht2-day__jour { font-weight: 700; font-size: 14px; text-transform: capitalize; width: 92px; }
.ht2-day__head .select { max-width: 150px; }
.ht-plages { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ht-plage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ht2-plabel { font-size: 11px; font-weight: 700; color: var(--text-3); width: 52px; flex-shrink: 0; }
.ht-plage .select { padding: 8px 10px; }
.ht-plage .ht-debut, .ht-plage .ht-fin { min-width: 86px; }
.ht-plage .ht-pause { max-width: 80px; }
.ht-plage .ht-poste { min-width: 120px; }
.ht2-sep { color: var(--text-3); font-weight: 700; }
.ht2-coupure { font-size: 13px; margin: 2px 0 2px 52px; }

/* ===================== Tableau de bord (KPI) ===================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.kpi__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi__icon svg { width: 22px; height: 22px; }
.kpi__val { font-size: 23px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.kpi__label { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.kpi--violet .kpi__icon { background: var(--primary-soft); color: var(--primary); }
.kpi--green .kpi__icon { background: var(--success-soft); color: var(--success); }
.kpi--amber .kpi__icon { background: var(--warning-soft); color: var(--warning); }
.kpi--blue .kpi__icon { background: #e3f1fb; color: #2d9cdb; }
.kpi--muted .kpi__icon { background: var(--surface-2); color: var(--text-3); }
.kpi--red .kpi__icon { background: #fde7eb; color: #c0334e; }
.kpi--red .kpi__val { color: var(--danger, #c0334e); }
.table tfoot .tfoot td { background: var(--surface-2); border-top: 2px solid var(--border-2); font-size: 14px; }

/* ===== Carte « Validation paie » — style aligné KPI/shifts/pastilles (v5.361) ===== */
.vp-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--vp-accent, var(--border-2)); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; transition: box-shadow .15s, transform .15s; }
.vp-card:hover { box-shadow: var(--shadow-md); }
.vp-card.is-ok { --vp-accent: var(--success); }
.vp-card.is-todo { --vp-accent: var(--danger); }
.vp-card--estim { --vp-accent: #2d9cdb; background: color-mix(in srgb, #2d9cdb 4%, var(--surface)); }
/* Sur téléphone, la barre d'accent + le fond de la carte « estimation » suivent la couleur du hero (ciel du moment), mise à jour en direct par majCiel. */
body.mob-hub .vp-card--estim { --vp-accent: var(--mob-sky, #2d9cdb); background: color-mix(in srgb, var(--mob-sky, #2d9cdb) 6%, var(--surface)); }
.vp-retdet { margin: 2px 0 12px; padding: 9px 12px; background: color-mix(in srgb, #c0334e 5%, var(--surface-2)); border: 1px solid color-mix(in srgb, #c0334e 22%, var(--border)); border-radius: 11px; font-size: 12.5px; }
.vp-retdet__hd { font-weight: 700; color: #c0334e; margin-bottom: 5px; }
.vp-retdet__hd b { color: #c0334e; }
.vp-retdet__row { padding: 3px 0; }
.vp-retdet__row + .vp-retdet__row { border-top: 1px dashed color-mix(in srgb, #c0334e 18%, var(--border)); }
.vp-retdet__nom { color: var(--text); }
.vp-retdet__nom b { color: var(--text); font-weight: 700; }
.vp-retdet__why { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
.vp-abslist { display: flex; flex-direction: column; gap: 6px; }
.vp-abs { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 9px; border-left: 3px solid var(--abs-c, currentColor); font-size: 12.5px; }
.vp-abs__ic { flex: 0 0 auto; font-size: 14px; }
.vp-abs__nom { font-weight: 700; }
.vp-abs__meta { margin-left: auto; font-weight: 600; white-space: nowrap; opacity: .85; }
.vp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; flex-wrap: wrap; }
.vp-head__r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vp-body { padding: 0 16px 16px; }
.vp-bar { display: flex; height: 28px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); margin: 2px 0 8px; }
.vp-bar > span { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; min-width: 0; }
.vp-seg-w { background: var(--success-soft); color: #0c6b43; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--success) 22%, transparent); }
.vp-seg-a { background: #e6f2fb; color: #1a6fa3; box-shadow: inset -1px 0 0 color-mix(in srgb, #2d9cdb 22%, transparent); }
.vp-seg-c { background: var(--primary-soft); color: var(--primary-dark); }
/* Absence NON PAYÉE (retenue) : hachures diagonales par-dessus la teinte de catégorie (le fond est posé en inline via background-color). */
.vp-bar > span.vp-seg-off { min-width: 4px; } /* v5.478 : plus de min-width 20px qui écrasait la barre — un petit segment reste un fin liseré propre (détail au survol via title) */
.vp-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-3); margin-bottom: 12px; }
.vp-legend .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.vp-legend .dot--off { opacity: .5; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.vp-legend .vp-leg-ret { font-style: normal; opacity: .6; font-size: 10.5px; }
.vp-legend .total { margin-left: auto; font-weight: 800; color: var(--text); font-size: 13px; white-space: nowrap; }
.vp-legend .total .vp-total-ret { color: var(--danger); font-weight: 700; }
.vp-sub .vp-sub-ret { color: var(--danger); }
.vp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vp-tile { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; }
.vp-tile__ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.vp-tile__val { font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1.05; }
.vp-tile__lbl { font-size: 11px; color: var(--text-3); font-weight: 600; margin-top: 1px; }
.vp-tile--green .vp-tile__ic { background: var(--success-soft); color: var(--success); }
.vp-tile--blue .vp-tile__ic { background: #e3f1fb; color: #2d9cdb; }
.vp-tile--violet .vp-tile__ic { background: var(--primary-soft); color: var(--primary); }
.vp-tile--amber .vp-tile__ic { background: var(--warning-soft); color: var(--warning); }
.vp-tile--red .vp-tile__ic { background: #fde7eb; color: #c0334e; }
.vp-tile--red .vp-tile__val { color: #c0334e; }
.vp-tile--muted .vp-tile__ic { background: #fff; color: var(--text-3); border: 1px solid var(--border); }
.vp-tile--paye { background: var(--primary-soft-2); border-color: var(--primary-soft); }
.vp-tile--paye .vp-tile__val { color: var(--primary-dark); }
.vp-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-2); }
.vp-sub b { color: var(--text); font-weight: 700; }
.vp-sub .vp-sub-tot { color: var(--primary-dark); }
.vp-sub .vp-sub-tot b { color: var(--primary-dark); }
.vp-calc { margin: 2px 0 12px; padding: 3px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; font-size: 12.5px; }
.vp-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--text-2); }
.vp-calc__row + .vp-calc__row { border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.vp-calc__row i { font-style: normal; color: var(--text-3); font-size: 11px; }
.vp-calc__row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-calc__row--plus b { color: var(--success); }
.vp-calc__row--moins b { color: #c0334e; }
.vp-calc__row--tot span { font-weight: 800; color: var(--primary-dark); }
.vp-calc__row--tot b { color: var(--primary-dark); font-size: 15px; }
/* v5.565 — Heures majorées (dimanche/férié/1er Mai) + repos compensateur (carte paie salarié) */
.vp-maj { margin: 2px 0 12px; padding: 4px 12px; background: color-mix(in srgb, var(--primary) 5%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 11px; font-size: 12.5px; }
.vp-maj__hd { font-weight: 700; color: var(--primary-dark); padding: 6px 0 2px; }
.vp-maj__row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.vp-maj__row + .vp-maj__row { border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border)); }
.vp-maj__ic { flex: 0 0 auto; font-size: 15px; }
.vp-maj__nom { flex: 1; color: var(--text-2); }
.vp-maj__nom i { font-style: normal; color: var(--text-3); font-size: 11px; }
.vp-maj__val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-maj__val i { font-style: normal; font-weight: 700; color: var(--primary); font-size: 11px; margin-left: 2px; }
.vp-maj__row--rc .vp-maj__val { color: var(--primary-dark); }
/* v5.565 — Créneaux horaires réels du mois (repliable) */
.vp-cr { margin: 2px 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); overflow: hidden; font-size: 12.5px; }
.vp-cr > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.vp-cr > summary::-webkit-details-marker { display: none; }
.vp-cr > summary::after { content: "▾"; margin-left: auto; color: var(--text-3); transition: transform .18s; }
.vp-cr[open] > summary::after { transform: rotate(180deg); }
.vp-cr__n { font-weight: 600; color: var(--text-3); font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px; }
.vp-cr__list { padding: 2px 12px 8px; }
.vp-cr__row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.vp-cr__row + .vp-cr__row { border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.vp-cr__j { flex: 0 0 auto; min-width: 76px; color: var(--text-2); font-weight: 600; }
.vp-cr__h { flex: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.vp-cr__t { flex: 0 0 auto; color: var(--primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-lines { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vp-chips__lbl { font-size: 11.5px; color: var(--text-3); font-weight: 700; margin-right: 2px; }
.vp-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vp-chip--maj { background: #fde7eb; color: #c0334e; }
.vp-chip--majo { background: #eef0f5; color: #5b6075; }
.vp-chip--abs { background: var(--warning-soft); color: #8a5a00; }
.vp-chip--prime { background: var(--primary-soft); color: var(--primary-dark); }
/* Zone validation salarié (espace employé) */
.vp-valide { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.vp-valide__chk { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; margin-bottom: 10px; }
.vp-valide__chk input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); }

@media (max-width: 900px) {
  .fiche-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sous-menu (Fiches employés) */
/* v5.316 : sous-items regroupés par un RAIL vertical teinté ciel (hiérarchie lisible) */
.nav-item--sub { padding-left: 16px; margin-left: 16px; border-left: 2px solid var(--nav-t2, var(--border)); border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 13px; }
.nav-item--sub svg { width: 16px; height: 16px; }

/* Logo dynamique */
.sidebar__logo.has-img { padding: 0; box-shadow: none; }   /* v5.333 : logo PLAT, fondu invisible dans la barre du menu (demande Mika) — plus de caisson/ombre ; l'image est transparente et la comète reste derrière */
.sidebar__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }   /* v5.331 : fond blanc rendu VRAIMENT transparent par deblanchirLogo (app.js) — plus de multiply */
/* v5.312 : logo animé (loups qui marchent, leme-anim.mp4) — contain + multiply pour effacer le fond blanc de la vidéo */
.sidebar__logo.has-img video.logo-vid { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; display: block; mix-blend-mode: multiply; }
.logo-preview { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), #8a7bff); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; overflow: hidden; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.logo-label { font-size: 11px; font-weight: 700; color: var(--text-3); margin-top: 6px; }

/* Matricule */
.mat-badge { display: inline-block; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; vertical-align: middle; letter-spacing: 0.5px; }
.matricule-row { display: flex; gap: 10px; align-items: center; }
.matricule-row .select { max-width: 160px; }
.cadena-mat { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); flex-shrink: 0; transition: all 0.15s; }
.cadena-mat svg { width: 18px; height: 18px; }
.cadena-mat.is-locked { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.cadena-mat.is-open { background: var(--success-soft); color: var(--success); border-color: transparent; }

/* Soldes de congés (fiche) */
.solde-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.solde-cell { border-radius: 11px; padding: 14px 10px; text-align: center; background: var(--surface-2); }
.solde-cell__v { font-size: 22px; font-weight: 800; line-height: 1; }
.solde-cell__l { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 5px; }
.solde--violet { background: var(--primary-soft); } .solde--violet .solde-cell__v { color: var(--primary-dark); }
.solde--green { background: var(--success-soft); } .solde--green .solde-cell__v { color: #0c6b43; }
.solde--amber { background: var(--warning-soft); } .solde--amber .solde-cell__v { color: #8a5a00; }
.solde--blue { background: #e3f1fb; } .solde--blue .solde-cell__v { color: #2178b8; }
.solde--red { background: var(--danger-soft); } .solde--red .solde-cell__v { color: var(--danger); }
.solde--muted .solde-cell__v { color: var(--text-2); }
/* Variante compacte (suivi des congés) : tuiles plus petites, s'adaptent en largeur. */
.solde-grid--sm { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: 6px; }
.solde-grid--sm .solde-cell { padding: 8px 6px; border-radius: 9px; }
.solde-grid--sm .solde-cell__v { font-size: 17px; }
.solde-grid--sm .solde-cell__l { font-size: 10px; margin-top: 3px; }
.solde-cell__ico { font-size: 15px; line-height: 1; margin-bottom: 4px; }

/* Congés : blocs dans le planning */
/* Absences : bloc GRIS, type écrit dans la couleur de sa catégorie (--abs) + icône */
.conge-bloc { border-radius: 8px; padding: 6px 9px; cursor: pointer; border-left: 3px solid var(--abs, #8b90a0); background: #eef0f4; transition: box-shadow 0.12s; }
.conge-bloc:hover { box-shadow: var(--shadow-md); }
.conge-bloc__t { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.conge-nom { color: var(--abs, #5b6075); }
.conge-bloc__s { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.conge-ic { flex-shrink: 0; }
/* Journée d'absence posée dans le planning : même style gris + type coloré */
.shift--abs { background: #eef0f4 !important; border-left-color: var(--abs, #8b90a0) !important; }
.shift--abs .shift__time { color: var(--abs, #5b6075); font-weight: 700; }
/* Pastille (Mois) : icône sur fond gris, liseré couleur catégorie */
.conge-chip { background: #eef0f4 !important; color: var(--abs, #5b6075) !important; border: 1px solid var(--abs, #c9cddb); cursor: pointer; }
/* Bande (Jour) */
.conge-bande { cursor: pointer; background: #eef0f4 !important; border-left-color: var(--abs, #8b90a0); }
.conge-bande .day-bar__title { color: var(--abs, #5b6075); }
.conge-bande .conge-nom { color: var(--abs, #5b6075); }
/* Atténuation : absence en attente / en demande (jusqu'à validation) */
.conge--attenue { opacity: 0.5; }
.conge--attenue:hover { opacity: 0.8; }
.conge--refuse { opacity: 0.5; text-decoration: line-through; }

/* Pastille de statut (onglet Congés) */
.pastille-statut { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.btn--sm { padding: 7px 12px; font-size: 12.5px; }
.btn-valide { background: var(--success-soft); color: #0c6b43; }
.btn-valide:hover { background: #d3f3e3; }
.btn-refuse { background: var(--danger-soft); color: var(--danger); }
.btn-refuse:hover { background: #fbdce2; }
.conge-recap { margin-top: 4px; padding: 11px 14px; background: var(--surface-2); border-radius: 10px; font-size: 13px; color: var(--text-2); }

/* Trajet domicile–travail */
.trajet-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.trajet-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--primary-dark); background: var(--primary-soft); padding: 8px 14px; border-radius: 12px; }
.trajet-badge__km { font-size: 13px; font-weight: 600; color: var(--text-2); }
.trajet-non { font-size: 13.5px; color: var(--text-3); font-weight: 600; }
.trajet-map { height: 0; border-radius: 12px; overflow: hidden; transition: height 0.2s; }
.trajet-map.is-shown { height: 320px; border: 1px solid var(--border); }
.trajet-map .leaflet-control-attribution { font-size: 9px; }
/* La règle globale "svg { width:20px }" rognait le SVG de Leaflet (tracé invisible). */
.leaflet-container svg, .leaflet-pane svg, .leaflet-overlay-pane svg { width: auto; height: auto; max-width: none; max-height: none; }
.map-pin { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(29, 32, 51, 0.4); }
.map-pin--emoji, .map-pin--home { font-size: 21px; }
.map-pin--home { background: #eef0ff; border-color: var(--primary); }
.map-pin--store { padding: 0; overflow: hidden; border-color: var(--primary); }
.map-pin--store img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* Rapports */
.rapport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.codes-legende { margin-top: 6px; }
.codes-legende summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--primary-dark); }
.codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.codes-grid code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-weight: 700; color: var(--text); margin-right: 4px; }
@media (max-width: 900px) { .rapport-grid { grid-template-columns: 1fr; } }

/* Rapport de paie (tableau large à blocs) */
.pay-leg { margin-left: 8px; font-size: 12px; }
.pay-pos { color: #e2474b; font-weight: 600; }
.pay-neg { color: #2d6cdf; font-weight: 600; }
.pay-blocs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pay-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.pay-chip:hover { border-color: var(--primary); color: var(--text); }
.pay-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pay-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.pay-table { min-width: max-content; border-collapse: separate; border-spacing: 0; margin: 0; }
.pay-table th, .pay-table td { white-space: nowrap; border-bottom: 1px solid var(--border); }
.pay-table thead tr:first-child th { border-bottom: 1px solid var(--border); }
.pay-grp { text-align: center; background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); border-left: 2px solid var(--border); }
.pay-sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--border); }
.pay-table thead .pay-sticky { background: var(--surface-2); }
.pay-corner { z-index: 2; }
.pay-table .cell-emp__name { font-weight: 600; }
.pay-inp { width: 78px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; background: var(--surface); color: var(--text); }
.pay-inp--txt { width: 150px; }
.pay-inp:focus { border-color: var(--primary); outline: none; }

/* Règles et compteurs */
.regles-bloc { max-width: 760px; }
.regle-row { display: flex; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.regle-row__label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.regle-row__ctrl { flex-shrink: 0; display: flex; justify-content: flex-end; }
.regle-aide { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-3); color: var(--text-3); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.regle-aide:hover { border-color: var(--primary); color: var(--primary); }
.regle-aide[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 280px; white-space: normal; text-align: left;
  background: var(--text); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45;
  padding: 9px 11px; border-radius: 9px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 200;
}
.regle-aide[data-tip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--text);
  opacity: 0; transition: opacity .15s; z-index: 200;
}
.regle-aide[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.regle-aide[data-tip]:hover::before { opacity: 1; }
.regle-row .duo { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.regle-row .duo .input { max-width: 120px; text-align: center; }
.regle-row .suffix { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.regle-row .suffix .input { max-width: 90px; text-align: center; }
.regle-row .input, .regle-row .select { background: var(--surface-2); }
/* Interrupteur */
.switch { width: 46px; height: 26px; border-radius: 20px; background: var(--border-2); position: relative; transition: background 0.2s; flex-shrink: 0; }
.switch.is-on { background: var(--primary); }
.switch__dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.switch.is-on .switch__dot { transform: translateX(20px); }

/* Alertes (page Règles et compteurs) */
.alerte-entete { display: grid; grid-template-columns: 60px 1fr 70px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.alerte-entete__a, .alerte-entete__b { font-size: 11px; font-weight: 700; color: var(--text-3); }
.alerte-entete__b { text-align: right; }
.alerte-entete__t { font-size: 15px; font-weight: 800; }
.alerte-row { display: grid; grid-template-columns: 60px 1fr 70px; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.alerte-row:last-child { border-bottom: none; }
.alerte-row.is-off { opacity: 0.5; }
.alerte-row__titre { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.alerte-row__desc { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.alerte-row__bloq { display: flex; justify-content: flex-end; }
.alerte-row__bloq input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.alerte-param { width: 54px; padding: 3px 6px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface-2); font-weight: 700; text-align: center; font-size: 12.5px; margin: 0 2px; }
.banner--alerte { background: var(--danger-soft); color: #97223c; align-items: flex-start; }
.param-aff { text-align: center; }
.suffix .param-aff { max-width: 80px; }

/* Règles du rapport (tranches de majoration) */
.seg-ic { margin-right: 5px; }
.rr-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.rr-row:last-child { border-bottom: none; }
.rr-row__label { flex: 1; min-width: 200px; }
.rr-row__t { font-weight: 700; font-size: 13.5px; }
.rr-row__s { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.45; max-width: 330px; }
.rr-row__mid { display: flex; align-items: center; gap: 8px; }
.rr-row__maj { font-size: 12px; color: var(--text-2); font-weight: 600; text-align: right; line-height: 1.2; }
.rr-et { color: var(--text-3); font-size: 13px; }
.rr-box { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 4px 8px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.rr-box input { width: 42px; border: none; background: transparent; font-weight: 700; color: var(--text); text-align: center; font-size: 13px; padding: 2px; }
.rr-box input:focus { outline: none; }
.rr-box--time input { width: 62px; }
.rr-spacer { width: 32px; flex-shrink: 0; }
.rr-soft { color: var(--text-3); font-weight: 600; font-size: 14px; }
.rr-add { display: block; text-align: right; margin: 12px 0 0; font-size: 13px; }
@media (max-width: 760px) { .rr-row { flex-wrap: wrap; } .rr-row__label { min-width: 100%; } }

.table tr.row-mute td { color: var(--text-3); }

/* Icônes employé (manager / ouvre-ferme) + tags d'équipe */
.emp-ic { font-size: 13px; margin-left: 1px; vertical-align: middle; cursor: help; }
.shift-emp-preview__eq { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.equipe-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }

/* Zoom du planning (densité) */
.pz-2 .day-cell { min-height: 60px; padding: 5px; }
.pz-2 .emp-cell { padding: 8px 12px; }
.pz-2 .avatar { width: 28px; height: 28px; font-size: 11px; }
.pz-2 .emp-cell__base, .pz-2 .emp-cell__contrat, .pz-2 .emp-cell__logos, .pz-2 .emp-cell__meta { display: none; }
.pz-2 .shift { padding: 5px 7px; }
.pz-2 .shift__time { font-size: 11.5px; }
.pz-2 .shift__role, .pz-2 .shift__meta { font-size: 10px; }
.pz-2 .month-cell { min-height: 52px; }

.pz-3 .day-cell { min-height: 46px; padding: 4px; gap: 4px; }
.pz-3 .emp-cell { padding: 6px 12px; }
.pz-3 .avatar { width: 24px; height: 24px; font-size: 10px; border-radius: 8px; }
.pz-3 .emp-cell__base, .pz-3 .emp-cell__mat, .pz-3 .emp-cell__contrat, .pz-3 .emp-cell__logos, .pz-3 .emp-cell__meta { display: none; }
.pz-3 .emp-cell__name { font-size: 12.5px; }
.pz-3 .emp-cell__role, .pz-3 .emp-cell__rayon { font-size: 10.5px; }
.pz-3 .shift { padding: 3px 6px; }
.pz-3 .shift__time { font-size: 10.5px; }
.pz-3 .shift__role { font-size: 9.5px; }
.pz-3 .shift__meta { display: none; }
.pz-3 .month-cell { min-height: 42px; }

.pz-4 .day-cell { min-height: 34px; padding: 3px; gap: 3px; }
.pz-4 .emp-cell { padding: 5px 10px; gap: 8px; }
.pz-4 .avatar { width: 22px; height: 22px; font-size: 9px; border-radius: 7px; }
.pz-4 .emp-cell__base, .pz-4 .emp-cell__mat, .pz-4 .emp-cell__contrat, .pz-4 .emp-cell__logos, .pz-4 .emp-cell__meta { display: none; }
.pz-4 .emp-cell__name { font-size: 12px; }
.pz-4 .emp-cell__role, .pz-4 .emp-cell__rayon { display: none; }
.pz-4 .shift { padding: 2px 5px; border-radius: 5px; }
.pz-4 .shift__time { font-size: 10px; }
.pz-4 .shift__role, .pz-4 .shift__meta { display: none; }
.pz-4 .day-head__date { display: none; }
.pz-4 .month-cell { min-height: 32px; }

/* En-tête d'impression (caché à l'écran) */
.print-entete { display: none; }

/* ===================== Mobile / téléphone ===================== */
/* Bouton ☰ + fond du tiroir : créés par app.js, INVISIBLES sur ordinateur. */
.nav-burger { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 820px) {
  #app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  /* Barre latérale -> bandeau haut COMPACT (1 ligne) : logo + flèches + bouton ☰.
     Le menu ne défile plus horizontalement : il s'ouvre en TIROIR vertical (navigation bien plus lisible). */
  .sidebar { width: 100%; height: auto; flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; }
  .sidebar__brand { padding: 0; flex: 1; min-width: 0; }
  .sidebar__logo { width: 32px; height: 32px; font-size: 16px; }
  .sidebar__title { font-size: 15px; }
  .sidebar__subtitle { font-size: 11px; }
  .sidebar__clock { display: none; }      /* l'horloge décorative laisse la place au contenu */
  .sidebar__navarrows { margin: 0; flex-shrink: 0; }
  .sidebar__footer { display: none; }     /* profil + déconnexion restent en haut à droite */
  /* Bouton ☰ */
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); cursor: pointer; }
  .nav-burger svg { width: 22px; height: 22px; }
  /* Menu en TIROIR : caché par défaut, panneau vertical plein écran gauche quand ouvert */
  .sidebar__nav { display: none; }
  body.nav-open .sidebar__nav {
    display: flex; flex-direction: column; gap: 3px;
    position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px);
    background: var(--surface); z-index: 10000; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 10px 0 34px rgba(0, 0, 0, .28);
    animation: nav-slide .22s ease;
  }
  body.nav-open .sidebar__nav .nav-item { white-space: normal; text-align: left; padding: 12px 14px; font-size: 15px; border-radius: 12px; }
  .nav-item:hover:not(:disabled) { transform: none; box-shadow: none; }
  /* Fond sombre derrière le tiroir (taper dessus = fermer) */
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 18, 30, .45); z-index: 9999; }
  /* Zone principale : défilement (les grilles larges défilent au lieu d'être écrasées) */
  .main { width: 100%; flex: 1; overflow: auto; }
  .page { padding: 12px; }
  .planning { min-width: 720px; }
  /* Modales : quasi plein écran */
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; }
  .modal__body:has(#f-type) { min-height: auto; }
  .modal__body { max-height: 70vh; }
  /* Survol (lift) désactivé sur tactile pour éviter les sauts */
  .planning__row--emp:hover, .shift:hover { transform: none; }
}
@keyframes nav-slide { from { transform: translateX(-30px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ===================== Frais de personnel ===================== */
.fp-wrap { margin: 6px 0 18px; display: flex; flex-direction: column; gap: 14px; }
.fp-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); color: var(--text); }
.fp-hero__hdr { font-size: 13px; font-weight: 800; color: var(--text); padding: 12px 20px 11px; border-bottom: 1px solid var(--border); }
.fp-hero__body { display: flex; align-items: center; gap: 24px; padding: 20px 28px 24px; }
.fp-hero__left { flex: 1; min-width: 0; }
.fp-hero__main { font-size: 38px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; }
.fp-hero__sub { font-size: 13px; color: var(--text-3); margin-top: 4px; font-weight: 600; }
.fp-hero__metrics { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.fp-metric { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.fp-metric__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fp-metric__lbl { color: var(--text-3); min-width: 80px; }
.fp-metric__val { font-weight: 800; }
.fp-hero__right { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.fp-ring { width: 150px; height: 150px; }
.fp-hero__ringcap { font-size: 12px; color: var(--text-3); font-weight: 600; text-align: center; }
/* --- Cartes comparatif frais de personnel --- */
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fp-comp-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.fp-comp__head { display: flex; align-items: center; }
.fp-comp__titre { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); }
.fp-comp__val { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.3px; line-height: 1.1; }
.fp-comp__sub { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.fp-comp__badge { font-size: 13px; font-weight: 800; margin-top: 2px; }
@media (max-width: 700px) { .fp-grid { grid-template-columns: 1fr; } }

/* ===================== Fiche employé (depuis le planning) — v5.927 =====================
   La première version alignait des libellés et des heures en texte brut : lisible, mais on ne
   voyait rien d'un coup d'œil. Ici la hiérarchie fait le travail — un bandeau d'identité, le
   contrat en tuiles, et les semaines types en deux colonnes avec les horaires en pastilles.
   Tout passe par les variables du thème : la fiche suit le clair/sombre sans une ligne de plus. */
.fe-hd { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.fe-hd .avatar { width: 54px; height: 54px; font-size: 18px; flex: 0 0 auto; }
.fe-hd__nom { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.fe-hd__sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.fe-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.fe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.fe-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; background: var(--surface); }
.fe-stat__l { font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.fe-stat__v { font-size: 15.5px; font-weight: 750; margin-top: 4px; letter-spacing: -.01em; }
.fe-stat__v small { font-weight: 600; font-size: 12px; color: var(--text-3); }

.fe-sec { margin-top: 22px; }
.fe-sec__t { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; }
.fe-sec__t::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.fe-sem { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.fe-semc { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.fe-semc__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 13px;
  background: color-mix(in srgb, var(--primary) 9%, transparent); font-weight: 750; font-size: 13px; }
.fe-semc__tot { font-size: 12px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.fe-j { display: flex; gap: 10px; align-items: flex-start; padding: 7px 13px; border-top: 1px solid var(--border); }
.fe-j:first-of-type { border-top: 0; }
.fe-j__n { width: 68px; flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding-top: 4px; }
.fe-j__v { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.fe-h { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 750;
  padding: 3px 9px; border-radius: 99px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: color-mix(in srgb, var(--primary) 78%, var(--text)); }
.fe-h em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-3); }
.fe-repos { font-size: 12px; color: var(--text-3); font-weight: 600; padding: 4px 0; }
.fe-vide { font-size: 12px; color: var(--text-3); padding: 4px 0; opacity: .7; }
.fe-mtt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid color-mix(in srgb, #0ca678 30%, var(--border));
  background: color-mix(in srgb, #0ca678 7%, transparent); border-radius: 12px; padding: 11px 13px; font-size: 13px; }

/* ===================== Impression A4 paysage ===================== */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .sidebar, .topbar, #toast-root, #modal-root, .add-shift, .no-print, .pwa-install, #maj-btn, #maj-scene, .jour-verrou, .dim-lock, .impr-root .shift__note, .impr-root .shift__note-dot { display: none !important; }
  /* Neutraliser l'effet de SURVOL d'une ligne (sinon le contour violet du :hover apparaît à l'impression). */
  .planning__row--emp:hover { background: transparent !important; box-shadow: none !important; transform: none !important; border-radius: 0 !important; z-index: auto !important; }
  .planning__row--emp:hover::after, .planning__row--emp:hover::before { display: none !important; content: none !important; }
  .planning__row--emp:hover .day-cell, .planning__row--emp:hover .emp-cell { background-color: transparent !important; }
  /* v5.923 (Mika 06/08 : « j'ai pas tout le planning, le reste est vide ») — LIBÉRER TOUTE LA CHAÎNE.
     L'application est une coque de la HAUTEUR DE L'ÉCRAN : html/body à 100 % (l.49) et #app à 100vh
     avec overflow:hidden (l.65) ; c'est .main qui défile. À l'impression on ne libérait que #app et
     l'overflow de .main — html et body restaient hauts d'UNE page. Résultat : un seul écran de
     planning imprimé (~815 px sur 3550), le reste purement et simplement coupé, plus une page
     blanche pour le débord. Il faut relâcher la hauteur de TOUS les ancêtres, sinon le premier
     qui reste contraint recoupe tout ce que les autres ont libéré. */
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #app { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .main { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .planning-wrap { padding: 0; }
  body { background: #fff; }
  .print-entete { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; margin: 0 0 4px !important; }
  .print-entete__date { font-size: 10.5px; color: #555; font-weight: 600; white-space: nowrap; }
  .planning { box-shadow: none; border-color: #ccc; }
  /* minmax(0,1fr) = colonnes STRICTEMENT égales sur TOUTES les lignes (sinon, page serrée → chaque ligne calcule ses colonnes selon son contenu → décalage). */
  .planning__row { grid-template-columns: 185px repeat(7, minmax(0, 1fr)) 90px !important; }
  /* Colonne ÉQUIPE plus large : nom + prénom du salarié en entier (sur 2 lignes si besoin). */
  .impr-root .emp-cell__name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; }
  /* Annuler le sticky (en-tête + 1re colonne figés) qui décale tout à l'impression à cause du zoom. */
  .impr-root .planning__head, .impr-root .emp-cell, .impr-root .planning__head > .corner, .impr-root .planning__foot > .foot-label, .impr-root .planning__head .emp-cell { position: static !important; box-shadow: none !important; }
  .shift { break-inside: avoid; box-shadow: none !important; transform: none !important; }
  /* Imprimer les COULEURS du planning comme à l'écran (fonds des shifts, bordures, badges…) — sinon le navigateur les retire. */
  .planning-wrap, .planning-wrap *, .frise, .frise * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Quadrillage du tableau en VIOLET (couleur LEME HUB) légèrement éclairci à l'impression : visible mais élégant (le gris était trop terne, et l'original trop clair n'apparaissait pas). */
  .impr-root .planning { border-color: color-mix(in srgb, var(--primary) 50%, #fff) !important; }
  .impr-root .planning__row + .planning__row { border-top: 1px solid color-mix(in srgb, var(--primary) 35%, #fff) !important; }
  .impr-root .day-cell, .impr-root .day-head { border-left: 1px solid color-mix(in srgb, var(--primary) 35%, #fff) !important; }
  .impr-root .total-head, .impr-root .total-cell { border-left: 2px solid color-mix(in srgb, var(--primary) 50%, #fff) !important; }
  .impr-root .planning__foot { border-top: 2px solid color-mix(in srgb, var(--primary) 50%, #fff) !important; }
  /* PAS de surlignage « aujourd'hui » à l'impression : la colonne du jour où l'on imprime doit être neutre comme les autres (on garde juste la teinte normale dimanche/week-end). */
  .impr-root .day-cell.is-today { background: transparent !important; }
  .impr-root .day-cell.is-today.is-weekend { background: var(--surface-2) !important; }
  .impr-root .day-cell.is-today.is-dimanche { background: color-mix(in srgb, var(--text-3) 9%, var(--surface)) !important; }
  .impr-root .day-head.is-today { background: transparent !important; }
  .impr-root .day-head.is-today .day-head__name { color: var(--text-2) !important; }
  .impr-root .day-head.is-today .day-head__date { color: var(--text-3) !important; }
  .day-cell { min-height: 64px; }
  .total-cell__hours { font-size: 14px; }
  /* Filigrane DAJAN à l'impression du planning : logo discret centré, répété sur chaque page (position fixed). */
  .impr-root .filigrane-dajan {
    display: block !important; position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background-image: url("../img/logo-dajan.png");
    background-repeat: no-repeat; background-position: center; background-size: 42%;
    opacity: 0.07;
  }
  /* App Data : impression du reporting / des analyses */
  .page { overflow: visible !important; padding: 0 !important; }
  .data-print-entete { display: block !important; font-size: 15px; font-weight: 800; color: #111; border-bottom: 2px solid #888; padding-bottom: 6px; margin-bottom: 12px; }
  .data-report-head { background: #f0f0f5 !important; color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .bf-card, .bf2-card { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  .bf-band, .bf2-card__h { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-scroll { max-height: none !important; overflow: visible !important; }
  .data-details { display: block !important; }
  .data-details__sum { display: none !important; }
  .data-details > .card { border-radius: 14px !important; }
  table.bf-table { font-size: 10.5px; }
  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   IMPRESSION DÉDIÉE DU BRIEFING — tout sur UNE page A4 portrait, lisible.
   Activée par body.bf-print (bouton imprimante du briefing, voir briefing.js
   imprimerBriefing()). Réorganise le tableau de bord en version compacte :
   grilles multi-colonnes FORCÉES (sinon les règles responsive passent en
   1 colonne à la largeur d'une page → tout s'empile), polices/marges réduites,
   avis Google + bloc d'import masqués. zoom léger = garde-fou « 1 page ».
   ============================================================ */
@media print {
  body.bf-print .topbar,
  body.bf-print .bf2-import,
  body.bf-print .bf2-demo,
  body.bf-print .bf-load,
  body.bf-print .card.fiche-sec.bf-card,
  body.bf-print .bf2-avis,
  body.bf-print .bf2-daybar .seg,
  body.bf-print .bf2-per__stats,
  body.bf-print .pwa-install,
  body.bf-print .pwa-ov { display: none !important; }
}

/* ============================================================
   ⚖️ LA MESURE DOIT VOIR EXACTEMENT CE QUI SERA IMPRIMÉ (04/08/2026)
   ------------------------------------------------------------
   Bug « il y a deux pages dans l'impression du briefing » : la feuille sortait
   sur 2 pages, la seconde vide, avec un contenu tout petit sur la première.

   Pourquoi : briefing.js calcule le zoom qui fait tenir le briefing sur UNE page,
   en mesurant la hauteur réelle à l'écran (classe `bf-mesure`, qui rejoue les
   règles d'impression). Or ce bloc-ci — le tiroir « Charger / actualiser les
   données », la barre du haut, l'écran de chargement — n'était masqué que sous
   `@media print`, jamais pendant la mesure. Le tiroir ouvert fait à lui seul
   917 px : le calcul travaillait donc sur une page 50 % plus haute que la vraie,
   sortait un zoom beaucoup trop petit, et à l'impression — tiroir masqué, cette
   fois — le compte ne tombait plus juste. D'où la page en trop.

   Les deux listes doivent rester IDENTIQUES. Toute ligne ajoutée à l'une
   doit l'être à l'autre, sans quoi le même écart réapparaîtra.
   ============================================================ */
body.bf-mesure .topbar,
body.bf-mesure .bf2-import,
body.bf-mesure .bf2-demo,
body.bf-mesure .bf-load,
body.bf-mesure .card.fiche-sec.bf-card,
body.bf-mesure .bf2-avis,
body.bf-mesure .bf2-daybar .seg,
body.bf-mesure .bf2-per__stats,
body.bf-mesure .pwa-install,
body.bf-mesure .pwa-ov { display: none !important; }

@media print {

  body.bf-print .page.bf2 { zoom: 0.85; }            /* secours « 1 page » si le JS adaptatif échoue ; sinon remplacé par un zoom calculé (briefing.js imprimerBriefing) */

  /* Forcer l'impression des couleurs/dégradés (barre objectif, jauges, barres budget, icônes KPI, camembert…) — sinon le navigateur retire les fonds à l'impression */
  body.bf-print .bf2, body.bf-print .bf2 * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body.bf-print .bf2 { gap: 6px !important; }
  body.bf-print .bf2-card, body.bf-print .card, body.bf-print .bf-card { border-radius: 9px !important; box-shadow: none !important; }
  body.bf-print .bf2-card__h, body.bf-print .bf-band { padding: 4px 11px !important; font-size: 11px !important; }
  body.bf-print .bf2-daybar { padding: 2px 10px !important; gap: 8px !important; }

  /* Grilles multi-colonnes forcées */
  /* Haut réorganisé : CA + Objectif côte à côte (ligne 1), puis les 6 KPI sur
     toute la largeur (ligne 2) → supprime le vide sous la carte CA. */
  body.bf-print .bf2-top { grid-template-columns: 1.35fr 1fr !important; gap: 8px !important; align-items: start !important; }
  body.bf-print .bf2-top__right { display: contents !important; }
  body.bf-print .bf2-top > .bf2-hero { grid-column: 1 !important; grid-row: 1 !important; }
  body.bf-print .bf2-top .bf2-obj { grid-column: 2 !important; grid-row: 1 !important; }
  body.bf-print .bf2-hero__body { min-height: 0 !important; }
  body.bf-print .bf2-row { grid-template-columns: 1.5fr 1fr !important; gap: 8px !important; align-items: start !important; }
  body.bf-print .bf2-row3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: start !important; }
  body.bf-print .bf2-per-grid { grid-template-columns: repeat(4, 1fr) !important; padding: 6px 10px !important; gap: 7px !important; }

  /* Hero (CA de la veille) */
  body.bf-print .bf2-hero__hdr { padding: 3px 12px !important; font-size: 10px !important; }
  body.bf-print .bf2-hero__body { padding: 6px 14px !important; gap: 10px !important; }
  body.bf-print .bf2-hero__ca { font-size: 23px !important; margin: 0 !important; }
  body.bf-print .bf2-hero__lbl { font-size: 13px !important; line-height: 1.05 !important; }
  body.bf-print .bf2-hero__cap, body.bf-print .bf2-hero__sub, body.bf-print .bf2-hero__prog { font-size: 9.5px !important; margin-top: 1px !important; }
  body.bf-print .bf2-hero__r { width: 84px !important; flex-basis: 84px !important; }
  body.bf-print .bf2-hero__r svg.bf2-ring { width: 70px !important; height: 70px !important; }

  /* Objectif */
  body.bf-print .bf2-obj__body { padding: 6px 11px !important; gap: 4px !important; }
  body.bf-print .bf2-obj__v { font-size: 17px !important; }
  body.bf-print .bf2-obj__reste { padding: 3px 9px !important; }
  body.bf-print .bf2-obj__reste b { font-size: 12px !important; }
  body.bf-print .bf2-ranks { gap: 6px !important; }
  body.bf-print .bf2-rank { padding: 4px 6px !important; }
  body.bf-print .bf2-rank__v { font-size: 15px !important; }
  body.bf-print .bf2-rank__l { font-size: 8.5px !important; }

  /* KPI */
  body.bf-print .bf2-kpis { grid-column: 1 / -1 !important; grid-row: 2 !important; grid-template-columns: repeat(6, 1fr) !important; gap: 6px !important; }
  body.bf-print .bf2-kpi { padding: 4px 6px !important; gap: 1px !important; border-radius: 8px !important; }
  body.bf-print .bf2-kpi__top { gap: 5px !important; }
  body.bf-print .bf2-kpi__ic { width: 18px !important; height: 18px !important; font-size: 11px !important; border-radius: 6px !important; }
  body.bf-print .bf2-kpi__v { font-size: 13px !important; }
  body.bf-print .bf2-kpi__l { font-size: 8.5px !important; }
  body.bf-print .bf2-kpi__reg, body.bf-print .bf2-kpi__win { font-size: 8px !important; }

  /* Mini-historique */
  body.bf-print .bf2-spark__svg { max-height: 95px !important; }   /* graphique 11 jours plus haut / lisible (place gagnée par les KPI sur 1 ligne) */
  body.bf-print .bf2-spark__wrap { padding: 4px 0 2px !important; }

  /* Comparatif périodes */
  body.bf-print .bf2-per-card { padding: 5px 8px !important; gap: 3px !important; }
  body.bf-print .bf2-per__ca { font-size: 13px !important; }
  body.bf-print .bf2-per__budval { font-size: 11px !important; }
  body.bf-print .bf2-per__plab, body.bf-print .bf2-per__date, body.bf-print .bf2-per__prog, body.bf-print .bf2-per__reg-ca, body.bf-print .bf2-per__budlbl, body.bf-print .bf2-per__regval { font-size: 9px !important; }

  /* CA par rayon → 2 colonnes */
  body.bf-print .bf2-rays { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 16px !important; padding: 5px 12px !important; }
  body.bf-print .bf2-ray { grid-template-columns: 84px 1fr 64px 46px 30px !important; gap: 6px !important; font-size: 9px !important; }

  /* Composition CA (camembert + légende) */
  body.bf-print .bf2-pie-full { padding: 8px 12px !important; gap: 14px !important; align-items: center !important; }
  body.bf-print .bf2-pie-full .bf2-pie-svg { width: 124px !important; height: 124px !important; }
  body.bf-print .bf2-pleg-list { gap: 1px !important; }
  body.bf-print .bf2-pleg { padding: 1px 6px !important; gap: 6px !important; }
  body.bf-print .bf2-pleg__name { font-size: 9px !important; min-width: 66px !important; }
  body.bf-print .bf2-pleg__pct { font-size: 9px !important; }
  body.bf-print .bf2-pleg__rank { font-size: 8px !important; width: 11px !important; }

  /* Satisfaction + Orga */
  body.bf-print .bf2-sats { gap: 6px !important; }
  body.bf-print .bf2-orga { padding: 6px 12px !important; gap: 8px !important; }
  body.bf-print .bf2-orgakpi { padding: 6px !important; }
  body.bf-print .bf2-orgakpi__v { font-size: 15px !important; }
  body.bf-print .bf2-orgakpi__l { font-size: 9px !important; }
  body.bf-print .bf2-ta { min-height: 0 !important; height: 36px !important; font-size: 9px !important; padding: 4px 6px !important; }

  body.bf-print table.bf-table { font-size: 9px !important; }
}

/* Rupture conventionnelle — questionnaire */
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-recap { display: flex; flex-wrap: wrap; gap: 6px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.rc-recap b { color: var(--text); }
.rc-dates { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.rc-dates__row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.rc-dates__row:last-child { border-bottom: 0; }
.rc-dates__row span { flex: 1; color: var(--text-2); }
.rc-dates__row b { color: var(--primary-dark); white-space: nowrap; }
.rc-dates__row i { color: var(--text-3); font-size: 11px; }
.rc-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 680px) { .rc-grid { grid-template-columns: 1fr; } }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d8e3; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #c2c4d2; }
::-webkit-scrollbar-track { background: transparent; }
/* Sur MOBILE, la barre de défilement prend la couleur du hero (demande Mika) — --mob-sky posé sur <html>+body par majBarre. */
html:has(body.mob-hub)::-webkit-scrollbar-thumb, body.mob-hub::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 60%, transparent); border-color: transparent; }
html:has(body.mob-hub), body.mob-hub { scrollbar-color: color-mix(in srgb, var(--mob-sky, var(--primary)) 60%, transparent) transparent; }

/* ── Coupe du Monde 2026 ── */
.acc-wc {
  background: linear-gradient(135deg, #0a2463 0%, #1b3a7a 60%, #a31621 100%);
  border-radius: 16px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(10,36,99,.18);
}
.acc-wc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.acc-wc__head > span:first-child { flex: 1; letter-spacing: .3px; }
.acc-wc-badge {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 2px 10px;
  color: #fff;
}
.acc-wc-refresh {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  opacity: .7;
  padding: 2px 4px;
  border-radius: 6px;
  transition: opacity .15s, background .15s;
}
.acc-wc-refresh:hover { opacity: 1; background: rgba(255,255,255,.15); }
.acc-wc__body { padding: 12px 14px 14px; }

.acc-wc-section {
  margin-bottom: 12px;
}
.acc-wc-section--por {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 10px 12px 12px;
  margin-bottom: 14px;
}
.acc-wc-stitle {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: .2px;
}
.acc-wc-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 8px 0 4px;
  letter-spacing: .8px;
}
.acc-wc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Carte match standard */
.acc-wc-match {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  flex: 1;
}
.acc-wc-match--por {
  background: rgba(163,22,33,.3);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 1px rgba(255,200,0,.3);
}
.acc-wc-team {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-wc-team--right { justify-content: flex-end; text-align: right; }
.acc-wc-team--win { color: #fff; font-weight: 800; }
.acc-wc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 24px;
}
.acc-wc-sc {
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.7);
  line-height: 1;
}
.acc-wc-sc--win, .acc-wc-score--win { color: #fff; }
.acc-wc-sep { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.4); margin: 0 2px; }
.acc-wc-score-row { display: flex; flex-direction: row; align-items: center; gap: 2px; }
.acc-wc-ft {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  letter-spacing: .8px;
}
.acc-wc-heure {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
}
.acc-wc-live {
  font-size: 10px;
  font-weight: 800;
  color: #ff6b6b;
  animation: wc-blink .9s step-start infinite;
}
@keyframes wc-blink { 50% { opacity: 0; } }
.acc-wc-abb { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); }
.acc-wc-abb--win { color: #fff; }

/* Compact (inline) */
.acc-wc-match--compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 3px 8px;
}

/* Drapeaux image */
.acc-wc-flag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  flex-shrink: 0;
}
.acc-wc-flag-missing {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 1px 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Confetti célébration Portugal */
.acc-wc-confetti {
  position: fixed;
  top: -40px;
  z-index: 9999;
  pointer-events: none;
  animation: wc-fall linear forwards;
  user-select: none;
}
@keyframes wc-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ── Widget Coupe du Monde Mini (barre compacte au-dessus d'Aujourd'hui) ── */
.acc-wcm {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface) 75%);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  box-shadow: var(--shadow-sm);
}
.acc-wcm::after { /* halo décoratif discret, comme le hero */
  content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%);
  pointer-events: none;
}
@keyframes accWcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,54,79,.5); } 50% { box-shadow: 0 0 0 6px rgba(224,54,79,0); } }
.acc-wcm > * { position: relative; z-index: 1; }
.acc-wcm__titre {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-wcm__badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-wcm__badge.is-live {
  background: var(--danger-soft);
  color: var(--danger, #e0364f);
  animation: accWcPulse 1.5s ease-in-out infinite;
}
.acc-wcm__infos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
  flex-wrap: wrap;
}
.acc-wcm__match {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.acc-wcm__match--por {
  background: color-mix(in srgb, #f1b900 20%, var(--surface));
  border: 1px solid color-mix(in srgb, #f1b900 45%, var(--border));
}
.acc-wcm__nom { font-size: 11px; font-weight: 600; color: var(--text-2); }
.acc-wcm__nom--win { color: var(--text); font-weight: 800; }
.acc-wcm__score { font-size: 14px; font-weight: 900; color: var(--text); line-height: 1; }
.acc-wcm__score--win { color: var(--primary-dark); }
.acc-wcm__sep { font-size: 12px; color: var(--text-3); margin: 0 1px; }
.acc-wcm__ft { font-size: 9px; font-weight: 700; color: var(--text-3); letter-spacing: .8px; text-transform: uppercase; }
.acc-wcm__heure { font-size: 11px; color: var(--text-3); margin: 0 2px; }
.acc-wcm__div { color: var(--border); font-size: 12px; margin: 0 2px; flex-shrink: 0; }
.acc-wcm__btn { background: transparent; border: none; cursor: pointer; font-size: 13px; padding: 4px; opacity: .55; flex-shrink: 0; line-height: 1; }
.acc-wcm__btn:hover { opacity: 1; }
.acc-wc-live--sm { font-size: 10px !important; }

/* ── Sélecteur Sexe dans la fiche employé ──────────────────────────────── */
.sexe-picker { display: flex; gap: 8px; margin-top: 4px; }
.sexe-btn {
  width: 44px; height: 44px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  color: var(--text-2);
}
.sexe-btn:hover { border-color: var(--accent); background: var(--surface-3); }
.sexe-btn[data-sexe="homme"]:hover { border-color: #2d9cdb; background: color-mix(in srgb, #2d9cdb 15%, var(--surface-2)); color: #2d9cdb; box-shadow: 0 0 8px rgba(45,156,219,.35); }
.sexe-btn[data-sexe="femme"]:hover { border-color: #e84393; background: color-mix(in srgb, #e84393 15%, var(--surface-2)); color: #e84393; box-shadow: 0 0 8px rgba(232,67,147,.35); }
.sexe-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  color: var(--accent);
}
.sexe-btn[data-sexe="homme"].is-active { border-color: #2d9cdb; background: color-mix(in srgb, #2d9cdb 15%, var(--surface-2)); color: #2d9cdb; }
.sexe-btn[data-sexe="femme"].is-active { border-color: #e84393; background: color-mix(in srgb, #e84393 15%, var(--surface-2)); color: #e84393; }

/* ── Météo : pills villes mémorisées ────────────────────────────────── */
/* v5.924 (Mika 06/08 : « impossible d'appuyer sur la croix pour supprimer »).
   La barre est un ÉLÉMENT FLEXIBLE de .main (colonne). Avec 3 500 px de contenu pour 815 px de
   hauteur, les éléments se font comprimer — et `min-height: 0` autorisait celui-ci à tomber à
   12 px alors que ses pastilles en font 28. Elles débordaient donc de leur propre conteneur, et
   le bloc `.page` qui suit immédiatement passait PAR-DESSUS les croix : le clic atterrissait sur
   `.page`, jamais sur le bouton. Rien à voir avec le code JS — la délégation fonctionnait déjà,
   vérifié en la déclenchant à la main.
   `flex: 0 0 auto` : cette barre garde sa hauteur naturelle et ne se laisse plus écraser. */
.mto-villes { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 14px; min-height: 0; flex: 0 0 auto; }
.mto-villes:empty { display: none; }
.mto-ville-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .12s, border-color .12s; user-select: none; }
.mto-ville-pill:hover { background: var(--surface-3); border-color: var(--primary); color: var(--text); }
/* v5.793 (retour Mika « je n'arrive pas à cliquer sur la croix ») : la cible faisait ~10 px de
   large sur 15 de haut, impossible à viser. Pastille ronde de 20 px, bien visible au survol. */
.mto-ville-x { background: none; border: none; padding: 0; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--text-3); width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: background .12s, color .12s; }
.mto-ville-x:hover { color: #e0364f; background: color-mix(in srgb, #e0364f 14%, transparent); }
.mto-ville-pill { padding-right: 4px; }

/* ── Sidebar hub : icônes Réglages en bas ───────────────────────────── */
.hub-reg-icons { padding: 6px 12px 10px; border-top: 1px solid var(--border); }
.hub-reg-icons__lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.hub-reg-icons__row { display: flex; flex-wrap: wrap; gap: 4px; }
.hub-reg-ic.nav-item { width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; flex: 0 0 auto; gap: 0; border: 1px solid var(--border); }
.hub-reg-ic.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Briefing : colonne droite (objectif + KPI) ─────────────────────── */
.bf2-top__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── Briefing : CA par rayon saisie (style bf2) ─────────────────────── */
.bf2-rays-inp { display: flex; flex-direction: column; padding: 6px 14px 12px; }
.bf2-rayI { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.bf2-rayI:last-child { border-bottom: none; }
.bf2-rayI__nom { flex: 0 0 82px; font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.bf2-rayI__fields { display: flex; gap: 8px; flex: 1; align-items: center; flex-wrap: wrap; }
.bf2-rayI__f { display: flex; align-items: center; gap: 5px; }
.bf2-rayI__lbl { font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.bf2-rayI-seed { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: rgba(45,156,219,.15); color: #2d9cdb; margin-left: 2px; }
.bf2-rayI .bf-cell .bf-in { width: 72px; }
.bf2-rayI .bf-cell .bf-u { font-size: 11px; }

/* ── Réglages : tuiles dans l'app planning ──────────────────────────── */
.reg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.reg-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 14px 18px; cursor: pointer; text-align: center; transition: background .12s, box-shadow .12s, border-color .12s; box-shadow: var(--shadow-sm); }
.reg-tile:hover { background: var(--surface-2); border-color: var(--primary); box-shadow: var(--shadow-md); }
.reg-tile__ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.reg-tile__ic svg { width: 22px; height: 22px; }
.reg-tile__lbl { font-size: 14px; font-weight: 700; color: var(--text); }
.reg-tile__sub { font-size: 12px; color: var(--text-3); }

/* ── Suivi plannings : sélecteur de semaine ─────────────────────────── */
.sig-weekselect { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sig-weekselect select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; }
.sig-weekselect select:focus { border-color: var(--primary); }

/* ── Application Contrat ──────────────────────────────────────── */
.page-ic--contrat { color: #fd7e14; }

.ctr-typetoggle { padding: 18px 20px; margin-bottom: 18px; }
.ctr-type__title { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.ctr-type__btns { display: flex; gap: 12px; }
.ctr-type-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.ctr-type-btn:hover { border-color: var(--primary); }
.ctr-type-btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.ctr-type-btn__ic { font-size: 28px; line-height: 1; }
.ctr-type-btn__lbl { font-size: 18px; font-weight: 800; color: var(--text); margin-top: 2px; }
.ctr-type-btn__sub { font-size: 11.5px; color: var(--text-2); text-align: center; }
.ctr-type-btn.is-active .ctr-type-btn__lbl { color: var(--primary); }

.ctr-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0 24px; }
.ctr-footer__hint { font-size: 12px; color: var(--text-3); }
.ctr-footer__btns { display: flex; gap: 10px; align-items: center; margin-left: auto; }

.ctr-recap { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 4px; }
.ctr-recap__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; font-size: 13.5px; }
.ctr-recap__row:nth-child(even) { background: var(--surface-2); }
.ctr-recap__row b { color: var(--text-2); font-weight: 600; min-width: 110px; flex-shrink: 0; }
.ctr-recap__row span { text-align: right; font-weight: 500; color: var(--text); }

/* ===== App Calendrier ===== */
.cal-legend { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-bottom:12px; font-size:12px; color:var(--text-2); }
/* v5.534 : légende = boutons-bascule « afficher / masquer ce calendrier » */
.cal-leg { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 11px; cursor:pointer; transition:opacity .15s, background .15s; }
.cal-leg:hover { background:var(--surface-2); }
.cal-leg__dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.cal-leg--off { opacity:.5; text-decoration:line-through; }
.cal-leg--off .cal-leg__dot { background:transparent !important; box-shadow:inset 0 0 0 2px var(--text-3); }
/* v5.535 : sélecteurs de couleur des catégories du calendrier (Réglages) */
.cal-coul-grid { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:8px; }
.cal-coul-it { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:6px 12px 6px 6px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.cal-coul-it input[type="color"] { width:30px; height:30px; border:none; border-radius:50%; padding:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
.cal-coul-it input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.cal-coul-it input[type="color"]::-webkit-color-swatch { border:1px solid var(--border); border-radius:50%; }
/* v5.539 : liste d'invitation des collaborateurs (modale événement) */
.cal-invites { display:flex; flex-wrap:wrap; gap:6px; max-height:168px; overflow-y:auto; padding:6px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.cal-inv { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:4px 11px 4px 7px; border:1px solid var(--border); border-radius:999px; cursor:pointer; background:var(--surface); }
.cal-inv input { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; flex:0 0 auto; }
.cal-inv:has(input:checked) { background:color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color:color-mix(in srgb, var(--primary) 32%, var(--border)); font-weight:600; }
.cal-inv__n { white-space:nowrap; }
/* v5.540 : calendrier en 2 colonnes sur ORDINATEUR (commandes + calendriers à gauche, grille à droite) — demande Mika « gagner en lisibilité ». Sur téléphone : empilé. */
.cal-main { min-width: 0; }
.cal-main__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-side__add { width: 100%; }
.cal-side__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cal-side__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 12px 0 6px; }
body:not(.mob-hub) .cal-page { display: flex; gap: 22px; align-items: flex-start; }
body:not(.mob-hub) .cal-side { flex: 0 0 238px; position: sticky; top: 10px; display: flex; flex-direction: column; gap: 4px; }
body:not(.mob-hub) .cal-side .btn { width: 100%; justify-content: center; }
body:not(.mob-hub) .cal-side__actions { flex-direction: column; gap: 8px; }
body:not(.mob-hub) .cal-main { flex: 1 1 auto; min-width: 0; }
body:not(.mob-hub) .cal-side .cal-legend { flex-direction: column; align-items: stretch; gap: 7px; margin-bottom: 0; }
body:not(.mob-hub) .cal-side .cal-leg { width: 100%; justify-content: flex-start; }
.cal-grid-head { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-grid-head > div { text-align:center; font-weight:700; font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell { min-height:104px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px; cursor:pointer; overflow:hidden; transition:.12s; display:flex; flex-direction:column; gap:3px; }
.cal-cell:hover { border-color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cal-cell.cal-out { opacity:.4; }
.cal-cell.cal-dim { background:var(--surface-2); }
.cal-cell.cal-today { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary) inset; }
.cal-numrow { display:flex; align-items:center; justify-content:space-between; }
.cal-wx { font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.cal-wx svg.wxm { width:22px; height:22px; display:block; }
body:not(.mob-hub) .cal-wx svg.wxm { width:26px; height:26px; }
.cal-wx--passe { opacity:.55; filter:grayscale(.35); }
.cal-num { font-weight:700; font-size:13px; color:var(--text-2); }
.cal-today .cal-num { color:var(--primary); }
.cal-chip { font-size:11px; line-height:1.25; padding:2px 5px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-chip[data-cal-ev] { cursor:pointer; }
.cal-plus { font-size:10px; color:var(--text-3); padding-left:2px; }
.cal-couls { display:flex; gap:8px; flex-wrap:wrap; }
.cal-coul { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.cal-coul.is-sel { border-color:var(--text); transform:scale(1.12); }
/* v5.556 : sélecteur d'IMPORTANCE du rendez-vous (Haute / Moyenne / Faible) */
.cal-imps { display:flex; gap:8px; flex-wrap:wrap; }
.cal-imp { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:7px 13px; border:1.5px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease; }
.cal-imp span { font-size:11px; }
.cal-imp:hover { border-color:var(--text-3); }
.cal-imp.is-sel { color:var(--text); transform:translateY(-1px); }
.cal-imp--haute.is-sel { border-color:#e0364e; background:color-mix(in srgb,#e0364e 12%,var(--surface)); }
.cal-imp--moyenne.is-sel { border-color:#f0a020; background:color-mix(in srgb,#f0a020 14%,var(--surface)); }
.cal-imp--faible.is-sel { border-color:#16a34a; background:color-mix(in srgb,#16a34a 12%,var(--surface)); }
/* badge d'importance dans la liste du jour + les rappels */
.cal-imp-badge { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; vertical-align:middle; background:color-mix(in srgb, var(--text-3) 14%, transparent); color:var(--text-2); }
.cal-jour-ev--imp-haute .cal-imp-badge { background:color-mix(in srgb,#e0364e 16%,transparent); color:#c0203a; }
.cal-jour-ev--imp-moyenne .cal-imp-badge { background:color-mix(in srgb,#f0a020 18%,transparent); color:#b57200; }
.cal-jour-ev--imp-faible .cal-imp-badge { background:color-mix(in srgb,#16a34a 16%,transparent); color:#12813b; }
/* v5.541 : palette d'emoji de l'événement (à gauche du titre) */
.cal-emojis { display:flex; gap:6px; flex-wrap:wrap; }
.cal-emoji { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; padding:0; }
.cal-emoji:hover { background:var(--surface-2); }
.cal-emoji.is-sel { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, var(--surface)); transform:scale(1.06); }
.cal-emoji--none { font-size:15px; color:var(--text-3); }
@media (max-width:640px){ .cal-cell{ min-height:70px; } .cal-chip{ font-size:10px; } }

/* Sélecteur de vue (Jour / Semaine / Mois / Trimestre / Année) */
.cal-vueseg { display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; margin-bottom:12px; flex-wrap:wrap; }
.cal-vueseg__b { border:none; background:transparent; color:var(--text-2); font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:8px; cursor:pointer; transition:.12s; }
.cal-vueseg__b:hover { color:var(--text); }
.cal-vueseg__b.is-actif { background:var(--surface); color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* Vue Semaine : 7 colonnes hautes */
.cal-grid--sem .cal-cell { min-height:340px; }

/* Vue Jour */
.cal-jour { max-width:760px; }
.cal-jour-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.cal-jour-titre { font-size:20px; font-weight:800; color:var(--text); }
.cal-jour-meteo { font-size:14px; color:var(--text-2); font-weight:600; }
.cal-jour-liste { display:flex; flex-direction:column; gap:8px; }
.cal-jour-ev { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border-radius:10px;
  background:color-mix(in srgb, var(--evc,var(--primary)) 14%, var(--surface));
  border:0.5px solid color-mix(in srgb, var(--evc,var(--primary)) 24%, var(--border));
  border-left:3px solid var(--evc,var(--primary)); }
.cal-jour-ev--imp-haute { background:color-mix(in srgb, var(--evc,var(--primary)) 22%, var(--surface)); box-shadow:0 0 0 1px color-mix(in srgb,#e0364e 40%,transparent); }
.cal-jour-ev--imp-faible { background:color-mix(in srgb, var(--evc,var(--primary)) 9%, var(--surface)); border-left-style:dashed; }

/* Vues Trimestre / Année : mini-mois */
.cal-multi { display:grid; gap:16px; }
.cal-multi--tri { grid-template-columns:repeat(3,1fr); }
.cal-multi--annee { grid-template-columns:repeat(4,1fr); }
.cal-mini { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; }
.cal-mini-head { font-size:13px; font-weight:800; color:var(--text); margin-bottom:7px; cursor:pointer; }
.cal-mini-head:hover { color:var(--primary); }
.cal-mini-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:3px; }
.cal-mini-dow > span { text-align:center; font-size:9.5px; font-weight:700; color:var(--text-3); }
.cal-mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-mini-cell { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:6px; cursor:pointer; transition:.1s; min-height:26px; }
.cal-mini-cell:hover { background:var(--surface-2); }
.cal-mini-out { opacity:.3; cursor:default; }
.cal-mini-today { background:color-mix(in srgb, var(--primary) 16%, transparent); }
.cal-mini-num { font-size:11px; font-weight:600; color:var(--text-2); line-height:1; }
.cal-mini-today .cal-mini-num { color:var(--primary); font-weight:800; }
.cal-mini-dots { display:flex; gap:2px; height:5px; align-items:center; }
.cal-mini-dot { width:4px; height:4px; border-radius:50%; display:inline-block; }
@media (max-width:980px){ .cal-multi--annee { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .cal-multi--tri, .cal-multi--annee { grid-template-columns:repeat(2,1fr); } .cal-grid--sem .cal-cell { min-height:160px; } }

/* Grille horaire (vues Jour & Semaine) */
.cal-jour-sect { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-3); margin:16px 0 7px; }
.cal-week { display:flex; flex-direction:column; gap:6px; }
.cal-week-row { display:flex; gap:8px; align-items:stretch; }
.cal-week-gut { width:48px; flex:0 0 48px; }
.cal-week-gut--lbl { display:flex; align-items:center; justify-content:flex-end; padding-right:6px; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; }
.cal-week-cols { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; flex:1; min-width:0; }
.cal-week-dhdr { text-align:center; font-size:12px; font-weight:700; color:var(--text-2); padding:5px 2px; border-radius:8px; cursor:pointer; transition:.1s; }
.cal-week-dhdr:hover { background:var(--surface-2); color:var(--primary); }
.cal-week-dhdr--auj { background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary); }
.cal-week-dname { text-transform:uppercase; font-size:10.5px; letter-spacing:.4px; }
.cal-week-dnum { font-weight:800; }
.cal-allday-cell { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:4px; min-height:30px; display:flex; flex-direction:column; gap:3px; overflow:hidden; cursor:pointer; }
.cal-allday-empty { color:var(--text-3); opacity:.4; text-align:center; font-size:11px; }
.cal-tg { display:flex; gap:8px; }
.cal-tg-hours { width:48px; flex:0 0 48px; }
.cal-tg-hr { font-size:10.5px; color:var(--text-3); text-align:right; padding-right:6px; transform:translateY(-7px); }
.cal-tg-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; flex:1; min-width:0; }
.cal-tg-col { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:8px; min-width:0; }
.cal-tg-col--click { cursor:pointer; } /* v5.512 : clic sur un créneau = nouveau rendez-vous à cette heure */
.cal-tg-col--click:hover { background:color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.cal-tg-line { position:absolute; left:0; right:0; border-top:1px solid var(--border); opacity:.55; pointer-events:none; }
/* v5.556 : rendez-vous « façon shift » du planning — bloc coloré à la couleur de l'événement, barre gauche selon
   l'IMPORTANCE, texte lisible. La couleur vient de --evc (couleur choisie par RDV). */
.cal-tg-ev { position:absolute; left:3px; right:3px; font-size:11px; line-height:1.22; padding:3px 6px; border-radius:6px; overflow:hidden; cursor:pointer;
  background:color-mix(in srgb, var(--evc,#6c5ce7) 16%, var(--surface));
  color:color-mix(in srgb, var(--evc,#6c5ce7) 72%, #000);
  border-left:3px solid var(--evc,#6c5ce7);
  box-shadow:0 1px 2px rgba(0,0,0,.07); display:flex; align-items:flex-start; gap:3px; }
.cal-tg-ev__txt { flex:1; min-width:0; }
.cal-tg-ev b { font-weight:700; }
.cal-tg-ev__imp { flex:0 0 auto; font-size:9px; line-height:1; margin-top:1px; }
/* Haute : plus dense + halo doux, barre épaisse (par border-left-width inline). Faible : atténué. */
.cal-tg-ev--imp-haute { background:color-mix(in srgb, var(--evc,#6c5ce7) 24%, var(--surface)); font-weight:600; box-shadow:0 0 0 1px color-mix(in srgb,#e0364e 45%,transparent), 0 2px 5px color-mix(in srgb, var(--evc,#6c5ce7) 30%, transparent); }
.cal-tg-ev--imp-faible { background:color-mix(in srgb, var(--evc,#6c5ce7) 9%, var(--surface)); border-left-style:dashed; opacity:.82; }
@media (prefers-color-scheme: dark){ .cal-tg-ev { color:color-mix(in srgb, var(--evc,#6c5ce7) 42%, #fff); } }
/* En vue Jour, la colonne unique occupe toute la largeur */
.cal-tg:not(.cal-tg--sem) > .cal-tg-col { flex:1; }
@media (max-width:760px){ .cal-tg-ev { font-size:10px; } .cal-week-dname { display:none; } }

/* ====== v5.559 : calendrier « façon planning » (vues Semaine & Jour) — demande Mika ======
   Reprend la FORME du planning : carte à colonnes-jour + blocs .shift EMPILÉS (plus de grille horaire).
   Les blocs réutilisent les classes .shift / .shift__time / .shift__role / .shift__meta du planning. */
.cal-plan { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow-x:auto; overflow-y:visible; }
.cal-plan__head, .cal-plan__body { display:grid; grid-template-columns:repeat(7, minmax(116px, 1fr)); }
.cal-plan__head { border-bottom:2px solid var(--border-2); background:var(--surface); }
.cal-plan__head .day-head { cursor:pointer; transition:background .12s, color .12s; }
.cal-plan__head .day-head:first-child, .cal-plan__body .day-cell:first-child { border-left:0; }
.cal-plan__head .day-head:hover { background:var(--primary-soft); color:var(--primary); }
.cal-plan__head .day-head.is-ferie .day-head__name, .cal-plan__head .day-head.is-ferie .day-head__date { color:#e03050; }
.cal-plan__body .day-cell { min-height:132px; padding:8px; }
/* Bloc RDV « façon shift » : couleur propre par événement (via --shift-color/--shift-bg posés en inline). */
.cal-eshift { --shift-bg:var(--surface-2); }
.cal-eshift .shift__role { white-space:normal; }               /* le titre du RDV peut passer à la ligne */
.cal-eshift--clic { cursor:pointer; }
.cal-eshift__imp { font-size:10px; }
.cal-eshift__del { opacity:0; transition:opacity .12s; }
.cal-eshift:hover .cal-eshift__del { opacity:1; }
/* Importance : Haute = halo + fond plus marqué ; Faible = atténuée + barre tiretée. */
.cal-eshift--imp-haute { box-shadow:0 0 0 1px color-mix(in srgb,#e0364e 42%,transparent), 0 2px 6px color-mix(in srgb, var(--shift-color) 26%, transparent); }
.cal-eshift--imp-faible { opacity:.82; border-left-style:dashed; }
/* Bouton « + » d'ajout dans une cellule-jour (reprend .add-shift du planning) */
.cal-addshift { margin-top:auto; align-self:stretch; }
/* v5.567 — Vue semaine : bandeau « journée » + AXE DES HEURES à gauche (demande Mika « visu vs les shifts »).
   Réutilise l'infra .cal-tg (gouttière 48px + grille 7 colonnes) pour aligner en-têtes, bandeau et grille. */
.calw { display:flex; flex-direction:column; gap:8px; overflow-x:auto; }
/* colonnes-jour : au moins 116px (lisibles) → scroll horizontal ALIGNÉ (en-têtes + bandeau + grille ensemble) sur écran étroit, comme l'ancienne vue */
.calw .cal-tg-days { grid-template-columns:repeat(7, minmax(116px, 1fr)); min-width:auto; }
.calw-head .cal-tg-days { align-items:stretch; }
.calw-dh { border:1px solid var(--border); border-radius:8px; padding:6px 4px; background:var(--surface); cursor:pointer; transition:border-color .12s; }
.calw-dh:hover { border-color:var(--primary); }
/* Bandeau « toute la journée » : cartes façon planning, hauteur bornée (scroll) pour ne pas repousser la grille */
.calw-allday .cal-tg-days { align-items:start; }
.calw-ad { max-height:34vh; overflow-y:auto; position:relative; }
.calw-ad:hover .add-shift { opacity:1; }
.calw-ad .cal-allday-empty { align-self:center; margin:auto 0; }
/* Grille horaire : colonnes du jour / week-end teintées comme le planning */
.calw-grid { align-items:flex-start; }
.calw-grid .cal-tg-col.is-today { background:var(--primary-soft-2); }
.calw-grid .cal-tg-col.is-dimanche { background:color-mix(in srgb, var(--text-3) 9%, var(--surface)); }
.calw-grid .cal-tg-col.is-weekend { background:var(--surface-2); }
.calw-grid .cal-tg-col--click:hover { background:color-mix(in srgb, var(--primary) 6%, var(--surface)); }
/* v5.570 — blocs SHIFT sur la grille horaire (couche « Planning », couleur par salarié via --shc) */
.cal-tg-shift { position:absolute; border-radius:5px; overflow:hidden; cursor:pointer; font-size:10px; line-height:1.1; padding:2px 4px; color:#fff;
  background:color-mix(in srgb, var(--shc,#64748b) 90%, #000); box-shadow:inset 3px 0 0 rgba(255,255,255,.45); z-index:1;
  display:flex; flex-direction:column; gap:0; }
.cal-tg-shift__h { font-weight:800; font-size:9px; opacity:.92; }
.cal-tg-shift__n { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-tg-shift:hover { filter:brightness(1.08); box-shadow:inset 3px 0 0 rgba(255,255,255,.6), 0 2px 7px rgba(0,0,0,.22); z-index:5; }
.calw-grid .cal-tg-ev, .calw-jgrid .cal-tg-ev { z-index:2; }   /* les RDV passent au-dessus des shifts si côte à côte */
/* Vue Jour : gouttière + colonne unique large (mêmes rangées alignées que la semaine) */
.calw--jour .calw-jrow { display:flex; gap:8px; align-items:stretch; }
.calw-jgut { width:48px; flex:0 0 48px; }
.calw--jour .calw-jrow > .cal-tg-hours { flex:0 0 48px; }
.calw--jour .calw-jrow > .day-head,
.calw--jour .calw-jrow > .cal-allday-cell,
.calw--jour .calw-jrow > .cal-tg-col { flex:1 1 auto; min-width:0; }
.calw--jour .calw-ad { max-height:none; }
/* Vue Jour : colonne unique centrée, façon « une colonne de planning » en grand */
.cal-jourplan { max-width:760px; margin:0 auto; }
.cal-jourplan__head { text-align:left; border:1px solid var(--border); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; background:var(--surface); }
.cal-jourplan__head .day-head__date { font-size:15px; margin-top:2px; }
.cal-jp-meteo { font-weight:600; color:var(--text-3); font-size:12.5px; }
.cal-jourplan__body { border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); min-height:200px; padding:12px; gap:9px; }
.cal-jourplan__body .cal-eshift { padding:9px 12px; }
.cal-jourplan__body .cal-eshift .shift__time { font-size:13.5px; }
.cal-jourplan__body .cal-eshift .shift__role { font-size:12.5px; }
@media (max-width:760px){ .cal-plan__head, .cal-plan__body { grid-template-columns:repeat(7, minmax(120px, 1fr)); } .cal-jourplan { max-width:100%; } }
/* Page « Mon profil » */
.prof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:540px){ .prof-grid { grid-template-columns:1fr; } }
/* Outils boutique dans « Mon profil » (v5.201.0) : Gérer les apps + Réglages — gérant/admin. */
.prof-outils { display: flex; gap: 10px; flex-wrap: wrap; }
.prof-outils .btn { display: inline-flex; align-items: center; gap: 8px; }
.prof-outils .btn svg { width: 16px; height: 16px; }
.prof-sep { height:1px; background:var(--border); margin:16px 0 12px; }
.prof-hubmode__t { font-size:17px; font-weight:800; margin-bottom:6px; }
.prof-hubmode__btn { background:#3a3f52; color:#fff; border-color:#3a3f52; width:100%; }
.prof-hubmode__btn:active { transform:scale(.99); }
/* App Accès — matrice de droits */
.acc-matrix th, .acc-matrix td { font-size:13px; }
.acc-matrix tr.acc-grp td { background:var(--bg2,#eef2f8); font-weight:800; color:var(--text-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.acc-matrix input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--primary); }
.acc-dates { display:flex; flex-direction:column; gap:6px; }
.acc-dates input { width:138px; max-width:138px; padding:6px 8px; font-size:12px; }
.acc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.acc-table { min-width:780px; }
.acc-table th, .acc-table td { white-space:nowrap; }
.acc-table .cell-emp__name { white-space:normal; }
.acc-apercu-btn { margin-left:auto; flex:0 0 auto; }
/* Aperçu du compte d'un salarié */
.apercu-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.apercu-sec-t { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); margin:16px 0 8px; }
.apercu-apps { display:flex; flex-wrap:wrap; gap:10px; }
.apercu-app { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; padding:8px 12px; font-weight:700; font-size:13px; background:var(--surface); }
.apercu-app__ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.apercu-menus { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.apercu-grp { grid-column:1/-1; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-top:10px; }
.apercu-line { display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 0; }
.apercu-line .apercu-mark { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 auto; }
.apercu-line.is-ok .apercu-mark { background:rgba(31,170,107,.15); color:#1faa6b; }
.apercu-line.is-no { color:var(--text-3); }
.apercu-line.is-no .apercu-mark { background:var(--border); color:var(--text-3); }
.apercu-line .apercu-lbl { flex:1; }
.apercu-tag { font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.apercu-tag--mod { background:rgba(31,111,214,.14); color:var(--primary); }
.apercu-tag--ro { background:var(--bg2,#eef2f8); color:var(--text-3); }
.apercu-tag--val { background:rgba(31,170,107,.16); color:#178a56; }
/* Accueil — widget « À valider » */
.aval-card .aval-head { display:flex; align-items:center; gap:10px; font-weight:800; font-size:14px; }
.aval-badge { background:rgba(31,170,107,.16); color:#178a56; border-radius:999px; padding:1px 9px; font-size:12px; font-weight:800; }
.aval-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--border); }
.aval-info { flex:1; min-width:0; }
.aval-info b { font-size:13.5px; }
.aval-info span { display:block; font-size:12px; color:var(--text-3); }
.aval-act { display:flex; gap:6px; flex:0 0 auto; }
/* v5.569 — « À valider » : cartes AGRANDIES (nom complet + période + jours + alerte « déjà en congé ») */
.aval-card .rap-head { margin-bottom:12px; }
.av2-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; }
.av2-card { position:relative; display:flex; flex-direction:column; gap:9px; padding:14px 15px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface) 72%);
  border:1px solid color-mix(in srgb, var(--c) 22%, var(--border)); box-shadow:var(--shadow-sm); }
.av2-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c); }
.av2-top { display:flex; align-items:center; gap:11px; }
.av2-ic { width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1;
  background:color-mix(in srgb, var(--c) 18%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.av2-id { min-width:0; display:flex; flex-direction:column; gap:1px; }
.av2-id b { font-size:14.5px; font-weight:800; letter-spacing:-.2px; line-height:1.2; }
.av2-type { font-size:12px; color:var(--text-2); font-weight:700; }
.av2-per { font-size:12.5px; color:var(--text-2); font-weight:600; }
.av2-conf { font-size:12px; font-weight:600; border-radius:9px; padding:6px 10px; line-height:1.35; }
.av2-conf b { font-weight:800; }
.av2-conf--ok { color:color-mix(in srgb, #1aa653 72%, var(--text)); background:color-mix(in srgb, #20bf73 12%, var(--surface)); border:1px solid color-mix(in srgb, #20bf73 26%, transparent); }
.av2-conf--warn { color:color-mix(in srgb, #d68a1e 78%, var(--text)); background:color-mix(in srgb, #e0a53a 15%, var(--surface)); border:1px solid color-mix(in srgb, #e0a53a 34%, transparent); }
.av2-act { display:flex; gap:8px; margin-top:2px; }
.av2-act .btn { flex:1; justify-content:center; }
/* Config inline des accès (mode aperçu) : cases sur les menus + barre de page */
.cfg-chips { display:inline-flex; gap:4px; margin-left:auto; flex:0 0 auto; }
.cfg-chip { width:21px; height:21px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.cfg-chip svg { width:12px; height:12px; display:block; }
.cfg-chip--acc { border-color:#1f6fd6; color:#1f6fd6; }
.cfg-chip--mod { border-color:#e8852b; color:#e8852b; }
.cfg-chip--val { border-color:#1faa6b; color:#1faa6b; }
.cfg-chip.on { color:#fff; border-color:transparent; }
.cfg-chip--acc.on { background:#1f6fd6; }
.cfg-chip--mod.on { background:#e8852b; }
.cfg-chip--val.on { background:#1faa6b; }
.cfg-chip:disabled { opacity:.4; cursor:not-allowed; }
#cfg-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff7ed; border:1px solid #fdba74; border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.cfg-bar__t { font-weight:800; font-size:13px; color:#9a3412; }
.cfg-bbtn { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border); background:var(--surface); border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--text-2); }
.cfg-bbtn svg { width:14px; height:14px; }
.cfg-bbtn--acc { border-color:#1f6fd6; color:#1f6fd6; }
.cfg-bbtn--mod { border-color:#e8852b; color:#e8852b; }
.cfg-bbtn--val { border-color:#1faa6b; color:#1faa6b; }
.cfg-bbtn.on { color:#fff; border-color:transparent; }
.cfg-bbtn--acc.on { background:#1f6fd6; }
.cfg-bbtn--mod.on { background:#e8852b; }
.cfg-bbtn--val.on { background:#1faa6b; }
.cfg-bbtn:disabled { opacity:.45; cursor:not-allowed; }
/* Bannière « aperçu réel » (voir comme un salarié) */
#apercu-banner { position:fixed; top:0; left:0; right:0; z-index:100000; background:linear-gradient(135deg,#1f6fd6,#8e44ad); color:#fff; display:flex; align-items:center; justify-content:center; gap:16px; padding:9px 16px; font-size:13.5px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.22); }
#apercu-banner b { font-weight:800; }
#apercu-banner button { background:#fff; color:#1a59ad; border:none; border-radius:999px; padding:7px 16px; font-weight:800; font-size:13px; cursor:pointer; flex:0 0 auto; }
#apercu-banner button:hover { background:#eef2ff; }
body.apercu-on { padding-top:46px; }

/* --- Cadrage de photo (crop.js) --- */
.crop-ov { position:fixed; inset:0; background:rgba(15,18,30,.62); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:9999; }
.crop-card { background:var(--surface,#fff); border-radius:18px; padding:20px; width:min(92vw,360px); box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; }
.crop-title { font-weight:700; font-size:16px; margin-bottom:14px; color:var(--text,#1a1a2e); }
.crop-stage { position:relative; width:300px; height:300px; max-width:100%; margin:0 auto; border-radius:14px; overflow:hidden; touch-action:none; cursor:grab; background:#0d1020; }
.crop-stage:active { cursor:grabbing; }
.crop-canvas { display:block; width:300px; height:300px; }
.crop-ring { position:absolute; inset:0; pointer-events:none; }
.crop-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; box-shadow:0 0 0 9999px rgba(13,16,32,.45); outline:2px solid rgba(255,255,255,.85); }
.crop-zoom { display:flex; align-items:center; gap:10px; margin:14px 4px 4px; color:var(--text-muted,#8a8a9a); font-size:18px; font-weight:700; }
.crop-zoom input { flex:1; accent-color:var(--primary,#6c5ce7); }
.crop-zbtn { flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--border,#dcdce6); background:var(--surface,#fff); color:var(--text,#20232e); font-size:20px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:background .12s, transform .08s; }
.crop-zbtn:hover { background:var(--surface-2,#f1f1f7); }
.crop-zbtn:active { transform:scale(.92); }
.crop-actions { display:flex; gap:10px; margin-top:14px; }
.crop-actions .btn { flex:1; }
.crop-hint { margin-top:10px; font-size:12px; color:var(--text-muted,#9a9a9a); }

/* --- Compteur planning : CP vs maladie distincts --- */
.total-cell__abs .tc-cp { color:#0d9488; font-weight:700; }
.total-cell__abs .tc-maladie { color:#e0364e; font-weight:700; }
.total-cell__abs .tc-ferie { color:#7048e8; font-weight:700; }
.total-cell__abs .tc-cfa { color:#1c7ed6; font-weight:700; }
.total-cell__hours--maintenu { color:#0d9488 !important; } /* semaine 100% absence : gros chiffre = heures maintenues (teal) */
/* Shift sur un jour férié NON travaillé (chômé) : en pointillé. */
.shift--ferie-chome { border: 2px dashed var(--shift-color, #6c5ce7) !important; opacity: .8; }
.day-bar.shift--ferie-chome { border: 2px dashed var(--shift-color, #6c5ce7) !important; }
.total-cell__sub .tc-ferie { color:#7048e8; font-weight:700; }
.total-cell__sub .tc-dimanche { color:#b94fa0; font-weight:700; }
.total-cell__ecart .tc-sup { font-weight:700; white-space:nowrap; }
/* v5.616 — « X au-delà » : dépassement du contrat sans marquage H+. Souligné pointillé = « survole-moi »,
   l'infobulle explique que ces heures sont payées au taux normal. Comme .tc-sup, reste visible à l'impression. */
.total-cell__ecart .tc-audela { font-weight:700; white-space:nowrap; border-bottom:1.5px dotted currentColor; cursor:help; }
/* Badge « heure supplémentaire » : petit chip « H+ » ambré, collé après l'horaire. */
.shift__supp { display:inline-flex; align-items:center; margin-left:5px; font-size:9px; font-weight:800; letter-spacing:.3px; line-height:1; color:#fff; background:linear-gradient(135deg,#fbbf24,#f59e0b); padding:2px 5px; border-radius:5px; vertical-align:text-top; box-shadow:0 1px 2px rgba(245,158,11,.35); }
/* v5.791 : badge « H↩ » — heures travaillées MISES DE CÔTÉ (compteur de récupération). Vert = du temps, pas de l'argent. */
.shift__recup { display:inline-flex; align-items:center; margin-left:5px; font-size:9px; font-weight:800; letter-spacing:.3px; line-height:1; color:#fff; background:linear-gradient(135deg,#40c057,#2f9e44); padding:2px 5px; border-radius:5px; vertical-align:text-top; box-shadow:0 1px 2px rgba(47,158,68,.35); }
/* v5.241.0 (règle Mika) : GROS point d'exclamation sur les shifts d'alternants > 4h30 d'affilée. */
.shift__alerte { position:absolute; top:-7px; right:-7px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; line-height:1; color:#fff; background:linear-gradient(150deg,#f43f5e,#dc2626); border:2px solid #fff; border-radius:50%; box-shadow:0 3px 8px rgba(220,38,38,.5); z-index:5; pointer-events:auto; cursor:help; animation:alertePulse 1.6s ease-in-out infinite; }
.day-bar .shift__alerte { top:3px; right:3px; width:19px; height:19px; font-size:13px; } /* day-bar a overflow:hidden -> badge posé À L'INTÉRIEUR */
@keyframes alertePulse { 0%,100% { transform:scale(1); box-shadow:0 3px 8px rgba(220,38,38,.5); } 50% { transform:scale(1.14); box-shadow:0 3px 14px rgba(220,38,38,.75); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .shift__alerte { animation:none; } }
/* (pas de liseré sur le côté du shift heures sup : le badge « H+ » suffit) */
/* Compteur repos compensateur (Total) — juste la couleur du texte (orange / vert / rouge), sans fond. */
.total-cell__sub.total-cell__rc    { color:#b45309; }
.total-cell__sub.total-cell__rc-ok { color:#0d9488; }
.total-cell__sub.total-cell__rc-0  { color:#c0392b; }
/* Jauge de compensation sur le jour de repos compensateur : barre de progression repos posé / dimanche dû. */
.rc-jauge { margin-top:5px; text-align:center; line-height:1.2; }
.rc-jauge__dim { display:block; font-size:8.5px; font-weight:700; color:#9aa0ad; letter-spacing:.2px; }
.rc-jauge__val { display:block; font-size:9.5px; font-weight:800; margin:1px 0 3px; }
.rc-jauge__bar { display:block; height:5px; border-radius:99px; background:#e8ebf1; overflow:hidden; }
.rc-jauge__bar > i { display:block; height:100%; border-radius:99px; transition:width .3s ease; }
.rc-jauge--ok .rc-jauge__val { color:#0a7d68; } .rc-jauge--ok .rc-jauge__bar > i { background:#16b88f; }
.rc-jauge--ko .rc-jauge__val { color:#b06a00; } .rc-jauge--ko .rc-jauge__bar > i { background:#f59e0b; }
.rc-jauge--0  .rc-jauge__val { color:#c0392b; } .rc-jauge--0  .rc-jauge__bar > i { background:#e0556b; }

/* --- Popup compte à rebours avant déconnexion pour inactivité --- */
.inact-ov { position:fixed; inset:0; background:rgba(15,18,30,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:10000; }
.inact-card { background:var(--surface,#fff); border-radius:18px; padding:24px 26px; width:min(92vw,340px); box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; }
.inact-title { font-weight:800; font-size:17px; color:var(--text,#1a1a2e); }
.inact-msg { margin:10px 0 6px; font-size:13px; color:var(--text-muted,#8a8a9a); }
.inact-count { font-size:40px; font-weight:800; color:#e0364e; margin:4px 0 16px; font-variant-numeric:tabular-nums; }

/* ===== App RH (hub) ===== */
.rh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.rh-tile { text-align:left; background:var(--surface,#fff); border:1px solid var(--border,#e7e7ef); border-radius:16px; padding:18px 16px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; border-top:3px solid var(--ac,#6c5ce7); }
.rh-tile:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); border-color:var(--ac,#6c5ce7); }
.rh-tile__ic { font-size:30px; line-height:1; }
.rh-tile__ic--v9 { display:block; width:46px; height:46px; }
.rh-tile__ic--v9 svg { width:46px; height:46px; display:block; overflow:visible; }
.rh-tile__t { font-weight:800; font-size:15px; color:var(--text,#1a1a2e); display:flex; align-items:center; gap:8px; }
.rh-tile__badge { background:var(--ac,#6c5ce7); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; }
.rh-tile__d { font-size:12.5px; color:var(--text-muted,#8a8a9a); line-height:1.35; }
/* v5.523 : cartes RH COMPACTES sur téléphone — icône à gauche, titre + description à droite (au lieu d'empilé) → cartes bien plus courtes. Demande Mika. */
body.mob-hub .rh-tile { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic t" "ic d"; column-gap:12px; row-gap:2px; padding:11px 13px; align-items:center; }
body.mob-hub .rh-tile__ic { grid-area:ic; align-self:center; font-size:26px; }
body.mob-hub .rh-tile__ic--v9, body.mob-hub .rh-tile__ic--v9 svg { width:40px; height:40px; }
body.mob-hub .rh-tile__t { grid-area:t; align-self:end; font-size:14px; }
body.mob-hub .rh-tile__d { grid-area:d; align-self:start; font-size:12px; }
.rh-form { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:760px){ .rh-form { grid-template-columns:1fr; } }
.rh-lettre-ov { position:fixed; inset:0; background:rgba(15,18,30,.55); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; z-index:10000; overflow:auto; padding:24px 12px; }
.rh-lettre-card { background:#fff; border-radius:14px; width:min(96vw,820px); box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.rh-lettre-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #eee; background:#faf9ff; }
.rh-lettre-print { padding:38px 46px; color:#1a1a2e; font-size:14px; line-height:1.5; min-height:60vh; outline:none; }
.rh-lettre-print p { margin:10px 0; }
@media print {
  body.rh-print > *:not(.rh-lettre-ov) { display:none !important; }
  body.rh-print .rh-lettre-ov { position:static; background:none; backdrop-filter:none; padding:0; overflow:visible; }
  body.rh-print .rh-lettre-card { box-shadow:none; width:auto; border-radius:0; }
  body.rh-print .rh-lettre-bar { display:none !important; }
  body.rh-print .rh-lettre-print { padding:0; min-height:auto; }
}

/* ============================================================
   RESPONSIVE — smartphones, Samsung & Galaxy Fold
   (complète le bloc principal @media max-width:820px ci-dessus)
   ============================================================ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }              /* pas de décalage horizontal global */
  /* Champs ≥ 16px : évite le zoom automatique iOS/Android à la saisie */
  input, select, textarea, .input, .select { font-size: 16px; }
  /* Topbar : passe à la ligne, compacte, reste collée en haut */
  .topbar { padding: 8px 12px; gap: 10px; flex-wrap: wrap; height: auto; min-height: 0; }
  .topbar__title { font-size: 17px; }
  /* Cluster d'icônes (cloche, notifs, connexions…) : compact + retour à la ligne */
  .topbar-cluster { flex-wrap: wrap; gap: 5px; justify-content: flex-start; max-width: 100%; }
  .topbar-icon, .tool-icon { width: 36px; height: 36px; }
  /* Barres d'action de page (filtres, bascules, « Nouveau shift »…) : à la ligne */
  .tri-bar, .rap-periode, .cg-filtres, .data-filtres, .bq-filtres { flex-wrap: wrap; }
  /* Tableaux larges : défilement horizontal DANS la carte, pas toute la page */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .table { font-size: 13px; }
  .rh-grid { grid-template-columns: 1fr 1fr; }
  .rh-form { grid-template-columns: 1fr; }
  .btn:not(.btn--sm) { min-height: 38px; }        /* cible tactile confortable */
}

/* Smartphones portrait (≤ 480px) — Galaxy S, iPhone… */
@media (max-width: 480px) {
  .page { padding: 10px; }
  .topbar { padding: 7px 10px; }
  .topbar__title { font-size: 16px; }
  .topbar__title .page-ic { width: 20px; height: 20px; }
  .topbar-icon, .tool-icon { width: 34px; height: 34px; }
  /* Toutes les grilles multi-colonnes -> 1 colonne */
  .rh-grid, .app-tiles, .apps-grid, .fp-grid, .rapport-grid, .cdg-charts,
  .bq-proj-grid, .bq-params, .bf2-per-grid, .cp-split, .fp-hero__body { grid-template-columns: 1fr !important; }
  .fp-hero__body { flex-direction: column; }
  .sidebar__clock .flip { width: 30px; height: 38px; font-size: 21px; }
  .modal { width: calc(100vw - 16px) !important; }
}

/* Galaxy Fold plié + très petits écrans (≤ 360px) */
@media (max-width: 360px) {
  .page { padding: 7px; }
  .topbar { padding: 6px 8px; gap: 6px; }
  .topbar__title { font-size: 15px; }
  .topbar-cluster { gap: 3px; }
  .topbar-icon, .tool-icon { width: 30px; height: 30px; }
  .topbar-icon svg, .tool-icon svg { width: 17px; height: 17px; }
  .sidebar { padding: 6px 8px; }
  .sidebar__brand { padding: 2px 2px 4px; }
  .sidebar__title { font-size: 14px; }
  .sidebar__subtitle { font-size: 10px; }
  .sidebar__clock .flip { width: 26px; height: 33px; font-size: 18px; }
  .nav-item { padding: 6px 9px; font-size: 12px; }
  .table { font-size: 12px; }
  .btn { font-size: 13px; padding: 8px 11px; }
  .card { padding: 10px 11px; }
  .modal { width: calc(100vw - 8px) !important; }
  .modal__body { max-height: 76vh; }
}

/* ============================================================
   Finitions iPhone (iOS Safari) & tous Samsung
   ============================================================ */
@media (max-width: 820px) {
  /* Hauteur dynamique : la barre d'adresse iOS/Chrome ne coupe plus le bas de l'app */
  #app { min-height: 100dvh; }
  /* v5.510 : le fond « canevas » couvre tout l'écran (jamais de blanc). NB : NE PAS mettre
     overscroll-behavior sur .main — .main est en overflow:auto mais ne défile pas verticalement
     (le body défile) : « contain » y PIÉGEAIT le scroll tactile et bloquait tout le défilement de
     l'app sur téléphone (bug signalé par Mika). On le garde uniquement sur les vrais scrollers isolés. */
  html { background: var(--bg, #f4f5fa); }
  .modal__body, .pop-scroll { overscroll-behavior: contain; }
  /* Défilement fluide (momentum) iOS sur les zones scrollables */
  .main, .card, .modal__body, .pop-scroll, .pop-panel, .sidebar__nav { -webkit-overflow-scrolling: touch; }
  /* Pas de flash gris au toucher (iOS & Android/Samsung) */
  button, a, .btn, .nav-item, .tool-icon, .topbar-icon, .app-tile, .shift, .seg-btn { -webkit-tap-highlight-color: transparent; }
  /* Champs : rendu natif neutralisé pour un style cohérent iOS/Android */
  input, select, textarea, .input, .select { -webkit-appearance: none; appearance: none; border-radius: 10px; }
}
/* Téléphones à l'horizontale (écran court) : on garde la mise en page mobile */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
  #app { flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }
  .sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar__nav { flex-direction: row; overflow-x: auto; }
  .main { width: 100%; overflow: auto; }
}

/* ============================================================
   Planning mobile — colonne des noms épinglée à gauche
   (reste visible pendant qu'on fait défiler les jours)
   ============================================================ */
@media (max-width: 820px) {
  /* .main doit être le conteneur de défilement -> pas de clip sur .planning */
  .planning { overflow: visible; }
  /* Semaine : colonne employé + total plus étroites (on voit plus de jours) */
  .planning__row { grid-template-columns: 140px repeat(7, minmax(100px, 1fr)) 116px; }
  /* 1re colonne (nom / coin / total-libellé) figée à gauche pendant le défilement horizontal */
  .planning__row > .emp-cell,
  .planning__head > .corner,
  .planning__foot > .foot-label {
    position: sticky; left: 0; z-index: 4;
    background: var(--surface);
    box-shadow: 3px 0 6px rgba(0, 0, 0, .07);
  }
  .planning__head > .corner { z-index: 7; }                 /* coin haut-gauche au-dessus de tout */
  .planning__foot > .foot-label { background: var(--surface-2); }
  /* Colonne employé compacte : on garde photo + nom, on masque le matricule */
  .emp-cell__mat { display: none; }
}

/* ============================================================
   Bouton « Installer l'application » (PWA)
   ============================================================ */
.pwa-install { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9500; display: flex; align-items: stretch; background: var(--primary, #6c5ce7); color: #fff; border-radius: 999px; box-shadow: 0 10px 28px rgba(108,92,231,.45); overflow: hidden; max-width: calc(100vw - 24px); }
.pwa-install__main { display: flex; align-items: center; gap: 8px; background: none; border: none; color: #fff; font-weight: 700; font-size: 14px; padding: 11px 8px 11px 18px; cursor: pointer; white-space: nowrap; }
.pwa-install__main svg { width: 19px; height: 19px; flex-shrink: 0; }
.pwa-install__x { background: none; border: none; color: rgba(255,255,255,.85); font-size: 20px; line-height: 1; padding: 0 14px 0 8px; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .pwa-install { animation: pwa-pop .35s ease; } }
@keyframes pwa-pop { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.pwa-ov { position: fixed; inset: 0; background: rgba(15,18,30,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 16px; }
.pwa-card { background: var(--surface, #fff); color: var(--text, #1a1a2e); border-radius: 18px; padding: 22px 22px 18px; width: min(94vw, 380px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.pwa-card__t { font-weight: 800; font-size: 18px; }
.pwa-card__sub { font-size: 13px; color: var(--text-3, #8a8a9a); margin: 2px 0 12px; font-weight: 600; }
.pwa-steps { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.4; }
.pwa-steps li { padding-left: 2px; }

/* ============================================================
   FX — Effets visuels en TEST (js/fx.js) — 7 idées à valider.
   Chaque bloc = UN effet ; interrupteurs dans js/fx.js (CFG).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Cascade d'entrée (accueil) : chaque bloc arrive l'un après l'autre. */
  .fx-cas { animation: fxCas .55s cubic-bezier(.18, .7, .25, 1) both; animation-delay: calc(var(--fxi, 0) * 75ms); }
  @keyframes fxCas { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

  /* 4. Transition douce à chaque changement d'application. */
  #main.fx-vuein { animation: fxVue .3s ease-out both; }
  @keyframes fxVue { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  /* 7. Révélation au défilement : cartes sous l'écran, dévoilées en douceur. */
  .fx-sr { opacity: 0; transform: translateY(16px); }
  .fx-sr-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.18, .7, .25, 1); }

  /* 8. Glissement du planning : la grille arrive du côté vers lequel on navigue (‹ = gauche, › = droite). */
  .planning-wrap.fx-slide-d { animation: fxSlideD .28s cubic-bezier(.2, .7, .3, 1) both; }
  .planning-wrap.fx-slide-g { animation: fxSlideG .28s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes fxSlideD { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes fxSlideG { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}

/* 2. Halo lumineux au survol des icônes du menu (dans la couleur de l'app). */
/* v5.213.0 : l'état repos porte déjà l'ombre COLORÉE mais invisible (0 décalage / 0 flou) — la
   transition ne fait que la déployer. Sans ça, le navigateur partait d'une ombre NOIRE par défaut
   (filter:none → drop-shadow), d'où le halo gris/noir qui précédait la couleur au survol. */
body.fx-glow .nav-item--hubapp .nav-app__ic { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; filter: drop-shadow(0 0 0 color-mix(in srgb, var(--halo, var(--ac, var(--primary))) 55%, transparent)); } /* v5.555 : --halo = couleur RÉELLE de l'icône (banque dorée, RH couleur du jour) — demande Mika */
/* Survol : élévation + halo doux dans la couleur de l'app — SANS liseré/contour (demande Mika 03/07/2026).
   drop-shadow (et PAS box-shadow) : l'ombre épouse la FORME dessinée de l'icône, pas le carré de la case —
   sinon les icônes qui ne remplissent pas tout le carré (RH, caisse, météo…) montrent un cadre fantôme. */
body.fx-glow .nav-item--hubapp:hover .nav-app__ic {
  transform: translateY(-2px) scale(1.1);
  box-shadow: none;
  filter: drop-shadow(0 6px 9px color-mix(in srgb, var(--halo, var(--ac, var(--primary))) 55%, transparent)); /* v5.555 : halo = couleur de l'icône */
}
body.fx-glow .app-tile:hover .app-tile__ic {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac, var(--primary)) 30%, transparent),
    0 8px 24px color-mix(in srgb, var(--ac, var(--primary)) 55%, transparent);
}
/* 2bis. Halo au survol des SHIFTS du planning, dans la couleur du poste (vue Semaine/Mois + barres vue Jour). */
body.fx-glow .shift, body.fx-glow .day-bar { transition: box-shadow .15s ease, transform .15s ease, filter .15s ease; }
body.fx-glow .shift:hover, body.fx-glow .day-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--shift-color, var(--primary)) 38%, transparent),
    0 6px 16px color-mix(in srgb, var(--shift-color, var(--primary)) 52%, transparent);
  filter: saturate(1.08);
  z-index: 6;
}

/* 5. Bandeau « Veille » de l'accueil en carte SOMBRE (style vitrine produit). */
/* v5.664 (retour Mika « la tuile CA est toujours blanche ») — même dégradé pêche que le hero via --acc-sky, quel que soit l'effet darkkpi. */
body.fx-darkkpi .acc-kveille { background: var(--acc-sky, var(--surface)); border-color: var(--acc-brd, var(--border)); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body.fx-darkkpi .acc-kveille:hover { border-color: var(--primary); box-shadow: 0 3px 14px rgba(20, 40, 90, .10); }
body.fx-darkkpi .acc-kveille__ttl { color: var(--primary-dark); }
/* v5.652 — bandeau Veille désormais en teinte hero CLAIRE : les KPI reprennent les couleurs sur fond clair. */
body.fx-darkkpi .acc-kv__v { color: var(--text); }
body.fx-darkkpi .acc-kv__l { color: var(--text-3); }
body.fx-darkkpi .acc-kv.acc-kv__ok .acc-kv__v { color: #1aa653; }
body.fx-darkkpi .acc-kv.acc-kv__warn .acc-kv__v { color: #c47a16; }
body.fx-darkkpi .acc-kv.acc-kv__bad .acc-kv__v { color: #e03050; }

/* 6. Fine barre dégradée multicolore tout en haut de l'écran (couleurs du HUB), qui DÉFILE en continu.
   La 1ʳᵉ et la dernière couleur sont identiques + background-size 200 % → boucle parfaitement fluide. */
body.fx-gradbar::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 4000; pointer-events: none;
  background: linear-gradient(90deg, hsl(8, 85%, 58%), hsl(38, 85%, 55%), hsl(88, 70%, 48%), hsl(168, 75%, 45%), hsl(210, 85%, 58%), hsl(262, 85%, 62%), hsl(322, 85%, 60%), hsl(8, 85%, 58%));
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  body.fx-gradbar::before { animation: fxGradFlow 14s linear infinite; }
  @keyframes fxGradFlow { to { background-position: 200% 0; } }
}
@media print { body.fx-gradbar::before { display: none; } }


/* ============ LEME MOBILE — coquille téléphone (Étape 1) ============ */

#mob-tabbar { display: none; }
body.mob-hub #mob-tabbar { display: block; }
body.mob-hub .sidebar, body.mob-hub .nav-burger, body.mob-hub .nav-backdrop { display: none !important; }
/* Un peu d'air autour du contenu mobile (haut / côtés / bas) — sinon les tuiles collent aux bords (demande Mika). */
body.mob-hub #main { padding: 14px 14px calc(64px + env(safe-area-inset-bottom, 0px)); }
body.mob-hub #main > .page { padding: 0; }   /* .page a déjà 24/26px : on neutralise pour ne pas doubler avec le padding de #main */
/* #main est en FLEX : une racine de vue avec `margin:0 auto` sans largeur explicite se réduit à son contenu et
   se retrouve coincée/centrée (bug météo « pas centrée » — .mto-mob faisait 110px). On force la pleine largeur. */
body.mob-hub #main > * { width: 100%; }
/* Fond de page DERRIÈRE les tuiles teinté ciel (posé par majCiel/renderAccueil) — accordé au hero, plus le bleu-gris froid figé. */
body.mob-hub { background: color-mix(in srgb, var(--mob-sky, var(--bg)) 8%, var(--bg)); transition: background .8s linear; }
/* ── En-tête des pages SALARIÉ sur mobile : barre épurée & bien rangée (demande Mika « pas beau ni bien rangé »). ──
   On ne garde que : titre · cloche 🔔 · avatar (→ profil) · déconnexion. On masque les outils manager (Demandes, À valider,
   Suivi modifs, Connectés) et le nom long + chevron + séparateur, qui tassaient la ligne. */
body.mob-hub.mob-emp #main .topbar-host { align-items: center; gap: 8px; padding: 6px 2px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); flex-wrap: nowrap; }
body.mob-hub.mob-emp #main .topbar__title { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mob-hub.mob-emp .topbar-cluster { gap: 4px; }
body.mob-hub.mob-emp .topbar-cluster #btn-demandes,
body.mob-hub.mob-emp .topbar-cluster #btn-todo,
body.mob-hub.mob-emp .topbar-cluster #btn-journal,
body.mob-hub.mob-emp .topbar-cluster .js-connectes,
body.mob-hub.mob-emp .topbar-cluster .js-rappels,
body.mob-hub.mob-emp .topbar-cluster .tu-sep,
body.mob-hub.mob-emp .topbar-user .topbar-user__nom,
body.mob-hub.mob-emp .topbar-user .tu-chev { display: none !important; }
body.mob-hub.mob-emp .topbar-cluster .topbar-user { background: transparent !important; padding: 2px !important; box-shadow: none !important; }
/* Chip profil (mobile salarié) : avatar par défaut = silhouette SANS fond blanc + icône à la taille de la cloche (21px), couleur héro — demande Mika */
body.mob-hub .topbar-user .tu-ring, body.mob-hub .topbar-user .topbar-user__av { background: transparent !important; }
body.mob-hub .topbar-user .topbar-user__av svg { width: 21px !important; height: 21px !important; color: var(--ckink, #2f4a74); }
.mob-home { max-width: 640px; margin: 0 auto; }
/* En-tête : lavis doux teinté ciel (fond posé en inline par mobile.js) — même famille que les tuiles. */
.mob-head { margin: 0 0 16px; padding: 18px; border-radius: 20px; box-shadow: 0 5px 16px rgba(0,0,0,.07); border: 1px solid color-mix(in srgb, var(--mob-sky, var(--primary)) 26%, var(--border)); }
.mob-head__hi, .mob-head__shop, .mob-date { color: var(--text); }
/* Le PRÉNOM **et l'HORLOGE** partagent le MÊME dégradé ciel (posé en inline sur .mob-head) et DÉFILENT avec l'heure, comme le hero. */
.mob-hi__nom, .mob-clock { background: var(--gradnom, linear-gradient(120deg, var(--primary), #8a7bff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 900; }
.mob-head__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mob-head__hi { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.mob-head__shop { font-size: 11.5px; opacity: .85; font-weight: 700; margin-top: 2px; }
.mob-head__clock { text-align: right; flex-shrink: 0; }
.mob-clock { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.05; padding: 0 1px; }
.mob-date { font-size: 10px; opacity: .82; font-weight: 700; letter-spacing: .3px; margin-top: 3px; }
.mob-wx { margin-top: 14px; background: color-mix(in srgb, var(--mob-sky, var(--primary)) 12%, var(--surface)); border: 0; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; }
.mob-wx__t { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
/* Icône météo ANIMÉE (WXI/.wxm) dans la carte de l'en-tête — même moteur que l'app Météo. */
.mob-wx__ic { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.mob-wx__ic .wxm, .mob-wx__ic svg { width: 34px; height: 34px; }
.mob-wx__d { font-size: 12.5px; display: flex; flex-direction: column; gap: 1px; }
.mob-wx__d span { opacity: .82; font-weight: 600; font-size: 11.5px; }
.mob-appsttl { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); margin: 6px 4px 10px; }
.mob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mob-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--mob-sky, var(--primary)) 22%, var(--border)); background: color-mix(in srgb, var(--mob-sky, var(--primary)) 14%, var(--surface)); text-align: left; cursor: pointer; transition: transform .08s ease; }
.mob-tile:active { transform: scale(.97); }
.mob-tile__ic { font-size: 26px; line-height: 1.1; }
.mob-tile__nom { font-size: 14.5px; font-weight: 800; color: var(--text); }
.mob-tile__sub { font-size: 11px; color: var(--text-3); font-weight: 600; }
.mob-soon { margin: 18px 2px 4px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--border-2); color: var(--text-3); font-size: 12.5px; text-align: center; }
/* z-index 90 : au-dessus du contenu de page, mais SOUS les modales (100), pop-ups, toasts (200) → les boutons des pop-ups (« Je signe »…) ne sont plus cachés par la barre. */
#mob-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; }
.mob-tabbar { display: flex; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(0,0,0,.07); }
.mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; padding: 4px 2px; color: var(--text-3); border-radius: 12px; }
.mob-tab__ic { font-size: 19px; line-height: 1; filter: opacity(.72); display: flex; align-items: center; justify-content: center; height: 26px; position: relative; }
.mob-tab__badge { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #fa5252; border: 2px solid var(--surface); }
.mob-tab__emo { font-size: 19px; line-height: 1; }
.mob-tab__ic .nav-app__ic, .mob-tab__ic .nav-ic9 { display: block; }
.mob-tab__ic .nav-ic9 svg, .mob-tab__ic .nav-app__ic svg { width: 26px; height: 26px; display: block; }
.mob-tab__lbl { font-size: 10px; font-weight: 800; color: var(--mob-sky, var(--primary)); opacity: .72; }
.mob-tab.is-on { color: var(--mob-sky, var(--primary)); }
.mob-tab.is-on .mob-tab__lbl { opacity: 1; }
.mob-tab.is-on .mob-tab__ic { filter: none; }


/* LEME MOBILE — cartes récap (Étape 2) */
.mob-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.mob-card { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; }
.mob-card__ttl { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.mob-serv { display: flex; align-items: center; gap: 12px; }
.mob-serv__day { flex: 0 0 auto; width: 46px; height: 50px; border-radius: 12px; background: color-mix(in srgb, var(--mob-sky, var(--primary)) 18%, var(--surface)); color: color-mix(in srgb, var(--mob-sky, var(--primary)) 72%, #000); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mob-serv__day span { font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.mob-serv__day b { font-size: 20px; font-weight: 800; }
.mob-serv__d { flex: 1; min-width: 0; }
.mob-serv__h { font-size: 16px; font-weight: 800; color: var(--text); }
.mob-serv__p { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mob-serv__go { flex: 0 0 auto; background: var(--mob-sky, var(--primary)); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.mob-today { display: flex; flex-direction: column; gap: 8px; }
.mob-td__g { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } /* v5.494 : le TITRE (Absents, Congés…) sur sa ligne, les noms EN DESSOUS — plus lisible (demande Mika) */
.mob-td__lbl { font-size: 11.5px; font-weight: 800; color: var(--text-2); flex: 0 0 auto; }
.mob-td__ns { display: flex; flex-wrap: wrap; gap: 5px; }
.mob-td__n { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; }
/* v5.489 : mêmes couleurs que le bloc « Aujourd'hui » de l'app classique (L1909-1914) — demande Mika */
.mob-td__g--abs .mob-td__n { background: #fde8e8; color: #c0392b; border-color: transparent; }
.mob-td__g--cp .mob-td__n { background: #e7f6ec; color: #1faa6b; border-color: transparent; }
.mob-td__g--rep .mob-td__n { background: #e8f0fe; color: #1f6fd6; border-color: transparent; }
.mob-td__g--cfa .mob-td__n { background: #efe9fb; color: #8854d0; border-color: transparent; }
.mob-td__g--formation .mob-td__n { background: #e3f2fd; color: #1971c2; border-color: transparent; }
.mob-td__g--rcomp .mob-td__n { background: #d6f3ee; color: #0c8074; border-color: transparent; }
.mob-rap { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-top: 1px solid var(--border); }
.mob-rap:first-of-type { border-top: 0; }
.mob-rap__day { flex: 0 0 auto; width: 40px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--rc, #6c5ce7) 14%, var(--surface)); color: color-mix(in srgb, var(--rc, #6c5ce7) 72%, #000); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mob-rap__day span { font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.mob-rap__day b { font-size: 17px; font-weight: 800; }
.mob-rap__t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text); }
.mob-rap__t span { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; margin-top: 1px; }
.mob-net { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.mob-net__l { font-size: 13px; font-weight: 800; color: var(--text); }
.mob-net__v { font-size: 18px; font-weight: 800; color: var(--success); }
.mob-net__v span { color: var(--text-3); }

/* LEME MOBILE — carte météo cliquable */
.mob-wx { width:100%; cursor:pointer; color:inherit; font:inherit; text-align:left; }
.mob-wx__go { margin-left:auto; font-size:20px; font-weight:800; opacity:.7; flex:0 0 auto; }

/* LEME MOBILE — icônes du hub dans les tuiles */
.mob-tile__ic { width:37px; height:37px; display:flex; align-items:center; justify-content:center; font-size:24px; overflow:visible; margin-bottom:1px; }
.mob-tile__ic .nav-app__ic { width:37px; height:37px; font-size:24px; background:transparent; border:0; box-shadow:none; overflow:visible; }
.mob-tile__ic .nav-app__ic.nav-ic9 svg { width:37px; height:37px; }
/* Icône météo de la tuile RÉDUITE (scale 3.05 par défaut = trop gros vs les autres tuiles, demande Mika). */
.mob-tile__ic .nav-app__ic[data-meteo-ic] .wxm { transform: scale(1.25); }
.mob-tile__ic .cal-wrap, .mob-tile__ic .cal-ic--mini { width:37px; height:37px; }
/* Calendrier = vraie tuile iOS ARRONDIE (au lieu du carré blanc à angles vifs qui tranchait). */
/* v5.485 : mini-calendrier des tuiles mobiles refait NICKEL — colonne flex forcée (l'interligne du conteneur
   décalait tout de 12px vers le bas et coupait le « 11 ») : bandeau mois en haut, jour centré dans le reste. */
.mob-tile__ic .cal-ic--mini { display:flex !important; flex-direction:column; align-items:stretch; justify-content:flex-start; line-height:1; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06); overflow:hidden !important; }
.mob-tile__ic .cal-ic__m { font-size:8px; padding:3px 0 2px; line-height:1; letter-spacing:0; }
.mob-tile__ic .cal-ic__d { font-size:16px; line-height:1; flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:1px; }
.mob-tile__ic .cal-rings { display:none; } /* les anneaux restent réservés au grand format du menu */
/* v5.487 : le badge ANIMÉ du mois revient sur la tuile mobile (comme sur le menu ordinateur), taillé pour la vignette 37px — demande Mika */
.mob-tile__ic .cal-badge-mois { display:block; width:30px; height:30px; right:-13px; bottom:-9px; }

/* ===== MÉTÉO MOBILE (écran dédié tél.) ===== */
.mto-mob { max-width:640px; margin:0 auto; padding-bottom:8px; }
.mto-mob__head { margin-bottom:12px; }
.mto-mob__ttl { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.mto-mob__loc { font-size:13px; color:var(--text-3); font-weight:600; }
.mto-mob-now { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg, #7db8e8, #cfe6f7); color:#0f2540; border-radius:20px; padding:16px 18px; margin-bottom:14px; box-shadow:0 6px 18px rgba(70,120,180,.2); }
.mto-mob-now__ic { width:64px; height:64px; flex:0 0 auto; }
.mto-mob-now__ic svg { width:100%; height:100%; }
.mto-mob-now__temp { font-size:44px; font-weight:800; letter-spacing:-2px; }
.mto-mob-now__d { display:flex; flex-direction:column; line-height:1.25; }
.mto-mob-now__d b { font-size:16px; }
.mto-mob-now__d span { font-size:12.5px; opacity:.85; font-weight:600; }
.mto-mob-hours { display:flex; gap:4px; overflow-x:auto; padding:10px 4px; margin-bottom:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; scrollbar-width:none; }
.mto-mob-hours::-webkit-scrollbar { display:none; }
.mto-mob-h { flex:0 0 auto; width:52px; text-align:center; }
.mto-mob-h__t { font-size:11.5px; color:var(--text-3); font-weight:700; }
.mto-mob-h__ic { width:34px; height:34px; margin:3px auto; }
.mto-mob-h__ic svg { width:100%; height:100%; }
.mto-mob-h__v { font-size:14px; font-weight:800; }
.mto-mob-days { background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:8px 14px 12px; margin-bottom:14px; }
.mto-mob-days__ttl { font-size:13px; font-weight:800; margin:6px 0 8px; }
.mto-mob-j { display:grid; grid-template-columns:34px 30px 1fr 26px 56px 26px; align-items:center; gap:6px; padding:6px 0; border-top:1px solid var(--border); }
.mto-mob-j:first-of-type { border-top:0; }
.mto-mob-j__d { font-size:12.5px; font-weight:800; }
.mto-mob-j__ic { width:30px; height:30px; }
.mto-mob-j__ic svg { width:100%; height:100%; }
.mto-mob-j__c { font-size:11px; color:var(--text-3); font-weight:600; line-height:1.15; white-space:normal; }
.mto-mob-j__mn { font-size:13px; color:var(--text-3); text-align:right; font-weight:700; }
.mto-mob-j__mx { font-size:13px; font-weight:800; text-align:right; }
.mto-mob-j__bar { position:relative; height:6px; background:var(--surface-1); border-radius:3px; }
.mto-mob-j__bar span { position:absolute; top:0; height:6px; border-radius:3px; background:linear-gradient(90deg,#4aa3e0,#f5c518,#f76707); }
.mto-mob-secttl { font-size:13px; font-weight:800; margin:4px 2px 8px; }
.mto-mob-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mto-mob-t { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:11px 13px; min-width:0; }
.mto-mob-t__l { font-size:11.5px; color:var(--text-3); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mto-mob-t__v { font-size:19px; font-weight:800; margin-top:2px; letter-spacing:-.3px; }
.mto-mob-t__s { font-size:11px; color:var(--text-3); font-weight:600; margin-top:3px; line-height:1.3; }
/* Détails météo mobile : 2 tuiles par ligne (demande Mika) — visuel empilé au-dessus de la valeur, centré. */
body.mob-hub .mto-mob .mto-detgrid2 { grid-template-columns: 1fr 1fr; gap: 10px; }
body.mob-hub .mto-mob .mto-d2 { padding: 11px 11px; gap: 4px; }
body.mob-hub .mto-mob .mto-d2__b { flex-direction: column; align-items: center; gap: 5px; min-height: 0; }
body.mob-hub .mto-mob .mto-d2__vals { align-items: center; text-align: center; }
body.mob-hub .mto-mob .mto-d2__h { font-size: 12px; }
body.mob-hub .mto-mob .mto-d2__d { font-size: 10.5px; justify-content: center; text-align: center; }
body.mob-hub .mto-mob .mto-d2__viz { width: 100%; }
body.mob-hub .mto-mob .mto-d2__viz > svg { max-width: 100%; height: auto; }
body.mob-hub .mto-mob .mto-spark { width: 100%; }
body.mob-hub .mto-mob .mto-bigv { font-size: 24px; }
/* ===== HARMONIE MOBILE : toutes les surfaces (cartes récap, fonds météo…) teintées CIEL comme les tuiles/le fond/le hero
   — demande Mika « rose foncé / clair / blanc → trouve une harmonie, pour toutes les app ». ===== */
body.mob-hub .mob-card,
body.mob-hub .mob-sig-card,
body.mob-hub .mto-mob-hours,
body.mob-hub .mto-mob-days,
body.mob-hub .mto-mob .mto-d2,
body.mob-hub .mob-pl__wait,
body.mob-hub .mob-pl__archive {
  background: color-mix(in srgb, var(--mob-sky, var(--primary)) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--mob-sky, var(--primary)) 20%, var(--border));
}
/* Grande carte météo « maintenant » : teintée ciel (au lieu du bleu fixe qui jurait avec un ciel rose). */
body.mob-hub .mto-mob-now {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mob-sky, var(--primary)) 30%, var(--surface)), color-mix(in srgb, var(--mob-sky, var(--primary)) 16%, var(--surface)));
  color: var(--text);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mob-sky, var(--primary)) 26%, transparent);
}

/* ===== MON PLANNING mobile ===== */
.mob-pl { max-width:640px; margin:0 auto; }
.mob-pl__head { margin-bottom:12px; }
.mob-pl__ttl { font-size:26px; font-weight:800; letter-spacing:-.5px; display:inline-flex; align-items:center; gap:8px; }
.mob-pl__ttlic { width:28px; height:28px; flex:0 0 auto; display:inline-flex; }
.mob-pl__ttlic .nav-ic9, .mob-pl__ttlic .nav-app__ic { width:28px; height:28px; display:block; background:transparent; border:0; box-shadow:none; }
.mob-pl__ttlic .nav-app__ic.nav-ic9 svg, .mob-pl__ttlic .nav-app__ic svg, .mob-pl__ttlic > svg { width:28px; height:28px; display:block; }
.mob-pl__sub { font-size:13px; color:var(--text-3); font-weight:600; }
.mob-pl__day { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.mob-pl__day:first-of-type { border-top:0; }
/* Pastille du jour = couleur de l'INFO du jour (poste des créneaux / catégorie d'absence), pas le hero (demande Mika). */
.mob-pl__day.is-today .mob-pl__date { background:var(--dc, var(--mob-sky, var(--primary))); color:#fff; border-color:transparent; }
.mob-pl__date { flex:0 0 auto; width:46px; height:50px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.mob-pl__date span { font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--text-3); }
.mob-pl__day.is-today .mob-pl__date span { color:rgba(255,255,255,.85); }
.mob-pl__date b { font-size:20px; font-weight:800; margin-top:2px; }
/* Mon planning — navigation semaine + accès signatures/archives (demande Mika). */
.mob-pl__nav { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.mob-pl__nav .mob-pl__head { flex:1; min-width:0; text-align:center; }
.mob-pl__arw { flex:0 0 auto; width:38px; height:38px; border-radius:11px; border:1px solid color-mix(in srgb, var(--mob-sky, var(--primary)) 26%, var(--border)); background:color-mix(in srgb, var(--mob-sky, var(--primary)) 10%, var(--surface)); color:var(--text); font-size:22px; font-weight:800; line-height:1; cursor:pointer; }
.mob-pl__arw:active { transform:scale(.94); }
.mob-pl__today { display:block; width:100%; margin:2px 0 10px; background:transparent; border:0; color:color-mix(in srgb, var(--mob-sky, var(--primary)) 78%, #000); font-size:12.5px; font-weight:800; cursor:pointer; }
.mob-pl__sig { display:block; width:100%; text-align:left; border:0; border-radius:14px; padding:11px 14px; margin:0 0 12px; font-size:13.5px; font-weight:800; cursor:pointer; }
.mob-pl__sig--ok { background:#e8f7ee; color:#1e9e5a; cursor:default; }
.mob-pl__sig--todo { background:color-mix(in srgb, #f0a020 20%, var(--surface)); color:#b5730a; box-shadow:0 3px 12px rgba(240,160,32,.22); }
.mob-pl__wait { text-align:center; color:var(--text-3); font-size:13.5px; font-weight:600; line-height:1.5; padding:34px 14px; background:var(--surface-2); border:1px dashed var(--border); border-radius:16px; }
/* Planning FLOUTÉ tant que non signé + bouton central pour aller signer (demande Mika) */
.mob-pl__gridwrap { position:relative; }
.mob-pl__gridwrap.is-locked .mob-pl__grid { filter:blur(7px); opacity:.55; pointer-events:none; user-select:none; }
.mob-pl__lockcta { position:absolute; inset:0; margin:auto; height:max-content; width:max-content; max-width:88%; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; border:0; border-radius:18px; padding:16px 24px; cursor:pointer; color:#fff; background:color-mix(in srgb, var(--mob-sky, var(--primary)) 92%, #0d2136); box-shadow:0 12px 32px rgba(13,33,54,.28); }
.mob-pl__lockic { font-size:26px; line-height:1; }
.mob-pl__lockt { font-weight:800; font-size:15px; }
.mob-pl__locks { font-size:12.5px; font-weight:700; opacity:.92; }
.mob-pl__archive { display:flex; align-items:center; gap:8px; width:100%; margin-top:16px; background:var(--surface-2); border:1px solid color-mix(in srgb, var(--mob-sky, var(--primary)) 22%, var(--border)); border-radius:14px; padding:13px 15px; font-size:14px; font-weight:800; color:var(--text); cursor:pointer; }
.mob-pl__badge { margin-left:auto; background:#fa5252; color:#fff; font-size:11.5px; font-weight:800; border-radius:20px; padding:3px 10px; box-shadow:0 2px 6px rgba(250,82,82,.35); }
/* Cartes « Mes plannings signés » sur mobile. */
.mob-sig-card { display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 15px; margin-bottom:10px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.mob-sig-card__top { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.mob-sig-card__sub { font-size:12px; color:var(--text-3); font-weight:600; margin-top:5px; }
/* Chaque info (shift, jour-férié, solidarité, repos…) sur sa PROPRE ligne pleine largeur (fini les décalages en vrac, demande Mika). */
.mob-pl__c { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.mob-pl__sh { font-size:13.5px; font-weight:700; color:var(--text); background:var(--primary-soft); border-radius:9px; padding:6px 11px; }
.mob-pl__abs { font-size:12.5px; font-weight:700; border-radius:9px; padding:6px 11px; }
.mob-pl__vide { font-size:15px; color:var(--text-3); font-weight:700; padding-left:4px; }
/* Shift recouvert par une absence : atténué (le bord gauche pointillé est posé en inline), comme .shift--attenue du bureau. */
.mob-pl__sh--off { opacity:.55; filter:saturate(.7); }
/* Bouton « Nouvelle note de frais » : desktop = dans l'en-tête (libellé complet).
   Mobile = bouton PLEINE LARGEUR sous le titre (clair), et on masque le « + » de l'en-tête qui déroutait (retour Mika « c'est quoi ce bouton »). */
.ndf-new .btn__lbl-court { display:none; }
body.mob-hub .topbar .ndf-new { display:none; }
.ndf-new-mob { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin:0 0 14px; background:var(--mob-sky, var(--primary)); border:0; color:#fff; border-radius:13px; padding:12px; font-size:14.5px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px color-mix(in srgb, var(--mob-sky, var(--primary)) 30%, transparent); }
.ndf-new-mob svg { width:20px; height:20px; }
/* Éditeur NDF ergonomique : titre-section en flex (bouton à droite) + dépenses en CARTES sur mobile + barre d'action Enregistrer/Envoyer en bas (retour Mika « pas ergonomique »). */
.ndf-deps-ttl { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ndf-deps { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.ndf-dep { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px 13px; }
.ndf-dep__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ndf-dep__type { font-weight:800; font-size:13.5px; }
.ndf-dep__ttc { font-size:16px; font-weight:800; white-space:nowrap; }
.ndf-dep__meta { font-size:12px; color:var(--text-3); font-weight:600; margin-top:4px; line-height:1.4; }
.ndf-dep__traj { font-size:12px; font-weight:700; color:var(--primary-dark); margin-top:5px; line-height:1.4; }
.ndf-dep__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:12px; }
/* v5.566 — vignette d'un justificatif photo (liste des dépenses + formulaire).
   Placeholder 📷 (::before) SOUS l'image : recouvert quand la photo charge (Drive public / aperçu local),
   visible sinon (fichier Drive privé) → jamais de case cassée, toujours cliquable pour ouvrir le justificatif. */
.ndf-thumb { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:11px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2); flex:0 0 auto; position:relative; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease; }
.ndf-thumb::before { content:"📷"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:.42; }
.ndf-thumb:hover { transform:scale(1.05); box-shadow:0 6px 16px rgba(0,0,0,.16); }
.ndf-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.ndf-thumb.is-fail img { display:none; }   /* les 2 sources Drive ont échoué → on garde la pastille 📷 cliquable */
.ndf-thumb--mini { width:40px; height:40px; border-radius:9px; }
.ndf-thumb--mini::before { font-size:16px; }
.ndf-thumb--lg { width:120px; height:120px; border-radius:14px; }
.ndf-thumb--lg::before { font-size:42px; }
.ndf-photo-ok { font-size:12px; font-weight:700; color:var(--success, #1aa653); }
.ndf-actions { display:flex; gap:10px; margin-top:16px; }
.ndf-actions .btn { flex:1; justify-content:center; }
body.mob-hub .ndf-actions .btn--primary { background:var(--mob-sky, var(--primary)); }
/* Boutons primaires du mobile salarié = COULEUR DU HERO (ciel du moment), légèrement assombrie pour garder le texte blanc lisible ; suit l'heure (demande Mika). Les boutons avec une couleur inline (ex. code amber) gardent la leur. */
body.mob-hub .btn--primary { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 86%, #0d2136); box-shadow: 0 4px 13px color-mix(in srgb, var(--mob-sky, var(--primary)) 38%, transparent); }
body.mob-hub .btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 76%, #0d2136); }
/* Formulaires mobiles : les rangées de champs s'empilent (3 champs sur une ligne = « trop serré » — demande Mika). */
body.mob-hub .field__row { flex-direction: column; align-items: stretch; }
body.mob-hub .field__row > .field { max-width: none !important; }
/* Carte itinéraire (indemnités km). */
.ndf-map { height: 190px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin: 4px 0 6px; }
.ndf-map .leaflet-control-attribution { font-size: 9px; }
.ndf-route-info { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.ndf-route-info b { color: var(--primary-dark); }
.ndf-trajet { margin-top: 12px; }
.ndf-trajet__t { font-weight: 700; font-size: 13px; margin-bottom: 5px; }

/* ===== CONGÉS mobile ===== */
.mob-cg { max-width:640px; margin:0 auto; }
.mob-cg__ttl { font-size:26px; font-weight:800; letter-spacing:-.5px; margin-bottom:14px; }
.mob-cg-soldes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.mob-cg-s { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.mob-cg-s.is-main { grid-column:1 / -1; background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 20%,transparent); }
.mob-cg-s__v { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.mob-cg-s.is-main .mob-cg-s__v { font-size:30px; color:var(--primary-dark); }
.mob-cg-s__l { font-size:12px; color:var(--text-3); font-weight:700; }
.mob-cg-detail { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:6px 14px; margin-bottom:12px; font-size:13.5px; }
.mob-cg-detail__ttl { font-size:12px; color:var(--text-3); font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding:9px 0 4px; }
.mob-cg-detail__row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; color:var(--text-2); }
.mob-cg-detail__row + .mob-cg-detail__row { border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.mob-cg-detail__row b { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.mob-cg-detail__row.is-plus b { color:var(--success); }
.mob-cg-detail__row.is-moins b { color:#c0334e; }
.mob-cg-detail__row.is-tot span { font-weight:800; color:var(--primary-dark); }
.mob-cg-detail__row.is-tot b { color:var(--primary-dark); font-size:15px; }
.mob-cg-next { display:flex; align-items:center; gap:12px; background:color-mix(in srgb,#12b886 8%,var(--surface)); border:1px solid color-mix(in srgb,#12b886 28%,var(--border)); border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.mob-cg-next__ic { font-size:26px; flex:0 0 auto; }
.mob-cg-next__v { font-size:22px; font-weight:800; letter-spacing:-.5px; color:#0c8f66; }
.mob-cg-next__l { font-size:12.5px; color:var(--text-2); font-weight:700; line-height:1.25; }
.mob-cg-next__l span { display:block; font-size:11px; color:var(--text-3); font-weight:600; margin-top:1px; }
.mob-cg-btn { width:100%; justify-content:center; margin:2px 0 16px; }
.mob-cg-ttl2 { font-size:16px; font-weight:800; margin:4px 0 10px; }
.mob-cg-d { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.mob-cg-d__t { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14.5px; }
.mob-cg-d__s { font-size:12.5px; color:var(--text-3); font-weight:600; margin-top:3px; }
/* Ma fiche : une colonne + pleine largeur sur mobile */
body.mob-hub .fiche-grid { grid-template-columns:1fr !important; }
body.mob-hub .page .card { max-width:100% !important; }

/* Masque la barre d'onglets quand une modale/pop-up est ouverte (les boutons ne sont plus jamais cachés). */
body.mob-hub:has(.modal-overlay) #mob-tabbar { display:none; }
/* Clavier ouvert (champ texte actif) : on masque la barre d'onglets, sinon elle « décroche » au-dessus du clavier sur Android/Samsung (retour Mika) */
body.mob-hub.kbd-open #mob-tabbar { display:none; }

/* ============ Messagerie / chat salarié ↔ managers ============ */
.msg-page { max-width: 760px; }
/* Messagerie desktop 2 panneaux : conversation + raccourcis à gauche, chat à droite (demande Mika) */
.msg-2pane { display: flex; gap: 20px; align-items: flex-start; max-width: 1040px; }
.msg-2pane .msg-side { flex: 0 0 246px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; }
/* B — Liste des conversations DANS la barre latérale (sous « Accueil »), discussion en pleine largeur — demande Mika */
.sidebar__convs { display: flex; flex-direction: column; gap: 4px; margin: 6px 4px 8px; min-height: 0; }
.sidebar__convs-hd { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.sidebar__convs-hd .msg-side__ttl { margin: 0; }
.sidebar__convs-hd .msg-new { margin-left: auto; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.sidebar__convs .msg-inbox { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.sidebar__convs .msg-fil { padding: 8px 9px; gap: 9px; border-radius: 11px; }
/* v5.721 — Les alertes du contrôle avant clôture sont CLIQUABLES : on doit le VOIR sans avoir à essayer.
   Un nom = une pastille de verre teintée ambre ; le titre de famille = un lien souligné avec sa flèche. */
.rap-alerte { font: inherit; font-weight: 700; cursor: pointer; padding: 1px 7px; margin: 0 1px; border-radius: 7px;
  color: #8a4b00; border: 1px solid color-mix(in srgb, #f59f00 34%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 52%),
              linear-gradient(155deg, color-mix(in srgb, #f59f00 14%, var(--surface)), var(--surface) 82%);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.rap-alerte:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #f59f00 62%, transparent);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, #f59f00 80%, transparent); }
.rap-alerte:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rap-alerte--t { display: inline-block; padding: 0; margin: 0; border: 0; background: none; color: var(--text);
  font-size: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: color-mix(in srgb, #f59f00 55%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rap-alerte--t:hover { transform: none; box-shadow: none; color: #8a4b00; }

/* ===== v5.716 — Cartes de conversation en VERRE DÉPOLI (2ᵉ passe, « tu peux faire mieux ») =====
   Ce que je corrige par rapport à la 1ʳᵉ : (1) plus aucun pseudo-élément — le voile de lumière est une
   COUCHE DU FOND, donc plus d'artefact d'empilement (le « tiret » du bouton MAJ venait de là) ;
   (2) les noms longs ne s'empilent plus sur trois lignes ; (3) la carte active porte un liseré d'accent
   à gauche, qu'on repère du coin de l'œil ; (4) l'avatar devient une vraie bille de verre. */
.sidebar__convs { margin: 6px 2px 8px; }
.sidebar__convs .msg-fil { position: relative; overflow: hidden; padding: 9px 10px; gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 46%),
              linear-gradient(155deg, color-mix(in srgb, var(--ac, var(--primary)) 9%, var(--surface)), var(--surface) 78%);
  border: 1px solid color-mix(in srgb, var(--ac, var(--primary)) 20%, var(--border));
  box-shadow: 0 1px 2px rgba(20,40,90,.05), 0 10px 20px -16px color-mix(in srgb, var(--ac, var(--primary)) 60%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.sidebar__convs .msg-fil:hover { transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ac, var(--primary)) 44%, var(--border));
  box-shadow: 0 2px 5px rgba(20,40,90,.06), 0 16px 28px -16px color-mix(in srgb, var(--ac, var(--primary)) 70%, transparent); }
/* la conversation ouverte : liseré d'accent + anneau, sans changer la taille (pas de saut à l'écran) */
.sidebar__convs .msg-fil.is-active, .sidebar__convs .msg-fil.on {
  border-color: color-mix(in srgb, var(--ac, var(--primary)) 58%, var(--border));
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 46%),
              linear-gradient(155deg, color-mix(in srgb, var(--ac, var(--primary)) 18%, var(--surface)), var(--surface) 82%),
              linear-gradient(90deg, var(--ac, var(--primary)) 0 3px, transparent 3px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac, var(--primary)) 20%, transparent),
              0 14px 26px -16px color-mix(in srgb, var(--ac, var(--primary)) 66%, transparent); }
/* les noms longs (« Hélène ROCHAT GERMAIN ») tenaient sur trois lignes : une seule, coupée proprement */
.sidebar__convs .msg-fil__n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.sidebar__convs .msg-fil__last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* l'avatar : bille de verre teintée, reflet en haut à gauche comme la boule de Lémo */
.sidebar__convs .msg-conv__av { position: relative; overflow: hidden; flex: none;
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 7px -4px rgba(0,0,0,.42), 0 4px 9px -5px rgba(20,40,90,.5);
  text-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* le bouton « Nouveau », même matière — voile dans le fond, jamais en pseudo-élément */
.sidebar__convs-hd .msg-new { border: 1px solid rgba(255,255,255,.42); color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%),
              linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, #fff), var(--primary) 62%, color-mix(in srgb, var(--primary) 88%, #000));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 72%, transparent), inset 0 -7px 11px -7px rgba(0,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sidebar__convs-hd .msg-new:hover { box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--primary) 80%, transparent), inset 0 -7px 11px -7px rgba(0,0,0,.3); }
.sidebar__convs .msg-conv__av { width: 30px; height: 30px; font-size: 15px; }
.sidebar__convs .msg-fil__n { font-size: 13px; }
.sidebar__convs .msg-fil__last { font-size: 11.5px; }
.sidebar__convs .msg-empty { font-size: 12px; padding: 8px; color: var(--text-3); }
.msg-main-only { display: flex; height: 100%; }
.msg-main-only .msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-side__ttl { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 4px 4px 8px; }
.msg-side__ttl--rc { margin-top: 18px; }
.msg-conv { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.msg-conv.is-active { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.msg-conv__av { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.msg-conv__c { min-width: 0; display: flex; flex-direction: column; }
.msg-conv__n { font-weight: 800; font-size: 13.5px; }
.msg-conv__last { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.msg-rcs { display: flex; flex-direction: column; gap: 3px; }
.msg-rc { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 11px; border: 0; background: none; cursor: pointer; color: var(--text); }
.msg-rc:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.msg-rc__ic { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.msg-rc__ic .nav-app__ic, .msg-rc__ic .nav-ic9 { width: 30px; height: 30px; background: transparent; border: 0; box-shadow: none; }
.msg-rc__ic .nav-app__ic.nav-ic9 svg, .msg-rc__ic .nav-app__ic svg { width: 30px; height: 30px; display: block; }
.msg-rc__nom { font-weight: 700; font-size: 13.5px; }
.msg-2pane .msg-main { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.msg-2pane .msg-side__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.msg-2pane .msg-side__hd .msg-side__ttl { margin: 0; }
.msg-2pane .msg-side__hd .msg-new { margin-left: auto; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.msg-2pane .msg-side .msg-inbox { max-height: 48vh; overflow-y: auto; }
.msg-conv__av--grp { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 18%, var(--surface)); }
.msg-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 320px; text-align: center; color: var(--text-3); padding: 40px 24px; font-size: 14px; line-height: 1.5; }
.msg-placeholder__em { font-size: 46px; opacity: .8; }
.msg-pick__ck { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* natif caché (garde l'état) — l'indicateur visible est .msg-pick__box */
.msg-pick__box { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-2); flex: 0 0 auto; display: grid; place-items: center; color: transparent; font-size: 15px; font-weight: 900; line-height: 1; transition: background .15s, border-color .15s; }
.msg-pick__box::before { content: "\2713"; }
.msg-pick.is-selected { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); border-color: var(--primary); }
.msg-pick.is-selected .msg-pick__box { background: var(--primary); border-color: var(--primary); color: #fff; }
.msg-hd { font-size: 20px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.msg-hd--thread { gap: 8px; position: sticky; top: 0; z-index: 6; background: var(--surface); padding: 6px 2px 8px; margin: 0 -2px 6px; }
.msg-hd--thread b { font-size: 16px; }
.msg-hd__sub { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
.msg-back { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text); flex: 0 0 auto; }
.msg-thread { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 14px; min-height: 120px; }
.msg-b { max-width: 80%; padding: 9px 12px; border-radius: 15px; font-size: 14px; line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; }
.msg-b__aut { font-size: 11px; font-weight: 700; color: var(--primary-dark); margin-bottom: 2px; }
.msg-b__h { font-size: 10.5px; opacity: .6; margin-top: 3px; text-align: right; }
.msg-b--me { align-self: flex-end; background: color-mix(in srgb, var(--mob-sky, var(--primary)) 88%, #0d2136); color: #fff; border-bottom-right-radius: 5px; }
.msg-b--me .msg-b__h { color: #fff; opacity: .8; }
.msg-b--them { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg-empty { text-align: center; color: var(--text-3); font-size: 13.5px; padding: 30px 16px; line-height: 1.5; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 6px; position: sticky; bottom: 0; background: var(--bg); z-index: 5; }
/* MOBILE : la page chat remplit la hauteur, le fil pousse la barre en bas ; la barre est collée pleine largeur juste au-dessus des onglets (plus de vide, plus de disparition, plus de masquage) — demande Mika */
/* v5.507 : la page chat REMPLIT vraiment la hauteur de l'écran (le min-height:100% ne se résolvait pas
   car .main n'a pas de hauteur explicite) → la barre de saisie se colle en bas, plus de vide en dessous.
   84px ≈ mini-topbar de l'app + barre d'onglets du bas ; env() pour l'encoche du bas. Demande Mika. */
body.mob-hub .msg-page { display: flex; flex-direction: column; min-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px)); max-width: none; }
/* Messagerie mobile : l'en-tête de conversation est FIXÉ en haut de l'écran (position:fixed) — indépendant du conteneur qui scrolle
   (imbrication body/#main), donc il reste TOUJOURS visible quand on descend dans la conversation (demande Mika). */
body.mob-hub .msg-page > .msg-hd--thread { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--surface); padding: 9px 14px; margin: 0; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
body.mob-hub .msg-page > .msg-thread { padding-top: 66px; }
body.mob-hub .msg-thread { flex: 1 1 auto; min-height: 0; padding-bottom: 8px; }
/* v5.507 : messages COLLÉS EN BAS (façon messagerie tél.) → plus de vide entre le dernier message et la
   barre de saisie ; quand la conversation est longue, la marge auto se résorbe et le défilement reste normal. */
body.mob-hub .msg-thread::before { content: ""; margin-top: auto; }
body.mob-hub .msg-compose {
  bottom: 0; margin: 0 -14px; width: auto;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--mob-sky, transparent) 10%, var(--bg));
  border-top: 1px solid color-mix(in srgb, var(--mob-sky, var(--border)) 40%, var(--border));
  box-shadow: 0 -6px 16px rgba(0,0,0,.06);
}
.msg-compose textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 14px; background: var(--surface); color: var(--text); max-height: 120px; line-height: 1.3; }
.msg-compose textarea:focus { outline: none; border-color: var(--mob-sky, var(--primary)); }
.msg-send { width: 42px; height: 42px; border-radius: 50%; padding: 0; flex: 0 0 auto; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.msg-inbox { display: flex; flex-direction: column; gap: 8px; }
/* Boîte de réception : en-tête + bouton « Nouveau message » + sélecteur de salarié (demande Mika) */
.msg-inbox-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.msg-inbox-hd .msg-new { margin-left: auto; white-space: nowrap; }
.msg-picks { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.msg-pick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.msg-pick:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.msg-pick__c { display: flex; flex-direction: column; min-width: 0; }
.msg-pick__n { font-weight: 800; font-size: 14px; }
.msg-pick__p { font-size: 12px; color: var(--text-3); }
.msg-fil { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.msg-fil:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.msg-fil.is-unread { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.msg-fil__c { flex: 1; min-width: 0; }
.msg-fil__n { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.msg-fil__badge { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
/* Conversation « Manager » ÉPINGLÉE (demande Mika) : indicateur + avatar */
.msg-fil__pin { font-size: 12px; opacity: .85; flex: 0 0 auto; }
.msg-fil.is-pinned { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 7%, var(--surface)); border-color: color-mix(in srgb, var(--mob-sky, var(--primary)) 22%, var(--border)); }
.msg-fil.is-pinned.is-unread { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 13%, var(--surface)); }
.msg-conv__av--mgr { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 20%, var(--surface)); }
/* A — Icônes utilitaires en bas de la barre latérale (cloche, demandes, à valider, suivi) : couleur + style du HÉRO (ciel du moment) — demande Mika.
   Sans cadre (comme le hero) ; les halos d'alerte (orange/rouge) gardent leur bordure animée car elle est en !important. */
.sidebar__footer .sidebar__tools .tool-icon, .sidebar__footer .sidebar__tools .topbar-icon { color: var(--sky-ic, var(--primary)) !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
/* Cloche/demandes en alerte : une règle avec ID (#btn-notif.notif-halo) forçait le ROUGE → on la bat avec une règle ID plus spécifique pour garder le style héro (l'alerte reste indiquée par la pastille) — demande Mika */
.sidebar__footer .sidebar__tools #btn-notif, .sidebar__footer .sidebar__tools #btn-demandes { color: var(--sky-ic, var(--primary)) !important; }
.sidebar__footer .sidebar__tools .tool-icon:hover, .sidebar__footer .sidebar__tools .topbar-icon:hover { background: color-mix(in srgb, var(--sky-ic, var(--primary)) 14%, transparent) !important; transform: translateY(-1px) scale(1.06); }
.msg-fil__last { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-fil.is-unread .msg-fil__last { color: var(--text-2); font-weight: 600; }
.msg-fil__h { font-size: 11px; color: var(--text-3); flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* v5.498 : bouton 📌 épingler/désépingler (par personne) sur chaque conversation — demande Mika */
.msg-fil__pinbtn { font-size: 13px; opacity: .28; filter: grayscale(1); padding: 2px; cursor: pointer; transition: opacity .12s; }
.msg-fil__pinbtn:hover { opacity: .7; }
.msg-fil__pinbtn.is-on { opacity: 1; filter: none; }

/* Badge de non-lus sur une tuile (Messages) + coche lu/envoyé du chat */
.mob-tile { position: relative; }
.mob-tile__badge { position: absolute; top: 12px; right: 14px; background: #fa5252; color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; z-index: 3; box-shadow: 0 1px 5px rgba(0,0,0,.28); }
.msg-b__st { display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; vertical-align: middle; }
.msg-b__st svg { width: 13px; height: 13px; display: block; }
.msg-b--me .msg-b__st { color: #fff; opacity: .85; }
.msg-b--me .msg-b__st.is-lu { color: #d3f1ff; opacity: 1; }

/* Planning mobile : jours ÉCOULÉS = MÊME couleur que le jour du jour (--dc, ex. le « 10 ») mais en plus clair, contour compris (demande Mika) */
.mob-pl__day.is-past .mob-pl__date { background: color-mix(in srgb, var(--dc, var(--success)) 15%, #fff); border-color: color-mix(in srgb, var(--dc, var(--success)) 34%, var(--border)); }
.mob-pl__day.is-past .mob-pl__date b, .mob-pl__day.is-past .mob-pl__date span { color: color-mix(in srgb, var(--dc, var(--success)) 74%, #000); }

/* Note d'intro du chat salarié */
.msg-intro { background: color-mix(in srgb, var(--mob-sky, var(--primary)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mob-sky, var(--primary)) 22%, var(--border)); border-radius: 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); margin-bottom: 10px; }
.msg-intro b { color: var(--text); }

/* Mes demandes d'absence — cartes mobile (fini le tableau qui déborde) */
.abs-hd { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
body.mob-hub .abs-hd { flex-direction: column; align-items: stretch; }
.abs-hd__btn { width: 100%; justify-content: center; }
.abs-cards { display: flex; flex-direction: column; gap: 10px; }
.abs-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--ac, var(--border)); border-radius: 12px; padding: 11px 13px; }
.abs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.abs-card__t { font-weight: 700; font-size: 14px; }
.abs-card__d { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }

/* Pop-up détail/validation d'une note de frais : plus large pour voir les 7 colonnes SANS slider (demande Mika) */
.modal:has(.ndf-detail) { max-width: min(800px, 96vw); }
.ndf-detail .table { table-layout: auto; }
.ndf-detail .table th, .ndf-detail .table td { white-space: normal; overflow-wrap: anywhere; padding-left: 8px; padding-right: 8px; }
.ndf-detail .table td:nth-child(4), .ndf-detail .table td:nth-child(5), .ndf-detail .table td:nth-child(6), .ndf-detail .table th:nth-child(4), .ndf-detail .table th:nth-child(5), .ndf-detail .table th:nth-child(6) { white-space: nowrap; }
/* NDF détail sur MOBILE : dépenses en cartes empilées (aucun slide horizontal) — demande Mika */
.ndf-detail--mob { display: flex; flex-direction: column; gap: 8px; }
.ndf-lc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ndf-lc__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndf-lc__t { font-weight: 800; font-size: 14px; }
.ndf-lc__ttc { font-weight: 800; font-size: 15px; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ndf-lc__lib { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.ndf-lc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.ndf-lc__meta .field__hint { display: inline; }
.ndf-lc__pj { font-weight: 700; }
/* Liste des notes de frais en CARTES sur mobile (aucun tableau qui déborde) — demande Mika */
.ndf-list-cards { display: flex; flex-direction: column; gap: 10px; }
.ndf-lcard { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.ndf-lcard:active { transform: scale(.99); }
.ndf-lcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndf-lcard__obj { font-size: 15px; font-weight: 800; margin: 7px 0 6px; color: var(--text); }
.ndf-lcard__bot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.ndf-lcard__amt { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.ndf-lcard .mat-badge { font-size: 11px; }

/* ============================================================
   🗣️ Entretiens — éditeur relooké (v5.588)
   ============================================================ */
.et-page { display: grid; gap: 16px; }
.et-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; color: #fff; box-shadow: 0 10px 30px rgba(30, 30, 60, .18); }
.et-hero--annuel { background: linear-gradient(120deg, #6c5ce7 0%, #4a7de9 55%, #38b2d8 100%); }
.et-hero--pro { background: linear-gradient(120deg, #e17055 0%, #d63d84 55%, #8854d0 100%); }
.et-hero__deco { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 88% -20%, rgba(255,255,255,.28), transparent 42%),
  radial-gradient(circle at 8% 120%, rgba(255,255,255,.16), transparent 40%); }
.et-hero__avatar { flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.et-hero__avatar .avatar--card { border: 3px solid rgba(255,255,255,.85); }
.et-hero__id { flex: 1; min-width: 220px; position: relative; }
.et-hero__nom { font-size: 22px; letter-spacing: .2px; }
.et-hero__nom b { font-weight: 900; }
.et-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.et-chip { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(3px); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; }
.et-chip--legal { background: rgba(0,0,0,.22); }
.et-hero__sub { font-size: 13px; opacity: .92; max-width: 52ch; }
.et-hero__cote { position: relative; display: grid; gap: 8px; justify-items: end; min-width: 190px; }
.et-hero__datelbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.et-hero__date { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; color-scheme: dark; }
.et-prog { display: grid; gap: 4px; justify-items: end; min-width: 170px; }
.et-prog__bar { width: 170px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.et-prog__fill { height: 100%; border-radius: 99px; background: #fff; transition: width .35s ease; }
.et-prog__txt { font-size: 12px; font-weight: 700; opacity: .95; }
.et-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.et-q { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.et-q:focus-within { border-color: var(--primary); box-shadow: 0 6px 22px rgba(108, 92, 231, .16); transform: translateY(-1px); }
.et-q__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.et-q__num { font-size: 12px; font-weight: 900; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 8px; padding: 3px 7px; font-variant-numeric: tabular-nums; }
.et-q__ico { font-size: 17px; }
.et-q__label { font-weight: 800; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.et-q__ta { width: 100%; border: 1px solid transparent; background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--text); resize: none; overflow: hidden; line-height: 1.5; transition: background .2s ease, border-color .2s ease; }
.et-q__ta:focus { outline: none; background: var(--card); border-color: var(--primary); }
.et-q__ta::placeholder { color: var(--text-3); opacity: .75; font-style: italic; }
.et-q__ta--input { overflow: visible; resize: none; height: auto; }
.et-synth { background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; }
.et-synth .et-q { border: none; padding: 0; background: none; }
.et-synth .et-q:focus-within { box-shadow: none; transform: none; }
.et-synth__title { font-size: 15px; font-weight: 900; }
@media (max-width: 720px) {
  .et-hero { padding: 18px; gap: 12px; }
  .et-hero__cote { justify-items: start; min-width: 100%; }
  .et-prog { justify-items: start; }
  .et-grille { grid-template-columns: 1fr; }
}

/* ⛔ Anti-clopening (v5.588) : repos < 11 h depuis la veille — la cellule fautive est marquée. */
.shift--clopening { outline: 2px solid #e03131; outline-offset: -1px; }
.shift--clopening .shift__time { color: #e03131; }
.shift__clop { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; display: grid; place-items: center; background: #e03131; color: #fff; border-radius: 50%; font-size: 11px; box-shadow: 0 2px 6px rgba(224, 49, 49, .45); z-index: 3; }

/* Intitulés de section dans le menu latéral (v5.592) — regroupent les longues listes (RH…). */
.nav-sect { padding: 12px 14px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #8b90a0); opacity: .8; user-select: none; pointer-events: none; }
.nav-sect:first-child { padding-top: 4px; }
/* Cockpit v5.594 : mini-barres d'équité + jauge d'enveloppe */
.mini-bar { display: inline-block; height: 8px; width: var(--w, 0%); max-width: 90px; background: linear-gradient(90deg, var(--accent, #4a7), var(--accent-2, #6cb)); border-radius: 4px; vertical-align: middle; margin-right: 4px; transition: width .4s ease; }
.progress { height: 10px; background: var(--surface-2, #eceef3); border-radius: 6px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }

/* ===== v5.643 — Barres d'affluence : MONTÉE ANIMÉE à la connexion (accueil, mobile, planning) ===== */
@keyframes affBarUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.aff-bar { transform-origin: bottom; animation: affBarUp .55s cubic-bezier(.22, .75, .3, 1.08) backwards; animation-delay: var(--abd, 0s); }
@media (prefers-reduced-motion: reduce) { .aff-bar { animation: none; } }

/* ===== v5.708 — Affluence « VERRE DÉPOLI » (arbitrage Mika, maquette validée) =====
   Seule la MATIÈRE change : le dégradé de couleurs reste celui d'avant (couleurAffluence,
   store.js). La couleur ne s'étale plus en aplat : elle vit À L'INTÉRIEUR du verre (cœur
   flouté), avec un reflet blanc dessus et un halo léger autour.
   Deux matières identiques, deux formes : le TUBE pour les barres à l'heure (colonnes
   serrées), la DALLE pour la frise des 4 semaines (large, on y lit des jours).
   La couleur arrive par --ac (= S.couleurAffluence(val)). */
.aff-tube, .aff-slab { position: relative; overflow: hidden; transform-origin: bottom;
  animation: affBarUp .6s cubic-bezier(.22, .75, .3, 1.08) backwards; animation-delay: var(--abd, 0s); }
.aff-tube { border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), color-mix(in srgb, var(--ac) 72%, rgba(255,255,255,.28)));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 24%, transparent),
              0 0 18px -3px color-mix(in srgb, var(--ac) 62%, transparent),
              inset 0 -8px 14px -8px color-mix(in srgb, var(--ac) 55%, transparent); }
.aff-tube::before { content: ""; position: absolute; left: 20%; right: 20%; top: 14%; bottom: 6%; border-radius: 99px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 80%, #fff), var(--ac)); filter: blur(1.6px); }
.aff-tube::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 32%;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0)); }
.aff-tube--now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 88%, transparent),
                             0 0 24px -2px color-mix(in srgb, var(--ac) 72%, transparent); }
/* v5.708 (retour Mika « on voit pas assez ») — le blanc ne couvre plus la couleur : voile réduit,
   cœur coloré étendu presque jusqu'en haut, reflet resserré sur un seul bord. Ça reste du verre,
   mais la teinte se lit franchement, même sur une petite barre. */
/* v5.835 (retour Mika) — « enlève le contour autour de la barre, ça fait trop lourd ». Le liseré
   blanc d'1 px cerclait chaque barre : sur une frise de 24 heures, ça faisait 24 cadres alignés, et
   l'œil lisait les contours avant les hauteurs. Retiré. Le reflet du haut passe de .85 à .5 pour la
   même raison — à pleine intensité il redessinait un second trait sur l'arête.
   La MATIÈRE reste (verre teinté, voile de lumière, halo de la couleur) et les TEINTES ne bougent
   pas d'un cran : le dégradé bleu → vert → jaune → rouge est validé, on n'y touche jamais. */
.aff-slab { border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.3), color-mix(in srgb, var(--ac) 90%, rgba(255,255,255,.08)));
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--ac) 65%, transparent),
              inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 -12px 18px -12px color-mix(in srgb, var(--ac) 72%, transparent); }
/* v5.836 — LE CONTOUR, POUR DE BON (Mika : « enlève le contour, je te l'ai déjà dit »).
   J'avais retiré le `border` — ce n'était pas lui. Mesuré dans le navigateur : sur une barre de
   30 px, ce noyau coloré était en retrait de 10 % (3 px) à gauche, à droite et en haut. L'écart
   laissait voir le fond de la dalle, qui commence par du blanc à 30 % — d'où un ruban pâle tout
   autour, lu comme un contour. Le noyau remplit maintenant la dalle : plus d'écart, plus de ruban.
   Le flou tombe à 0,6 px et reste découpé par `overflow:hidden` de la dalle, donc l'arête est nette. */
.aff-slab::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 84%, #fff), var(--ac)); filter: blur(.6px); }
/* v5.712 (retour Mika « c'est quoi le coin blanc en haut à gauche, c'est bizarre ») — c'était un reflet
   vertical calé dans l'angle : sur une barre large il se lisait comme une tache, pas comme du verre.
   Remplacé par un voile de lumière sur TOUTE la largeur du haut, symétrique et discret. */
.aff-slab::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
/* v5.712 (demande Mika) — la PASTILLE « en ce moment » dans la même matière que les barres : verre teinté,
   voile de lumière en haut, halo de sa propre couleur. Le texte reste blanc lisible (fond assez dense +
   ombre portée légère). --ac = S.couleurAffluence(val, true), la version foncée. */
.aff-pill { position: relative; overflow: hidden; display: inline-block; color: #fff; font-weight: 800; padding: 5px 13px; border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 76%, #fff), var(--ac));
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
  box-shadow: 0 0 16px -5px color-mix(in srgb, var(--ac) 80%, transparent),
              inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 -9px 13px -9px rgba(0,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.32); }
.aff-pill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; pointer-events: none;
  border-radius: 20px 20px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)); }
.aff-pill > * { position: relative; }

/* le jour où le magasin est fermé : pas de barres du tout, un cartouche sobre */
.aff-ferme { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px;
  border: 1px dashed rgba(47,74,116,.24); color: var(--ckink, #2f4a74); opacity: .7; font-size: 13px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .aff-tube, .aff-slab { animation: none; } }

/* v5.645 — « Ce qui t'attend » : même teinte CIEL que le bandeau (comme la barre Aujourd'hui et les Rappels) */
.card.acc-resume { background: var(--acc-sky, var(--surface)); border-color: var(--acc-brd, var(--border)); }
/* v5.645 — le logo/la marque LEME ramènent à l'accueil (clic) */
.sidebar__brand { cursor: pointer; }


/* ===== Tuile ÉCLIPSE du 12 août 2026 (v5.775, js/eclipse.js) =====
   Fond nuit + lueur orangée en bas : le ciel de fin de soirée, puisque le Soleil
   sera à 7° de l'horizon. La tuile disparaît d'elle-même le 14 août. */
.ecl-b { margin-bottom: 12px; padding: 15px 17px; border: none; color: #f2f6ff; overflow: hidden;
  background: radial-gradient(circle at 50% 128%, rgba(255,140,30,.30), transparent 52%),
              linear-gradient(120deg, #131c33, #232048 58%, #3a2733); }
.ecl-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ecl-hd b { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.ecl-cr { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffc83d; }
.ecl-lieux { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.ecl-l { display: flex; align-items: center; gap: 11px; }
.ecl-astre { flex: none; width: 54px; height: 54px; }
.ecl-l--p .ecl-astre { width: 64px; height: 64px; }
.ecl-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 12px rgba(255,190,70,.6)); }
.ecl-txt { display: flex; flex-direction: column; line-height: 1.35; }
.ecl-txt b { font-size: 13.5px; font-weight: 750; }
.ecl-couv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffd98a; }
.ecl-txt small { font-size: 11px; opacity: .72; }
.ecl-barre { height: 5px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 12px; }
.ecl-barre i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #ffd98a, #ffc83d); transition: width .9s linear; }
.ecl-note { font-size: 12.5px; opacity: .86; margin-top: 8px; }
.ecl-avert { font-size: 12px; line-height: 1.5; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.14); opacity: .84; }
@media (max-width: 560px) { .ecl-lieux { gap: 14px; } .ecl-l--p .ecl-astre { width: 54px; height: 54px; } }

/* v5.779 — la tuile éclipse vit AU-DESSUS du hero et SÉPARÉE de lui (arbitrage Mika) :
   c'est un bloc autonome, avec sa propre respiration. Collée dans le hero, elle se noyait
   dans le ciel du bandeau et on ne savait plus si elle en faisait partie. */
.ecl-b { margin-bottom: 16px; }
@media (max-width: 640px) { .ecl-b { padding: 12px 14px; } }

/* ============================================================================
   ÉCRAN MÉTÉO « FIL DU TEMPS » (v5.793) — refonte de la vue Actuel.
   Maquette validée avec Mika : _apercu/meteo-d.html.
   Préfixes : .mto-fh (héro) · .mto-bande/.mto-mes (les 6 mesures) · .mto-mdet
   (leur détail) · .mto-ruban/.mto-mom/.mto-hrs (le fil) · .mto-jr (les 7 jours)
   · .mto-sol* (le Soleil) · .mto-ciel/.mto-ev (éclipse, aurores, filantes).
   ============================================================================ */

/* ---------- 1. LE HÉRO ---------- */
.mto-fh { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 22px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  box-shadow: 0 14px 34px var(--mto-glow, rgba(80,110,160,.30)); }
/* deux voiles lumineux : le ciel plat prend du relief */
.mto-fh::before { content: ""; position: absolute; left: -6%; top: -120%; width: 52%; height: 280%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.34), rgba(255,255,255,0) 72%); }
.mto-fh::after { content: ""; position: absolute; right: -10%; bottom: -160%; width: 60%; height: 300%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); }
.mto-fh > * { position: relative; z-index: 1; }
.mto-fh__ic { width: 112px; height: 112px; flex: 0 0 auto; margin: -12px 0; }
.mto-fh__ic .wxm { width: 100%; height: 100%; transform: scale(1.35); overflow: visible; }
.mto-fh__t { display: flex; align-items: baseline; gap: 13px; }
.mto-fh__big { font-size: 66px; font-weight: 800; letter-spacing: -3px; line-height: 1;
  color: var(--mto-ink, #2f4a74); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(255,255,255,.22); }
.mto-fh__second { font-size: 22px; font-weight: 800; letter-spacing: -1px; color: var(--mto-ink, #2f4a74); opacity: .62; }
.mto-fh__cond { font-size: 16.5px; font-weight: 800; color: var(--mto-ink, #2f4a74); }
.mto-fh__feel { font-size: 12.5px; font-weight: 700; color: var(--mto-ink, #2f4a74); opacity: .74; }
/* la phrase tient sur UNE ligne (demande Mika) ; en dessous de 1080 px on la laisse revenir
   à la ligne plutôt que de la tronquer. */
.mto-fh__ph { font-size: 13px; font-weight: 600; color: var(--mto-ink, #2f4a74); opacity: .88; margin-top: 7px;
  max-width: none; white-space: nowrap; }
@media (max-width: 1080px) { .mto-fh__ph { white-space: normal; } }
.mto-fh__pills { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; max-width: 440px; justify-content: flex-end; }
/* verre dépoli — le même vocabulaire que les tuiles du bandeau d'accueil */
.mto-fr { background: var(--mto-frost, rgba(255,255,255,.34)); border: 1px solid var(--mto-frbrd, rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: var(--mto-ink, #2f4a74);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.mto-fh__pills .mto-fr svg, .mto-fh__pills .mto-fr .uic { width: 15px; height: 15px; }
.mto-retour { cursor: pointer; font: 800 12.5px/1 inherit; }
.mto-retour:hover { filter: brightness(1.08); }

/* ---------- 2. LA BANDE DES 6 MESURES (cliquables) ---------- */
.mto-bt { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 2px; flex-wrap: wrap; }
.mto-bt b { font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 800; color: var(--text-3); }
.mto-bt em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-3); opacity: .75; }
.mto-bt__aide { margin-left: auto; }
/* 7 mesures depuis que l'UV a rejoint la bande (v5.793.32) */
.mto-bande { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
.mto-mes { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0;
  cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.mto-mes:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(29,32,51,.12);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }
.mto-mes.is-open { border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 20%, transparent); }
.mto-mes.is-open::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
  transform: rotate(45deg); background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-right: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border)); z-index: 2; }
/* v5.793.1 (retour Mika « remplis plus la tuile et grossis les icônes ») : depuis le passage en
   pleine largeur, chaque tuile fait ~290 px — le contenu se tassait à gauche et le reste sonnait
   creux. Icône en pastille de 42 px, valeur à 22 px, et la précision poussée à droite. */
/* Les icônes sont celles validées avec Mika (ICO de meteo.js, via ico()) et elles n'ont pas
   changé. En revanche un cadre pastel avait été ajouté autour quand il a demandé de les
   grossir — il leur donnait un autre air : RETIRÉ. Elles restent libres, juste plus grandes. */
.mto-mes__ic { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; }
.mto-mes__ic svg { width: 40px; height: 40px; display: block; }
.mto-mes__x { min-width: 0; flex: 1; }
.mto-mes__l { display: block; font-size: 10.5px; font-weight: 800; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mto-mes__v { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; margin-top: 1px; }
.mto-mes__s { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--text-3);
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.mto-mes__s:empty { display: none; }
.mto-mes__ch { flex: 0 0 auto; width: 13px; height: 13px; color: var(--text-3); opacity: .35;
  transition: opacity .15s, transform .2s; }
.mto-mes:hover .mto-mes__ch { opacity: .9; }
.mto-mes.is-open .mto-mes__ch { opacity: 1; color: var(--primary); transform: rotate(90deg); }

/* ---------- 2 bis. LE DÉTAIL D'UNE MESURE (inséré dans le flux) ---------- */
.mto-mdet { margin: 0 0 14px; padding: 16px 18px 14px; border-radius: 18px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 12%, transparent);
  animation: mtoOuvre .28s cubic-bezier(.22,.9,.3,1); }
/* NE PAS animer max-height : le temps de l'animation la boîte fait 0 de haut et son contenu
   déborde par-dessus le bloc suivant. La place est prise tout de suite, seul l'aspect est animé. */
@keyframes mtoOuvre { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: none; } }
.mto-mdet__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mto-mdet__ic { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.mto-mdet__ic svg, .mto-mdet__ic .uic { width: 20px; height: 20px; }
.mto-mdet__t { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.mto-mdet__now { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.mto-mdet__tabs { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; margin-left: auto; }
.mto-mdet__tabs button { border: 0; background: transparent; color: var(--text-2); font: 800 12px/1 inherit;
  padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.mto-mdet__tabs button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mto-mdet__x { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; cursor: pointer;
  width: 30px; height: 30px; font: 800 15px/1 inherit; color: var(--text-3); }
.mto-mdet__x:hover { color: var(--text); border-color: var(--text-3); }
.mto-mdchart { width: 100%; height: auto; display: block; }
.mto-mdet__kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin-top: 12px; }
.mto-mdet__kpi > div { padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mto-mdet__kpi b { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
.mto-mdet__kpi span { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.mto-mdet__p { margin: 11px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.5; }
.mto-mdet__p b { color: var(--text); }
/* la courbe se trace au lieu d'apparaître d'un bloc (2600 > longueur max d'un tracé ici) */
.mto-trace { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: mtoTrace 1.1s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes mtoTrace { to { stroke-dashoffset: 0; } }

/* ---------- 3. LE FIL DE LA JOURNÉE ---------- */
.mto-filhd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mto-filhd .mto-sec { margin: 0; }
.mto-filhd__j { font-size: 12.5px; font-weight: 800; color: var(--text-2); padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); }
.mto-filhd__aide { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
/* la lecture : toujours à la même place, elle suit la boule (pas d'infobulle qui saute) */
.mto-lec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; padding: 9px 13px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); min-height: 56px; }
.mto-lec__ic { width: 38px; height: 38px; flex: 0 0 auto; }
.mto-lec__ic .wxm { width: 100%; height: 100%; overflow: visible; }
/* v5.793.23 (demande Mika « mets plus d'infos dans cette bande ») : elle n'affichait que 3
   chiffres sur 1470 px. Elle porte maintenant les 8 mesures de l'heure visée par la boule. */
.mto-lec__g { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.mto-lec__t { font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; }
.mto-lec__c { font-size: 13px; font-weight: 700; color: var(--text-2); }
.mto-lec__h { font-size: 11.5px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.mto-lec__sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; flex: 0 0 auto; }
.mto-lec__d { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px 10px; }
.mto-lec__m { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mto-lec__m i { display: inline-flex; width: 17px; height: 17px; flex: 0 0 auto; }
.mto-lec__m i svg, .mto-lec__m i .uic { width: 17px; height: 17px; }
.mto-lec__m em { font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text-3); }
.mto-lec__m b { font-size: 13px; font-weight: 800; color: var(--text); margin-left: auto; white-space: nowrap; }
/* le ruban : viewBox à ratio conservé → aucun texte déformé */
.mto-ruban { width: 100%; height: auto; display: block; border-radius: 14px; overflow: hidden; }
.mto-rubanwrap { position: relative; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.mto-boule { cursor: grab; }
.mto-rubanwrap.is-drag, .mto-rubanwrap.is-drag .mto-boule { cursor: grabbing; }
.mto-moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.mto-mom { position: relative; text-align: left; border: 1px solid var(--border); border-radius: 15px; padding: 11px 13px;
  background: var(--surface-2); cursor: pointer; font: inherit; color: inherit; display: block; width: 100%;
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s; }
.mto-mom:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(29,32,51,.10); }
.mto-mom.is-open { border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 20%, transparent); }
.mto-mom.is-open::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
  transform: rotate(45deg); background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-right: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); }
.mto-mom__q { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.mto-mom__q em { font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: .85; }
.mto-mom__r { display: flex; align-items: center; gap: 11px; margin-top: 5px; }
.mto-mom__ic { width: 46px; height: 46px; flex: 0 0 auto; }
.mto-mom__ic .wxm { width: 100%; height: 100%; overflow: visible; }
.mto-mom__t { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.mto-mom__t i { font-style: normal; }
.mto-mom__c { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-top: 1px; }
.mto-mom__x { display: flex; gap: 9px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: var(--text-3);
  margin-top: 7px; min-height: 15px; }
.mto-mom__x b { color: var(--text-2); }
.mto-mom__x > span { display: inline-flex; align-items: center; gap: 4px; }
.mto-mom__x svg, .mto-mom__x .uic { width: 13px; height: 13px; }
/* la bande heure par heure : TOUJOURS visible (c'est l'information de l'écran d'avant) */
.mto-hbloc { margin-top: 22px; padding: 12px 4px 4px; border-top: 1px solid var(--border); }
.mto-hbloc__hd { display: flex; align-items: baseline; gap: 10px; margin: 0 8px 9px; flex-wrap: wrap; }
.mto-hbloc__hd em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.mto-tout { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; cursor: pointer;
  font: 800 11px/1 inherit; color: var(--text-2); padding: 6px 10px; }
.mto-tout:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }
.mto-hrs { display: flex; gap: 7px; overflow-x: auto; padding: 4px 6px 10px; scroll-behavior: smooth; }
.mto-hrs::-webkit-scrollbar { height: 8px; }
.mto-hrs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
/* v5.793.13 (retour Mika « le reste fait fade ») — chaque carte est TEINTÉE par la température de
   son heure (--hc) : la bande dessine d'elle-même la courbe du jour, du bleu du petit matin à
   l'orange de l'après-midi. Filet de couleur en haut, chiffre plus gros, nuit reconnaissable. */
.mto-hr { position: relative; overflow: hidden; flex: 0 0 auto; width: 74px; text-align: center; padding: 12px 6px 13px;
  border-radius: 16px; border: 1px solid var(--border); font: inherit; color: inherit; cursor: pointer; display: block;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hc, var(--primary)) 17%, var(--surface)) 0%,
                            color-mix(in srgb, var(--hc, var(--primary)) 4%, var(--surface)) 48%,
                            var(--surface) 100%);
  box-shadow: 0 2px 6px rgba(29,32,51,.05);
  transition: opacity .2s, transform .2s, box-shadow .2s, border-color .2s; }
/* le filet de couleur en tête de carte */
.mto-hr::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--hc, var(--primary)); opacity: .85; }
.mto-hr.is-nuit { box-shadow: inset 0 14px 22px -14px rgba(38,48,86,.35), 0 2px 6px rgba(29,32,51,.05); }
.mto-hr:hover { transform: translateY(-3px); box-shadow: 0 10px 22px color-mix(in srgb, var(--hc, var(--primary)) 28%, transparent);
  border-color: color-mix(in srgb, var(--hc, var(--primary)) 45%, var(--border)); opacity: 1; }
.mto-hr > span { display: block; }
.mto-hr.is-out { opacity: .34; }
.mto-hr.is-in { border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 14%, transparent); }
.mto-hr.is-now { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); opacity: 1;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent); }
.mto-hr.is-now::before { background: var(--primary); opacity: 1; }
.mto-hr.is-cur { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); opacity: 1; }
.mto-hr__h { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--text-3); text-transform: uppercase; }
.mto-hr.is-now .mto-hr__h { color: var(--primary); }
.mto-hr__ic { width: 38px; height: 38px; margin: 4px auto 2px; }
.mto-hr__ic .wxm { width: 100%; height: 100%; overflow: visible; }
.mto-hr__t { font-size: 19px; font-weight: 800; letter-spacing: -.6px; color: var(--hc, var(--text));
  font-variant-numeric: tabular-nums; }
.mto-hr__p { font-size: 10px; font-weight: 800; color: #3aa0e8; min-height: 14px;
  display: flex !important; align-items: center; justify-content: center; gap: 2px; }
.mto-hr__p svg, .mto-hr__p .uic { width: 11px; height: 11px; }
.mto-hr__v { font-size: 10.5px; font-weight: 800; color: var(--text-2); opacity: .75; }
.mto-hr__v i { font-style: normal; font-weight: 700; font-size: 9px; color: var(--text-3); }
/* jauge de pluie au pied de la carte : la largeur = la probabilité */
.mto-hr__rain { display: block; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 0 4px 0 0;
  background: linear-gradient(90deg, #8fd0f5, #3aa0e8); }

/* ---------- 4. LES 7 JOURS (cliquables) + LE SOLEIL ---------- */
.mto-bas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.mto-jr { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; width: 100%;
  border: 1px solid transparent; background: transparent; font: inherit; color: inherit; text-align: left;
  transition: background .15s, border-color .15s, transform .15s; }
.mto-jr + .mto-jr { margin-top: 2px; }
.mto-jr:hover { background: var(--surface-2); border-color: var(--border); transform: translateX(2px); }
.mto-jr.is-sel { background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 13%, transparent); }
.mto-jr__aide { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin: -6px 0 8px 2px; }
.mto-jr__d { width: 104px; font-size: 12.5px; font-weight: 800; color: var(--text-2); flex: 0 0 auto; }
.mto-jr__d i { font-style: normal; color: var(--text-3); font-weight: 700; }
.mto-jr__ic { width: 34px; height: 34px; flex: 0 0 auto; }
.mto-jr__ic .wxm { width: 100%; height: 100%; overflow: visible; }
.mto-jr__c { flex: 1; font-size: 12px; font-weight: 700; color: var(--text-3); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mto-jr__p { width: 56px; font-size: 11.5px; font-weight: 800; color: #3aa0e8; text-align: right;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
.mto-jr__p svg, .mto-jr__p .uic { width: 12px; height: 12px; }
.mto-jr__mn { width: 34px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.mto-jr__bar { position: relative; width: 118px; height: 7px; border-radius: 5px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--text-3) 18%, transparent); }
.mto-jr__bar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; box-shadow: 0 1px 3px rgba(29,32,51,.14); }
/* le point « maintenant » sur la plage du jour */
.mto-jr__bar u { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--text); box-shadow: 0 1px 4px rgba(29,32,51,.3); }
.mto-jr__mx { width: 38px; text-align: right; font-size: 15px; font-weight: 800; }
.mto-jr__ch { width: 14px; flex: 0 0 auto; color: var(--text-3); opacity: .45; transition: opacity .15s, transform .15s; }
.mto-jr:hover .mto-jr__ch { opacity: 1; transform: translateX(2px); }
.mto-jr.is-sel .mto-jr__ch { opacity: 1; color: var(--primary); }
/* la course du Soleil */
.mto-solhd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 2px; }
.mto-solhd span { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
/* plafonné : en pleine largeur la colonne fait ~660 px et la course du Soleil montait à 316 px de
   haut, disproportionnée par rapport au reste. */
.mto-solsvg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto;
  border-radius: 18px; box-shadow: 0 10px 26px rgba(60,80,120,.22); }
.mto-astre { transform-box: fill-box; transform-origin: center; animation: mtoHalo 4s ease-in-out infinite; }
@keyframes mtoHalo { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.mto-solpied { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mto-soldur { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.mto-solecart { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; display: inline-block; }
.mto-solecart.up { color: #12805a; background: #e8f8ef; }
.mto-solecart.down { color: #a8632a; background: #fdf1e6; }

/* ---------- 5. LES ÉVÉNEMENTS DU CIEL ---------- */
/* v5.793.15 (retour Mika « il manque le côté sexy des événements du ciel ») — même recette que la
   bande horaire : chaque carte porte SA couleur (--evc), un lavis en fond et un filet en tête.
   Éclipse = crépuscule orangé · Aurores = la couleur du niveau Kp · Filantes = bleu nuit. */
.mto-sec2 { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 800;
  color: var(--text-2); margin: 22px 0 10px 2px; display: flex; align-items: center; gap: 10px; }
.mto-sec2::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent), transparent); }
.mto-ciel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.mto-ciel--1 { grid-template-columns: 1fr; }
/* v5.793.16 — LA CARTE EST LA SCÈNE (même principe que la carte Soleil, validé par Mika) :
   plus une vignette sombre posée à côté de texte blanc, mais un panneau de nuit plein cadre
   sur lequel les données flottent en verre dépoli. */
.mto-ev { position: relative; overflow: hidden; border: 0; color: #eef2ff;
  background: var(--evbg, linear-gradient(160deg, #131a3d, #2b3358));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--evc, var(--primary)) 30%, rgba(16,22,48,.30)); }
.mto-ev__scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mto-ev > *:not(.mto-ev__scene) { position: relative; z-index: 1; }
/* halo d'ambiance dans un coin, pour que le fond ne soit jamais plat */
.mto-ev__scene::after { content: ""; position: absolute; right: -12%; top: -32%; width: 62%; height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--evc, #fff) 34%, transparent), transparent 72%); }
.mto-ev__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.mto-ev__hd .mto-sec { color: #fff; font-size: 13.5px; letter-spacing: .6px; opacity: .95; }
.mto-ev__badge { font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* le verre dépoli des données, posé sur la nuit */
.mto-ev__x { color: #eef2ff; }
.mto-ev__corps { display: flex; gap: 16px; align-items: flex-start; }
.mto-ev__x { flex: 1; min-width: 0; }
.mto-ecl { width: 150px; height: auto; flex: 0 0 auto; border-radius: 18px; box-shadow: 0 8px 22px rgba(20,28,64,.28); }
.mto-scint { animation: mtoScint 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mto-ev__l { font-size: 12.5px; font-weight: 700; color: rgba(238,242,255,.68); margin-bottom: 8px; }
.mto-ev__l b { color: #fff; }
.mto-ev__etapes { display: flex; gap: 8px; flex-wrap: wrap; }
/* les encarts d'étapes : VERRE DÉPOLI posé sur la nuit */
.mto-ev__etapes > div { position: relative; flex: 1; min-width: 84px; padding: 9px 12px; border-radius: 13px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); overflow: hidden; }
.mto-ev__etapes span { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: rgba(238,242,255,.62); }
.mto-ev__etapes b { font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: #fff; }
.mto-ev__etapes .is-max { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.18); }
.mto-ev__etapes .is-max b { text-shadow: 0 1px 10px rgba(255,255,255,.35); }
.mto-ev__p { margin: 11px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(238,242,255,.8); line-height: 1.55; }
.mto-ev__p b { color: #fff; }
/* étoiles communes aux panneaux sombres (aurores, filantes) */
.mto-et { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eaf0ff;
  box-shadow: 0 0 4px rgba(210,225,255,.9); animation: mtoScint 3.4s ease-in-out infinite; }
@keyframes mtoScint { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
/* le panneau « nuit polaire » : aurore dessinée + valeur du Kp */
.mto-kp { position: relative; overflow: hidden; flex: 0 0 auto; width: 150px; height: 150px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 13px;
  background: linear-gradient(180deg, #0d1330 0%, #141c40 52%, #1b2450 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 22px rgba(20,28,64,.28); }
.mto-kp__v { position: relative; z-index: 2; font-size: 34px; font-weight: 800; letter-spacing: -1.6px; line-height: 1;
  color: #fff; text-shadow: 0 2px 12px rgba(10,16,40,.7); }
.mto-kp__l { position: relative; z-index: 2; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: rgba(255,255,255,.62); margin-top: 4px; }
.mto-aur { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* les rideaux : dégradé vert → violet, bords fondus, chacun ondule à son rythme.
   L'INTENSITÉ (--int) suit le Kp réel : pâle quand c'est calme, vive pendant un orage. */
.mto-aur__r { position: absolute; bottom: 16%; height: 76%; transform-origin: bottom center;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--kpc) 55%, #2ed692) 0%,
    color-mix(in srgb, var(--kpc) 45%, #2ed692) 34%,
    rgba(122,116,235,.62) 76%, rgba(122,116,235,0) 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 64%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 64%, transparent 100%);
  filter: blur(7px); opacity: calc(var(--int) * .85); animation: mtoAurore 10s ease-in-out infinite; }
@keyframes mtoAurore {
  0%, 100% { transform: translateX(0) scaleY(.92) skewX(var(--sk)); }
  50% { transform: translateX(9%) scaleY(1.14) skewX(calc(var(--sk) * -1)); }
}
.mto-aur__sol { position: absolute; left: -6%; right: -6%; bottom: -14%; height: 34%; border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #0a0f26, #070b1c); box-shadow: 0 -1px 0 rgba(255,255,255,.09); }
/* la jauge Kp 0 → 9 */
.mto-kpj__b { position: relative; height: 9px; border-radius: 6px;
  background: linear-gradient(90deg, #2bbf6a, #7cc242 30%, #e6b800 48%, #e8752b 68%, #e0364f 82%, #8f1030); }
.mto-kpj__b i { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--text); box-shadow: 0 1px 4px rgba(29,32,51,.3); }
.mto-kpj__b u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text);
  opacity: .55; border-radius: 2px; }
.mto-kpj__g { position: relative; height: 14px; margin-top: 5px; font-size: 9.5px; font-weight: 800; color: var(--text-3); }
.mto-kpj__g span:first-child { position: absolute; left: 0; }
.mto-kpj__g span:last-child { position: absolute; right: 0; }
.mto-kpj__g span:nth-child(2) { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--text-2); }
/* --- étoiles filantes : l'essaim qui vient + la frise de l'année --- */
.mto-filantes { margin-top: 12px; }
.mto-fil__aide { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3); }
.mto-fil__pic { flex: 0 0 auto; width: 210px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(160deg, #1d2440, #2b3358); color: #eef2ff; position: relative; overflow: hidden; }
.mto-fil__pic::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%); }
.mto-fil__ciel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mto-fil__pic > :not(.mto-fil__ciel) { position: relative; z-index: 1; }
.mto-fil__fil { position: absolute; width: 64px; height: 1.8px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(190,215,255,0), rgba(214,230,255,.55) 55%, #fff);
  filter: drop-shadow(0 0 5px rgba(170,205,255,.85)); animation: mtoFile 5s linear infinite; }
@keyframes mtoFile {
  0% { opacity: 0; transform: rotate(32deg) translateX(-80px) scaleX(.35); }
  12% { opacity: .95; transform: rotate(32deg) translateX(-10px) scaleX(1); }
  58% { opacity: .95; }
  78%, 100% { opacity: 0; transform: rotate(32deg) translateX(250px) scaleX(.7); }
}
.mto-fil__nom { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.mto-fil__date { font-size: 11.5px; font-weight: 700; opacity: .72; margin-top: 2px; }
.mto-fil__zhr { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.mto-fil__zhr b { font-size: 30px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.mto-fil__zhr span { font-size: 10px; font-weight: 700; opacity: .7; line-height: 1.25; }
.mto-fil__lune { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.16); }
.mto-fil__lune b { display: block; font-size: 12px; font-weight: 800; color: var(--lc); }
.mto-fil__lune em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .72; }
.mto-fil__disq { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.45);
  background: linear-gradient(90deg, #f2f4ff var(--ill), rgba(255,255,255,.08) var(--ill)); }
.mto-fil__ligne { position: relative; height: 46px; margin: 4px 0 12px; border-radius: 11px;
  background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--primary) 5%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--border); }
.mto-fil__mois { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 9px; font-weight: 800; color: var(--text-3); }
.mto-fil__pt { position: absolute; top: 16px; transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(160deg, #8fa2ff, #5b6ee0); box-shadow: 0 1px 4px rgba(60,70,140,.35); cursor: help; }
.mto-fil__pt.is-next { background: linear-gradient(160deg, #ffe27a, #f5a623);
  box-shadow: 0 0 0 3px color-mix(in srgb, #f5a623 26%, transparent); }
.mto-fil__auj { position: absolute; top: 2px; bottom: 16px; width: 2px; margin-left: -1px; background: var(--primary); border-radius: 2px; }
.mto-fil__auj em { position: absolute; top: -2px; left: 5px; font-style: normal; font-size: 9px; font-weight: 800;
  color: var(--primary); white-space: nowrap; }
/* deux lignes par essaim : sur une seule, quatre colonnes tronquaient les noms */
.mto-fil__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 8px; }
.mto-fil__l { padding: 8px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mto-fil__l.is-next { background: color-mix(in srgb, #f5a623 9%, var(--surface));
  border-color: color-mix(in srgb, #f5a623 38%, var(--border)); }
.mto-fil__l .t, .mto-fil__l .b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mto-fil__l .b { margin-top: 3px; }
.mto-fil__l .n { font-size: 13px; font-weight: 800; color: var(--text); }
.mto-fil__l .d { font-size: 11.5px; font-weight: 800; color: var(--text-2); white-space: nowrap; }
.mto-fil__l .z { font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.mto-fil__l .l { font-size: 11px; font-weight: 800; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .mto-trace { animation: none; stroke-dashoffset: 0; }
  .mto-mdet { animation: none; }
  .mto-fil__fil, .mto-et, .mto-scint, .mto-aur__r, .mto-astre { animation: none; }
  .mto-fil__fil { opacity: .5; }
}
@media (max-width: 1080px) {
  .mto-bande { grid-template-columns: repeat(4, 1fr); }
  .mto-moments { grid-template-columns: repeat(2, 1fr); }
  .mto-bas, .mto-ciel { grid-template-columns: 1fr; }
  .mto-fh__pills { margin-left: 0; justify-content: flex-start; max-width: none; }
}
/* ---- les trois ciels, plein cadre ---- */
.mto-ev--ecl { --evbg: linear-gradient(176deg, #101740 0%, #2c2458 38%, #6f3a5e 68%, #c96a3c 90%, #f0a24e 100%); }
.mto-ev--aur { --evbg: linear-gradient(180deg, #0b1130 0%, #131a3e 54%, #1b2450 100%); }
.mto-filantes { --evbg: linear-gradient(162deg, #1a2140 0%, #232b52 55%, #2e3763 100%); }
/* le sol : il pose la scène et fait exister la ligne d'horizon */
.mto-ev__horizon { position: absolute; left: -8%; right: -8%; bottom: -24%; height: 46%; border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(8,12,30,.9), rgba(6,9,22,.98));
  box-shadow: 0 -1px 0 rgba(255,255,255,.10); }
/* l'éclipse : le disque flotte sur le ciel de la CARTE, plus dans sa propre vignette */
.mto-ev--ecl .mto-ecl { width: 168px; border-radius: 0; box-shadow: none; }
/* les aurores : le panneau Kp devient un chiffre géant, les rideaux vivent sur la carte */
.mto-ev--aur .mto-kp { background: none; box-shadow: none; width: auto; min-width: 116px; height: auto;
  padding: 2px 6px 0 0; justify-content: flex-start; }
.mto-ev--aur .mto-kp .mto-aur { display: none; }
.mto-ev--aur .mto-kp__v { font-size: 54px; letter-spacing: -2.5px; }
.mto-ev--aur .mto-kp__l { color: rgba(255,255,255,.6); }
.mto-ev .mto-kpj__b i { border-color: #fff; background: var(--evc, var(--surface)); }
.mto-ev .mto-kpj__b u { background: #fff; opacity: .8; }
.mto-ev .mto-kpj__g { color: rgba(238,242,255,.6); }
.mto-ev .mto-kpj__g span:nth-child(2) { color: rgba(255,255,255,.9); }
/* les filantes : la tuile disparaît, son contenu se pose directement sur la carte */
.mto-filantes .mto-fil__pic { background: none; border: 0; padding: 0; width: 226px; }
.mto-filantes .mto-fil__pic::after, .mto-filantes .mto-fil__ciel { display: none; }
.mto-filantes .mto-fil__ligne { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mto-filantes .mto-fil__mois { color: rgba(238,242,255,.55); }
.mto-filantes .mto-fil__auj { background: #fff; }
.mto-filantes .mto-fil__auj em { color: #fff; }
.mto-filantes .mto-fil__l { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.mto-filantes .mto-fil__l.is-next { background: rgba(255,214,120,.24); border-color: rgba(255,214,120,.5); }
.mto-filantes .mto-fil__l .n { color: #fff; }
.mto-filantes .mto-fil__l .d { color: rgba(238,242,255,.85); }
.mto-filantes .mto-fil__l .z { color: rgba(238,242,255,.6); }
.mto-filantes .mto-fil__aide { color: rgba(238,242,255,.6); }
@media (max-width: 760px) { .mto-ev__corps { flex-direction: column; } .mto-fil__pic { width: 100%; }
  .mto-ev--ecl .mto-ecl { width: 140px; } }
@media (max-width: 640px) {
  .mto-bande { grid-template-columns: repeat(2, 1fr); }
  .mto-fh__big { font-size: 52px; }
  .mto-moments { grid-template-columns: 1fr; }
  .mto-jr__c, .mto-jr__bar { display: none; }
}

/* ============================================================================
   CARTES & RADAR (v5.793.19) — la carte porte enfin les informations de l'app :
   panneau du relevé en verre dépoli, pastille de température par ville, et le
   radar de pluie animé (observé puis prévu à 30 min).
   ============================================================================ */
.mto-cartehd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mto-cartehd__src { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3); }
.mto-carte { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(29,32,51,.12); }
.mto-carte__map { height: 520px; width: 100%; background: var(--surface-2); }
.mto-carte__map .mto-load { padding: 40px; text-align: center; }
/* le relevé du moment, posé sur la carte */
.mto-carte__info { position: absolute; left: 14px; top: 14px; z-index: 500; display: flex; align-items: center; gap: 12px;
  padding: 11px 15px 11px 11px; border-radius: 16px; background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(29,32,51,.18); }
.mto-carte__ic { width: 52px; height: 52px; flex: 0 0 auto; }
.mto-carte__ic .wxm { width: 100%; height: 100%; overflow: visible; }
.mto-carte__v { font-size: 28px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; color: #1d2033; }
.mto-carte__c { font-size: 12.5px; font-weight: 800; color: #3c4257; }
.mto-carte__d { font-size: 11px; font-weight: 700; color: #6b7280; margin-top: 2px; }
/* l'échelle d'intensité du radar */
.mto-carte__leg { position: absolute; right: 14px; top: 14px; z-index: 500; width: 168px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(29,32,51,.18); }
.mto-carte__leg b { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; width: 100%; }
.mto-carte__ech { width: 100%; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #9ad6f5, #4aa3df 28%, #4fc26b 52%, #f2d14a 72%, #ef8a3c 88%, #e0364f); }
.mto-carte__leg em { font-style: normal; font-size: 10px; font-weight: 700; color: #6b7280; }
/* la barre de temps du radar */
.mto-carte__time { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(29,32,51,.18); }
.mto-carte__play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--primary); color: #fff; font: 700 13px/1 inherit;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 45%, transparent); }
.mto-carte__play:hover { filter: brightness(1.08); }
.mto-carte__slider { flex: 1; accent-color: var(--primary); cursor: ew-resize; }
.mto-carte__t { flex: 0 0 auto; min-width: 74px; text-align: right; font-size: 13px; font-weight: 800; color: #1d2033;
  font-variant-numeric: tabular-nums; }
.mto-carte__t.is-futur { color: var(--primary); }
/* les pastilles de ville posées sur la carte */
.mto-pinwrap { background: none !important; border: 0 !important; }
.mto-pin { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transform: translate(-50%, -50%);
  padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(29,32,51,.24); cursor: pointer; }
.mto-pin:hover { background: #fff; box-shadow: 0 6px 18px rgba(29,32,51,.3); }
.mto-pin.is-ici { background: var(--primary); border-color: var(--primary); cursor: default;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 50%, transparent); }
.mto-pin__ic { width: 24px; height: 24px; flex: 0 0 auto; }
.mto-pin__ic .wxm { width: 100%; height: 100%; overflow: visible; }
.mto-pin b { font-size: 13.5px; font-weight: 800; color: #1d2033; letter-spacing: -.3px; }
.mto-pin em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #6b7280; }
.mto-pin.is-ici b, .mto-pin.is-ici em { color: #fff; }
@media (max-width: 760px) {
  .mto-carte__map { height: 400px; }
  .mto-carte__leg { display: none; }
  .mto-carte__info { left: 10px; top: 10px; padding: 8px 12px 8px 8px; }
  .mto-carte__v { font-size: 22px; }
}

/* --- Aperçu radar sur l'écran principal (v5.793.22) --- */
.mto-radar { margin-top: 12px; padding: 14px 16px 16px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.mto-radar:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,32,51,.14);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.mto-radar__hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mto-radar__t { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.mto-radar__go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800; color: var(--primary); }
.mto-radar__go svg { width: 12px; height: 12px; }
.mto-radar:hover .mto-radar__go svg { transform: translateX(2px); transition: transform .15s; }
.mto-radar__map { height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2); }
/* la carte est inerte : le curseur reste celui de la carte cliquable */
.mto-radar__map, .mto-radar__map * { cursor: pointer !important; }
@media (max-width: 760px) { .mto-radar__map { height: 170px; } }

/* Retour depuis les Cartes (v5.793.24) : on y arrivait par l'aperçu radar sans pouvoir revenir. */
.mto-retourm { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; cursor: pointer;
  font: 800 12.5px/1 inherit; color: var(--text-2); padding: 8px 13px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border); transition: background .15s, color .15s, border-color .15s; }
.mto-retourm:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }

/* --- Villes météo : 3 emplacements, la n°1 fait référence (v5.793.30) --- */
.mto-ville-n { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 5px; font-size: 9.5px; font-weight: 800; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-3); flex: 0 0 auto; }
.mto-ville-pill.is-active { background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
.mto-ville-pill.is-active .mto-ville-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.mto-ville-def { font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-3); padding: 2px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); }
.mto-ville-up { background: none; border: 0; cursor: pointer; font: 800 13px/1 inherit; color: var(--text-3);
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 auto; transition: background .12s, color .12s; }
.mto-ville-up:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.mto-ville-vide { border-style: dashed; opacity: .45; cursor: default; padding: 3px 12px; color: var(--text-3); }
.mto-ville-vide:hover { background: var(--surface-2); border-color: var(--border); color: var(--text-3); }
/* le bouton « Ma position » montre s'il est actif */
#mto-geo.is-active { background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); color: var(--primary); }


/* 🧾 v5.832.3 — Une caisse tenue mais en SOUS-CAPACITÉ : la barre est là, elle ne suffit pas à
   l'heure qu'il est. Hachures ambrées plutôt qu'une couleur pleine — ce n'est pas un trou, c'est un
   manque de bras sur une caisse qui tourne. */
.org-bar__f.manque{
  background:repeating-linear-gradient(135deg,#f59e0b,#f59e0b 4px,#fbbf24 4px,#fbbf24 8px) !important;
  box-shadow:0 0 0 1px rgba(180,83,9,.35) inset;
}


/* ⬆⬇ v5.833.8 (Mika : « le − n'est pas parlant, le + est en vert ») — une arrivée et un départ
   changent tous les deux l'effectif : les deux doivent se voir. Vert pour ce qui renforce, ambre
   pour ce qui allège — pas rouge, un départ prévu n'est pas une alerte. */
.org-dr__mv{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.82rem;font-weight:800;white-space:nowrap}
.org-dr__mv--in{background:color-mix(in srgb,#2f9e44 16%,var(--surface));color:#186a33}
.org-dr__mv--out{background:color-mix(in srgb,#f59e0b 20%,var(--surface));color:#8a5200}
@media (prefers-color-scheme:dark){
  .org-dr__mv--in{background:color-mix(in srgb,#2f9e44 26%,transparent);color:#7fe0a0}
  .org-dr__mv--out{background:color-mix(in srgb,#f59e0b 26%,transparent);color:#ffce7a}
}


/* 👥 v5.833.12 — EFFECTIF STABLE. Sans classe, le chiffre était blanc sur blanc et les heures
   creuses de 11h à 16h paraissaient vides. Bleu ardoise : présent, calme, rien à signaler. */
.org-bar__f.vs{background:linear-gradient(180deg,#7c8db5,#5f7096);color:#fff}
@media (prefers-color-scheme:dark){ .org-bar__f.vs{background:linear-gradient(180deg,#5a6b90,#42506e)} }


/* 🏷️ v5.833.12 — LE NOM QUI NE TIENT PAS DANS SA CASE. Un créneau de 30 min fait quelques
   pixels : l'étiquette se pose À CÔTÉ de la barre, jamais dedans. Fond translucide pour rester
   lisible au-dessus des bandes d'affluence, et `pointer-events:none` pour ne pas gêner le glisser. */
.org-tl__hors{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:.74rem;font-weight:800;line-height:1;padding:3px 7px;border-radius:99px;
  background:color-mix(in srgb,var(--chip-c,#1f9bd8) 16%,var(--surface,#fff));
  color:color-mix(in srgb,var(--chip-c,#1f9bd8) 78%,#111);
  box-shadow:0 1px 4px -1px rgba(0,0,0,.18);pointer-events:none;z-index:3}
.org-tl__hors--g{left:auto;right:calc(100% + 6px)}
/* Les pilules d'arrivée/départ du déroulé : elles étaient rognées par la colonne (Mika : « on
   n'arrive pas à lire »). Elles ne doivent jamais être coupées — quitte à passer à la ligne. */
.org-dr__mv{white-space:normal;line-height:1.35;padding:2px 10px;margin-right:2px}
.org-dr__txt{overflow-wrap:anywhere}


/* 📏 v5.833.22 — LE SOUS-TITRE D'UN POSTE NE FAIT PLUS GRANDIR SA LIGNE. Un libellé long
   (« pause de Aline, Juliana · 2 créneaux · 12h30→15h30 ») tenait sur quatre lignes dans une colonne
   de 132 px et étirait toute la rangée, laissant une bande blanche à droite. Deux lignes maximum,
   le reste au survol. */
.org-tl__nom .org-tl__cnt{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.org-tl__poste{align-items:center}


/* 💾 v5.833.26 — LES VERSIONS D'ORGANISATION. Une liste qu'on parcourt à l'œil : le nom d'abord,
   le résumé chiffré ensuite, les actions à droite. La journée affichée est mise en avant — c'est
   presque toujours celle qu'on cherche. */
.org-ver-haut{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  padding:13px 15px;border-radius:12px;background:color-mix(in srgb,var(--primary,#0d8ee0) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary,#0d8ee0) 22%,transparent)}
.org-ver-sect{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  margin:16px 0 7px;font-weight:700}
.org-ver{display:block;padding:13px 15px;border:1px solid var(--border);border-radius:12px;
  margin-bottom:9px;background:var(--surface)}
.org-ver--jour{border-color:color-mix(in srgb,var(--primary,#0d8ee0) 40%,transparent);
  background:color-mix(in srgb,var(--primary,#0d8ee0) 4%,var(--surface))}
.org-ver__t{min-width:0;margin-bottom:9px}
.org-ver__t b{display:block;font-size:1rem;line-height:1.3;margin-bottom:2px}
.org-ver__q{display:block;font-size:.79rem;color:var(--text-3)}
/* Les chiffres portent leur mot : « 21 · 9 · 4 » ne veut rien dire hors contexte. */
.org-ver__r{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.org-ver__r span{display:inline-flex;align-items:center;gap:5px;font-size:.79rem;font-weight:600;
  color:var(--text-2);background:color-mix(in srgb,var(--text-1,#141826) 5%,transparent);
  padding:3px 10px;border-radius:99px;white-space:nowrap}
.org-ver__a{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.org-ver__a .btn{padding:7px 14px}
.org-vbadge{display:inline-block;min-width:17px;padding:0 5px;border-radius:99px;font-size:.68rem;
  font-weight:800;background:color-mix(in srgb,var(--primary,#0d8ee0) 18%,transparent);color:var(--primary,#0d8ee0)}
@media(max-width:620px){.org-ver{grid-template-columns:1fr;gap:8px}.org-ver__a{justify-content:flex-end}}


/* 📏 MESURE 03/08 — FIN DE LA BANDE BLANCHE. Relevé sur l'écran réel : rangée 75 px, colonne de
   gauche 74 px, piste 54 px. Les 20 px manquants étaient du vide à droite, parce que la piste
   gardait sa hauteur naturelle au lieu de suivre la rangée. */
.org-tl-row{align-items:stretch !important}
/* ⚠️ NE PAS remettre `height:auto` ici : ça annulait la hauteur calculée des lignes à plusieurs
   voies d'empilement, et leurs barres tombaient de 52 à 23 px (mesuré le 03/08). `align-self:stretch`
   suffit à étirer la piste ; la hauteur mini est posée en ligne par le rendu. */
.org-tl-row > .org-tl__zone,
.org-tl-row > .org-tl__cov{align-self:stretch !important}
/* Le titre d'une sous-ligne tient sur UNE ligne : à deux, il doublait la hauteur de la colonne et
   c'est ce qui creusait l'écart. Le détail reste dans le sous-titre, juste dessous. */
.org-tl__nom > b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.org-tl__poste{align-items:center !important;padding-top:6px;padding-bottom:6px}


/* La liste des versions a besoin de largeur : dans une fenêtre étroite, le nom se coupait à
   « 21 cr… » et la date s'étalait sur quatre lignes (Mika, 03/08 : « tu trouves cela
   compréhensible ? » — non). Même procédé que la fenêtre de Lémo : on cible par son contenu. */
.modal:has(#ver-zone){max-width:min(760px,96vw)}

/* La date porte la ligne ; l'heure la complète sans la concurrencer. */
.org-ver__h{font-weight:600;color:var(--text-3);font-size:.9em}


/* 🧭 v5.836.6 — LES BANDEAUX D'ÉTAGE (Mika : « rends cela plus lisible », « pas assez sexy »).
   Trois niveaux, trois traitements : les CHIFFRES en pastilles (on les lit d'un coup d'œil), la
   RÈGLE en dessous (on la consulte une fois puis on la sait), la LÉGENDE à part, discrète. */
.org-etg__l{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:3px}
.org-chp{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;border-radius:99px;
  font-size:.78rem;font-weight:600;white-space:nowrap;
  background:color-mix(in srgb,var(--ec,#5b6875) 12%,var(--surface));
  color:color-mix(in srgb,var(--ec,#5b6875) 82%,var(--text))}
.org-chp b{font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.org-chp--alerte{background:color-mix(in srgb,#e0413a 13%,var(--surface));color:#a32720}
.org-chp--ok{background:color-mix(in srgb,#2f9e44 14%,var(--surface));color:#186a33}
.org-etg__r{font-size:.75rem;color:var(--text-2);line-height:1.45}
.org-etg__r b{color:var(--text)}

.org-lgd{margin:0 0 0 auto !important;gap:11px}
.org-etg__l .org-lgd{padding-left:10px}


/* L'ECHELLE DE LA FILE UNIQUE (Mika, 03/08 : « rends ça plus sexy »). Quatre paliers dont la
   couleur monte du vert au rouge : on voit l'escalade avant même de lire les chiffres. Une liste
   à plat obligeait à comparer quatre flèches identiques. */
.org-file{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}
.org-file__t{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);margin-right:2px}
.org-file__p{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:8px;
  font-size:.74rem;font-weight:600;color:var(--text-2);white-space:nowrap;
  background:color-mix(in srgb,var(--fc) 13%,var(--surface));border-left:3px solid var(--fc)}
.org-file__p b{font-size:.88rem;font-weight:800;color:color-mix(in srgb,var(--fc) 72%,#111)}
.org-file__p i{font-style:normal;opacity:.45;margin:0 1px}
.org-file__p--0{--fc:#2f9e44}
.org-file__p--1{--fc:#94b81c}
.org-file__p--2{--fc:#e8a33d}
.org-file__p--3{--fc:#e0413a}
@media(max-width:760px){.org-file__t{width:100%;margin-bottom:2px}}


/* ⚡ Le bandeau de la version d'essai : il doit se voir sans crier. On teste un moteur, ce n'est
   pas une alerte — mais il faut savoir sur quelle version on se trouve avant de juger le résultat. */
.org-booster--retire{margin:0 0 12px;padding:10px 14px;border-radius:11px;font-size:.86rem;line-height:1.5;
  background:linear-gradient(100deg,color-mix(in srgb,#7048e8 12%,var(--surface)),color-mix(in srgb,#2ea6e6 8%,var(--surface)));
  border:1px solid color-mix(in srgb,#7048e8 28%,transparent);color:var(--text-2)}
.org-booster b{color:var(--text)}

/* L'avertissement de moteur : on a demande Claude, c'est Gemini qui a repondu. Discret mais present
   — un test qui n'a pas eu lieu ne doit jamais passer pour un test reussi. */
.org-avismot{display:block;margin-top:5px;font-size:.78rem;line-height:1.4;
  color:color-mix(in srgb,#e0413a 78%,var(--text));font-weight:600}

/* ⚡ La pastille de moteur : un mot collé au titre, qui dit QUI raisonne. Elle remplace un bandeau
   pleine largeur qui, lui, ne le disait pas (Mika, 03/08). Deux teintes, pas deux tailles — aucun
   des deux écrans n'est "l'important". */
.org-mot{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:3px 9px;
  border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  background:color-mix(in srgb,var(--mc) 15%,var(--surface));color:color-mix(in srgb,var(--mc) 68%,var(--text));
  border:1px solid color-mix(in srgb,var(--mc) 32%,transparent)}
.org-mot--gemini{--mc:#2ea6e6}
.org-mot--claude{--mc:#7048e8}
@media(max-width:760px){.org-mot{display:none}}

/* La liste des modeles Claude : discrete, a cote de la pastille de moteur. On la lit quand on la
   cherche, elle ne dispute pas la place au titre. */
.org-mdl{margin-left:6px;padding:3px 8px;border-radius:999px;font-size:.7rem;font-weight:700;
  color:color-mix(in srgb,#7048e8 68%,var(--text));background:color-mix(in srgb,#7048e8 9%,var(--surface));
  border:1px solid color-mix(in srgb,#7048e8 28%,transparent);cursor:pointer}
@media(max-width:760px){.org-mdl{display:none}}

/* L'analyse qui continue apres la fermeture de la fenetre. Elle rassure plus qu'elle n'alerte :
   rien n'est perdu, il suffit d'attendre ou de revenir dedans. */
.org-envol{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,#7048e8 9%,var(--surface));
  border:1px solid color-mix(in srgb,#7048e8 26%,transparent)}
.org-envol b{font-size:.9rem;color:color-mix(in srgb,#7048e8 70%,var(--text))}
.org-envol span{font-size:.79rem;line-height:1.45;color:var(--text-2)}
.org-envol__t{font-weight:800;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,#7048e8 70%,var(--text))}
.org-envol .btn{margin-top:4px;align-self:flex-start}

/* Les CHIFFRES d'un bandeau prennent la couleur de leur etage. Ils etaient verts en dur : on
   repeignait le bandeau en bleu et le vert revenait par la fenetre, sur la meme ligne.
   `--alerte` est exclu volontairement : le rouge dit un probleme, ce n'est pas de la decoration. */
.org-tl-etage .org-chp:not(.org-chp--alerte){
  background:color-mix(in srgb,var(--ec,#5b6875) 13%,var(--surface));
  color:color-mix(in srgb,var(--ec,#5b6875) 68%,#101418)}
.org-tl-etage .org-chp:not(.org-chp--alerte) b{color:color-mix(in srgb,var(--ec,#5b6875) 82%,#101418)}
.org-tl--nuit .org-tl-etage .org-chp:not(.org-chp--alerte){
  background:color-mix(in srgb,var(--ec,#5b6875) 26%,transparent);color:#eaf1ff}
.org-tl--nuit .org-tl-etage .org-chp:not(.org-chp--alerte) b{color:#fff}

/* La pastille d'analyse, posee sur le <body> : elle survit aux changements de page. En bas a droite,
   au-dessus de tout, mais assez discrete pour ne pas gener la lecture de l'ecran qu'on est venu voir. */
.org-flot{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:10px;
  padding:10px 15px 10px 12px;border-radius:14px;border:1px solid var(--border);cursor:pointer;
  background:var(--surface);box-shadow:0 10px 30px -10px rgba(10,20,40,.35);text-align:left;
  font:inherit;color:var(--text);transition:transform .14s,box-shadow .14s}
.org-flot:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(10,20,40,.45)}
.org-flot__x{display:flex;flex-direction:column;line-height:1.25}
.org-flot__x b{font-size:.84rem}
.org-flot__x i{font-style:normal;font-size:.72rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.org-flot__p{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
/* En cours : la pastille respire, on comprend que ca travaille sans lire le chrono. */
.org-flot--vol{border-color:color-mix(in srgb,#7048e8 34%,transparent)}
.org-flot--vol .org-flot__p{background:#7048e8;animation:orgFlotPuls 1.4s ease-in-out infinite}
.org-flot--pret{border-color:color-mix(in srgb,#2f9e44 42%,transparent);
  background:color-mix(in srgb,#2f9e44 7%,var(--surface))}
.org-flot--pret .org-flot__p{background:#2f9e44}
@keyframes orgFlotPuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media(prefers-reduced-motion:reduce){.org-flot--vol .org-flot__p{animation:none}}
@media(max-width:760px){.org-flot{right:10px;bottom:74px;padding:8px 12px}}

/* Le detail technique sous une erreur : replie, discret, mais complet. Une capture d'ecran doit
   suffire a diagnostiquer sans acces aux logs serveur. */
.org-diag{margin-top:10px;font-size:.78rem}
.org-diag summary{cursor:pointer;font-weight:700;color:var(--text-2);user-select:none}
.org-diag pre{margin:8px 0 6px;padding:9px 11px;border-radius:9px;max-height:230px;overflow:auto;
  background:var(--surface-2);border:1px solid var(--border);
  font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}

/* Le mode essai : eteint il est discret, allume il se VOIT. Un mode d'essai qu'on oublie d'eteindre
   fait croire que l'app se comporte anormalement pendant des jours. */
.org-essai{cursor:pointer;font-family:inherit}
.org-essai--on{background:color-mix(in srgb,#e8a33d 20%,var(--surface));
  border-color:color-mix(in srgb,#e8a33d 55%,transparent);
  color:color-mix(in srgb,#a86a12 85%,#000);font-weight:800}

/* Analyse interrompue par un rechargement : on ne fait pas semblant qu'il ne s'est rien passe. */
.org-flot--perdu{border-color:color-mix(in srgb,#e0413a 45%,transparent);
  background:color-mix(in srgb,#e0413a 7%,var(--surface))}
.org-flot--perdu .org-flot__p{background:#e0413a}

/* Le bouton d'arret d'une analyse : discret, il ne doit pas concurrencer l'attente elle-meme. */
.org-ia__stop{margin-top:8px;align-self:flex-start;font-size:.76rem}

/* Polyvalence : une ligne par competence, avec son curseur de niveau a droite (gerant seulement). */
.f-comps{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.f-comp__l{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:3px 8px;border-radius:8px;transition:background .12s}
.f-comp__l--on{background:color-mix(in srgb,var(--primary,#6c5ce7) 6%,transparent)}
.f-niv{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.f-niv__b{width:22px;height:22px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
  cursor:pointer;font-weight:800;line-height:1;color:var(--text-2);font-family:inherit}
.f-niv__b:hover{border-color:var(--primary,#6c5ce7);color:var(--primary,#6c5ce7)}
.f-niv__v{min-width:64px;text-align:center;font-size:.74rem;font-weight:700;color:var(--text-2)}


/* ============================================================================
   DOSSIER DU PERSONNEL (v5.938) — js/dossier-salarie.js
   Une page longue plutot que des onglets : l'objectif est de voir TOUT un
   salarie d'un coup, et de l'imprimer d'un bloc.

   Parti pris visuel : chaque section porte une COULEUR (--c) et chaque salarie
   porte la sienne (--sc, celle de ses creneaux au planning). Sur une page aussi
   longue, c'est la teinte qui permet de retrouver un bloc du coin de l'oeil.
   Matiere : verre teinte + halo, comme la frise d'affluence — jamais de liseres
   autour des blocs (Mika : « le contour, ca fait trop lourd »). Tout passe par
   les variables de theme : rien a reprendre en mode sombre.
   ========================================================================== */
.dos-barre{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dos-select{max-width:340px;font-weight:650}

/* ---------- Entete « badge » : aplat a la couleur du salarie ----------
   Choix de Mika (07/08) : la direction « badge » pour le style, la direction
   « parcours » pour le contenu. La couleur est celle des creneaux du salarie au
   planning — on reconnait le dossier avant d'avoir lu le nom. */
.dos-tete{overflow:hidden;margin-bottom:16px;border:0;padding:0;
  box-shadow:0 1px 2px rgba(29,32,51,.05), 0 14px 40px -22px color-mix(in srgb,var(--sc,#6c5ce7) 90%,transparent)}
.dos-badge{position:relative;
  background:linear-gradient(135deg,var(--sc,#6c5ce7),color-mix(in srgb,var(--sc,#6c5ce7) 55%,#2b1d4a))}
/* Trame de points : donne de la matiere a l'aplat sans le charger. */
.dos-badge::after{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:14px 14px}
.dos-badge__h{display:flex;gap:20px;align-items:center;padding:22px 24px 18px;position:relative;z-index:1}
.dos-ava{width:78px;height:78px;border-radius:24px;flex:none;display:grid;place-items:center;
  font-size:26px;font-weight:850;letter-spacing:-.03em;background:#fff;
  color:var(--sc,#6c5ce7);box-shadow:0 10px 26px -8px rgba(0,0,0,.42)}
.dos-ava--photo{background-size:cover;background-position:center;color:transparent}
.dos-badge__id{min-width:0}
.dos-badge__n{font-size:1.65rem;font-weight:850;letter-spacing:-.035em;color:#fff;line-height:1.1}
.dos-badge__s{color:rgba(255,255,255,.87);font-size:.88rem;margin-top:5px;font-weight:600}
.dos-mat{display:inline-block;background:rgba(255,255,255,.22);border-radius:7px;
  padding:2px 8px;font-size:.71rem;font-weight:800;letter-spacing:.05em;margin-right:8px;color:#fff}
.dos-badge__tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.dos-tag{font-size:.72rem;font-weight:750;border-radius:20px;padding:4px 11px;
  background:rgba(255,255,255,.2);color:#fff}
.dos-tag--sorti{background:rgba(0,0,0,.22)}

/* ---------- Jauges : posees SUR la couleur, en verre ----------
   Un anneau n'apparait que si la valeur a une borne qui veut dire quelque chose
   (solde de conges sur le droit acquis, base sur 35 h, anciennete sur celle du
   plus ancien de l'equipe). Les heures a recuperer n'ont PAS de plafond : elles
   restent un chiffre nu, sinon l'anneau laisserait croire a une limite. */
.dos-jauges{display:flex;gap:11px;flex-wrap:wrap;padding:0 24px 22px;position:relative;z-index:1}
/* v5.941 (Mika : « fais-moi les jauges en couleurs, sinon c'est bizarre et pas lisible »).
   Avant : arc blanc sur piste sombre, pose sur un aplat deja colore — trois nuances de
   la meme chose, rien ne se detachait. Desormais la pastille est CLAIRE et chaque jauge
   reprend SA couleur : le contraste vient de l'ecart pastille/aplat, et la teinte
   redevient porteuse de sens (violet = anciennete, vert = conges, bleu = base...). */
.dos-jauge{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 10px;border-radius:15px;
  background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--c,#6c5ce7) 9%,#fff));
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s cubic-bezier(.22,.75,.3,1.08), box-shadow .18s}
.dos-jauge:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.42)}
.dos-jauge--nue{padding-left:16px}
.dos-jauge svg{width:42px;height:42px;flex:none;transform:rotate(-90deg)}
.dos-jauge__piste{fill:none;stroke:color-mix(in srgb,var(--c,#6c5ce7) 17%,transparent);stroke-width:5}
.dos-jauge__arc{fill:none;stroke:var(--c,#6c5ce7);stroke-width:5;stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.22,.75,.3,1.08)}
.dos-jauge__l{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:color-mix(in srgb,var(--c,#6c5ce7) 62%,var(--text-2));white-space:nowrap}
.dos-jauge__v{font-size:1.32rem;font-weight:850;letter-spacing:-.035em;margin-top:1px;
  color:color-mix(in srgb,var(--c,#6c5ce7) 34%,var(--text))}
.dos-jauge__v small{font-size:.72rem;font-weight:650;color:var(--text-2);letter-spacing:0}

/* ---------- Frise du parcours ----------
   Le dossier montrait des listes, jamais le chemin parcouru. Chaque source
   respecte sa propre garde : les augmentations ne sortent du coffre que pour le
   gerant, la discipline reste aux encadrants. */
.dos-parcours{padding:18px 24px 20px}
.dos-parcours__t{font-size:.68rem;font-weight:800;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:14px}
.dos-rail{position:relative;padding-left:22px}
.dos-rail::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sc,#6c5ce7) 70%,transparent),
                                     color-mix(in srgb,var(--sc,#6c5ce7) 10%,transparent))}
.dos-ev{position:relative;padding-bottom:14px}
.dos-ev:last-child{padding-bottom:0}
.dos-ev::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 2.5px var(--ec,var(--sc,#6c5ce7))}
.dos-ev__d{font-size:.7rem;font-weight:760;color:var(--text-3);letter-spacing:.04em}
.dos-ev__t{font-weight:640;font-size:.86rem;margin-top:1px}
.dos-ev__t b{color:var(--ec,var(--sc,#6c5ce7));font-weight:780}

/* Sur la couleur, l'ombre portee des cartes de section reste discrete. */
@media print{
  .dos-badge{background:none!important;color:var(--text)}
  .dos-badge::after{display:none}
  .dos-badge__n,.dos-badge__s,.dos-jauge__v,.dos-jauge__l{color:var(--text)!important}
  .dos-jauge{background:none;box-shadow:none}
  .dos-jauge__arc{stroke:var(--text-2)}
  .dos-jauge__piste{stroke:var(--border-2)}
  .dos-ava{box-shadow:none;border:1px solid var(--border-2)}
  .dos-tag{background:var(--bg);color:var(--text-2)}
}
@media (prefers-reduced-motion:reduce){
  .dos-jauge,.dos-jauge__arc{transition:none}
  .dos-jauge:hover{transform:none}
}

/* ---------- Bandeau de confidentialite : il dit ce que la page ne contient PAS ---------- */
.dos-avert{display:flex;gap:11px;align-items:flex-start;padding:12px 15px;border-radius:13px;
  background:color-mix(in srgb,#2d9cdb 8%,var(--surface));
  color:color-mix(in srgb,#2d9cdb 52%,var(--text));font-size:.84rem;margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px -10px rgba(45,156,219,.7)}
.dos-avert svg{width:17px;height:17px;flex:none;margin-top:1px;opacity:.8}
.dos-avert b{color:var(--text)}

/* ---------- Sections : medaillon colore + filet de couleur ---------- */
.dos-sec{margin-bottom:14px;border:0;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(29,32,51,.05), 0 8px 24px -20px color-mix(in srgb,var(--c,#6c5ce7) 70%,transparent)}
/* Le filet vertical remplace le contour : il colore la carte sans l'encadrer. */
.dos-sec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--c,#6c5ce7),color-mix(in srgb,var(--c,#6c5ce7) 25%,transparent))}
.dos-sec__h{display:flex;align-items:center;gap:11px;padding:13px 16px 13px 19px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,#6c5ce7) 7%,transparent),transparent 55%)}
/* Medaillon : c'est lui qui donne le relief, l'emoji seul faisait pale figure. */
.dos-sec__ic{width:31px;height:31px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:.95rem;line-height:1;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c,#6c5ce7) 82%,#fff),var(--c,#6c5ce7));
  box-shadow:0 4px 11px -4px color-mix(in srgb,var(--c,#6c5ce7) 90%,transparent),
             inset 0 1px 0 rgba(255,255,255,.45)}
.dos-sec__ic svg{width:17px;height:17px;display:block}
.dos-sec__t{font-weight:820;font-size:.95rem;letter-spacing:-.015em}
.dos-sec__b{padding:14px 16px 15px 19px}
.dos-lien{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.79rem;font-weight:730;color:color-mix(in srgb,var(--c,#6c5ce7) 72%,var(--text));
  white-space:nowrap;transition:opacity .15s}
.dos-lien:hover{opacity:.7;text-decoration:underline}

/* ---------- Listes de definitions ---------- */
.dos-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:720px){.dos-duo{grid-template-columns:1fr}}
.dos-dl{margin:0}
.dos-li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.dos-li:last-child{border-bottom:0}
.dos-li dt{width:142px;flex:none;color:var(--text-3);font-weight:640;font-size:.8rem;padding-top:1px}
.dos-li dd{margin:0;font-weight:640;font-size:.87rem;min-width:0;overflow-wrap:anywhere}

/* ---------- Pastilles d'etat ---------- */
.dos-p{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:760;
  border-radius:20px;padding:3px 10px;white-space:nowrap}
.dos-p--ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:color-mix(in srgb,var(--success) 75%,var(--text))}
.dos-p--att{background:color-mix(in srgb,var(--warning) 18%,transparent);color:color-mix(in srgb,var(--warning) 80%,var(--text))}
.dos-p--ko{background:color-mix(in srgb,var(--danger) 15%,transparent);color:color-mix(in srgb,var(--danger) 75%,var(--text))}
.dos-p--inf{background:color-mix(in srgb,#2d9cdb 15%,transparent);color:color-mix(in srgb,#2d9cdb 75%,var(--text))}
.dos-p--n{background:var(--bg);color:var(--text-2)}

/* ---------- Motif masque : le cadenas dit qu'il EXISTE un motif, pas lequel ---------- */
.dos-masq{display:inline-flex;align-items:center;gap:6px;font-style:italic;color:var(--text-2)}
.dos-masq svg{width:13px;height:13px;opacity:.55;flex:none}
.dos-note{color:var(--text-3);font-size:.8rem}
.dos-vide{color:var(--text-3);font-size:.85rem;padding:6px 2px}
.dos-resume{font-size:.82rem;color:var(--text-2);margin-bottom:10px}

/* ---------- Tableaux ---------- */
.dos-t{border-collapse:separate;border-spacing:0}
.dos-t td,.dos-t th{font-size:.84rem}
.dos-t th{border-bottom:1px solid var(--border);color:var(--text-3);font-weight:760}
.dos-t td{border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.dos-t tbody tr{transition:background .13s}
.dos-t tbody tr:hover{background:color-mix(in srgb,var(--c,#6c5ce7) 5%,transparent)}
.dos-t tbody tr:last-child td{border-bottom:0}
.dos-t .num{text-align:right;font-variant-numeric:tabular-nums}
.dos-plus,.dos-pj{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.8rem;font-weight:720;color:color-mix(in srgb,var(--c,#6c5ce7) 72%,var(--text))}
.dos-plus{margin-top:10px}
.dos-plus:hover,.dos-pj:hover{text-decoration:underline}

/* ---------- Sante & amenagements : sous-titres et puces de restriction ---------- */
.dos-sstitre{font-size:.68rem;font-weight:800;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.08em;margin:14px 0 8px}
.dos-sstitre:first-child{margin-top:0}
.dos-restrict{display:flex;flex-wrap:wrap;gap:7px}
.dos-restrict__p{font-size:.78rem;font-weight:680;border-radius:10px;padding:5px 11px;
  background:color-mix(in srgb,var(--c,#d6336c) 10%,var(--surface));
  color:color-mix(in srgb,var(--c,#d6336c) 55%,var(--text));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- Remuneration ---------- */
.dos-actuel{display:flex;align-items:baseline;gap:11px;padding:11px 14px;border-radius:12px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 12%,var(--surface)),color-mix(in srgb,var(--c) 3%,var(--surface)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);margin-bottom:13px;font-size:.86rem}
.dos-actuel span{color:var(--text-3);font-weight:650;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.dos-actuel b{font-size:1.3rem;font-weight:840;letter-spacing:-.03em;
  color:color-mix(in srgb,var(--c) 32%,var(--text))}
.dos-ferme{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--text-2)}
.dos-ferme svg{width:17px;height:17px;flex:none;margin-top:1px;opacity:.6}
.dos-aide{margin-top:11px;font-size:.8rem;color:var(--text-2);line-height:1.6}
.dos-aide code{font-size:.76rem;background:var(--bg);padding:2px 6px;border-radius:6px}
.dos-aide--attention{padding:10px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--warning) 9%,var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.dos-actions{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}

/* ---------- Frise des semaines signees : 52 pastilles valent mieux que 52 lignes ---------- */
.dos-frise{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px}
.dos-sem{width:17px;height:17px;border-radius:5px;display:inline-block;
  transition:transform .13s cubic-bezier(.22,.75,.3,1.08)}
.dos-sem:hover{transform:scale(1.28)}
.dos-sem--ok{background:linear-gradient(160deg,color-mix(in srgb,var(--success) 78%,#fff),var(--success));
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--success) 80%,transparent)}
.dos-sem--att{background:linear-gradient(160deg,color-mix(in srgb,var(--warning) 78%,#fff),var(--warning));
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--warning) 80%,transparent)}
.dos-sem--non{background:var(--border-2)}
.dos-legende{display:flex;gap:15px;font-size:.75rem;color:var(--text-2);margin-bottom:13px}
.dos-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.dos-pied{text-align:center;font-size:.75rem;color:var(--text-3);padding-top:6px}

/* ---------- Impression : le dossier sort en un bloc, sans le chrome de l'app ---------- */
@media print{
  .dos-barre,.dos-lien,.dos-plus,.dos-actions,.topbar{display:none!important}
  .dos-sec,.dos-tete{break-inside:avoid;box-shadow:none}
  .dos-tete::before{display:none}
  .dos-sec__b{padding:10px 12px}
  .dos-kpi{box-shadow:none}
}
/* Un utilisateur qui a demande moins d'animations n'en recoit aucune. */
@media (prefers-reduced-motion:reduce){
  .dos-kpi,.dos-sem,.dos-t tbody tr{transition:none}
  .dos-kpi:hover,.dos-sem:hover{transform:none}
}

/* ============ ☄️ Tuile « Nuit des étoiles filantes » (v5.960) ============
   Même gabarit que la tuile éclipse, mais fond de nuit : le canvas EST le décor,
   le texte se pose dessus. Hauteur fixe pour que l'accueil ne saute pas au chargement. */
.psd-b { padding: 14px 16px; background: linear-gradient(160deg, #0d1430, #16204a); border: 1px solid #2b3660; color: #e8eefc; }
.psd-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.psd-hd b { font-size: 15px; }
.psd-cr { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #8fb6ff; font-variant-numeric: tabular-nums; }
.psd-corps { position: relative; border-radius: 11px; overflow: hidden; min-height: 128px; }
.psd-ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.psd-txt { position: relative; padding: 13px 15px; display: grid; gap: 8px; }
.psd-taux { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.psd-taux > b { font-size: 15.5px; }
.psd-taux span { font-size: 12.5px; color: #b9c9ea; }
.psd-taux span b { color: #ffd98a; }
.psd-quand { font-size: 12.5px; color: #cfdcf5; max-width: 62ch; line-height: 1.5; }
.psd-note { margin-top: 9px; font-size: 12.5px; color: #b9c9ea; min-height: 17px; }
.psd-astuce { margin-top: 10px; font-size: 11.8px; line-height: 1.65; color: #ffe2b0;
  background: rgba(255, 200, 90, .09); border: 1px solid rgba(255, 200, 90, .28); border-radius: 9px; padding: 9px 11px; }
@media (max-width: 640px) { .psd-corps { min-height: 152px; } .psd-quand { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .psd-ciel { display: none; } .psd-corps { background: #101a3a; } }
@media print { .psd-b { display: none !important; } }