/* Espace des familles (01/11/2026, famille_espace.py) : enfants, bonjour, tuiles, cartes de groupe avec image et barre de niveau,
   excuses d'absence, bloc « Toute la famille ». Uniquement les variables de base.html (--nu, --bo, --or, --te, --ok, --at, --rg...) :
   aucune couleur ecrite en dur, la nuit (nuit.css) suit d'elle-meme. */

/* Enfants en haut de chaque page de l'espace */
.fm-enfants{display:flex;gap:8px;flex-wrap:wrap}
.fm-enfants form{margin:0}
.fm-chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--sf) 35%,transparent);background:transparent;color:var(--sf);font:inherit;font-weight:700;cursor:pointer}
.fm-chip[aria-current]{background:var(--sf);color:var(--nu)}
.fm-chip:focus-visible{outline:3px solid var(--or);outline-offset:2px}

/* Bonjour et tuiles */
.fm-salut{margin:2px 4px 0;font-size:22px;font-weight:800;color:var(--tx)}
.fm-salut small{display:block;font-size:14px;font-weight:500;color:var(--mu);margin-top:2px}
.fm-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fm-tuile{background:var(--sf);border-radius:16px;padding:12px 14px;box-shadow:var(--ombre);border-inline-start:4px solid var(--bo);display:flex;flex-direction:column;gap:4px;min-width:0}
.fm-tuile small{font-size:12.5px;font-weight:700;color:var(--mu)}
.fm-tuile b{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.fm-tuile.ok{border-color:var(--ok)}.fm-tuile.at{border-color:var(--at)}.fm-tuile.ab{border-color:var(--rg)}.fm-tuile.vi{border-color:var(--or)}

/* Cartes de groupe */
.fm-titre{margin:8px 4px 0;font-size:15px;font-weight:800;color:var(--mu)}
.fm-groupes{display:grid;gap:12px}
.fm-gr{background:var(--sf);border-radius:18px;box-shadow:var(--ombre);overflow:hidden}
.fm-gr-c{padding:12px 16px 16px;display:flex;flex-direction:column;gap:6px}
.fm-gr-c b{font-size:16.5px}
.fm-gr-c small{color:var(--mu);font-size:13.5px}
.fm-niv{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--mu);margin-top:4px}

/* Barre d'avancement (element progress : la largeur vient de value, aucun style en ligne) */
.fm-barre{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:99px;background:var(--bd);overflow:hidden;display:block}
.fm-barre::-webkit-progress-bar{background:var(--bd);border-radius:99px}
.fm-barre::-webkit-progress-value{background:var(--te);border-radius:99px}
.fm-barre::-moz-progress-bar{background:var(--te);border-radius:99px}
.fm-barre.petite{height:6px;margin-top:6px;max-width:220px}

/* Image par langue (_fm_art.html) */
.fm-art{display:block;width:100%;height:74px}
.fm-art.mini{width:46px;height:46px;border-radius:12px;flex:none}
.fm-art .fond{fill:var(--bo)}
.fm-art.en .fond{fill:var(--te)}.fm-art.fr .fond{fill:var(--bo)}.fm-art.ar .fond{fill:var(--or)}.fm-art.ma .fond{fill:var(--nu)}
.fm-art.de .fond{fill:var(--at)}.fm-art.es .fond{fill:var(--rg)}.fm-art.autre .fond{fill:var(--mu)}
.fm-art .clair{fill:var(--sf);opacity:.16}
.fm-art .trait{fill:none;stroke:var(--sf);stroke-width:2.4;opacity:.85}
.fm-art .lettres{fill:var(--sf);font-weight:800;font-size:24px;opacity:.95}
.fm-art.ar .lettres,.fm-art.ar .trait{fill:var(--nu);stroke:var(--nu)}
.fm-art.ar .lettres{stroke:none}
.fm-art.mini .lettres{font-size:30px}

/* Presence : excuse */
.fm-ex{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fm-ex a{min-height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px;border:1px solid var(--bo);color:var(--bo);font-weight:700;font-size:13.5px;text-decoration:none}
.fm-ex small{color:var(--mu);font-size:12.5px;max-width:220px;text-align:end}
.fm-msg{border-radius:14px;padding:12px 14px;font-weight:700;background:var(--okf);color:var(--ok)}
.fm-msg.ab{background:var(--rgf);color:var(--rg)}

/* Formulaires de l'espace (ajouter un enfant, excuse) */
.fm-form{display:flex;flex-direction:column;gap:12px}
.fm-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14.5px}
.fm-form input[type=text],.fm-form input[type=password],.fm-form input[type=date],.fm-form input[type=tel],.fm-form textarea{min-height:48px;border-radius:12px;border:1px solid var(--bd);padding:10px 12px;font:inherit;background:var(--sf);color:var(--tx)}
.fm-form textarea{min-height:80px}
.fm-motifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.fm-motifs legend{font-weight:700;font-size:14.5px;margin-bottom:6px}
.fm-motifs label{flex-direction:row;align-items:center;gap:8px;min-height:48px;border:1px solid var(--bd);border-radius:12px;padding:0 12px;font-weight:600;cursor:pointer}
.fm-motifs input{width:20px;height:20px;accent-color:var(--bo)}
.fm-ou{margin:4px 0 0;font-weight:800;color:var(--mu);font-size:14px}
.fm-enf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--fd)}
.fm-enf:first-child{border-top:0}
.fm-enf form{margin:0}
.fm-enf .btn-l{min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--bd);background:var(--sf);color:var(--rg);font:inherit;font-weight:700;cursor:pointer}

/* Toute la famille (a payer) */
.fm-total{display:flex;justify-content:space-between;gap:10px;padding:12px 0 0;margin-top:4px;border-top:2px solid var(--bd);font-size:17px;font-weight:800}
.fm-cadeau{margin-top:10px;border-radius:12px;padding:10px 12px;background:var(--okf);color:var(--ok);font-weight:700;font-size:14.5px}
.fm-cadeau b{display:block;font-size:17px;margin-top:2px}
.fm-cadeau small{display:block;font-weight:500;color:var(--mu);margin-top:2px}

/* Accueil (equipe) : excuses des familles */
.fz-liste{display:grid;gap:12px}
.fz-x{display:grid;gap:8px}
.fz-x .tete{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.fz-x form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.fz-x form input[type=text]{flex:1;min-width:200px}
.fz-x blockquote{margin:0;padding:8px 12px;border-inline-start:3px solid var(--bd);color:var(--tx)}
.fz-lien{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}

/* Enseignant : image et barre dans « Mes groupes » */
.fm-en-niv{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mu)}
.fm-en-niv .fm-barre{margin:0;flex:1}