/* ————————————————————————————————————————————————————————
   LE DESIGN DU SITE « façon Skello » (04/11) — TOUT LE SITE.

   Billy : « tout le monde me dit que le meilleur design site est Skello ;
   lance un test en ajustant le design vers Skello, tout en gardant ça très
   lisible, car on a beaucoup de données — je préfère tout voir plutôt que de
   grosses icônes. » Testé d'abord sur Control / Ventes F&B, puis « Étendre à
   tout le site » le 04/11, livré le même soir ; puis « enlève [l'interrupteur],
   reste que sur Skello » : c'est LE design, sans retour à l'ancien.

   Relevé sur app.skello.io (Planning, Rapport, Employés) le 04/11 :
   - police Gellix (payante) → DM Sans, que Skello charge aussi ; chiffres
     tabulaires dans les colonnes ;
   - UN bleu d'action #2B66FE : onglet actif souligné, choix retenu, bouton
     principal en pilule ; pâle #EEF4FF pour ce qui est retenu sans crier ;
   - une BARRE D'OUTILS grise #F3F3F3 pleine largeur sous la navigation
     (période en boîte blanche bordée, choix, bouton principal à droite) ;
   - page blanche, cartes à filet #DDD et coins de 4 px, sans ombre ;
   - texte #1A1A1A, gris secondaire #727272, en-têtes en casse normale.
   Pas repris : la hauteur de ligne de Skello (52 px) ni ses grandes marges —
   on garde la densité du site (13 px, lignes serrées).

   Tout est borné par `:root[data-design="skello"]`, posé en dur sur <html>
   dans index.html. Ce fichier vient APRÈS style.css : à spécificité égale,
   il l'emporte. Une nouvelle brique qui invente un état « retenu » (fond
   encre) le reprend ici, en bleu. Hors champ : l'App Restaurant de l'iPad
   (maison.html, ses styles tactiles) et les apps des collaborateurs (apps/).
   ———————————————————————————————————————————————————————— */

/* ——— La police DM Sans, HÉBERGÉE ICI (04/11, Billy : « oui télécharge ») :
   public/polices/, police variable (graisse 400 à 700, taille optique
   9 à 40), latin + latin étendu, licence libre SIL OFL
   (public/polices/DM-Sans-OFL.txt). Plus d'appel à Google Fonts. ——— */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/polices/dm-sans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/polices/dm-sans-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;
}

/* ——— Les jetons ——— */
:root[data-design="skello"] {
  --sk-bleu: #2b66fe;
  --sk-bleu-fonce: #1d4ed8;
  --sk-bleu-pale: #eef4ff;
  --sk-bleu-voile: #f6f9ff;
  --sk-barre: #f3f3f3;
  --sk-filet: #dddddd;
  --sk-ligne: #efefef;

  --surface: #ffffff;
  --panel: #ffffff;
  --panel-2: #f7f7f8;
  --border: #e4e4e4;
  --border-fort: #d4d4d4;
  --ink: #1a1a1a;
  --ink-2: #4d4d4d;
  --ink-3: #727272;
  --serie-1: #2b66fe;
  /* Vert et rouge assez sombres pour rester lisibles en 10-11 px sur blanc. */
  --bon: #0e8a4f;
  --grave: #d92d20;
  --alerte: #b85c00;
  --r: 4px;
  --ombre: none;
  --fond-saisie: color-mix(in srgb, var(--serie-1) 7%, var(--panel));
}
/* Mode sombre : Skello n'en a pas — on garde les fonds sombres du site,
   on n'en change que le bleu et les filets. */
:root[data-design="skello"][data-theme="sombre"] {
  --sk-bleu: #5b8cff;
  --sk-bleu-fonce: #8fb0ff;
  --sk-bleu-pale: #1f2a44;
  --sk-bleu-voile: #1c2233;
  --sk-barre: #262625;
  --sk-filet: #3a3a37;
  --sk-ligne: #2e2e2c;
  --surface: #1a1a19;
  --panel: #1e1e1d;
  --panel-2: #262625;
  --border: #363634;
  --border-fort: #474744;
  --ink: #f2f1ee;
  --ink-2: #c4c2bc;
  --ink-3: #96948d;
  --serie-1: #5b8cff;
  --bon: #34d399;
  --grave: #f87171;
  --alerte: #fbbf24;
  --fond-saisie: color-mix(in srgb, var(--serie-1) 17%, var(--panel));
}

/* Les marges de la page (main), relues par les barres pleine largeur. */
:root[data-design="skello"] main { --sk-gx: 18px; --sk-gy: 16px; }
@media (max-width: 900px) { :root[data-design="skello"] main { --sk-gx: 14px; --sk-gy: 14px; } }
@media (max-width: 700px), (max-height: 520px) { :root[data-design="skello"] main { --sk-gx: 10px; --sk-gy: 8px; } }

/* ——— Police et page ——— */
:root[data-design="skello"] body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-optical-sizing: auto;
  background: var(--panel);
}
:root[data-design="skello"] :is(td, .tuile .valeur, .ctl-ecart, .ctl-part) { font-variant-numeric: tabular-nums; }

/* ——— La barre latérale : l'onglet ouvert en bleu, comme la nav de Skello ——— */
:root[data-design="skello"] .laterale { border-right-color: var(--sk-filet); }
:root[data-design="skello"] .laterale nav button { color: var(--ink-2); font-weight: 450; }
:root[data-design="skello"] .laterale nav button:hover { background: var(--panel-2); color: var(--ink); }
:root[data-design="skello"] .laterale nav button[aria-current="page"] {
  background: var(--sk-bleu-pale); color: var(--sk-bleu); font-weight: 600;
}
:root[data-design="skello"] .laterale .nav-groupe { color: var(--ink-3); letter-spacing: .06em; font-weight: 600; }
:root[data-design="skello"] .entite { border-color: var(--sk-filet); border-radius: 999px; background: var(--panel); }
:root[data-design="skello"] .entite-icone { border-radius: 50%; background: var(--sk-bleu); }

/* ——— La rangée du haut de chaque section (sous-nav : enseignes, ancres,
   trio de service) : la nav de Skello — du texte, l'actif souligné de bleu,
   un filet dessous, d'un bord à l'autre de la page. ——— */
:root[data-design="skello"] .vue > .sousnav:not(.sousnav-seule) {
  background: var(--panel);
  margin: calc(-1 * var(--sk-gy)) calc(-1 * var(--sk-gx)) 0;
  padding: 0 var(--sk-gx);
  border-bottom: 1px solid var(--sk-filet); gap: 2px; align-items: stretch;
}
:root[data-design="skello"] .vue > .sousnav:not(.sousnav-seule) > .entete-service,
:root[data-design="skello"] .vue > .sousnav:not(.sousnav-seule) > .scenario-choix { align-self: center; }
:root[data-design="skello"] .sousnav .scenario-choix { border-right-color: var(--sk-filet); }
:root[data-design="skello"] .sousnav-lien {
  display: inline-flex; align-items: center;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: none; color: var(--ink-3);
  padding: 11px 10px 9px; font-size: 13px; font-weight: 500;
}
:root[data-design="skello"] .sousnav-lien:hover { color: var(--ink); background: none; border-color: transparent; }
:root[data-design="skello"] .sousnav-lien[aria-current="true"] {
  background: none; color: var(--ink); border-bottom-color: var(--sk-bleu); font-weight: 600;
}

/* Les onglets soulignés (enseignes, onglets de carte, maîtres d'agents,
   enseignes d'Hygiène) : le même dessin, souligné de bleu. */
:root[data-design="skello"] :is(.ctl-enseignes, .hy-enseignes, .ag-maitres) button {
  border-bottom-width: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3);
}
:root[data-design="skello"] :is(.ctl-enseignes, .hy-enseignes, .ag-maitres, .ctl-onglets) button:hover { color: var(--ink); }
:root[data-design="skello"] :is(.ctl-enseignes, .hy-enseignes, .ag-maitres) button[aria-selected="true"],
:root[data-design="skello"] .ctl-onglets button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--sk-bleu); font-weight: 600;
}
:root[data-design="skello"] .ctl-enseignes { border-right-color: var(--sk-filet); }
:root[data-design="skello"] .sousnav .ctl-enseignes { margin: 8px 8px 8px 0; padding-right: 8px; align-items: stretch; }
:root[data-design="skello"] .sousnav .ctl-enseignes button { display: inline-flex; align-items: center; margin: -8px 0 -9px; padding: 11px 10px 9px; }
:root[data-design="skello"] .ctl-onglets { border-bottom-color: var(--sk-filet); gap: 6px; }
:root[data-design="skello"] .ctl-onglets button { font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding: 7px 4px 6px; margin-right: 8px; }

/* ——— LA BARRE D'OUTILS grise, pleine largeur (la signature de Skello) :
   la barre qui ouvre une section (ou le bandeau collé de Control / Charte). */
:root[data-design="skello"] .vue > .ctl-bandeau,
:root[data-design="skello"] .vue > .ctl-barre,
:root[data-design="skello"] .vue > div:not(.panneau):not(.ctl-bandeau) > .ctl-barre:first-child {
  background: var(--sk-barre); box-shadow: none;
  margin: 0 calc(-1 * var(--sk-gx)) 14px; padding: 7px var(--sk-gx);
  border-bottom: 1px solid var(--sk-filet);
}
/* Une section qui OUVRE sur sa barre d'outils (pas de rangée d'ancres) : la
   barre monte jusqu'en haut de la page. Dev et Projets la portent dans un
   conteneur (#devTableau, #poRacine) : même chose. */
:root[data-design="skello"] .vue > :is(.ctl-barre, .ctl-bandeau):first-child,
:root[data-design="skello"] .vue > div:not(.panneau):not(.ctl-bandeau):first-child > .ctl-barre:first-child,
:root[data-design="skello"] .vue > .sousnav-flottante + :is(.ctl-barre, .ctl-bandeau) { margin-top: calc(-1 * var(--sk-gy)); }
:root[data-design="skello"] .vue > .sousnav-flottante {
  position: relative; z-index: 31; padding-top: 0; margin-top: calc(-1 * var(--sk-gy) + 6px);
}
/* Deux barres d'outils qui se suivent n'en font qu'une, grise. */
:root[data-design="skello"] .vue > .ctl-barre + .ctl-barre { margin-top: -14px; border-top: 0; padding-top: 0; }
:root[data-design="skello"] .vue > .ctl-bandeau .ctl-barre { margin-bottom: 0; }
:root[data-design="skello"] .vue > .ctl-bandeau .ctl-barre + .ctl-barre { margin-top: 7px; }
:root[data-design="skello"] .ctl-barre { gap: 8px; }
:root[data-design="skello"] :is(.vue > .ctl-barre, .vue > .ctl-bandeau) .ctl-declencheur {
  height: 32px; padding: 0 10px; font-size: 12.5px; font-weight: 500;
}
:root[data-design="skello"] :is(.vue > .ctl-barre, .vue > .ctl-bandeau) .ctl-segmente button { height: 30px; padding: 0 10px; font-size: 12px; }
:root[data-design="skello"] :is(.vue > .ctl-barre, .vue > .ctl-bandeau) .bouton { height: 32px; }
/* Le champ de recherche d'une barre : boîte blanche à filet, comme la
   recherche des Employés de Skello. */
:root[data-design="skello"] .ctl-recherche { border-color: var(--sk-filet); border-radius: 4px; background: var(--panel); }
:root[data-design="skello"] .ctl-recherche:focus { border-color: var(--sk-bleu); outline: none; }

/* ——— Les déclencheurs (tout choix du site) : boîte blanche bordée ; un
   choix qui restreint passe en bleu pâle bordé de bleu, plus en noir. ——— */
:root[data-design="skello"] .ctl-declencheur { border-radius: 4px; border-color: var(--sk-filet); background: var(--panel); color: var(--ink); }
:root[data-design="skello"] .ctl-declencheur:hover:not(:disabled) { background: var(--panel); border-color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-declencheur svg { opacity: .7; }
:root[data-design="skello"] .ctl-declencheur.actif,
:root[data-design="skello"] #vue-control .ctl-declencheur.actif {
  background: var(--sk-bleu-pale); color: var(--sk-bleu-fonce); border-color: var(--sk-bleu); font-weight: 600;
}
:root[data-design="skello"] .ctl-declencheur.actif:hover { opacity: 1; background: var(--sk-bleu-pale); }
:root[data-design="skello"] .ctl-declencheur.actif .ctl-chevron { color: var(--sk-bleu); }

/* ——— Les boutons segmentés (TTC · HT, € · %, Jour · Semaine…) ——— */
:root[data-design="skello"] .ctl-segmente { border-color: var(--sk-filet); border-radius: 4px; background: var(--panel); }
:root[data-design="skello"] .ctl-segmente button + button { border-left-color: var(--sk-filet); }
:root[data-design="skello"] .ctl-segmente button { color: var(--ink-3); }
:root[data-design="skello"] .ctl-segmente button:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--ink); background: var(--sk-bleu-voile); }
:root[data-design="skello"] .ctl-segmente button[aria-pressed="true"] { background: var(--sk-bleu); color: #fff; font-weight: 600; }
/* Les pastilles de scénario (prévisionnel) : même langage. */
:root[data-design="skello"] .segment-scenarios { border-color: var(--sk-filet); }
:root[data-design="skello"] .segment.actif { background: var(--sk-bleu); color: #fff; }
/* La pastille du scénario Base est bleue elle aussi : un liseré blanc la garde visible. */
:root[data-design="skello"] .segment.actif .pastille { box-shadow: 0 0 0 1.5px #fff; }

/* ——— Les boutons : pilules ; le principal et l'enfoncé en bleu ——— */
:root[data-design="skello"] .bouton {
  border-radius: 999px; border-color: var(--sk-filet); color: var(--ink); font-weight: 500; padding: 5px 12px;
}
:root[data-design="skello"] .bouton:hover { border-color: var(--sk-bleu); color: var(--sk-bleu); }
:root[data-design="skello"] .bouton.discret { border-color: transparent; }
:root[data-design="skello"] .bouton.discret:hover { background: var(--sk-bleu-voile); border-color: transparent; }
:root[data-design="skello"] :is(.bouton.primaire, .bouton[aria-pressed="true"]) {
  background: var(--sk-bleu); border-color: var(--sk-bleu); color: #fff; font-weight: 600;
}
:root[data-design="skello"] :is(.bouton.primaire, .bouton[aria-pressed="true"]):hover { background: var(--sk-bleu-fonce); border-color: var(--sk-bleu-fonce); color: #fff; opacity: 1; }
:root[data-design="skello"] .bouton-actualiser { border-radius: 999px; border-color: var(--sk-filet); }
:root[data-design="skello"] .bouton-actualiser:hover { border-color: var(--sk-bleu); color: var(--sk-bleu); background: var(--panel); }
:root[data-design="skello"] .badge-pennylane { border-radius: 999px; border-color: var(--sk-filet); }
:root[data-design="skello"] .lien-bouton { color: var(--sk-bleu); }

/* ——— Les cartes : filet fin, coins de 4 px, pas d'ombre ——— */
:root[data-design="skello"] :is(.panneau, .tuile) { border-color: var(--sk-filet); box-shadow: none; }
:root[data-design="skello"] .panneau > h2,
:root[data-design="skello"] .panneau.serre h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
:root[data-design="skello"] .panneau > h2 { border-bottom-color: var(--sk-ligne); }
:root[data-design="skello"] .panneau > h2 .note,
:root[data-design="skello"] .panneau.serre h2 .note { font-size: 12px; font-weight: 400; color: var(--ink-3); }
/* Les tuiles d'indicateurs : étiquette en casse normale, comme Skello. */
:root[data-design="skello"] .tuile .libelle { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ink-3); }
:root[data-design="skello"] .tuile .valeur { font-weight: 600; letter-spacing: -.01em; }

/* ——— Les tableaux : en-têtes en casse normale (première lettre capitale),
   un filet très clair entre les lignes — c'est ce qui guide l'œil sur 15
   restaurants —, survol bleu voilé ; la densité du site est gardée. ——— */
:root[data-design="skello"] table { font-size: 12.5px; }
:root[data-design="skello"] th { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
:root[data-design="skello"] th::first-letter { text-transform: uppercase; }
:root[data-design="skello"] .th-sur { text-transform: none; letter-spacing: .01em; font-size: 10px; font-weight: 500; }
:root[data-design="skello"] thead th { border-bottom-color: var(--sk-filet); }
:root[data-design="skello"] tbody td { border-bottom: 1px solid var(--sk-ligne); }
:root[data-design="skello"] tbody tr:hover td,
:root[data-design="skello"] tbody tr:hover td:first-child { background: var(--sk-bleu-voile); }
:root[data-design="skello"] tr.section td { background: var(--panel-2); border-top-color: var(--sk-filet); color: var(--ink); }
:root[data-design="skello"] tr.section:hover td { background: var(--panel-2); }
:root[data-design="skello"] tr.total td { background: var(--panel-2); border-top-color: var(--border-fort); border-bottom: 0; font-weight: 700; }
:root[data-design="skello"] tr.total:hover td { background: var(--panel-2); }
:root[data-design="skello"] .ctl-fleche { color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-plier:hover { color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-ecart { font-weight: 600; }

/* ——— Les fenêtres de choix (période, listes, comparer) ——— */
:root[data-design="skello"] .ctl-popover { border-color: var(--sk-filet); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
:root[data-design="skello"] .ctl-raccourcis button { border-radius: 999px; background: var(--panel); border-color: var(--sk-filet); color: var(--ink-2); }
:root[data-design="skello"] .ctl-raccourcis button:hover { border-color: var(--sk-bleu); color: var(--sk-bleu); background: var(--panel); }
:root[data-design="skello"] :is(.ctl-raccourcis button[aria-pressed="true"], .ctl-raccourcis button.actif) { background: var(--sk-bleu-pale); border-color: var(--sk-bleu); color: var(--sk-bleu-fonce); }
:root[data-design="skello"] .ctl-cal-jour { border-radius: 999px; }
:root[data-design="skello"] .ctl-cal-jour:hover { background: var(--sk-bleu-voile); }
:root[data-design="skello"] .ctl-cal-jour.dedans { background: var(--sk-bleu-pale); border-radius: 0; }
:root[data-design="skello"] .ctl-cal-jour.borne { background: var(--sk-bleu); color: #fff; border-radius: 999px; }
:root[data-design="skello"] .ctl-choix { border-radius: 4px; border-color: var(--sk-filet); }
:root[data-design="skello"] .ctl-choix:hover:not(:disabled) { border-color: var(--sk-bleu); background: var(--panel); }
:root[data-design="skello"] .ctl-choix[aria-pressed="true"] { background: var(--sk-bleu-pale); border-color: var(--sk-bleu); color: var(--sk-bleu-fonce); }
:root[data-design="skello"] .ctl-choix[aria-pressed="true"] span { color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-case:hover { background: var(--sk-bleu-voile); }
:root[data-design="skello"] .ctl-case-coche { border-radius: 3px; }
:root[data-design="skello"] :is(.ctl-case[aria-pressed="true"], .ctl-case[aria-pressed="mixed"]) .ctl-case-coche { background: var(--sk-bleu); border-color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-case[aria-pressed="true"] .ctl-case-coche::after { border-color: #fff; }
:root[data-design="skello"] .soc-pilules .ctl-case[aria-pressed="true"] { border-color: var(--sk-bleu); }
:root[data-design="skello"] .ctl-resto { border-color: var(--sk-filet); }
:root[data-design="skello"] .ctl-resto[aria-pressed="true"] { background: var(--sk-bleu-pale); border-color: var(--sk-bleu); color: var(--sk-bleu-fonce); }
:root[data-design="skello"] .ctl-rappel { background: var(--sk-bleu); color: #fff; }

/* ——— Les fenêtres (modales) : coins de 8 px, filet, ombre douce ——— */
:root[data-design="skello"] .modale-boite { border-color: var(--sk-filet); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
:root[data-design="skello"] .modale-fond { background: rgba(17, 24, 39, .32); }

/* ——— Les autres états « retenus » du site, peints en encre noire jusqu'ici :
   même règle partout — retenu = bleu. ——— */
:root[data-design="skello"] .mois-chip.choisi { border-color: var(--sk-bleu); color: var(--sk-bleu-fonce); background: var(--sk-bleu-pale); }
:root[data-design="skello"] .mois-point.choisi .rond { outline-color: var(--sk-bleu); }
:root[data-design="skello"] .cs-cell.choisi { border-color: var(--sk-bleu); box-shadow: 0 0 0 1px var(--sk-bleu); }
:root[data-design="skello"] .dev-pas-journal.vue { background: var(--sk-bleu); border-color: var(--sk-bleu); color: #fff; }
:root[data-design="skello"] .agent-recos > li.actif .agent-num { background: var(--sk-bleu); color: #fff; }
:root[data-design="skello"] .agent-recos > li.actif .agent-discuter-reco { border-color: var(--sk-bleu); }
:root[data-design="skello"] .agent-msg.moi p { background: var(--sk-bleu); color: #fff; }
:root[data-design="skello"] .bo-jauge i { background: var(--sk-bleu); }
:root[data-design="skello"] .co-chip.actif { border-color: var(--sk-bleu); background: var(--sk-bleu-pale); color: var(--sk-bleu-fonce); }
:root[data-design="skello"] :is(.acc-tailles button[aria-pressed="true"], .acc-choix[aria-pressed="true"], .rc-filtre[aria-pressed="true"]) {
  background: var(--sk-bleu); border-color: var(--sk-bleu); color: #fff;
}
:root[data-design="skello"] .po-resultats button[aria-pressed="true"] { border-color: var(--sk-bleu); }
:root[data-design="skello"] .po-ligne .po-vers-action:hover { border-color: var(--sk-bleu); color: var(--sk-bleu); }