/* ============================================================
   Planning garde d'enfants — feuille de style
   Repère visuel : la grille s'assombrit du matin vers la nuit.
   ============================================================ */

:root{
  --fond:#EDF0F4;
  --carte:#FFFFFF;
  --encre:#151A24;
  --encre-doux:#6C7486;
  --trait:#DBE0E8;
  --trait-fort:#C3CAD6;
  --primaire:#1F5F4B;
  --primaire-clair:#E3EFEA;
  --occupe:#C9CFD9;
  --danger:#A63A2E;
  --h:20px;              /* hauteur d'un pas de 15 minutes */
  --col-heures:54px;
  --rayon:16px;
  --ombre:0 1px 2px rgba(20,26,38,.06), 0 8px 24px -12px rgba(20,26,38,.24);
}

@media (prefers-color-scheme: dark){
  :root{
    --fond:#0F1522;
    --carte:#18202F;
    --encre:#EDF0F5;
    --encre-doux:#8E97A8;
    --trait:#26303F;
    --trait-fort:#38445A;
    --primaire:#4FB899;
    --primaire-clair:#16302A;
    --occupe:#3A4457;
    --danger:#E0705F;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

h1,h2,h3{font-family:ui-rounded,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;letter-spacing:-.02em}

button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* ---------- Connexion ---------- */
.connexion{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.connexion-carte{
  width:100%;max-width:340px;background:var(--carte);
  border-radius:22px;padding:32px 24px;box-shadow:var(--ombre);text-align:center;
}
.marque{font-size:32px;font-weight:700}
.marque-sous{margin:4px 0 28px;color:var(--encre-doux);font-size:15px}
.champ-code{display:block;text-align:left}
.champ-code span{display:block;font-size:13px;color:var(--encre-doux);margin-bottom:6px}
.champ-code input{
  width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--trait);
  background:var(--fond);font-size:22px;letter-spacing:.28em;text-align:center;
}
.champ-code input:focus{outline:none;border-color:var(--primaire)}
.bouton-principal{
  width:100%;margin-top:18px;padding:15px;border-radius:14px;
  background:var(--primaire);color:#fff;font-weight:600;font-size:17px;
}
@media (prefers-color-scheme: dark){ .bouton-principal{color:#08110E} }
.bouton-principal:active{transform:scale(.985)}
.bouton-principal[disabled]{opacity:.5}
.erreur{color:var(--danger);font-size:14px;margin:14px 0 0}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:20;background:var(--carte);
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid var(--trait);
}
.entete-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.salut{margin:0;font-size:13px;color:var(--encre-doux)}
.mois{font-size:23px;font-weight:700;margin-top:1px}
.entete-actions{display:flex;gap:8px}
.rond{
  width:38px;height:38px;border-radius:50%;background:var(--fond);
  display:grid;place-items:center;position:relative;color:var(--encre)
}
.rond:active{background:var(--trait)}
.pastille{
  position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--carte)
}

.semaine{display:flex;align-items:center;gap:2px;margin-top:12px}
.fleche{
  width:26px;height:44px;font-size:22px;color:var(--encre-doux);
  display:grid;place-items:center;flex:0 0 auto
}
.jours{display:flex;flex:1;gap:4px;justify-content:space-between}
.jour{
  flex:1;padding:6px 0 7px;border-radius:12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;
}
.jour .lettre{font-size:11px;color:var(--encre-doux)}
.jour .chiffre{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.jour .point{width:4px;height:4px;border-radius:50%;background:var(--trait-fort);margin-top:2px}
.jour .point.vide{background:transparent}
.jour[aria-current="true"]{background:var(--primaire);color:#fff}
.jour[aria-current="true"] .lettre{color:rgba(255,255,255,.75)}
.jour[aria-current="true"] .point{background:rgba(255,255,255,.8)}
@media (prefers-color-scheme: dark){
  .jour[aria-current="true"]{color:#08110E}
  .jour[aria-current="true"] .lettre{color:rgba(8,17,14,.65)}
}
.jour.aujourdhui .chiffre{text-decoration:underline;text-underline-offset:3px}

/* ---------- Grille horaire ---------- */
.plan{display:flex;align-items:flex-start;padding:8px 16px 0}
.colonne-heures{width:var(--col-heures);flex:0 0 auto;position:relative}
.colonne-heures .etiquette{
  position:absolute;right:10px;font-size:11px;color:var(--encre-doux);
  font-variant-numeric:tabular-nums;transform:translateY(-6px)
}
.grille-enveloppe{flex:1;min-width:0}
.grille{
  position:relative;border-radius:var(--rayon);overflow:hidden;
  background:var(--carte);
  background-image:
    linear-gradient(180deg,
      rgba(255,214,150,.16) 0%,
      rgba(255,255,255,0) 26%,
      rgba(60,90,160,.05) 62%,
      rgba(24,38,80,.16) 100%),
    repeating-linear-gradient(180deg,
      var(--trait) 0 1px, transparent 1px calc(var(--h) * 4));
  box-shadow:var(--ombre);
}
@media (prefers-color-scheme: dark){
  .grille{
    background-image:
      linear-gradient(180deg,
        rgba(255,196,120,.10) 0%,
        rgba(255,255,255,0) 30%,
        rgba(60,110,200,.06) 62%,
        rgba(4,8,20,.5) 100%),
      repeating-linear-gradient(180deg,
        var(--trait) 0 1px, transparent 1px calc(var(--h) * 4));
  }
}
.demie{
  position:absolute;left:0;right:0;height:1px;
  background:var(--trait);opacity:.45;pointer-events:none
}

.maintenant{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:6}
.maintenant::before{
  content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--danger)
}

.bloc{
  position:absolute;left:6px;right:6px;border-radius:12px;
  padding:4px 10px;overflow:hidden;text-align:left;z-index:4;
  display:flex;flex-direction:column;justify-content:flex-start;
  color:#fff;font-size:13px;line-height:1.28;
}
.bloc .nom{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloc .horaire{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}
.bloc:active{filter:brightness(.92)}
.bloc.court{padding-top:2px;padding-bottom:2px;flex-direction:row;align-items:center;gap:6px}
.bloc.court .horaire{opacity:.8}
.bloc.autre{
  background:var(--occupe);color:var(--encre-doux);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);
}
.bloc.autre .nom{font-weight:600}

.pied{
  text-align:center;color:var(--encre-doux);font-size:12px;
  padding:14px 16px calc(22px + env(safe-area-inset-bottom));margin:0;
}

/* ---------- Feuille coulissante ---------- */
.voile{position:fixed;inset:0;background:rgba(10,14,22,.42);z-index:40;animation:fondu .18s ease}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.feuille{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--carte);border-radius:24px 24px 0 0;
  padding:8px 20px calc(20px + env(safe-area-inset-bottom));
  max-height:88dvh;overflow-y:auto;
  box-shadow:0 -8px 40px rgba(10,14,22,.28);
  animation:monte .26s cubic-bezier(.32,.72,0,1);
}
@keyframes monte{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .feuille{animation:none} .voile{animation:none}
}
.poignee{width:38px;height:5px;border-radius:3px;background:var(--trait-fort);margin:0 auto 14px}
.feuille h3{font-size:21px;font-weight:700}
.feuille .sous{color:var(--encre-doux);font-size:14px;margin:3px 0 20px}

.reglage{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--trait)
}
.reglage:last-of-type{border-bottom:0}
.reglage .etiq{font-size:15px}
.compteur{display:flex;align-items:center;gap:4px;background:var(--fond);border-radius:12px;padding:4px}
.compteur button{width:36px;height:32px;border-radius:9px;font-size:19px;background:var(--carte);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.compteur button:active{opacity:.6}
.compteur .valeur{min-width:62px;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}

.puces{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.puce{
  padding:9px 15px;border-radius:999px;background:var(--fond);
  font-size:15px;border:1.5px solid transparent
}
.puce[aria-pressed="true"]{border-color:var(--primaire);background:var(--primaire-clair);color:var(--primaire);font-weight:600}
.saisie{
  width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--trait);
  background:var(--fond);font-size:16px;margin-top:8px
}
.saisie:focus{outline:none;border-color:var(--primaire)}
.bouton-second{
  width:100%;margin-top:10px;padding:14px;border-radius:14px;
  background:var(--fond);font-weight:600;font-size:16px
}
.bouton-danger{color:var(--danger)}
.duree{color:var(--encre-doux);font-size:13px;margin:14px 0 0;text-align:center}

.notif{padding:14px 0;border-bottom:1px solid var(--trait)}
.notif:last-child{border-bottom:0}
.notif .t{font-size:15px;font-weight:600}
.notif .d{font-size:13px;color:var(--encre-doux);margin-top:2px}
.vide-message{color:var(--encre-doux);font-size:15px;padding:24px 0;text-align:center}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(28px + env(safe-area-inset-bottom));z-index:60;
  background:var(--encre);color:var(--fond);
  padding:12px 18px;border-radius:999px;font-size:14px;font-weight:500;
  max-width:calc(100% - 40px);text-align:center;
  box-shadow:0 8px 30px rgba(10,14,22,.35);
}