/* ==========================================================================
   ACGME — espace familles
   Structure reprise de CoverLys (barre laterale repliable, theme clair/sombre
   Bootstrap 5.3), palette propre : encre bleu-vert + or sur fond papier,
   titres en Fraunces. L'or (--accent) sert aux aplats, filets et
   illustrations ; --accent-texte, plus sombre, au texte (lisibilite).
   ========================================================================== */

:root {
  --encre: #12343b;
  --encre-2: #1d4a53;
  --encre-rgb: 18, 52, 59;
  --accent: #c9a227;
  --accent-rgb: 201, 162, 39;
  --accent-texte: #866606;
  --accent-clair: #e3c25f;
  --papier: #f6f4ef;
  --carte: #ffffff;
  --trait: #e6e1d6;
  --texte-doux: #5d6b6e;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--papier);
  --bs-primary: var(--encre);
  --bs-primary-rgb: var(--encre-rgb);
  --bs-link-color: var(--encre-2);
  --bs-link-color-rgb: 29, 74, 83;
  --bs-link-hover-color: var(--accent-texte);
  --bs-link-hover-color-rgb: 134, 102, 6;
  --bs-border-color: var(--trait);
  --bs-focus-ring-color: rgba(var(--encre-rgb), 0.25);
}

[data-bs-theme="dark"] {
  --encre-clair: #7cc2cf;
  --papier: #111a1c;
  --carte: #172326;
  --trait: #263538;
  --texte-doux: #93a3a6;
  --accent-texte: #e3c25f;
  --bs-body-bg: var(--papier);
  --bs-primary: var(--encre-clair);
  --bs-primary-rgb: 124, 194, 207;
  --bs-link-color: var(--encre-clair);
  --bs-link-color-rgb: 124, 194, 207;
  --bs-link-hover-color: #e3c25f;
  --bs-border-color: var(--trait);
}

body { background: var(--papier); -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 0.15em; }
.titre-serif, .titre-page, h1, .h1 { font-family: "Fraunces", Georgia, serif; font-weight: 650; letter-spacing: -0.01em; }
.text-accent { color: var(--accent-texte); }
.bg-accent { background: var(--accent) !important; color: var(--encre) !important; }
.min-w-0 { min-width: 0; }

/* --- Boutons --------------------------------------------------------------- */
.btn { border-radius: 0.6rem; }
.btn-primary {
  --bs-btn-bg: var(--encre); --bs-btn-border-color: var(--encre);
  --bs-btn-hover-bg: var(--encre-2); --bs-btn-hover-border-color: var(--encre-2);
  --bs-btn-active-bg: #0c262b; --bs-btn-active-border-color: #0c262b;
  --bs-btn-disabled-bg: var(--encre); --bs-btn-disabled-border-color: var(--encre);
  --bs-btn-focus-shadow-rgb: var(--encre-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--encre); --bs-btn-border-color: rgba(var(--encre-rgb), 0.35);
  --bs-btn-hover-bg: var(--encre); --bs-btn-hover-border-color: var(--encre); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--encre); --bs-btn-active-border-color: var(--encre); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--encre-rgb);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0d1a1c; --bs-btn-bg: var(--encre-clair); --bs-btn-border-color: var(--encre-clair);
  --bs-btn-hover-color: #0d1a1c; --bs-btn-hover-bg: #a3d6df; --bs-btn-hover-border-color: #a3d6df;
  --bs-btn-active-color: #0d1a1c; --bs-btn-active-bg: #a3d6df;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--encre-clair); --bs-btn-border-color: rgba(124, 194, 207, 0.45);
  --bs-btn-hover-bg: var(--encre-clair); --bs-btn-hover-border-color: var(--encre-clair); --bs-btn-hover-color: #0d1a1c;
  --bs-btn-active-bg: var(--encre-clair); --bs-btn-active-color: #0d1a1c;
}
.btn svg { vertical-align: -0.2em; }
.form-control, .form-select { border-radius: 0.6rem; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.18); }
.form-check-input:checked { background-color: var(--encre); border-color: var(--encre); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--encre-clair); border-color: var(--encre-clair); }

/* --- Mise en page : barre laterale (reprise de CoverLys) ------------------- */
.app-layout { display: flex; align-items: flex-start; }
.contenu-app { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.contenu-app main { flex: 1 0 auto; }

.barre-laterale { --largeur-nav: 252px; width: var(--largeur-nav); border-right: none; transition: width .18s ease; overflow-x: hidden; }
.barre-laterale, .barre-laterale .offcanvas-body { background-color: var(--encre) !important; color: rgba(255,255,255,.85); }
@media (min-width: 992px) {
  .barre-laterale { position: sticky; top: 0; height: 100vh; flex: 0 0 var(--largeur-nav); visibility: visible !important; transform: none !important; }
}
html.nav-reduite .barre-laterale { --largeur-nav: 80px; }

.logo-mini { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.nom-asso { font-size: 1rem; letter-spacing: .02em; }
.sous-titre-asso { font-size: .7rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; }

.navitem {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .9rem; margin: .1rem .6rem;
  border-radius: .55rem; color: rgba(255,255,255,.72); font-size: .9rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-decoration: none;
}
.navitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.navitem.actif { background: rgba(var(--accent-rgb), .18); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.navitem svg { flex: 0 0 auto; }
.separateur-nav { margin: .85rem 1rem .5rem; border-top: 1px solid rgba(255,255,255,.12); }
.lib-section { padding: 0 1rem .35rem; font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.4); text-transform: uppercase; }

html.nav-reduite .lib-nav, html.nav-reduite .lib-section, html.nav-reduite .lib-utilisateur { display: none !important; }
html.nav-reduite .entete-barre-laterale { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
html.nav-reduite .navitem { justify-content: center; padding-left: 0; padding-right: 0; margin-left: .35rem; margin-right: .35rem; }
html.nav-reduite .ligne-avatar-utilisateur { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
html.nav-reduite .actions-utilisateur { flex-direction: column; align-items: center; padding-left: 0 !important; padding-right: 0 !important; }

.bouton-reduire {
  align-self: flex-end; margin: .25rem .75rem -.25rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.bouton-reduire:hover { background: rgba(255,255,255,.14); }
html.nav-reduite .bouton-reduire svg { transform: rotate(180deg); }

.bloc-utilisateur { border-top: 1px solid rgba(255,255,255,.12); }
.avatar-utilisateur {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--encre);
  font-weight: 700; font-size: .75rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.nom-utilisateur { color: #fff; font-size: .82rem; font-weight: 600; }
.role-utilisateur { color: rgba(255,255,255,.55); font-size: .72rem; }
.bouton-icone { color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.28); }
.bouton-icone:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.bouton-icone svg { vertical-align: -0.15em; }
.barre-mobile { background-color: var(--encre); position: sticky; top: 0; z-index: 1030; }
.bouton-mobile { color: #fff; border: 1px solid rgba(255,255,255,.3); }
[data-bs-theme="dark"] .barre-laterale, [data-bs-theme="dark"] .barre-laterale .offcanvas-body, [data-bs-theme="dark"] .barre-mobile { background-color: #0b1517 !important; }
.pied-page { color: var(--texte-doux); }

/* --- Entetes et cartes ------------------------------------------------------ */
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.surtitre { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: .2rem; }
.titre-page { font-size: clamp(1.6rem, 2.5vw, 2.1rem); margin: 0; }
.sous-titre-page { color: var(--texte-doux); margin: .35rem 0 0; }
.actions-page { display: flex; gap: .5rem; flex-wrap: wrap; }
.lien-retour { font-size: .875rem; text-decoration: none; color: var(--texte-doux); display: inline-block; margin-bottom: .75rem; }
.lien-retour:hover { color: var(--accent-texte); }

.carte-section { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1.25rem 1.35rem; }
.entete-section { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; gap: 1rem; }
.lien-discret { font-size: .85rem; text-decoration: none; font-weight: 500; }
.vide { color: var(--texte-doux); font-style: italic; }
.formulaire .form-label, legend.form-label { font-weight: 600; font-size: .9rem; }
.table { --bs-table-bg: transparent; }
.tableau thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); font-weight: 600; background: transparent; }
.tableau td, .tableau th { padding: .7rem 1rem; }

/* --- Pastilles ---------------------------------------------------------------- */
.pastille { font-weight: 600; font-size: .7rem; border-radius: 999px; padding: .3em .7em; letter-spacing: .01em; }
.pastille-commune { background: rgba(var(--encre-rgb), .08); color: var(--encre); }
.pastille-groupe { background: rgba(56, 132, 112, .14); color: #23705c; }
.pastille-eleve { background: rgba(var(--accent-rgb), .15); color: var(--accent-texte); }
.pastille-parents { background: rgba(120, 90, 170, .13); color: #6a4c9c; }
.pastille-role-admin { background: rgba(var(--encre-rgb), .1); color: var(--encre); }
.pastille-role-enseignant { background: rgba(56, 132, 112, .14); color: #23705c; }
.pastille-role-parent { background: rgba(120, 90, 170, .13); color: #6a4c9c; }
.pastille-role-eleve { background: rgba(var(--accent-rgb), .15); color: var(--accent-texte); }
[data-bs-theme="dark"] .pastille-commune, [data-bs-theme="dark"] .pastille-role-admin { background: rgba(124,194,207,.14); color: #a3d6df; }
[data-bs-theme="dark"] .pastille-groupe, [data-bs-theme="dark"] .pastille-role-enseignant { color: #7fd1b9; }
[data-bs-theme="dark"] .pastille-eleve, [data-bs-theme="dark"] .pastille-role-eleve { color: var(--accent-clair); }
[data-bs-theme="dark"] .pastille-parents, [data-bs-theme="dark"] .pastille-role-parent { color: #c3a9ee; }

/* --- Actualites --------------------------------------------------------------- */
.actu-resume { display: block; padding: .85rem 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.actu-resume:first-of-type { border-top: none; padding-top: .25rem; }
.actu-resume:hover .titre-actu { color: var(--accent-texte); }
.date-actu { font-size: .78rem; color: var(--texte-doux); font-weight: 500; }
.titre-actu { font-weight: 600; margin-bottom: .15rem; }
.extrait-actu { font-size: .9rem; color: var(--texte-doux); }
.liste-actus { display: grid; gap: 1rem; }
.carte-actu { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1.25rem 1.35rem; }
.carte-actu.epinglee, .actu-resume.epinglee .titre-actu { border-left: 3px solid var(--accent); }
.actu-resume.epinglee .titre-actu { border-left: none; }
.lien-titre { color: inherit; text-decoration: none; font-family: "Fraunces", Georgia, serif; }
.lien-titre:hover { color: var(--accent-texte); }
.article-actu { max-width: 780px; }
.contenu-actu { white-space: pre-line; line-height: 1.7; font-size: 1.02rem; }

/* --- Ressources ---------------------------------------------------------------- */
.ligne-ressource { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; border-top: 1px solid var(--trait); }
.carte-section > .ligne-ressource:first-child, .entete-section + .ligne-ressource { border-top: none; padding-top: .25rem; }
.icone-ressource { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icone-fichier { background: rgba(var(--encre-rgb), .08); color: var(--encre); }
.icone-lien { background: rgba(var(--accent-rgb), .14); color: var(--accent-texte); }
[data-bs-theme="dark"] .icone-fichier { background: rgba(124,194,207,.12); color: var(--encre-clair); }
[data-bs-theme="dark"] .icone-lien { color: var(--accent-clair); }
.titre-ressource { font-weight: 600; text-decoration: none; word-break: break-word; }
.meta-ressource { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-size: .78rem; color: var(--texte-doux); margin-top: .2rem; }
.desc-ressource { font-size: .875rem; color: var(--texte-doux); margin-top: .3rem; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.barre-filtres .form-control { flex: 1 1 240px; }
.barre-filtres .form-select { flex: 0 1 220px; }
.choix-segmentes { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix-segmentes .btn { border-radius: 999px; padding-left: 1rem; padding-right: 1rem; }

/* --- Tableaux de bord ----------------------------------------------------------- */
.grille-enfants { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.carte-enfant { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1.25rem; position: relative; overflow: hidden; }
.carte-enfant::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--encre), var(--accent)); }
.avatar-enfant { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(var(--accent-rgb), .15); color: var(--accent-texte); font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.cours-enfant { padding: .55rem .75rem; border-radius: .6rem; background: rgba(var(--encre-rgb), .04); margin-bottom: .4rem; }
[data-bs-theme="dark"] .cours-enfant { background: rgba(255,255,255,.04); }

.grille-cours { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte-cours { display: flex; flex-direction: column; gap: .3rem; background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1.15rem 1.25rem; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.carte-cours:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06); }
.carte-cours.archive { opacity: .6; }
.langue-cours { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texte); }
.nom-cours { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 650; }
.horaire-cours { font-size: .85rem; color: var(--texte-doux); }
.pied-cours { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--texte-doux); border-top: 1px solid var(--trait); padding-top: .55rem; margin-top: .4rem; }

.grille-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1rem 1.15rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.stat:hover { border-color: rgba(var(--accent-rgb), .5); }
.stat .valeur { font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat .libelle { font-size: .8rem; color: var(--texte-doux); }
.ligne-groupe { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.entete-section + .ligne-groupe { border-top: none; }
.ligne-groupe:hover .fw-semibold { color: var(--accent-texte); }
.ligne-eleves td { padding-top: 0 !important; border-bottom-width: 1px; }
.pastille-eleve-lien { display: inline-block; font-size: .78rem; padding: .15rem .6rem; margin: 0 .3rem .3rem 0; border-radius: 999px; background: rgba(var(--encre-rgb), .06); text-decoration: none; color: inherit; }
.pastille-eleve-lien:hover { background: rgba(var(--accent-rgb), .16); }

/* --- Administration ---------------------------------------------------------------- */
.onglets-roles { display: flex; flex-wrap: wrap; gap: .4rem; }
.onglets-roles a { text-decoration: none; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--trait); color: inherit; font-size: .875rem; background: var(--carte); }
.onglets-roles a span { color: var(--texte-doux); margin-left: .25rem; font-size: .8rem; }
.onglets-roles a.actif { background: var(--encre); color: #fff; border-color: var(--encre); }
.onglets-roles a.actif span { color: rgba(255,255,255,.7); }
[data-bs-theme="dark"] .onglets-roles a.actif { background: var(--encre-clair); color: #0d1a1c; border-color: var(--encre-clair); }
.liste-cases-corps { max-height: 320px; overflow-y: auto; border: 1px solid var(--trait); border-radius: .6rem; padding: .35rem; }
.case-element { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; margin: 0; }
.case-element:hover { background: rgba(var(--encre-rgb), .05); }
.case-element .form-check-input { margin: 0; flex: 0 0 auto; }
.zone-danger { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid rgba(220, 53, 69, .3); border-radius: 1rem; padding: 1rem 1.25rem; margin-top: 1rem; background: rgba(220, 53, 69, .03); }

/* --- Connexion --------------------------------------------------------------------- */
.ecran-connexion { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.connexion-marque {
  position: relative; overflow: hidden; color: #fff; padding: 2.5rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(circle at 85% 15%, rgba(var(--accent-rgb), .35), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(124, 194, 207, .22), transparent 45%),
    var(--encre);
}
.illustration-connexion { position: absolute; top: 0; right: 1.5rem; width: min(380px, 62%); opacity: .9; pointer-events: none; }
.connexion-marque-haut { display: flex; align-items: center; gap: .75rem; }
.logo-connexion { width: 3rem; height: 3rem; border-radius: .8rem; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.nom-asso-connexion { font-weight: 700; letter-spacing: .06em; font-size: 1.15rem; }
.connexion-accroche { max-width: 30rem; position: relative; z-index: 1; }
.connexion-accroche h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 1rem 0; }
.connexion-texte { color: rgba(255,255,255,.75); font-size: 1.05rem; }
.salutations { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.salutations span { font-size: .85rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.salutations span:nth-child(3) { background: rgba(var(--accent-rgb), .3); border-color: transparent; }
.connexion-pied { color: rgba(255,255,255,.45); font-size: .8rem; margin: 0; position: relative; z-index: 1; }
.connexion-formulaire { display: flex; flex-direction: column; padding: 1.25rem 1.5rem 2rem; }
.connexion-formulaire .bouton-icone { color: var(--bs-body-color); border-color: var(--trait); }
.carte-connexion { width: 100%; max-width: 400px; margin: auto; }
.logo-connexion-mobile { width: 3rem; height: 3rem; border-radius: .8rem; margin-bottom: 1rem; }
.afficher-mdp { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--texte-doux); }
.aide-connexion summary { cursor: pointer; font-size: .875rem; color: var(--texte-doux); }
.aide-connexion p { font-size: .875rem; color: var(--texte-doux); }
altcha-widget { --altcha-max-width: 100%; --altcha-border-radius: .6rem; --altcha-color-border: var(--trait); --altcha-color-base: var(--carte); --altcha-color-text: var(--bs-body-color); }
.messages-flottants { position: fixed; top: 1rem; right: 1rem; z-index: 1080; max-width: min(420px, calc(100vw - 2rem)); }
.fondu-apparition { animation: fonduApparition .6s ease-out; }
@keyframes fonduApparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) {
  .ecran-connexion { grid-template-columns: 1fr; }
  .connexion-marque { display: none; }
}

/* --- Erreurs ---------------------------------------------------------------------- */
.page-erreur { max-width: 480px; margin: 12vh auto; text-align: center; padding: 0 1rem; }
.code-erreur { font-family: "Fraunces", Georgia, serif; font-size: 4.5rem; font-weight: 700; color: var(--accent-texte); line-height: 1; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- Retouches ----------------------------------------------------------------- */
.form-control, .form-select { background-color: var(--carte); }
code { color: var(--texte-doux); font-size: .82em; }
.tableau a { text-decoration: none; }
.tableau a:hover { text-decoration: underline; }

/* --- Bandeau vacances / jours feries (accueil) ------------------------------ */
.bandeau-calendrier { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.bandeau-en-cours {
  display: flex; gap: 1rem; align-items: flex-start; border-radius: 1rem; padding: 1.1rem 1.25rem; color: #fff;
  background: linear-gradient(120deg, var(--encre) 0%, var(--encre-2) 55%, #2c6a63 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.bandeau-en-cours.type-ferie, .bandeau-en-cours.type-pont { background: linear-gradient(120deg, #5c4606, #8f7012); }
.bandeau-icone { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent-clair); }
.bandeau-surtitre { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.bandeau-titre { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 650; line-height: 1.25; margin: .1rem 0 .2rem; }
.bandeau-detail { font-size: .875rem; opacity: .85; }
.bandeau-a-venir { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--accent); border-radius: 1rem; padding: 1rem 1.25rem; }
.bandeau-a-venir .bandeau-surtitre { color: var(--accent-texte); opacity: 1; margin-bottom: .5rem; }
.bandeau-a-venir ul { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .45rem; }
.bandeau-a-venir li { display: flex; gap: .7rem; align-items: baseline; font-size: .9rem; }
.pastille-date { flex: 0 0 auto; min-width: 4.6rem; text-align: center; font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: .4rem; background: rgba(var(--accent-rgb), .13); color: var(--accent-texte); }
[data-bs-theme="dark"] .pastille-date { color: var(--accent-clair); }

/* --- Messagerie ---------------------------------------------------------------- */
.badge-non-lus { margin-left: auto; background: var(--accent); color: var(--encre); font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; }
.pastille-non-lu-icone { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--encre); display: none; }
html.nav-reduite .pastille-non-lu-icone { display: block; }
.liste-fils { overflow: hidden; }
.fil { display: flex; gap: .75rem; padding: .9rem 1.25rem; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.fil:first-child { border-top: none; }
.fil:hover { background: rgba(var(--encre-rgb), .035); }
[data-bs-theme="dark"] .fil:hover { background: rgba(255,255,255,.03); }
.point-non-lu { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem; flex: 0 0 auto; }
.fil.non-lu .point-non-lu { background: var(--accent); }
.fil-corps { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1rem; }
.fil-ligne1, .fil-ligne2 { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fil-ligne1 { justify-content: space-between; }
.interlocuteur { font-weight: 500; }
.fil.non-lu .interlocuteur, .fil.non-lu .sujet-fil, .ligne-fil.non-lu .sujet-fil { font-weight: 700; }
.date-fil { font-size: .78rem; color: var(--texte-doux); flex: 0 0 auto; }
.fil.non-lu .date-fil { color: var(--accent-texte); font-weight: 600; }
.sujet-fil { font-size: .92rem; }
.apercu-fil { font-size: .85rem; color: var(--texte-doux); }
.nb-messages { font-size: .72rem; color: var(--texte-doux); border: 1px solid var(--trait); border-radius: 999px; padding: 0 .45rem; }
.ligne-fil { display: flex; flex-direction: column; padding: .6rem 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; min-width: 0; }
.entete-section + .ligne-fil { border-top: none; padding-top: .2rem; }
.ligne-fil .interlocuteur { font-size: .85rem; color: var(--texte-doux); }
.ligne-fil:hover .sujet-fil { color: var(--accent-texte); }

.fil-messages { display: flex; flex-direction: column; gap: .85rem; max-width: 860px; }
.bulle { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem 1rem 1rem .3rem; padding: .85rem 1.1rem; max-width: 88%; }
.bulle.de-moi { align-self: flex-end; background: rgba(var(--encre-rgb), .06); border-color: rgba(var(--encre-rgb), .12); border-radius: 1rem 1rem .3rem 1rem; }
[data-bs-theme="dark"] .bulle.de-moi { background: rgba(124,194,207,.08); border-color: rgba(124,194,207,.18); }
.bulle header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; font-size: .8rem; }
.auteur-bulle { font-weight: 600; }
.role-bulle { font-weight: 500; color: var(--texte-doux); margin-left: .35rem; }
.bulle time { color: var(--texte-doux); }
.contenu-bulle { white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.separateur-nouveaux { display: flex; align-items: center; gap: .75rem; color: var(--accent-texte); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.separateur-nouveaux::before, .separateur-nouveaux::after { content: ""; flex: 1; border-top: 1px solid rgba(var(--accent-rgb), .45); }

/* --- Absences ---------------------------------------------------------------- */
.absence { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid var(--trait); }
.carte-section > .absence:first-child, .entete-section + .absence { border-top: none; padding-top: .3rem; }
.absence-date { flex: 0 0 3.6rem; text-align: center; border-radius: .7rem; padding: .35rem 0 .4rem; background: rgba(var(--accent-rgb), .1); line-height: 1.1; }
.absence.justifiee .absence-date { background: rgba(var(--encre-rgb), .06); }
[data-bs-theme="dark"] .absence.justifiee .absence-date { background: rgba(255,255,255,.05); }
.absence-date .jour-semaine, .absence-date .mois { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); font-weight: 600; }
.absence-date .jour-num { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 700; }
.type-absence { font-weight: 700; font-size: .9rem; }
.type-absence.type-absence { color: #b23a2a; }
.type-absence.type-retard { color: #2d5f9e; }
[data-bs-theme="dark"] .type-absence.type-absence { color: #f08a7a; }
[data-bs-theme="dark"] .type-absence.type-retard { color: #8fb6ea; }
.absence-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }
.motif-parent { font-size: .875rem; background: rgba(120, 90, 170, .07); border-left: 3px solid rgba(120, 90, 170, .5); padding: .45rem .7rem; border-radius: .4rem; white-space: pre-line; }
.compteurs { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .875rem; color: var(--texte-doux); }
.compteurs strong { color: var(--bs-body-color); font-size: 1rem; }
.resume-absences { display: flex; gap: .65rem; align-items: center; margin-top: .75rem; padding: .6rem .75rem; border-radius: .6rem; border: 1px solid var(--trait); font-size: .85rem; text-decoration: none; color: inherit; line-height: 1.35; }
.resume-absences:hover { border-color: rgba(var(--accent-rgb), .5); }
.resume-absences.alerte { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .07); }
.stat-alerte .valeur { color: var(--accent-texte); }
@media (max-width: 575.98px) { .absence { flex-wrap: wrap; } .absence-actions { flex-direction: row; width: 100%; justify-content: flex-end; } }

.liste-appel { display: grid; }
.ligne-appel { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(220px, 1.3fr); gap: .5rem 1rem; align-items: center; padding: .6rem .5rem; border-top: 1px solid var(--trait); border-radius: .4rem; }
.ligne-appel:first-child { border-top: none; }
.ligne-appel.etat-absent { background: rgba(178, 58, 42, .06); }
.ligne-appel.etat-retard { background: rgba(45, 95, 158, .07); }
.nom-appel { font-weight: 600; }
.details-appel { display: flex; gap: .4rem; }
.minutes-appel { max-width: 5.5rem; }
.choix-appel .btn { padding: .2rem .75rem; }
.btn-check:checked + .choix-absence { background: #b23a2a; border-color: #b23a2a; color: #fff; }
.btn-check:checked + .choix-retard { background: #2d5f9e; border-color: #2d5f9e; color: #fff; }
@media (max-width: 767.98px) { .ligne-appel { grid-template-columns: 1fr; } }

/* --- Calendrier ---------------------------------------------------------------- */
.ligne-periode { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--trait); }
.carte-section > .ligne-periode:first-child { border-top: none; padding-top: .2rem; }
.ligne-periode.passee { opacity: .55; }
.ligne-periode.en-cours { background: rgba(var(--accent-rgb), .06); margin: 0 -1.35rem; padding-left: 1.35rem; padding-right: 1.35rem; }
.type-periode { flex: 0 0 7.5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
.type-periode.type-vacances { color: #23705c; }
.type-periode.type-ferie, .type-periode.type-pont { color: var(--accent-texte); }
[data-bs-theme="dark"] .type-periode.type-vacances { color: #7fd1b9; }
[data-bs-theme="dark"] .type-periode.type-ferie, [data-bs-theme="dark"] .type-periode.type-pont { color: var(--accent-clair); }
@media (max-width: 575.98px) { .ligne-periode { flex-wrap: wrap; gap: .25rem .75rem; } .type-periode { flex-basis: 100%; } }

/* --- Illustration de l'accueil (lanternes, croissant, etoiles) ------------- */
.entete-accueil { position: relative; flex-direction: column; align-items: flex-start; min-height: 150px; padding-right: 300px; }
.illustration-accueil { position: absolute; top: -1.5rem; right: 0; width: 290px; pointer-events: none; }
.illustration-accueil img { width: 100%; height: auto; display: block; }
.illu-sombre { display: none !important; }
[data-bs-theme="dark"] .illu-claire { display: none !important; }
[data-bs-theme="dark"] .illu-sombre { display: block !important; }
@media (max-width: 991.98px) {
  .entete-accueil { padding-right: 190px; min-height: 120px; }
  .illustration-accueil { width: 190px; top: -1rem; }
}
@media (max-width: 575.98px) {
  /* Sur telephone, l'illustration passe au-dessus du titre au lieu de le chevaucher. */
  .entete-accueil { padding-right: 0; min-height: 0; }
  .illustration-accueil { position: static; width: 170px; margin: -1.4rem -.25rem -.4rem auto; }
}

/* --- Page de connexion : photo du batiment en fond, fondue --------------- */
.connexion-formulaire { position: relative; overflow: hidden; }
.fond-connexion {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%;
  object-fit: cover; object-position: center 35%;
  opacity: .5; filter: saturate(.75);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 45%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 45%, #000 100%);
  pointer-events: none; user-select: none;
}
[data-bs-theme="dark"] .fond-connexion { opacity: .22; filter: saturate(.4) brightness(.8); }
.carte-connexion { background: color-mix(in srgb, var(--papier) 82%, transparent); border-radius: 1.25rem; padding: 1.5rem; backdrop-filter: blur(2px); }
@media (max-width: 991.98px) {
  .connexion-formulaire { min-height: 100vh; min-height: 100dvh; }
  .fond-connexion { height: 38%; }
}

/* --- Groupes de l'enseignant (accueil) ----------------------------------- */
.groupe-prof { padding: .85rem 0; border-top: 1px solid var(--trait); }
.entete-section + .groupe-prof { border-top: none; padding-top: .2rem; }
.groupe-prof-entete { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.groupe-prof-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --- Responsive : smartphone et tablette ----------------------------------- */
/* Tableaux transformes en cartes sur petit ecran (data-label = intitule). */
@media (max-width: 767.98px) {
  .tableau-cartes thead { display: none; }
  .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes td { display: block; width: 100%; }
  .tableau-cartes tr { padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
  .tableau-cartes tr:last-child { border-bottom: none; }
  .tableau-cartes td { border: none !important; padding: .12rem 0 !important; display: flex; gap: .75rem; align-items: baseline; }
  .tableau-cartes td[data-label]::before { content: attr(data-label); flex: 0 0 6.5rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
  .tableau-cartes td.cellule-titre { padding-bottom: .35rem !important; font-size: 1rem; }
  .tableau-cartes td.vide { display: block; }
}

@media (max-width: 991.98px) {
  .grille-stats { grid-template-columns: repeat(3, 1fr); }
  main.container-xxl { padding-top: 1.25rem !important; }
}
@media (max-width: 575.98px) {
  /* Saisie : 16px minimum, sinon iPhone zoome a chaque champ touche. */
  input.form-control, select.form-select, textarea.form-control, .form-control-sm, .form-select-sm { font-size: 16px; }
  .grille-stats { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .stat { padding: .8rem .9rem; }
  .stat .valeur { font-size: 1.6rem; }
  .carte-section, .carte-actu { padding: 1rem; border-radius: .85rem; }
  .entete-page { margin-bottom: 1.1rem; }
  .actions-page { width: 100%; }
  .actions-page > .btn, .actions-page > .dropdown { flex: 1 1 auto; }
  .actions-page > .dropdown > .btn { width: 100%; }
  .barre-filtres .form-select, .barre-filtres .form-control { flex: 1 1 100%; }
  .barre-filtres .btn { flex: 1 1 auto; }
  .bulle { max-width: 100%; }
  .grille-enfants, .grille-cours { grid-template-columns: 1fr; }
  .onglets-roles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
  .onglets-roles a { white-space: nowrap; }
  .zone-danger .btn { width: 100%; }
  .absence-date { flex-basis: 3.1rem; }
  .bandeau-calendrier { grid-template-columns: 1fr; }
  .carte-connexion { padding: 1.25rem 1rem; }
  .connexion-formulaire { padding: 1rem 1rem 2rem; }
}
.illustration-connexion-mobile { position: absolute !important; top: 0; left: 1rem; width: 210px; z-index: 0 !important; pointer-events: none; }
@media (min-width: 992px) { .illustration-connexion-mobile { display: none !important; } }
@media (hover: none) { .table-hover > tbody > tr:hover > * { --bs-table-bg-state: transparent; } }
@media (min-width: 576px) and (max-width: 991.98px) { .illustration-connexion-mobile { width: 320px; left: 2rem; } }

/* --- Dessin du batiment de l'association ----------------------------------- */
/* Connexion : remplace le texte d'accroche, sous le titre. */
.dessin-batiment-connexion { display: block; width: 100%; max-width: 440px; height: auto; margin-top: 1.75rem; opacity: .95; }
/* Application : en fond, en bas a gauche de la zone de contenu (a droite du menu). */
.fond-batiment { position: fixed; bottom: 0; left: 252px; width: min(560px, 55vw); z-index: 0; pointer-events: none; opacity: .24; transition: left .18s ease; }
.fond-batiment img { width: 100%; height: auto; display: block; }
html.nav-reduite .fond-batiment { left: 80px; }
[data-bs-theme="dark"] .fond-batiment { opacity: .14; }
.contenu-app > main, .contenu-app > footer { position: relative; z-index: 1; }
@media (max-width: 991.98px) { .fond-batiment { left: 0; width: min(420px, 90vw); opacity: .2; } }
@media print { .fond-batiment { display: none; } }

/* --- Connexion v0.7 : lettres arabes en pele-mele (gauche), croissant en
   gommettes (droite). Remplacent lanternes, dessin de classe et photo. ----- */
.lettres-pele-mele { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.connexion-marque > :not(.lettres-pele-mele) { position: relative; z-index: 1; }
.connexion-accroche h1 { text-shadow: 0 2px 18px rgba(18, 52, 59, .9); }
.salutations span { backdrop-filter: blur(3px); }

/* Classe en style gommettes, en haut a droite, legerement estompee. */
.connexion-formulaire > .classe-gommettes {
  position: absolute; z-index: 0; top: 3.6rem; right: 1.5rem; width: min(330px, 26vw); height: auto;
  opacity: .78; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
[data-bs-theme="dark"] .connexion-formulaire > .classe-gommettes { opacity: .5; }
.connexion-formulaire > .fond-connexion { position: absolute; z-index: 0; }
.connexion-formulaire > :not(.fond-connexion):not(.classe-gommettes) { position: relative; z-index: 1; }
.carte-connexion { background: color-mix(in srgb, var(--papier) 88%, transparent); box-shadow: 0 10px 40px rgba(18, 52, 59, .06); }
@media (min-width: 992px) { .connexion-formulaire { padding-top: 13.5rem; } }
.connexion-formulaire > .d-flex:first-of-type { position: absolute !important; top: 1.25rem; right: 1.5rem; }
@media (max-width: 991.98px) {
  .connexion-formulaire > .classe-gommettes { top: 3.6rem; right: 1.5rem; width: min(340px, 62vw); opacity: .7; }
  .connexion-formulaire { padding-top: 14rem; }
  .carte-connexion { margin: 1rem auto auto; }
}
@media (max-width: 575.98px) {
  .connexion-formulaire > .classe-gommettes { width: 260px; top: 3.4rem; right: 1rem; }
  .connexion-formulaire { padding-top: 12rem; }
  .logo-connexion-mobile { width: 2.5rem; height: 2.5rem; margin-bottom: .6rem; }
}