/* Couleurs de la marque Koh Tao (kohtao.ca) : vert forêt #212D1C, bordeaux #3F0B1E / #6A163B,
   crème #E6E1D3, olive #778751, sauge #9DB68D, rose #CC3366.
   Couleurs des graphiques tirées de la marque et validées pour le daltonisme, en clair et en sombre. */
:root {
  color-scheme: light;
  --vert: #212d1c; --vert-2: #2e3d27; --bordeaux: #3f0b1e; --bordeaux-2: #6a163b; --creme: #e6e1d3; --olive: #778751; --sauge: #9db68d; --rose: #cc3366;
  --page: #f3efe4;
  --surface: #fffdf8;
  --surface-2: #f3eee2;
  --encre: #1c2418;
  --encre-2: #4d5446;
  --discret: #77786a;
  --trait: #e8e2d3;
  --axe: #d2cbb8;
  --anneau: rgba(33, 45, 28, 0.09);
  --or: #8a6a1f;
  --or-fond: #f6eedb;
  --saisie-fond: #fbf6e9;
  --saisie-bord: #dccfae;
  --cote: #212d1c;
  --cote-encre: #e6e1d3;
  --cote-discret: #a7ab96;
  --s1: #4a7c2f; --s2: #c98500; --s3: #a3245a; --s4: #2a6fb0;
  --seq-1: #edf0e1; --seq-2: #d3ddbc; --seq-3: #adc08c; --seq-4: #849c5f; --seq-5: #58733c; --seq-6: #2f4522;
  --bon: #0ca30c; --bon-texte: #2f6a1d; --avert: #e0a100; --serieux: #ec835a; --critique: #c42b4d;
  --hausse: #2f6a1d; --baisse: #b0234f;
  --ombre: 0 1px 1px rgba(33, 45, 28, 0.04), 0 2px 6px -1px rgba(33, 45, 28, 0.06), 0 20px 40px -20px rgba(33, 45, 28, 0.25);
  --rayon: 18px;
  /* Titres en serif (DM Serif Display, servie par le logiciel), fond de page avec une lueur sauge, anneau de focus. */
  --police-titre: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --graisse-titre: 400;
  --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(157, 182, 141, 0.26), transparent 60%), radial-gradient(45% 35% at 0% 100%, rgba(204, 51, 102, 0.07), transparent 60%), var(--page);
  --anneau-focus: color-mix(in srgb, var(--olive) 28%, transparent);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0e130c; --surface: #172014; --surface-2: #1f2a1b; --encre: #ece7da; --encre-2: #c6c2b1; --discret: #8f927e;
    --trait: #26311f; --axe: #36432e; --anneau: rgba(230, 225, 211, 0.08); --or: #d9b45a; --or-fond: #2a2414;
    --saisie-fond: #1d2618; --saisie-bord: #4a5a3c; --cote: #0b0f09; --cote-discret: #8f937f;
    --s1: #3d7834; --s2: #c4870f; --s3: #c24c86; --s4: #3f86c4;
    --seq-1: #1f2a1b; --seq-2: #2c4224; --seq-3: #3f5f30; --seq-4: #5d8045; --seq-5: #8eae6c; --seq-6: #cfe0aa;
    --bon-texte: #7fc96a; --hausse: #8fd17a; --baisse: #f07a9b;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(119, 135, 81, 0.16), transparent 60%), var(--page);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e130c; --surface: #172014; --surface-2: #1f2a1b; --encre: #ece7da; --encre-2: #c6c2b1; --discret: #8f927e;
  --trait: #26311f; --axe: #36432e; --anneau: rgba(230, 225, 211, 0.08); --or: #d9b45a; --or-fond: #2a2414;
  --saisie-fond: #1d2618; --saisie-bord: #4a5a3c; --cote: #0b0f09; --cote-discret: #8f937f;
  --s1: #3d7834; --s2: #c4870f; --s3: #c24c86; --s4: #3f86c4;
  --seq-1: #1f2a1b; --seq-2: #2c4224; --seq-3: #3f5f30; --seq-4: #5d8045; --seq-5: #8eae6c; --seq-6: #cfe0aa;
  --bon-texte: #7fc96a; --hausse: #8fd17a; --baisse: #f07a9b;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(119, 135, 81, 0.16), transparent 60%), var(--page);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { margin: 0; background: var(--page); color: var(--encre); }
body { margin: 0; background: var(--fond-page); color: var(--encre); min-height: 100vh; }
body { font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.discret { color: var(--discret); }
.nombre, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- Mise en page ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.cote { background: var(--cote) radial-gradient(120% 60% at 0% 100%, rgba(119, 135, 81, 0.18), transparent 60%); color: var(--cote-encre); padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.marque { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; padding: 4px 12px 14px; border-bottom: 1px solid rgba(230, 225, 211, 0.12); }
.marque img { width: 132px; height: auto; display: block; }
.marque .lieu { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sauge); font-weight: 600; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--cote-discret); font-weight: 500; position: relative; }
#nav a svg { width: 18px; height: 18px; flex: none; }
#nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--cote-encre); }
#nav a.actif { background: rgba(230, 225, 211, 0.1); color: var(--creme); }
#nav a.actif::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sauge); }
#nav .groupe { margin: 16px 12px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: #7d8370; font-weight: 600; }
.cote-bas { margin-top: auto; padding: 0 8px; }
/* Le menu s'est allongé (Horaires) : sur un écran bas, la colonne défile et la photo laisse la place, pour que
   « Se déconnecter » reste atteignable. */
@media (min-width: 901px) {
  .cote { overflow-y: auto; overscroll-behavior: contain; }
  .cote-bas { position: sticky; bottom: -22px; background: var(--cote); padding-bottom: 22px; margin-bottom: -22px; box-shadow: 0 -10px 14px -6px var(--cote); }
}
@media (min-width: 901px) and (max-height: 920px) {
  .photo-cote { display: none; }
  .cote { gap: 14px; padding-top: 16px; }
  #nav a { padding: 7px 12px; }
  #nav .groupe { margin-top: 10px; }
}
.lien-discret { background: none; border: 0; color: var(--cote-discret); cursor: pointer; padding: 6px 0; display: flex; gap: 8px; align-items: center; }
.lien-discret:hover { color: var(--cote-encre); }
.lien-discret svg { width: 18px; height: 18px; flex: none; }

.principal { min-width: 0; }
.bandeau-demo { background: color-mix(in srgb, var(--sauge) 22%, var(--surface)); color: var(--encre); border-bottom: 1px solid var(--trait); padding: 8px 28px; font-size: 13px; }
.haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 24px 28px 8px; flex-wrap: wrap; }
.haut h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.haut .surtitre { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--olive); font-weight: 700; margin-bottom: 2px; }
.haut p { margin: 2px 0 0; }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.segments { display: inline-flex; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 3px; }
.segments button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--encre-2); font-weight: 500; white-space: nowrap; }
.segments button:hover { background: var(--surface-2); }
.segments button[aria-pressed="true"] { background: var(--vert); color: var(--creme); }
:root[data-theme="dark"] .segments button[aria-pressed="true"] { background: var(--creme); color: var(--vert); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .segments button[aria-pressed="true"] { background: var(--creme); color: var(--vert); } }
main { padding: 16px 28px 48px; outline: none; }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.carte { background: var(--surface); border: 1px solid var(--anneau); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); min-width: 0; }
.carte h2 { font-size: 15px; margin: 0 0 2px; font-weight: 700; letter-spacing: 0.005em; }
.carte .entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.carte .entete p { margin: 0; color: var(--discret); font-size: 12.5px; }
.graphe { position: relative; height: 280px; }
.graphe.bas { height: 220px; }

/* Héros */
.heros { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; }
.heros .principal-chiffre { background: radial-gradient(90% 80% at 100% 0%, rgba(204, 51, 102, 0.28), transparent 60%), linear-gradient(140deg, #3f0b1e 0%, #5a1232 55%, #6a163b 100%); color: var(--creme); border: 0; position: relative; overflow: hidden; padding-bottom: 104px; }
.heros .principal-chiffre::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: radial-gradient(circle at 12px 14px, var(--page) 10px, transparent 10.5px) 0 0 / 24px 12px repeat-x; }
.heros .principal-chiffre .etiquette { color: #d9c3c9; letter-spacing: 0.04em; }
.heros .principal-chiffre .valeur { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 4px; }
.heros .principal-chiffre .delta.hausse { color: #bfe3a4; }
.heros .principal-chiffre .delta .discret { color: #d9c3c9; }
.heros .principal-chiffre .delta.baisse { color: #ffb8cb; }
.heros .principal-chiffre svg.etincelle { position: absolute; right: 0; bottom: 8px; width: 100%; height: 84px; }
.heros .principal-chiffre .details { display: flex; gap: 18px; margin-top: 14px; position: relative; flex-wrap: wrap; }
.heros .principal-chiffre .details div { font-size: 12px; color: #d9c3c9; }
.heros .principal-chiffre .details strong { display: block; color: #fff6ea; font-size: 16px; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tuile .etiquette, .etiquette { font-size: 12.5px; color: var(--discret); font-weight: 500; }
.tuile .valeur { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 2px; }
.tuile { position: relative; overflow: hidden; }
.tuile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--olive); opacity: 0.55; }
.delta { font-size: 12.5px; font-weight: 600; }
.delta.hausse { color: var(--hausse); } .delta.baisse { color: var(--baisse); } .delta.neutre { color: var(--discret); }
.delta .discret { font-weight: 400; }
.jauge { height: 8px; background: var(--surface-2); border-radius: 4px; position: relative; margin-top: 10px; }
.jauge span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 70%, var(--surface)), var(--s1)); }
.jauge i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--encre); border-radius: 1px; }
.jauge.depasse span { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 60%, var(--surface)), var(--rose)); }

/* Statuts */
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); white-space: nowrap; }
.statut svg { width: 13px; height: 13px; }
.statut.bon { color: var(--bon-texte); } .statut.bon svg { color: var(--bon); }
.statut.avertissement svg { color: var(--avert); } .statut.serieux svg { color: var(--serieux); } .statut.critique svg { color: var(--critique); }
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 330px; overflow: auto; }
.alertes li a { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 6px; border-radius: 8px; text-decoration: none; }
.alertes li a:hover { background: var(--surface-2); }
.alertes svg { width: 16px; height: 16px; margin-top: 2px; }
.alertes .avertissement svg { color: var(--avert); } .alertes .serieux svg { color: var(--serieux); } .alertes .critique svg { color: var(--critique); }
.alertes small { display: block; color: var(--discret); }

/* Connexion */
body.hors-session .app { display: none; }
.connexion { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); background: var(--page); z-index: 30; }
.connexion[hidden] { display: none; }
.connexion-photo { position: relative; overflow: hidden; background: var(--vert); }
.connexion-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.connexion-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(33, 45, 28, 0.9) 0%, rgba(33, 45, 28, 0.45) 45%, rgba(63, 11, 30, 0.55) 100%); }
.connexion-marque { position: absolute; left: 48px; top: 44px; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.connexion-marque span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.connexion-panneau { display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.connexion-carte { width: min(400px, 100%); }
.connexion-carte h1 { font-size: 30px; margin: 0 0 6px; }
.connexion-carte .formulaire { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.connexion-carte input { padding: 11px 12px; font-size: 15px; width: 100%; background: var(--surface); border: 1px solid var(--axe); border-radius: 10px; }
.connexion-carte input.code { font-size: 26px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.connexion-erreur { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--critique) 12%, var(--surface)); color: var(--critique); font-weight: 600; font-size: 13.5px; }
.bouton.large { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.petit { font-size: 12.5px; }
.lien { background: none; border: 0; padding: 0; margin-top: 10px; color: var(--olive); font-weight: 600; cursor: pointer; text-decoration: underline; }
.codes-secours { columns: 2; padding-left: 22px; margin: 18px 0; font-size: 15px; line-height: 2; }
.codes-secours code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.05em; }
.moi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(230, 225, 211, 0.12); margin-bottom: 4px; }
.moi strong { display: block; color: var(--creme); font-size: 13px; }
.moi small { color: var(--cote-discret); font-size: 11.5px; }
.moi:empty { display: none; }
/* Toujours un vrai bouton « Se déconnecter », sur ordinateur comme sur cellulaire. */
.bouton-sortie { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(230, 225, 211, 0.28); background: none; color: var(--cote-encre); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bouton-sortie:hover { background: rgba(230, 225, 211, 0.1); }
.bouton-sortie svg { width: 16px; height: 16px; }
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.carte td .bouton { padding: 6px 10px; }
td.sans-coupure { white-space: nowrap; }
.case { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.case[hidden] { display: none; }
.champ[hidden] { display: none; }

/* Bandeau d'accueil avec photo du restaurant */
.bienvenue { position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 220px; background: var(--vert); color: var(--creme); margin-bottom: 16px; display: flex; align-items: center; box-shadow: var(--ombre); }
.bienvenue img { position: absolute; right: 0; top: 0; height: 100%; width: 70%; object-fit: cover; }
.bienvenue::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #212d1c 30%, rgba(33, 45, 28, 0.88) 44%, rgba(33, 45, 28, 0.25) 72%, rgba(33, 45, 28, 0.05) 100%); }
.bienvenue::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; z-index: 2; background: radial-gradient(circle at 12px 14px, var(--page) 10px, transparent 10.5px) 0 0 / 24px 12px repeat-x; }
.bienvenue .texte { position: relative; z-index: 2; padding: 26px 32px 34px; max-width: 620px; }
.bienvenue .surtitre-clair { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.bienvenue h2 { font-size: 38px; margin: 6px 0 2px; font-weight: 700; letter-spacing: -0.01em; color: #fff8ec; }
.bienvenue p { margin: 0 0 16px; color: #d6d2c2; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.pastille { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(230, 225, 211, 0.1); border: 1px solid rgba(230, 225, 211, 0.22); font-size: 13px; color: var(--creme); text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
a.pastille:hover { background: rgba(230, 225, 211, 0.2); }
.pastille strong { color: #fff8ec; }
.pastille i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--creme); flex: none; }
.pastille i.fait { background: var(--sauge); border-color: var(--sauge); }
.pastille i.actif { background: #f2c14e; border-color: #f2c14e; box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.6); animation: battement 1.8s infinite; }
.pastille i.info { background: var(--creme); }
@keyframes battement { 70% { box-shadow: 0 0 0 7px rgba(242, 193, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } }
@media (prefers-reduced-motion: reduce) { .pastille i.actif { animation: none; } }

/* Photo de plat dans la barre de côté */
.photo-cote { margin: 0 0 12px; height: 132px; border-radius: 12px; overflow: hidden; position: relative; }
.photo-cote img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.photo-cote:hover img { transform: scale(1.05); }
.photo-cote span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; font-weight: 600; color: var(--creme); background: linear-gradient(transparent, rgba(11, 15, 9, 0.85)); }
.photo-cote:empty { display: none; }

/* Analyse quotidienne */
.frais-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.frais-grille label { font-size: 11.5px; }
textarea { font: inherit; color: inherit; background: var(--saisie-fond); border: 1px solid var(--saisie-bord); border-radius: 8px; padding: 8px 10px; width: 100%; resize: vertical; }
textarea:disabled, input:disabled { opacity: 0.75; }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; font-size: 13px; }
.historique small { display: block; color: var(--discret); }
tr.cliquable { cursor: pointer; }
tr.sans-ventes td { color: var(--discret); }
.chaleur.sept { grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.segments .perso { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; }
.segments .perso input { padding: 4px 6px; font-size: 13px; }
#a-resultat tfoot td { font-size: 15px; }

/* Employés : postes et taux */
td.postes { white-space: normal; }
.poste { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sauge) 22%, var(--surface)); font-size: 12.5px; white-space: nowrap; }
.poste.ancien { background: var(--surface-2); color: var(--discret); }

.postes-edition td, .postes-edition th { padding: 4px; }
.postes-edition input[type="text"] { width: 100%; }
dialog { width: min(560px, calc(100vw - 32px)); }

/* Journée complète mise en évidence */
/* « Journée complète » : la carte la plus importante de l'analyse, aux couleurs de Koh Tao (vert forêt, chiffres en grand). */
.carte.journee { position: relative; border: 0; color: var(--creme); box-shadow: 0 18px 40px -18px rgba(33, 45, 28, 0.75);
  background: radial-gradient(90% 70% at 100% 0%, rgba(204, 51, 102, 0.22), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(119, 135, 81, 0.4), transparent 60%), linear-gradient(140deg, #212d1c 0%, #2e3d27 100%); }
.carte.journee .surtitre-clair { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.carte.journee h2 { font-size: 24px; font-weight: 800; color: #fff8ec; margin-top: 2px; }
.carte.journee .entete p, .carte.journee .champ label, .carte.journee small.discret { color: #cfd0bf; }
.carte.journee .champ label { font-size: 12.5px; font-weight: 600; }
.carte.journee input.saisie { font-weight: 800; font-size: 24px; padding: 12px 14px; background: #fffdf8; color: #212d1c; border: 2px solid var(--sauge); border-radius: 12px; font-variant-numeric: tabular-nums; }
.carte.journee input.saisie:focus { border-color: #fff8ec; box-shadow: 0 0 0 3px rgba(157, 182, 141, 0.45); outline: none; }
.carte.journee input.saisie:disabled { opacity: 0.85; }
.argent { position: relative; display: block; }
.argent input.saisie, .carte.journee .argent input.saisie { padding-right: 40px; }
.argent::after { content: "$"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 20px; color: var(--olive); pointer-events: none; }
td.fort, th.fort { font-weight: 750; }

/* Anneau des pourboires */
.anneau { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center; }
.anneau.empile { grid-template-columns: 1fr; gap: 16px; }
.anneau.empile .graphe { height: 170px; }
.colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anneau .graphe { height: 190px; }
.anneau .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.anneau .centre strong { font-size: 22px; font-weight: 700; }
.anneau .centre span { font-size: 11px; color: var(--discret); }
.anneau ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anneau li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: baseline; font-size: 13px; }
.anneau li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.anneau li small { display: block; color: var(--discret); font-size: 11.5px; }

/* Carte de chaleur */
.chaleur { display: grid; grid-template-columns: 54px repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.chaleur .cell { height: 50px; border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s; display: flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; cursor: default; }
.chaleur .cell:not(.vide):hover { transform: scale(1.06); box-shadow: 0 6px 18px -6px rgba(33, 45, 28, 0.45); z-index: 1; }
.chaleur .tete { color: var(--discret); text-align: center; align-self: end; padding-bottom: 2px; }
.chaleur .lig { color: var(--discret); align-self: center; }
.chaleur .vide { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); color: var(--discret); font-weight: 400; }
.legende-seq { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; color: var(--discret); }
.legende-seq span.rampe { display: flex; gap: 2px; }
.legende-seq span.rampe i { width: 22px; height: 8px; border-radius: 2px; }

/* Légendes */
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legende i.ligne { height: 2px; width: 16px; border-radius: 1px; }
.legende i.pointille { height: 0; width: 16px; border-top: 2px dashed var(--encre-2); border-radius: 0; background: none !important; }

/* Tableaux */
.tableau-defile { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--discret); padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
td:first-child { white-space: nowrap; }
.carte th.n { white-space: normal; line-height: 1.2; vertical-align: bottom; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
tfoot td { font-weight: 650; border-bottom: 0; border-top: 2px solid var(--axe); }
td.calc { color: var(--encre-2); }
td.neg, .neg { color: var(--baisse); font-weight: 600; }
.barre-ligne { height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 45%, var(--surface)), var(--s1)); min-width: 2px; }
.rang { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--encre-2); }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label, .champ > span { font-size: 12px; color: var(--discret); font-weight: 500; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], input[type="tel"], select, input.saisie {
  background: var(--surface); border: 1px solid var(--axe); border-radius: 8px; padding: 7px 9px; min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }
input.saisie { width: 100%; text-align: right; font-variant-numeric: tabular-nums; background: var(--saisie-fond); border-color: var(--saisie-bord); }
input.saisie:focus { background: var(--surface); }
input.saisie.petit { padding: 4px 5px; font-size: 12.5px; }
select.saisie-sel { width: 100%; }
.ligne-champs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.bouton { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--axe); background: var(--surface); border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bouton:hover { background: var(--surface-2); }
.bouton.principal { background: var(--vert); color: var(--creme); border-color: var(--vert); }
.bouton.principal:hover { opacity: 0.9; }
.bouton.or { background: var(--bordeaux-2); color: #fff6ea; border-color: var(--bordeaux-2); }
.bouton.or:hover { background: var(--bordeaux); }
.bouton svg { width: 16px; height: 16px; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.icone-btn { border: 0; background: none; cursor: pointer; color: var(--discret); padding: 4px; border-radius: 6px; }
.icone-btn:hover { background: var(--surface-2); color: var(--encre); }
.onglets { display: inline-flex; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 16px; }
.onglets button { border: 0; background: none; padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets button[aria-selected="true"] { color: var(--encre); border-color: var(--olive); }

/* Caisse */
#c-table th, #c-table td { padding: 7px 5px; }
#c-table input.saisie { padding: 5px 6px; }
#c-table th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.livraison { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 14px; }
.livraison strong { grid-column: 1 / -1; font-size: 13px; }
.resume .statut { white-space: normal; }

/* Résumés de caisse */
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.resume div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.resume strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.verifs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.verifs li { display: flex; align-items: center; gap: 10px; }
.verifs svg { width: 18px; height: 18px; flex: none; }
.verifs .ok svg { color: var(--bon); } .verifs .pasok svg { color: var(--critique); }

/* Heures */
.grille-heures th, .grille-heures td { padding: 4px 3px; text-align: center; }
.grille-heures td:first-child, .grille-heures th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-left: 0; min-width: 150px; }
.grille-heures .duo { display: flex; flex-direction: column; gap: 2px; width: 50px; margin: auto; }
.grille-heures th.we, .grille-heures td.we { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.grille-heures th small { display: block; font-weight: 400; }

/* Intégrations et caméras */
.integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.integration h3 { margin: 0; font-size: 15px; }
.integration p { margin: 8px 0 0; color: var(--encre-2); font-size: 13px; }
.integration .type { font-size: 12px; color: var(--discret); }
.bande-integrations { display: flex; gap: 8px; flex-wrap: wrap; }
.puce { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--axe); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--encre-2); }
.puce i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--discret); box-sizing: border-box; }
.puce.connecte { border-style: solid; color: var(--encre); }
.puce.connecte i { background: var(--bon); border-color: var(--bon); }
.puce.perdu { border-style: solid; }
.puce.perdu i { background: var(--critique); border-color: var(--critique); }
.puce.verifier i { background: var(--avert); border-color: var(--avert); }
.cameras { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ecran { aspect-ratio: 16 / 9; border-radius: 10px; background: repeating-linear-gradient(135deg, #191816 0 10px, #1e1d1a 10px 20px); display: flex; align-items: center; justify-content: center; color: #8f8d86; flex-direction: column; gap: 6px; font-size: 13px; }
.ecran svg { width: 28px; height: 28px; }
.camera .ecran { position: relative; overflow: hidden; background: #111; }
.ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecran video:fullscreen { object-fit: contain; }
.etat-flux { position: relative; background: rgba(0, 0, 0, 0.55); color: #f2efe8; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.ecran .plein-ecran { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.5); color: #f2efe8; }
.ecran .plein-ecran:hover { background: rgba(0, 0, 0, 0.75); color: #fff; }
.ecran .plein-ecran svg { width: 18px; height: 18px; }
.ligne-acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ligne-acces input { width: 100%; }
.canaux-test { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#k-resultat .statut { white-space: normal; border-radius: 10px; }
#k-resultat .statut svg { flex: none; }

/* Bulle de confirmation */
.bulle { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--vert); color: var(--creme); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: 0.2s; pointer-events: none; font-weight: 600; z-index: 20; max-width: calc(100vw - 32px); }
.bulle.vue { opacity: 1; transform: translate(-50%, 0); }
.bulle.erreur { background: var(--critique); color: #fff; }

dialog { border: 1px solid var(--anneau); border-radius: var(--rayon); background: var(--surface); color: var(--encre); padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
dialog::backdrop { background: rgba(10, 8, 5, 0.45); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0 0 4px; font-size: 17px; }

.vide-etat { text-align: center; padding: 40px 10px; color: var(--discret); }
.squelette { height: 120px; border-radius: var(--rayon); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: lueur 1.2s infinite; }
@keyframes lueur { to { background-position: -200% 0; } }

@media (max-width: 1200px) {
  .heros { grid-template-columns: 1fr; }
  .c3 { grid-column: span 6; } .c4, .c5, .c7, .c8 { grid-column: span 12; } .c6 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; grid-template-rows: 190px 1fr; overflow: auto; }
  .connexion-marque { left: 20px; top: 24px; }
  .connexion-marque img { width: 140px; height: auto; }
  .bienvenue { min-height: 260px; align-items: flex-end; }
  .bienvenue img { width: 100%; }
  .bienvenue::before { background: linear-gradient(0deg, #212d1c 30%, rgba(33, 45, 28, 0.75) 60%, rgba(33, 45, 28, 0.2) 100%); }
  .bienvenue .texte { padding: 22px 20px 30px; }
  .bienvenue h2 { font-size: 30px; }
  .marque { flex-direction: row; align-items: center; border: 0; padding: 0 4px; }
  .marque img { width: 96px; }
  .anneau { grid-template-columns: 1fr; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .cote { position: static; height: auto; padding: 12px 16px; gap: 10px; min-width: 0; }
  #nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  #nav .groupe { display: none; }
  #nav a { white-space: nowrap; padding: 7px 10px; }
  #nav a.actif::before { display: none; }
  .cote-bas { margin-top: 0; padding: 0; }
  .cote-bas .photo-cote, .cote-bas #theme, .cote-bas #cloche { display: none; }
  .moi { padding: 8px 0 0; margin-bottom: 0; }
  .haut, main { padding-left: 16px; padding-right: 16px; }
  .bandeau-demo { padding: 8px 16px; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c3 { grid-column: span 12; }
  .filtres, .segments { width: 100%; overflow-x: auto; }
  .heros .principal-chiffre .valeur { font-size: 36px; }
}
@media print {
  .cote, .haut .filtres, .bandeau-demo, .pas-imprime { display: none !important; }
  .app { display: block; }
  .carte { box-shadow: none; border: 0; }
}
.rang.r1 { background: var(--s2); color: #fffdf8; }
.rang.r2 { background: color-mix(in srgb, var(--olive) 55%, var(--surface)); color: var(--encre); }
.rang.r3 { background: color-mix(in srgb, var(--bordeaux-2) 30%, var(--surface)); color: var(--encre); }

/* ---------- Horaires (remplacent Agendrix) ---------- */
textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--axe); border-radius: 8px; padding: 7px 9px; width: 100%; resize: vertical; }
#nav a { position: relative; }
.compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.barre-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.barre-h .statut { margin-top: 3px; }
.titre-impression { display: none; }
.resume small { display: block; font-size: 11.5px; margin-top: 2px; }
.resume a { color: inherit; }
.grille-horaire { border-collapse: separate; border-spacing: 0; }
.grille-horaire th, .grille-horaire td { padding: 6px 5px; vertical-align: top; }
.grille-horaire thead th { text-align: center; }
.grille-horaire thead th small { display: block; font-weight: 400; }
.grille-horaire th.auj { color: var(--encre); }
.grille-horaire th.auj small { color: var(--rose); font-weight: 700; }
.grille-horaire td:first-child, .grille-horaire th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px; max-width: 190px; white-space: normal; text-align: left; }
.grille-horaire tbody tr:hover td { background: transparent; }
.grille-horaire .nom-h strong { display: block; font-size: 13.5px; }
.grille-horaire .nom-h small, .grille-horaire .total-h small { display: block; color: var(--discret); font-size: 11.5px; line-height: 1.3; }
.grille-horaire .total-h small.neg { color: var(--baisse); font-weight: 600; }
.grille-horaire .groupe-h th { position: static; background: none; text-align: left; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); padding: 14px 0 4px; border-bottom: 1px solid var(--trait); }
.jour-h { min-width: 112px; position: relative; padding-bottom: 26px !important; }
.jour-h.we { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.jour-h.auj { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rose) 45%, transparent); }
.jour-h.en-conge { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bordeaux-2) 10%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.jour-h.indispo { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--surface) 5px 10px); }
.quart-h { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 1px solid color-mix(in srgb, var(--olive) 55%, transparent); background: color-mix(in srgb, var(--sauge) 26%, var(--surface)); border-radius: 8px; padding: 5px 7px; margin-bottom: 4px; cursor: pointer; font-size: 12.5px; position: relative; color: var(--encre); }
span.quart-h { cursor: default; }
.quart-h strong { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quart-h span { font-size: 11.5px; color: var(--encre-2); }
.quart-h.nouveau { background: var(--surface); border-style: dashed; border-color: var(--olive); }
.quart-h.modifié { background: color-mix(in srgb, var(--avert) 10%, var(--surface)); border-style: dashed; border-color: var(--avert); }
.quart-h:hover { box-shadow: 0 4px 14px -6px rgba(33, 45, 28, 0.45); }
.quart-h i { position: absolute; top: 4px; width: 14px; height: 14px; }
.quart-h i svg { width: 14px; height: 14px; }
.quart-h .i-alerte { right: 5px; color: var(--critique); }
.ligne-combler .quart-h { background: color-mix(in srgb, var(--s2) 12%, var(--surface)); border-color: color-mix(in srgb, var(--s2) 60%, transparent); }
.marque-h { display: block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 6px; margin-bottom: 4px; }
.marque-h.conge { background: color-mix(in srgb, var(--bordeaux-2) 16%, var(--surface)); color: var(--bordeaux-2); }
.marque-h.conge-demande { background: var(--or-fond); color: var(--or); }
.marque-h.indispo { background: var(--surface-2); color: var(--discret); }
.marque-h.dispo { background: none; color: var(--discret); font-weight: 500; padding: 0 2px; }
.travaille { display: block; color: var(--discret); font-size: 11px; }
.ajout-h { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 20px; border: 1px dashed var(--axe); border-radius: 6px; background: none; color: var(--discret); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
.ajout-h svg { width: 14px; height: 14px; }
.jour-h:hover .ajout-h, .ajout-h:focus-visible { opacity: 1; }
@media (hover: none) { .ajout-h { opacity: 0.7; } }
.ajout-h:hover { border-color: var(--olive); color: var(--olive); }
.cle-h { width: 14px !important; height: 10px !important; border-radius: 3px; border: 1px solid; }
.cle-h.publie { background: color-mix(in srgb, var(--sauge) 26%, var(--surface)); border-color: var(--olive); }
.cle-h.nouveau { background: var(--surface); border: 1px dashed var(--olive); }
.cle-h.modifie { background: color-mix(in srgb, var(--avert) 10%, var(--surface)); border: 1px dashed var(--avert); }
.cle-h.conge { background: color-mix(in srgb, var(--bordeaux-2) 18%, var(--surface)); border-color: transparent; }
.cle-h.indispo { background: repeating-linear-gradient(135deg, var(--axe) 0 2px, var(--surface) 2px 4px); border-color: var(--axe); }
.legende svg { width: 14px; height: 14px; }
.modeles-h, .jours-repeter { display: flex; flex-wrap: wrap; gap: 6px; }
.modeles-h .poste { border: 1px solid transparent; cursor: pointer; }
.modeles-h .poste:hover { border-color: var(--olive); }
.jours-repeter .case { padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px; align-items: center; }
.liste-demandes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste-demandes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.liste-demandes li:last-child { border-bottom: 0; }
.liste-demandes small { display: block; color: var(--discret); margin-top: 2px; }
.liste-demandes small.neg { color: var(--baisse); }
.liste-demandes .statut { margin-top: 6px; }
.liste-demandes li.bloc { flex-direction: column; align-items: stretch; }
.carte .entete .statut { white-space: normal; }
.table-dispos.compare td { vertical-align: top; }
.table-dispos.compare td.change { background: color-mix(in srgb, var(--avert) 12%, var(--surface)); border-radius: 6px; }
.table-dispos .avant { display: block; font-size: 11px; margin-top: 2px; }
.table-dispos td { white-space: normal; min-width: 84px; }
.dispo-oui { color: var(--bon-texte); font-weight: 600; }
.dispo-non { color: var(--baisse); font-weight: 600; }
.dispo-partiel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note-dispo { display: block; font-size: 11px; }
.dispos-edition { display: flex; flex-direction: column; gap: 8px; }
.dispo-jour { display: grid; grid-template-columns: 100px minmax(180px, 1fr) auto minmax(140px, 1fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.dispo-jour .heures-dispo { display: inline-flex; gap: 6px; align-items: center; }
.dispo-jour .heures-dispo[hidden] { display: none; }
dialog.large { width: min(760px, calc(100vw - 32px)); }
.acces-h { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.acces-h .lien { margin-top: 0; font-size: 12.5px; }
#acces-resultat code { font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: 0.05em; }
#acces-resultat textarea { margin-top: 6px; font-size: 13px; }
/* Espace de l'employé (pensé pour le cellulaire) */
@media (max-width: 760px) {
  .semaine-large { display: none; }
    }
/* Semaine de l'employé aux couleurs de Koh Tao (kohtao.ca) : bandeau vert forêt, disponibilités en pastilles sauge,
   « pas dispo » en bordeaux, quarts en cartes bordeaux. Sur cellulaire, une carte par jour. */
.planning-kt { background: var(--surface); border: 1px solid var(--anneau); border-radius: 22px; overflow: hidden; box-shadow: var(--ombre); }
.planning-tete { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 26px 26px 34px; color: var(--creme);
  background: radial-gradient(80% 140% at 100% 0%, rgba(204, 51, 102, 0.22), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(119, 135, 81, 0.35), transparent 60%), linear-gradient(135deg, #212d1c 0%, #2e3d27 100%); }
.planning-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: radial-gradient(circle at 12px 14px, var(--surface) 10px, transparent 10.5px) 0 0 / 24px 12px repeat-x; }
.planning-titre { text-align: center; }
.planning-titre .surtitre-clair { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.planning-titre h2 { margin: 6px 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: #fff8ec; }
.planning-titre p { margin: 0; color: #cfd0bf; font-size: 13.5px; }
.planning-titre p strong { color: #fff8ec; }
.rond-kt { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--creme); border: 1px solid rgba(230, 225, 211, 0.3); background: rgba(230, 225, 211, 0.06); transition: background 0.15s; }
.rond-kt:hover { background: rgba(230, 225, 211, 0.16); }
.rond-kt svg { width: 20px; height: 20px; }
.planning-chiffres { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.planning-chiffres div { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(230, 225, 211, 0.08); border: 1px solid rgba(230, 225, 211, 0.18); }
.planning-chiffres span { font-size: 12px; color: #cfd0bf; }
.planning-chiffres strong { font-size: 16px; color: #fff8ec; font-variant-numeric: tabular-nums; }
.planning-chiffres div.attente { border-style: dashed; border-color: rgba(242, 193, 78, 0.6); }
.planning-grille { display: grid; grid-template-columns: 178px repeat(7, minmax(0, 1fr)); padding: 10px 18px 6px; }
.jour-kt { text-align: center; padding: 10px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jour-kt span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--discret); font-weight: 600; }
.jour-kt strong { font-size: 24px; font-weight: 700; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.jour-kt.auj strong { background: var(--rose); color: #fff; box-shadow: 0 6px 16px -6px rgba(204, 51, 102, 0.7); }
.jour-kt em, .date-kt em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: 0.08em; }
.jour-kt.passe, .case-kt.passe { opacity: 0.5; }
.ligne-kt { display: flex; gap: 10px; align-items: flex-start; padding: 14px 10px 14px 4px; border-top: 1px solid var(--trait); }
.ligne-kt svg { width: 20px; height: 20px; color: var(--olive); flex: none; margin-top: 1px; }
.ligne-kt strong { display: block; font-size: 13.5px; }
.ligne-kt small { display: block; color: var(--discret); font-size: 11.5px; }
.total-kt { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--vert); color: var(--creme); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.total-kt.zero { background: var(--surface-2); color: var(--discret); }
.case-kt { border-top: 1px solid var(--trait); padding: 12px 5px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.case-kt.we, .jour-kt.we { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.case-kt.auj, .jour-kt.auj { background: color-mix(in srgb, var(--rose) 6%, var(--surface)); }
.ligne-kt.attente, .case-kt.attente { background: color-mix(in srgb, #f2c14e 10%, var(--surface)); }
.pastille-kt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastille-kt svg { width: 13px; height: 13px; }
.pastille-kt.oui { background: color-mix(in srgb, var(--sauge) 30%, var(--surface)); color: var(--vert); border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent); }
.pastille-kt.non { background: color-mix(in srgb, var(--bordeaux-2) 12%, var(--surface)); color: var(--bordeaux-2); border: 1px solid color-mix(in srgb, var(--bordeaux-2) 30%, transparent); }
.pastille-kt.envoye { border-style: dashed; }
.pastille-kt.fait { background: var(--surface-2); color: var(--encre); }
.note-kt { font-size: 11px; color: var(--discret); font-style: italic; line-height: 1.25; }
.vide-kt { color: var(--axe); font-size: 22px; line-height: 1; }
.quart-kt { position: relative; width: 100%; padding: 9px 8px 8px; border-radius: 12px; color: #fff6ea; text-align: center;
  background: radial-gradient(90% 80% at 100% 0%, rgba(204, 51, 102, 0.35), transparent 60%), linear-gradient(140deg, #3f0b1e 0%, #6a163b 100%); box-shadow: 0 8px 18px -10px rgba(63, 11, 30, 0.8); }
.quart-kt strong { display: block; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quart-kt small { display: block; font-size: 11.5px; color: #e8cdd5; }
.quart-kt em { display: block; font-size: 11px; color: #f2dfe5; margin-top: 3px; }
.quart-kt .badge-nouveau.retire { background: var(--discret); }
.badge-nouveau { position: absolute; top: -8px; right: -4px; }
.quart-kt.retire { opacity: 0.45; text-decoration: line-through; }
.conge-kt { width: 100%; padding: 8px; border-radius: 12px; border: 1.5px solid var(--bordeaux-2); color: var(--bordeaux-2); font-weight: 700; font-size: 12.5px; background: color-mix(in srgb, var(--bordeaux-2) 6%, var(--surface)); }
.conge-kt small { display: block; font-weight: 500; font-size: 11px; }
.planning-cartes { display: none; }
.planning-pied { padding: 12px 22px 18px; color: var(--discret); font-size: 12.5px; border-top: 1px solid var(--trait); }
@media (max-width: 860px) {
  .planning-tete { padding: 20px 16px 30px; gap: 10px; }
  .planning-titre h2 { font-size: 19px; }
  .rond-kt { width: 36px; height: 36px; }
  .planning-grille { display: none; }
  .planning-cartes { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
  .carte-jour-kt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--trait); border-radius: 16px; }
  .carte-jour-kt.we { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
  .carte-jour-kt.auj { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
  .carte-jour-kt.passe { opacity: 0.55; }
  .date-kt { display: flex; flex-direction: column; align-items: center; }
  .date-kt span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--discret); font-weight: 600; }
  .date-kt strong { font-size: 24px; }
  .carte-jour-kt.auj .date-kt strong { color: var(--rose); }
  .carte-jour-kt dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .carte-jour-kt dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; }
  .carte-jour-kt dl > div.attente { background: color-mix(in srgb, #f2c14e 10%, var(--surface)); border-radius: 8px; padding: 4px; }
  .carte-jour-kt dt { font-size: 11.5px; color: var(--discret); }
  .carte-jour-kt dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .carte-jour-kt .quart-kt { text-align: left; }
}
.badge-nouveau { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--rose); color: #fff; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
@media (max-width: 900px) {
  .dispo-jour { grid-template-columns: 1fr 1fr; }
  .dispo-jour strong { grid-column: 1 / -1; }
  .dispo-jour input[data-d="note"] { grid-column: 1 / -1; }
  .liste-demandes li { align-items: flex-start; }
    #nav .compteur { margin-left: 6px; }
}
@media print {
  .titre-impression { display: block; font-size: 18px; margin: 0 0 10px; }
  .haut { display: none; }
  .grille-horaire td:first-child, .grille-horaire th:first-child { position: static; }
  .quart-h { border: 1px solid #555 !important; background: none !important; break-inside: avoid; }
  .quart-h i, .travaille { display: none; }
  .jour-h { padding-bottom: 6px !important; }
  .tableau-defile { overflow: visible; margin: 0; padding: 0; }
  @page { size: landscape; margin: 10mm; }
}
/* Semaine de l'employé en mode sombre : pastilles et congés lisibles sur fond foncé. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .pastille-kt.oui { color: #d6e6b8; }
  :root:where(:not([data-theme="light"])) .pastille-kt.non, :root:where(:not([data-theme="light"])) .conge-kt { color: #f4a3b9; border-color: rgba(244, 163, 185, 0.45); }
}
:root[data-theme="dark"] .pastille-kt.oui { color: #d6e6b8; }
:root[data-theme="dark"] .pastille-kt.non, :root[data-theme="dark"] .conge-kt { color: #f4a3b9; border-color: rgba(244, 163, 185, 0.45); }
/* Colonnes étroites : une pastille ou une carte ne déborde jamais sur la colonne voisine ; « 15 h 30 – 20 h 30 » passe
   sur deux lignes plutôt que de chevaucher. */
.planning-grille { column-gap: 6px; }
.case-kt { overflow: hidden; }
.pastille-kt { max-width: 100%; white-space: normal; justify-content: center; text-align: center; line-height: 1.25; border-radius: 14px; }
.pastille-kt svg { flex: none; }
.quart-kt strong { white-space: normal; line-height: 1.2; }
@media (max-width: 1380px) {
  .planning-grille { grid-template-columns: 150px repeat(7, minmax(0, 1fr)); padding-left: 12px; padding-right: 12px; }
  .planning-grille .pastille-kt { padding: 5px 7px; font-size: 12px; }
  .planning-grille .pastille-kt svg { display: none; }
}
/* Disponibilités de l'équipe (gestionnaire), même présentation que la semaine de l'employé. */
.planning-tete.sans-fleches { grid-template-columns: minmax(0, 1fr); }
.dispos-kt { border-collapse: separate; border-spacing: 0; }
.dispos-kt th, .dispos-kt td { padding: 12px 6px; border-bottom: 1px solid var(--trait); vertical-align: middle; text-align: center; }
.dispos-kt thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--discret); font-weight: 600; padding-top: 16px; }
.dispos-kt thead th:first-child, .dispos-kt tbody th { text-align: left; padding-left: 18px; }
.dispos-kt tbody th { white-space: normal; min-width: 170px; }
.dispos-kt tbody th strong { display: block; font-size: 13.5px; }
.dispos-kt tbody th small { display: block; color: var(--discret); font-weight: 400; font-size: 11.5px; }
.dispos-kt td { min-width: 96px; }
.dispos-kt td:last-child { padding-right: 18px; }
.dispos-kt .we { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.dispos-kt tbody tr:hover td, .dispos-kt tbody tr:hover th { background: color-mix(in srgb, var(--sauge) 8%, var(--surface)); }
.dispos-kt td > * { margin-left: auto; margin-right: auto; }
.dispos-kt .note-kt { display: block; margin-top: 4px; }
.a-confirmer-kt { display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-decoration: none; color: var(--or); background: var(--or-fond); border: 1px dashed color-mix(in srgb, #f2c14e 70%, transparent); }
.segments button.fort { font-weight: 700; }
.case-pourcent { margin-top: 6px; font-weight: 600; color: var(--encre); }
.case-pourcent input { width: 16px; height: 16px; accent-color: var(--vert); }
/* Caisse : ce que le serveur doit (bordeaux) ou ce qu'on lui verse avec la paie (vert). */
.solde-caisse { font-weight: 700; white-space: nowrap; }
td .doit, td .verser { display: inline-block; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
td .doit { background: color-mix(in srgb, var(--bordeaux-2) 12%, var(--surface)); color: var(--bordeaux-2); }
td .verser { background: color-mix(in srgb, var(--sauge) 30%, var(--surface)); color: var(--vert); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) td .doit { color: #f4a3b9; }
  :root:where(:not([data-theme="light"])) td .verser { color: #d6e6b8; }
}
:root[data-theme="dark"] td .doit { color: #f4a3b9; }
:root[data-theme="dark"] td .verser { color: #d6e6b8; }


/* ==================== Embellissement du 3 nov. 2026 : mêmes couleurs Koh Tao, plus de relief et de caractère ==================== */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/dm-serif-display-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/dm-serif-display-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(polices/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(polices/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Barre de côté : dégradé profond, icônes dans des pastilles, page active en sauge, avatar aux initiales. */
.cote { background: radial-gradient(120% 60% at 0% 100%, rgba(119, 135, 81, 0.22), transparent 60%), linear-gradient(180deg, #273523 0%, #212d1c 45%, #182114 100%); border-right: 1px solid rgba(230, 225, 211, 0.07); }
.marque { gap: 12px; }
#nav a { gap: 11px; padding: 6px 10px 6px 7px; border-radius: 12px; transition: background 0.15s, color 0.15s; }
#nav a svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: rgba(230, 225, 211, 0.06); transition: background 0.15s, color 0.15s; }
#nav a:hover svg { background: rgba(230, 225, 211, 0.13); }
#nav a.actif { background: rgba(230, 225, 211, 0.09); color: #fff8ec; }
#nav a.actif svg { background: var(--sauge); color: var(--vert); }
#nav a.actif::before { left: -14px; width: 4px; }
#nav .groupe { margin: 16px 10px 6px; padding-top: 14px; border-top: 1px solid rgba(230, 225, 211, 0.08); color: #8b9280; }
#nav .groupe:first-child { border-top: 0; padding-top: 0; margin-top: 2px; }
.moi { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px 4px 10px; }
.moi .avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; background: var(--sauge); color: var(--vert); box-shadow: 0 0 0 3px rgba(157, 182, 141, 0.18); }
.moi .bouton-sortie { grid-column: 1 / -1; justify-content: center; width: 100%; padding: 8px 10px; border-radius: 10px; }
.photo-cote { height: 124px; border-radius: 14px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.8); }

/* En-tête de page : grand titre en serif, filtres en pilules. */
.haut { padding: 30px 32px 10px; }
.haut h1 { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 36px; letter-spacing: -0.005em; line-height: 1.08; }
.haut .surtitre { margin-bottom: 6px; }
.haut p { margin-top: 6px; }
main { padding: 18px 32px 56px; }
.bandeau-demo { padding-left: 32px; padding-right: 32px; }
.segments { border-radius: 12px; padding: 4px; box-shadow: var(--ombre); border-color: var(--trait); }
.segments button { border-radius: 9px; padding: 7px 13px; transition: background 0.15s, color 0.15s; }
.segments button[aria-pressed="true"] { background: linear-gradient(180deg, #2e3d27, #212d1c); box-shadow: 0 4px 10px -6px rgba(33, 45, 28, 0.8); }

/* Cartes : coin plus rond, filet sous l'en-tête, chiffres des tuiles en serif, halo sauge. */
.carte { padding: 20px 22px; border-color: color-mix(in srgb, var(--trait) 85%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--ombre); }
.carte h2 { font-size: 16px; }
.carte .entete { padding-bottom: 12px; border-bottom: 1px solid var(--trait); margin-bottom: 16px; }
.carte.journee .entete { border-color: rgba(230, 225, 211, 0.16); }
.carte.journee h2 { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 28px; }
.tuile::before { width: 4px; opacity: 0.7; border-radius: 0 3px 3px 0; top: 14px; bottom: 14px; }
.tuile::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sauge) 32%, transparent), transparent 70%); pointer-events: none; }
.tuile .valeur { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 32px; letter-spacing: 0; }
.heros .principal-chiffre .valeur { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 54px; letter-spacing: 0; }
.heros .principal-chiffre { box-shadow: 0 24px 50px -24px rgba(63, 11, 30, 0.75); }
.bienvenue { box-shadow: 0 24px 50px -24px rgba(33, 45, 28, 0.8); }
.bienvenue h2 { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 46px; letter-spacing: 0; }
.resume div { border: 1px solid var(--trait); border-radius: 12px; }
.resume strong { font-size: 19px; }
.anneau .centre strong { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 24px; }
.statut { padding: 3px 10px; }
.poste { border: 1px solid color-mix(in srgb, var(--olive) 22%, transparent); }
.poste.ancien { border-color: transparent; }
.vide-etat { border: 1px dashed var(--axe); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 45%, transparent); padding: 36px 12px; }
.onglets button { border-radius: 8px 8px 0 0; }

/* Tableaux : en-tête en bandeau arrondi, survol sauge, total en vert pâle. */
thead th { background: var(--surface-2); color: var(--encre-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; padding: 10px; border-bottom: 0; }
thead th:first-child { border-radius: 10px 0 0 10px; }
thead th:last-child { border-radius: 0 10px 10px 0; }
td { padding: 11px 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--sauge) 12%, transparent); }
tfoot td { background: color-mix(in srgb, var(--sauge) 16%, var(--surface)); border-top: 0; font-weight: 700; padding: 11px 10px; }
tfoot td:first-child { border-radius: 10px 0 0 10px; }
tfoot td:last-child { border-radius: 0 10px 10px 0; }
.grille-heures th, .grille-heures td, #c-table th, #c-table td, .postes-edition th, .postes-edition td { border-radius: 0; }
.grille-horaire thead th { border-radius: 0; background: var(--surface-2); }
.grille-horaire .groupe-h th { border-radius: 0; }

/* Boutons et champs : relief léger, enfoncement au clic, anneau de focus. */
.bouton { border-radius: 11px; padding: 9px 15px; box-shadow: 0 1px 2px rgba(33, 45, 28, 0.06); transition: transform 0.12s, box-shadow 0.15s, background 0.15s, opacity 0.15s; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(33, 45, 28, 0.5); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton.principal { background: linear-gradient(180deg, #2f3f28, #212d1c); border-color: #1a2417; box-shadow: 0 8px 18px -10px rgba(33, 45, 28, 0.9); }
.bouton.principal:hover { opacity: 1; background: linear-gradient(180deg, #37492f, #26331f); }
.bouton.or { background: linear-gradient(180deg, #7a1b45, #5a1232); border-color: #3f0b1e; box-shadow: 0 8px 18px -10px rgba(63, 11, 30, 0.9); }
.bouton.or:hover { background: linear-gradient(180deg, #872050, #641539); }
.bouton:disabled:hover { transform: none; box-shadow: none; }
.carte td .bouton { padding: 6px 11px; border-radius: 9px; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], input[type="tel"], select, input.saisie, textarea { border-radius: 10px; padding: 8px 11px; transition: border-color 0.15s, box-shadow 0.15s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px var(--anneau-focus); }
input.saisie:focus { border-color: var(--olive); box-shadow: 0 0 0 3px var(--anneau-focus); outline: none; }
button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.champ label, .champ > span { color: var(--encre-2); font-weight: 600; }
dialog { border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); border-color: var(--trait); }
dialog::backdrop { background: rgba(14, 18, 10, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog h2 { font-size: 21px; font-family: var(--police-titre); font-weight: var(--graisse-titre); }
.bulle { border-radius: 12px; padding: 11px 18px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4); }
.tableau-defile, .cote, .alertes, .historique { scrollbar-width: thin; scrollbar-color: var(--axe) transparent; }

/* Page de connexion : la carte se détache, titre en serif. */
.connexion-panneau { background: var(--fond-page); }
.connexion-carte { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: 24px; padding: 34px 32px; box-shadow: var(--ombre); }
.connexion-carte h1 { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 34px; }
.connexion-carte input { border-radius: 12px; }

/* Chaque page apparaît en glissant doucement. */
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main > * { animation: apparait 0.3s ease-out both; }
@media (prefers-reduced-motion: reduce) { main > *, .bouton { animation: none; transition: none; } }

/* Congé demandé par l'employé, pas encore décidé : pointillé doré. */
.conge-kt.demande { border-style: dashed; color: var(--or); border-color: #e0a100; background: var(--or-fond); }

@media (max-width: 900px) {
  .moi { grid-template-columns: auto 1fr auto; padding: 8px 0 0; gap: 10px; }
  .moi .bouton-sortie { grid-column: auto; width: auto; }
  .moi .avatar { width: 32px; height: 32px; font-size: 12px; }
  .haut { padding-top: 22px; }
  .haut h1 { font-size: 30px; }
  .haut, main, .bandeau-demo { padding-left: 16px; padding-right: 16px; }
  #nav a svg { width: 28px; height: 28px; padding: 6px; }
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .carte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--ombre); }
  :root:where(:not([data-theme="light"])) .bouton.principal { background: linear-gradient(180deg, #b3cba4, #9db68d); color: #1c2418; border-color: #9db68d; box-shadow: 0 8px 18px -10px rgba(157, 182, 141, 0.7); }
  :root:where(:not([data-theme="light"])) .bouton.principal:hover { background: linear-gradient(180deg, #c3d8b5, #a9c39a); }
}
:root[data-theme="dark"] .carte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--ombre); }
:root[data-theme="dark"] .bouton.principal { background: linear-gradient(180deg, #b3cba4, #9db68d); color: #1c2418; border-color: #9db68d; box-shadow: 0 8px 18px -10px rgba(157, 182, 141, 0.7); }
:root[data-theme="dark"] .bouton.principal:hover { background: linear-gradient(180deg, #c3d8b5, #a9c39a); }

/* ==================== Espace de l'employé : couleurs proches d'Agendrix (sarcelle, corail, pêche) ====================
   Imad, 3 nov. 2026 : « que les employés se sentent toujours dans Agendrix ». Le logo et le nom restent ceux de Koh Tao ;
   seules les couleurs et la police (Nunito, servie par le logiciel) changent, et seulement pour un compte Employé. */
/* Le menu de l'employé : sarcelle lui aussi (un gestionnaire garde son menu Koh Tao). */
body.espace-employe { font-family: Nunito, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; --cote: #0f6973; --cote-encre: #ffffff; --cote-discret: #bddfe2; --vert: #0f6973; --sauge: #9fd0d4; --creme: #ffffff; }
.theme-agx {
  font-family: Nunito, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --police-titre: Nunito, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; --graisse-titre: 800;
  --vert: #0f6973; --vert-2: #2a8089; --bordeaux: #c4563d; --bordeaux-2: #e2745b; --creme: #ffffff; --olive: #0f6973; --sauge: #9fd0d4; --rose: #e8735a;
  --peche: #ffb766; --corail: #f5a08c;
  --page: #eef5f5; --surface: #ffffff; --surface-2: #e6f1f2; --encre: #1b3537; --encre-2: #3d5c5f; --discret: #6b898c; --trait: #d8e8e9; --axe: #b9d2d4; --anneau: rgba(15, 105, 115, 0.12);
  --or: #a86a12; --or-fond: #fff1dc; --saisie-fond: #f3f9f9; --saisie-bord: #b9d2d4;
  --cote: #0f6973; --cote-encre: #ffffff; --cote-discret: #bddfe2;
  --bon: #1f9d6a; --bon-texte: #177a52; --avert: #f0a630; --serieux: #f58a63; --critique: #d64b4b; --hausse: #177a52; --baisse: #c43d3d;
  --ombre: 0 1px 1px rgba(15, 105, 115, 0.04), 0 2px 6px -1px rgba(15, 105, 115, 0.06), 0 20px 40px -20px rgba(15, 105, 115, 0.28);
  --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(128, 174, 177, 0.3), transparent 60%), radial-gradient(45% 35% at 0% 100%, rgba(255, 183, 102, 0.16), transparent 60%), var(--page);
  --anneau-focus: rgba(15, 105, 115, 0.22);
}
body.espace-employe .cote { background: radial-gradient(120% 60% at 0% 100%, rgba(255, 183, 102, 0.18), transparent 60%), linear-gradient(180deg, #13767f 0%, #0f6973 45%, #0a4f57 100%); border-right-color: rgba(255, 255, 255, 0.08); }
body.espace-employe .marque { border-bottom-color: rgba(255, 255, 255, 0.16); }
body.espace-employe .marque .lieu { color: #bddfe2; }
body.espace-employe #nav a { color: #cfe6e8; }
body.espace-employe #nav a svg { background: rgba(255, 255, 255, 0.08); }
body.espace-employe #nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.espace-employe #nav a.actif { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.espace-employe #nav a.actif svg { background: var(--peche); color: #0f6973; }
body.espace-employe #nav a.actif::before { background: var(--peche); }
body.espace-employe .moi { border-top-color: rgba(255, 255, 255, 0.16); }
body.espace-employe .moi strong { color: #fff; }
body.espace-employe .moi .avatar { background: var(--peche); color: #0f6973; box-shadow: 0 0 0 3px rgba(255, 183, 102, 0.22); }
body.espace-employe .bouton-sortie { border-color: rgba(255, 255, 255, 0.38); color: #fff; }
body.espace-employe .bouton-sortie:hover { background: rgba(255, 255, 255, 0.12); }
body.espace-employe .lien-discret { color: #bddfe2; }
body.espace-employe .lien-discret:hover { color: #fff; }
.theme-agx .haut .surtitre { color: var(--vert); }
.theme-agx .segments button[aria-pressed="true"] { background: linear-gradient(180deg, #2a8089, #0f6973); color: #fff; }
.theme-agx .bouton.principal { background: linear-gradient(180deg, #2a8089, #0f6973); border-color: #0b545c; box-shadow: 0 8px 18px -10px rgba(15, 105, 115, 0.9); color: #fff; }
.theme-agx .bouton.principal:hover { background: linear-gradient(180deg, #318a94, #13767f); }
.theme-agx .bouton.or { background: linear-gradient(180deg, #f5a08c, #e8735a); border-color: #d9664c; color: #fff; box-shadow: 0 8px 18px -10px rgba(232, 115, 90, 0.9); }
.theme-agx .bulle { background: #0f6973; color: #fff; }
.theme-agx .lien { color: #0f6973; }
.theme-agx .planning-tete { background: radial-gradient(80% 140% at 100% 0%, rgba(255, 183, 102, 0.28), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(245, 160, 140, 0.22), transparent 60%), linear-gradient(135deg, #0f6973 0%, #2a8089 100%); color: #fff; }
.theme-agx .planning-titre .surtitre-clair { color: #ffd9a8; }
.theme-agx .planning-titre h2 { color: #fff; font-weight: 800; }
.theme-agx .planning-titre p { color: #d6ecee; }
.theme-agx .planning-titre p strong { color: #fff; }
.theme-agx .rond-kt { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: #fff; }
.theme-agx .rond-kt:hover { background: rgba(255, 255, 255, 0.22); }
.theme-agx .planning-chiffres div { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.theme-agx .planning-chiffres span { color: #d6ecee; }
.theme-agx .planning-chiffres strong { color: #fff; }
.theme-agx .planning-chiffres div.attente { border-color: rgba(255, 183, 102, 0.8); }
.theme-agx .jour-kt.auj strong { background: var(--rose); color: #fff; box-shadow: 0 6px 16px -6px rgba(232, 115, 90, 0.8); }
.theme-agx .jour-kt em, .theme-agx .date-kt em { color: var(--rose); }
.theme-agx .case-kt.auj, .theme-agx .jour-kt.auj { background: color-mix(in srgb, var(--rose) 7%, var(--surface)); }
.theme-agx .ligne-kt svg { color: var(--vert); }
.theme-agx .total-kt { background: var(--vert); color: #fff; }
.theme-agx .total-kt.zero { background: var(--surface-2); color: var(--discret); }
.theme-agx .pastille-kt.oui { background: #dcedee; color: #0f6973; border-color: rgba(15, 105, 115, 0.3); }
.theme-agx .pastille-kt.non { background: #ffe9e4; color: #c4563d; border-color: rgba(196, 86, 61, 0.3); }
.theme-agx .pastille-kt.fait { background: var(--surface-2); color: var(--encre); }
.theme-agx .ligne-kt.attente, .theme-agx .case-kt.attente, .theme-agx .carte-jour-kt dl > div.attente { background: color-mix(in srgb, var(--peche) 16%, var(--surface)); }
.theme-agx .quart-kt { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 183, 102, 0.35), transparent 60%), linear-gradient(140deg, #0f6973 0%, #2a8089 100%); box-shadow: 0 8px 18px -10px rgba(15, 105, 115, 0.9); color: #fff; }
.theme-agx .quart-kt small { color: #d6ecee; }
.theme-agx .quart-kt em { color: #ffe3c2; }
.theme-agx .badge-nouveau { background: var(--rose); }
.theme-agx .conge-kt { border-color: var(--rose); color: #c4563d; background: #fff3ef; }
.theme-agx .conge-kt.demande { border-style: dashed; color: #a86a12; border-color: #f0a630; background: #fff6e6; }
.theme-agx .carte-jour-kt.auj { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
.theme-agx .carte-jour-kt.auj .date-kt strong { color: var(--rose); }
.theme-agx .a-confirmer-kt { color: #a86a12; background: #fff1dc; border-color: rgba(240, 166, 48, 0.7); }
.theme-agx .statut.avertissement { background: #fff1dc; color: #8a5a10; }
.theme-agx .tuile::after { background: radial-gradient(circle, rgba(255, 183, 102, 0.35), transparent 70%); }
.theme-agx tbody tr:hover td { background: color-mix(in srgb, var(--sauge) 18%, transparent); }

/* Espace de l'employé en mode sombre : sarcelle profonde, mêmes accents. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-agx { --page: #0b1e20; --surface: #112a2d; --surface-2: #17373a; --encre: #e4f0f0; --encre-2: #bcd3d4; --discret: #86a4a6; --trait: #1f4044; --axe: #2f5458; --anneau: rgba(255, 255, 255, 0.07);
  --cote: #0a3237; --cote-discret: #9fc3c6; --saisie-fond: #142f32; --saisie-bord: #2f5458; --or: #f0c070; --or-fond: #33270f; --bon-texte: #7fd3a9; --hausse: #7fd3a9; --baisse: #f58f8f;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(42, 128, 137, 0.22), transparent 60%), var(--page); }
  :root:where(:not([data-theme="light"])) body.espace-employe .cote { background: radial-gradient(120% 60% at 0% 100%, rgba(255, 183, 102, 0.12), transparent 60%), linear-gradient(180deg, #0d3b41 0%, #0a3237 45%, #072427 100%); }
  :root:where(:not([data-theme="light"])) .theme-agx .carte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--ombre); }
  :root:where(:not([data-theme="light"])) .theme-agx .pastille-kt.oui { background: #15454a; color: #a8dde1; border-color: rgba(168, 221, 225, 0.35); }
  :root:where(:not([data-theme="light"])) .theme-agx .pastille-kt.non { background: #3d2320; color: #f7b3a4; border-color: rgba(247, 179, 164, 0.4); }
  :root:where(:not([data-theme="light"])) .theme-agx .conge-kt { background: #3a1f1a; color: #f7b3a4; border-color: #f7b3a4; }
  :root:where(:not([data-theme="light"])) .theme-agx .conge-kt.demande { background: #33270f; color: #f0c070; border-color: #f0c070; }
  :root:where(:not([data-theme="light"])) .theme-agx .a-confirmer-kt, :root:where(:not([data-theme="light"])) .theme-agx .statut.avertissement { color: #f0c070; background: #33270f; }
  :root:where(:not([data-theme="light"])) .theme-agx .case-kt.auj, :root:where(:not([data-theme="light"])) .theme-agx .jour-kt.auj { background: color-mix(in srgb, var(--rose) 12%, var(--surface)); }
  :root:where(:not([data-theme="light"])) .theme-agx .ligne-kt.attente, :root:where(:not([data-theme="light"])) .theme-agx .case-kt.attente, :root:where(:not([data-theme="light"])) .theme-agx .carte-jour-kt dl > div.attente { background: color-mix(in srgb, var(--peche) 12%, var(--surface)); }
}
:root[data-theme="dark"] .theme-agx { --page: #0b1e20; --surface: #112a2d; --surface-2: #17373a; --encre: #e4f0f0; --encre-2: #bcd3d4; --discret: #86a4a6; --trait: #1f4044; --axe: #2f5458; --anneau: rgba(255, 255, 255, 0.07);
  --cote: #0a3237; --cote-discret: #9fc3c6; --saisie-fond: #142f32; --saisie-bord: #2f5458; --or: #f0c070; --or-fond: #33270f; --bon-texte: #7fd3a9; --hausse: #7fd3a9; --baisse: #f58f8f;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --fond-page: radial-gradient(70% 45% at 100% 0%, rgba(42, 128, 137, 0.22), transparent 60%), var(--page); }
:root[data-theme="dark"] body.espace-employe .cote { background: radial-gradient(120% 60% at 0% 100%, rgba(255, 183, 102, 0.12), transparent 60%), linear-gradient(180deg, #0d3b41 0%, #0a3237 45%, #072427 100%); }
:root[data-theme="dark"] .theme-agx .carte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--ombre); }
:root[data-theme="dark"] .theme-agx .pastille-kt.oui { background: #15454a; color: #a8dde1; border-color: rgba(168, 221, 225, 0.35); }
:root[data-theme="dark"] .theme-agx .pastille-kt.non { background: #3d2320; color: #f7b3a4; border-color: rgba(247, 179, 164, 0.4); }
:root[data-theme="dark"] .theme-agx .conge-kt { background: #3a1f1a; color: #f7b3a4; border-color: #f7b3a4; }
:root[data-theme="dark"] .theme-agx .conge-kt.demande { background: #33270f; color: #f0c070; border-color: #f0c070; }
:root[data-theme="dark"] .theme-agx .a-confirmer-kt, :root[data-theme="dark"] .theme-agx .statut.avertissement { color: #f0c070; background: #33270f; }
:root[data-theme="dark"] .theme-agx .case-kt.auj, :root[data-theme="dark"] .theme-agx .jour-kt.auj { background: color-mix(in srgb, var(--rose) 12%, var(--surface)); }
:root[data-theme="dark"] .theme-agx .ligne-kt.attente, :root[data-theme="dark"] .theme-agx .case-kt.attente, :root[data-theme="dark"] .theme-agx .carte-jour-kt dl > div.attente { background: color-mix(in srgb, var(--peche) 12%, var(--surface)); }


/* ==================== Deuxième passe du 3 nov. 2026 (Imad : « quelque chose de plus beau ») ==================== */
/* La marque en haut du menu : le logo sur une photo du restaurant. */
.marque { position: relative; margin: -8px -4px 0; padding: 24px 14px 16px; border-radius: 16px; border-bottom: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(230, 225, 211, 0.14);
  background: linear-gradient(180deg, rgba(33, 45, 28, 0.3) 0%, rgba(33, 45, 28, 0.82) 100%), url(photos/table-saveur-thai.jpg) center 45% / cover; }
.marque img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
.marque .lieu { color: #e6e1d3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
body.espace-employe .marque { background: linear-gradient(180deg, rgba(15, 105, 115, 0.4) 0%, rgba(10, 79, 87, 0.88) 100%), url(photos/table-saveur-thai.jpg) center 45% / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.photo-cote { display: none; }
/* Titres des cartes en serif, trait olive devant le surtitre, cartes légèrement dégradées. */
.carte h2 { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 19px; letter-spacing: 0; }
.carte .entete p { font-size: 13px; }
.carte { background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, var(--surface-2)) 100%); }
.haut .surtitre::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--olive); margin-right: 8px; vertical-align: middle; border-radius: 1px; }
.haut h1 { font-size: 38px; }
.bouton.principal, .bouton.or { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -10px rgba(33, 45, 28, 0.9); }
/* L'en-tête de page reste visible en haut, translucide, sur ordinateur. */
@media (min-width: 901px) {
  .haut { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--page) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--trait) 70%, transparent); padding: 18px 32px 14px; }
  .haut h1 { font-size: 32px; }
}
/* Le menu du gestionnaire signale les pages Agendrix d'une pastille sarcelle. */
body:not(.espace-employe) #nav a.actif[href="#/horaire"] svg, body:not(.espace-employe) #nav a.actif[href="#/demandes"] svg, body:not(.espace-employe) #nav a.actif[href="#/disponibilites"] svg { background: #9fd0d4; color: #0f6973; }
/* Thème clair (le thème par défaut depuis le 3 nov. 2026, Imad : « trop sombre ») : le menu devient clair lui aussi ;
   le logo crème reste lisible sur sa photo. En thème sombre, le menu garde son vert profond. */
:root[data-theme-effectif="light"] .cote { --cote: #f6f2e7; background: linear-gradient(180deg, #fbf8f0 0%, #f4efe3 100%); color: var(--vert); border-right-color: var(--trait); }
:root[data-theme-effectif="light"] .marque { box-shadow: 0 10px 24px -14px rgba(33, 45, 28, 0.7); }
:root[data-theme-effectif="light"] #nav a { color: #4f5848; }
:root[data-theme-effectif="light"] #nav a svg { background: rgba(33, 45, 28, 0.07); color: var(--vert); }
:root[data-theme-effectif="light"] #nav a:hover { background: rgba(33, 45, 28, 0.05); color: var(--vert); }
:root[data-theme-effectif="light"] #nav a:hover svg { background: rgba(33, 45, 28, 0.12); }
:root[data-theme-effectif="light"] #nav a.actif { background: color-mix(in srgb, var(--sauge) 32%, #ffffff); color: var(--vert); }
:root[data-theme-effectif="light"] #nav a.actif svg { background: var(--vert); color: var(--creme); }
:root[data-theme-effectif="light"] #nav a.actif::before { background: var(--vert); }
:root[data-theme-effectif="light"] #nav .groupe { color: var(--olive); border-top-color: var(--trait); }
:root[data-theme-effectif="light"] .moi { border-top-color: var(--trait); }
:root[data-theme-effectif="light"] .moi strong { color: var(--vert); }
:root[data-theme-effectif="light"] .moi small { color: #6b7363; }
:root[data-theme-effectif="light"] .moi .avatar { background: var(--vert); color: var(--creme); box-shadow: 0 0 0 3px rgba(33, 45, 28, 0.1); }
:root[data-theme-effectif="light"] .bouton-sortie { border-color: var(--axe); color: var(--vert); background: #fffdf8; }
:root[data-theme-effectif="light"] .bouton-sortie:hover { background: var(--surface-2); }
:root[data-theme-effectif="light"] .lien-discret { color: #6b7363; }
:root[data-theme-effectif="light"] .lien-discret:hover { color: var(--vert); }
/* Le menu de l'employé en clair : blanc et sarcelle, comme Agendrix. */
:root[data-theme-effectif="light"] body.espace-employe .cote { --cote: #f1f7f7; background: linear-gradient(180deg, #ffffff 0%, #eef5f5 100%); color: #0f6973; border-right-color: #d8e8e9; }
:root[data-theme-effectif="light"] body.espace-employe #nav a { color: #3d5c5f; }
:root[data-theme-effectif="light"] body.espace-employe #nav a svg { background: rgba(15, 105, 115, 0.08); color: #0f6973; }
:root[data-theme-effectif="light"] body.espace-employe #nav a:hover { background: rgba(15, 105, 115, 0.06); color: #0f6973; }
:root[data-theme-effectif="light"] body.espace-employe #nav a.actif { background: #dcedee; color: #0f6973; }
:root[data-theme-effectif="light"] body.espace-employe #nav a.actif svg { background: #0f6973; color: #ffffff; }
:root[data-theme-effectif="light"] body.espace-employe #nav a.actif::before { background: #0f6973; }
:root[data-theme-effectif="light"] body.espace-employe .moi { border-top-color: #d8e8e9; }
:root[data-theme-effectif="light"] body.espace-employe .moi strong { color: #0f6973; }
:root[data-theme-effectif="light"] body.espace-employe .moi small { color: #6b898c; }
:root[data-theme-effectif="light"] body.espace-employe .moi .avatar { background: #ffb766; color: #0f6973; box-shadow: 0 0 0 3px rgba(255, 183, 102, 0.25); }
:root[data-theme-effectif="light"] body.espace-employe .bouton-sortie { border-color: #b9d2d4; color: #0f6973; background: #ffffff; }
:root[data-theme-effectif="light"] body.espace-employe .bouton-sortie:hover { background: #e6f1f2; }
:root[data-theme-effectif="light"] body.espace-employe .lien-discret { color: #6b898c; }
:root[data-theme-effectif="light"] body.espace-employe .lien-discret:hover { color: #0f6973; }
/* Sur cellulaire, l'employé a une barre d'onglets en bas, comme dans une application. */
@media (max-width: 900px) {
  body.espace-employe #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #0f6973; border-top: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5); overflow: visible; }
  body.espace-employe #nav a { flex: 1; flex-direction: column; gap: 3px; padding: 4px 2px; font-size: 10.5px; font-weight: 700; border-radius: 10px; color: #bddfe2; white-space: nowrap; position: relative; }
  body.espace-employe #nav a svg { width: 34px; height: 34px; padding: 7px; background: none; }
  body.espace-employe #nav a.actif { background: none; color: #fff; }
  body.espace-employe #nav a.actif svg { background: var(--peche, #ffb766); color: #0f6973; }
  body.espace-employe #nav a .compteur { position: absolute; top: 0; right: calc(50% - 24px); margin: 0; }
  body.espace-employe main { padding-bottom: 100px; }
  body.espace-employe .cote { padding-bottom: 10px; }
  .marque { margin: 0; padding: 10px 12px; border-radius: 12px; }
  /* Barre d'onglets blanche en thème clair. */
  :root[data-theme-effectif="light"] body.espace-employe #nav { background: #ffffff; border-top-color: #d8e8e9; box-shadow: 0 -8px 24px -12px rgba(15, 105, 115, 0.35); }
  :root[data-theme-effectif="light"] body.espace-employe #nav a { color: #6b898c; }
  :root[data-theme-effectif="light"] body.espace-employe #nav a svg { background: none; }
  :root[data-theme-effectif="light"] body.espace-employe #nav a.actif { color: #0f6973; background: none; }
  :root[data-theme-effectif="light"] body.espace-employe #nav a.actif svg { background: #dcedee; color: #0f6973; }
}
/* Le menu est une colonne flex qui peut dépasser l'écran : la marque et le menu ne rétrécissent jamais (la marque s'était
   écrasée à 40 px quand elle a reçu overflow: hidden). */
.marque, #nav { flex: none; }
/* La partie de droite aux couleurs d'Agendrix prend aussi son fond (sarcelle très pâle), menu Koh Tao ou non. */
.principal.theme-agx { background: var(--fond-page); min-height: 100vh; }


/* ==================== Horaire de la semaine du gestionnaire : même présentation que la semaine de l'employé ====================
   Imad, 3 nov. 2026, devant la semaine de l'employé : « c'est beau, mais je le vois pas sur mon panel ». */
button.rond-kt { padding: 0; cursor: pointer; font: inherit; }
.lien-clair { background: none; border: 0; padding: 0; font: inherit; color: #ffd9a8; text-decoration: underline; cursor: pointer; }
.planning-tete .statut { background: rgba(255, 255, 255, 0.14); color: #fff; }
.planning-tete .statut.bon { color: #fff; }
.planning-tete .statut.bon svg { color: #bfe3a4; }
.planning-chiffres > a { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(230, 225, 211, 0.08); border: 1px solid rgba(230, 225, 211, 0.18); text-decoration: none; color: inherit; }
.theme-agx .planning-chiffres > a { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.planning-chiffres > a:hover { background: rgba(255, 255, 255, 0.22); }
.planning-chiffres > .attente { border-style: dashed; border-color: rgba(255, 183, 102, 0.8); }
.planning-chiffres > .depasse { border-color: rgba(245, 160, 140, 0.9); background: rgba(245, 160, 140, 0.28); }
.outils-kt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 14px 18px 4px; }
.corps-kt { padding: 6px 18px 18px; }
.corps-kt .tableau-defile { margin: 0; padding: 0; }
.grille-horaire.kt thead th { background: none; border-bottom: 1px solid var(--trait); padding: 4px 4px 8px; text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.grille-horaire.kt thead th:first-child { background: var(--surface); }
.grille-horaire.kt thead th .jour-kt { padding: 4px 0 2px; }
.grille-horaire.kt .jour-h { min-width: 126px; padding: 8px 6px 30px !important; }
.grille-horaire.kt .jour-h.indispo, .grille-horaire.kt .jour-h.en-conge { background: none; }
.grille-horaire.kt .jour-h.we { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.grille-horaire.kt .jour-h.auj { background: color-mix(in srgb, var(--rose) 6%, var(--surface)); box-shadow: none; }
.grille-horaire.kt .pastille-kt { font-size: 11.5px; padding: 4px 9px; margin-bottom: 6px; border-radius: 12px; }
.grille-horaire.kt .pastille-kt svg { display: none; }
.grille-horaire.kt .note-kt { display: block; margin: -2px 0 6px; }
.grille-horaire.kt .conge-kt { padding: 5px 7px; font-size: 11.5px; margin-bottom: 6px; border-radius: 10px; }
.grille-horaire.kt .quart-h { border: 0; border-radius: 12px; padding: 8px 9px 7px; margin-bottom: 6px; color: #fff; text-align: center; align-items: center;
  background: radial-gradient(90% 80% at 100% 0%, rgba(255, 183, 102, 0.35), transparent 60%), linear-gradient(140deg, #0f6973 0%, #2a8089 100%); box-shadow: 0 8px 18px -10px rgba(15, 105, 115, 0.9); transition: transform 0.12s, box-shadow 0.15s; }
.grille-horaire.kt .quart-h strong { font-size: 13px; color: #fff; }
.grille-horaire.kt .quart-h span { color: #d6ecee; }
.grille-horaire.kt .quart-h:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(15, 105, 115, 0.9); }
.grille-horaire.kt .quart-h .i-alerte { color: #ffd9a8; }
.grille-horaire.kt .quart-h.nouveau { background: var(--surface); border: 1.5px dashed #0f6973; box-shadow: none; }
.grille-horaire.kt .quart-h.nouveau strong { color: #0f6973; }
.grille-horaire.kt .quart-h.nouveau span { color: var(--encre-2); }
.grille-horaire.kt .quart-h.nouveau .i-alerte { color: var(--critique); }
.grille-horaire.kt .quart-h.modifié { background: #fff1dc; border: 1.5px dashed #f0a630; box-shadow: none; }
.grille-horaire.kt .quart-h.modifié strong { color: #6b4a0f; }
.grille-horaire.kt .quart-h.modifié span { color: #8a5a10; }
.grille-horaire.kt .quart-h.modifié .i-alerte { color: var(--critique); }
.grille-horaire.kt .ligne-combler .quart-h { background: linear-gradient(140deg, #f5a08c 0%, #e8735a 100%); border: 0; box-shadow: 0 8px 18px -10px rgba(232, 115, 90, 0.9); }
.grille-horaire.kt .ligne-combler .quart-h strong, .grille-horaire.kt .ligne-combler .quart-h span { color: #fff; }
.grille-horaire.kt .ajout-h { border-radius: 8px; height: 22px; }
.grille-horaire.kt .ajout-h:hover { border-color: #0f6973; color: #0f6973; }
.grille-horaire.kt .travaille { margin-top: 2px; }
.grille-horaire.kt .groupe-h th { color: #0f6973; }
.grille-horaire.kt .nom-h strong { font-size: 14px; }
.grille-horaire.kt tfoot td { background: color-mix(in srgb, #0f6973 8%, var(--surface)); }
.planning-kt.gerant .cle-h.publie { background: linear-gradient(140deg, #0f6973, #2a8089); border-color: transparent; }
.planning-kt.gerant .cle-h.nouveau { background: var(--surface); border: 1px dashed #0f6973; }
.planning-kt.gerant .cle-h.modifie { background: #fff1dc; border: 1px dashed #f0a630; }
.planning-kt.gerant .cle-h.combler { background: linear-gradient(140deg, #f5a08c, #e8735a); border-color: transparent; }
.planning-kt.gerant .cle-h.conge { background: #fff3ef; border-color: #e8735a; }
.planning-kt.gerant .cle-h.indispo { background: #ffe9e4; border-color: rgba(196, 86, 61, 0.4); }
.planning-kt.gerant .legende { padding: 0 2px; }
@media (max-width: 860px) {
  .planning-kt.gerant .planning-grille { display: none; }
  .outils-kt { justify-content: flex-start; padding: 12px 14px 0; }
  .corps-kt { padding: 6px 10px 14px; }
}
@media print {
  .planning-kt.gerant { border: 0; box-shadow: none; }
  .planning-tete { background: none !important; color: #000; padding: 0 0 8px; }
  .planning-tete::after, .planning-chiffres, .rond-kt, .outils-kt { display: none !important; }
  .planning-titre h2, .planning-titre p { color: #000 !important; }
  .grille-horaire.kt .quart-h, .grille-horaire.kt .quart-h strong, .grille-horaire.kt .quart-h span { color: #000 !important; }
  .grille-horaire.kt .pastille-kt, .grille-horaire.kt .conge-kt { border: 1px solid #777 !important; background: none !important; color: #000 !important; }
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h.modifié { background: #33270f; }
  :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h.modifié strong, :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h.modifié span { color: #f0c070; }
}
:root[data-theme="dark"] .grille-horaire.kt .quart-h.modifié { background: #33270f; }
:root[data-theme="dark"] .grille-horaire.kt .quart-h.modifié strong, :root[data-theme="dark"] .grille-horaire.kt .quart-h.modifié span { color: #f0c070; }
/* Imad, 3 nov. 2026 : « je ne vois plus le bouton modifier et c'est un petit peu serré ». Le bouton « Ajouter » est toujours
   visible dans chaque case (plus seulement au survol), chaque carte de quart porte un crayon, et les cases respirent. */
.grille-horaire.kt .jour-h { min-width: 158px; padding: 12px 10px 42px !important; }
.grille-horaire.kt .nom-h { padding-top: 12px !important; }
.grille-horaire.kt .pastille-kt { font-size: 12.5px; padding: 6px 12px; margin-bottom: 8px; }
.grille-horaire.kt .note-kt { font-size: 11.5px; margin: -4px 0 8px; }
.grille-horaire.kt .conge-kt { padding: 7px 9px; font-size: 12.5px; margin-bottom: 8px; }
.grille-horaire.kt .quart-h { padding: 9px 10px 8px; margin-bottom: 8px; }
.grille-horaire.kt .quart-h strong { font-size: 13.5px; }
.grille-horaire.kt button.quart-h::before { content: "✎"; position: absolute; top: 5px; left: 8px; font-size: 11px; opacity: 0.8; }
.grille-horaire.kt .ajout-h { opacity: 1; left: 10px; right: 10px; bottom: 8px; height: 28px; gap: 5px; border: 1.5px dashed color-mix(in srgb, #0f6973 45%, transparent); color: #0f6973; border-radius: 9px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, #0f6973 4%, transparent); transition: background 0.15s, color 0.15s; }
.grille-horaire.kt .ajout-h::after { content: "Ajouter"; }
.grille-horaire.kt .ajout-h:hover { background: #0f6973; color: #fff; border-style: solid; border-color: #0f6973; }
.grille-horaire.kt thead th .jour-kt strong { width: 40px; height: 40px; font-size: 22px; }
@media print { .grille-horaire.kt button.quart-h::before { display: none; } }

/* Imad, 3 nov. 2026 : « c'est pas beau » (les gros boutons Ajouter), « j'ai pas le bouton modifier », « je vois pas le total ».
   Gestes en liens discrets sous le quart, total par employé qui reste visible à droite, cases qui tiennent dans l'écran. */
.grille-horaire.kt .ajout-h, .grille-horaire.kt button.quart-h::before { display: none; content: none; }
.grille-horaire.kt .jour-h { min-width: 118px; padding: 10px 8px 10px !important; }
.grille-horaire.kt .pastille-kt { font-size: 12px; padding: 5px 10px; margin-bottom: 6px; }
.grille-horaire.kt .quart-h { margin-bottom: 2px; }
.grille-horaire.kt .quart-h strong { font-size: 13px; }
.actions-h { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; }
.lien-h { background: none; border: 0; padding: 2px 5px; font: inherit; font-size: 12px; font-weight: 700; color: #0f6973; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; border-radius: 6px; text-align: right; line-height: 1.25; }
.lien-h svg { width: 13px; height: 13px; flex: none; }
.lien-h:hover { background: color-mix(in srgb, #0f6973 10%, transparent); }
.lien-h.discret { color: var(--discret); font-weight: 600; }
.lien-h.discret:hover { color: #0f6973; }
.grille-horaire.kt .jour-h .actions-h:last-child { margin-bottom: 0; margin-top: auto; }
.grille-horaire.kt .total-h, .grille-horaire.kt thead th:last-child { position: sticky; right: 0; background: var(--surface); z-index: 1; box-shadow: -8px 0 12px -10px rgba(0, 0, 0, 0.25); min-width: 86px; }
.grille-horaire.kt .total-h strong { font-size: 14px; color: #0f6973; }
.grille-horaire.kt .total-h small { white-space: nowrap; }
.grille-horaire.kt td:first-child, .grille-horaire.kt th:first-child { min-width: 150px; max-width: 170px; }
@media (max-width: 900px) { .grille-horaire.kt .total-h, .grille-horaire.kt thead th:last-child { position: static; box-shadow: none; } }


/* ==================== Grille à la manière d'Agendrix (Imad, 3 nov. 2026 : « comment ça apparaît chez eux ») ====================
   Cases blanches bien séparées, barre fine de disponibilité en haut, cartes blanches à barre de couleur par poste, heures en gras,
   avatar et badge d'heures devant chaque nom, total en sarcelle à droite. */
.grille-horaire.kt { border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.grille-horaire.kt thead th, .grille-horaire.kt thead th:first-child { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); border-bottom: 1px solid var(--trait); }
.grille-horaire.kt .jour-h { position: relative; min-width: 122px; height: 110px; padding: 16px 8px 8px !important; vertical-align: top; background: var(--surface); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); box-shadow: none; }
.grille-horaire.kt .jour-h.we { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.grille-horaire.kt .jour-h.auj { background: color-mix(in srgb, var(--rose) 6%, var(--surface)); }
.grille-horaire.kt .jour-h::before { content: ""; position: absolute; top: 6px; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: transparent; }
.grille-horaire.kt .jour-h.d-oui::before { background: #2e9e6b; }
.grille-horaire.kt .jour-h.d-non::before { background: #e05252; }
.grille-horaire.kt .jour-h.en-conge::before { background: #e8735a; }
.grille-horaire.kt .dispo-h { display: block; font-size: 11px; font-weight: 700; margin: 0 0 6px; color: #2e9e6b; line-height: 1.3; }
.grille-horaire.kt .dispo-h.non { color: #c43d3d; }
.grille-horaire.kt td.nom-h, .grille-horaire.kt th:first-child { border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); background: var(--surface); }
.grille-horaire.kt .nom-h { padding: 12px 10px !important; vertical-align: top; min-width: 190px; max-width: 220px; }
.emp-h { display: flex; gap: 10px; align-items: flex-start; }
.avatar-h { flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, #0f6973 14%, var(--surface)); color: #0f6973; font-style: normal; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.emp-h strong { display: block; color: #0f6973; font-size: 14px; line-height: 1.25; }
.badge-h { display: inline-block; margin: 4px 0 3px; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--encre); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.badge-h.zero { color: var(--discret); font-weight: 600; }
.emp-h small { display: block; color: var(--discret); font-size: 11px; line-height: 1.3; }
.grille-horaire.kt .groupe-h th { padding: 16px 10px 6px; background: var(--surface); border-bottom: 1px solid var(--trait); }
.grille-horaire.kt .quart-h, .grille-horaire.kt .quart-h.nouveau, .grille-horaire.kt .quart-h.modifié, .grille-horaire.kt .ligne-combler .quart-h {
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-left: 4px solid var(--c-poste, #0f6973); border-radius: 8px;
  box-shadow: 0 2px 8px -3px rgba(15, 105, 115, 0.35); text-align: left; align-items: stretch; padding: 7px 8px 7px 9px; gap: 2px; margin-bottom: 6px; }
.grille-horaire.kt .quart-h:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(15, 105, 115, 0.5); }
.grille-horaire.kt .quart-h .haut-q { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.grille-horaire.kt .quart-h strong, .grille-horaire.kt .quart-h.nouveau strong, .grille-horaire.kt .quart-h.modifié strong, .grille-horaire.kt .ligne-combler .quart-h strong { color: var(--encre); font-size: 13.5px; white-space: nowrap; }
.grille-horaire.kt .quart-h .poste-q, .grille-horaire.kt .quart-h.nouveau .poste-q, .grille-horaire.kt .quart-h.modifié .poste-q, .grille-horaire.kt .ligne-combler .quart-h .poste-q { color: var(--encre-2); font-size: 11.5px; }
.grille-horaire.kt .quart-h .haut-q i { position: static; width: 15px; height: 15px; flex: none; }
.grille-horaire.kt .quart-h .haut-q i svg { width: 15px; height: 15px; }
.grille-horaire.kt .quart-h .i-vu { color: #0f6973; }
.grille-horaire.kt .quart-h .i-alerte, .grille-horaire.kt .quart-h.nouveau .i-alerte, .grille-horaire.kt .quart-h.modifié .i-alerte { color: var(--critique); }
.grille-horaire.kt .quart-h.nouveau { border-style: dashed; border-left-style: solid; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.grille-horaire.kt .quart-h.modifié { background: var(--or-fond); border-color: #f0c070; border-left-color: var(--c-poste, #0f6973); }
.grille-horaire.kt .ligne-combler .quart-h { --c-poste: #e8735a; background: color-mix(in srgb, #e8735a 8%, var(--surface)); }
.grille-horaire.kt .conge-kt { background: var(--surface-2); border: 1px solid var(--trait); border-left: 4px solid #8b8f94; color: var(--encre-2); border-radius: 8px; text-align: left; font-weight: 700; font-size: 12.5px; padding: 7px 8px 7px 9px; }
.grille-horaire.kt .conge-kt.demande { border-left-color: #f0a630; background: var(--or-fond); color: var(--or); }
.grille-horaire.kt .total-h { vertical-align: top; padding-top: 14px !important; border-left: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.grille-horaire.kt thead th:last-child { border-left: 1px solid var(--trait); }
.grille-horaire.kt .total-h strong { font-size: 14.5px; color: #0f6973; }
.grille-horaire.kt tfoot td { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); border-top: 1px solid var(--trait); }
.grille-horaire.kt .actions-h { margin-bottom: 6px; }
.planning-kt.gerant .cle-h.publie { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid #0f6973; }
.planning-kt.gerant .cle-h.nouveau { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); border: 1px dashed #0f6973; }
.planning-kt.gerant .cle-h.modifie { background: var(--or-fond); border: 1px solid #f0c070; }
.planning-kt.gerant .cle-h.combler { background: color-mix(in srgb, #e8735a 8%, var(--surface)); border: 1px solid var(--trait); border-left: 4px solid #e8735a; }
.planning-kt.gerant .cle-h.conge { background: var(--surface-2); border: 1px solid var(--trait); border-left: 4px solid #8b8f94; }
.planning-kt.gerant .cle-h.dispo { background: #2e9e6b; border-color: transparent; height: 4px !important; }
.planning-kt.gerant .cle-h.indispo { background: #e05252; border-color: transparent; height: 4px !important; }
.planning-kt.gerant .legende svg { width: 15px; height: 15px; color: #0f6973; }

/* Même grille en thème sombre : sarcelle plus claire pour le texte. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .emp-h strong, :root:where(:not([data-theme="light"])) .avatar-h, :root:where(:not([data-theme="light"])) .grille-horaire.kt .total-h strong, :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h .i-vu, :root:where(:not([data-theme="light"])) .planning-kt.gerant .legende svg { color: #8fd0d6; }
  :root:where(:not([data-theme="light"])) .avatar-h { background: #15454a; }
  :root:where(:not([data-theme="light"])) .grille-horaire.kt .dispo-h { color: #7fd3a9; }
  :root:where(:not([data-theme="light"])) .grille-horaire.kt .dispo-h.non { color: #f58f8f; }
  :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h, :root:where(:not([data-theme="light"])) .grille-horaire.kt .quart-h.nouveau, :root:where(:not([data-theme="light"])) .grille-horaire.kt .ligne-combler .quart-h { box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.6); }
}
:root[data-theme="dark"] .emp-h strong, :root[data-theme="dark"] .avatar-h, :root[data-theme="dark"] .grille-horaire.kt .total-h strong, :root[data-theme="dark"] .grille-horaire.kt .quart-h .i-vu, :root[data-theme="dark"] .planning-kt.gerant .legende svg { color: #8fd0d6; }
:root[data-theme="dark"] .avatar-h { background: #15454a; }
:root[data-theme="dark"] .grille-horaire.kt .dispo-h { color: #7fd3a9; }
:root[data-theme="dark"] .grille-horaire.kt .dispo-h.non { color: #f58f8f; }
:root[data-theme="dark"] .grille-horaire.kt .quart-h, :root[data-theme="dark"] .grille-horaire.kt .quart-h.nouveau, :root[data-theme="dark"] .grille-horaire.kt .ligne-combler .quart-h { box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.6); }


/* ==================== Rapports de l'équipe (modèle Agendrix) : grandes tuiles illustrées, types à cocher ==================== */
.tuiles-rapport { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.tuile-rapport { border: 0; border-radius: 20px; padding: 26px 18px 24px; background: color-mix(in srgb, #0f6973 9%, var(--surface)); color: #b9d8da; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font: inherit; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; box-shadow: var(--ombre); }
.tuile-rapport svg { width: 120px; height: 90px; }
.tuile-rapport h3 { margin: 4px 0 0; font-size: 26px; font-weight: 800; color: #0f6973; letter-spacing: -0.01em; }
.tuile-rapport p { margin: 0; color: var(--encre-2); font-size: 13px; line-height: 1.4; max-width: 260px; }
.tuile-rapport:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(15, 105, 115, 0.5); }
.tuile-rapport.choisie { color: #ffffff; background: radial-gradient(70% 90% at 100% 0%, rgba(245, 160, 140, 0.8), transparent 60%), linear-gradient(135deg, #0f6973 0%, #1d5a61 100%); box-shadow: 0 22px 44px -20px rgba(15, 105, 115, 0.9); }
.tuile-rapport.choisie h3, .tuile-rapport.choisie p { color: #ffffff; }
.tuile-rapport.choisie svg [fill="#0f6973"] { fill: #0f6973; }
.rapport-choix .titre-rapport { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 24px; color: #0f6973; margin: 4px 0 8px; }
.rapport-choix .titre-rapport + .titre-rapport, .types-rapport + .titre-rapport { margin-top: 22px; }
.types-rapport label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 4px; cursor: pointer; border-radius: 10px; }
.types-rapport label:hover { background: color-mix(in srgb, #0f6973 5%, transparent); }
.types-rapport input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #0f6973; }
.types-rapport strong { display: block; font-size: 16px; color: var(--encre); }
.types-rapport small { display: block; color: var(--encre-2); font-size: 13.5px; margin-top: 2px; }
.periode-rapport { display: flex; flex-direction: column; gap: 12px; }
.rapport-resultat { margin-top: 18px; }
.table-rapport th.n, .table-rapport td.n { text-align: right; }
.table-rapport tfoot td { font-weight: 800; }
@media (max-width: 900px) {
  .tuile-rapport { padding: 18px 12px 16px; }
  .tuile-rapport svg { width: 90px; height: 68px; }
  .tuile-rapport h3 { font-size: 21px; }
}
@media print { .tuiles-rapport, .rapport-choix { display: none !important; } .rapport-resultat { margin-top: 0; box-shadow: none; border: 0; } }

/* ---------- Demandes à la Agendrix (Imad, 4 nov. 2026) : onglets soulignés corail, filtres en ligne, état vide centré,
   cartes de demande de remplacement et de quart à combler ; sous-entrées du menu avec leur compteur. ---------- */
.onglets-agx { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; }
.onglets-agx a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; text-decoration: none; color: var(--encre-2); font-weight: 700; font-size: 16px; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.onglets-agx a:hover { color: var(--encre); }
.onglets-agx a.actif { color: #e8735a; border-color: #e8735a; }
.onglets-agx a b { font-size: 12px; line-height: 18px; background: var(--surface-2); color: var(--encre-2); border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.onglets-agx a.actif b { background: #e8735a; color: #fff; }
.titre-agx { margin: 4px 0 18px; }
.titre-agx h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--encre); line-height: 1.1; }
.titre-agx p { margin: 0; color: var(--discret); max-width: 760px; }
.filtres-agx { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filtres-agx select, .filtres-agx input { height: 42px; border: 1px solid var(--saisie-bord); border-radius: 10px; background: var(--surface); padding: 0 12px; font: inherit; color: var(--encre); min-width: 170px; }
.filtres-agx input[type="search"] { flex: 1; min-width: 200px; }
.filtres-agx select:focus, .filtres-agx input:focus { outline: 0; border-color: #0f6973; box-shadow: 0 0 0 3px var(--anneau); }
.vide-agx { text-align: center; padding: 60px 12px 70px; color: var(--discret); }
.vide-agx svg { width: 46px; height: 46px; color: var(--axe); margin-bottom: 12px; }
.vide-agx p { margin: 0 auto; font-size: 21px; font-weight: 600; color: var(--encre-2); max-width: 440px; line-height: 1.3; }
.vide-agx small { display: block; margin-top: 10px; font-size: 13.5px; }
.liste-demandes.carte { padding: 4px 18px; }
.liste-rempl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.carte-rempl { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid #e8735a; border-radius: 14px; padding: 14px 16px; box-shadow: var(--ombre); }
.carte-rempl.approuvé { border-left-color: #2e9e6b; }
.carte-rempl.refusé, .carte-rempl.retiré, .carte-rempl.annulé { border-left-color: #8b8f94; }
.carte-rempl.combler { border-left-color: #0f6973; }
.avatar-agx { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #ddeef0; color: #0f6973; font-style: normal; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; }
.avatar-agx.vide { background: var(--surface-2); color: var(--discret); border: 1.5px dashed var(--axe); }
.corps-rempl strong { font-size: 16px; }
.corps-rempl > .statut { margin-left: 6px; vertical-align: middle; }
.quart-rempl { margin-top: 5px; font-size: 15px; color: var(--encre); }
.quart-rempl b { color: #0f6973; }
.corps-rempl small { display: block; color: var(--discret); margin-top: 4px; line-height: 1.4; }
.corps-rempl small.neg { color: #c4563d; font-weight: 600; }
.decision-rempl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; border-top: 1px dashed var(--trait); padding-top: 12px; }
.decision-rempl label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--discret); flex: 1 1 260px; }
.decision-rempl select, .decision-rempl input { height: 40px; border: 1px solid var(--saisie-bord); border-radius: 10px; background: var(--saisie-fond); padding: 0 10px; font: inherit; color: var(--encre); font-weight: 500; }
.boutons-rempl { display: flex; gap: 8px; }
#nav a.sous { padding: 5px 10px 5px 46px; font-size: 13.5px; }
#nav a.sous::after { content: ""; position: absolute; left: 25px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.45; transform: translateY(-50%); }
#nav a.sous.actif { background: rgba(230, 225, 211, 0.07); }
#nav a.sous.actif::before { display: none; }
#nav a.sous .compteur { margin-left: auto; }
/* Côté employé : « Me faire remplacer » sur le quart, et la demande en attente. */
.rempl-kt { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.rempl-kt svg { width: 13px; height: 13px; }
.rempl-kt:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.rempl-kt.attente { cursor: default; border: 1px dashed currentColor; background: none; opacity: 0.9; }
.mes-rempl { margin-top: 18px; }
dialog.dialogue-rempl { width: min(500px, calc(100vw - 32px)); }
dialog.dialogue-rempl form { display: flex; flex-direction: column; gap: 12px; }
/* Pour l'employé, la fenêtre garde la police d'Agendrix (elle est hors de la colonne .theme-agx). */
body.espace-employe dialog { font-family: Nunito, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; --police-titre: Nunito, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; --graisse-titre: 800; }
dialog.dialogue-rempl label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--discret); }
dialog.dialogue-rempl select, dialog.dialogue-rempl input { height: 42px; border: 1px solid var(--saisie-bord); border-radius: 10px; background: var(--saisie-fond); padding: 0 10px; font: inherit; color: var(--encre); }
dialog.dialogue-rempl p { margin: 0; }
@media (max-width: 720px) {
  .titre-agx h2 { font-size: 26px; }
  .onglets-agx a { padding: 10px 12px; font-size: 14.5px; }
  .filtres-agx select, .filtres-agx input { min-width: calc(50% - 6px); flex: 1; }
  .carte-rempl { grid-template-columns: 1fr; }
  .carte-rempl .avatar-agx { display: none; }
}

/* ---------- Application installable et notifications (4 nov. 2026) ---------- */
.carte-appli h2 { display: flex; align-items: center; gap: 10px; }
.carte-appli h2 svg { width: 22px; height: 22px; flex: none; color: var(--vert); }
.carte-appli .etapes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: etape; }
.carte-appli .etapes li { position: relative; padding-left: 36px; line-height: 1.55; counter-increment: etape; font-size: 14.5px; }
.carte-appli .etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.carte-appli .etapes li:only-child { padding-left: 0; }
.carte-appli .etapes li:only-child::before { display: none; }
.carte-appli .etapes li > svg { width: 18px; height: 18px; vertical-align: -4px; margin: 0 1px; }
.carte-appli .etapes .statut { margin-right: 6px; }
.carte-appli .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.carte-appli .actions .lien { margin-top: 0; }
.carte-appli.bandeau { border-left: 4px solid var(--vert); margin-bottom: 18px; }
body.espace-employe .carte-appli.bandeau { background: linear-gradient(135deg, #ffffff 0%, #eef7f7 100%); }
.colonne-compte { display: grid; gap: 18px; max-width: 520px; }
#cloche span { font-size: 12.5px; }
#cloche.actif svg { color: var(--bon-texte); }
body.espace-employe #cloche.actif svg { color: var(--peche); }