/*
 * L'espace adhérent : le tableau de bord de la famille.
 *
 * La barre de tête et la saison, l'historique des saisons passées, le
 * panneau « Modifier » d'un adhérent, la reprise d'un dossier annulé, les
 * boutons de la liste, l'accès au règlement groupé, la palette des
 * pastilles d'état, la carte de connexion, l'ajout d'un adhérent et la
 * grille de son formulaire.
 *
 * Écrans : [cnpr_mes_adherents], et la connexion affichée par le tunnel.
 *
 * Sa place dans la cascade est fixée par cnpr_insc_feuilles_front()
 * (includes/front-tunnel-core.php) : toutes les feuilles du front se
 * chargent partout où l'extension s'affiche, dans cet ordre, avant le thème.
 */

/* --- Dashboard header bar --------------------------------------------- */
.cnpr-insc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-head .card-title { margin: 0; }
/* Dashboard variant: the bar holds the logout link alone. `space-between` with
   a single child pushes it to the START — this is the one line that keeps it on
   the right, where it was when a title held the other end. */
.cnpr-insc-head--bare { justify-content: flex-end; }
.cnpr-insc-season {
    margin: -8px 0 18px;
    font-size: 15px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-season strong { color: var(--cnpr-couleur-texte, #16284f); font-weight: 700; }

/* Previous-season history (collapsed, read-only) */
.cnpr-insc-season-group {
    margin: 24px 0 0;
    border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    padding-top: 16px;
}
.cnpr-insc-season-group > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--cnpr-couleur-titre, #1e3f94);
    list-style: none;
}
.cnpr-insc-season-group > summary::-webkit-details-marker { display: none; }
.cnpr-insc-season-group > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
}
.cnpr-insc-season-group[open] > summary::before { transform: rotate(90deg); }
.cnpr-insc-history {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.cnpr-insc-history__item {
    border: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--cnpr-fond, #ffffff);
}
.cnpr-insc-history__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}
.cnpr-insc-history__acts {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    font-size: 14px;
}
.cnpr-insc-history__paid {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
}
/* Le décompte d'un dossier qui a eu une remise : « Facturé » en gras comme
   l'était « Payé », le tarif initial et la remise en dessous, plus discrets. */
.cnpr-insc-history__montants {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--muted, #516278);
}
.cnpr-insc-history__montants li { margin: 2px 0 0; }
.cnpr-insc-history__montant--facture {
    font-weight: 600;
    color: var(--text, #1d2733);
}
.cnpr-insc-history__reenroll { margin: 12px 0 0; }
.cnpr-insc-history__reenroll .cnpr-insc-inline,
.cnpr-insc-history__reenroll form { margin: 0; }
.cnpr-insc-history__already {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    font-style: italic;
}

/* Per-adhérent "edit my info" panel — full-width row under the list item. */
/* The pencil affordance is SHARED with the account card's « Modifier »
   (.cnpr-insc-gestionnaire__modify): one discreet link style for one gesture,
   so the member recognises « modifier » wherever it appears. It is declared
   here, next to the panel that established it, rather than duplicated with the
   account block. */
.cnpr-insc-item__edit { flex-basis: 100%; margin: 2px 0 0; }
.cnpr-insc-item__edit > summary,
.cnpr-insc-gestionnaire__modify {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc-item__edit > summary {
    list-style: none;
    display: inline-block;
}
.cnpr-insc-item__edit > summary::-webkit-details-marker { display: none; }
.cnpr-insc-item__edit > summary::before,
.cnpr-insc-gestionnaire__modify::before { content: "\270E\00a0"; }
.cnpr-insc-item__edit[open] { padding-bottom: 10px; }
.cnpr-insc-item__edit .cnpr-insc-form { margin-top: 12px; }

/* Two-click "restart a cancelled dossier" disclosure (WU2 double opt-in):
   the trigger reuses .btn.btn-secondary (see cnpr_insc_restart_form()) for
   free consistency with its neighboring action buttons — this only strips
   the native marker and lays out what opens underneath: the consequence
   notice, then the confirm button, full-width below the button row instead
   of squeezed into it. */
/* A restart takes a whole line because what it reveals — the paragraph naming
   everything the member is about to lose — needs the width. But a full-width
   line left its narrow trigger stranded at the LEFT margin, out of line with
   the badge and the delete button beside it, so the row's actions read as
   three unrelated things. The line stays full width; only its trigger is sent
   back to the right edge, and the revealed text is set left again — an
   explanation one reads is never right-ragged. */
.cnpr-insc-item__right .cnpr-insc-restart-confirm { flex-basis: 100%; text-align: right; }
.cnpr-insc-item__right .cnpr-insc-restart-confirm .cnpr-insc-notice { text-align: left; }
/* The theme's `.page-content form` makes these forms `display: grid`, which
   beats .cnpr-insc-inline's inline-flex and leaves text-align with nothing to
   act on — the confirm button stayed pinned to the left while its own trigger
   sat on the right. Both properties are set because the winning display is the
   theme's to change. */
.cnpr-insc-item__right .cnpr-insc-restart-confirm form {
    justify-items: end;
    justify-content: end;
}
.cnpr-insc-restart-confirm > summary {
    cursor: pointer;
    list-style: none;
}
.cnpr-insc-restart-confirm > summary::-webkit-details-marker { display: none; }
.cnpr-insc-restart-confirm[open] { padding-bottom: 10px; }
.cnpr-insc-restart-confirm .cnpr-insc-notice { margin: 10px 0; }

/* Dashboard action buttons (adhérent list + N-1 history) are inline form
   buttons, so the theme's ".page-content form .btn" turns them into oversized
   blue pills with a heavy shadow. Re-style them compact here — the 3-class
   scope beats that theme rule — so they read as one tidy, consistent set. */
.cnpr-insc .cnpr-insc-list .btn,
.cnpr-insc .cnpr-insc-history .btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}
.cnpr-insc .cnpr-insc-list .btn:hover,
.cnpr-insc .cnpr-insc-history .btn:hover {
    transform: none;
}
.cnpr-insc .cnpr-insc-list .btn-primary,
.cnpr-insc .cnpr-insc-history .btn-primary {
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #ffffff;
    border: 1px solid transparent;
}
.cnpr-insc .cnpr-insc-list .btn-secondary,
.cnpr-insc .cnpr-insc-history .btn-secondary {
    background: var(--cnpr-fond, #ffffff);
    color: var(--cnpr-couleur-texte, #16284f);
    border: 1px solid var(--cnpr-filet, #d3eefb);
}
/* The theme paints every ".page-content form" as a bordered, shadowed card.
   The dashboard's inline action forms (Inscrire / Réinscrire / Régler…) carry
   no class, so that card box wraps each button — the visible "double border".
   Strip it here (2-class scope beats ".page-content form"); display is left to
   the form's own inline style so the withdraw inline-flex form is untouched. */
.cnpr-insc .cnpr-insc-list form,
.cnpr-insc .cnpr-insc-history form {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    max-width: none;
    gap: 0;
}
.cnpr-insc-link {
    color: var(--cnpr-couleur-titre, #1e3f94);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cnpr-insc-link:hover { text-decoration: underline; }

/* Group règlement CTA (and its "coming soon" hint counterpart) sit right
   above the adhérent list — right-align the button and give it the same
   breathing room as the other dashboard blocks above the list (18px, matches
   .cnpr-insc-season/.cnpr-insc-empty) so it does not touch the grid below.
   Scoped under .cnpr-insc (0,2,0): the theme's `.page-content p { margin: 0 }`
   (0,1,1) would otherwise flatten the margin — same trap and same parade as
   `.cnpr-insc .cnpr-insc-notice` above. */
.cnpr-insc .cnpr-insc-groupe-cta {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}
/* La phrase d'état du règlement groupé n'a pas toujours un bouton sous elle
   (« contactez le club » se lit seule) : sans marge propre elle collait à la
   première carte de dossier, et la famille lisait l'état de son règlement
   comme un sous-titre du dossier du dessous. Même parade que le CTA au-dessus
   et que .cnpr-insc-step-intro : (0,2,0) pour battre le `p { margin: 0 }` du
   thème. */
.cnpr-insc .cnpr-insc-groupe-etat { margin: 0 0 16px; }

/* --- Adherent list (name left, status/action right) ------------------- */
.cnpr-insc-item__name { font-weight: 600; font-size: 16px; }
/* Lifelong member number, right next to the name it identifies: same muted
   tone as the activity chips above, so it reads as secondary detail. */
.cnpr-insc-item__numero { font-size: 13px; color: var(--cnpr-couleur-texte-doux, #4c5f80); }
.cnpr-insc-item__right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    /* Wrapped lines hug the card's right edge instead of starting at the left
       of the column: on a cancelled dossier this block wraps to four lines
       (badge, two restarts, delete) and without this they staircase. */
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.cnpr-insc-empty {
    padding: 16px;
    border: 1px dashed var(--cnpr-fond-doux, #eaf7fd);
    border-radius: 10px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    margin: 0 0 18px;
}
/* The welcome landing reuses .cnpr-insc-empty as the page's MAIN content:
   inside the redesigned core the dashed frame reads as an un-migrated box.
   De-frame it — the empty-state look stays for real placeholders only. */
.cnpr-insc-welcome {
    border: 0;
    padding: 0;
}

/* --- Collapsible "add adherent" panel --------------------------------- */
.cnpr-insc-panel {
    border: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    border-radius: 12px;
    padding: 0 16px;
    margin: 8px 0 0;
    background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-panel > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 14px 4px;
    list-style: none;
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc-panel > summary::-webkit-details-marker { display: none; }
.cnpr-insc-panel > summary::before { content: "+ "; font-weight: 700; }
.cnpr-insc-panel[open] > summary::before { content: "− "; }
.cnpr-insc-panel[open] { padding-bottom: 16px; }

/* --- Self-service correction sections ---------------------------------- */
/* De-frame the fieldset like every other fieldset in the tunnel: without
   this it renders the UA's 2px groove box — the only hard frame left
   inside the redesigned core. Sections split by a soft hairline instead. */
.cnpr-insc-correction-section {
    border: 0;
    border-bottom: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    padding: 14px 0;
    margin: 0;
    min-inline-size: auto;
}
.cnpr-insc-correction-section:last-of-type { border-bottom: 0; }
.cnpr-insc-correction-section > legend {
    font-weight: 700;
    color: var(--cnpr-couleur-texte, #16284f);
    padding: 0;
    margin: 0 0 10px;
}

/* --- Status badge palette --------------------------------------------- */
.cnpr-insc-badge--cnpr_paye { background: var(--cnpr-insc-succes-fond); color: var(--cnpr-insc-succes); }
.cnpr-insc-badge--cnpr_paye_partiel { background: var(--cnpr-insc-alerte-fond); color: var(--cnpr-insc-alerte); }
.cnpr-insc-badge--cnpr_prelev_annule { background: #fcebea; color: #8a1c14; }
.cnpr-insc-badge--cnpr_valide_attente_paiement { background: var(--cnpr-insc-info-fond); color: var(--cnpr-insc-info); }
.cnpr-insc-badge--cnpr_a_valider { background: var(--cnpr-fond-doux, #eaf7fd); color: var(--cnpr-couleur-titre, #1e3f94); }
.cnpr-insc-badge--cnpr_valide_gele { background: var(--cnpr-insc-info-fond); color: var(--cnpr-insc-info); }
.cnpr-insc-badge--cnpr_attente_certif { background: var(--cnpr-insc-alerte-fond); color: var(--cnpr-insc-alerte); }
/* La file d'attente garde son violet, en dur : ni succès, ni alerte, ni
   information, et c'est la seule pastille qui le porte. */
.cnpr-insc-badge--cnpr_file_attente { background: #ede9fe; color: #5b21b6; }

/* --- Derived label badge (suppression-rejet-aspects, Requirement 6) --- */
.cnpr-insc-derived-label {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
}
.cnpr-insc-derived-label--warn { background: var(--cnpr-insc-erreur-fond); color: var(--cnpr-insc-erreur); }
.cnpr-insc-derived-label--info { background: var(--cnpr-insc-alerte-fond); color: var(--cnpr-insc-alerte); }
.cnpr-insc-derived-label--success { background: var(--cnpr-insc-succes-fond); color: var(--cnpr-insc-succes); }

/* --- Themed login card ------------------------------------------------ */
/* No inner frame: the login sits as a centered column inside the page's card
   (a border + fill here made it a card-in-card). */
.cnpr-insc-auth {
    max-width: 440px;
    margin: 8px auto;
    padding: 8px 0;
    border: 0;
    background: none;
}
.cnpr-insc-auth .card-title { margin-top: 0; }
.cnpr-insc-auth .cnpr-insc-login { margin-top: 4px; }
.cnpr-insc-login label { display: block; margin: 0 0 4px; font-weight: 600; }
.cnpr-insc-login input[type="text"],
.cnpr-insc-login input[type="email"],
.cnpr-insc-login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 8px;
    font-size: 16px;
}
/* Magic-link auth: breathing room between the intro text, the email field, the
   submit button and the bureau link so nothing collides. */
.cnpr-insc.cnpr-insc-auth > p { margin: 0 0 12px; }
.cnpr-insc-auth .cnpr-insc-login p { margin: 0 0 16px; }
.cnpr-insc-auth .cnpr-insc-login .cf-turnstile { margin: 0 0 16px; }
.cnpr-insc-auth .cnpr-insc-login + p { margin-top: 14px; }
/* Welcome / onboarding block (no-dossier landing): give the CTA button air. */
.cnpr-insc-welcome .btn { display: inline-block; margin-top: 14px; }
.cnpr-insc-checkbox { font-weight: 400 !important; }
.cnpr-insc-checkbox input { margin-right: 6px; }

/* --- Form grid (add adherent + profil correction) --------------------- */
.cnpr-insc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0 0 16px;
}
.cnpr-insc-grid .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.cnpr-insc-grid .field > span { font-weight: 600; font-size: 14px; color: var(--cnpr-couleur-texte-doux, #4c5f80); }
.cnpr-insc-grid .field--wide { grid-column: 1 / -1; }
.cnpr-insc-grid input[type="text"],
.cnpr-insc-grid input[type="date"],
.cnpr-insc-grid input[type="tel"],
.cnpr-insc-grid input[type="email"],
.cnpr-insc-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 8px;
    font-size: 15px;
    background: var(--cnpr-fond, #ffffff);
}
/* Phone widget: country-code select + national number on one row. */
.cnpr-insc-phone { display: flex; gap: 8px; }
.cnpr-insc-phone select { flex: 0 0 auto; width: auto; max-width: 170px; }
.cnpr-insc-phone input { flex: 1 1 auto; width: auto; min-width: 0; }
/* Neutral one-line hint under a field (e.g. « requise pour la licence
   compétition » under Ville de naissance) — informative, not a warning,
   hence muted rather than the cityhint's amber. */
.cnpr-insc-fieldhint {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
/* Date de naissance en trois listes (cnpr_insc_render_date_naissance) : le
   titre commun en légende, au même style que les autres libellés ; chaque
   liste garde son petit libellé au-dessus. Le mois, écrit en toutes lettres,
   prend la place qui reste ; le jour et l'année ont la largeur de leur plus
   long choix (« Année », « Jour » compris). */
.cnpr-insc-grid .cnpr-insc-dob {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
}
.cnpr-insc-dob legend {
    padding: 0;
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted, #516278);
}
/* Une grille en PIXELS, pas en `em` : le libellé est en 13 px mais la liste
   en 16 px (en dessous, iOS zoome au focus), et une largeur en `em` du
   libellé coupait « Jour » et « Année ». Jour et année ont la largeur de leur
   titre ; le mois prend le reste, borné pour ne pas s'étaler sur ordinateur. */
.cnpr-insc-dob__cases {
    display: grid;
    grid-template-columns: 80px minmax(0, 200px) 96px;
    gap: 8px;
}
/* LE PETIT LIBELLÉ EST SOUS SA LISTE, et c'est le CSS qui l'y met : dans le
   balisage il reste DANS le <label> qui enveloppe la liste (avant elle), donc
   associé à elle et lu comme son nom. Au-dessus, il poussait les trois listes
   d'une ligne plus bas que les champs voisins de la rangée (« Sexe ») ; sous
   elles, la légende tient la place des libellés des autres champs, et les
   listes s'alignent sur leurs contrôles. */
.cnpr-insc-form .cnpr-insc-dob__case {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    margin: 0;
}
/* Trois classes : passe devant le libellé de champ d'un thème (0,2,1), qui
   le voudrait gras et grand comme un titre. */
.cnpr-insc-form .cnpr-insc-dob .cnpr-insc-dob__case > span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--muted, #516278);
}
/* Moins de marge intérieure que les autres listes : la place va au texte
   (« Année », « septembre »). Trois classes : passe devant la règle commune
   des champs, celle du greffon comme celle d'un thème (0,2,1). */
.cnpr-insc-grid .cnpr-insc-dob .cnpr-insc-dob__case select {
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 4px;
}
.cnpr-insc-dob .cnpr-insc-fieldhint { margin-top: 4px; }
/* Le jour qui n'existe pas (31 avril, 29 février hors bissextile) : posé par
   cnpr-tunnel.js, même ambre que l'aide de la ville — une chose à revoir, pas
   une faute. */
/* Quatre crans : le message est un <span> enfant du fieldset `.field`, et un
   thème qui style les libellés de champ (`… .field > span`, 0,3,1) le
   rendrait gras et noir comme un titre. */
.cnpr-insc-form .cnpr-insc-grid .cnpr-insc-dob span.cnpr-insc-dob__message {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #7a4a13;
}
.cnpr-insc-dob__message[hidden] { display: none; }
.cnpr-insc-dob select[aria-invalid="true"] { border-color: #b45309; }
/* City hint: a permanently reserved line so revealing it never shifts the layout. */
.cnpr-insc-cityhint {
    display: block;
    min-height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: var(--cnpr-insc-alerte);
}
.cnpr-insc-cityselect { /* legacy JS-injected select on the correction screen */
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 8px;
    font-size: 15px;
    background: var(--cnpr-fond, #ffffff);
}

.cnpr-insc-checks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.cnpr-insc-checks label { display: flex; align-items: center; gap: 8px; margin: 0; }
/* "Ancien / proche d'ancien" is a mutually-exclusive situation -> radio group. */
.cnpr-insc-situation { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cnpr-insc-situation legend { padding: 0; margin: 0 0 2px; font-weight: 600; }
.cnpr-insc-situation label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.cnpr-insc-situation small { color: var(--cnpr-couleur-texte-doux, #4c5f80); }
/* Air above the "Ajouter cet adhérent" submit button. */
.cnpr-insc-situation + .btn { margin-top: 16px; }

/* --- Informations du club (includes/newsletter-accord.php) ----------------
   L'encadré de l'espace adhérent, sous le compte : la palette informative de
   `.cnpr-insc-notice--info`, en carte, parce qu'il porte un geste. */
.cnpr-insc-infoclub {
    margin: 0 0 26px;
    padding: 16px 18px;
    border: 1px solid rgba(63, 166, 191, 0.30);
    border-radius: 10px;
    background: rgba(63, 166, 191, 0.08);
}
.cnpr-insc-infoclub__title { margin: 0 0 8px; font-size: 18px; }
.cnpr-insc .cnpr-insc-infoclub p { margin: 0 0 10px; }
.cnpr-insc .cnpr-insc-infoclub__form { margin: 14px 0; }
.cnpr-insc .cnpr-insc-infoclub .cnpr-insc-infoclub__alt { margin: 0; font-size: 0.92em; }
.cnpr-insc .cnpr-insc-infoclub-choix > p { margin: 0 0 14px; }
.cnpr-insc-infoclub-choix .cnpr-insc-radio { display: block; margin: 8px 0; }