/*
 * Les questions posées dans les étapes du tunnel.
 *
 * Le questionnaire de santé et sa bascule Oui/Non, l'autorisation
 * parentale, les zones distinctes de l'étape « Paiement » (règlement
 * intérieur, signature, droit à l'image), le bloc qui a refusé le dernier
 * envoi, la pastille « encaissement en attente ».
 *
 * Écrans : les étapes 1 à 5 du tunnel ([cnpr_inscriptions]), et les
 * panneaux « Modifier » de l'espace adhérent qui reprennent ces blocs.
 *
 * 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.
 */

/* Questions are grouped by whitespace + a soft hairline, not boxed: the page's
   card is the one frame, a second border per question read as a card-in-card.
   Interactive elements (the Oui/Non pills, inputs) keep their own borders. */
.cnpr-insc-q {
    border: 0;
    border-bottom: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    padding: 14px 0;
    margin: 0;
}
.cnpr-insc-q:last-of-type { border-bottom: 0; }
.cnpr-insc-q legend { font-weight: 600; padding: 0; }
.cnpr-insc-q label { margin-right: 18px; }

/* Kept for screen readers, removed from sight: used on a <legend> whose text
   is already printed by the surrounding <details><summary>. */
.cnpr-insc-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Parental authorization: the undertakings as a readable list, not a slab. */
.cnpr-insc-parentale__clauses { margin: 8px 0 12px; padding-left: 20px; }
.cnpr-insc-parentale__clauses li { margin-bottom: 6px; }

/* Distinct zones on the paiement step — the club's own rules, the guardian's
   signature, image rights, under the money recap — and they have nothing to do
   with one another.
   The hairline above is right for the health questionnaire, where two dozen
   questions follow each other and a heavier rule would turn the page into a
   ladder. Here each block is its own subject, so the divider becomes a real
   rule, in the club's teal, with room around it.

   The `~` combinator is the guard on parentale and photo: the rule only exists
   when another .cnpr-insc-q precedes the block IN THE SAME form. On the
   dashboard, where image rights are rendered alone inside their <details>,
   nothing precedes them — and no bar opens onto nothing.

   .cnpr-insc-ri is NOT guarded that way, and the difference is deliberate. It
   is always the first block of its form, so no .cnpr-insc-q can ever precede
   it and the guarded form would never match — yet the rule does not open onto
   nothing: on the paiement step the total and the payment recap sit above it,
   on the correction page the bureau's message does. Guarding it would leave it
   the only one of the three with no rule at all, and — worse — would make
   `.cnpr-insc-q--blocking` below paint a border-top colour onto a border that
   does not exist, so the amber signal that helps a refused member FIND the
   block would have been silently inert. */
.cnpr-insc-ri,
.cnpr-insc-q ~ .cnpr-insc-ri,
.cnpr-insc-q ~ .cnpr-insc-parentale,
.cnpr-insc-q ~ .cnpr-insc-photo {
    border-top: 2px solid var(--cnpr-couleur-accent-clair, #5bc5f2);
    margin-top: 26px;
    padding-top: 26px;
}
/* A subject, never one question among many: no questionnaire hairline
   underneath, whatever the block's position. Hoisted out of the rule above,
   which only ever fired when something preceded the block — the règlement
   intérieur opens its form and would otherwise have been the single one of
   the three still closed by the thin grey line the questionnaire stacks with. */
.cnpr-insc-ri,
.cnpr-insc-parentale,
.cnpr-insc-photo { border-bottom: 0; }
/* A <legend> is normally laid INTO the top border, which would cut the rule in
   two and turn it into a decoration hanging off the title. Floated full-width
   (the same trick `.cnpr-insc-q--bool legend` already uses here) it leaves that
   slot: the rule runs edge to edge, and the title sits below it, a padding
   away — the gap the eye needs to stop reading it as stuck to the line. */
.cnpr-insc-ri > legend,
.cnpr-insc-q ~ .cnpr-insc-parentale > legend,
.cnpr-insc-q ~ .cnpr-insc-photo > legend {
    float: left;
    width: 100%;
    margin: 0 0 16px;
}

/* The block that refused the last submission. Amber, not red: nothing is
   broken and nothing was lost — an answer is simply missing. The rule above the
   zone turns amber with it, so the eye finds the right zone while scrolling
   even before it reads the sentence. */
/* Doubled class for (0,2,0) — the same weight as the separator rule above, won
   on source order. No `!important`: this file has none, and starting is how a
   stylesheet stops being editable. */
.cnpr-insc-q.cnpr-insc-q--blocking { border-top-color: var(--cnpr-insc-erreur-vif); }
/* Same palette as `.cnpr-insc-notice--warn`, which is already this plugin's
   voice for « something is wrong here » — a second red would read as a second
   severity that does not exist. */
/* Two classes on purpose: the theme's `.page-content form p { margin: 0 }` is
   (0,1,2), so a single-class rule here would silently lose its margin and the
   banner would sit flush against the sentence under it. The 16px below matches
   the legend's 16px above — the banner is a block between two others, not a
   label glued to the text that follows. */
.cnpr-insc-q .cnpr-insc-blocking {
    /* The zone legends are floated (see the separator rule above) — without
       this the banner slides under the title and paints its background behind
       the text. */
    clear: both;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--cnpr-insc-erreur-fond);
    color: var(--cnpr-insc-erreur);
    font-weight: 600;
}

/* The payment methods, announced rather than asked (étape « Confirmation »).
   No border and no tint: a framed panel full of methods is exactly what a
   checkout looks like, and the whole point is that nothing here is payable. */
.cnpr-insc-payinfo { margin: 0 0 20px; }
.cnpr-insc-payinfo__title { margin: 0 0 6px; font-size: 16px; }
.cnpr-insc-payinfo__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Chips, like the activity chips of the dashboard row: inert by vocabulary.
   A vertical list of methods reads as options awaiting a click. */
.cnpr-insc-payinfo__list li {
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--cnpr-fond-doux, #eaf7fd);
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    font-size: 13px;
}

/* Why a payment method just greyed out. Amber, not red: nothing is wrong, a
   choice simply excludes another.

   NO `display` — it would be author-origin and would beat the UA's
   `[hidden] { display: none }`, so the always-rendered empty <small> would
   become a permanent third flex child of a `justify-content: space-between`
   row and push every offline method's « € » field toward the middle. It is the
   cascade trap this file already documents further down.

   `width`, NOT `flex-basis`, unlike the `.cnpr-insc-pay-schedule` sibling that
   occupies the same slot: this element also lives in the CARD rows, which are
   `flex-direction: column` (`.cnpr-insc-paymethod--cb`), and there `flex-basis`
   sizes the MAIN axis — the height. Copying the schedule's rule sent the
   sentence 475px outside its card. `width` means the same thing in both
   directions. */
.cnpr-insc-pay-blocked {
    width: 100%;
    margin: 6px 0 0;
    color: var(--cnpr-insc-alerte);
    font-size: 13px;
}

/* The signature: ONE frame, not two.
   The typed name and the ticked box are a single gesture — attest, then sign.
   Drawn as two bordered boxes stacked on each other, the frames fought for the
   eye with nothing saying which one mattered. They now share one tinted panel:
   the input keeps its border (a field without one does not read as fillable),
   the checkbox row loses its own. */
.cnpr-insc-parentale__sign {
    margin: 16px 0 0;
    padding: 16px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 6%, transparent);
}
.cnpr-insc .cnpr-insc-parentale__sign > p { margin: 0 0 12px; }
.cnpr-insc-parentale__sign input[type="text"] { background: var(--cnpr-fond, #ffffff); min-width: min(100%, 340px); }
/* (0,3,0), to beat `.cnpr-insc-form .cnpr-insc-radio` (0,2,0) which re-frames
   every checkbox row inside a form. */
.cnpr-insc-form .cnpr-insc-parentale__sign .cnpr-insc-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 0;
    padding: 0;
    margin: 0;
}
.cnpr-insc-parentale__sign .cnpr-insc-radio input { margin: 3px 0 0; flex: none; }

/* Image rights. The radios are NOT wrapped in their labels on purpose: the
   helper note is revealed by the sibling selector below, which cannot reach
   out of a wrapping <label>. */
/* The radio floats so its label flows BESIDE it on one line: a block label
   would drop below the button and leave the reader guessing which answer the
   button belongs to. `overflow: hidden` makes the label its own block
   formatting context, so a wrapped second line stays aligned with the first
   instead of running back under the button. Float and BFC only — the radios
   and the note stay DOM siblings, which is what the reveal below needs. */
/* The theme resets `.page-content form p { margin: 0 }`, which left the
   lead-in sentence sitting directly on top of the first answer — it read as a
   third option rather than as the note it is. Give it its own space back. */
.cnpr-insc-photo .cnpr-insc-muted { margin: 0 0 14px; }
.cnpr-insc-photo input[type="radio"] { float: left; margin: 5px 8px 0 0; }
.cnpr-insc-photo label { display: block; overflow: hidden; margin: 0 0 10px; }
/* The note ships in the markup and is HIDDEN here — never injected by JS. If
   this stylesheet fails to load the member reads one sentence too many, which
   is harmless; the reverse would hide something meant for them. */
.cnpr-insc-photo__note {
    display: none;
    clear: both;
    margin: 0 0 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--cnpr-fond-doux, #eaf7fd);
    font-size: 14px;
}
.cnpr-insc-photo input[value="no"]:checked ~ .cnpr-insc-photo__note { display: block; }

/* Health questionnaire: Oui/Non as a clean two-segment toggle. */
.cnpr-insc-q--bool { display: flex; flex-direction: column; gap: 10px; }
.cnpr-insc-q--bool legend { float: left; width: 100%; margin-bottom: 4px; }
.cnpr-insc-choice { display: flex; gap: 8px; }
/* Container-scoped (0,2,0) to beat the generic ".cnpr-insc-form label" reset. */
.cnpr-insc-choice .cnpr-insc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid rgba(16, 32, 53, 0.10);
    border-radius: 999px;
    background: var(--cnpr-fond, #ffffff);
    cursor: pointer;
    font-weight: 600;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    box-shadow: 0 1px 2px rgba(16, 32, 53, 0.06);
    transition: border-color .3s cubic-bezier(0.32, 0.72, 0, 1),
        background .3s cubic-bezier(0.32, 0.72, 0, 1),
        color .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.cnpr-insc-pill input { margin: 0; }
.cnpr-insc-pill:hover { border-color: var(--cnpr-couleur-lien, #0a6fb2); }
/* The pending-encaissement pill is display-only (the member's dashboard status
   that mirrors the bureau's `.cnpr-ad-tag--pending-enc`), not one of the
   interactive choice pills this class also styles. Give it the amber "action
   attendue" fill and drop the choice pill's pointer + hover so it never reads
   as clickable. Declared after the base + `:hover` so it wins on source order. */
.cnpr-insc-pill--pending-enc {
    /* Emitted WITHOUT a .cnpr-insc-choice ancestor (echeancier status chip),
       so the choice-scoped base pill rule never reaches it — it needs its
       own box or it renders as bare inline text. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--cnpr-insc-alerte-filet);
    border-radius: 999px;
    background: var(--cnpr-insc-alerte-fond);
    color: var(--cnpr-insc-alerte);
    font-weight: 600;
    font-size: 13px;
    cursor: default;
}
.cnpr-insc-pill--pending-enc:hover { border-color: var(--cnpr-insc-alerte-filet); }
.cnpr-insc-pill--yes:has(input:checked) {
    border-color: var(--cnpr-insc-alerte-vif);
    background: color-mix(in srgb, var(--cnpr-insc-alerte-vif) 12%, transparent);
    color: var(--cnpr-insc-alerte);
}
.cnpr-insc-pill--no:has(input:checked) {
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    background: color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 10%, transparent);
    color: var(--cnpr-couleur-titre, #1e3f94);
}