/* Feuille css pour définir des règles pour thèmatiser les pages FFL */
/* import d'un autre fichier */
@import 'custom.css';
/* **************************************************************************************** 
   CSS générique pour titre et paragraphe
**************************************************************************************** */

/* 
████████╗██╗████████╗██████╗ ███████╗
╚══██╔══╝██║╚══██╔══╝██╔══██╗██╔════╝
   ██║   ██║   ██║   ██████╔╝█████╗  
   ██║   ██║   ██║   ██╔══██╗██╔══╝  
   ██║   ██║   ██║   ██║  ██║███████╗
   ╚═╝   ╚═╝   ╚═╝   ╚═╝  ╚═╝╚══════╝
                                     
*/

/* ************************************************************************************************* 
   TITRE DE NIVEAU 1 
************************************************************************************************* */

h1, .h1 {
    font-family: var(--font-ffl-H1-H3-H5);
    font-size:var(--size-ffl-h1) ;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H1-H3-H5) ;
    text-shadow: var(--shadow-5);
    margin: 0 auto;
    padding: 10px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h1, .h1 {
        font-size: 45px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h1, .h1 {
        font-size: 30px;
        line-height: 1.2em;
    }
}

/* *************************************************
  titre de niveau 2
************************************************* */
h2, .h2 {
    font-family:var(--font-ffl-H2-H4-H6);
    font-size:var(--size-ffl-h2) ;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H2-H4-H6);
    text-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    margin: 0 auto;
    padding: 8px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h2, .h2 {
        font-size: 38px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h2, .h2 {
        font-size: 28px;
    }
}

/* *************************************************
  titre de niveau 3
************************************************* */
h3, .h3 {
    font-family: var(--font-ffl-H1-H3-H5);
    font-size:var(--size-ffl-h3) ;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H1-H3-H5) ;
    margin: 0 auto;
    padding: 7px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h3, .h3 {
        font-size: 32px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h3, .h3 {
        font-size: 24px;
    }
}

/* *************************************************
  titre de niveau 4
************************************************* */
h4, .h4 {
    font-family:var(--font-ffl-H2-H4-H6);
    font-size:var(--size-ffl-h4) ;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H1-H3-H5);
    margin: 0 auto;
    padding: 6px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h4, .h4 {
        font-size: 28px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h4, .h4 {
        font-size: 22px;
    }
}

/* *************************************************
  titre de niveau 5
************************************************* */
h5, .h5 {
    font-family: var(--font-ffl-H1-H3-H5);
    font-size:var(--size-ffl-h5) ;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H1-H3-H5) ;
    margin: 0 auto;
    padding: 5px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h5, .h5 {
        font-size: 22px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h5, .h5 {
        font-size: 20px;
    }
}

/* *************************************************
  titre de niveau 6
************************************************* */
h6, .h6{
    font-family:var(--font-ffl-H2-H4-H6);
    font-size:var(--size-ffl-h6) ;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-titre-ffl-H2-H4-H6);
    margin: 0 auto;
    padding: 4px 0;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    h6, .h6 {
        font-size: 18px;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    h6, .h6 {
        font-size: 18px;
    }
}
/* 
██████╗  █████╗ ██████╗  █████╗  ██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗███████╗
██╔══██╗██╔══██╗██╔══██╗██╔══██╗██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║██╔════╝
██████╔╝███████║██████╔╝███████║██║  ███╗██████╔╝███████║██████╔╝███████║█████╗  
██╔═══╝ ██╔══██║██╔══██╗██╔══██║██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║██╔══╝  
██║     ██║  ██║██║  ██║██║  ██║╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║███████╗
╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝╚══════╝
                                                                                 
*/
/* *************************************************
  paragraphe font-size:
************************************************* */
p, .p {
    font-family:var( --font-p-ffl);
    font-size: var( --size-p-ffl);
    line-height: 1.6em;
    color: var(--color-p-ffl);
    text-align: justify;
    margin: 0 auto;
    padding: 8px 0;
}



/* Responsive tablette */
@media (max-width: 1024px) {
    p, .p {
        font-size: var( --size-p-ffl);
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    p, .p {
        font-size: var( --size-p-ffl);
    }
}

/* **************************************************************************************** 
██████╗ ██╗      ██████╗  ██████╗    ███████╗███████╗ ██████╗████████╗██╗ ██████╗ ███╗   ██╗
██╔══██╗██║     ██╔═══██╗██╔════╝    ██╔════╝██╔════╝██╔════╝╚══██╔══╝██║██╔═══██╗████╗  ██║
██████╔╝██║     ██║   ██║██║         ███████╗█████╗  ██║        ██║   ██║██║   ██║██╔██╗ ██║
██╔══██╗██║     ██║   ██║██║         ╚════██║██╔══╝  ██║        ██║   ██║██║   ██║██║╚██╗██║
██████╔╝███████╗╚██████╔╝╚██████╗    ███████║███████╗╚██████╗   ██║   ██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝    ╚══════╝╚══════╝ ╚═════╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                            
CSS générique pour les blocs section (4 blocs)
**************************************************************************************** */
/* *************************************************
  CSS pour les blocs fantasy 1 
██████  ██       ██████   ██████      ██ 
██   ██ ██      ██    ██ ██          ███ 
██████  ██      ██    ██ ██           ██ 
██   ██ ██      ██    ██ ██           ██ 
██████  ███████  ██████   ██████      ██ 
                                         
                                         
************************************************* */

.bloc-fantasy1 {
    width: 100%;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
    background-color: var(--background-ffl-1);
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/background-ffl-bloc1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
}

/* Overlay avec le château */
.bloc-fantasy1::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 17%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/sticker-ffl-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}


/* Contenu intérieur positionné correctement */
.bloc-fantasy1 > * {
    position: relative;
    z-index: 2;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .bloc-fantasy1 {
        padding: 40px 20px;
    }

    .bloc-fantasy::before {
        width: 22%;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .bloc-fantasy1 {
        padding: 30px 15px;
    }

    .bloc-fantasy1::before {
        width: 30%;
    }

    .bloc-fantasy1::after {
        height: 40px;
        background-size: 20px 20px;
    }
}

/* *************************************************
  CSS pour les blocs fantasy 2
██████  ██       ██████   ██████     ██████  
██   ██ ██      ██    ██ ██               ██ 
██████  ██      ██    ██ ██           █████  
██   ██ ██      ██    ██ ██          ██      
██████  ███████  ██████   ██████     ███████ 
                                             
                                             
************************************************* */

.bloc-fantasy2 {
    width: 100%;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
    background-color: var(--background-ffl-2);
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/background-ffl-bloc1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Overlay avec le château */
.bloc-fantasy2::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 17%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/sticker-ffl-2.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}

/* Contenu intérieur positionné correctement */
.bloc-fantasy2 > * {
    position: relative;
    z-index: 2;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .bloc-fantasy2 {
        padding: 40px 20px;
    }

    .bloc-fantasy::before {
        width: 22%;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .bloc-fantasy2 {
        padding: 30px 15px;
    }

    .bloc-fantasy2::before {
        width: 30%;
    }

    .bloc-fantasy2::after {
        height: 40px;
        background-size: 20px 20px;
    }
}

/* *************************************************
  CSS pour les blocs fantasy 3
██████  ██       ██████   ██████     ██████  
██   ██ ██      ██    ██ ██               ██ 
██████  ██      ██    ██ ██           █████  
██   ██ ██      ██    ██ ██               ██ 
██████  ███████  ██████   ██████     ██████  
                                             
                                             
************************************************* */

.bloc-fantasy3 {
    width: 100%;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
    background-color: var(--background-ffl-3);
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/background-ffl-bloc1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Overlay avec le château */
.bloc-fantasy3::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 17%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/sticker-ffl-3.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}


/* Contenu intérieur positionné correctement */
.bloc-fantasy3 > * {
    position: relative;
    z-index: 2;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .bloc-fantasy3 {
        padding: 40px 20px;
    }

    .bloc-fantasy::before {
        width: 22%;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .bloc-fantasy3 {
        padding: 30px 15px;
    }

    .bloc-fantasy3::before {
        width: 30%;
    }

    .bloc-fantasy3::after {
        height: 40px;
        background-size: 20px 20px;
    }
}

/* *************************************************
  CSS pour les blocs fantasy 4
██████  ██       ██████   ██████     ██   ██ 
██   ██ ██      ██    ██ ██          ██   ██ 
██████  ██      ██    ██ ██          ███████ 
██   ██ ██      ██    ██ ██               ██ 
██████  ███████  ██████   ██████          ██ 
                                             
                                             
************************************************* */

.bloc-fantasy4 {
    width: 100%;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
    background-color: var(--background-ffl-4);
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/background-ffl-bloc1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay avec le château */
.bloc-fantasy4::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 17%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url('https://festyggdrasil.fr/wp-content/uploads/2025/05/sticker-ffl-4.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}


/* Contenu intérieur positionné correctement */
.bloc-fantasy4 > * {
    position: relative;
    z-index: 2;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .bloc-fantasy4 {
        padding: 40px 20px;
    }

    .bloc-fantasy::before {
        width: 22%;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .bloc-fantasy4 {
        padding: 30px 15px;
    }

    .bloc-fantasy4::before {
        width: 30%;
    }

    .bloc-fantasy4::after {
        height: 40px;
        background-size: 20px 20px;
    }
}

/* *************************************************
  CSS pour les blocs fantasy 4
██████  ██       ██████   ██████     
██   ██ ██      ██    ██ ██          
██████  ██      ██    ██ ██          
██   ██ ██      ██    ██ ██          
██████  ███████  ██████   ██████     
                                             
                                             
************************************************* */

.bloc {
    width: 100%;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
    background-color: var(--background-ffl-4);
    background-size: cover;
    background-position: center;
}

/* Contenu intérieur positionné correctement */
.bloc > * {
    position: relative;
    z-index: 2;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .bloc {
        padding: 40px 20px;
    }

    .bloc::before {
        width: 22%;
    }
}

/* Responsive mobile */
@media (max-width: 767px) {
    .bloc {
        padding: 30px 15px;
    }

    .bloc::before {
        width: 30%;
    }

    .bloc::after {
        height: 40px;
        background-size: 20px 20px;
    }
}

/* ****************************************************************************************
   CSS générique pour Container de premier niveau

   
  ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████       ██ 
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██     ███ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████       ██ 
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██      ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██      ██ 
                                                                                 
                                                                                 
**************************************************************************************** */

.container1 {
    background-color: #FFFFFFB0; /* Blanc transparent */
    display: flex;
    flex-direction: column; /* Vertical */
    justify-content: space-between;
    align-items: center;
    align-self: center;
    width: 100%;
    margin: 50px 0 30px 0;
    border-radius: 10px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
}

/* ****************************************************************************************
   CSS générique pour Container de deuxième niveau

 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████      ██████  
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██          ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████       █████  
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██     ██      
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██     ███████ 
                                                                                     
                                                                                     
**************************************************************************************** */

/* Container parent destiné Ã  contenir plusieurs containers enfants */
.container2 {
    background-color: none;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 15px !important;
    flex-direction: row !important;
}

/* Chaque conteneur enfant */
.container2 > * {
    flex: 0 0 calc(20% - 15px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Adaptation pour tablettes : 2 blocs par ligne */
@media (max-width: 1024px) {
    .container2 > * {
        flex: 0 0 calc(50% - 15px) !important;
    }
}

/* Adaptation pour mobiles : 1 blocs par ligne */
@media (max-width: 767px) {
    .container2 > * {
        flex: 0 0 calc(100% - 15px) !important;
    }
}

/* Ajustements esthétiques optionnels */
.container2 > .container-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.container2 > .container-item p,
.container2 > .container-item h2 {
    margin: 10px 0;
    flex-grow: 1;
}
/* ****************************************************************************************
   CSS générique pour Container de deuxième niveau

 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████      ██████  
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██          ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████       █████  
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██          ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██     ██████  
                                                                                     
                                                                                     
                                                                                     
                                                                                     
**************************************************************************************** */

/* Container parent destiné Ã  contenir plusieurs containers enfants */
.container3 {
    background-color: none;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 15px !important;
    flex-direction: row !important;
}

/* Chaque conteneur enfant */
.container3 > * {
    flex: 0 0 calc(20% - 10px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;

}

/* Adaptation pour tablettes : 3 blocs par ligne */
@media (max-width: 1024px) {
    .container3 > * {
        flex: 0 0 calc(30% - 15px) !important;
    }
}

@media (max-width: 767px) {
    .container3 > * {
        flex: 0 0 calc(50% - 15px) !important;
    }
}

/* Ajustements esthétiques optionnels */
.container3 > .container-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.container3 > .container-item p,
.container3 > .container-item h2 {
    margin: 10px 0;
    flex-grow: 1;
}
/* ****************************************************************************************
   CSS générique pour Container de quatrieme niveau


 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████      ██   ██ 
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██     ██   ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████      ███████ 
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██          ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██          ██ 
                                                                                                                                                                     
**************************************************************************************** */

/* Container parent destiné Ã  contenir plusieurs containers enfants */
/* Container parent avec flexbox */
.container4 {
    background-color: none;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 5px !important;
    flex-direction: row !important;
}

/* Chaque conteneur enfant */
.container4 > * {
    flex: 0 0 calc(18% - 2px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;

}

/* Adaptation pour tablettes : 2 blocs par ligne */
@media (max-width: 1024px) {
    .container4 > * {
        flex: 0 0 calc(30% - 15px) !important;
    }
}

/* Adaptation pour mobiles : 1 blocs par ligne */
@media (max-width: 767px) {
    .container4 > * {
        flex: 0 0 calc(100% - 15px) !important;
    }
}

/* Ajustements esthétiques optionnels */
.container4 > .container-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.container4 > .container-item p,
.container4 > .container-item h2 {
    margin: 10px 0;
    flex-grow: 1;
}
/* ****************************************************************************************
   CSS générique pour Container de quatrieme niveau


 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████      ██   ██ 
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██     ██   ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████      ███████ 
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██          ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██          ██ 
                                                                                                                                                                     
**************************************************************************************** */

/* Container parent destiné Ã  contenir plusieurs containers enfants */
/* Container parent avec flexbox */
.container4 {
    background-color: none;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 5px !important;
    flex-direction: row !important;
}

/* Chaque conteneur enfant */
.container4 > * {
    flex: 0 0 calc(18% - 2px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;

}

/* Adaptation pour tablettes : 2 blocs par ligne */
@media (max-width: 1024px) {
    .container4 > * {
        flex: 0 0 calc(30% - 15px) !important;
    }
}

/* Adaptation pour mobiles : 1 blocs par ligne */
@media (max-width: 767px) {
    .container4 > * {
        flex: 0 0 calc(100% - 15px) !important;
    }
}

/* Ajustements esthétiques optionnels */
.container4 > .container-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.container4 > .container-item p,
.container4 > .container-item h2 {
    margin: 10px 0;
    flex-grow: 1;
}

                                                                                                                       
 /* ****************************************************************************************

 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████      ███████  ██████  ██    ██  █████  ██      
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██     ██      ██       ██    ██ ██   ██ ██      
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████      █████   ██   ███ ██    ██ ███████ ██      
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██     ██      ██    ██ ██    ██ ██   ██ ██      
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██     ███████  ██████   ██████  ██   ██ ███████ 
**************************************************************************************** */                                                                                                                      

.container-egal {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: space-between;
    align-items: stretch;
}

/* Desktop : 3 blocs par ligne */
.container-egal > * {
    flex: 0 0 32%;
    max-width: 32%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

/* Mobile : 1 bloc par ligne, centré */
@media (max-width: 767px) {
    .container-egal {
        justify-content: center;
    }
    .container-egal > * {
        flex: 0 0 96%;
        max-width: 96%;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }
}
/* ****************************************************************************************
   CSS générique pour Container de quatrieme niveau
 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████  
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████  
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██ 
                                                                         
**************************************************************************************** */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 2%; /* petit espace entre les éléments */
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row;
}

/* enfants directs */
.container > * {
    flex: 0 0 40%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

@media (max-width: 767px) {
    .container > * {
        flex: 0 0 calc(50% - 15px) !important;
        justify-content: center;
    }
}

/* ****************************************************************************************
   CONTAINERvidéo : CSS optimisé
 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████        ██    ██ ██ ██████  ███████  ██████  
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██       ██    ██ ██ ██   ██ ██      ██    ██ 
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████  █████ ██    ██ ██ ██   ██ █████   ██    ██ 
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██        ██  ██  ██ ██   ██ ██      ██    ██ 
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██         ████   ██ ██████  ███████  ██████  
                                                                                                                    
                                                                                                                                                       
**************************************************************************************** */

/* Conteneur principal en plein largeur et orientation horizontale */
.container-video {
  width: 100%;
  display: flex;
  flex-direction: row;      /* alignement des enfants sur l’axe horizontal */
  flex-wrap: nowrap;        /* empêche le retour à la ligne */
  overflow-x: auto;         /* permet le scroll si les widgets débordent */
}

/* Chaque enfant est un widget-compteur */
.container-video .widget-compteur {
  margin: 0 1rem;           /* espace horizontal entre les widgets */
  /* vous pouvez ajouter d’autres styles spécifiques ici */
}

/* Texte et titres en blanc dans le conteneur vidéo et ses widgets */
.container-video,
.container-video .widget-compteur,
.container-video .widget-compteur h1,
.container-video .widget-compteur h2,
.container-video .widget-compteur h3,
.container-video .widget-compteur h4,
.container-video .widget-compteur h5,
.container-video .widget-compteur h6,
.container-video .widget-compteur p,
.container-video .widget-compteur span {
  color: #ffffff;
  text-shadow: var(--shadow-intense);
}

/* Ligne du Divider en blanc */
.container-video .widget-compteur .elementor-divider .elementor-divider-separator {
  /* Pour les séparateurs “solid” / “line” */
  border-top-color: #fff !important;
  /* Pour les patterns, certains utilisent background-image */
  background-color: transparent !important;
  background-image: none !important;
}

/* Si vous utilisez l’icône dans le Divider (pattern “icon”) */
.container-video .widget-compteur .elementor-divider .elementor-divider-separator .elementor-icon {
  color: #fff !important;
}

/* Éventuellement, forcer la couleur du texte ou du tag HTML */
.container-video .widget-compteur .elementor-widget-container,
.container-video .widget-compteur .elementor-divider {
  color: #fff !important;
}
/* ****************************************************************************************
   CONTAINERfb : CSS optimisé
   basé sur les settings Elementor JSON
**************************************************************************************** */
.container-fb {
    display: flex;
    width: 100%;
    max-width: 100%;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    justify-content: center;  /* centrer horizontalement tous les enfants */
    align-items: center;      /* centrer verticalement tous les enfants */
    padding: 20px;
}

/* *************************************************
  Widget guest (.guest)
██     ██ ██ ██████   ██████  ███████ ████████      ██████  ██    ██ ███████ ███████ ████████ 
██     ██ ██ ██   ██ ██       ██         ██        ██       ██    ██ ██      ██         ██    
██  █  ██ ██ ██   ██ ██   ███ █████      ██        ██   ███ ██    ██ █████   ███████    ██    
██ ███ ██ ██ ██   ██ ██    ██ ██         ██        ██    ██ ██    ██ ██           ██    ██    
 ███ ███  ██ ██████   ██████  ███████    ██         ██████   ██████  ███████ ███████    ██    
                                                                                              
                                                                                              
                                                                                                                    
************************************************* */
.widget-guest {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 calc(25% - 15px) !important;
    max-width: calc(33% - 15px) !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF;
    overflow: hidden !important;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: auto !important; /* essentiel pour uniformité */
}

/* Image dans le widget occupe précisément 30% de la hauteur */
.guest-image {
    flex: 0 0 30% !important;
    width: 100%;
    object-fit: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 0 !important; /* Marge interne explicite à 0 */
    margin: 0 !important; /* Marge externe explicite à 0 */
}
/* la couleur des titre est forcé en noir */

.widget-guest h1,
.widget-guest h2,
.widget-guest h3,
.widget-guest h4,
.widget-guest h5,
.widget-guest h6 {
    color: black;
}
/* la couleur des paragraphes est forcé en noir */
.widget-guest p {
    flex: 1 1 auto !important;
    color: black;
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Tablette : 2 widgets par ligne */
@media (max-width: 1024px) {
    .widget-guest {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
    }
}

/* Mobile : 2 widget par ligne */
@media (max-width: 767px) {
    .widget-guest {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* *************************************************
  Widget Expérience (.experience)

██     ██ ██ ██████   ██████  ███████ ████████     ███████ ██   ██ ██████  ██████  ██ ███████ ███    ██  ██████ ███████ 
██     ██ ██ ██   ██ ██       ██         ██        ██       ██ ██  ██   ██ ██   ██ ██ ██      ████   ██ ██      ██      
██  █  ██ ██ ██   ██ ██   ███ █████      ██        █████     ███   ██████  ██████  ██ █████   ██ ██  ██ ██      █████   
██ ███ ██ ██ ██   ██ ██    ██ ██         ██        ██       ██ ██  ██      ██   ██ ██ ██      ██  ██ ██ ██      ██      
 ███ ███  ██ ██████   ██████  ███████    ██        ███████ ██   ██ ██      ██   ██ ██ ███████ ██   ████  ██████ ███████ 
                                                                                                                    
                                                                                                                    
************************************************* */
.experience {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1);
    transition: transform 0.4s ease;
    
}
.experience p {
  
    color: white;
    font-weight: bold;
      text-shadow:  1px 1px 2px black,
                     0 0 1em black,
                    0 0 0.2em black; 
                    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.experience h6 {
  
    color: white;
    font-size: 2em;
    text-shadow:    1px 1px 2px black,
                     0 0 1em black,
                     0 0 0.2em black; 
                     width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

}

/* Zoom au survol */
.experience:hover {
    transform: scale(1.03);
}

/* Image de fond */
.experience .elementor-cta__bg {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Overlay flouté */
.experience .elementor-cta__bg-overlay {
    backdrop-filter: blur(6px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Contenu au-dessus de l’image */
.experience .elementor-cta__content {
    position: relative;
    z-index: 3;
    padding: 30px;
    text-align: center;
    color: white;
    font-family: var(--font-ffl-paragraphe);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

/* Tous les textes à l’intérieur sont blancs, ombrés, floutés */
.experience .elementor-cta__content *,
.experience .elementor-cta__content *::before,
.experience .elementor-cta__content *::after {
    color: white !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(1px);
    
}
/* On ajoutre un fonc noir en dégradéu ::before */
.experience::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #0000000F 30%, #0000007e 70%);
    pointer-events: none;
}

/* On ajuste aussi le contenu pour qu’il passe au-dessus du ::before */
.experience .elementor-cta__content {
    position: relative;
    z-index: 3;
}



/* *************************************************
  Widget univers (.experience)
██     ██ ██ ██████   ██████  ███████ ████████    ██    ██ ███    ██ ██ ██    ██ ███████ ██████  ███████ 
██     ██ ██ ██   ██ ██       ██         ██       ██    ██ ████   ██ ██ ██    ██ ██      ██   ██ ██      
██  █  ██ ██ ██   ██ ██   ███ █████      ██ █████ ██    ██ ██ ██  ██ ██ ██    ██ █████   ██████  ███████ 
██ ███ ██ ██ ██   ██ ██    ██ ██         ██       ██    ██ ██  ██ ██ ██  ██  ██  ██      ██   ██      ██ 
 ███ ███  ██ ██████   ██████  ███████    ██        ██████  ██   ████ ██   ████   ███████ ██   ██ ███████ 
                                                                                                  
************************************************* */
.univers {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: 550px; /* ajuste selon ton design */
    padding-bottom: 20px;
    width: 30%;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
    margin-bottom: 20px;
}

/* ...autres styles comme ton hover, etc. */

@media (max-width: 767px) {
    .univers {
        width: 96%;
        min-height: 0; /* Optionnel : tu peux ajuster ici */
    }
}


/* ===================================================
   STYLES DES IMAGES (image1, image2, imagefull)

███████ ████████ ██    ██ ██      ███████     ██ ███    ███  █████   ██████  ███████ 
██         ██     ██  ██  ██      ██          ██ ████  ████ ██   ██ ██       ██      
███████    ██      ████   ██      █████       ██ ██ ████ ██ ███████ ██   ███ █████   
     ██    ██       ██    ██      ██          ██ ██  ██  ██ ██   ██ ██    ██ ██      
███████    ██       ██    ███████ ███████     ██ ██      ██ ██   ██  ██████  ███████ 
                                                                                     
                                                                                     

=================================================== */

/* -----------------------------------------------
Image1 : Petite image carrée (250x250px)

██ ███    ███  █████   ██████  ███████  ██ 
██ ████  ████ ██   ██ ██       ██      ███ 
██ ██ ████ ██ ███████ ██   ███ █████    ██ 
██ ██  ██  ██ ██   ██ ██    ██ ██       ██ 
██ ██      ██ ██   ██  ██████  ███████  ██ 
                                           
                                           

------------------------------------------------ */
.image1 {
    width: 250px;
    height: 250px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.image1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Zoom au survol */
.image1:hover img {
    transform: scale(1.1);
}

/* Affichage plein écran au clic */
.image1:active::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 9998;
}

.image1:active img {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(2);
    height: 80vh;
    max-width: 90vw;
    object-fit: contain;
    z-index: 9999;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Adaptation responsive pour Image1 */
@media (max-width: 768px) {
    .image1 {
        width: 150px;
        height: 150px;
    }

    .image1:active img {
        height: 60vh;
        max-width: 85vw;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* -----------------------------------------------
Image2 : Image rectangulaire (300x400px)

██ ███    ███  █████   ██████  ███████ ██████  
██ ████  ████ ██   ██ ██       ██           ██ 
██ ██ ████ ██ ███████ ██   ███ █████    █████  
██ ██  ██  ██ ██   ██ ██    ██ ██      ██      
██ ██      ██ ██   ██  ██████  ███████ ███████ 
                                               
                                               

------------------------------------------------ */
.image2 {
    width: 300px;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Zoom léger au survol */
.image2:hover img {
    transform: scale(1.05);
}

/* Affichage plein écran au clic */
.image2:active::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 9998;
}

.image2:active img {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(2);
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
    z-index: 9999;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* Adaptation responsive pour Image2 */
@media (max-width: 768px) {
    .image2 {
        width: 200px;
        height: 280px;
    }

    .image2:active img {
        max-height: 70vh;
        max-width: 90vw;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* -----------------------------------------------
Image3 : Image rectangulaire (320x440px)

██ ███    ███  █████   ██████  ███████ ██████  
██ ████  ████ ██   ██ ██       ██           ██ 
██ ██ ████ ██ ███████ ██   ███ █████    █████  
██ ██  ██  ██ ██   ██ ██    ██ ██           ██ 
██ ██      ██ ██   ██  ██████  ███████ ██████  
                                               
                                               

------------------------------------------------ */
.image3 {
    width: 320px;
    height: 440px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.image3 img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Zoom léger au survol */
.image3:hover img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .image3 {
        width: 240px;
        height: 320px;
    }

    .image3:active img {
        transform: translate(-50%, -50%) scale(1.5);
        max-height: 70vh;
    }
}

/* -----------------------------------------------
 ImageFull : Image remplissant 100% du conteneur

██ ███    ███  █████   ██████  ███████ ███████ ██    ██ ██      ██      
██ ████  ████ ██   ██ ██       ██      ██      ██    ██ ██      ██      
██ ██ ████ ██ ███████ ██   ███ █████   █████   ██    ██ ██      ██      
██ ██  ██  ██ ██   ██ ██    ██ ██      ██      ██    ██ ██      ██      
██ ██      ██ ██   ██  ██████  ███████ ██       ██████  ███████ ███████ 
                                                                        
                                                                        
------------------------------------------------ */
.imagefull {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.imagefull img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Zoom léger au survol */
.imagefull:hover img {
    transform: scale(1.05);
}



/* -----------------------------------------------
██ ███    ███  █████   ██████  ███████      ██████  █████  ██████  ██████  ███████ 
██ ████  ████ ██   ██ ██       ██          ██      ██   ██ ██   ██ ██   ██ ██      
██ ██ ████ ██ ███████ ██   ███ █████ █████ ██      ███████ ██████  ██████  █████   
██ ██  ██  ██ ██   ██ ██    ██ ██          ██      ██   ██ ██   ██ ██   ██ ██      
██ ██      ██ ██   ██  ██████  ███████      ██████ ██   ██ ██   ██ ██   ██ ███████ 
                                                                                   
                                                                                    
------------------------------------------------ */

.image-carre {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px; /* optionnel */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* optionnel */
}

.image-carre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* -----------------------------------------------
██████  ██    ██ ██████   ██████  ███████ ██████      ███    ███ ███████ ███    ██ ██    ██ 
██   ██ ██    ██ ██   ██ ██       ██      ██   ██     ████  ████ ██      ████   ██ ██    ██ 
██████  ██    ██ ██████  ██   ███ █████   ██████      ██ ████ ██ █████   ██ ██  ██ ██    ██ 
██   ██ ██    ██ ██   ██ ██    ██ ██      ██   ██     ██  ██  ██ ██      ██  ██ ██ ██    ██ 
██████   ██████  ██   ██  ██████  ███████ ██   ██     ██      ██ ███████ ██   ████  ██████  
                                                                                            
------------------------------------------------ */
.burger-menu {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  height: 100%;
  width:  100%;
  padding: 0;
}

.btn-billetterie-inactif{
    display:flex;
    justify-content: center;
}

.btn-billetterie-inactif a {
  display: inline-block;
  text-align: center;
  font-family: var(--poppins);
  color: #8B7E6C;
  background-color: #CCC2B3;
  padding: 15px;
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  pointer-events: none; /* rend le bouton inactif */
  opacity: 0.7; /* effet visuel d'indisponibilité */
  transition: transform 0.2s ease-in-out;
}

/* Hover désactivé volontairement (pour indiquer l’inactivité) */
.btn-billetterie-inactif a:hover {
  transform: none;
}

.btn-billetterie{
    display:flex;
    justify-content: center;
}
.btn-billetterie a{
  display: inline-block;
  text-align: center;
  font-family: var(--poppins);
  color: #F5E8D1;
  background-color: #792C1B;
  padding: 15px;
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
}

/* Animation "grow" au survol */
.btn-billetterie a:hover {
  background-color: #A03B25;
  transform: scale(1.05);
  color: #F5E8D1;
}