/*
 * Exploration visuelle « atelier de métier ».
 * La structure et le comportement viennent intégralement de Tempo;
 * ce fichier ne remplace que sa peau graphique dans le preview.
 */
:root {
  --atelier-encre: #fff4df;
  --atelier-sourdine: #cbb89d;
  --atelier-bois: #2c1d13;
  --atelier-bois-fonce: #17100b;
  --atelier-cuivre: #d89b4a;
  --atelier-or: #f1c77e;
  --atelier-filet: #80603e;
  --atelier-vert: #70ae67;

  --bg: #130d09;
  --sheet: #21160f;
  --surface: #2b1d14;
  --surface-2: #39271a;
  --ink: var(--atelier-encre);
  --ink-2: var(--atelier-sourdine);
  --ink-3: #907f6d;
  --line: #5e442d;
  --line-2: #76583a;
  --accent: var(--atelier-cuivre);
  --accent-soft: #51351f;
  --accent-deep: var(--atelier-or);
  --s-avis: #9b4739;
  --s-avis-soft: #432018;
  --s-avis-ink: #ffd7cd;

  --tempo-papier: #130d09;
  --tempo-carte: #2b1d14;
  --tempo-encre: var(--atelier-encre);
  --tempo-sourdine: var(--atelier-sourdine);
  --tempo-filet: #684b32;
  --tempo-filet-fort: #987047;
  --tempo-commande: #b97831;
  --tempo-cuivre: var(--atelier-or);
  --tempo-vert: var(--atelier-vert);
  /* Fond d'un message : TOUJOURS redefini ici. Le #e2e2dd clair de la
     palette de base, sous l'encre creme de l'atelier, rendait la question
     de l'IA illisible (2026-10-06). lisibilite.test.mjs le verifie. */
  --tempo-message: var(--surface-2);
  /* Même piège pour l'erreur : --tempo-carte y servait d'encre, et vaut un
     brun foncé ici — 2,6:1 sur le rouge d'avis. */
  --tempo-erreur-encre: var(--s-avis-ink);
  --jauge-fond: #21150e;
  --jauge-trait: #5f432b;
  --jauge-bord: #9c7246;
  --jauge-chiffre: #ddc6a2;
  --jauge-plage: #be8139;
  --jauge-apercu: #f0c16f;
}

html {
  background: #0c0805;
}

body {
  min-height: 100dvh;
  color: var(--atelier-encre);
  background:
    linear-gradient(180deg, rgba(8,5,3,.06) 0, rgba(10,6,4,.18) 19%, rgba(12,8,5,.8) 39%, rgba(12,8,5,.98) 100%),
    url("./tempo-atelier-bg.png") center top / cover fixed no-repeat;
}

button,
input,
textarea {
  color: inherit;
}

#vue-app {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(8,5,3,.02) 0, rgba(13,8,5,.16) 120px, rgba(14,9,6,.72) 250px, rgba(14,9,6,.9) 100%);
}

.entete-app {
  min-height: 72px;
  margin: calc(var(--pas-4) * -1) calc(var(--pas-4) * -1) 0;
  padding: max(var(--pas-3), env(safe-area-inset-top)) var(--pas-4) var(--pas-3);
  background: linear-gradient(180deg, rgba(10,6,3,.77), rgba(12,7,4,.12));
  text-shadow: 0 2px 5px #000;
}

.entete-app .marque {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -.025em;
  color: #fff7e7;
}

.entete-app .marque i {
  color: var(--atelier-or);
}

.entete-app .logo-msf {
  width: min(200px, 50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}

.entete-app .lien,
button.lien {
  color: #ead8bb;
  text-shadow: 0 1px 3px #000;
}

.onglets {
  position: relative;
  margin: 0 0 var(--pas-4);
  padding: 5px;
  border: 1px solid var(--atelier-filet);
  border-radius: 9px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.045), transparent 38%),
    linear-gradient(180deg, rgba(56,38,26,.96), rgba(27,18,12,.98));
  box-shadow:
    inset 0 0 0 2px #160f0a,
    inset 0 0 0 3px rgba(224,171,99,.13),
    0 7px 18px rgba(0,0,0,.42);
}

.onglet {
  color: #c8b79e;
  border-radius: 6px;
  font-family: Georgia, "Times New Roman", serif;
}

.onglet.actif {
  color: #2b190d;
  background: linear-gradient(180deg, #f3ce8e, #ce8e3e);
  box-shadow: inset 0 1px rgba(255,255,255,.6), inset 0 -2px rgba(83,45,17,.3), 0 3px 8px rgba(0,0,0,.35);
}

.barre-date,
.total-jour,
.bloc,
.vide-jour,
.semaine-jour {
  border: 1px solid var(--atelier-filet);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.035), transparent 38%),
    repeating-linear-gradient(2deg, rgba(255,255,255,.01) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(51,34,23,.97), rgba(25,17,12,.98));
  box-shadow:
    inset 0 0 0 2px #17100b,
    inset 0 0 0 3px rgba(211,158,90,.13),
    0 8px 18px rgba(0,0,0,.4);
}

.barre-date {
  margin-bottom: var(--pas-3);
  padding: 9px 10px;
}

.barre-date button {
  color: var(--atelier-or);
  border-color: #775538;
  background: linear-gradient(180deg, #3f2b1d, #20150e);
  box-shadow: inset 0 0 0 2px #17100b, 0 2px 5px #000;
}

.barre-date button:disabled {
  color: #705e4d;
  border-color: #493524;
}

.barre-date .jour,
.barre-date .jour strong {
  color: #fff5df;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 3px #000;
}

.jour-coiffe {
  color: var(--atelier-or);
}

.total-jour {
  color: var(--atelier-sourdine);
  padding: 14px;
}

.total-jour strong {
  color: var(--atelier-or);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 3px #000;
}

.bloc {
  color: var(--atelier-encre);
  border-color: #745338;
  box-shadow:
    inset 0 0 0 2px #17100b,
    inset 0 0 0 3px rgba(211,158,90,.12),
    0 7px 15px rgba(0,0,0,.4);
}

.bloc::before {
  background: var(--atelier-cuivre);
}

.bloc.approuve {
  background:
    linear-gradient(180deg, rgba(48,42,32,.96), rgba(23,20,16,.98));
  color: #b9ae9d;
}

.bloc-projet {
  color: #fff4dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.bloc-code b,
.bloc-heures,
.bloc-chevron {
  color: var(--atelier-or);
}

.bloc-code,
.bloc-plage,
.bloc-note {
  color: #d2c2ab;
}

.bloc-etat {
  border: 1px solid #69503a;
  background: #241811;
  color: #d5c4aa;
}

.vide-jour {
  color: var(--atelier-sourdine);
}

.vide-jour h2,
.vide-icone {
  color: var(--atelier-or);
}

.vide-horaire {
  background: #241811; color: var(--atelier-sourdine);
  border: 1px solid #69503a;
}
.vide-horaire-mention { color: var(--atelier-or); }
.vide-horaire-projet { color: #f1e4cf; }
.semaine-horaire { color: var(--atelier-sourdine); }

.jauge {
  width: var(--jauge-l);
  color: var(--atelier-sourdine);
  border-right: 1px solid #a27748;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 35%),
    linear-gradient(180deg, #2c1d13, #17100b);
  box-shadow: inset -3px 0 rgba(0,0,0,.32), 4px 0 15px rgba(0,0,0,.42);
}

.jauge::before,
.jauge::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f1cc8b, #875324 58%, #29160a);
  box-shadow: 0 1px 2px #000;
}

.jauge::before { top: 7px; }
.jauge::after { bottom: 7px; }

.jau-trait {
  border-top-color: #65472e;
}

.jau-heure {
  color: #dcc7a8;
  font-family: Georgia, "Times New Roman", serif;
}

.jau-bloc {
  border: 1px solid #f1c67c;
  border-radius: 3px;
  background: linear-gradient(90deg, #6d411c, #d99b49 47%, #70431e);
  box-shadow: inset 1px 0 rgba(255,242,211,.4), 0 2px 5px #000;
}

.jau-pause { background: #2a1a0e; opacity: .92; }

.jau-bloc.approuve {
  background: linear-gradient(90deg, #315c35, #6cad61 47%, #2d5732);
  border-color: #a9cf9c;
  opacity: .75;
}

.jau-reference {
  background: #d99b49;
  opacity: .22;
}

.jau-bloc.apercu {
  border-color: #ffe2ab;
  background: repeating-linear-gradient(-45deg, #f7cf85 0 5px, #9d6329 5px 10px);
  box-shadow: 0 0 9px rgba(237,183,94,.42);
}

.jau-code {
  color: #211207;
  font-weight: 900;
}

.ajouter-bas {
  background: linear-gradient(transparent, rgba(19,13,9,.98) 24%);
}

.ajouter {
  color: #26160b;
  border: 1px solid #ffe1a5;
  border-radius: 9px;
  background: linear-gradient(180deg, #f5d18f 0, #dca34e 50%, #b86e29 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.72), inset 0 -2px rgba(83,45,17,.35), 0 5px 0 #4f2b14, 0 9px 20px rgba(0,0,0,.4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.ajouter .plus {
  color: var(--atelier-or);
  background: linear-gradient(180deg, #50341f, #21140c);
  box-shadow: inset 0 0 0 2px #170e08;
}

.ajouter:active {
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 0 #4f2b14;
}

.feuille {
  color: var(--atelier-encre);
  border-top: 1px solid #ae7f4d;
  border-radius: 13px 13px 0 0;
  background:
    linear-gradient(110deg, rgba(255,255,255,.025), transparent 33%),
    url("./tempo-atelier-bg.png") center 50% / cover fixed no-repeat,
    #21160f;
  box-shadow: inset 0 3px rgba(255,222,166,.06), 0 -12px 30px rgba(0,0,0,.68);
}

.feuille form {
  background: linear-gradient(180deg, rgba(29,19,13,.93), rgba(16,10,7,.97));
}

.feuille-haut {
  border-bottom-color: #6d4d32;
  background:
    linear-gradient(110deg, rgba(255,255,255,.035), transparent 36%),
    linear-gradient(180deg, #3a271a, #21160f);
  box-shadow: 0 8px 15px rgba(0,0,0,.34);
}

.poignee {
  background: #8a6541;
}

.feuille-entete strong,
.etape h3,
.molette-etiquette,
.pause-titre {
  color: var(--atelier-or);
  font-family: Georgia, "Times New Roman", serif;
}

.fermer {
  color: #f0d2a2;
  border-color: #79583a;
  background: linear-gradient(180deg, #4a3120, #21150e);
  box-shadow: inset 0 0 0 2px #150e09;
}

.rappel .etape-repliee,
.etape-repliee {
  color: var(--atelier-encre);
  border-color: #7b593a;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #3b281a, #21160f);
  box-shadow: inset 0 0 0 2px #160f0a;
}

.etape-valeur {
  color: #fff3dc;
}

.etape-changer,
.rappel .etape-changer::after {
  color: var(--atelier-or);
}

.feuille input[type="search"],
.feuille input[type="number"],
.feuille textarea {
  color: #fff3dd;
  border-color: #78573a;
  background: rgba(17,10,6,.92);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.62);
}

.feuille input::placeholder,
.feuille textarea::placeholder {
  color: #96836d;
}

.choix button,
.categorie {
  position: relative;
  color: var(--atelier-encre);
  border-color: #735238;
  border-radius: 7px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.035), transparent 38%),
    linear-gradient(180deg, #39261a, #21160f);
  box-shadow: inset 0 0 0 2px #160f0a, 0 5px 11px rgba(0,0,0,.3);
}

.choix button:active,
.categorie:active {
  background: #4b321f;
}

.choix button.choisi,
.categorie.choisi {
  color: #fff6e6;
  border-color: #e3ae62;
  background:
    linear-gradient(90deg, rgba(210,143,58,.25), transparent 38%),
    linear-gradient(180deg, #49301e, #25170e);
  box-shadow: inset 4px 0 #d89741, inset 0 0 0 2px #160f0a, 0 6px 14px rgba(0,0,0,.38);
}

.choix .code-num,
.categorie-num,
.choix .frequent {
  color: var(--atelier-or);
}

.categorie-lib,
.choix button strong {
  color: #fff4df;
}

.ouvre-codes {
  border-color: #694a31;
  background: rgba(37,24,16,.9);
}

.case {
  color: #ead8bd;
}

.case input {
  accent-color: var(--atelier-cuivre);
}

.molette-paire {
  border-color: #7c5a3a;
  border-radius: 8px;
  background: linear-gradient(180deg, #3b281b, #20140d);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.52);
}

.molette .cran {
  color: #8f7e6b;
}

.molette .cran.actif {
  color: #fff4dd;
  text-shadow: 0 0 8px rgba(240,193,111,.3);
}

.molette-bande {
  border-color: #d09548;
  background: rgba(232,173,84,.07);
}

.molette-sep {
  color: var(--atelier-or);
}

/* AUCUN BOUTON A FOND PALE DANS L'ATELIER (Simon, 2026-10-01) : « Ajouter
   une pause » et « Retirer » prennent le bois sombre et l'or des autres
   commandes. L'ancienne rangee « − 30 + » (.ligne-pause) n'existe plus. */
.pause-ajouter,
.pause-retirer {
  color: var(--atelier-or);
  border-color: #765437;
  background: linear-gradient(180deg, #432d1d, #21150d);
  box-shadow: inset 0 0 0 2px #160f0a, 0 4px 9px rgba(0,0,0,.3);
}

.pause-ajouter:active,
.pause-retirer:active {
  background: #4b321f;
}

.pause-titre,
.pause-reglage .molette-etiquette {
  color: #dcc7a8;
}

.resume {
  color: #fff2da;
  border: 1px solid #82603e;
  border-radius: 8px;
  background: linear-gradient(180deg, #3d291b, #21160f);
  box-shadow: inset 0 0 0 2px #160f0a;
}

.feuille .primaire {
  /* #1a0e05 et non #28170b : 4,41:1 sur le bas du dégradé, sous le seuil
     WCAG de 4,5 (lisibilite.test.mjs, 2026-10-06). */
  color: #1a0e05;
  border-color: #ffe0a2;
  background: linear-gradient(180deg, #f4cf8c, #d99f4a 52%, #b96f29);
  box-shadow: inset 0 1px rgba(255,255,255,.66), 0 4px 0 #4b2913;
  font-family: Georgia, "Times New Roman", serif;
}

.feuille .primaire:active {
  background: #c88a3d;
}

.feuille .primaire:disabled {
  color: #766b5e;
  border-color: #493524;
  background: #2a1d14;
  box-shadow: none;
}

.feuille .secondaire {
  color: #f0c6b8;
  border-color: #8c4a3d;
  background: #2c1813;
}

.bandeau {
  color: #fff1d7;
  border-color: #7e5c3d;
  background: #2b1d14;
}

@media (min-width: 560px) {
  body {
    width: 520px;
    margin: 0 auto;
    box-shadow: 0 0 55px rgba(0,0,0,.72);
  }

  .jauge {
    left: calc((100vw - 520px) / 2);
  }

  .feuille {
    left: calc((100vw - 520px) / 2 + var(--jauge-l));
    right: calc((100vw - 520px) / 2);
  }

  .ajouter-bas {
    left: calc((100vw - 520px) / 2 + var(--jauge-l));
    right: calc((100vw - 520px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Contexte discret : aucun changement à l'échelle ni au flux de saisie. */
.contexte-jour {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(238, 202, 150, .22);
  border-radius: 10px;
  background: rgba(22, 17, 13, .87);
  color: #f4e8d5;
  font-family: var(--sans);
}
.contexte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-bottom: 10px;
}
.contexte-lieu { font-size: .875rem; font-weight: 700; }
.contexte-maintenant { display: inline-flex; align-items: baseline; gap: 6px; }
.contexte-libelle { font-size: .75rem; color: #beb29e; }
.contexte-horloge {
  color: #9ee5df;
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.contexte-corps { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.contexte-meteo { flex: 1 1 90px; min-width: 0; }
.contexte-temperature { display: flex; align-items: center; gap: 8px; }
.contexte-temperature strong { font-family: Georgia, serif; font-size: 1.875rem; line-height: 1.1; font-weight: 500; }
.contexte-unite { font-size: .8125rem; margin-left: -6px; color: #cbbda7; }
.contexte-icone { display: inline-flex; color: #eac68d; }
.contexte-icone svg { width: 30px; height: 30px; }
.contexte-conditions { display: block; margin-top: 3px; font-size: .75rem; line-height: 1.4; color: #cbbda7; overflow-wrap: anywhere; }
.contexte-soleil { display: grid; gap: 7px; flex: 0 1 146px; }
.contexte-solaire { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; font-size: .875rem; line-height: 1.3; }
.contexte-solaire svg { width: 18px; height: 18px; color: #eac68d; }
.contexte-solaire > span { color: #cbbda7; }
.contexte-solaire time { font-weight: 700; font-variant-numeric: tabular-nums; }
.contexte-source { margin: 10px 0 0; font-size: .75rem; line-height: 1.45; color: #b6aa96; }
.contexte-source a { color: #cfc2ad; text-decoration: underline; text-underline-offset: 3px; }
.contexte-source a:focus-visible { outline: 2px solid #9ee5df; outline-offset: 4px; }
.contexte-indisponible { margin: 6px 0 0; font-size: .75rem; line-height: 1.4; color: #cbbda7; }
.jau-reperes { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.jau-repere { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #f1d6a4; }
.jau-repere-symbole {
  position: absolute; right: -2px; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; transform: translateY(-50%);
  color: #f1d6a4; background: #20160f; border-radius: 50%;
}
.jau-repere-symbole svg { width: 16px; height: 16px; }
.jau-maintenant { z-index: 2; border-top: 2px solid #9ee5df; box-shadow: 0 1px 3px rgba(0,0,0,.7); }
.jau-maintenant::after {
  content: ""; position: absolute; right: -2px; top: -5px;
  width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-right: 6px solid #9ee5df;
}

/* ------------------------------------------------------------------ *
 *  RETOUCHES DU 2026-09-21 (Simon, sur planche) : la météo coiffe le rail,
 *  le total et le menu tiennent dans une seule pastille en bas, le « + »
 *  est à cheval sur leur couture, les cartes sont compactes et l'état du
 *  bloc est un cadenas sur leur bord gauche.
 * ------------------------------------------------------------------ */

/* La météo en tête du rail : icône au-dessus de la température. */
.jauge::before { display: none; }
.jauge-meteo {
  position: fixed; z-index: 31; left: 0; top: env(safe-area-inset-top);
  width: calc(var(--jauge-l) - 1px); height: 66px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--jauge-trait);
  color: var(--atelier-encre);
}
.jauge-meteo-icone { display: inline-flex; color: #eac68d; }
.jauge-meteo-icone svg { width: 28px; height: 28px; }
.jauge-meteo strong { font-family: Georgia, serif; font-weight: 500; font-size: 1.25rem; line-height: 1; }
.jauge-piste { top: calc(74px + env(safe-area-inset-top)); }
#vue-app[hidden] ~ .jauge-meteo, #vue-app[hidden] .jauge-meteo { display: none; }

/* Le panneau de contexte ne s'affiche plus : le rail porte la météo, le trait
   turquoise dit « maintenant », les repères disent le soleil. Le contrôleur
   continue de le tenir à jour — c'est lui que les tests exercent. */
.contexte-jour { display: none; }

/* La pastille du bas : total du jour + menu. */
.pastille-bas {
  position: fixed; z-index: 16;
  left: calc(var(--jauge-l) + 10px); right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 18px; border: 1px solid var(--atelier-filet);
  background: linear-gradient(180deg, #2f2016, #17100b);
  box-shadow: inset 0 1px rgba(255,225,165,.12), 0 10px 24px rgba(0,0,0,.55);
}
.pastille-bas .total-bas {
  position: static; height: 50px; min-height: 0; margin: 0; padding: 0 18px;
  box-sizing: border-box; align-items: center;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.pastille-bas .total-bas[hidden] { display: none; }
.pastille-bas .total-bas::before, .pastille-bas .total-bas::after { display: none; }
.pastille-bas .total-bas strong { font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: -6px; }
.nav-bas { position: relative; height: 60px; display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.total-bas[hidden] + .nav-bas { border-top: 0; }
.nav-item {
  flex: 1 1 0; min-width: 0; min-height: 44px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--atelier-sourdine);
  font: 600 .6875rem/1 system-ui, sans-serif; letter-spacing: .02em;
}
.nav-item svg { width: 24px; height: 24px; }
.nav-item.actif { color: var(--atelier-or); }
.nav-item.actif::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--atelier-or);
}
.nav-creux { flex: 0 0 76px; position: relative; }
.nav-creux:has(#btn-ajouter[hidden]) { display: none; }
.ajouter-rond {
  position: absolute; left: 50%; top: -31px; transform: translateX(-50%);
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  color: #26160b; border: 1px solid #ffe1a5;
  background: linear-gradient(180deg, #f5d18f 0, #dca34e 50%, #b86e29 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.72), inset 0 -2px rgba(83,45,17,.35), 0 4px 0 #4f2b14, 0 9px 18px rgba(0,0,0,.45);
}
.ajouter-rond[hidden] { display: none; }
.ajouter-rond svg { width: 30px; height: 30px; stroke-width: 2.4; }
.ajouter-rond:active { transform: translateX(-50%) translateY(2px); }
#contenu { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
/* Pendant la saisie, la pastille s'efface : on ne quitte pas un brouillon
   par un toucher de travers. */
body:has(#feuille:not([hidden])) .pastille-bas { display: none; }

/* Les cartes compactes : une ligne par type de donnée. */
.bloc { position: relative; overflow: visible; margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
.bloc-haut { gap: 2px; }
.bloc-projet, .bloc-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bloc-projet { font-size: 1.0625rem; line-height: 1.25; }
.bloc-cadenas {
  position: absolute; top: 12px; left: -14px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  color: #10210d; background: var(--atelier-vert); border: 1px solid #a9d6a1;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.bloc-cadenas.approuve { color: #ffe9e2; background: var(--s-avis); border-color: #d08a7c; }
.bloc-cadenas svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Profil : qui est connecté, et la sortie de session. */
.profil { margin-top: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(33,22,15,.92); }
.profil h2 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 1.375rem; color: var(--atelier-or); }
.profil-qui { margin: 0 0 18px; color: var(--atelier-encre); overflow-wrap: anywhere; }
.profil-sortir {
  width: 100%; min-height: 52px; border-radius: 9px; border: 1px solid var(--atelier-filet);
  background: linear-gradient(180deg, #50341f, #21140c); color: var(--atelier-encre);
  font: 600 1rem/1 Georgia, serif;
}
/* Le bilan de la semaine et la banque (D-265) : des rangées étiquette ·
   valeur, l'écart et le solde colorés par leur signe. */
.profil-bilan { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20,13,9,.6); }
.profil-bilan h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.05rem; color: var(--atelier-or); }
.profil-bilan h3 + .profil-bilan-rangee { margin-top: 0; }
.profil-bilan h3:not(:first-child) { margin-top: 14px; }
.profil-bilan-rangee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-top: 1px solid rgba(255,244,223,.08); }
.profil-bilan-etiquette { flex: 1 1 auto; color: var(--atelier-sourdine); }
.profil-bilan-valeur { font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--atelier-encre); white-space: nowrap; }
.profil-bilan-rangee.positif .profil-bilan-valeur { color: #9fd58c; }
.profil-bilan-rangee.negatif .profil-bilan-valeur { color: #f0b48c; }
.profil-bilan-detail { flex: 0 0 100%; font-size: .8125rem; color: var(--atelier-sourdine); }
.profil-bilan-note { margin: 4px 0 0; font-size: .875rem; color: var(--atelier-sourdine); }
.profil-source { margin: 18px 0 0; font-size: .8125rem; color: var(--atelier-sourdine); }
/* La banque d'heures, UNE ligne (Simon, 2026-10-02) : étiquette, solde, et un
   « i » encerclé qui déplie l'explication du calcul. */
.profil-banque { margin: 0 0 18px; }
.profil-banque-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20,13,9,.6); }
.profil-banque-etiquette { flex: 1 1 auto; color: var(--atelier-encre); }
.profil-banque-valeur { font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--atelier-encre); white-space: nowrap; }
.profil-banque-ligne.positif .profil-banque-valeur { color: #9fd58c; }
.profil-banque-ligne.negatif .profil-banque-valeur { color: #f0b48c; }
.profil-banque-info {
  flex: 0 0 auto; width: 28px; height: 28px; min-height: 28px; padding: 0; margin: 0;
  border: 1.5px solid var(--atelier-or); border-radius: 50%; background: transparent;
  color: var(--atelier-or); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 1rem; line-height: 1;
}
.profil-banque-info[aria-expanded="true"] { background: var(--atelier-or); color: #28170b; }
.profil-banque-explication { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(20,13,9,.45); color: var(--atelier-sourdine); font-size: .875rem; }
.profil-banque-explication p { margin: 0 0 8px; }
/* Le niveau de suivi reprend la ligne de la banque : même gabarit, un nom
   au lieu d'un solde. Le nom n'est pas un chiffre : taille de texte. */
.profil-suivi .profil-banque-valeur { font-size: 1rem; }
.profil-banque-explication p:last-child { margin-bottom: 0; }
.profil-banque-explication[hidden] { display: none; }

/* Le bilan de la semaine affichée, sous le total (D-265) : même grammaire. */
.semaine-bilan { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20,13,9,.6); }
.semaine-bilan h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.05rem; color: var(--atelier-or); }
.semaine-bilan-rangee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-top: 1px solid rgba(255,244,223,.08); }
.semaine-bilan-etiquette { flex: 1 1 auto; color: var(--atelier-sourdine); }
.semaine-bilan-valeur { font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--atelier-encre); white-space: nowrap; }
.semaine-bilan-rangee.positif .semaine-bilan-valeur { color: #9fd58c; }
.semaine-bilan-rangee.negatif .semaine-bilan-valeur { color: #f0b48c; }
.semaine-bilan-detail { flex: 0 0 100%; font-size: .8125rem; color: var(--atelier-sourdine); }
.semaine-bilan-note { margin: 4px 0 0; font-size: .875rem; color: var(--atelier-sourdine); }
.profil-source a { color: var(--atelier-or); }

@media (min-width: 560px) {
  .jauge-meteo { left: calc((100vw - 520px) / 2); }
  .pastille-bas {
    left: calc((100vw - 520px) / 2 + var(--jauge-l) + 10px);
    right: calc((100vw - 520px) / 2 + 10px);
  }
}

/* ------------------------------------------------------------------ *
 *  LA SAISIE SANS DEFILER (Simon, 2026-09-21) : « Enregistrer » reste a
 *  l'ecran. Le formulaire est une colonne ; seules les etapes defilent
 *  (listes de projets et de codes), le resume et le bouton restent en bas.
 * ------------------------------------------------------------------ */
.feuille form { display: flex; flex-direction: column; overflow: hidden; }
.feuille .feuille-haut { flex: none; }
.feuille .etapes { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.feuille .resume, .feuille .feuille-actions { flex: none; }
.feuille .resume { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
.feuille .feuille-actions { margin-top: 8px; }

/* Les sept categories, une au-dessus de l'autre, toutes visibles. */
.categories { grid-template-columns: 1fr; }
.feuille form:has(.etape-ouverte:not([hidden]) .categories) .categories { grid-auto-rows: minmax(3rem, 1fr); }
.categorie { flex-direction: row; align-items: center; gap: 14px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.feuille form:has(.etape-ouverte:not([hidden]) .categories) .categorie { justify-content: flex-start; }
.categorie-num { flex: 0 0 3.25rem; }

/* A l'etape des heures, les rappels se serrent pour laisser la place. */
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel { gap: 6px; }
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee {
  grid-template-areas: "coche val chev"; min-height: 44px; padding-top: 4px; padding-bottom: 4px;
}
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee::before { width: 24px; height: 24px; border-radius: 7px; }
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-nom { display: none; }
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-valeur { font-size: .875rem; line-height: 1.2; color: var(--atelier-encre); }
/* Les molettes disent deja « de quelle heure a quelle heure » : le titre cede sa place. */
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) [data-etape="heures"] h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.feuille .resume { font-size: .9375rem; line-height: 1.25; }

/* La note, repliee par defaut. */
.note-pli summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px dashed var(--atelier-filet); border-radius: 10px; color: var(--atelier-or);
  font: 600 .875rem/1 system-ui, sans-serif; cursor: pointer;
}
.note-pli summary::-webkit-details-marker { display: none; }
.note-pli[open] summary { margin-bottom: 8px; }
.note-pli textarea { width: 100%; box-sizing: border-box; }

/* La note repliee n'est qu'un bouton : pas de carte autour, et les etapes se serrent. */
.feuille .etape[data-etape="note"]:not([hidden]) { padding: 0; border: 0; background: none; box-shadow: none; }
/* Elle vit HORS de la colonne qui defile, au-dessus du resume (2026-10-05) :
   la pause ouverte ne peut plus la pousser hors d'atteinte. */
.feuille .etape[data-etape="note"] { flex: none; margin-top: 8px; }
.feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])) .etapes { gap: 8px; }

/* ------------------------------------------------------------------ *
 *  QUAND LA FEUILLE EST OUVERTE, RIEN NE BOUGE DERRIERE (Simon, 2026-09-21 :
 *  « les molettes font defiler l'arriere-plan plutot que le choix d'heure »).
 *  Le document est fige, le fond ne prend plus les gestes, et un geste qui
 *  arrive au bout d'une liste ne se propage pas a ce qui est dessous.
 * ------------------------------------------------------------------ */
html:has(#feuille:not([hidden])), body:has(#feuille:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
body:has(#feuille:not([hidden])) #vue-app { touch-action: none; }
.feuille, .feuille .etapes, .feuille .choix { overscroll-behavior: contain; }
.molette { touch-action: pan-y; overscroll-behavior: contain; }

/* A l'etape des heures, la feuille monte pour que tout tienne, et — note
   repliee — les etapes ne defilent plus du tout : sous le doigt, il ne reste
   que les molettes. Sur un ecran trop court pour tout loger, on garde le
   defilement plutot que de couper un bouton.
   UNE PAUSE OUVERTE DEGELE AUSSI (2026-10-05) : ses deux molettes ajoutent
   ~200 px, et la colonne figee coupait la molette « Duree » (44 px sur un
   390x844). Mieux vaut une colonne qui defile qu'une molette amputee. */
.feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) { height: 94dvh; max-height: 94dvh; }
@media (min-height: 700px) {
  .feuille form:has([data-etape="heures"] .etape-ouverte:not([hidden])):not(:has(.note-pli[open])):not(:has(#pause-reglage:not([hidden]))) .etapes { overflow: hidden; }
}

/* ------------------------------------------------------------------ *
 *  LES TELEPHONES COURTS (2026-09-28, signalement d'un iPhone SE).
 *
 *  A l'etape des heures il faut 322 px pour voir les molettes, la pause et
 *  la note. Un iPhone SE en offrait 219, et 112 dans Safari : les molettes
 *  elles-memes y etaient coupees. Entre 700 et 779 px de haut c'etait pire —
 *  le defilement y est fige (regle ci-dessus) alors que le contenu ne tenait
 *  pas, et la note devenait inatteignable (Galaxy S8/S9, iPhone 8 Plus).
 *
 *  Sous 780 px de haut, c'est donc le HAUT de la feuille qui cede, pas les
 *  commandes : la feuille monte jusqu'en haut, la rangee du titre disparait,
 *  la croix rejoint le premier rappel, et la categorie partage sa rangee
 *  avec le code. 780 est le seuil ou la mise en page d'origine tient seule
 *  (390x844 : 64 px de marge) — au-dessus, rien ne change.
 *
 *  `--haut-sur` est la zone de la barre d'etat. En jeton, pour que le
 *  harnais puisse poser les 20 px d'un iPhone installe : un navigateur de
 *  test rend toujours zero pour `env()`.
 * ------------------------------------------------------------------ */
:root { --haut-sur: env(safe-area-inset-top, 0px); }
@media (max-height: 779px) {
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) {
    height: calc(100vh - var(--haut-sur) - 8px); max-height: calc(100vh - var(--haut-sur) - 8px);
    height: calc(100dvh - var(--haut-sur) - 8px); max-height: calc(100dvh - var(--haut-sur) - 8px);
  }
  /* Un bandeau d'etat affiche (hors reseau, envoi en attente) ne se recouvre
     pas davantage qu'avant : la feuille reprend alors sa hauteur d'origine. */
  body:has(#bandeau:not([hidden])) .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) {
    height: 94vh; max-height: 94vh;
    height: 94dvh; max-height: 94dvh;
  }

  /* La rangee du titre cede sa place ; le titre reste lu par les lecteurs
     d'ecran, et la croix garde ses 44 px. */
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .poignee { display: none; }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .feuille-haut { padding-top: 8px; }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .feuille-entete {
    padding: 0; height: 0; min-height: 0;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) #feuille-titre {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .fermer {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    flex: none; width: 44px; height: 44px; min-height: 44px;
  }

  /* Les rappels : le projet sur sa ligne, a cote de la croix ; la categorie
     et le code se partagent la suivante, sans leur coche. */
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px;
    padding-bottom: 8px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee {
    width: auto; min-width: 0;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee:first-child {
    grid-column: 1 / -1; margin-right: 52px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "val chev";
    padding-left: 10px; padding-right: 10px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .rappel .etape-repliee:not(:first-child)::before {
    display: none;
  }

  /* Le reste se serre de quelques pixels, sans changer de forme. */
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .etape:has(> .etape-ouverte:not([hidden])) {
    padding-top: 8px; padding-bottom: 8px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .resume {
    font-size: var(--mot-2); line-height: var(--lh-mot-2);
    margin-top: 6px; padding: 6px 12px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden])) .feuille-actions { margin-top: 6px; }
}

/* MODIFIER UN BLOC ajoute « Supprimer » sous « Enregistrer » : 72 px de plus
   au bas de la feuille. Mesure du 2026-09-28 : les molettes etaient coupees
   sur l'iPhone SE, et meme sur un 390x844 la note perdait 4 px sous un
   defilement fige. Le seuil est donc plus haut que celui des rappels : sous
   860 px, les deux boutons se mettent cote a cote, a parts egales.
   « Supprimer » reste un vrai bouton de 60 px, et sa confirmation le protege
   d'un toucher de travers. */
@media (max-height: 859px) {
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden]))
    .feuille-actions:has(#feuille-supprimer:not([hidden])) {
    flex-direction: row; align-items: stretch; gap: 8px;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden]))
    .feuille-actions:has(#feuille-supprimer:not([hidden])) :is(#feuille-ok, #feuille-supprimer) {
    flex: 1 1 0; width: auto; min-width: 0;
  }
  .feuille:has([data-etape="heures"] .etape-ouverte:not([hidden]))
    .feuille-actions:has(#feuille-supprimer:not([hidden])) #feuille-supprimer {
    padding-left: 8px; padding-right: 8px;
    font-size: var(--mot-2); line-height: var(--lh-mot-2);
  }
}

/* Mot de passe oublié (2026-09-22) : lien discret sous le bouton, formulaire
   de nouveau mot de passe dans la même carte que la connexion. */
#btn-oubli { display: block; margin: 14px auto 0; min-height: 44px; padding: 0 12px; background: none; border: 0; font-size: .9375rem; }
#form-nouveau-mdp h2 { margin: 0 0 12px; color: var(--atelier-or); font-family: Georgia, serif; }

/* ── LE BOUTON PRINCIPAL, PARTOUT — pas seulement dans la feuille ─────────
 *
 * `style.css` écrit `button.primaire, .primaire { background:#394d55;
 * color: var(--tempo-carte) }`. Ce jeton vaut #ffffff dans la palette
 * claire — blanc sur ardoise, lisible. Ce fichier le redéfinit en #2b1d14
 * pour l'atelier : le texte devient brun très foncé sur ardoise foncée.
 *
 * MESURÉ AU NAVIGATEUR le 2026-09-29 : **1,84:1**, contre 4,5:1 exigés par
 * WCAG AA. Le thème corrigeait déjà `.feuille .primaire` ; il ne couvrait
 * pas les autres — dont le bouton « Se connecter », le tout premier écran
 * qu'un employé voit, et le « Répondre » de la bulle du sondage.
 *
 * Même traitement que la feuille, pour que l'app n'ait qu'un seul bouton
 * principal : cuivre, texte brun foncé — 9,9:1 au plus clair du dégradé,
 * 4,9:1 au plus foncé. */
button.primaire, .primaire {
  color: #28170b;
  border: 0;
  border-color: #ffe0a2;
  background: linear-gradient(180deg, #f4cf8c, #d99f4a 52%, #b96f29);
  box-shadow: inset 0 1px rgba(255,255,255,.66), 0 4px 0 #4b2913;
  font-family: Georgia, "Times New Roman", serif;
}

button.primaire:active, .primaire:active {
  background: #c88a3d;
}