/* Configuration du thème somnbre */
/* Si on active le darktheme */
[data-theme="dark"] {
    .story-content h1, .story-content h3 {
        color: #ffffff;
      }
    .axe-item img:hover {
        filter: drop-shadow(0 0 25px rgb(255, 255, 255));
        transition: filter 1s ease-in-out;
    }
    .axe-item h3:hover, .axe-item p:hover {
        filter: drop-shadow(0 0 25px rgb(255, 255, 255));
        transition: filter 1s ease-in-out;
    }
    .contributor h3 {
        color: #ffffff;
        margin: 0;
    }
    .contributor p {
        color: #bd98f7; 
    }
    .presentation p {
        color: #6661fc;
    }
    .competences-table tr:hover {
        background-color: #d3aad868;
    }
    .message-popup {
        background-color: rgba(255, 255, 255, 0.73);
        color: #000000;
    }
    .icon {
        filter: invert();
    }
    .icon:hover {
        filter: invert() drop-shadow(0 0 5px rgb(221, 0, 255));
    }
    .chevron {
        border-right: 12px solid rgba(234, 0, 255, 0.672);
        border-bottom: 12px solid rgba(234, 0, 255, 0.672);
    }
    .chevron:hover {
        border-right: 12px solid rgba(245, 131, 255, 0.672);
        border-bottom: 12px solid rgba(245, 131, 255, 0.672);
        filter: drop-shadow(0 0 5px rgb(255, 0, 242));
    }
    @media (max-width: 768px) {
        .icon-container {
        filter: drop-shadow(0 0 5px rgba(245, 131, 255, 0.933));
        }
    }
    .prestations p {
        color: #b4b4b4;
    }
    .call-to-action {
        background-color: #6661fc;
        box-shadow: 0px 0px 20px #6661fc3e;
        border: 2px solid #6661fc00;
    }
    .call-to-action:hover {
        background-color: #b7b4ff;
        box-shadow: 0px 0px 20px #6661fc3e;
        border: 2px solid #6661fc;
    }
    .videoglow {
        opacity: 12%;
        filter: drop-shadow(0 0 6px rgb(255, 255, 255));
    }
    .tooltip-mariagebulle {
        background-color: #d9d7ff;
        border: 1px solid #f97effb2;
        box-shadow: 0 1px 18px rgba(233, 205, 255, 0.611);
    }
    }
/* DARKTHEME CONFIGURE*/
 

/* Fonction pour enlever les lueurs moches inadaptables sur téléphones */
@media (max-width: 900px) {
    .cadre-lueur-footer-apropos-logo {
        opacity: 0%;
    }
}
.message-popup {
    display: none;
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.73);
    color: #ffffff;
    padding: 20px;
    border-radius: 100px;
    text-align: center;
    z-index: 1000;
}
.message-popup.show {
    display: block;
}
/* Styles spécifiques pour le texte */
.story-content-videaste {
    margin-top: 9px;
}
.story-content {
    text-align: left;
    padding: 1px; 
    margin-left: 4%;
    border-radius: 10px; 
    position: relative;
    z-index: 2;
}
.story-content h1 {
    color: #000000; 
    font-size: 2.5em;
}
@media (max-width: 800px) {
    .story-content h1{
        margin-top: 0px;
        font-size: 1.2em;
    }
}
.story-content h3 {
    color: #000000; 
    font-size: 1.5em; 
    font-weight: normal; 
    line-height: 1.6;
    margin: auto; 
    width: 100%; 
    margin-top: 5%;
}
/* MAT */
.contributor {
    text-align: center;
    flex-basis: 20%;
    top : 0;
    margin-top: 210px;
    right: 0;
    margin-right: 40px;
    z-index: 10;
    position: absolute;
}
.contributor img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
@media (max-width: 700px) {
    .contributor img {
        margin-top: 20px;
        width: 70px;
        height: 70px;
    }
}
.contributor h3 {
    color: #000000;
    margin: 0;
}
.contributor h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s; 
}
.contributor h3 a:hover {
    color: #2026db;
}
.contributor p {
    font-size: 0.9em;
    color: #6c5099; 
    text-decoration: none;
    width: 100%;
    max-width: 250px;
}
@media (max-width: 1200px) {
    .contributor {
        margin-top: 270px;
    }
}
@media (max-width: 980px) {
    .contributor {
        flex-basis: 100%;
        margin-bottom: 13%;
        text-align: center;
        flex-basis: 20%;
        margin: 0px auto;
        width: 100%;
        top: -40px;
        z-index: 3;
        position: relative;
    }
    .contributor p {
        font-size: 9px;
        margin: 0px auto;
        width: 100%;
    }
}
/* Présentation de Mat */
.presentation {
    display: block;
    top: 0;   
    text-align: center;
    width: 600px;
    margin: -70px auto;
    margin-bottom: -60px;
    z-index: 2;
    position: relative;
}
.presentation p {
    color: #6661fc;
    z-index: 3;
    position: relative;
}
@media (max-width: 1200px) {
    .presentation {
        margin-top: 0px;
        width: 50%;
        margin: -40px auto;
        position: relative;
    }
}
@media (max-width: 980px) {
    .presentation {
        margin-top: 0px;
        width: 50%;
        margin: -10px auto;
        position: relative;
    }
}
@media (max-width:530px) {
    .presentation {
        text-align: center;
        top: 0;
        margin-top: -30px !important;
        margin-left: 1px;
        margin: 10px auto;
        width: 80%;
        z-index: 2;
        position: relative;
    }
    .presentation h1 {
        margin-bottom: -10px;
    }
}
/* Mat vidéo pub */
.video-mat-container {
    z-index: 3;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    margin-top: 69px;
    margin-bottom: -20px;
}
@media (max-width: 800px) {
    .video-mat-container {
        margin-top: 25px;
        margin-bottom: 16px;
    }
}
.video-mat {
    margin: 0 auto;
    width: 40%;
    z-index: 3;
    position: relative;
}
.video-mat-container iframe {
    position: absolute;
    top: 0;
    border-radius: 12px;
    width: 100%;
    height: 100%;
}
@media (max-width: 780px) {
    .video-mat {
        width: 80%;
    }
}
/* Bloc de trois vidéos référentes */
.videos-referentes {
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    margin-bottom: -160px;
    width: 69%;
    z-index: 2;
    position: relative;
}
.video-grid {
    display: flex;
    justify-content: space-between;
    z-index: 2;
}
@media (max-width: 1360px) {
    .video-grid {
        flex-direction: column;
    }
}
.video-item {
    flex: 1;
    margin: 10px;
    z-index: 2;
}
.video-grid iframe {
    border-radius: 8px;
}

/*CTA*/
.cta-container {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 4%;
    display: flex;
    justify-content: center;
}
.call-to-action {
    padding: 6px 17px;
    background-color: #6661fc91;
    box-shadow: 0px 0px 20px #6661fc3e;
    color: white;
    border: 2px solid #6661fc00;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    margin-bottom: 90px;
}
.call-to-action:hover {
    background-color: #6661fc3a;
    border: 2px solid #6661fc;
    color: #6661fc;
}
@media (max-width: 1000px) {
    .cta-container {
        width: 65%;
        gap: 20px;
    }
}
.cta-container .icon {
    width: 24px;
    height: auto;
    margin-right: 10px;
}

/* Trois axes de créativité de la marque */
.axes-creativite {
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    width: 80%;
    z-index: 3;
    position: relative;
}
.axes-grid {
    display: flex;
    justify-content: space-between;
}
.axe-item {
    flex: 1;
    margin: 10px;
}
.axe-item img {
    display: block;
    margin: 0 auto 10px auto; /* Centrer l'image et ajouter une marge en bas */
    width: 69px; /* Vous pouvez ajuster la taille selon vos besoins */
    height: auto;
    z-index: 300;
    position: relative;
}
.axe-item img:hover {
    filter: drop-shadow(0 0 25px rgb(203, 60, 255));
    transition: filter 1s ease-in-out;
}
.axe-item h3:hover, .axe-item p:hover {
    filter: drop-shadow(0 0 25px rgb(174, 0, 237));
    transition: filter 1s ease-in-out;
}
.axe-item h3 {
    z-index: 3;
    margin-top: 10px;
}
@media (max-width: 1000px) {
    .axe-item p {
    font-size: 11px;
    padding: 10px;
    }
    .axes-creativite {
        text-align: center;
        padding: 0px;
        margin: 20px auto;
        width: 100%;
    }
}
/* Section dédiée aux vidéos de mariage */
.videos-mariage {
    text-align: center;
    position: relative;
    z-index: 3;
}
.videos-wrapper {
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;
    padding: 20px;
    width: 1000px;
    margin: 0 auto;
    margin-bottom: 50px;
    gap: 40px;
}
.videos-wrapper2 {
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 20px;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    gap: 80px;
}
.formatvideoprecision2 {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 50% !important;
    top: -60px;
    font-size: 14px !important;
}
.formatvideoprecision {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 50% !important;
    top: -12px;
    font-size: 14px !important;
}
@media (max-width: 700px) {
.formatvideoprecision2 {
    width: 50% !important;
    top: -79px;
    font-size: 14px !important;
}
.formatvideoprecision {
    width: 50% !important;
    top: -12px;
    font-size: 14px !important;
}
}
.title-maried {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, rgba(51, 51, 252, 0.198), rgba(241, 44, 248, 0.294));
    width: 100%;
    height: fit-content;
    padding: 10px 0;
    z-index: 2;
}
.title-maried h3 {
    color: #4339f2ce;
    font-size: 22px;
    margin: 0 auto;
    width: 60% !important;
}
[data-theme="dark"] .title-maried h3 {
    color: #b1adff;
}
.video-container-mariage {
    flex: 1 1 45%;
    text-align: center;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}
.video-container-mariage h2 {
    font-size: 19px;
}
/* Style pour les vidéos */
.video-container-mariage iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 8px;
    transition: transform 0.2s ease;
    border: 2px solid #6016ff00;
}
/* Effet au survol des vidéos */
.video-container-mariage iframe:hover {
    transform: scale(1.01); 
    border: 2px solid #ff93fa;
}
.video-container-sport iframe:hover {
    border: 2px solid rgb(71, 39, 255);
}
.video-container-resto iframe:hover {
    border: 2px solid rgb(255, 166, 0);
}
.video-container-immo iframe, .video-container-resto iframe {
    height: 370px;
    width: 210px;
    border: 2px solid #00000000;
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.video-container-immo iframe:hover {
    transform: scale(1.01); 
    border: 2px solid rgb(255, 145, 0);
}
/* Styles pour écrans de 1000px ou moins */
@media (max-width: 1200px) {
    .videos-wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        align-items: center;
        width: 70%;
        justify-content: center;
        margin: 0 auto;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 70px;
    }
    .title-maried h3 {
        width: 100%;
    }
    .videos-wrapper2 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        align-items: center;
        width: 70%;
        justify-content: center;
        margin: 0 auto;
        flex-direction: column;
        gap: 20px;
    }
    .video-container-mariage {
        flex: 1 1 45%;
        text-align: center;
    }
    /* Style pour les vidéos */
    .video-container-mariage iframe {
        width: 100%;
        height: auto;
        max-width: 280px;
        max-height: auto;
        border-radius: 8px;
        transition: transform 0.2s ease;
        border: 2px solid #6016ff00;
    }
    .video-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .video-container-immo iframe, .video-container-resto iframe {
        height: 370px;
        width: 210px;
        border: 2px solid #00000000;
        border-radius: 8px;
        transition: transform 0.2s ease;
    }
}
/* Référence vidéo */
.reference-video {
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    width: 80%;
}
/* Texte descriptif sur le storytelling */
.storytelling {
    z-index: 2;
    text-align: left;
    padding: 20px;
    width: 70%;
    justify-content: center;
    display: block;
        margin: 0 auto;
}
.storytelling h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* Section des prestations */
.prestations {
    text-align: left;
    padding: 20px;
    width: 50%;
    margin-left: 169px;
    z-index: 3;
/*    position: relative; PS : j'ai supprimé cette ligne car ça bloquait la pop-up mariage bande annonce #mémoire */
}
.prestations p {
    text-align: left;
    padding: 20px;
    font-size: 15px !important;
    font-weight: 100;
    color: #505050;
    width: 50%;
    margin-left: 169px;
    z-index: 3;
    position: relative;
}
@media (max-width: 1000px) {
    .prestations p {
        color: #505050;
        width: 69%;
        margin-left: 0;
        margin: 0 auto;
        z-index: 3;
        position: relative;
    }
}
/* MARIAGE */
.prestations h2 {
    font-size: 2.2em;
    color: #ffb356;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
[data-theme="dark"] {
    .prestations h3 {
        color: #ffffff;
    }
}
/* ENTREPRISE/MARKETING */
.prestations-entreprise h2 {
    font-size: 2.2em;
    color: #add8e6;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-entreprise h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations-entreprise h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* RESTAURATION/CULINAIRES */
.prestations-resto h2 {
    font-size: 1.8em;
    color: #ffcb21;
    margin-left: 30px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-resto h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations-resto h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* SPORT */
.prestations-sport h2 {
    font-size: 2.2em;
    color: rgb(0, 0, 0);
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-sport h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
[data-theme="dark"] {
    .prestations-sport h2 {
        color: rgb(189, 177, 255);
    }
}
    /* CULTURE */
.prestations-culture {
    margin-bottom: 110px;
}
.prestations-culture h2 {
    font-size: 2.2em;
    color: #961b46;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-culture h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
    .prestations-culture {
        margin-bottom: 110px !important;
    }
}
.prestations-sport h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* ART/PORTRAIT */
.prestations-art h2 {
    font-size: 2.2em;
    color: #ee82ee;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-art h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations-art h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* ANIMEAUX/NATURE */
.prestations-nature h2 {
    font-size: 2.2em;
    color: #78ed78;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-nature h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations-nature h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
/* VIN */
.prestations-vin h2 {
    font-size: 2.2em;
    color: #000000;
    margin-left: 20px;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .prestations-vin h2 {
        font-size: 22px;
    }
}
.prestations-vin h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
[data-theme="dark"] {
    .prestations-vin h2 {
        color: #ecd1ff;
    }
}
/* IMMOBILIER */
.prestations-immobilier h2 {
    font-size: 2.2em;
    color: #ff7300;
    margin-left: -100px;
    margin-bottom: 10px;
}
@media (max-width: 1200px) {
    .prestations-immobilier h2 {
        margin-left: -35px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}
.prestations-immobilier h3 {
    font-size: 1.7em;
    color: #4339f2ce;
    margin-bottom: 10px;
}
[data-theme="immobilier"] {
    .prestations-vin h2 {
        color: #ff73005b;
    }
}
/**/
.prestations p {
    font-size: 1.2em;
    margin-bottom: 20px;
}
.prestations ul {
    list-style-type: disc;
    padding-left: 20px;
}
.prestations ul li {
    margin-bottom: 10px;
    font-size: 1em;
}
@media (max-width: 768px) {
    .storytelling {
        text-align: left;
        padding: 20px;
        width: 70%;
        margin-left: none;
        margin: 0 auto;
    }
    /* Section des prestations */
    .prestations {
        text-align: left;
        padding: 20px;
        width: 70%;
        margin-left: none;
        z-index: 3;
        position: relative;
        margin: 0 auto;
    }
}
/* Gestion des couleurs de banner = bennière des parties liées au sommaire */
/* Section Événements personnels */
.competences-table td.evenements-personnels {
    background:
        radial-gradient(circle at top left, rgba(255, 143, 214, 0.12), transparent 42%),
        radial-gradient(circle at top right, rgba(121, 105, 255, 0.10), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 255, 0.94));
}
#evenements-personnels .banner,
#evenements-personnels .banner-vertical {
    background-color: #ffddb4;
}
/* Section Entreprise et Marketing */
.competences-table td.entreprise-marketing {
    background-color: #81cbe44f;
}
#entreprise-marketing .banner,
#entreprise-marketing .banner-vertical {
    background-color: #add8e6;
}
/* Section Restauration et Arts culinaires */
.competences-table td.restauration-arts-culinaires {
    background-color: #ffcb217d;
}
#restauration-arts-culinaires .banner,
#restauration-arts-culinaires .banner-vertical {
    background-color: #ffcb21;
}
/* Section Événements sportifs */
.competences-table td.evenements-sportifs-culturels {
    background-color: rgb(168, 168, 255);
}
#evenements-sportifs-culturels .banner,
#evenements-sportifs-culturels .banner-vertical {
    background-color: rgb(71, 39, 255);
}
/* Section Événements culturels */
.competences-table td.evenements-culturels {
    background-color: #c78ca1;
}
#evenements-culturels .banner,
#evenements-culturels .banner-vertical {
    background-color: #961b46;
}
/* Section Art et Portraits */
.competences-table td.art-portraits {
    background-color: #ee82ee3c;
}
#art-portraits .banner,
#art-portraits .banner-vertical {
    background-color: #ee82ee;
}
/* Section Animaux et Nature */
.competences-table td.animaux-nature {
    background-color: #98fb985b;
}
#animaux-nature .banner,
#animaux-nature .banner-vertical {
    background-color: #096f09;
}
/* Section Immobilier */
.competences-table td.immobilier {
    background-color: #ff73003f;
}
#immobilier .banner,
#immobilier .banner-vertical {
    background-color: rgb(255, 115, 0);
}
[data-theme="dark"] {
    #immobilier .banner,
    #immobilier .banner-vertical {
    background-color: rgb(252, 151, 68);
}
}
/* Section VIN */
.competences-table td.vingnistique {
    background-color: #a162ff5b;
}
#vingnistique .banner,
#vingnistique .banner-vertical {
    background-color: #a162ff;
}
/* Section AUTREBARRE */
#AUTREBARE .banner,
#AUTREBARE .banner-vertical-last {
    background-color: #98fb98;
}
.banner-vertical {
    height: calc(auto);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    width: 50px;
}
.banner-vertical-last {
    position: absolute;
    right: 0;
    z-index: 3;
    width: 50px;
    height: 1990px;
}
@media (max-width: 2056px) and (max-height: 1329px) {
    .banner-vertical-last {
        height: 2290px;
    }
    .banner-vertical {
        height: 2930px;
    }
    .banner-vertical-mariage {
        height: 200px;
    }
}
@media (max-width: 1000px) {
    .banner-vertical {
        width: 30px;
        height: 3700px;
    }
    .banner-vertical-last {
        width: 30px;
        height: 2930px;
    }
}
/* Bannières des compétences */
.competence .banner {
    padding: 20px;
    text-align: center;
    color: rgb(0, 0, 0);
    position: relative;
    z-index: 3;
}
.competence .content {
    padding: 20px;
    text-align: left;
}
.competence .more-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000000;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}
.competence .more-info:hover {
    background-color: #45004b;
}
/* Sommaire des compétences */
.competences-table {
    width: 209px;
    scale: 0.8;
    padding: 10px;
    position: fixed;
    z-index: 20000;
    top: 96px;
    right: 89px;
    color: #000000;
    border-radius: 13px;
    border: 2px solid #6661fc83;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #ece9ff;
    transition: 0.5s;
    box-shadow: 0 2px 10px rgba(113, 70, 150, 0.612);
}
#competences-table {
    display: none;
}
#competences-table.active {
    display: block;
}
.competences-table:hover {
    border: 2px solid #6661fccd;
    scale: 0.9;
}
.evenements-personnels:hover {
    color: #6661fccd;
}
.restauration-arts-culinaires:hover {
    color: #6661fccd;
}
.evenements-sportifs-culturels:hover {
    color: #6661fccd;
}
.entreprise-marketing:hover {
    color: #6661fccd;
}
.animaux-nature:hover {
    color: #6661fccd;
}
.vingnistique:hover {
    color: #6661fccd;
}
.evenements-culturels:hover {
    color: #6661fccd;
}
.immobilier:hover {
    color: #6661fccd;
}
.referencevidpho:hover {
    color: #6661fccd;
}
#cursor-texto {
    background-color: rgb(233, 233, 233);
    color: rgba(13, 4, 32, 0.536);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    transition: opacity 1s ease-in-out;
}
.competences-table h2 {
    text-align: center;
    position: relative;
    z-index: 2;
    font-size: 19px;
    margin-bottom: 5px;
    margin-top: -2px;
    color: #6661fc9c;
}
#competences-table {
    z-index: 10;
}
.competences-table p {
    text-align: center;
    position: relative;
    color:#868686ba;
    font-size: 13px;
    margin-bottom: 20px;
    margin-top: 8px;
}
.competences-table table {
    width: 100%;
    border-collapse: collapse;
    background:
        radial-gradient(circle at top left, rgba(255, 143, 214, 0.12), transparent 42%),
        radial-gradient(circle at top right, rgba(121, 105, 255, 0.10), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 255, 0.94));
}
.competences-table th, .competences-table td {
    padding: 10px;
    text-align: left;
    font-size: 13px;
}
.competences-table tr:hover {
    background-color: #d3aad8;
}
.competences-table td a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
@media (max-width: 1200px) {
    .competences-table {
        display: none;
    }
}
/* SOmmaire flottant */
.floating-summary {
    position: fixed;
    z-index: 100;
    scale: 0.88;
    opacity: 0.7;
    top: 190px; /* Position verticale */
    right: 80px; /* Position à droite */
    width: 250px;
    border: 1px solid #ddd;
    border-radius: 10px;
    z-index: 1000;
    padding: 10px;
    display: none;
}
.floating-summary:hover {
    opacity: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.floating-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.floating-summary td {
    margin-bottom: 10px;
}
.floating-summary li a {
    display: block;
    width: 100%;
    height: 100%;
}
.floating-summary a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}
[data-theme="dark"] {
    .floating-summary {
        opacity: 0.75;
        border: 1px solid #ffffff;
    }
    .floating-summary:hover {
        opacity: 1;
        box-shadow: 0 1px 8px rgba(255, 255, 255, 0.281);
    }
    .floating-summary a {
        color: #dbdbdb;
    }
}
/* Afficher sur les écrans à partir de 1200px */
@media (min-width: 1200px) {
    .floating-summary {
        display: block;
    }
}
/* Sur téléphone, afficher à partir de 1500px */
@media (max-width: 767px) and (min-height: 1500px) {
    .floating-summary {
        display: block;
    }
}
.hidden {
    display: none !important;
}
.floating-summary li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px; /* Pour un effet similaire aux cellules du tableau */
}

/* Réutiliser les couleurs définies pour chaque section */
.floating-summary .evenements-personnels {
    background:
        radial-gradient(circle at top left, rgba(255, 143, 214, 0.10), transparent 42%),
        radial-gradient(circle at top right, rgba(121, 105, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 247, 255, 0.92));
    border: solid 2px #00000000;
}

.floating-summary .entreprise-marketing {
    background-color: #81cbe44f;
    border: solid 2px #00000000;
}

.floating-summary .evenements-sportifs-culturels {
    background-color: rgba(0, 0, 255, 0.313);
    border: solid 2px #00000000;
}

.floating-summary .restauration-arts-culinaires {
    background-color: #ffff004e;
    border: solid 2px #00000000;
}

.floating-summary .art-portraits {
    background-color: #ee82ee3c;
    border: solid 2px #00000000;
}

.floating-summary .animaux-nature {
    background-color: #98fb985b;
    border: solid 2px #00000000;
}
.floating-summary .immobilier-som {
    background-color: #ff7300;
    border: solid 2px #00000000;
}
/* Ajout d'un effet au survol */
.floating-summary li:hover {
    background-color: #f5f7ff00;
    border: solid 2px #6661fcb8;
    cursor: pointer;
}
/* Styles pour le bouton "Revenir au sommaire" */
.back-to-summary {
    display: block;
    margin: 2px auto;
    padding: 8px 13px;
    background-color: #000000;
    color: white;
    text-align: center;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none; 
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.3s, transform 0.2s; 
    font-family: 'Bahnschrift', sans-serif;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.643);
    margin-bottom: 10%;
}
.back-to-summary:hover {
    background-color: #3709428d; 
    transform: scale(1.1); 
}
/* Style pour le focus, important pour l'accessibilité */
#back-to-summary {
    box-shadow: 0 0 0 3px rgba(52,152,219,0.5); /* Lueur externe pour indiquer le focus */
}






/* Si on active le darktheme */
[data-theme="dark"] {
    .story-content h1, .story-content h3 {
        color: #ffffff;
      }
      .contact-page {
        color: #ffffff;
    }
    .company-info {
        background-color: #29194aa6; /* Un fond clair pour faire ressortir la section */
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Ombre légère pour un effet de profondeur */
        color: #333; /* Couleur de texte sombre pour un contraste optimal sur fond blanc */
    }
    
    .company-info h2 {
        color: #0056b3; /* Couleur bleue pour le titre pour un accent visuel */
    }
    .company-info a {
        color: #0056b3; /* Couleur bleue pour les liens pour correspondre au titre */
    }
    .contact-page h1, .contact-page h2 {
        color: #a374ff;
    }
    .contact-page p, .contact-page li {
        color: #ffffff;
    }
    .social-links-contact a:hover {
        filter: drop-shadow(0 1px 5px rgb(255, 255, 255));
    }
    }
/* DARKTHEME CONFIGURE*/

/* Styles spécifiques pour fiche contact */
.screenofiphone {
    position: absolute;
    z-index: 4;
    top : 2020px;
    right: 0;
    width: 1769px;
    margin: 0 auto;
}
.screenofiphone img {
    position: absolute;
    z-index: 3;
    width: 15%;
    margin-right: 190px;
    right: 0;
}
.contact-page {
    position: absolute;
    z-index: 4;
    top : 2000px;
    right: 0;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: #000000;
    padding: 20px;
    margin: 20px auto;
    max-width: 197px;
    margin-right: 213px;
    border-radius: 16px;
    margin-bottom: 10%;
}
@media (max-width: 1600px) {
    .screenofiphone {
        top : 1960px;
    }
    .screenofiphone img {
        margin-right: 106px;
    }
    .contact-page {
        margin-right: 130px;
        top : 1940px;
    }
}
@media (max-width: 1360px) {
    .screenofiphone {
        top : 2320px;
    }
    .screenofiphone img {
        margin-right: 106px;
    }
    .contact-page {
        margin-right: 130px;
        top : 2310px;
    }
}
@media (max-width: 1140px) {
    .screenofiphone {
        position: relative;
        z-index: 4;
        right: none;
        top : 50px;
        width: 320px;
        margin: 0 auto;
    }
    .screenofiphone img {
        position: relative;
        z-index: 3;
        width: 100%;
        margin-right: none;
        right: none;
        margin: 0 auto;
    }
    .contact-page {
        position: relative;
        z-index: 4;
        max-width: 100%;
        margin: 0 auto;
        right: none;
        padding: 20px;
        top : -520px;
        width: 220px;
        border-radius: none;
        margin-bottom: -400px;
    }
}
@media (max-width: 500px) {
    .contact-page {
        margin-right: 124px;
    }
}
.contact-page h1, .contact-page h2 {
    color: #4339f2ce;
    margin-top: 20px;
}
.contact-page h1 {
    font-size: 20px;
    margin-bottom: 1px;
}
.contact-page h2 {
    font-size: 18px;
    margin-bottom: 0px;
}
.contact-page p, .contact-page li {
    font-size: 10px;
    color: #000000;
    margin-top: 5px;
}
.contact-page a {
    color: #0056b3;
    text-decoration: none;
}
.contact-page a:hover {
    text-decoration: underline;
}
.space {
    margin-top: 18px;
}
.contact-page ul {
    list-style: none;
    padding: 0;
}
.contact-page ul li {
    display: inline;
    margin-right: 10px;
}
.contact-page form {
    margin-top: 10px;
}
.contact-page label {
    display: block;
    margin-bottom: 5px;
    font-size: small;
}
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="tel"],
.contact-page textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.contact-page button {
    background-color: #0056b3;
    color: white;
    padding: 4px 6px;
    position: relative;
    margin: 0 auto;
    width: 100%;
    margin-left: 9px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.contact-page button:hover {
    background-color: #003d80;
}
.contact-page iframe {
    width: 100%;
    height: 450px;
    border: none;
    margin-top: 20px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .contact-page {
        padding: 10px;
        max-width: 80%;
        position: relative;
    }
    .contact-page h1 {
        font-size: 20px;
    }
    .contact-page h2 {
        font-size: 16px;
    }
    .contact-page p, .contact-page li {
        font-size: 14px;
    }
}
/* Flèche de retour au sommaire */
.chevron {
    position: fixed;
    z-index: 1000;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-right: 12px solid rgba(0, 34, 255, 0.672);
    border-bottom: 12px solid rgba(0, 34, 255, 0.672);
    transform: rotate(-135deg);
    top: calc(100vh - 5rem);
    left: 50%;
    transform: translateX(-50%) rotate(-135deg);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
.chevron:hover {
    border-right: 12px solid rgba(100, 120, 255, 0.672);
    border-bottom: 12px solid rgba(100, 120, 255, 0.672);
    transform: translateX(-50%) rotate(-135deg) scale(1.1);
    filter: drop-shadow(0 0 5px rgb(0, 136, 255));
}
@media (max-width: 768px) {
    .chevron {
        top: calc(100vh - 9rem);
    }
}
/* Styles pour le tooltip */
.tooltip {
    color: rgb(255, 255, 255);
    background-color: #989cff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1001;
    position: absolute;
    top: calc(100vh - 63rem);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: none;
}
/* Styles pour les icônes */
.icon-container {
    position: fixed;
    top : 60%;
    right: 3%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1000;
    filter: drop-shadow(0 0 5px rgba(100, 120, 255, 0.672));
    align-items: center;
}
.icon-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s;
}
.icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgb(0, 51, 255));
}
.icon-wrapper:hover .tooltip {
    display: block;
}
@media (max-width: 668px) {
    .icon-container {
    position: fixed;
    top : calc(100vh - 25rem);
    right: 5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1000;
    filter: drop-shadow(0 0 5px rgba(100, 120, 255, 0.672));
    align-items: center;
    }
    .icon {
        width: 35px;
        height: 35px;
        cursor: pointer;
        transition: transform 0.2s;
    }
}
@media (max-height: 800px) and (orientation: portrait), 
       (max-width: 1024px) and (orientation: portrait) {
        .icon-container {
            position: fixed;
            top : calc(100vh - 25rem);
            right: 5%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            gap: 20px;
            z-index: 1000;
            filter: drop-shadow(0 0 5px rgba(100, 120, 255, 0.672));
            align-items: center;
            }
}
/* Intégration de lueur en fond = charte graphique */
.container-videoglow {
    display: block;
    position: relative;
    z-index: 0;
}
.videoglow {
    position: absolute;
    z-index: 0;
    top: -273px;
    filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
    left: 0;
    width: 100%;
    height: 960px;
    opacity: 69%;
}
@media (max-width: 1400px) {
    .videoglow  {
        height: 910px;
    }
}
@media (max-width: 1200px) {
    .videoglow  {
        height: 860px;
    }
}
@media (max-width: 1000px) {
    .videoglow  {
        height: 950px;
        top: -455px;
    }
}
@media (max-width: 900px) {
    .videoglow  {
        top: -435px;
    }
}
@media (max-width: 700px) {
    .videoglow  {
        top: -405px;
        height: 800px;
    }
}




/* Bulle d'information centrée SPORT */
/* Icone "i" */
.info-icon-sport, .info-icon-sport2 {
    display: inline-flex;
    position: relative;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    background-color: rgb(71, 39, 255);
    border: 2px solid transparent;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
}
.info-icon-sport:hover, .info-icon-sport2:hover {
    border: 2px solid rgb(71, 39, 255);
    background-color: rgba(71, 39, 255, 0.488);
    transition-duration: 0.3s;
}
.tooltip-sport {
    display: none;
    color: #000000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrer la bulle horizontalement et verticalement */
    background-color: #fff;
    border: 2px solid rgb(71, 39, 255);
    border-radius: 8px;
    padding: 15px;
    width: 400px;
    box-shadow: 0 4px 8px rgb(71, 39, 255);
    z-index: 1044400 !important;
}
@media (max-width: 800px) {
    .tooltip-sport {
        width: 340px;
    }
}
.tooltip-sport.active {
    display: block;
}
.tooltip-sport p {
    margin: 0;
    font-size: 15px;
    text-align: left;
    font-weight: 500;
}
.tooltip-header-sport {
    margin-bottom: 15px;
    color: rgba(0, 0, 255, 0.8);
    font-size: 24px;
    text-align:center;
    font-weight: bold;
}
[data-theme="dark"] {    
    .info-icon-sport:hover {
        border: 2px solid rgb(145, 125, 255);
        background-color: rgba(71, 39, 255, 0.488);
        transition-duration: 0.3s;
    }
    .tooltip-sport {
    background-color: #d9d7ff;
    border: 1px solid rgba(67, 67, 255, 0.8);
    box-shadow: 0 1px 8px rgb(255, 255, 255);
}
}
/* Bulle d'information centrée */
/* Icone "i" */
.info-icon-mariagebulle, .info-icon-mariagebulle2, .info-icon-mariagebulle3 {
    display: inline-flex;
    position: relative;
    z-index: 50;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: auto;
    background-color: #eb84ef;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
}
.info-icon-mariagebulle:hover, .info-icon-mariagebulle2:hover, .info-icon-mariagebulle3:hover {
    color: #fe03fa;
    border: 1px solid #fe03fa;
    background-color: #fface7;
    transition-duration: 0.3s;
}
/* Bulle Pop-up textuelle */
.tooltip-mariagebulle, .tooltip-mariagebulle2, .tooltip-mariagebulle3 {
    display: none;
    color: #000000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrer la bulle horizontalement et verticalement */
    background-color: #fff;
    border: 1px solid #b017b8;
    border-radius: 8px;
    padding: 15px;
    width: 400px;
    box-shadow: 0 4px 18px rgb(0, 0, 0);
    z-index: 1000;
}
@media (max-width: 800px) {
    .tooltip-mariagebulle {
        width: 340px;
    }
}
.tooltip-mariagebulle.active {
    display: block;
}
.tooltip-mariagebulle2.active {
    display: block;
}
.tooltip-mariagebulle3.active {
    display: block;
}
.tooltip-mariagebulle p {
    margin: 0;
    font-size: 15px;
    text-align: left;
    font-weight:100;
}
.tooltip-header-mariagebulle {
    margin-bottom: 15px;
    color: #ee82ee;
    font-size: 24px;
    text-align:center;
    font-weight: bold;
}
.video-container {
    z-index: 2;
    padding: 8px;
    height: 700px;
    margin-bottom: 169px;
}
.gallery-section {
    margin-top: 29px;
}
.discuterbtn {
    margin-top: 10px;
}
@media (max-width: 1200px) {
    .discuterbtn {
        width: 100%;
        margin-top: 30px;
        max-width: none;
    }
    .cta-container {/*!Supprimer si ça pause probleme*/
        width: 100%;
        max-width: none;
    }
    .video-container {
        height: 800px;
        margin-bottom: 90px;
    }
}
@media (max-width: 600px) {
    .video-container {
        height: 899px;
    }
    .gallery-section {
        z-index: 1000 !important;
        width: 75%;
    }
}
/*Style pour modifier les vidéo référentes correctement*/
.video-container {
    flex-wrap: wrap; /* Les vidéos iront à la ligne si nécessaire */
    justify-content: center; /* Centrer les vidéos */
    padding: 16px; /* Ajouter de l'espace autour */
}
/* Style pour les vidéos */
.video-container iframe {
width: auto; /* Prendre toute la largeur du conteneur parent */
height: auto; /* Respecter le ratio 16:9 */
border-radius: 8px; /* Coins arrondis pour plus de style */
transition: transform 0.2s ease; /* Animation au survol */
}

/* Effet au survol des vidéos */
.video-container iframe:hover {
transform: scale(1.03); /* Zoom léger */
border-color: #6016ff; /* Changer la couleur de la bordure */
}
.linkout-maryme {
    position: relative;
    justify-content: center;
    width: auto;
    max-width: 12px;
    height: auto;
    max-height: 12px;
}
.cadre-lueur-photo2 {
    position: absolute;
    z-index: 1;
    top: 2000px;
    left: 0;
    opacity: 0.69;
    width: 100%;
    height: 100%;
}
.trust-section {
    margin-bottom: 50px;
}
/*FAQ*/
#faq {
    margin-top: 120px;
    margin-bottom: 90px;
}
.container-lateralglow-01video {
    top: -3700px;
}
.lateralglow-01video {
    height: 3500px;
}
@media (max-width: 1360px) {
    .container-lateralglow-01video {
        top: -4000px;
    }
    .lateralglow-01video {
        height: 3500px;
    }
}
@media (max-width: 1200px) {
    .container-lateralglow-01video {
        top: -4200px;
    }
    .lateralglow-01video {
        height: 3500px;
    }
}
@media (max-width: 900px) {
    .container-lateralglow-01video {
        top: -2600px;
    }
    .lateralglow-01video {
        height: 3500px;
    }
}
@media (max-width: 840px) {
    .lateralglow-01video {
        display: none;
    }
}
/* Sommaire repliable */
/* Bouton pour afficher/masquer */
.toggle-button {
    position: fixed;
    bottom: -16px;
    display: flex;
    left: -16px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    padding: 3px;
    font-size: 24px;
    color: #4a90e2;
    border-radius: 50%;
    align-items: center;
    background-color: #6661fc14;
    box-shadow: 0px 0px 7px #ffffff;
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.toggle-button:hover {
    color: #357abd;
    background-color: #6661fc25;
}

/* Effet de bouton cliqué */
.toggle-button.clicked {
    background-color: #6661fc45;
    color: #2c5aa0;
    box-shadow: 0px 0px 12px #6661fc80;
    transform: scale(0.95);
}

.toggle-button.clicked:hover {
    background-color: #6661fc55;
    color: #1e3f73;
}

/* Effet au clic momentané */
.toggle-button:active {
    transform: scale(0.9);
    background-color: #6661fc60;
}

.toggle-button img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

/* Sommaire repliable */
#sommaire-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    border-radius: 19px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#sommaire-content.active {
    max-height: 500px;
}


/* Gestion vidéo */
/* prestavideo-image-section */
.prestavideo-image-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
    margin-top: -50px;
    margin-bottom: 250px;
}
@media (max-width: 700px) {
    .prestavideo-image-section {
        position: relative;
        width: 190px;
        right: none;
        margin-top: 70px;
    }
}
#prestavideo-image {
    position: relative;
    z-index: 3;
    top: 60px;
    height: auto;
    width: 100%;
    max-width: 450px;
    transition: filter 1.5s ease-in-out;
    border-radius: 10px;
    border: 2px solid #00000096;
    /*cursor: pointer;*/
}
[data-theme="dark"] {
    #prestavideo-image {
        border: 2px solid #6d6ab2;
        filter: drop-shadow(0px 0px 7px #6d6ab2);
        /*cursor: pointer;*/
    }
}
.container-prestaflex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-bottom: 70px;
}
.text-section {
    flex: 1;
    padding: 0px;
    flex: 0 0 50%;
}
.video-section {
    flex: 1;
    flex: 0 0 50%;
    padding: 0px;
}
.prestationsprecision h2 {
    text-align: center;
}
.prestations {
    text-align: left;       
    background-color: #6456c02d;
    box-shadow: 0 0 10px #6456c02d;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    margin-top: 160px;
    margin-bottom: -60px;
    margin-left: 0px;
    z-index: 3;
}
@media (max-width: 1220px) {
    .text-section,
    .video-section {
        flex: 0 0 100%; /* Chaque section prendra 100% de la largeur */
        padding: 10px; /* Réduire le padding pour les petits écrans */
    }
    #prestavideo-image {
        top: 0px;
        height: auto;
        width: 700px;
        max-width: 300px;
    }
    .prestations {
        margin-top: 30px;
        width: 72%;
        margin-left: 70px;
    }
}
.prestavideo-vin-shadowmariage {
    filter: drop-shadow(0px 0px 20px #c36aff);
    position: relative;
    z-index: 200;
}
.cadre-lueur-footer-apropos-logo {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}
.prestavideo-vin-shadowresto {
    filter: drop-shadow(0px 0px 7px #ffcb21);
}
.prestavideo-vin-shadowvin {
    filter: drop-shadow(0px 0px 7px #a162ff);
}
.prestavideo-vin-shadowentreprise {
    filter: drop-shadow(0px 0px 7px #add8e6);
}
.prestavideo-vin-shadowsport {
    filter: drop-shadow(0px 0px 7px rgb(19, 39, 255));
}
.prestavideo-vin-shadowculture {
    filter: drop-shadow(0px 0px 7px #ff703c);
}
.prestavideo-vin-shadowdocu {
    filter: drop-shadow(0px 0px 7px #096f09);
}
.prestavideo-vin-shadowart {
    filter: drop-shadow(0px 0px 7px #ee82ee);
}
.prestavideo-vin-shadoimmo {
    filter: drop-shadow(0px 0px 7px #ff7300);
}
/* GOOGLE CALENDAR */
.calendar-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8); /* Fond sombre semi-transparent */
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.calendar-popup {
position: relative;
background: #fff; /* Fond blanc */
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: popupFadeIn 0.3s ease-out; /* Animation pour une apparition fluide */
max-width: 95%; /* Empêche la popup de dépasser les dimensions de l'écran */
width: auto; /* Laisse les dimensions s'adapter */
}
/* Dimensions pour iframe, basées sur la largeur de l'écran */
.calendar-popup iframe {
border: none;
width: 600px; /* Taille par défaut */
height: 400px; /* Taille par défaut */
}
/* Responsivité */
@media (min-width: 1300px) {
.calendar-popup iframe {
    width: 1000px;
    height: 569px;
}
}
@media (min-width: 1000px) and (max-width: 1299px) {
.calendar-popup iframe {
    width: 700px;
    height: 400px;
}
}
@media (max-width: 990px) {
.calendar-popup iframe {
    width: 300px;
    height: 700px;
}
}
.close-popup {
position: absolute;
top: 10px;
right: 30px;
background: transparent;
border: none;
font-size: 24px;
font-weight: bold;
color: #000;
cursor: pointer;
z-index: 10001;
}
.close-popup:hover {
color: #ff0000; /* Changement de couleur au survol */
}
@keyframes popupFadeIn {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.undertablemarge {
    margin-bottom: -70px;
}
.banner {
    margin-top: -96px;
    height: 120px;
}
.banner h1 {
    margin-top: 80px;
}
@media (max-width: 1370px) {
    .banner {
        margin-top: -270px;
        height: 290px;
    }
    .banner h1 {
        margin-top: 250px;
    }
}
@media (max-width: 800px) {
    .banner {
        margin-top: -290px;
        height: 320px;
    }
    .banner h1 {
        margin-top: 263px;
        font-size: 16px;
    }
}
.dropdown-img-presta {
    position: relative;
    width: 40px;
    margin-right: 10px;
    top: 7.5px;
}
.josebove {
    font-size: 11px;
}
@media (max-width: 400px) {
    .prestations h3, .prestations ul {
        width: 90%;
        margin-left: -30px;
    }
    #prestavideo-image {
        width: 97%;
    }
}
/* Carrousel infini */
.carousel {
    overflow: hidden;
    background-color: #000;
    padding: 10px;
}
#boxedefilement {
    margin-top: 0px;
}
.carousel-inner {
    position: relative;
    z-index: 3;
    display: flex;
    /* L’animation est déclenchée en JS */
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Style des images */
.carousel-inner img {
    display: block;
    max-height: 200px;
    max-width: 350px;
    border-radius: 3px;
    height: auto;
    width: auto;
    margin-right: 10px;
}

/* Animation qui déplace le conteneur d'images */
@keyframes scroll {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(calc(-1 * var(--scroll-distance)));
}
}
/* 3triple picture theme */
[data-theme="dark"] #gallery-theme-selector {
  color: #f7f7fa;
}
[data-theme="dark"] .gallery-item {
  background: #23232b;
  box-shadow: 0 4px 18px rgba(10,10,20,0.40);
}
/* INUTIL
[data-theme="dark"] .gallery-item .play-overlay {
  background: rgba(60, 40, 64, 0);
}*/

[data-theme="dark"] .gallery-item .play-btn {
  background: #ffddb4;
}

[data-theme="dark"] .theme-btn {
  background: #ffddb4;
  color: #000000;
}

[data-theme="dark"] .theme-btn.selected,
[data-theme="dark"] .theme-btn:active {
  background: #ffdcb1;
border: solid 2px #ffffff;
  filter: drop-shadow(0 0 10px #f7ede0ab);
}

[data-theme="dark"] .theme-btn.random {
  background: #ffc99f;
  color: #ffffff;
}

[data-theme="dark"] .theme-btn.random.selected {
  background: #ffdcb1;
border: solid 2px #ffffff;
  filter: drop-shadow(0 0 10px #a25f0dab);
}
#gallery-theme-selector {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
#gallery-theme-selector .theme-buttons {
    flex: 0 0 auto;
    max-width: 180px;
    flex-direction: column;
    order: -1;
}
#gallery-theme-selector .gallery-nav-wrapper {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 1200px) {
    #gallery-theme-selector {
        flex-direction: column;
        align-items: center;
        max-width: 550px;
    }
    #gallery-theme-selector .theme-buttons {
        max-width: none;
        flex-direction: row;
        order: 0;
    }
}
.gallery-grid {
  display: flex;
  gap: 32px;
  filter: drop-shadow(0 18px 34px rgba(140, 114, 221, 0.18));
  margin-bottom: 20px;
  justify-content: center;
}
/* Wrapper : flèches sur les côtés de la grille */
.gallery-nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.gallery-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cbf 0%, #b388eb 100%);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.3s;
  box-shadow: 0 3px 10px rgba(124, 92, 191, 0.25);
  z-index: 2;
}
.gallery-nav-btn:hover:not(:disabled):not(.gallery-nav-btn--idle) {
  transform: scale(1.1);
}
.gallery-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.gallery-nav-btn--idle {
  opacity: 0.03;
  pointer-events: none;
}
.gallery-nav-counter {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  margin-top: 6px;
  min-height: 1.2em;
}
[data-theme="dark"] .gallery-nav-btn {
  background: linear-gradient(135deg, #5a3d8a 0%, #9b6dd7 100%);
}
[data-theme="dark"] .gallery-nav-counter {
  color: #bbb;
}

/* Mobile : flèches côte à côte sous les images */
@media (max-width: 768px) {
  .gallery-nav-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .gallery-grid {
    order: 1;
    width: 100%;
    margin-bottom: 12px;
  }
  .gallery-nav-prev {
    order: 2;
    width: 36px;
    height: 36px;
  }
  .gallery-nav-counter {
    order: 3;
  }
  .gallery-nav-next {
    order: 4;
    width: 36px;
    height: 36px;
  }
}
[data-theme="dark"] {
.gallery-grid {
  filter: drop-shadow(0 22px 38px rgba(13, 8, 40, 0.45));
}
}
.gallery-grid {
  min-height: 300px;
}
.gallery-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(73, 46, 128, 0.12),
    0 6px 14px rgba(255, 255, 255, 0.35);
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}/* INUTIL
.gallery-item .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 7, 7, 0.882);
}*/
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 10, 22, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gallery-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.gallery-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: zoom-out;
}
.gallery-modal-content {
  position: relative;
  z-index: 2;
  width: fit-content;
  height: fit-content;
  max-width: min(760px, 85vw);
  max-height: min(85vh, 700px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  background: #050312;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-modal-content.story-mode {
  width: min(520px, 70vw);
  max-height: min(95vh, 900px);
}
.gallery-modal-content img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(85vh, 700px);
  object-fit: contain;
  background: #0d0c16;
  display: block;
}
.gallery-modal-content img.story-mode {
  max-width: 100%;
  max-height: min(95vh, 900px);
  object-fit: contain;
}
.gallery-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-modal-close:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}
body.gallery-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .gallery-modal {
    padding: 1rem;
  }
  .gallery-modal-content {
    max-width: 80%;
    max-height: 80%;
    border-radius: 16px;
  }
  .gallery-modal-close {
    top: 6px;
    right: 6px;
    background: rgba(19, 19, 25, 0.85);
  }
}

.theme-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.theme-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(249, 243, 255, 0.92));
  color: #211632;
  border: solid 1px rgba(151, 126, 220, 0.18);
  padding: 8px 22px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 10px 24px rgba(90, 65, 148, 0.08);
}
.theme-btn.selected,
.theme-btn:active {
  background: linear-gradient(135deg, #fffdfd 0%, #eadbff 48%, #d6cbff 100%);
  border: solid 1px rgba(140, 114, 221, 0.5);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.72),
    0 14px 28px rgba(111, 89, 190, 0.18);
}
.theme-btn.random {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #c9b8ff 0%, #f3bedf 100%);
  color: #ffffff;
  border-color: rgba(160, 125, 219, 0.22);
  box-shadow: 0 12px 28px rgba(124, 92, 201, 0.18);
}
.theme-btn.random.selected {
  background: linear-gradient(135deg, #c4b2ff 0%, #eaabd4 100%);
  border: solid 1px rgba(140, 114, 221, 0.5);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.72),
    0 14px 28px rgba(111, 89, 190, 0.22);}
.theme-btn {
  position: relative;
  overflow: hidden;
  /* Autres styles existants... */
}

.theme-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(197, 177, 255, 0.28), rgba(255, 255, 255, 0));
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.theme-btn:hover::after {
  transform: translateX(0);
}
.theme-btn-label {
  position: relative;
  z-index: 1;
}
.theme-btn-dice {
  --dice-size: 22px;
  position: relative;
  z-index: 1;
  width: var(--dice-size);
  height: var(--dice-size);
  min-width: var(--dice-size);
  min-height: var(--dice-size);
  max-width: var(--dice-size);
  max-height: var(--dice-size);
  aspect-ratio: 1 / 1;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--dice-size);
  box-sizing: border-box;
  filter: drop-shadow(0 6px 10px rgba(81, 50, 136, 0.16));
}
.theme-btn-dice-face {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  box-sizing: border-box;
  border-radius: 7px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98), rgba(246, 241, 255, 0.94) 55%, rgba(229, 218, 255, 0.88) 100%);
  border: 1px solid rgba(129, 89, 212, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 8px rgba(185, 155, 238, 0.2);
}
.theme-btn-dice-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #50307c;
  opacity: 0;
  transition: none;
}
.theme-btn-dice .dot-1 { top: 4px; left: 4px; }
.theme-btn-dice .dot-2 { top: 4px; right: 4px; }
.theme-btn-dice .dot-3 { top: 50%; left: 4px; transform: translateY(-50%); }
.theme-btn-dice .dot-4 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.theme-btn-dice .dot-5 { top: 50%; right: 4px; transform: translateY(-50%); }
.theme-btn-dice .dot-6 { bottom: 4px; left: 4px; }
.theme-btn-dice .dot-7 { bottom: 4px; right: 4px; }
.theme-btn-dice[data-face="1"] .dot-4,
.theme-btn-dice[data-face="2"] .dot-1,
.theme-btn-dice[data-face="2"] .dot-7,
.theme-btn-dice[data-face="3"] .dot-1,
.theme-btn-dice[data-face="3"] .dot-4,
.theme-btn-dice[data-face="3"] .dot-7,
.theme-btn-dice[data-face="4"] .dot-1,
.theme-btn-dice[data-face="4"] .dot-2,
.theme-btn-dice[data-face="4"] .dot-6,
.theme-btn-dice[data-face="4"] .dot-7,
.theme-btn-dice[data-face="5"] .dot-1,
.theme-btn-dice[data-face="5"] .dot-2,
.theme-btn-dice[data-face="5"] .dot-4,
.theme-btn-dice[data-face="5"] .dot-6,
.theme-btn-dice[data-face="5"] .dot-7,
.theme-btn-dice[data-face="6"] .dot-1,
.theme-btn-dice[data-face="6"] .dot-2,
.theme-btn-dice[data-face="6"] .dot-3,
.theme-btn-dice[data-face="6"] .dot-5,
.theme-btn-dice[data-face="6"] .dot-6,
.theme-btn-dice[data-face="6"] .dot-7 {
  opacity: 1;
}
.theme-btn.random.is-rolling .theme-btn-dice {
  animation: themeDiceRoll 1.05s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes themeDiceRoll {
  0% { transform: rotate(0deg) scale(1); }
  18% { transform: rotate(-16deg) translateY(-1px) scale(1.04); }
  45% { transform: rotate(180deg) scale(1.12); }
  72% { transform: rotate(320deg) translateY(-2px) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}
[data-theme="dark"] .gallery-item {
  background: rgba(16, 13, 36, 0.92);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(184, 168, 255, 0.08);
}
[data-theme="dark"] .theme-btn {
  background: linear-gradient(180deg, rgba(38, 29, 74, 0.9), rgba(53, 38, 92, 0.9));
  color: #f5f2ff;
  border-color: rgba(184, 168, 255, 0.16);
  box-shadow: 0 14px 28px rgba(7, 4, 20, 0.24);
}
[data-theme="dark"] .theme-btn.selected,
[data-theme="dark"] .theme-btn:active {
  background: linear-gradient(135deg, #7f6af5 0%, #ae7ce6 52%, #d889c2 100%);
  color: #ffffff;
  border-color: rgba(220, 212, 255, 0.26);
  box-shadow:
    0 0 0 3px rgba(16, 12, 34, 0.6),
    0 16px 32px rgba(7, 4, 20, 0.35);
}
[data-theme="dark"] .theme-btn.random {
  background: linear-gradient(135deg, #6f5fda 0%, #c17ab9 100%);
  color: #fff;
}
[data-theme="dark"] .theme-btn-dice-face {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.96), rgba(235, 228, 255, 0.92) 55%, rgba(192, 172, 245, 0.88) 100%);
  border-color: rgba(220, 212, 255, 0.18);
}
[data-theme="dark"] .theme-btn-dice-dot {
  background: #43295f;
}
[data-theme="dark"] .theme-btn.random.selected {
  background: linear-gradient(135deg, #8675ff 0%, #d98fcf 100%);
}
[data-theme="dark"] .theme-btn::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(169, 144, 255, 0.24), rgba(255, 255, 255, 0));
}
@media (max-width: 768px) {
  #gallery-theme-selector {
    width: 90%;
    max-width: 550px;
  }
}
.lateralcoteboard {
    position: absolute;
    z-index: 1;
    width: 100%;
    margin-top: -1100px;
}
.lateralcoteboard-position {
    z-index: 1;
    width: 100%;
}
.lateralcoteboard img {
    opacity: 0.8;
    filter: drop-shadow(0px 0px 10px #ffb2b5);
}
[data-theme="dark"] .lateralcoteboard img {
    opacity: 0.2;
    filter: drop-shadow(0px 0px 20px #ffa7aa);
}
@media (max-width: 1250px) {
.lateralcoteboard {
    display: none;
}
}
.precisionweddingtunnel {
  top: -210px !important;
}
@media (max-width: 950px) {
.marginrestovideo {
    margin-top: 20px;
}
}
.marginvideo-container {
    top: 100px;
    margin-bottom: 0px;
}