/* ===== POLICES ===== */
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');

/* Palette de couleurs du projet :
   Orange      : #f4950d
   Teal        : #0a858b
   Marron      : #7c2e10
   Marron foncé: #481b09
   Beige       : #ffeacd
*/

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'B612 Mono', monospace;
    color: white;
}

/* ===== BANDEAU ORANGE ===== */
#bandeau-orange {
    background-color: #f4950d;
    text-align: center;

}

#bandeau-orange p {
    font-family: 'Rokkitt', serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
    letter-spacing: 0.03em;
}

#bandeau-orange a {
    display: block;
    color: white;
    padding: 16px 20px;
    text-decoration: none;


}




/* ===== HERO ===== */
#hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a0505;
    overflow: hidden;
}

@supports (min-height: 100dvh) {
    #hero {
        min-height: 100dvh;
    }
}

/* Vidéo de fond — centrée et redimensionnée pour couvrir sans bandes noires */
#bgvideo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    z-index: 0;
    opacity: 0.65;
    object-fit: contain;
}

#contenu-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 960px;
    width: 100%;
    object-fit: cover;
}

#logo {
    width: 240px;
}

#dates-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Rokkitt', serif;
    font-weight: 800;
    font-size: 3.2rem;
    color: white;
}

.date-sep {
    font-weight: 200;
    opacity: 0.55;
    font-size: 2.8rem;
}

.date-mois {
    font-weight: 400;
    font-size: 2.6rem;
}

#lieu {
    background-color: #7c2e10;
    padding: 6px 22px;
}

#lieu p {
    font-family: 'Rokkitt', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
}

#artistes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

/* Cacher les retours à la ligne mobile sur desktop */
.mobile-br {
    display: none;
}

#artistes p {
    font-family: 'B612 Mono', monospace;
    font-weight: 700;
    font-size: 1.45rem;
    color: white;
    text-align: center;
    letter-spacing: 0.04em;
}

/* ===== BOUTONS ===== */
.bouton-bleu {
    background-color: #0a858b;
    color: white;
    font-family: 'B612 Mono', monospace;
    font-size: 1rem;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.2s;
}

.bouton-bleu:hover {
    background-color: #0c9ba2;
}

.bouton-orange {
    background-color: #f4950d;
    color: white;
    font-family: 'B612 Mono', monospace;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.bouton-orange:hover {
    background-color: #e08a08;
}

/* ===== SECTION PRÉSENTATION ===== */
#presentation {
    background-color: #0a858b;
    background-image: url('../image/fond-bleu.png');
    background-size: cover;
    background-position: center;
    padding: 80px 100px 80px 220px;
    display: grid;
    grid-template-columns: 1fr 312px;
    grid-template-rows: auto auto;
    grid-template-areas:
        "text    wrapper"
        "offre   wrapper";
    /*gap: 50px 80px;*/
    column-gap: 70px;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    align-items: center;

}

/* Overlay marron sur la moitié basse */
#presentation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: #7c2e10;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* Animation scroll : le personnage glisse depuis la gauche */
@keyframes perso-slide-in {
    from {
        left: -25vw;
    }

    to {
        left: -101px;
    }
}

#perso-blanc {
    position: absolute;
    left: -25vw;
    top: 42px;
    width: 184px;
    height: 616px;
    transform: rotate(6.881deg);
    transform-origin: bottom center;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    z-index: 3;
    object-fit: contain;
    animation: perso-slide-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 40%;
}

/* Conteneur rosace + badge (superposés) */
#rosace-badge-wrapper {
    grid-area: wrapper;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: 312px;
    height: 295px;
    overflow: visible;
}

/* Rosace animée centrée derrière le badge */
#rosace {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 463px;
    height: 463px;
    opacity: 0.4;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    z-index: 1;
}

#texte-bienvenue {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 3;
}

#texte-bienvenue p {
    font-family: 'B612 Mono', monospace;
    font-size: 1.05rem;
    line-height: 1.85;
    color: white;
}

.signature {
    font-weight: 700 !important;
}

#offre {
    grid-area: offre;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 3;
    align-items: flex-start;
}

#texte-offre {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#texte-offre p {
    font-family: 'B612 Mono', monospace;
    font-size: 1.05rem;
    line-height: 1.75;
    color: white;
}

/* Badge -20% */
#badge-20 {
    background-color: white;
    border: 2px solid #7c2e10;
    border-radius: 300px;
    width: 312px;
    height: 295px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    gap: 4px;
    position: relative;
    z-index: 4;
    align-self: center;
    justify-self: center;
}

.gros-pourcentage {
    font-family: 'Rokkitt', serif;
    font-weight: 800;
    font-size: 4.4rem;
    color: #7c2e10;
    line-height: 1;
}

.badge-surligne {
    font-family: 'Rokkitt', serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #333;
    line-height: 1.2;
}

.pass-titre {
    font-family: 'Rokkitt', serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: #7c2e10;
    text-transform: uppercase;
    line-height: 1.15;
}

.badge-prix {
    font-family: 'Rokkitt', serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #222;
    line-height: 1.4;
}

/* ===== SECTION MESSAGE NEWSLETTER ===== */
#message-newsletter {
    background-color: #ffeacd;
    padding: 55px 132px;
}

#message-newsletter p {
    font-family: 'B612 Mono', monospace;
    font-size: 20px;
    line-height: 141%;
    color: #000;
    font-weight: 400;
    max-width: 1176px;
}

/* ===== SECTION FORMULAIRE D'INSCRIPTION ===== */
#inscription {
    background-image: url('../image/fond-jaune.png');
    background-size: cover;
    background-position: center;
    background-color: #d4900e;
    padding: 64px 80px;
    min-height: 34vh;
}

#inscription h2 {
    font-family: 'Rokkitt', serif;
    font-weight: 800;
    font-size: 4rem;
    color: #481b09;
    margin-bottom: 32px;
    line-height: 1.1;
}

#formulaire {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#form-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

#email-input {
    width: 701px;
    height: 45px;
    flex: none;
    border: 1px solid #7c2e10;
    border-radius: 10px;
    padding: 0 20px;
    font-family: 'B612 Mono', monospace;
    font-size: 1rem;
    background: white;
    outline: none;
    color: #111;
}

#email-input:focus {
    border-color: #0a858b;
}

#email-input::placeholder {
    color: rgba(0, 0, 0, 0.28);
}

#form-row .bouton-bleu {
    display: flex;
    width: 408px;
    height: 54px;
    padding: 25px 79px;
    justify-content: center;
    align-items: center;
    border-radius: 48px;
    flex-shrink: 0;
    font-size: 1rem;
    white-space: nowrap;
}

#consentement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#consentement input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #7c2e10;
}

#consentement label {
    font-family: 'B612 Mono', monospace;
    font-size: 0.82rem;
    color: #111;
    line-height: 1.55;
    max-width: 700px;
}

/* ===== SECTION NOS PARTENAIRES ===== */
#partenaires {
    background-color: white;
    padding: 64px 40px;
    ;
    min-height: 34vh;

}

#partenaires h2 {
    font-family: 'Rokkitt', serif;
    font-weight: 800;
    font-size: 3.8rem;
    color: #481b09;
    margin-bottom: 44px;
    padding-left: 44px;
}

#partenaires-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fleche-nav {
    background: none;
    border: none;
    color: #481b09;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.fleche-nav:hover {
    color: #7c2e10;
}

#carousel-wrapper {
    flex: 1;
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: none;
}

#logos-partenaires {
    display: flex;
    align-items: center;
    gap: 32px;
    transition: transform 0.45s ease;
}

.logo-wrap {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Logo Copie Privée : format portrait, conteneur adapté */
.logo-wrap.logo-copie-privee {
    width: 80px;
    height: 113px;
}

.logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ===== FOOTER ===== */
footer {
    background-color: #7c2e10;
    padding: 52px 80px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px 44px;
    color: white;
    position: relative;
    min-height: 34vh;
}

#footer-logo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#footer-logo img {
    width: 85px;
}

#footer-logo p {
    font-family: 'B612 Mono', monospace;
    font-size: 0.88rem;
    line-height: 1.75;
}

.footer-titre {
    font-family: 'B612 Mono', monospace;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

#footer-social {
    display: flex;
    flex-direction: column;
}

#icones-social {
    display: flex;
    gap: 14px;
    align-items: center;
}

#icones-social a {
    color: white;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

#icones-social a:hover {
    opacity: 0.7;
}

#footer-contact p {
    font-family: 'B612 Mono', monospace;
    font-size: 0.88rem;
    line-height: 1.85;
}

#footer-mentions {
    grid-column: 1 / -1;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#footer-mentions p,
#footer-mentions a {
    font-family: 'B612 Mono', monospace;
    font-size: 0.82rem;
    color: white;
    text-decoration: none; /* enlève le soulignement */
}

#footer-mentions a {
    text-decoration: underline;
}

#scroll-top {
    position: absolute;
    top: 50px;
    right: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

#scroll-top:hover {
    opacity: 0.7;
}

/* ===================================================
   RESPONSIVE — MOBILE (écrans jusqu'à 768px)
   =================================================== */
@media (max-width: 768px) {

    /* BANDEAU */
    #bandeau-orange p {
        font-size: 0.92rem;
    }

    /* HERO */
    #logo {
        width: 160px;
    }

    #dates-ligne {
        font-size: 2rem;
        gap: 8px;
    }

    .date-sep {
        font-size: 1.8rem;
    }

    .date-mois {
        font-size: 1.8rem;
    }

    #lieu p {
        font-size: 0.95rem;
    }

    #artistes {
        gap: 16px;
    }

    #artistes p {
        font-size: 0.9rem;
        letter-spacing: 0.02em;
        line-height: 1.6;
    }

    /* Activer les retours à la ligne entre les noms d'artistes */
    .mobile-br {
        display: inline;
    }

    /* PRÉSENTATION */
    #presentation {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 44px 24px 50px;
        gap: 0;
        min-height: auto;
    }

    #perso-blanc {
        display: none;
    }

    #texte-bienvenue {
        order: 1;
        width: 100%;
        text-align: left;
        gap: 14px;
    }

    #texte-bienvenue p {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    /* La rosace et le badge sont centrés entre les deux blocs de texte */
    #rosace-badge-wrapper {
        order: 2;
        position: relative;
        width: 373px;
        height: 373px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin: 36px 0;
    }

    #rosace {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        z-index: 1;
    }

    #badge-20 {
        position: relative;
        z-index: 2;
        width: 251px;
        height: 237px;
        border-radius: 300px;
        border-width: 2px;
        gap: 2px;
        align-self: auto;
        justify-self: auto;
    }

    .gros-pourcentage {
        font-size: 3rem;
    }

    .badge-surligne {
        font-size: 1.05rem;
    }

    .pass-titre {
        font-size: 1.3rem;
    }

    .badge-prix {
        font-size: 0.95rem;
    }

    #offre {
        order: 3;
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .bouton-orange {
        display: flex;
        width: 310px;
        height: 57.707px;
        padding: 16px 32px;
        justify-content: center;
        align-items: center;
        white-space: normal;
        box-sizing: border-box;
    }

    #texte-offre p {
        font-size: 0.92rem;
        text-align: center;
    }

    /* MESSAGE NEWSLETTER */
    #message-newsletter {
        padding: 40px 50px;
    }

    #message-newsletter p {
        font-size: 16px;
        line-height: 141%;
        max-width: 290px;
        width: 100%;
    }

    /* FORMULAIRE D'INSCRIPTION */
    #inscription {
        padding: 44px 24px 50px;

    }

    #inscription h2 {
        font-size: 2.4rem;
        margin-bottom: 24px;
    }

    #form-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    #email-input {
        width: 292px;
        height: 45px;
        padding: 0 16px;
        font-size: 0.9rem;
    }

    #form-row .bouton-bleu {
        width: 292px;
        height: 54px;
        padding: 25px 0;
        border-radius: 48px;
        font-size: 0.9rem;
        justify-content: center;
    }

    #consentement label {
        font-size: 0.75rem;
    }

    /* NOS PARTENAIRES */
    #partenaires {
        padding: 44px 16px 40px;
        min-height: auto;

    }

    #partenaires h2 {
        font-size: 2.4rem;
        padding-left: 0;
        margin-bottom: 32px;
    }

    .logo-wrap {
        width: 120px;
        height: 64px;
    }

    #logos-partenaires {
        gap: 20px;
    }

    /* FOOTER */
    footer {
        padding: 40px 24px 30px;
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 40vh;
    }

    #footer-mentions {
        grid-column: 1;
    }

    #scroll-top {
        display: none;
    }
}


#sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "B612 Mono";

}

#sib-container input::placeholder {
    text-align: left;
    font-family: "B612 Mono";

}

#sib-container textarea::placeholder {
    text-align: left;
    font-family: "B612 Mono";

}

#sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
}

#sib-container {
    background: transparent;
    padding: 0 !important;
}

.sib-form {
    padding: 0 !important;
}

#sib-form {
    display: grid;
    grid-template-areas: "input bouton" "rgpd rgpd";
    grid-template-columns: 1fr auto;
    gap: 1em;

    @media screen and (max-width: 768px) {
        grid-template-areas: "input" "rgpd" "bouton";
        grid-template-columns: 1fr;


    }

}

#sib-form #div-email {
    grid-area: input;

}

#sib-form #div-bouton {
    grid-area: bouton;


}


#sib-form #div-rgpd {
    grid-area: rgpd;

}

#sib-form.input {

    border: 1px solid #7c2e10;
    border-radius: 10px;
    padding: 0 20px;
    font-family: 'B612 Mono', monospace;
    font-size: 1rem;
    background: white;
    outline: none;
    color: #111;

}

#sib-form .bouton-bleu {
    padding: 0.8em 4em;
    width: 100%;

}

#error-message {
    font-size: 16px;
    text-align: left;
    font-family: B612 Mono, monospace;
    color: white;
    background-color: #a91545;
    border-radius: 10px;
    border-color: #ff4949;
    max-width: 540px;
}


.sib-form-block {
    padding: 0 !important;
}

.sib-form .entry__field {
    -webkit-align-items: center;
    align-items: center;
    background: #fff;
    border: 1px solid #7c2e10;
    border-radius: 10px;
    display: -webkit-inline-flex;
    display: inline-flex;
    margin: .25rem 0;
    max-width: 100%;
    padding: 3px;
    color: black;
    font-family: B612 Mono, monospace;

}

.sib-form .entry__field:focus-within {
    box-shadow: 0 0 5px #0a858b;
}

.sib-form .entry__error {

    font-size: 16px;
    text-align: left;
    font-family: B612 Mono, monospace;
    padding: 10px;
    color: white;
    border-radius: 5px;
    border-color: crimson;
    text-shadow: 1px;
}

.sib-form .entry__error.entry__error--primary {
    font-size: 16px;
    text-align: left;
    font-family: B612 Mono, monospace;
    color: white;
    border-radius: 3px;
    border-color: #ff4949;
    width: fit-content;
    background: #a91545;


}

#success-message {

    font-size: 16px;
    text-align: left;
    font-family: B612 Mono, monospace;
    color: #085229;
    color: #fff;
    background-color: #1f974e;
    border-radius: 6px;
    max-width: 540px;


}


.sib-form-message-panel {
    border: none !important;
}