/* ===========================================================================
   ESPACE FAMILLE — ce que voient les parents, et eux seuls.
   ===========================================================================
   Chargée UNIQUEMENT pour les comptes famille et les visiteurs non connectés.
   Une règle écrite ici ne peut pas atteindre un écran de chef de groupe, et
   c'est exactement ce qu'on cherche : les deux interfaces vont diverger, et
   l'une ne doit pas se casser quand on fait évoluer l'autre.

   CE QUI N'A PAS SA PLACE ICI : ce qui sert aux DEUX espaces — boutons,
   champs, cartes, tableaux, jetons de couleur. Cela reste dans le socle
   (components.css, layout.css…), sous peine d'entretenir deux fois la même
   règle et de les voir diverger sans qu'on l'ait décidé.

   Vide pour l'instant : les règles propres aux familles y migreront une à une
   depuis le socle (lot E2), en vérifiant chaque écran.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Règles migrées depuis le socle (lot E2).
   ---------------------------------------------------------------------------
   Chacune n'emploie QUE des classes absentes des écrans de responsables :
   elle ne pouvait donc rien y peindre, et n'avait rien à faire dans une
   feuille chargée pour tout le monde.
   ------------------------------------------------------------------------- */

/* Encart d'information RGPD (finalité/base légale/droits ; données sensibles). */
.rgpd-notice {
    color: var(--c-text);
    margin: 0 0 16px;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.rgpd-notice ul { margin: 8px 0 0; padding-left: 16px; }

.rgpd-notice li { margin: 2px 0; }

.rgpd-notice--repliable { margin-top: var(--space-4); }
.rgpd-notice--repliable > summary { cursor: pointer; }
.rgpd-notice--repliable[open] > summary { margin-bottom: var(--space-2); }

/* Montant ANNONCÉ à la famille, qu'elle n'a pas à saisir (frais de participation
   au groupe, majoration marine). Il doit se voir : c'est une somme qui s'ajoute
   à la cotisation, et une ligne d'aide grise se lit comme une note de bas de
   page — le parent découvrait le supplément sur l'appel de cotisation. */
.montant-annonce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) 12px;
    align-items: baseline;
    margin: 0 0 16px;
    border-left: 5px solid var(--c-attention-vif);
    color: #7c2d12;
}

.montant-annonce-titre { font-weight: 700; }

/* Gras + 1,25rem : au-delà de 18,66px gras, le seuil de contraste AA tombe à
   3:1, que ce brun sur crème dépasse largement. */
.montant-annonce-chiffre { font-size: var(--fs-titre); font-weight: 700; color: var(--c-attention); white-space: nowrap; }

.montant-annonce-detail { flex: 1 1 100%; margin: 4px 0 0; font-size: var(--fs-md); line-height: 1.5; color: #78350f; }

/* Lien « N à fournir » (documents obligatoires dus) sur la fiche activité parent :
   alerte rouge soulignée, cliquable vers la page de dépôt. */
.doc-todo-link {
    color: var(--c-obligatoire);
    font-weight: 600;
    text-decoration: underline;
}

/* Justificatifs listés dans la ligne de frais : puces cliquables + suppression. */
.expense-receipts-cell { white-space: normal; }

/* IBAN partiellement masqué (seule forme affichée par défaut) + révélation tracée. */
.rib-masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; white-space: nowrap; }

/* Flux de texte normal : un conteneur flex ferait de chaque <strong> et du bouton
   une rangée à part, cassant la phrase. Le bouton respire via sa marge. */
.rib-status { line-height: 1.6; }

.rib-status--missing { color: var(--c-attention-text); }

.rib-status--ok { color: var(--c-succes-texte); }

.expense-receipts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; height: 30px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--radius-sm); background: var(--c-info-bg-fort); color: var(--c-primary); font-size: 15px; line-height: 1; cursor: pointer; white-space: nowrap; }

.expense-receipts-btn:hover { background: var(--c-info-bg-fort); }

.app-dialog-list { list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow: auto; }

.app-dialog-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.app-dialog-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-dialog-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

.app-dialog-frame { width: 100%; height: 62vh; border: 0; border-top: 1px solid var(--c-border); background: var(--c-surface-alt); }

/* Détail d'une demande d'attestation : en-tête fixe (titre + croix), corps qui défile
   si besoin, pied d'actions. La popup est rendue HORS du tableau : dans une cellule,
   elle hériterait du `white-space: nowrap` et de l'alignement de la colonne d'actions,
   ce qui la faisait déborder en largeur. */
.claim-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    border: 0; border-radius: var(--radius-lg); padding: 0;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
    /* Neutralise tout héritage de contexte (table, cellule d'actions). */
    white-space: normal; text-align: left; overflow: hidden;
}

.claim-dialog[open] { display: flex; flex-direction: column; }

.claim-dialog::backdrop { background: rgba(15, 23, 42, .5); }

.claim-dialog__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-alt); flex-shrink: 0;
}

.claim-dialog__head h3 { margin: 0; color: var(--c-primary); font-size: 1.05rem; }

.claim-dialog__close {
    border: 0; background: none; color: var(--c-neutral); font-size: 1.6rem; line-height: 1;
    padding: 0 4px; cursor: pointer;
}

.claim-dialog__close:hover { color: var(--c-primary); }

.claim-dialog__body { padding: 16px 16px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }

.claim-dialog__body p { margin: 0 0 12px; }

.claim-dialog__body textarea { width: 100%; box-sizing: border-box; }

.claim-dialog__sub { color: var(--c-ghost-text); font-size: var(--fs-md); }

.claim-dialog__form { margin-top: 16px; }

.claim-dialog__foot {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--c-border); background: var(--c-surface-alt); flex-shrink: 0;
}

.claim-dialog__foot form { margin: 0; }

.claim-reason { padding: 8px 12px; background: var(--c-danger-bg-doux); border: 1px solid var(--c-danger-bg-hover); border-radius: var(--radius-sm); color: var(--c-danger-texte); }

/* Fiche activité parent : ligne Période avec menu « Ajouter à mon calendrier ». */
.period-cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* De l'air sous « Ajouter à mon agenda » (repris par le propriétaire). */
.period-cell .cal-add-btn { margin-bottom: var(--space-2); }
/* La popin : deux choix, puis les agendas, en boutons pleine largeur. */
.agenda-dialog { width: min(420px, 94vw); }
.agenda-dialog-corps { padding: var(--space-4); }
.agenda-choix, .agenda-evenement { display: flex; flex-direction: column; gap: var(--space-3); }
.agenda-choix form { margin: 0; }
.agenda-choix .btn--primary, .agenda-evenement .btn--primary { width: 100%; gap: var(--space-2); }
.agenda-choix .aide, .agenda-evenement .aide { margin: 0; }

.cal-menu { position: relative; display: inline-block; }

.cal-menu > summary { list-style: none; cursor: pointer; }

.cal-menu > summary::-webkit-details-marker { display: none; }

/* L'allure vient du bouton standard du thème (`.btn--secondary`, posé sur le
   `summary`) ; il ne reste ici que la mise en ligne du picto et du libellé
   (repris par le propriétaire : le cadre vert maison détonnait). */
.cal-add-btn { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; cursor: pointer; }

.cal-add-btn svg { display: block; }

.cal-menu-panel { position: absolute; right: 0; z-index: 20; margin-top: 4px; min-width: 190px; background: var(--c-surface); border: 1px solid var(--c-ghost-border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(15, 23, 42, .18); overflow: hidden; }

.cal-menu-panel a { display: block; padding: 8px 12px; color: var(--c-primary); text-decoration: none; font-size: var(--fs-md); }

.cal-menu-panel a:hover { background: #eff4ff; }

.cal-menu-panel a + a { border-top: 1px solid var(--c-filet-clair); }

/* Popin de signalement d'absence (motif + justificatif). */
.absence-dialog { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 460px; width: 90vw; box-shadow: 0 10px 40px rgba(15, 23, 42, .3); }

.absence-dialog form { padding: 16px; text-align: left; }

.absence-dialog::backdrop { background: var(--fond-modale); }

/* Documents parent : un fieldset repliable par enfant (titre = prénom). */
.doc-child-group { border: 1px solid var(--c-ghost-border); border-radius: var(--radius-lg); margin-bottom: 16px; background: var(--c-surface); }

.doc-child-summary { cursor: pointer; padding: 12px 16px; font-size: 1.15rem; font-weight: 700; color: var(--c-primary); }

.doc-child-group[open] > .doc-child-summary { border-bottom: 1px solid var(--c-border); }

.doc-child-group > .document-parent-list { padding: 12px 16px; }

/* ── Bulletin d'adhésion : autorisations à trois états ────────────────────── */
/* Une ligne = l'énoncé puis Oui / Non / Sans réponse. Les trois choix sont
   côte à côte pour que « sans réponse » se lise comme un choix offert, et non
   comme un oubli du formulaire. */
.doc-consent { padding: 8px 0; border-bottom: 1px solid var(--c-border); }

.doc-consent:last-child { border-bottom: 0; }

.doc-consent-texte { margin: 0 0 8px; font-size: 0.94rem; }

.doc-consent-choix { display: flex; flex-wrap: wrap; gap: var(--space-1) 24px; }

/* Rang de fratrie : le portail le calcule, on peut le corriger sans que
   l'alternative encombre l'écran. */
.doc-adhesion-autre { margin: 4px 0 12px; }

.doc-adhesion-autre > summary { cursor: pointer; font-size: var(--fs-md); color: var(--c-neutral); }

.doc-adhesion-autre[open] > summary { margin-bottom: 8px; }

/* ── Bulletin : fil des étapes ────────────────────────────────────────────── */
/* Les questions passent AVANT le document, qui n'apparaît qu'une fois rempli.
   Le fil dit où l'on en est, et rend cliquables les seules étapes déjà faites —
   revenir corriger est libre, sauter en avant ne l'est pas. */
.doc-etapes { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none;
    margin: 4px 0 16px; padding: 0; font-size: var(--fs-md); }

.doc-etapes li { display: flex; align-items: center; gap: 8px; color: var(--c-neutral); }

.doc-etapes li a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }

.doc-etapes li a:hover { text-decoration: underline; }

.doc-etape-num { display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-sm); font-weight: 700;
    background: var(--c-border); color: var(--c-neutral); flex: none; }

/* ── Organigramme du groupe (espace famille) ──────────────────────────────── */
/* Un vrai arbre sur grand écran : le chef de groupe en tête, ses adjoints sous
   lui, puis une colonne par unité. Les traits de liaison sont purement
   décoratifs (aria-hidden) et disparaissent sur téléphone, où ils se
   croiseraient — l'arbre s'y empile alors, ce qui reste lisible. */
.orga { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 8px; }

.orga-niveau { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.orga-liaison { width: 2px; height: 22px; background: var(--c-ghost-border); flex: 0 0 auto; }

.orga-identite { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }

/* Carte cliquable (chef de groupe). Le lien porte sur le nom, mais sa zone
   active couvre TOUTE la carte : viser trois mots de texte n'est pas une cible,
   et rien n'indiquait que c'en était une. Pas d'<a> autour de la carte — elle
   contient déjà les liens « appeler » et « écrire », et un <a> ne s'imbrique pas
   plus qu'un <form>. */
.orga-fiche { color: inherit; text-decoration: none; }

.orga-fiche::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.orga-fiche:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* Les actions restent au-dessus du lien étendu, sinon « appeler » ouvrirait la fiche. */
.orga-actions { position: relative; z-index: 1; }

.orga-titre { font-size: var(--fs-md); color: var(--c-ghost-text); }

.orga-actions { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }

.orga-unites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
    position: relative;
}

.orga-unite {
    display: flex; flex-direction: column; gap: 12px;
    border: 1px solid var(--c-ghost-border);
    border-top: 3px solid var(--c-primary);
    border-radius: var(--radius-lg);
    padding: 12px;
    background: var(--c-ghost-hover-bg);
}

.orga-unite h3 { margin: 0; color: var(--c-primary); font-size: 1.05rem; }

/* Les assistants : mêmes cartes, en retrait — la hiérarchie se lit sans trait. */
/* Les assistants en retrait sous leur chef : le décalage dit la subordination
   sans qu'il faille tracer un trait entre chaque carte. */
.orga-assistants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 24px;
    padding-left: 12px;
    border-left: 2px solid var(--c-ghost-border);
}

/* Documents acquis : le prénom sépare les tableaux sans les enfermer dans
   un bloc de plus. */
.documents-acquis-enfant { display: flex; align-items: center; gap: var(--space-2); margin: 16px 0 8px; font-size: var(--fs-base); color: var(--c-primary); }

.trombi-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.trombi-carte {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: 12px 8px; text-align: center;
    border: 1px solid var(--c-ghost-border); border-radius: 10px;
    background: var(--c-surface);
}

.trombi-nom { font-weight: 600; }

.trombi-detail { font-size: var(--fs-sm); color: var(--c-ghost-text); line-height: 1.3; }

/* Le bouton se cale en BAS de carte : les cartes d'une rangée ont déjà la même
   hauteur, mais un « Parent de » qui tient sur quatre lignes repoussait le
   bouton d'autant, et la rangée en montrait cinq à cinq hauteurs différentes. */
.trombi-contact-btn { margin-top: auto; padding-top: 4px; font-size: var(--fs-sm); }

/* Composition d'unité : une rangée par sizaine ou par patrouille, l'enseigne à
   gauche et les jeunes dans leur ordre à droite. La rangée défile
   horizontalement plutôt que de se replier : une patrouille se lit en file,
   et une file cassée en deux lignes n'est plus un ordre de marche. */
.compo-rangee {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 12px;
    margin-bottom: 12px;
    /* Une carte à fond très clair : les sizaines se suivent sans qu'un simple
       filet laisse hésiter sur ce qui appartient à laquelle. */
    background: var(--c-surface-alt); border: 1px solid var(--c-ghost-border);
    border-radius: 10px;
}

.compo-rangee:last-child { margin-bottom: 0; }

.compo-unite { font-size: var(--fs-sm); color: var(--c-ghost-text); text-align: center; }

.compo-enseigne {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex: 0 0 96px; padding-top: 4px;
}

.compo-picto { width: 48px; height: 48px; object-fit: contain; }

.compo-nom { font-weight: 600; text-align: center; line-height: 1.2; }

.compo-effectif {
    font-size: var(--fs-sm); color: var(--c-ghost-text);
}

.compo-jeunes {
    display: flex; gap: 12px; flex: 1 1 auto;
    overflow-x: auto; padding-bottom: 4px;
}

.compo-carte { flex: 0 0 120px; }

.compo-role {
    font-size: var(--fs-sm); color: var(--c-primary); font-weight: 600;
    min-height: 16px;
}

/* Le bas de carte encaisse la différence de hauteur des noms : les cartes d'une
   même file s'étirent déjà à la même hauteur, `margin-top: auto` colle donc rang
   et insignes sur une seule ligne de fond, d'un bout à l'autre de la file. */
.compo-bas {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-top: auto;
}

/* Les insignes s'additionnent sur l'uniforme : ils s'alignent de même ici,
   sous le nom, dans l'ordre où ils s'obtiennent. */
.compo-insignes { display: flex; gap: 4px; align-items: center; min-height: 24px; }

.compo-insigne { width: 22px; height: 22px; object-fit: contain; }

.compo-vide { margin: 8px 0 0; }

/* L'enseigne (picto + nom + effectif) en ligne, sur une largeur FIXE : les
   files de cartes commencent toutes au même endroit, d'une sizaine à
   l'autre — « Blanc » et « Gris » ne les décalaient plus de la largeur de
   leur nom (repris par le propriétaire). */
.compo-enseigne { flex: 0 0 9rem; flex-direction: row; justify-content: flex-start; gap: 8px; padding-top: 0; min-width: 0; }

.compo-picto { width: 32px; height: 32px; flex: 0 0 auto; }

.compo-jeunes { flex: 1 1 auto; min-width: 0; }

/* Fiche de contact du trombinoscope.
   Avant : un tableau standard, dont les cellules héritent d'un « nowrap » —
   elles ne pouvaient donc pas se replier, la fiche débordait de sa boîte et
   s'ouvrait avec une barre de défilement horizontale. Ici, plus de tableau :
   des paires intitulé/valeur qui se replient, et une largeur qui suit l'écran. */
.trombi-fiche { width: min(460px, 92vw); }

.trombi-fiche-corps { padding: 16px; max-height: min(70vh, 560px); overflow-y: auto; }

.trombi-fiche-photo {
    width: 72px; height: 72px;
    display: block; margin: 0 auto 16px;
}

/* Le badge d'initiales tient la place de la photo : `display: block` le
   dépouillerait de la mise en page qui centre ses lettres. */
span.trombi-fiche-photo { display: flex; font-size: var(--fs-titre); }

.trombi-fiche-liste { margin: 0; }

.trombi-fiche-liste dt {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--c-ghost-text); margin-top: 12px;
}

.trombi-fiche-liste dt:first-child { margin-top: 0; }

.trombi-fiche-liste dd {
    margin: 2px 0 0;
    /* Une adresse longue se replie, elle ne pousse pas la boîte. */
    overflow-wrap: break-word;
    line-height: 1.45;
}

/* `.lien-bouton` : déplacé dans components.css (servi aussi côté responsables). */

.trombi-fiche-autre {
    margin: 16px 0 0; padding-top: 12px;
    border-top: 1px solid var(--c-ghost-border);
    font-size: var(--fs-sm); line-height: 1.5;
}

/* Quand les deux blocs de bas de fiche se suivent, un seul trait suffit. */
.trombi-fiche-autre + .trombi-fiche-note { border-top: 0; padding-top: 4px; margin-top: 8px; }

.trombi-fiche-note {
    margin: 16px 0 0; padding-top: 12px;
    border-top: 1px solid var(--c-ghost-border);
    font-size: var(--fs-xs); color: var(--c-ghost-text); line-height: 1.45;
}

/* Badges de visibilité (vue des responsables) : un groupe par ligne, ses deux
   états côte à côte. */
.trombi-visibilites { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 12px; }

.trombi-visibilite { display: inline-flex; align-items: center; gap: 8px; }

/* Un badge qui règle ce qu'il annonce : même apparence, mais cliquable. */
.badge--bouton { cursor: pointer; font-family: inherit; }

.badge--bouton:hover { filter: brightness(.95); border-color: rgba(15, 23, 42, .2); }

.badge--bouton:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Exception à la largeur de lecture ci-dessous : un texte qui OUVRE un écran et
   n'a pas de voisin à droite laisse, borné à 75 caractères, un désert sur la
   moitié de la page. Sur ces écrans-là, mieux vaut une ligne longue qu'un vide.
   À ne poser que sciemment : la borne reste la règle pour tout ce qui se lit
   au fil d'un contenu. */
.texte-pleine-largeur { max-width: none; }

.entity-card-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-note-texte);
    background: var(--c-note-bg);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.entity-card-children {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ---- Attestation fiche sanitaire ---- */
.health-attest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin: 12px 0;
    font-size: var(--fs-md);
    border: 1px solid transparent;
}

.health-attest-ok       { background: var(--c-succes-bg); color: var(--c-succes-texte); border-color: #bbf7d0; }

.health-attest-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

/* Le geste d'un document à signer : un bouton, sans encadré autour. */
.document-parent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

@media (min-width: 641px) and (pointer: fine), (min-width: 641px) and (min-height: 501px) {
    .document-parent-actions { justify-content: flex-end; }
}

/* Avant la signature : la correction, sur sa propre ligne, encadrée d'un filet
   à la couleur du thème pour qu'on la voie avant de signer. */
.doc-corriger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--c-primary);
    background: var(--voile-accent);
}

@media (min-width: 641px) and (pointer: fine), (min-width: 641px) and (min-height: 501px) {
    .doc-corriger { justify-content: space-between; }
}

/* Description riche d'activité (rendu HTML) */
/* Ce qui attend le PARENT lui-même sur une rencontre qui s'adresse à lui
   (migration 135) : un encart discret mais distinct de la liste de ses enfants. */
.activity-parent-notice {
    border-left: 3px solid var(--c-primary, var(--c-primary));
    padding: 2px 0 2px 12px;
    margin: 0 0 16px;
}

.activity-parent-notice h2 { margin-top: 0; }

.document-parent-list {
    display: grid;
    gap: 12px;
}

.document-parent-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.document-parent-heading h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

/* La porte de sortie, sous le formulaire de dépôt : discrète, car elle ne
   concerne qu'une famille sur dix — mais présente, car sans elle son dossier
   reste incomplet pour toujours. */
.document-sans-objet { margin-top: var(--space-2); }

/* Simple calage : le badge qu'il contient porte déjà sa couleur, sa bordure et
   son fond. En lui en ajoutant d'autres, ce conteneur donnait au statut
   l'allure d'un bouton — et l'on cherchait à cliquer sur ce qui ne fait que
   renseigner. */
.document-status { flex: 0 0 auto; }

.document-submit-form {
    margin-top: 12px;
}

.document-inline-check {
    margin-top: 8px;
    width: fit-content;
}

/* ---------------------------------------------------------------------------
   « Votre avis » (RETEX) — la grille de notation.

   Le même balisage sert deux lectures. En largeur, c'est un tableau : une ligne
   par fonction, une colonne par degré, le libellé est en tête de colonne et les
   cases se pointent d'un coup d'œil. En dessous de 720 px, un tableau de six
   colonnes devient illisible : il se déplie en cartes, chaque choix retrouve
   son mot, et on répond au pouce. D'où le libellé répété dans chaque case
   (`.retex-choix-mot`), masqué tant qu'on est en tableau.
   --------------------------------------------------------------------------- */
.retex-sous-titre {
    margin: 24px 0 8px;
    font-size: 15px;
    color: var(--c-primary);
}

/* Les colonnes de notes font toutes la MÊME largeur : sans `table-layout: fixed`,
   chacune se dimensionne sur son intitulé, et « Peut mieux faire » écartait ses
   voisines de deux fois leur largeur. Les cases à cocher se retrouvaient alors
   à des distances différentes du regard, alors qu'elles valent la même chose.
   La colonne des fonctions prend ce qui reste. */
.retex-table { width: 100%; table-layout: fixed; }

.retex-table th[scope="col"] { width: 13%; }

.retex-table th[scope="col"]:first-child { width: auto; }

.retex-table th[scope="col"] {
    font-size: var(--fs-xs);
    line-height: 1.25;
    text-align: center;
    vertical-align: bottom;
}

.retex-table th[scope="col"]:first-child { text-align: left; }

.retex-question {
    text-align: left;
    font-weight: 600;
    line-height: 1.3;
    /* Les en-têtes de ligne des listes ne passent pas à la ligne : un libellé
       long débordait alors sur la colonne « À revoir », sous ses boutons. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.retex-case { text-align: center; }

.retex-choix {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 4px 4px;
    cursor: pointer;
    font-weight: normal;
}

.retex-choix input { flex: none; margin: 0; }

/* En tableau, la colonne dit déjà le degré : le mot ferait doublon. */
.retex-choix-mot { display: none; }

.retex-mes-notes { margin: 8px 0 0; padding-left: 16px; }

.retex-mes-notes li { margin-bottom: 8px; line-height: 1.4; }

/* ⚠️ Ces règles du TÉLÉPHONE avaient perdu leur `@media` (tri des feuilles) :
   elles s'appliquaient aussi au grand écran — en-têtes de colonnes masqués,
   lignes en cartes, mots des choix répétés, libellés débordant sur la
   première case. Elles retrouvent le seuil des cartes (cf. pages.css). */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
    .retex-table thead { display: none; }

    .retex-table tr {
        margin-bottom: 16px;
        padding: 8px 12px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        background: var(--c-surface);
    }

    .retex-question {
        padding: 0 0 4px;
        border-bottom: 1px solid var(--c-filet-clair);
        margin-bottom: 4px;
    }

    .retex-case { text-align: left; padding: 0; }

    .retex-choix {
        justify-content: flex-start;
        gap: 12px;
        padding: 8px 2px;
    }

    /* Hors tableau, plus rien ne dit le degré : le mot reprend sa place. */
    .retex-choix-mot { display: inline; }
}

.is-my4 { margin: 4px 0 !important; }

.is-my8 { margin: 8px 0 !important; }

.is-m-10-0-0 { margin: 12px 0 0 !important; }

.is-card-860 { max-width: 860px !important; margin: 24px auto !important; }


/* Règles responsives migrées avec leur classe : une classe éclatée entre deux
   feuilles finit par se corriger d'un côté seulement. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
    /* Sur un téléphone, l'enseigne passe au-dessus de sa file : 96 px de
       colonne laisseraient trois cartes coupées. */
    .compo-rangee { flex-direction: column; gap: 8px; }
    .compo-enseigne { flex: 0 0 auto; }
    /* Les jeunes d'une sizaine / patrouille sur DEUX colonnes, comme l'onglet
       des louveteaux ou des éclaireurs : une file qui défile de côté coupait
       la troisième carte et cachait la suite (repris par le propriétaire). */
    .compo-jeunes { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); overflow: visible; }
    .compo-jeunes > .compo-carte { flex: none; min-width: 0; }
}

@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
    .document-parent-heading {
        grid-template-columns: 1fr;
        display: grid;
    }
}

/* --- Activités de la famille : où en est chaque activité ------------------ */
/* Passée : un gris léger, qui la range sans l'effacer. En cours : un vert
   léger — c'est celle qu'on cherche des yeux ce jour-là. */
.entity-card--passee { background: var(--c-ghost-hover-bg); }
.entity-card--en-cours {
    background: color-mix(in srgb, var(--c-succes-bg) 55%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-succes) 35%, var(--c-border));
}
.entity-card[hidden] { display: none; }

/* L'interrupteur (.interrupteur) vit désormais dans components.css : les profils
   des responsables l'emploient aussi. */

/* Carte cliquable qui porte un autre lien (« Localisation ») : la carte est un
   bloc, son titre est le lien, étiré sur toute la surface par un pseudo-élément.
   Le lien de localisation passe au-dessus, et reste cliquable seul. */
.entity-card--cliquable { position: relative; }
.entity-card--cliquable .entity-card-lien { color: inherit; text-decoration: none; }
.entity-card--cliquable .entity-card-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entity-card--cliquable .entity-card-lien:focus-visible { outline: none; }
.entity-card--cliquable:focus-within { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* `.lien-localisation` : déplacé dans components.css (servi aussi côté responsables). */

/* Ce que dit le pointage d'une activité passée : même pastille que le statut
   d'inscription qu'elle remplace. Vert, présent ; ambre, excusé ; rouge,
   absent sans motif — c'est celui-là qu'une famille doit voir. */
/* ⚠️ Plus une pastille : une LIGNE de texte, alignée sur la date et le lieu
   (repris par le propriétaire) — en vert avec une coche quand l'enfant ou
   le parent était là, en orange avec un triangle s'il était absent ou excusé. */
.activity-att {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: none;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.activity-att > svg { flex: 0 0 auto; }
.activity-att-present { color: var(--c-succes-texte); }
.activity-att-excused,
.activity-att-absent { color: var(--c-attention-text); }

/* Les documents du bilan partagés par le chef, sur la fiche d'une activité. */
.bilan-pieces-famille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bilan-pieces-famille a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; }

/* Votre avis : le filtre de groupe à gauche, les badges de visibilité au bout
   à droite, dans le même bandeau. */
.bandeau-visibilites { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.bandeau-visibilites > .trombi-visibilites { margin: 0 0 0 auto; }
.bandeau-visibilites > .bandeau-visibilites__filtre { margin: 0; }

/* Mes données (RGPD), au téléphone : la catégorie sort de sa carte et devient
   le titre en gras qui la précède ; la carte ne garde que finalité, base
   légale et conservation (repris par le propriétaire). */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
    body .info-table tbody tr { margin-top: var(--space-6); position: relative; }
    body .info-table tbody tr > td:first-child {
        position: absolute; bottom: 100%; left: 0; right: 0;
        padding: 0 0 var(--space-1); border: 0; background: none;
        font-weight: 700; color: var(--c-text);
    }
    body .info-table tbody tr > td:first-child::before { content: none; display: none; }
}

/* Rencontre passée, pointée, sans aucun parent et sans prévenir. */
.participation-absent-non-prevenu { margin: var(--space-2) 0 0; font-weight: 700; color: var(--c-attention-text); }
/* Corps de la fenêtre de signalement d'absence des parents. */
.app-dialog-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.app-dialog-body > .fieldset-nu { margin: 0 0 var(--space-3); }

/* Pièces jointes d'une activité, dans sa carte : un trombone et le nom. Au-
   dessus du lien étiré de la carte, pour rester cliquables. */
.entity-card-pj { list-style: none; margin: 0 0 var(--space-2); padding: 0; position: relative; z-index: 2; font-size: var(--fs-sm); }
.entity-card-pj a { display: inline-flex; align-items: center; gap: var(--space-1); }

/* L'interrupteur des activités passées et, à sa droite, la légende des
   pastilles de branche. */
.agenda-barre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.agenda-barre > .interrupteur { margin: 0; }
.agenda-legende { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--fs-sm); color: var(--c-text-doux); }
.agenda-legende > span { display: inline-flex; align-items: center; }

/* La présence d'un parent à sa rencontre : une ligne sous la date et le lieu,
   sans l'écart d'un bloc d'enfants. */
.entity-card-presence { margin: var(--space-1) 0 0; }
.entity-card-meta:has(+ .entity-card-presence) { margin-bottom: 0; }
.entity-card-pj:has(+ .entity-card-presence) { margin-bottom: 0; }

/* Cartes d'activité : chaque ligne (date, lieu, limite, prix, pièce jointe,
   présence) pose son picto dans une colonne fixe de 16 px, et la pastille de
   branche du titre occupe la même : tous les débuts de texte s'alignent, et
   la pastille reste centrée sur un titre de deux lignes (repris par le
   propriétaire). */
.entity-card[data-moment] h3 { display: flex; align-items: center; gap: var(--space-2); }
/* 10 px de pastille + 3 px de bord transparent de chaque côté = la colonne de 16 px. */
.entity-card[data-moment] h3 > .pastille-branche { flex: 0 0 auto; margin: 0; box-sizing: content-box; border: 3px solid transparent; background-clip: content-box; }
.carte-ligne { display: flex; align-items: flex-start; gap: var(--space-2); }
.carte-picto { flex: 0 0 16px; width: 16px; height: 1.45em; display: inline-flex; align-items: center; justify-content: center; }
.carte-picto > svg { width: 16px; height: 16px; }
.carte-texte { min-width: 0; overflow-wrap: anywhere; }
.activity-att { gap: var(--space-2); }
.entity-card-pj a { display: inline-flex; }