/* =============================================================================
   L'ÉCRAN D'ACCUEIL — LA JOURNÉE. Lot `HUB-1` (24/08), refondu par `HUB-5`
   (27/08). `ECRAN_ACCUEIL_HUB_V3.md` fait foi.

   ⛔ LES PROPORTIONS DE LA MAQUETTE ONT CHANGÉ LE 27/08, SUR DEMANDE DE DAVID,
      ET IL FAUT LE DIRE ICI PARCE QUE LE RESTE DU FICHIER S'Y RÉFÉRAIT.
      La maquette du 24/08 posait **392 px à droite** pour la carte du fauteuil.
      David : *« à l'intérieur du hub, au centre, on a toute la fiche client,
      son historique, les notes, la coupe qu'il fait etc… »* et *« dans le cadre
      de gauche, il faudra simplement avoir le nom, le service et le numéro de
      tél. »*
      ⟶ Deux zones au lieu de trois : **420 px à gauche** pour le planning,
        **tout le reste au centre** pour la fiche. Les 392 px de la maquette
        n'existent plus.

   ⚠️  CE N'EST PAS UNE PAGE DE MENU. On entre dans sa journée. Il n'y a donc
       ni tuile, ni carte de sommaire : la place est prise par ce qui se passe
       aujourd'hui.

   ⚠️  IL EST SOMBRE, COMME LES SIX AUTRES — DÉCISION DE DAVID DU 24/08
       (`B000-D255`). La maquette validée était claire, et cet écran l'a été
       une première fois. **Un écran clair au milieu de six sombres est un
       défaut de finition** (`V3-ae` ④) : *deux endroits qui font la même chose
       de deux façons*. Un seul écran changeait, c'est celui-ci.
       Il n'y a donc **aucune couleur définie ici** : tout vient des jetons de
       `hub.css`, ceux de la caisse, de l'agenda et des Options. Les cibles
       tactiles ne bougent pas — `--cible` (60 px), pied de 66 px.

   ⛔ LA CARTE DES GESTES — DAVID EST DROITIER, ET L'ÉCRAN LE SAIT (27/08).
      *« Regarde l'ensemble, nous avons pas mal d'outils… place les outils à
      leur place, de la façon la plus ergonomique possible, je suis droitier. »*

      Sur un écran de comptoir, la main droite se repose **en bas à droite** ;
      le coin **haut-gauche** est le point le plus coûteux à atteindre, et le
      coin **haut-droite** demande de lever le bras. D'où trois zones, et une
      seule règle : **plus un geste est fréquent, plus il descend à droite.**

        · **Gauche, du haut en bas — ON REGARDE, ON NE TOUCHE PRESQUE PAS.**
          Le mois, la journée, le bilan. C'est là que l'œil commence, et c'est
          la zone que la main n'a pas à traverser. Seule exception : toucher un
          bloc pour désigner un client — un geste franc sur une grande cible.

        · **Centre — LA FICHE.** On y lit, et on y écrit ce qui concerne le
          client : les notes et la coupe sont dans la colonne de **droite** de
          la fiche, côté main.

        · **Bas-droite — LES GESTES.** `ENCAISSER` d'abord, le plus fréquent de
          tout l'écran, le plus large et le plus coloré. Puis, sous lui et plus
          petits, `CALENDRIER` et `CAISSE DU JOUR` — on y va quelques fois par
          jour, pas quelques fois par client.

        · **En-tête — CE QUI NE DÉPEND PAS DU CLIENT ASSIS**, rangé par
          fréquence décroissante vers le coin : la tuile « prochain libre »
          (fréquente, et elle doit se lire à deux mètres), le refus (un appui),
          puis la roue des Options — rare, donc au coin.

      Ce qui a bougé le 27/08 : `ENCAISSER` est passé de la gauche à la droite
      de sa barre, et « En retard / Absent » ont quitté deux boutons pleine
      largeur à l'extrême gauche pour deux marques compactes posées sur la ligne
      du rendez-vous.

   ⚠️  LE BUDGET DE HAUTEUR — `V3-y` ③
           768 px  écran
         −  40 px  bandeau d'état
         = 728 px  pour l'en-tête, le corps et le pied. Aucune page ne défile.
   ============================================================================= */

.accueil {
  /* `V3-y` ② : une ligne de rendez-vous se touche au doigt. */
  --ligne: 60px;

  position: fixed;
  top: var(--bandeau); left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   L'EN-TÊTE — rangé par David le 27/08, de gauche à droite :
   **le logo · les deux dates l'une sous l'autre · la recherche · le prochain
   créneau · le refus · la caisse du jour · les réglages.**

   ⛔ IL N'Y A PLUS DE BANDEAU VERT AU-DESSUS. Il est descendu en pastille dans
      le coin bas droit (`hub.css`) : **40 px rendus à cet écran et aux douze
      autres.** Le mode n'est pas perdu — la couleur vient toujours du serveur.
   -------------------------------------------------------------------------- */
.accueil .tete {
  flex: 0 0 auto;
  background: var(--bleu);
  border-bottom: 1px solid var(--bleu-clair);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ⭐ LE LOGO DU SITE DE RÉSERVATION — David : *« il est beau. »*
   ⚠️  NI ANNEAU NI FOND. Il porte déjà son filet d'or et son fond, et il est
       transparent autour : un cercle de plus par-dessus le sien le salirait. */
.accueil .blason { width: 64px; height: 64px; flex: 0 0 auto; }
.accueil .blason img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ⭐ LES DEUX DATES L'UNE AU-DESSUS DE L'AUTRE — demande de David. */
.accueil .dates { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; }
.accueil .jour-titre { font-size: 18px; font-weight: 300; color: var(--gris); line-height: 1.2; }
.accueil .jour-titre b { font-weight: 600; color: var(--texte); }

/* ⚠️  DISCRÈTE, ET PLUS PETITE QUE LA DATE FRANÇAISE — `HEB-1` ① : *« à côté de
       la date française. Discrète, pas plus grosse. »* */
.accueil .date-hebreu {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 12.5px; color: var(--gris); line-height: 1.25;
}
/* La mention du soir : plus petite encore, et elle n'apparaît que quand le
   soleil est couché. Le reste du temps, il n'y a rien à lire. */
.accueil .date-hebreu .soir { font-size: 10.5px; opacity: .78; }

/* ⭐ LES TROIS OUTILS DE DROITE — refus, caisse du jour, réglages.
   ⚠️  56 px, SOIT 11,3 mm. La roue faisait 46 px (9,3 mm) et les deux boutons
       du pied 34 px (6,9 mm) : sous ce qu'un doigt pose. Ils sont rares, pas
       petits — *rare ne veut pas dire difficile à toucher.* */
.accueil .outil {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bleu-clair);
  border: 1px solid #35507a;
  color: var(--gris);
  font-size: 21px;
  display: grid; place-items: center;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.accueil .outil:hover { border-color: var(--or); color: var(--texte); }
.accueil .outil .ic { font-size: 21px; line-height: 1; }

/* ⛔ LE BOUTON DE REFUS ÉTAIT MUET, ET IL SE VIDAIT — 28/08, `B000-D391`.

   David, après **six appuis dans la même minute** : *« il est resté muet. »*

   Mesuré sur la production, en simulant les trois états **sans rien écrire** :
   `repos`, `envoi`, `note` et `rate` rendaient **exactement le même bouton** —
   même fond `rgb(36,53,79)`, même bordure, même couleur. `refus.js` posait bien
   ses classes, et **aucune feuille ne les définissait** : ni les trois états,
   ni les deux SVG. C'est `B000-D357` de nouveau — *une règle qui ne correspond
   à rien ne lève aucune erreur.*

   ⛔ ET LA COCHE MESURAIT 0 × 0. Un `<svg>` sans `width` ni `height` n'a pas de
      taille propre dans cette grille : à l'état `note`, la silhouette se
      cachait et **rien n'apparaissait à sa place**. Le bouton **se vidait** au
      lieu de confirmer — *pire que muet, parce qu'un vide se lit comme une
      panne, et qu'on appuie de nouveau.*

   ⟶ Six appuis en une minute ne sont pas six clients refusés : c'est le geste
     de quelqu'un qui ne voit pas si ça a marché. **Le journal a dû être
     corrigé à la main.** Le défaut d'écran était devenu un défaut de donnée.

   ⚠️  `B000-D251` INTERDIT UN COMPTE SUR CET ÉCRAN, PAS UN ACCUSÉ DE RÉCEPTION.
       Rien ici n'affiche de nombre : trois états, aucun chiffre. */
.accueil .refus .refus-glyphe,
.accueil .refus .refus-vu { width: 26px; height: 26px; }

/* ⛔ ET VOICI LA VRAIE CAUSE, TROUVÉE À LA MESURE — `B000-D391`.

      La coche restait `display: none` **alors que `hidden` valait `false`**.
      Motif : **`element.hidden` n'existe pas sur un SVG.** C'est une propriété
      de `HTMLElement`, pas de `SVGElement`. `refus.js` écrivait donc
      `coche.hidden = false` — ce qui pose une propriété JavaScript inerte et
      **ne retire jamais l'attribut du balisage**. L'attribut restait, et la
      règle du navigateur `[hidden] { display: none }` avec lui.

      ⟶ **Les deux dessins n'ont jamais pu s'échanger. La coche n'est jamais
        apparue une seule fois depuis que ce bouton existe.**

      ⚠️  ET ÇA NE LEVAIT AUCUNE ERREUR : écrire une propriété inconnue sur un
          objet JavaScript est parfaitement légal. Le code se lisait juste.

      ⟶ C'EST LA CLASSE D'ÉTAT QUI DÉCIDE MAINTENANT, plus l'attribut. Une
        seule source de vérité, celle que `peindre()` pose déjà pour la
        couleur : le dessin ne peut plus diverger du fond. La spécificité
        (0-3-0) l'emporte sur `[hidden]` (0-1-0), l'attribut peut rester où il
        est sans rien casser. */
.accueil .refus .refus-vu      { display: none; }
.accueil .refus.note .refus-vu {
  display: block;
  /* ① L'accusé de réception : elle entre, elle n'apparaît pas. Un dessin qui
     surgit sans mouvement se confond avec un dessin qui était déjà là. */
  animation: refus-coche .22s ease-out;
}
.accueil .refus.note .refus-glyphe { display: none; }

/* La barre oblique du glyphe est un CREUX, pas un trait : elle prend la couleur
   du fond du bouton, elle doit donc suivre l'état. */
.accueil .refus .barre-fond { stroke: var(--bleu-clair); }

.accueil .refus.envoi { opacity: 0.55; }

.accueil .refus.note {
  background: var(--vert); border-color: var(--vert); color: #fff;
}

.accueil .refus.rate {
  background: var(--rouge); border-color: var(--rouge); color: #fff;
}
.accueil .refus.rate .barre-fond { stroke: var(--rouge); }

/* =============================================================================
   ⭐ LES TROIS SECONDES, ET CE QUI BOUGE PENDANT — David, 28/08 :
      *« oui tu mets 3 secondes, et une anim dans le bouton quand on attend ces
      3 secondes. »*

   Deux gestes, et ils disent deux choses différentes :

     ① **la coche entre** — elle grandit d'un demi en 0,22 s. C'est l'accusé de
        réception : quelque chose vient de se passer, à l'instant.
     ② **l'anneau se vide** — un tour complet qui disparaît en trois secondes.
        C'est le compte à rebours : le bouton va redevenir lui-même, et on sait
        combien de temps il reste pour le regarder.

   ⚠️  LA DURÉE N'EST ÉCRITE QU'À UN SEUL ENDROIT, ET C'EST DANS `refus.js`.
       `DUREE_VU_MS` est posée sur le bouton en `--refus-duree` au moment où
       l'état `note` est peint. **Si les deux durées vivaient séparément, elles
       divergeraient au premier réglage** : l'anneau finirait avant que le vert
       s'en aille, ou l'inverse — et l'écran raconterait autre chose que ce
       qu'il fait. Le `3000ms` ci-dessous n'est qu'un filet si la variable
       manque.

   ⚠️  L'ANNEAU EST UN DÉCOR, PAS UNE INFORMATION. Il ne compte rien, il
       n'affiche aucun nombre (`B000-D251`), et s'il ne s'affichait pas — un
       navigateur sans `@property`, sans `mask` — **la coche verte suffit
       toujours à dire que c'est noté**. Rien ne dépend de lui.
   ============================================================================= */

/* Le repère de l'anneau. Le bouton est en `display: grid` : `relative` ne
   change rien à ce qu'il contient, il donne seulement un ancrage. */
.accueil .refus { position: relative; }

/* L'angle qui s'anime. Sans `@property`, un navigateur interpole une variable
   comme du TEXTE — c'est-à-dire pas du tout : elle saute de 360° à 0° sans rien
   montrer. C'est cette déclaration qui la rend animable. */
@property --refus-tour {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

.accueil .refus.note::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  /* Le disque plein… */
  background: conic-gradient(#fff var(--refus-tour), transparent 0deg);
  /* …dont on ne garde que le bord : c'est ce qui en fait un anneau. */
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%);
  mask: radial-gradient(closest-side, transparent 84%, #000 85%);
  animation: refus-anneau var(--refus-duree, 3000ms) linear forwards;
  /* ⛔ IL NE DOIT JAMAIS INTERCEPTER UN APPUI. Il déborde du bouton de 5 px, et
     le poste du directeur ne se refuse rien : deux refus coup sur coup doivent
     passer, même pendant l'animation (`B000-D260`). */
  pointer-events: none;
}

@keyframes refus-anneau {
  from { --refus-tour: 360deg; }
  to   { --refus-tour: 0deg; }
}

@keyframes refus-coche {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* -----------------------------------------------------------------------------
   LE CORPS — le planning à gauche, la fiche du client au centre. `HUB-5`, 27/08.

   ⛔ LA COLONNE DE DROITE A DISPARU, ET C'EST UNE DEMANDE DE DAVID :
      *« à l'intérieur du hub, au centre, on a toute la fiche client, son
      historique, les notes, la coupe qu'il fait etc… »* et *« dans le cadre de
      gauche, il faudra simplement avoir le nom, le service et le numéro de
      tél. »*
      ⟶ Deux zones, plus trois : **le planning** (420 px, fixe) et **la fiche**
        (tout le reste). Ce qui vivait à droite — la carte du fauteuil et le
        champ de recherche — est absorbé par la fiche et par la barre qui la
        surmonte, où il y a la place de l'écrire.
   -------------------------------------------------------------------------- */
.accueil .corps { flex: 1; display: flex; min-height: 0; }

/* -----------------------------------------------------------------------------
   ② LE CADRE DE GAUCHE — LE PLANNING, AU MODÈLE DE LA V1.

   ⛔ 420 px, ET C'EST UNE MESURE. La V1 tient son calendrier dans une bande de
      210 px (`.left-sidebar`) et met la journée à côté. Ici les deux sont
      **empilés** dans la même bande, parce que le centre a besoin de toute la
      largeur qui reste pour porter la fiche. À 420 px, une case du mois fait
      54 px — assez pour un quantième, son chiffre hébraïque et sa couleur de
      fête — et un bloc de rendez-vous ~360 px, assez pour le nom, le service et
      le numéro.

   ⛔ TROIS ZONES, ET LA JOURNÉE PREND TOUT CE QUI RESTE :
        · le mois     — hauteur naturelle, il ne défile jamais ;
        · la journée  — **tout le reste**, et son pas est calculé pour que
                        trois heures y tiennent (voir `--pas-jour`) ;
        · le bilan    — une ligne, toujours visible.

   ⚠️  LE STYLE DE LA GRILLE NE SE REDÉFINIT PAS ICI. `agenda.css` est chargée
       par la page : les blocs, les fonds et le trait de l'heure sont **les
       mêmes qu'à l'écran Agenda**, à la ligne près. Les repeindre ici ferait
       deux apparences pour un même objet, qui divergeraient (`V3-ae` ④). Seuls
       le pas et les contours sont ajustés — ce que David a demandé.
   -------------------------------------------------------------------------- */
.accueil .gauche {
  flex: 0 0 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bleu-clair);
  background: var(--bleu);
}

/* --- ① LA BANDE DE SEPT JOURS — `HUB-6` ----------------------------------- */
/* ⛔ ELLE REMPLACE LES 42 CASES DU MOIS, ET C'EST UNE MESURE.
      Sur le X230 — 1366 px pour 276,7 mm, soit **4,94 px/mm** — une case du mois
      faisait 24 px, donc **4,9 mm**. Un doigt pose 9 à 10 mm : **la plus petite
      cible de l'écran servait à choisir un jour**, et le mois occupait 255 px.
      ⟶ Sept cases de 56 px font **11,3 mm**, et les 159 px rendus vont au
        journal, où le bloc de rendez-vous — le geste le plus fréquent de la
        journée — passe de 6,5 à 9,7 mm. **La bande paie le journal.**

   ⛔ ET LES FÊTES NE SE PERDENT PAS — David : *« ne pas oublier les fêtes ! »*
      Chaque jour porte sa couleur, et **le nom s'écrit en toutes lettres** sous
      la bande dès que le jour regardé en porte une. Les cases du mois n'avaient
      jamais eu la place de le faire : on gagne l'information avec la cible.

   ⛔ LE TITRE DU MOIS EST UN LIEN VERS L'AGENDA — *« cliquer sur le mois, ça
      envoie vers le calendrier, donc le bouton calendrier d'en bas ne sert plus
      à rien. »* C'est lui qui a supprimé le bandeau du bas. */
.accueil .semaine-tete {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px 0;
}

.accueil .mois-lien {
  display: flex; flex-direction: column; gap: 1px;
  text-decoration: none; padding: 4px 6px; margin: -4px -6px;
  border-radius: 8px;
}
.accueil .mois-lien:hover { background: var(--bleu-clair); }
.accueil .mois-lien #mois-civil {
  font-size: 15px; font-weight: 700; color: var(--or); text-transform: capitalize;
}
.accueil .mois-lien #mois-hebreu { font-size: 10.5px; color: var(--gris); }

.accueil .semaine-nav { display: flex; gap: 5px; align-items: center; }
.accueil .semaine-nav button {
  min-width: 34px; height: 34px;
  border: 1px solid #35507a; border-radius: 8px;
  background: var(--bleu-clair); color: var(--texte);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.accueil .semaine-nav button:hover { border-color: var(--or); }
.accueil .semaine-nav .auj { padding: 0 12px; font-size: 11.5px; letter-spacing: .2px; }

.accueil .semaine {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 6px 12px 0;
}

/* ⚠️  56 px, SOIT 11,3 mm — au-dessus de ce qu'un doigt pose. C'est la cible la
       plus fréquente du cadre de gauche après le bloc de rendez-vous. */
.accueil .sj {
  position: relative;
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--bleu-clair); color: var(--texte);
  font-family: inherit; cursor: pointer;
}
.accueil .sj:hover { border-color: var(--or); }
.accueil .sj-lettre { font-size: 10px; color: var(--gris); line-height: 1.1; }
.accueil .sj-civil { font-size: 18px; font-weight: 700; line-height: 1.1; }
/* Le chiffre hébraïque sous le quantième — c'est ce que David regarde. */
.accueil .sj-hebreu { font-size: 9.5px; color: var(--gris); line-height: 1.1; }

.accueil .sj.chabbat .sj-civil { color: var(--or); }
.accueil .sj.aujourdhui { border-color: var(--or); }

/* ⭐ LES FÊTES — `B000-D355`, et les rangs ne changent pas d'un écran à l'autre :
      rouge = le salon ferme · ambre = la veille, la journée la plus chargée de
      l'année · un point pour Hol Hamoed, un jeûne, une fête mineure. */
.accueil .sj.rang-chag   { background: rgba(220, 38, 38, .34); }
.accueil .sj.rang-veille { background: rgba(243, 112, 33, .30); }
.accueil .sj.rang-hol::after,
.accueil .sj.rang-jeune::after,
.accueil .sj.rang-mineur::after {
  content: ''; position: absolute; bottom: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--or);
}

/* Le jour choisi reprend la main : on doit voir où l'on est, fête ou pas. */
.accueil .sj.choisi {
  background: var(--orange); border-color: var(--orange);
}
.accueil .sj.choisi .sj-civil,
.accueil .sj.choisi .sj-hebreu,
.accueil .sj.choisi .sj-lettre { color: #1a1400; }

/* ⭐ LE NOM DE LA FÊTE DU JOUR REGARDÉ, EN TOUTES LETTRES. La case n'a que la
      place d'une couleur ; cette ligne dit laquelle. Elle n'existe que les jours
      où il y en a une — le reste du temps, rien à lire. */
.accueil .mois-fete {
  flex: 0 0 auto;
  margin: 6px 12px 0; padding: 3px 9px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600; text-align: center;
  background: rgba(220, 38, 38, .18); color: #fca5a5;
}
.accueil .mois-fete.rang-veille { background: rgba(243, 112, 33, .20); color: #fcd6b0; }
.accueil .mois-fete.rang-hol,
.accueil .mois-fete.rang-jeune,
.accueil .mois-fete.rang-mineur { background: var(--bleu-clair); color: var(--gris); }

/* --- ② LA JOURNÉE : la fenêtre Jour du calendrier -------------------------- */
/* ⛔ LE TITRE « MA JOURNÉE » ET LES CONTOURS SONT PARTIS — David : *« les
      contours et tout ce qui ne sert à rien peuvent être retirés ; l'important
      dans ce journal-là, c'est de voir 3 heures en permanence. »*
      Le titre répétait la date de l'en-tête et coûtait 29 px, soit un quart
      d'heure de journée.

   ⛔ `--pas-jour` EST CALCULÉ, PAS ÉCRIT. `ajusterLePas()` mesure le cadre et
      divise par neuf — trois heures de créneaux de vingt minutes. Une valeur
      figée ici ne tiendrait que sur un écran : sur le poste du salon elle en
      montrerait deux heures et demie, sur un grand écran quatre.
      La valeur de repli, 31 px, est celle mesurée sur le poste ; elle ne sert
      que le temps que le cadre existe. */
.accueil .jour-grille {
  flex: 1 1 auto; min-height: 0;
  padding: 0 8px 6px;
  background: var(--fond);
}
/* ⛔ PAS DE `.fc` DANS LE SÉLECTEUR, ET C'EST UN DÉFAUT MESURÉ, PAS UN GOÛT.
      FullCalendar 6 pose ses classes **SUR le conteneur qu'on lui donne** :
      `#calendrier-jour` porte donc `class="jour-grille fc fc-media-screen…"`.
      Écrire `.jour-grille .fc .fc-timegrid-slot` demande un `.fc` **descendant**
      de `.jour-grille` — il n'y en a aucun. La règle ne s'applique à rien.

      Relevé en ligne le 27/08 : `--pas-jour` valait bien `31px` sur l'élément,
      et les créneaux mesuraient `30px` — la valeur d'`agenda.css`. **Aucune
      erreur, aucun avertissement** : une règle qui ne matche rien est
      silencieuse, exactement comme une écriture qui n'est jamais lue
      (`B000-D277`). Seule la mesure l'a trouvée.
      ⟶ `.accueil .jour-grille .fc-timegrid-slot` fait (0,3,1) contre (0,2,1)
        pour `agenda.css` : la spécificité suffit, l'ordre des feuilles n'entre
        pas en jeu. */
.accueil .jour-grille.fc { height: 100%; }
.accueil .jour-grille .fc-timegrid-slot { height: var(--pas-jour, 31px); }
/* Le cadre extérieur s'en va, les lignes d'heures restent : c'est le journal. */
.accueil .jour-grille .fc-scrollgrid { border: 0; border-radius: 0; }
.accueil .jour-grille .rien { padding: 18px; color: var(--gris); font-style: italic; }
/* Trois choses dans la case, donc de l'air entre elles. */
.accueil .jour-grille .rdv-contenu.large { gap: 10px; }

/* --- ③ LE BILAN ----------------------------------------------------------- */
.accueil .bilan {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--bleu-clair);
  background: var(--bleu);
  font-size: 12.5px; color: var(--gris);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   ③ LE CENTRE — la barre de recherche, la fiche, ce qui demande une action.
   -------------------------------------------------------------------------- */
.accueil .centre {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--fond);
}

/* --- LA BARRE DE RECHERCHE — DANS L'EN-TÊTE DEPUIS LE 27/08 ---------------- */
/* ⛔ ELLE A DÉMÉNAGÉ, ET C'EST UNE MESURE. David : *« y a plein de place vide,
      tu n'as pas du tout optimisé ? »* Relevé à l'écran :
        · **468 px de vide** dans l'en-tête, entre la date hébraïque et la tuile,
          sur 91 px de haut — **quarante-deux mille pixels carrés morts** ;
        · la recherche, elle, prenait **une bande de 72 px sur toute la largeur
          du centre** (946 px) pour un champ qui reçoit **dix chiffres**.
      ⟶ Un seul déplacement, deux gains : le vide se comble, **et la fiche
        récupère 72 px de haut**.

   ⚠️  CALÉE À DROITE DU VIDE, contre la tuile — `margin-left: auto` absorbe
       tout l'espace libre à sa gauche. C'est la moitié qu'atteint la main
       droite (`B000-D359`), et le champ ne se touche qu'une fois : la saisie
       se fait ensuite au clavier tactile, en bas de l'écran.

   ⚠️  LA ROUE PERD SON `margin-left: auto`. C'était elle qui poussait la fin
       de l'en-tête à droite ; c'est la recherche qui le fait maintenant. Les
       laisser toutes les deux aurait écarté la roue du bouton de refus. */
.accueil .tete .recherche {
  flex: 0 1 400px; min-width: 0;
  margin-left: auto;
  position: relative;
  display: flex; gap: 8px;
}
.accueil .recherche-champ {
  flex: 1 1 auto; min-width: 0; min-height: var(--cible);
  padding: 0 14px;
  background: var(--bleu-fonce, var(--fond)); color: var(--texte);
  border: 1px solid var(--or); border-radius: 8px;
  font-family: inherit; font-size: 1.05rem;
}
/* ⛔ 60 px AU DOIGT (`V3-y` ②) : la bascule chiffres/lettres est le seul chemin
      vers la recherche par nom sur un poste sans clavier physique. */
.accueil .recherche-bascule {
  flex: 0 0 auto; width: var(--cible); min-height: var(--cible);
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid #35507a; border-radius: 8px;
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.accueil .recherche-bascule:hover { border-color: var(--or); }

/* ⚠️  ELLE TOMBE PAR-DESSUS LA FICHE, ELLE NE POUSSE RIEN. Et elle est **plus
       large que le champ** : « Nathan Cohen Farouze · +972586304418 ·
       aujourd'hui 14:20 · 2 absences » ne tient pas dans 400 px. Elle s'étend
       vers la gauche (`right: 0`, `left: auto`), là où il n'y a rien. */
.accueil .recherche-resultats {
  position: absolute; z-index: 40;
  top: calc(100% + 8px); right: 0; left: auto; width: 620px; max-width: 92vw;
  max-height: 420px; overflow-y: auto;
  padding: 8px;
  background: var(--bleu);
  border: 1px solid var(--or); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.accueil .rc-ligne {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--cible); margin-bottom: 6px; padding: 6px 12px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid transparent; border-radius: 8px;
  font-family: inherit; text-align: left; cursor: pointer;
}
.accueil .rc-ligne:last-of-type { margin-bottom: 0; }
.accueil .rc-ligne:hover { border-color: var(--or); }
.accueil .rc-ligne.alerte { border-color: var(--rouge); }
.accueil .rc-nom {
  font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accueil .rc-tel {
  font-size: .86rem; color: var(--gris);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.accueil .rc-rdv { font-size: .8rem; color: var(--or); flex: 0 0 auto; }
.accueil .rc-abs {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; flex: 0 0 auto;
  background: rgba(243, 112, 33, .55); color: #fff;
}
.accueil .rc-abs.forte { background: var(--rouge); }
.accueil .rc-vide { color: var(--gris); font-size: .86rem; margin: 0; font-style: italic; }

.accueil .rc-neuve { margin-top: 8px; }
.accueil .rc-champs { display: flex; gap: 8px; }
.accueil .rc-champs input {
  flex: 1 1 0; min-width: 0; min-height: var(--cible); padding: 0 12px;
  background: var(--bleu); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: 1rem;
}
.accueil .rc-creer {
  width: 100%; min-height: var(--cible); margin-top: 8px;
  border: 0; border-radius: 8px;
  background: var(--or); color: #1a1400;
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}

/* --- LA FICHE DU CLIENT --------------------------------------------------- */
/* ⛔ QUATRE ZONES, ET L'HISTORIQUE NE PASSE PLUS SOUS LA COLONNE DE DROITE.
      David, sur capture : *« l'historique complet, toute cette place qu'il prend
      à droite ? Elle sert à rien, et le panneau de droite pourrait s'en
      servir ! »* Il s'étendait sur **916 px** pour des lignes qui en font 340,
      et il coûtait **150 px de hauteur** au panneau de droite — celui-là même
      qui en manquait.
      ⟶ L'historique tient sous la colonne de gauche ; **la colonne de droite
        descend jusqu'au bas de la carte.** On ne crée pas de place : on la rend
        à celui qui en a besoin.

          ┌─────────────────────────────┬──────────────┐
          │ l'en-tête, sur toute la largeur             │
          ├─────────────────────────────┼──────────────┤
          │ le rendez-vous · à venir    │ les notes    │
          ├─────────────────────────────┤ la coupe     │
          │ l'historique complet        │ ENCAISSER    │
          └─────────────────────────────┴──────────────┘ */
.accueil .fiche {
  flex: 1 1 auto; min-height: 0;
  margin: 10px 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bleu);
  border: 1px solid var(--bleu-clair); border-radius: 12px;
  overflow: hidden;
}
.accueil .fiche-tete   { grid-column: 1 / -1; grid-row: 1; }
.accueil .fiche-alerte { grid-column: 1 / -1; }
.accueil .fiche-col-quoi  { grid-column: 1; grid-row: 2; }
.accueil .fiche-histoire  { grid-column: 1; grid-row: 3; }
.accueil .fiche-col-notes { grid-column: 2; grid-row: 2 / span 2;
                            border-left: 1px solid var(--bleu-clair); }
/* La carte vide n'a qu'une chose à dire : elle prend tout. */
.accueil .fiche-vide { grid-column: 1 / -1; grid-row: 1 / -1; }

.accueil .fiche-vide {
  margin: auto; padding: 30px; text-align: center; max-width: 420px;
}
.accueil .fiche-vide h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.accueil .fiche-vide p { margin: 0; color: var(--gris); font-size: 14px; line-height: 1.5; }

/* ⚠️  ONZE PIXELS REPRIS ICI, ET ILS VONT À LA COUPE. Mesuré : le cadre
       défilant de la colonne de droite manquait de **21 px** exactement — ils
       viennent de cet en-tête (11), des écarts des menus (4) et du pied de la
       colonne (6). Rien n'est retiré : c'est de la marge. */
.accueil .fiche-tete {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px 6px;
  border-bottom: 1px solid var(--bleu-clair);
}
.accueil .fiche-identite { flex: 1 1 auto; min-width: 0; }
.accueil .fiche-nom {
  margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accueil .fiche-faits {
  margin: 3px 0 0; font-size: 13px; color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.accueil .fiche-faits .mauvais { color: var(--rouge); }
.accueil .fiche-fermer {
  flex: 0 0 auto; width: 40px; height: 40px;
  background: none; color: var(--gris);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.accueil .fiche-fermer:hover { color: var(--texte); border-color: var(--gris); }
.accueil .fiche-alerte {
  margin: 0; padding: 8px 16px;
  background: rgba(220, 38, 38, .14); color: #fca5a5; font-size: 12.5px;
}

/* ⚠️  DEUX COLONNES, ET C'EST CHACUNE QUI DÉFILE — jamais la page (`V3-y` ①).
       Gauche : ce qu'il a fait et ce qui l'attend. Droite : ce qu'on note sur
       lui. C'est la répartition de la V1 (`.client-body`), et elle tient. */
/* ⛔ 520 px À DROITE, ET C'EST UNE MESURE — David, 27/08 : *« cette partie,
      pourquoi est-elle aussi large ? Il faut qu'elle s'arrête pour que la partie
      droite puisse devenir plus longue. »*
      Relevé à l'écran : la colonne de gauche faisait **586 px et son contenu
      tenait exactement dans sa hauteur** — elle était vide — pendant que la
      droite, à 330, **débordait de 205 px** et se mettait à défiler.
      ⟶ La largeur passe de la zone qui n'en avait pas besoin à celle qui en
        manquait. Et elle sert deux fois : elle permet de poser **les notes et
        la coupe côte à côte**, ce qui divise la hauteur du bloc par deux. */
/* `.fiche-corps` a disparu : la fiche EST la grille (voir plus haut). */
.accueil .fiche-col {
  min-height: 0; overflow-y: auto;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.accueil .fiche-etiquette {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--gris); font-weight: 700;
}
.accueil .fiche-bloc { flex: 0 0 auto; }
.accueil .fiche-ligne { margin: 0; font-size: 15px; }
.accueil .fiche-ligne b { font-variant-numeric: tabular-nums; }

/* ⛔ « EN RETARD » ET « ABSENT » — on ne marque QUE l'exception, et recliquer
      efface la marque. Règle de la V1, révisée le 30/07 sur retour de David :
      aucun bouton allumé signifie « venu normalement », le cas courant, qui ne
      demande aucun clic.

   ⭐ ELLES SONT SUR LA LIGNE, À DROITE — passe d'ergonomie du 27/08, David :
      *« place les outils à leur place, je suis droitier. »* Elles prenaient
      **deux boutons pleine largeur sous la ligne** : la taille d'un geste
      principal pour un geste rare, posée à l'extrême gauche de l'écran — le
      point le plus loin de la main droite. Compactes et posées **sur ce
      qu'elles marquent**, elles disent mieux ce qu'elles font et coûtent
      44 px de moins à l'historique, qui en manquait. */
.accueil .fiche-courant-ligne {
  display: flex; align-items: center; gap: 10px;
}
.accueil .fiche-courant-ligne .fiche-ligne { flex: 1 1 auto; min-width: 0; }
.accueil .fiche-marques { display: flex; gap: 6px; flex: 0 0 auto; }
.accueil .fiche-marque {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.accueil .fiche-marque:hover { border-color: var(--or); }
.accueil .fiche-marque.actif {
  background: var(--orange); border-color: var(--orange);
  color: #1a1400; font-weight: 700;
}

.accueil .fiche-rdv,
.accueil .fiche-passe {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--bleu-clair);
  font-size: 13px;
}
.accueil .fiche-rdv:last-child,
.accueil .fiche-passe:last-child { border-bottom: none; }
.accueil .fiche-quand {
  flex: 0 0 auto; color: var(--or); font-variant-numeric: tabular-nums;
}
.accueil .fiche-quoi {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accueil .fiche-quoi .mauvais { color: var(--rouge); }
.accueil .fiche-coupe {
  flex: 1 1 100%; font-size: 11.5px; color: var(--gris); line-height: 1.35;
}
.accueil .fiche-passe { flex-wrap: wrap; }
.accueil .fiche-passe.absent .fiche-quand { color: var(--rouge); }
.accueil .fiche-reste { margin: 6px 0 0; font-size: 11.5px; color: var(--gris); }

/* ⚠️  60 px AU DOIGT POUR LE GESTE PRINCIPAL, 40 POUR CEUX-CI — secondaire ne
       veut pas dire difficile à toucher, mais quatre boutons de 60 px sur une
       ligne de rendez-vous mangeraient la liste. */
.accueil .fiche-mini {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: .8rem; cursor: pointer;
}
.accueil .fiche-mini:hover { border-color: var(--or); }
.accueil .fiche-mini.mauvais:hover { border-color: var(--rouge); color: #fca5a5; }

.accueil .fiche-notes textarea,
.accueil .fiche-coupe-bloc textarea {
  width: 100%; padding: 8px 10px; resize: none;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: 13px; line-height: 1.4;
}
.accueil .fiche-enregistrer {
  width: 100%; min-height: 44px; margin-top: 8px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid #35507a; border-radius: 8px;
  font-family: inherit; font-size: .88rem; cursor: pointer;
}
.accueil .fiche-enregistrer:hover { border-color: var(--or); }
.accueil .fiche-enregistrer[disabled] { opacity: .45; cursor: default; }

/* ⚠️  BORNÉE À DEUX LIGNES. Le résumé d'une coupe complète — cinq réglages plus
       la note — s'étale sur **quatre lignes** dans une colonne de 229 px, et
       pousse tout le formulaire hors du cadre. Deux lignes suffisent à
       reconnaître la coupe ; le détail exact est dans l'historique, en bas.
   ⚠️  RIEN N'EST PERDU : c'est un rappel, pas une donnée qu'on saisit. */
.accueil .fiche-derniere {
  margin: 0 0 8px; font-size: 11.5px; color: var(--gris); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Les menus suivent la largeur qu'on leur donne au lieu d'imposer deux
   colonnes : à 240 px ils en font deux, à 360 ils en font trois. */
.accueil .fiche-menus {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 4px 10px; margin-bottom: 8px;
}
.accueil .fiche-menu { display: flex; flex-direction: column; gap: 2px; }
.accueil .fiche-menu span { font-size: 10.5px; color: var(--gris); }
/* ⛔ 48 px, SOIT 9,7 mm — AU-DESSUS DE CE QU'UN DOIGT POSE. Ils faisaient 36
      (7,3 mm), et je l'avais signalé deux fois sans pouvoir le corriger : la
      colonne n'avait pas la hauteur. Elle l'a depuis que l'historique a cessé
      de passer dessous — **70 px de libre mesurés, 36 nécessaires.**
      C'est l'instruction permanente de David : *« de la façon la plus
      ergonomique possible »*. La place existait enfin. */
.accueil .fiche-menu select {
  min-height: 48px; padding: 0 8px;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: 13px;
}

/* ⚠️  ENCAISSER GARDE SA HAUTEUR : c'est le geste le plus fréquent, et sa
       taille dit lequel c'est (`V3-y` ②). */
.accueil .fiche-actions {
  flex: 0 0 auto;
  display: flex; gap: 10px; padding: 10px 16px;
  border-top: 1px solid var(--bleu-clair);
}
.accueil .encaisser {
  flex: 2 1 0; min-height: 56px;
  background: var(--orange); color: #1a1400;
  border: none; border-radius: 8px;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.accueil .encaisser:hover { filter: brightness(1.12); }
.accueil .fiche-secondaire {
  flex: 1 1 0; min-height: 56px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid #35507a; border-radius: 8px;
  font-size: .92rem; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center; hyphens: none;
}
.accueil .fiche-secondaire:hover { border-color: var(--or); }

/* --- « CE QUI DEMANDE UNE ACTION » — un bandeau, plus une carte ------------ */
/* Une nature, une ligne, et elle dit combien il y en a derrière (`B000-D253`).
   Elles disparaissent quand c'est réglé, parce qu'elles sont relues et jamais
   mémorisées. Ce n'est pas un journal. */
/* ⚠️  MESURÉ À 69 px POUR DEUX LIGNES DE 12,5 px — presque autant de marge que
       de texte. Resserré, il en fait 44 ; les 25 px vont à la fiche. Rien n'est
       retiré de son contenu. */
.accueil .afaire {
  flex: 0 0 auto;
  padding: 3px 16px 5px; margin: 4px 14px 0;
}
.accueil .afaire .l {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; padding: 2px 0; line-height: 1.35;
}
.accueil .pt { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.accueil .pt.r { background: var(--rouge); }
.accueil .pt.o { background: var(--orange); }
.accueil .pt.v { background: var(--vert); }

.accueil .rien { color: var(--gris); font-size: 13px; font-style: italic; margin: 0; }

/* -----------------------------------------------------------------------------
   LE PROCHAIN CRÉNEAU — REDESSINÉ. `HUB-6`, David : *« fais ce bouton
   différemment, visible mais quand même. Moderne, pro. »*

   ⛔ CE QUI CHANGE, ET POURQUOI ÇA RESTE LISIBLE DE LOIN. La dalle d'or pleine
      criait : 415 px d'aplat doré avec le texte en négatif. Elle devient une
      **carte sombre à filet d'or**, avec un bandeau vertical doré à gauche, une
      étiquette petite et espacée, et **l'heure en gros chiffres à chasse fixe**.
      ⟶ C'est le CHIFFRE qui porte désormais, plus la couleur. Il se lit d'aussi
        loin — un nombre de 26 px en tabulaire se distingue à deux mètres — et
        l'écran cesse d'avoir un aplat qui aspire le regard en permanence.
      ⚠️  La demande du 25/08 — *« assez voyant qu'on puisse le voir à deux
          mètres »* — n'est donc pas abandonnée : elle est tenue autrement.
   -------------------------------------------------------------------------- */
.accueil .tuile-rdv {
  flex: 0 0 auto; margin-left: auto;
  position: relative; overflow: hidden;
  min-height: 62px; padding: 5px 16px 5px 18px;
  display: flex; flex-direction: column; gap: 1px; justify-content: center;
  background: var(--bleu-clair);
  border: 1px solid #35507a; border-radius: 10px;
  color: var(--texte);
}
.accueil .tuile-entete { display: flex; align-items: baseline; gap: 10px; }
/* Le bandeau doré : la couleur reste, réduite à un trait. */
.accueil .tuile-rdv::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--or);
}
.accueil .tuile-rdv:hover { border-color: var(--or); }

.accueil .tuile-etiquette {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or); flex: 0 0 auto;
}
.accueil .tuile-service {
  font-size: 12px; color: var(--gris);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️  CHASSE FIXE ET TABULAIRE : c'est un horaire, il ne doit pas danser d'un
       rafraîchissement à l'autre. */
/* ⚠️  C'EST LE BOUTON, ET C'EST LA CIBLE. 44 px de haut sur toute la largeur de
       la carte — 8,9 mm, à la limite de ce qu'un doigt pose, sur une cible large
       de plus de 200. Il ouvre le panneau de prise. */
.accueil .tuile-heure {
  background: none; border: 0; padding: 0; margin: 0;
  min-height: 44px; text-align: left; cursor: pointer; font-family: inherit;
  font-size: 26px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--texte); white-space: nowrap;
}
.accueil .tuile-heure:hover { color: var(--or); }
/* Rien de libre à annoncer : on le dit, on n'invente pas une heure
   (`B000-D220`). */
.accueil .tuile-heure[data-vide] {
  font-size: 15px; font-weight: 600; color: var(--gris);
}

/* -----------------------------------------------------------------------------
   LA FICHE — LES TROIS ZONES. `HUB-6`.
     · l'en-tête : qui, et la pastille d'absences ;
     · le corps  : à gauche le rendez-vous et ce qui vient ; à droite les notes,
                   la coupe, et ENCAISSER en dessous ;
     · le bas    : l'historique complet, sur toute la largeur, et il défile.
   -------------------------------------------------------------------------- */

/* ⭐ LA PASTILLE D'ABSENCES — David, 27/08 : *« vert une fois, orange deux fois,
      rouge plus que 3, et on ne regarde que dans l'historique de 12 mois. »*
   ⚠️  ZÉRO ABSENCE N'AFFICHE RIEN : pas de pastille verte « 0 » (`B000-D220`). */
.accueil .fiche-absences {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 104px; min-height: 52px; padding: 4px 14px;
  border-radius: 10px;
  font-size: 15px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.accueil .fiche-absences small {
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; opacity: .8;
}
.accueil .fiche-absences.vert   { background: rgba(46, 158, 91, .22);  color: #6ee7b7; }
.accueil .fiche-absences.orange { background: rgba(243, 112, 33, .26); color: #fcd6b0; }
.accueil .fiche-absences.rouge  { background: rgba(220, 38, 38, .30);  color: #fca5a5; }

/* ⛔ L'HISTORIQUE COMPLET, EN BAS ET SCROLLABLE — David : *« si un client a un
      historique de 10 ans, je veux tout charger ici en bas. »*
      C'est la troisième exception nommée à `V3-y` ①, et pour le même motif que
      les deux premières : **le contenu n'est pas à nous**. On ne peut pas
      « réduire le contenu » quand le contenu est la vie du client. */
/* ⚠️  150 px, PAS 190, ET C'EST UN ARBITRAGE MESURÉ. L'historique est en bas de
       la même carte que le formulaire : chaque pixel qu'il prend, la coupe le
       perd. Mesuré sur un client à long historique — à 190 px, le cadre du
       formulaire tombait à 168 et la coupe débordait de 87. À 150, il respire.
       **L'historique ne perd rien** : il défile, et il est chargé en entier. */
.accueil .fiche-histoire {
  flex: 0 0 auto;
  display: flex; flex-direction: column; min-height: 0;
  max-height: 210px;
  border-top: 1px solid var(--bleu-clair);
  padding: 10px 16px 8px;
}
.accueil .fiche-histoire-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.accueil .fiche-passe {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--bleu-clair);
  font-size: 13px;
}
.accueil .fiche-passe:last-child { border-bottom: none; }
.accueil .fiche-passe.absent .fiche-quand { color: var(--rouge); }

/* Le genre, en deux lettres : on distingue un passage d'un achat sans lire. */
.accueil .fiche-genre {
  flex: 0 0 auto; width: 46px; text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 0; border-radius: 4px;
  background: var(--bleu-clair); color: var(--gris);
}
.accueil .fiche-genre.achat { background: rgba(201, 162, 39, .22); color: var(--or); }

.accueil .fiche-histoire .fiche-quand {
  flex: 0 0 auto; min-width: 86px;
  color: var(--or); font-variant-numeric: tabular-nums;
}
.accueil .fiche-histoire .fiche-quand small { color: var(--gris); font-size: 11px; }
.accueil .fiche-histoire .fiche-quoi { flex: 0 0 auto; min-width: 170px; }
/* ⚠️  LE DÉTAIL PASSE À LA LIGNE. La bande fait maintenant 396 px et non 916 :
       le résumé de la coupe ne tient plus à côté du nom de la prestation. Il
       prend sa propre ligne plutôt que d'être coupé — c'est ce qu'on lit quand
       on cherche « qu'est-ce qu'on lui a fait ». */
.accueil .fiche-histoire .fiche-passe { flex-wrap: wrap; }
.accueil .fiche-histoire .fiche-quoi { flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accueil .fiche-histoire .fiche-coupe {
  flex: 1 1 100%; min-width: 0; margin-left: 58px;
  font-size: 11.5px; color: var(--gris); line-height: 1.3;
}

.accueil .fiche-alerte-mince {
  margin: 0 0 6px; font-size: 11.5px; color: #fca5a5;
}

/* ⭐ ENCAISSER SOUS LA COUPE — demande de David. Il ferme la colonne de droite,
      côté main. `margin-top: auto` le colle au bas de la colonne quel que soit
      ce qu'il y a au-dessus. */
/* ⛔ LA COLONNE NE DÉFILE PLUS D'UN BLOC : ce qui défile est enfermé, et les
      gestes restent au pied, toujours à l'écran. Mesuré : avec `margin-top:auto`
      dans une colonne à `overflow-y: auto`, ENCAISSER tombait **à y = 741 pour
      une fenêtre de 712**. */
.accueil .fiche-col-notes {
  overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
/* ⛔ LES NOTES ET LA COUPE CÔTE À CÔTE. Empilées, elles demandaient 439 px pour
      un cadre de 234. Côte à côte, le bloc ne fait plus que la hauteur du plus
      grand des deux — c'est la largeur reprise à gauche qui paie cette hauteur.
   ⚠️  `align-items: start` : sans lui, la colonne des notes s'étirerait à la
       hauteur de celle de la coupe et son cadre de saisie deviendrait un trou. */
.accueil .fiche-col-defile {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}
.accueil .fiche-col-notes .fiche-actions {
  flex: 0 0 auto; padding-top: 0;
  display: flex; flex-direction: column; gap: 6px; border: 0;
}
.accueil .fiche-col-notes .encaisser {
  width: 100%; min-height: 72px;
  font-size: 20px; letter-spacing: .6px;
}
.accueil .fiche-col-notes .fiche-secondaire {
  width: 100%; min-height: 48px; font-size: .88rem;
}

.accueil .tuile-panneau {
  position: fixed;
  top: var(--bandeau); right: 0; bottom: 0; left: 0;
  z-index: 200;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 28px;
  overflow: hidden;
  background: var(--bleu);
}
.accueil .tuile-panneau[hidden] { display: none; }

/* ⚠️  LES CHAMPS NE S'ÉTIRENT PAS SUR 1366 px. Un téléphone large comme
       l'écran ne se remplit pas mieux, il se lit moins bien — et la colonne
       laisse la place aux boutons de prestation, qui sont ce qu'on regarde. */
.accueil .tuile-ligne { display: flex; gap: 10px; max-width: 720px; }
.accueil .tuile-ligne > * { flex: 1 1 0; min-width: 0; }

/* -----------------------------------------------------------------------------
   LES PRESTATIONS EN BOUTONS — `B000-D330`, `B000-D337`.

   ⛔ AUCUN PLAFOND, AUCUNE COLONNE FIXE. Le nombre de boutons est celui du
      catalogue réservable ; `flex-wrap` s'y adapte tout seul. Une grille à
      nombre de colonnes figé casserait le jour où David coche une case de plus
      dans Options — et il n'aurait aucune raison de faire le rapprochement.

   ⚠️  60 px DE HAUT, `V3-y` ② : on tape au doigt, sur un X230 tactile.
   -------------------------------------------------------------------------- */
.accueil .tuile-services { display: flex; flex-wrap: wrap; gap: 10px; }

.accueil .tuile-choix {
  min-height: var(--cible); padding: 0 20px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  cursor: pointer;
}
.accueil .tuile-choix:hover { border-color: var(--or); }
/* Le choisi porte l'or, comme la tuile : une seule façon de dire « c'est
   celui-là » dans tout l'écran (`V3-ae` ④). */
.accueil .tuile-choix.choisi {
  background: var(--or); color: #1a1400; border-color: var(--or);
}

/* La même case que le fauteuil, au même prix : `--cible`, bleu, filet d'or.
   Deux champs qui font la même chose s'écrivent de la même façon. */
.accueil .tuile-panneau .champ {
  min-height: var(--cible); padding: 0 14px;
  background-color: var(--bleu); color: var(--texte);
  border: 1px solid var(--or); border-radius: 8px;
  font-family: inherit; font-size: 1.05rem;
}
.accueil .tuile-panneau select.champ { cursor: pointer; }
.accueil .tuile-panneau .champ::placeholder { color: var(--gris); }
.accueil .tuile-panneau .champ:focus {
  outline: none; border-color: var(--texte);
}

/* « fiche connue », « nouvelle fiche », « 3 personnes sur ce numéro » : une
   information, jamais un refus (`B000-D260`). Elle ne prend la place de rien —
   la ligne du téléphone la garde à droite, et elle disparaît quand elle est
   vide. */
.accueil .tuile-info {
  flex: 0 0 auto; align-self: center;
  font-size: .8rem; color: var(--gris); white-space: nowrap;
}
.accueil .tuile-info:empty { display: none; }

/* ⚠️  LE LIBELLÉ TIENT SUR UNE LIGNE, ET C'EST VOULU. Il disait « Prévenir le
       client — SMS, ou courriel si on n'a que l'adresse » : deux lignes, et une
       explication de ce qui fonctionne. `V3-ae` ③ : *pas de texte sur ce qui
       marche.* Le détail vit dans l'infobulle, pour qui le cherche. */
.accueil .tuile-case {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--cible); padding: 0 4px;
  font-size: .95rem; color: var(--texte);
  cursor: pointer; user-select: none;
}
.accueil .tuile-case input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  accent-color: var(--or);
}

.accueil .tuile-reserver {
  min-height: var(--cible);
  background: var(--or); color: #1a1400;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
}
.accueil .tuile-reserver:hover { filter: brightness(1.1); }
.accueil .tuile-reserver:disabled { opacity: .6; cursor: default; }

/* « Il doit pouvoir changer d'avis sans rien casser » : discret, à côté du
   geste principal, et il ne lui prend pas la moitié de la place. */
.accueil .tuile-panneau .discret {
  flex: 0 0 auto; min-height: var(--cible); padding: 0 18px;
  background: var(--bleu-clair); color: var(--texte);
  border: 1px solid var(--bleu-clair); border-radius: 8px;
  font-family: inherit; font-size: .9rem; cursor: pointer;
}
.accueil .tuile-panneau .discret:hover { border-color: var(--or); }

/* ⚠️  LE JOUR PREND DEUX FOIS LA PLACE DE L'HEURE. Depuis que la liste porte la
       date hébraïque et la fête — « mar. 27 août · כ״ו אֱלוּל תשפ״ו · ערב ראש
       השנה » —, un demi-rang la coupait au tiers. L'heure, elle, fait cinq
       caractères : elle n'a besoin de rien de plus. */
.accueil .tuile-panneau #tuile-jour  { flex: 2 1 0; }
.accueil .tuile-panneau #tuile-heure { flex: 1 1 0; }