/* Brain to Field — espace client.
   Un outil de travail, pas un site : un seul thème, assumé.

   ⚠ LES JETONS CI-DESSOUS SONT CEUX DE L'ESPACE DE FACTURATION
   (public/admin/style.css). Ils sont recopiés plutôt que partagés : la
   facturation est un outil en service, et déplacer sa feuille de style
   casserait le cache de l'application installée sur le téléphone de Saad.
   Si une couleur change là-bas, elle doit changer ici. */
:root {
  /* 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;
  --vert: #1d6b4f;
  --vert-clair: #e9f2ed;
  --vert: #1d6b4f;
  --vert-clair: #e6f1ec;
  --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 annule
   l'attribut, et l'écran de connexion reste par-dessus l'application. */
[hidden] { display: none !important; }

html, body { height: 100%; }
html { background: var(--encre); }   /* la bande d'état d'iOS prend cette couleur */
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); }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
.sous { color: var(--doux); font-size: 13.5px; margin: 6px 0 0; }
.num, .dates { font-variant-numeric: tabular-nums; }

/* ── Connexion ───────────────────────────────────────────────────────── */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.boite {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 28px; width: min(420px, 100%); text-align: left;
}
.boite img:not(.motsymbole) { width: 46px; height: 46px; border-radius: 10px; display: block; margin-bottom: 14px; }
.pied-connexion { margin-top: 18px; border-top: 1px solid var(--trait); padding-top: 14px; }

/* ── Charpente ───────────────────────────────────────────────────────── */
/* `align-content: start` : sans lui, une page courte étire les rangées et le
   bandeau du haut passe de 54 à 170 pixels. */
.coque { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; align-content: start; }
.barre-haut { display: none; }
.rail {
  background: var(--encre); color: #fff; padding: 20px 14px;
  min-height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px;
}
.marque { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.marque img:not(.motsymbole) { width: 34px; height: 34px; border-radius: 8px; }
.marque b { font-size: 14px; line-height: 1.2; display: block; }
.marque span { display: block; font-weight: 400; font-size: 12px; color: #9fb2c2; }
.rail a {
  color: #cfdbe5; text-decoration: none; padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; display: flex; align-items: center; justify-content: space-between;
}
.rail a:hover { background: #16314a; color: #fff; }
.rail a.ici { background: #fff; color: var(--encre); font-weight: 600; }
.rail .bas { margin-top: auto; padding-top: 18px; display: grid; gap: 8px; }
.rail .qui { font-size: 12.5px; color: #9fb2c2; padding: 0 12px; line-height: 1.45; }
.rail .qui b { color: #fff; display: block; font-size: 13.5px; }
.rail .bas button {
  background: none; border: 1px solid #2b4a66; color: #cfdbe5;
  padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.rail .bas button:hover { background: #16314a; color: #fff; }

main { padding: 26px 28px 60px; min-width: 0; }
.patiente { color: var(--doux); padding: 40px 0; }
.tete-page { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: baseline; margin-bottom: 20px; }
.tete-page .sous { margin: 0; }

/* ── Cartes et tableaux ──────────────────────────────────────────────── */
.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 18px;
}
.carte > h2 { margin-bottom: 4px; }
.carte > h2 + .sous { margin-bottom: 14px; }

.liste { display: grid; gap: 10px; }
.ligne {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: start;
  border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; background: var(--carte);
}
.ligne .dates { grid-row: 1 / span 2; font-size: 13px; color: var(--doux); white-space: nowrap; }
.ligne .quoi { font-weight: 600; }
.ligne .qui-client { font-size: 13.5px; color: var(--doux); }
.ligne .detail { grid-column: 2; font-size: 13.5px; color: var(--doux); }
.ligne .actes { grid-row: 1 / span 2; display: flex; gap: 8px; align-items: center; }

/* La ligne du client connecté se distingue des autres : sur un planning
   partagé, retrouver les siennes d'un coup d'œil est le premier besoin. */
.ligne.mienne { border-color: var(--accent); background: var(--accent-clair); }

/* Un créneau annulé reste affiché tant que rien ne l'a repris : les autres
   clients s'étaient peut-être organisés autour. Il s'efface visuellement
   sans disparaître. */
.ligne.liberee { opacity: .55; border-style: dashed; }

.vide { color: var(--doux); padding: 18px 0; }

/* ── Étiquettes ──────────────────────────────────────────────────────── */
.etiq {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.etiq.modifiee { background: var(--ambre-clair); color: var(--ambre); }
.etiq.liberee  { background: var(--voile);       color: var(--doux); }
.etiq.tache    { background: var(--accent-clair); color: var(--accent); }

/* ── Mois ────────────────────────────────────────────────────────────── */
.mois { display: flex; align-items: center; gap: 10px; }
.mois b { min-width: 11ch; text-align: center; font-size: 15px; }
.mois button {
  width: 34px; height: 34px; border: 1px solid var(--trait); background: var(--carte);
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--encre);
}
.mois button:hover { background: var(--voile); }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.champ { display: block; margin-bottom: 14px; }
.champ > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 9px;
  font: inherit; background: var(--carte); color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.champ textarea { min-height: 88px; resize: vertical; }
.champ .aide { font-size: 12.5px; color: var(--doux); margin-top: 5px; display: block; font-weight: 400; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.bouton {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border: 1px solid var(--trait); background: var(--carte); color: var(--encre);
  border-radius: 9px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--voile); }
.bouton.plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.plein:hover { background: #17405c; }
.bouton.danger { color: var(--alerte); border-color: #e8cdc8; }
.bouton.danger:hover { background: var(--alerte-clair); }
.bouton.large { width: 100%; justify-content: center; margin-top: 14px; }
.bouton[disabled] { opacity: .55; cursor: default; }
.actes-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ── Messages ────────────────────────────────────────────────────────── */
.message { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; }
.message.rouge { background: var(--alerte-clair); color: var(--alerte); }
.message.vert  { background: var(--vert-clair);   color: var(--vert); }
.message.ambre { background: var(--ambre-clair);  color: var(--ambre); }

/* ── Onglets du bas (téléphone) ──────────────────────────────────────── */
.onglets { display: none; }

@media (max-width: 860px) {
  .coque { grid-template-columns: 1fr; }
  .rail { display: none; }
  .barre-haut {
    display: flex; align-items: center; gap: 11px;
    background: var(--encre); color: #fff;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    position: sticky; top: 0; z-index: 5;
  }
  .barre-haut img:not(.motsymbole) { width: 30px; height: 30px; border-radius: 7px; }
  .barre-haut__titre b { display: block; font-size: 14px; line-height: 1.2; }
  .barre-haut__titre span { font-size: 12.5px; color: #9fb2c2; }
  main { padding: 18px 16px calc(78px + env(safe-area-inset-bottom)); }
  .onglets {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0; background: var(--carte);
    border-top: 1px solid var(--trait); z-index: 6;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .onglets a {
    text-align: center; padding: 11px 4px; font-size: 12px; color: var(--doux);
    text-decoration: none; font-weight: 600;
  }
  .onglets a.ici { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  .ligne { grid-template-columns: 1fr; }
  .ligne .dates, .ligne .actes { grid-row: auto; }
  .ligne .detail { grid-column: 1; }
  .duo { grid-template-columns: 1fr; }
  h1 { font-size: 21px; }
}

/* ── 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; }
.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); }

/* Le mois sans rien. La grille est quand même dessinée au-dessus : trois
   rangs creux lui donnent un corps, et le message se pose dessous plutôt
   que de prendre sa place. */
.pl-creux .pl-case { min-height: 96px; }

.pl-vide { padding: 20px 16px; text-align: center; color: var(--doux);
  border-top: 1px solid var(--trait); background: var(--voile); }
.pl-vide b { display: block; color: var(--encre); font-size: 13.5px; margin-bottom: 3px; }
.pl-vide span { font-size: 12.5px; }

/* « novembre 2026 » cliquable : un bouton qui a l'allure d'un lien, parce
   qu'il change de mois et ne quitte pas la page. */
.lien-mois { border: 0; background: none; padding: 0; font: inherit; color: var(--encre);
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lien-mois:hover { opacity: .7; }

/* ── 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; }
}