:root {
    --rouge-fond: #db2319;
    --beige-clair: #f2e6d8;
    --brand-red: #db2319;
    --brand-yellow: #f8e71c;
    --brand-black: #000000;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--rouge-fond);
    color: var(--beige-clair);
}

/* --- HEADER & MENU --- */
.header-fullscreen {
    min-height: 100vh;
}

.site-title {
    font-family: 'Anton';
    font-size: 1.9rem;
    text-transform: uppercase;
    padding-left: 1rem;
}

#lien-titre-site {
    text-decoration: none!important;
    color: var(--beige-clair)!important;
}

.site-menu .nav-link {
    font-family: 'Anton';
    font-size: clamp(1rem, 2.2vw, 1.5rem); 
    text-transform: uppercase;
    color: var(--beige-clair);
    padding: 0.5rem 0.8rem;
}

.site-menu .nav-link.active {
    color: #000 !important;
}

.nav > li > a:hover {
    color: black;
}

@media (max-width: 480px) {
    .site-menu {
        justify-content: center !important;
        flex-wrap: wrap; /* Évite que le menu ne pousse la largeur sur petit mobile */
    }
    .site-menu .nav-link {
        white-space: normal; 
        text-align: center;
    }
}

/* --- TITRES ET CITATIONS --- */
.titre-principal {
    font-size: clamp(5rem, 22vw, 20rem);
    font-family: 'Anton';
    line-height: 0.95;
    text-align: center;
    margin-top: 20px;
    color: var(--beige-clair);
    word-wrap: break-word;
}
/*
@media (max-width: 768px) {
    .titre-principal {
        font-size: clamp(5rem, 15vw, 6rem) !important;
        margin-bottom: 3%;
    }
}
*/
/*
.quote {
    font-style: italic;
    font-size: 1.8rem;
    color: var(--beige-clair);
    font-family: 'Anton';
    margin-right: 5%;
    
}
*/
@media (max-width: 768px) {
    .quote {
        font-size: 1.6rem;
        text-align: center !important;
        margin-top: 5%!important;
    }
}

.quiz-asset {
    position: relative;
    min-height: 400px; 

}


@media (max-width: 480px) {
    .titre-principal {
    font-size: 11rem !important;
    }
    
    #perso-1 {
    position: relative;
    width: 300px!important;
    z-index: 11;
    transform: translateX(-5%);
    transform: translateY(35%);
    transition: all 0.6s ease-out;
    }

    #deco-1 {
    position: absolute;
    width: 100px;
    left: 65%;
    bottom: 50%!important;
    z-index: 12;
    transition: all 0.7s ease-out;
    }

    .quote {
    font-size: 1.6rem;
    text-align: center !important;
    margin-top: 5%!important;
    font-style: italic;
    font-size: 1.8rem;
    color: var(--beige-clair);
    font-family: 'Anton';
    margin-right: 5%;
    }
}

@media (min-width: 481px) and (max-width: 767px) {

    .titre-principal {
    font-size: 15rem !important;
    }

    #perso-1 {
    margin-top: 10%;
    position: relative;
    max-width: 270px!important;
    z-index: 11;
    bottom: 5%;
    left: 10%;
    transform: translateX(-5%);
    transition: all 0.6s ease-out;
    }

    #deco-1 {
    position: absolute;
    width: 100px;
    left: 60%;
    bottom: 50%!important;
    z-index: 12;
    transition: all 0.7s ease-out;
    }

    .quote {
    font-size: 1.6rem;
    text-align: center !important;
    margin-top: 5%!important;
    font-style: italic;
    font-family: 'Anton';
    color: var(--beige-clair);
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .titre-principal {
    font-size: 16rem !important;
    }

    #perso-1 {
    position: relative;
    width: 350px!important;
    z-index: 11;
    left: 15%;
   
    transform: translateY(20%);
    transition: all 0.6s ease-out;
    }

    #deco-1 {
    position: absolute;
    width: 100px;
    right: 40%;
    bottom: 50%!important;
    z-index: 12;
    transition: all 0.7s ease-out;
    }

    .quote {
    font-style: italic;
    font-size: 1.8rem;
    color: var(--beige-clair);
    font-family: 'Anton';
    margin-right: 5%;
    margin-top: 10%!important;
}
}

@media (min-width: 992px) {
    .quiz-asset {
        min-height: 400px;
        justify-content: center;
    }
    
    #perso-1 {
        position: relative;
        width: 50%; 
        transform: translateX(-25%);
        transform: translateY(40%);
        top: 20%;
        margin-top: 0;
    }

    #deco-1 {
        position: absolute;
        width: 12%;
        top: 5%!important;
        transform: translateX(20rem);
        
    }

    .quote {
    font-style: italic;
    font-size: 1.8rem;
    color: var(--beige-clair);
    font-family: 'Anton';
    margin-right: 5%;
    margin-top: 10%!important;
}
}


/* Perso-2 & deco-2 */
#perso-2, #deco-2 {
    position: absolute; 
}

#perso-2 {    
    width: 40%;
    bottom: -25%; 
    left: 3vw; 
    z-index: 11;
}

#deco-2 {
    width:35%;
    bottom: 50%; 
    left: 30%; 
    z-index: 10;
}

/* --- RESPONSIVE MOBILE (SMARTPHONE) --- */

@media (max-width: 768px) {

    #deco-2 { 
        width: 25%; 
        top: 0; 
        left: 50%; 
        transform: translateX(-50%); }

    #perso-2 { 
        width: 30vw; 
        top: -15%; 
        left: 50%; 
        transform: translateX(-50%); }
}


/* --- GESTION INDÉPENDANTE DES ASSETS (IMAGES) --- */

.section-questions .col-md-4 {
    position: relative;
    min-height: 400px;
}

/* --- ASSETS DE LA SECTION QUESTIONS (SECTION 2) --- */

.question-container {
    max-width: 800px;
    margin-bottom: 50px;
    position: relative;
    z-index: 20; /* Passe au dessus des images si besoin */
}

.question-header {
    background-color: var(--brand-black);
    color: white;
    padding: 15px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

.option-item {
    font-weight: bold;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.option-item input {
    margin-right: 10px;
}

.btn-reponse {
    background-color: var(--brand-yellow);
    color: var(--brand-black);
    border: none;
    border-radius: 20px;
    padding: 5px 25px;
    font-weight: bold;
    margin-top: 15px;
}

.btn-reponse:hover {
    background-color: #e0d71d;
}

.explanation {
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    display: none;
}

.feedback-icon {
    margin-left: 10px;
    font-size: 1.6rem;
}

.correct-text { color: #ffe7e7; }
.wrong-text { color: #ffe7e7; }

/* --- RESPONSIVE / MOBILE --- */

@media (max-width: 768px) {
    .section-questions {
        text-align: center;
    }
}

/* --- ****************************** --- */
/* --- ********* IMAGES IHS ********* --- */
/* --- ****************************** --- */
.carousel-container.paper-stack {
    position: relative;
    height: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item-custom {
    position: absolute;
    max-width: 600px;
    width: 90%;
    /* On définit l'aspect "papier" par défaut (en dessous) */
    opacity: 0.6;
    transform: rotate(-5deg) translateY(20px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel-item-custom.active {
    opacity: 1;
    z-index: 10;
    transform: rotate(0deg) translateY(0) scale(1); /* Devient droit et net */
}

.document-paper {
    background: white;
    padding: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.carousel-item-custom.exit {
    transform: translateX(120%) rotate(15deg); /* Glisse sur le côté au clic */
    opacity: 0;
}

/* ****************************** */
/* carrousel */
/* ****************************** */

/* --- CARROUSEL INTERACTIF --- */
#section-pince-finale {
    padding: 80px 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Slide visible */
.carousel-item-custom.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    z-index: 2;
}

/* Animation de sortie (vers la gauche) */
.carousel-item-custom.exit {
    transform: translateX(-50px) scale(0.95);
    opacity: 0;
}

/* --- BOUTONS --- */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: 2px solid var(--beige-clair);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s;
}

/* --- EFFET HOVER SUR LES BOUTONS --- */
.carousel-control {
    /* ... vos propriétés actuelles ... */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transition "élastique" */
}

.carousel-control:hover {
    background-color: transparent; /* Utilisation de votre jaune global */
    color: white;
    border-color: white;
    transform: translateY(-50%) scale(1.15); /* Grossit légèrement tout en restant centré verticalement */
    box-shadow: 0 0 20px rgba(248, 231, 28, 0.4); /* Halo lumineux discret */
}

/* Petit effet au clic (pression) */
.carousel-control:active {
    transform: translateY(-50%) scale(0.95);
    transition: duration 0.1s;
}

.carousel-control:hover { 
    color: white; }
    

.prev { left: -20px; }

.next { right: -20px; }

.carousel-control.prev:hover {
    padding-right: 5px; /* Pousse l'icône vers la gauche visuellement */
}

.carousel-control.next:hover {
    padding-left: 5px; /* Pousse l'icône vers la droite visuellement */
}

/* --- LÉGENDES --- */
.wrapper-ihs { position: relative; display: inline-block; }
.legende-noire {
    position: absolute;
    bottom: -10%;
    right: -15%;
    background: #000;
    color: #fff;
    padding: 15px;
    width: 80%;
    max-width: 350px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}
.legende-texte { font-family: 'Anton'; text-transform: uppercase; margin: 0; font-size: 1rem; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .carousel-container { height: 450px; }
    .carousel-item-custom { left: 0; width: 100%; }
    .prev { left: 5px; }
    .next { right: 5px; }
    .legende-noire { width: 90%; left: 5%; bottom: -10px; position: relative; }
}

/* -------- BACK TO TOP ------- */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    
    /* Fond transparent */
    background-color: transparent; 
    
    /* Couleur de la flèche */
    color: #ffffff; 
    
    /* Bordure ronde blanche */
    border: 2px solid #ffffff; 
    border-radius: 50%;
    
    text-align: center;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Effet au survol pour qu'il reste visible sur ton fond rouge */
.back-to-top:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Léger voile blanc au survol */
    color: #ffffff;
    transform: translateY(-5px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}


/* --------------- Animations perso et ? --------------- */
/* État initial : caché et légèrement décalé vers le bas */
.reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* État final : visible */
.reveal-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Sortie rapide pour les éléments qui disparaissent */
.fade-out {
    opacity: 0 !important;
    transform: scale(0.9) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    pointer-events: none;
}