/*
 * Les boutons et les contrôles communs aux formulaires.
 *
 * La rangée d'actions (Continuer, Précédent, Plus tard, Retirer) et la
 * couleur de chaque bouton selon son rôle, la ligne « Reçu », le dépôt de
 * fichier, les choix en cases, la remise à plat des formulaires sous le
 * thème, le texte discret, l'intro d'une étape.
 *
 * Écrans : le tunnel, l'espace adhérent, les pages de règlement.
 *
 * 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.
 */

/* Action row: primary + secondary buttons, consistent spacing across steps. */
.cnpr-insc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 18px;
}
/* Equal width across the row so the buttons read as one consistent set. */
.cnpr-insc-actions .btn {
    margin: 0;
    min-width: 200px;
    justify-content: center;
    text-align: center;
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1),
        background .3s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Physical press: the button gives slightly under the pointer. */
.cnpr-insc-actions .btn:active:not(:disabled):not(.is-disabled) { transform: scale(0.98); }
/* The forward (primary) button always sits on the right — the row is justified
   flex-end, so it stays anchored right even on steps that have no "Précédent".
   When a "Précédent" exists, its auto right-margin pushes it back to the left. */
.cnpr-insc-actions .cnpr-insc-prev { margin-right: auto; }
/* On narrow screens the lone forward button reads better full-width. */
@media (max-width: 560px) {
    .cnpr-insc-actions .btn { flex: 1 1 100%; }
}

/* Semantic colour by feature. Scoped under .cnpr-insc so it beats the theme's
   ".page-content form .btn" rule, which otherwise paints EVERY form button accent.
   - primary  (Continuer / Déposer / Soumettre) : accent, the encouraged action
   - secondary (Précédent)                      : neutral, navigation
   - defer    (Le déposer plus tard)            : amber, an optional/later action */
.cnpr-insc .cnpr-insc-actions .btn-primary {
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #ffffff;
    border: 1px solid transparent;
}
.cnpr-insc .btn:disabled,
.cnpr-insc .btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
.cnpr-insc .cnpr-insc-actions .btn-secondary {
    background: var(--cnpr-fond, #ffffff);
    color: var(--cnpr-couleur-texte, #16284f);
    border: 1px solid var(--cnpr-filet, #d3eefb);
    box-shadow: none;
}
.cnpr-insc .cnpr-insc-actions .btn-defer {
    background: color-mix(in srgb, var(--cnpr-insc-alerte-vif) 12%, transparent);
    color: var(--cnpr-insc-alerte);
    border: 1px solid color-mix(in srgb, var(--cnpr-insc-alerte-vif) 45%, transparent);
    box-shadow: none;
}
.cnpr-insc .cnpr-insc-actions .btn-defer:hover { background: color-mix(in srgb, var(--cnpr-insc-alerte-vif) 20%, transparent); }
/* danger (Retirer un dossier) : destructive, neutral-red. Scoped to beat the
   theme's accent paint on form buttons (the withdraw control is a <button>). */
.cnpr-insc .cnpr-insc-inline .btn-danger,
.cnpr-insc .cnpr-insc-actions .btn-danger {
    background: color-mix(in srgb, var(--cnpr-insc-erreur-vif) 10%, transparent);
    color: var(--cnpr-insc-erreur);
    border: 1px solid color-mix(in srgb, var(--cnpr-insc-erreur-vif) 45%, transparent);
    box-shadow: none;
}
.cnpr-insc .cnpr-insc-inline .btn-danger:hover,
.cnpr-insc .cnpr-insc-actions .btn-danger:hover { background: color-mix(in srgb, var(--cnpr-insc-erreur-vif) 18%, transparent); }
/* Inline withdraw form sits flush inside the dashboard action row. */
.cnpr-insc-inline { display: inline-flex; margin: 0; }

@media (max-width: 560px) {
    .cnpr-insc-actions { flex-direction: column-reverse; align-items: stretch; }
    .cnpr-insc-actions .btn { width: 100%; min-width: 0; }
    .cnpr-insc-actions .cnpr-insc-prev { margin-right: 0; }
}

/* "Received" success line (e.g. certificate already uploaded).
   Aux couleurs de succès : c'était un vert d'eau en dur, sa pastille suivait
   l'accent du thème — deux verts pour une même nouvelle. */
.cnpr-insc-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--cnpr-insc-succes-fond);
    border: 1px solid color-mix(in srgb, var(--cnpr-insc-succes) 30%, transparent);
    color: var(--cnpr-insc-succes);
    font-weight: 600;
}
.cnpr-insc-ok__icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cnpr-insc-succes);
    color: #fff;
    font-size: 12px;
}
.cnpr-insc-ok a,
.cnpr-insc-ok a:hover { color: inherit; }

/* File upload: a native input wrapped in a soft dropzone. The browser's own
   file-selector button is styled (keeps native dialog, validation & filename
   display); margin-right guarantees the filename never touches the button. */
.cnpr-insc-file {
    padding: 16px 18px;
    border: 1.5px dashed var(--cnpr-filet, #d3eefb);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 4%, transparent);
    margin: 0 0 4px;
}
/* Neutralise the generic .cnpr-insc-form input[type=file] box for this field
   (same specificity, later in the file => wins). */
.cnpr-insc-form input.cnpr-insc-fileinput {
    padding: 0;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    font-size: 14px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-fileinput::file-selector-button {
    margin-right: 16px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cnpr-insc-fileinput::file-selector-button:hover { background: var(--cnpr-couleur-lien, #0a6fb2); }

.cnpr-insc-radio {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 10px;
    margin: 0 0 8px;
}
/* Inside a form, the generic ".cnpr-insc-form label" reset (0,1,1) would force
   this to inline-block; this (0,2,0) keeps it a full-width block row. */
.cnpr-insc-form .cnpr-insc-radio { display: block; margin: 0 0 8px; }

/* The theme turns every .page-content form into a bordered, shadowed grid card.
   Inside our own .cnpr-insc card that nests a second card AND forces grid flow on
   children — reset it so our forms are plain flow blocks. */
.cnpr-insc .cnpr-insc-form {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    max-width: none;
}

.cnpr-insc-muted { color: var(--cnpr-couleur-texte-doux, #4c5f80); }
/* L'intro d'une étape respire avant ce qui suit (bloc test de nage ou grille) :
   (0,2,0) pour battre le reset des paragraphes du thème. */
.cnpr-insc .cnpr-insc-step-intro { margin: 0 0 18px; }

/* Duration hoisted onto the activité name (« Aquagym · créneaux de 45 min »):
   lighter than the title so it reads as a caption, not a second heading. */
.cnpr-insc-conteneur__duree {
    font-size: 14px;
    font-weight: 500;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-conteneur__duree::before { content: "· "; }