@font-face{font-family:Nunito;src:url(polices/Nunito-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(polices/Nunito-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(polices/Nunito-ExtraBold.ttf);font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(polices/Nunito-Black.ttf);font-weight:900;font-display:swap}
/* Charte graphique L'Espoir : Bleu Espoir #0E5CAA, couleurs pastel des valeurs */
:root{--azur:#007FFF;--bleu:#0E5CAA;--ciel:#7BB8F4;--clair:#D5E8FC;--tresclair:#EDF5FD;--anth:#1F2D33;--gris:#5F6F76;
--creme:#F6F2EC;--sable:#FBF0DA;--abricot:#EAAC80;--rose:#E0C5C7;--filet:#D9DEE1;
--humanisme:#8EB5AE;--solidarite:#EAAC80;--autonomie:#E0C5C7;--ensemble:#B1E8F0;--eco:#F6DAA5;
--ok:#2E9B57;--ok-c:#E3F4EA;--att:#E39A2D;--att-c:#FDF1DE;--ko:#C9423C;--ko-c:#FBE7E6;--nav:62px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 Nunito,Arial,sans-serif;color:var(--anth);background:var(--creme);
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px) + 8px)}
a{color:var(--bleu)}
.haut{background:var(--bleu);color:#fff;position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.haut .in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 14px}
.haut img{width:34px;height:34px;flex:none}
.haut .t{font-weight:900;font-size:17px;line-height:1.1}
.haut .s{font-size:12px;opacity:.85}
.haut .qui{margin-left:auto;text-align:right;font-size:12px;line-height:1.25}
.haut .qui a{color:#fff;font-weight:700}
.bandeau-test{background:var(--abricot);color:var(--anth);text-align:center;font-weight:800;font-size:12px;padding:3px 10px}
main{max-width:900px;margin:0 auto;padding:12px 14px 4px}
h1{font-weight:900;font-size:22px;color:var(--bleu);margin:4px 0 10px;line-height:1.2}
h2{font-weight:800;font-size:18px;color:var(--bleu);margin:0 0 8px}
h3{font-weight:800;font-size:15px;margin:12px 0 6px}
.aide{color:var(--gris);font-size:14px}
.carte{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:14px;border-left:5px solid var(--ciel);
  box-shadow:0 1px 4px rgba(31,45,51,.06)}
.carte.annonce{border-left-color:var(--solidarite);background:#fffaf5}
.carte.note{border-left-color:var(--eco);background:var(--sable)}
.carte.ko{border-left-color:var(--ko)}
.jours{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.jours a,.jours span{font-weight:800}
.jours .fl{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;
  text-decoration:none;font-size:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.jours .d{text-align:center;flex:1;font-size:15px}
.jours .d small{display:block;font-weight:400;color:var(--gris);font-size:12px}
/* créneaux du planning */
.creneaux{list-style:none;margin:0;padding:0}
.creneaux li{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--filet)}
.creneaux li:last-child{border-bottom:0}
.creneaux .h{font-weight:800;color:var(--bleu);font-variant-numeric:tabular-nums}
.creneaux .h small{display:block;font-weight:400;color:var(--gris);font-size:12px}
.creneaux .m{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.03em}
.creneaux .a{font-weight:800}
.creneaux .l{font-size:14px;color:var(--gris)}
.creneaux li.vie .a,.creneaux li.commun .a{font-weight:700;color:var(--gris)}
.creneaux li.vide .a{color:#9aa6ab;font-weight:400;font-style:italic}
.pied-planning{margin-top:10px;font-size:14px}
.pied-planning div{padding:4px 0}
.pied-planning b{color:var(--bleu)}
/* tableaux */
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
table.t th{background:var(--bleu);color:#fff;font-weight:800;padding:6px 8px;text-align:center;vertical-align:middle}
table.t td{border-bottom:1px solid var(--filet);padding:6px 8px;text-align:center;vertical-align:middle}
table.t td:first-child,table.t th:first-child{text-align:left}
table.t td.txt{text-align:left}
table.t tr.moi td{background:var(--tresclair)}
table.t tr.commun td{background:var(--sable);color:var(--gris)}
.puce{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:800;background:var(--clair);color:var(--bleu)}
.puce.dir{background:var(--eco);color:var(--anth)}.puce.san{background:var(--humanisme);color:#fff}
.puce.anim{background:var(--ensemble);color:var(--anth)}
/* formulaires */
label.c{display:block;font-weight:800;font-size:14px;margin:10px 0 4px}
.champ{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--ciel);border-radius:8px;background:var(--tresclair);color:var(--anth)}
.champ:focus{outline:2px solid var(--azur);background:#fff}
textarea.champ{min-height:90px}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.bouton,button.bouton{display:inline-block;font:inherit;font-weight:800;font-size:15px;background:var(--bleu);color:#fff;border:0;
  border-radius:9px;padding:11px 18px;cursor:pointer;text-decoration:none;line-height:1.25;text-align:center}
.bouton.alt{background:#fff;color:var(--bleu);border:1px solid var(--ciel)}
.bouton.ko{background:var(--ko)}.bouton.petit{font-size:13px;padding:6px 10px;border-radius:7px}
.bouton.large{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
form.inline{display:inline}
.msg{padding:10px 14px;border-radius:8px;margin-bottom:12px;border-left:4px solid;font-size:15px}
.msg.erreur{background:var(--ko-c);border-color:var(--ko)}
.msg.info{background:var(--ok-c);border-color:var(--ok)}
.msg.note{background:var(--sable);border-color:var(--abricot)}
.onglets{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.onglets a{white-space:nowrap;text-decoration:none;font-weight:800;font-size:14px;padding:6px 12px;border-radius:20px;background:#fff;
  border:1px solid var(--ciel)}
.onglets a.actif{background:var(--bleu);color:#fff;border-color:var(--bleu)}
details.groupe{background:#fff;border-radius:12px;margin-bottom:10px;box-shadow:0 1px 4px rgba(31,45,51,.06);overflow:hidden}
details.groupe summary{padding:12px 14px;font-weight:800;cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center}
details.groupe summary::-webkit-details-marker{display:none}
details.groupe summary .n{margin-left:auto;font-size:13px;color:var(--gris);font-weight:700}
details.groupe[open] summary{border-bottom:1px solid var(--filet)}
details.groupe .corps{padding:4px 14px 12px}
.personne{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--filet)}
.personne:last-child{border-bottom:0}
.personne .ch{font-weight:800;color:var(--bleu);white-space:nowrap}
.personne small{display:block;color:var(--gris)}
.code{font:800 22px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--bleu)}
/* barre de navigation du bas */
nav.bas{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -2px 8px rgba(31,45,51,.06)}
nav.bas .in{max-width:900px;margin:0 auto;display:flex}
nav.bas a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--nav);
  text-decoration:none;color:var(--gris);font-size:11px;font-weight:800}
nav.bas a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.bas a.actif{color:var(--bleu)}
nav.bas a.actif svg{stroke-width:2.6}
.connexion{max-width:420px;margin:18px auto}
.connexion .logo{display:block;width:96px;height:96px;margin:10px auto 4px}
.installer{display:none}
.vide{color:var(--gris);font-style:italic}
@media(min-width:700px){.creneaux li{grid-template-columns:70px 1fr}}
.lien-plus{display:flex;gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--filet);text-decoration:none;color:var(--anth)}
.lien-plus:last-child{border-bottom:0}
.lien-plus span{font-size:24px;width:32px;text-align:center}
.lien-plus small{display:block;color:var(--gris);font-size:13px}
.outils-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.outil{background:#fff;border-radius:12px;padding:12px;text-decoration:none;color:var(--anth);box-shadow:0 1px 4px rgba(31,45,51,.06)}
.outil b{display:block;color:var(--bleu);font-size:15px;line-height:1.25}
.outil small{display:block;color:var(--gris);font-size:12px;margin-top:4px;line-height:1.3}
nav.bas a{position:relative}
.pastille{position:absolute;top:6px;left:calc(50% + 6px);background:var(--ko);color:#fff;font-style:normal;font-size:10px;font-weight:900;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.lien-pub{display:block;text-decoration:none;color:var(--anth)}
.lien-pub small{display:block;color:var(--gris);margin-top:4px}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.vignette{position:relative}
.vignette img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.vignette form{position:absolute;top:3px;right:3px}
.vignette button{width:26px;height:26px;border-radius:50%;border:0;background:rgba(31,45,51,.75);color:#fff;font-size:17px;line-height:1;cursor:pointer}
.apercus{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.apercus img{width:72%;max-width:300px;aspect-ratio:4/5;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.15);flex:none}
.choix-format{display:grid;gap:6px}
.choix-format label,label.case{display:flex;gap:8px;align-items:flex-start;font-size:15px;margin:6px 0}
.choix-format small{color:var(--gris);margin-left:4px}
label.case input,.choix-format input{margin-top:4px;width:18px;height:18px;flex:none}
.choix-date{display:flex;gap:8px;align-items:center;margin:-4px 0 12px;flex-wrap:wrap}
.choix-date .champ{width:auto;flex:1;min-width:150px;padding:7px 10px}
.repas h3{margin:4px 0 6px;color:var(--bleu)}
.repas+.repas{margin-top:10px;border-top:1px solid var(--filet);padding-top:6px}
.ligne-menu{display:grid;grid-template-columns:104px 1fr;gap:8px;padding:5px 0;border-bottom:1px dashed var(--filet);font-size:15px}
.ligne-menu:last-child{border-bottom:0}
.ligne-menu .rub{color:var(--gris);font-size:12px;text-transform:uppercase;letter-spacing:.02em;padding-top:2px}
.ligne-menu.plat span:last-child{font-weight:800}
.ligne-menu small{font-weight:400;color:var(--gris)}
details.groupe summary .n{max-width:55%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bilan{margin-top:10px;background:var(--tresclair);border-radius:10px;padding:10px 12px}
.total-convives{font-size:15px}.total-convives b{font-size:24px;font-weight:900;color:var(--bleu);margin-right:4px}
.bilan summary{cursor:pointer;color:var(--bleu);font-size:13px;font-weight:700;margin-top:2px}
.detail-convives div{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:3px 0;border-bottom:1px dashed var(--filet)}
.detail-convives div span:last-child{font-weight:800;white-space:nowrap}
.ma-presence{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:14px}