:root {
  --fond: #f6f3ec;
  --carte: #ffffff;
  --encre: #1d2422;
  --doux: #5d6764;
  --trait: #e2ddd1;
  --vert: #1f4d45;
  --vert-clair: #e3efe9;
  --ocre: #c9771a;
  --ocre-clair: #fbf0df;
  --rouge: #a8322a;
  --rouge-clair: #fbe7e4;
  --rayon: 14px;
  --filles: #eb6834;
  --garcons: #2a78d6;
  --autres: #1baf7a;
  --bleu-clair: #e6effa;
  --violet: #6250d6;
  --violet-clair: #ecebfb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #141917;
    --carte: #1d2422;
    --encre: #ebe9e3;
    --doux: #a3aca8;
    --trait: #333d3a;
    --vert: #7fc4b2;
    --vert-clair: #1f3430;
    --ocre: #e8a352;
    --ocre-clair: #33281a;
    --rouge: #f08a80;
    --rouge-clair: #3a2220;
    --filles: #d95926;
    --garcons: #3987e5;
    --autres: #199e70;
    --bleu-clair: #1a2a3d;
    --violet: #9085e9;
    --violet-clair: #25223d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fond: #141917;
    --carte: #1d2422;
    --encre: #ebe9e3;
    --doux: #a3aca8;
    --trait: #333d3a;
    --vert: #7fc4b2;
    --vert-clair: #1f3430;
    --ocre: #e8a352;
    --ocre-clair: #33281a;
    --rouge: #f08a80;
    --rouge-clair: #3a2220;
    --filles: #d95926;
    --garcons: #3987e5;
    --autres: #199e70;
    --bleu-clair: #1a2a3d;
    --violet: #9085e9;
    --violet-clair: #25223d;
    color-scheme: dark;
  }


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--vert); }
h1 { font-size: 1.45rem; margin: 0 0 .4rem; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
.date { display: block; font-size: 1rem; font-weight: 500; color: var(--doux); }

/* Barre du haut */
.barre {
  background: var(--vert);
  color: #fff;
  padding: calc(.6rem + env(safe-area-inset-top)) 16px .6rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .barre { background: #10302b; }
}
:where(:root[data-theme="dark"]) .barre { background: #10302b; }

.marque { color: #fff; text-decoration: none; font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.pastille { background: #fff; color: #1f4d45; border-radius: 8px; padding: .1rem .45rem; font-size: .85rem; letter-spacing: .04em; }
.menu { display: flex; gap: .25rem; align-items: center; overflow-x: auto; scrollbar-width: none; width: 100%; margin: 0 -6px; }
.menu::-webkit-scrollbar { display: none; }
.menu a, .menu .deco { flex: none; white-space: nowrap; }
@media (min-width: 760px) { .menu { width: auto; margin: 0; } }
.menu a, .lien-bouton {
  color: #fff; text-decoration: none; font-size: .9rem; padding: .35rem .6rem; border-radius: 999px;
  background: transparent; border: 0; font-family: inherit; cursor: pointer;
}
.menu a.actif { background: rgba(255,255,255,.18); }
.menu a:hover, .lien-bouton:hover { background: rgba(255,255,255,.12); }
.deco { margin: 0; }
.lien-bouton { opacity: .85; }

.contenu { max-width: 760px; margin: 0 auto; padding: 1rem 16px calc(5rem + env(safe-area-inset-bottom)); }

.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1rem; margin: 0 0 1rem;
}
.carte.etroite { max-width: 420px; margin: 2rem auto; }
.entete-page { margin-bottom: 1rem; }
.fil { margin: 0 0 .5rem; font-size: .95rem; }
.aide { color: var(--doux); font-size: .88rem; font-weight: 400; }
.vide { color: var(--doux); }
.pied-page { text-align: center; font-size: .9rem; margin-top: 2rem; }

/* Messages */
.message { border-radius: 10px; padding: .7rem .9rem; margin: 0 0 1rem; }
.message-ok { background: var(--vert-clair); color: var(--encre); border-left: 4px solid var(--vert); }
.message-erreur { background: var(--rouge-clair); color: var(--encre); border-left: 4px solid var(--rouge); }
.code-provisoire {
  font: 700 1.8rem/1 ui-monospace, Menlo, monospace; letter-spacing: .15em;
  background: var(--ocre-clair); border: 2px dashed var(--ocre); border-radius: 10px; padding: .8rem; text-align: center;
}

[hidden] { display: none !important; }

/* Formulaires */
label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
label.case { font-weight: 400; display: flex; gap: .6rem; align-items: center; margin: .4rem 0; padding: .3rem 0; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=tel], input[type=email], select, textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--fond);
  border: 1px solid var(--trait); border-radius: 10px; padding: .65rem .75rem; min-height: 46px;
}
textarea { resize: vertical; field-sizing: content; min-height: 4.2rem; max-height: 70vh; overflow-wrap: anywhere; }
/* Dates et heures tapées en chiffres */
.saisie-bloc { position: relative; display: block; }
.saisie-bloc .saisie-chiffres { width: 100%; }
.saisie-bloc:has(.bouton-calendrier) .saisie-chiffres { padding-right: 2.8rem; }
.bouton-calendrier { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--vert); padding: 8px; cursor: pointer; line-height: 0; border-radius: 8px; }
.calendrier-cache { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; min-height: 0; }
input.saisie-erreur { border-color: var(--rouge); background: var(--rouge-clair); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--ocre); outline-offset: 1px; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--vert); flex: none; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; }
input, select, textarea { min-width: 0; max-width: 100%; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; }
.ligne-formulaire { display: grid; gap: .2rem; }
.ligne-formulaire .bouton { margin-top: .8rem; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--vert); color: #fff; border: 0; border-radius: 12px;
  padding: .7rem 1.1rem; min-height: 46px; font: 600 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .bouton { color: #10302b; }
}
:where(:root[data-theme="dark"]) .bouton { color: #10302b; }

.bouton.large { width: 100%; margin-top: 1.1rem; font-size: 1.05rem; }
.bouton.secondaire { background: var(--vert-clair); color: var(--vert); }
.bouton.petit { min-height: 36px; padding: .35rem .8rem; font-size: .9rem; }
.bouton.danger { background: var(--rouge-clair); color: var(--rouge); }
.bouton:disabled { opacity: .6; }
.barre-action { position: sticky; bottom: 0; padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fond) 30%); }

/* Liste des accueils du jour */
.navigation-jours { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.navigation-jours .bouton { min-height: 40px; padding: .45rem .85rem; font-size: .95rem; }
.liste-accueils { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; }
.carte-accueil {
  display: grid; gap: .15rem; text-decoration: none; color: var(--encre);
  background: var(--carte); border: 1px solid var(--trait); border-left: 6px solid var(--ocre);
  border-radius: var(--rayon); padding: .85rem 1rem;
}
.carte-accueil.faite { border-left-color: var(--vert); }
.carte-accueil .nom { font-weight: 700; font-size: 1.1rem; }
.carte-accueil .horaires, .carte-accueil .lieu { color: var(--doux); font-size: .92rem; }
.carte-accueil .etat { font-weight: 600; font-size: .9rem; color: var(--ocre); margin-top: .2rem; }
.carte-accueil.faite .etat { color: var(--vert); }
details.autre summary { cursor: pointer; font-weight: 600; color: var(--vert); }

/* Onglets */
.onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
/* Catégories de l'agenda : une seule ligne qui défile, pour ne pas empiler les bulles. */
.onglets.filtre-categories { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
.onglets.filtre-categories::-webkit-scrollbar { display: none; }
.onglets a { flex: none; white-space: nowrap; text-decoration: none; padding: .4rem .62rem; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); font-size: .9rem; }
.onglets a.actif { background: var(--vert); color: #fff; border-color: var(--vert); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .onglets a.actif { color: #10302b; }
}
:where(:root[data-theme="dark"]) .onglets a.actif { color: #10302b; }


/* À racheter */
.racheter { background: var(--ocre-clair); border-color: transparent; }
.racheter ul { list-style: none; margin: 0; padding: 0; }
.racheter li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--trait); }
.racheter li:last-child { border-bottom: 0; }
.racheter li .aide { display: block; }
.racheter form { margin: 0; }

/* Grille de comptage */
.grille { width: 100%; border-collapse: collapse; }
.grille th, .grille td { padding: .45rem .2rem; text-align: center; }
.grille tbody th { text-align: left; font-weight: 600; font-size: .92rem; }
.grille thead th { font-size: .85rem; color: var(--doux); font-weight: 600; }
.grille tbody tr { border-top: 1px solid var(--trait); }
.grille tfoot th { text-align: left; }
.grille tfoot td { text-align: left; }
.grille output { font-weight: 800; font-size: 1.3rem; color: var(--vert); }
.compteur { display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; background: var(--fond); }
.compteur input { width: 3.1rem; text-align: center; border: 0; border-radius: 0; padding: .4rem 0; background: transparent; -moz-appearance: textfield; font-weight: 700; }
.compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur button { width: 2.4rem; height: 46px; border: 0; background: var(--vert-clair); color: var(--vert); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.nombre-seul { max-width: 10rem; font-size: 1.3rem; font-weight: 700; }
@media (max-width: 420px) {
  .grille tbody th { font-size: .8rem; }
  .compteur input { width: 2.4rem; }
  .compteur button { width: 2rem; }
}

/* Tableaux de consultation */
.tableau-defilant { overflow-x: auto; }
table.donnees { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.donnees th, table.donnees td { padding: .5rem .45rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
table.donnees th { color: var(--doux); font-weight: 600; font-size: .85rem; }
table.donnees td.nombre, table.donnees th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* Cahier de bord */
.filtres { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; align-items: end; }
.filtres > div { min-width: 0; }
.filtres label { margin-top: 0; }
.filtres .plein { grid-column: 1 / -1; }
.entree { border-top: 1px solid var(--trait); padding: .9rem 0; }
.entree:first-of-type { border-top: 0; padding-top: 0; }
.entree h3 { margin: 0 0 .3rem; font-size: 1rem; }
.entree dl { margin: .4rem 0 0; }
.entree dt { font-weight: 600; font-size: .85rem; color: var(--doux); margin-top: .45rem; }
.entree dd { margin: .1rem 0 0; white-space: pre-line; }
.entree .vigilance { background: var(--rouge-clair); border-radius: 8px; padding: .3rem .5rem; }
.etiquette { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--vert-clair); color: var(--vert); }
mark { background: var(--ocre-clair); color: inherit; padding: 0 .1em; border-radius: 3px; }

/* Administration */
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.actions form { margin: 0; }
.inactif { opacity: .55; }
.personnes { list-style: none; margin: 0; padding: 0; }
.personnes li { border-top: 1px solid var(--trait); padding: .8rem 0; display: grid; gap: .5rem; }
.personnes li:first-child { border-top: 0; padding-top: 0; }
.personne-tete { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.personnes form { margin: 0; }

/* Tableau de bord */
.carte.alerte { border-left: 6px solid var(--ocre); }
.manquantes { list-style: none; margin: .4rem 0 0; padding: 0; }
.manquantes li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--trait); }
.manquantes li > div { display: grid; gap: .1rem; min-width: 0; }
.manquantes .qui { font-size: .9rem; color: var(--ocre); font-weight: 600; }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 .6rem; }
@media (min-width: 640px) { .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile { background: var(--fond); border-radius: 12px; padding: .8rem; display: grid; gap: .1rem; }
.tuile .valeur { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuile .libelle { font-size: .85rem; color: var(--doux); }
.sous-titre { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.cellule-barre { min-width: 8rem; position: relative; white-space: nowrap; }
.cellule-barre .barre { display: inline-block; height: 10px; border-radius: 0 4px 4px 0; background: var(--vert); vertical-align: middle; min-width: 2px; max-width: calc(100% - 3rem); }
.cellule-barre .nombre-barre { margin-left: .4rem; font-variant-numeric: tabular-nums; font-weight: 600; }
tr:hover .cellule-barre .barre { opacity: .8; }

/* Grille de comptage à trois cases */
.grille .tranche { border-top: 1px solid var(--trait); margin-top: .7rem; padding-top: .7rem; }
.grille .tranche:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.nom-tranche { font-weight: 700; font-size: .95rem; margin: 0 0 .45rem; }
.grille .trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.case-compteur { display: grid; gap: .25rem; justify-items: center; min-width: 0; }
.libelle-compteur { font-size: .82rem; color: var(--doux); font-weight: 600; }
.grille .compteur { width: 100%; max-width: 9rem; display: flex; }
.grille .compteur input { flex: 1; width: auto; min-width: 0; }
.grille .compteur button { flex: none; width: 2.1rem; }
.total-ligne { margin: .6rem 0 0; font-weight: 600; }
.total-ligne output { font-weight: 800; font-size: 1.3rem; color: var(--vert); }

/* Import */
.etapes { padding-left: 1.2rem; margin: .4rem 0 .8rem; }
.etapes li { margin: .3rem 0; }
table.apercu td { vertical-align: middle; }
table.apercu tr.a-verifier td { background: var(--ocre-clair); }
table.apercu .date-courte { min-height: 36px; padding: .3rem .4rem; width: 9.5rem; }
input[type=file] { width: 100%; padding: .6rem; border: 1px dashed var(--trait); border-radius: 10px; background: var(--fond); }
details.corriger summary { cursor: pointer; font-weight: 600; }
details.corriger form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
details.corriger .bouton { margin-top: .5rem; }
.jeune { border: 1px solid var(--trait); border-radius: 12px; padding: .8rem; margin-bottom: .8rem; }
.jeune label { display: block; }
.jeune .heures-jeune { margin: .2rem 0 .4rem; font-weight: 600; }
.actions-jeunes { display: flex; gap: .5rem; flex-wrap: wrap; }
.liste-jobs { list-style: none; padding: 0; margin: 0; }
.liste-jobs li + li { border-top: 1px solid var(--trait); }
.liste-jobs a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0; color: inherit; text-decoration: none; }
.carte-accueil.job { border-style: dashed; }

/* Menu en bas, façon application */
.contenu.avec-menu { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.menu-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  background: var(--carte); border-top: 1px solid var(--trait);
  padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.menu-bas a {
  flex: 1 1 0; max-width: 8rem; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .35rem 0; border-radius: 12px;
  color: var(--doux); text-decoration: none; font-size: .7rem; letter-spacing: -.01em; font-weight: 600; text-align: center; line-height: 1.15;
}
/* Même taille d'icône, actif ou non : rien ne bouge quand on change de page. Les libellés longs passent sur deux lignes. */
.menu-bas a { justify-content: flex-start; padding: .3rem .1rem; }
.menu-bas a svg { width: 24px; height: 24px; padding: 3px 12px; box-sizing: content-box; border-radius: 999px; flex: none; }
.menu-bas a.actif { color: var(--vert); }
.menu-bas a.actif svg { background: var(--vert-clair); }
.menu-bas a span { white-space: normal; overflow-wrap: normal; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.barre-action { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
.liste-plus { list-style: none; padding: .3rem 1rem; }
.liste-plus li + li { border-top: 1px solid var(--trait); }
.liste-plus a { display: flex; align-items: center; gap: .8rem; padding: .9rem 0; color: var(--encre); text-decoration: none; font-weight: 600; }
.liste-plus svg { width: 24px; height: 24px; color: var(--vert); flex: none; }

/* Statistiques */
.onglets.puces { margin-top: 0; margin-bottom: .8rem; }
.onglets.puces + .onglets.puces { margin-top: -.2rem; }
.autre-periode { margin: .7rem 0 .2rem; }
.autre-periode summary { cursor: pointer; color: var(--vert); font-weight: 600; font-size: .95rem; }
.autre-periode .filtres { margin-top: .6rem; }
.tuiles.couleurs .tuile { border: 0; }
.tuiles.couleurs .t1 { background: var(--vert-clair); }
.tuiles.couleurs .t2 { background: var(--ocre-clair); }
.tuiles.couleurs .t3 { background: var(--bleu-clair); }
.tuiles.couleurs .t4 { background: var(--violet-clair); }
.tuiles.couleurs .t1 .valeur { color: var(--vert); }
.tuiles.couleurs .t2 .valeur { color: var(--ocre); }
.tuiles.couleurs .t3 .valeur { color: var(--garcons); }
.tuiles.couleurs .t4 .valeur { color: var(--violet); }
.tuile .libelle { font-weight: 600; }
.ecart { font-size: .8rem; font-weight: 700; color: var(--doux); }
.ecart.hausse { color: var(--vert); }
.ecart.baisse { color: var(--rouge); }
.faits { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .25rem; font-size: .95rem; }
.faits li::before { content: "•"; color: var(--ocre); font-weight: 800; margin-right: .5rem; }
.empile { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; margin: .3rem 0 .6rem; }
.seg { display: block; min-width: 3px; }
.seg-filles { background: var(--filles); }
.seg-garcons { background: var(--garcons); }
.seg-autres { background: var(--autres); }
.legende { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .92rem; }
.legende li { display: flex; align-items: center; gap: .35rem; }
.pastille-couleur { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ligne-tranche + .ligne-tranche { border-top: 1px solid var(--trait); margin-top: .8rem; padding-top: .8rem; }
.ligne-tranche .empile { height: 14px; }
.ligne-tranche .legende { font-size: .85rem; }
.tete-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tete-ligne > span { white-space: nowrap; }
.liste-stats { list-style: none; padding: 0; margin: 0; }
.liste-stats li { padding: .7rem 0; border-top: 1px solid var(--trait); }
.liste-stats li:first-child { border-top: 0; padding-top: 0; }
.liste-stats .aide { margin: .3rem 0 0; }
.jauge { height: 10px; background: var(--fond); border-radius: 999px; overflow: hidden; margin-top: .35rem; }
.jauge span { display: block; height: 100%; background: var(--vert); border-radius: 999px; min-width: 4px; }
.barres-h { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; grid-template-columns: max-content minmax(3rem, 1fr) max-content; gap: .45rem .7rem; align-items: center; font-size: .9rem; }
.barres-h li { display: contents; }
.libelle-barre { color: var(--doux); white-space: nowrap; }
.barres-h li.active .libelle-barre { color: var(--encre); font-weight: 700; }
.piste { height: 12px; background: var(--fond); border-radius: 999px; overflow: hidden; }
.remplissage { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.barres-h li.active .remplissage { background: var(--ocre); }
.valeur-barre { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Page publique */
.contenu.large { max-width: 960px; }
.publique .entete-page h1 { font-size: 1.8rem; }
.tuiles.grandes .valeur { font-size: 2.2rem; }
.tuiles.grandes .tuile { padding: 1rem; }
.deux-cartes { display: grid; gap: 0 1rem; }
@media (min-width: 760px) { .deux-cartes { grid-template-columns: 1fr 1fr; } }
.centre { text-align: center; }
.integre { background: transparent; }
.integre .contenu { padding-top: .5rem; }
@media print {
  .barre, .menu-bas, .pas-imprimer, .onglets { display: none !important; }
  body { background: #fff; font-size: 13px; }
  .carte { break-inside: avoid; border-color: #ccc; }
  .contenu { padding: 0; max-width: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Liste de courses */
.carte-courses { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--encre);
  background: var(--ocre-clair); border-radius: var(--rayon); padding: .8rem 1rem; margin: 0 0 1rem; }
.carte-courses svg { width: 26px; height: 26px; color: var(--ocre); flex: none; }
.carte-courses > span:nth-child(2) { flex: 1; display: grid; }
.carte-courses > span:last-child { font-size: 1.4rem; color: var(--ocre); }
.pastille-nombre { background: var(--ocre-clair); color: var(--ocre); font-weight: 800; border-radius: 999px; padding: .1rem .6rem; }
.courses.vide-liste .pastille-nombre { background: var(--fond); color: var(--doux); }
.liste-courses { list-style: none; margin: .3rem 0 0; padding: 0; }
.liste-courses li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--trait); }
.liste-courses li:first-child { border-top: 0; }
.liste-courses form { margin: 0; }
.liste-courses .article { flex: 1; display: grid; min-width: 0; }
.case-achat { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ocre); background: var(--carte); cursor: pointer; flex: none; }
.case-achat:hover, .case-achat:focus-visible { background: var(--ocre-clair); }
.lien-retirer { background: none; border: 0; color: var(--doux); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; padding: .3rem; }
.achetes s { color: var(--doux); }

/* Programme */
.mon-horaire { background: var(--vert); color: #fff; border: 0; }
.mon-horaire .aide { color: rgba(255,255,255,.85); }
.mon-horaire p { margin: .2rem 0; }
.petit-titre { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.grande-date { font-size: 1.5rem; font-weight: 800; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .mon-horaire { background: #1f4d45; }
}
:where(:root[data-theme="dark"]) .mon-horaire { background: #1f4d45; }

.titre-mois { margin: 1.4rem 0 .6rem; font-size: 1.15rem; text-transform: capitalize; }
.jour-programme { border-left: 6px solid var(--trait); }
.jour-programme.je-suis-la { border-left-color: var(--vert); }
.jour-programme.aujourdhui { box-shadow: 0 0 0 2px var(--ocre); }
.jour-programme.ferme { opacity: .65; }
.jour-programme p { margin: .35rem 0; }
.tete-jour { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.jour-date { display: grid; }
.badge-moi { background: var(--vert-clair); color: var(--vert); font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.equipe-jour { display: flex; flex-wrap: wrap; gap: .3rem; }
.personne { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .88rem; font-weight: 600; }
.personne.animation { background: var(--bleu-clair); color: var(--garcons); }
.personne.monitorat { background: var(--violet-clair); color: var(--violet); }
.personne.moi { background: var(--vert); color: #fff; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .personne.moi { color: #10302b; }
}
:where(:root[data-theme="dark"]) .personne.moi { color: #10302b; }

.legende-equipe { display: flex; gap: .4rem; flex-wrap: wrap; margin: .8rem 0 0; }
.activite { white-space: normal; }
.repas { color: var(--ocre); font-weight: 600; font-size: .92rem; }
.modifier-jour summary { cursor: pointer; color: var(--vert); font-size: .9rem; margin-top: .3rem; }
.modifier-jour label { font-weight: 600; }
.liste-idees { margin: 0; padding-left: 1.2rem; }
.liste-idees li { margin: .25rem 0; }
.ligne-fonction { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .3rem 0; }
.ligne-fonction select { width: auto; }
.renommer { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--trait); }

/* Poubelles */
.carte-poubelles { background: var(--vert-clair); border-color: transparent; padding: .8rem 1rem; }
.carte-poubelles summary { cursor: pointer; display: grid; gap: .15rem; list-style: none; }
.carte-poubelles summary::-webkit-details-marker { display: none; }
.titre-poubelles { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--vert); }
.titre-poubelles svg { width: 22px; height: 22px; }
.taches-poubelles { font-weight: 600; }
.semaine-poubelles { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .25rem; font-size: .92rem; }
.semaine-poubelles li.actif { font-weight: 700; color: var(--vert); }

/* Agenda */
.role-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.libelle-role { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); min-width: 6.5rem; }
.form-agenda label { font-weight: 600; }
.supprimer-agenda { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--trait); }

/* Mixité et âges par activité */
.resume p { margin: .3rem 0; line-height: 1.5; }
.mixite { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; }
.mixite li { min-width: 0; }
.mixite .tete-ligne { font-size: .92rem; margin-bottom: .2rem; flex-wrap: wrap; gap: .1rem .6rem; }
.mixite .tete-ligne > span { white-space: normal; }
.nom-mixite { font-weight: 600; }
.barre-mixite, .barre-ages { position: relative; display: flex; height: 1.5rem; border-radius: 6px; overflow: hidden; background: var(--fond); }
.barre-mixite .seg, .barre-ages .age { min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.barre-mixite .seg + .seg, .barre-ages .age + .age { border-left: 2px solid var(--carte, #fff); }
.repere-50 { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--encre, #222); opacity: .55; }
.age-1 { background: #b9d6f5; color: #12324f !important; }
.age-2 { background: #6aa3e3; color: #0d2a47 !important; }
.age-3 { background: #3474c4; }
.age-4 { background: #1d4f8c; }
.age-5 { background: #8a94a6; }
.legende-ages { margin-top: .3rem; }
.carte h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }

/* Propositions d'événements */
.badge-statut { font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--fond); white-space: nowrap; }
.statut-propose .badge-statut { background: #fbe3c2; color: #6b3a00; }
.statut-valide .badge-statut { background: #cdeedd; color: #0d4f30; }
.statut-refuse .badge-statut { background: #f3d3d3; color: #6e1717; }
.statut-refuse { opacity: .75; }

/* Jours travaillés, jour par jour */
.liste-travail { list-style: none; padding: 0; margin: 0; }
.liste-travail li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; padding: .55rem 0; border-top: 1px solid var(--fond); align-items: center; }
.liste-travail li:first-child { border-top: 0; }
.liste-travail .qui-travail { grid-column: 1; }
.liste-travail .lien-retirer { grid-column: 2; grid-row: 1 / span 2; }
.liste-travail li.manque strong { color: var(--danger, #b42318); }
.jour-travaille h2 { font-size: 1.05rem; text-transform: none; }

.resume-salaires td:last-child { font-size: .85rem; color: var(--doux, #555); min-width: 16rem; }
.resume-salaires tfoot th { border-top: 2px solid var(--encre); }
@media (min-width: 900px) { body.role-secretariat .contenu { max-width: 1100px; } }

/* Accueils et horaires */
.horaires-semaine td { vertical-align: top; }
.horaires-semaine tr.premier td { border-top: 2px solid var(--trait, #ddd); }
.horaires-semaine tr.aujourdhui td { background: color-mix(in srgb, var(--ocre, #c97b2a) 10%, transparent); }
.horaires-semaine .etiquette { font-size: .72rem; }
.nowrap { white-space: nowrap; }
.grille-activites { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .8rem; margin: .4rem 0 0; }
.fiche dt { font-weight: 700; color: var(--doux); font-size: .88rem; }
.fiche dd { margin: 0; }

/* Suivi des dépenses */
.grand-pourcent { font-size: 2.6rem; font-weight: 800; margin: 0 0 .4rem; line-height: 1; }
.grand-pourcent span { font-size: 1rem; font-weight: 500; color: var(--doux); margin-left: .4rem; }
.barre-budget { position: relative; height: 1.1rem; border-radius: 999px; background: var(--fond); overflow: visible; }
.barre-budget .rempli { display: block; height: 100%; border-radius: 999px; background: #2f8f5b; }
.barre-budget.attention .rempli { background: #d98a1c; }
.barre-budget.depasse .rempli { background: #c0392b; }
.repere-annee { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--encre, #222); }
.grand-pourcent.attention, .pourcent.attention { color: #b36b00; }
.grand-pourcent.depasse, .pourcent.depasse { color: #c0392b; }
.legende-budget { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.lignes-budget { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.lignes-budget .aide { margin: .25rem 0 0; }
.categorie-budget { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); margin-top: .5rem; }
.pourcent { font-weight: 700; }
.table-depenses td { vertical-align: top; }
.table-depenses tr.statut-a_controler td:first-child { border-left: 3px solid #d98a1c; }
.statut-depense select { padding: .25rem; font-size: .85rem; }
.supprimer-depense summary { font-size: .8rem; color: var(--doux); cursor: pointer; margin-top: .3rem; }
.detail-retour { margin: .4rem 0; }
.detail-retour summary { cursor: pointer; font-weight: 600; color: var(--vert, #1f4d3f); }

/* Semaine en un coup d'œil */
.navigation-semaine { display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; margin: 0 0 .8rem; }
.navigation-semaine strong { flex: 1; text-align: center; white-space: nowrap; }
.navigation-semaine .lien-retirer { flex-basis: 100%; }
.navigation-semaine:has(.lien-retirer) { flex-wrap: wrap; }
.semaine-grille { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.semaine-grille > .jour-colonne { flex: 0 0 78%; }
.semaine-grille > .jour-colonne.vide { flex-basis: 34%; }
@media (min-width: 900px) { .semaine-grille { overflow: visible; } .semaine-grille > .jour-colonne, .semaine-grille > .jour-colonne.vide { flex: 1 1 0; min-width: 0; } }
.jour-colonne { scroll-snap-align: start; background: var(--carte); border-radius: 12px; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; min-height: 6rem; }
.jour-colonne.aujourdhui { outline: 3px solid var(--ocre, #c97b2a); }
.jour-colonne.vide { opacity: .6; }
.jour-titre { font-size: 1rem; margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.jour-num { color: var(--doux); font-weight: 500; font-size: .9rem; }
.bloc-horaire { border-left: 5px solid var(--couleur); background: color-mix(in srgb, var(--couleur) 12%, var(--carte)); border-radius: 8px; padding: .45rem .6rem; }
.bloc-horaire p { margin: 0; line-height: 1.3; }
.bloc-heure { font-weight: 800; font-size: 1.05rem; color: var(--couleur); }
.bloc-nom { font-weight: 700; }
.bloc-public, .bloc-lieu { font-size: .82rem; color: var(--doux); }
.bloc-qui { font-size: .85rem; margin-top: .15rem !important; }
.activite-fiche { border-top: 1px solid var(--fond); padding-top: .6rem; }

/* Semaine : lisible sur ordinateur */
.contenu:has(.semaine-grille) { max-width: 1500px; }
.bloc-nom { overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 900px) {
  .semaine-grille > .jour-colonne.vide { flex: 0 0 6.5rem; }
  .semaine-grille > .jour-colonne:not(.vide) { flex: 1 1 0; }
  .bloc-heure { font-size: .95rem; }
  .bloc-nom { font-size: .95rem; }
}

/* Agenda : catégories */
.badge-categorie { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .5rem; border-radius: 999px; margin: 0 0 .35rem; color: #fff; background: var(--cat, #6b7280); }
.jour-programme[class*="cat-"] { border-left: 5px solid var(--cat, transparent); }
.cat-reunion, .cat-organisation { --cat: #1c7ed6; }
.cat-evenement { --cat: #d6336c; }
.cat-location { --cat: #2f9e44; }
.cat-bus { --cat: #e8590c; }
.cat-entretien { --cat: #0c8599; }
.cat-absence { --cat: #7048e8; }
.filtre-categories a[class*="cat-"]::before { content: ''; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cat); margin-right: .35rem; vertical-align: middle; }
.filtre-categories a[class*="cat-"]:not(.actif) { border-color: var(--cat); }

/* Comité : raccourcis en haut à droite */
.haut-droite { display: flex; gap: .5rem; align-items: center; }
.haut-droite a { display: inline-flex; align-items: center; gap: .35rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: .3rem .8rem; }
.haut-droite a[aria-current="page"] { background: rgba(255,255,255,.18); }
.haut-droite a.rond { padding: .25rem .4rem; display: inline-flex; }
.haut-droite a.rond svg { width: 20px; height: 20px; }

/* Notifications de la page d'accueil */
.notifications { border-left: 6px solid var(--violet); }
.notifications ul { list-style: none; margin: 0; padding: 0; }
.notifications li { padding: .6rem 0; border-top: 1px solid var(--trait); }
.notifications li:first-child { border-top: 0; padding-top: 0; }
.notifications p { margin: 0 0 .4rem; }
.notifications .actions, .liste-demandes .actions, .liste-idees .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.notifications form, .liste-idees .actions form { margin: 0; }
.notif-ok p::before { content: "✓ "; color: var(--vert); font-weight: 800; }
.notif-non p::before { content: "✕ "; color: var(--rouge); font-weight: 800; }
.petit-lien { font-size: .9rem; }

/* Listes à cocher (notes, quittances) */
.liste-taches { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
.liste-taches li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--trait); }
.liste-taches li:first-child { border-top: 0; }
.liste-taches form { margin: 0; }
.liste-taches .article { flex: 1; display: grid; min-width: 0; overflow-wrap: anywhere; }
.liste-taches li.fait .article { color: var(--doux); }
.case-achat.cochee { background: var(--vert); border-color: var(--vert); position: relative; }
.case-achat.cochee::after { content: "✓"; color: #fff; font-weight: 800; position: absolute; inset: 0; display: grid; place-items: center; }

/* Idées, demandes, contacts */
.liste-idees, .liste-demandes, .liste-contacts { list-style: none; margin: .3rem 0 0; padding: 0; }
.liste-idees li, .liste-demandes li { padding: .7rem 0; border-top: 1px solid var(--trait); overflow-wrap: anywhere; }
.liste-idees li:first-child, .liste-demandes li:first-child { border-top: 0; }
.liste-idees p, .liste-demandes p { margin: 0 0 .35rem; }
.liste-idees details { flex-basis: 100%; }
.liste-demandes li.etat-attente { border-left: 4px solid var(--ocre); padding-left: .7rem; }
.liste-contacts li { display: grid; gap: .15rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.liste-contacts li:first-child { border-top: 0; }
.liste-contacts > li > a { color: var(--encre); text-decoration: none; }
.liste-contacts .coordonnees { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .92rem; overflow-wrap: anywhere; }
.lien-nom { color: inherit; }
h1 .lien-nom { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Retour de sortie et petits jobs dans le journal */
details.carte-accueil.sortie { border-style: dashed; border-left-style: solid; }
details.carte-accueil.sortie > summary { display: grid; gap: .15rem; cursor: pointer; list-style: none; }
details.carte-accueil.sortie > summary::-webkit-details-marker { display: none; }
details.carte-accueil.sortie form { margin-top: .7rem; }
.entree-job { border-left: 4px solid var(--violet); padding-left: .8rem; }
.pastille-nombre { white-space: nowrap; }

/* Vacances scolaires */
.bandeau-vacances { border-left: 6px solid var(--ocre); background: var(--ocre-clair); }
.bandeau-vacances p { margin: .3rem 0; }
.etiquette.vacances { background: var(--ocre-clair); color: var(--ocre); display: inline-block; margin: 0 0 .4rem; }

.haut-droite a svg { width: 18px; height: 18px; }

/* Rangement Pont-d'Arve */
.carte-rangement { background: var(--vert-clair, #e3efe9); }
.carte-rangement svg { color: var(--vert); }
.carte-rangement > span:last-child { color: var(--vert); }
.carte-rangement.fini .aide { color: var(--vert); font-weight: 700; }
.salle-rangement .case { align-items: flex-start; }
.ligne-rangement { display: grid; gap: .3rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.ligne-rangement .actions { display: flex; gap: .5rem; align-items: center; }
.autre form .bouton.large + .bouton.large { margin-top: .4rem; }

/* Logo de l'ATB dans la barre du haut */
.logo-atb { background: #fff; border-radius: 8px; padding: 3px 7px; display: inline-flex; line-height: 0; }
.logo-atb img { height: 26px; width: auto; }

/* Budget sur téléphone */
.liste-taches .montant { white-space: nowrap; font-weight: 600; }
details.ligne-budget { border-top: 1px solid var(--trait); padding: .55rem 0; }
details.ligne-budget:first-of-type { border-top: 0; }
details.ligne-budget > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem .8rem; cursor: pointer; list-style: none; }
details.ligne-budget > summary::-webkit-details-marker { display: none; }
details.ligne-budget .nom { font-weight: 600; flex: 1 1 10rem; min-width: 0; }
details.ligne-budget .reste { white-space: nowrap; font-variant-numeric: tabular-nums; }
details.ligne-budget .detail { flex-basis: 100%; font-variant-numeric: tabular-nums; }
details.ligne-budget .negatif { color: #b3261e; font-weight: 700; }
.liste-travail .modifier-personnes { grid-column: 1 / -1; font-size: .9rem; }
.liste-travail .modifier-personnes summary { cursor: pointer; color: var(--doux); text-decoration: underline; }
.liste-travail .modifier-personnes form { margin-top: .4rem; }
.ajouter-cours fieldset { border: 0; padding: 0; margin: .8rem 0 0; }
.ajouter-cours legend { font-weight: 600; padding: 0; }
.ajouter-cours .bouton { margin-top: .8rem; }
.resume-personnes { list-style: none; padding: 0; margin: 0; }
.resume-personnes li { padding: .55rem 0; border-top: 1px solid var(--fond); }
.resume-personnes li:first-child { border-top: 0; }
.resume-personnes li > div:first-child { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.resume-personnes .total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.resume-personnes .aide { font-size: .85rem; margin-top: .15rem; }
.resume-personnes li.somme { border-top: 2px solid var(--encre); }
.resume-salaires td.nombre, .resume-salaires th.nombre { white-space: nowrap; }
.etiquette-manque { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--danger, #b42318); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; }
.liste-travail li.pas-rempli { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(180, 35, 24, .04) 8px 16px); }
.liste-choix-jeunes { list-style: none; padding: 0; margin: .5rem 0; max-height: 15rem; overflow-y: auto; border: 1px solid var(--trait); border-radius: 10px; }
.liste-choix-jeunes li { border-top: 1px solid var(--trait); }
.liste-choix-jeunes li:first-child { border-top: 0; }
.choix-jeune { display: flex; justify-content: space-between; gap: .6rem; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: .7rem .8rem; cursor: pointer; }
.choix-jeune:hover, .choix-jeune:focus-visible { background: var(--fond); }
.champ-jeune { margin-bottom: .4rem; }
.champ-jeune .titre-champ { font-weight: 600; margin: 0 0 .3rem; }
.champ-jeune .jeune-choisi { display: none; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; border: 2px solid var(--vert); border-radius: 10px; }
.champ-jeune .nom-choisi { font-weight: 700; }
.champ-jeune .nom-choisi::before { content: "✓ "; color: var(--vert); }
.champ-jeune.a-un-jeune .jeune-choisi { display: flex; }
.champ-jeune.a-un-jeune .jeune-recherche { display: none; }
.champ-jeune .nouvelle-fiche { margin-top: .6rem; padding: .7rem; border: 1px dashed var(--trait); border-radius: 10px; }
.champ-jeune .nouvelle-fiche .bouton { margin-top: .6rem; }
.choix-jeune:disabled { opacity: .5; cursor: default; }
.choix-jeune:disabled span:first-child::after { content: " · déjà choisi"; font-size: .85em; }
.bandeau-voir-comme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; background: #fff4d6; color: #5c4400; border: 1px solid #e8c766; font-size: .9rem; }
.bandeau-voir-comme .actions-bandeau { display: flex; gap: .7rem; align-items: center; }
.bandeau-voir-comme a { color: inherit; font-weight: 600; }
.liste-voir-comme { list-style: none; padding: 0; margin: 0; }
.liste-voir-comme li { border-top: 1px solid var(--trait); }
.liste-voir-comme li:first-child { border-top: 0; }
.liste-voir-comme form { margin: 0; }
.liste-inscrits { list-style: none; padding: .2rem 1rem; }
.liste-inscrits li + li { border-top: 1px solid var(--trait); }
.liste-inscrits a { display: flex; align-items: center; gap: .6rem; padding: .8rem 0; color: var(--encre); text-decoration: none; font-weight: 600; }
.liste-inscrits a > span:first-child { flex: 1; }
.liste-inscrits a > span:last-child { color: var(--doux); }
.pastille-sante { font-size: .75rem; font-weight: 700; color: var(--danger, #b42318); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; }
#chercher-inscrit { margin-bottom: .8rem; }
.fiche-urgence { border-left: 4px solid var(--vert); }
.fiche-urgence .grand-tel { font-size: 1.25rem; }
.fiche-sante { border-left: 4px solid var(--danger, #b42318); }
.fiche-urgence p, .fiche-sante p { margin: .5rem 0; }
.fiche-infos { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .4rem .8rem; margin: 0; }
.fiche-infos dt { color: var(--doux); font-size: .9rem; }
.fiche-infos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Inscriptions par le formulaire de l'application */
.pastille-suivi { font-size: .75rem; font-weight: 600; color: var(--ocre); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; margin-left: .3rem; }
.liste-inscrits a { gap: .3rem; }
.lien-formulaire p { margin: .2rem 0; }
.lien-copie { overflow-wrap: anywhere; font-size: .9rem; }
.suivi-inscription .case { align-items: flex-start; }
.inscription-publique .intro-inscription { color: var(--doux); line-height: 1.5; }
.formulaire-inscription .section-inscription h2 { margin-top: 0; }
.formulaire-inscription .question { margin: 0 0 1rem; }
.formulaire-inscription .question[hidden], .formulaire-inscription section[hidden] { display: none; }
.formulaire-inscription fieldset { border: 0; padding: 0; margin: 0; }
.formulaire-inscription legend { font-weight: 600; padding: 0; margin-bottom: .2rem; }
.formulaire-inscription .validation { align-items: flex-start; font-weight: 600; }
.formulaire-inscription .validation input { margin-top: .25rem; flex: none; }
.formulaire-inscription textarea { width: 100%; }
.obligatoire { color: var(--rouge); }
.question.en-erreur input:not([type=radio]):not([type=checkbox]), .question.en-erreur textarea { border-color: var(--rouge); }
.question.en-erreur legend, .question.en-erreur > label { color: var(--rouge); }
.erreur-champ { color: var(--rouge); font-size: .9rem; margin: .2rem 0 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inscription-publique .merci h1 { margin-top: 0; }

/* Plus : rubriques qui s'ouvrent */
.rubriques-plus { display: grid; gap: .6rem; margin-bottom: 1rem; }
.rubriques-plus > .liste-plus { margin: 0; }
.rubrique-plus { padding: 0; }
.rubrique-plus > summary { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; cursor: pointer; list-style: none; font-weight: 700; }
.rubrique-plus > summary::-webkit-details-marker { display: none; }
.rubrique-plus > summary::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--doux); transition: transform .15s; }
.rubrique-plus[open] > summary::after { transform: rotate(90deg); }
.rubrique-plus > summary svg { width: 24px; height: 24px; color: var(--vert); flex: none; }
.titre-rubrique { display: flex; flex-direction: column; gap: .1rem; }
.titre-rubrique .aide { font-weight: 400; font-size: .85rem; }
.titre-rubrique .pastille-nombre { align-self: flex-start; }
.rubrique-plus[open] > summary { border-bottom: 1px solid var(--trait); }
.rubrique-plus .liste-plus { margin: 0; padding-left: 1.2rem; }
.rubrique-plus .liste-plus a { font-weight: 500; }
.tel-incomplet { color: var(--rouge); }
.tel-incomplet small { font-weight: 400; font-size: .8rem; }
/* Menu du bas à six entrées (intervenant·es) : texte un peu plus petit, mots jamais coupés en plein milieu */
.menu-bas.six a { font-size: .62rem; letter-spacing: -.01em; padding-left: 0; padding-right: 0; }
.menu-bas.six a svg { padding: 3px 9px; }

/* Notes : idée mise en place ou abandonnée */
.etat-idee { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.etat-idee form { margin: 0; }
.bouton-etat { font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--trait); background: transparent; color: var(--encre); }
.bouton-etat.faite { border-color: var(--vert); color: var(--vert); }
.bouton-etat.abandonnee { border-color: var(--rouge); color: var(--rouge); }
.bouton-etat.actif { background: var(--carte); color: var(--doux); border-style: dashed; }
.badge-etat { display: inline-block; font-weight: 600; padding: 1px 8px; border-radius: 999px; font-size: .85rem; }
.badge-etat.faite { background: var(--vert-clair); color: var(--vert); }
.badge-etat.abandonnee { background: var(--rouge-clair); color: var(--rouge); }
.liste-idees li.classee > p:first-child { opacity: .75; }
.liste-idees li.abandonnee > p:first-child { text-decoration: line-through; }
details.idees-classees { margin-top: 14px; }
details.idees-classees summary { cursor: pointer; font-weight: 600; color: var(--vert); }
/* Petits jobs : heure tapée illisible */
input.heure-erreur { border-color: var(--rouge); background: var(--rouge-clair); }

/* Agenda : filtre par catégorie (liste déroulante), dates alignées, textes longs */
form.filtre-categories { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
form.filtre-categories label { margin: 0; flex: none; }
form.filtre-categories select { flex: 1; min-height: 42px; }
.grille-dates { align-items: end; }
.grille-dates label { margin-top: .6rem; }
.contenu { overflow-wrap: break-word; }
.activite, .liste-idees p, .entree dd { overflow-wrap: anywhere; }
.liste-taches li:has(.modifier-tache) { flex-wrap: wrap; }
.modifier-tache { flex-basis: 100%; margin: -.2rem 0 0 2.6rem; }
.modifier-tache summary { cursor: pointer; color: var(--doux); font-size: .85rem; }
.modifier-tache[open] summary { margin-bottom: .3rem; }
.modifier-note summary { cursor: pointer; color: var(--doux); font-size: .9rem; }

/* Quittances de salaire des petits jobs */
.ligne-tarif { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.ligne-tarif label { grid-column: 1 / -1; margin-bottom: 0; }
.tete-quittance { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.tableau-quittance { width: 100%; margin: .6rem 0; }
.tableau-quittance tfoot th { text-align: left; }
.tableau-quittance .nombre { text-align: right; white-space: nowrap; }
.signatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.ligne-signature { border-bottom: 1px solid var(--encre); height: 3.2rem; }
@media print {
  .quittance { break-after: page; border: 0; box-shadow: none; padding: 0; }
  .quittance:last-of-type { break-after: auto; }
  .message { display: none; }
}

/* Aujourd'hui : menu « Faire un retour » (petit job ou stage, sortie, camp) */
.choix-retour { display: grid; gap: .5rem; margin-top: .7rem; }
.sous-retour-lien, .sous-retour > summary { display: grid; gap: .1rem; padding: .7rem .8rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); color: var(--encre); text-decoration: none; cursor: pointer; list-style: none; }
.sous-retour > summary::-webkit-details-marker { display: none; }
.sous-retour > summary::after, .sous-retour-lien::after { content: '›'; justify-self: end; margin-top: -1.6rem; color: var(--doux); font-size: 1.2rem; }
.sous-retour[open] > summary { border-color: var(--vert); }
.sous-retour[open] > summary::after { content: '⌄'; }
details.carte-accueil.sortie .sous-retour form { margin: .3rem .2rem .4rem; }

/* Fiche d'un jeune : son inscription */
.fiche-inscription h3 { font-size: 1rem; margin: .9rem 0 .2rem; }
.badges-inscription { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-photos { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--trait); font-size: .88rem; font-weight: 600; }
.badge-photos.oui { background: var(--vert-clair); color: var(--vert); border-color: var(--vert); }
.badge-photos.non { background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge); }

/* Réglages des notifications */
.ligne-rappel { display: grid; grid-template-columns: 1fr 7.5rem; gap: .6rem; align-items: center; border-top: 1px solid var(--trait); padding: .3rem 0; }
.ligne-rappel:first-of-type { border-top: 0; }
.ligne-rappel label.case { margin: 0; }
.heure-rappel { margin: 0; font-weight: 400; display: flex; gap: .4rem; align-items: center; }
.alerte-douce { background: var(--ocre-clair); border-radius: 10px; padding: .6rem .8rem; }
.alerte-douce ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.adresse-taches { display: block; overflow-wrap: anywhere; background: var(--fond); padding: .5rem; border-radius: 8px; font-size: .85rem; }

/* 27 octobre 2026 */
.invisible { visibility: hidden; }
.tete-jours { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: .4rem; }
.tete-jours h1 { margin: 0; text-align: center; }
.fleche-jour { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--carte); border: 1px solid var(--trait);
  color: var(--vert); text-decoration: none; font-size: 1.8rem; line-height: 1; padding-bottom: .15rem; }
.fleche-jour:active { background: var(--vert-clair); }
.retour-aujourdhui { display: block; font-size: .85rem; font-weight: 500; margin-top: .2rem; }
.carte-consigne { background: var(--ocre-clair); border-color: transparent; padding: .8rem 1rem; display: grid; gap: .15rem; }
.carte-consigne .titre-poubelles { color: var(--ocre); }
/* Agenda : catégories à cocher */
.filtre-agenda { margin: 0 0 .8rem; }
.filtre-agenda > .aide { margin: 0 0 .35rem; font-size: .85rem; }
.puces-categories { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.puce-cat, .puce-tout { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; font-size: .88rem; text-decoration: none;
  border: 2px solid var(--cat, var(--trait)); color: var(--doux); background: var(--carte); }
.puce-cat::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--cat); background: transparent; flex: none; }
.puce-cat::before { background: var(--cat); }
.puce-cat.active { background: var(--cat); color: #fff; }
.puce-cat.active::before { background: #fff; border-color: #fff; }
.avec-choix .puce-cat:not(.active), .puce-cat.eteinte { opacity: .45; filter: grayscale(1); }
.puce-tout { border-style: dashed; color: var(--vert); }
.salle-agenda { margin: .1rem 0; font-weight: 600; font-size: .92rem; }
.salle-agenda::before { content: '⌂ '; color: var(--cat, var(--doux)); }
/* Notes */
.onglets-notes { flex-wrap: wrap; }
.onglets a.ajouter-liste { border-style: dashed; color: var(--vert); }
.pour-qui { margin: .4rem 0 .6rem; }
.pour-qui summary { cursor: pointer; font-weight: 600; }
.cases-collegues { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 .6rem; margin: .4rem 0; }
.titre-personne { font-size: 1rem; margin: .8rem 0 .1rem; }
.titre-personne:first-child { margin-top: 0; }
.case-achat.lecture { cursor: default; opacity: .5; }
.en-retard { color: var(--rouge); font-weight: 600; }
/* Administration : personnes */
.groupe-personnes > summary { cursor: pointer; }
.groupe-personnes .personnes { margin-top: .6rem; }
.gerer-personne > summary { cursor: pointer; color: var(--vert); font-weight: 600; font-size: .92rem; }
.gerer-personne[open] { border-left: 3px solid var(--trait); padding-left: .7rem; margin: .3rem 0; }
/* Notifications : un accueil, ses jours */
.groupe-rappel { border-top: 1px solid var(--trait); padding: .55rem 0; }
.groupe-rappel:first-of-type { border-top: 0; }
.groupe-rappel > summary { cursor: pointer; }
.groupe-rappel > summary .aide { display: block; padding-left: 1.1rem; }
.groupe-rappel .ligne-rappel { padding-left: .4rem; }
.rappels-suivants { padding: 0 0 .4rem 2.2rem; font-size: .9rem; }
.rappels-suivants .case { margin: .15rem 0; }
/* Jours de la semaine (page Aujourd'hui) */
.jours-semaine { display: flex; justify-content: space-between; gap: .3rem; margin: .7rem 0 0; }
.jours-semaine a { flex: 1; max-width: 44px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-weight: 700;
  color: var(--encre); background: var(--carte); border: 1px solid var(--trait); position: relative; }
.jours-semaine a.choisi { background: var(--vert); border-color: var(--vert); color: #fff; }
.jours-semaine a.aujourdhui::after { content: ''; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--ocre); }
:where(:root[data-theme="dark"]) .jours-semaine a.choisi { color: #10302b; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .jours-semaine a.choisi { color: #10302b; } }
/* Retours pas remplis (page Aujourd'hui) */
.retours-manquants { padding: .6rem 1rem; }
.retours-manquants summary { cursor: pointer; font-size: .92rem; color: var(--doux); }
.retours-manquants ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.retours-manquants li a { display: inline-block; padding: .3rem .65rem; border-radius: 999px; border: 1px dashed var(--ocre); color: var(--encre); text-decoration: none; font-size: .88rem; }
/* Téléphone avec indicatif */
.champ-tel { display: grid; grid-template-columns: auto 1fr; gap: .4rem; }
.champ-tel select { width: auto; min-width: 6.2rem; }
/* Choix du jour d'un accueil */
.choix-dates { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .5rem; }
.choix-dates .bouton { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; text-align: left; }
.choix-dates .bouton .aide { color: inherit; opacity: .85; }
/* Mode clair / sombre */
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; background: var(--fond); padding: .25rem; border-radius: 12px; border: 1px solid var(--trait); }
.segments button { font: inherit; font-size: .9rem; padding: .55rem .3rem; border: 0; border-radius: 9px; background: transparent; color: var(--encre); cursor: pointer; }
.segments button[aria-checked="true"] { background: var(--vert); color: #fff; font-weight: 600; }
:where(:root[data-theme="dark"]) .segments button[aria-checked="true"] { color: #10302b; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .segments button[aria-checked="true"] { color: #10302b; } }
.version-app { text-align: center; margin: 1rem 0 .5rem; }

/* Mes heures */
.navigation-mois { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.resume-heures { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .6rem; }
.resume-heures > div { display: grid; }
.resume-heures > div strong { font-size: 1.35rem; }
.resume-heures .plein { grid-column: 1 / -1; margin: 0; }
.liste-heures { list-style: none; margin: 0; padding: 0; }
.liste-heures > li { border-top: 1px solid var(--trait); padding: .6rem 0; }
.liste-heures > li:first-child { border-top: 0; }
.ligne-heure { display: flex; justify-content: space-between; gap: .6rem; }
.ligne-heure .montant { text-align: right; white-space: nowrap; font-weight: 600; }
.detail-heure { margin: .2rem 0 0; font-size: .85rem; }
.raccourcis-heures { display: grid; gap: .45rem; margin-bottom: .7rem; }
.raccourcis-heures .aide { margin: 0; }
.choix-jour { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .7rem; }
.choix-jour input[type=date] { width: auto; flex: 1 1 9rem; margin: 0; }
.puce-jour { border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .9rem; cursor: pointer; }
.puce-jour.active { background: var(--vert); border-color: var(--vert); color: var(--carte); font-weight: 600; }
.raccourci-heure { display: grid; gap: .1rem; text-align: left; width: 100%; border: 1.5px solid var(--trait); background: var(--vert-clair); color: var(--encre); border-radius: 12px; padding: .6rem .8rem; font: inherit; cursor: pointer; }
.raccourci-heure span { font-size: .85rem; color: var(--doux); }
.raccourci-heure.active { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert) inset; }
.raccourci-heure.deja { background: var(--carte); }
.reglage-heure { display: grid; grid-template-columns: 3.4rem 3rem 1fr 3rem; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.reglage-heure input[type=time] { margin: 0; text-align: center; font-size: 1.15rem; font-weight: 600; }
.reglage-heure .nom-heure { font-weight: 600; }
.reglage-heure .pas { height: 2.75rem; border: 1.5px solid var(--trait); background: var(--carte); color: var(--vert); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
.reglage-heure .pas:active { background: var(--vert-clair); }
.duree-heures { margin: .1rem 0 .6rem; font-weight: 600; color: var(--vert); min-height: 1.3em; }
.options-heures { margin: .2rem 0 .8rem; }
.options-heures summary { color: var(--doux); cursor: pointer; padding: .3rem 0; }
.tableau-heures { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau-heures th, .tableau-heures td { text-align: left; padding: .45rem .3rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau-heures th { font-size: .8rem; color: var(--doux); font-weight: 600; }
.ligne-taux { display: flex; align-items: flex-end; gap: .5rem; margin: .4rem 0; }
.ligne-taux label { flex: 1; margin: 0; }
.liste-appareils { list-style: none; padding: 0; margin: .3rem 0 .6rem; }
.liste-appareils li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; border-top: 1px solid var(--trait); padding: .4rem 0; }
.liste-appareils li:first-child { border-top: 0; }
.liste-appareils form { margin: 0; }

/* Sorties et sondages (listes par lien) */
.infos-sortie { margin: .3rem 0; }
.form-liste input[type=text] { font-size: 1.1rem; }
.choix-sondage { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1.5px solid var(--trait); border-radius: 10px; margin-bottom: .4rem; background: var(--carte); }
.choix-sondage:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); }
.liste-prenoms { margin: .3rem 0 0; padding-left: 1.6rem; columns: 2; column-gap: 1.5rem; }
.liste-prenoms li { padding: .15rem 0; break-inside: avoid; }
.liste-prenoms li.moi { font-weight: 700; color: var(--vert); }
.resultats-sondage { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.resultats-sondage li { display: grid; grid-template-columns: minmax(6rem, 1fr) 2fr 2rem; gap: .5rem; align-items: center; }
.barre-sondage { height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--vert) var(--part), var(--vert-clair) var(--part)); }
.resultats-sondage strong { text-align: right; }
.alerte-derniere-minute { border-left: 6px solid var(--rouge); background: var(--rouge-clair); display: grid; gap: .6rem; }
.alerte-derniere-minute h2 { margin: 0; color: var(--rouge); }
.ma-reponse { border-left: 6px solid var(--vert); }
.partage-liste input[readonly] { font-size: .9rem; }
.actions-partage { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.liste-inscrits { margin: .3rem 0 .8rem; padding-left: 1.6rem; }
.liste-inscrits li { padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.liste-inscrits li > span { display: inline-block; min-width: 60%; }
.liste-inscrits form { display: inline; float: right; }
.historique-liste { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .92rem; }
.historique-liste li { padding: .35rem 0; border-bottom: 1px solid var(--trait); }
.historique-liste li.derniere-minute { color: var(--rouge); }
.historique-liste .aide { display: inline-block; min-width: 7.5rem; }
.liste-listes { list-style: none; margin: 0; padding: 0; }
.liste-listes li a { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); color: inherit; text-decoration: none; }
.actions-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.champ-court { width: 5rem !important; display: inline-block; }

/* Comptabilité : marge décidée en équipe */
.decision-marge { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 12px; background: var(--vert-clair); border-left: 5px solid var(--vert); margin-bottom: .6rem; }
.decision-marge strong { font-size: 1.4rem; }
.propositions-marge { list-style: none; margin: .2rem 0 .4rem; padding: 0; }
.propositions-marge li { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--trait); }
.propositions-marge .montant { font-weight: 600; white-space: nowrap; }

/* Absences et vacances */
.onglets-pleins { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: 14px; background: var(--trait); margin-top: .6rem; }
.onglets-pleins a { text-align: center; padding: .6rem; border-radius: 11px; text-decoration: none; color: var(--doux); font-weight: 600; }
.onglets-pleins a.actif { background: var(--carte); color: var(--encre); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tete-calendrier { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.tete-calendrier h2 { margin: 0; }
.grille-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.nom-jour { text-align: center; font-size: .78rem; font-weight: 700; color: var(--doux); padding: .2rem 0; }
.case-jour { min-height: 3.6rem; border-radius: 8px; background: var(--fond); padding: .2rem; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .15rem; }
.case-jour .numero { width: 100%; font-size: .82rem; font-weight: 700; }
.case-jour.ferme { background: repeating-linear-gradient(135deg, var(--fond) 0 6px, var(--trait) 6px 8px); }
.case-jour.ferme .numero, .case-jour.hors-mois .numero { color: var(--doux); font-weight: 500; }
.case-jour.hors-mois { opacity: .55; }
.case-jour.aujourdhui { outline: 2px solid var(--rouge); outline-offset: -2px; }
.pastille-personne { background: var(--c); color: #fff; font-size: .62rem; font-weight: 800; border-radius: 5px; padding: .05rem .2rem; line-height: 1.3; }
.pastille-personne.demi { background: linear-gradient(90deg, var(--c) 50%, color-mix(in srgb, var(--c) 45%, transparent) 50%); }
.legende-personnes { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .7rem 0 .3rem; padding: 0; }
.legende-personnes li, .liste-absences li { display: flex; align-items: flex-start; gap: .45rem; }
.point { width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); flex: none; margin-top: .3rem; }
.liste-absences { list-style: none; margin: .3rem 0 .8rem; padding: 0; }
.liste-absences li { padding: .45rem 0; border-bottom: 1px solid var(--trait); }
.liste-absences li > span:last-child { flex: 1; }
.liste-absences form { display: inline-block; margin: .3rem .5rem 0 0; }
.types-absence { border: 0; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.types-absence legend { font-weight: 600; margin-bottom: .3rem; }
.puce-type input { position: absolute; opacity: 0; }
.puce-type span { display: inline-block; padding: .45rem .75rem; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); font-size: .9rem; cursor: pointer; }
.puce-type input:checked + span { background: var(--vert); border-color: var(--vert); color: var(--carte); font-weight: 600; }
.puce-type input:focus-visible + span { outline: 2px solid var(--vert); outline-offset: 2px; }
.moment-absence { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .4rem; }
.ajout-certificat label.bouton { cursor: pointer; }
.carte-jour-perso .tete-ligne { text-decoration: none; color: inherit; }
.rdv-perso { list-style: none; margin: .2rem 0 .6rem; padding: 0; }
.rdv-perso li { display: flex; gap: .7rem; padding: .35rem 0; border-bottom: 1px solid var(--trait); }
.rdv-perso li.absent { color: var(--doux); font-style: italic; }
.heure-rdv { min-width: 5.5rem; font-variant-numeric: tabular-nums; color: var(--vert); font-weight: 600; }
.jour-agenda { font-size: 1rem; margin: 1rem 0 .2rem; }
.jour-agenda.aujourdhui { color: var(--vert); }
.absents-du-jour { margin: .3rem 0 0; }
.age-inscrit { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--bleu-clair); color: var(--encre); font-size: .82rem; font-weight: 600; }
.choix-accueil-courses { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.choix-accueil-courses .puce-jour { text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.choix-accueil-courses .puce-jour.active .pastille-nombre { background: var(--carte); color: var(--vert); }
.ajout-course { display: flex; gap: .5rem; margin: .3rem 0 .8rem; }
.ajout-course input { flex: 1; margin: 0; font-size: 1.05rem; }
.ajout-course .bouton { min-width: 3.2rem; font-size: 1.3rem; padding: 0 .9rem; }

/* v1.8 : mon agenda en grille du mois */
.calendrier-perso .case-jour { text-decoration: none; color: inherit; min-height: 4.4rem; align-content: flex-start; overflow: hidden; }
.calendrier-perso .case-jour.choisi { background: color-mix(in srgb, var(--rouge) 12%, var(--fond)); }
.rdv-case { display: block; width: 100%; font-size: .62rem; line-height: 1.25; background: color-mix(in srgb, var(--bleu, #2b6cb0) 18%, transparent); border-left: 3px solid var(--bleu, #2b6cb0); border-radius: 3px; padding: 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv-case.absent { border-left-color: var(--doux); background: var(--trait); }
.rdv-case.plus { background: none; border: 0; color: var(--doux); font-weight: 700; }

/* v1.8 : ma caisse */
.sens-caisse { display: flex; gap: .4rem; margin-bottom: .6rem; }
.journal-caisse { list-style: none; margin: 0; padding: 0; }
.journal-caisse li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--trait); }
.journal-caisse li:last-child { border-bottom: 0; }
.journal-caisse .montant { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.journal-caisse .montant.recette { color: var(--vert, #2f7d4f); }
.liste-plus a[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* v1.9 : bascule entre les deux agendas, prochain rendez-vous en une ligne, ajout dans l'agenda personnel */
.bascule-agenda { margin-top: .4rem; }
.bascule-agenda a { font-size: 1rem; padding: .7rem .4rem; }
.prochain-rdv { margin: .2rem .2rem .8rem; padding: .5rem .75rem; border-left: 4px solid var(--vert); background: var(--carte); border-radius: 8px; font-size: .92rem; line-height: 1.35; }
.rdv-perso li form { margin-left: auto; }
.ajout-rdv-perso { margin: .8rem 0 .4rem; }
.ajout-rdv-perso > summary { list-style: none; display: inline-block; cursor: pointer; }
.ajout-rdv-perso > summary::-webkit-details-marker { display: none; }
.ajout-rdv-perso[open] > summary { margin-bottom: .6rem; }
.case-journee { display: flex; align-items: center; gap: .4rem; align-self: end; padding-bottom: .5rem; }
.case-journee input { width: auto; }

/* v1.9 : documents lisibles dans l'application */
.sommaire-doc { columns: 1; padding-left: 1.2rem; margin: .3rem 0; }
.sommaire-doc li { margin: .25rem 0; }
.section-doc h2 { font-size: 1.1rem; margin-top: 0; }
.section-doc h3 { font-size: .98rem; margin: .9rem 0 .3rem; }
.section-doc ul { padding-left: 1.2rem; margin: .3rem 0; }
.section-doc li { margin: .3rem 0; line-height: 1.45; }
.section-doc p { line-height: 1.5; }
.telecharger-doc { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* v1.10 : Sorties et sondages, deux boutons de même taille côte à côte */
.nouvelle-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.nouvelle-liste .bouton { text-align: center; justify-content: center; }
.budget-jobs h2 .aide { font-size: .85rem; font-weight: 400; margin-left: .3rem; }
.chiffres-budget { margin: .3rem 0; }
.montant-jeune input { max-width: 10rem; }

/* v1.10 : la quittance tient dans son cadre sur téléphone (texte qui passe à la ligne, signatures l'une sous l'autre) */
.quittance { overflow-wrap: break-word; }
.tete-quittance div { min-width: 0; }
.tableau-quittance { table-layout: fixed; border-collapse: collapse; }
.tableau-quittance th, .tableau-quittance td { padding: .4rem .25rem; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.tableau-quittance thead th:nth-child(1) { width: 19%; }
.tableau-quittance thead th:nth-child(3) { width: 23%; }
.tableau-quittance thead th:nth-child(4) { width: 13%; }
.tableau-quittance thead th:nth-child(5) { width: 19%; }
.tableau-quittance td:nth-child(1), .tableau-quittance .nombre { white-space: nowrap; }
.signatures > div { min-width: 0; }
@media (max-width: 600px) {
  .tableau-quittance { font-size: .82rem; }
  .signatures { grid-template-columns: 1fr; gap: .4rem; }
  .ligne-signature { height: 2.6rem; }
}
.apercu-courriel { margin: .5rem 0; }
.texte-courriel { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--fond); padding: .7rem; border-radius: 8px; overflow-wrap: anywhere; }
.envoi-babvia { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem .2rem 1rem; }
.envoi-babvia input { margin-top: .25rem; flex: none; }
.champs-facture { align-items: end; }

/* v1.12 : signatures de la quittance alignées (titre, puis une ligne à la même hauteur pour les trois) */
.signatures { align-items: start; }
.titre-signature { margin: 0 0 .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-signature { margin: .2rem 0 0; font-size: .8rem; color: var(--doux); }
.ligne-signature { display: flex; align-items: flex-end; padding-bottom: .2rem; color: var(--doux); }

/* v1.12 : accueil qui n'a pas eu lieu */
.carte-accueil.annulee { opacity: .75; }
.carte-accueil.annulee .etat { color: var(--doux); }
.carte-annulee { border-left: 4px solid var(--doux); }
.pas-eu-lieu > summary { cursor: pointer; font-weight: 600; }
.raisons-annulation { border: 0; padding: 0; margin: .6rem 0; }
.raisons-annulation legend { font-weight: 600; margin-bottom: .3rem; }

/* v1.13 : sorties réservées aux jeunes inscrit·es (numéro, fiche, code QR) */
.liste-inscrits .inscrit-infos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.inscrit-contact { font-size: .85rem; color: var(--doux); }
.inscrit-contact a { white-space: nowrap; }
.ajout-numero { display: inline-block; }
.ajout-numero > summary { cursor: pointer; color: var(--vert); text-decoration: underline; list-style: none; }
.ajout-numero .ligne-formulaire { margin-top: .3rem; }
.ajout-inscrit { margin-top: .8rem; display: grid; gap: .5rem; }
.code-qr { margin-top: .8rem; }
.code-qr > summary { cursor: pointer; font-weight: 600; }
.qr-liste { max-width: 260px; margin: .6rem auto 0; background: #fff; padding: 6px; border-radius: 8px; }
.qr-liste svg { display: block; width: 100%; height: auto; }
.reserve-liste { margin: 0 0 .8rem; }
.retrouver-reponse > summary { cursor: pointer; font-weight: 600; }
.liste-inscrits li:has(.inscrit-infos) { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.liste-inscrits li > .inscrit-infos { display: flex; min-width: 0; flex: 1; }
.liste-inscrits .inscrit-contact a { display: inline; padding: 0; font-weight: 400; color: var(--vert); text-decoration: underline; }
.liste-inscrits li:has(.inscrit-infos) form { float: none; }
.choix-fiches { border: 0; padding: 0; margin: 0; }
.choix-fiches legend { font-weight: 600; margin-bottom: .4rem; }
.liste-fiches { max-height: 16rem; overflow-y: auto; border: 1px solid var(--trait); border-radius: 8px; padding: .3rem .6rem; margin-top: .4rem; }
.liste-fiches label { display: flex; padding: .35rem 0; }
.liste-fiches label[hidden] { display: none; }

/* v1.13 : Mon agenda par semaine (jours en haut, heures à gauche) */
.choix-vue { display: inline-flex; border: 1px solid var(--trait); border-radius: 999px; overflow: hidden; margin: .5rem 0 0; }
.choix-vue a { padding: .3rem .9rem; text-decoration: none; color: var(--encre); font-weight: 600; font-size: .9rem; }
.choix-vue a.actif { background: var(--vert); color: #fff; }
.grille-semaine { display: grid; grid-template-columns: 2.1rem repeat(7, minmax(0, 1fr)); column-gap: 2px; margin-top: .6rem; }
.grille-semaine .tete-jour { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; padding: .2rem 0; border-radius: 6px; font-size: .75rem; }
.grille-semaine .tete-jour strong { font-size: 1rem; }
.grille-semaine .tete-jour.ferme { color: var(--doux); }
.grille-semaine .tete-jour.aujourdhui strong { background: var(--rouge); color: #fff; border-radius: 999px; padding: 0 .35rem; }
.grille-semaine .tete-jour.choisi { background: color-mix(in srgb, var(--rouge) 12%, var(--fond)); }
.grille-semaine .journee-titre { font-size: .6rem; color: var(--doux); align-self: center; }
.journee-semaine { min-height: .4rem; display: flex; flex-direction: column; gap: 1px; padding-bottom: 2px; border-bottom: 1px solid var(--trait); }
.heures-semaine { display: flex; flex-direction: column; }
.heures-semaine span { height: var(--px); font-size: .62rem; color: var(--doux); text-align: right; padding-right: .2rem; transform: translateY(-.4em); }
.colonne-jour { position: relative; display: block; height: calc(var(--heures) * var(--px)); background: repeating-linear-gradient(to bottom, var(--trait) 0, var(--trait) 1px, transparent 1px, transparent var(--px)); text-decoration: none; color: inherit; }
.colonne-jour.aujourdhui { background-color: color-mix(in srgb, var(--rouge) 6%, transparent); }
.rdv-semaine { position: absolute; left: 1px; right: 1px; overflow: hidden; font-size: .6rem; line-height: 1.2; padding: 1px 2px; border-radius: 3px; background: color-mix(in srgb, var(--bleu, #2b6cb0) 22%, var(--fond)); border-left: 3px solid var(--bleu, #2b6cb0); overflow-wrap: break-word; hyphens: auto; }
.rdv-semaine.absent { background: var(--trait); border-left-color: var(--doux); }
.rdv-semaine b { font-weight: 700; display: block; }
.groupes-invites { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: -.3rem 0 .8rem; }
.choix-periode { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.choix-periode a { padding: .25rem .7rem; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; color: var(--encre); font-size: .9rem; }
.choix-periode a.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

/* v1.14 — Sorties et sondages : une ligne claire par jeune, paiement à côté du nom */
ol.liste-inscrits { padding-left: 1.5rem; }
.liste-inscrits li.inscrit { display: block; padding: .6rem 0; }
.liste-inscrits li.inscrit::marker { color: var(--doux); font-size: .9rem; }
.inscrit-tete { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.inscrit-nom { min-width: 0; overflow-wrap: anywhere; }
.liste-inscrits li.inscrit form { float: none; display: block; }
.liste-inscrits li.inscrit .inscrit-tete form { flex: none; }
.liste-inscrits li.inscrit .inscrit-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; margin-top: .15rem; }
.liste-inscrits li.inscrit .inscrit-contact:empty { display: none; }
.liste-inscrits li.inscrit .ajout-numero[open] { flex-basis: 100%; }
.paiement-inscrit { display: flex !important; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .4rem; }
.paiement-inscrit input[type=text] { flex: 1; min-width: 11rem; margin: 0; padding: .35rem .6rem; font-size: .9rem; }
.case-paye { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .8rem; border: 1px solid var(--trait); border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.case-paye input { margin: 0; width: 1.1rem; height: 1.1rem; }
.a-paye .case-paye { background: var(--vert-clair); border-color: var(--vert); color: var(--vert); }
.copier-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.choix-reponse { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.paiement-liste { align-items: end; }
.mettre-a-jour-liste { margin: 1rem 0; }

/* v1.14 — Notes : modifier directement à la place du texte */
.liste-taches li:has(> .modifier-tache[open]) > .article,
.liste-idees li:has(.modifier-sur-place[open]) > :not(.actions),
.liste-idees .actions:has(.modifier-sur-place[open]) > :not(.modifier-sur-place) { display: none; }
.liste-taches li > .modifier-tache[open] { order: 1; flex: 1 1 0; flex-basis: auto; margin: 0; min-width: 0; }
.liste-taches li:has(> .modifier-tache[open]) > form:not(.cocher) { order: 2; }
.modifier-tache[open] > summary, .modifier-sur-place[open] > summary { display: none; }
.modifier-tache[open] textarea, .modifier-sur-place[open] textarea { width: 100%; }
.boutons-modifier { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }

/* v1.14 — Ordinateur : rappel discret sous un champ de texte (Entrée enregistre) */
.aide-entree { display: block; font-size: .78rem; color: var(--doux); margin: -.2rem 0 .4rem; }

/* v1.14 — Heures à rattraper */
.carte-rattrapage { display: grid; gap: .2rem; color: var(--encre); text-decoration: none; border-left: 6px solid var(--ocre); }
.carte-rattrapage .lien-suite { color: var(--vert); font-weight: 600; font-size: .9rem; }
.chiffre-rattrapage { font-size: 1.1rem; margin: .2rem 0; }
.chiffre-rattrapage strong { font-size: 1.8rem; }
.objectif-rattrapage { background: var(--ocre-clair); border-radius: 10px; padding: .7rem .9rem; }
.objectif-rattrapage .grand { font-size: 1.5rem; }
.carte-etat, .simulation { border-radius: 10px; padding: .6rem .8rem; background: var(--bleu-clair); margin: .6rem 0; }
.carte-etat.ok, .simulation.ok { background: var(--vert-clair); }
.carte-etat.alerte, .simulation.alerte { background: var(--rouge-clair); }
.simulation:empty { display: none; }
.planning-rattrapage td { vertical-align: middle; }
.planning-rattrapage .cette-semaine td { background: var(--ocre-clair); }
.planning-rattrapage .passee td { color: var(--doux); }
.planning-rattrapage input { width: 5.5rem; text-align: right; margin: 0; }
.champ-erreur { border-color: var(--rouge) !important; background: var(--rouge-clair) !important; }

/* v1.14 — Inscriptions : date de naissance à côté de l'âge */
.naissance-inscrit { font-weight: 400; color: var(--doux); font-size: .85rem; }
.liste-jobs li:has(> .lien-quittance) { display: flex; align-items: center; gap: .6rem; }
.liste-jobs li > a:first-child { flex: 1; min-width: 0; }
.liste-jobs .lien-quittance { flex: none; padding: .4rem .8rem !important; border-radius: 999px; background: var(--vert-clair); color: var(--vert) !important; font-weight: 600; font-size: .85rem; }
.choisir-quittance { margin: .6rem 0; }
.choisir-quittance summary { cursor: pointer; color: var(--vert); font-weight: 600; }
.form-choix-quittance { margin-top: .5rem; }

/* v1.14 — Tâches du jour à cocher (poubelles, frigo) */
.taches-du-jour { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }
.taches-du-jour li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.taches-du-jour li.fait .article { color: var(--doux); }
.taches-du-jour .aide { font-weight: 400; }
.taches-du-jour form { margin: 0; }
.semaine-poubelles-details summary { cursor: pointer; color: var(--vert); font-size: .9rem; margin-top: .5rem; }

/* v1.14 — Sorties : points clés, inscrire nous-mêmes, argent reçu */
.points-cles { border: 1px solid var(--trait); border-radius: 12px; padding: .6rem .9rem .3rem; margin: .4rem 0 .8rem; }
.points-cles legend { font-weight: 700; padding: 0 .3rem; }
.point-cle { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--trait); }
.point-cle:first-of-type { border-top: 0; }
.point-cle input { margin: 0; }
.point-cle label { margin: 0; font-size: .85rem; }
.titre-point { font-weight: 700; }
.trois-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.combien { display: grid; grid-template-columns: 5rem auto 1fr; gap: .4rem; align-items: center; }
@media (max-width: 560px) {
  .point-cle { grid-template-columns: 1fr; gap: .25rem; }
  .combien { grid-template-columns: 5rem auto; }
  .combien input[name=prix_comprend] { grid-column: 1 / -1; }
}
.points-cles-liste { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .5rem 0 0; }
.points-cles-liste dt { font-weight: 700; }
.points-cles-liste dd { margin: 0; }
.points-cles-liste.publique { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: .7rem .9rem; }
.inscrire-nous { margin-top: .6rem; border-top: 1px solid var(--trait); padding-top: .6rem; }
.inscrire-nous > summary, .code-qr > summary { cursor: pointer; font-weight: 600; }
.a-inscrire { margin: .3rem 0; padding-left: 1.4rem; }
.a-inscrire li { padding: .15rem 0; }
.a-inscrire:empty { display: none; }
.choix-inscrire { list-style: none; padding: 0; margin: .2rem 0 .4rem; display: grid; gap: .2rem; }
.choix-inscrire li[hidden] { display: none; }
.choix-inscrire button { width: 100%; text-align: left; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: .45rem .7rem; font: inherit; color: var(--encre); cursor: pointer; }
.choix-inscrire .nouveau-jeune button { border-style: dashed; }
.montant-paye { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.montant-paye input { width: 4.5rem; margin: 0; padding: .35rem .5rem; text-align: right; }
.recu-par { flex-basis: 100%; }
.encaissement { margin-top: 1rem; padding-top: .8rem; border-top: 2px solid var(--trait); }
.encaissement h3 { margin: 0 0 .4rem; }
.form-encaisser { background: var(--vert-clair); border-radius: 12px; padding: .8rem; display: grid; gap: .4rem; }
.form-encaisser p { margin: 0; }
.signatures-deux { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.trois-colonnes { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 560px) { .trois-colonnes { grid-template-columns: 1fr 1fr; } .trois-colonnes > label:first-child { grid-column: 1 / -1; } }
.places-sortie input { max-width: 8rem; display: block; }
.paiement-inscrit .case-paye, .paiement-inscrit .montant-paye { width: auto; flex: none; margin: 0; display: inline-flex; }
.paiement-inscrit .montant-paye input { width: 4.8rem !important; min-width: 0; flex: none; }
.paiement-inscrit input[name=autre] { flex: 1 1 10rem; width: auto; }

/* v1.14 — Plus : mêmes écarts entre toutes les rubriques, sous-menus alignés sur le titre */
.rubriques-plus > .carte { margin: 0; }
.rubriques-plus > .liste-plus.carte { padding: 0 1rem; }
.rubriques-plus > .liste-plus.carte a { padding: .9rem 0; min-height: 3.6rem; }
.rubriques-plus > .liste-plus.carte a::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--doux); font-weight: 400; }
.rubrique-plus .liste-plus { padding: 0 1rem 0 1rem; }
.rubrique-plus .liste-plus a { padding-left: 0; }
.rubrique-plus .liste-plus a > span { padding-left: 0; }

/* v1.14 — Cases à cocher : le texte et sa précision restent sur la même ligne (plus de deux colonnes décalées) */
label.case { display: block; position: relative; padding-left: 2.1rem; min-height: 1.9rem; line-height: 1.4; }
label.case > input[type=checkbox], label.case > input[type=radio] { position: absolute; left: 0; top: .3rem; margin: 0; }
label.case > .aide { display: inline; }
label.case > input[type=radio] { width: 20px; height: 20px; accent-color: var(--vert); top: .25rem; }

/* v1.15 : Mon agenda par mois comme un agenda de téléphone (grande grille, titres sur deux lignes) */
.mois-perso { padding-left: .35rem; padding-right: .35rem; }
.mois-perso .grille-mois { gap: 3px; }
.mois-perso .nom-jour { font-size: .72rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
.mois-perso .case-jour { min-height: max(5.6rem, calc((100svh - 17rem) / 6)); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; padding: 4px 2px 3px; background: var(--fond); }
.mois-perso .case-jour.ferme { background: var(--fond); }
.mois-perso .case-jour.occupe { background: color-mix(in srgb, var(--ocre) 9%, var(--fond)); }
.mois-perso .case-jour .numero { width: auto; align-self: center; font-size: .95rem; line-height: 1.2; padding: 0 .3rem; border-radius: 6px; }
.mois-perso .case-jour.dimanche .numero { color: var(--rouge); }
.mois-perso .case-jour.aujourdhui { outline: none; }
.mois-perso .case-jour.aujourdhui .numero { background: var(--encre); color: var(--carte); }
.mois-perso .case-jour.choisi { outline: 2px solid var(--encre); outline-offset: -2px; background: var(--fond); }
.mois-perso .rdv-case { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; font-size: .68rem; line-height: 1.22; background: none; border-left: 3px solid var(--ocre); border-radius: 0; padding: 0 0 0 3px; }
.mois-perso .rdv-case.journee { background: color-mix(in srgb, var(--ocre) 18%, transparent); border-radius: 3px; }
.mois-perso .rdv-case.absent { border-left-color: var(--doux); background: none; color: var(--doux); }
.mois-perso .rdv-case.plus { border: 0; padding-left: 3px; color: var(--doux); }
.mois-perso .case-jour.hors-mois { opacity: .45; }
.recherche-journal > summary { cursor: pointer; font-weight: 600; }
.recherche-journal[open] > summary { margin-bottom: .6rem; }
.quittances-donnees > summary { cursor: pointer; color: var(--doux); font-weight: 600; margin-top: .6rem; }
/* v1.15 — Plus : plus d'air entre les rubriques, et le même écart jusqu'en bas de la page */
.rubriques-plus { gap: 1rem; margin-bottom: 1rem; }
.rubriques-plus + .carte, .rubriques-plus ~ .carte { margin-top: 0; margin-bottom: 1rem; }

/* v1.15 — Liste des inscrit·es : une ligne par jeune (case Payé, prénom, montant, ×), détails en petit dessous */
.liste-inscrits li.inscrit.compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .55rem; row-gap: .1rem; padding: .55rem 0; }
.liste-inscrits li.inscrit.compact:not(.avec-paiement) { grid-template-columns: minmax(0, 1fr) auto; }
.liste-inscrits li.inscrit.compact .inscrit-nom { min-width: 0; font-size: 1rem; line-height: 1.25; }
.liste-inscrits li.inscrit.compact .choix-repondu { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; background: var(--vert-clair); color: var(--vert); font-size: .8rem; font-weight: 600; }
.liste-inscrits li.inscrit.compact .case-paye { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; margin: 0; padding: 0; border: 0; background: none; }
.liste-inscrits li.inscrit.compact .case-paye input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--vert); }
.liste-inscrits li.inscrit.compact .case-paye.lecture { color: var(--vert); font-weight: 700; }
.liste-inscrits li.inscrit.compact .montant-paye { display: flex; align-items: center; gap: .2rem; margin: 0; }
.liste-inscrits li.inscrit.compact .montant-paye input { width: 3.4rem; padding: .3rem .4rem; text-align: right; margin: 0; }
.liste-inscrits li.inscrit.compact .retirer-inscrit { margin: 0; }
.liste-inscrits li.inscrit.compact .retirer-x { border: 0; background: none; color: var(--doux); font-size: 1.35rem; line-height: 1; width: 1.9rem; height: 1.9rem; cursor: pointer; border-radius: 50%; }
.liste-inscrits li.inscrit.compact .retirer-x:hover { background: var(--rouge-clair); color: var(--rouge); }
.liste-inscrits li.inscrit.compact .inscrit-details { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .8rem; }
.liste-inscrits li.inscrit.compact:not(.avec-paiement) .inscrit-details { grid-column: 1 / -1; }
.liste-inscrits li.inscrit.compact .inscrit-details a { color: var(--vert); }
.liste-inscrits li.inscrit.compact .autrement summary, .liste-inscrits li.inscrit.compact .ajout-numero summary { cursor: pointer; color: var(--vert); text-decoration: underline; list-style: none; }
.liste-inscrits li.inscrit.compact .autrement input { padding: .2rem .4rem; font-size: .85rem; max-width: 14rem; margin: .2rem 0 0; }
.liste-inscrits li.inscrit.compact.a-paye .inscrit-nom strong { color: var(--vert); }

.liste-inscrits li.inscrit.compact > form.retirer-inscrit, .liste-inscrits li.inscrit.compact form[hidden] { display: none; }
.liste-inscrits li.inscrit.compact > form.retirer-inscrit { display: block; }
.liste-inscrits li.inscrit.compact > span { min-width: 0; display: inline; }
.liste-inscrits li.inscrit.compact > span.case-paye { display: flex; }
.liste-inscrits:has(li.inscrit.compact) { list-style: none; padding-left: 0; counter-reset: rang; }
.liste-inscrits li.inscrit.compact .inscrit-nom::before { counter-increment: rang; content: counter(rang) ". "; color: var(--doux); font-size: .85rem; }
.liste-inscrits li.inscrit.compact .inscrit-details { align-items: baseline; margin-top: .1rem; }
.liste-inscrits li.inscrit.compact .inscrit-details a { display: inline; padding: 0; min-height: 0; font-weight: 500; gap: 0; }
.liste-inscrits li.inscrit.compact .inscrit-details > * { margin: 0; }
.liste-inscrits li.inscrit.compact .autrement { display: inline-flex; align-items: baseline; gap: .3rem; }
.liste-inscrits li.inscrit.compact .autrement input { display: inline-block; width: auto; margin: 0; }
.liste-inscrits li.inscrit.compact .autrement[open] { flex-basis: 100%; }
.liste-inscrits li.inscrit.compact .autrement[open] input { display: block; width: 100%; margin-top: .25rem; }
.liste-inscrits li.inscrit.compact span.autrement { white-space: nowrap; }

/* v1.16 — Projets : personnes, tâches de l'équipe par projet, jeunes en petit job (page de l'équipe et lien du jeune) */
.etiquette-projet { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: var(--vert-clair); color: var(--vert); font-weight: 600; text-decoration: none; }
.filtre-projets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.filtre-projets a { text-decoration: none; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--carte); color: var(--encre); font-size: .9rem; }
.filtre-projets a.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.filtre-projets a.actif .aide { color: #fff; }
.projet-jeunes .jeune-projet { border-top: 1px solid var(--trait); padding-top: .9rem; margin-top: .9rem; }
.projet-jeunes .jeune-projet:first-of-type { border-top: 0; margin-top: .3rem; padding-top: 0; }
.jeune-projet h3, .jeune-projet h4 { margin: 0 0 .35rem; }
.jeune-projet h4 { margin-top: .8rem; font-size: .95rem; }
.jeune-projet .jauge, .taches-jeune-page .jauge { margin: .3rem 0 .4rem; }
.liens-jeune { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }
.ajout-tache-jeune, .reglages-jeune, .ajout-jeune { margin-top: .6rem; }
.ajout-tache-jeune > summary, .reglages-jeune > summary, .ajout-jeune > summary { cursor: pointer; color: var(--vert); font-weight: 600; }
.reglages-jeune > summary { color: var(--doux); font-weight: 500; font-size: .9rem; }
.ajout-tache-jeune form, .ajout-jeune form, .reglages-jeune form { margin-top: .5rem; }
.ajout-ligne { display: flex; gap: .4rem; align-items: flex-end; flex-wrap: wrap; margin-top: .4rem; }
.ajout-ligne input[type=text] { flex: 1 1 10rem; margin: 0; }
.ajout-ligne label { flex: 1 1 12rem; }
.creneau-jeune { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; margin-top: .4rem; }
.creneau-jeune label { flex: 1 1 7rem; margin: 0; }
.creneau-jeune input { margin: .15rem 0 0; }
.planning-jeunes { list-style: none; padding: 0; margin: .3rem 0 0; }
.planning-jeunes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.planning-jeunes li.jour-planning { border-bottom: 0; padding-top: .7rem; font-weight: 700; text-transform: capitalize; }
.planning-jeunes .heure { font-variant-numeric: tabular-nums; color: var(--doux); min-width: 6.2rem; }
.planning-jeunes li.fait { opacity: .55; }
.planning-jeunes form.en-ligne { margin-left: auto; }
.liste-taches.lecture .case-achat { cursor: default; }
.planning-jeunes li > span:not(.heure) { flex: 1 1 12rem; min-width: 0; }
.planning-jeunes li { flex-wrap: nowrap; }
/* v1.16 — Vans : où ils sont parqués */
.carte-vans > span:nth-child(2) { gap: .1rem; }
.carte-vans .lien-suite { color: var(--vert); font-weight: 600; font-size: .9rem; margin-top: .15rem; }
.carte-van h2 { display: flex; align-items: center; gap: .5rem; }
.carte-van h2 svg, .form-parquer .bouton svg { width: 24px; height: 24px; flex: none; }
.carte-van h2 svg { color: var(--ocre); }
.place-van { margin: .2rem 0 .6rem; }
.carte-plan { display: block; width: 100%; height: 210px; border: 0; border-radius: 10px; margin: .2rem 0 .6rem; background: var(--fond); }
.form-parquer { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--trait); }
.form-parquer .bouton { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.precision-van > summary, .historique-van > summary { cursor: pointer; color: var(--vert); font-weight: 600; }
.historique-van { margin-top: .8rem; }
.historique-van ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .92rem; }

/* v1.17 */
.onglets-temps { margin: .2rem 0 .6rem; }
.onglets-pleins.trois { grid-template-columns: 1fr 1fr 1fr; }
.tableau-heures tr.detail-heures td { padding-top: 0; border-top: 0; }
.tableau-heures tr.detail-heures ul { margin: 0; padding-left: 1rem; font-size: .85rem; color: var(--doux); }
.carte-lien { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: var(--encre); }
.raccourcis-jour { display: flex; gap: .5rem; margin: 0 0 .9rem; }
.raccourcis-jour a { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .3rem .55rem; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); font-size: .82rem; font-weight: 600; text-align: center; }
.raccourcis-jour a svg { width: 28px; height: 28px; color: var(--vert); }
.raccourcis-jour .badge-raccourci { position: absolute; top: .3rem; right: .4rem; min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--ocre); color: #fff; font-size: .72rem; line-height: 1.25rem; }
.note-brouillon { display: block; margin-top: .2rem; color: var(--ocre); }
.form-replie > summary { cursor: pointer; color: var(--vert); font-weight: 700; }
.form-replie[open] > summary { margin-bottom: .6rem; }
.personne-repliable { border-bottom: 1px solid var(--trait); padding: .45rem 0; }
.personne-repliable > summary { cursor: pointer; margin: 0; list-style-position: inside; }
.personne-repliable[open] > summary { margin-bottom: .3rem; }
.pastille-nombre.discrete { background: var(--trait); color: var(--encre); }
.grille-jeunes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; margin: .4rem 0 .6rem; }
.grille-jeunes .jeune-projet { border: 1px solid var(--trait); border-radius: 14px; background: var(--fond); padding: 0; margin: 0; }
.projet-jeunes .grille-jeunes .jeune-projet:first-of-type { border-top: 1px solid var(--trait); margin-top: 0; padding-top: 0; }
.grille-jeunes .jeune-projet[open] { grid-column: 1 / -1; background: var(--carte); }
.tuile-jeune { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; padding: .7rem .75rem; min-height: 4.6rem; }
.tuile-jeune::-webkit-details-marker { display: none; }
.tuile-jeune strong { font-size: 1.02rem; }
.jauge-ligne { display: flex; align-items: center; gap: .4rem; }
.jauge-ligne .jauge { flex: 1; margin: 0; }
.jeune-projet[open] .tuile-jeune { flex-direction: row; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--trait); min-height: 0; }
.jeune-projet[open] .tuile-jeune .jauge-ligne { flex: 1 1 8rem; }
.contenu-jeune { padding: .6rem .75rem .8rem; }
.contenu-jeune > h3 { display: none; }
.heures-a-valider { background: color-mix(in srgb, var(--ocre) 10%, var(--carte)); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .6rem; }
.heures-a-valider h4 { margin: 0 0 .3rem; }
.heures-a-valider ul { list-style: none; padding: 0; margin: 0; }
.heures-a-valider li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--trait); }
.heures-a-valider form.en-ligne { display: flex; gap: .3rem; }
.etat-heures { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; font-size: .75rem; background: var(--trait); }
.etat-heures.validee { background: var(--vert-clair); color: var(--vert); }
.etat-heures.refusee { background: var(--rouge-clair); color: var(--rouge); }
.creneau-jeune label.plein { flex-basis: 100%; }
.projets-jeunes-jobs > summary { cursor: pointer; font-weight: 700; } .projets-jeunes-jobs h3 { margin: .8rem 0 .2rem; } .projets-jeunes-jobs .jauge-ligne { margin-top: .2rem; }
.listes-passees > summary { cursor: pointer; list-style: none; } .listes-passees > summary h2 { display: inline; } .listes-passees > summary::before { content: '▸ '; color: var(--doux); } .listes-passees[open] > summary::before { content: '▾ '; }
.tel-inscrit { font-size: .82rem; color: var(--doux); white-space: nowrap; } .tel-inscrit::before { content: '· '; }
.si-recette { display: none; } .saisie-caisse form:has(input[name=sens][value=recette]:checked) .si-recette { display: block; } .recettes-quittances > summary { cursor: pointer; color: var(--vert); font-weight: 600; } .recettes-quittances ul { padding-left: 1rem; margin: .4rem 0 0; }
.apres-coup { margin-top: .8rem; }
.apres-coup > summary { cursor: pointer; color: var(--vert); font-weight: 600; }
.form-apres-coup { margin-top: .5rem; }
.carte-choix { height: 260px; border-radius: 10px; margin: .4rem 0 .2rem; background: var(--fond); z-index: 0; }
.boutons-carte { margin: .2rem 0; }
.manquantes-suite > summary { cursor: pointer; color: var(--vert); font-weight: 600; padding: .6rem 0; border-top: 1px solid var(--trait); }
.tuile-jeune .pastille-nombre.a-valider { align-self: flex-start; font-size: .75rem; white-space: nowrap; }
.heures-notees li { flex-wrap: wrap; }
.heures-notees li .heure { min-width: 0; flex: 1 1 100%; color: var(--encre); font-weight: 600; }
.heures-notees li > span:not(.heure) { flex: 1 1 auto; }
.tuile-jeune .jauge, .projets-jeunes-jobs .jauge { background: var(--trait); }