/* ════════════════════════════════════════════════════════════════
 * IT'S RUGBY — Page /profils/ (PMPro levels redesign)
 * Style brand : teal #1C3D34 / vanilla #F2E5D2 / sage #ABC8A2 / g-bright #8ED968
 * Grille de cartes personas riches (icône + bénéfices + prix + CTA).
 * ════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------
 * 0) Reset des fragments PMPro non utilisés sur cette page
 *    (le shortcode legacy est remplacé par [its_profils_grid])
 * --------------------------------------------------------- */
body.pmpro-levels .pmpro_levels_table,
body.pmpro-levels .pmpro_levels-table,
body.pmpro-levels #pmpro_levels .pmpro_table {
    display: none;
}
body.pmpro-levels #pmpro_levels.pmpro_section {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}
body.pmpro-levels .pmpro_card_title.pmpro_font-large {
    display: none;
}

/* Overrides container — on veut max-width plus large pour la grille */
body.pmpro-levels .article-body > .pmpro,
body.pmpro-levels .article-body > .pmpro_levels {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px 80px !important;
}

/* ---------------------------------------------------------
 * 1) Wrapper + intro
 * --------------------------------------------------------- */
.its-profils {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    --profil-radius: 0;
    --profil-radius-sm: 0;
}

.its-profils-intro {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
    padding: 0 8px;
}
.its-profils-eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    background: var(--teal, #1C3D34);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-left: 3px solid var(--g-bright, #8ED968);
}
.its-profils-lead {
    color: var(--ink, #1A1A1A);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* Chips d'accès rapide : sautent au profil ciblé via l'ancre (#bar, #staff…) */
.its-profils-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 20px auto 0;
}
.its-profils-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: #fff;
    color: var(--teal, #1C3D34);
    border: 1px solid var(--sage, #ABC8A2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.its-profils-nav-link:hover,
.its-profils-nav-link:focus-visible {
    background: var(--teal, #1C3D34);
    color: #fff;
    border-color: var(--teal, #1C3D34);
}
.its-profils-nav-link:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
 * 2) Slider — scroll-snap + flèches + dots
 * --------------------------------------------------------- */
.its-profils-slider-wrap {
    position: relative;
    margin: 0 0 24px;
    /* Réserve de l'espace pour les flèches en dehors du track sur desktop */
    padding: 0 8px;
}

.its-profils-track {
    list-style: none;
    margin: 0;
    padding: 8px 4px 16px;
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Cache la scrollbar tout en gardant le scroll */
    scrollbar-width: none;
}
.its-profils-track::-webkit-scrollbar {
    display: none;
}
.its-profils-track:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 4px;
}

/* Carte = 1 slide. Largeur = 1/3 desktop, 1/2 tablet, 100% mobile */
.its-profils-track > .its-profil {
    flex: 0 0 calc((100% - 22px * 2) / 3);
    max-width: calc((100% - 22px * 2) / 3);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Flèches de navigation */
.its-profils-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--teal, #1C3D34);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(28, 61, 52, 0.25);
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.its-profils-arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}
.its-profils-arrow:hover {
    background: var(--teal-dk, #172713);
    transform: translateY(-50%) scale(1.06);
}
.its-profils-arrow:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 3px;
}
.its-profils-arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.its-profils-arrow--prev { left: -10px; }
.its-profils-arrow--next { right: -10px; }

/* Dots — pagination */
.its-profils-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 4px 0;
}
.its-profils-dot {
    appearance: none;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    background: var(--border, #C4C4C4);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, width 0.18s ease;
}
.its-profils-dot:hover {
    background: var(--sage, #ABC8A2);
}
.its-profils-dot.is-active {
    background: var(--teal, #1C3D34);
    width: 26px;
}
.its-profils-dot:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
 * 3) Carte profil
 * --------------------------------------------------------- */
.its-profil {
    --profil-accent: var(--teal, #1C3D34);
    --profil-accent-soft: rgba(28, 61, 52, 0.08);
    --profil-accent-ink: var(--teal, #1C3D34);

    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-top: 4px solid var(--profil-accent);
    box-shadow: 0 2px 14px rgba(28, 61, 52, 0.07);
    padding: 26px 24px 22px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.its-profil::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at top right, var(--profil-accent-soft), transparent 70%);
    pointer-events: none;
    transform: translate(35%, -35%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
}
.its-profil:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 26px rgba(28, 61, 52, 0.14);
    border-color: var(--profil-accent);
}
.its-profil:hover::before {
    transform: translate(15%, -15%) scale(1.1);
    opacity: 1;
}

/* Palette persona — 7 teintes distinctes (HUE bien séparé pour différencier au scroll) */

/* Joueur — teal signature (vert profond rugby) */
.its-profil--player {
    --profil-accent: #1C3D34;
    --profil-accent-soft: rgba(28, 61, 52, 0.10);
    --profil-accent-ink: #fff;
}
/* Club — or premium profond — contrast AAA: 7.4:1 sur blanc */
.its-profil--club {
    --profil-accent: #6A4C08;
    --profil-accent-soft: rgba(106, 76, 8, 0.14);
    --profil-accent-ink: #fff;
}
/* Supporter — brique passion — contrast AAA: 7.5:1 sur blanc */
.its-profil--supporter {
    --profil-accent: #9A2A1E;
    --profil-accent-soft: rgba(154, 42, 30, 0.10);
    --profil-accent-ink: #fff;
}
/* Encadrement — vert forêt technique — contrast AAA: 7.7:1 sur blanc */
.its-profil--staff {
    --profil-accent: #1F5719;
    --profil-accent-soft: rgba(31, 87, 25, 0.12);
    --profil-accent-ink: #fff;
}
/* Arbitre — bleu autorité (officiels, navy) */
.its-profil--arbitre {
    --profil-accent: #1A3A8F;
    --profil-accent-soft: rgba(26, 58, 143, 0.10);
    --profil-accent-ink: #fff;
}
/* Président — bordeaux institutionnel */
.its-profil--president {
    --profil-accent: #6B2C5E;
    --profil-accent-soft: rgba(107, 44, 94, 0.12);
    --profil-accent-ink: #fff;
}
/* Bar — orange brûlé profond — contrast AAA: 7.3:1 sur blanc */
.its-profil--bar {
    --profil-accent: #854005;
    --profil-accent-soft: rgba(133, 64, 5, 0.12);
    --profil-accent-ink: #fff;
}

/* Cartes mises en avant — accent renforcé (Joueur, Club, Supporter).
   Pas de liseré intérieur : le « populaire » est porté par la barre haute,
   le badge et l'ombre renforcée (cf. demande Félix 19/06). */
.its-profil--featured {
    border-top-width: 4px;
    box-shadow: 0 6px 22px rgba(28, 61, 52, 0.16);
}

/* Badges */
.its-profil-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--profil-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(28, 61, 52, 0.18);
}
.its-profil-badge svg {
    width: 11px;
    height: 11px;
    display: block;
}
/* Badge "Premium" : fond doré + halo chaud, plus prestigieux */
.its-profil-badge--premium {
    background: linear-gradient(135deg, #E0A427 0%, #C47D08 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(196, 125, 8, 0.45);
    padding: 5px 11px 5px 9px;
}
/* Badge "Populaire" : fond accent persona — moins prestigieux que Premium */
.its-profil-badge--popular {
    background: var(--profil-accent);
    color: #fff;
}

/* Head — icon + kicker + name */
.its-profil-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.its-profil-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--profil-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(28, 61, 52, 0.18);
}
.its-profil-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}
.its-profil-titles {
    flex: 1;
    min-width: 0;
}
.its-profil-kicker {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--profil-accent);
    margin-bottom: 4px;
}
.its-profil-name {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    line-height: 1.15;
    letter-spacing: -0.3px;
}

/* Tagline */
.its-profil-tagline {
    margin: 0 0 18px;
    color: var(--ink, #1A1A1A);
    font-size: 14px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

/* Features list */
.its-profil-features {
    list-style: none;
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px dashed var(--border, #C4C4C4);
    flex: 1;
    position: relative;
    z-index: 1;
}
.its-profil-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--ink, #1A1A1A);
    line-height: 1.5;
}
.its-profil-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--profil-accent);
}

/* Foot — price + CTA */
.its-profil-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.its-profil-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.its-profil-price-amount {
    font-size: 24px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    letter-spacing: -0.4px;
}
.its-profil-price-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B6B6B);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
}

.its-profil-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--profil-accent);
    color: #fff !important;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(28, 61, 52, 0.18);
}
.its-profil-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}
.its-profil-cta:hover {
    background: var(--teal-dk, #172713);
    box-shadow: 0 3px 10px rgba(28, 61, 52, 0.28);
}
.its-profil-cta:hover svg {
    transform: translateX(3px);
}

/* ---------------------------------------------------------
 * 3bis) Corps de carte (wrapper accordéon)
 *   Desktop : wrapper neutre — flex passthrough pour que .its-profil-features
 *   (flex:1) continue de pousser le foot en bas de la carte (rendu inchangé).
 *   Mobile  : devient un accordéon repliable (cf. media 720px).
 * --------------------------------------------------------- */
.its-profil-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
}
.its-profil-body-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Chevron d'accordéon : masqué hors mobile */
.its-profil-chevron {
    display: none;
}

/* ---------------------------------------------------------
 * 4) Responsive — slider
 *    Desktop ≥ 1080 : 3 cartes visibles
 *    Tablet 720–1079 : 2 cartes visibles
 *    Mobile < 720    : 1 carte visible
 * --------------------------------------------------------- */
@media (max-width: 1079px) {
    .its-profils-track {
        gap: 18px;
    }
    .its-profils-track > .its-profil {
        flex: 0 0 calc((100% - 18px) / 2);
        max-width: calc((100% - 18px) / 2);
    }
    .its-profils-arrow--prev { left: -4px; }
    .its-profils-arrow--next { right: -4px; }
}

@media (max-width: 720px) {
    .its-profils {
        padding: 28px 16px 56px;
    }
    /* Mobile : l'accordéon rend le préambule du shortcode redondant avec le
       hero de page → on masque l'intro (accroche « Rejoindre la communauté »,
       paragraphe « Choisissez le profil… » et les chips de profils) pour que
       les 7 en-têtes remontent et tiennent sur un écran. Le hero reste. */
    .its-profils-intro {
        display: none;
    }
    .its-profils-slider-wrap {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /* Mobile : le carrousel devient une LISTE VERTICALE. Les 7 profils sont
       tous visibles d'emblée — fini le swipe carte-par-carte qui masquait
       6 profils sur 7 (levier de conversion #1). NB : overflow-x ET
       overflow-y doivent être « visible » ensemble, sinon la spec recalcule
       overflow-x en « auto » et recrée un conteneur scrollable. */
    .its-profils-track {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 14px;
        padding: 4px 0 8px;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
    }
    .its-profils-track > .its-profil {
        flex: 1 1 auto;
        max-width: 100%;
        scroll-snap-align: none;
    }
    /* Plus de carrousel = plus de pagination à points */
    .its-profils-dots {
        display: none;
    }
    .its-profil {
        padding: 22px 20px 20px;
    }
    .its-profil-icon {
        width: 48px;
        height: 48px;
    }
    .its-profil-icon svg {
        width: 28px;
        height: 28px;
    }
    .its-profil-name {
        font-size: 20px;
    }
    .its-profil-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .its-profil-cta {
        justify-content: center;
        width: 100%;
        padding: 13px 18px;
        font-size: 13px;
    }
    /* Sur mobile, on cache les flèches (accordéon vertical, pas de swipe) */
    .its-profils-arrow {
        display: none;
    }

    /* ── ACCORDÉON MOBILE ─────────────────────────────────────────────
       Chaque profil = un en-tête compact cliquable (icône + nom + chevron),
       corps repliable. Les 7 profils tiennent sur un écran ; on déplie celui
       qui nous concerne. Repli fluide via grid-template-rows 0fr↔1fr. */
    .its-profil--accordion {
        padding: 14px 16px;
    }
    .its-profil--accordion.is-open {
        padding-bottom: 20px;
    }
    .its-profil--accordion .its-profil-head {
        margin-bottom: 0;
        cursor: pointer;
    }
    /* Libellé + nom sur une seule ligne (au lieu d'empilés) → en-tête plus bas,
       plus de profils visibles à l'écran. Repli en 2 lignes si ça déborde. */
    .its-profil--accordion .its-profil-titles {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 8px;
    }
    .its-profil--accordion .its-profil-kicker {
        margin-bottom: 0;
    }
    .its-profil--accordion .its-profil-head:focus-visible {
        outline: 3px solid var(--g-bright, #8ED968);
        outline-offset: 4px;
    }
    /* En-tête compact : icône réduite pour tenir plus de profils à l'écran */
    .its-profil--accordion .its-profil-icon {
        width: 40px;
        height: 40px;
    }
    .its-profil--accordion .its-profil-icon svg {
        width: 22px;
        height: 22px;
    }
    /* Le badge « Populaire » gênerait le chevron en tête repliée → masqué en
       accordéon (le nom suffit à choisir ; la carte dépliée garde son ombre
       featured). */
    .its-profil--accordion .its-profil-badge {
        display: none;
    }
    .its-profil--accordion .its-profil-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: auto;
        width: 28px;
        height: 28px;
        color: var(--profil-accent);
        transition: transform 0.25s ease;
    }
    .its-profil--accordion .its-profil-chevron svg {
        width: 18px;
        height: 18px;
    }
    .its-profil--accordion.is-open .its-profil-chevron {
        transform: rotate(180deg);
    }
    /* Corps repliable (grid-rows : 0fr fermé ↔ 1fr ouvert) */
    .its-profil--accordion .its-profil-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.28s ease;
    }
    .its-profil--accordion.is-open .its-profil-body {
        grid-template-rows: 1fr;
        margin-top: 14px;
    }
    .its-profil--accordion .its-profil-body-inner {
        min-height: 0;
        overflow: hidden;
        /* Replié : retiré de l'ordre de tabulation (RGAA — pas de focus sur du
           contenu invisible). Le CTA masqué ne doit pas être atteignable. */
        visibility: hidden;
    }
    .its-profil--accordion.is-open .its-profil-body-inner {
        visibility: visible;
    }
}

/* ---------------------------------------------------------
 * 5) Préférences utilisateur — reduced motion
 * --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .its-profils-track {
        scroll-behavior: auto;
    }
    .its-profil,
    .its-profil-cta,
    .its-profil-cta svg,
    .its-profils-arrow,
    .its-profils-dot {
        transition: none !important;
    }
    .its-profil:hover {
        transform: none;
    }
    /* Accordéon : coupe l'anim de repli (specificité 0,2,0 + ordre source →
       l'emporte sur la règle mobile sans recourir à !important). */
    .its-profil--accordion .its-profil-body,
    .its-profil--accordion .its-profil-chevron {
        transition: none;
    }
}

/* ---------------------------------------------------------
 * 6) Visited / focus accessibility
 * --------------------------------------------------------- */
.its-profil-cta:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 3px;
}