/* Planning — styles */
:root {
  --lbl: 175px; --tot: 30px; --cell: 28px; --hdr: 22px;
  --navy: #1F3864; --band: #2F5496;
  --we: #BFBFBF; --fe: #D9C7E8; --in: #FFF2CC;
  /* charte de la page d'accueil du site */
  --vert: #1F5C3A; --sable: #B49B6C; --focus: #9C7E45;
  --d: #70AD47; --n: #FF0000; --q: #FFC000;
  --font: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #f5f6f8; color: #111; font: 14px/1.4 var(--font); }
/* contour de focus commun au site : 3,83:1 sur blanc */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* sur le marine de la page de connexion, le sable ne tient pas : le contour y passe en blanc
   (le bandeau a son propre contour, dans le bloc commun ci-dessous) */
body.login > :focus-visible, body.login footer.foot a:focus-visible { outline-color: #fff; }

/* ===== BANDEAU COMMUN (début) =====
   Bloc identique au caractère près dans planning/assets/app.css, service/assets/app.css et
   bible/bible.css : toute retouche se reporte dans les trois (contrôle : deploy/verif-bandeau.ps1).
   Modèle : l'entête de la Bible du Soldat. Balisage : header.bandeau > a.bandeau-marque
   (img.bandeau-insigne, span.bandeau-txt > span.bandeau-unite + span.bandeau-titre), puis
   nav.bandeau-menu > .bandeau-btn (liens ou boutons) et span.bandeau-qui (personne connectée).
   Couleurs écrites en dur : le jeton --focus n'a pas la même valeur d'une feuille à l'autre.
   Titre dans la police des boutons (Arial, héritée du bandeau) : demande de David, lot 1.0927.02 ;
   Georgia reste réservée aux pages du livre.
   Contrastes sur le dégradé #24427a → #1F3864 : blanc 9,8 à 11,6:1 ; sable clair #E3D6BC 6,8 à 8,1:1 ;
   contour de focus #F2D69B 7,0 à 8,2:1 ; libellé d'un bouton sur son fond 7,9:1.
   position + z-index : l'ombre passe au-dessus du contenu qui suit, même s'il a un fond (tableau). */
.bandeau { flex: none; position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-height: 54px; padding: 8px 14px; color: #fff; font: 15px/1.2 Arial, Helvetica, sans-serif;
  background: #1F3864 linear-gradient(180deg, #24427a, #1F3864); border-bottom: 2px solid #1F5C3A; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.bandeau-marque { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; border-radius: 4px; }
.bandeau-insigne { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.bandeau-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bandeau-unite { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #E3D6BC; }
.bandeau-unite sup { text-transform: none; font-size: .75em; line-height: 0; letter-spacing: 0; }
.bandeau-titre { font-size: 19px; white-space: nowrap; }
.bandeau-marque:hover .bandeau-titre, .bandeau-marque:focus-visible .bandeau-titre { text-decoration: underline; }
.bandeau-menu { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bandeau-btn { font: inherit; color: #fff; text-decoration: none; cursor: pointer; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28); border-radius: 6px; padding: 6px 12px; }
.bandeau-btn:hover { background: rgba(255,255,255,.18); }
.bandeau-qui { font-size: 13px; color: #E3D6BC; padding: 0 4px; }
.bandeau :focus-visible { outline: 3px solid #F2D69B; outline-offset: 2px; }
@media (max-width: 700px) {
  .bandeau { min-height: 48px; padding: 6px 10px; }
  .bandeau-insigne { width: 32px; height: 32px; }
  .bandeau-unite, .bandeau-qui { display: none; }
  .bandeau-titre { font-size: 17px; }
  .bandeau-btn { padding: 6px 8px; font-size: 13px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .bandeau { min-height: 42px; padding: 4px 10px; }
  .bandeau-titre { font-size: 16px; }
}
@media print { .bandeau { display: none !important; } }
/* ===== BANDEAU COMMUN (fin) ===== */

.flash { margin: 10px 14px 0; padding: 8px 12px; border-radius: 4px; background: #e2efda; border: 1px solid #70ad47; color: #111; }
.flash.err { background: #fde2e2; border-color: #ff0000; }
footer.foot { text-align: center; color: #888; font-size: 11px; padding: 10px; }
footer.foot a { color: var(--band); text-decoration: underline; }
footer.foot a:hover, footer.foot a:focus { color: var(--navy); }
/* cœur de la mention d'auteur : 5,4:1 sur le fond clair ; le marine de la connexion le fait
   passer au rose (4,6:1), le rouge n'y tiendrait que 2:1 */
svg.coeur { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: #C8102E; }

/* ---------- barre d'outils + légende ---------- */
main.grid { padding: 10px 14px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.toolbar .hint { color: #555; flex: 1 1 260px; }
.legend { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font-weight: bold; font-size: 12px; border: 1px solid rgba(0,0,0,.15); }
.chip.D { background: var(--d); color: #fff; } .chip.N { background: var(--n); color: #fff; } .chip.Q { background: var(--q); }
.chip.we { background: var(--we); } .chip.fe { background: var(--fe); }

/* ---------- grille ---------- */
.wrap { overflow: auto; max-height: calc(100vh - 150px); background: #fff; border: 2px solid var(--navy); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10); position: relative; }
table.pl { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
table.pl th, table.pl td {
  border-right: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; height: var(--hdr); padding: 0 2px;
  text-align: center; white-space: nowrap; overflow: hidden; background-clip: padding-box;
}
table.pl col.clbl { width: var(--lbl); } table.pl col.ctot { width: var(--tot); } table.pl col.cday { width: var(--cell); }
table.pl .day { width: var(--cell); min-width: var(--cell); max-width: var(--cell); }
th.lbl { position: sticky; left: 0; z-index: 3; background: #f2f2f2; text-align: left; padding: 0 6px; font-weight: bold;
  width: var(--lbl); min-width: var(--lbl); max-width: var(--lbl); text-overflow: ellipsis; }
th.lbl.c4 { width: calc(var(--lbl) + 3 * var(--tot)); min-width: calc(var(--lbl) + 3 * var(--tot)); max-width: calc(var(--lbl) + 3 * var(--tot)); border-right: 2px solid #000; }
th.lbl .corner { font-weight: normal; font-size: 11px; color: #444; }
td.tot { position: sticky; z-index: 3; background: #fff; width: var(--tot); min-width: var(--tot); max-width: var(--tot); font-weight: bold; }
td.tot.t1 { left: var(--lbl); }
td.tot.t2 { left: calc(var(--lbl) + var(--tot)); }
td.tot.t3 { left: calc(var(--lbl) + 2 * var(--tot)); border-right: 2px solid #000; }

thead th { position: sticky; z-index: 4; background: #fff; }
thead tr:nth-child(1) th { top: 0; }
thead tr:nth-child(2) th { top: var(--hdr); }
thead tr:nth-child(3) th { top: calc(2 * var(--hdr)); }
thead tr:nth-child(4) th { top: calc(3 * var(--hdr)); border-bottom: 2px solid #000; }
thead th.lbl { z-index: 6; }
thead th.mo { background: var(--navy); color: #fff; letter-spacing: .04em; }
thead th.dn { font-weight: bold; }
thead th.dw { font-weight: normal; color: #555; font-size: 11px; }
thead th.wk { background: #fff; }
thead th.wk.alt { background: #ededed; }
th.we, td.we { background: var(--we); }
th.fe, td.fe { background: var(--fe); }
thead th.dn.td { background: var(--band); color: #fff; }
td.day.td { box-shadow: inset 2px 0 0 var(--band), inset -2px 0 0 var(--band); }

tr.act-row td.day { background: #fff; }
tr.act-row td.we { background: var(--we); }
tr.act-row td.fe { background: var(--fe); }
th.lbl.grp { text-align: center; font-size: 13px; }
td.act { font-weight: bold; cursor: pointer; }
td.act[colspan="1"], td.act[colspan="2"] { font-size: 9px; letter-spacing: -.02em; padding: 0; }
td.act:hover { filter: brightness(.9); }

tr.sub th, tr.sub td { background: #e7e6e6; font-size: 11px; height: 20px; }
tr.sub td.note { text-align: left; color: #444; font-weight: bold; padding-left: 8px; }

/* bande de séparation entre pelotons */
tr.pel th, tr.pel td { background: var(--band); color: #fff; font-size: 11px; height: 20px; border-top: 2px solid #000; }
tr.pel th.lbl { text-align: left; font-weight: bold; padding: 0; }
/* le libellé du peloton est un bouton : il replie ses Pax pour ne garder que la bande */
button.pel-tog { display: flex; align-items: center; gap: 5px; width: 100%; padding: 0 6px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.pel-tog .chev { font-size: 9px; width: 9px; flex: none; }
button.pel-tog:hover { text-decoration: underline; }
/* le contour global est tracé hors de la cellule, que table.pl th rogne (overflow:hidden), et le
   sable ne fait que 1,94:1 sur le bleu de la bande : contour blanc, dessiné à l'intérieur */
button.pel-tog:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
tr.pel td.note { text-align: left; font-weight: bold; letter-spacing: .06em; padding-left: 8px; }

tr.pr-row td.pr { background: #fff; font-weight: bold; }
tr.pr-row td.pr.we { background: var(--we); }
tr.pr-row td.pr.fe { background: var(--fe); }
tr.pr-row.edit td.pr { background: var(--in); cursor: pointer; }
tr.pr-row.edit td.pr.we { background: #d6d6d6; }
tr.pr-row.edit td.pr.fe { background: #cbb9de; }
tr.pr-row.edit td.pr:hover { outline: 2px solid var(--band); outline-offset: -2px; }
tr.pr-row.me th.lbl { background: var(--in); }
tr.pr-row.me th.lbl::before { content: "▶ "; color: var(--band); }
td.pr.D { background: var(--d) !important; color: #fff; }
td.pr.N { background: var(--n) !important; color: #fff; }
td.pr.Q { background: var(--q) !important; color: #000; }
td.pr.saving { opacity: .5; }

tfoot th, tfoot td { position: sticky; z-index: 4; background: #f2f2f2; font-weight: bold; }
tfoot tr:nth-child(1) th, tfoot tr:nth-child(1) td { bottom: calc(2 * var(--hdr)); border-top: 2px solid #000; }
tfoot tr:nth-child(2) th, tfoot tr:nth-child(2) td { bottom: var(--hdr); }
tfoot tr:nth-child(3) th, tfoot tr:nth-child(3) td { bottom: 0; }
tfoot th.lbl { z-index: 6; text-align: right; }
tfoot td.ft { background: #fff; }
tfoot td.ft.we { background: var(--we); }
tfoot td.ft.fe { background: var(--fe); }
tfoot tr.dispo td.ft.hi { background: #c6e0b4; }
tfoot tr.nondispo td.ft, tfoot tr.sansrep td.ft { font-weight: normal; color: #333; }

/* ---------- popover activité ---------- */
#pop { position: absolute; z-index: 50; background: #fff; border: 1px solid #333; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  padding: 10px 30px 10px 12px; min-width: 250px; max-width: 340px; font-size: 13px; }
#pop h3 { margin: 0 0 3px; font-size: 14px; color: var(--navy); }
#pop .dates { color: #444; }
#pop .com { margin-top: 4px; color: #333; white-space: pre-wrap; }
#pop .pop-sel { display: block; margin-top: 8px; font-weight: bold; font-size: 12px; }
#pop .pop-sel select { display: block; width: 100%; margin-top: 3px; font: 13px var(--font); padding: 4px; }
#pop .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#pop .lbl-btns { flex-basis: 100%; font-size: 12px; color: #444; }
#pop button.pb { border: 1px solid rgba(0,0,0,.2); border-radius: 4px; padding: 6px 10px; font: bold 12px var(--font); cursor: pointer; background: #eee; }
#pop button.pb.D { background: var(--d); color: #fff; } #pop button.pb.N { background: var(--n); color: #fff; } #pop button.pb.Q { background: var(--q); }
#pop .pop-admin { margin-top: 8px; font-size: 12px; }
#pop .pop-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #666; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 60; font-size: 13px; }
.toast.err { background: #b00020; }

/* ---------- formulaires / cartes ---------- */
main.card-wrap { max-width: 520px; margin: 24px auto; padding: 0 14px; display: flex; flex-direction: column; gap: 14px; }
.card { background: #fff; color: #111; border: 1px solid #d0d4da; border-top: 5px solid var(--vert); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10); padding: 18px 20px; }
.card.small { padding: 12px 20px; }
.card h1 { margin: 0 0 12px; font-size: 20px; color: var(--navy); }
.card summary { cursor: pointer; font-weight: bold; color: var(--navy); }
.form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: bold; }
.form label.inline { flex-direction: row; align-items: center; gap: 8px; }
.form input, .form select, .form textarea { font: 14px var(--font); padding: 8px; border: 1px solid #aaa; border-radius: 4px; width: 100%; }
.form input[type=checkbox] { width: auto; }
.form input[type=color] { padding: 2px; height: 36px; }
.btn { display: inline-block; background: var(--band); color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; padding: 9px 14px; font: bold 14px var(--font); cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
.btn.secondary { background: #666; }
.btn.danger { background: #c00; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.tiny { padding: 2px 6px; font-size: 11px; }
.err { color: #c00; font-weight: bold; }

/* ---------- page d'accueil de l'application (connexion) ----------
   Reprend la page d'accueil du site : fond marine dégradé, carte blanche à filet vert,
   insigne et devise. Marges automatiques plutôt que justify-content : en paysage bas,
   le contenu déborde vers le bas et reste atteignable au défilement au lieu d'être rogné. */
body.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 32px 16px; color: #fff; text-align: center;
  background: var(--navy); background-image: radial-gradient(circle at 50% 30%, #2F5496 0%, #1F3864 55%, #16294a 100%); }
body.login main.card-wrap { width: 100%; max-width: 460px; margin: auto 0 0; padding: 0; }
body.login .flash { width: 100%; max-width: 460px; margin: 0; text-align: left; }
body.login footer.foot { margin: 0 0 auto; color: rgba(255,255,255,.85); }
body.login footer.foot a { color: #fff; }
body.login footer.foot svg.coeur { fill: #FF7A8A; }
body.login .card { text-align: center; padding: 26px 24px 24px; }
body.login .card.small { padding: 12px 20px; }
body.login .card h1 { margin: 0 0 4px; }
body.login .form { text-align: left; }
body.login .btn { width: 100%; padding: 13px 18px; font-size: 16px; }
body.login .btn:not(.secondary):hover, body.login .btn:not(.secondary):focus { background: var(--navy); filter: none; }
.insigne { width: 150px; max-width: 55%; height: auto; display: block; margin: 0 auto 12px; }
.devise { margin: 0 0 16px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--vert);
  display: flex; align-items: center; justify-content: center; gap: 10px; }
/* filets rappelant l'or de l'insigne ; ils se compriment avant la devise, qui peut passer à la
   ligne si l'utilisateur agrandit les caractères (pas de nowrap : sinon le texte est coupé) */
.devise::before, .devise::after { content: ""; height: 1px; flex: 0 1 28px; min-width: 0; background: var(--sable); }
.unite { margin: 0 0 20px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.unite sup { text-transform: none; }
@media (max-width: 360px) {
  .devise { font-size: 12px; letter-spacing: .08em; gap: 8px; }
  .devise::before, .devise::after { flex: 0 1 20px; }
}

/* ---------- administration ---------- */
main.admin { max-width: 1100px; margin: 0 auto; padding: 12px 14px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 2px solid var(--navy); }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--navy); font-weight: bold; border-radius: 6px 6px 0 0; background: #e6e9f0; }
.tabs a.on { background: var(--navy); color: #fff; }
.admin h2 { font-size: 18px; color: var(--navy); margin: 8px 0 10px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
table.list { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
table.list th, table.list td { border: 1px solid #ccc; padding: 5px 7px; text-align: left; vertical-align: middle; }
table.list th { background: #e6e9f0; }
table.list td.acts { white-space: nowrap; }
table.list tr.pel-sep td { background: var(--band); color: #fff; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
table.list form { display: inline; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #333; vertical-align: middle; margin-right: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.muted { color: #666; font-size: 12px; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  :root { --lbl: 112px; --tot: 0px; --cell: 26px; --hdr: 20px; }
  table.pl td.tot { padding: 0; border: 0 !important; font-size: 0; color: transparent; }
  th.lbl { border-right: 2px solid #000; }
  .toolbar .hint { display: none; }
  main.grid { padding: 6px; }
  .wrap { max-height: calc(100vh - 150px); }
  th.lbl { font-size: 11px; padding: 0 4px; }
  table.pl { font-size: 11px; }
  .toolbar .hint { flex-basis: 100%; }
  .cols { grid-template-columns: 1fr; }
}

/* ---------- impression ---------- */
@media print {
  .toolbar, footer.foot, #pop, .toast { display: none !important; }
  body { background: #fff; }
  body.login { display: block; min-height: 0; padding: 0; background: #fff; color: #000; }
  body.login main.card-wrap { max-width: none; margin: 0; }
  body.login .card { box-shadow: none; }
  main.grid { padding: 0; }
  .wrap { overflow: visible; max-height: none; border-width: 1px; }
  table.pl th, table.pl td { position: static !important; }
  /* les fonds ne sont pas imprimés par défaut : sans cela les lettres D / N / ? et les
     libellés d'activité sortiraient en blanc sur blanc */
  table.pl { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.pel th, tr.pel td { border-bottom: 1px solid #000; }
  body.login .btn { background: #fff; color: #000; border: 1px solid #000; }
  @page { size: A3 landscape; margin: 8mm; }
}

/* ---------- bascule + vue liste ---------- */
.views { display: inline-flex; border: 1px solid var(--band); border-radius: 4px; overflow: hidden; }
.views .btn.vue { border: 0; border-radius: 0; background: #fff; color: var(--band); }
.views .btn.vue.on { background: var(--band); color: #fff; }
#liste { max-width: 760px; }
.liste-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; margin-bottom: 10px; }
.liste-bar label { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; }
.liste-bar select { font: 13px var(--font); padding: 5px; }
.acard { background: #fff; border: 1px solid #cfd3da; border-left: 6px solid var(--band); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.acard.passee { opacity: .7; }
.ahead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aline { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #555; font-weight: bold; }
.alib { font-weight: bold; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.adates { font-size: 13px; color: #333; }
.adates small { color: #777; }
.acom { margin: 6px 0 0; font-size: 13px; color: #333; }
.astat { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.astat button.st { border: 1px solid rgba(0,0,0,.15); border-radius: 12px; padding: 2px 9px; font: 12px var(--font); cursor: pointer; background: #eee; }
.astat button.st b { margin-left: 3px; }
.astat button.st.D { background: #e2efda; } .astat button.st.N { background: #fde2e2; } .astat button.st.Q { background: #fff2cc; }
.astat button.st.M { background: #e9e9f7; } .astat button.st.S { background: #f0f0f0; }
.astat button.st.zero { opacity: .55; }
.awho { margin-top: 6px; font-size: 13px; color: #333; background: #f7f7f9; border-radius: 4px; padding: 6px 8px; }
.abtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #ddd; }
.abtns .mine { font-size: 13px; margin-right: 4px; }
.mystat.D { color: #3e7d22; } .mystat.N { color: #c00; } .mystat.Q { color: #b07a00; } .mystat.M { color: #5a55a0; }
.abtns button.pb { border: 2px solid transparent; border-radius: 4px; padding: 7px 12px; font: bold 13px var(--font); cursor: pointer; background: #eee; }
.abtns button.pb.D { background: #e2efda; } .abtns button.pb.N { background: #fde2e2; } .abtns button.pb.Q { background: #fff2cc; }
.abtns button.pb.on { border-color: #222; }
.abtns button.pb.D.on { background: var(--d); color: #fff; } .abtns button.pb.N.on { background: var(--n); color: #fff; } .abtns button.pb.Q.on { background: var(--q); }
@media (max-width: 700px) {
  .abtns button.pb { flex: 1 1 40%; padding: 10px 6px; }
  .abtns .mine { flex-basis: 100%; }
}