/* Ribambelle — feuille unique. Encre sur papier vert-gris ; couleurs
   sémantiques distinctes de l'accent, pour que « critique » ne se confonde
   jamais avec « identité de marque ». */

:root{
  --paper:#F2F5F3; --card:#FBFCFB; --flanc:#EAEFEC;
  --ink:#161D19; --ink2:#42504A; --ink3:#6E7C75;
  --rule:#D5DEDA; --rule2:#E6ECE9; --sur2:#ECF1EE;
  --accent:#1C5C38; --accent-soft:#E3EFE8; --sur-accent:#FBFCFB; --logo-vert:#4CA858;
  --crit:#A32B36; --crit-soft:#F7E4E5;
  --warn:#9A6207; --warn-soft:#F8EEDC;
  --calme:#3F6A78; --calme-soft:#E4EFF2;
  --done:#78877F;
  --ombre:0 1px 2px rgba(22,29,25,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1512; --card:#1B2521; --flanc:#141B17;
    --ink:#E6ECE8; --ink2:#AEBCB5; --ink3:#7E8D86;
    --rule:#2A352F; --rule2:#212B26; --sur2:#232F29;
    --accent:#6FBB90; --accent-soft:#1B2F25; --sur-accent:#0E1512; --logo-vert:#8CD79A;
    --crit:#E88B93; --crit-soft:#33201F;
    --warn:#DFAE5E; --warn-soft:#2E2617;
    --calme:#8FBDC9; --calme-soft:#1A2A2E;
    --done:#6B7A73;
    --ombre:0 1px 2px rgba(0,0,0,.3);
  }
}

/* Le sombre choisi dans l'appli l'emporte sur un appareil réglé en clair,
   comme le clair choisi l'emporte déjà sur un appareil sombre (ci-dessus). */
:root[data-theme="dark"]{
    --paper:#0E1512; --card:#1B2521; --flanc:#141B17;
    --ink:#E6ECE8; --ink2:#AEBCB5; --ink3:#7E8D86;
    --rule:#2A352F; --rule2:#212B26; --sur2:#232F29;
    --accent:#6FBB90; --accent-soft:#1B2F25; --sur-accent:#0E1512; --logo-vert:#8CD79A;
    --crit:#E88B93; --crit-soft:#33201F;
    --warn:#DFAE5E; --warn-soft:#2E2617;
    --calme:#8FBDC9; --calme-soft:#1A2A2E;
    --done:#6B7A73;
    --ombre:0 1px 2px rgba(0,0,0,.3);
  }
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark} }

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:224px 1fr; min-height:100vh;
}

/* ---------- flanc ---------- */
.flanc{
  background:var(--flanc); border-right:1px solid var(--rule);
  padding:22px 0 20px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.marque{padding:0 20px}
.marque a{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:20px;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.creche{
  padding:0 20px; font-size:13px; color:var(--ink2); line-height:1.35;
  display:flex; flex-direction:column;
}
.creche span{color:var(--ink3); font-size:12px}
.bascule{padding:0 16px}
.bascule select{
  font:inherit; font-size:12.5px; width:100%; padding:5px 7px;
  background:var(--card); color:var(--ink); border:1px solid var(--rule); border-radius:3px;
}
nav{display:flex; flex-direction:column; gap:16px}
.grp{display:flex; flex-direction:column}

.lien{
  padding:6px 20px; color:var(--ink2); text-decoration:none; font-size:14px;
  border-left:2px solid transparent;
}
.lien:hover{color:var(--ink); background:var(--rule2)}
.lien.on{color:var(--accent); border-left-color:var(--accent); font-weight:500; background:var(--card)}
.lien:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.pied-flanc{
  margin-top:auto; padding:0 20px; font-size:11px; color:var(--ink3);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- corps ---------- */
main{padding:32px 34px 90px; max-width:1080px; min-width:0}
.entete{margin-bottom:22px}
h1{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-weight:600;
  font-size:29px; line-height:1.15; margin:0; text-wrap:balance;
}
.chapeau{color:var(--ink2); max-width:70ch; margin:6px 0 0}

/* ---------- tuiles ---------- */
.tuiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; margin-bottom:8px;
}
.tuile{background:var(--card); padding:14px 16px; display:flex; flex-direction:column; gap:3px}
.tv{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:23px;
  font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums;
}
.tl{font-size:12.5px; color:var(--ink3)}
.td{font-size:11.5px; color:var(--ink3); margin-top:2px}
.tuile.crit .tv{color:var(--crit)}
.tuile.warn .tv{color:var(--warn)}
.tuile.bien .tv{color:var(--accent)}

/* ---------- blocs ---------- */
.bloc{margin-top:30px}
.bloc-t{display:flex; align-items:baseline; gap:11px; margin-bottom:9px}
.bloc-t h2{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-weight:600;
  font-size:17px; margin:0; letter-spacing:-.01em;
}
.filet{flex:1; height:1px; background:var(--rule)}
.bloc-t .a{font-size:12.5px; color:var(--accent); text-decoration:none}
.bloc-t .a:hover{text-decoration:underline}

/* ---------- tables ---------- */
.deborde{overflow-x:auto; border:1px solid var(--rule); border-radius:3px;
         background:var(--card); box-shadow:var(--ombre)}
table{border-collapse:collapse; width:100%; font-size:14px}
thead th{
  text-align:left; font-weight:500; font-size:11.5px; color:var(--ink3);
  letter-spacing:.05em; text-transform:uppercase;
  padding:9px 14px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--rule2); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th.n,td.n{text-align:right; font-variant-numeric:tabular-nums;
          font-family:"IBM Plex Mono",ui-monospace,monospace}
tbody tr.faible td{color:var(--done)}
tbody tr.alerte td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
tbody tr.tiede td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.sous{display:block; font-size:12px; color:var(--ink3); margin-top:2px; max-width:64ch}
.sous strong{color:var(--crit); font-weight:600}
.vide{color:var(--ink3); font-size:13.5px; border:1px dashed var(--rule);
      border-radius:3px; padding:16px 18px; margin:0}

/* ---------- etiquettes, jauges, boutons ---------- */
.etiq{
  display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; background:var(--rule2); color:var(--ink2);
  white-space:nowrap;
}
.etiq.crit{background:var(--crit-soft); color:var(--crit)}
.etiq.warn{background:var(--warn-soft); color:var(--warn)}
.etiq.bien{background:var(--accent-soft); color:var(--accent)}
.etiq.calme{background:var(--calme-soft); color:var(--calme)}

.jauge{display:inline-block; width:72px; height:6px; border-radius:3px;
       background:var(--rule2); overflow:hidden; vertical-align:middle}
.jauge i{display:block; height:100%; background:var(--accent)}
.jauge i.warn{background:var(--warn)}
.jauge i.crit{background:var(--crit)}

.bouton{
  font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--rule); background:var(--card); color:var(--ink2);
  border-radius:3px; padding:4px 10px; min-width:82px; text-align:center;
  text-decoration:none; display:inline-block;
}
.bouton:hover{border-color:var(--ink3); color:var(--ink)}
.bouton:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.bouton.fait{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
form.enligne{display:inline}

@media (max-width:820px){
  body{grid-template-columns:1fr}
  .flanc{position:static; height:auto; flex-direction:column}
  main{padding:24px 18px 70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- formulaires et saisie ---------- */
.form{border:1px solid var(--rule); border-radius:3px; background:var(--card);
      box-shadow:var(--ombre); padding:20px 22px}
.champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px 20px}
.champ{display:flex; flex-direction:column; gap:4px; min-width:0}
.champ label{font-size:12.5px; color:var(--ink2); font-weight:500}
.champ .requis{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px;
               letter-spacing:.06em; text-transform:uppercase; color:var(--warn); margin-left:5px}
.champ input[type=text],.champ input[type=number],.champ input[type=date],
.champ select,.champ textarea,.enligne-form select,.enligne-form input[type=text]{
  font:inherit; font-size:14px; padding:6px 9px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px; width:100%;
}
.champ textarea{resize:vertical; line-height:1.45}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible,
.enligne-form select:focus-visible,.enligne-form input:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.champ input[type=file]{font:inherit; font-size:13px; color:var(--ink2)}
.aide{font-size:12px; color:var(--ink3); margin:1px 0 0; max-width:52ch}
.case{display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ink2)}
.case input{width:auto; margin:0}
.actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
         margin-top:18px; padding-top:15px; border-top:1px solid var(--rule2)}
.actions .pousse{flex:1}
.bouton.primaire{background:var(--accent); border-color:var(--accent); color:var(--sur-accent)}
.bouton.primaire:hover{filter:brightness(1.08); color:var(--sur-accent)}
.bouton.danger{color:var(--crit); border-color:var(--crit-soft)}
.bouton.danger:hover{border-color:var(--crit); color:var(--crit)}

.enligne-form{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.enligne-form select{width:auto; min-width:170px}
.enligne-form input[type=text]{width:auto}

.notice,.succes-bloc,.alerte-bloc{
  border:1px solid var(--rule); border-radius:3px; background:var(--card);
  padding:16px 18px; box-shadow:var(--ombre)}
.notice p{margin:0 0 8px; max-width:72ch; color:var(--ink2); font-size:14px}
.notice p:last-child{margin-bottom:0}
.succes-bloc{border-left:3px solid var(--accent)}
.succes-bloc h3,.alerte-bloc h3{font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif;
  font-size:16px; margin:0 0 7px; color:var(--ink)}
.succes-bloc ul{margin:0 0 10px; padding-left:20px; color:var(--ink2); font-size:14px}
.succes-bloc p:last-child,.alerte-bloc p:last-child{margin-bottom:0}
.alerte-bloc{border-left:3px solid var(--crit)}
.alerte-bloc p{margin:0; color:var(--ink2); font-size:14px}


/* ====================================================================
   Tour de rôle — ce que le planning ajoute à la feuille commune.
   ==================================================================== */

/* ---------- page des familles : pas de flanc, un bandeau ---------- */
body.simple{display:block}
/* L'espace des familles est dessiné pour un pouce, pas pour un écran large.
   À 940 px, chaque bloc s'étirait sur toute la largeur : des phrases de
   quinze mots, des boutons démesurés, et des cartes perdues dans le vide
   (25/10/2026). La colonne est maintenant bornée et centrée — sur téléphone
   rien ne change, sur ordinateur la page se tient. */
body.simple main{margin:0 auto; max-width:760px; padding:26px 20px 80px}
.bandeau{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 20px; background:var(--flanc); border-bottom:1px solid var(--rule);
}
.bandeau .marque a{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:18px;
  color:var(--ink); text-decoration:none;
}
.bandeau .qui{font-size:13px; color:var(--ink2); text-align:right; display:flex; flex-direction:column}
.bandeau .qui span{color:var(--ink3); font-size:11.5px}

/* ---------- la grille de la semaine ---------- */
table.grille{table-layout:fixed}
table.grille thead th{
  text-align:center; text-transform:none; letter-spacing:0; font-size:13px;
  color:var(--ink2); font-weight:500; padding:8px 6px; line-height:1.25;
}
table.grille thead th span{display:block; font-size:11px; color:var(--ink3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
table.grille thead th:first-child{text-align:left; width:150px}
th.rang{
  text-align:left; font-weight:500; font-size:13px; color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace; white-space:nowrap;
  padding:10px 12px; border-bottom:1px solid var(--rule2); vertical-align:top;
  background:var(--card); position:sticky; left:0;
}
th.rang span{
  display:block; font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:11.5px; color:var(--ink3); font-weight:400; margin-top:2px; white-space:normal;
}
td.cell{
  padding:8px 9px; border-bottom:1px solid var(--rule2); border-left:1px solid var(--rule2);
  vertical-align:top; min-width:116px; position:relative;
}
td.cell .compte{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
td.cell .qui-liste{margin:3px 0 0; padding:0; list-style:none}
td.cell .qui-liste li{font-size:12px; color:var(--ink2); line-height:1.35}
td.cell .qui-liste li.remp{text-decoration:underline; text-underline-offset:2px}
td.cell .qui-liste li.renf{font-style:italic}
td.cell .manque{display:block; margin-top:4px; font-size:11px; font-weight:500}
td.cell.complet{background:var(--accent-soft)}
td.cell.complet .compte{color:var(--accent)}
td.cell.incomplet{background:var(--warn-soft)}
td.cell.incomplet .compte,td.cell.incomplet .manque{color:var(--warn)}
td.cell.decouvert{background:var(--crit-soft)}
td.cell.decouvert .compte,td.cell.decouvert .manque{color:var(--crit)}
td.cell.fermee{background:var(--rule2)}
td.cell.fermee .etat{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink3);
}
td.cell.fermee .pourquoi{display:block; font-size:11.5px; color:var(--ink3); margin-top:2px}
td.vide-cell{background:var(--card); border-left:1px solid var(--rule2)}

/* ---------- divers ---------- */
code.jeton{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--ink2); background:var(--rule2); padding:2px 6px; border-radius:3px;
  word-break:break-all;
}
textarea.cachee{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.champ input[type=time],.champ input[readonly]{
  font:inherit; font-size:14px; padding:6px 9px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px; width:100%;
}
.champ input[readonly],.champ textarea[readonly]{color:var(--ink2)}
#texte{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.5}

@media (max-width:820px){
  th.rang{position:static; width:auto}
  td.cell{min-width:96px}
}

/* ---------- glisser-déposer ---------- */
.lu-seul{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

td.cell .qui-liste li.puce{
  cursor:grab; border-radius:3px; padding:1px 5px; margin:1px 0 0 -5px;
  border:1px solid transparent; background:transparent;
  transition:background .12s, border-color .12s;
}
td.cell .qui-liste li.puce:hover{background:var(--card); border-color:var(--rule)}
td.cell .qui-liste li.puce:active{cursor:grabbing}
li.puce.porte{opacity:.35}

td.cell.survol{outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft)}
td.cell.refus{outline:2px dashed var(--crit); outline-offset:-2px; cursor:not-allowed}
td.cell.vient-de-bouger{animation:pose 1.2s ease-out}
@keyframes pose{
  from{box-shadow:inset 0 0 0 2px var(--accent)}
  to{box-shadow:inset 0 0 0 2px transparent}
}
table.grille.attente{opacity:.6; pointer-events:none}

/* le lien clavier de chaque case : discret, mais jamais absent */
td.cell .cell-lien{
  position:absolute; top:auto; left:auto; right:6px; bottom:5px; font-size:10.5px;
  color:var(--ink3); text-decoration:none; opacity:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
td.cell:hover .cell-lien,td.cell .cell-lien:focus-visible{opacity:1; color:var(--accent)}
td.cell .cell-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px; opacity:1}

/* la palette des familles */
.palette{
  border:1px solid var(--rule); border-radius:3px; background:var(--card);
  box-shadow:var(--ombre); padding:14px 16px;
}
.palette .aide{margin:0 0 9px; max-width:72ch}
ul.puces{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
li.puce.dispo{
  cursor:grab; font-size:12.5px; color:var(--ink2);
  border:1px solid var(--rule); border-radius:3px; padding:3px 9px; background:var(--paper);
}
li.puce.dispo:hover{border-color:var(--accent); color:var(--accent)}
li.puce.dispo:active{cursor:grabbing}

/* le bandeau de retour */
.annonce{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; max-width:min(92vw,620px);
  padding:11px 16px; border-radius:4px; font-size:13.5px; line-height:1.35;
  background:var(--card); color:var(--ink); border:1px solid var(--rule);
  box-shadow:0 6px 20px rgba(22,29,25,.16); z-index:50;
}
.annonce.fait{border-left:3px solid var(--accent)}
.annonce.refus{border-left:3px solid var(--crit); color:var(--crit)}
.annonce.sortie{opacity:0; pointer-events:none; transition:opacity .4s}
.annonce .annuler{
  font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink2);
  border-radius:3px; padding:3px 11px;
}
.annonce .annuler:hover{border-color:var(--ink3); color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  td.cell.vient-de-bouger{animation:none}
  .annonce.sortie{transition:none}
}

/* la palette sert aussi de zone de retrait */
.palette-visee{display:none}
.palette.visee{border-color:var(--crit); background:var(--crit-soft)}
.palette.visee .palette-repos{display:none}
.palette.visee .palette-visee{display:inline; color:var(--crit)}
.palette.visee li.puce.dispo{opacity:.35}

/* repères temporels dans la grille */
td.cell.passe{opacity:.45}
td.cell.passe .manque{text-decoration:line-through}
table.grille thead th.passe{opacity:.5}
table.grille thead th.auj{color:var(--accent)}
table.grille thead th.auj span{color:var(--accent)}
td.cell.auj{box-shadow:inset 2px 0 0 var(--accent)}

/* le congé, dit dans la case */
td.cell .conge-note{
  display:block; margin-top:3px; font-size:10.5px; color:var(--calme);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* ====================================================================
   Téléphone. Les familles consultent debout dans le hall, à une main :
   une ligne de tableau y devient une fiche, et les actions prennent
   toute la largeur. La grille de la semaine fait exception — c'est une
   matrice, elle reste une matrice et défile latéralement.
   ==================================================================== */


@media (max-width:640px){
  body.simple main{padding:20px 14px 70px}
  main{padding:20px 14px 70px}

  .bandeau{padding:12px 14px; gap:10px}
  .bandeau .marque a{font-size:16px; white-space:nowrap}
  .bandeau .qui{font-size:12px; min-width:0}
  .bandeau .qui span{display:none}

  h1{font-size:24px}
  .chapeau{font-size:14px}
  .tuiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .tv{font-size:20px}

  /* --- une ligne devient une fiche --- */
  .deborde:has(table:not(.grille)){border:0; background:none; box-shadow:none; overflow:visible}
  table:not(.grille){display:block}
  table:not(.grille) thead{position:absolute; width:1px; height:1px;
                           overflow:hidden; clip-path:inset(50%)}
  table:not(.grille) tbody{display:block}
  table:not(.grille) tbody tr{
    display:block; background:var(--card); border:1px solid var(--rule);
    border-radius:4px; box-shadow:var(--ombre); padding:12px 14px; margin-bottom:10px;
  }
  table:not(.grille) tbody tr.alerte{border-left:3px solid var(--crit)}
  table:not(.grille) tbody tr.tiede{border-left:3px solid var(--warn)}
  table:not(.grille) tbody tr.alerte td:first-child,
  table:not(.grille) tbody tr.tiede td:first-child{box-shadow:none}
  table:not(.grille) tbody td{
    display:flex; gap:12px; justify-content:space-between; align-items:baseline;
    padding:4px 0; border:0; text-align:left;
  }
  table:not(.grille) tbody td::before{
    content:attr(data-l); flex:0 0 auto; font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink3); white-space:nowrap;
  }
  table:not(.grille) tbody td.n{font-family:inherit; text-align:right}

  /* la première cellule fait le titre de la fiche */
  table:not(.grille) tbody td:first-child{
    display:block; padding:0 0 8px; margin-bottom:6px;
    border-bottom:1px solid var(--rule2); font-size:15px;
  }
  table:not(.grille) tbody td:first-child::before{content:none}

  /* la cellule d'action, sans intitulé, occupe toute la largeur */
  table:not(.grille) tbody td[data-l=""]{display:block; margin-top:10px}
  table:not(.grille) tbody td[data-l=""]::before{content:none}
  table:not(.grille) tbody td[data-l=""] form,
  table:not(.grille) tbody td[data-l=""] .bouton{display:block; width:100%}

  /* de vraies cibles pour le pouce */
  .bouton{padding:10px 14px; font-size:13.5px; min-width:0}
  .enligne-form{gap:9px}
  .enligne-form select,.enligne-form input[type=text]{width:100%}

  .palette .puces{gap:8px}
  li.puce.dispo{padding:8px 12px}

  .annonce{left:10px; right:10px; bottom:10px; transform:none; max-width:none;
           flex-wrap:wrap; gap:9px}

  .jeton{font-size:10.5px}
}

@media (max-width:640px){
  /* --- la navigation du bureau devient une barre d'onglets --- */
  .flanc{
    position:static; height:auto; padding:12px 0 0; gap:10px;
    border-right:0; border-bottom:1px solid var(--rule);
  }
  .flanc .marque{padding:0 14px}
  .flanc .marque a{font-size:17px}
  .creche{padding:0 14px; font-size:12px}
  .creche span{display:inline; margin-left:6px}
  .flanc nav{gap:0}
  .grp{flex-direction:row; overflow-x:auto; gap:4px; padding:0 14px;
       scrollbar-width:none; -ms-overflow-style:none}
  .grp::-webkit-scrollbar{display:none}

  .lien{
    border-left:0; border-bottom:2px solid transparent; border-radius:3px 3px 0 0;
    padding:9px 11px; white-space:nowrap; font-size:13.5px;
  }
  .lien.on{border-left-color:transparent; border-bottom-color:var(--accent)}
  .pied-flanc{display:none}
  .bascule{padding:0 14px}

  /* --- le titre de bloc et ses actions s'empilent --- */
  .bloc-t{flex-wrap:wrap; gap:8px}
  .bloc-t h2{flex:1 1 100%}
  .filet{display:none}

  /* --- la grille reste une matrice : elle déborde et défile --- */
  table.grille{min-width:620px}
  .deborde:has(table.grille){border:1px solid var(--rule); border-radius:3px}
  th.rang{position:sticky; left:0; z-index:2; min-width:118px}
  td.cell{min-width:100px}
  td.cell .cell-lien{opacity:1; color:var(--accent)}
}

/* ====================================================================
   Le mur de tuiles. Un tableau se lit ligne à ligne ; un mur se balaie.
   La couleur porte l'état, le gros chiffre porte le manque, et l'action
   est sur la tuile — pas au bout d'une ligne qu'il faut suivre du doigt.
   ==================================================================== */

.mur{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr));
  gap:10px; align-items:start;
}

.tc{
  display:flex; flex-direction:column; gap:7px;
  background:var(--card); border:1px solid var(--rule); border-top:3px solid var(--rule);
  border-radius:4px; padding:12px 14px 13px; box-shadow:var(--ombre);
}
.tc-tete{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.tc-quand{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.tc-quand strong{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-size:16.5px; font-weight:600;
  text-transform:capitalize; letter-spacing:-.01em;
}
.tc-quand span{font-size:12px; color:var(--ink3); margin-top:1px}
.tc-ech{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  color:var(--ink3); white-space:nowrap; text-align:right;
}
.tc-heure{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13.5px;
  font-variant-numeric:tabular-nums; color:var(--ink2);
}
.tc-marque{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:22px;
  font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums;
}
.tc-marque small{font-size:12px; font-weight:500; margin-left:5px; color:var(--ink3)}
.tc-l{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.tc-l li{font-size:12.5px; color:var(--ink2); line-height:1.35}
.tc-l li.remp{text-decoration:underline; text-underline-offset:2px}
.tc-l li.renf{font-style:italic}
.tc-note{font-size:12px; color:var(--ink3); line-height:1.4}
.tc-note strong{color:var(--ink2)}
.tc-act{margin-top:auto; padding-top:9px}
.tc-act form,.tc-act .bouton{display:block; width:100%}
.tc-act .bouton{width:100%; text-align:center}

/* l'état, porté par le liseré et le gros chiffre */
.tc.bien{border-top-color:var(--accent)}
.tc.bien .tc-marque{color:var(--accent)}
.tc.warn{border-top-color:var(--warn); background:var(--warn-soft)}
.tc.warn .tc-marque{color:var(--warn)}
.tc.crit{border-top-color:var(--crit); background:var(--crit-soft)}
.tc.crit .tc-marque{color:var(--crit)}
.tc.calme{border-top-color:var(--calme)}
.tc.calme .tc-marque{color:var(--calme)}
.tc.passe{opacity:.5}

/* l'imminence se voit avant qu'on lise la date */
.tc.urgent .tc-ech{color:var(--crit); font-weight:600}
.tc.proche .tc-ech{color:var(--warn); font-weight:600}

@media (max-width:640px){
  .mur{grid-template-columns:1fr; gap:9px}
  .tc{padding:13px 15px 14px}
  .tc-quand strong{font-size:17px}
}

/* le récapitulatif des engagements : un fait par ligne, pas un paragraphe */
.engagements{
  border:1px solid var(--rule); border-radius:4px; background:var(--card);
  box-shadow:var(--ombre); padding:14px 16px;
}
.engagements dl{margin:0; display:flex; flex-direction:column; gap:0}
.engagements dl > div{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--rule2);
}
.engagements dl > div:last-child{border-bottom:0}
.engagements dt{font-size:13px; color:var(--ink3)}
.engagements dd{
  margin:0; display:flex; align-items:center; gap:9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13.5px; color:var(--ink);
}
.engagements .eng-reste,.engagements .eng-fait{
  margin:11px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink2);
}
.engagements .eng-reste strong{color:var(--warn)}
.engagements .eng-fait{color:var(--accent)}
.engagements .aide{margin-top:9px; max-width:none}

/* ====================================================================
   L'espace des familles, tenu d'une main.
   ==================================================================== */

body.simple.onglets main{padding-bottom:84px}

/* ---------- barre d'onglets ---------- */
.barre{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--flanc); border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre-o{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 10px; text-decoration:none; position:relative;
  color:var(--ink3); font-size:11.5px; line-height:1;
  /* « Permanences » est long : il se resserre plutôt que de déborder. */
  min-width:0; overflow:hidden; text-align:center; white-space:nowrap;
  text-overflow:ellipsis;
}
@media (max-width:420px){ .barre-o{font-size:10.5px; letter-spacing:-.01em} }
.barre-i{font-size:18px; line-height:0}
.barre-i svg{width:22px; height:22px; display:block}
.barre-o.on{color:var(--accent)}
.barre-o.on::before{
  content:""; position:absolute; top:0; left:22%; right:22%; height:2px;
  background:var(--accent); border-radius:0 0 2px 2px;
}
.barre-o:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.barre-n{
  position:absolute; top:5px; left:calc(50% + 9px);
  background:var(--crit); color:#fff; font-size:10px; font-weight:600;
  min-width:16px; height:16px; border-radius:8px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- le mois ---------- */
.mois{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:5px 6px; margin-bottom:12px;
}
.mois-t{
  flex:1; text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px; letter-spacing:.06em; color:var(--ink);
}
.mois-f{
  width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; text-decoration:none;
  color:var(--accent); font-size:19px; line-height:1;
  border:1px solid var(--rule); background:var(--paper);
}
.mois-f:hover{border-color:var(--accent)}
.mois-f:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-e{
  text-align:center; font-size:11.5px; color:var(--ink3);
  padding-bottom:2px; font-weight:500;
}
.cal-e.we{color:var(--warn)}


.legende{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px;
  font-size:12px; color:var(--ink3);
}
.legende span{display:inline-flex; align-items:center; gap:6px}
.legende i{width:11px; height:11px; border-radius:3px; display:inline-block}


/* ---------- une ligne d'événement ---------- */
.lg{
  display:flex; align-items:stretch; gap:12px;
  background:var(--card); border:1px solid var(--rule);
  border-left:3px solid var(--rule); border-radius:5px;
  padding:11px 13px 11px 11px; margin-bottom:9px; box-shadow:var(--ombre);
}
.lg.bien{border-left-color:var(--accent)}
.lg.warn{border-left-color:var(--warn)}
.lg.crit{border-left-color:var(--crit)}

.bd{
  flex:0 0 auto; width:46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  border:1px solid var(--rule); border-radius:5px; padding:6px 2px;
  background:var(--paper);
}
.bd-j,.bd-m{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink3);
}
.bd-n{font-size:19px; font-weight:600; line-height:1.05; color:var(--ink)}

.lg-c{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center}
.lg-c h3{
  margin:0; font-size:14.5px; font-weight:600; line-height:1.25;
  display:flex; align-items:center; gap:7px;
}
.lg-i{color:var(--calme); font-size:13px}
.lg-d{margin:0; font-size:12.5px; color:var(--ink3); display:flex; align-items:center; gap:6px}

.lg-a{flex:0 0 auto; display:flex; align-items:center}

/* ---------- le contrôle à trois états ---------- */
.te{display:flex; gap:0; border-radius:999px; overflow:hidden;
    border:1px solid var(--rule); background:var(--paper)}
.te-b{
  font:inherit; font-size:15px; line-height:1; cursor:pointer;
  width:40px; height:36px; border:0; background:transparent;
  color:var(--ink3); display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--rule);
}
.te-b:last-child{border-right:0}
.te-b:hover{background:var(--rule2); color:var(--ink)}
.te-b:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.te-b.oui.actif{background:var(--accent); color:var(--sur-accent)}
.te-b.non.actif{background:var(--crit); color:#fff}
.te-b.peut.actif{background:var(--warn); color:#fff}

/* ---------- groupes repliables ---------- */
.grp-l{margin:16px 0 0}
.grp-l > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:4px 0 10px;
}
.grp-l > summary::-webkit-details-marker{display:none}
.grp-p{
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:15.5px;
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:4px 13px;
}
.grp-n{
  background:var(--rule2); color:var(--ink2); font-size:11px; font-weight:600;
  min-width:19px; height:19px; border-radius:10px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
}
.grp-f{flex:1; height:1px; background:var(--rule)}
.grp-l > summary::after{
  content:"⌄"; color:var(--ink3); font-size:15px; line-height:1; transform:translateY(-3px);
}
.grp-l[open] > summary::after{transform:rotate(180deg)}

/* ---------- segments de filtre ---------- */
.seg{
  display:inline-flex; background:var(--card); border:1px solid var(--rule);
  border-radius:999px; padding:3px; gap:3px; margin-bottom:4px;
}
.seg-b{
  padding:7px 15px; border-radius:999px; text-decoration:none;
  font-size:13.5px; color:var(--ink2); display:inline-flex; align-items:center; gap:7px;
}
.seg-b.actif{background:var(--accent); color:var(--sur-accent); font-weight:500}
.seg-b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.seg-n{
  background:var(--warn); color:#fff; font-size:10.5px; font-weight:600;
  min-width:17px; height:17px; border-radius:9px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}
.seg-b.actif .seg-n{background:var(--sur-accent); color:var(--accent)}

@media (max-width:400px){
  .lg{gap:9px; padding:10px 10px 10px 9px}
  .bd{width:42px}
  .te-b{width:36px; height:34px}
  .lg-c h3{font-size:14px}
}


@media (max-width:400px){

}


/* ---------- les compteurs du mois ----------
   Ils reprennent exactement les couleurs des cases : le lien entre le chiffre
   et le calendrier se voit, il n'a pas à être expliqué. Un compteur à zéro
   s'efface — il n'y a rien à y regarder. */
.compteurs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0 10px;
}
.cpt{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:10px 6px 11px; border-radius:5px; text-align:center;
  background:var(--card); border:1px solid var(--rule); border-top:3px solid var(--rule);
}
.cpt b{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:21px;
  font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}
.cpt span{font-size:10.5px; color:var(--ink3); line-height:1.25}

.cpt.mien{border-top-color:var(--accent); background:var(--accent-soft)}
.cpt.mien b{color:var(--accent)}
.cpt.incertain{border-top-color:var(--warn); background:var(--warn-soft)}
.cpt.incertain b{color:var(--warn)}
.cpt.lache{border-top-color:var(--crit); background:var(--crit-soft)}
.cpt.lache b{color:var(--crit)}
.cpt.libre{border-top-color:var(--calme); background:var(--calme-soft)}
.cpt.libre b{color:var(--calme)}

.cpt.zero{background:var(--card); border-top-color:var(--rule); opacity:.5}
.cpt.zero b{color:var(--ink3)}

@media (max-width:420px){
  .compteurs{grid-template-columns:repeat(2,1fr)}
  .cpt b{font-size:20px}
}

/* ---------- le « peut-être » vu du bureau ---------- */
/* Un nom en pointillés suivi d'un « ? » : présent sur le papier, pas encore sûr.
   La forme porte l'information autant que la couleur. */
td.cell .qui-liste li.puce.incertain{border:1px dashed var(--warn); color:var(--warn)}
li.puce .doute{
  display:inline-block; margin-left:4px; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600; font-size:11px; line-height:1; padding:1px 4px; border-radius:2px;
  background:var(--warn-soft); color:var(--warn);
}
td.cell.fragile{box-shadow:inset 0 0 0 2px var(--warn)}
td.cell.fragile.auj{box-shadow:inset 0 0 0 2px var(--warn), inset 4px 0 0 var(--accent)}
td.cell .doute-note{display:block; font-size:11.5px; color:var(--warn); margin-top:3px; font-weight:500}
.tc.doute{border-top:3px dashed var(--warn)}
.tc.doute .tc-marque{color:var(--warn)}

/* ---------- saisie rapide des temps de présence ---------- */
table.saisie select{
  font:inherit; font-size:13px; padding:4px 6px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
}
label.coche{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink2); cursor:pointer}
label.coche input{accent-color:var(--accent); width:16px; height:16px}

/* ---------- les week-ends ménage ---------- */
.bouton.petit{min-width:0; padding:2px 8px; font-size:11.5px}
.bouton.discret{border-color:transparent; background:transparent; color:var(--ink3)}
.bouton.discret:hover{color:var(--crit); border-color:var(--crit-soft)}
table.menages tr.mois-sep th{
  text-align:left; padding:14px 10px 6px; background:transparent; border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink3);
}
table.menages tr.vide td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.menages tr.passe td{opacity:.62}
table.menages tr.passe td:nth-child(2){opacity:1}
.men-f{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 0}
.men-a{display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:auto}
.men-placer{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.men-placer select{
  font:inherit; font-size:12.5px; padding:3px 6px; color:var(--ink); max-width:260px;
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
}
details.apercu summary{cursor:pointer; font-size:13px; color:var(--accent); margin:6px 0}
ul.liste-simple{margin:4px 0 0; padding-left:18px; columns:2 260px; column-gap:28px;
  font-size:13px; color:var(--ink2); line-height:1.7}
h3.sous-t{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3); margin:16px 0 8px}

.lg.libre{border-left-color:var(--calme); border-left-style:dashed}

@media (max-width:640px){
  .men-a{margin-left:0}
  .men-placer select{max-width:100%; flex:1 1 100%}
}
.enligne-form input[type=date]{
  font:inherit; font-size:13px; padding:5px 8px; color:var(--ink); color-scheme:light dark;
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
}
form.repartir{margin-top:10px}
form.repartir .actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0; padding:0; border:0}

/* ---------- le planning de la semaine, côté famille ---------- */
.retour-sem{margin:-4px 0 10px; text-align:center; font-size:13px}
.retour-sem a{color:var(--accent)}
.compteurs.trois{grid-template-columns:repeat(3,1fr)}

/* La grille : six colonnes qui tiennent sur 360 px. La couleur dit l'état,
   le chiffre le confirme, le liseré marque les créneaux de la famille. */
.sg{
  display:grid; grid-template-columns:44px repeat(5,1fr); gap:4px;
  margin:4px 0 6px;
}
.sg-e{
  text-align:center; font-size:11px; color:var(--ink3); line-height:1.15;
  padding-bottom:3px; text-transform:capitalize;
}
.sg-e b{display:block; font-size:14px; color:var(--ink); font-weight:600}
.sg-e.auj b{color:var(--accent)}
.sg-h{
  display:flex; align-items:center; justify-content:flex-end; padding-right:4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; color:var(--ink2);
}
.sg-x{
  min-height:44px; border-radius:6px; border:1px solid var(--rule2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  text-decoration:none; color:var(--ink2); background:var(--card);
}
.sg-x b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; font-weight:600;
  font-variant-numeric:tabular-nums}
.sg-x i{font-style:normal; font-size:9.5px; letter-spacing:.02em; line-height:1}
.sg-x.complet{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.sg-x.incomplet{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.sg-x.decouvert{background:var(--crit-soft); color:var(--crit); border-color:transparent}
.sg-x.fermee{background:var(--rule2); color:var(--ink3)}
/* Ma permanence : la case est peinte, pas cerclée. Si en plus il manque
   quelqu'un ce créneau-là, l'état passe en pastille d'angle. */
.sg-x{position:relative}
.sg-x.mien{background:var(--accent); border-color:var(--accent); color:var(--sur-accent);
  box-shadow:none}
.sg-x.mien b{font-weight:700; color:var(--sur-accent)}
.sg-x.mien i{color:var(--sur-accent); font-weight:600; opacity:.9}
.sg-x.mien.incomplet::after,.sg-x.mien.decouvert::after{
  content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%;
}
.sg-x.mien.incomplet::after{background:var(--warn)}
.sg-x.mien.decouvert::after{background:var(--crit)}
/* Sa propre absence ne se peint pas (17/10/2026) : le rouge est reserve au
   creneau que personne ne tient. Un parent absent d'un creneau par ailleurs
   couvert n'a pas a voir sa ligne s'allumer — le mot « absente » suffit. */
.sg-x.lache i{color:var(--crit); font-weight:600}
.sg-x.fragile:not(.mien){box-shadow:inset 0 0 0 1.5px var(--warn)}
.sg-x.passe{opacity:.4}
.sg-x.vide{background:transparent; border:0}
.sg-x:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.sg-leg{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:6px 0 4px}
.sg-leg > span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.sg-k{display:inline-block; width:11px; height:11px; border-radius:3px}
.sg-k.complet{background:var(--accent-soft); border:1px solid var(--accent)}
.sg-k.incomplet{background:var(--warn-soft); border:1px solid var(--warn)}
.sg-k.decouvert{background:var(--crit-soft); border:1px solid var(--crit)}
.sg-k.mien{background:var(--accent); border-color:var(--accent)}

/* Le détail : un jour, ses créneaux, une ligne chacun. */
.pj{margin-top:18px; scroll-margin-top:12px}
.pj h2{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-size:16px; font-weight:600;
}
.pj h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.pj-auj{font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:11px; font-weight:500;
  text-transform:none; color:var(--accent); background:var(--accent-soft);
  padding:2px 7px; border-radius:999px}
.pj.passe{opacity:1}
.pj-passe{font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:11px; font-weight:500;
  text-transform:none; color:var(--ink3); background:var(--sur2);
  padding:2px 7px; border-radius:999px}
.pl{
  display:flex; align-items:center; gap:10px; padding:9px 11px; margin-bottom:6px;
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--rule);
  border-radius:5px;
}
/* La couleur ne tient pas dans un liseré de 3 px : une ligne où il manque
   quelqu'un est peinte, une ligne complète reste blanche. Ce qui appelle une
   action se voit donc sans lire. */
.pl.complet{border-left-color:var(--accent)}
.pl.incomplet{background:var(--warn-soft); border-color:var(--warn-rule, var(--rule));
  border-left-color:var(--warn)}
.pl.incomplet .pl-h,.pl.incomplet .pl-f{color:var(--ink)}
.pl.decouvert{background:var(--crit-soft); border-color:var(--rule);
  border-left-color:var(--crit)}
/* Ce qui me concerne l'emporte sur l'état du créneau : ma permanence en vert,
   mon absence à faire remplacer en rouge. */
.pl.mien{background:var(--accent-soft)}
.pl.lache{background:var(--crit-soft); border-left-color:var(--crit)}
.pl-h{flex:0 0 46px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px;
  font-weight:600; line-height:1.15; color:var(--ink)}
.pl-h small{display:block; font-weight:400; font-size:11px; color:var(--ink3)}
.pl-q{flex:1; min-width:0}
.pl-l{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.pl-n{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:600;
  color:var(--ink3); margin-right:2px}
.pl.complet .pl-n{color:var(--accent)}
.pl.incomplet .pl-n{color:var(--warn)}
.pl.decouvert .pl-n{color:var(--crit)}
.pl-f{font-size:13.5px; color:var(--ink)}
.pl-f + .pl-f::before{content:"· "; color:var(--ink3)}
.pl-f.vous{font-weight:600; color:var(--accent)}
.pl-f.incertain{color:var(--warn)}
.pl-f small{font-size:11px; color:var(--ink3)}
.pl-m{margin:3px 0 0; font-size:12px; color:var(--warn)}
.pl-m.crit{color:var(--crit); font-weight:500}
.pl-a{flex:0 0 auto}
@media (max-width:420px){
  .pl{flex-wrap:wrap}
  .pl-a{flex:1 1 100%; display:flex; justify-content:flex-end}
}

/* ---------- corrections ergonomiques du 19/09 ---------- */
/* Pastille rouge : seulement ce qui demande d'agir (ses propres absences). */
.grp-n.crit{background:var(--crit); color:#fff}

/* Les trois états portent un mot sous le symbole : « ? » seul se lisait « aide ». */
.te{border-radius:10px}
.te-b{width:auto; min-width:62px; height:46px; flex-direction:column; gap:3px; padding:0 6px}
.te-s{font-size:15px; line-height:1}
.te-t{font-size:10.5px; line-height:1; letter-spacing:.01em}
@media (max-width:400px){
  .te-b{min-width:50px; height:44px; padding:0 3px} .te-t{font-size:9.5px}
  .lg-c h3{white-space:nowrap; font-size:13.5px}
}

/* Plus de symbole devant les lignes de détail : l'horaire en titre suffit. */
.lg-c h3:empty{display:none}

/* ---------- choix d'affichage ---------- */
.bandeau{align-items:center}
.bandeau-d{display:flex; align-items:center; gap:12px; min-width:0}
.theme-rapide{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid var(--rule); background:var(--card); color:var(--ink2);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.theme-rapide:hover{border-color:var(--accent); color:var(--accent)}
.theme-rapide:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.theme{
  display:inline-flex; background:var(--card); border:1px solid var(--rule);
  border-radius:999px; padding:3px; gap:2px;
}
.theme button{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px; cursor:pointer;
  border:0; background:transparent; color:var(--ink2); padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed="true"]{background:var(--accent); color:var(--sur-accent); font-weight:500}
.theme button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.theme-ligne{display:grid; gap:8px; justify-items:start}
.pied-flanc{display:grid; gap:6px; padding-bottom:14px}
.pied-t{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.pied-flanc .theme button{font-size:11.5px; padding:5px 9px}

/* ---------- Planning : un seul jour détaillé ---------- */
a.sg-e{text-decoration:none; border-radius:6px; padding-top:3px}
a.sg-e:hover b{color:var(--accent)}
a.sg-e:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
a.sg-e.choisi{background:var(--accent); color:var(--sur-accent)}
a.sg-e.choisi b{color:var(--sur-accent)}
/* Un jour choisi : le reste de la semaine s'efface, la colonne reste nette.
   Un cadre de plus se confondait avec le liseré « vous ». */
.sg.focalise .sg-x:not(.choisi),
.sg.focalise a.sg-e:not(.choisi){opacity:.45; filter:saturate(.55)}
.sg.focalise .sg-h{opacity:.55}
.sg-x.choisi{border-color:transparent}
.sg-x.choisi:not(.complet):not(.incomplet):not(.decouvert):not(.fermee){background:var(--sur2)}
/* La colonne choisie porte la couleur pleine de l'en-tête, jusqu'au détail. */
.sg.focalise .sg-x.choisi{box-shadow:inset 0 0 0 1px var(--rule)}
.sg.focalise .sg-x.choisi.mien{box-shadow:inset 0 0 0 2px var(--accent)}
.sg.focalise .sg-x.choisi.lache{box-shadow:inset 0 0 0 2px var(--crit)}
.pj h2{color:var(--accent)}
.pj h2::before{content:""; width:4px; align-self:stretch; border-radius:2px; background:var(--accent)}
#detail{scroll-margin-top:12px; margin-top:12px}

/* ---------- barre d'onglets bien visible ---------- */
/* Elle se confondait avec le fond de la page : elle prend la couleur de l'appli,
   libellés clairs, onglet actif en blanc sur une pastille. */
:root{--barre-fond:#1C5C38; --barre-texte:#CFE3D6; --barre-actif:#FFFFFF; --barre-pastille:rgba(255,255,255,.18)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--barre-fond:#1F4430; --barre-texte:#A9CDB8; --barre-actif:#FFFFFF; --barre-pastille:rgba(255,255,255,.14)}
}
:root[data-theme="dark"]{--barre-fond:#1F4430; --barre-texte:#A9CDB8; --barre-actif:#FFFFFF; --barre-pastille:rgba(255,255,255,.14)}

.barre{background:var(--barre-fond); border-top:0; box-shadow:0 -3px 12px rgba(0,0,0,.18)}
.barre-o{color:var(--barre-texte); font-weight:500}
.barre-o:hover{color:var(--barre-actif)}
.barre-o .barre-i{padding:3px 16px; border-radius:14px; transition:background .15s}
.barre-o.on{color:var(--barre-actif); font-weight:600}
.barre-o.on .barre-i{background:var(--barre-pastille)}
.barre-o.on::before{background:var(--barre-actif)}
.barre-o:focus-visible{outline:2px solid var(--barre-actif); outline-offset:-3px}
@media (prefers-reduced-motion:reduce){ .barre-o .barre-i{transition:none} }

/* ---------- l'écran simple des familles ---------- */
/* Une seule page, lue de haut en bas : la prochaine permanence en grand, puis
   la suite, puis l'aide demandée, puis le reste replié. */
body.ecran-simple main{max-width:520px; padding-bottom:40px}
.ecran-simple .entete{margin-bottom:14px}
.s-prochaine{
  background:var(--accent); color:var(--sur-accent); border-radius:16px;
  padding:18px 20px 20px; margin-bottom:18px;
}
.s-prochaine p{margin:0}
.s-etiquette{font-size:13px; opacity:.85}
.s-date{font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-size:25px; font-weight:500; margin-top:4px !important; line-height:1.2}
.s-heure{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:19px; margin-top:2px !important}
.s-avec{font-size:14px; opacity:.85; margin-top:6px !important}
.s-prochaine .s-form{margin-top:16px}
.s-prochaine .bouton{
  width:100%; min-height:44px; font-size:15px; border-radius:10px;
  background:transparent; color:var(--sur-accent); border:1.5px solid currentColor;
}
.s-prochaine .bouton:hover{background:rgba(255,255,255,.12); color:var(--sur-accent)}
.s-bloc{margin-bottom:22px}
.s-bloc h2{font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif; font-size:17px; margin:0 0 8px}
.s-liste{border:1px solid var(--rule); border-radius:12px; background:var(--card); overflow:hidden}
.s-ligne{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px 10px 16px; border-bottom:1px solid var(--rule2); font-size:15px;
}
.s-ligne:last-child{border-bottom:0}
/* Un créneau d'ouverture ou de fermeture que personne ne tient : sans lui la
   crèche n'ouvre pas. Un filet à gauche suffit à le distinguer des autres
   trous, sans crier sur toute une liste. */
.s-ligne.ech-vide{border-left:3px solid var(--crit); padding-left:13px}
.s-ligne .bouton{min-height:40px; font-size:14px; padding:6px 14px; border-radius:9px}
.s-sous{display:block; font-size:12.5px; color:var(--ink3); margin-top:2px}

.s-engage{margin:14px 0 0; padding-top:13px; border-top:1px solid var(--rule2);
  font-size:14.5px; line-height:1.5; color:var(--ink2)}
.s-engage b{color:var(--ink); font-weight:600}
.s-engage i{font-style:normal; color:var(--ink3)}
.s-engage span{display:block; margin-top:5px; font-size:12.5px; color:var(--ink3)}

/* Déclarer un congé : un bouton plein sur toute la largeur, pas une ligne
   d'accordéon parmi d'autres. C'est l'action qu'on vient faire dans le Profil. */
.s-declare{margin:0 0 12px}
.s-declare > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px; min-height:46px; padding:8px 18px; border-radius:12px;
  font-size:15px; font-weight:600; color:var(--sur-accent); background:var(--accent)}
.s-declare > summary::-webkit-details-marker{display:none}
.s-declare > summary::after{content:"+"; font-size:19px; line-height:1; transition:transform .15s}
.s-declare[open] > summary::after{transform:rotate(45deg)}
.s-declare .s-deplie{padding:14px 0 0}
.s-conges{margin-top:4px}
@media (prefers-reduced-motion:reduce){ .s-declare > summary::after{transition:none} }

/* Les contacts du bureau : le rôle en premier, l'adresse dessous en plus
   discret. C'est le rôle qu'on cherche, pas l'adresse. */
.s-contacts .s-ligne > div:first-child{display:flex; flex-direction:column; gap:2px; min-width:0}
.s-contacts .s-ligne span{font-size:12.5px; color:var(--ink3);
  overflow-wrap:anywhere; font-weight:400}
.s-contacts .s-h{color:var(--accent); font-size:16px}

/* Le motif d'une absence, saisi en ligne dans le tableau du bureau. Court :
   c'est une etiquette, pas un commentaire. */
.motif-court{width:150px; min-width:0; padding:6px 9px; margin-right:7px;
  border:1px solid var(--rule); border-radius:8px; background:var(--card);
  color:var(--ink); font:inherit; font-size:13px}
.motif-court:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
@media (max-width:760px){ .motif-court{width:100%; margin:0 0 6px} }

.s-aide{font-size:12.5px; color:var(--ink3); margin:6px 0 0}
.s-vide{color:var(--ink2); margin:0}
.s-item{border-bottom:1px solid var(--rule2)}
.s-item:last-child{border-bottom:0}
.s-item > summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:12px 16px; font-size:15px;
}
.s-item > summary::-webkit-details-marker{display:none}
.s-item > summary::after{content:"›"; color:var(--ink3); font-size:18px; transition:transform .15s}
.s-item[open] > summary::after{transform:rotate(90deg)}
.s-h{margin-left:auto; font-size:13.5px; color:var(--ink3); font-family:"IBM Plex Mono",ui-monospace,monospace}
.s-deplie{padding:0 16px 14px}
.s-deplie p{margin:6px 0}
.s-deplie .s-ligne{padding:8px 0}
.s-plus{border:1px solid var(--rule); border-radius:12px; background:var(--card); margin-top:8px}
.s-plus .s-item > summary{font-weight:500}
.s-lien{display:block; padding:13px 16px; font-size:14.5px; color:var(--accent); text-decoration:none; border-top:1px solid var(--rule2)}
.s-conge{display:grid; gap:10px; margin-top:6px}
.s-conge label{display:grid; gap:4px; font-size:13px; color:var(--ink2)}
.s-conge input{font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--rule); border-radius:8px;
  background:var(--paper); color:var(--ink); color-scheme:light dark}
.s-conge .bouton{min-height:44px; font-size:15px; border-radius:10px}
.s-url{width:100%; font:inherit; font-size:12.5px; padding:8px 10px; border:1px solid var(--rule);
  border-radius:8px; background:var(--paper); color:var(--ink2); margin-top:4px}
.s-deplie .bouton.primaire{display:inline-block; min-height:42px; line-height:30px; font-size:14.5px; border-radius:10px; padding:6px 16px}
@media (prefers-reduced-motion:reduce){ .s-item > summary::after{transition:none} }
.s-plus .s-h{font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px}

/* ---------- Accueil · Mois · Semaine · Jour · Profil ---------- */


/* Jour : une carte par créneau, une bande de couleur à gauche. */
.jc{
  display:flex; gap:12px; padding:12px 14px; margin-bottom:10px; border-radius:12px;
  background:var(--card); border:1px solid var(--rule); border-left:6px solid var(--rule);
}
.jc-rouge{border-left-color:var(--crit); background:var(--crit-soft)}
.jc-jaune{border-left-color:var(--warn); background:var(--warn-soft)}
.jc-vert{border-left-color:var(--accent)}
.jc-fermee{opacity:.6}
.jc-moi{box-shadow:inset 0 0 0 2px var(--accent)}
.jc-h{flex:0 0 52px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:15px; font-weight:600; line-height:1.15}
.jc-h small{display:block; font-size:11.5px; font-weight:400; color:var(--ink3)}
.jc-c{flex:1; min-width:0}
.jc-noms{margin:0; font-size:15px; line-height:1.4}
.jc-noms strong{color:var(--accent)}
.jc-n{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--ink3); margin-left:4px}
.jc-i{margin:3px 0 0; font-size:13px; color:var(--ink2)}
.jc-rouge .jc-i{color:var(--crit); font-weight:500}
.jc-jaune .jc-i{color:var(--warn); font-weight:500}
.jc-a{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.jc-a .bouton{min-height:40px; font-size:14px; padding:8px 14px; border-radius:10px; display:inline-flex; align-items:center}

.s-prochaine .s-echanger{background:var(--sur-accent); color:var(--accent); border:0; font-weight:600}
.s-prochaine .s-echanger:hover{color:var(--accent); filter:brightness(.97)}


/* Échanges proposés et reçus */
.ech{padding:12px 14px; border-radius:12px; border:1px solid var(--rule); background:var(--card); margin-bottom:8px}
.ech p{margin:0; font-size:14.5px; line-height:1.5}
.ech-recu{border-color:var(--accent); background:var(--accent-soft)}
.ech-refuse,.ech-caduc,.ech-annule{opacity:.7}
.ech-t{font-size:15px; line-height:1.55; margin:0}
.ech-j{font-size:13px; font-weight:600; color:var(--ink3); margin:14px 0 6px; font-family:"IBM Plex Sans",system-ui,sans-serif}

.jc-vide{color:var(--ink3); font-style:italic}

/* Une ligne de liste qui conduit ailleurs : même dessin, curseur en plus. */
a.s-ligne{color:inherit; text-decoration:none}
a.s-ligne:hover{background:var(--sur2)}

/* Connexion et mot de passe : un formulaire seul au milieu de la page. */
.auth{max-width:22rem}
.auth .champ input{font-size:16px}          /* 16px : l'iPhone ne zoome pas */
.auth-pied{margin-top:22px; text-align:center}

.cal.focalise .cal-e{opacity:.6}

.pj-men{margin:0 0 8px; font-size:13.5px; color:var(--ink2)}

/* ---------- le logo, en haut à gauche ----------
   Un badge discret à côté du nom : sur un bandeau de 56 px, la version
   complète du logo (avec son texte) serait illisible. */
.marque a{display:inline-flex; align-items:center; gap:9px}
.marque .logo{width:30px; height:30px; border-radius:8px; display:block; flex:none}
@media (max-width:380px){ .marque .logo{width:26px; height:26px} }
.logo-auth{display:block; width:72px; height:72px; border-radius:18px; margin:6px 0 14px}

/* Le mot-symbole reprend le lettrage du logo : une grotesque arrondie, en
   minuscules, avec le « de » dans le vert clair du dessin. */
.marque .mot{font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif;
  font-weight:600; letter-spacing:0; line-height:1}
.marque .mot b{font-weight:600; color:var(--logo-vert)}
.bandeau .marque a,.flanc .marque a{letter-spacing:0}

/* ---------- choisir un mois ----------
   Le titre du mois est un « details » : touché, il déplie les mois de l'année
   sous la barre. Sans JavaScript, donc il marche même hors ligne. */
.mois{position:relative}
.choix-mois{flex:1; min-width:0}
.choix-mois > summary{list-style:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:6px; padding:6px 4px; border-radius:999px}
.choix-mois > summary::-webkit-details-marker{display:none}
.choix-mois > summary i{font-style:normal; font-size:10px; color:var(--ink3); transition:transform .15s}
.choix-mois[open] > summary{background:var(--sur2)}
.choix-mois[open] > summary i{transform:rotate(180deg)}
.choix-mois > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cm-grille{
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px;
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.cm{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 2px; border-radius:10px; text-decoration:none; color:var(--ink);
  font-size:13px; line-height:1.15; background:var(--paper); border:1px solid var(--rule2);
}
.cm span{font-size:10.5px; color:var(--ink3); font-family:"IBM Plex Mono",ui-monospace,monospace}
.cm.auj{border-color:var(--ink3)}
.cm.on{background:var(--accent); border-color:var(--accent); color:var(--sur-accent); font-weight:600}
.cm.on span{color:var(--sur-accent); opacity:.8}

/* Les semaines de l'année, par mois. La liste est longue : elle défile, et le
   script fait venir la semaine affichée sous les yeux à l'ouverture. */
.cs-grille{
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:10px;
  max-height:58vh; overflow:auto; overscroll-behavior:contain;
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.cs-mois{
  grid-column:1 / -1; font-size:11px; letter-spacing:.08em; color:var(--ink3);
  font-family:"IBM Plex Mono",ui-monospace,monospace; padding:6px 2px 0;
}
.cs{
  display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:9px 4px; border-radius:10px; text-decoration:none; color:var(--ink);
  font-size:13px; background:var(--paper); border:1px solid var(--rule2);
  scroll-margin:80px;
}
.cs.auj{border-color:var(--ink3)}
.cs.on{background:var(--accent); border-color:var(--accent); color:var(--sur-accent); font-weight:600}
.cs b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  color:var(--ink3); background:var(--sur2); border-radius:5px; padding:1px 4px}
.cs.on b{color:var(--sur-accent); background:rgba(255,255,255,.18)}

/* Les jours du mois, en grille : numéro de semaine, puis lundi → vendredi. */
.cj-choix{
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px);
  display:grid; grid-template-columns:26px repeat(5,1fr); gap:4px; padding:10px;
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.cj-e{font-size:10.5px; color:var(--ink3); text-align:center; padding-bottom:2px}
.cj-s{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; color:var(--ink3);
  display:flex; align-items:center; justify-content:center}
.cj-d{
  display:flex; align-items:center; justify-content:center; min-height:32px;
  border-radius:9px; text-decoration:none; color:var(--ink); font-size:14px;
  background:var(--paper); border:1px solid var(--rule2);
}
.cj-d.auj{border-color:var(--ink3); font-weight:600}
.cj-d.on{background:var(--accent); border-color:var(--accent); color:var(--sur-accent); font-weight:700}
.cj-x{min-height:32px}
.cj-mois{grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px; padding-top:6px}
.cj-mois a{font-size:12.5px; color:var(--accent); text-decoration:none; padding:2px}

@media (max-width:380px){
 }

/* ---------- un seul vert plein par écran ----------
   La carte « prochaine permanence » et le jour choisi portent le vert plein.
   Dans les listes, le bouton principal passe en vert clair : sans cela, trois
   boutons pleins tiraient l'œil plus fort que la seule chose qui compte. */
.s-ligne .bouton.primaire,
.jc-a .bouton.primaire,
.pl-a .bouton.primaire{
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent); box-shadow:none; font-weight:600;
}
.s-ligne .bouton.primaire:hover,
.jc-a .bouton.primaire:hover,
.pl-a .bouton.primaire:hover{background:var(--accent); color:var(--sur-accent)}

/* Un seul geste possible : le bouton prend toute la largeur. */
.s-un{margin-top:16px}
.s-un .bouton{display:block; width:100%; text-align:center; min-height:44px;
  font-size:15px; padding:10px 14px; border-radius:10px; white-space:normal}
.s-deplie.s-un{margin-top:0}


/* L'accueil : le délai à côté de l'étiquette, et des lignes à deux liens. */
.s-etiquette{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.s-delai{font-size:12.5px; font-weight:600; background:rgba(255,255,255,.18);
  color:var(--sur-accent); padding:2px 9px; border-radius:999px; white-space:nowrap}


/* La croix qui range une ligne d'échange terminée. */
.ech{position:relative}
.ech-x{position:absolute; top:6px; right:6px; margin:0}
.ech-croix{
  border:0; background:transparent; color:var(--ink3); font-size:20px; line-height:1;
  width:32px; height:32px; border-radius:50%; cursor:pointer;
}
.ech-croix:hover{background:var(--sur2); color:var(--ink)}
.ech-croix:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ech p{padding-right:30px}


/* Un créneau à pourvoir porte sa couleur, comme dans la grille : orange s’il
   manque du monde, rouge si personne n’ouvre ni ne ferme. */
.s-ligne.incomplet{background:var(--warn-soft)}
.s-ligne.decouvert{background:var(--crit-soft)}


/* ---------- se déconnecter depuis le bandeau ----------
   Elle n'était atteignable qu'au fond de l'onglet Profil. Ici elle tient sous
   le nom de la crèche, alignée à droite comme le reste du bloc, et reste
   discrète : c'est un lien de texte, pas un bouton de plus. */
.bandeau .qui form{margin:0; display:flex; justify-content:flex-end}
.qui-sortie{
  margin-top:3px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--ink3);
  text-decoration:underline; text-underline-offset:2px;
}
.qui-sortie:hover{color:var(--crit)}
.qui-sortie:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
/* Côté bureau, la même déconnexion sous « Espace du bureau ». Elle était au
   fond du flanc, sous l'affichage ; elle est désormais au même endroit que
   côté familles — sous l'identité. Le flanc étant aligné à gauche, le lien
   l'est aussi. */
.flanc .creche form{margin:4px 0 0; display:flex; justify-content:flex-start}


/* ---------- iPhone à encoche (17/10/2026) ----------
   L'appli installée s'affiche sous la barre d'état (black-translucent) : on réserve sa hauteur
   et on peint une bande sombre derrière l'heure, lisible en thème clair comme en sombre. */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top, 0px);
  background:#0E1512; z-index:1000; pointer-events:none;
}
.bandeau{padding-top:calc(14px + env(safe-area-inset-top, 0px))}
.flanc{padding-top:calc(22px + env(safe-area-inset-top, 0px))}
/* La page ne réserve la barre d'état que s'il n'y a pas de bandeau au-dessus (connexion, écran simple) */
body.simple:not(:has(.bandeau)) main{padding-top:calc(26px + env(safe-area-inset-top, 0px))}
@media (max-width:640px){
  .bandeau{padding-top:calc(12px + env(safe-area-inset-top, 0px))}
  body.simple:not(:has(.bandeau)) main{padding-top:calc(20px + env(safe-area-inset-top, 0px))}
}


/* ---------- Mois des familles, version lisible (17/10/2026) ----------
   Des cases neutres, et dans chaque case des étiquettes en mots (classes .et-*),
   les mêmes que dans la légende. */
.cal2{gap:4px}
.c2{display:flex; flex-direction:column; align-items:stretch; gap:3px; min-height:72px; padding:5px 2px 4px;
  border-radius:10px; background:var(--card); border:1px solid var(--rule); color:var(--ink); text-decoration:none; min-width:0}
.c2.we{background:var(--paper)}
.c2-n{align-self:center; font-size:14px; font-weight:700; line-height:22px; min-width:22px; text-align:center; border-radius:11px}
.c2.auj .c2-n{background:var(--accent); color:var(--card)}
.c2.passe{opacity:.45}
.c2.hors{opacity:.25}
.c2.fermee{background:var(--rule2)}
.c2.choisi{outline:2px solid var(--accent); outline-offset:-1px; opacity:1}
.cal2.focalise .c2:not(.choisi){opacity:.5}
.et{display:block; font-size:10.5px; font-weight:700; line-height:1.35; padding:2px 1px; border-radius:6px;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:normal; letter-spacing:-.2px}
.c2 .et-men{white-space:normal; line-height:1.15; padding:2px 0 3px; font-size:9px; letter-spacing:-.4px; text-overflow:clip}
.et-moi{background:var(--accent); color:var(--card)}

.et-urg{background:var(--crit); color:var(--card)}
.et-aide{background:var(--warn-soft); color:var(--warn)}
.et-men{background:var(--calme-soft); color:var(--calme)}
.et-men.mien{background:var(--calme); color:var(--card)}
.et-fermee{background:transparent; color:var(--ink3); font-weight:600}
.leg2{display:grid; gap:7px; margin:14px 0 4px; padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--rule); font-size:13px; color:var(--ink2)}
.leg2 > div{display:flex; align-items:center; gap:10px}
.leg2 .et{flex:none; width:66px; font-size:11px}
.leg2 b{color:var(--ink); font-weight:600}
@media (max-width:400px){ .cal2{gap:3px} .c2{min-height:66px; padding:4px 1px} .et{font-size:10px} }


/* ---------- Onglet Permanences, version lisible (17/10/2026) ---------- */
/* Le basculeur a deux vues : Permanences/Besoins, et depuis la fusion du
   17/10/2026 Semaine/Mois dans l'onglet Planning. */
.vues{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 16px; border-radius:14px; background:var(--card); border:1px solid var(--rule)}
.vues a{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 4px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink2); text-decoration:none; text-align:center}
.vues a.on{background:var(--accent); color:var(--card)}
.vues span{font-size:12px; font-weight:700; padding:0 7px; border-radius:9px; background:var(--rule2); color:var(--ink2)}
.vues a.on span{background:rgba(255,255,255,.25); color:var(--card)}
.vues span.alerte{background:var(--warn); color:var(--card)}
.vues svg{width:17px; height:17px; flex:none}
.pr-bloc{margin-bottom:18px}
.pr-alerte{padding:12px; border-radius:14px; background:var(--crit-soft)}
.pr-alerte h2{color:var(--crit); margin:0 0 8px; font-size:17px}
.pr-mois{font-size:15px; color:var(--ink2); margin:16px 2px 8px; font-weight:600}
.pr-ligne{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border-radius:14px; background:var(--card); border:1px solid var(--rule)}
.pr-ligne.mien{border-left:5px solid var(--accent)}
.pr-date{flex:none; width:46px; display:flex; flex-direction:column; align-items:center; line-height:1.05; font-size:11px; font-weight:700; color:var(--ink3)}
.pr-date b{font-size:22px; color:var(--ink); font-weight:700}
.pr-date span:last-child{color:var(--accent)}
.pr-date.auj{background:var(--accent); border-radius:10px; padding:4px 0; color:var(--card)}
.pr-date.auj b,.pr-date.auj span:last-child{color:var(--card)}
.pr-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; color:var(--ink); text-decoration:none}
.pr-txt b{font-size:16px}
.pr-txt span{font-size:13px; color:var(--ink3)}

.pr-ligne .bouton{flex:none; min-height:40px; padding:6px 12px; border-radius:10px; font-size:14px}
.pr-ligne .s-form{flex:none; margin:0}
.pr-petit{min-width:44px; font-size:18px !important; justify-content:center}
.pr-suite{display:block; text-align:center; padding:12px; font-weight:600; color:var(--accent)}


/* ─────────────── « La crèche cherche » : deux priorités, deux formes
   (25/10/2026)
   Ce qui n'a personne devient une CARTE, groupée sous un titre de jour, avec
   son bouton sur toute la largeur. Le renfort reste une LIGNE, fine et sans
   couleur. La hiérarchie se voit avant même qu'on lise : la forme porte
   l'urgence, la couleur ne fait que la confirmer. */
.cc-portee{margin:-8px 2px 14px; font-size:13px; color:var(--ink3)}
.cc-sect{margin-bottom:20px}
.cc-urg{padding:12px 12px 14px; border-radius:16px; background:var(--crit-soft)}
.cc-titre{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 4px; font-size:17px; color:var(--crit)}
.cc-titre.pale{color:var(--ink)}
.cc-sous{margin:0 0 10px; font-size:13px; line-height:1.45; color:var(--ink2); max-width:56ch}
.cc-nb{font-size:12px; font-weight:700; padding:1px 9px; border-radius:999px;
  background:var(--crit); color:var(--card); font-variant-numeric:tabular-nums}
.cc-nb.pale{background:var(--rule2); color:var(--ink2)}

/* Le titre de jour : la date une fois, et le délai au bout de la ligne. */
.cc-jour{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:16px 2px 8px; font-size:14px; font-weight:700; color:var(--crit)}
.cc-jour:first-of-type{margin-top:2px}
.cc-delai{font-size:12px; font-weight:600; color:var(--ink3); white-space:nowrap}

/* auto-FIT, pas auto-fill : les colonnes vides s'effacent au lieu d'être
   réservées. Un jour qui n'a qu'un créneau occupe donc toute la largeur,
   deux créneaux se partagent la ligne (25/10/2026). */
.cc-grille{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cc-carte{display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:12px; border-radius:14px; background:var(--card);
  border:1px solid var(--rule); border-left:5px solid var(--crit)}
.cc-h{margin:0; font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
/* Le rouge pâle, en contour : il manque quelqu'un sur ce créneau. */
.cc-etat{margin:0; font-size:12px; font-weight:700; padding:2px 9px; border-radius:8px;
  background:var(--crit-soft); color:var(--crit); box-shadow:inset 0 0 0 1px currentColor}
.cc-carte:not(.borne){border-left-color:var(--crit-soft)}
/* Le rouge plein : sans personne, la crèche n'ouvre ni ne ferme. */
.cc-carte.borne .cc-etat{background:var(--crit); color:var(--card); box-shadow:none}

.cc-carte .s-form{margin:4px 0 0; width:100%}
.cc-carte .bouton{width:100%; min-height:42px; border-radius:11px; font-size:15px}
.cc-attend{margin:4px 0 0; width:100%; font-size:12px; line-height:1.4; color:var(--ink3);
  border-top:1px dashed var(--rule); padding-top:7px}

/* Le renfort : une ligne, le bouton à droite, le « avec qui » dessous. */
.cc-rs{border-top:1px solid var(--rule2); max-width:680px}
.cc-r{display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px;
  padding:9px 2px; border-bottom:1px solid var(--rule2)}
.cc-rd{flex:none; width:74px; font-size:12px; font-weight:700; color:var(--ink3)}
.cc-rh{flex:none; font-size:14.5px; font-weight:600; color:var(--ink2); font-variant-numeric:tabular-nums}
.cc-r .s-form{flex:none; margin:0 0 0 auto}
.cc-r .cc-rx{flex:none; margin-left:auto; font-size:11px; color:var(--ink3);
  border:1px solid var(--rule); border-radius:999px; padding:2px 9px; white-space:nowrap}
.cc-ra{min-height:34px; padding:5px 13px; border-radius:9px; font-size:13px}
.cc-rq{flex-basis:100%; font-size:12px; color:var(--ink3); padding-left:84px; margin-top:-1px}

.cc-rien{padding:14px 16px; border-radius:16px; background:var(--accent-soft)}
.cc-rien p{margin:0; font-size:15px; line-height:1.5; color:var(--ink2)}

.vues span.urgence{background:var(--crit); color:var(--card)}

/* ---------- la page qui montre une pièce ----------
   Le document s'ouvrait en pleine page, sans retour : dans l'application
   installée il n'y avait pas même un onglet à fermer (25/10/2026). Il est
   maintenant posé dans une page, avec un retour en haut. */
main.piece{max-width:840px; margin:0 auto; padding:18px 16px 40px}
.piece-barre{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px}
.piece-barre .bouton{min-height:42px; padding:8px 16px; border-radius:11px; font-size:15px}
.piece-t{font-size:19px; margin:0 0 14px}
.piece-img{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--rule); background:var(--card)}
.piece-pdf{display:block; width:100%; height:78vh; border-radius:12px;
  border:1px solid var(--rule); background:var(--card)}

/* Dans le suivi du bureau : voir la pièce, et effacer la ligne. */
.jx-actes{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.jx-actes .enligne{margin:0}

/* Dans l'historique du Profil : voir la pièce, ou la retirer. */
.pf-actes{display:flex; align-items:center; gap:10px; flex:none}
.pf-actes .s-form{margin:0}
.pf-retirer{min-height:32px; padding:4px 11px; border-radius:9px; font-size:12.5px;
  color:var(--crit); border-color:var(--rule)}
.pf-retirer:hover{background:var(--crit); color:var(--card); border-color:var(--crit)}

/* ---------- le dernier recours, en tête de l'écran d'échange ----------
   Il était replié tout en bas : une famille qui n'avait rien trouvé ne le
   voyait pas. Il est maintenant le premier bloc — encadré, en retrait de ton,
   et il demande une confirmation avant d'enregistrer. On le voit, on ne tombe
   pas dessus par mégarde. */
.ech-recours{padding:14px; border-radius:14px; border:1px solid var(--rule);
  background:var(--card)}
.ech-recours h2{margin:0 0 6px}
.ech-r-t{margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--ink2); max-width:58ch}
.ech-r-b{width:100%; justify-content:center; min-height:44px; border-color:var(--crit); color:var(--crit)}
.ech-r-b:hover{background:var(--crit); color:var(--card); border-color:var(--crit)}

/* ---------- le Profil, refondu le 25/10/2026 ----------
   Un seul chiffre en haut : les permanences assurées EN PLUS du contrat. La
   jauge « 8 sur 46 » disait surtout ce qui restait à faire ; celui-ci dit ce
   qui a été donné. Le reste de l'écran suit l'ordre des questions qu'on se
   pose : mon contrat, mes congés, mes documents, puis les réglages. */
/* Le compteur : une ligne, pas une affiche. Le chiffre reste le premier mot
   de l'écran, mais il ne mange plus le tiers du téléphone. */
.pf-compteur{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  padding:12px 14px; border-radius:14px; background:var(--accent-soft)}
.pf-compteur .pf-l{flex:1; min-width:0}
.pf-n{flex:none; margin:0; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:30px; font-weight:600; line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums}
.pf-l{margin:0; font-size:13.5px; line-height:1.4; color:var(--ink2)}
.pf-l b{color:var(--accent)}
.pf-suite{flex:none; margin:0 0 0 auto; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--card); border-radius:999px; padding:3px 9px; white-space:nowrap}
.pf-compteur .s-aide{flex-basis:100%; margin:2px 0 0}

/* Les week-ends ménage : des lignes fines, sans cadre de carte. La date à
   gauche, l'état à droite — on les lit d'un coup d'œil. */
.pf-men{margin-top:12px}
.pf-men-t{margin:16px 0 4px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink3)}
.pf-men .s-item{margin-top:10px}
.pf-men .s-liste{background:transparent; border:0; border-radius:0}
.pf-men .s-ligne{padding:7px 2px; border-bottom:1px solid var(--rule2)}
.pf-men .s-ligne:last-child{border-bottom:0}
.pf-men .s-ligne > div:first-child{display:flex; flex:1; flex-direction:row;
  align-items:baseline; gap:10px; min-width:0}
.pf-men .s-ligne span{margin-left:auto; font-size:12px; color:var(--ink3); white-space:nowrap}
.pf-men .s-ligne span.fait{color:var(--accent)}
/* .champ est en display:flex : sans cette ligne, l'attribut « hidden » du
   champ « Précisez le motif » ne cache rien du tout. */
.champ[hidden]{display:none}
.pf-doc{display:flex; flex-direction:column; gap:14px; align-items:stretch; margin-top:14px}
/* Le même bouton que « Déclarer un congé » : deux actions de même nature
   ne doivent pas avoir deux allures (25/10/2026). */
.pf-doc .bouton{width:100%; min-width:0; min-height:46px; padding:8px 18px;
  border-radius:12px; font-size:15px; font-weight:600; white-space:normal}

/* Les sections du Profil, séparées pour de bon. Un filet les détache, et un
   trait vert devant le titre dit où chacune commence — le même repère que
   les blocs du bureau. */
.pf-sect{margin-top:26px; padding-top:20px; border-top:1px solid var(--rule)}
/* Le chapeau d'une section : il court sur toute la colonne. Une mesure de
   58 caractères, confortable pour un article, laissait ici un vide à droite
   que l'œil lisait comme un défaut (25/10/2026). */
.pf-intro{margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--ink2)}
.pf-intro strong{color:var(--ink)}
.pf-sect > h2{display:flex; align-items:center; gap:9px; font-size:18px; margin:0 0 12px}
.pf-sect > h2::before{content:""; flex:none; width:4px; height:1em;
  border-radius:2px; background:var(--accent)}
/* Deux lignes par entrée : la date, puis l'état en dessous. Sans cela le
   « fait » vient se coller à la fin de la date. */
.pf-liste .s-ligne > div:first-child{display:flex; flex-direction:column; gap:2px; min-width:0}
.pf-liste .s-ligne span{font-size:12.5px; color:var(--ink3)}
.pf-liste .s-h a{color:var(--accent)}

/* ---------- Onglet Bricolage (17/10/2026) ----------
   Les petits travaux de la creche. Une carte par ticket, deux photos :
   l'avant dispense d'expliquer, l'apres dispense d'aller verifier. */
.br-liste{display:flex; flex-direction:column; gap:12px; margin:0 0 18px}
.br-carte{background:var(--card); border:1px solid var(--rule); border-radius:16px;
  padding:14px; box-shadow:var(--ombre); display:flex; flex-direction:column; gap:12px}
.br-carte.br-close{background:var(--sur2); border-style:dashed; box-shadow:none}
.br-txt{display:flex; flex-direction:column; gap:6px; min-width:0}
.br-txt h3{margin:0; font-family:"Fredoka","IBM Plex Sans",system-ui,sans-serif;
  font-size:17px; font-weight:600; line-height:1.25; text-wrap:balance}
.br-txt p{margin:0; font-size:14.5px; color:var(--ink2)}
.br-materiel{font-size:13.5px !important; color:var(--ink3) !important}
.br-pied{font-size:12.5px !important; color:var(--ink3) !important}

.br-chip{align-self:flex-start; font-style:normal; font-size:12px; font-weight:700;
  padding:2px 9px; border-radius:9px; background:var(--rule2); color:var(--ink2)}
.br-chip.libre{background:var(--warn-soft); color:var(--warn)}
.br-chip.prise{background:var(--calme-soft); color:var(--calme)}
.br-chip.faite{background:var(--accent-soft); color:var(--accent)}
.br-chip.close{background:var(--rule2); color:var(--done)}

/* Les vignettes. Un rapport fixe evite que la carte saute d'une hauteur a
   l'autre selon qu'on a pris la photo debout ou couche. */
.br-photos{display:flex; gap:10px; flex-wrap:wrap}
.br-photo{flex:1 1 0; min-width:0; max-width:170px; text-decoration:none;
  display:flex; flex-direction:column; gap:3px}
.br-photo img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:11px;
  background:var(--sur2); border:1px solid var(--rule); display:block}
.br-photo i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--ink3);
  letter-spacing:.03em; text-transform:uppercase}
.br-photo:hover img{border-color:var(--accent)}

.br-act{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.br-act form{margin:0}
.br-lien{background:none; border:0; padding:4px 0; font:inherit; font-size:13.5px;
  color:var(--ink3); text-decoration:underline; cursor:pointer}
.br-lien:hover{color:var(--crit)}

/* « J'ai terminé » : le champ photo se deplie dans la carte, sans changer d'ecran. */
.br-fin{flex:none}
.br-fin > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:6px; min-height:42px; padding:6px 16px; border-radius:10px; font-size:14.5px;
  font-weight:600; color:var(--sur-accent); background:var(--accent)}
.br-fin > summary::-webkit-details-marker{display:none}
.br-fin > summary::after{content:"›"; font-size:17px; transition:transform .15s}
.br-fin[open] > summary::after{transform:rotate(90deg)}
.br-fin[open]{display:block; width:100%}
.br-fin .br-form{margin-top:12px}

/* « Modifier » : discret, parce qu'on corrige rarement. Le bouton n'est pas
   plein comme « Je le prends » — il ne doit pas concurrencer l'action utile. */
.br-mod{flex:none}
.br-mod > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:6px; min-height:42px; padding:6px 14px; border-radius:10px; font-size:14px;
  font-weight:600; color:var(--ink2); border:1px solid var(--rule); background:var(--card)}
.br-mod > summary::-webkit-details-marker{display:none}
.br-mod > summary:hover{border-color:var(--accent); color:var(--accent)}
.br-mod[open]{display:block; width:100%}
.br-mod .br-form{margin-top:12px; padding:0}
.br-supp{margin:4px 16px 16px; padding:12px; border-radius:12px;
  background:var(--crit-soft); border:1px solid var(--crit-soft)}
.br-supp p{margin:0 0 10px; font-size:13px; color:var(--ink2)}
.br-supp .bouton.danger{background:var(--card)}
.br-bureau .br-supp{margin:4px 0 0}

.br-oter{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink2);
  padding:9px 11px; border-radius:10px; background:var(--crit-soft); cursor:pointer}
.br-oter input{accent-color:var(--crit); width:17px; height:17px; flex:none}

/* Le formulaire de signalement, replie par defaut : on arrive sur le tableau,
   pas sur un formulaire vide. */
.br-ouvrir{background:var(--card); border:1px solid var(--rule); border-radius:16px;
  margin:0 0 18px; box-shadow:var(--ombre)}
.br-ouvrir > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:10px; padding:15px 16px; font-weight:600; font-size:15.5px}
.br-ouvrir > summary::-webkit-details-marker{display:none}
.br-ouvrir > summary::before{content:"+"; flex:none; width:24px; height:24px;
  display:grid; place-items:center; border-radius:8px; font-size:19px; line-height:1;
  font-weight:600; background:var(--accent-soft); color:var(--accent);
  transition:transform .15s}
.br-ouvrir[open] > summary::before{transform:rotate(45deg)}
.br-form{display:flex; flex-direction:column; gap:14px; padding:0 16px 16px}
.br-form .bouton.primaire{align-self:flex-start; min-height:44px}
.br-regle{margin:0; font-size:13px; color:var(--ink2); background:var(--warn-soft);
  border-radius:10px; padding:9px 11px}
.br-regle strong{color:var(--warn)}

.br-fichier input[type=file]{padding:8px 0}
.br-apercu{max-width:190px; aspect-ratio:4/3; object-fit:cover; border-radius:11px;
  border:1px solid var(--rule); margin-top:4px}
.br-etat{margin:4px 0 0; font-size:12.5px; color:var(--ink3)}
.br-etat.mauvais{color:var(--crit)}

/* La photo en grand, par-dessus la page. Un nouvel onglet laissait le parent
   sans retour sur telephone ; ici la croix est toujours a la meme place, et le
   fond se touche pour refermer. */
.br-loupe{position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  padding:calc(env(safe-area-inset-top, 0px) + 56px) 16px
          calc(env(safe-area-inset-bottom, 0px) + 24px);
  background:rgba(8,13,10,.92); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.br-loupe[hidden]{display:none}
.br-loupe img{max-width:100%; max-height:100%; object-fit:contain; border-radius:12px}
.br-loupe-l{margin:0; font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#C8D4CD}
.br-loupe-x{position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); right:12px;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);
  color:#fff; font-size:19px; line-height:1; cursor:pointer}
.br-loupe-x:hover{background:rgba(255,255,255,.2)}
.br-loupe-x:focus-visible{outline:2px solid #fff; outline-offset:2px}
body.br-fige{overflow:hidden}

.br-rien{margin:0 0 18px; padding:22px 16px; text-align:center; font-size:15px;
  color:var(--ink2); background:var(--card); border:1px dashed var(--rule);
  border-radius:16px}

.br-vieux{border-top:1px solid var(--rule2); padding-top:6px}
.br-vieux > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:10px; padding:12px 4px; font-weight:600; color:var(--ink2)}
.br-vieux > summary::-webkit-details-marker{display:none}
.br-vieux > summary::after{content:"›"; margin-left:auto; color:var(--ink3);
  font-size:18px; transition:transform .15s}
.br-vieux[open] > summary::after{transform:rotate(90deg)}
.br-n{font-size:13px; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--ink3)}

/* Cote bureau, l'ecran est large : le texte, les photos et les actions tiennent
   sur une ligne, et la liste se parcourt sans defiler trois fois par ticket. */
.br-bureau .br-carte{flex-direction:row; align-items:flex-start; gap:16px}
.br-bureau .br-txt{flex:1 1 320px}
.br-bureau .br-photos{flex:none}
.br-bureau .br-photo{max-width:132px}
.br-bureau .br-act{flex:none; flex-direction:column; align-items:stretch; gap:8px; min-width:150px}
.br-bureau .br-mod > summary{justify-content:center}
.br-bureau .br-mod[open]{width:auto}
.br-bureau .br-act .bouton{width:100%; justify-content:center}
@media (max-width:860px){
  .br-bureau .br-carte{flex-direction:column}
  .br-bureau .br-act{flex-direction:row; align-items:center}
  .br-bureau .br-act .bouton{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .br-fin > summary::after,.br-vieux > summary::after,
  .br-ouvrir > summary::before{transition:none}
}

/* ───────────────────────────────── l'image de la semaine, pour le groupe
   Le panneau reste replié : on ne dessine qu'à l'ouverture, et l'aperçu
   ne vole pas la vedette à la grille, qui reste l'outil de travail. */
.imgw{margin:18px 0 0;background:var(--card);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden}
.imgw > summary{display:flex;align-items:baseline;gap:12px;justify-content:space-between;
  padding:14px 18px;cursor:pointer;font-weight:600;list-style:none}
.imgw > summary::-webkit-details-marker{display:none}
.imgw > summary::after{content:"▾";margin-left:auto;color:var(--ink3);font-size:.9em}
.imgw[open] > summary::after{content:"▴"}
.imgw > summary:hover{background:var(--sur2)}
.imgw-h{font-weight:400;font-size:.88rem;color:var(--ink3)}
.imgw-corps{padding:0 18px 18px;border-top:1px solid var(--rule2)}
.imgw-corps .aide{margin:12px 0 0}
.imgw-apercu{margin:14px 0 0;padding:10px;background:var(--sur2);border-radius:12px;
  max-height:52vh;overflow:auto}
.imgw-apercu img{display:block;width:100%;height:auto;border-radius:8px;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.imgw-apercu img:not([src]){display:none}
.imgw .actions{margin-top:14px}
/* .bouton pose un display:inline-flex, plus fort que le display:none par
   defaut de [hidden] : sans cette ligne, « Partager » resterait visible sur
   un ordinateur, ou il ne mene nulle part. */
.imgw [hidden]{display:none !important}

/* ═══════════════════════════════════════ tableau de bord du bureau
   Des tuiles que le bureau range comme il veut. Densité assumée : ce qu'on
   vient chercher le lundi matin doit tenir sur un écran. */
.tb-cles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:820px){.tb-cles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tb-cle{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.tb-cle b{display:block;font-size:1.9rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.tb-cle span{display:block;margin-top:6px;font-size:.86rem}
.tb-cle em{display:block;font-style:normal;font-size:.76rem;color:var(--ink3);margin-top:2px}
.tb-cle.crit b{color:var(--crit)} .tb-cle.warn b{color:var(--warn)} .tb-cle.ok b{color:var(--accent)}

.tb-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:980px){.tb-grille{grid-template-columns:1fr}}
.tb-grille.on-range .tb-tuile{transition:transform .18s ease}
.tb-tuile{grid-column:span 1;background:var(--card);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;min-width:0}
.tb-tuile.large{grid-column:span 2}
@media (max-width:980px){.tb-tuile.large{grid-column:span 1}}
.tb-tuile.en-vol{opacity:.4;outline:2px dashed var(--accent);outline-offset:2px}
.tb-tuile.vient-de-bouger{animation:tb-pose .6s ease}
@keyframes tb-pose{from{box-shadow:0 0 0 3px var(--accent-soft)}to{box-shadow:none}}

.tb-tete{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--rule2);background:var(--sur2)}
.tb-tete h2{font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0}
.tb-sous{font-size:.76rem;color:var(--ink3);margin-left:auto;white-space:nowrap}
.tb-poignee{width:12px;height:16px;flex:none;cursor:grab;
  background-image:radial-gradient(circle,var(--ink3) 1.2px,transparent 1.3px);
  background-size:5px 5px;opacity:.55}
.tb-poignee:active{cursor:grabbing}
.tb-ranger{display:flex;gap:3px;flex:none}
.tb-fleche{width:24px;height:24px;border:1px solid var(--rule);background:var(--card);
  color:var(--ink2);border-radius:6px;cursor:pointer;font-size:.8rem;line-height:1;padding:0}
.tb-fleche:hover{border-color:var(--accent);color:var(--accent)}
.tb-corps{padding:14px}
.tb-corps.sans-marge{padding:0}
.tb-rien{padding:18px 14px;color:var(--ink3);font-size:.88rem}
.tb-note{margin-top:14px;font-size:.8rem;color:var(--ink3)}

/* ---- le planning du jour, en barres */
.tb-axe{position:relative;height:16px;margin:0 0 6px 96px;border-bottom:1px solid var(--rule2)}
.tb-axe span{position:absolute;transform:translateX(-50%);font-size:.66rem;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.tb-barres{display:grid;gap:5px}
.tb-ligne{display:grid;grid-template-columns:92px 1fr;gap:4px;align-items:center}
.tb-qui{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-qui.vide{color:var(--crit)}
.tb-piste{position:relative;height:22px;background:var(--sur2);border-radius:5px}
.tb-barre{position:absolute;top:2px;bottom:2px;border-radius:4px;background:var(--accent);
  color:var(--sur-accent);font-size:.64rem;font-style:normal;display:flex;align-items:center;
  justify-content:center;overflow:hidden;white-space:nowrap}
.tb-barre.creux{background:var(--warn)}
.tb-barre.manquant{background:repeating-linear-gradient(45deg,var(--crit-soft),
  var(--crit-soft) 5px,var(--card) 5px,var(--card) 10px);
  border:1px dashed var(--crit);color:var(--crit)}

/* ---- la capacité des sept jours */
.tb-cap{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:3px}
.tb-cap-tete{font-size:.66rem;color:var(--ink3);text-align:center;padding-bottom:3px;
  text-transform:uppercase;letter-spacing:.05em}
.tb-cap-tete i{display:block;font-style:normal;font-size:.76rem;color:var(--ink2)}
.tb-cap-h{font-size:.68rem;color:var(--ink2);display:flex;align-items:center;
  padding-right:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-case{display:grid;place-items:center;height:30px;border-radius:5px;font-size:.66rem;
  text-decoration:none;font-variant-numeric:tabular-nums;border:1px solid transparent}
.tb-case.ok{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}
.tb-case.moyen{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft)}
.tb-case.crit{background:var(--crit-soft);color:var(--crit);border-color:var(--crit-soft)}
.tb-case.fermee{background:var(--sur2)}
.tb-case.rien{background:transparent}
a.tb-case:hover{border-color:currentColor}
.tb-legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.72rem;
  color:var(--ink3);align-items:center}
.tb-legende span{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:4px}
.tb-legende span.ok{background:var(--accent-soft)} .tb-legende span.moyen{background:var(--warn-soft)}
.tb-legende span.crit{background:var(--crit-soft)} .tb-legende span.fermee{background:var(--sur2)}

/* ---- le suivi par famille */
.tb-table{width:100%;border-collapse:collapse;font-size:.86rem}
.tb-table th{text-align:left;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--rule)}
.tb-table td{padding:8px 12px;border-bottom:1px solid var(--rule2)}
.tb-table tr:last-child td{border-bottom:0}
.tb-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-table th.n,.tb-table th.p{text-align:right}
.tb-table .n.fini{color:var(--accent)}
.tb-sur{color:var(--ink3);font-size:.78rem}
.tb-plus{font-style:normal;color:var(--accent);font-size:.72rem;margin-left:4px}
/* Un « +n » qui n'est pas une bonne nouvelle — des congés posés, par exemple
   — se dit en gris : le vert de l'accent voudrait dire « tant mieux ». */
.tb-plus.calme{color:var(--ink3)}
/* La ligne d'ensemble se détache du corps du tableau par un filet franc. */
.tb-table tfoot td{border-top:2px solid var(--rule);border-bottom:0;padding-top:10px}
.tb-table .p{width:132px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.tb-jauge{flex:1;height:5px;border-radius:3px;background:var(--sur2);overflow:hidden;min-width:40px}
.tb-jauge i{display:block;height:100%;background:var(--accent);border-radius:3px}
.tb-table .p b{font-size:.76rem;font-variant-numeric:tabular-nums;color:var(--ink2);
  min-width:38px;text-align:right}

/* ---- ce qui a bougé */
.tb-flux{list-style:none;margin:0;padding:0}
.tb-flux li{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--rule2);align-items:start}
.tb-flux li:last-child{border-bottom:0}
.tb-pastille{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ink3)}
.tb-pastille.ok{background:var(--accent)} .tb-pastille.crit{background:var(--crit)}
.tb-flux-t{font-size:.86rem;min-width:0}
.tb-flux-t em{display:block;font-style:normal;font-size:.76rem;color:var(--ink3);margin-top:2px}

/* ---- le justificatif d'absence, côté famille */
.pr-ligne-bloc{display:block}
.pr-justif{margin:-4px 0 10px;border:1px solid var(--rule);border-radius:12px;
  background:var(--card);overflow:hidden}
.pr-justif > summary{cursor:pointer;padding:11px 14px;font-size:.9rem;font-weight:600;
  list-style:none;color:var(--accent)}
.pr-justif > summary::-webkit-details-marker{display:none}
.pr-justif > summary::before{content:"+ ";font-weight:400}
.pr-justif[open] > summary::before{content:"− "}
.pr-justif-c{padding:0 14px 14px;border-top:1px solid var(--rule2)}
.pr-justif-c .s-aide{margin:12px 0}
.pr-justif-nom{display:block;margin-top:7px;font-size:.82rem;color:var(--ink3)}
.pr-justif-nom.erreur{color:var(--crit)}
.pr-justif-ok{margin:-4px 0 10px;padding:10px 14px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);font-size:.86rem;font-weight:500}
.pr-justif-ok a{color:inherit}
/* ---- et côté bureau */
.justifie{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;
  color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:999px;
  text-decoration:none;white-space:nowrap}
.justifie:hover{text-decoration:underline}
.non-justifie{font-size:.74rem;color:var(--ink3)}
.justifie.pale{background:var(--sur2);color:var(--ink3)}
.pr-justif-ok.pale{background:var(--sur2);color:var(--ink2)}