/* =====================================================================
   Habillage « 2026 » — la structure du thème, les couleurs du client.
   ---------------------------------------------------------------------
   Tiré de themes/inservconsul-2026.css, dont on garde la MISE EN PAGE et la
   FINITION (rayons, ombres, grille bento, pilules, hiérarchie des chiffres)
   et dont on JETTE la palette et les polices.

   C'est la décision de JFB, et c'est le cœur du produit : chaque restaurant
   achète SA marque. Le thème d'origine posait --navy, --lime, Fraunces et
   Inter en dur ; branché tel quel, Café Eden perdait son vert et sa Wedding
   Gothic sur sa propre app. Ici, pas une seule couleur n'est écrite : tout
   dérive des variables que app.js pose sur :root depuis client.THEMES.

   INERTE PAR DÉFAUT. Tout est sous [data-habillage="2026"], posé sur <html>
   d'après CLIENT_HABILLAGE. Sans la variable d'environnement, ce fichier est
   téléchargé et ne s'applique à rien — c'est ce qui permet de le déployer
   partout et de ne l'allumer qu'au Lab. Le retour en arrière est une variable
   à retirer, pas un déploiement.

   CLAIR SEULEMENT, POUR L'INSTANT. Le thème d'origine proposait un mode
   sombre. La feuille existante compte 36 blancs en dur sur 312 règles : un
   mode sombre partiel donnerait du texte blanc sur fond blanc quelque part.
   C'est un chantier à part, pas un effet de bord de celui-ci.
   ===================================================================== */

[data-habillage="2026"]{
  /* Formes — la seule chose que le thème apporte en propre. */
  --h-rayon:22px;
  --h-rayon-sm:16px;
  --h-pilule:999px;

  /* Couleurs DÉRIVÉES de la charte du client. color-mix garde la teinte du
     restaurant et n'en règle que l'intensité : le bleu d'IN-Serv donne un voile
     bleu, le vert d'Eden un voile vert. Aucune teinte n'est introduite ici. */
  --h-voile:color-mix(in srgb, var(--vert) 8%, transparent);
  --h-voile-fort:color-mix(in srgb, var(--vert) 14%, transparent);
  --h-alerte-voile:color-mix(in srgb, var(--terracotta) 12%, transparent);

  /* Ombres bâties sur l'encre du client plutôt que sur un noir générique —
     l'app en avait déjà l'idée avec --ombre, on la pousse d'un cran. */
  --h-ombre:0 1px 2px color-mix(in srgb, var(--encre) 6%, transparent),
            0 10px 26px -10px color-mix(in srgb, var(--vert) 22%, transparent);
  --h-ombre-haute:0 2px 6px color-mix(in srgb, var(--encre) 8%, transparent),
                  0 22px 48px -18px color-mix(in srgb, var(--vert) 34%, transparent);
}

/* ---------- Fond : un halo dans la couleur du restaurant ----------
   Le thème d'origine posait un radial-gradient bleu nuit. Même geste, teinte
   du client, et beaucoup plus discret : ce fond est derrière des tableaux de
   chiffres qu'on lit huit heures par jour. */
/* PAS DE « fixed » ICI, ET C'EST UN CORRECTIF, PAS UN OUBLI.
   Le thème d'origine posait « background: … fixed », et je l'avais repris. Sur
   iPhone, un fond fixe est calé sur la hauteur de la FENÊTRE — laquelle change à
   chaque fois que la barre d'adresse se rétracte ou revient. Le dégradé se
   redimensionne donc et saute à chaque changement de sens de défilement : JFB l'a
   décrit comme une app « moins stable visuellement » depuis le nouveau CSS.
   Sans « fixed », le dégradé est peint sur la page et défile avec elle. Le halo
   reste en haut à droite, là où on le veut, et plus rien ne bouge. */
[data-habillage="2026"] body{
  background:
    radial-gradient(120% 700px at 100% 0,
      color-mix(in srgb, var(--sauge-pale) 70%, var(--fond)) 0%,
      var(--fond) 100%) no-repeat;
  /* Le dégradé ne fait que 700 px de haut : en dessous, c'est la couleur unie du
     client. Une couleur de repli explicite, sinon le bas d'une longue page reste
     blanc là où le dégradé s'arrête. */
  background-color:var(--fond);
}

/* ---------- Le bandeau ----------
   Un aplat en dégradé à 135°, et rien d'autre : c'est plat, et la signature de
   l'éditeur y pesait autant que le nom du restaurant.

   PAS DE overflow:hidden ICI, malgré les coins arrondis. Le panneau du menu est un
   enfant absolu du bandeau (« top:calc(100% + 10px) ») : le masquer le couperait
   net et la navigation deviendrait inutilisable. Les coins arrondis suffisent, ils
   rognent le fond sans toucher aux enfants. */
[data-habillage="2026"] header{
  border-radius:0 0 var(--h-rayon) var(--h-rayon);
  /* Un halo dans la teinte claire du client, posé en haut à droite — d'où vient la
     lumière partout ailleurs dans l'app. C'est ce qui creuse l'aplat. */
  background:
    radial-gradient(85% 130% at 85% -20%,
      color-mix(in srgb, var(--sauge) 30%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, var(--vert) 0%, var(--vert-fonce) 100%);
  box-shadow:0 12px 32px -14px color-mix(in srgb, var(--vert-fonce) 85%, transparent);
}
/* Un filet clair au ras du bord bas : sépare le bandeau du contenu sans tracer
   une ligne franche, qui durcirait. */
[data-habillage="2026"] header::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, #fff 22%, transparent) 35%,
    color-mix(in srgb, #fff 22%, transparent) 65%, transparent);
  pointer-events:none;
}

/* Le nom du restaurant prend le pas. C'est LUI qu'on doit lire en entrant — sur une
   machine qui fait tourner deux instances, c'est ce qui évite de saisir l'inventaire
   chez le mauvais. */
[data-habillage="2026"] header .nom-client{
  font-size:19px;
  letter-spacing:.05em;
}

/* La signature de l'éditeur redevient une signature. Elle occupait une rangée
   entière du bandeau, en capitales de 23 px, et rivalisait avec le nom du client :
   deux titres de même poids, dont un seul intéresse la personne qui travaille. */
[data-habillage="2026"] header .titre h1{
  font-size:13px;
  font-weight:600;
  letter-spacing:.28em;
  opacity:.68;
}
/* OPACITÉ 0,55, ET C'EST UN PLANCHER MESURÉ, PAS UN GOÛT. La signature tombe sur la
   partie du bandeau que le halo éclaircit — le pire cas pour du blanc translucide.
   Mesuré là : 0,40 donnait 2,45:1, sous le seuil de 3:1, pour du texte de 9,5 px.
   0,55 donne 3,25:1. Discret n'est pas la même chose qu'illisible ; si on veut
   l'effacer davantage, on réduit la taille ou on l'enlève, on ne le délave pas. */
[data-habillage="2026"] header .titre p{
  margin-top:1px;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.55;
}

/* Boutons du bandeau : la pilule blanche reste — c'est le meilleur contraste sur un
   fond sombre, et ces boutons servent en cuisine, parfois les mains occupées. On
   n'ajoute que le détaché. */
[data-habillage="2026"] header nav button,
[data-habillage="2026"] header .compte button{
  box-shadow:0 2px 8px -2px color-mix(in srgb, var(--vert-fonce) 60%, transparent);
}
/* « Quitter » n'est pas une action qu'on veut mettre en avant à côté de « Menu ».
   Un bouton fantôme : présent, lisible, mais qui ne réclame pas le clic. */
[data-habillage="2026"] header .compte button{
  background:color-mix(in srgb, #fff 14%, transparent);
  /* inherit, pas #fff : la couleur vient de « header{color:…} », donc du thème.
     « button.sec » impose var(--vert), qui serait illisible sur ce fond translucide
     sombre — il faut donc bien redéclarer, mais en suivant le bandeau plutôt qu'en
     écrivant une couleur en dur. Un thème à bandeau clair resterait lisible. */
  color:inherit;
  border:1px solid color-mix(in srgb, #fff 30%, transparent);
  box-shadow:none;
}

/* Le panneau du menu suit les cartes. */
[data-habillage="2026"] .menu-panneau{
  border-radius:var(--h-rayon);
  box-shadow:var(--h-ombre-haute);
}

/* ---------- Cartes ----------
   Rayon plus généreux, ombre plus profonde, bordure plus fine. S'applique à
   TOUS les écrans : une seule carte redessinée au milieu d'anciennes ferait
   désordre. */
/* « .boite » est la carte de l'écran de connexion — elle ne porte pas la classe
   « card », et sans elle le premier écran de l'app gardait un rayon de 16 px sous
   des champs et des boutons en pilule. C'est la première chose que voit la personne
   qui ouvre l'app le matin. */
[data-habillage="2026"] .card,
[data-habillage="2026"] .boite{
  border-radius:var(--h-rayon);
  box-shadow:var(--h-ombre);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition:box-shadow .25s, transform .18s;
}
/* SOUS @media (hover:hover) — sinon le survol s'applique au TOUCHER.
   Sur un écran tactile, « :hover » se déclenche à l'effleurement et RESTE collé
   jusqu'à ce qu'on touche ailleurs : la carte gardait son ombre levée sans raison,
   et une deuxième carte s'allumait au passage suivant. À l'usage ça ressemble à une
   interface qui bouge toute seule. La règle ne s'adresse donc qu'aux appareils qui
   savent vraiment survoler. */
@media (hover:hover) and (pointer:fine){
  [data-habillage="2026"] .card:hover{ box-shadow:var(--h-ombre-haute); }
}

/* ---------- Sur-titres de section ----------
   « Aujourd'hui », « Mois en cours », « Stock et factures » deviennent des
   eyebrows : plus petits, espacés, estompés. Le chiffre passe devant le titre,
   ce qui est l'ordre dans lequel on lit un tableau de bord. */
[data-habillage="2026"] #tdb_corps h4{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
  margin:26px 2px 10px;
}
[data-habillage="2026"] #tdb_corps h4:first-child{ margin-top:8px; }

/* ---------- Rangées de tuiles ----------
   FLEX, PAS GRILLE — essayé, mesuré, abandonné. Une grille en
   repeat(auto-fit, minmax(148px,1fr)) fixe le nombre de colonnes d'après la
   LARGEUR : 713 px donnaient quatre colonnes, et le groupe « Mois en cours »,
   qui compte trois tuiles plus la carte food cost, laissait une case vide au
   bout de la rangée. Le flex répartit d'après le NOMBRE d'éléments et remplit
   toujours la ligne. C'est déjà ce que faisait la feuille d'origine ; on ne
   garde que l'écart et l'alignement. */
[data-habillage="2026"] .kpis{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
/* Base à 128 px, et le chiffre est mesuré, pas choisi à l'œil. Sur un iPhone de
   390 px, la carte laisse 304 px utiles : deux tuiles de 148 px plus l'écart de
   10 en réclamaient 306 et tombaient à UNE PAR RANGÉE — le tableau de bord
   devenait une colonne de onze pavés qu'il faut faire défiler. À 128, deux
   tiennent (266 px) et trois ne tiennent pas (404 px) : deux par rangée sur
   téléphone, quatre sur écran large. */
[data-habillage="2026"] .kpis > .kpi{ flex:1 1 128px; }

/* ---------- Tuiles de chiffre ----------
   Hiérarchie inversée par rapport à l'existant : le LIBELLÉ devient une
   capitale discrète, le CHIFFRE prend toute la place. C'est le seul vrai
   apport du thème sur cet écran.
   Aligné à gauche : une colonne de chiffres se compare à l'œil quand les
   unités sont alignées, pas quand chaque nombre est centré sur sa tuile. */
[data-habillage="2026"] .kpi{
  min-width:0;
  padding:14px 16px 16px;
  text-align:left;
  border-radius:var(--h-rayon-sm);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:var(--creme-pale);
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--sauge-pale) 55%, #fff) 0%,
    var(--creme-pale) 100%);
  box-shadow:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--gris);
  transition:border-color .2s, transform .15s;
}
/* L'HABILLAGE DONNE LA TAILLE DE BASE, PAS LA TAILLE FINALE. En écrivant
   « font-size » ici, il écrasait le plafond de la page — celui qui empêche un
   nombre de déborder de sa tuile — puisque les deux sélecteurs pèsent le même
   poids et que ce fichier est chargé APRÈS. Il pose donc la variable, et la page
   garde la seule règle qui calcule. Un habillage met en page, il ne refait pas le
   calcul de la charte. */
[data-habillage="2026"] .kpi b{
  --kpi-taille:clamp(24px, 3.4vw, 33px);
  letter-spacing:-.02em;
  /* Chiffres à chasse fixe : sans ça, « 1 » est plus étroit que « 8 » et une
     colonne de montants ondule. */
  font-variant-numeric:tabular-nums;
  margin-bottom:5px;
  color:var(--vert);
}
[data-habillage="2026"] .kpi[role="button"]:active,
[data-habillage="2026"] .kpi[tabindex]:active{ transform:scale(.98); }

/* ---------- La tuile food cost ----------
   Le thème d'origine peignait ce chiffre en rouge EN PERMANENCE
   (.card--hero .kpi__value{color:var(--warn)}). Dans cette app le rouge veut
   dire « dépassement » : un food cost de 28 % sous une cible de 32 % doit se
   lire comme une bonne nouvelle. La couleur suit donc l'écart à la cible, et
   c'est app.js qui la décide — voir kpiFoodCost(). */
/* Sélecteur volontairement aussi profond que « .kpis > .kpi » ci-dessus : à
   spécificité égale c'est le dernier qui gagne, et il faut que ce soit celui-ci.
   Écrit « .kpi--hero » seul, il perdait 2-3 contre 3-0 et la carte restait en
   rang avec les autres au lieu de prendre sa ligne. */
[data-habillage="2026"] .kpis > .kpi--hero{
  /* Une ligne à elle seule, quelle que soit la largeur : c'est LE chiffre de
     l'écran, il ne se met pas en rang avec les autres. */
  flex:1 0 100%;
  padding:18px;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--h-voile), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--sauge-pale) 55%, #fff), var(--creme-pale));
  border-color:color-mix(in srgb, var(--vert) 22%, transparent);
}
[data-habillage="2026"] .kpis > .kpi--hero.depasse{
  background:
    radial-gradient(120% 150% at 100% 0%, var(--h-alerte-voile), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--terracotta-pale) 70%, #fff), var(--creme-pale));
  border-color:color-mix(in srgb, var(--terracotta) 26%, transparent);
}
[data-habillage="2026"] .kpis > .kpi--hero b{ font-size:clamp(34px, 6vw, 46px); }
[data-habillage="2026"] .kpis > .kpi--hero.depasse b{ color:var(--terracotta); }

/* La jauge. --part est la position du réel, --cible celle du prévu, toutes
   deux en pourcentage d'une échelle fixe posée par app.js.
   Échelle FIXE et non ajustée au mois : une jauge dont la graduation bouge
   d'un mois à l'autre ne se compare pas, et c'est une comparaison qu'on vient
   chercher ici. */
[data-habillage="2026"] .jauge{
  position:relative;
  display:block;
  height:9px;
  margin-top:14px;
  border-radius:var(--h-pilule);
  background:color-mix(in srgb, var(--vert) 10%, transparent);
  overflow:visible;
}
[data-habillage="2026"] .jauge i{
  display:block;
  height:100%;
  width:var(--part, 0%);
  border-radius:var(--h-pilule);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--vert) 70%, var(--sauge)), var(--vert));
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
[data-habillage="2026"] .kpis > .kpi--hero.depasse .jauge i{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--terracotta) 55%, var(--sauge)), var(--terracotta));
}
/* Le repère de cible. Un trait, pas une couleur de fond : il doit rester
   lisible que la barre soit devant ou derrière lui. */
[data-habillage="2026"] .jauge u{
  position:absolute;
  left:var(--cible, 100%);
  top:-5px;
  width:2px;
  height:19px;
  border-radius:2px;
  background:var(--encre);
  opacity:.45;
}
[data-habillage="2026"] .jauge-note{
  display:block;
  margin-top:9px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--gris);
}

/* ---------- Alertes en pilules ----------
   L'encadré à filet gauche devient une pastille, et elles se suivent en ligne
   au lieu d'empiler des bandeaux pleine largeur au-dessus du tableau de bord.

   ELLES REVIENNENT À LA LIGNE, ELLES NE DÉFILENT PAS. Premier essai : défilement
   horizontal, texte sur une seule ligne, coupé à l'ellipse. Sur l'écran d'essai,
   « Opérations cuisine — 3 préparation(s) à produire sans recette liée :
   Vinaigrette maison, S… » s'arrêtait là. Une alerte tronquée est pire qu'une
   alerte laide : ce qui est caché, c'est justement ce qu'il faut aller corriger,
   et rien n'indique qu'il manque du texte. Une alerte se lit en entier. */
[data-habillage="2026"] #tdb_alertes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:2px 2px 6px;
}
[data-habillage="2026"] #tdb_alertes .avert{
  flex:0 1 auto;
  margin-top:0;
  padding:9px 15px;
  border-left:0;
  border:1px solid color-mix(in srgb, var(--terracotta) 30%, transparent);
  border-radius:var(--h-rayon-sm);
  background:var(--terracotta-pale);
  font-size:12.5px;
  line-height:1.45;
}
[data-habillage="2026"] #tdb_alertes .ok{
  padding:9px 14px;
  border-radius:var(--h-pilule);
  border:1px solid color-mix(in srgb, var(--vert) 24%, transparent);
  background:var(--sauge-pale);
}

/* ---------- Pastilles ---------- */
[data-habillage="2026"] .pastille{
  border-radius:var(--h-pilule);
  padding:4px 10px;
}

/* ---------- Bouton flottant du consultant ----------
   Dégradé bâti sur les deux verts du client, pas sur le bleu du thème.

   TRANSLUCIDE, PARCE QU'IL CACHE DES CHIFFRES. Il est fixe en bas à droite, et sur
   téléphone il se pose sur la dernière tuile de la rangée — JFB l'a vu masquer des
   données. Opaque, il coupe une partie de l'écran en permanence.

   82 %, ET C'EST UN PLANCHER MESURÉ. Le pire cas est le bouton posé sur une carte
   blanche : à 0,80 le libellé blanc tient 4,65:1, à 0,75 il tombe à 4,12 et passe
   sous le seuil de 4,5 exigé d'un texte de cette taille. On s'arrête donc là où le
   bouton reste lisible — un bouton qu'on ne lit plus n'a rien réglé. Le flou
   d'arrière-plan fait le reste : on distingue ce qu'il y a dessous sans que le
   libellé se brouille.

   Au survol et à l'appui il redevient plein : au moment où on le vise, c'est LUI
   qu'on regarde, plus ce qu'il y a derrière. */
[data-habillage="2026"] .flottant{
  border-radius:var(--h-pilule);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--vert) 82%, transparent),
    color-mix(in srgb, var(--vert-fonce) 82%, transparent));
  border:1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow:0 10px 28px -12px color-mix(in srgb, var(--vert) 55%, transparent);
  transition:transform .15s, box-shadow .25s, background .2s;
}
/* LE FLOU SEULEMENT HORS TACTILE. Un élément en « position:fixed » portant un
   backdrop-filter est recomposé à CHAQUE IMAGE du défilement, et c'est sur
   téléphone que ça se paie — l'app y est devenue « moins stable visuellement ».
   La translucidité, elle, ne coûte rien par image et c'est elle qui fait le travail
   demandé : voir les chiffres au travers. Le flou n'était qu'un confort de lecture
   du libellé, et 82 % d'opacité y suffisent. */
@media (hover:hover) and (pointer:fine){
  [data-habillage="2026"] .flottant{
    backdrop-filter:blur(10px) saturate(1.15);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
  }
}
[data-habillage="2026"] .flottant:focus-visible,
[data-habillage="2026"] .flottant:active{
  background:linear-gradient(135deg, var(--vert), var(--vert-fonce));
}
/* Le survol, là encore, seulement là où il existe vraiment. Au toucher il restait
   collé et le bouton demeurait opaque — donc il masquait de nouveau les chiffres,
   ce qu'on venait justement de corriger. */
@media (hover:hover) and (pointer:fine){
  [data-habillage="2026"] .flottant:hover{
    background:linear-gradient(135deg, var(--vert), var(--vert-fonce));
  }
}
[data-habillage="2026"] .flottant:active{ transform:translateY(1px) scale(.97); }

/* Le bouton « revenir au début de la section », à gauche du consultant. Même
   traitement que son voisin — translucide, teinte du client — parce que deux
   boutons côte à côte qui ne se ressemblent pas donnent l'impression que l'un des
   deux est un corps étranger. Il reste CARRÉ, à coins adoucis : c'est ce qui le
   distingue au pouce sans le regarder. */
[data-habillage="2026"] .flottant-carre{
  border-radius:16px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--vert) 82%, transparent),
    color-mix(in srgb, var(--vert-fonce) 82%, transparent));
  border:1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow:0 10px 28px -12px color-mix(in srgb, var(--vert) 55%, transparent);
  transition:transform .15s, background .2s;
}
[data-habillage="2026"] .flottant-carre:active{ transform:translateY(1px) scale(.94); }
@media (hover:hover) and (pointer:fine){
  [data-habillage="2026"] .flottant-carre{
    backdrop-filter:blur(10px) saturate(1.15);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
  }
  [data-habillage="2026"] .flottant-carre:hover{
    background:linear-gradient(135deg, var(--vert), var(--vert-fonce));
  }
}

/* ---------- Boutons ---------- */
/* Le carré est exclu : la pilule le rendrait rond, et c'est sa FORME qui le
   distingue de son voisin quand on le vise sans regarder. */
[data-habillage="2026"] button:not(.flottant-carre){ border-radius:var(--h-pilule); }

/* ---------- La colonne de navigation ----------
   UNE ENTREE DE MENU N'EST PAS UN BOUTON D'ACTION. La pilule convient a « Enregistrer »,
   pose seul au bout d'un formulaire ; empilee douze fois dans une colonne, elle donne des
   gelules qui se touchent. JFB : « je veux pas de boutons rond, max les coins arrondis
   mais pas plus […] ca fait pas 2026 pour un menu ».

   POURQUOI CETTE REGLE VIT ICI ET NON DANS LA PAGE. Je l'y avais ecrite d'abord, et elle
   n'a JAMAIS ete appliquee : « .menu-panneau button » et « [data-habillage] button:not(…) »
   ont la MEME specificite (0,1,1), et cette feuille est chargee APRES le <style> de la
   page — a egalite, la derniere gagne. Les entrees sont donc restees des pilules, et le
   correctif que j'annoncais n'existait pas. La decision d'arrondir appartient a
   l'habillage ; sa contre-decision aussi.

   L'AIR PLUTOT QUE LA FORME. Ce qui fait qu'une colonne se lit en 2026, ce n'est pas un
   rayon : c'est l'espace entre les lignes, un texte qui ne crie pas, et un etat courant
   qui se signale sans peindre. */
@media (min-width:1100px){
  [data-habillage="2026"] .menu-panneau{ border-radius:0; box-shadow:none; }
}

/* ---------- LE MENU, MÊME ALLURE SUR TÉLÉPHONE QUE SUR ORDINATEUR ----------
   JFB, capture à l'appui : « une fois ouvert, le menu cellulaire doit suivre celui
   du web ; regarde, c'est coupé et illisible ».

   CES RÈGLES ÉTAIENT ENFERMÉES DANS « @media (min-width:1100px) », et ça n'avait
   aucune raison d'être : une icône devant « Inventaire » aide au moins autant le
   pouce que la souris — davantage, même, puisqu'on y lit moins. Le déroulant du
   téléphone n'héritait donc ni des pictogrammes, ni du corps de 14 px, ni des
   intertitres discrets : il retombait sur le style de base de la page, plus gras et
   plus serré, et ne ressemblait plus du tout à la colonne de gauche.

   Ce qui RESTE propre au bureau tient en une ligne, juste au-dessus : la colonne
   perd son rayon et son ombre parce qu'elle n'est plus une carte posée sur la page,
   elle en est le bord. Sur téléphone, le panneau flotte : il garde les siens. */
/* LA COLONNE EST SOMBRE, ET SA COULEUR VIENT DE LA CHARTE. Ces règles ne font que
   régler la TAILLE et le POIDS : les teintes passent toutes par « --rail-* », posés
   dans la charte du restaurant. Ma version précédente écrivait « var(--encre) »
   ici — une encre foncée, illisible dès que le fond l'est aussi. Un habillage qui
   choisit une couleur finit toujours par en choisir une mauvaise. */
[data-habillage="2026"] .menu-panneau button{
  border-radius:8px;
  padding:11px 12px;
  font-size:14px; font-weight:500; letter-spacing:.005em;
  color:color-mix(in srgb, var(--rail-encre) 88%, transparent);
}
[data-habillage="2026"] .menu-panneau button[aria-current="true"]{
  color:var(--rail-vif); font-weight:700;
}
/* Les intertitres rangent, ils ne s'annoncent pas. */
[data-habillage="2026"] .menu-titre{
  font-size:10px; letter-spacing:.12em;
  color:color-mix(in srgb, var(--rail-sourd) 85%, transparent);
}
/* Un filet entre les deux familles, plutot qu'un blanc qu'on prend pour la fin de la
   liste. */
[data-habillage="2026"] .menu-titre:not(:first-child){
  border-top:1px solid var(--rail-filet);
  padding-top:14px;
}
/* La colonne n'est plus une carte : elle est le bord de la page. */

/* ---------- Les pictogrammes de la colonne ----------
   JFB, sa référence sous les yeux : une icône devant chaque entrée. Elle aide à
   repérer sans lire — au bout d'une semaine, on vise la forme, plus le mot.

   PAR « ::before » ET NON DANS LE HTML, et ce n'est pas un choix de style. Le script
   réécrit le texte du bouton « Rapport » pendant la génération — il lit
   « btnRapport.textContent », le remplace par « Préparation… », puis le restaure.
   Une balise <svg> posée dans le bouton serait effacée au premier clic et ne
   reviendrait jamais. Le contenu généré, lui, ne dépend pas du texte.

   EN MASQUE, PAS EN IMAGE : la couleur vient de « currentColor », donc l'icône suit
   le texte — grise au repos, verte quand l'écran est ouvert, sans qu'on redessine
   huit fichiers. Et le trait plutôt que le plein : à 17 px, un pictogramme plein
   devient une tache.

   Encodées en clair plutôt qu'en base64 : le fichier reste lisible et une icône se
   corrige à la main sans la décoder. */
[data-habillage="2026"] .menu-panneau button{
  display:flex; align-items:center; gap:10px;
}
/* ET LA GARDE, SANS LAQUELLE CE « display:flex » RALLUME LES BOUTONS MASQUÉS.
   La page pose bien « .menu-panneau button[hidden]{display:none} », mais les deux
   sélecteurs pèsent exactement le même poids — (0,2,1) de part et d'autre — et ce
   fichier est chargé APRÈS : à égalité, le dernier gagne. La garde de la page
   serait donc défaite ici, et sur ordinateur seulement, ce qui est le pire cas de
   figure : le défaut ne se voit pas sur le téléphone où l'on teste.
   Un sélecteur de plus suffit à trancher. */
[data-habillage="2026"] .menu-panneau button[hidden]{ display:none; }
[data-habillage="2026"] .menu-panneau button::before{
  content:""; flex:none; width:17px; height:17px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  opacity:.75;
  /* LE REPLI, ET C'EST LUI LE VRAI DÉFAUT. Ce bloc de 17 px est PLEIN — sa couleur
     est « currentColor » — et c'est le masque qui lui donne sa forme. Un bouton
     sans masque restait donc un CARRÉ NOIR dans le menu. JFB, capture à l'appui :
     « c'est laid, il y a encore un carré noir avant ? » Les deux écrans ajoutés
     hier n'avaient pas leur icône ici, et le fichier d'habillage ne pouvait pas
     le deviner.
     Un point discret par défaut : le prochain écran ajouté gardera l'alignement
     des libellés au lieu de planter une tache dans la colonne. Une icône qui
     manque doit se voir comme un manque, jamais comme une faute d'impression. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23000'/%3E%3C/svg%3E");
}
/* L'écran ouvert : l'icône reprend toute sa densité, comme son libellé. */
[data-habillage="2026"] .menu-panneau button[aria-current="true"]::before{ opacity:1; }
[data-habillage="2026"] .menu-panneau #btn_tb::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}
/* LE DOLLAR. JFB : « le logo pour ventes doit etre un $ ». C'est l'ecran ou le
   chiffre d'affaires s'ecrit : le signe se repere avant que le mot ne se lise. */
[data-habillage="2026"] .menu-panneau #btn_saisie_ventes::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M16.5 6H10a3.25 3.25 0 000 6.5h4a3.25 3.25 0 010 6.5H7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M16.5 6H10a3.25 3.25 0 000 6.5h4a3.25 3.25 0 010 6.5H7'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_ventes::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_rapport::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M8.5 9.5L12 13l3.5-3.5'/%3E%3Cpath d='M4 15v4a2 2 0 002 2h12a2 2 0 002-2v-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M8.5 9.5L12 13l3.5-3.5'/%3E%3Cpath d='M4 15v4a2 2 0 002 2h12a2 2 0 002-2v-4'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_ops::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_inventaire::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_recettes::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 012-2h5v18H6a2 2 0 01-2-2V5z'/%3E%3Cpath d='M20 5a2 2 0 00-2-2h-5v18h5a2 2 0 002-2V5z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 012-2h5v18H6a2 2 0 01-2-2V5z'/%3E%3Cpath d='M20 5a2 2 0 00-2-2h-5v18h5a2 2 0 002-2V5z'/%3E%3C/svg%3E");
}
/* LA RACINE CARREE. JFB : « table de conversion un signe de racine carreee ».
   Le radical dit « on convertit » sans avoir a ecrire d'unite, et aucune des
   autres icones du menu ne lui ressemble. */
[data-habillage="2026"] .menu-panneau #btn_conv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5h3.4l3.3 8.5L15 3.5h6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5h3.4l3.3 8.5L15 3.5h6'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_allerg::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3L2.6 17.6a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3L2.6 17.6a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_commandes::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a1 1 0 011-1h9v10H4a1 1 0 01-1-1V7z'/%3E%3Cpath d='M13 10h4l3 3v3h-7v-6z'/%3E%3Ccircle cx='7.5' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a1 1 0 011-1h9v10H4a1 1 0 01-1-1V7z'/%3E%3Cpath d='M13 10h4l3 3v3h-7v-6z'/%3E%3Ccircle cx='7.5' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .menu-panneau #btn_comptes::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 20v-1.2A4.3 4.3 0 017.8 14.5h2.4a4.3 4.3 0 014.3 4.3V20'/%3E%3Cpath d='M16.2 5.3a3.2 3.2 0 010 5.9'/%3E%3Cpath d='M17.5 14.6h.7a4.3 4.3 0 014.3 4.3V20'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 20v-1.2A4.3 4.3 0 017.8 14.5h2.4a4.3 4.3 0 014.3 4.3V20'/%3E%3Cpath d='M16.2 5.3a3.2 3.2 0 010 5.9'/%3E%3Cpath d='M17.5 14.6h.7a4.3 4.3 0 014.3 4.3V20'/%3E%3C/svg%3E");
}
[data-habillage="2026"] .kpi,
[data-habillage="2026"] input,
[data-habillage="2026"] select,
[data-habillage="2026"] textarea{ border-radius:var(--h-rayon-sm); }

/* ---------- Les bascules de période : un sélecteur segmenté ----------
   « Jour / Semaine / Mois » et « Semaine / Mois / Année / Tout » sont des choix
   EXCLUSIFS — un seul est vrai à la fois. Trois pilules détachées disent le
   contraire : elles ont l'air de trois actions indépendantes, et il faut lire la
   couleur pour comprendre qu'on se trouve DANS l'une d'elles plutôt que devant trois
   boutons. Posées dans une même gouttière, l'appartenance se voit avant qu'on lise.

   VISÉES PAR aria-label="Période", ET C'EST VOULU. Les deux autres groupes .filtres
   de l'app — « Filtre » et « Filtrer par type » — contiennent autre chose que des
   bascules : une liste de types injectée par le script, et le bouton « + Nouvelle
   recette ». Une gouttière les enfermerait avec, et le bouton d'ajout se lirait comme
   un quatrième onglet. L'attribut décrit exactement les groupes qui sont des
   sélecteurs, et il est déjà là pour les lecteurs d'écran : on ne fabrique pas une
   classe pour redire ce que le balisage dit déjà.

   Aucune couleur nouvelle : la gouttière est le voile du client (--h-voile, dérivé de
   --vert), et le bouton actif garde le remplissage que la charte lui donne déjà. */
[data-habillage="2026"] .filtres[aria-label="Période"]{
  gap:0;
  padding:3px;
  border-radius:var(--h-pilule);
  background:var(--h-voile);
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
/* Au repos, plus de contour ni de fond : c'est la gouttière qui porte la forme.
   Deux cadres emboîtés — celui du groupe et celui de chaque bouton — se lisent comme
   du bruit, et c'est ce qui donne l'air « assemblé à la va-vite ». */
[data-habillage="2026"] .filtres[aria-label="Période"] button{
  border-color:transparent;
  background:transparent;
}
/* L'onglet courant garde son remplissage et se soulève au-dessus de la gouttière.
   IL FAUT LE REDÉCLARER, ce n'est pas une redondance. La règle de base qui le remplit
   est « .filtres button[aria-pressed="true"] », de spécificité (0,2,1) ; la règle
   ci-dessus, qui vide le fond des onglets au repos, pèse (0,3,1) et l'emportait sur
   elle — l'onglet actif perdait sa couleur et le sélecteur ne disait plus où l'on
   était. Vu au banc d'essai, pas dans le code : à la lecture, « je ne touche qu'au
   repos » semblait vrai. La teinte, elle, reste var(--vert), donc celle du client. */
[data-habillage="2026"] .filtres[aria-label="Période"] button[aria-pressed="true"]{
  background:var(--vert);
  border-color:var(--vert);
  box-shadow:0 1px 3px color-mix(in srgb, var(--vert) 40%, transparent);
}
/* Le survol ne repeint pas : il éclaire à peine la case visée. Réservé aux appareils
   qui survolent vraiment — au toucher, « :hover » reste collé après l'effleurement et
   deux onglets paraîtraient actifs en même temps. */
@media (hover:hover) and (pointer:fine){
  [data-habillage="2026"] .filtres[aria-label="Période"] button:not([aria-pressed="true"]):hover{
    background:color-mix(in srgb, #fff 70%, transparent);
  }
}

/* ---------- L'adresse du compte redescend d'un cran ----------
   Elle s'affichait en blanc plein, à la même intensité que le nom du restaurant. Or
   elle ne répond qu'à une question — « suis-je bien connecté avec le bon compte ? » —
   qu'on se pose une fois en arrivant et plus jamais ensuite. Pleine, elle occupe la
   place du seul repère qui compte quand deux instances sont ouvertes côte à côte.

   0,78 ET PAS MOINS, mesuré sur la partie du bandeau que le halo éclaircit : du blanc
   à 0,78 y tient 5,9:1, au-dessus des 4,5:1 exigés d'un texte de cette taille.
   Discret ne veut pas dire illisible — il faut encore pouvoir vérifier son compte. */
[data-habillage="2026"] header .compte #c_nom{
  font-size:12.5px;
  opacity:.78;
}

/* Respecte le réglage système. Déjà la règle dans l'app ; on la répète parce
   que ce fichier ajoute ses propres transitions. */
@media (prefers-reduced-motion: reduce){
  [data-habillage="2026"] *{ transition:none !important; }
}