/* ================================================================
   Ticket.Responsive.css — KEY4REG-7335
   Scope : charge uniquement depuis WbUsrCntrlTicket.ascx.cs,
   sans impact sur les autres pages.
   ================================================================ */

/* Overflow horizontal (scope au controle) */
.InnerTicketPnl {
    overflow-x: hidden;
}

/* ================================================================
   KEY4REG-7335 : bordure des radios/checkbox non cochees trop pale
   (var(--bs-border-color), gris tres clair) - peu lisible sur fond
   blanc. Assombrie via var(--bs-secondary-color) + bordure un peu
   plus epaisse, sans casser le style au focus/checked (deja gere par
   Bootstrap via --bs-primary). Applique avec et sans template
   (Ticket.Responsive.css charge dans les deux cas).
   ================================================================ */
.InnerTicketPnl .form-check-input {
    border-width: 1.5px;
    border-color: var(--bs-secondary-color);
}

/* ================================================================
   KEY4REG-7335 : les validators avec classe "alert" (ex: quota de
   groupe, CssClass="alert alert-danger mt-2 mb-3") se rendent en
   <span> (Display=Dynamic) - inline par defaut, alors que .alert
   (Bootstrap) suppose un element block. Un patch JS (ValidatorUpdate
   Display surcharge, cf WbUsrCntrlTicket.ascx.cs) force display:block
   MAIS seulement quand une validation est reellement declenchee (clic,
   submit) - jamais au simple chargement de page. Resultat observe en
   ScrollSpy (toutes les sections visibles d'emblee, y compris un
   groupe deja invalide au chargement - quota minimum non atteint) :
   boite ecrasee/chevauchant le contenu au-dessus tant qu'aucune
   interaction n'a eu lieu. Regle CSS pure, independante du timing JS.
   ================================================================ */
.InnerTicketPnl span.alert {
    display: block;
}

/* iOS anti-zoom : font-size >= 16px sur tous les champs de saisie */
.InnerTicketPnl input,
.InnerTicketPnl textarea,
.InnerTicketPnl select,
.InnerTicketPnl .CssTextBox,
.InnerTicketPnl .DrpDwn select {
    font-size: 16px;
}

/* Images responsives */
.InnerTicketPnl img {
    max-width: 100%;
    height: auto;
}

/* Modals : largeur responsive */
.InnerTicketPnl .ccontainer {
    width: 100% !important;
    max-width: min(800px, calc(100vw - 32px)) !important;
    box-sizing: border-box;
}
.InnerTicketPnl .ccontainer.ccontainer-lg {
    max-width: min(1000px, calc(100vw - 32px)) !important;
}
.InnerTicketPnl .cbody {
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.InnerTicketPnl .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ================================================================
   pmethodtable — wrapping responsive
   ================================================================ */
@media (max-width: 600px) {
    [id$="pmethodtable"],
    [id$="pmethodtable"] tbody,
    [id$="pmethodtable"] tr { display: block; width: 100%; }
    [id$="pmethodtable"] td {
        display: inline-block; width: 50%;
        box-sizing: border-box; text-align: center; vertical-align: top; padding: 4px;
    }
    [id$="pmethodlinesnd"] td,
    [id$="pmethodlinesnd2"] td { width: 50%; }
    [id$="pmethodlinesnd"] td:empty,
    [id$="pmethodlinesnd2"] td:empty { display: none; }
    [id$="pmethodlinesnd2"] td .badge,
    [id$="pmethodlinesnd2"] asp\.Label { width: auto !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
    [id$="pmethodtable"],
    [id$="pmethodtable"] tbody,
    [id$="pmethodtable"] tr { display: block; width: 100%; }
    [id$="pmethodtable"] td {
        display: inline-block; width: 33.33%;
        box-sizing: border-box; text-align: center; vertical-align: top; padding: 4px;
    }
}

/* ================================================================
   ScrollSpy : rubriques toujours empilees verticalement.
   Corrige les <span class="RubriqueSpan"> display:inline par defaut
   qui debordent horizontalement avec overflow-x:hidden.
   ================================================================ */
.InnerTicketPnl:not(.stepper-mode) .RubriqueSpan { display: block; }
.InnerTicketPnl:not(.stepper-mode) .InnerRubriqueSpan { display: block; }
.InnerTicketPnl:not(.stepper-mode) section[class*="rowRub"] { display: flex; }

/* ================================================================
   Desktop Stepper : labels de rubrique masques (stepper suffit)
   ================================================================ */
@media (min-width: 769px) {
    .InnerTicketPnl.stepper-mode .TblTitreRubriqueV2 { display: none; }
}

/* ================================================================
   Mobile Stepper : header courant (numero + titre + bouton Next)
   Cache par defaut, affiche uniquement sur mobile quand
   #registration a la classe stepper-mobile (ajoutee par JS).
   ================================================================ */
.mobile-step-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.mobile-step-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.mobile-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: var(--bs-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mobile-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.mobile-step-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-step-desc {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-step-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem;
}

/* ================================================================
   Breakpoint tablette : 768px
   ================================================================ */
@media (max-width: 768px) {
    /* ScrollSpy laterale et stepper horizontal : masques sur mobile */
    .form-nav,
    .form-stepper {
        display: none !important;
    }

    /* ScrollSpy grid -> bloc lineaire */
    #registration {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    /* Stepper mobile : header courant visible */
    #registration.stepper-mobile .mobile-step-header {
        display: flex;
    }

    /* Boutons Prev/Next : masques hors mode Stepper (ScrollSpy, no-nav) */
    #ContainerSpanButtons:not(.stepper-mode) .prev,
    #ContainerSpanButtons:not(.stepper-mode) .next {
        display: none !important;
    }

    /* Stepper mobile : labels rubrique visibles (stepper horizontal masque) */
    .InnerTicketPnl.stepper-mode .TblTitreRubriqueV2 {
        display: table-row !important;
    }

    /* Labels a largeur fixe inline */
    .InnerTicketPnl label[style*="width:400px"],
    .InnerTicketPnl label[style*="width: 400px"] {
        width: auto !important;
        max-width: 100%;
    }
}

/* ================================================================
   Breakpoint mobile : 600px
   ================================================================ */
@media (max-width: 600px) {
    .InnerTicketPnl .ccontainer,
    .InnerTicketPnl .ccontainer.ccontainer-lg {
        max-width: calc(100vw - 32px) !important;
        margin-left: auto;
        margin-right: auto;
    }
    .InnerTicketPnl textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .InnerTicketPnl .ConfirmBtns .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ================================================================
   Hebergement — choix hotel/chambre (carte) — KEY4REG-7335 Partie E
   Redesign visuel pur : les <table>/<tr>/<td> generes par le
   code-behind (WbUsrCntrlTicket.ascx.cs) ne sont pas modifies - on
   bascule uniquement leur affichage CSS en carte Bootstrap. Aucune
   classe ajoutee ici qui ne soit pas deja posee en code-behind
   (form-check-input/form-check-label, NoAccommodation,
   NoRoomAvailable, colr1-4, Result, Header, Hotel, Tarifs,
   Accommodations).
   ================================================================ */
.InnerTicketPnl .Accommodations .form-check-input {
    margin-right: .5rem;
}
/* Neutralise le span wrapper eventuellement genere par WebForms
   autour du RadioButton (controlRenderingCompatibilityVersion="3.5"),
   scope precis au panel admin "Aucun hebergement". */
[id$="NoAccommodationPnl"] > span {
    display: contents;
}

.InnerTicketPnl .Accommodations table.Tarifs {
    width: 100%;
    border: none;
}
/* La ligne d'en-tete (Type de chambre / Disponibilite / Prix) n'a
   plus de sens une fois les lignes converties en cartes autonomes -
   chaque carte porte son propre contexte. */
.InnerTicketPnl .Accommodations table.Tarifs tr.Header {
    display: none;
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    background: var(--bs-body-bg);
    transition: border-color .15s ease, background-color .15s ease;
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td {
    display: block;
    border: none;
    padding: 0;
    width: auto;
}
/* Radio + libelle type de chambre : bloc principal, prend l'espace
   disponible. input et label sont mis en flex directement sur la
   cellule (pas de wrapper dedie) pour eviter que le libelle, s'il
   passe a la ligne (texte long), ne se retrouve hors du flux normal
   et ne chevauche la carte suivante. */
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr1 {
    flex: 1 1 auto;
    min-width: 10rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    row-gap: .25rem;
}
/* Neutralise un eventuel span wrapper WebForms autour du
   RadioButton, pour que input/label deviennent directement les
   enfants flex de la cellule. */
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr1 > span {
    display: contents;
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr1 input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr1 label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}
/* Disponibilite / capacite / prix : regroupes a droite sur desktop */
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr2,
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr4,
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr3 {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Largeur fixe + alignement a gauche : le nombre d'icones (1 a 3, selon
   la capacite de la chambre) ne doit pas faire varier la largeur reelle
   de cette colonne d'une ligne a l'autre (meme correctif que la version BO). */
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr4 {
    width: 40px;
    text-align: left;
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr3 {
    font-weight: 600;
}
/* Etat "carte selectionnee" - CSS pur (:has), fallback JS possible
   si le support navigateur cible s'avere insuffisant. */
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result:has(.form-check-input:checked) {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}
.InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result.NoRoomAvailable {
    opacity: .6;
}

/* Formulaire occupants (popup "Veuillez indiquer le nom de
   l'occupant") : en-tete Titre/Nom/Prenom (#TblRoomOccupancyHeader,
   classe GrdVwHeader) reprend un vieux skin legacy (fond degrade
   sombre) - neutralise au profit d'un en-tete clair Bootstrap.
   form-select/form-control deja poses en code-behind sur
   ddlTitle/TxtBxL/TxtBxF. */
[id$="TblRoomOccupancy"] {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
}
[id$="TblRoomOccupancy"] th,
[id$="TblRoomOccupancy"] td {
    border: none;
    padding: .5rem .75rem;
}
[id$="TblRoomOccupancy"] .GrdVwHeader,
[id$="TblRoomOccupancy"] .GrdVwHeader th {
    background: var(--bs-tertiary-bg) !important;
    background-image: none !important;
    color: var(--bs-body-color) !important;
    font-weight: 600;
}
/* La popup occupants (PnlRoom, ModalPopupExtender) est un sibling de .InnerTicketPnl
   dans le markup (pas un descendant) - son conteneur ccontainer garde donc sa largeur
   fixe 800px codee en dur (WbUsrCntrlTicket.ascx L693), jamais neutralisee par la regle
   generale .InnerTicketPnl .ccontainer plus bas dans ce fichier. Correctif dedie. */
[id$="PnlRoom"] .ccontainer {
    width: 100% !important;
    max-width: min(800px, calc(100vw - 32px)) !important;
    box-sizing: border-box;
}
[id$="PnlRoom"] .cbody {
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
[id$="PnlRoom"] .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Meme constat, 2 autres popups siblings de .InnerTicketPnl avec une largeur
   fixe codee en dur jamais neutralisee : OrderSummary (popup "Veuillez
   confirmer votre choix", 800px) et PaymentMethodPnl (popup "Moyen de
   paiement", 816px). */
[id$="OrderSummary"] .ccontainer,
[id$="PaymentMethodPnl"] .ccontainer {
    width: 100% !important;
    max-width: min(800px, calc(100vw - 32px)) !important;
    box-sizing: border-box;
}
[id$="OrderSummary"] .cbody,
[id$="PaymentMethodPnl"] .cbody {
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
[id$="OrderSummary"] .table-responsive,
[id$="PaymentMethodPnl"] .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Meme constat, popup "Choix de groupe" (GroupRegistrationPnl, 800px). */
[id$="GroupRegistrationPnl"] .ccontainer {
    width: 100% !important;
    max-width: min(800px, calc(100vw - 32px)) !important;
    box-sizing: border-box;
}
[id$="GroupRegistrationPnl"] .cbody {
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* ================================================================
   Responsive : hebergement (carte hotel + formulaire occupants)
   ================================================================ */
@media (max-width: 767.98px) {
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result {
        flex-direction: column;
        align-items: stretch;
    }
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr1 {
        min-width: 0;
    }
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr2,
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr4,
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr3 {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr2::before {
        content: attr(data-label-availability) ' ';
        font-weight: 600;
    }
    .InnerTicketPnl .Accommodations table.Tarifs tbody tr.Result td.colr3::before {
        content: attr(data-label-price) ' ';
        font-weight: 400;
    }

    [id$="TblRoomOccupancy"] [id$="TblRoomOccupancyHeader"] {
        display: none;
    }
    [id$="TblRoomOccupancy"] tr:not([id$="TblRoomOccupancyHeader"]) {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .5rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    [id$="TblRoomOccupancy"] td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
    }
    [id$="TblRoomOccupancy"] td::before {
        content: attr(data-label);
        font-weight: 600;
        flex: 0 0 auto;
    }
}

/* ================================================================
   Hebergement — calendrier de recherche de dates — KEY4REG-7335
   Partie E.3. Redesign visuel pur (CssClass form-control deja pose
   en code-behind sur les RadDatePicker Telerik). Limite connue et
   documentee : ce composant Telerik 2012 n'expose pas d'ARIA/support
   clavier moderne - le CSS ameliore l'apparence et la disposition
   responsive, PAS l'accessibilite reelle. Ne jamais presenter cette
   zone comme accessible dans un changelog/doc utilisateur.
   ================================================================ */
.form-control-item {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    [id$="LBL_ACC_DATE_DEBUT"],
    [id$="LBL_ACC_DATE_FIN"] {
        display: block;
        margin-top: .5rem;
    }
    [id$="ACCOMMODATION_SEARCH"] {
        display: block;
        width: 100%;
        margin-top: .75rem;
    }
}

/* ================================================================
   Hebergement — tableau recap reservation (GrdVwAcc / Organisms.DataTable)
   KEY4REG-7335 Partie E. Filet de securite independant du wrapping
   interne du composant (Responsive=true deja pose en code-behind) :
   AccommodationsReservations est une CssClass posee en code-behind,
   fiable independamment de tout probleme de prefixage d'ID WebForms
   ou de scope .InnerTicketPnl.
   ================================================================ */
/* Technique dediee "tableau HTML imbrique sans largeur explicite" : une
   cellule de table parente sans width se redimensionne pour accueillir
   son contenu, peu importe l'overflow-x pose ici - rien ne "declenche"
   le scroll puisque rien ne force la largeur a se limiter a l'ecran.
   width:0 + min-width:100% casse cette propagation de largeur intrinseque. */
.AccommodationsReservations,
.Accommodations {
    display: block;
    width: 0;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.AccommodationsReservations table {
    width: 100%;
}

/* ================================================================
   Filtres produits (tblFiltersReg) — KEY4REG-7335. Fo_Spec.css ne
   stylise cette barre de filtres (disponibilite/date/prix/duree/mot-
   cle) qu'en dessous de 480px (empilement en blocs) - au-dessus,
   c'etait une simple suite de <span> inline sans mise en forme.
   CssClass form-check-input/form-select/form-control deja posees en
   code-behind (istemplateFront) sur cbxFull/rbtnList/tbx ci-dessus.
   ================================================================ */
@media (min-width: 481px) {
    .tblFiltersReg {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: .75rem 1.25rem;
        padding: .75rem 0;
    }
    .tblFiltersReg .hideFullCell,
    .tblFiltersReg .datecell,
    .tblFiltersReg .durationcell,
    .tblFiltersReg .pricecell,
    .tblFiltersReg .txtcell,
    .tblFiltersReg .searchcellFiltering {
        display: block;
    }
    .tblFiltersReg .hideFullCell {
        display: flex;
        align-items: center;
        gap: .375rem;
    }
    .tblFiltersReg .pricecell {
        min-width: 220px;
    }
    .tblFiltersReg .txtcell input {
        min-width: 180px;
    }
}

/* ================================================================
   Spinner de chargement ("Rechercher les disponibilites", et plus
   generalement toute action $find('loading').show()/hide()) —
   KEY4REG-7335. Le mecanisme JS (ModalPopupExtender BehaviorID="loading",
   Register.aspx) est deja cable sur BtnSearchHotel, mais le CSS qui lui
   donne une apparence visuelle (.NewLoading .loader) n'existait que dans
   le theme back-office (App_Themes/Bo/Bo.css) — jamais en front-office.
   Resultat : la popup se declenchait bien mais restait invisible/vide.
   ================================================================ */
.modalBackgroundNewLoading {
    background-color: rgba(var(--bs-body-bg-rgb), 0.6);
}

@keyframes k4-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.NewLoading .loader {
    position: fixed;
    top: 42%;
    left: 47.5%;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0;
    font-size: 0;
    border-radius: 50%;
    border: 5px solid var(--bs-secondary-bg);
    border-top-color: var(--bs-primary);
    animation: k4-spin 0.9s infinite linear;
}

/* ================================================================
   Recap panier avant paiement (OrderSummaryTable, popup "Summary")
   KEY4REG-7335. Meme constat que TblRoomOccupancy plus haut : la
   classe GrdVwHeader reprend le vieux skin legacy (image de fond
   degrade noir, App_Themes/fo_Master_Default/Default.css) - neutralise
   au profit d'un en-tete clair Bootstrap. Le tableau lui-meme (asp:Table
   Border="1", cellules TableCell brutes generees par AddSummaryRow) n'a
   par ailleurs aucune mise en forme dediee en front-office.
   ================================================================ */
[id$="OrderSummaryTable"] {
    border-collapse: collapse;
}
[id$="OrderSummaryTable"] .GrdVwHeader,
[id$="OrderSummaryTable"] .GrdVwHeader th {
    background-image: none !important;
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    font-weight: 600;
    height: auto;
}
[id$="OrderSummaryTable"] th,
[id$="OrderSummaryTable"] td {
    border: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
}
[id$="OrderSummaryTable"] tbody tr:nth-of-type(even) {
    background-color: var(--bs-tertiary-bg);
}

/* Champ code de reduction + recap Total HT/TVA/TTC : hooks CSS deja
   poses en markup (tbxPnlReductionCode, tdtrHT/tdtrTVA/tdLblTotalTTC...)
   mais jamais stylises en front-office. */
.tbxPnlReductionCode {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .375rem .75rem;
}
.trSummaryPaymentMeans .tdLine {
    border-bottom-color: var(--bs-border-color) !important;
}

@media (max-width: 767.98px) {
    [id$="OrderSummaryTable"] thead {
        display: none;
    }
    [id$="OrderSummaryTable"] tbody tr {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .5rem 0;
    }
    [id$="OrderSummaryTable"] tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        border: none;
        padding: .125rem 0;
    }
    [id$="OrderSummaryTable"] tbody tr td:first-child {
        font-weight: 600;
        justify-content: flex-start;
    }
    [id$="OrderSummaryTable"] tbody tr td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        flex: 0 0 auto;
    }
    [id$="OrderSummaryTable"] tbody tr:not(:last-child) {
        border-bottom: 1px solid var(--bs-border-color);
    }

    .tdSummaryPaymentMeans {
        text-align: left !important;
    }
    .trSummaryPaymentMeans {
        width: 100%;
    }
}

/* ================================================================
   Selecteur de moyen de paiement (pmethodtable) — KEY4REG-7335.
   PaymentMethod1..10/PaymentMethodNone (ui:Button, deja Bootstrap)
   recoivent en code-behind la classe PaymentMethodImg (etat repos) ou
   PaymentMethodImgSelected (etat choisi) - ces 2 classes n'existaient
   que dans les themes back-office (App_Themes/Bo*), jamais en front :
   aucune distinction visuelle du moyen de paiement selectionne pour
   un vrai inscrit. Bordure transparente en repos (evite un saut de
   layout au clic) puis coloree une fois selectionne.
   ================================================================ */
[id$="pmethodtable"] .PaymentMethodImg {
    border: 3px solid transparent;
}
[id$="pmethodtable"] .PaymentMethodImgSelected {
    border: 3px solid var(--bs-primary);
}

/* ================================================================
   Cartes produit "e-commerce" (rubriques ProductFiltered) — KEY4REG-7335.
   La mise en page (Fo_Spec.css, deja complete et responsive <=480px)
   n'est pas modifiee ici - seules les couleurs codees en dur (gris/rouge)
   sont alignees sur la couleur primaire du theme, comme le reste du
   redesign de ce ticket.
   ================================================================ */
.InnerTicketPnl .ProductFiltered .BookButton,
.InnerTicketPnl .ProductFiltered .BookedButton {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}
.InnerTicketPnl .ProductFiltered .BookFullButton {
    background-color: var(--bs-danger);
    color: var(--bs-white);
}

/* ================================================================
   Champ verrouille pre-rempli (personnalisation client AFPPE) —
   KEY4REG-7335. Bootstrap n'a pas de classe "form-select-plaintext"
   (existe seulement .form-control-plaintext, pour les <input>) -
   equivalent dedie ici, meme apparence (bordure/fond transparents).
   ================================================================ */
.InnerTicketPnl select.plaintext-locked {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    color: var(--bs-body-color);
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

/* ================================================================
   Choix de profil (Register.aspx, UpdPnlProfile/TcktProfile) —
   KEY4REG-7335. CheckBoxList/RadioButtonList natifs, jamais stylises
   (aucune regle dans tout le theme front). RepeatLayout="UnorderedList"
   pose en markup (remplace le rendu <table> par defaut). Ecran affiche
   en front-office (TcktFront masque pendant ce temps), pas en admin.
   DOM reel verifie via l'inspecteur : <li><input/><label>texte</label></li>,
   sans span intermediaire. Grid (pas flex) sur le <li> : un flex direct
   ne centrait pas correctement le glyphe natif du radio/checkbox
   (constate empiriquement) - la marge native (asymetrique selon le
   navigateur) decale le glyphe dans sa propre boite-marge, d'ou le
   margin:0 explicite sur l'input.
   Note : ce panneau partage l'ID/la classe "registration" avec la
   grille ScrollSpy/Stepper du ticket (jamais visibles simultanement,
   donc pas de collision DOM) - les regles #registration ci-dessus
   (display:block/grid-template-columns en mobile) restent sans effet
   ici (grid-template-columns est un no-op hors display:grid).
   ================================================================ */
[id$="ProfileChckbx"],
[id$="ProfileRdbtn"] {
    list-style: none !important;
    padding: 0;
    margin: 0;
}
[id$="ProfileChckbx"] li,
[id$="ProfileRdbtn"] li {
    list-style: none !important;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .5rem;
    padding: .625rem 0;
}
[id$="ProfileChckbx"] li input,
[id$="ProfileRdbtn"] li input {
    margin: 0;
    border-width: 1.5px;
    border-color: var(--bs-secondary-color);
    /* cible tactile confortable sur mobile (WCAG 2.5.5, ~24px mini) */
    width: 1.25rem;
    height: 1.25rem;
}
[id$="ProfileChckbx"] li label,
[id$="ProfileRdbtn"] li label {
    cursor: pointer;
    /* KEY4REG-7335 : line-height herite (souvent 1.5) ajoute un
       "half-leading" au-dessus/en-dessous du texte - la boite de la
       ligne est bien centree par align-items, mais le texte au sein
       de cette boite plus grande que necessaire. line-height:1 fait
       correspondre boite et texte, pour un centrage visuel exact. */
    line-height: 1;
}

/* ================================================================
   Popup "Choix de groupe" (recherche de groupe, GrdVwGroupSearch) —
   KEY4REG-7335. Accessible en front-office (inscription de type
   "groupe" sans groupe pre-selectionne). En-tete GrdVwHeader avec le
   meme vieux skin legacy (degrade noir) que TblRoomOccupancy/
   OrderSummaryTable, neutralise ici aussi. Ligne cliquable rendue
   accessible au clavier en code-behind (tabindex/role/onkeypress) -
   indicateur de focus visuel ajoute ici.
   ================================================================ */
[id$="GrdVwGroupSearch"] .GrdVwHeader,
[id$="GrdVwGroupSearch"] .GrdVwHeader th {
    background-image: none !important;
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    font-weight: 600;
    height: auto;
}
[id$="GrdVwGroupSearch"] tr[tabindex]:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

@media (max-width: 767.98px) {
    [id$="GrdVwGroupSearch"] thead {
        display: none;
    }
    [id$="GrdVwGroupSearch"] tbody tr {
        display: flex;
        flex-direction: column;
        gap: .125rem;
        padding: .5rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    [id$="GrdVwGroupSearch"] tbody tr td {
        border: none;
        padding: .125rem 0;
    }
}

/* ================================================================
   Dropdownlist (LISTE) obligatoire non renseignee — KEY4REG-7335.
   Le CompareValidator associe a la droplist reste attache a un
   ValidatorCalloutExtender uniquement pour beneficier de son
   HighlightCssClass="highlighValidator" (bordure + fond rouge sur le
   form-select, meme traitement que les autres champs). La bulle
   ("popupTable") elle-meme fait doublon avec ce surlignage et est
   masquee ici, sans toucher au surlignage.
   KEY4REG-7335 : les quotas min/max de checkbox (ex: section Inscription)
   utilisaient aussi un ValidatorCalloutExtender - remplace depuis par
   Display="Dynamic" + classe k4-field-error (meme mecanisme natif que
   les autres champs obligatoires), donc plus de bulle a exclure ici.
   ================================================================ */
[id^="VldtrCallout_"][id$="_popupTable"] {
    display: none !important;
}