/*
 * 2S Formations — Account UX 1.1
 * Couche commune Espace client / authentification.
 */

:root {
    --s2ux-navy: #10253f;
    --s2ux-cyan: #009fe3;
    --s2ux-orange: #f1841a;
    --s2ux-soft: #f5f8fb;
    --s2ux-border: #d9e4ec;
    --s2ux-muted: #607286;
    --s2ux-shadow: 0 10px 30px rgba(16,37,63,.07);
}

/* Header compte --------------------------------------------------------- */

.s2-account-slot {
    position: relative;
    z-index: 80;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 8px;
}

.s2-account-login,
.s2-account-menu > summary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--s2ux-border);
    border-radius: 10px;
    background: #fff;
    color: var(--s2ux-navy) !important;
    text-decoration: none !important;
    font-weight: 800;
    cursor: pointer;
}

.s2-account-login:hover,
.s2-account-login:focus-visible,
.s2-account-menu > summary:hover,
.s2-account-menu > summary:focus-visible {
    border-color: var(--s2ux-cyan);
    background: #f5fbfe;
    color: var(--s2ux-cyan) !important;
    outline: 0;
}

.s2-account-user-icon {
    display: inline-flex;
    width: 19px;
    height: 19px;
    color: var(--s2ux-cyan);
}

.s2-account-user-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.s2-account-menu {
    position: relative;
}

.s2-account-menu > summary {
    list-style: none;
}

.s2-account-menu > summary::-webkit-details-marker {
    display: none;
}

.s2-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e9f8fe;
    color: var(--s2ux-cyan);
    font-size: 12px;
    font-weight: 900;
}

.s2-account-caret {
    color: #708397;
    font-size: 10px;
}

.s2-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 235px;
    padding: 8px;
    border: 1px solid var(--s2ux-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(16,37,63,.15);
}

.s2-account-dropdown-head {
    margin-bottom: 5px;
    padding: 8px 9px 10px;
    border-bottom: 1px solid #e8eef2;
}

.s2-account-dropdown-head strong,
.s2-account-dropdown-head small {
    display: block;
}

.s2-account-dropdown-head strong {
    color: var(--s2ux-navy);
    font-size: 14px;
}

.s2-account-dropdown-head small {
    margin-top: 2px;
    color: #718398;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.s2-account-dropdown a,
.s2-account-dropdown button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--s2ux-navy) !important;
    text-align: left;
    text-decoration: none !important;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.s2-account-dropdown a:hover,
.s2-account-dropdown button:hover {
    background: #f2f8fb;
    color: var(--s2ux-cyan) !important;
}

.s2-account-dropdown form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid #e8eef2;
}


/* Header 1.1.1 — menu complet sur une seule ligne ---------------------- */

.s2-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
}

.s2-header-actions .s2-account-slot {
    margin-left: 0 !important;
}

.s2-header-actions .header-cta {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.s2-header-mainrow {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.s2-header-mainrow > * {
    min-width: 0;
}

@media (min-width: 901px) and (max-width: 1320px) {
    .site-header nav ul,
    .site-header .menu,
    .site-header .mod-menu {
        column-gap: clamp(6px, .8vw, 14px) !important;
        gap: clamp(6px, .8vw, 14px) !important;
    }

    .site-header nav a:not(.header-cta) {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .s2-header-actions {
        gap: 6px !important;
        margin-left: 4px !important;
    }

    .s2-header-actions .s2-account-login,
    .s2-header-actions .s2-account-menu > summary {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .s2-header-actions .header-cta {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 1040px) and (min-width: 901px) {
    .s2-account-name {
        display: none;
    }

    .s2-account-menu > summary {
        gap: 5px;
    }
}

/* Œil mot de passe ------------------------------------------------------ */

.s2-password-parent {
    position: relative !important;
}

.s2-password-parent input[type="password"],
.s2-password-parent input[data-s2-password-visible="1"] {
    padding-right: 52px !important;
}

button.s2-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    z-index: 5 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    color: #5d7185 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

button.s2-password-toggle:hover,
button.s2-password-toggle:focus-visible {
    background: #eef8fd !important;
    color: var(--s2ux-cyan) !important;
    outline: 0 !important;
}

button.s2-password-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Certains layouts Joomla rendent un bouton de visualisation natif dont
 * l'icône dépend du jeu d'icônes du template. La classe S2 remplace
 * visuellement ce bouton : plus de carré orange vide.
 */
.input-group > button.s2-password-toggle,
.input-group .s2-password-toggle {
    border-left: 0 !important;
}


/* Espace client 1.1.2 — largeur commune ------------------------------- */

:root {
    --s2ux-client-max: 1165px;
    --s2ux-client-gutter: 30px;
}

/*
 * Une seule géométrie pour Réservations, Billets et Compte.
 * Les wrappers reçoivent s2-client-page-width via accountux.js.
 */
.s2-client-page-width {
    box-sizing: border-box !important;
    width: calc(100% - (2 * var(--s2ux-client-gutter))) !important;
    max-width: var(--s2ux-client-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Certains layouts Joomla ont leur propre max-width interne.
 * On neutralise uniquement ces limites dans l'espace client.
 */
.s2-client-page-width .com-users-profile,
.s2-client-page-width .com-users-profile__edit,
.s2-client-page-width .profile-edit,
.s2-client-page-width .profile,
.s2-client-page-width fieldset,
.s2-client-page-width .control-group,
.s2-client-page-width .controls {
    max-width: none;
}

@media (max-width: 900px) {
    :root {
        --s2ux-client-gutter: 18px;
    }
}

@media (max-width: 520px) {
    :root {
        --s2ux-client-gutter: 12px;
    }
}


/* Espace client 1.1.3 — largeur Réservations alignée ------------------- */

[data-s2-bookings-client],
[data-s2-bookings-client] > *,
[data-s2-bookings-client] .s2-bookings-client,
[data-s2-bookings-client] .s2-bookings-wrap,
[data-s2-bookings-client] .s2-bookings-container,
[data-s2-bookings-client] .s2-bookings-content,
[data-s2-bookings-client] .s2-bookings-list,
[data-s2-bookings-client] .s2-bookings-sections,
.s2-bookings-width-fix {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[data-s2-bookings-client] .s2-client-unified-hero,
[data-s2-bookings-client] .s2-bookings-hero,
[data-s2-bookings-client] .s2-bookings-toolbar,
[data-s2-bookings-client] .s2-bookings-filter,
[data-s2-bookings-client] .s2-bookings-filter-panel,
[data-s2-bookings-client] .s2-booking-card,
[data-s2-bookings-client] section {
    width: 100% !important;
    max-width: none !important;
}

[data-s2-bookings-client] .container,
[data-s2-bookings-client] .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ligne commune Espace client ------------------------------------------ */

.s2-client-unified-hero,
.s2-tickets-hero,
.s2-ticket-detail__hero {
    position: relative;
    overflow: hidden;
    margin: 28px 0 24px !important;
    padding: 30px 34px 28px !important;
    border: 1px solid var(--s2ux-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,#fff 0%,#eef8fd 100%) !important;
    box-shadow: none !important;
}

.s2-client-unified-hero::after,
.s2-tickets-hero::after,
.s2-ticket-detail__hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--s2ux-cyan) 0 50%,
        var(--s2ux-orange) 50% 100%
    );
}

.s2-client-unified-hero .eyebrow,
.s2-client-unified-hero [class*="eyebrow"],
.s2-tickets-hero__eyebrow,
.s2-ticket-detail__eyebrow {
    margin-bottom: 8px !important;
    color: var(--s2ux-cyan) !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.s2-client-unified-hero h1,
.s2-tickets-hero h1,
.s2-ticket-detail__hero h1 {
    margin: 0 0 8px !important;
    color: var(--s2ux-navy) !important;
    font-size: clamp(2rem,4vw,3rem) !important;
    line-height: 1.05 !important;
}

.s2-client-unified-hero p,
.s2-tickets-hero p {
    max-width: 760px;
    margin: 0 !important;
    color: var(--s2ux-muted) !important;
    font-size: 1rem !important;
}

/* Cartes / filtres : même langage visuel ------------------------------- */

.s2-booking-card,
.s2-ticket-card,
.s2-ticket-detail__notice,
.s2-client-card {
    border-radius: 16px !important;
}

.s2-booking-card,
.s2-ticket-card {
    border-color: var(--s2ux-border) !important;
    box-shadow: var(--s2ux-shadow) !important;
}

.s2-bookings-filter-toggle,
.s2-tickets-filter-toggle,
.s2-booking-card .btn,
.s2-ticket-card .btn,
.s2-ticket-detail .btn {
    border-radius: 9px !important;
    font-weight: 800 !important;
}

.s2-bookings-toolbar,
.s2-tickets-toolbar {
    margin-bottom: 20px !important;
}

.s2-client-count-note {
    color: var(--s2ux-muted);
    font-size: .94rem;
}

/* Authentification Joomla ---------------------------------------------- */

.com-users-login,
.com-users-registration,
.com-users-reset,
.com-users-remind {
    --s2-navy: var(--s2ux-navy);
    --s2-cyan: var(--s2ux-cyan);
    --s2-orange: var(--s2ux-orange);
}

.com-users-login input,
.com-users-registration input,
.com-users-reset input,
.com-users-remind input,
.s2-client-space input {
    min-height: 44px;
    border-radius: 9px;
}

@media (max-width: 900px) {
    .s2-header-mainrow {
        flex-wrap: wrap !important;
    }

    .s2-header-actions {
        margin-left: 0 !important;
    }

    .s2-account-slot {
        margin-left: 4px;
    }

    .s2-account-name,
    .s2-account-login-label {
        display: none;
    }

    .s2-account-login {
        width: 42px;
        justify-content: center;
        padding: 8px;
    }

    .s2-account-menu > summary {
        padding: 8px;
    }

    .s2-client-unified-hero,
    .s2-tickets-hero,
    .s2-ticket-detail__hero {
        padding: 22px 20px 20px !important;
        border-radius: 14px !important;
    }
}


/* Espace client 1.1.4 — largeur + sous-titre unique ------------------- */

:root {
    --s2ux-client-max: 1240px;
}

.s2-client-unified-subtitle {
    display: block;
    max-width: 820px !important;
    margin: 0 !important;
}

.com-dpcalendar-booking.s2-client-page-width,
.s2-client-page-width .com-dpcalendar-booking {
    width: 100% !important;
    max-width: none !important;
}

.s2-client-page-width .com-dpcalendar-booking > *,
.s2-client-page-width .s2-client-unified-hero {
    max-width: none !important;
}

@media (min-width: 901px) {
    .s2-client-unified-hero,
    .s2-tickets-hero,
    .s2-ticket-detail__hero {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
}


/* Espace client 1.1.5 — géométrie réellement commune ------------------ */

html.s2-client-space-active {
    --s2ux-client-max: 1165px;
    --s2ux-client-gutter: 30px;
}

html.s2-client-space-active .s2-client-width-chain:not(.s2-client-page-width) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

html.s2-client-space-active .s2-client-page-width {
    box-sizing: border-box !important;
    width: min(
        var(--s2ux-client-max),
        calc(100% - (2 * var(--s2ux-client-gutter)))
    ) !important;
    max-width: var(--s2ux-client-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.s2-client-space-active .s2-client-page-width > *,
html.s2-client-space-active .s2-client-page-width .com-dpcalendar-booking,
html.s2-client-space-active .s2-client-page-width [data-s2-bookings-client],
html.s2-client-space-active .s2-client-page-width [data-s2-tickets-client] {
    box-sizing: border-box !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    html.s2-client-space-active {
        --s2ux-client-gutter: 18px;
    }
}

@media (max-width: 520px) {
    html.s2-client-space-active {
        --s2ux-client-gutter: 12px;
    }

    html.s2-client-space-active .s2-client-unified-hero {
        padding: 24px 20px !important;
    }
}


/* 1.1.6 — largeur Espace client alignée sur les fiches sessions ------- */

html.s2-client-space-active {
    --s2ux-client-max: 1240px !important;
}

html.s2-client-space-active main.s2-client-width-chain,
html.s2-client-space-active .s2-client-width-chain {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
}

html.s2-client-space-active .s2-client-page-width {
    width: min(
        1240px,
        calc(100% - (2 * var(--s2ux-client-gutter)))
    ) !important;
    max-width: 1240px !important;
}