/*
 * Le peu de mise en page que Filament ne fournit pas.
 *
 * Les ressources de Filament sont pré-compilées, et le projet n'a ni Node ni
 * npm (§11) : sa feuille de style ne contient donc **que** ses propres classes
 * « fi- », et aucune classe utilitaire. Un « flex gap-2 » écrit dans un gabarit
 * ne fait rien du tout — en silence, ce qui est le pire cas.
 *
 * D'où ce fichier, volontairement court : quelques primitives d'empilement, et
 * rien d'autre. Tout ce qui a une apparence — encadré, pastille, bouton, liste
 * de valeurs — vient des composants de Filament, qui savent déjà se dessiner
 * dans les deux thèmes.
 *
 * Les couleurs et les espacements sont ceux de Filament, lus dans ses propres
 * variables : le jour où le thème change, ce fichier suit.
 */

/* Un empilement vertical, l'espacement par défaut d'une section. */
.se-pile {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing, 0.25rem) * 4);
}

.se-pile.se-pile-serree {
    gap: calc(var(--spacing, 0.25rem) * 2);
}

/* Une rangée qui passe à la ligne : pastilles, boutons, mentions. */
.se-rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
}

/* Une rangée dont le second groupe est poussé à droite, et qui se replie
   proprement sur un téléphone — l'émargement et l'espace famille s'y lisent. */
.se-entre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing, 0.25rem) * 3);
}

/* Une liste d'éléments séparés par un filet, sans puces. */
.se-liste {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing, 0.25rem) * 3);
    margin: 0;
    padding: 0;
    list-style: none;

    /* La taille du texte courant de Filament : une liste posée dans une
       section ne doit pas peser plus lourd que la section elle-même. */
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--text-sm--line-height, 1.25rem);
}

.se-liste > * + * {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding-top: calc(var(--spacing, 0.25rem) * 3);
}

.dark .se-liste > * + * {
    border-top-color: var(--gray-800, #1f2937);
}

/* Le texte d'accompagnement, à la taille et à la couleur de Filament. */
.se-discret {
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--text-sm--line-height, 1.25rem);
    color: var(--gray-500, #6b7280);
}

.dark .se-discret {
    color: var(--gray-400, #9ca3af);
}

.se-fort {
    font-weight: 500;
}

/*
 * Sur un téléphone, l'en-tête d'une section garde son titre lisible.
 *
 * Filament pose le titre et les pastilles d'état sur une même ligne souple.
 * À 366 px — un iPhone tenu à la main, c'est-à-dire la moitié des familles —
 * les pastilles écrasent la colonne du titre à 55 px, et « 42 ans au 31
 * décembre 2026 » se coupe au milieu des mots. Les pastilles passent donc à la
 * ligne dès que le titre n'a plus sa place.
 */
.fi-section-header { flex-wrap: wrap; }

.fi-section-header-text-ctn {
    flex: 1 1 12rem;
    min-width: 12rem;
}

/*
 * Dans l'espace famille, un groupe posé dans une carte n'a pas besoin de sa
 * propre carte : deux cadres emboîtés, ce sont deux fois 24 px de marge perdus
 * de chaque côté sur un téléphone. Il ne reste que son intitulé et un filet.
 */
.fi-panel-famille .fi-section .fi-fieldset {
    border: 0;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0;
    padding: calc(var(--spacing, 0.25rem) * 3.5) 0 0;
}

.dark .fi-panel-famille .fi-section .fi-fieldset {
    border-top-color: var(--gray-800, #1f2937);
}

/*
 * Un décompte : un libellé à gauche, un montant à droite.
 *
 * C'est la forme d'une facture, et elle revient partout dans l'espace famille
 * — ce qu'on doit, ce qu'on a déjà versé, ce qu'une facture porte. Un tableau
 * conviendrait sur un écran large ; sur un téléphone ses deux colonnes se
 * disputent la largeur et le montant finit par se couper entre le nombre et
 * son euro. D'où une rangée souple, dont seul le montant est insécable.
 */
.se-compte {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing, 0.25rem) * 1.5);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--text-sm--line-height, 1.25rem);
}

/* Une rangée du décompte. La classe est portée explicitement plutôt que
   déduite du parent : un décompte en contient un autre — le détail d'un
   grimpeur sous son nom —, et un sélecteur d'enfant aplatirait le second. */
.se-compte-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing, 0.25rem) * 4);
    margin: 0;
}

/* Le montant ne se coupe jamais, et ses chiffres gardent la même chasse :
   une colonne de sommes se compare à l'oeil, sans se relire. */
.se-compte-ligne > :last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le détail d'un grimpeur, sous son nom : plus discret que le total qu'il
   explique, et décalé pour qu'on voie d'un coup d'oeil ce qui s'additionne. */
.se-compte-detail {
    padding-left: calc(var(--spacing, 0.25rem) * 3);
    border-left: 2px solid var(--gray-200, #e5e7eb);
    color: var(--gray-500, #6b7280);
}

.dark .se-compte-detail {
    border-left-color: var(--gray-800, #1f2937);
    color: var(--gray-400, #9ca3af);
}

/* Le bilan qui clôt un décompte : ce qui s'ajoute ou se retranche au total. */
.se-compte-bilan {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding-top: calc(var(--spacing, 0.25rem) * 3);
}

.dark .se-compte-bilan {
    border-top-color: var(--gray-800, #1f2937);
}

/* Ce qu'on doit, en grand : c'est le seul nombre que la famille retient, et
   celui qu'elle retrouvera sur son relevé. */
.se-somme {
    margin: 0;
    font-size: var(--text-3xl, 1.875rem);
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--gray-950, #030712);
}

.dark .se-somme {
    color: var(--gray-50, #f9fafb);
}

/*
 * Un tableau de chiffres, quand Filament n'en propose pas.
 *
 * Le constructeur de tableaux de Filament range des enregistrements : une
 * colonne par donnée, une ligne par ligne de table. Un décompte d'heures est
 * l'inverse — une colonne par **mois**, et les mois d'une saison ne sont connus
 * qu'à l'exécution. D'où ces quelques règles, et rien de plus : les couleurs et
 * les espacements restent ceux de Filament.
 *
 * Dix colonnes ne tiennent pas sur un téléphone : le tableau défile dans son
 * propre cadre, jamais la page — une page qui part de côté perd sa navigation.
 */
.se-defile {
    overflow-x: auto;
}

.se-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--text-sm--line-height, 1.25rem);
}

.se-tableau th,
.se-tableau td {
    padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 3);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.dark .se-tableau th,
.dark .se-tableau td {
    border-bottom-color: var(--gray-800, #1f2937);
}

.se-tableau th {
    font-weight: 600;
    color: var(--gray-500, #6b7280);
}

.dark .se-tableau th {
    color: var(--gray-400, #9ca3af);
}

/* Les nombres se comparent à l'œil, sans se relire : même chasse, alignés à
   droite, et jamais coupés. */
.se-tableau .se-nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Le total d'une ligne, et le libellé qui l'ouvre : ce sont les deux colonnes
   qu'on lit quand on parcourt le tableau du regard. */
.se-tableau .se-total {
    font-weight: 600;
    color: var(--gray-950, #030712);
}

.dark .se-tableau .se-total {
    color: var(--gray-50, #f9fafb);
}

/* Un mois sans heure ne pèse pas autant qu'un mois plein. */
.se-tableau .se-vide {
    color: var(--gray-400, #9ca3af);
}

/* Un billet : le QR, puis son code en clair — certaines salles saisissent le
   code à la main quand le lecteur ne prend pas. Les deux sont donc lisibles. */
.se-billet {
    margin: 0 0 calc(var(--spacing, 0.25rem) * 6);
    text-align: center;
}

.se-billet figcaption {
    margin-top: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

/* Le logo d'une salle partenaire, dans une liste comme dans un formulaire. */
.se-logo {
    height: 2rem;
    width: auto;
    border-radius: 0.375rem;
}