/* Brain2Field — espace de facturation.
   Un seul thème, assumé : c'est un outil de travail, pas un site. */
:root {
  /* Mêmes couleurs que le logo et que la facture : le marine du mot pour les
     surfaces sombres, le bleu du cerveau pour l'accent. */
  /* La palette du site : noire et blanche, sans exception de marque.
     L'ancien marine et l'ancien bleu venaient de l'emblème provisoire, qui
     n'apparaît sur aucun document réel de l'entreprise.

     Les TROIS couleurs sémantiques restent — rouge, ambre, vert. Elles ne
     décorent pas : elles disent qu'une facture est en retard, qu'un réglage
     manque, qu'un encaissement est arrivé. Un outil de travail sans signal
     coloré oblige à lire chaque ligne pour trouver celle qui cloche. */
  --papier: #f2f2f2;
  --carte: #ffffff;
  --encre: #0a0a0a;
  --doux: #767676;
  --trait: #e3e3e3;
  --voile: #f7f7f7;
  --accent: #0a0a0a;
  --accent-clair: #ececec;
  --alerte: #b3321f;
  --alerte-clair: #fbecea;
  --ambre: #8a5a14;
  --ambre-clair: #faf1e0;
  --rail: 232px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* `hidden` doit gagner : sans ça, un `display: grid` posé plus bas sur
   .connexion, .coque ou .onglets annule l'attribut et l'élément reste
   visible — l'écran de connexion restait affiché par-dessus l'application. */
[hidden] { display: none !important; }
html, body { height: 100%; }
/* ── LA BARRE D'ÉTAT DU TÉLÉPHONE ──────────────────────────────────────
   En application installée, iOS réserve une bande en haut pour l'heure et la
   batterie, et il la PEINT AVEC LA COULEUR DE FOND DU BODY. Avec un body
   gris clair, cette bande arrivait comme un voile clair au-dessus du bandeau
   marine. Le fond du body est donc marine, et c'est la coque qui porte le
   gris de la page. Même chose pour le rebond élastique en haut et en bas :
   il montre désormais la couleur des barres, pas une bande étrangère. */
html { background: var(--encre); }
body {
  margin: 0; background: var(--encre); color: var(--encre);
  font: 15px/1.5 var(--sans); -webkit-text-size-adjust: 100%;
}
.coque, .connexion { background: var(--papier); }
/* Un montant ou un numéro de facture ne se coupe jamais en deux : la colonne
   voisine se resserre à la place. */
.argent, .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.donnees td:first-child > b { white-space: nowrap; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* ── Charpente ───────────────────────────────────────────────────────── */
/* `align-content: start` est indispensable : sur une page courte, la grille
   étire ses rangées automatiques pour remplir la hauteur, et le bandeau du
   haut passait de 54 à 171 pixels. */
.coque { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; align-content: start; }

/* ── Bandeau du haut (petit écran seulement) ─────────────────────────── */
.barre-haut { display: none; }
.rail {
  background: var(--encre); color: #fff; padding: 20px 14px;
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh;
}
.rail .marque { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.rail .marque img:not(.motsymbole) { width: 34px; height: 34px; border-radius: 8px; }
.rail .marque b { font-size: 15px; letter-spacing: -.01em; }
.rail .marque span { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); font-weight: 400; }
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: rgba(255,255,255,.8); text-decoration: none; padding: 9px 12px; border-radius: 8px;
  font-size: 14.5px;
}
.rail a:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.rail .pastille {
  background: var(--alerte); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.rail .bas { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.rail .bas button {
  font: inherit; font-size: 13.5px; text-align: left; background: transparent;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85);
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.rail .bas button:hover { background: rgba(255,255,255,.08); }

main { padding: 28px 32px 64px; min-width: 0; }
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.entete p { margin: 4px 0 0; color: var(--doux); font-size: 14px; }

/* ── Pièces de base ──────────────────────────────────────────────────── */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.carte > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--trait);
}
.carte > header h2 { font-size: 15px; }
.carte > header .compte { color: var(--doux); font-size: 13px; }
.corps { padding: 16px; }
.grille { display: grid; gap: 16px; }
@media (min-width: 900px) { .grille.deux { grid-template-columns: 1fr 1fr; } }

.bouton {
  font: inherit; font-weight: 600; font-size: 14px; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre); padding: 9px 15px; border-radius: 8px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.bouton:hover { border-color: #c9d0cd; }
.bouton.plein { background: var(--encre); border-color: var(--encre); color: #fff; }
.bouton.plein:hover { background: #000; }
.bouton.vert { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.danger { color: var(--alerte); border-color: #e9cdc8; }
.bouton.petit { padding: 6px 11px; font-size: 13px; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.etiquette {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
  background: var(--voile); color: var(--doux); border: 1px solid var(--trait); white-space: nowrap;
}
.etiquette.vert { background: var(--accent-clair); color: var(--accent); border-color: #c6d7e4; }
.etiquette.rouge { background: var(--alerte-clair); color: var(--alerte); border-color: #f0d2cd; }
.etiquette.ambre { background: var(--ambre-clair); color: var(--ambre); border-color: #f2e0bf; }

/* « pas de compte client » : une mention, pas une alerte — le contrat est
   valide sans accès. Elle est cliquable parce qu'elle mène au seul geste
   qui la fait disparaître. */
.etiquette--lien { display: inline-block; margin-top: 4px; text-decoration: none; cursor: pointer; }
.etiquette--lien:hover { border-color: var(--encre); color: var(--encre); }

.avis { padding: 13px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.avis.rouge { background: var(--alerte-clair); border: 1px solid #f0d2cd; color: #7d2415; }
.avis.ambre { background: var(--ambre-clair); border: 1px solid #f2e0bf; color: #6c4706; }
.avis.vert { background: var(--accent-clair); border: 1px solid #c6d7e4; color: #163a53; }
/* Seul le premier gras fait office de titre : mettre TOUS les gras en bloc
   coupait les phrases qui mettent un numéro de facture en évidence. */
.avis > b:first-child { display: block; margin-bottom: 2px; }

/* ── Chiffres ────────────────────────────────────────────────────────── */
/* 150 px et non 170 : sur un écran de 375 px, 170 faisait basculer les quatre
   tuiles sur quatre lignes et le tableau de bord commençait par du défilement. */
.chiffres { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.chiffre { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 15px 16px; }
.chiffre .quoi { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
/* Le montant ne se coupe jamais : « 128 740 DH » sur deux lignes dans une
   tuile de téléphone se lit comme deux nombres différents. */
.chiffre .combien { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; white-space: nowrap; }
@media (max-width: 440px) { .chiffre .combien { font-size: 21px; } }
.chiffre .sous { font-size: 13px; color: var(--doux); margin-top: 2px; }
.chiffre.alerte { border-color: #f0d2cd; background: var(--alerte-clair); }
.chiffre.alerte .combien, .chiffre.alerte .quoi { color: var(--alerte); }

/* ── Listes ──────────────────────────────────────────────────────────── */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--trait); }
.liste li:last-child { border-bottom: none; }
.liste .principal { flex: 1; min-width: 0; }
.liste .principal b { display: block; font-weight: 600; }
.liste .principal span { color: var(--doux); font-size: 13px; }
.liste .montant { font-weight: 600; white-space: nowrap; }
.liste a.ouvrir { color: inherit; text-decoration: none; display: contents; }
.sur-mobile { display: none; }
@media (max-width: 860px) { .sur-mobile { display: inline-block; margin-top: 5px; } }
.liste li:hover { background: var(--voile); }
.vide { padding: 22px 16px; color: var(--doux); font-size: 14px; text-align: center; }

/* Un tableau trop large défile DANS sa carte au lieu d'en déborder : sur un
   téléphone, le total se retrouvait hors du cadre blanc. */
.tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 12px 12px; }
table.donnees { width: 100%; border-collapse: collapse; }
table.donnees th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--doux); padding: 10px 16px; border-bottom: 1px solid var(--trait); white-space: nowrap;
}
table.donnees td { padding: 11px 16px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
table.donnees tr:last-child td { border-bottom: none; }
table.donnees tbody tr:hover { background: var(--voile); cursor: pointer; }
table.donnees .droite, th.droite { text-align: right; }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.champs { display: grid; gap: 14px; }
@media (min-width: 720px) { .champs.deux { grid-template-columns: 1fr 1fr; } }
label.champ { display: block; }
label.champ > span {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--doux); margin-bottom: 5px;
}
label.champ .aide { font-weight: 400; color: var(--doux); font-size: 12px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--trait);
  border-radius: 8px; background: var(--carte); color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--voile); color: var(--doux); cursor: default; border-color: #ebeeed;
}
textarea { min-height: 78px; resize: vertical; }

/* Le carnet d'adresses, déroulé sous le champ destinataire. Le champ est
   dans un label en bloc : la liste se cale sur sa largeur. */
label.champ { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10); overflow: hidden;
}
.suggestions button {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: none; font: inherit; color: var(--encre); cursor: pointer;
}
.suggestions button + button { border-top: 1px solid var(--voile); }
.suggestions button:hover, .suggestions button.vise { background: var(--accent-clair); }
.suggestions button b { font-weight: 600; }
.suggestions button span { color: var(--doux); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
fieldset { border: none; margin: 0; padding: 0; }
fieldset > legend {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--doux); padding: 0 0 10px;
}

/* Les lignes d'une pièce */
.lignes { display: grid; gap: 8px; }
.ligne-piece { display: grid; gap: 8px; grid-template-columns: 1fr 72px 118px 92px 110px 38px; align-items: center; position: relative; }
.ligne-piece label { min-width: 0; }
/* En largeur, la ligne d'en-tête du tableau sert d'étiquette : on n'en répète
   pas une par case. En mobile cet en-tête disparaît, et deux cases de chiffres
   sans étiquette ne veulent plus rien dire — elles réapparaissent alors. */
.ligne-piece label > span { display: none; }
.ligne-piece .total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ligne-piece .jeter {
  border: none; background: transparent; color: var(--doux); cursor: pointer; font-size: 19px; line-height: 1;
  padding: 4px; border-radius: 6px;
}
.ligne-piece .jeter:hover { color: var(--alerte); background: var(--alerte-clair); }
.entete-lignes { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
@media (max-width: 860px) {
  .ligne-piece { grid-template-columns: 1fr 1fr; padding: 12px 12px 10px; border: 1px solid var(--trait); border-radius: 10px; }
  .ligne-piece .designation { grid-column: 1 / -1; padding-right: 30px; }
  .ligne-piece label > span {
    display: block; font-size: 12px; font-weight: 600; color: var(--doux); margin-bottom: 4px;
  }
  .ligne-piece .total { grid-column: 1 / -1; text-align: right; padding-top: 2px; }
  .ligne-piece .jeter { position: absolute; top: 8px; right: 8px; }
  .entete-lignes { display: none; }
}

.recap { display: grid; gap: 6px; justify-items: end; margin-top: 16px; }
.recap .l { display: flex; gap: 20px; justify-content: space-between; min-width: 260px; font-size: 14px; }
.recap .l.sous { color: var(--doux); font-size: 13px; }
.recap .l.gros { font-size: 18px; font-weight: 700; border-top: 1px solid var(--trait); padding-top: 8px; }

/* ── Connexion ───────────────────────────────────────────────────────── */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.connexion .boite { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 30px; width: 100%; max-width: 380px; }
.connexion img:not(.motsymbole) { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 14px; }

/* ── Mobile : le rail devient un tiroir, ouvert par le bouton du bandeau ─ */
/* La barre d'onglets du bas a été retirée le 02/11/2026 : six entrées
   serrées, et pas toutes. Le tiroir montre LE rail — rien à dupliquer. */
.onglets { display: none !important; }
.burger { display: none; }
.voile-menu { display: none; }
@media (max-width: 860px) {
  .coque { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); z-index: 50;
    height: auto; overflow-y: auto; padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-104%); transition: transform .32s cubic-bezier(.16,1,.3,1);
    box-shadow: 18px 0 40px -24px rgba(0,0,0,.8);
  }
  .coque.menu-ouvert .rail { transform: none; }
  .voile-menu { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .3s; }
  .coque.menu-ouvert .voile-menu { opacity: 1; pointer-events: auto; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; margin: 0 2px 0 -6px; flex: none;
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .burger:active { background: rgba(255,255,255,.12); }
  main { padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }

  /* En application installée, la page passe SOUS la barre d'état du
     téléphone : sans cette réserve, le premier titre est coupé par l'heure
     et la batterie. C'est `env(safe-area-inset-top)` qui donne la hauteur
     réelle de l'encoche, appareil par appareil. */
  .barre-haut {
    display: flex; align-items: center; gap: 11px;
    position: sticky; top: 0; z-index: 30;
    background: var(--encre); color: #fff;
    padding: calc(11px + env(safe-area-inset-top)) 14px 11px;
  }
  .barre-haut img:not(.motsymbole) { width: 32px; height: 32px; border-radius: 8px; flex: none; }
  .barre-haut__titre { min-width: 0; line-height: 1.25; }
  .barre-haut__titre b { display: block; font-size: 15px; }
  .barre-haut__titre span {
    display: block; font-size: 12.5px; color: rgba(255,255,255,.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .barre-haut__action {
    margin-left: auto; font: inherit; font-size: 13px; padding: 8px 13px; border-radius: 8px;
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); cursor: pointer;
  }

  /* La barre du bas : 56 px de hauteur utile, soit la cible tactile
     recommandée. L'ancienne version tenait sur 11 px de texte et 7 px de
     marge — on la manquait une fois sur trois. */
  .onglets {
    display: grid; grid-auto-flow: column; position: fixed; inset: auto 0 0 0; z-index: 20;
    gap: 3px; background: var(--encre); padding: 7px 6px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 26px -18px rgba(0,0,0,.9);
  }
  .onglets a {
    display: flex; align-items: center; justify-content: center; min-height: 46px;
    color: rgba(255,255,255,.72); text-decoration: none; text-align: center; padding: 6px 2px;
    font-size: 13px; font-weight: 500; border-radius: 10px; position: relative;
  }
  .onglets a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.16); font-weight: 600; }
  .onglets a:active { background: rgba(255,255,255,.24); }
  .onglets a .pastille {
    position: absolute; top: 3px; left: 50%; transform: translateX(14px);
    background: var(--alerte); color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: 99px; padding: 1px 5px; line-height: 1.3;
  }
  table.donnees th.secondaire, table.donnees td.secondaire { display: none; }
  /* Trois colonnes doivent tenir dans 347 pixels : on resserre plutôt que de
     renvoyer le montant hors du cadre. */
  table.donnees th, table.donnees td { padding: 10px; font-size: 14px; }
  table.donnees .etiquette { font-size: 10.5px; padding: 2px 6px; letter-spacing: .03em; }
}
@media (max-width: 380px) { .onglets a { font-size: 12px; } }

.patiente { padding: 40px; text-align: center; color: var(--doux); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* « + nouveau client » à côté du menu déroulant : créer une fiche ne doit
   pas obliger à quitter la pièce en cours. Un bouton discret, dans
   l'étiquette du champ — il accompagne, il ne concurrence pas. */
.champ > span .lien-neuf {
  float: right; font: inherit; font-size: 12px; font-weight: 600;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.champ > span .lien-neuf:hover { color: var(--encre); }

/* ── LE MOT-SYMBOLE ───────────────────────────────────────────────────
   2402 × 452 : c'est un bandeau, pas une pastille. Les règles carrées de
   l'ancien emblème l'auraient écrasé. Sur le rail et le bandeau sombres,
   c'est la version blanche qui est servie. */
.motsymbole { display: block; height: auto; width: 100%; max-width: 168px; }
.boite .motsymbole { max-width: 190px; margin-bottom: 18px; }
.rail .motsymbole { max-width: 150px; }
.barre-haut .motsymbole { max-width: 116px; width: 116px; }
/* ⚠ « .rail .marque » et pas « .marque » : la règle d'origine est plus
   spécifique et gagnait, laissant la mention EN LIGNE à côté du bandeau —
   elle dépassait alors de 50 px le bord du rail et se faisait couper. */
.rail .marque { display: block; padding: 0 8px 20px; }
.marque__quoi {
  display: block; margin-top: 7px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #9a9a9a;
}
.barre-haut__titre span { font-size: 12.5px; color: #9a9a9a; }

/* ⚠ Ces mesures doivent être EXPLICITES. Les règles carrées plus haut
   (`.boite img`, `.marque img`…) l'emportaient en spécificité et
   écrasaient le bandeau en une vignette de 46 px. Elles sont désormais
   restreintes par `:not(.motsymbole)`, mais on fixe tout de même ici pour
   que l'intention se lise d'un coup. */
img.motsymbole { width: 100%; height: auto; border-radius: 0; flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   LE PLANNING — vue en barres                                  31/10/2026

   Une ligne par intervention, les jours en colonnes, une barre qui couvre
   la période. C'est la forme qu'ont les plannings d'entreprise parce
   qu'elle répond d'un coup d'œil à la seule question qui compte ici :
   « quand l'agence est-elle prise, et avec qui ».

   ⚠ LA COULEUR EST FONCTIONNELLE, pas décorative. Le site est en noir et
   blanc ; un planning ne peut pas l'être. La teinte code le TYPE de tâche
   — c'est ce qui permet de lire la charge du mois sans lire les libellés.
   Elle n'est jamais le seul signal : chaque barre porte aussi son texte,
   et la légende nomme les couleurs.                                      */
:root {
  --t-reperage:   #4a6fa5;
  --t-pret_vd:    #a8701f;
  --t-exposition: #7a4e8c;
  --t-evenement:  #2e7d5b;
  --t-documents:  #55646f;
  --t-autre:      #6b6b6b;
  --jour-min: 26px;
}

.planning { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }

/* La grille défile horizontalement sur petit écran plutôt que de se
   comprimer : un mois de 31 colonnes illisibles ne sert personne. */
.planning__defile { overflow-x: auto; }
/* ⚠ La largeur minimale est CALCULÉE, pas « max-content ». Des colonnes en
   « 1fr » dans un conteneur en max-content s'effondrent : la grille ne
   montrait que six jours, étirés sur toute la largeur. La valeur est posée
   en ligne par le script, qui seul connaît le nombre de jours du mois. */
.planning__grille { }

.pl-rang { display: grid; align-items: center; }
.pl-rang + .pl-rang { border-top: 1px solid var(--trait); }

.pl-tete { position: sticky; top: 0; z-index: 2; background: var(--voile);
           border-bottom: 1px solid var(--trait); }
.pl-tete .pl-jour { text-align: center; padding: 7px 0 8px; line-height: 1.15; }
.pl-tete .pl-jour b { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pl-tete .pl-jour span { display: block; font-size: 9.5px; color: var(--doux);
                         text-transform: uppercase; letter-spacing: .06em; }

/* Le week-end et le jour même : deux repères que tout planning porte. */
.pl-jour.weekend, .pl-case.weekend { background: #f4f5f6; }
.pl-jour.aujourdhui b { color: var(--carte); background: var(--encre);
                        border-radius: 999px; padding: 1px 0; }
.pl-case.aujourdhui { box-shadow: inset 1px 0 0 var(--encre), inset -1px 0 0 var(--encre); }

.pl-libelle { padding: 9px 14px; min-width: 190px; max-width: 190px;
              border-right: 1px solid var(--trait); background: var(--carte); }
.pl-libelle .pl-client { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.pl-libelle .pl-tache { font-size: 12px; color: var(--doux); margin-top: 1px; }

.pl-piste { position: relative; display: grid; height: 100%; }
.pl-case { height: 100%; min-height: 40px; border-right: 1px solid #f0f1f2; }

/* La barre occupe ses colonnes par « grid-column » : aucune arithmétique de
   pixels, donc rien à recalculer quand la largeur change. */
.pl-barre {
  grid-row: 1; align-self: center; height: 26px; border-radius: 6px;
  display: flex; align-items: center; gap: 6px; padding: 0 9px;
  color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; z-index: 1;
  background: var(--teinte, var(--t-autre));
}
.pl-barre .pl-mention {
  background: rgba(255,255,255,.26); border-radius: 4px; padding: 0 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* La ligne du client connecté : un liseré, pas une autre couleur — la
   couleur dit déjà le type de tâche et ne peut pas dire deux choses. */
.pl-rang.mienne .pl-libelle { box-shadow: inset 3px 0 0 var(--encre); }

/* Un créneau libéré : hachuré et creux. Il ne colore plus la charge du
   mois, mais il reste lisible tant que personne ne l'a repris. */
.pl-barre.liberee {
  background: repeating-linear-gradient(135deg, #e8eaec 0 6px, #f4f5f6 6px 12px);
  color: var(--doux); border: 1px dashed #c9cdd1;
}
.pl-barre.liberee .pl-mention { background: #fff; color: var(--doux); }

.pl-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px;
              border-top: 1px solid var(--trait); background: var(--voile); }
.pl-legende span { display: inline-flex; align-items: center; gap: 7px;
                   font-size: 12.5px; color: var(--doux); }
.pl-legende i { width: 12px; height: 12px; border-radius: 3px; background: var(--teinte); }

.pl-vide { padding: 34px 16px; text-align: center; color: var(--doux); }

/* ── Sur téléphone : la liste par jour ────────────────────────────────
   Trente et une colonnes ne tiennent pas dans 375 px, et un planning
   qu'on déchiffre à la loupe n'est pas un planning. On garde la même
   information, dans la forme que le petit écran sait rendre. */
.pl-liste { display: none; }
@media (max-width: 760px) {
  .planning__defile { display: none; }
  .pl-liste { display: block; }
  .pl-jourbloc + .pl-jourbloc { border-top: 1px solid var(--trait); }
  .pl-jourbloc__date { padding: 9px 14px 4px; font-size: 12px; font-weight: 700;
                       text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
  .pl-jourbloc__date.aujourdhui { color: var(--encre); }
  .pl-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px 12px; }
  .pl-item i { width: 4px; align-self: stretch; min-height: 34px; border-radius: 2px;
               background: var(--teinte); flex: none; }
  .pl-item.liberee i { background: repeating-linear-gradient(135deg,#d6d9dc 0 4px,#eef0f1 4px 8px); }
  .pl-item__quoi { font-weight: 600; font-size: 13.5px; }
  .pl-item__qui { font-size: 12.5px; color: var(--doux); margin-top: 1px; }
  .pl-item__quand { font-size: 12px; color: var(--doux); margin-top: 2px; }
}