/*
 * « Comment se passe une inscription ».
 *
 * Le bloc repliable du parcours, ses étapes numérotées, l'encart famille,
 * l'étape franchie (includes/front-parcours.php).
 *
 * Écrans : le pied de l'espace adhérent, et toute page qui porte
 * [cnpr_parcours_inscription] (celle des cotisations).
 *
 * 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.
 */

/* --- « Comment se passe une inscription » (front-parcours.php) ------------
   Le bloc du parcours, en pied de tableau de bord et posable ailleurs par
   shortcode.

   LE FILET VERT EST LE MÊME QUE CELUI DU HAUT DE PAGE (.cnpr-insc-gestionnaire,
   plus haut dans cette feuille) : 2px --cnpr-couleur-accent-clair, à distance ÉGALE de part et
   d'autre. La page a déjà ce vocabulaire pour dire « on change de zone » ; en
   inventer un second aurait fait deux séparateurs différents sur un même écran.
   Ici c'est un border-TOP, le bloc étant sous ce qu'il sépare.

   TOUTES LES COULEURS SONT EN (0,2,0), sous .cnpr-insc. Le thème pose
   `.page-standard .page-content p, … li { color }` en (0,2,1) :
   une règle à un seul niveau de classe serait écrasée. Les textes sont d'ailleurs
   des <div> et non des <p>, ce qui les met hors de portée de ce sélecteur. */
.cnpr-insc-parcours {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 2px solid var(--cnpr-couleur-accent-clair, #5bc5f2);
    padding-bottom: 26px;
    border-bottom: 2px solid var(--cnpr-couleur-accent-clair, #5bc5f2);
    margin-bottom: 26px;
}
/* LES DEUX FILETS ENCADRENT, ILS N'INTRODUISENT PAS. Replié, ce bloc se réduit
   à une ligne de titre : posé sous un seul trait, il flottait entre la section
   d'au-dessus et celle d'en dessous, sans qu'on voie où il commençait ni où il
   finissait. Fermé des deux côtés, il se lit comme une bande à part, ouverte ou
   non. Distances symétriques, comme pour .cnpr-insc-gestionnaire. */
/* Le titre EST la poignée : c'est lui qu'on lit replié, donc il garde
   l'allure d'un titre de section plutôt que celle d'un lien. Le chevron est
   celui de l'historique de saison — le motif maison pour un bloc de LECTURE
   qu'on déplie, quand le « + » des panneaux annonce, lui, une saisie. */
/* Sur le tableau de bord, l'historique de saison suit immédiatement ce bloc,
   avec son propre filet. Deux séparateurs à 26px l'un de l'autre, un vert et un
   gris, se lisent comme une hésitation : le trait de clôture du parcours fait
   déjà le travail. On efface donc celui du voisin, et lui seul — la règle vise
   l'adjacence, pas la classe, donc l'historique garde son filet partout où il
   ne suit pas le parcours. */
.cnpr-insc .cnpr-insc-parcours + .cnpr-insc-season-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cnpr-insc .cnpr-insc-parcours__summary {
    cursor: pointer;
    list-style: none;
    /* `inherit` et non --cnpr-police-titre : c'est ce que ce titre a toujours
       rendu (l'ancien jeton de police qu'il lisait n'était défini par aucun thème). */
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--cnpr-couleur-titre, #1e3f94);
    padding: 2px 0;
}
.cnpr-insc-parcours__summary::-webkit-details-marker { display: none; }
.cnpr-insc-parcours__summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 10px;
    transition: transform .15s ease;
}
.cnpr-insc-parcours[open] > .cnpr-insc-parcours__summary::before { transform: rotate(90deg); }
/* Le halo de focus doit rester visible : la poignée se manœuvre au clavier,
   et `list-style: none` a déjà retiré le seul repère natif. */
.cnpr-insc-parcours__summary:focus-visible {
    outline: 2px solid var(--cnpr-couleur-titre, #1e3f94);
    outline-offset: 3px;
    border-radius: 4px;
}

/* La grille respire à deux colonnes dès qu'il y a la place : sept étapes en
   une seule colonne font une page à faire défiler, et le parcours se lit mal
   quand on n'en voit qu'un tiers. En dessous de 720px, une seule colonne. */
.cnpr-insc-parcours__list {
    list-style: none;
    counter-reset: parcours;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 720px) {
    .cnpr-insc-parcours__list { grid-template-columns: minmax(0, 1fr); }
}

.cnpr-insc-parcours__step {
    background: var(--cnpr-fond, #ffffff);
    border: 1px solid rgba(16, 32, 53, .07);
    border-radius: 12px;
    padding: 16px 18px;
}
.cnpr-insc-parcours__step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
/* La pastille numérotée. `aria-hidden` côté PHP : la liste est un <ol>, le
   lecteur d'écran annonce donc déjà le rang, et l'entendre deux fois est du
   bruit. Le chiffre reste visible pour l'œil, qui n'a pas cette information. */
.cnpr-insc .cnpr-insc-parcours__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
}
/* Le chiffre vient de data-num : un contenu généré ne part pas dans le
   presse-papiers, qui ne garde ainsi que le rang du <ol>. */
.cnpr-insc-parcours__num::before { content: attr(data-num); }
.cnpr-insc .cnpr-insc-parcours__step-title {
    font-weight: 700;
    color: var(--cnpr-couleur-titre, #1e3f94);
    line-height: 1.3;
}
.cnpr-insc .cnpr-insc-parcours__step-body {
    color: var(--cnpr-couleur-texte, #16284f);
    font-size: 15px;
    line-height: 1.55;
}
.cnpr-insc .cnpr-insc-parcours__step-body + .cnpr-insc-parcours__step-body {
    margin-top: 8px;
}

/* L'encart famille ne concerne qu'une partie des lecteurs : il se détache de la
   grille sans crier, sur le bleu léger déjà employé par les notices --info
   (l'accent du contrat à 10 %, bordé à 30 %). */
.cnpr-insc-parcours__famille {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 30%, transparent);
}
.cnpr-insc .cnpr-insc-parcours__famille-title {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--cnpr-couleur-titre, #1e3f94);
}

/* L'étape déjà franchie. L'accent clair est celui que la frise du tunnel
   emploie déjà pour `li.is-done` : l'adhérent qui a fait une inscription l'a
   donc déjà rencontré, et lui en inventer un second dirait la même chose dans
   une autre langue. La carte s'éteint doucement (fond très pâle, texte à peine
   atténué) : elle reste lisible, elle cesse seulement d'appeler l'action. */
.cnpr-insc-parcours__step.is-done {
    background: color-mix(in srgb, var(--cnpr-couleur-accent-clair, #5bc5f2) 10%, transparent);
    border-color: color-mix(in srgb, var(--cnpr-couleur-accent-clair, #5bc5f2) 45%, transparent);
}
.cnpr-insc .cnpr-insc-parcours__step.is-done .cnpr-insc-parcours__num {
    background: var(--cnpr-couleur-accent-clair, #5bc5f2);
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc .cnpr-insc-parcours__done {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    /* « Fait » est un état franchi : la couleur de succès du fichier. */
    color: var(--cnpr-insc-succes);
    white-space: nowrap;
}


/* --- La forme « étapes » (cnpr_insc_render_parcours_etapes) ---------------
   Le parcours AFFICHÉ EN ENTIER, là où l'inscription en ligne est un chemin à
   part entière (page Tarifs) : une pastille, le titre en gras, le texte long.
   Pas de cartes : huit cartes de texte à 390 px faisaient un mur. Deux
   colonnes dès qu'il y a la place, lues ligne par ligne ; en une colonne, un
   filet relie les pastilles, pour que la suite se lise comme une suite. */
.cnpr-insc-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 48px;
}
.cnpr-insc-etapes__etape {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.cnpr-insc .cnpr-insc-etapes__etape .cnpr-insc-parcours__num {
    width: 28px;
    height: 28px;
    line-height: 28px;
}
.cnpr-insc .cnpr-insc-etapes__titre {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cnpr-couleur-titre, #1e3f94);
    padding-top: 2px;
}
.cnpr-insc .cnpr-insc-etapes__texte {
    margin-top: 6px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-insc .cnpr-insc-etapes__etape.is-done .cnpr-insc-parcours__num {
    background: var(--cnpr-couleur-accent-clair, #5bc5f2);
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc .cnpr-insc-etapes + .cnpr-insc-parcours__famille { margin-top: 30px; }
@media (max-width: 760px) {
    .cnpr-insc-etapes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    /* Le filet : du bas d'une pastille au haut de la suivante (22px d'écart). */
    .cnpr-insc-etapes__etape:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 34px;
        bottom: -18px;
        width: 2px;
        background: color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 18%, transparent);
    }
}