/* ============================================================
   STYLE-CONDITIONS.CSS
   Page "Conditions légales d'ouverture de compte & offres de bienvenue"
   Dépendances obligatoires :
     - global.css     (variables, utilitaires, typo, boutons)
     - style-page.css (header / nav / footer)

   Ce fichier ne contient QUE les composants propres à cette page,
   non couverts par global.css :
     1. Onglets univers (Hippique / Sport / Poker)
     2. Bannière bonus (effet chevron via clip-path)
     3. Carte blanche "conditions"
     4. Accordéon FAQ "Débuter sur PMU PLAY"
   Tout le reste réutilise les classes de global.css.
   ============================================================ */

/* ─── Conteneur de page (colonne centrée) ───────────────────── */

.conditions-wrapper {
    max-width: 100%;
    width: 1150px;
    margin: 0 auto;
    padding: 0 var(--sp-24);
}

/* ─── Panneaux univers (un seul visible) ────────────────────── */
.univers-panel {
    display: none;
    background: var(--pmu-white);
    border-radius: var(--br-32);
    overflow: hidden;
}

.univers-panel.is-active {
    display: block;
}

/* ─── HERO (titre + accroche) ───────────────────────────────── */

.conditions-hero {
    text-align: center;
    padding: var(--sp-40) 0 var(--sp-32);
}

.conditions-hero h1 {
    font-size: var(--sp-32);
    margin-bottom: var(--sp-24);
}

.conditions-hero .conditions-lead {
    font-weight: bold;
    font-size: var(--sp-20);
    color: var(--pmu-dark);
    line-height: 1.4;
}

/* ============================================================
   1. ONGLETS UNIVERS  (Hippique / Sport / Poker)
   ============================================================ */

.univers-tabs {
    display: flex;
    background: var(--pmu-white);
    border-radius: var(--br-16);
    padding: 6px;
    box-shadow: 0 2px 10px rgba(8, 21, 22, 0.06);
    margin-bottom: var(--sp-24);
}

.univers-tab {
    flex: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: var(--sp-16) var(--sp-20);
    border-radius: var(--br-16);
    font-family: var(--secondary-font);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: var(--sp-18);
    color: var(--pmu-dark);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.univers-tab:hover {
    color: var(--pmu-green);
}

.univers-tab.is-active {
    background: var(--pmu-green);
    color: var(--pmu-white);
}

/* ============================================================
   2. BANNIÈRE BONUS  (effet chevron via clip-path)
   Réutilise le même principe que .pmu-play-cloudpage-top-content
   (cf. style.css des CloudPages), adapté à cette page.
   ============================================================ */

/* Bannière (bloc de fond vert clair) posée PAR-DESSUS la carte blanche :
   les encoches du chevron laissent apparaître le blanc de la carte.
   Le bloc de fond (.bonus-banner) sert de bord coloré au chevron. */
.bonus-banner {
    position: relative;
    z-index: 2;
    background: #006258;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

/* Vert foncé radial + grain SVG, chevron plus haut → bord vert clair visible */
.bonus-banner-inner {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/Svg%3E"),
        radial-gradient(ellipse at 50% 40%, #006258 0%, transparent 100%),
        #000000;
    background-blend-mode: overlay, normal, normal;
    background-size: 200px 200px, 100% 100%, 100% 100%;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    text-align: center;
    padding: var(--sp-16) var(--sp-16) 64px;
}

/* ─── Variante POKER (bleu) ─────────────────────────────────── */
.bonus-banner.banner-poker {
    background: #2B5CC0;
}

.bonus-banner-inner.inner-poker {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/Svg%3E"),
        radial-gradient(ellipse at 50% 40%, #2B5CC0 0%, transparent 100%),
        #000000;
    background-blend-mode: overlay, normal, normal;
    background-size: 200px 200px, 100% 100%, 100% 100%;
}

/* ─── Image cliquable dans le chevron (remplace texte + bouton) ─ */
.bonus-banner-link {
    display: block;
    text-decoration: none;
}

.bonus-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 820px;
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
}

.bonus-jusqua {
    color: var(--pmu-white);
    font-family: var(--secondary-font);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: var(--sp-20);
    letter-spacing: 1px;
}

.bonus-amount {
    display: block;
    font-family: var(--secondary-font);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    font-size: 5.5rem;
    margin: var(--sp-12) 0;
}

.bonus-subtitle {
    display: block;
    color: var(--pmu-white);
    font-family: var(--secondary-font);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: var(--sp-20);
}

.bonus-univers {
    display: block;
    font-family: var(--secondary-font);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: var(--sp-32);
    letter-spacing: 1px;
}

/* ============================================================
   3. CARTE BLANCHE "CONDITIONS"
   ============================================================ */

.conditions-card {
    position: relative;
    z-index: 1;
    background: var(--pmu-white);
    margin-top: -140px;
    padding: 160px var(--sp-64) var(--sp-64);
    margin-bottom: 0;
}

.conditions-card h3 {
    font-size: var(--sp-24);
    color: var(--pmu-green);
    margin: var(--sp-32) 0 var(--sp-20);
}

.conditions-card h3:first-child {
    margin-top: 0;
}

.conditions-card .conditions-subtitle {
    font-size: var(--sp-18);
    font-weight: bold;
    color: var(--pmu-dark);
    margin: 0 0 var(--sp-20);
    font-style: normal;
    font-family: var(--main-font);
    text-transform: none;
}

.conditions-card p {
    font-size: var(--sp-18);
    line-height: 1.5;
    margin-bottom: var(--sp-16);
}

.conditions-card .liste-bullets {
    list-style-type: disc;
    padding-left: var(--sp-24);
    margin: 0 0 var(--sp-16);
}

.conditions-card .liste-bullets > li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: var(--pmu-dark);
}

.lien-cg {
    display: inline-block;
    color: var(--pmu-dark);
    font-size: var(--sp-14);
    text-decoration: underline;
    margin: var(--sp-16) 0 var(--sp-48);
}

.conditions-cta {
    text-align: center;
}

/* ============================================================
   4. ACCORDÉON FAQ  "Débuter sur PMU PLAY"
   ============================================================ */

.faq-section {
    background: var(--pmu-white);
    clip-path: polygon(0 0, 50% 40px, 100% 0, 100% 100%, 0 100%);
    padding: var(--sp-80) 0;
}

/* La FAQ blanche rejoint directement le footer (pas de liseré vert clair) */
.faq-section + * .footer,
.page-main + .footer {
    margin-top: 0;
}

.faq-section h2 {
    margin-bottom: var(--sp-40);
}

.faq-item {
    border-bottom: 1px solid var(--pmu-grey);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: var(--sp-24) 0;
    font-family: var(--main-font);
    font-weight: bold;
    font-size: var(--sp-16);
    color: var(--pmu-dark);
}

.faq-chevron {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--pmu-dark);
    border-bottom: 2px solid var(--pmu-dark);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-right: 6px;
}

.faq-item.is-open .faq-chevron {
    transform: rotate(-135deg);
    margin-top: 6px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-inner {
    padding: 0 0 var(--sp-24);
}

.faq-answer-inner p,
.faq-answer-inner li {
    color: var(--pmu-dark);
    line-height: 1.5;
    margin-bottom: var(--sp-12);
}

.faq-answer-inner .liste-bullets {
    list-style-type: disc;
    padding-left: var(--sp-24);
    margin: 0 0 var(--sp-12);
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    /* Sur mobile le panel blanc absorbe le vide sous le chevron,
       la carte n'a plus besoin de remonter derrière lui. */
    .conditions-card {
        margin-top: 0;
        padding: var(--sp-40) var(--sp-40) var(--sp-40);
    }

    .conditions-hero h1 {
        font-size: var(--sp-28);
    }

    .conditions-hero .conditions-lead {
        font-size: var(--sp-18);
    }

    /* Chevron moins profond en px fixes pour éviter un angle trop aigu.
       Écart outer/inner = 20px → bordure colorée bien visible sur les côtés. */
    .bonus-banner {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
    }

    .bonus-banner-inner {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
        padding-bottom: 52px;
    }

    .bonus-amount {
        font-size: 4rem;
    }

    .bonus-univers {
        font-size: 2rem;
    }

    .univers-tab {
        font-size: var(--sp-14);
        padding: var(--sp-14) var(--sp-12);
    }
}

@media (max-width: 550px) {
    .conditions-card {
        padding: var(--sp-32) var(--sp-24) var(--sp-24);
    }

    .conditions-hero h1 {
        font-size: var(--sp-24);
    }

    .conditions-hero .conditions-lead {
        font-size: var(--sp-16);
    }

    .conditions-card p {
        font-size: var(--sp-16);
    }

    .conditions-card h3 {
        font-size: var(--sp-20);
    }

    .bonus-amount {
        font-size: 3.25rem;
    }
}