/* Thèmes : Bois de rose, Sauge, Encre — chacun en clair et en sombre.
   Le mode sombre est un interrupteur indépendant du choix du thème. */
.app{
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px; --r-sm:12px;
}
.app[data-theme="rose"]{
  --ground:#FAF2EF;--surface:#FFFFFF;--ink:#2A1620;--ink2:#7D6470;--ink3:#A4899A;
  --hair:#EEDDE4;--hair2:#F7ECF0;--accent:#A32458;--accent-ink:#8E1F4C;--accent-soft:#FBE2EE;--on-accent:#FFFFFF;
  --ok:#1E7A50;--ok-bg:#DFF3E8;--warn:#A9600A;--warn-bg:#FDEFD6;--alert:#C33A22;--alert-bg:#FCE6E0;--alert-line:#F3C6BA;
  --nav:#FFF8FB;--nav-off:#A4899A;--display:var(--serif);--display-w:400;--display-ls:-.01em;
}
.app[data-theme="rose"][data-sombre="oui"]{
  --ground:#190E13;--surface:#251620;--ink:#F7ECF0;--ink2:#B79FAB;--ink3:#8C7383;
  --hair:#3A2430;--hair2:#2F1C27;--accent:#E8659B;--accent-ink:#F58CB5;--accent-soft:#3D1B2C;--on-accent:#23101A;
  --ok:#5FD39A;--ok-bg:#12301F;--warn:#F0B44F;--warn-bg:#33260F;--alert:#F58A75;--alert-bg:#35181A;--alert-line:#57272A;
  --nav:#1F1219;--nav-off:#8C7383;
}
.app[data-theme="sauge"]{
  --ground:#EFF5ED;--surface:#FFFFFF;--ink:#16241A;--ink2:#5C7061;--ink3:#8AA08F;
  --hair:#D6E4D6;--hair2:#E7F0E6;--accent:#1F7A53;--accent-ink:#196846;--accent-soft:#D8F2E4;--on-accent:#FFFFFF;
  --ok:#1E7A50;--ok-bg:#DCF2E5;--warn:#9A6408;--warn-bg:#FBEFD5;--alert:#BC3A25;--alert-bg:#FBE7E1;--alert-line:#F0C9BD;
  --nav:#F6FBF4;--nav-off:#8AA08F;--display:'Newsreader',Georgia,serif;--display-w:400;--display-ls:-.015em;
}
.app[data-theme="sauge"][data-sombre="oui"]{
  --ground:#0D140F;--surface:#17201A;--ink:#EAF3E9;--ink2:#9AB09F;--ink3:#748A79;
  --hair:#26332A;--hair2:#1E2921;--accent:#4FCB8E;--accent-ink:#77DCAA;--accent-soft:#15301F;--on-accent:#08140D;
  --ok:#5FD39A;--ok-bg:#132D1E;--warn:#E8B44F;--warn-bg:#2E2711;--alert:#F09078;--alert-bg:#30191A;--alert-line:#4C2724;
  --nav:#111A13;--nav-off:#748A79;
}
.app[data-theme="encre"]{
  --ground:#FFFFFF;--surface:#FFFFFF;--ink:#0D0D0D;--ink2:#5E5E5E;--ink3:#8E8E8E;
  --hair:#E0E0E0;--hair2:#F0F0F0;--accent:#E03123;--accent-ink:#BE2417;--accent-soft:#FFE4E0;--on-accent:#FFFFFF;
  --ok:#11804E;--ok-bg:#DFF4E9;--warn:#96620A;--warn-bg:#FCEFD4;--alert:#C42517;--alert-bg:#FFE4E0;--alert-line:#F6C6BF;
  --nav:#FAFAFA;--nav-off:#8E8E8E;--display:var(--sans);--display-w:700;--display-ls:-.035em;
}
.app[data-theme="encre"][data-sombre="oui"]{
  --ground:#0B0B0B;--surface:#161616;--ink:#F4F4F4;--ink2:#A3A3A3;--ink3:#7A7A7A;
  --hair:#2A2A2A;--hair2:#212121;--accent:#FF6B55;--accent-ink:#FF8F7D;--accent-soft:#33140F;--on-accent:#140705;
  --ok:#5CCB8C;--ok-bg:#13291C;--warn:#E5B354;--warn-bg:#2C2513;--alert:#FF8F7D;--alert-bg:#331714;--alert-line:#4F2420;
  --nav:#101010;--nav-off:#7A7A7A;
}

.app *,.app *::before,.app *::after{box-sizing:border-box}
.app{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;
  height:100%;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
  max-width:520px;margin:0 auto;box-shadow:0 0 0 1px var(--hair)}
:where(.app button){font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;text-align:left}
.app :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.app a{color:var(--accent-ink)}

.ecran{flex:1;display:flex;flex-direction:column;min-height:0}
.corps{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 18px;display:flex;flex-direction:column;gap:16px}
.corps>*{flex:0 0 auto}
.entete{padding:calc(26px + env(safe-area-inset-top,0px)) 20px 14px;display:flex;flex-direction:column;gap:6px}
.entete .haut{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
h1{font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--display-ls);
  font-size:30px;line-height:1.05;margin:0}
h2.titre{font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--display-ls);font-size:22px;line-height:1.1;margin:0}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.sous{font-size:13px;color:var(--ink2)}
.num{font-variant-numeric:tabular-nums}

.carte{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.carte.accent{border-color:var(--accent);border-width:1.5px}
.carte.alerte{border-color:var(--alert-line)}
.rang{display:flex;align-items:center;gap:11px;padding:11px 13px;min-height:52px;width:100%}
.rang+.rang{border-top:1px solid var(--hair2)}
/* .pousse sert aussi hors des rangées (cartes de messages, demandes…) :
   son style ne doit donc pas dépendre du contexte. */
.pousse{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pousse b,.rang b{font-size:14.5px;font-weight:600;line-height:1.3}
.pousse small,.rang small{font-size:11.5px;color:var(--ink2);line-height:1.35}
.lien-retour{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent-ink)}
.heure{color:var(--accent-ink);font-weight:700}
.chev{color:var(--ink3);flex:none}

.puce{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-alert{background:var(--alert-bg);color:var(--alert)}
.p-soft{background:var(--accent-soft);color:var(--accent-ink)}
.p-neutre{background:var(--hair2);color:var(--ink2)}
.puce[data-a]{font-weight:500;padding:5px 10px;min-height:30px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;width:100%}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--hair)}
.btn.min{min-height:42px;font-size:13.5px;padding:0 14px;width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.pied{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px}

.champ{display:flex;flex-direction:column;gap:6px}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--hair);background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.champ textarea{min-height:96px;resize:vertical;line-height:1.45}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent);outline:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastille{min-height:44px;padding:0 15px;display:inline-flex;align-items:center;border-radius:999px;
  border:1px solid var(--hair);background:var(--surface);color:var(--ink2);font-size:13.5px;font-weight:500}
.pastille[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.grille4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.grille2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.creneau{min-height:46px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  border:1px solid var(--hair);background:var(--surface);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.creneau[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.bulle{background:var(--hair2);border-radius:13px;border-top-left-radius:4px;padding:10px 12px;
  font-size:13px;line-height:1.45;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.bandeau{background:var(--alert-bg);border:1px solid var(--alert-line);border-radius:var(--r);padding:12px 13px;display:flex;gap:10px}
.bandeau b{color:var(--alert);font-size:14px}
.bandeau p{margin:3px 0 0;font-size:12.5px;line-height:1.35;color:var(--ink2)}

.vide{padding:26px 16px;text-align:center;color:var(--ink3);font-size:13.5px;line-height:1.5}
.gros{font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--display-ls);font-variant-numeric:tabular-nums}

.nav{flex:none;border-top:1px solid var(--hair);background:var(--nav);display:flex;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
/* Le pied d'écran précède la barre : plus besoin d'y répéter la marge basse. */
.ecran>.pied{padding-bottom:12px}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--nav-off);padding:4px 0;min-height:48px}
.nav button[aria-current="page"]{color:var(--accent-ink)}
.nav span{font-size:10.5px;font-weight:600}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:var(--ground);padding:11px 16px;border-radius:999px;font-size:13.5px;font-weight:500;
  z-index:50;max-width:min(88vw,420px);text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.18)}
@media (prefers-reduced-motion:no-preference){ .toast{animation:monte .18s ease-out} }
@keyframes monte{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

.feuille{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.feuille>div{background:var(--ground);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  border-radius:20px 20px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}

.ligne-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px}
.ligne-tot>span:first-child{min-width:0;line-height:1.35}
.ligne-tot .m,.ligne-tot b:last-child{flex:0 0 auto;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--hair)}
.encart{background:var(--accent);color:var(--on-accent);border-radius:var(--r);padding:15px 16px;display:flex;flex-direction:column;gap:3px}
.encart .lbl{color:var(--on-accent);opacity:.72}
.encart .v{font-family:var(--display);font-weight:var(--display-w);font-size:40px;line-height:1;font-variant-numeric:tabular-nums}

/* Bandeau d'erreur — une écriture qui échoue doit se voir. */
.alerte-haut{display:flex;align-items:flex-start;gap:9px;margin:calc(12px + env(safe-area-inset-top,0px)) 20px 0;padding:11px 12px;border-radius:12px;
  background:var(--alert-bg);border:1px solid var(--alert-line);color:var(--alert);font-size:13px;line-height:1.4}
.alerte-haut span{flex:1}
.alerte-haut button{color:var(--alert);flex:none;padding:2px}
.alerte-haut+.ecran .entete{padding-top:14px}
.puce[data-a]{cursor:pointer;border:none}

/* Galerie */
.mosaique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.vignette{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--hair2);
  border:1px solid var(--hair);display:block;width:100%}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.badge-vignette{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:999px}
.titre-vignette{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;font-size:11.5px;font-weight:600;
  color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.62))}
@media (min-width:430px){.mosaique{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vignette-choix{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;border:2px solid var(--hair);background:var(--surface);padding:0}
.vignette-choix img{width:100%;height:100%;object-fit:cover;display:block}
.vignette-choix[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* Bandeau d'aperçu de la page publique */
.bandeau-apercu{flex:none;display:flex;align-items:center;gap:10px;
  padding:calc(9px + env(safe-area-inset-top,0px)) 16px 9px;
  background:var(--ink);color:var(--ground);font-size:12.5px;font-weight:500}
.bandeau-apercu span{flex:1;min-width:0}
.bandeau-apercu button{flex:none;font-size:12.5px;font-weight:700;color:var(--ground);
  border:1px solid currentColor;border-radius:999px;padding:5px 12px;min-height:32px}
.bandeau-apercu+.ecran .entete{padding-top:16px}

/* Agenda : navigation par semaine et bandeau de jours */
.fleche{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--accent-ink);background:var(--surface);border:1px solid var(--hair)}
.periode-semaine{flex:1;text-align:center;font-size:15px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:center;min-height:38px}
.jour-chip{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 2px 7px;border-radius:12px;background:var(--surface);border:1px solid var(--hair);color:var(--ink2)}
.jour-chip.actif{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.jour-chip.ferme{opacity:.45}
.jc-nom{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.jc-num{font-size:15px;font-weight:700;line-height:1}
.jc-jauge{width:20px;height:3px;border-radius:2px;background:var(--hair2);overflow:hidden;display:block}
.jour-chip.actif .jc-jauge{background:rgba(255,255,255,.32)}
.jc-jauge>span{display:block;height:3px;background:var(--accent)}
.jour-chip.actif .jc-jauge>span{background:var(--on-accent)}
.jc-point{position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.jour-chip.actif .jc-point{background:var(--on-accent)}
.creneau-libre{flex:1;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:14px;
  background:var(--warn-bg);border:1px dashed var(--warn)}
.creneau-libre b{font-size:13.5px;color:var(--warn)}
.creneau-libre small{font-size:11px;color:var(--warn);opacity:.85}
.etat-reglages{flex:none;height:0;overflow:hidden;opacity:0;padding:0 20px;
  font-size:12px;font-weight:600;color:var(--ok);transition:opacity .18s}
.etat-reglages.visible{height:auto;opacity:1;padding-bottom:6px}
@media (prefers-reduced-motion:reduce){.etat-reglages{transition:none}}