/* Côté équipe — ce que cette application ajoute à la feuille de Tour de rôle.
 *
 * Rien n'est redéfini ici : app.css garde la main sur les couleurs, les
 * boutons, les tableaux et la mise en page. Ce fichier ne porte que les
 * composants qui n'existent pas là-bas, parce qu'ils ne servent qu'ici —
 * d'abord le ruban des jours, qui est la pièce maîtresse.
 */

/* ── la pastille de la navigation : combien de demandes attendent ────────── */
.nav-n{
  display:inline-block; min-width:1.35em; margin-left:.5em; padding:0 .35em;
  border-radius:999px; background:var(--warn); color:var(--sur-accent);
  font:600 11px/1.5 "IBM Plex Sans",sans-serif; text-align:center; vertical-align:1px;
}
.lien.on .nav-n{ background:var(--warn) }

/* ── le compteur ──────────────────────────────────────────────────────────
 * Un seul chiffre, assez grand pour être lu de loin, et sa phrase dessous.
 * Sert au solde de congés et au compteur d'heures : ce sont les deux
 * questions qu'une salariée vient poser à cette application.
 */
.cpts{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:0 0 14px }
.cptr{
  background:var(--card); border:1px solid var(--rule2); border-radius:14px;
  padding:16px 16px 14px; box-shadow:var(--ombre);
}
.cptr-v{ font:600 34px/1 Fredoka,sans-serif; color:var(--accent); letter-spacing:-.01em }
.cptr-v .u{ font-size:17px; font-weight:500; margin-left:.25em; color:var(--ink2) }
.cptr-l{ margin-top:5px; font-size:13.5px; color:var(--ink2); line-height:1.35 }
.cptr-d{ margin-top:7px; font-size:12px; color:var(--ink3) }
.cptr.bas .cptr-v{ color:var(--warn) }
.cptr.zero .cptr-v{ color:var(--ink3) }
.cptr .jauge{ display:block; margin-top:9px }

/* ── le ruban des jours ───────────────────────────────────────────────────
 * Une pastille par jour de la période demandée. Elle dit POURQUOI chaque jour
 * compte ou ne compte pas : samedi, férié, crèche fermée. C'est ce ruban qui
 * évite la discussion sur « pourquoi trois semaines ne font que cinq jours » —
 * on le voit, on ne l'explique plus.
 */
.ruban{ display:flex; flex-wrap:wrap; gap:3px; margin:8px 0 4px }
.rj{
  min-width:30px; padding:3px 4px 4px; border-radius:7px; text-align:center;
  background:var(--accent-soft); border:1px solid transparent;
  font:500 11px/1.25 "IBM Plex Sans",sans-serif; color:var(--accent);
}
.rj b{ display:block; font:600 13px/1.1 Fredoka,sans-serif }
.rj.r-non{ background:var(--sur2); color:var(--ink3) }
.rj.r-ferie{ background:var(--warn-soft); color:var(--warn) }
.rj.r-fermee{ background:var(--calme-soft); color:var(--calme) }
.ruban-l{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 0; font-size:11.5px; color:var(--ink3) }
/* Le carré de la légende prend la couleur VIVE de sa pastille, pas son fond :
   en thème sombre, le fond doux est à deux points du fond de la carte, et les
   quatre carrés devenaient un seul rectangle gris. */
.ruban-l span i{
  display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px;
  vertical-align:0; background:var(--accent);
}
.ruban-l .l-non i{ background:var(--ink3) }
.ruban-l .l-ferie i{ background:var(--warn) }
.ruban-l .l-fermee i{ background:var(--calme) }

/* ── la file des demandes ─────────────────────────────────────────────────
 * Une carte par demande, et la décision POSÉE SUR la carte : on ne relit pas
 * une ligne de tableau pour savoir ce qu'on accepte.
 */
.file{ display:grid; gap:12px }
.dem{
  background:var(--card); border:1px solid var(--rule2); border-left:4px solid var(--calme);
  border-radius:12px; padding:14px 16px; box-shadow:var(--ombre);
}
.dem.hs{ border-left-color:var(--warn) }
.dem-t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px }
.dem-qui{ font:500 16px/1.2 Fredoka,sans-serif }
.dem-quoi{ font-size:13px; color:var(--ink2) }
.dem-quand{ margin:6px 0 0; font-size:14.5px }
.dem-quand b{ font-weight:600 }
.dem-mot{
  margin:9px 0 0; padding:9px 11px; background:var(--sur2); border-radius:9px;
  font-size:13.5px; color:var(--ink2);
}
.dem-mot:before{ content:"« " }
.dem-mot:after{ content:" »" }
.dem-sous{ margin:7px 0 0; font-size:12.5px; color:var(--ink3) }
.dem-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:flex-end }
.dem-act form{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:0 }
.dem-act .champ{ flex:1 1 220px; min-width:0 }
.dem-act label{ font-size:12px; color:var(--ink3) }

/* ── les lignes d'historique, côté téléphone ──────────────────────────────
 * app.css pose déjà .s-ligne ; il manque juste la place pour l'étiquette
 * d'état et les quelques mots de la réponse.
 */
.hl{ display:block }
.hl-t{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.hl-t strong{ font-weight:600 }
.hl-s{ font-size:12.5px; color:var(--ink3); margin-top:2px }
.hl-r{
  margin:7px 0 0; padding:8px 10px; border-radius:8px; background:var(--sur2);
  font-size:13px; color:var(--ink2);
}
.hl-r b{ display:block; font-size:11.5px; color:var(--ink3); font-weight:600;
         text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px }
.hl-act{ margin-top:8px }
.hl-act .bouton{ padding:5px 11px; font-size:13px }

/* Une pièce déposée : la vignette et son nom, en ligne. */
.pjoint{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px }
.pjoint a.bouton{ padding:5px 11px; font-size:13px }
.pjoint .manquante{ color:var(--warn); font-size:13px; font-weight:500 }

/* ── le bandeau « ce qui manque » ─────────────────────────────────────────
 * Posé en haut de l'écran d'une salariée quand une pièce est attendue. Ce
 * n'est pas une alerte rouge : un arrêt de travail arrive quand le médecin
 * l'a signé, pas quand l'application le réclame.
 */
.rappel{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 14px;
  padding:12px 14px; border-radius:12px; background:var(--warn-soft);
  border:1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}
.rappel .i{ font-size:17px; line-height:1.2 }
.rappel p{ margin:0; font-size:13.5px; color:var(--ink2) }
.rappel strong{ color:var(--ink) }

/* ── le formulaire de déclaration, sur téléphone ──────────────────────────
 * Deux dates côte à côte : « du » et « au » se lisent ensemble, et sur un
 * écran de 375 px elles tiennent sur une ligne.
 */
.deux{ display:grid; gap:10px; grid-template-columns:1fr 1fr }
.deux .champ{ min-width:0 }
.demi{ display:flex; gap:7px; align-items:center; margin-top:4px; font-size:13px; color:var(--ink2) }
.demi input{ width:auto; margin:0 }
.hmin{ display:flex; gap:8px; align-items:flex-end }
.hmin .champ{ flex:0 0 94px }
.hmin .sep{ padding-bottom:9px; color:var(--ink3) }

/* Le tableau des compteurs d'équipe : les nombres s'alignent. */
table .n, .nb{ font-variant-numeric:tabular-nums }
.sol-reste{ font-weight:600 }
.sol-reste.bas{ color:var(--warn) }
.sol-reste.nul{ color:var(--crit) }

@media (max-width:420px){
  .cptr-v{ font-size:30px }
  .deux{ grid-template-columns:1fr }
}