/*
 * Feuille de styles de l'application.
 *
 * Les valeurs viennent du design « Listing Adhérents ». Elles sont regroupées
 * ici en variables CSS plutôt qu'écrites en style inline dans les gabarits :
 * une couleur ne se change qu'à un seul endroit.
 */

/*
 * Noto Sans, hébergée avec l'application : aucune requête vers un tiers, donc
 * aucune adresse IP d'adhérent transmise à un service externe.
 *
 * Police variable : un seul fichier par jeu de caractères couvre les graisses
 * 400 à 700. Le navigateur ne télécharge le jeu latin étendu que s'il croise un
 * caractère qui s'y trouve — c'est le cas du « ō » de Shin Kyō Budō, et de noms
 * comme Łukasz ou Şahin.
 *
 * Fichiers officiels récupérés depuis fonts.gstatic.com (Noto Sans v42),
 * distribués sous SIL Open Font License 1.1.
 */

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/noto-sans-latin.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/noto-sans-latin-ext.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Surfaces et texte --- */
    --c-fond: #eef0f3;
    --c-surface: #fff;
    --c-surface-alt: #fafbfc;
    --c-bordure: #e2e5ea;
    --c-bordure-forte: #d4d8df;
    --c-bordure-legere: #eef0f3;
    --c-separateur: #e9ebef;

    --c-texte: #1d2129;
    --c-texte-doux: #4b5260;
    --c-texte-discret: #6b7280;

    /* Les deux tons pâles portent du texte informatif à petite taille —
    compteurs à 11 px, « · 12 ans », « sans n° » — et doivent donc tenir les
    4,5:1 du WCAG sur les surfaces claires de l'application. Le ton inactif,
    lui, est réservé au réellement décoratif. */
    --c-texte-faible: #6a7181;
    --c-texte-fantome: #6d7482;
    --c-texte-inactif: #c2c7d0;

    /* --- Couleurs de marque --- */
    --c-marque: #a92432;
    --c-marque-sombre: #8e1e2a;
    --c-marque-claire: #d6404b;
    --c-marque-voile: #fdf1f2;
    --c-marque-voile-fort: #fdf4f5;

    /* --- Barre supérieure --- */
    --c-barre-fond: #16181d;
    --c-barre-texte: #fff;
    --c-barre-muet: #9aa1ad;
    --c-barre-faible: #7d8493;
    --c-barre-clair: #d7dbe2;
    --c-barre-avatar: #2c303a;
    --c-barre-avatar-texte: #c3c9d4;

    /* --- Barre d'actions groupées --- */
    --c-actions-fond: #1f232b;
    --c-actions-bordure: #454b57;
    --c-actions-survol: #2b303a;

    /* --- Statuts --- */
    --c-vert-fond: #e6f3ec;
    --c-vert-bordure: #c0e0cd;
    --c-vert-texte: #14582f;
    --c-vert-point: #1f9d54;
    --c-ambre-fond: #fcf0df;
    --c-ambre-texte: #7a4709;
    --c-ambre-point: #d98a06;
    --c-rouge-fond: #fcebec;
    --c-rouge-texte: #8f1d26;
    --c-rouge-point: #cf3a44;
    --c-rouge-bordure: #f3c9cd;

    /* --- Bandeau saison archivée --- */
    --c-archive-fond: #fbf3da;
    --c-archive-bordure: #ecd9a0;
    --c-archive-texte: #6e5414;
    --c-archive-icone: #a07d1c;

    /* --- Lignes du tableau --- */
    --c-ligne-survol: #f5f6f8;

    /* --- Mesures : l'application occupe toute la largeur de l'écran, les
    listings y gagnant plus qu'ils n'y perdent --- */
    --marge-laterale: 28px;
    --hauteur-barre: 56px;
    --rayon: 6px;
    --rayon-carte: 8px;

    --police:
        "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        "Roboto", "Helvetica Neue", "Arial", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--c-fond);
    color: var(--c-texte);
    font-family: var(--police);
    font-size: 13px;
}

input::placeholder {
    color: var(--c-texte-fantome);
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* === Barre supérieure === */

.barre {
    background: var(--c-barre-fond);
    position: sticky;
    top: 0;
    z-index: 10;
}

.barre__contenu {
    padding: 0 var(--marge-laterale);
    height: var(--hauteur-barre);
    display: flex;
    align-items: center;
    gap: 24px;
}

.barre__marque {
    display: flex;
    align-items: center;
    gap: 10px;
}

.barre__logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-surface);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barre__logo img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center 38%;
}

.barre__titre {
    display: flex;
    flex-direction: column;
}

.barre__club {
    color: var(--c-barre-texte);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.barre__soustitre {
    color: var(--c-barre-faible);
    font-size: 10.5px;
    line-height: 1.2;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.nav__lien {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 12px;
    color: var(--c-barre-muet);
    font-size: 13px;
    text-decoration: none;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.nav__lien:hover {
    color: var(--c-barre-clair);
}

.nav__lien--actif,
.nav__lien--actif:hover {
    color: var(--c-barre-texte);
    font-weight: 600;
    border-bottom-color: var(--c-marque-claire);
}

.nav__lien--actif svg {
    stroke: var(--c-marque-claire);
}

/* === Compte connecté ===
 *
 * Un <details> et rien d'autre : l'application fonctionne sans JavaScript, et
 * une seule entrée de menu ne justifie pas d'en introduire.
 */

.compte {
    position: relative;
    margin-left: auto;
}

/* Le marqueur natif du <summary> n'a rien à faire ici : le déclencheur est la
pastille elle-même. */
.compte__declencheur {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}

.compte__declencheur::-webkit-details-marker {
    display: none;
}

.compte__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-barre-avatar);
    color: var(--c-barre-avatar-texte);
}

.compte__declencheur:hover .compte__avatar,
.compte[open] .compte__avatar {
    background: var(--c-actions-survol);
    color: var(--c-barre-texte);
}

.compte__declencheur:focus-visible .compte__avatar {
    outline: 2px solid var(--c-marque-claire);
    outline-offset: 2px;
}

/* Le nom du compte, à côté de la pastille. Tronqué plutôt que laissé pousser
la barre : « admin » tient partout, un prénom et un nom accolés non, et la
navigation ne doit pas se faire écraser par le nom de qui est connecté. */
.compte__nom {
    max-width: 180px;
    overflow: hidden;
    color: var(--c-barre-clair);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compte__declencheur:hover .compte__nom,
.compte[open] .compte__nom {
    color: var(--c-barre-texte);
}

/* Ancré à droite : sur petit écran, la pastille est collée au bord et un
panneau aligné à gauche déborderait de l'écran. */
.compte__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    min-width: 170px;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--c-actions-bordure);
    border-radius: var(--rayon);
    background: var(--c-actions-fond);
}

.compte__lien {
    padding: 8px 10px;
    border-radius: 4px;
    color: var(--c-barre-clair);
    font-size: 13px;
    text-decoration: none;
}

.compte__lien:hover {
    background: var(--c-actions-survol);
    color: var(--c-barre-texte);
}

/* Lisible par les lecteurs d'écran, invisible à l'œil : le déclencheur n'a
qu'une icône, il lui faut un nom.

Un seul utilitaire sous deux noms : chacun s'était installé dans sa moitié de
l'application. Les gabarits migreront vers `.visuellement-cache` ;
`.lecteur-ecran` reste un alias d'ici là. */
.visuellement-cache,
.lecteur-ecran {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* === Corps de page === */

.contenu {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 24px var(--marge-laterale) 32px;
}

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.entete__titres {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entete__titre {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.entete__soustitre {
    margin: 0;
    font-size: 13px;
    color: var(--c-texte-discret);
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* === Éléments de formulaire et boutons === */

.formulaire-en-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.champ {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-texte-doux);
}

.controle {
    padding: 7px 10px;
    border: 1px solid var(--c-bordure-forte);
    border-radius: var(--rayon);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--c-texte);
}

.controle--accentue {
    font-weight: 600;
}

.controle:focus-visible {
    outline: 2px solid var(--c-marque);
    outline-offset: 1px;
}

.bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.bouton--principal {
    background: var(--c-marque);
    color: var(--c-surface);
}

.bouton--principal:hover {
    background: var(--c-marque-sombre);
}

.bouton--discret {
    background: var(--c-surface);
    border-color: var(--c-bordure-forte);
    color: var(--c-texte-doux);
}

/* === Compteurs === */

.compteurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.compteur {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    text-decoration: none;
    color: inherit;
}

.compteur--filtre:hover {
    border-color: #b8bec8;
}

.compteur--actif {
    background: var(--c-marque-voile-fort);
    border-color: var(--c-marque);
}

.compteur__libelle {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-faible);
}

.compteur__valeur {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.compteur__valeur--alerte {
    color: var(--c-marque);
}

.compteur__detail {
    font-size: 12px;
    color: var(--c-texte-faible);
}

/* === Bandeau de saison archivée === */

.bandeau-archive {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 14px;
    background: var(--c-archive-fond);
    border: 1px solid var(--c-archive-bordure);
    border-radius: var(--rayon-carte);
    font-size: 13px;
    color: var(--c-archive-texte);
}

.bandeau-archive svg {
    flex-shrink: 0;
    stroke: var(--c-archive-icone);
}

/* === Carte contenant le listing === */

.carte {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
}

.filtres {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-separateur);
}

.recherche {
    position: relative;
    display: flex;
    align-items: center;
}

.recherche__icone {
    position: absolute;
    left: 10px;
    stroke: var(--c-texte-fantome);
    pointer-events: none;
}

.recherche__champ {
    width: 250px;
    padding-left: 30px;
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--c-marque);
    border-radius: 999px;
    background: var(--c-marque-voile);
    color: var(--c-marque);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.filtres__decompte {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-texte-faible);
    white-space: nowrap;
}

.pied {
    margin: 0;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--c-texte-faible);
}

/* === Messages === */

.message {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: var(--rayon-carte);
    border: 1px solid;
    font-size: 13px;
}

.message--succes {
    background: var(--c-vert-fond);
    border-color: var(--c-vert-point);
    color: var(--c-vert-texte);
}

.message--avertissement {
    background: var(--c-archive-fond);
    border-color: var(--c-archive-bordure);
    color: var(--c-archive-texte);
}

/* === Sélection et actions groupées === */

.case {
    width: 14px;
    height: 14px;
    accent-color: var(--c-marque);
    cursor: pointer;
}

/*
 * La barre n'apparaît qu'une fois une case cochée, sans JavaScript : :has()
 * suffit. Le script ne sert qu'au décompte et à la case « tout sélectionner ».
 */
.actions-groupees {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--c-actions-fond);
    color: var(--c-surface);
}

.carte:has(.selection:checked) .actions-groupees {
    display: flex;
}

.actions-groupees__compte {
    margin-right: 8px;
    font-size: 13px;
    font-weight: 600;
}

.bouton-sombre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--c-actions-bordure);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--c-surface);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.bouton-sombre:hover {
    background: var(--c-actions-survol);
}

.actions-groupees__fermer {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--rayon);
    background: transparent;
    color: var(--c-barre-muet);
    cursor: pointer;
}

.actions-groupees__fermer:hover {
    background: var(--c-actions-survol);
    color: var(--c-surface);
}

/* === Tableau === */

.tableau {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.tableau th {
    position: sticky;
    top: var(--hauteur-barre);
    z-index: 2;
    padding: 8px 10px;
    background: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-bordure);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.tableau th:first-child {
    padding-left: 16px;
}

.colonne--naissance {
    width: 150px;
}

.colonne--section {
    width: 140px;
}

.colonne--statut {
    width: 120px;
}

.colonne--case {
    width: 40px;
}

.colonne--actions {
    width: 130px;
}

.cellule--case {
    padding-left: 16px;
}

.cellule {
    padding: 7px 10px;
    border-bottom: 1px solid var(--c-bordure-legere);
    vertical-align: middle;
}

.tableau tbody tr:hover {
    background: var(--c-ligne-survol);
}

.cellule--nom {
    padding-left: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cellule--naissance {
    white-space: nowrap;
    color: var(--c-texte-doux);
    font-variant-numeric: tabular-nums;
}

.cellule--section,
.cellule--statut {
    white-space: nowrap;
}

.cellule--contact {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-texte-doux);
}

.cellule--actions {
    padding-right: 16px;
    text-align: right;
}

.cellule--aucun {
    padding: 36px 16px;
    text-align: center;
    color: var(--c-texte-faible);
}

.lien-adherent {
    color: var(--c-texte);
    font-weight: 600;
    text-decoration: none;
}

.lien-adherent:hover {
    color: var(--c-marque);
    text-decoration: underline;
}

.lien-adherent__prenom {
    font-weight: 400;
}

.lien-contact {
    color: inherit;
    text-decoration: none;
}

.lien-contact:hover {
    text-decoration: underline;
}

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

/* « Aucune coordonnée », « Aucun adhérent inscrit… » : des informations, pas
du décor — le ton inactif ne suffisait pas à les lire. */
.vide {
    color: var(--c-texte-faible);
}

.etiquette {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--c-fond);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-texte-faible);
}

.section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-texte-doux);
}

.section::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pastille);
}

.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    color: var(--c-texte-discret);
    text-decoration: none;
}

.action:hover {
    border-color: var(--c-bordure-forte);
    color: var(--c-marque);
    background: var(--c-surface);
}

/* Les deux règles qui suivent sont plus spécifiques que celles ci-dessus et
doivent donc venir après, sans quoi la cascade les rendrait inopérantes. */

/* La première colonne porte la marge de gauche ; avec les cases à cocher, ce
n'est plus celle du nom. */
.tableau:has(.colonne--case) .cellule--nom {
    padding-left: 10px;
}

/* === Pastilles de statut === */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.badge__point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge--vert {
    background: var(--c-vert-fond);
    color: var(--c-vert-texte);
}

.badge--vert .badge__point {
    background: var(--c-vert-point);
}

.badge--ambre {
    background: var(--c-ambre-fond);
    color: var(--c-ambre-texte);
}

.badge--ambre .badge__point {
    background: var(--c-ambre-point);
}

.badge--rouge {
    background: var(--c-rouge-fond);
    color: var(--c-rouge-texte);
}

.badge--rouge .badge__point {
    background: var(--c-rouge-point);
}

/* === Écrans étroits === */

/*
 * L'application doit rester utilisable depuis un téléphone. Ce qui suit
 * empêche la mise en page actuelle de casser ; la navigation à six entrées et
 * le tableau du listing demanderont un vrai parti pris (menu repliable, mise
 * en cartes) qui reste à décider.
 */

@media (width <= 900px) {
    :root {
        --marge-laterale: 16px;
    }

    .barre__contenu {
        gap: 14px;
    }

    /* La navigation défile latéralement plutôt que de déborder. */
    .nav {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav__lien {
        white-space: nowrap;
    }

    .entete {
        flex-wrap: wrap;
    }

    .compteurs {
        grid-template-columns: repeat(2, 1fr);
    }

    .filtres {
        flex-wrap: wrap;
    }

    .recherche,
    .recherche__champ {
        width: 100%;
    }

    .filtres__decompte {
        margin-left: 0;
    }

    /*
    * Le tableau devient une pile de cartes.
    *
    * Huit colonnes ne tiennent pas sur un téléphone, et un défilement
    * horizontal ferait perdre le nom de vue au moment précis où l'on cherche
    * un statut. Le balisage reste un tableau — un seul gabarit à maintenir —
    * et c'est la mise en page qui change.
    */
    .tableau thead {
        display: none;
    }

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

    .tableau tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--c-bordure-legere);
    }

    .tableau tbody tr:hover {
        background: transparent;
    }

    .cellule {
        padding: 0;
        border-bottom: none;
        overflow: visible;
        white-space: normal;
    }

    .cellule--nom {
        order: 1;
        flex-basis: 100%;
        padding-left: 0;
        font-size: 15px;
    }

    .cellule--section {
        order: 2;
    }

    .cellule--naissance {
        order: 3;
    }

    .cellule--contact {
        order: 4;
        flex-basis: 100%;
    }

    .cellule--statut {
        order: 5;
    }

    /* L'en-tête du tableau a disparu : chaque statut annonce ce qu'il décrit,
    sans quoi « Fourni · Payé · Signée » ne veut plus rien dire. */
    .cellule--statut::before {
        content: attr(data-intitule) " ";
        margin-right: 4px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--c-texte-faible);
    }

    .cellule--actions {
        order: 6;
        margin-left: auto;
        padding-right: 0;
    }

    .cellule--aucun {
        flex-basis: 100%;
        padding: 28px 0;
        text-align: center;
    }
}

/* === Tri des colonnes === */

.tri {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.tri svg {
    color: var(--c-texte-inactif);
}

.tri:hover {
    color: var(--c-texte);
}

.tri--actif {
    color: var(--c-texte);
}

.tri--actif svg {
    color: var(--c-marque);
}

/* === Fiche adhérent === */

.retour {
    margin: 0 0 12px;
    font-size: 13px;
}

.retour__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-texte-discret);
    text-decoration: none;
}

.retour__lien:hover {
    color: var(--c-marque);
}

/* Le bandeau d'identité : le nom, l'essentiel en une ligne, l'alerte santé.
Le design vient de la maquette Claude Design « Fiche Adhérent ». */
.bandeau {
    margin-bottom: 12px;
    padding: 14px 16px 16px;
}

.bandeau__nom {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.bandeau__prenom {
    font-weight: 500;
}

.bandeau__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 7px;
    font-size: 13px;
    color: var(--c-texte-doux);
}

.bandeau__meta strong {
    font-weight: 600;
    color: var(--c-texte);
}

.bandeau__separateur {
    color: var(--c-texte-inactif);
}

.pilule {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--c-bordure);
    border-radius: 999px;
    background: var(--c-surface-alt);
    font-size: 12px;
    color: var(--c-texte-doux);
}

.pilule__point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pastille);
}

/* L'alerte santé se voit avant tout le reste : c'est l'information du bord
du tatami. Même trio de rouges que .badge--rouge — l'alerte, pas la marque. */
.alerte-sante {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--c-rouge-fond);
    border: 1px solid var(--c-rouge-point);
    border-radius: var(--rayon);
    color: var(--c-rouge-texte);
}

.alerte-sante svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.alerte-sante p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

/* La rangée Adresse · Contacts · Commentaire : des cartes souples qui
s'empilent d'elles-mêmes quand la largeur manque. */
.fiche-cartes {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

.fiche-carte {
    min-width: 0;
}

.fiche-carte--adresse {
    flex: 1 1 260px;
}

.fiche-carte--contacts {
    flex: 2.2 1 380px;
}

.fiche-carte--commentaire {
    flex: 1 1 240px;
}

.carte__compte {
    color: var(--c-texte-fantome);
    font-weight: 500;
}

.carte--section {
    padding: 14px 16px 16px;
}

.carte__titre {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-faible);
}

/* Adresse : étiquette au-dessus de la valeur serait plus haute ; le duo
étiquette/valeur sur deux colonnes reste lisible et compact. */
.champs {
    display: grid;
    gap: 7px;
    margin: 0;
}

.champs__ligne {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 3px 10px;
    align-items: baseline;
    font-size: 13px;
}

.champs__ligne dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.champs__ligne dd {
    margin: 0;
    color: var(--c-texte);
    overflow-wrap: anywhere;
}

/* Contacts : une ligne par personne, le rôle en puce fixe pour que les noms
s'alignent. */
.contacts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-bordure-legere);
}

.contact-ligne:first-child {
    padding-top: 2px;
}

.contact-ligne:last-child {
    padding-bottom: 2px;
    border-bottom: none;
}

.role {
    flex: 0 0 86px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--c-fond);
    color: var(--c-texte-doux);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

/* La personne à prévenir en cas d'accident se repère d'un coup d'œil. */
.role--urgence {
    background: var(--c-rouge-fond);
    color: var(--c-rouge-texte);
}

.contact-ligne__nom {
    font-size: 13px;
    font-weight: 600;
}

.contact-ligne__coordonnees {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 12px;
}

.contact-ligne__consentements {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;

    /* Toute la largeur : la ligne du contact tient déjà le rôle, le nom et
    les coordonnées, et à trois enfants la carte se lit sur un téléphone. */
    flex-basis: 100%;
    padding-left: 96px;
    font-size: 11px;
}

.contact-ligne__recueil {
    color: var(--c-texte-discret);
}

@media (width <= 640px) {
    .contact-ligne__consentements {
        padding-left: 0;
    }
}

.etiquette--alerte {
    background: var(--c-rouge-fond);
    color: var(--c-rouge-texte);
}

.commentaire {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

/* --- Parcours : la saison la plus récente en carte détaillée, les
précédentes en lignes compactes --- */

.parcours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.parcours__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.parcours__titre {
    margin: 0;
}

.parcours__depuis {
    font-size: 11px;
    color: var(--c-texte-fantome);
}

.saison-carte {
    padding: 14px 16px 16px;
    border-color: var(--c-bordure-forte);
}

.saison-carte__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--c-bordure-legere);
}

.marque-saison {
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--c-actions-fond);
    color: var(--c-barre-texte);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.saison-carte__annee {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-texte);
    text-decoration: none;
}

.saison-carte__annee:hover {
    color: var(--c-marque);
}

.tuiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.tuile {
    flex: 1 1 150px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 9px 11px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-separateur);
    border-radius: var(--rayon);
}

.tuile--licences {
    flex: 1.6 1 210px;
}

.tuile__etiquette {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.tuile__valeur {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

.tuile--attention {
    background: var(--c-ambre-fond);
    border-color: var(--c-ambre-point);
}

.tuile--attention .tuile__etiquette,
.tuile--attention .tuile__valeur {
    color: var(--c-ambre-texte);
}

.tuile__licences {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.licence {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--c-bordure);
    border-radius: 5px;
    background: var(--c-surface);
    font-size: 12px;
}

.licence strong {
    font-weight: 700;
}

.licence__numero {
    color: var(--c-texte-doux);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.licence__absent {
    color: var(--c-texte-fantome);
}

.consentements {
    padding: 9px 11px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-separateur);
    border-radius: var(--rayon);
}

.consentements__titre {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.consentements__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.consentement {
    flex: 1 1 128px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consentement__libelle {
    font-size: 11px;
    color: var(--c-texte-discret);
}

.consentement__valeur {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
}

.consentement__valeur--oui {
    color: var(--c-vert-texte);
}

.consentement__valeur--non {
    color: var(--c-texte-doux);
}

.consentement__valeur--inconnu {
    color: var(--c-texte-fantome);
}

.consentement__valeur--inconnu small {
    font-size: 11px;
    font-weight: 400;
}

.consentement__point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.consentement__valeur--oui .consentement__point {
    background: var(--c-vert-point);
}

.consentement__valeur--non .consentement__point {
    background: var(--c-texte-fantome);
}

/* === Détail de la cotisation === */

/* Cotisation et règlements côte à côte : ce que le club demande, et ce qu'il
a reçu. Deux colonnes dès que la place le permet, une seule en dessous — sans
media query, c'est la grille qui compte les pixels disponibles plutôt qu'un
seuil d'écran choisi au jugé, et le bord du tatami se lit sur un téléphone.
Aucun espace entre les rangées : chaque bloc porte déjà sa marge et son filet
de séparation, qui les alignent l'un sur l'autre en deux colonnes. */
.comptes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 28px;
    align-items: start;
}

.cotisation {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-separateur);
}

.cotisation__titre {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.cotisation__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 340px;
    margin: 0;
}

.cotisation__ligne {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.cotisation__ligne dt,
.cotisation__ligne dd {
    margin: 0;
}

.cotisation__ligne dd {
    font-variant-numeric: tabular-nums;
}

.cotisation__ligne--reduction {
    color: var(--c-texte-doux);
}

.cotisation__ligne--force {
    font-style: italic;
    color: var(--c-texte-doux);
}

.cotisation__ligne--total {
    padding-top: 6px;
    border-top: 1px solid var(--c-bordure);
    font-weight: 600;
}

/* La reprise du tarif : une action rare, qui ne doit pas peser autant que le
montant qu'elle surplombe. */
.cotisation__reprise {
    margin-top: 10px;
}

/* === Règlements ===

En-tête, liste et totaux partagent la colonne de 340 px du détail de la
cotisation juste au-dessus : « Montant dû » et « Reçu » tombent sur le même
bord, et la lecture descend d'un trait.

Cette colonne tient telle quelle sur un téléphone, d'où l'absence de règle
d'écran étroit : chaque règlement est déjà une petite fiche à deux lignes —
moyen et montant qui se font face, l'encaissement en dessous — et non une
rangée de tableau qui se disloquerait. */

.reglements {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-separateur);
}

.reglements__entete {
    display: flex;
    max-width: 340px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.reglements__titre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.reglements__vide {
    margin: 0;
    font-size: 13px;
    color: var(--c-texte-faible);
}

.reglements__liste {
    display: flex;
    max-width: 340px;
    flex-direction: column;
    gap: 9px;
    padding: 0;
    margin: 0 0 12px;
    list-style: none;
}

.reglements__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    font-size: 13px;
}

/* Ce qui n'est pas encore en banque se lit plus discrètement : l'argent est
acquis, la trésorerie non. La couleur ne porte rien à elle seule — chaque ligne
dit en toutes lettres où en est son encaissement. */
.reglements__ligne--attente {
    color: var(--c-texte-doux);
}

/* Soixante caractères saisis à la main : un jeton sans espace pousserait la
page entière, comme une adresse mail dans une fiche. */
.reglements__reference {
    color: var(--c-texte-faible);
    overflow-wrap: anywhere;
}

.reglements__montant {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Toujours sur sa propre ligne : c'est ce qui donne la même forme à la liste
sur un écran large et sur un téléphone. */
.reglements__dates {
    flex: 1 1 100%;
    font-size: 11.5px;
    color: var(--c-texte-discret);
}

.reglements__totaux {
    display: flex;
    max-width: 340px;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.reglements__total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.reglements__total dt,
.reglements__total dd {
    margin: 0;
}

.reglements__total dd {
    font-variant-numeric: tabular-nums;
}

.reglements__total--reste {
    padding-top: 4px;
    border-top: 1px solid var(--c-bordure);
    font-weight: 600;
}

.saisons-passees {
    padding: 2px 16px;
}

.saison-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-bordure-legere);
}

.saison-ligne:last-child {
    border-bottom: none;
}

.saison-ligne__annee {
    flex: 0 0 78px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.saison-ligne__annee a {
    color: var(--c-texte);
    text-decoration: none;
}

.saison-ligne__annee a:hover {
    color: var(--c-marque);
}

.saison-ligne__date {
    font-size: 11px;
    color: var(--c-texte-discret);
    font-variant-numeric: tabular-nums;
}

/* Le résumé des consentements se cale à droite tant qu'il y a la place, et
retombe en fin de ligne sur petit écran. */
.saison-ligne__consentements {
    margin-left: auto;
    font-size: 11px;
    color: var(--c-texte-discret);
    text-wrap: pretty;
}

.saison-ligne__consentements strong {
    color: var(--c-texte);
    font-weight: 600;
}

.saison-ligne__consentements .ouinon--inconnu {
    color: var(--c-texte-fantome);
}

/* --- Fiche : édition par zone --- */

/* Le bouton discret des en-têtes de carte, façon maquette. */
.bouton-modifier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--c-bordure);
    border-radius: 5px;
    background: var(--c-surface-alt);
    color: var(--c-texte-discret);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.bouton-modifier:hover {
    border-color: var(--c-marque);
    background: var(--c-surface);
    color: var(--c-marque);
}

.bouton-modifier--saison {
    margin-left: auto;
}

.bandeau__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
}

.carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.carte__entete .carte__titre {
    margin: 0;
}

.formulaire__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 12px;
}

.formulaire__champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.formulaire__champ--large {
    grid-column: 1 / -1;
}

.formulaire__champ label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

/* Les cases d'une liste à cocher portent des libellés de valeur, pas des
étiquettes de champ : elles ne doivent pas hériter du style de
.formulaire__champ label. Le conteneur reçoit la classe .choix-multiple depuis
le gabarit — form_div_layout n'en pose aucune — et les cases s'y suivent sans
la moindre espace, d'où le gap. */
.choix-multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.formulaire__champ .choix-multiple label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--c-texte);
}

/* Une case doit toucher son propre libellé et non le précédent : l'espacement
entre paires se joue ici, le gap ne sachant pas les distinguer. */
.choix-multiple input:not(:first-child) {
    margin-left: 12px;
}

.help-text {
    margin-top: 4px;
    font-size: 11px;
    color: var(--c-texte-discret);
}

/* Les messages d'erreur du composant Form sortent en liste : on la rend
discrète et rouge, sans puces. */
.formulaire ul {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    color: var(--c-rouge-texte);
}

.formulaire__collection {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-separateur);
    border-radius: var(--rayon);
    background: var(--c-surface-alt);
}

.formulaire__retrait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: end;
    font-size: 11px;
    color: var(--c-texte-discret);
}

.formulaire__retrait--neuf {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-texte-fantome);
}

.formulaire__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Repli des champs rares d'une ligne de collection.
 *
 * Six champs par règlement font défiler un téléphone avant même qu'on ait
 * saisi le montant. Les trois qu'on ne remplit presque jamais — encaissement
 * prévu, encaissement constaté, référence — se replient ; restent d'emblée le
 * moyen, le montant et la date de remise, c'est-à-dire ce qu'on saisit
 * toujours.
 *
 * <details> s'ouvre sans JavaScript, comme le menu de compte de la barre. Le
 * gabarit lui pose « open » dès qu'un champ replié porte une valeur ou une
 * erreur : caché, l'une passerait pour perdue et l'autre rendrait le refus
 * incompréhensible.
 */
.repli {
    margin-top: 10px;
}

/* 44 px de haut : la cible se vise au pouce, debout au bord du tatami, pas à
la souris. Le texte reste petit, c'est la zone cliquable qui est grande. */
.repli__resume {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
    cursor: pointer;
}

/* Le marqueur natif se neutralise explicitement, des deux façons : « display:
flex » le fait déjà disparaître sur WebKit, mais le supprimer sans rien mettre
à la place laisserait un texte gris indiscernable d'une étiquette de section.
Le chevron ci-dessous le remplace. */
.repli__resume::marker,
.repli__resume::-webkit-details-marker {
    display: none;
    content: "";
}

.repli__chevron {
    flex: none;
    transition: transform 0.12s ease;
}

.repli[open] .repli__chevron {
    transform: rotate(90deg);
}

.repli__resume:hover {
    color: var(--c-texte);
}

.repli__resume:focus-visible {
    outline: 2px solid var(--c-marque-claire);
    outline-offset: 2px;
    border-radius: var(--rayon);
}

.repli__corps {
    margin-top: 4px;
}

/* === Écran de connexion ===
 *
 * Transposition de « Écran Connexion.dc.html » (projet Claude Design SKBD).
 * Cet écran ne réutilise ni .controle ni .bouton : ceux-ci sont dimensionnés
 * pour les formulaires denses de la fiche (13 px, 7 px de rembourrage), là où
 * la connexion se fait au pouce, debout au bord du tatami. D'où des cibles
 * tactiles d'au moins 44 px et un corps de texte à 15 px, qui évite au passage
 * le zoom automatique de Safari iOS sous 16 px sur les champs de saisie.
 */

.connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px 16px;
    background: var(--c-fond);
}

.connexion__colonne {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 380px;
}

.connexion__carte {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);

    /* L'en-tête sombre doit épouser les coins arrondis de la carte. */
    overflow: hidden;
}

.connexion__entete {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    background: var(--c-barre-fond);
}

.connexion__logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-surface);
    overflow: hidden;
}

.connexion__logo img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: center 38%;
}

.connexion__marque {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.connexion__club {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--c-barre-texte);
}

.connexion__soustitre {
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--c-barre-faible);
}

.connexion__corps {
    padding: 20px;
}

.connexion__titre {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-texte);
}

.connexion__alerte {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--c-rouge-bordure);
    border-radius: var(--rayon);
    background: var(--c-rouge-fond);
}

.connexion__alerte-point {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--c-rouge-point);
}

.connexion__alerte-texte {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--c-rouge-texte);
}

.connexion__formulaire {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.connexion__champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.connexion__etiquette {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-texte-doux);
}

.connexion__controle {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--c-bordure-forte);
    border-radius: var(--rayon);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-texte);
}

.connexion__controle:focus {
    border-color: var(--c-marque);
    box-shadow: 0 0 0 3px var(--c-marque-voile);
    outline: none;
}

.connexion__bouton {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    padding: 12px 16px;
    border: 1px solid var(--c-marque);
    border-radius: var(--rayon);
    background: var(--c-marque);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--c-surface);
    cursor: pointer;
}

.connexion__bouton:hover {
    background: var(--c-marque-sombre);
    border-color: var(--c-marque-sombre);
}

.connexion__bouton:focus-visible {
    box-shadow:
        0 0 0 3px var(--c-marque-voile),
        0 0 0 4px var(--c-marque);
    outline: none;
}

.connexion__mention {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--c-texte-discret);
}

/* === Parcours public d'inscription ===
 *
 * Transposition des planches « Inscription 1 » à « Inscription 7 » (projet
 * Claude Design SKBD), dont la maquette est entièrement en styles en ligne.
 *
 * Deux partis pris qui s'écartent du reste de l'application :
 *
 * - La colonne est bornée à 640 px. Ailleurs, l'application occupe toute la
 *   largeur parce que les listings y gagnent ; un formulaire étalé sur 1920 px
 *   n'y gagne rien et se remplit plus mal.
 * - Les cibles font 48 px et le texte des champs 16 px. Comme l'écran de
 *   connexion, ce parcours se remplit au pouce, debout, et Safari iOS zoome
 *   automatiquement sur tout champ sous 16 px.
 */

.insc {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--c-fond);
}

.insc__entete {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-bordure);
}

.insc__bande,
.insc__corps,
.insc-barre__bande {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.insc__bande {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.insc__logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-bordure);
    border-radius: 50%;
    background: var(--c-surface);
    overflow: hidden;
}

.insc__logo img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    object-position: center 38%;
}

.insc__marque {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.insc__club {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
}

.insc__saison {
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--c-texte-discret);
}

.insc__corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px 28px;
}

/* --- Retour à l'étape précédente --- */

/* Au-dessus de la jauge, et non dans la barre basse : la barre porte l'action
qui avance, et un retour posé à côté d'un « Continuer » se clique par erreur au
bord du tatami. La zone tactile déborde le texte des deux côtés. */
.insc__retour {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -8px -8px -12px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte-doux);
    text-decoration: none;
}

.insc__retour:hover,
.insc__retour:focus-visible {
    color: var(--c-marque);
    text-decoration: underline;
}

.insc__retour-fleche {
    font-size: 15px;
    line-height: 1;
}

/* --- Jauge d'étapes --- */

.insc__etape {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insc__etape-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.insc__etape-rang {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-marque);
}

.insc__etape-nom {
    font-size: 12.5px;
    color: var(--c-texte-discret);
}

.insc__jauge {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
}

.insc__segment {
    height: 5px;
    border-radius: 3px;
    background: var(--c-bordure-forte);
}

.insc__segment--fait {
    background: var(--c-marque);
}

/* --- Titres et textes --- */

.insc__titre-bloc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insc__titre {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: pretty;
}

.insc__chapeau {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

.insc__surtitre {
    padding: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.insc__compte {
    font-weight: 500;
    color: var(--c-texte-fantome);
}

.insc__mention {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-texte-discret);
    text-align: center;
    text-wrap: pretty;
}

.insc__formulaire {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Boutons --- */

.insc__bouton {
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid var(--c-marque);
    border-radius: var(--rayon);
    background: var(--c-marque);
    color: var(--c-surface);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
}

.insc__bouton:hover {
    border-color: var(--c-marque-sombre);
    background: var(--c-marque-sombre);
}

.insc__bouton:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--c-marque-voile),
        0 0 0 4px var(--c-marque);
}

.insc__bouton--large {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
}

.insc__bouton--ajout {
    width: 100%;
    min-height: 52px;
    border: 1.5px dashed var(--c-bordure-forte);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
    color: var(--c-marque);
    font-size: 15px;
}

.insc__bouton--ajout:hover {
    border-color: var(--c-marque);
    background: var(--c-marque-voile);
}

.insc__bouton--discret {
    align-self: flex-start;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--c-bordure);
    background: var(--c-surface-alt);
    color: var(--c-texte-discret);
    font-size: 13.5px;
    font-weight: 600;
}

.insc__bouton--discret:hover {
    border-color: var(--c-marque);
    background: var(--c-surface);
    color: var(--c-marque);
}

/* --- Étape 1 : les articles --- */

.insc__articles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.insc-article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 14px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
}

.insc-article--ouvert {
    border: 2px solid var(--c-marque);
    cursor: pointer;
}

.insc-article__choix {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--c-marque);
}

.insc-article__corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.insc-article__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
}

.insc-article__nom {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: pretty;
}

.insc-article__prix {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c-rouge-texte);
}

.insc-article__periode,
.insc-article__texte {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

.insc-article__grille {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.insc-article__puce {
    display: inline-flex;
    align-items: baseline;
    padding: 3px 8px;
    border-radius: var(--rayon);
    background: var(--c-ligne-survol);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-texte-doux);
}

/* Un trait sépare le prix du nom, et non une espace : les créneaux du club se
numérotent, et « Tora Kai - 2 216 € » se lit « deux mille deux cent seize
euros » — en français, l'espace est le séparateur des milliers. */
.insc-article__tarif {
    margin-left: 7px;
    padding-left: 7px;
    border-left: 1px solid var(--c-bordure-forte);
    color: var(--c-rouge-texte);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* L'âge annoncé, entre le nom et le prix. Discret et en graisse normale : il
 * renseigne, il ne se compare pas — c'est le prix qu'on lit en diagonale. */
.insc-article__age {
    margin-left: 7px;
    padding-left: 7px;
    border-left: 1px solid var(--c-bordure-forte);
    font-weight: 400;
    white-space: nowrap;
}

/* --- Étiquettes d'état --- */

.insc-etiquette {
    padding: 2px 8px;
    border-radius: var(--rayon);
    background: var(--c-bordure);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    /* Un cran plus sombre que le ton discret : à 10,5 px sur ce fond gris,
    « Facultatif » doit tenir les 4,5:1. */
    color: var(--c-texte-doux);
}

.insc-etiquette--ok {
    background: var(--c-vert-fond);
    color: var(--c-vert-texte);
}

.insc-etiquette--manque {
    background: var(--c-rouge-fond);
    color: var(--c-rouge-texte);
}

.insc-etiquette--reclame {
    background: var(--c-ambre-fond);
    color: var(--c-ambre-texte);
}

/* --- Bandeau d'erreur --- */

.insc-alerte {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--c-rouge-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-rouge-fond);
}

.insc-alerte__point {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--c-rouge-point);
}

.insc-alerte__corps {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.insc-alerte__titre {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-rouge-texte);
    text-wrap: pretty;
}

.insc-alerte__texte {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-rouge-texte);
    text-wrap: pretty;
}

.insc-alerte__lien {
    align-self: flex-start;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--c-marque);
    border-radius: var(--rayon);
    background: var(--c-surface);
    color: var(--c-marque);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.insc-alerte__lien:hover {
    background: var(--c-marque);
    color: var(--c-surface);
}

/* --- Étape 2 : un bloc dépliant par pratiquant --- */

.insc-bloc {
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
}

.insc-bloc__tete {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
}

.insc-bloc__tete::-webkit-details-marker {
    display: none;
}

.insc-bloc__resume {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.insc-bloc__etiquettes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.insc-bloc__nom {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.insc-bloc__sous {
    font-size: 12.5px;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

/* Un chevron dessiné en CSS : la maquette le pose en SVG, mais un carré
tourné de 45 degrés dit la même chose sans balise supplémentaire. */
.insc-bloc__chevron {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    background: var(--c-ligne-survol);
}

.insc-bloc__chevron::before {
    width: 7px;
    height: 7px;
    border-right: 1.7px solid var(--c-texte-doux);
    border-bottom: 1.7px solid var(--c-texte-doux);
    transform: translateY(-2px) rotate(45deg);
    content: "";
}

.insc-bloc[open] .insc-bloc__chevron::before {
    transform: translateY(1px) rotate(225deg);
}

.insc-bloc__corps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--c-bordure-legere);
}

/* --- Champs --- */

.insc-champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.insc-champ__etiquette {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte-doux);
}

.insc-champ__requis {
    color: var(--c-marque);
}

.insc-champ__option {
    font-weight: 500;
    color: var(--c-texte-discret);
}

.insc-champ__controle {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--c-bordure-forte);
    border-radius: var(--rayon);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 16px;
    color: var(--c-texte);
}

.insc-champ__controle:focus {
    border-color: var(--c-marque);
    outline: none;
    box-shadow: 0 0 0 3px var(--c-marque-voile);
}

.insc-champ__controle--zone {
    min-height: 88px;
    line-height: 1.5;
    resize: vertical;
}

.insc-champ__controle--faute {
    border: 1.5px solid var(--c-rouge-point);
    background: var(--c-marque-voile-fort);
}

/* Un champ et son bouton d'action sur la même ligne — le code promo et son
« Appliquer ». Le champ prend ce qui reste ; le bouton garde sa largeur de
texte, et s'étire à la hauteur du champ plutôt qu'à ses propres 44 px.
Après les règles du champ, pas avant : une sélection plus spécifique qui
précède la moins spécifique est le motif que stylelint refuse. */
.insc-champ__ligne {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.insc-champ__ligne .insc-champ__controle {
    flex: 1;
    min-width: 0;
}

.insc-champ__ligne .insc__bouton {
    align-self: auto;
    white-space: nowrap;
}

/* Le témoin du bac à sable, dans /parametres. Assez visible pour qu'on ne
déploie pas les inscriptions sans le voir, assez sobre pour ne pas ressembler
à une panne : c'est un état voulu, pas un incident. */
.parametres__bac-a-sable {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--c-rouge-point);
    border-radius: var(--rayon);
    background: var(--c-marque-voile-fort);
    font-size: 13px;
    line-height: 1.5;
}

.insc-champ__faute {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--c-rouge-texte);
}

.insc-champ__aide {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-texte-discret);
    text-wrap: pretty;
}

.insc-duo {
    display: flex;
    gap: 10px;
}

.insc-duo__choix {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--c-bordure-forte);
    border-radius: var(--rayon);
    background: var(--c-surface);
    font-size: 15px;
    cursor: pointer;
}

.insc-duo__choix:hover {
    border-color: var(--c-marque);
}

/* La règle croit ce sélecteur en concurrence avec
« .choix-multiple input:not(:first-child) », plus spécifique et déclaré plus
haut. Les deux blocs BEM ne se rencontrent jamais : un « .insc-duo__choix » vit
dans le formulaire public, un « .choix-multiple » dans le back-office. C'est le
faux positif classique de cette règle sur une feuille BEM. */
/* stylelint-disable-next-line no-descending-specificity */
.insc-duo__choix input {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--c-marque);
}

.insc-tarif {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 12px;
    border: 1px solid var(--c-rouge-bordure);
    border-radius: var(--rayon);
    background: var(--c-marque-voile);
}

.insc-tarif__libelle {
    font-size: 13px;
    color: var(--c-rouge-texte);
}

.insc-tarif__montant {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-rouge-texte);
}

/* --- Barre basse collante --- */

.insc-barre {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--c-surface);
    border-top: 1px solid var(--c-bordure-forte);
    box-shadow: 0 -3px 12px rgb(20 24 32 / 8%);
}

.insc-barre__bande {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px 13px;
}

.insc-barre__chiffres {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.insc-barre__libelle {
    font-size: 12.5px;
    color: var(--c-texte-discret);
}

.insc-barre__total {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/*
 * Parcours public — étape 3, les réductions.
 *
 * Deux natures qui ne se ressemblent pas à l'œil : le barème du foyer, qu'on
 * subit, et les réductions personnelles, qu'on choisit. Le premier est une
 * carte de lecture ; les secondes sont des cases, avec la surface tactile qui
 * va avec — on coche au bord du tatami, sur un téléphone.
 */

.insc-carte {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
}

.insc-carte--foyer {
    border-color: var(--c-marque-voile-fort);
    background: var(--c-marque-voile);
}

.insc-carte__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.insc-carte__texte {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

/* L'écran de retour de paiement empile plusieurs paragraphes dans une même
 * carte — montant réglé puis numéro de dossier, message d'échec puis renvoi
 * au dojo. Sans cette règle, la marge nulle les colle l'un à l'autre. */
.insc-carte__texte + .insc-carte__texte {
    margin-top: 8px;
}

/* Une panne HelloAsso n'est pas une erreur de saisie — l'inscription est déjà
 * acquise, il reste une alternative à annoncer. L'ambre le distingue du texte
 * neutre sans reprendre le rouge des fautes de formulaire. */
.insc-carte__texte--alerte {
    color: var(--c-ambre-texte);
    font-weight: 600;
}

/* De qui parle la carte : sa section et son âge, à droite de son nom. Sur
 * écran étroit la ligne passe sous le nom plutôt que de le comprimer — c'est
 * le nom qu'on lit en premier. La pastille reprend la couleur de la section
 * telle qu'elle est réglée dans le back-office, comme le fait le listing. */
.insc-qui {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--c-texte-doux);
    text-align: right;
}

.insc-qui__pastille {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pastille);
}

@media (width <= 480px) {
    .insc-carte__tete {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .insc-qui {
        text-align: left;
    }
}

/* Le classement des tarifs : qui reste au plein tarif, et ce que les autres
 * y gagnent. Sur écran étroit, chaque ligne se replie en deux étages plutôt
 * que de comprimer les montants. */
.insc-choix {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.insc-choix:last-child {
    margin-bottom: 0;
}

/* De qui l'adulte est le contact, sous son nom. Discret : c'est un repère,
 * pas une consigne — ce qu'on lit d'abord reste le nom. */
.insc-choix__pour {
    display: block;
    margin: -6px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

/* Le nom de la personne qui répond, et non une étiquette de rubrique. En
 * 11 px capitales grises — le style de `insc-choix__titre` — il passait sous
 * le paragraphe de 13 px qui le précède : plus petit et plus pâle que le texte
 * d'introduction, donc noyé dedans. C'est pourtant la seule chose qui dit
 * *qui* répond, et deux parents se suivent dans la même carte. */
.insc-choix__personne {
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-texte);
}

/* Deux adultes s'enchaînent dans une seule carte : sans trait, les dernières
 * cases du premier et le nom du second se lisent d'un seul tenant. */
.insc-choix--adulte + .insc-choix--adulte {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--c-bordure-legere);
}

.insc-choix__titre {
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

/* La cible tactile fait toute la ligne : viser une case de 16 px sur un
 * téléphone, debout, ne marche pas. */
.insc-choix__ligne {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    background: var(--c-fond);
    cursor: pointer;
}

.insc-choix__ligne:has(input:checked) {
    border-color: var(--c-marque);
    background: var(--c-marque-voile);
}

/* Même faux positif que sur « .insc-duo__choix input », et pour la même
raison. */
/* stylelint-disable-next-line no-descending-specificity */
.insc-choix__ligne input {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--c-marque);
    flex: none;
}

.insc-choix__corps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.insc-choix__nom {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-texte);
}

.insc-choix__piece {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--c-texte-discret);
    text-wrap: pretty;
}

.insc-carte--totaux {
    border-color: var(--c-bordure-forte);
}

.insc-totaux {
    margin: 0;
}

.insc-totaux__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
    color: var(--c-texte-doux);
}

.insc-totaux__ligne dt,
.insc-totaux__ligne dd {
    margin: 0;
}

.insc-totaux__ligne dd {
    font-variant-numeric: tabular-nums;
}

/* La remise s'indente sous le pratiquant qu'elle allège : c'est son décalage
qui dit à qui elle appartient, sans avoir à répéter le nom. */
.insc-totaux__ligne--remise {
    padding: 0 0 7px 14px;
    font-size: 12.5px;
    color: var(--c-vert-texte);
}

.insc-totaux__ligne:has(+ .insc-totaux__ligne--remise) {
    padding-bottom: 2px;
}

.insc-totaux__ligne--remise dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.insc-totaux__taux {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.insc-totaux__ligne--somme {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--c-bordure-forte);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-texte);
}

/* Le bouton de la barre basse : il porte le formulaire de la page par son
 * attribut « form », donc il vit hors du <form> et doit se dessiner seul. */
.insc__bouton--barre {
    padding: 11px 22px;
    font-size: 14px;
}

/*
 * Parcours public — étape 4, coordonnées et contacts.
 *
 * Une carte par pratiquant, et dedans un bloc par personne à joindre. Les
 * blocs sont visuellement séparés sans être des cartes eux-mêmes : deux
 * niveaux d'encadré sur un téléphone de 360 px ne laissent plus de place au
 * texte.
 */

/* Les deux moitiés de l'écran des coordonnées : ce dont répond le foyer, et
qui prévenir en cas d'accident. Elles se mélangeaient dans une seule liste de
cartes, où l'on pouvait se retirer soi-même. */
.insc-groupe {
    margin: 14px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid var(--c-bordure-forte);
}

.insc-groupe:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.insc-groupe > .insc__surtitre {
    display: block;
    margin: 0 0 10px;
}

.insc-contact {
    margin: 0 0 12px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--c-bordure);
}

.insc-contact:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.insc-contact__titre {
    padding: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

/* Les deux cases de reprise ouvrent la carte : elles décident de ce qu'il y a
 * en dessous, elles se lisent donc avant. */
.insc-reprise {
    margin-bottom: 14px;
}

/*
 * Parcours public — étape 5, autorisations et pièces.
 *
 * Un bloc de dépôt par pièce. Le champ de fichier natif est laid mais il ouvre
 * l'appareil photo du téléphone sans une ligne de script, et c'est le geste
 * réel : on photographie le certificat au bord du tatami.
 */

.insc-piece {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--c-bordure-forte);
    border-radius: var(--rayon);
    background: var(--c-surface-alt);
}

.insc-piece__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.insc-piece__titre {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte);
}

.insc-piece__note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

/* Une pièce qu'une réduction cochée réclame. Le trait ambre la distingue sans
 * la faire passer pour une faute : le club n'exige rien, il annonce que le
 * tarif plein s'appliquera si elle n'arrive pas. */
.insc-piece--reclame {
    border-color: var(--c-ambre-point);
    background: var(--c-ambre-fond);
}

.insc-piece--reclame .insc-piece__note {
    color: var(--c-ambre-texte);
}

/* Les deux gestes de dépôt. Ils se partagent la ligne et passent l'un sous
 * l'autre quand elle ne suffit plus — au pouce, deux demi-boutons valent mieux
 * qu'un bouton coupé. */
.insc-piece__gestes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.insc-piece__gestes > .insc__bouton {
    position: relative;
    display: inline-flex;
    flex: 1 1 140px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14.5px;
    text-align: center;
}

/* Le champ reste dans le flux du clavier — il est simplement hors de vue, et
 * son étiquette montre l'état de sa focalisation. Le masquer par « display »
 * le retirerait du parcours au clavier, et déposer un certificat deviendrait
 * impossible sans souris. */
.insc-piece__champ {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.insc-piece__gestes > .insc__bouton:focus-within {
    outline: 2px solid var(--c-marque);
    outline-offset: 2px;
}

/* Une pièce déposée n'est plus un dépôt : le trait plein dit qu'il n'y a plus
 * rien à faire ici. */
.insc-piece:has(.insc-piece__depose) {
    border-style: solid;
    border-color: var(--c-vert-bordure);
    background: var(--c-vert-fond);
}

.insc-piece__depose {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-vert-texte);
    overflow-wrap: anywhere;
}

.insc-piece__aide {
    font-size: 11.5px;
    color: var(--c-texte-discret);
}

/*
 * Le champ leurre de la porte publique.
 *
 * Sorti du flux plutôt que caché par « display: none » : certains robots
 * ignorent ce qui est explicitement masqué, et remplissent le reste. Le
 * « aria-hidden » et le « tabindex » du gabarit le retirent des lecteurs
 * d'écran et du parcours au clavier.
 */
.insc__leurre {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * Fiche adhérent — ce que l'inscription en ligne a signalé et déposé.
 *
 * Les trois natures d'écart se distinguent par leur bordure gauche, pas
 * seulement par leur libellé : sur une fiche qui en porte cinq, le bureau doit
 * voir d'un coup d'œil ce qui demande une décision.
 */

.inscription-ecarts,
.pieces {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
}

.inscription-ecarts__tete,
.pieces__tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.inscription-ecarts__titre,
.pieces__titre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.inscription-ecarts__compte {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--c-rouge-fond);
    font-size: 11px;
    font-weight: 700;
    color: var(--c-rouge-texte);
}

.inscription-ecarts__liste,
.pieces__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inscription-ecarts__ligne {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--c-bordure-forte);
    background: var(--c-surface-alt);
}

/* Modifié : la saisie a gagné, rien n'attend personne — le trait est neutre.
 * Non appliqué : quelque chose porte de l'argent et attend une décision.
 * Doublon possible : un doute d'identité, le plus grave des trois. */
.inscription-ecarts__ligne--modification {
    border-left-color: var(--c-bordure-forte);
}

.inscription-ecarts__ligne--non-applique {
    border-left-color: var(--c-marque);
}

.inscription-ecarts__ligne--doublon-possible {
    border-left-color: var(--c-rouge-point);
}

.inscription-ecarts__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.inscription-ecarts__champ {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte);
}

.inscription-ecarts__nature {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.inscription-ecarts__date {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--c-texte-discret);
}

.inscription-ecarts__explication {
    margin: 3px 0 6px;
    font-size: 12px;
    color: var(--c-texte-doux);
}

.inscription-ecarts__valeur {
    margin: 0;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.inscription-ecarts__valeur--avant {
    color: var(--c-texte-discret);
    text-decoration: line-through;
}

.inscription-ecarts__valeur--apres {
    color: var(--c-texte);
    font-weight: 600;
}

.pieces__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-separateur);
}

.pieces__ligne:last-child {
    border-bottom: 0;
}

.pieces__nature {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
    flex-basis: 100%;
}

.pieces__nom {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-marque);
    overflow-wrap: anywhere;
}

.pieces__poids,
.pieces__date {
    font-size: 11.5px;
    color: var(--c-texte-discret);
}

/* === Règlement intérieur === */

.reglement {
    max-width: 640px;
    padding: 18px 20px 20px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-carte);
    background: var(--c-surface);
}

.reglement__titre {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
}

.reglement__chapeau {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

.reglement__etat {
    display: block;
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-texte-discret);
}

.reglement__courant,
.reglement__vide {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--rayon);
    background: var(--c-ligne-survol);
}

.reglement__vide {
    font-size: 13px;
    color: var(--c-texte-doux);
    text-wrap: pretty;
}

.reglement__nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-marque);
    overflow-wrap: anywhere;
}

.reglement__detail {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--c-texte-discret);
}

.reglement__depot {
    padding-top: 16px;
    border-top: 1px solid var(--c-bordure);
}

.reglement__historique {
    padding-top: 16px;
    margin-top: 18px;
    border-top: 1px solid var(--c-bordure);
}

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

.reglement__ligne {
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--c-bordure-legere);
}

.reglement__ligne:last-child {
    border-bottom: 0;
}

/* --- Récapitulatif et confirmation --- */

/* Un moyen annoncé mais pas encore choisissable : la carte bancaire attend
HelloAsso. Grisée plutôt qu'absente — une famille qui ne la voit nulle part
croit que le club ne la prend pas. */
.insc-choix__ligne--eteinte {
    border-color: var(--c-separateur);
    background: var(--c-ligne-survol);
    color: var(--c-texte-discret);
    cursor: not-allowed;
}

/* Le détail d'un moyen ouvert — une fois ou trois fois pour la carte : un
filet à gauche le rattache visuellement à son option sans tableau ni largeur
fixe, pour rester lisible sur un téléphone. */
.insc-choix__details {
    margin: 6px 0 12px 12px;
    padding-left: 12px;
    border-left: 2px solid var(--c-bordure);
}

.insc-reponses {
    padding: 12px 0;
    border-bottom: 1px solid var(--c-bordure-legere);
}

.insc-reponses:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.insc-reponses__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 4px 0;
}

.insc-reponses__titre {
    font-size: 13px;
    color: var(--c-texte);
}

.insc-reponses__valeur {
    font-size: 12.5px;
    font-weight: 700;
}

.insc-reponses__valeur--oui {
    color: var(--c-vert-texte);
}

.insc-reponses__valeur--non {
    color: var(--c-texte-discret);
}

/* Un refus est une réponse ; une absence de réponse est un oubli qui se
rattrape. La seconde se signale, la première non. */
.insc-reponses__valeur--sans {
    color: var(--c-rouge-texte);
}

.insc-manques {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.insc-manques__ligne {
    padding: 8px 0 8px 18px;
    position: relative;
    font-size: 13px;
    color: var(--c-texte);
    border-bottom: 1px solid var(--c-bordure-legere);
}

.insc-manques__ligne::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-rouge-texte);
}

.insc-manques__ligne:last-child {
    border-bottom: 0;
}

/* Le premier bloc de réglages n'a pas de trait au-dessus : il n'y a rien à en
séparer. */
.reglement__depot--premier {
    padding-top: 0;
    border-top: 0;
}

/* Une phrase du formulaire public, avec l'endroit où elle paraît. Elles se
 * lisent en série : le trait sépare, il n'encadre pas — quatre cadres empilés
 * feraient quatre écrans là où il y en a un. */
.mention {
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--c-bordure);
    margin: 0 0 6px;
}

.mention:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.mention__ou {
    padding: 0;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--c-texte-discret);
}

.mention__texte {
    min-height: 76px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.reglement + .reglement {
    margin-top: 18px;
}