/*
 * Le règlement groupé de la famille.
 *
 * La sélection des dossiers à régler ensemble, leur détail, les écrans
 * sans formulaire (indisponible, bloqué), la zone des appoints, le moyen
 * principal en tuiles, le total de la famille, le bouton fermé.
 *
 * Écrans : [cnpr_reglement_groupe].
 *
 * 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.
 */

/* ==========================================================================
   Group règlement screen — flat single-column redesign (all rules scoped
   under .cnpr-insc-groupe-reglement so nothing leaks to the per-dossier
   règlement page, which reuses .cnpr-insc-paymethod/.cnpr-insc-radio/
   .cnpr-insc-pay-schedule). Goal: one visual surface (the page's white
   card), not boxes-in-boxes, and no pale blue.
   ========================================================================== */

/* The theme wraps every .page-content form in its own bordered/shadowed
   panel; this screen already sits on a white article.card, so that second
   panel is redundant — kill it for this form only (0,2,0 beats the theme's
   0,1,0 `.page-content form`). */
.page-content form.cnpr-insc-groupe-reglement {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: 680px;
    display: grid;
    gap: 14px;
}

/* La liste des enfants est une SÉLECTION : une case par dossier, le nom, une
   pastille (reste à régler, ou le motif pour un dossier non cochable), et sous
   chaque dossier cochable le détail de ce qu'il paie. Les règles vivent sous
   DEUX racines, le formulaire (.cnpr-insc-groupe-reglement) et l'écran sans
   formulaire (.cnpr-insc-groupe-indisponible), qui rendent la même ligne par
   la même fonction PHP : un style posé d'un seul côté aurait fait lire deux
   listes différentes à la même famille selon la page. Le groupe a son propre
   pas (8px) pour ne pas hériter du pas de 14px du formulaire. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__title,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfants__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--cnpr-couleur-texte, #16284f);
}
/* La consigne sous le titre : (0,2,0) pour battre le `p { margin: 0 }` du
   thème, comme .cnpr-insc-groupe-etat plus haut. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__intro {
    margin: 0 0 6px;
    font-size: 14px;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfants {
    display: grid;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant {
    display: grid;
    gap: 6px;
    border: 0;
    border-top: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 0;
    padding: 8px 0 0;
    margin: 0;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant:first-child,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant:first-child {
    border-top: 0;
    padding-top: 0;
}
/* La tête de ligne est un <label> dans le formulaire (cliquer le nom coche) et
   un <span> ailleurs : même géométrie. (0,2,0) bat le reset `.cnpr-insc-form
   label` (0,1,1) du thème, qui poserait un display:block. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__head,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__head { cursor: default; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__name,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__name {
    font-weight: 700;
    font-size: 16px;
    color: var(--cnpr-couleur-texte, #16284f);
}
/* "Reste à régler" as a compact chip instead of a muted paragraph ; le motif
   d'un dossier non cochable prend la même place, en gris. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__reste,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__reste,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__motif,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__motif {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__reste,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__reste {
    background: color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 8%, transparent);
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__motif,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__motif {
    background: color-mix(in srgb, var(--cnpr-couleur-texte-doux, #4c5f80) 10%, transparent);
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    white-space: normal;
    text-align: right;
}
/* `--hors` : non cochable. La ligne reste lisible (le motif est ce qu'elle a
   à dire) mais s'efface derrière les dossiers qui comptent. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant.--hors,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant.--hors { opacity: 0.65; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant.--hors .cnpr-insc-groupe-enfant__head { cursor: not-allowed; }
/* `--decoche` : cochable mais décoché, posé par le PHP au rendu et par le JS
   en direct. Le nom reste net (c'est ce qu'on recoche), le montant et le détail
   s'estompent : ils ne comptent plus dans le total. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant.--decoche .cnpr-insc-groupe-enfant__reste,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant.--decoche .cnpr-insc-groupe-enfant__detail {
    opacity: 0.45;
    text-decoration: line-through;
}
/* Le détail : une sous-liste alignée sous le nom (28px = case + espace),
   libellé à gauche, montant à droite en chiffres tabulaires. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__detail,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__detail {
    list-style: none;
    margin: 0 0 0 28px;
    padding: 0;
    display: grid;
    gap: 2px;
}
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__detail { margin-left: 0; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__ligne,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__ligne {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__ligne-montant,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__ligne-montant {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Ce qui se retranche (remise, déjà versé) se lit en vert, comme sur le
   récapitulatif du dossier seul (.cnpr-insc-remise / .cnpr-insc-paiement). */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__ligne--remise .cnpr-insc-groupe-enfant__ligne-montant,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__ligne--verse .cnpr-insc-groupe-enfant__ligne-montant,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__ligne--remise .cnpr-insc-groupe-enfant__ligne-montant,
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-enfant__ligne--verse .cnpr-insc-groupe-enfant__ligne-montant {
    color: var(--cnpr-insc-succes);
    font-weight: 600;
}
/* Le rappel du plancher, révélé par le JS sous deux cases cochées. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__min { margin: 0; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__min[hidden] { display: none; }
/* L'écran sans formulaire : même largeur et même grille que le formulaire. */
/* LE RETOUR VERS « MES ADHÉRENTS », commun aux trois branches de l'écran.
   Même largeur et même centrage que la colonne pour que la flèche s'aligne
   sur le bord gauche du CONTENU, pas sur celui de la carte du thème. */
.cnpr-insc-groupe-retour {
    /* `width` ET `max-width`, et c'est `width` qui fait le travail. Mesuré au
       navigateur : sans elle, le lien se retrouvait centré au milieu de la
       carte. Le conteneur qui reçoit la sortie du shortcode dimensionne ses
       enfants à leur CONTENU ; ce `<p>` ne faisait donc que la largeur de sa
       flèche, et `margin: 0 auto` centrait consciencieusement cette petite
       boîte-là. Une fois la colonne occupée sur toute sa largeur, le texte
       retrouve le bord gauche — celui du titre « Vos dossiers de la saison »
       juste en dessous, qui est là où une flèche de retour se lit. */
    width: 100%;
    max-width: 680px;
    margin: 0 auto 14px;
    text-align: left;
}
/* LE THÈME GAGNAIT CE CENTRAGE, ET IL FAUT LE DIRE EN POIDS. `.page-content p`
   (cnpr-modern/style.css) pose `margin: 0` en (0,1,1) — une classe et un
   élément — ce qui bat le `margin: 0 auto` ci-dessus en (0,1,0). Résultat
   observé au navigateur : la boîte faisait bien ses 680 px, mais recollée à
   GAUCHE de la carte pendant que la colonne, elle, restait centrée — la flèche
   se retrouvait seule à un endroit où rien d'autre ne commence.
   On requalifie en (0,2,0), deux classes contre une classe et un élément,
   exactement comme `.page-content form.cnpr-insc-groupe-reglement` plus haut
   neutralise le panneau du thème. */
.page-content .cnpr-insc-groupe-retour {
    margin: 0 auto 14px;
}
/* L'écran sans formulaire : même largeur et même grille que le formulaire —
   ET LE MÊME CENTRAGE, qui manquait. Le formulaire est centré par le thème
   (`.page-content form` porte déjà `margin: 0 auto`) ; cet écran-ci est un
   `<div>`, il n'héritait donc de rien et se collait à gauche d'une carte
   large, avec un vide à droite. Le centrage se dit ici, explicitement, plutôt
   que de dépendre d'une règle du thème qui ne vise que les formulaires. */
.cnpr-insc-groupe-indisponible {
    max-width: 680px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-indisponible__raison a {
    display: inline-block;
    margin-left: 4px;
    font-weight: 600;
}
/* L'écran BLOQUÉ (cnpr_insc_render_group_reglement_bloque()) : le motif, puis
   ce qui reste payable en dehors de l'engagement, un lien par dossier — la
   liste des dossiers suit, rendue par la même fonction que l'écran sans
   formulaire, sous la même racine. */
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-bloque__motif { margin: 0; }
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-bloque__payables {
    margin: 0;
    font-size: 14px;
}
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-bloque__liens {
    list-style: none;
    margin: -8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.cnpr-insc-groupe-indisponible .cnpr-insc-groupe-bloque__liens a { font-weight: 600; }

/* T6 (PR 3) — LA ZONE UNIQUE : une section à part entière, au même rang que le
   moyen principal, parce qu'elle parle du même objet (le règlement) et non d'un
   enfant. Plus de <details> : ce qui se replie se rate, et ces quatre cases
   sont la moitié de la décision que l'écran demande. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* un fieldset ne rétrécit pas tout seul dans une grille */
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints__title {
    padding: 0;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints > .cnpr-insc-muted {
    margin: 0 0 8px;
    font-size: 13px;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints__grid {
    margin-top: 4px;
}
/* Sur l'écran famille il n'y a pas de case à cocher devant le libellé : le
   retrait de 30px du tunnel n'a rien à aligner et laisserait le champ flotter.
   (0,2,0) contre (0,1,0) : cette règle l'emporte sur la classe seule. */
.cnpr-insc-groupe-reglement .cnpr-insc-paydetail {
    margin-left: 0;
}
/* Le dépassement se dit AVANT l'envoi, au même endroit que la saisie. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints__over {
    margin: 8px 0 0;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints__over[hidden] { display: none; }
/* La raison d'un moyen grisé, sous son libellé — jamais un gris muet. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-pay-blocked {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: 12px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-pay-blocked[hidden] { display: none; }
/* Compact rows: reuse .cnpr-insc-paymethod's flex layout (label left, amount
   right) but drop its bordered-card look — this is a dense list, not cards. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints .cnpr-insc-paymethod {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 5px 0;
    margin: 0;
}
/* The whole row is ONE <label>, so the row's own space-between has a single
   child: the label itself must stretch and push the amount to the column's
   right edge, or the inputs land ragged after each label's natural width. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints .cnpr-insc-radio {
    flex: 1;
    justify-content: space-between;
}
@media (min-width: 600px) {
    .cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
    }
}

/* Main method: borderless section, options as a tile grid instead of a
   plain radio list. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal__title {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    margin: 0 0 2px;
    font-weight: 700;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-radio {
    display: block;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    background: var(--cnpr-fond, #ffffff);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-radio:has(input:checked) {
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    background: color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 6%, transparent);
}
@media (min-width: 600px) {
    .cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal {
        grid-template-columns: 1fr 1fr;
    }
}

/* Group règlement: the family summary sitting just above "Confirmer" — the
   amount to actually pay is the decision, so it leads. Navy fill (no more
   pale blue) so it reads as the one decisive panel on the screen.
   L'aplat est la couleur des titres ; le blanc et ses voiles translucides qui
   s'y posent restent en dur (texte sur aplat foncé, voir l'en-tête). */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #ffffff;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total__main { font-size: 18px; font-weight: 700; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total__main strong { color: #ffffff; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total .cnpr-insc-muted {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}
/* The chèque-3x schedule, inset so it stays legible on the navy fill. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total .cnpr-insc-pay-schedule {
    flex-basis: auto;
    margin: 6px 0 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total .cnpr-insc-pay-schedule[hidden] { display: none; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total .cnpr-insc-pay-schedule li { color: rgba(255, 255, 255, 0.9); }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total .cnpr-insc-pay-schedule strong { color: #ffffff; }

.cnpr-insc-groupe-reglement .btn.btn-primary {
    width: 100%;
    margin: 0 0 24px;
}
/* UN BOUTON FERMÉ DOIT EN AVOIR L'AIR, et celui-ci n'en avait pas l'air.

   Le JS pose `disabled` ET `.is-disabled` dès que moins de deux dossiers sont
   cochés, ou que les appoints dépassent le total (cnpr-tunnel.js). Le bouton
   était donc bien MORT — un clic ne produisait rien — mais il gardait
   l'apparence pleine d'un bouton vivant, et l'adhérent cliquait dans le vide
   sans que rien ne le lui dise. Constaté au navigateur sur le site local, pas
   par un test : aucun test de markup ne regarde une opacité.

   POURQUOI LES RÈGLES EXISTANTES NE L'ATTEIGNAIENT PAS. Les trois grisages du
   fichier sont scopés sous `.cnpr-insc` ou `.cnpr-insc-actions`. Cet écran n'a
   ni l'un ni l'autre : son formulaire porte `cnpr-insc-groupe-reglement`, un
   NOM DE CLASSE DISTINCT que le sélecteur `.cnpr-insc` ne matche pas — c'est
   le piège du préfixe commun, deux classes qui se ressemblent ne sont pas la
   même. Le shortcode du règlement groupé est d'ailleurs le seul écran du front
   qui n'enveloppe pas sa sortie dans `<div class="cnpr-insc">` ; on répare ici
   le symptôme qui coûte, sans lui ajouter un conteneur dont tout le reste du
   bloc se passe très bien.

   Qualifié sur `:disabled` ET sur `.is-disabled` — (0,2,0) et (0,3,0) — comme
   la règle générique de la ligne 344 : le JS pose les deux, mais un bouton
   rendu fermé par le SERVEUR ne porterait que le premier. Placé après
   `.btn.btn-primary` ci-dessus, de même poids (0,3,0) : c'est l'ordre qui
   tranche, et il est dans le bon sens. */
.cnpr-insc-groupe-reglement .btn:disabled,
.cnpr-insc-groupe-reglement .btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}