/* =====================================================================
   base.css — Réinitialisation, mise en page générale, en-tête, bouton +.
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom: calc(96px + var(--safe-bottom)); /* place pour le bouton + */
}
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }

/* ---------- Écran de connexion (accès 100 % protégé) ----------
   Tant que le mot de passe n'est pas donné, le calendrier n'est ni affiché
   ni chargé (le serveur refuse les données). body.is-locked masque tout. */
body.is-locked > .appbar,
body.is-locked > .page,
body.is-locked > .footer,
body.is-locked > .fab{ display:none !important; }
body.is-locked{ padding-bottom:0; }

.gate{
  position:fixed; inset:0; z-index:100; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(120% 90% at 50% 0%, #17784F 0%, #106143 45%, #0A4531 100%);
}
.gate[hidden]{ display:none; }
.gate__card{
  width:100%; max-width:380px; background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-3);
  padding:26px 22px 20px; text-align:center;
}
.gate__logo{ display:inline-grid; place-items:center; margin-bottom:10px; }
.gate__brand{ font-size:24px; font-weight:900; letter-spacing:-.4px; color:var(--primary); }
.gate__sub{ font-size:13px; color:var(--muted); margin-bottom:20px; }
.gate__card .field{ text-align:left; margin-bottom:8px; }
.gate__msg{ min-height:18px; font-size:12.5px; font-weight:700; color:var(--danger-dark); margin-bottom:8px; }
.gate__hint{ font-size:11.5px; color:var(--muted); margin-top:14px; line-height:1.7; }
.gate__hint a{ color:var(--muted); text-decoration:underline; }
.gate__hint a:hover{ color:var(--primary); }

/* ---------- Barre d'application (en haut, collante) ---------- */
.appbar{
  position:sticky; top:0; z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding: calc(10px + var(--safe-top)) 14px 10px;
  box-shadow:var(--shadow-1);
}
/* Fin liseré vert → vert-jaune : rappel de la charte RessourSée */
.appbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--primary) 0%, #189360 55%, var(--accent) 100%);
}
.appbar__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:var(--maxw); margin:0 auto; }
.appbar__title{ display:flex; align-items:center; gap:10px; min-width:0; }
.appbar__titletext{ min-width:0; }
.appbar__logo{ font-size:26px; line-height:1; display:inline-grid; place-items:center; flex:none; }
.appbar__logo svg{ display:block; }
.appbar h1{ font-size:17px; font-weight:800; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appbar__date{ font-size:12.5px; color:var(--muted); text-transform:capitalize; }
.appbar__actions{ display:flex; align-items:center; gap:8px; flex:none; }

.btn-icon{
  width:var(--tap); height:var(--tap); border-radius:12px; border:1px solid var(--line);
  background:var(--surface); font-size:18px; cursor:pointer; display:grid; place-items:center;
}
.btn-icon:active{ transform:scale(.96); }

.btn-alert{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  height:var(--tap); padding:0 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600;
}
.btn-alert:active{ transform:scale(.97); }
.btn-alert .badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:var(--primary); color:#fff; border-radius:999px; font-size:11px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--surface);
}
@media (max-width:520px){ .btn-alert__label{ display:none; } }

/* ---------- Légende des couleurs ---------- */
.legend{ display:flex; gap:14px 16px; align-items:center; flex-wrap:wrap; margin:0 0 16px; }
.legend__chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.legend__dot{ width:12px; height:12px; border-radius:4px; }

/* ---------- Page & sections ---------- */
.page{ max-width:var(--maxw); margin:0 auto; padding:14px; }
.section{ margin-bottom:26px; }
.section__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.btn-ghost.btnsm{ height:36px; padding:0 12px; font-size:13px; }
.section__title{ font-size:15px; font-weight:700; }
.section__hint{ font-size:12px; color:var(--muted); text-align:right; }
.center{ display:flex; justify-content:center; margin-top:14px; }

/* Actions de l'en-tête « Vue annuelle » : bouton de filtre + flèches */
.yearhead-actions{ display:flex; align-items:center; gap:8px; }
/* Flèches de navigation de la vue annuelle (‹ ›) */
.yearnav{ display:flex; gap:8px; align-self:center; }
.yearnav__btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.yearnav__btn:active{ transform:scale(.94); }

.btn-ghost{
  height:var(--tap); padding:0 16px; border-radius:12px; cursor:pointer;
  border:1px dashed var(--line-strong); background:transparent; color:var(--muted);
  font-size:13.5px; font-weight:600;
}
.btn-ghost:active{ transform:scale(.98); }

/* ---------- Bouton + (flottant) ---------- */
.fab{
  position:fixed; right:16px; bottom: calc(24px + var(--safe-bottom)); z-index:35;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--primary); color:#fff; font-size:30px; line-height:1;
  box-shadow:var(--shadow-2); display:grid; place-items:center;
}
.fab:active{ transform:scale(.94); }
/* Sur mobile, on REMONTE le bouton + : il pouvait être masqué par la barre
   « mots de passe enregistrés » du navigateur, tout en bas de l'écran. */
@media (max-width:680px){
  .fab{ bottom: calc(84px + var(--safe-bottom)); }
  body{ padding-bottom: calc(160px + var(--safe-bottom)); }
}

/* ---------- Pied de page ---------- */
.footer{ padding:6px 14px 30px; text-align:center; }
.footer__note{ font-size:12px; color:var(--muted); }
.footer__link{ color:var(--muted); font-size:12px; text-decoration:underline; }
.footer__link:hover{ color:var(--primary); }
.linklike{ background:none; border:none; color:var(--primary); text-decoration:underline; cursor:pointer; font-size:12px; }