/* ma-feuille — écrans de pointage.
   Charte : « Charte Groupe Perrin » actualisée (kit graphique du 25/09/2026,
   design system partagé, source fusion-ao) — elle remplace la première
   déclinaison du 28/07 (Archivo, IBM Plex Mono, rayons de 14 px, gélules).
   Références : docs/design/README.md et docs/design/charte-couleurs-perrin.md.

   Trois largeurs, un seul balisage :
   - téléphone (base) : colonne unique, en-têtes collants, action principale
     dans un dock fixe en bas de l'écran ;
   - tablette en portrait (620 à 919 px) : la même chose, colonne élargie à
     720 px, barre d'onglets groupée sous la colonne ;
   - poste de travail (≥ 920 px, le point de rupture de la charte) : rail de
     navigation à gauche, page large, formulaires en carte, bouton d'action
     collé au bas de la fenêtre. Deux colonnes (semaine | synthèse, saisie |
     calculé) à partir de 1100 px seulement. Le rail ne s'affiche qu'à partir
     de 920 px.
   Le doigt et la souris se distinguent par `pointer` et `hover`, pas par la
   largeur : une tablette en paysage a la mise en page du poste et les cibles
   du téléphone ; le survol n'existe qu'à la souris. Audit du 07/10/2026 :
   docs/design/audit-ux-responsive.md.

   Règles de la charte tenues ici :
   - l'orange plein ne porte qu'UNE action par écran ; en texte, c'est
     `orange-600` (6,1:1) ; le cuivre ne porte jamais de texte ;
   - les gris sont bleus, les ombres teintées bleu ;
   - trois rayons (4 / 6 / 8 px), rien en gélule ;
   - une seule famille, Qanelas, servie depuis static/fonts (plus de Google
     Fonts : la PWA doit s'ouvrir hors réseau), chiffres tabulaires partout
     où l'on compare des valeurs.

   Écart assumé : cibles tactiles de 48 px sur téléphone (la charte dit 44),
   l'app est utilisée sur chantier, parfois avec des gants. */

@font-face { font-family: "Qanelas"; src: url("../fonts/Qanelas-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Qanelas"; src: url("../fonts/Qanelas-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Qanelas"; src: url("../fonts/Qanelas-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Qanelas"; src: url("../fonts/Qanelas-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Qanelas"; src: url("../fonts/Qanelas-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ── Couleurs de marque ── */
  --bleu: #1b2a44;          /* Bleu de Prusse */
  --orange: #c45727;        /* Orange épicée — aplats à texte blanc uniquement */
  --cuivre: #b67f3e;        /* Cuivre — filets, décor, jamais de texte */
  --lin: #f1eadd;           /* Lin — fond */

  /* ── Rampes de travail ── */
  --bleu-900: #101b2e; --bleu-800: #1b2a44; --bleu-700: #2a3d5c; --bleu-600: #3d5477;
  --bleu-300: #8695ac; --bleu-100: #d6dce5; --bleu-50: #edf0f4;
  --orange-700: #8f3d1b; --orange-600: #a3461d; --orange-400: #d97845; --orange-100: #f7e2d6;
  --cuivre-100: #f0e3d0;
  --lin-100: #faf7f2; --lin-200: #f1eadd; --lin-300: #e2d7c4;
  --succes: #2e7d5b; --succes-100: #e6f1ec; --succes-700: #1f5d43;
  --alerte: #c9931f; --alerte-100: #faf0da; --alerte-700: #7a5a0e;
  --erreur: #b3332b; --erreur-100: #f7e4e2; --erreur-700: #8c2822;
  --info: #2a5c8a; --info-100: #e3ebf3; --info-700: #224c72;

  /* ── Rôles — à préférer aux rampes ── */
  --fond: var(--lin-200);
  --surface: #ffffff;
  --surface-calme: var(--lin-100);
  --encre: var(--bleu);
  --encre-douce: var(--bleu-600);   /* 7,2:1 sur blanc */
  --encre-inverse: #ffffff;
  --bordure: var(--bleu-100);       /* contrôles */
  --bordure-lin: var(--lin-300);    /* cartes */
  --filet: var(--bleu-50);
  --lien: var(--orange-600);
  --lien-survol: var(--orange-700);

  --radius-dense: 4px;
  --radius-controle: 6px;
  --radius-carte: 8px;

  --shadow-1: 0 1px 2px rgba(27, 42, 68, .06);
  --shadow-2: 0 1px 3px rgba(27, 42, 68, .08), 0 3px 10px rgba(27, 42, 68, .05);
  --shadow-3: 0 10px 28px rgba(27, 42, 68, .14);
  --shadow-focus: 0 0 0 3px rgba(196, 87, 39, .35);

  --app-max: 560px;
  --page-max: 1180px;
  --rail: 248px;
  --tap: 48px;

  --sans: "Qanelas", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Un `display` d'auteur (flex, grid…) l'emporte sur le `display:none` que
   l'attribut `hidden` tient de la feuille du navigateur. Sans cette règle,
   `element.hidden = true` reste sans effet sur .offline et .icon-btn. */
[hidden] { display: none !important; }

body.app-body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lien); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--lien-survol); text-decoration: underline; } }
button { font-family: inherit; }
/* Focus au clavier : un contour, pas une ombre. Les cartes et le bouton
   principal ont leur propre ombre, qui l'emportait sur un anneau en
   box-shadow (le focus devenait invisible) ; et le mode contraste élevé de
   Windows efface les ombres, pas les contours. Orange : 3:1 au moins sur
   blanc, lin et Prusse. Les champs gardent leur bordure orange (:focus). */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* … et jamais caché sous ce qui colle (WCAG 2.4.11) : en avançant au
   clavier, le navigateur fait défiler en gardant ces marges. Poste : le
   dock collé au bas de la fenêtre. Téléphone : l'en-tête collant (122 px
   au plus, replié), le dock, et la barre d'onglets quand elle est là. */
html { scroll-padding: var(--vc-h, 0px) 0 96px; }
@media (max-width: 919px) {
  html { scroll-padding: calc(130px + var(--vc-h, 0px)) 0 calc(96px + env(safe-area-inset-bottom)); }
  html:has(body.avec-onglets:not(.en-saisie)) { scroll-padding-bottom: calc(156px + env(safe-area-inset-bottom)); }
}

/* ── Tactile (téléphone, tablette, PWA) ───────────────────
   Deux appuis rapides — flèches de semaine, ±, puces d'heures — ne doivent
   pas zoomer la page : `manipulation` coupe le zoom au double appui de
   Safari iOS et de Firefox Android, et garde le pincement (accessibilité :
   on ne bloque jamais le zoom). Posé sur <html> ET sur les contrôles, parce
   que WebKit repart de `auto` à chaque conteneur qui défile (grille du
   planning, jours de « Mon équipe », onglets). Le survol n'existe pas au
   doigt : il est réservé aux souris (`hover: hover`, plus bas), et l'appui
   se voit à la place — le bouton s'enfonce. */
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
a, button, input, select, textarea, label, .pl-scroll, .eq-jours, .onglets { touch-action: manipulation; }
@media (pointer: coarse) {
  button:not(:disabled):active { transform: scale(.97); }
  .day:not(:disabled):active, .membre:has(.membre-choix:active), .cht-opt:active { transform: scale(.99); }
}
code {
  font-family: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", monospace;
  font-size: .85em; padding: 1px 4px; border-radius: var(--radius-dense);
  background: var(--lin-100); border: 1px solid var(--bordure-lin);
}
.ic { display: block; flex-shrink: 0; }

/* ── Marque (texte, pas une image : la police de l'app s'y applique) ── */
.marque { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
@media (hover: hover) { .marque:hover { text-decoration: none; color: inherit; } }
/* Symbole GP officiel (kit du 25/09/2026), encrage orange, rapport 1,30 : on fixe
   la hauteur, jamais la largeur. */
.marque img { height: 30px; width: auto; display: block; flex-shrink: 0; }
.marque b { display: block; font-size: 17px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.marque i {
  display: block; margin-top: 2px; font-style: normal; font-size: 10px; line-height: 12px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
}

/* ── Coquille ─────────────────────────────────────────── */
.app { max-width: var(--app-max); margin: 0 auto; padding: 0 0 100px; }
.rail { display: none; }

.app-head {
  position: sticky; top: var(--vc-h, 0px); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--bordure-lin);
  padding: 10px 16px;
}
/* « Ma semaine » et « Mon équipe », au téléphone : seule la navigation de
   semaine (et, pour l'équipe, la rangée des jours) reste collée en haut ; la
   marque et le titre défilent avec la page, et reviennent quand on remonte.
   L'en-tête colle à un `top` négatif, la hauteur de ce qui sort de l'écran,
   mesurée par semaine.js (--repli) : polices et taille du texte la font
   varier, on ne l'écrit pas en dur. Sans mesure, il reste entier. */
@media (max-width: 919px) {
  #ecran-semaine .app-head, #ecran-equipe .app-head { top: calc(var(--vc-h, 0px) - var(--repli, 0px)); }
}
.app-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Au téléphone, l'en-tête ne porte que l'essentiel, comme les applications
   d'Apple : ni logo ni nom (ils sont dans « Profil »), le titre au centre,
   les actions à droite, des icônes sans cadre. L'écran est pour les données. */
@media (max-width: 919px) {
  .tete-accueil { display: grid; grid-template-columns: 1fr auto 1fr; }
  .tete-accueil .marque { visibility: hidden; }
  .tete-accueil .tete-titre { text-align: center; }
  .tete-accueil .app-head-actions { justify-self: end; }
  .app-head .icon-btn { border-color: transparent; background: transparent; color: var(--bleu); }
  .app-head .icon-btn:disabled { opacity: .25; }
  .app-head { padding: 6px 12px 8px; }
  .weeknav { margin-top: 4px; }
}
.app-head-actions { display: flex; gap: 8px; }
/* Un <h1> par écran (lecteurs d'écran : on saute de titre en titre). Il
   reçoit le focus quand on change d'écran (semaine.js) : pas de contour,
   ce n'est pas une commande. */
.app-title { margin: 0; font-weight: 800; font-size: 17px; letter-spacing: -.015em; }
.app-title:focus { outline: none; }
.app-sub { color: var(--encre-douce); font-size: 13px; text-wrap: balance; }
.app-sur { display: none; }

.icon-btn {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--bordure); background: var(--surface);
  border-radius: var(--radius-controle); cursor: pointer;
  color: var(--encre); font-size: 14px; font-weight: 600;
  transition: background-color 140ms, border-color 140ms;
}
@media (hover: hover) { .icon-btn:hover { background: var(--bleu-50); border-color: var(--bleu-300); } }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn .lib { display: none; }

/* Bandeau réseau : le cuivre porte l'attente en pastille, le texte est encré */
.offline {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--alerte-100); color: var(--alerte-700);
  border-bottom: 1px solid var(--lin-300);
  font-size: 13px; font-weight: 600; padding: 7px 12px;
}
.offline::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-dense);
  background: var(--cuivre); flex: 0 0 auto;
}

/* Navigation de semaine. Le libellé ne passe jamais à la ligne : l'en-tête
   garde sa hauteur et les flèches leur place, d'une semaine à l'autre — on
   enchaîne les appuis sans que la cible bouge sous le doigt. */
.weeknav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.weeknav-label { flex: 1; min-width: 0; text-align: center; }
.weeknav-label b, .weeknav-label span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weeknav-label b { font-size: 15px; font-weight: 700; }
.weeknav-label span { color: var(--encre-douce); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Les sous-titres de ces en-têtes (« 50 compagnons · 2 absents au
   planning ») non plus : sinon l'en-tête grandit d'un jour à l'autre. */
#equipe-jour, #pl-sous-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-head-row > div { min-width: 0; }

/* Semaine en chargement : le libellé affiche déjà la semaine demandée, le
   contenu attend la réponse — estompé et inerte, pour qu'on ne touche pas
   un jour de l'ancienne semaine. Le délai évite un clignotement quand le
   réseau répond vite. */
.screen[aria-busy="true"] > :not(.app-head) { opacity: .45; pointer-events: none; transition: opacity 120ms 150ms; }

/* ── Bandeau de total ─────────────────────────────────── */
.total {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px; background: var(--bleu); color: var(--lin);
  border-bottom: 3px solid var(--orange);
}
.total-h {
  font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
}
.total-lab { color: var(--bleu-100); font-size: 13px; }
.total-right { margin-left: auto; text-align: right; color: var(--bleu-100); font-size: 13px; }

/* ── Liste des jours ──────────────────────────────────── */
.days { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.day {
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); padding: 12px 16px; box-shadow: var(--shadow-1);
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  transition: box-shadow 140ms, border-color 140ms;
}
@media (hover: hover) { .day:hover { border-color: var(--bleu-300); box-shadow: var(--shadow-2); } }
.day.vide {
  background: var(--surface-calme); border-style: dashed; box-shadow: none;
  color: var(--encre-douce);
}
@media (hover: hover) { .day.vide:hover { background: var(--surface); border-color: var(--bleu-300); } }
.day.vide .day-cht { color: var(--encre); }

.day-date { flex: 0 0 46px; }
.day-dow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .10em;
  color: var(--encre-douce); font-weight: 700;
}
.day-num {
  font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.day-body { flex: 1; min-width: 0; }
/* Le code chantier porte le lot (suffixe .0x) donc le corps de métier :
   chiffres tabulaires, lisible en entier. Le libellé peut aller sur deux
   lignes plutôt qu'être tronqué. */
.day-code {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--encre-douce); font-variant-numeric: tabular-nums;
}
.day-cht {
  font-weight: 700; overflow: hidden; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.day-meta { color: var(--encre-douce); font-size: 13px; margin-top: 4px; }

.day-h { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-h b { font-size: 20px; font-weight: 800; }
.day-h i { font-style: normal; font-size: 13px; color: var(--encre-douce); margin-left: 3px; }

.day.futur { opacity: .55; cursor: default; }
@media (hover: hover) { .day.futur:hover { border-color: var(--bordure-lin); background: var(--surface-calme); } }
.day.aujourdhui { border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.day.aujourdhui .day-dow { color: var(--orange-600); }
.sem-alerte { margin: 12px 12px 0; }
.weeknav .icon-btn:disabled { opacity: .35; }

/* Deux chantiers sur la même journée */
.day-multi { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--bordure-lin); }

/* ── Badges d'état ────────────────────────────────────── */
/* Couples sémantiques 100/700 de la charte : chaque état a sa teinte, tous ≥ 6:1. */
.etat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--radius-controle);
  background: var(--bleu-50); color: var(--bleu-700);
}
.etat.brouillon { background: var(--bleu-50);     color: var(--bleu-700); }
.etat.declare   { background: var(--info-100);    color: var(--info-700); }
.etat.valide    { background: var(--succes-100);  color: var(--succes-700); }
.etat.envoye    { background: var(--bleu);        color: var(--encre-inverse); }
.etat.corrige   { background: var(--alerte-100);  color: var(--alerte-700); }
.etat.annule    { background: var(--erreur-100);  color: var(--erreur-700); text-decoration: line-through; }
.etat.echec     { background: var(--erreur-100);  color: var(--erreur-700); }

/* ── Transparence des corrections ─────────────────────── */
.correction {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-controle);
  background: var(--alerte-100); border: 1px solid var(--alerte-100);
  border-left: 3px solid var(--alerte); font-size: 13px;
}
.correction-t { font-weight: 700; color: var(--alerte-700); }
.correction del { color: var(--encre-douce); }
.correction ins { text-decoration: none; font-weight: 700; }
.correction-who { color: var(--encre-douce); margin-top: 3px; }

/* ── Notifications ────────────────────────────────────── */
/* Le nombre de nouvelles (.nav-badge) se pose sur le coin de la cloche. */
.btn-notifs { position: relative; }
.btn-notifs .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; box-shadow: 0 0 0 2px var(--surface); }
.notif {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bordure-lin); border-left: 3px solid var(--bordure-lin);
  border-radius: var(--radius-carte); padding: 12px 16px; box-shadow: var(--shadow-1); font-size: 14px;
  transition: box-shadow 140ms, border-color 140ms;
}
@media (hover: hover) { .notif:hover { border-color: var(--bleu-300); box-shadow: var(--shadow-2); } }
.notif.nouvelle { border-left-color: var(--orange); background: var(--orange-100); }
.notif-t { font-weight: 700; }
.notif-validation .notif-t { color: var(--succes-700); }
.notif-annulation .notif-t { color: var(--erreur-700); }
.notif-jour { color: var(--encre-douce); font-size: 13px; margin-top: 2px; }
.notif-val { margin-top: 6px; }
.notif-val del { color: var(--encre-douce); }
.notif-val ins { text-decoration: none; font-weight: 700; }
.notif-who { color: var(--encre-douce); font-size: 13px; margin-top: 4px; }

/* ── Mon profil ───────────────────────────────────────── */
.profil-carte { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.profil-carte .avatar { flex-basis: 56px; height: 56px; font-size: 18px; background: var(--orange-600); }
.profil-nom { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.profil-infos {
  margin: 0 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); font-size: 14px;
}
.profil-infos:empty { display: none; }
.profil-infos dt { color: var(--encre-douce); }
.profil-infos dd { margin: 0; font-weight: 600; }
.btn-sortir {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--erreur-700); border-color: var(--erreur-100);
}
@media (hover: hover) { .btn-sortir:hover { background: var(--erreur-100); border-color: var(--erreur); } }
.btn-sortir + .field-hint { margin-top: 8px; text-align: center; }

/* ── Action principale ────────────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, var(--fond) 62%, rgba(241, 234, 221, 0));
}
.dock-inner { max-width: var(--app-max); margin: 0 auto; }
/* Blanc sur orange épicée = 4,43 : réservé au gros corps. Le seuil AA
   « grand texte » est 14 pt gras, soit 18,67 px : d'où 19 px / 800 (à 18 px,
   il manquait 0,67 px et le contraste échouait). Le survol passe en
   orange-600, plus contrasté. */
.btn-primary {
  width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-controle);
  background: var(--orange); color: var(--encre-inverse);
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: background-color 140ms;
}
@media (hover: hover) { .btn-primary:hover { background: var(--orange-600); } }
.btn-primary:active { background: var(--orange-700); }
.btn-primary:disabled { background: var(--bleu-50); color: var(--bleu-300); box-shadow: none; cursor: not-allowed; }
.btn-wide {
  width: 100%; min-height: var(--tap); border: 1px solid var(--bordure);
  background: var(--surface); border-radius: var(--radius-controle);
  font-size: 15px; cursor: pointer; color: var(--encre); font-weight: 600;
}
@media (hover: hover) { .btn-wide:hover { background: var(--bleu-50); border-color: var(--bleu-300); } }

/* ── Écrans en pile ───────────────────────────────────── */
.screen { display: none; }
.screen.on { display: block; }

.sheet { padding: 16px 16px 0; }
.sheet h2 { margin: .2em 0 .1em; font-size: 22px; font-weight: 800; }
.sheet-lead { color: var(--encre-douce); margin: 0 0 20px; }

.field { margin-bottom: 20px; }
.field > label {
  display: block; font-weight: 700; margin-bottom: 8px;
  font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .10em;
  color: var(--encre-douce);
}
.field-hint { color: var(--encre-douce); font-size: 13px; margin-top: 6px; }

.input, .select {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  border: 1px solid var(--bordure); border-radius: var(--radius-controle); background: var(--surface);
  font-size: 16px; color: var(--encre); font-family: inherit;
}
@media (hover: hover) { .input:hover, .select:hover { border-color: var(--bleu-300); } }
.input:focus, .select:focus { outline: none; border-color: var(--orange); box-shadow: var(--shadow-focus); }
.input.gros { font-size: 26px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

/* Compteur d'heures : gros pas, pas de clavier à sortir */
.stepper { display: flex; align-items: stretch; gap: 10px; }
.stepper .icon-btn { flex: 0 0 64px; min-height: 64px; font-size: 26px; font-weight: 700; }
.stepper-val {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); border-radius: var(--radius-controle);
  background: var(--surface); min-height: 64px; cursor: text;
}
.stepper-input {
  width: 100%; border: 0; background: transparent; text-align: center; color: var(--encre);
  font: inherit; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; padding: 4px 0 0; min-height: 44px;
}
.stepper-input:focus { outline: none; }
.stepper-val:focus-within { border-color: var(--orange); box-shadow: var(--shadow-focus); }
.stepper-val span { color: var(--encre-douce); font-size: 12px; }

/* Premier chargement de « Ma semaine » : la forme des jours avant les jours,
   plutôt qu'un écran vide. Remplacé au premier rendu. */
.day.squelette { cursor: default; min-height: 72px; box-shadow: none; }
.day.squelette::before, .day.squelette::after {
  content: ""; display: block; border-radius: var(--radius-dense);
  background: linear-gradient(90deg, var(--lin-100) 25%, var(--lin-200) 50%, var(--lin-100) 75%);
  background-size: 200% 100%; animation: squelette 1.4s ease-in-out infinite;
}
.day.squelette::before { flex: 0 0 34px; height: 40px; }
.day.squelette::after { flex: 0 1 60%; height: 16px; margin-top: 6px; }
@keyframes squelette { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--tap); min-width: 56px; padding: 0 14px; border: 1px solid var(--bordure);
  border-radius: var(--radius-controle); background: var(--surface); cursor: pointer;
  font-size: 15px; color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .chip:hover { background: var(--bleu-50); border-color: var(--bleu-300); } }
/* Heures : les sept puces sur une seule ligne, même au téléphone */
.chips-heures { flex-wrap: nowrap; gap: 6px; }
.chips-heures .chip { flex: 1 1 0; min-width: 0; padding: 0 4px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--encre-inverse); font-weight: 700; }

/* ── « Calculé pour vous · rien à remplir » ────────────── */
/* Ce bloc n'est pas décoratif : il matérialise l'acquis de E0 — le panier et la
   zone de trajet sont dérivés par le profil horaire d'Optim, jamais saisis ici. */
.calcule {
  background: var(--surface-calme); border: 1px solid var(--bordure-lin);
  border-top: 3px solid var(--cuivre);
  border-radius: var(--radius-carte); padding: 14px 16px; margin-bottom: 20px;
}
.calcule-t {
  font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--encre-douce); margin-bottom: 10px;
}
/* La valeur en face du libellé, l'explication dessous sur toute la largeur :
   dans une colonne étroite, « 11,44 € » ne se coupe plus en deux lignes. */
.calcule-l {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px;
  padding: 8px 0; border-top: 1px solid var(--filet);
}
.calcule-l:first-of-type { border-top: 0; }
.calcule-l > div:first-child { display: contents; }
.calcule-lab { font-weight: 700; }
.calcule-sub { grid-column: 1 / -1; grid-row: 2; color: var(--encre-douce); font-size: 13px; }
.calcule-mt { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.calcule-pied { color: var(--encre-douce); font-size: 12px; margin-top: 10px; }

/* ── Verrou camion / kilométrage ──────────────────────── */
.gate { padding: 20px 16px; }
.gate-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-100); color: var(--orange-700); border-radius: var(--radius-controle);
  padding: 6px 10px; font-size: 11px; line-height: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.gate h1, .gate h2 { margin: 14px 0 .2em; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.gate-lead { color: var(--encre-douce); margin: 0 0 22px; }
.gate-note {
  background: var(--surface-calme); border: 1px solid var(--bordure-lin); border-radius: var(--radius-controle);
  padding: 10px 12px; font-size: 13px; color: var(--encre-douce); margin: 0 0 8px;
}
.gate-note b { color: var(--encre); font-variant-numeric: tabular-nums; }
.input + .gate-note { margin: 8px 0 0; }
/* Écart invraisemblable, vu pendant la frappe : il sera refusé à l'envoi */
.gate-note.hors { background: var(--alerte-100); border-color: var(--alerte-100); border-left: 3px solid var(--alerte); color: var(--alerte-700); font-weight: 600; }

.erreur {
  background: var(--erreur-100); color: var(--erreur-700);
  border: 1px solid var(--erreur-100); border-left: 3px solid var(--erreur);
  border-radius: var(--radius-controle);
  padding: 10px 12px; font-size: 14px; font-weight: 600; margin-top: 8px;
}

/* ── Mon équipe (conducteur de travaux) ───────────────── */
.compteurs {
  display: flex; background: var(--bleu); color: var(--lin);
  border-bottom: 3px solid var(--orange);
}
.compteur { flex: 1; padding: 14px 10px; text-align: center; }
.compteur + .compteur { border-left: 1px solid rgba(241, 234, 221, .18); }
.compteur b { display: block; font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.compteur span { font-size: 11px; color: var(--bleu-100); text-transform: uppercase; letter-spacing: .10em; font-weight: 700; }
.compteur.alerte b { color: var(--orange-400); }   /* sur Prusse : 4,6:1, gros corps uniquement */

.membre {
  position: relative;
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); padding: 12px 16px; box-shadow: var(--shadow-1);
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left; width: 100%; font: inherit; color: inherit;
  transition: box-shadow 140ms, border-color 140ms;
}
@media (hover: hover) { .membre.a-cocher:hover { border-color: var(--bleu-300); box-shadow: var(--shadow-2); } }
.membre.choisi { border-color: var(--orange); background: var(--orange-100); }
.membre.manquant { border-style: dashed; background: var(--surface-calme); box-shadow: none; }
/* Le bouton qui coche porte le nom ; sa zone d'appui couvre la carte. Les
   autres boutons de la carte (« Corriger ») passent au-dessus. */
.membre-choix {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer;
}
.membre-choix::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-carte); }
.membre-choix:focus-visible { outline: none; }
.membre-choix:focus-visible::after { outline: 2px solid var(--orange); outline-offset: 2px; }
.membre .btn-petit { position: relative; z-index: 1; }

/* Initiales : rayon de carte, pas de rond (charte : rien en gélule) */
.avatar {
  flex: 0 0 40px; height: 40px; border-radius: var(--radius-carte);
  background: var(--bleu); color: var(--encre-inverse);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.membre.manquant .avatar { background: var(--bleu-100); color: var(--bleu-700); }
.membre.choisi .avatar { background: var(--orange-600); }

.membre-corps { flex: 1; min-width: 0; }
.membre-nom { font-weight: 700; }
.membre-l { color: var(--encre-douce); font-size: 13px; margin-top: 3px; }
.membre-rien { color: var(--orange-600); font-size: 13px; font-weight: 700; margin-top: 3px; }
.membre-l .day-code { display: inline; }
.membre-alerte {
  margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-dense);
  background: var(--alerte-100); border-left: 3px solid var(--alerte);
  color: var(--alerte-700); font-size: 13px; font-weight: 600;
}
.membre-h { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.membre-h b { font-size: 19px; font-weight: 800; }
.membre-h i { font-style: normal; font-size: 13px; color: var(--encre-douce); margin-left: 3px; }

.coche {
  flex: 0 0 24px; height: 24px; border-radius: var(--radius-dense); margin-top: 8px;
  border: 2px solid var(--bleu-300); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: transparent; font-weight: 800;
}
.membre.choisi .coche { background: var(--orange); border-color: var(--orange); color: var(--encre-inverse); }

/* ── Portes d'entrée (connexion, enrôlement) ──────────── */
.entree-marque { display: none; }
.entree-logo { margin-bottom: 24px; }
.porte {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-1);
  min-height: var(--tap); transition: box-shadow 140ms, border-color 140ms;
}
@media (hover: hover) { .porte:hover { border-color: var(--orange); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; } }
.porte-t { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.porte-t .ic-fleche { margin-left: auto; color: var(--bleu-300); }
@media (hover: hover) { .porte:hover .ic-fleche { color: var(--orange-600); } }
.porte-s { color: var(--encre-douce); font-size: 13px; margin-top: 6px; }
.porte-autre { margin-top: 26px; color: var(--encre-douce); font-size: 14px; }
.porte-autre p { margin: .5em 0; }
.porte-autre a { font-weight: 700; }
.bandeau-err {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--erreur-100); color: var(--erreur-700);
  border-left: 3px solid var(--erreur); border-radius: var(--radius-carte);
  padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}
.bandeau-warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--alerte-100); color: var(--alerte-700);
  border-left: 3px solid var(--alerte); border-radius: var(--radius-carte);
  padding: 12px 14px; font-size: 14px; margin-top: 16px;
}
.bandeau-err b, .bandeau-warn b { display: block; color: var(--encre); }
.bandeau-err .ic, .bandeau-warn .ic { margin-top: 2px; }

/* Le code est lu sur un papier puis recopié : lettres espacées, casse haute,
   et jamais de correction automatique du clavier. */
.code-input { letter-spacing: .22em; text-transform: uppercase; }

/* ── Enrôler un compagnon (conducteur, assistante) ─────── */
.code-remis {
  background: var(--bleu); color: var(--lin); border-radius: var(--radius-carte);
  border-bottom: 3px solid var(--orange);
  padding: 18px 16px; text-align: center; margin: 0 0 14px;
}
.code-remis-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--bleu-100); }
.code-remis-v {
  font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: .12em; margin: 8px 0 4px; word-break: break-all; color: var(--encre-inverse);
}
.code-remis-s { font-size: 13px; color: var(--bleu-100); }
.enrol-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
/* Pleine largeur, sous la carte : à l'intérieur, la colonne restante était si
   étroite que les dates se coupaient caractère par caractère. */
.enrol-appareils {
  background: var(--surface-calme); border: 1px solid var(--bordure-lin); border-top: 0;
  border-radius: 0 0 var(--radius-carte) var(--radius-carte);
  margin: -1px 10px 0; padding: 2px 12px 8px;
}
.appareil {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--bordure-lin); font-size: 13px;
}
.appareil:first-child { border-top: 0; }
.appareil-corps { flex: 1; min-width: 0; }
.appareil-lib { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appareil-meta { color: var(--encre-douce); }
.appareil.hs .appareil-lib { text-decoration: line-through; color: var(--encre-douce); }
.btn-petit {
  border: 1px solid var(--bordure); background: var(--surface); color: var(--encre);
  border-radius: var(--radius-controle); padding: 7px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; min-height: 36px; white-space: nowrap;
}
@media (hover: hover) { .btn-petit:hover { background: var(--bleu-50); border-color: var(--bleu-300); } }
.btn-petit:disabled { opacity: .45; cursor: not-allowed; }

/* ── Lignes déjà déclarées d'un jour (corriger, retirer) ── */
.jour-lignes { margin-bottom: 20px; }
.jour-lignes-t {
  font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--encre-douce); margin-bottom: 8px;
}
.ligne-jour {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
}
.ligne-jour.active { border-color: var(--orange); background: var(--orange-100); }
.ligne-jour-corps { flex: 1 1 200px; min-width: 0; }
.ligne-jour-lib { font-weight: 700; }
.ligne-jour-h { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-jour-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ligne-jour-note { font-size: 12px; color: var(--encre-douce); }
.membre-corriger { margin-top: 8px; }

/* Confirmation éphémère, au-dessus du dock */
.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 16px; border-radius: var(--radius-carte);
  background: var(--bleu); color: var(--encre-inverse); box-shadow: var(--shadow-3);
  font-size: 14px; font-weight: 600; text-align: center;
}

/* ── Feuille de confirmation (static/js/feuille.js) ───── */
/* Au téléphone, elle monte du bas, à portée de pouce, l'action au-dessus
   d'« Annuler ». Dès 620 px, une fenêtre au centre, boutons en ligne.
   C'est un <dialog> : ne jamais lui donner de `display`, il resterait
   affiché une fois fermé. */
.feuille {
  position: fixed; inset: auto 0 0; margin: 0; padding: 0;
  width: 100%; max-width: none; max-height: calc(100dvh - 24px);
  overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: var(--radius-carte) var(--radius-carte) 0 0;
  background: var(--surface); color: var(--encre); box-shadow: var(--shadow-3);
}
/* Ce que fait déjà le navigateur, écrit pour ceux qui ne connaissent pas
   <dialog> : sans cette ligne, la feuille s'afficherait en bas de page. */
.feuille:not([open]) { display: none; }
.feuille::backdrop { background: rgba(16, 27, 46, .5); }
.feuille[open] { animation: feuille-monte 200ms ease-out; }
@keyframes feuille-monte { from { transform: translateY(32px); opacity: 0; } }
.feuille-corps {
  display: flex; flex-direction: column; gap: 12px;
  max-width: var(--app-max); margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}
.feuille-titre { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
.feuille-texte { margin: 0; color: var(--encre-douce); }
.feuille-detail {
  padding: 10px 12px; border-radius: var(--radius-controle);
  background: var(--surface-calme); border: 1px solid var(--bordure-lin); font-weight: 700;
}
.feuille-alerte {
  padding: 10px 12px; border-radius: var(--radius-controle); font-weight: 600;
  background: var(--erreur-100); color: var(--erreur-700); border-left: 3px solid var(--erreur);
}
.feuille-champ { margin: 0; }

/* ── « Voir comme… » (static/js/voir-comme.js) ─────────── */
/* Un aplat ocre sombre, en tête de page et collé en haut : impossible à
   manquer, et d'une autre couleur que tout le reste. Blanc dessus à 6,4:1.
   Les en-têtes collants et le rail se posent dessous (--vc-h, mesuré). */
.voir-comme {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--alerte-700); color: var(--encre-inverse);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.voir-comme[hidden] { display: none; }
.voir-comme-ic { flex: 0 0 auto; }
/* Au téléphone, deux lignes à côté du bouton : « Vous voyez Ma feuille
   comme », puis le nom. Dès 620 px, la phrase sur une ligne, et dessous
   « Lecture seule · depuis » le vrai compte. */
.voir-comme-txt { flex: 1 1 0; min-width: 0; margin: 0; font-size: 12px; line-height: 1.3; }
.voir-comme-txt b { display: block; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.voir-comme-txt .vc-l2, .voir-comme-revenir .vc-suite { display: none; }
@media (min-width: 620px) {
  .voir-comme-txt { font-size: 13px; }
  .voir-comme-txt .vc-l1, .voir-comme-txt b { display: inline; font-size: 15px; font-weight: 800; }
  .voir-comme-txt .vc-l2 { display: block; overflow-wrap: anywhere; }
  .voir-comme-revenir .vc-suite { display: inline; }
}
.voir-comme-revenir {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius-controle);
  background: rgba(255, 255, 255, .14); color: var(--encre-inverse);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .voir-comme-revenir:hover { background: #fff; color: var(--alerte-700); } }
.voir-comme-revenir:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.voir-comme-revenir:disabled { opacity: .6; cursor: progress; }

.voir-comme-feuille .feuille-titre:focus { outline: none; }
.vcf-compte { margin: -4px 0 0; font-size: 13px; color: var(--encre-douce); }
/* Hauteur fixe : la feuille ne saute pas à chaque lettre tapée. */
.vcf-liste {
  display: flex; flex-direction: column; gap: 2px;
  height: min(40vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -8px; padding: 2px 8px;
}
.vcf-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px;
  border: 0; border-radius: var(--radius-controle); background: transparent;
  font: inherit; color: var(--encre); text-align: left; cursor: pointer;
}
.vcf-item + .vcf-item { box-shadow: 0 -1px 0 var(--filet); }
@media (hover: hover) { .vcf-item:hover { background: var(--bleu-50); } }
.vcf-item.choisi { background: var(--lin-200); }
.vcf-item:disabled { cursor: progress; }
.vcf-nom { flex: 1; min-width: 0; font-weight: 700; }
.vcf-sous { display: block; font-size: 13px; font-weight: 500; color: var(--encre-douce); }
.feuille-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
/* Action destructive (retirer, révoquer, se déconnecter, clore la paie) :
   le rouge sémantique, blanc dessus à 6,1:1. */
.btn-primary.danger { background: var(--erreur); }
@media (hover: hover) { .btn-primary.danger:hover { background: var(--erreur-700); } }
.btn-primary.danger:active { background: var(--erreur-700); }
@media (min-width: 620px) {
  .feuille {
    inset: 0; margin: auto; width: min(480px, calc(100% - 48px)); height: fit-content;
    border-radius: var(--radius-carte);
  }
  .feuille-corps { padding: 24px; }
  /* « Annuler » à gauche, l'action à droite. */
  .feuille-actions { flex-direction: row-reverse; }
  .feuille-actions .btn-primary, .feuille-actions .btn-wide { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ── Mon planning de la semaine (miroir du planning Optim) ── */
.planning-sem {
  margin: 12px 12px 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-left: 3px solid var(--cuivre); border-radius: var(--radius-carte);
}
.planning-sem-t {
  font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--encre-douce); margin-bottom: 6px;
}
.planning-l { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.planning-l + .planning-l { border-top: 1px dashed var(--bordure-lin); }
.planning-l-corps { flex: 1; min-width: 0; }
/* Deux lignes plutôt qu'une coupée : au téléphone, les pastilles des jours
   ne laissaient que « DIJON Accessibilit… ». */
.planning-l-lib {
  font-weight: 700; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.planning-l.absence .planning-l-lib { color: var(--encre-douce); font-weight: 600; }
.planning-jours { display: flex; gap: 3px; margin-top: 5px; }
.planning-jour {
  width: 20px; height: 20px; border-radius: var(--radius-dense);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--bleu-50); color: var(--bleu-300);
}
.planning-jour.on { background: var(--bleu); color: var(--encre-inverse); }
.planning-l.absence .planning-jour.on { background: var(--bleu-100); color: var(--bleu-700); }
.planning-l-h { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Jour vide mais planifié : ce que dit le planning, en attendant le pointage */
.day-prevu {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: var(--radius-dense);
  background: var(--lin-100); border-left: 2px solid var(--cuivre);
  font-size: 13px; color: var(--encre);
}
.day-prevu.absence { border-left-color: var(--bleu-300); color: var(--encre-douce); }

/* ── Hors réseau : saisies gardées sur le téléphone ───── */
.file-attente {
  margin: 12px 12px 0; padding: 10px 14px; border-radius: var(--radius-carte);
  background: var(--info-100); color: var(--info-700); border-left: 3px solid var(--info);
  font-size: 14px; font-weight: 600;
}
.file-rejet {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-dense);
  background: var(--erreur-100); color: var(--erreur-700); border-left: 3px solid var(--erreur);
  font-weight: 600;
}
.file-attente .btn-petit { margin-top: 8px; }
.etat.attente { background: var(--info-100); color: var(--info-700); border: 1px dashed var(--info); }

/* ── Choix du chantier : le planning d'abord, puis la recherche ── */
.cht-choix { display: flex; flex-direction: column; gap: 6px; }
.cht-choix:empty { display: none; }
.cht-opt {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-controle);
  padding: 10px 12px; min-height: var(--tap); transition: border-color 140ms, background 140ms;
}
@media (hover: hover) { .cht-opt:hover { border-color: var(--bleu-300); } }
.cht-opt.on { border-color: var(--orange); background: var(--orange-100); box-shadow: inset 0 0 0 1px var(--orange); }
.cht-opt-t { display: flex; align-items: center; gap: 8px; }
.cht-opt-tag {
  margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--radius-dense); background: var(--bleu-50); color: var(--bleu-700);
}
/* Petit texte blanc : sur orange-600 (6,1:1), jamais sur l'orange épicée (4,43) */
.cht-opt.on .cht-opt-tag { background: var(--orange-600); color: var(--encre-inverse); }
.cht-opt-lib { display: block; font-weight: 700; margin-top: 2px; }
.cht-recherche { position: relative; margin: 10px 0 6px; }
.cht-recherche .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bleu-300); pointer-events: none; }
.cht-recherche .input { padding-left: 38px; }

/* ── Administration ───────────────────────────────────── */
.onglets {
  display: flex; gap: 4px; margin: 0 12px 12px; padding: 4px; overflow-x: auto;
  background: var(--surface-calme); border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
}
/* Au téléphone, les cinq rubriques ne tiennent pas sur une ligne : elles
   passent à la ligne plutôt que de défiler (« Paie », la clôture du mois,
   restait hors de l'écran, sans rien qui le signale). */
@media (max-width: 619px) {
  .onglets { flex-wrap: wrap; }
}
.onglet {
  flex: 1 0 auto; border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px;
  color: var(--encre-douce); padding: 9px 14px; border-radius: var(--radius-controle); cursor: pointer;
  min-height: 40px;
}
@media (hover: hover) { .onglet:hover { color: var(--encre); background: var(--surface); } }
.onglet[aria-selected="true"] { background: var(--bleu); color: var(--encre-inverse); }
/* Dans une rangée qui défile : le contour passe à l'intérieur, sinon coupé */
.onglet:focus-visible, .eq-jour:focus-visible { outline-offset: -2px; }
.admin-zone { margin: 0 12px; }
.admin-t h2 { margin: 0 0 4px; font-size: 20px; }
.admin-liste + .admin-t { margin-top: 28px; }   /* deuxième rubrique d'un onglet (Équipes → Délégations) */
.admin-form {
  display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end;
  padding: 12px; margin: 12px 0; background: var(--surface-calme);
  border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
}
.admin-form .field { flex: 1 1 180px; margin-bottom: 0; }
.admin-ajout { min-height: var(--tap); margin-top: 8px; }
.admin-liste { display: flex; flex-direction: column; gap: 8px; }
.admin-l {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
}
.admin-l.inactif { background: var(--surface-calme); border-style: dashed; color: var(--encre-douce); }
.admin-l-corps { flex: 1 1 200px; min-width: 0; }
.admin-l-corps b { display: block; }
.admin-l-sub { display: block; color: var(--encre-douce); font-size: 13px; margin-top: 2px; }
.admin-email { flex: 2 1 240px; min-height: 40px; }

/* ── Suivi des heures : le tableau de bord de l'assistante ── */
/* Au téléphone, l'en-tête (marque, titre) défile avec la page : rien à
   garder en haut, la barre d'onglets fait la navigation. */
#ecran-suivi .app-head { position: relative; }
.suivi-chiffres { border-radius: var(--radius-carte); overflow: hidden; margin: 0 0 12px; }
.suivi-bandeau { margin: 0 0 12px; }
.suivi-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.suivi-carte {
  background: var(--surface); border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
  border-left: 3px solid var(--bordure-lin); padding: 14px 16px; box-shadow: var(--shadow-1);
}
.suivi-carte.alerte { border-left-color: var(--alerte); }
.suivi-carte.ok { border-left-color: var(--succes); }
.sheet .suivi-carte-t { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.suivi-carte p { margin: 0 0 8px; color: var(--encre-douce); font-size: 14px; }
.suivi-carte .btn-petit { margin-top: 4px; }
p.suivi-note { color: var(--encre-douce); }
.suivi-alerte, p.suivi-alerte { color: var(--alerte-700); font-weight: 600; }
.suivi-liste { list-style: none; margin: 4px 0 8px; padding: 0; }
.suivi-liste li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 8px 0; border-top: 1px solid var(--filet); font-size: 14px;
}
.suivi-liste li span { color: var(--encre-douce); }
.suivi-liste li span.suivi-alerte { color: var(--alerte-700); }
.suivi-depots { list-style: none; margin: 4px 0 0; padding: 0; }
.suivi-depot {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--filet);
}
.suivi-depot-corps { min-width: 0; }
.suivi-depot-corps b { font-variant-numeric: tabular-nums; }
.suivi-depot .etat { flex: 0 0 auto; margin-top: 2px; }
.suivi-jeton { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.suivi-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 0; color: var(--encre-douce); font-size: 13px;
}
@media (min-width: 900px) {
  .suivi-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suivi-carte.large { grid-column: 1 / -1; }
}
/* Une tuile qui mène quelque part (« 3 à valider ») est un bouton. */
.suivi-tuile { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.suivi-tuile span::after { content: " ›"; }
.suivi-tuile:focus-visible { outline-offset: -4px; }
@media (hover: hover) { .suivi-tuile:hover { background: rgba(255, 255, 255, .07); } }
/* Une ligne « conducteur » ouvre ses lignes à valider. */
.suivi-liste .suivi-lien {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; width: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.suivi-lien b { color: var(--lien); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .suivi-lien:hover b { color: var(--lien-survol); } }
@media (pointer: coarse) { .suivi-liste .suivi-lien { min-height: 44px; align-items: center; } }
.suivi-filtre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px;
  padding: 8px 12px; border-radius: var(--radius-carte); background: var(--surface-calme);
  border: 1px solid var(--bordure-lin); font-size: 14px;
}
.suivi-filtre .btn-petit { margin-left: auto; }
.suivi-avalider { display: flex; flex-direction: column; gap: 8px; }
.sheet .suivi-jour { margin: 12px 0 2px; font-size: 15px; font-weight: 800; }
.sheet .suivi-jour:first-child { margin-top: 0; }
.admin-role { flex: 0 1 200px; min-height: 40px; }

/* ── Planning d'équipe : compagnons × jours ──────────── */
.pl-zone { margin: 12px; }
.pl-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-1);
}
.pl-scroll > .vide-msg { border: 0; }
.pl-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.pl-table thead th {
  padding: 10px 4px 8px; font-size: 11px; line-height: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce);
  border-bottom: 1px solid var(--bordure-lin); white-space: nowrap;
}
.pl-table thead th.auj { color: var(--orange-600); }
.pl-table td { padding: 4px 3px; vertical-align: top; border-bottom: 1px solid var(--filet); }
.pl-table tr:last-child td, .pl-table tr:last-child th { border-bottom: 0; }
/* Le nom reste visible quand la grille défile sous le doigt */
.pl-qui {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  text-align: left; padding: 8px 10px 8px 12px; min-width: 116px; max-width: 150px;
  border-right: 1px solid var(--bordure-lin); border-bottom: 1px solid var(--filet);
}
thead .pl-qui { z-index: 2; }
.pl-nom { display: block; font-weight: 700; font-size: 13px; line-height: 1.25; }
.pl-tot { display: block; font-size: 11px; color: var(--encre-douce); font-variant-numeric: tabular-nums; margin-top: 2px; }
thead .pl-tot { text-transform: none; letter-spacing: 0; font-weight: 600; }

.pl-case {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  width: 100%; min-width: 82px; min-height: 50px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--radius-controle);
  font: inherit; text-align: left; color: var(--encre); background: transparent;
}
button.pl-case { cursor: pointer; transition: box-shadow 140ms; }
@media (hover: hover) { button.pl-case:hover { box-shadow: var(--shadow-2); } }
button.pl-case:focus-visible { outline-offset: -2px; }
.pl-lib, .pl-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 128px; }
.pl-lib {
  font-size: 12px; font-weight: 700; line-height: 1.25; white-space: normal; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Code et heures : plus petits que le libellé, mais pas estompés. Une
   opacité de 0,8 faisait tomber les cases « manquant » à 3,7:1. */
.pl-code { font-size: 10px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pl-h { font-size: 11px; font-variant-numeric: tabular-nums; }
.pl-case.valide   { background: var(--succes-100); color: var(--succes-700); }
.pl-case.declare  { background: var(--info-100);   color: var(--info-700); }
.pl-case.manquant { background: var(--alerte-100); color: var(--alerte-700); border-left: 3px solid var(--alerte); }
.pl-case.absent   { background: var(--bleu-50);    color: var(--encre-douce); }
.pl-case.futur    { background: var(--surface-calme); color: var(--encre-douce); border: 1px dashed var(--bordure-lin); }
.pl-case.auj { box-shadow: inset 0 0 0 1px var(--bleu); }
.pl-case.ecart { border: 1px solid var(--orange); }
.pl-ecart-m { position: absolute; top: 3px; right: 6px; color: var(--orange-600); font-weight: 800; font-size: 13px; }

.pl-legende {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0;
  font-size: 12px; color: var(--encre-douce);
}
.pl-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pl-pas { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pl-pas.valide { background: var(--succes-100); border: 1px solid var(--succes); }
.pl-pas.declare { background: var(--info-100); border: 1px solid var(--info); }
.pl-pas.manquant { background: var(--alerte-100); border: 1px solid var(--alerte); }
.pl-pas.absent { background: var(--bleu-50); border: 1px solid var(--bleu-300); }
.pl-pas.futur { background: var(--surface-calme); border: 1px dashed var(--bleu-300); }
.pl-legende .pl-ecart-m { position: static; }
/* Téléphone : colonnes resserrées, on voit trois jours sans défiler */
@media (max-width: 919px) {
  .pl-qui { min-width: 92px; max-width: 112px; padding: 8px 6px 8px 10px; }
  .pl-nom { font-size: 12px; }
  .pl-case { min-width: 96px; min-height: 46px; padding: 5px 6px; }
  .pl-lib { font-size: 11px; max-width: 112px; }
  .pl-code { max-width: 112px; }
  /* Les écrans racines ont leur onglet : pas de flèche retour */
  body.avec-onglets #ecran-planning [data-retour], body.avec-onglets #ecran-equipe [data-retour],
  body.avec-onglets #ecran-enrolement [data-retour], body.avec-onglets #ecran-admin [data-retour],
  body.avec-onglets #ecran-profil [data-retour] { visibility: hidden; }
}

/* ── Barre d'onglets du téléphone (façon iOS) ─────────── */
/* Sous 920 px seulement : au-delà, le rail fait le même travail. Fond
   translucide et flou, filet fin, icône au-dessus d'un libellé court ;
   l'onglet actif passe en orange (texte orange-600 : 5,9:1 sur la barre).
   Les autres en encre douce (7,5:1) : le gris clair d'iOS (bleu-300, 3:1)
   ne se lit pas en plein soleil sur un chantier. */
.onglets-bas { display: none; }
/* Côtés : l'encoche d'un téléphone en paysage, et sur tablette la largeur
   de la colonne (les onglets restent groupés sous le contenu). */
body.avec-onglets .onglets-bas {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 4px max(6px, env(safe-area-inset-right), calc(50% - var(--app-max) / 2))
           calc(4px + env(safe-area-inset-bottom))
           max(6px, env(safe-area-inset-left), calc(50% - var(--app-max) / 2));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bordure-lin);
}
.onglet-bas {
  flex: 1 1 0; min-width: 0; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  color: var(--encre-douce); font: inherit; font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.onglet-bas[hidden] { display: none; }
.onglet-bas span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglet-bas[aria-current="page"] { color: var(--orange-600); font-weight: 800; }
.onglet-bas:active svg { transform: scale(.92); }
.onglet-bas:focus-visible { outline-offset: -2px; border-radius: var(--radius-controle); }
/* Écrans de saisie : la barre s'efface, leur bouton reprend le bas */
body.avec-onglets.en-saisie .onglets-bas { display: none; }
/* Ailleurs, le bouton d'action se pose au-dessus de la barre */
body.avec-onglets:not(.en-saisie) .dock { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
body.avec-onglets .app { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
body.avec-onglets:not(.en-saisie) .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
/* La barre porte la navigation (et « Profil », donc la déconnexion) : l'en-tête
   ne garde que la cloche des notifications (et « Voir comme… ») */
body.avec-onglets #btn-equipe, body.avec-onglets #btn-enroler, body.avec-onglets #btn-admin { display: none; }

/* ── Signature de la semaine ──────────────────────────── */
.sign-alerte {
  margin: 12px 12px 0; padding: 12px 14px; border-radius: var(--radius-carte);
  background: var(--alerte-100); color: var(--alerte-700); border-left: 3px solid var(--alerte);
  font-size: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.sign-alerte.conteste { background: var(--erreur-100); color: var(--erreur-700); border-left-color: var(--erreur); }
.sign-alerte-t { font-weight: 700; color: var(--encre); }
.sign-bloc {
  margin: 0 12px 12px; padding: 14px 16px; border-radius: var(--radius-carte);
  background: var(--surface); border: 1px solid var(--bordure-lin); border-top: 3px solid var(--cuivre);
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--encre-douce);
}
.sign-bloc-t { font-weight: 800; font-size: 15px; color: var(--encre); }
.sign-bloc.fait { border-top-color: var(--succes); }
.sign-bloc.fait .sign-bloc-t { color: var(--succes-700); }
.sign-bouton { margin-top: 4px; }
.sign-lien {
  border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--lien); text-decoration: underline; text-underline-offset: 2px; text-align: left;
}
@media (hover: hover) { .sign-lien:hover { color: var(--lien-survol); } }

.sign-sheet { display: flex; flex-direction: column; gap: 14px; }
.sign-corrige {
  padding: 12px 14px; border-radius: var(--radius-controle);
  background: var(--alerte-100); border-left: 3px solid var(--alerte); font-size: 14px;
}
.sign-corrige-t { font-weight: 700; color: var(--alerte-700); margin-bottom: 6px; }
.sign-corrige-l { margin-top: 3px; }
.sign-corrige del { color: var(--encre-douce); }
.sign-corrige ins { text-decoration: none; font-weight: 700; }
.sign-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sign-table td { padding: 8px 4px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.sign-table tfoot td { border-bottom: 0; border-top: 2px solid var(--bleu); font-weight: 800; font-size: 16px; padding-top: 10px; }
.sign-j { white-space: nowrap; font-weight: 700; color: var(--encre-douce); width: 56px; }
.sign-c-lib { display: block; font-weight: 700; }
.sign-c-code { display: block; font-size: 11px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.sign-h { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.sign-certif { margin: 0; font-size: 15px; }
.sign-pad-cadre {
  position: relative; border: 1px solid var(--bordure); border-radius: var(--radius-carte);
  background: var(--surface); margin-top: 8px;
  background-image: linear-gradient(to right, var(--bleu-100), var(--bleu-100));
  background-size: calc(100% - 48px) 1px; background-position: 24px 72%; background-repeat: no-repeat;
}
.sign-pad { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.sign-pad-aide {
  position: absolute; left: 24px; top: 74%; font-size: 12px; color: var(--bleu-300); pointer-events: none;
}
.sign-effacer { position: absolute; top: 8px; right: 8px; }
/* 16 px, pas moins : en dessous, Safari iOS zoome sur le champ à la saisie. */
.sign-commentaire { min-height: 110px; resize: vertical; font: inherit; font-size: 16px; }
.btn-primary.btn-contester { background: var(--bleu); }
@media (hover: hover) { .btn-primary.btn-contester:hover { background: var(--bleu-700); } }

/* Planning d'équipe : la signature de la semaine, sous le nom */
.pl-sign {
  display: inline-block; margin-top: 4px; padding: 1px 6px; border: 0; border-radius: var(--radius-dense);
  font: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--bleu-50); color: var(--bleu-700);
}
button.pl-sign { cursor: pointer; }
.pl-sign.signee { background: var(--succes-100); color: var(--succes-700); }
.pl-sign.a_resigner { background: var(--alerte-100); color: var(--alerte-700); }
.pl-sign.conteste { background: var(--erreur-100); color: var(--erreur-700); }
.admin-alerte { color: var(--alerte-700); font-weight: 600; }

/* ── Mon équipe : les jours de la semaine ──────────────── */
.eq-jours { display: flex; gap: 6px; margin-top: 4px; padding: 7px 5px 2px 0; overflow-x: auto; }
.eq-jour {
  position: relative; flex: 1 0 auto; min-width: 52px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--bordure); border-radius: var(--radius-controle); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--encre); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .eq-jour:hover { border-color: var(--bleu-300); } }
.eq-jour[aria-selected="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--encre-inverse); }
.eq-jour:disabled { opacity: .4; cursor: not-allowed; }
/* Aujourd'hui, comme sur les cartes de « Ma semaine » : en orange. */
.eq-jour[aria-current="date"]:not([aria-selected="true"]) { color: var(--orange-600); border-color: var(--orange-400); }
.eq-jour-n {
  position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-dense); background: var(--orange-600); color: var(--encre-inverse);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

/* ── Contestations (encadrement) ──────────────────────── */
.nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  border-radius: var(--radius-dense); background: var(--orange-600); color: var(--encre-inverse);
  font-size: 11px; font-style: normal; font-weight: 800; line-height: 18px; text-align: center;
}
.nav-badge[hidden] { display: none; }
.onglet-bas { position: relative; }
.onglet-bas .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
.ct-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 12px 0; padding: 12px 14px; width: calc(100% - 24px);
  border: 0; border-left: 3px solid var(--erreur); border-radius: var(--radius-carte);
  background: var(--erreur-100); color: var(--erreur-700); font: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
}
.ct-bandeau[hidden] { display: none; }
.ct-bandeau b { color: var(--encre); }
.ct-bandeau span { font-weight: 700; white-space: nowrap; }
.ct-liste { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.ct-carte {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--bordure-lin); border-radius: var(--radius-carte);
  border-top: 3px solid var(--erreur);
}
.ct-tete { display: flex; align-items: center; gap: 12px; }
.ct-motif { padding: 10px 12px; border-radius: var(--radius-carte); background: var(--erreur-100); color: var(--erreur-700); font-size: 14px; }
.ct-motif-t { font-weight: 700; color: var(--encre); margin-bottom: 3px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-reponse { display: flex; flex-direction: column; gap: 8px; }
.ct-reponse[hidden] { display: none; }
.sign-reponse { color: var(--encre); }
.onglet .nav-badge { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.onglet .nav-badge[hidden] { display: none; }
.report-chg del { color: var(--encre-douce); }
.report-chg ins { text-decoration: none; font-weight: 700; color: var(--encre); }
.membre.repere { box-shadow: 0 0 0 2px var(--erreur); }

/* ── Divers ───────────────────────────────────────────── */
.vide-msg { text-align: center; color: var(--encre-douce); padding: 34px 20px; }
.vide-msg-big { display: flex; justify-content: center; margin-bottom: 8px; color: var(--bleu-300); }

/* Au doigt, les petits boutons (Corriger, Retirer, jours, rubriques) gardent
   une cible confortable — y compris sur une tablette en mise en page poste. */
@media (pointer: coarse) {
  .btn-petit, .eq-jour, .onglet { min-height: 44px; }
  /* Liens d'une ligne (feuille signée en PDF, compte Microsoft) : 18 à
     28 px de haut au doigt. On agrandit la zone d'appui, pas le texte. */
  .sign-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .porte-autre a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (min-width: 620px) {
  .app { padding-bottom: 112px; }
}

/* ── Tablette en portrait (620 à 919 px) ──────────────────
   La colonne du téléphone, élargie : à 560 px, un iPad montrait deux bandes
   vides de chaque côté. La barre d'onglets se resserre sur la colonne au
   lieu d'écarter ses deux ou cinq onglets d'un bord à l'autre. */
@media (min-width: 620px) and (max-width: 919px) {
  :root { --app-max: 720px; }
}

/* ══════════════════════════════════════════════════════════
   Poste de travail — à partir de 920 px (breakpoint « rail »)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 920px) {
  body.app-body { font-size: 14px; }

  /* Rail de navigation, colonne de 248 px, collé à gauche */
  /* 100dvh : sur iPad, 100vh compte la barre de Safari et cachait le bas du
     rail (la déconnexion). 100vh reste pour les navigateurs plus anciens. */
  .coquille { display: flex; align-items: flex-start; min-height: 100vh;
    min-height: calc(100dvh - var(--vc-h, 0px));
    background: linear-gradient(to right, var(--bleu-900) var(--rail), transparent 0); }
  .rail {
    position: sticky; top: var(--vc-h, 0px); display: flex; flex-direction: column;
    flex: 0 0 var(--rail); height: 100vh; height: calc(100dvh - var(--vc-h, 0px)); overflow-y: auto;
    background: var(--bleu-900); color: var(--bleu-100); padding-bottom: 12px;
  }
  .rail .marque { padding: 20px 20px 16px; border-bottom: 1px solid var(--bleu-700); }
  .rail .marque img { height: 38px; }
  .rail .marque b { color: var(--encre-inverse); }
  .rail .marque i { color: var(--lin-300); }
  .rail-sect {
    display: flex; align-items: center; gap: 11px; padding: 20px 12px 8px;
    font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--lin-300);
  }
  .rail-sect::after { content: ""; height: 1px; flex: 1; background: var(--bleu-700); }
  .rail-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
  .rail-lien {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: var(--radius-carte); background: transparent; width: 100%;
    font-size: 13px; font-weight: 500; color: var(--bleu-100); cursor: pointer; text-align: left;
  }
  @media (hover: hover) { .rail-lien:hover { background: var(--bleu); color: var(--encre-inverse); } }
  .rail-lien[aria-current="page"], .rail-lien[aria-current="page"]:hover {
    background: var(--lin-200); color: var(--bleu-900); font-weight: 600;
  }
  .rail-outils { margin-top: 20px; }
  .rail-outils:has(> [hidden]:only-child) { display: none; }
  /* Le bloc utilisateur est un bouton : il ouvre « Mon profil ». */
  .rail-user {
    display: flex; align-items: center; gap: 12px; margin: 20px 12px 0;
    padding: 12px; border-radius: var(--radius-carte); background: var(--bleu-800);
    border: 0; width: calc(100% - 24px); font: inherit; color: var(--bleu-100);
    text-align: left; cursor: pointer; transition: background-color 140ms;
  }
  @media (hover: hover) { .rail-user:hover { background: var(--bleu-700); } }
  .rail-user[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--lin-200); }
  .rail-user .avatar { flex-basis: 36px; height: 36px; background: var(--orange-600); font-size: 12px; }
  .rail-user-meta { flex: 1; min-width: 0; line-height: 1.25; }
  .rail-user-meta b {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--encre-inverse);
  }
  .rail-user-meta i { display: block; font-style: normal; font-size: 11px; color: var(--bleu-100); }

  /* Page large */
  .principal { flex: 1; min-width: 0; }
  .app { max-width: var(--page-max); padding: 32px 40px 48px; }

  /* Le rail porte la marque, la navigation et le profil : l'en-tête
     de téléphone devient un en-tête de page. */
  .app-head {
    position: static; background: none; border: 0; padding: 0; margin-bottom: 24px;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
  }
  .app-head > .app-head-row:first-child .marque,
  .app-head .app-head-actions { display: none; }
  .app-head-row { justify-content: flex-start; gap: 16px; }
  .app-sur {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--orange-600);
  }
  .app-sur::before { content: ""; display: block; height: 2px; width: 16px; background: var(--cuivre); }
  .app-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.028em; }
  .app-sub { font-size: 14px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .icon-btn .lib { display: inline; }
  .icon-btn:has(.lib) { padding: 0 14px; }
  [data-retour] { align-self: center; }
  /* Écrans racines (Mon équipe, contestations, planning, enrôler,
     administration) : le rail y mène déjà, pas de bouton retour en double. */
  #ecran-equipe [data-retour], #ecran-contestations [data-retour], #ecran-planning [data-retour],
  #ecran-enrolement [data-retour], #ecran-admin [data-retour],
  .app-head-row > span:empty { display: none; }
  /* Une disposition fixe, quel que soit le contenu : le titre à gauche, la
     navigation de semaine à droite, les jours de « Mon équipe » dessous. Le
     titre se resserre (sous-titre tronqué) au lieu de renvoyer la navigation
     à la ligne — avant, les flèches changeaient de place d'une semaine à
     l'autre selon la longueur du sous-titre. */
  .app-head > .app-head-row { flex: 1 1 0; min-width: 0; }
  .app-head-row .app-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-head > .eq-jours { flex: 1 0 100%; margin-top: -4px; }
  .eq-jour { flex: 0 0 auto; min-width: 76px; }

  /* ── Ma semaine : en-tête, synthèse, jours (jours | synthèse dès 1100 px) ── */
  #ecran-semaine .app-head { grid-column: 1 / -1; }
  .tete-accueil .marque, .tete-accueil .app-head-actions { display: none; }
  /* Le tableau de bord : des cartes posées sur le fond, pas une carte de cartes. */
  .sheet.suivi-accueil { background: none; border: 0; box-shadow: none; padding: 0; }
  .app-head-row > div { text-align: left !important; }
  /* Libellé de largeur fixe : les flèches ne bougent plus d'un appui à l'autre. */
  .weeknav { margin-top: 0; gap: 8px; flex: 0 0 auto; }
  .weeknav-label { flex: 0 0 236px; width: 236px; padding: 0 8px; }
  .weeknav-label b { font-size: 16px; }

  .total { border-radius: var(--radius-carte); padding: 20px; box-shadow: var(--shadow-2); margin: 0 0 12px; }
  .total-h { font-size: 44px; }
  .sem-alerte, .file-attente, .sign-alerte { margin: 0 0 12px; }
  .planning-sem { margin: 0 0 12px; padding: 14px 18px; }
  .days { padding: 0; gap: 10px; }
  .sign-bloc { margin: 12px 0 0; }
  #ecran-signature .sign-sheet { max-width: 720px; }
  #ecran-signature .dock-inner { max-width: 720px; margin: 0; }
  .day { padding: 16px 20px; gap: 20px; }
  .day-date { flex-basis: 56px; }
  .day-num { font-size: 26px; }
  .day-cht { font-size: 15px; }
  .day-h b { font-size: 22px; }

  /* ── Sous-écrans : contenu en carte ── */
  .sheet, .gate {
    background: var(--surface); border: 1px solid var(--bordure-lin);
    border-radius: var(--radius-carte); box-shadow: var(--shadow-1); padding: 24px;
  }
  .gate { max-width: 640px; }
  .gate h1, .gate h2 { font-size: 30px; }

  #ecran-pointage .btn-wide { width: auto; padding: 0 16px; justify-self: start; }

  /* Le dock suit la fin du contenu, mais colle au bas de la fenêtre tant que
     le contenu dépasse : sur un portable, « Déclarer » ou « Valider
     12 pointages » tombaient sous la ligne de flottaison, au bout d'une liste
     qu'il fallait dérouler pour les trouver. */
  .dock, body.avec-onglets:not(.en-saisie) .dock {
    position: sticky; bottom: 0; margin-top: 4px;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--fond) 62%, rgba(241, 234, 221, 0));
  }
  .dock-inner { max-width: none; display: flex; justify-content: flex-end; }
  .btn-primary { width: auto; min-width: 260px; min-height: 52px; padding: 0 28px; }
  #ecran-camion .dock-inner { max-width: 640px; margin: 0; }

  /* Mon équipe : compteurs en bande, compagnons sur deux colonnes */
  .compteurs { border-radius: var(--radius-carte); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-1); }
  .compteur { padding: 18px 12px; }
  .compteur b { font-size: 32px; }
  #liste-equipe, #liste-enrolement {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); padding: 0; gap: 12px;
    align-items: start;
  }
  #ecran-enrolement .sheet { margin-bottom: 16px; }
  .code-remis { padding: 24px; }
  .code-remis-v { font-size: 42px; }

  /* Administration : onglets en bande, contenu en carte */
  .onglets { margin: 0 0 16px; display: inline-flex; }
  .admin-zone { margin: 0; }

  /* Planning d'équipe : la grille occupe la page */
  .pl-zone { margin: 0; }
  .pl-case { min-width: 0; min-height: 56px; }
  /* Colonnes égales : le libellé se coupe à la largeur de la case, sur deux lignes */
  .pl-table { table-layout: fixed; }
  .pl-table thead .pl-qui { width: 190px; }
  .pl-lib, .pl-code { max-width: 100%; }
  .pl-qui { min-width: 0; max-width: none; padding-left: 16px; }
  #ecran-planning .compteurs { max-width: 640px; }

  /* Le rail remplace la barre d'onglets */
  body.avec-onglets .onglets-bas { display: none; }
  body.avec-onglets .app { padding-bottom: 48px; }
  body.avec-onglets:not(.en-saisie) .toast { bottom: 32px; }

  .toast { left: calc(50% + var(--rail) / 2); bottom: 32px; }
  .vide-msg { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--bordure-lin);
    border-radius: var(--radius-carte); }

  /* ── Connexion, première connexion : panneau de marque | carte ── */
  .entree { display: flex; min-height: 100vh; min-height: 100dvh; }
  .entree-marque {
    flex: 0 0 44%; max-width: 560px; display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px; background: var(--bleu-900); color: var(--lin-200);
  }
  .entree-marque .marque img { height: 44px; }
  .entree-marque .marque b { color: var(--encre-inverse); font-size: 20px; }
  .entree-marque .marque i { color: var(--lin-300); }
  .entree-accroche .app-sur { color: var(--lin-300); }
  .entree-accroche .entree-titre {
    margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.028em;
    color: var(--encre-inverse); max-width: 15ch;
  }
  .entree-accroche p { margin: 16px 0 0; font-size: 15px; color: var(--bleu-100); max-width: 42ch; }
  .entree-pied { font-size: 12px; color: var(--bleu-300); margin: 0; }
  .entree .app {
    flex: 1; display: flex; align-items: center; justify-content: center; max-width: none; padding: 48px;
  }
  .entree .gate { width: 100%; max-width: 460px; padding: 32px; }
  .entree .entree-logo { display: none; }
}

/* Deux colonnes à partir de 1100 px seulement. Entre 920 et 1100 px (petit
   portable, iPad en paysage), la colonne de saisie tombait à 230 px : la
   recherche de chantier coupée, l'aide des heures sur trois lignes. On y
   garde une seule colonne, synthèse et « calculé pour vous » en bande. */
@media (min-width: 1100px) {
  /* Ma semaine : jours | synthèse */
  #ecran-semaine.on {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 24px; align-items: start;
  }
  .total {
    grid-column: 2; grid-row: 2 / span 5; position: sticky; top: calc(24px + var(--vc-h, 0px)); margin: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  .total-lab { margin-top: 6px; }
  .total-right {
    margin: 0; text-align: left; padding-top: 14px;
    border-top: 1px solid rgba(241, 234, 221, .18); line-height: 1.7; font-size: 14px;
  }
  .sem-alerte { grid-column: 1; grid-row: 2; }
  .planning-sem { grid-column: 1; grid-row: 3; }
  .file-attente { grid-column: 1; grid-row: 4; }
  .sign-alerte { grid-column: 1; grid-row: 5; }
  .days { grid-column: 1; grid-row: 6; }
  .sign-bloc { grid-column: 1; grid-row: 7; }

  /* Nouveau pointage : saisie à gauche, « calculé pour vous » à droite */
  #ecran-pointage .sheet {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 32px; align-items: start;
  }
  #ecran-pointage .sheet > * { grid-column: 1; }
  #ecran-pointage .sheet > .sheet-lead,
  #ecran-pointage .sheet > .jour-lignes { grid-column: 1 / -1; }
  /* Ligne 2 : « déjà déclaré », sur toute la largeur ; l'encadré se pose à
     côté du formulaire, pas de la liste — sinon il repousse la saisie en bas. */
  #ecran-pointage .sheet > .calcule { grid-column: 2; grid-row: 3 / span 4; margin: 0; }
}

@media (min-width: 1200px) {
  .app { padding: 40px 48px 56px; }
  #ecran-semaine.on { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 32px; }
}

/* Tablette en paysage (iPad, ≥ 920 px) : la mise en page du poste, mais au
   doigt — les cibles reprennent la taille du téléphone. */
@media (min-width: 920px) and (pointer: coarse) {
  .icon-btn { min-width: var(--tap); min-height: var(--tap); }
  .rail-lien { min-height: var(--tap); }
  .rail-sortie { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}