/*
 * CSS maison, sans framework (souche Enimad).
 *
 * Les teintes et polices du CLUB ne vivent pas ici : elles sont injectées par
 * le layout dans les variables --club-* depuis les paramètres (tâche 1.12).
 * Ce fichier ne définit que la structure, des neutres, et des DÉRIVÉS des
 * couleurs du club (color-mix) : jamais une couleur de club en dur.
 */

:root {
    --fond: #f5f6f8;
    --surface: #ffffff;
    --texte: #1f2430;
    --texte-attenue: #68738a;
    --bordure: #e4e7ee;
    --rayon: 12px;
    --ombre: 0 1px 2px rgb(16 24 40 / 0.06), 0 4px 14px rgb(16 24 40 / 0.05);
    --ombre-haute: 0 4px 8px rgb(16 24 40 / 0.06), 0 12px 32px rgb(16 24 40 / 0.10);

    /* Dérivés du thème du club. */
    --club-teinte: color-mix(in srgb, var(--club-couleur-1) 6%, white);
    --club-teinte-forte: color-mix(in srgb, var(--club-couleur-1) 14%, white);
    --club-sombre: color-mix(in srgb, var(--club-couleur-1) 82%, black);
    --club-halo: color-mix(in srgb, var(--club-couleur-1) 22%, transparent);

    /* Sémantiques (états, pas identité de marque). */
    --ok: #157347;
    --ok-fond: #ecf7f1;
    --erreur: #b42318;
    --erreur-fond: #fdf0ee;
    --alerte: #93610b;
    --alerte-fond: #fdf6e8;
}

* {
    box-sizing: border-box;
}

/* Filet de sécurité responsive : toute image (logo, photo…) reste dans son
   conteneur même sans classe dédiée. Les usages actuels ont déjà leurs
   propres contraintes (.image-actuelle…), ceci couvre les prochains. */
img {
    max-width: 100%;
    height: auto;
}

/* L'attribut hidden doit TOUJOURS gagner : sans ceci, un display posé par
   une classe (.message est en flex) écrase le display:none du navigateur :
   les bandeaux « cachés » (erreur d'émargement, bannière push) restaient
   visibles, vides. */
[hidden] {
    display: none !important;
}

/* Utilitaire standard : présent pour les lecteurs d'écran, invisible à l'œil
   (le bouton menu mobile n'a pas de place pour un libellé visible). */
.lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--club-police-texte);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--club-police-titre);
    color: var(--club-couleur-1);
    line-height: 1.25;
}

h1 {
    font-size: 1.65rem;
    margin: 0.4rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

a {
    color: var(--club-couleur-1);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--club-sombre);
}

/* --- En-tête ---------------------------------------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0.65rem 1.4rem;
    background: linear-gradient(105deg, var(--club-couleur-1), var(--club-sombre));
    color: #fff;
    box-shadow: 0 2px 12px rgb(16 24 40 / 0.18);
}

.entete .marque {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--club-police-titre);
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.entete .marque img {
    height: 34px;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

/* Contient nav + compte : c'est CE bloc qui se replie sous le bouton menu
   en dessous de 960px (cf. section Responsive). Au-dessus, il se comporte
   exactement comme l'ancienne paire nav+compte à plat dans .entete. */
.entete-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1.6rem;
    min-width: 0;
}

.entete nav {
    display: flex;
    gap: 0.35rem;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}

/* Bouton hamburger : masqué par défaut, réservé au responsive (<960px). */
.bouton-menu {
    display: none;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.bouton-menu:hover {
    background: rgb(255 255 255 / 0.14);
}

.bouton-menu:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.4);
}

/* Trois barres en pur CSS (box-shadow) : pas d'icône à charger. */
.bouton-menu-barres,
.bouton-menu-barres::before,
.bouton-menu-barres::after {
    display: block;
    width: 1.3rem;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bouton-menu-barres {
    position: relative;
    margin: 0 auto;
}

.bouton-menu-barres::before,
.bouton-menu-barres::after {
    content: '';
    position: absolute;
    left: 0;
}

.bouton-menu-barres::before {
    top: -6px;
}

.bouton-menu-barres::after {
    top: 6px;
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres {
    background: transparent;
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres::before {
    transform: translateY(6px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* Groupes de nav par audience, séparés d'un filet. Les étiquettes de
   groupe (data-etiquette) ne s'affichent QUE dans le panneau mobile, où
   elles servent de titres de section : à plat dans le bandeau, elles
   l'allongeaient jusqu'à le faire replier sur deux étages. */
.nav-groupe {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.nav-groupe + .nav-groupe {
    margin-left: 0.55rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgb(255 255 255 / 0.25);
}

.entete nav a {
    color: rgb(255 255 255 / 0.85);
    text-decoration: none;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.93rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.entete nav a:hover {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.entete nav a.actif {
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--club-couleur-2);
}

.entete .compte {
    font-size: 0.88rem;
    color: rgb(255 255 255 / 0.85);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    white-space: nowrap;
}

.entete .compte a {
    color: var(--club-couleur-2);
    text-decoration: none;
}

.entete .compte a:hover {
    text-decoration: underline;
    color: color-mix(in srgb, var(--club-couleur-2) 70%, white);
}

/* Cloche des notifications (en-tête) : pastille rouge du nombre de non lues. */
.entete .compte .cloche {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
}

.entete .compte .cloche:hover,
.entete .compte .cloche.actif {
    color: var(--club-couleur-2);
    text-decoration: none;
}

.cloche-libelle {
    display: none;
}

.cloche-compteur {
    position: absolute;
    top: -7px;
    left: 11px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--erreur);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* --- Contenu ---------------------------------------------------------- */

.conteneur {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.8rem 1.4rem 2.5rem;
}

.note {
    font-size: 0.87rem;
    color: var(--texte-attenue);
}

/* Messages flash : liseré + fond teinté, sémantique. */
.message {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--texte-attenue);
    box-shadow: var(--ombre);
}

.message.success {
    border-left-color: var(--ok);
    background: var(--ok-fond);
}

.message.error {
    border-left-color: var(--erreur);
    background: var(--erreur-fond);
    color: #7a1710;
}

.message.warning {
    border-left-color: var(--alerte);
    background: var(--alerte-fond);
}

/* Sous-navigation de la Configuration : onglets clairs sur fond de page,
   scindés en deux parties étiquetées (administration / technique). */
.sous-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bordure);
}

.sous-nav-groupe {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.sous-nav-groupe + .sous-nav-groupe {
    margin-left: 0.4rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--bordure);
}

.sous-nav-groupe[data-etiquette]::before {
    content: attr(data-etiquette);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-attenue);
    margin-right: 0.25rem;
    white-space: nowrap;
}

.sous-nav a {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--texte-attenue);
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.sous-nav a:hover {
    background: var(--club-teinte-forte);
    color: var(--club-couleur-1);
}

.sous-nav a.actif {
    background: var(--club-couleur-1);
    color: #fff;
    font-weight: 600;
}

.liste-roles {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-roles li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.liste-roles li:last-child {
    border-bottom: none;
}

/* Tuiles de compteurs (file d'événements…). */
.stats-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.stat {
    /* grow, shrink, base 5.5rem : au-delà de 4-5 tuiles sur un téléphone,
       ça reflue sur une 2e ligne plutôt que d'écraser le texte. */
    flex: 1 1 5.5rem;
    min-width: 0;
    text-align: center;
    background: var(--club-teinte);
    border-radius: 10px;
    padding: 0.55rem 0.3rem 0.45rem;
}

.stat .valeur {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--club-police-titre);
    /* Chiffres « elzéviriens » de certaines polices de titre (Georgia) : un
       0 s'y lit « o ». Chiffres alignés, de même hauteur. */
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--club-couleur-1);
}

.stat .libelle {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-attenue);
    white-space: nowrap;
}

.stat.ok .valeur {
    color: var(--ok);
}

.stat.erreur .valeur {
    color: var(--erreur);
}

/* Variantes de badge sémantiques. */
.badge-ok {
    background: var(--ok);
}

.badge-erreur {
    background: var(--erreur);
}

.badge-attente {
    background: var(--texte-attenue);
}

/* Membre / invité (demande Damien 21/09) : jamais une couleur d'état
   (ok/erreur/attente), juste une identité, membre à la couleur du club. */
.badge-membre {
    background: var(--club-couleur-1);
}

.badge-invite {
    background: var(--texte-attenue);
}

/* « Déjà venu » (demande Damien 23/09) : doit sauter aux yeux à côté du
   badge Invité, qui partage la même couleur que badge-attente — sinon les
   deux se confondent (vérifié à l'écran, pas seulement en HTML). */
.badge-revenant {
    background: var(--club-couleur-2);
    color: var(--club-couleur-1);
}

.tableau-compact {
    font-size: 0.85rem;
}

.tableau-compact th,
.tableau-compact td {
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
}

.discret {
    color: var(--texte-attenue);
}

/* Lien à jeton remis à l'admin (mailer non branché) : copiable, cassable. */
.message.lien {
    border-left-color: var(--club-couleur-1);
    background: var(--club-teinte);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
    user-select: all;
}

/* --- Cartes ------------------------------------------------------------ */

.cartes {
    display: grid;
    /* min(260px, 100%) plutôt que 260px seul : sous 260px de large (petit
       téléphone, une fois le fond .conteneur retiré), une piste de grille ne
       peut pas rétrécir sous son minimum : elle dépasserait le viewport au
       lieu de passer en une colonne pleine largeur. */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.1rem;
    margin: 1rem 0;
}

.carte,
fieldset {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.1rem 1.4rem 1.3rem;
    box-shadow: var(--ombre);
    margin: 0 0 1.1rem;
    min-inline-size: 0;
}

.carte h2,
legend {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--texte-attenue);
    font-family: var(--club-police-texte);
    font-weight: 700;
}

.carte h2 {
    margin: 0 0 0.7rem;
}

legend {
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}

/* Les listes de définitions (fiches en lecture) : même habillage dans les
   cartes et dans les fieldsets : jamais le rendu navigateur brut (dd
   indentés qui semblent flotter). */
.carte dl,
fieldset dl {
    margin: 0;
}

.carte dt,
fieldset dt {
    font-size: 0.78rem;
    color: var(--texte-attenue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carte dd,
fieldset dd {
    margin: 0.1rem 0 0.7rem;
    font-size: 0.98rem;
}

/* --- Tableaux ----------------------------------------------------------- */

.defilement {
    overflow-x: auto;
}

.tableau,
.tableau-visibilite {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: var(--surface);
}

table.tableau {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.tableau th,
.tableau-visibilite th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--texte-attenue);
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid var(--bordure);
    background: color-mix(in srgb, var(--fond) 60%, white);
}

.tableau td,
.tableau-visibilite td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.tableau tbody tr:last-child td {
    border-bottom: none;
}

.tableau tbody tr {
    transition: background 0.12s ease;
}

.tableau tbody tr:hover {
    background: var(--club-teinte);
}

fieldset .tableau {
    border: none;
    box-shadow: none;
}

.badge {
    display: inline-block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--club-police-texte);
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* --- Formulaires -------------------------------------------------------- */

label {
    display: block;
    margin-top: 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px var(--club-halo);
}

/* Champ invalide APRÈS INTERACTION (:user-invalid, pas :invalid) : un
   champ requis encore vierge ne se colore pas avant d'avoir été touché
   (validation en direct, demande Damien 21/09 — contrôleur Stimulus
   « validation », branché sur tout formulaire par le thème). Couvre aussi
   les règles croisées posées via setCustomValidity (ex. rencontre-dates) :
   la validité personnalisée compte dans :user-invalid comme le reste. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
    border-color: var(--erreur);
}

input:user-invalid:focus-visible,
textarea:user-invalid:focus-visible,
select:user-invalid:focus-visible {
    box-shadow: 0 0 0 3px var(--erreur-fond);
}

input[type="file"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px dashed var(--bordure);
    border-radius: 10px;
    font: inherit;
    background: var(--club-teinte);
}

input[type="color"] {
    width: 72px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: var(--club-couleur-1);
    width: 1rem;
    height: 1rem;
}

label:has(> input[type="checkbox"]),
.case-libelle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

/* Les cases d'un groupe de choix (moyens de paiement…) : chaque paire sur
   sa ligne, un peu d'air entre elles. */
.case-libelle + .case-libelle {
    margin-top: 0.15rem;
}

/* Champs édités DANS un tableau (tarifs, visibilité Mes données) : le
   défilement horizontal du tableau autorise une vraie largeur minimale :
   sans elle, la colonne se comprime jusqu'à un champ de trois lettres ou
   un sélecteur réduit à une seule lettre. */
.tableau input[type="text"],
.tableau-visibilite input[type="text"],
.tableau-visibilite input[type="email"],
.tableau-visibilite input[type="url"],
.tableau-visibilite input[type="tel"],
.tableau-visibilite textarea {
    min-width: 9rem;
}

.tableau input[type="number"] {
    min-width: 6rem;
}

.tableau-visibilite textarea {
    resize: vertical;
}

.tableau select,
.tableau-visibilite select {
    min-width: 12rem;
}

.help-text {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--texte-attenue);
}

/* Erreurs de validation Symfony (ul/li au-dessus du champ). */
form ul {
    list-style: none;
    margin: 0.2rem 0;
    padding: 0;
}

form ul li {
    color: var(--erreur);
    font-size: 0.85rem;
}

/* --- Boutons ------------------------------------------------------------ */

.bouton {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 0.55rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--club-couleur-1);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.bouton:hover {
    background: var(--club-sombre);
    color: #fff;
    box-shadow: var(--ombre);
}

.bouton:active {
    transform: translateY(1px);
}

.bouton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--club-halo);
}

.bouton-secondaire {
    background: transparent;
    border-color: color-mix(in srgb, var(--club-couleur-1) 45%, white);
    color: var(--club-couleur-1);
}

.bouton-secondaire:hover {
    background: var(--club-teinte-forte);
    color: var(--club-sombre);
    box-shadow: none;
}

.bouton-danger {
    background: var(--erreur);
}

.bouton-danger:hover {
    background: #8d1b12;
}

/* Bouton inactif (action pas encore permise) : grisé, sans effet au survol. */
.bouton:disabled,
.bouton:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bouton-danger:disabled:hover {
    background: var(--erreur);
}

.actions-facture {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    align-items: center;
}

.actions-facture .bouton {
    margin-top: 0;
}

.formulaire-paiement {
    max-width: 400px;
}

.recherche {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    max-width: 380px;
}

/* --- Écran Identité ----------------------------------------------------- */

.grille-identite {
    display: grid;
    /* Même piège que .cartes : min(320px, 100%) pour ne jamais dépasser un
       viewport étroit. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.1rem;
    margin-bottom: 0.5rem;
}

.grille-identite fieldset {
    margin-bottom: 0;
}

/* Une carte qui occupe toute la ligne de la grille : pour les blocs larges
   comme l'éditeur enrichi, dont la barre d'outils déborde d'une colonne. */
.grille-identite .pleine-largeur {
    grid-column: 1 / -1;
}

/* Un champ qui dépend de la case au-dessus (limite d'invités, remplacement
   par l'entreprise…) : indenté sous son parent, avec un filet vertical qui
   matérialise le lien. */
.sous-option {
    margin-left: 0.8rem;
    padding-left: 1rem;
    border-left: 2px solid var(--bordure);
}

.image-actuelle img {
    max-height: 64px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 4px;
    background: #fff;
}

.image-actuelle.large img {
    max-height: 120px;
}

.apercu .apercu-entete {
    background: linear-gradient(105deg, var(--club-couleur-1), var(--club-sombre));
    color: #fff;
    font-family: var(--club-police-titre);
    padding: 0.65rem 1rem;
    border-radius: 10px 10px 0 0;
}

.apercu .apercu-corps {
    border: 1px solid var(--bordure);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 0.8rem 1rem 1.2rem;
}

.apercu h2 {
    margin: 0.2rem 0 0.4rem;
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--club-couleur-1);
    font-family: var(--club-police-titre);
}

/* --- Divers écrans ------------------------------------------------------- */

.export-donnees {
    margin-top: 1rem;
}

.texte-legal {
    max-width: 760px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem 2rem 2rem;
}

/* Dépliants (historique…) : une vraie affordance de bouton, pas un texte
   qui détecte le clic. */
details {
    margin-top: 0.6rem;
}

details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid color-mix(in srgb, var(--club-couleur-1) 35%, white);
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--club-couleur-1);
    list-style: none;
    transition: background 0.15s ease;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: '▸';
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details summary:hover {
    background: var(--club-teinte-forte);
}

details summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--club-halo);
}

details ul {
    margin: 0.6rem 0 0;
    padding: 0.6rem 1rem 0.6rem 2rem;
    font-size: 0.88rem;
    color: var(--texte-attenue);
    background: var(--club-teinte);
    border-radius: 10px;
}

/* --- Pages d'erreur (404, 403…) ------------------------------------------- */

.page-erreur {
    max-width: 520px;
    margin: 8vh auto 0;
    text-align: center;
}

.page-erreur .code-erreur {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    font-family: var(--club-police-titre);
    color: color-mix(in srgb, var(--club-couleur-1) 30%, white);
}

.page-erreur h1 {
    justify-content: center;
}

.page-erreur .actions-facture {
    justify-content: center;
    margin-top: 1.2rem;
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.4rem 1.8rem;
    font-size: 0.84rem;
    color: var(--texte-attenue);
    border-top: 1px solid var(--bordure);
    text-align: center;
}

.pied a {
    color: var(--texte-attenue);
}

/* --- Connexion et pages publiques ----------------------------------------- */

.connexion {
    max-width: 410px;
    margin: 9vh auto 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    padding: 1.6rem 2.2rem 2.2rem;
    box-shadow: var(--ombre-haute);
    position: relative;
    overflow: hidden;
}

.connexion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--club-couleur-1), var(--club-couleur-2));
}

.connexion h1 {
    text-align: center;
    justify-content: center;
    font-size: 1.4rem;
}

.connexion .souvenir {
    margin-top: 1rem;
}

.connexion .bouton {
    width: 100%;
    text-align: center;
}

.aide {
    margin-top: 1.1rem;
    font-size: 0.88rem;
    text-align: center;
}

.champ-mdp {
    position: relative;
}

.champ-mdp input {
    padding-right: 5.2rem;
}

.champ-mdp-bouton {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 0.2rem 0.3rem;
    font-size: 0.85rem;
    color: var(--club-couleur-1);
    cursor: pointer;
}

.champ-mdp-bouton:hover {
    text-decoration: underline;
}

/* --- Responsive ------------------------------------------------------------ */

/* Largeurs intermédiaires (écran portable) : le bandeau d'un admin frôle la
   largeur disponible : on resserre (étiquettes de groupe masquées, liens et
   espaces plus compacts) pour qu'il TIENNE SUR UN ÉTAGE jusqu'au seuil du
   hamburger, au lieu de replier des liens sur une seconde ligne. */
@media (min-width: 961px) and (max-width: 1450px) {
    .entete,
    .entete-menu {
        gap: 0.9rem;
    }

    .entete .marque {
        font-size: 1rem;
    }

    .entete nav a {
        padding: 0.38rem 0.55rem;
        font-size: 0.88rem;
    }

    .nav-groupe + .nav-groupe {
        margin-left: 0.3rem;
        padding-left: 0.55rem;
    }

    .entete .compte {
        gap: 0.6rem;
        font-size: 0.84rem;
    }
}

/* Nav repliée en panneau déroulant : la nav d'un admin dépasse la dizaine
   de liens (Accueil, Mes données, Membres, Rencontres, Présences,
   Cotisations, Configuration, HelloAsso, Comptes…), ça ne tient plus sur
   une ligne bien avant le point de rupture « petit écran » classique. */
@media (max-width: 960px) {
    .bouton-menu {
        display: block;
        /* Le panneau replié ne pousse plus rien : sans ceci, le bouton
           flotterait au milieu de l'en-tête au lieu d'être ancré à droite. */
        margin-left: auto;
    }

    .entete-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        background: var(--club-sombre);
        box-shadow: 0 12px 24px rgb(16 24 40 / 0.25);
    }

    .entete-menu.ouvert {
        display: flex;
    }

    .entete-menu nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.6rem 1rem;
    }

    .nav-groupe {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-groupe + .nav-groupe {
        margin: 0.5rem 0 0;
        padding: 0.6rem 0 0;
        border-left: none;
        border-top: 1px solid rgb(255 255 255 / 0.18);
    }

    /* Dans le panneau, les étiquettes de groupe deviennent des titres de
       section (elles n'existent pas à plat dans le bandeau). */
    .nav-groupe[data-etiquette]::before {
        content: attr(data-etiquette);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        line-height: 1.25;
        color: var(--club-couleur-2);
        margin: 0 0 0.2rem;
    }

    .entete nav a {
        padding: 0.6rem 0.5rem;
        border-radius: 8px;
    }

    .entete-menu .compte {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.8rem 1rem 1rem;
        border-top: 1px solid rgb(255 255 255 / 0.18);
        white-space: normal;
    }

    .entete-menu .compte a {
        padding: 0.4rem 0.5rem;
    }

    /* Dans le menu mobile, la cloche devient une ligne lisible. */
    .entete-menu .compte .cloche-libelle {
        display: inline;
    }

    .entete-menu .compte .cloche-compteur {
        position: static;
    }
}

@media (max-width: 720px) {
    /* .entete est déjà position: sticky en base : ça suffit comme repère
       pour .entete-menu (position: absolute) dès 960px, pas besoin de le
       redéfinir ici. */
    .entete {
        padding: 0.6rem 1rem;
    }

    .conteneur {
        padding: 1.2rem 1rem 2rem;
    }

    .connexion {
        margin: 4vh 1rem 0;
        padding: 1.4rem 1.4rem 1.8rem;
    }

    h1 {
        font-size: 1.35rem;
    }

    .carte,
    fieldset {
        padding: 0.9rem 1rem 1.1rem;
    }

    /* Cibles tactiles confortables (44px, recommandation courante) : les
       formulaires à un seul bouton restent inline, pas de largeur forcée. */
    .bouton {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tableau th,
    .tableau-visibilite th,
    .tableau td,
    .tableau-visibilite td {
        padding: 0.55rem 0.6rem;
        font-size: 0.87rem;
    }

    /* Le tableau de visibilité (Mes données) est un FORMULAIRE, pas une
       grille à parcourir : plutôt qu'un défilement horizontal qui perd la
       colonne des libellés, chaque ligne devient un bloc empilé : donnée
       en titre, valeur en dessous, sélecteur pleine largeur. */
    .tableau-visibilite thead {
        display: none;
    }

    .tableau-visibilite,
    .tableau-visibilite tbody,
    .tableau-visibilite tr,
    .tableau-visibilite td {
        display: block;
    }

    .tableau-visibilite tr {
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--bordure);
    }

    .tableau-visibilite tr:last-child {
        border-bottom: none;
    }

    .tableau-visibilite td {
        padding: 0.1rem 0;
        border-bottom: none;
    }

    .tableau-visibilite td:first-child {
        font-weight: 600;
        font-size: 0.92rem;
    }

    .tableau-visibilite select {
        min-width: 0;
        margin-top: 0.2rem;
    }
}

/* --- Émargement le jour J (tâche 3.5) ---------------------------------------
   Utilisé debout, sur un téléphone : grosses zones tactiles, une ligne par
   personne, recherche collante, aucun menu déroulant. */

.emargement-compteur {
    font-size: 1.05rem;
}

.emargement-recherche {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    margin-bottom: 0.8rem;
}

.emargement-liste {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ligne-emargement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.ligne-emargement-identite {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ligne-emargement-nom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.ligne-emargement-boutons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bouton-pointage {
    min-height: 3.2rem;
    min-width: 5.4rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--rayon);
    border: 2px solid var(--bordure);
    background: var(--surface);
    color: var(--texte-attenue);
    cursor: pointer;
    touch-action: manipulation;
}

.pointage-present.choisi {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.pointage-absent.choisi {
    background: var(--erreur);
    border-color: var(--erreur);
    color: #fff;
}

.emargement-bloc {
    margin-top: 1rem;
}

.emargement-formulaire {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.emargement-formulaire input[type="text"] {
    flex: 1 1 10rem;
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.emargement-cloture {
    margin-top: 2rem;
}

/* --- Émargement, refonte 29/09 --------------------------------------------- */
.emargement-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.4rem 0 1rem;
}

.emargement-stat {
    display: flex;
    flex-direction: column;
    min-width: 6.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Police du texte, pas des titres : Georgia a des chiffres « elzéviriens »
   (le 0 y ressemble à un o), illisibles pour un compteur. */
.emargement-stat strong {
    font-family: var(--club-police-texte);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--club-couleur-1);
}

.emargement-stat span {
    font-size: 0.8rem;
    color: var(--texte-attenue);
}

.emargement-stat-presents strong {
    color: var(--ok);
}

/* L'état pointé se lit sur toute la ligne, pas seulement sur le bouton. */
.ligne-emargement {
    border-left: 4px solid var(--bordure);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ligne-emargement[data-etat="present"] {
    border-left-color: var(--ok);
}

.ligne-emargement[data-etat="absent"] {
    border-left-color: var(--erreur);
}

/* Annoncé absent et pas (encore) pointé : en retrait, sans disparaître. */
.ligne-emargement.ligne-non-attendue[data-etat=""] {
    opacity: 0.65;
}

.ligne-emargement-detail {
    font-size: 0.87rem;
    color: var(--texte-attenue);
}

.emargement-cloture summary {
    border-color: var(--erreur);
    color: var(--erreur);
}

/* Téléphone (après les règles de base, sinon elles l'emportent) : nom puis
   deux boutons pleine largeur, faciles à toucher debout. */
@media (max-width: 480px) {
    .ligne-emargement {
        flex-direction: column;
        align-items: stretch;
    }

    .ligne-emargement-boutons {
        width: 100%;
    }

    .ligne-emargement-boutons form {
        flex: 1;
    }

    .ligne-emargement-boutons .bouton-pointage {
        width: 100%;
    }

    .emargement-stat {
        flex: 1;
        min-width: 0;
    }
}

/* --- Onboarding (première connexion du créateur de l'espace) --------------
   Assistant plein écran, linéaire et animé : fond dégradé aux couleurs du
   club (mises à jour EN DIRECT pendant le choix), panneaux qui glissent,
   barre de progression, coche finale dessinée. Les animations respectent
   prefers-reduced-motion. */

.onboarding {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background:
        radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--club-couleur-2) 45%, transparent), transparent 60%),
        linear-gradient(135deg, var(--club-couleur-1), var(--club-sombre));
    transition: background 0.3s ease;
}

.onboarding-carte {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: calc(var(--rayon) + 6px);
    box-shadow: 0 24px 70px rgb(10 18 34 / 0.35);
    padding: 1.6rem 2rem 2rem;
    animation: onboarding-apparition 0.5s ease both;
}

@keyframes onboarding-apparition {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Progression : barre continue + jalons nommés. */
.onboarding-progression {
    height: 6px;
    border-radius: 999px;
    background: var(--bordure);
    overflow: hidden;
}

.onboarding-progression-barre {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--club-couleur-1), var(--club-couleur-2));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-jalons {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0.5rem 0 1.2rem;
    padding: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a1b3;
}

.onboarding-jalons li {
    transition: color 0.3s ease;
}

.onboarding-jalons li.actif {
    color: var(--club-couleur-1);
    font-weight: 700;
}

/* Panneaux : un seul visible, entrée en glissement. */
.onboarding-panneau.actif {
    animation: onboarding-glisse 0.4s ease both;
}

@keyframes onboarding-glisse {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

.onboarding-panneau h1 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
}

.onboarding-emoji {
    font-size: 2.6rem;
    margin: 0.4rem 0 0;
    animation: onboarding-coucou 1.1s ease 0.4s 1;
    transform-origin: 70% 70%;
    display: inline-block;
}

@keyframes onboarding-coucou {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(16deg); }
    40%, 80% { transform: rotate(-8deg); }
}

.onboarding-pitch {
    color: #57606a;
    line-height: 1.55;
}

/* Les trois promesses de l'écran d'accueil, révélées en cascade. */
.onboarding-etapes-apercu {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.4rem;
}

.onboarding-etapes-apercu li {
    padding: 0.45rem 0 0.45rem 1.9rem;
    position: relative;
    animation: onboarding-apparition 0.45s ease both;
}

.onboarding-etapes-apercu li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--club-couleur-2) 22%, white);
    color: var(--club-sombre);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.onboarding-etapes-apercu li:nth-child(1) { animation-delay: 0.15s; }
.onboarding-etapes-apercu li:nth-child(2) { animation-delay: 0.3s; }
.onboarding-etapes-apercu li:nth-child(3) { animation-delay: 0.45s; }

/* Champs : pleine largeur, généreux : c'est un écran d'accueil. */
.onboarding-panneau label {
    display: block;
    font-weight: 600;
    margin: 0.9rem 0 0.3rem;
}

.onboarding-panneau input[type="text"],
.onboarding-panneau input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-panneau input[type="text"]:focus,
.onboarding-panneau input[type="number"]:focus {
    outline: none;
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-couleur-1) 18%, transparent);
}

.onboarding-libelle {
    display: block;
    font-weight: 600;
    margin: 0.9rem 0 0.3rem;
}

/* Pastilles de couleur : le sélecteur natif, rond et cliquable. */
.onboarding-couleurs-choix {
    display: flex;
    gap: 1.4rem;
}

.onboarding-pastille {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    font-weight: 500 !important;
    margin: 0.2rem 0 !important;
    cursor: pointer;
}

.onboarding-pastille input[type="color"] {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bordure);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.onboarding-pastille input[type="color"]:hover {
    transform: scale(1.08);
}

.onboarding-logo-apercu {
    display: block;
    max-height: 64px;
    margin-top: 0.5rem;
    border-radius: 8px;
}

/* Interrupteur « adhésion payante » : bascule animée (onboarding et
   Configuration → Adhésion & tarifs). */
.interrupteur,
.onboarding-interrupteur {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.interrupteur input,
.onboarding-interrupteur input {
    position: absolute;
    opacity: 0;
}

.interrupteur-piste,
.onboarding-interrupteur-piste {
    flex-shrink: 0;
    width: 2.9rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #cdd3de;
    position: relative;
    transition: background 0.2s ease;
}

.interrupteur-piste::after,
.onboarding-interrupteur-piste::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.6rem - 6px);
    height: calc(1.6rem - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.interrupteur input:checked + .interrupteur-piste,
.onboarding-interrupteur input:checked + .onboarding-interrupteur-piste {
    background: var(--club-couleur-1);
}

.interrupteur input:checked + .interrupteur-piste::after,
.onboarding-interrupteur input:checked + .onboarding-interrupteur-piste::after {
    transform: translateX(1.3rem);
}

.interrupteur input:focus-visible + .interrupteur-piste,
.onboarding-interrupteur input:focus-visible + .onboarding-interrupteur-piste {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-couleur-1) 30%, transparent);
}

.onboarding-tarif-ligne {
    display: flex;
    gap: 1rem;
}

.onboarding-tarif-ligne > span {
    flex: 1;
}

/* Coche finale : cercle puis trait, dessinés au stylo. */
.onboarding-coche {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0.4rem 0 0.8rem;
}

.onboarding-coche circle,
.onboarding-coche path {
    fill: none;
    stroke: var(--club-couleur-1);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onboarding-coche circle {
    stroke-dasharray: 208;
    stroke-dashoffset: 208;
    animation: onboarding-trace 0.7s ease 0.15s forwards;
}

.onboarding-coche path {
    stroke: var(--club-couleur-2);
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: onboarding-trace 0.4s ease 0.75s forwards;
}

@keyframes onboarding-trace {
    to { stroke-dashoffset: 0; }
}

.onboarding-recap {
    background: color-mix(in srgb, var(--club-couleur-1) 6%, white);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0.6rem 0 1rem;
}

.onboarding-recap dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a1b3;
    margin-top: 0.5rem;
}

.onboarding-recap dt:first-child {
    margin-top: 0;
}

.onboarding-recap dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
}

.onboarding-erreur {
    color: #b91c1c;
    background: #fdf0ef;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin: 0.9rem 0 0;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.4rem;
}

.onboarding-actions .onboarding-principal {
    margin-left: auto;
    font-size: 1rem;
    padding: 0.65rem 1.6rem;
}

.onboarding-retour {
    border: none;
    background: none;
    color: #6a737d;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    text-decoration: underline;
}

.onboarding-retour:hover {
    color: var(--club-couleur-1);
}

@media (max-width: 640px) {
    .onboarding {
        padding: 0.8rem;
        align-items: flex-start;
    }

    .onboarding-carte {
        padding: 1.2rem 1.1rem 1.5rem;
        margin-top: 0.6rem;
    }

    .onboarding-jalons {
        font-size: 0.62rem;
    }

    .onboarding-tarif-ligne {
        flex-direction: column;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-carte,
    .onboarding-panneau.actif,
    .onboarding-etapes-apercu li,
    .onboarding-emoji {
        animation: none;
    }

    .onboarding-coche circle,
    .onboarding-coche path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .onboarding-progression-barre {
        transition: none;
    }
}

/* Étape « Vos membres » de l'onboarding : lignes prénom / nom / e-mail /
   échéance individuelle. La liste défile SUR ELLE-MÊME (hauteur bornée) :
   c'est elle qui scrolle quand on ajoute des personnes, jamais la page
   entière (demande Damien 17/09). */
.onboarding-membres {
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.2rem 0.5rem 0.2rem 0.1rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
}

.onboarding-membres-entete {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--texte-attenue);
}

.onboarding-membres-entete span {
    flex: 1;
    min-width: 0;
}

.onboarding-membres-entete span:nth-child(4) {
    flex: 0 0 9.5rem;
}

.onboarding-membres-entete span:nth-child(5) {
    flex: 0 0 1.7rem;
}

.onboarding-membre-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    animation: onboarding-apparition 0.3s ease both;
}

.onboarding-membre-ligne input {
    flex: 1;
    min-width: 0;
}

.onboarding-membre-ligne input[type="date"] {
    flex: 0 0 9.5rem;
}

.onboarding-membre-retirer {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: #fff;
    color: var(--texte-attenue);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.onboarding-membre-retirer:hover {
    border-color: #d33;
    color: #d33;
}

@media (max-width: 640px) {
    .onboarding-membres {
        max-height: 17rem;
    }

    .onboarding-membres-entete {
        display: none;
    }

    .onboarding-membre-ligne {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        margin-bottom: 0.9rem;
    }

    .onboarding-membre-ligne input[type="date"] {
        flex-basis: auto;
    }

    .onboarding-membre-retirer {
        align-self: flex-end;
    }
}

/* Annuaire privé (5.1) : portrait en tête de carte. */
.annuaire-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bordure);
    background: #fff;
}

/* Classement « Qui recrute » : photo ronde devant le nom. */
.classement-membre {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.classement-photo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--bordure);
    background: #fff;
}

/* Page « Mes notifications ». */
.liste-notifications {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.liste-notifications a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.liste-notifications a:hover {
    border-color: var(--club-couleur-1);
}

.notification-non-lue a {
    border-left: 4px solid var(--club-couleur-1);
    background: var(--club-teinte);
}

.notification-titre {
    font-weight: 700;
}

.notification-lue .notification-titre {
    font-weight: 600;
    color: var(--texte-attenue);
}

.notification-date {
    grid-row: 1;
    grid-column: 2;
    font-size: 0.8rem;
    color: var(--texte-attenue);
    white-space: nowrap;
}

.notification-texte {
    grid-column: 1 / -1;
    font-size: 0.92rem;
}

/* Tableau des préférences de notification (Mon compte). */
.tableau-preferences td:not(:first-child),
.tableau-preferences th:not(:first-child) {
    text-align: center;
    width: 8rem;
}

@media (max-width: 600px) {
    .liste-notifications a {
        grid-template-columns: 1fr;
    }

    .notification-date {
        grid-row: auto;
        grid-column: 1;
    }
}

/* Page publique d'invitation : qui invite, et à quel club. */
.invitation-club {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    margin: 0 0 1.2rem;
    border-radius: var(--rayon);
    background: var(--club-teinte);
    border-left: 5px solid var(--club-couleur-1);
}

.invitation-club p {
    margin: 0;
}

.invitation-club-logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

.invitation-club-monogramme {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--club-couleur-1);
    color: #fff;
    font-family: var(--club-police-titre);
    font-size: 1.8rem;
    font-weight: 700;
}

.invitation-club-nom {
    font-family: var(--club-police-titre);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--club-couleur-1);
}

.invitation-club-description {
    margin-top: 0.25rem !important;
    font-size: 0.92rem;
    color: var(--texte-attenue);
}

.invitation-invitant {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.invitation-invitant p {
    margin: 0;
}

.invitation-invitant-photo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bordure);
    background: #fff;
}

.invitation-invitant-phrase {
    font-size: 1.05rem;
}

/* Carte « Prochaines rencontres » (accueil) : infos en haut, réponse
   toujours au même endroit en bas (alignée d'une carte à l'autre), actions
   secondaires (inviter, remplacement) en pied, plus discrètes. */
.carte-rencontre {
    display: flex;
    flex-direction: column;
}

.carte-rencontre p {
    margin: 0 0 0.35rem;
}

.carte-rencontre .rencontre-ou {
    margin-bottom: 0.6rem;
}

.rencontre-reponse {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--bordure);
}

.rencontre-limite {
    font-size: 0.85rem;
    color: var(--club-couleur-1);
    font-weight: 600;
}

/* « Ajouter à mon agenda » : une ligne discrète sous les infos pratiques. */
.rencontre-agenda {
    font-size: 0.85rem;
    color: var(--texte-attenue);
}

.rencontre-etat {
    font-size: 0.92rem;
}

.reponse-boutons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.reponse-boutons .bouton {
    margin-top: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
}

.reponse-accompagnants {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--texte-attenue);
}

.reponse-accompagnants input[type="number"] {
    width: 4rem;
    padding: 0.25rem 0.45rem;
}

.rencontre-plus {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--bordure);
}

.rencontre-plus details {
    margin-top: 0;
}

.rencontre-plus details[open] {
    flex-basis: 100%;
}

/* Liens d'action discrets plutôt que des pastilles concurrentes des boutons. */
.rencontre-plus summary {
    padding: 0.2rem 0;
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
}

.rencontre-plus summary:hover {
    background: none;
    text-decoration: underline;
}

/* Bloc « Lui recommander une affaire » (fiche annuaire) : mis en évidence
   pendant la saisie, pour que le bouton d'en-tête ait un effet visible. */
#recommander {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#recommander:focus-within {
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px var(--club-halo);
}

/* Carte de l'annuaire : l'essentiel, toute la carte mène à la fiche. */
.carte-annuaire {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.carte-annuaire:hover,
.carte-annuaire:focus-visible {
    border-color: var(--club-couleur-1);
    box-shadow: var(--ombre-haute);
}

.carte-annuaire h2 {
    margin: 0.3rem 0 0;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--club-couleur-1);
    font-family: var(--club-police-titre);
}

.carte-annuaire p {
    margin: 0;
}

.carte-lien {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.88rem;
    color: var(--club-couleur-1);
}

.fiche-annuaire {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0.5rem 0 1.4rem;
}

.fiche-annuaire h1 {
    margin: 0;
}

.fiche-annuaire p {
    margin: 0.2rem 0 0;
}

.fiche-annuaire-photo {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bordure);
    background: #fff;
}

.fiche-annuaire-logo {
    display: block;
    max-width: 100%;
    max-height: 140px;
    margin-bottom: 0.9rem;
    object-fit: contain;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}

/* Photo du membre dans sa fiche (bureau) : ronde, comme dans l'annuaire. */
.photo-membre img {
    width: 96px;
    height: 96px;
    max-height: none;
    object-fit: cover;
    border-radius: 50%;
}

/* Aperçu posé par le contrôleur image-reduite dès la sélection du fichier. */
.apercu-image {
    display: block;
    max-height: 96px;
    margin-top: 0.5rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 4px;
    background: #fff;
}

/* Recommandations (7.2/7.5) : lignes séparées d'un filet. */
.reco-ligne + .reco-ligne {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--bordure);
}

/* Tableau de bord bureau (6.1) : chiffres clés cliquables. */
.tdb {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.tdb a {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 0.8rem 1rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tdb a:hover {
    box-shadow: var(--ombre-haute);
    transform: translateY(-1px);
}

.tdb .tdb-chiffre {
    display: block;
    font-family: var(--club-police-titre);
    font-size: 1.6rem;
    color: var(--club-couleur-1);
    line-height: 1.2;
}

.tdb .tdb-libelle {
    display: block;
    font-size: 0.82rem;
    color: var(--texte-attenue);
}

.tdb a.tdb-alerte .tdb-chiffre {
    color: var(--erreur);
}

/* --- Menus déroulants du bandeau (demande Damien 17/09) ----------------- */
/* Les groupes étiquetés (Mon espace, Bureau, Administration) tiennent en UN
   déclencheur chacun : le bandeau reste sur un étage quel que soit le rôle.
   CSS pur : ouverture au survol ET au clavier (focus-within), aucun script.
   En mobile (<960px), le panneau hamburger reprend l'affichage à plat. */
.nav-groupe[data-etiquette] {
    position: relative;
}

.nav-menu-titre {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgb(255 255 255 / 0.85);
    font: inherit;
    font-size: 0.93rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu-titre:hover,
.nav-groupe[data-etiquette]:focus-within .nav-menu-titre {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.nav-menu-titre.actif {
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--club-couleur-2);
}

.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
}

/* Pont invisible entre le déclencheur et le panneau : le survol ne se coupe
   pas dans l'interstice. */
.nav-groupe[data-etiquette]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.55rem;
}

.nav-menu-liens {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
    padding: 0.45rem;
    background: var(--club-sombre);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgb(16 24 40 / 0.3);
}

.nav-groupe[data-etiquette]:hover .nav-menu-liens,
.nav-groupe[data-etiquette]:focus-within .nav-menu-liens {
    display: flex;
}

.entete nav .nav-menu-liens a {
    border-radius: 8px;
    white-space: nowrap;
}

@media (min-width: 961px) and (max-width: 1450px) {
    .nav-menu-titre {
        padding: 0.38rem 0.55rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 960px) {
    /* Panneau hamburger : le déclencheur disparaît (l'étiquette ::before
       sert de titre de section) et les liens reviennent à plat. */
    .nav-menu-titre {
        display: none;
    }

    .nav-groupe[data-etiquette]::after {
        content: none;
    }

    .nav-menu-liens {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- Texte enrichi (Trix, description d'une rencontre) -------------------- */
/* .texte-enrichi habille le contenu, ÉDITEUR COMME AFFICHAGE (même classe,
   même rendu) : la feuille de style de Trix (importmap) ne charge que sur
   les pages avec l'éditeur (toolbar, icônes) ; ces règles-ci, maison,
   s'appliquent partout où une description déjà enregistrée est montrée, sans
   dépendre de Trix ni de JavaScript. */
.texte-enrichi {
    line-height: 1.6;
}

.texte-enrichi div + div {
    margin-top: 0.5em;
}

.texte-enrichi h1 {
    font-size: 1.1rem;
    margin: 0.6em 0 0.3em;
    color: inherit;
}

.texte-enrichi blockquote {
    margin: 0.5em 0;
    padding-left: 0.9rem;
    border-left: 3px solid var(--bordure);
    color: var(--texte-attenue);
}

.texte-enrichi pre {
    background: var(--fond);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.88em;
}

.texte-enrichi ul,
.texte-enrichi ol {
    margin: 0.4em 0;
    padding-left: 1.4rem;
}

/* Pièce jointe non câblée (aucun dépôt de fichier) : le bouton disparaît,
   pour ne jamais laisser croire qu'il fonctionne (contrôleur « editeur »
   refuse aussi le dépôt lui-même, en défense supplémentaire). */
/* Spécificité volontairement au-dessus de celle du CSS de Trix (chargé
   APRÈS app.css, ses sélecteurs « trix-toolbar .trix-button-group » font
   égalité et gagneraient à l'ordre). */
trix-toolbar .trix-button-group.trix-button-group--file-tools {
    display: none;
}

trix-editor.texte-enrichi {
    display: block;
    min-height: 6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: var(--surface);
}

trix-editor.texte-enrichi:focus {
    outline: none;
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px var(--club-halo);
}

/* --- Format des numéros de facture, en cellules déplaçables --------------- */
.ff-editeur {
    margin: 0.5rem 0 0.9rem;
}

.ff-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ff-ajouter {
    margin-top: 0;
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
}

.ff-cellules {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0.5rem;
    border: 1px dashed var(--bordure);
    border-radius: 10px;
    background: var(--fond);
}

.ff-cellule {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    box-shadow: var(--ombre);
    font-size: 0.85rem;
}

.ff-cellule-glissee {
    opacity: 0.35;
}

/* Numéro de position : répond directement à « dans quel ordre ? » sans
   avoir à recompter les cellules ou à se fier au glisser. */
.ff-cellule-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--club-teinte);
    color: var(--club-couleur-1);
    font-size: 0.68rem;
    font-weight: 700;
}

/* Poignée SEULE porteuse du curseur « glisser » : le reste de la cellule
   (texte, boutons) garde son curseur normal, plus clair sur ce qui se
   clique et ce qui se glisse. */
.ff-cellule-poignee {
    flex-shrink: 0;
    color: var(--texte-attenue);
    font-size: 0.8rem;
    line-height: 1;
    cursor: grab;
}

.ff-cellule:active .ff-cellule-poignee {
    cursor: grabbing;
}

.ff-cellule-libelle {
    font-weight: 600;
    color: var(--club-couleur-1);
    white-space: nowrap;
}

.ff-cellule-exemple {
    color: var(--texte-attenue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ff-cellule-exemple::before {
    content: '· ';
}

.ff-cellule-valeur {
    font-variant-numeric: tabular-nums;
    color: var(--texte-attenue);
}

.ff-cellule-texte input {
    width: auto;
    min-width: 1.4rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    /* Fond distinct de la cellule elle-même (même couleur sinon) : sans ça,
       rien ne montre que c'est un champ à cliquer plutôt qu'un libellé. */
    background: var(--fond);
    font: inherit;
    text-align: center;
}

/* Regroupées visuellement (fond + séparateur) : bien distinctes de la
   poignée de glisser et du contenu de la cellule. */
.ff-cellule-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: 0.15rem;
    padding-left: 0.4rem;
    border-left: 1px solid var(--bordure);
}

.ff-cellule-pas,
.ff-cellule-deplacer,
.ff-cellule-suppr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--texte-attenue);
    cursor: pointer;
    line-height: 1;
    font-size: 0.9rem;
}

.ff-cellule-pas:hover,
.ff-cellule-deplacer:hover:not(:disabled) {
    background: var(--club-teinte);
    color: var(--club-couleur-1);
}

.ff-cellule-pas:disabled,
.ff-cellule-deplacer:disabled {
    opacity: 0.3;
    cursor: default;
}

.ff-cellule-suppr:hover {
    background: #fdf0ee;
    color: var(--erreur);
}

/* Outils de débogage : lecture d'un e-mail envoyé, tel que reçu. */
.apercu-mail {
    width: 100%;
    height: 75vh;
    min-height: 480px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: #fff;
}

.apercu-mail-texte {
    white-space: pre-wrap;
    padding: 1rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--surface);
}

/* --- Fiche d'une rencontre (29/09) ------------------------------------------
   En-tête : titre puis l'essentiel (date, horaire, lieu) d'un coup d'œil.
   Deux colonnes sur grand écran : la fiche à gauche, les inscrits à droite,
   plus larges (tableau à trois colonnes) ; une seule sous 960 px. */
.rencontre-titre {
    margin-bottom: 0.25rem;
}

.rencontre-sous-titre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
    color: var(--texte-attenue);
}

/* Séparateur APRÈS chaque élément : au retour à la ligne, le « · » reste en fin de ligne. */
.rencontre-sous-titre span:not(:last-child)::after {
    content: '·';
    margin: 0 0.55rem;
}

.fiche-rencontre {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.1rem;
    align-items: start;
    margin: 1rem 0 1.1rem;
}

.fiche-rencontre fieldset {
    margin-bottom: 0;
}

.fiche-rencontre-colonne {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.fiche-rencontre-edition .fiche-rencontre-colonne {
    grid-column: 1 / -1;
}

@media (max-width: 960px) {
    .fiche-rencontre {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tableau-inscrits {
    width: 100%;
}

.inscrit-nom {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.inscrit-detail {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--texte-attenue);
}

/* Sur téléphone : une fiche par inscrit plutôt qu'un tableau qui défile. */
@media (max-width: 640px) {
    .tableau-inscrits thead {
        display: none;
    }

    .tableau-inscrits tr {
        display: block;
        padding: 0.7rem 0.9rem;
        border-bottom: 1px solid var(--bordure);
    }

    .tableau-inscrits tbody tr:last-child {
        border-bottom: none;
    }

    .tableau-inscrits td,
    .tableau-inscrits tbody tr:last-child td {
        display: block;
        padding: 0.1rem 0;
        border: none;
    }

    /* Même poids que la règle « dernière ligne » ci-dessus, déclarée après : elle l'emporte. */
    .tableau-inscrits tbody tr td.inscrit-vide {
        display: none;
    }

    .tableau-inscrits td[data-libelle]::before {
        content: attr(data-libelle) ' : ';
        color: var(--texte-attenue);
        font-size: 0.85rem;
    }
}

/* Action rare et irréversible : contour rouge, pas d'aplat. */
.bouton-danger-contour {
    background: transparent;
    color: var(--erreur);
    border-color: var(--erreur);
}

.bouton-danger-contour:hover {
    background: var(--erreur-fond);
    color: var(--erreur);
    box-shadow: none;
}

.zone-annulation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
    margin-top: 1.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--bordure);
}

.zone-annulation .note {
    margin: 1.1rem 0 0;
}

.rencontre-agenda a {
    white-space: nowrap;
}

.rencontre-actions {
    margin-bottom: 1.2rem;
}

/* --- Fiche membre côté bureau (29/09) ---------------------------------------
   En-tête : photo, nom, puis rôle · entreprise · métier. Deux sections
   titrées (Fiche, Gestion de l'adhésion), chacune en grille de trois
   colonnes dont la dernière empile deux cartes ; une colonne sous 960 px. */
.entete-fiche-membre {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.2rem 0 0.6rem;
}

.entete-fiche-photo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bordure);
    background: #fff;
}

.titre-section {
    margin: 1.8rem 0 0.9rem;
    padding-bottom: 0.35rem;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--bordure);
}

.grille-fiche-membre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
}

.grille-fiche-membre fieldset {
    margin-bottom: 0;
}

.colonne-fiche {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

@media (max-width: 960px) {
    .grille-fiche-membre {
        grid-template-columns: minmax(0, 1fr);
    }
}

.barre-enregistrement {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.3rem;
}

/* Zones de texte qui suivent leur contenu (navigateurs récents) : rien de coupé. */
.texte-extensible {
    field-sizing: content;
    min-height: 5lh;
    resize: vertical;
}

.bloc-fin-adhesion {
    margin-top: 1rem;
}

.bloc-fin-adhesion label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bloc-fin-adhesion .actions-facture {
    align-items: center;
}

.bloc-fin-adhesion .actions-facture .bouton {
    margin-top: 0;
}

.bloc-fin-adhesion input[type="date"] {
    width: auto;
    flex: 1;
    min-width: 10rem;
}

.liste-visibilite {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
}

.liste-visibilite li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-visibilite li:last-child {
    border-bottom: none;
}

/* Chaque « badge + sens » reste d'un seul tenant au retour à la ligne. */
.legende-visibilite {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.9rem;
}

.legende-visibilite > span {
    white-space: nowrap;
}

/* Bouton de fichier aux couleurs de l'application, pas le rendu brut du navigateur. */
/* Le nom du fichier (« Aucun fichier choisi ») tient sans être coupé au milieu. */
input[type="file"] {
    font-size: 0.82rem;
    color: var(--texte-attenue);
}

input[type="file"]::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid color-mix(in srgb, var(--club-couleur-1) 45%, white);
    border-radius: 999px;
    background: var(--surface);
    color: var(--club-couleur-1);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--club-teinte-forte);
}

.entete-fiche-membre .rencontre-sous-titre {
    margin-bottom: 0;
}

/* --- Ma cotisation (29/09) ------------------------------------------------
   L'état de l'adhésion et ce qui reste à régler côte à côte, puis les
   factures ; sur téléphone, une fiche par facture (bouton Télécharger visible). */
.grille-cotisation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.1rem;
    align-items: start;
}

.grille-cotisation fieldset {
    margin-bottom: 0;
}

.carte-adhesion-alerte {
    border-left: 4px solid var(--erreur);
}

.adhesion-etat {
    margin: 0.2rem 0 0.4rem;
}

.adhesion-etat .badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.8rem;
}

.adhesion-echeance {
    margin: 0;
    font-size: 1.05rem;
}

.montant-a-regler {
    margin: 0.2rem 0 0.3rem;
    font-family: var(--club-police-titre);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--club-couleur-1);
}

.modes-reglement .iban {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    word-break: break-all;
}

.tableau-factures {
    width: 100%;
}

.tableau-factures .cellule-action {
    text-align: right;
}

.bouton-petit {
    margin-top: 0;
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .tableau-factures thead {
        display: none;
    }

    .tableau-factures tr {
        display: block;
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid var(--bordure);
    }

    .tableau-factures tbody tr:last-child {
        border-bottom: none;
    }

    .tableau-factures td,
    .tableau-factures tbody tr:last-child td {
        display: block;
        padding: 0.1rem 0;
        border: none;
    }

    .tableau-factures td[data-libelle]::before {
        content: attr(data-libelle) ' : ';
        color: var(--texte-attenue);
        font-size: 0.85rem;
    }

    .tableau-factures .cellule-action {
        text-align: left;
        padding-top: 0.5rem;
    }
}

.emargement-stat strong small {
    font-size: 0.95rem;
    color: var(--texte-attenue);
}

/* --- Qui a répondu ? (29/09) -----------------------------------------------
   Barre de répartition des réponses et filtres, sur la fiche d'une rencontre
   et dans la liste des rencontres. Mêmes couleurs partout : vert viennent,
   rouge ne viennent pas, orange sans réponse, gris pas invités. */
.barre-reponses {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bordure);
    margin: 0.2rem 0 0.8rem;
}

.barre-reponses span {
    display: block;
    height: 100%;
}

.barre-viennent { background: var(--ok); }
.barre-absents { background: var(--erreur); }
.barre-sans { background: #d97706; }
.barre-non-invites { background: #c7ccd1; }

.filtres-reponses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.filtre-reponse {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border: 1.5px solid var(--bordure);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.filtre-reponse::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--texte-attenue);
}

.filtre-viennent::before { background: var(--ok); }
.filtre-absents::before { background: var(--erreur); }
.filtre-sans::before { background: #d97706; }
.filtre-non-invites::before { background: #c7ccd1; }

.filtre-reponse.actif {
    border-color: var(--club-couleur-1);
    background: var(--club-teinte);
}

.badge-sans-reponse {
    background: #fff4e5;
    color: #9a4a00;
    border: 1px solid #f0b46a;
}

/* Liste des rencontres : la répartition en une ligne. */
.cellule-reponses {
    min-width: 11rem;
}

.cellule-reponses .barre-reponses {
    height: 7px;
    margin: 0 0 0.3rem;
}

.chiffres-reponses {
    display: flex;
    gap: 0.7rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.chiffres-reponses .viennent { color: var(--ok); font-weight: 600; }
.chiffres-reponses .absents { color: var(--erreur); font-weight: 600; }
.chiffres-reponses .sans { color: #b45309; font-weight: 600; }

/* --- Configuration → Adhésion & tarifs ---------------------------------- */

.carte-cotisation form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.2rem;
}

.carte-cotisation .bouton {
    margin-top: 0;
}

.interrupteur-texte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.interrupteur-texte .note {
    margin: 0;
}

.tarifs-ignores .liste-tarifs {
    opacity: 0.6;
}

/* Une grille, pas un tableau : la même ligne s'empile en carte sur téléphone. */
.ligne-tarif {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 9rem 8rem 8rem minmax(15rem, auto);
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bordure);
}

.ligne-tarif-entete {
    padding-top: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--texte-attenue);
    border-bottom-width: 2px;
}

.ligne-tarif-inactive .tarif-libelle input,
.ligne-tarif-inactive .champ-unite {
    opacity: 0.55;
}

.ligne-tarif-ajout {
    border-bottom: none;
    padding-bottom: 0;
}

.ligne-tarif-ajout input {
    border-style: dashed;
}

.tarif-libelle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.champ-unite {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: normal;
    color: var(--texte-attenue);
}

.champ-unite input {
    min-width: 0;
    text-align: right;
}

.tarif-factures {
    font-size: 0.88rem;
}

.texte-attenue {
    color: var(--texte-attenue);
}

.tarif-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.tarif-actions form {
    display: contents;
}

.tarif-actions .bouton {
    margin-top: 0;
}

@media (max-width: 900px) {
    .ligne-tarif-entete {
        display: none;
    }

    .ligne-tarif {
        grid-template-columns: 1fr 1fr;
        /* Factures et actions partagent la dernière ligne : l'une calée à
           gauche, l'autre à droite, dans la même cellule. */
        grid-template-areas:
            "libelle libelle"
            "montant duree"
            "pied pied";
        padding: 1rem 0;
    }

    .tarif-libelle { grid-area: libelle; }
    .tarif-montant { grid-area: montant; }
    .tarif-duree { grid-area: duree; }
    .tarif-factures { grid-area: pied; justify-self: start; }
    .tarif-actions { grid-area: pied; justify-self: end; }

    .ligne-tarif-ajout .tarif-factures {
        display: none;
    }

    .ligne-tarif-ajout .tarif-actions {
        justify-self: start;
    }
}

/* Détail d'une facture : règlement en 1, 2 ou 3 fois convenu avec le membre. */
.choix-reglement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.choix-reglement select {
    width: auto;
}

.choix-reglement .bouton {
    margin-top: 0;
}

/* Détail d'une facture : règlement en 1, 2 ou 3 fois convenu avec le membre. */
.choix-reglement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.choix-reglement select {
    width: auto;
}

.choix-reglement .bouton {
    margin-top: 0;
}

/* Texte lu par les lecteurs d'écran seulement. */
.visuellement-cache {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Fiche rencontre : diffusion du compte rendu, choix des destinataires. */
.choix-destinataires {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0.8rem 0 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
}

.choix-destinataires label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

/* Clés d'API, adresses d'endpoints : de longues chaînes sans espace qui ne
   doivent jamais élargir la page sur téléphone. */
fieldset code {
    /* break-word et non anywhere : ne réduit pas la largeur minimale (un
       <code> dans un conteneur flex, .message, s'écrivait lettre par lettre). */
    overflow-wrap: break-word;
}

/* --- Technique → HelloAsso ---------------------------------------------- */

.etat-helloasso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

.liste-variables {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste-variables code {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: var(--club-teinte);
}

.champ-copie {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.champ-copie input {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
}

.champ-copie .bouton {
    margin-top: 0;
    flex-shrink: 0;
}

.formulaire-test-helloasso {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem 0.8rem;
}

.formulaire-test-helloasso .bouton {
    grid-column: 1 / -1;
    justify-self: start;
}

@media (max-width: 480px) {
    .formulaire-test-helloasso {
        grid-template-columns: 1fr;
    }
}

/* Fiche d'une rencontre passée : le bilan de présence en une ligne. */
.bilan-presences {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.bilan-presences strong {
    font-size: 1.3rem;
    font-variant-numeric: lining-nums;
    color: var(--ok);
}

/* Connexion HelloAsso guidée : étapes numérotées, faites (✓) ou à venir. */
.intro-helloasso {
    margin-top: -0.4rem;
    color: var(--texte-attenue);
}

.etapes-helloasso {
    display: grid;
    gap: 1.1rem;
    max-width: 52rem;
}

.etapes-helloasso .etape-helloasso {
    margin: 0;
}

.etape-helloasso > legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.etape-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--club-couleur-1);
    color: #fff;
    font-size: 0.75rem;
    font-variant-numeric: lining-nums;
    letter-spacing: 0;
}

.etape-faite .etape-numero {
    background: var(--ok);
    font-size: 0;
}

.etape-faite .etape-numero::before {
    content: '✓';
    font-size: 0.8rem;
}

.etape-a-venir {
    opacity: 0.6;
}

.etape-a-venir .etape-numero {
    background: var(--texte-attenue);
}

.instructions-helloasso {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.instructions-helloasso li + li {
    margin-top: 0.25rem;
}

.formulaire-helloasso {
    display: grid;
    gap: 0.35rem;
    max-width: 30rem;
}

.formulaire-helloasso .choix-destinataires {
    margin-top: 0.4rem;
}

.formulaire-helloasso .choix-destinataires legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texte);
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
    margin: 0 0 0.3rem;
}

.details-helloasso {
    margin: 0.8rem 0;
}

.suivi-helloasso {
    max-width: 52rem;
    margin-top: 1.5rem;
}

.bouton-lien {
    border: none;
    background: none;
    padding: 0;
    color: var(--texte-attenue);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
}

/* --- Suivi des adhésions (trésorier) ----------------------------------- */

.entete-suivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.entete-suivi .intro-helloasso,
.entete-suivi .bouton {
    margin: 0;
}

.grille-suivi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

.grille-suivi fieldset {
    margin: 0;
}

.chiffres-suivi {
    display: grid;
    gap: 0.45rem;
    margin: 0.8rem 0 0;
}

.chiffres-suivi > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px dashed var(--bordure);
    padding-bottom: 0.35rem;
}

.chiffres-suivi dt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texte);
}

.chiffres-suivi dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.montant-ok { color: var(--ok); }
.montant-erreur { color: var(--erreur); }

.pastille {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #c7ccd1;
}

.pastille-ok { background: var(--ok); }
.pastille-alerte { background: #d97706; }
.pastille-erreur { background: var(--erreur); }

.liste-suivi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-suivi li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-suivi li:last-child {
    border-bottom: none;
}