/* ============================================================
   CARNET D'INTERVENTIONS — charte graphique
   Reprise fidèle de la maquette validée par Anton (08/09/2026)
   ============================================================ */
:root{
  --bg:#E9ECF1;            /* fond gris-lavande de la page */
  --card:#FFFFFF;
  --ink:#0F1115;           /* texte principal quasi noir */
  --ink-2:#5B6472;         /* texte secondaire */
  --ink-3:#98A0AC;         /* DÉCORATIF UNIQUEMENT : icônes, chevrons, jours hors mois.
                              Mesuré à 2,2:1 sur le fond de page — jamais pour du texte à lire,
                              illisible en plein soleil. Pour du texte, utiliser --ink-2. */
  --line:#E4E7EC;
  --line-strong:#D2D7DF;
  --chip:#F4F5F7;
  --r-card:22px;
  --r-inner:16px;
  --r-chip:999px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-fab:0 6px 20px rgba(0,0,0,.28);
  /* couleurs de services */
  --s-peinture:#3B82F6;      --s-peinture-bg:#E4EDFF;   --s-peinture-br:#BFD6FF;
  --s-verts:#1FA85C;         --s-verts-bg:#DCF3E6;      --s-verts-br:#B4E3C8;
  --s-plomberie:#0EA5A5;     --s-plomberie-bg:#D8F2F2;  --s-plomberie-br:#A9E2E2;
  --s-electricite:#E08127;   --s-electricite-bg:#FCEBD8;--s-electricite-br:#F6D2AC;
  --s-nettoyage:#8B5CF6;     --s-nettoyage-bg:#EDE6FE;  --s-nettoyage-br:#D6C6FC;
  /* Sept teintes de plus, pour que douze services aient chacun la sienne. Au-delà de
     cinq, les couleurs se répétaient et les pastilles du calendrier ne voulaient plus
     rien dire. */
  --s-brun:#A8562A;     --s-brun-bg:#F5E6DC;  --s-brun-br:#E8C9B3;
  --s-rose:#DB2777;     --s-rose-bg:#FCE7F3;  --s-rose-br:#F9C0DE;
  --s-marine:#1E3A8A;   --s-marine-bg:#E2E8F8;  --s-marine-br:#C0CDEE;
  --s-or:#CA8A04;       --s-or-bg:#FEF6D9;  --s-or-br:#FAE79A;
  --s-ardoise:#475569;  --s-ardoise-bg:#E9EDF2;  --s-ardoise-br:#CBD5E1;
  --s-brique:#B91C1C;   --s-brique-bg:#FCE4E4;  --s-brique-br:#F6BFBF;
  --s-olive:#4D7C0F;    --s-olive-bg:#EDF6DC;  --s-olive-br:#D3E8AC;
  --danger:#DC2626;          --danger-bg:#FDE8E8;
  --ok:#1FA85C;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{margin:0;background:#DDE1E8;font-family:-apple-system,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;color:var(--ink)}

/* ---------- planche de présentation ---------- */
.board{display:flex;flex-wrap:wrap;gap:56px 40px;padding:56px 48px 72px;justify-content:flex-start}
.board-title{width:100%;margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:-.6px}
.board-sub{width:100%;margin:0 0 24px;font-size:16px;color:#5B6472;font-weight:500}
.frame{width:390px}
.frame-label{font-size:15px;font-weight:700;color:#2A3140;margin:0 0 4px}
.frame-note{font-size:13px;color:#6B7482;margin:0 0 14px;line-height:1.45;min-height:36px}

/* ---------- téléphone ---------- */
.phone{box-sizing:content-box;width:390px;height:844px;background:var(--bg);border:11px solid #0B0D10;border-radius:52px;
  overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(10,15,25,.22)}
.status{height:46px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;
  font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.status .dots{display:flex;gap:5px;align-items:center;opacity:.85}
.screen{height:798px;overflow:hidden;display:flex;flex-direction:column}
.scroll{flex:1;overflow:hidden;padding:0 16px 16px}

/* ---------- en-tête ---------- */
.head{padding:6px 20px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.head h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.18}
.head .sub{margin:3px 0 0;font-size:14px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.head-actions{display:flex;align-items:center;gap:10px;padding-top:6px;flex:0 0 auto}
.head h1.mois{white-space:nowrap}
/* Hauteur portée à 44 px et écart à 10 px : ces boutons se touchent avec des gants,
   dehors. Le fond est transparent et l'icône reste à 21 px, donc rien ne change à
   l'œil — c'est la zone touchable, invisible, qui s'agrandit. La largeur reste à
   34 px pour ne pas serrer le titre du mois sur les petits téléphones. */
.icon-btn{width:34px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink);
  background:transparent;border:0;cursor:pointer}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- filtres services ---------- */
.chips{display:flex;gap:9px;padding:2px 20px 16px;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:var(--r-chip);
  background:var(--card);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip.is-on{border-width:1.5px}
.chip.s-peinture.is-on{background:var(--s-peinture-bg);border-color:var(--s-peinture-br)}
.chip.s-verts.is-on{background:var(--s-verts-bg);border-color:var(--s-verts-br)}
.chip.s-plomberie.is-on{background:var(--s-plomberie-bg);border-color:var(--s-plomberie-br)}
.chip.s-electricite.is-on{background:var(--s-electricite-bg);border-color:var(--s-electricite-br)}

/* ---------- carte calendrier ---------- */
.cal{background:var(--card);border-radius:var(--r-card);padding:16px 12px 10px;box-shadow:var(--shadow)}
/* Replié sur une seule semaine par défaut : le mois entier prenait la moitié de
   l'écran pour un seul jour rempli, et la liste des interventions — ce que l'agent
   vient vraiment lire — commençait sous la ligne de flottaison. */
.cal-bascule{width:100%;margin-top:2px;padding:11px;border:0;background:transparent;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
  border-radius:12px;min-height:44px}
.cal-bascule:active{background:var(--chip)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.cal-week span{text-align:center;font-size:13px;font-weight:600;color:var(--ink-2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.day{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:7px;border-radius:14px;position:relative}
.day .n{font-size:17px;font-weight:600;line-height:1}
.day.out .n{color:var(--ink-3);font-weight:500}
.day.today .n{color:var(--s-peinture);font-weight:800}
.day.sel{border:2px solid var(--ink);padding-top:5px}
.day .pips{display:flex;gap:3px;margin-top:7px;height:7px;align-items:center}
.pip{width:7px;height:7px;border-radius:50%}
.pip.s-peinture{background:var(--s-peinture)} .pip.s-verts{background:var(--s-verts)}
.pip.s-plomberie{background:var(--s-plomberie)} .pip.s-electricite{background:var(--s-electricite)}
.pip.s-nettoyage{background:var(--s-nettoyage)}

/* ---------- titre de section / jour ---------- */
.day-head{display:flex;align-items:center;justify-content:space-between;padding:22px 6px 12px}
.day-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.day-head .cnt{white-space:nowrap}
.day-head .cnt{font-size:14px;color:var(--ink-2);font-weight:600}
.sect{margin:16px 6px 8px;font-size:13px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.7px}

/* ---------- état vide ---------- */
.empty{border:2px dashed var(--line-strong);border-radius:var(--r-card);padding:34px 20px;text-align:center;background:rgba(255,255,255,.5)}
.empty svg{width:30px;height:30px;stroke:var(--ink-3);stroke-width:1.8;fill:none;margin-bottom:12px}
.empty p{margin:0 0 16px;color:var(--ink-2);font-size:16px;font-weight:500}

/* ---------- carte intervention ---------- */
.item{background:var(--card);border-radius:var(--r-inner);padding:14px;display:flex;gap:12px;
  box-shadow:var(--shadow);margin-bottom:10px;position:relative;overflow:hidden}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.item.s-peinture::before{background:var(--s-peinture)} .item.s-verts::before{background:var(--s-verts)}
.item.s-plomberie::before{background:var(--s-plomberie)} .item.s-electricite::before{background:var(--s-electricite)}
.item .thumbs{display:flex;gap:4px;flex:0 0 auto}
.thumb{width:52px;height:60px;border-radius:10px;background:#DFE3EA;position:relative;overflow:hidden;flex:0 0 auto}
/* 11 px et non 8 : dehors, l'agent ne distinguait pas l'avant de l'après. */
.thumb span{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:800;text-align:center;
  padding:3px 0;background:rgba(10,13,16,.62);color:#fff;letter-spacing:.4px}
.thumb.vid::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:11px solid rgba(255,255,255,.95);border-top:7px solid transparent;border-bottom:7px solid transparent}
.item .body{flex:1;min-width:0}
/* Deux lignes plutôt qu'une : les deux vignettes prennent le tiers gauche de la
   carte, et l'objet des travaux — ce qui distingue deux passages sur le même lycée —
   se coupait à « Reprise peinture couloi… ». */
.item h3{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.2px;
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .meta{margin:0;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .note{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.tag.s-peinture{background:var(--s-peinture-bg);color:#1D4FBF} .tag.s-verts{background:var(--s-verts-bg);color:#127543}
.tag.s-plomberie{background:var(--s-plomberie-bg);color:#0A7676} .tag.s-electricite{background:var(--s-electricite-bg);color:#A75A11}
.tag.grey{background:var(--chip);color:var(--ink-2)}

/* ---------- boutons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px;border-radius:16px;
  font-size:16px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-sm{padding:11px 15px;font-size:14px;width:auto;border-radius:12px}
.fab{position:absolute;right:20px;bottom:26px;width:60px;height:60px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;box-shadow:var(--shadow-fab)}
.fab svg{width:27px;height:27px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}

/* ---------- formulaires ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 7px;letter-spacing:.1px}
.input{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;font-size:16px;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:500}
.input.ph{color:var(--ink-2);font-weight:400}
.input svg{width:18px;height:18px;stroke:var(--ink-3);stroke-width:2;fill:none;flex:0 0 auto}
.textarea{min-height:104px;align-items:flex-start;line-height:1.5}
.req{color:var(--danger);font-weight:800}

/* ---------- zone photo avant/après ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.shot{background:var(--card);border:2px dashed var(--line-strong);border-radius:var(--r-inner);
  height:132px;display:grid;place-items:center;text-align:center;padding:10px}
.shot.filled{border-style:solid;border-color:var(--line);padding:0;overflow:hidden;position:relative;background:#D9DEE6}
.shot .cap{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.6px;
  background:rgba(10,13,16,.68);color:#fff;padding:4px 8px;border-radius:8px}
.shot .plus{width:34px;height:34px;border-radius:50%;background:var(--chip);display:grid;place-items:center;margin:0 auto 8px}
.shot .plus svg{width:17px;height:17px;stroke:var(--ink-2);stroke-width:2.4;fill:none;stroke-linecap:round}
.shot small{display:block;font-size:12px;color:var(--ink-2);font-weight:600}
.shot em{display:block;font-size:11px;color:var(--ink-2);font-style:normal;margin-top:2px}

/* ---------- listes réglages / admin ---------- */
.list{background:var(--card);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.1px}
.row .t small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.row .chev{color:var(--ink-3)}
.row .chev svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:800;flex:0 0 auto}
.avatar.s-peinture{background:var(--s-peinture-bg);color:#1D4FBF} .avatar.s-verts{background:var(--s-verts-bg);color:#127543}
.avatar.s-plomberie{background:var(--s-plomberie-bg);color:#0A7676} .avatar.s-electricite{background:var(--s-electricite-bg);color:#A75A11}
.sw{width:47px;height:29px;border-radius:999px;background:var(--line-strong);position:relative;flex:0 0 auto}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--ok)} .sw.on::after{left:21px}
.check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line-strong);flex:0 0 auto;display:grid;place-items:center}
.check.on{background:var(--ink);border-color:var(--ink)}
.check.on::after{content:"";width:10px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg);margin-top:-3px}

/* ---------- barre d'onglets ---------- */
.tabs{display:flex;background:var(--card);border-top:1px solid var(--line);padding:9px 6px 22px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-2)}
.tab svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink);font-weight:700}

/* ---------- divers ---------- */
.banner{display:flex;gap:11px;align-items:flex-start;background:#FFF7E6;border:1px solid #F5E0AE;
  border-radius:14px;padding:13px 14px;font-size:13px;color:#8A6316;line-height:1.45;font-weight:500}
.banner svg{width:18px;height:18px;stroke:#C8912A;stroke-width:2.2;fill:none;flex:0 0 auto;margin-top:1px}
.pill-count{background:var(--ink);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}

/* ---------- compléments ---------- */
.scroll .chips{padding-left:0;padding-right:0}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink)}
/* Stockage en direct (Administration) : la jauge glisse d'une mesure à l'autre. */
.bar i{transition:width .8s ease}
.direct{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16A34A;margin-right:6px;
  vertical-align:1px;animation:direct 1.6s ease-in-out infinite}
@keyframes direct{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}.direct{animation:none}}
.stepper{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.stepper b{font-size:15px;font-weight:800;min-width:42px;text-align:center;letter-spacing:-.2px}
.stepper .btn-sm{padding:7px 12px;font-size:16px;line-height:1}
.stat{background:var(--card);border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--shadow);margin-top:4px}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px}
.stat small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;font-weight:500}
.metarow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:14px 6px 2px}
.metarow .cnt{font-size:13px;color:var(--ink-2);font-weight:600}

/* ============================================================
   Application — écrans réels
   ============================================================ */
html,body{height:100%}
body{background:var(--bg);overscroll-behavior-y:none}
.vue{display:none;flex-direction:column;height:100dvh;background:var(--bg);position:relative}
.vue.active{display:flex}
.vue > .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:120px}

/* connexion */
/* Le clavier d'Android réduit la hauteur utile à ~340 px : sans défilement, le
   bouton « Se connecter » se retrouvait hors de l'écran, inatteignable. */
.connexion{display:flex;flex-direction:column;justify-content:center;min-height:100dvh;
  overflow-y:auto;padding:24px}
.marque{width:64px;height:64px;border-radius:20px;background:var(--ink);display:grid;place-items:center;margin-bottom:22px}
.marque svg{width:31px;height:31px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.connexion h1{font-size:28px;font-weight:800;letter-spacing:-.7px;margin:0}
.connexion .sous{margin:4px 0 30px;color:var(--ink-2);font-size:15px}
input.input,textarea.input{width:100%;font-family:inherit;outline:none;-webkit-appearance:none}
input.input:focus,textarea.input:focus{border-color:var(--ink)}
textarea.input{resize:none;min-height:104px;display:block}
.aide{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:26px}
.erreur{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:12px 14px;
  font-size:14px;font-weight:600;margin-bottom:14px}

/* barre du haut avec retour */
.barre{display:flex;align-items:center;gap:6px;padding:8px 12px 10px}
.barre h1{flex:1;font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0;text-align:center}
.barre .icon-btn{flex:0 0 34px}

/* tiroir de navigation */
.voile{position:fixed;inset:0;background:rgba(10,13,16,.42);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:40}
.voile.on{opacity:1;pointer-events:auto}
.tiroir{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-radius:26px 26px 0 0;
  padding:10px 10px 30px;transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);z-index:41}
.tiroir.on{transform:none}
.tiroir .poignee{width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:6px auto 12px}
.tiroir button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;
  padding:15px 16px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);text-align:left;border-radius:14px}
.tiroir button:active{background:var(--chip)}
.tiroir button svg{width:21px;height:21px;stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tiroir button.rouge{color:var(--danger)} .tiroir button.rouge svg{stroke:var(--danger)}

/* messages */
.toast{position:fixed;left:16px;right:16px;bottom:26px;background:var(--ink);color:#fff;
  padding:14px 16px;border-radius:14px;font-size:14.5px;font-weight:600;z-index:60;
  transform:translateY(160%);opacity:0;visibility:hidden;transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .2s,visibility .26s;box-shadow:var(--shadow-fab)}
.toast.on{transform:none;opacity:1;visibility:visible}
.toast.rouge{background:var(--danger)}

/* sélecteur d'établissement */
.recherche{position:sticky;top:0;background:var(--bg);padding:0 0 10px;z-index:2}
.choix{max-height:none}
.choix .row{cursor:pointer}
.choix .row.sel{background:var(--accent-doux,#F4F5F7)}

/* médias */
.media-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.media{position:relative;border-radius:14px;overflow:hidden;background:#D9DEE6;aspect-ratio:3/4}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media .cap{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.6px;
  background:rgba(10,13,16,.68);color:#fff;padding:4px 8px;border-radius:8px}
/* 34 px et non 26 : cette croix se vise avec des gants, sur une vignette. */
.media .sup{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;
  background:rgba(10,13,16,.68);border:0;display:grid;place-items:center}
.media .sup svg{width:15px;height:15px;stroke:#fff;stroke-width:2.6;fill:none}
.vide-media{grid-column:1/-1;text-align:center;color:var(--ink-2);font-size:14px;padding:22px 0}

/* file d'attente hors-ligne */
/* Devenue un bouton : on la touche pour relancer les envois en attente. */
.attente{display:flex;align-items:center;gap:10px;background:#FFF7E6;border:1px solid #F5E0AE;
  border-radius:12px;padding:13px;font-size:13px;color:#8A6316;font-weight:600;margin-bottom:12px;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;min-height:46px}
.attente:active{background:#FBEFD4}

/* Notification administrateur : une demande de suppression de compte attend une réponse.
   Même gabarit que la file d'attente, en rouge : le délai légal court (un mois). */
.attente.alerte{background:var(--danger-bg);border-color:#F6C7C7;color:var(--danger)}
.attente.alerte:active{background:#FAD9D9}
.icon-btn.pastille{position:relative}
.icon-btn.pastille::after{content:"";position:absolute;top:9px;right:2px;width:10px;height:10px;
  border-radius:50%;background:var(--danger);border:2px solid var(--bg)}
.tiroir .compteur{margin-left:auto;background:var(--danger);color:#fff;border-radius:999px;
  font-size:12px;font-weight:800;padding:2px 8px;line-height:1.4}
.attente svg{width:17px;height:17px;stroke:#C8912A;stroke-width:2.2;fill:none;flex:0 0 auto}
.attente.alerte svg{stroke:var(--danger)}

.chips{overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{cursor:pointer;user-select:none}
.day{cursor:pointer}
.charge{text-align:center;padding:40px 0;color:var(--ink-2);font-size:14px}
@media print{.barre,.fab,.tiroir,.voile,.btn{display:none!important}}

/* ---------- couleurs de service ----------
   « nettoyage » n'avait que sa pastille : ni étiquette, ni avatar, ni barre de
   carte, ni surbrillance de filtre. Le 5e service créé s'affichait donc déjà en
   blanc. Réparé ici, et sept teintes ajoutées à la suite. */
.chip.s-nettoyage.is-on{background:var(--s-nettoyage-bg);border-color:var(--s-nettoyage-br)}
.pip.s-nettoyage{background:var(--s-nettoyage)}
.item.s-nettoyage::before{background:var(--s-nettoyage)}
.tag.s-nettoyage{background:var(--s-nettoyage-bg);color:#5B2FB5}
.avatar.s-nettoyage{background:var(--s-nettoyage-bg);color:#5B2FB5}
.chip.s-brun.is-on{background:var(--s-brun-bg);border-color:var(--s-brun-br)}
.pip.s-brun{background:var(--s-brun)}
.item.s-brun::before{background:var(--s-brun)}
.tag.s-brun{background:var(--s-brun-bg);color:#7A3D1C}
.avatar.s-brun{background:var(--s-brun-bg);color:#7A3D1C}
.chip.s-rose.is-on{background:var(--s-rose-bg);border-color:var(--s-rose-br)}
.pip.s-rose{background:var(--s-rose)}
.item.s-rose::before{background:var(--s-rose)}
.tag.s-rose{background:var(--s-rose-bg);color:#9D174D}
.avatar.s-rose{background:var(--s-rose-bg);color:#9D174D}
.chip.s-marine.is-on{background:var(--s-marine-bg);border-color:var(--s-marine-br)}
.pip.s-marine{background:var(--s-marine)}
.item.s-marine::before{background:var(--s-marine)}
.tag.s-marine{background:var(--s-marine-bg);color:#172F6E}
.avatar.s-marine{background:var(--s-marine-bg);color:#172F6E}
.chip.s-or.is-on{background:var(--s-or-bg);border-color:var(--s-or-br)}
.pip.s-or{background:var(--s-or)}
.item.s-or::before{background:var(--s-or)}
.tag.s-or{background:var(--s-or-bg);color:#854D0E}
.avatar.s-or{background:var(--s-or-bg);color:#854D0E}
.chip.s-ardoise.is-on{background:var(--s-ardoise-bg);border-color:var(--s-ardoise-br)}
.pip.s-ardoise{background:var(--s-ardoise)}
.item.s-ardoise::before{background:var(--s-ardoise)}
.tag.s-ardoise{background:var(--s-ardoise-bg);color:#334155}
.avatar.s-ardoise{background:var(--s-ardoise-bg);color:#334155}
.chip.s-brique.is-on{background:var(--s-brique-bg);border-color:var(--s-brique-br)}
.pip.s-brique{background:var(--s-brique)}
.item.s-brique::before{background:var(--s-brique)}
.tag.s-brique{background:var(--s-brique-bg);color:#8B1414}
.avatar.s-brique{background:var(--s-brique-bg);color:#8B1414}
.chip.s-olive.is-on{background:var(--s-olive-bg);border-color:var(--s-olive-br)}
.pip.s-olive{background:var(--s-olive)}
.item.s-olive::before{background:var(--s-olive)}
.tag.s-olive{background:var(--s-olive-bg);color:#3A5E0B}
.avatar.s-olive{background:var(--s-olive-bg);color:#3A5E0B}

/* ---------- aide repliée ---------- */
.aide-pliante{margin-top:9px}
.aide-pliante summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--ink-2);padding:9px 2px;min-height:44px;display:flex;align-items:center;gap:7px}
.aide-pliante summary::-webkit-details-marker{display:none}
.aide-pliante summary::before{content:"";width:0;height:0;flex:0 0 auto;
  border-left:6px solid var(--ink-2);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .18s}
.aide-pliante[open] summary::before{transform:rotate(90deg)}
.aide-pliante p{margin:0 2px 4px;font-size:13px;line-height:1.5;color:var(--ink-2);font-weight:400}

/* ---------- D : le bord des filtres dit qu'il y a une suite ---------- */
.chips.deborde{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}

/* ---------- F : un jour ouvré passé et resté vide ---------- */
.pip.vide{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3);opacity:.7}

/* ---------- 3e emplacement média, sur toute la largeur ---------- */
.shot.pleine-largeur{grid-column:1/-1;height:96px}
/* Compteur sur la vignette quand une catégorie porte plusieurs médias. */
.thumb .compte{position:absolute;top:3px;right:4px;font-size:10px;font-weight:800;color:#fff;
  background:rgba(10,13,16,.72);border-radius:7px;padding:1px 5px;line-height:1.5}

/* ---------- se souvenir de moi ---------- */
/* « Mot de passe oublié ? » : un lien discret, mais une zone de 44 px pour le doigt. */
.lien-discret{display:block;background:none;border:0;padding:0 2px;min-height:44px;margin:-6px 0 2px;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:underline;cursor:pointer;text-align:left}
.oubli{background:var(--card);border-radius:var(--r-inner);padding:12px 14px;margin:0 0 14px;box-shadow:var(--shadow)}
.memoriser{display:flex;align-items:center;gap:11px;margin:4px 2px 16px;cursor:pointer;
  min-height:44px;font-size:14px;color:var(--ink-2);font-weight:500}
.memoriser input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--ink);margin:0}