/*
 * Feuille principale du site.
 * Cache production : utiliser /1assets/styleA01.css?v=YYYYMMDD-libelle
 * et modifier la valeur `v` à chaque déploiement CSS sur LWS.
 */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    /*font-family: 'Bahnschrift', sans-serif;*/
    /* Bahnschrift (ancien) */
     font-family: 'Bahnschrift', Arial, sans-serif;
    padding-top: 5.4rem; /* Espace entre le haut et le contenu */
    background-color: var(--background-color);
    color: var(--text-color);
}
@font-face {
    font-family: 'Bahnschrift';
    src: url('/2src/xrefdivers/bahnschrift.ttf') format('truetype');
}
/* Quand la largeur maximale est de 2056px et la hauteur maximale est de 1329px */
@media (max-width: 2556px) and (max-height: 1329px) {
    body, html {
        padding-top: 3rem;
    }
}
body.show-background:not(.a11y-mono)::before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to right, blue, rgb(231, 11, 187));
    z-index: 1;
    pointer-events: none;
}
.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#theme-toggle {
    user-select: none; /* Désactive la sélection de texte */
    -webkit-user-select: none; /* Pour les navigateurs Webkit (Chrome, Safari) */
    -moz-user-select: none; /* Pour Firefox */
    -ms-user-select: none; /* Pour Internet Explorer/Edge */
}
#theme-icon {
    user-select: none; /* Désactive la sélection de texte */
    -webkit-user-select: none; /* Pour les navigateurs Webkit (Chrome, Safari) */
    -moz-user-select: none; /* Pour Firefox */
    -ms-user-select: none; /* Pour Internet Explorer/Edge */
}



/* Style du header + Fonctionnalité UX qui permet de le faire disparaitre en scrollant vers le bas, il réapparait quand on va vers le haut*/
header {
    position: fixed;
    z-index: 1000;
    display: flex;
    margin-top: 17px;
    width: 100%;
    max-width: 1000px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    top: 0;
    border-radius: 40px;
    height: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: var(--header-background-color);
    backdrop-filter: blur(10px); /* Ajoute le flou directement */
    -webkit-backdrop-filter: blur(10px); /* Compatibilité Safari */
    transition: 0.5s background-color ease;
}
[data-theme="light"] {
    header:hover {
        background-color: #ffffff93;
    }
}
@media (max-width: 1200px) {
    header {
        width: calc(100% - 5%);
        left: 3%;
        transform: none;
    }
}
@media (max-width: 1200px) {
    #langage-container {
        display: none !important;
    }
}
/* Configuration du thème somnbre */
/* Au départ, la page charge comme ça (en light) */
:root {
    --background-color: #ffffff00;
    --text-color: #000000;
    --header-background-color: #ffffff1f;
    --glow-color-light: #ffffff;
    --glow-color-dark: #10003f;
    --glow-color: var(--glow-color-dark);
}
/* Si on active le darktheme sur téléphone*/
@media (max-width: 1200px) {
    :root {
        --background-color: #eca7ff11;
        --header-background-color: #f3e3ffa4;
    }
    [data-theme="dark"] {
        --background-color: #10003f;
        --text-color: #ffffff;
        --glow-color: var(--glow-color-light);
        --header-background-color: #10003f63;
    }
}
/* Si on active le darktheme */
[data-theme="dark"] {
    --background-color: #10003f;
    --text-color: #ffffff;
    --glow-color: var(--glow-color-light);
    --header-background-color: #10003f84;
    #textes-links a {
        color: #ffffff; 
    }
    .logo-link p {
        color: #ffffff;
        border-radius: 5px;
        transition: background-color 0.469s ease-out, border-radius 0.169s ease-out, text-shadow 0.469s ease-out;
    }
    #faq {
        background: #10003f;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.49);
    }
    header {
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
    }
    .main-content h2 {
      color: #ffffff;
    }
    .main-content h2::after {
        background: linear-gradient(to right, transparent, rgba(16, 0, 63, 0.8) 50%, transparent 100%);    
    }
    #quotes button {
        color: #4947ac;
    }
    .inspirational-quotes {
        color: #bab8fd;
        background-color: #4a4886ab;
        box-shadow: 1px 1px 10px #7270cf;
    }
    .announcement-banner {
        background-color: #764be2;
        color: rgb(255, 255, 255);
        box-shadow: 0 6px 4px #34343425;
    }
    .close-btn {
        color: white;
    }
    .close-btn:hover{ 
        color: rgb(0, 51, 255);
    }
    #texte-content a {
        color: #888eff;
    }
    #texte-content a:hover, #texte-content a:focus {
        color: #f740d6;
    }
    .dropdown-content a {
        color: #201f1f;
        background-color: #201a56;
    }
    .dropdown-content a:hover {
        background-color: rgba(143, 105, 255, 0.635);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.735);
    }
    .dropdown-content {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.53);
        background-color: #201a56;
    }
    .dropdown > a:hover {
        box-shadow: 0 2px 25px rgba(255, 78, 222, 0.32);
    }
    .dropdown-img {
        filter: invert();
    }
    #concept:hover {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.736));
    }
    .text-section h1 {  
        color: #ffffff;
    }
    #qr-cadre-service-icon {
        filter: invert(1);
    }
    .service-icon {
        filter: none;
    }
    .gradient-text-2 {
        background: linear-gradient(to right, rgb(40, 83, 252),rgb(173, 0, 182), rgb(213, 103, 213));
        color: transparent;
        background-clip: text;
    }
    body:not(.qa-ready) #theme-toggle:hover {
        cursor: pointer; /* Change en 'cursor: grab;' si tu veux un autre style */
        filter: drop-shadow(0 0 8px white);
    }
    @media (max-width: 900px) {
        #concept-cadre, #concept-video, #concept-photo {
            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.406));
        }
    }
    .overlay-content h1 {
        color: #e055f5ae;
    }
    #cursor-text {
        border: 1px solid #cfbaffed;
        background-color: #3a1591;
    }
    .service-btn:hover {
        background-color: #837ff8;  
        border: 1px solid #8e8eff;
        box-shadow: 0 2px 25px rgba(255, 255, 255, 0.5);
        z-index: 2; 
    }
    .service-btn {
        color: rgb(255, 255, 255);
        border: 1px solid #6661fc;
        box-shadow: 0 2px 25px rgba(255, 255, 255, 0.32);
        background: #6661fc;
    }/*
    .chatbot-btn img:hover {
        filter: drop-shadow(0 0 3px rgba(244, 86, 255, 0.539));
    }*/
    .video-container {
        background: linear-gradient(to right, rgb(102, 102, 193), rgb(204, 139, 191));
    }
    .video-container iframe {
        border: 2px solid #8e8effb8;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.461));
    }
    .service-link, .discover-button {
        background-color: #6661fc2f;
        box-shadow: 0px 0px 20px #6661fc3e;
        border: 2px solid #6661fc00;
    }
    .service-link:hover, .discover-button:hover {
        background: linear-gradient(to right, #eeccff, #c9c7fc);
        box-shadow: 0px 0px 20px #ffffff3e;
        border: 2px solid #6661fc;
    }
    .lateralglow {
        opacity: 18%;
        filter: drop-shadow(0 0 6px rgb(255, 255, 255));
    }
    .shimmer {
        animation: word-shimmer-dark 0.9s forwards;
        transition-duration: 0.3s;
    }
    #cadre-image {
        border: 1px solid #0000001c;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.255));
    }
    /*#cadre-image:hover {
        filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.451));
    }*/
    }






/* THEME DARK / Si on veut reactiver le lighttheme */
[data-theme="light"], :root {
    --glow-color: var(--glow-color-dark);
}
body:not(.qa-ready) #theme-icon {
    color: #000;
    filter: drop-shadow(0 0 3px var(black));
    background-color: #ffffff77;
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #0a0930;
    max-width: 20px;
}
[data-theme="dark"] body:not(.qa-ready) #theme-icon {
    color: #000;
    filter: drop-shadow(0 0 3px var(black));
    background-color: #0a093099;
    border-radius: 50%;
    border: 1px solid #e8e8e85d;
}
body:not(.qa-ready) #theme-toggle {
    margin-left: 37px;
    top: 0;
    margin-top: 17px;
    background: none;
    border: none;
    position: fixed;
    z-index: 2001;
    transition: filter 0.4s ease;
}
body:not(.qa-ready) #theme-toggle img {
    width: 1.7vw;
    min-width: 1vw;
    z-index: 2001;
}
body:not(.qa-ready) #theme-toggle:hover {
    cursor: pointer; /* Change en 'cursor: grab;' si tu veux un autre style */
    /* effet de lueur avec filter: drop-shadow */
    filter: drop-shadow(0 0 8px var(--glow-color));
}
@media (max-width: 770px) {
    body:not(.qa-ready) #theme-toggle {
        position: fixed;
        top: auto !important;        /* Correction: top: none n'existe pas */
        bottom: 20px !important;     /* Position en bas de l'écran */
        left: 18px !important;       /* Position à gauche */
        margin: 0 !important;        /* Reset des marges */
        margin-top: 0 !important;    /* Correction: margin-top: none n'existe pas */
    }
    body:not(.qa-ready) #theme-toggle img {
        margin: 0;                   /* Reset des marges sur l'image */
        min-width: 45px;             /* Taille plus appropriée pour mobile */
        width: 45px;                 /* Largeur fixe sur mobile */
    }
    body:not(.qa-ready) #theme-icon {
        max-width: 40px !important;  /* Taille adaptée au mobile */
    }
}
/* DARKTHEME CONFIGURE*/



/* Style du Logo principal */
.logo-main-container {
    position: absolute;
    display: flex;
    margin-top: 2.1%;
    left: 17px;
}
#main-logo {
    max-width: 100%;
    width: 9em;
}
@media (max-width: 600px) {
    #main-logo {
        width: 12em;
        margin-top: 6px;
    }
}
@media (max-width: 430px) {
    #main-logo {
        width: 11em;
        margin-top: 6px;
        margin-left: -10px;
    }
}
@media (max-width: 380px) {
    #main-logo {
        width: 10em;
        margin-top: 6px;
        margin-left: -10px;
    }
}
/* Style de la barre rosebleue laterale */
#side-bar {
    position: fixed;
    left: 0;
    transform: none;
    top: 0;
    bottom: 0;
    width: 1%;
    height: 100%;
    opacity: 100%;
    background: linear-gradient(to bottom, rgb(231, 11, 187), blue);
    z-index: 3000;
    pointer-events: none;
}
@media (max-width: 1030px) {
    #side-bar {
        width: 2%;
    }
}


/* Style des sous-onglets 1,2,3,4 */
#textes-links {
    position: fixed;
    left: 0;
    top: 2px;
    margin-left: 177px;
    z-index: 2000;
    font-size: 15px;
}
@media (min-height: 630px) and (max-height: 750px) {/* LEGION Y30*/
    #textes-links {
        top: 10%;
    }
}
@media (max-height: 700px) {
    #textes-links {
        top: 7%;
    }
}
#textes-links a {
    color: #000000;
    text-decoration: none !important;
}
.dropdown-toggle {
    font-weight: 500;
}
.dropdown a {
    border: 2px solid #0700db00;
}
.dropdown > a:hover {
    box-shadow: 0 2px 25px rgba(255, 78, 222, 0.32);
    border-radius: 4px;
    padding: 4px;
}
#textes-links > a {
    margin-right: 15px;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 5px;
    transition: background-color 0.469s ease-out, text-shadow 0.469s ease-out;
}
#textes-links > a,
#textes-links > .dropdown > a,
#textes-links > a:link,
#textes-links > .dropdown > a:link,
#textes-links > a:visited,
#textes-links > .dropdown > a:visited,
#textes-links > a:hover,
#textes-links > .dropdown > a:hover,
#textes-links > a:active,
#textes-links > .dropdown > a:active {
    padding: 2px 1px;
    border-radius: 5px;
    transition: background-color 0.469s ease-out, text-shadow 0.469s ease-out;
    background-image: none;
}
/* Styles pour les sous-onglet / menus pour éviter l'héritage du style des liens principaux */
.dropdown-content a {
    text-decoration: none;
    position: relative;
    z-index: 2000;
    border-radius: 5px;
    transition: background-color 0.869s ease-out, text-shadow 0.469s ease-out;
    min-width: 313px;
    color: #201f1f;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 10px;
    background-color: #ffffff; 
    display: flex; 
    text-align: left; 
    font-size: 14px; 
    margin-bottom: 0;
}
.dropdown-content a > .dropdown-img {
    margin-left: auto;
    flex-shrink: 0;
}
.dropdown-content a:has(> .best-seller) > .dropdown-img {
    margin-left: 0;
}
.dropdown-content a > .best-seller {
    margin-left: auto;
}
.help-menu-blog-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}
.help-menu-blog-title {
    display: block;
}
.blog-freshness-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6b5cff, #ff5bd7);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(102, 97, 252, 0.22);
}
.rdv-free-badge {
    background: linear-gradient(135deg, #16a34a, #34d399);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.24);
}
.dropdown-content a:hover {
    background-color: rgb(219, 216, 255);
    border-radius: 5px;
}
.dropdown > a:hover,
.dropdown > a.clicked {
    box-shadow: 0 0px 5px rgb(0, 0, 0);
    border: 2px solid #0700db;
    opacity: 0.25;
}
[data-theme="dark"] {
.dropdown > a:hover,
.dropdown > a.clicked {
    box-shadow: 0 0px 5px rgb(0, 0, 0);
    border: 2px solid #6b66ff;
    opacity: 0.25;
}
}

/* Onglet princiapaux (créer qr-cadre, prestation etc...)*/
.dropdown {
    position: relative;
    z-index: 2000;
    display: inline-block;
    margin: 20px;
}
.dropdown-content .dropdown-img {
    display: none;
    width: auto;
    max-width: 40px;
    height: auto;
    max-height: 40px;
    right: 0;   
    border-radius: 5px;
}
.dropdown-content a:hover .dropdown-img {
    display: block;
}

#qr-cadre-dropdown .dropdown-content a:hover .dropdown-img,
#qr-cadre-dropdown-mobil .dropdown-content a:hover .dropdown-img,
.dropdown-content a.dropdown-link-no-hover-icon:hover .dropdown-img {
    display: none;
}




/* sous-Onglets qui s'ouvre */
.dropdown-content {
    display: none;
    z-index: 2000;
    border-radius: 5px;
    background-color: white;
    position: absolute;
    min-width: 269px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.53);
}
@media (max-width: 900px) {
    .dropdown-content a {
        background-color: #fcf8ff;
    }
    .dropdown-content {
        background-color: #fcf8ff;
    }
    .dropdown-content a:hover {
        background-color: rgb(135, 126, 238);
    }
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* Sous-onglets (QR-cadre mariage) */
.dropdown-submenu-wrap {
    position: relative;
    display: block;
}

.dropdown-submenu-wrap:hover,
.dropdown-submenu-wrap:focus-within,
.dropdown-submenu-wrap.is-open {
    padding-bottom: 60px;
    margin-bottom: -60px;
}

.submenu-parent-link--trigger-only {
    cursor: default;
    transition: opacity 0.18s ease;
}

.dropdown-submenu-wrap:hover > .submenu-parent-link--trigger-only,
.dropdown-submenu-wrap:focus-within > .submenu-parent-link--trigger-only,
.dropdown-submenu-wrap.is-open > .submenu-parent-link--trigger-only {
    opacity: 0.58;
}

.dropdown-submenu {
    display: none;
    padding: 0 0 10px 7px;
    margin: 2px 8px 0 14px;
    border-left: 2px solid rgba(112, 88, 226, 0.22);
}

.dropdown-submenu-wrap:hover .dropdown-submenu,
.dropdown-submenu-wrap:focus-within .dropdown-submenu,
.dropdown-submenu-wrap.is-open .dropdown-submenu {
    display: block;
}

.dropdown-submenu a {
    min-width: 0;
    font-size: 13px;
    padding: 7px 10px;
    padding-left: 8px;
    background: rgba(250, 249, 255, 0.92);
    border: 1px solid rgba(112, 88, 226, 0.12);
    margin: 6px 0 0;
    display: block;
    text-align: left;
}

[data-theme="dark"] .dropdown-submenu {
    border-left-color: rgba(167, 139, 250, 0.35);
}

[data-theme="dark"] .dropdown-submenu a {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}
/* gestion téléphone */
@media (max-width: 740px) {
    #textes-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
        text-align: left !important;
    }
    .dropdown {
        width: 100%;
        max-width: 330px;
        display: flex;
        align-items: center;
    }
    .dropdown-content {
        position: static; /* Change de absolute à static pour un meilleur contrôle */
        width: 100%;
        max-width: 90%;
        min-width: auto;
        margin: 0 auto;
        top: 240px !important;
        left: auto;
        scale: 1.1;
        top: auto;;
        box-sizing: border-box;
        padding: 10px;
    }
    .dropdown-content a {
        display: block;
        width: 100%;
        max-width: 330px;
        min-width: 0px;
        text-align: left;
        box-sizing: border-box;
        word-wrap: break-word;
    }   
    .dropdown-toggle {
        width: 100%;
        max-width: 220px;
        margin-left: -180px;
        border: 2px solid rgba(102, 97, 252, 0.264);
        background-color: #b1aeff3e;
        text-align: left;
        padding: 4px !important;
        margin-bottom: 8px;
    }    
    /* Assurer que les images restent cachées sur mobile */
    .dropdown-content .dropdown-img {
        display: none !important;
    }
}

/* Ajout de gras au sous onglet*/
.menu-item-title {
    font-weight: 500;
    font-size: 15px;
}
/* Triangle indicator for navigation tabs */
#textes-links .dropdown-toggle {
  position: relative;
  padding-right: 24px; /* reserve space for the triangle */
  transition: color 0.3s ease-in-out;
}
#textes-links .dropdown-toggle::after {
  content: "▶";
  z-index: 3;
  font-size: 8px;
  position: absolute;
  right: 0;
  top: 63%;
  transform: translateY(-50%) rotate(90deg);
  transition: opacity 0.3s ease-in-out;
  margin-right: -9px;
}
@media (max-width: 420px) {
    #textes-links .dropdown-toggle::after {
        font-size: 13px;
        margin-right: -19px;
    }
}
/* Rotate triangle on hover or when dropdown is open */
#textes-links .dropdown:hover > .dropdown-toggle::after,
#textes-links .dropdown-toggle:focus::after {
opacity: 0.5;
}







/* Style par onglet */
@keyframes colorTransition1 {
    0% {
        filter: drop-shadow(0 0 2px rgb(0, 0, 136));
    }
    25% {
        filter: drop-shadow(0 0 6px rgb(117, 117, 255));
    }
    50% {
        filter: drop-shadow(0 0 4px #4841ff);
    }
    75% {
        filter: drop-shadow(0 0 2px deeppink);
    }
    100% {
        filter: drop-shadow(0 0 3px rgb(174, 0, 255));
    }
}
@keyframes colorTransition2 {
    0% {
        filter: drop-shadow(0 0 2px rgb(255, 104, 245));
    }
    25% {
        filter: drop-shadow(0 0 6px rgb(117, 117, 255));
    }
    50% {
        filter: drop-shadow(0 0 2px rgb(255, 104, 245));
    }
    75% {
        filter: drop-shadow(0 0 2px deeppink);
    }
    100% {
        filter: drop-shadow(0 0 2px rgb(255, 104, 245));
    }
}
@keyframes colorTransition3 {
    0% {
        scale: 1.00;
    }
    50% {
        scale: 1.12;
    }
    100% {
        scale: 1.00;
    }
}
.dropdown-img[alt="libre cadre"] {
    animation:  colorTransition3 3s infinite,
                colorTransition1 3.7s infinite;
}
.dropdown-img[alt="liberté de créativité"] {
    animation:  colorTransition3 3s infinite,
                colorTransition1 3.7s infinite;
}
.dropdown-img[src="/2src/xrefonglets/articles.png"],
.dropdown-img[src="/2src/xrefonglets/premiumgalerie.png"],
.dropdown-img[src="/2src/xrefonglets/mateo.png"] {
    animation:  colorTransition3 3s infinite,
                colorTransition1 3.7s infinite;
}
.dropdown-img[alt="creative freedom"],
.dropdown-img[alt="libertà creativa"],
.dropdown-img[alt="Articoli del blog"],
.dropdown-img[alt="Blog articles"],
.dropdown-img[alt="Premium client gallery"],
.dropdown-img[alt="premium client gallery"],
.dropdown-img[alt="Galleria clienti premium"],
.dropdown-img[alt="galleria clienti premium"],
.dropdown-img[alt="Book my video call"],
.dropdown-img[alt="book a video call"],
.dropdown-img[alt="Book my call"],
.dropdown-img[alt="Prenota la mia videochiamata"],
.dropdown-img[alt="Prenota una videochiamata"],
.dropdown-img[alt="prenota una videochiamata"] {
    animation:  colorTransition3 3s infinite,
                colorTransition1 3.7s infinite;
}
.dropdown-img[alt="Réalisations clients QR-cadre"] {
    animation: colorTransition3 3s infinite, colorTransition1 3.7s infinite;
}
[data-theme="dark"] .dropdown-img[alt="Réalisations clients QR-cadre"] {
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
.dropdown-img[alt="Portfolio clients"],
.dropdown-img[alt="Client portfolio"],
.dropdown-img[alt="Portfolio clienti"] {
    animation: colorTransition3 3s infinite, colorTransition1-dark 3.7s infinite;
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
[data-theme="light"] .dropdown-img[alt="appel"],
:root .dropdown-img[alt="appel"],
.dropdown-img[alt="appel"] {
    animation: colorTransition3 3s infinite, colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px #ff4ccf);
}
[data-theme="dark"] .dropdown-img[alt="Portfolio clients"],
[data-theme="dark"] .dropdown-img[alt="Client portfolio"],
[data-theme="dark"] .dropdown-img[alt="Portfolio clienti"] {
    animation: colorTransition3 3s infinite, colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px #4e3cff);
}
.dropdown-img[alt="Mariage"],
.dropdown-img[alt="Photos de mariage"],
.dropdown-img[alt="Wedding photos"],
.dropdown-img[alt="Wedding photography"],
.dropdown-img[alt="Foto di matrimonio"],
.dropdown-img[alt="Fotografia di matrimonio"],
.dropdown-img[alt="Film de mariage"] {
    animation:  colorTransition3 3s infinite,
                colorTransition2 2.7s infinite;
}
.dropdown-img[alt="Wedding film"],
.dropdown-img[alt="Film di matrimonio"] {
    animation:  colorTransition3 3s infinite,
                colorTransition2 2.7s infinite;
}
.dropdown-img[alt="Art et portrait"] {
    animation:  colorTransition3 3s infinite,
                colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgb(255, 0, 157));
}
.dropdown-img[alt="Restauration, Art culinaire"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px rgb(255, 166, 0));
}
.dropdown-img[alt="Gastronomie, art culinaire et vin"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px rgb(255, 166, 0));
}
.dropdown-img[alt="Vin"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px rgb(140, 0, 153));
}
.dropdown-img[alt="Evenement sportif"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgb(71, 39, 255));
}
.dropdown-img[alt="Village et terroir"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px #9c3156);
}
.dropdown-img[alt="Entreprise marketing"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.8));
}
.dropdown-img[alt="Événementiel"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgb(71, 39, 255));
}
.dropdown-img[alt="Events"],
.dropdown-img[alt="Event"],
.dropdown-img[alt="Event coverage"],
.dropdown-img[alt="Evento"],
.dropdown-img[alt="Eventi"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgb(71, 39, 255));
}
.dropdown-img[alt="Marques"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.8));
}
.dropdown-img[alt="Brands"],
.dropdown-img[alt="Brand"] {
    animation: colorTransition3 3s infinite,
               colorTransition1 3.7s infinite;
    filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.8));
}
[data-theme="dark"] .dropdown-img[alt="Evenement sportif"] {
    animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
[data-theme="dark"] .dropdown-img[alt="Entreprise marketing"] {
    animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
[data-theme="dark"] .dropdown-img[alt="Événementiel"] {
    animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
[data-theme="dark"] .dropdown-img[alt="Marques"] {
    animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
.dropdown-img[alt="Chantier"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px rgb(169, 169, 169));
}
.dropdown-img[alt="Everest Docu"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px #096f09);
}
.dropdown-img[alt="Immobilier"] {
    animation: colorTransition3 3s infinite;
    filter: drop-shadow(0 0 5px #e58d00);
}
/* Animation pour le thème sombre */
@keyframes colorTransition1-dark {
    0% {
        filter: drop-shadow(0 0 2px rgb(255, 255, 119)) invert(1);
    }
    25% {
        filter: drop-shadow(0 0 6px rgb(138, 138, 0)) invert(1);
    }
    50% {
        filter: drop-shadow(0 0 4px #b7be00) invert(1);
    }
    75% {
        filter: drop-shadow(0 0 2px cyan) invert(1);
    }
    100% {
        filter: drop-shadow(0 0 3px rgb(81, 255, 0)) invert(1);
    }
}
/* Animation colorTransition2-dark */
@keyframes colorTransition2-dark {
    0% {
        filter: drop-shadow(0 0 2px rgb(0, 151, 10)) invert(1); /* Inverse de rgb(255, 104, 245) */
    }
    25% {
        filter: drop-shadow(0 0 6px rgb(138, 138, 0)) invert(1); /* Inverse de rgb(117, 117, 255) */
    }
    50% {
        filter: drop-shadow(0 0 2px rgb(0, 151, 10)) invert(1); /* Inverse de rgb(255, 104, 245) */
    }
    75% {
        filter: drop-shadow(0 0 2px cyan) invert(1); /* Inverse de deeppink */
    }
    100% {
        filter: drop-shadow(0 0 2px rgb(0, 151, 10)) invert(1); /* Inverse de rgb(255, 104, 245) */
    }
}
/* Application de l'animation pour le thème sombre */
[data-theme="dark"] {
    .dropdown-img[alt="liberté de créativité"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    }
    .dropdown-img[src="/2src/xrefonglets/articles.png"],
    .dropdown-img[src="/2src/xrefonglets/premiumgalerie.png"],
    .dropdown-img[src="/2src/xrefonglets/mateo.png"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    }
    .dropdown-img[alt="creative freedom"],
    .dropdown-img[alt="libertà creativa"],
    .dropdown-img[alt="Articoli del blog"],
    .dropdown-img[alt="Blog articles"],
    .dropdown-img[alt="Premium client gallery"],
    .dropdown-img[alt="premium client gallery"],
    .dropdown-img[alt="Galleria clienti premium"],
    .dropdown-img[alt="galleria clienti premium"],
    .dropdown-img[alt="Book my video call"],
    .dropdown-img[alt="book a video call"],
    .dropdown-img[alt="Book my call"],
    .dropdown-img[alt="Prenota la mia videochiamata"],
    .dropdown-img[alt="Prenota una videochiamata"],
    .dropdown-img[alt="prenota una videochiamata"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
    }
    .dropdown-img[alt="Réalisations clients QR-cadre"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3.7s infinite;
        filter: invert(1) drop-shadow(0 0 4px #ffffff);
    }
    .dropdown-img[alt="appel"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3.7s infinite;
        filter: invert(1) drop-shadow(0 0 4px #ffffff);
    }
    .dropdown-img[alt="Mariage"],
    .dropdown-img[alt="Photos de mariage"],
    .dropdown-img[alt="Wedding photos"],
    .dropdown-img[alt="Wedding photography"],
    .dropdown-img[alt="Foto di matrimonio"],
    .dropdown-img[alt="Fotografia di matrimonio"],
    .dropdown-img[alt="Film de mariage"] {
        animation: colorTransition3 3s infinite, colorTransition2-dark 3s infinite;
    }
    .dropdown-img[alt="Wedding film"],
    .dropdown-img[alt="Film di matrimonio"] {
        animation: colorTransition3 3s infinite, colorTransition2-dark 3s infinite;
    }
    .dropdown-img[alt="Art et portrait"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
        filter: drop-shadow(0 0 5px rgb(0, 255, 98)) invert(1); /* Inverse de rgb(255, 0, 157) */
    }
    .dropdown-img[alt="Gastronomie, art culinaire et vin"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px rgb(0, 89, 255)) invert(1); /* Inverse de rgb(255, 166, 0) */
    }
    .dropdown-img[alt="Vin"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px rgb(21, 255, 0)) invert(1); /* Inverse de rgb(140, 0, 153) */
    }
    .dropdown-img[alt="Evenement sportif"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px rgb(217, 255, 0)) invert(1); /* Inverse de rgb(71, 39, 255) */
    }
    .dropdown-img[alt="Village et terroir"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px #00ffa6) invert(1); /* Inverse de #9c3156 */
    }
    .dropdown-img[alt="Entreprise marketing"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px rgb(255, 0, 0)) invert(1); /* Inverse de rgba(0, 213, 255, 0.8) */
    }
    .dropdown-img[alt="Événementiel"],
    .dropdown-img[alt="Events"],
    .dropdown-img[alt="Event"],
    .dropdown-img[alt="Event coverage"],
    .dropdown-img[alt="Evento"],
    .dropdown-img[alt="Eventi"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
        filter: invert(1) drop-shadow(0 0 4px #ffffff);
    }
    .dropdown-img[alt="Marques"],
    .dropdown-img[alt="Brands"],
    .dropdown-img[alt="Brand"] {
        animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
        filter: invert(1) drop-shadow(0 0 4px #ffffff);
    }
    .dropdown-img[alt="Chantier"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px rgb(86, 86, 86)) invert(1); /* Inverse de rgb(169, 169, 169) */
    }
    .dropdown-img[alt="Everest Docu"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px #ff00ff) invert(1); /* Inverse de #096f09 */
    }
    .dropdown-img[alt="Immobilier"] {
        animation: colorTransition3 3s infinite;
        filter: drop-shadow(0 0 5px #1A72FF) invert(1);
    }
}


/* gestion téléphone
@media (max-width: 420px) {
    .dropdown-content a {
        font-size: 15px;
    }
    .dropdown-content {
        scale: 1.2;
        margin-top: 210px !important;
        margin-left: -180px !important;
    }
}*/
/* gestion téléphone
@media (max-width: 390px) {
    .dropdown-content {
        scale: 1;
        margin-top: 160px !important;
        margin-left: -200px !important;
    }
    .dropdown-toggle {
        margin-bottom: 10px;
        font-size: 15px;
    }
}*/
/* gestion téléphone
@media (max-width: 320px) {
    .dropdown-content {
        scale: 0.7;
        margin-top: 100px !important;
        margin-left: -230px !important;
    }
}*/





.best-seller {
    display: none;
    position: static;
    z-index: 1;
    vertical-align: middle;
    width: fit-content;
    height: auto;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #ff00d0;
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}
.best-seller.reglage20 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: badgeFloatGlow 3.2s ease-in-out infinite;
}
.best-seller.reglage20::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-145%) skewX(-18deg);
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 32%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.08) 68%,
        transparent 100%);
    pointer-events: none;
    animation: badgeSheen 3.2s ease-in-out infinite;
}
.menu-item-content .best-seller,
.mobile-menu-item-content .best-seller {
    align-self: flex-start;
    margin-top: 0.35rem;
}
@media (max-width: 740px) {
    .best-seller {
        scale: 1;
    }
}
@keyframes badgePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 242, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 242, 0); }
}
@keyframes badgeFloatGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 0 0 rgba(255, 0, 208, 0);
    }
    50% {
        transform: translateY(-1px) scale(1.035);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 18px rgba(255, 0, 208, 0.2);
    }
}
@keyframes badgeSheen {
    0%, 58%, 100% {
        transform: translateX(-145%) skewX(-18deg);
        opacity: 0;
    }
    18%, 30% {
        opacity: 1;
    }
    42% {
        transform: translateX(155%) skewX(-18deg);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .best-seller.reglage20,
    .best-seller.reglage20::after {
        animation: none;
    }
}
.petittextosmall {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    max-width: 240px;
    color: #866988;
}
.petittextosmall:hover {
        color: #000000;
        transition: 0.3s;
}
[data-theme="dark"] {
.petittextosmall {
    color: #a9a5a8;
}
.petittextosmall:hover {
        color: #ffffff;
        transition: 0.3s;
}
}
@media (max-width: 770px) {
    .petittextosmall {
    font-size: 12px;
    margin-top: 5px;
    max-width: 240px;
    color: #635165;
}
}
.menu-link div {
    display: flex;
    flex-direction: column;
}
/* MON COMPTE : MES BROUILLONS : MON PANIER */
#top-right-logos {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    right: 10px;
    top: 5px;
}
body.vitrine-mode #top-right-logos,
body.vitrine-mode #user-logged,
body.vitrine-mode .mobile-user-actions,
body.qr-creation-mode .mobile-user-actions {
    display: none !important;
}
.vitrine-cta {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 1000;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: linear-gradient(135deg, #7b5bff);
    background-size: 240% 240%;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 0px 10px rgb(168, 127, 250);
    opacity: 0;
    transform: translateY(-50%) scale(0.99);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
}
.vitrine-cta::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.6);
    opacity: 0.35;
    pointer-events: none;
}
.vitrine-cta::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
    filter: drop-shadow(0 0 3px rgb(255, 255, 255));
    background-image: url("/2src/xrefonglets/themelibre.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    filter: invert(1);
}
.vitrine-cta__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.vitrine-cta__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.vitrine-cta__sub {
    font-size: 10px;
    opacity: 0.85;
    font-weight: 600;
}
.vitrine-cta--visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}
.vitrine-cta:hover {   
    text-shadow: #b5a1ff 0px 0px 6px;
    border: 2px solid #b5a1ff;
    transform: translateY(-50%) scale(1.01);
    box-shadow: 0 0px 30px #b5a1ff7c;
}
[data-theme="dark"] {
.vitrine-cta:hover {   
    text-shadow: #421564 0px 0px 6px;
    border: 2px solid #421564;
    transform: translateY(-50%) scale(1.01);
    box-shadow: 0 0px 30px #7878ee7c;
}
}
.vitrine-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.vitrine-cta--nudge {
    background-size: 240% 240%;
    animation: vitrineCtaLift 2s ease-in-out,
        vitrineCtaBlink 4s ease-in-out,
        badgePulse 4s ease-in-out;
}
@keyframes vitrineCtaLift {
    0% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-56%) scale(1.06);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}
@keyframes vitrineCtaBlink {
    0% {
        background-image: linear-gradient(100deg, #352048, #7044ff, #ff5fe0);
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(112, 68, 255, 0.45));
    }
    50% {
        background-image: linear-gradient(100deg, #352048, #7044ff, #ff5fe0);
        background-position: 100% 50%;
        filter: drop-shadow(0 0 16px rgba(255, 95, 224, 0.95));
    }
    69% {
        background-image: linear-gradient(135deg, #7669ab, #b07cff 60%, #f5a6d8 120%);
        background-position: 60% 40%;
        filter: drop-shadow(0 0 12px rgb(255, 255, 255));
    }
    80% {
        background-image: linear-gradient(135deg, #7b5bff, #b07cff 60%, #f5a6d8 120%);
        background-position: 60% 40%;
        filter: drop-shadow(0 0 12px rgb(95, 55, 255));
    }
    100% {
        background-image: linear-gradient(135deg, #7b5bff);
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(112, 68, 255, 0.45));
    }
}
/* ==========================================
   CTA MOBILE — en flux normal (non absolu)
   ========================================== */
.vitrine-cta--mobile {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    animation: none !important; /* bloque vitrineCtaLift qui fait un translateY(-50%) */
    margin-left: auto;
    flex-shrink: 0;
    padding: 7px 13px;
    gap: 5px;
    max-width: none;
    letter-spacing: 0.1px;
    box-shadow: 0 3px 14px rgba(123, 91, 255, 0.5);
}
.vitrine-cta--mobile::before,
.vitrine-cta--mobile::after {
    display: none;
}
.vitrine-cta--mobile .vitrine-cta__sub {
    display: none;
}
.vitrine-cta--mobile .vitrine-cta__title {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 115px;
    margin-left: 0;
}
.vitrine-cta--mobile.vitrine-cta--visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.vitrine-cta--mobile:hover {
    transform: scale(1.03) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 20px rgba(123, 91, 255, 0.65);
}

/* Vitrine : burger, logo et CTA ont trois colonnes séparées, sans chevauchement. */
@media (max-width: 1200px) {
    body.vitrine-mode .mobile-header-content {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 8px;
    }

    body.vitrine-mode .mobile-burger-btn {
        grid-column: 1;
        grid-row: 1;
    }

    body.vitrine-mode .mobile-logo-container {
        position: static;
        grid-column: 2;
        justify-self: center;
        max-width: 118px;
        transform: none;
    }

    body.vitrine-mode #main-logo-mobile {
        height: 20px;
        max-width: 100%;
    }

    body.vitrine-mode .vitrine-cta--mobile {
        grid-column: 3;
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .vitrine-cta--mobile {
        padding: 6px 10px;
        gap: 4px;
    }
    .vitrine-cta--mobile .vitrine-cta__title {
        font-size: 10.5px;
        max-width: 95px;
    }
}

@media (max-width: 374px) {
    .vitrine-cta--mobile {
        padding: 5px 8px;
        gap: 3px;
        border-width: 1px !important;
        box-shadow: 0 2px 10px rgba(123, 91, 255, 0.4);
    }
    .vitrine-cta--mobile .vitrine-cta__title {
        font-size: 9.5px;
        max-width: 78px;
    }

    body.vitrine-mode .mobile-header-content {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: 4px;
    }

    body.vitrine-mode .mobile-burger-btn {
        width: 40px;
    }

    body.vitrine-mode .mobile-logo-container {
        max-width: 88px;
    }

    body.vitrine-mode #main-logo-mobile {
        height: 17px;
    }
}

.logo-container img {
    max-width: 0px;
    box-shadow: 0 0 14px rgba(104, 104, 104, 0.327);
    min-width: 29px;
    border-radius: 50%;
    background: linear-gradient(to right, #f2d9ff, #d6d5ff);
    border: 2px solid #e1e1e196;
    margin-right: -4px;
}
.logo-container img:hover {
    border: 2px solid #b4b0ff;
}
.logo-link {
    margin-right: 4px;
    text-decoration: none;
    color: #000;
    padding: 2px 5px;
    background-color: transparent;
    border-radius: 5px;
    transition: scale 0.2s, filter 0.4s, opacity 0.4s, background-color 0.469s ease-out, border-radius 0.169s ease-out, text-shadow 0.469s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 40%;
}
.logo-link:hover {
    scale: 1.02;
}
[data-theme="dark"] {
.logo-link:hover {
    filter: drop-shadow(0px 0px 2px #b5b3f8);
}
.logo-container img {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.174);
    border: 2px solid #b7c2ff82;
    background: linear-gradient(to right, #5536647b, #48448281);
}
.logo-container img:hover {
    border: 2px solid #6b82ff;
}
}
.logo-link p {
    font-size: 10px;
    margin-top: 2px;
    color:  #333;
}
@media (max-height: 800px) and (orientation: portrait), 
       (max-width: 1024px) and (orientation: portrait) {
    .logo-link p {
        font-size: 10px;
    }
    #top-right-logos {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        right: 1%;
        top: 2%; 
    }
}

/* Gestion de l’état de connexion utilisateur */
#user-logged {
    display: none;
    align-items: center; /* sera pris en compte dès qu’on passera en flex via JS */
}
/* Quand l’utilisateur est connecté : */
#user-logged.logged {
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    right: 10px;
    gap: 3px;
    top: 5px;
}
#user-initial {
    color: #000000;
    border-radius: 100%;
    width: 100%;
    max-width: 22px;
    max-height: 22px;
    font-size: 17px;
    border: 2px solid #efefefaf;
    box-shadow: 0 0 14px rgba(104, 104, 104, 0.152);
    background: linear-gradient(to right, #f8d1ff);
    margin-top: -10px;
    margin-bottom: 2px;
    padding: 3px;
    font-weight: bold;
    margin-right: 7px;
}
#user-initial:hover {
    border: 2px solid #bdbbff;
}
#user-name {
    font-size: 10px;
    margin-right: 7px;
}
[data-theme="dark"] {
    #user-name {
        color: #ffffff;
    }
    #user-initial {
        color: #ffffff;
        background: linear-gradient(to right, #ff00ea24);
    }
}
@media (max-height: 800px) and (orientation: portrait), 
       (max-width: 1024px) and (orientation: portrait) {
        #user-logged.logged {
            top: 2%;
        }
}
/* QR-CADRE.COM POWER
#qr-cadre-dropdown, #qr-cadre-dropdown-mobil {
    display: none;
}*/
.specialnofilterinvert {
    filter: none;
}
[data-theme="dark"] .specialnofilterinvert {
    filter: none !important;
}




/*BANNIÈRE DANNONCEMENT PRES COMMANDE V2*/
/* BANNIÈRE DE NOTIFICATION MODERNE */
.notification-strip {
    background:
        linear-gradient(90deg, rgba(123, 91, 255, 0.14), rgba(255, 95, 224, 0.1) 46%, rgba(255, 255, 255, 0) 76%),
        rgba(255, 255, 255, 0.96);
    color: #172033;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    position: relative;
    width: 100%;
    min-height: 42px;
    padding: 7px 18px;
    box-shadow: 0 8px 24px rgba(20, 18, 58, 0.12);
    border-bottom: 1px solid rgba(123, 91, 255, 0.18);
    user-select: none;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.notification-strip--pending {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.notification-strip::before {
    content: '';
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #3039b4, #7b5bff 52%, #ff5fe0);
}

.notification-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent 0%, rgba(123, 91, 255, 0.08) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.notification-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.notification-message {
    line-height: 1.4;
    letter-spacing: 0;
}

.social-link {
    color: #3039b4;
    text-decoration: none;
    font-weight: 900;
    position: relative;
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.social-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3039b4, #ff5fe0);
    transition: width 0.3s ease;
}

.social-link:hover {
    color: #7b5bff;
    background-color: rgba(123, 91, 255, 0.1);
    transform: translateY(-1px);
}

.social-link:hover::before {
    width: 100%;
}

.dismiss-button {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(123, 91, 255, 0.18);
    color: #3039b4;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
    margin-left: 16px;
    z-index: 10;
    box-shadow: 0 6px 14px rgba(20, 18, 58, 0.08);
}

.dismiss-button:hover {
    background-color: #3039b4;
    border-color: #3039b4;
    color: #ffffff;
    transform: rotate(90deg) scale(1.1);
}

.dismiss-button:focus {
    outline: 2px solid rgba(123, 91, 255, 0.42);
    outline-offset: 2px;
}

.dismiss-button:active {
    transform: rotate(90deg) scale(0.95);
}

/* ANIMATIONS */
.slide-down {
    animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
        max-height: 48px;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
        max-height: 0;
    }
}

/* MODE SOMBRE */
[data-theme="dark"] .notification-strip {
    background:
        linear-gradient(90deg, rgba(123, 91, 255, 0.26), rgba(255, 95, 224, 0.14) 46%, rgba(255, 255, 255, 0) 76%),
        #120c2d;
    color: #f8f7ff;
    border-bottom: 1px solid rgba(196, 181, 253, 0.18);
}

[data-theme="dark"] .social-link {
    color: #c4b5fd;
}

[data-theme="dark"] .social-link:hover {
    color: #f5a6d8;
    background-color: rgba(196, 181, 253, 0.12);
}

[data-theme="dark"] .dismiss-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(196, 181, 253, 0.18);
    color: #f8f7ff;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
    .notification-strip {
        min-height: 50px;
        font-size: 14px;
    }
    
    .dismiss-button {
        margin-left: 12px;
    }
}

@media (max-width: 768px) {
    .notification-strip {
        min-height: 54px;
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .notification-message {
        text-align: center;
        line-height: 1.3;
    }
    
    .dismiss-button {
        width: 28px;
        height: 28px;
        margin-left: 18px;
    }
}

@media (max-width: 580px) {
    .notification-strip {
        min-height: 64px;
        padding-right: 54px;
    }
    
    .notification-message {
        font-size: 12.5px;
        max-width: none;
    }
    
    .dismiss-button {
        position: fixed;
        right: 0;
        margin-right: 10px;
    }
}








/* Style du texte maincontent = Slogan de vente etc... */
.main-content {
    position: relative;
    z-index: 5;
}   
.animate__fadeIn {
    --animate-duration: 2s;
    --animate-delay: 1s;
}
/* Main container for text and image sections */
.content-container {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    gap: 30px;
}
@media (max-width: 700px) {
    .content-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        max-width: auto;
        margin: 0 auto;
        padding: 15px;
        top: -35px;
    }
}
/* Text Section */
.text-section {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    text-align: center;
}
@media (max-width: 900px) {
    .text-section {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 720px) {
    .text-section {
        width: 100%;
        text-align: center;
        max-width: 360px;
    }
}
.text-section h1 {
    font-size: 44px;
    color: #000;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
@media (max-width: 900px) {
    .text-section h1 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 25px;
        margin-top: -5px;
        width: 80%;
    }
}
@media (max-width: 720px) {
    .text-section h1 {
        margin-bottom: 70px;
        margin-top: 10px;
        font-size: 25px;
    }
}
.features-list {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: left;
    font-weight: 300;
}
.features-list li { 
    margin-bottom: 10px;
}
@media (max-width: 700px) {
    .features-list {
        font-size: 16px;
        line-height: 1.3;
        margin-top: 10px;
        width: 100%;
        margin-left: -20px;
        margin-bottom: 35px;
    }
}
/* Button Container */
.button-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
/* Ajustement des sections individuelles */
.service-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
/* Style des vidéos et images */
.media-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
.media-content {
    width: 100%;
    height: 100%;
    max-height: 300px;
    max-width: 300px;
    object-fit: cover;
    border-radius: 10px;
}
/* Button for discovering designs */
.discover-button {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    margin-top: -5px;
    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;
}
.discover-button:hover {
    background-color: #6661fc3a;
    border: 2px solid #6661fc;
    color: #6661fc;
}
.discover-button .icon {
    width: 24px;
    height: auto;
    margin-right: 10px;
}
.service-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}
.service-link {
    position: relative;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    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;
}
.service-link:hover {
    background-color: #6661fc3a;
    border: 2px solid #6661fc;
    color: #6661fc;
}
.service-link .icon {
    width: 25px;
    height: auto;
    margin-right: 10px;
}

.icon-travaux {
    width: 25px;
    height: auto;
    margin-right: 10px;
}
/* Style pour les secondes bouttons */
.dbstyle2 {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    margin-top: -5px;
    background-color: #6661fc91;
    box-shadow: 0px 0px 20px #6661fc3e;
    color: white !important;
    border: 2px solid #6661fc00;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    height: 23px;
    transition: background-color 0.3s ease;
    text-decoration: none !important;
}
@media (max-width: 650px) {
    .dbstyle2 {
        margin-top: -60px;
    }
    .dbdecalage {
        margin-top: -20px;
    }
}
.dbstyle2:hover {
    background: linear-gradient(to right, #ebc3ff, #c9c7fc);
    border: 2px solid #6661fc;
    color: #6661fc !important;
}
[data-theme="dark"] {
    .dbstyle2 {
        border: 2px solid #6661fc;
        box-shadow: 0px 0px 20px #6661fc3e;
        color: #ffffff !important;
        background: linear-gradient(to right, #6661fc2b, #6661fc91);
    }
    .dbstyle2:hover {
        background: linear-gradient(to right, #ebc3ff, #c9c7fc);
        border: 2px solid #6661fc;
        color: #6661fc !important;
    }
}
.dbstyle2 .icon {
    width: 24px;
    height: auto;
    margin-right: 10px;
}
/* Image Section */
.image-section {
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative;
}
@media (max-width: 700px) {
    .image-section {
        position: absolute;
        width: 40%;
        right: 10px;
        margin-top: 80px;
    }
}
/* QR Frame Image Styling */
#cadre-image {
    position: relative;
    top: -10px;
    height: auto;
    width: 100%;
    max-width: 450px;
    transition: filter 1.5s ease-in-out;
    border-radius: 10px;
    border: 2px solid #00000096;
    filter: drop-shadow(0px 0px 7px #2c2a62);
    /*cursor: pointer;*/
}
[data-theme="dark"] {
    #cadre-image {
        border: 2px solid #6d6ab2;
        filter: drop-shadow(0px 0px 7px #6d6ab2);
        /*cursor: pointer;*/
    }
}
#prestavideo-image {
    position: relative;
    z-index: 3;
    top: -10px;
    height: auto;
    width: 100%;
    max-width: 300px;
    transition: filter 1.5s ease-in-out;
    border-radius: 10px;
    border: 2px solid #00000096;
    filter: drop-shadow(0px 0px 7px #2c2a62);
    /*cursor: pointer;*/
}
[data-theme="dark"] {
    #prestavideo-image {
        border: 2px solid #6d6ab2;
        filter: drop-shadow(0px 0px 7px #6d6ab2);
        /*cursor: pointer;*/
    }
}
/*#cadre-image:hover {
    filter: drop-shadow(0 0 15px rgba(0, 0, 255, 0.451));
}*/
/* Price Badge Styling */
.price-badge {
    position: absolute;
    z-index: 5;
    top: -30px;
    right: -30px;
    background-color: #09082cd8;
    color: #ffffff;
    padding: 20px 5px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0px 0px 8px #000000;
}
@media (max-width: 700px) {
    .price-badge {
        top: 40px;
        padding: 20px 8px;
        right: 10px;
        font-size: 12px;
    }
}
[data-theme="dark"] {
    .price-badge {
        background-color: #191437e6;
        box-shadow: 0px 0px 8px #ffffff;
    }
}





/* STYLE PARTICULER / HOME PAGE / C TRO BEAUUUU <3 */
/* Texte "Vous avez besoin d'une prestation vidéo ou photos ? QR-cadre.com
 s'occupe de tous. Découvrez nos compétences :" avec scintillement horizontal */
.service-text {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    gap: 0.27em;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}   
@media (max-width: 700px) {
    .service-text {
        font-size: 16px;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        gap: 0.28em;
        margin-top: 10px;
        margin-left: 5%;
        margin-right: 5%;
    }   
}
.service-text span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: inherit;
}
/* Animation pour le thème clair */
@keyframes word-shimmer-light {
    0% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.525));
        text-shadow: 0px 0px 3px #ffffff33;
        color: #2f2f2f;
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgb(255, 255, 255));
        text-shadow: 0px 0px 3px #ffffff3a;
        color: #696969;
    }
    100% {
        opacity: 1;
        text-shadow: none;
        filter: none;
    }
}
/* Animation pour le thème sombre */
@keyframes word-shimmer-dark {
    0% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.525));
        text-shadow: 0px 0px 3px #ffffff33;
        color: #fefefeae;
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.712));
        text-shadow: 0px 0px 3px #ffffff3a;
        color: #ffffffee;
    }
    100% {
        opacity: 1;
        text-shadow: none;
        filter: none;
    }
}
.shimmer {
    animation: word-shimmer-light 0.9s forwards;
    transition-duration: 0.3s;
}
/* Texte "Importez, commandez, contemplez" avec scintillement horizontal */
.main-content h2 {
    font-size: x-large;
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    overflow: hidden; /* Cache le débordement pour maintenir le scintillement dans les limites du texte */
    white-space: nowrap; /* Garantit que le texte reste sur une ligne */
    color: #000000;
}
.main-content h2::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 20%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
    animation: shimmer 6.9s linear infinite;
}
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
@media (max-width: 750px) {
    .main-content h2 {
        font-size: 22px;
        margin-top: 10%;
        margin-bottom: 2%;
    }
}
.gradient-text-1 {
    background: linear-gradient(to right, blue, pink);
    color: transparent;
    background-clip: text;
}
.gradient-text-2 {
    background: linear-gradient(to right, blue,rgb(156, 11, 156), rgb(212, 155, 239));
    color: transparent;
    background-clip: text;
}
/* Ajout d'un texte au dessus du curseur, passage du cadre */
#cursor-text {
    background-color: #6661fc;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #34309f;
    white-space: nowrap;
    z-index: 1000;
    opacity: 100%;
    transition: opacity 1s ease-in-out;
    position: relative;
}
/* Intégration de lueur en fond = charte graphique */
.cadre-lueur-container a {
    display: block;
    position: relative;
    z-index: 2;
}
.cadre-lueur-container .lueur-image {
    position: absolute;
    top: -130px;
    left: 0;
    width: 100%;
    z-index: 2;
    opacity: 100%;
}
@media (min-width: 0px) and (max-width: 1370px) {
    .cadre-lueur-container .lueur-image  {
        height: 90%;
    }
}
@media (min-width: 0px) and (max-width: 600px) {
    .cadre-lueur-container .lueur-image  {
    display: none;
}
}
/* Intégration de lueur en fond = charte graphique */
.container-fondzindex2 {
    display: block;
    position: relative;
    z-index: 0;
    top: 0;
}
/* largeur 1640px-infini */
.fondzindex2 {
    position: absolute;
    z-index: 0;
    top: -700px;
    filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
    left: 0;
    width: 100%;
    height: 1100px;
    opacity: 69%;
}
.fondzindex1tel {
    display: none;
}
.fondzindex2tel  {
    display: none;
}
.fondzindex3 {
    display: none;
}
/* largeur 1200px-1640px */
@media (max-width: 1640px) {
.fondzindex3 {
    position: absolute;
    z-index: 0;
    top: -730px;
    filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
    left: 0;
    width: 100%;
    height: 940px;
    opacity: 69%;
    display: block;
}
.fondzindex2 {
    display: none;
}
.fondzindex1tel {
    display: none;
}
.fondzindex2tel  {
    display: none;
}
}
/* largeur */
[data-theme="dark"] {
.fondzindex2, .fondzindex2tel, .fondzindex1tel, .fondzindex3  {
    opacity: 12%;
    filter: drop-shadow(0 0 6px rgb(255, 255, 255));
}
}
/* Intégration de lueur en fond = charte graphique */
@media (max-width: 700px) {
    .lateralglow  {
        top: 0px;
        height: 760px;
    }
}
@media (max-width: 700px) {
    .fondzindex2tel {
        display: block;
        position: absolute;
        z-index: 0;
        top: -1320px;
        filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
        left: 0;
        width: 100%;
        height: 1320px;
        opacity: 69%;
    }
}
/* Intégration de lueur en fond = charte graphique */
/* NOTRE CONCEPT */
.overlay-content {
    position: relative;
    text-align: left;
    margin: 200px auto;
    z-index: 5;
    width: 900px;
    margin-bottom: 10%;
}
@media (max-width: 1000px) {
    .overlay-content {
        width: 80%;
    }
}
@media (max-width: 749px) {
    .overlay-content {
        margin: 70px auto;
        width: 94%;
    }
} 
.overlay-content h1 {
    position: relative;
    color: #6661fceb;
    text-align: center;
}
#texte-content a {
    color: #6661fc;
    text-decoration: none;
}
#texte-content a:hover, #texte-content a:focus {
    color: #a418b6;
    text-decoration: underline;
}
#texte-content p {
    margin-left: 24px;
    margin: 20px;
    text-align: left;
}
@font-face {
    font-family: 'Neue Frutiger Paneuropean';
    src: url('2src/xrefdivers/Frutiger Extra Black Cn Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
/* Surlignage */
.highlight-title {
    position: relative;
    background: linear-gradient(270deg, #6661fc65, #dcacff9b);
    padding: 7px 7px 1px;
    display: inline;
}

[data-theme="dark"] {
    .highlight-title {
        background: linear-gradient(45deg, #6661fc38, #dcacff64);
    }
}
@media (min-width: 750px) {
    .section-concept {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .section-left {
        flex-direction: row;
    }
    .section-right {
        flex-direction: row-reverse;
    }
    .text-container {
        max-width: 50%;
    }
    #texte-content h3 {
        font-size: 36px;
        font-family: 'Neue Frutiger Paneuropean', sans-serif;
        margin-bottom: -10px;
    }
    #texte-content p {
        font-size: 17px;
        margin-left: 0px;
    }
}
@media (max-width: 750px) {
    .text-container {
        width: 100%;
    }
    .section-concept h3 {
        text-align: center;
        font-size: 26px;
    }
    .section-concept p {
            width: 93%;
            position: relative;
            margin: 0 auto; 
    }
    .section-concept {
        margin-bottom: 90px;
}
}

/* Eyebrow + Skills pills — bloc fondateur homepage */
.concept-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7468f5;
    margin: 0 0 8px 0;
}

.founder-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 20px;
}

.founder-skills span {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(116, 104, 245, 0.10);
    color: #6661fc;
    border: 1px solid rgba(116, 104, 245, 0.22);
    letter-spacing: 0.01em;
    transition: background 0.18s, border-color 0.18s;
}

[data-theme="dark"] .founder-skills span {
    background: rgba(116, 104, 245, 0.18);
    border-color: rgba(116, 104, 245, 0.35);
    color: #a89fff;
}

/* Intégration de lueur en fond = charte graphique */
.cadre-lueur-container a {
    display: block;
    position: relative;
    z-index: 2;
}
.cadre-lueur-container .lueur-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 69%;
}
@media (min-width: 0px) and (max-width: 1200px) {
    .cadre-lueur-container .lueur-image  {
        height: 90%;
    }
}
/* VIDEO YOUTUBE PUBLICITE */
.video-container {
    position: relative;
    text-align: center;
    z-index: 40;
    margin-top: -50px;
    height: 641px;/* le jour ou je remet une vidéo, penser à supprimer ça */
    /*height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;*/
    background: linear-gradient(to right, rgb(197, 197, 255), rgb(255, 190, 242));
    filter: drop-shadow(0 0 10px rgb(206, 163, 255));
}
@media (max-width: 530px) {
    .video-container {
        height: 691px;
    }
}
.video-container iframe {
    width: 50%;
    border: 2px solid #8e8effb8;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.348));
    border-radius: 14px;
    height: 487px;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}
/* VIDEO YOUTUBE PUBLICITE */
@media (max-width: 1600px) {
    .video-container iframe {
        height: 470px;
    }
}
@media (max-width: 1500px) {
    .video-container iframe {
        height: 430px;
    }
}
@media (max-width: 1400px) {
    .video-container iframe {
        height: 390px;
    }
}
@media (max-width: 1200px) {
    .video-container iframe {
        height: 340px;
    }
}
@media (max-width: 1060px) {
    .video-container iframe {
        height: 300px;
    }
}
@media (max-width: 900px) {
    .video-container iframe {
        height: 240px;
    }
}
@media (max-width: 800px) {
    .video-container iframe {
        height: 220px;
    }
}
@media (max-width: 700px) {
    .video-container iframe {
        height: 200px;
    }
}
@media (max-width: 600px) {
    .video-container iframe {
        height: 180px;
    }
}
@media (max-width: 540px) {
    .video-container iframe {
        width: 70%;
        height: 200px;
    }
}
@media (max-width: 450px) {
    .video-container iframe {
        width: 80%;
        height: 200px;
    }
}
/* Modificagion des boutons sous les références */
@media (max-width: 640px) {
.dbdecalage2 {
    top: 20px;
    margin-bottom: 34px;
}
.dbdecalage3 {
    top: 60px;
}
}
/* Styles généraux pour les sections AXE DE TRAVAIL + BLOG */
#services, #learn-more {
    text-align: center;
    margin: 1px auto;
    margin-bottom: 3%;
    display: block;
    width: 46.9%;
    padding: 5px;
    border-radius: 8px;
    z-index: 2;
    position: relative;
}
@media (max-width: 540px) {
    #services, #learn-more {
        width: 60%;
    }
}
@media (max-width: 450px) {
    #services, #learn-more {
        width: 69%;
    }
}
#services h2 {
    text-align: center;
    color: #8a88ff;
    z-index: 2;
}
.service-container {
    display: flex;
    align-items: center;
    gap: 1px;
    z-index: 2; 
}
@media (max-width: 600px) {
    .service-container {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 30%;
    }
}
.service-btn {
    display: flex;
    align-items: center;
    margin: 1px auto;
    padding: 10px 10px;
    width: 20%;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s;
    flex-direction: column;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.411);
    z-index: 2;
    scale: 0.9;
    border: 1px solid #6661fc;
    position: relative;
    background: #6661fc;
}
@media (max-width: 640px) {
    .service-btn {
        width: 50%;
    }
}
.service-btn:hover {
    background-color: #2b26bc;
    border: 1px solid #1611a9b3;
    box-shadow: 0 2px 15px rgb(72, 99, 255);
    z-index: 2; 
}
.service-icon {
    width: 50px;
    filter: invert();
    height: 50px;
    z-index: 2;
}
#qr-cadre-service-icon {
    width: 42px;
    height: 42px;
    z-index: 2;
}
.instagramtexto {
    font-size: 17px;
    height: fit-content;
}
@media (max-width: 640px) {
    .instagramtexto {
        font-size: 15px
    }
}
/* En attendant d'avoir les avis google SI TU SUPRIMMES CA, PENSES A DELETE DANS LE DARKTHEME EN HAUT*/
.inspirational-quotes {
    position: relative;
    z-index: 2;
    display: block;
    border-radius: 8px;
    text-align: center;
    padding: 1px;
    margin: 100px auto;
    width: 500px;
    height: 309px;
    margin-top: 2%;
    color: #393769;
    background-color: #6661fc14;
    box-shadow: 1px 1px 10px #2c2b5891;
}
#quotes {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    z-index: 2;
    margin-top: -40px;
}
#quote-text {
    margin: 0 15px;
    flex-grow: 1;
    text-align: left;
    font-style: italic;
    font-size: 1em;
    z-index: 2;
}
#quotes button {
    border: none;
    background: none;
    color: #6661fc;
    font-size: 1.5em;
    cursor: pointer;
    padding: 10px;
    z-index: 5;
    position: absolute;
    top: 39%;
    transform: translateY(-50%);
}
#prev-quote {
    left: -35px; /* Distance du bord gauche */
}
#next-quote {
    right: -35px; /* Distance du bord droit */
}
#quotes button:hover {
    color: #6661fc87;
    z-index: 2;
}
@media (min-width: 0px) and (max-width: 700px) {
    .inspirational-quotes {
        width: 69%;
        height: 409px;
    }
    .inspirational-quotes h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}
.google-avis {
    font-size: 10px;
}
.nom-profession {
    font-style: normal; /* Supprime l'italique */
    font-weight: bold; /* Facultatif pour mieux distinguer */
}
/*Instagram*/
.reviews-container {
    margin-top: 290px;
    text-align: center;
    margin-bottom: -4%;
    position: relative;
    z-index: 94;
}
@media (max-width: 900px) {
    .reviews-container {
        width: 100%;
        position: relative;
        margin: 0 auto;
        margin-bottom: 100px;
    }
    .reviews-container h2 {
        width: 74%;
        position: relative;
        margin: 0 auto;
        margin-top: 140px;
    }
}
.instagram-reviews {
    position: relative;
    overflow: hidden;
    width: 40%;
    z-index: 3;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    margin-bottom: 8%;
}
@media (max-width: 900px) {
    .instagram-reviews {
        width: 69%;
    }
}
.instagram-carousel {
    display: flex;
    flex-wrap: nowrap;
    animation: scroll linear infinite;
}
.instagram-carousel img {
    height: 100px;
    margin: 0 10px;
    padding: 10px;
    border-radius: 20px;
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* Bulle d'information centrée */
/* Icone "i" */
.info-icon-avis {
    display: inline-flex;
    position: relative;
    z-index: 10;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: auto;
    background-color: #6661fc;
    border: 2px solid transparent;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
}
.info-icon-avis:hover {
    color: #6661fc;
    border: 2px solid #6661fc;
    background-color: #ffffff;
    transition-duration: 0.3s;
}
/* Bulle Pop-up textuelle */
.tooltip-avis {
    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 #6661fc;
    border-radius: 8px;
    padding: 15px;
    width: 440px;
    box-shadow: 0 4px 18px rgb(0, 0, 0);
    z-index: 1000;
}
@media (max-width: 800px) {
    .tooltip-avis {
        width: 340px;
    }
}
.tooltip-avis.active {
    display: block;
}
.tooltip-avis p {
    margin: 0;
    font-size: 17px;
    text-align: left;
    font-weight:300;
}
.tooltip-avis b {
    font-size: 13px;
    color: #9d9d9d;
    margin-top: 30px;
    font-weight: 400;
}
.tooltip-header-avis {
    margin-bottom: 15px;
    color: #6661fc;
    font-size: 24px;
    text-align:center;
    font-weight: bold;
}
[data-theme="dark"] {
    .tooltip-avis {
        background-color: #d9d7ff;
        border: 1px solid #6661fc;
        box-shadow: 0 1px 18px rgba(233, 205, 255, 0.611);
    }
}
/* Style du conteneur principal pour les lueurs en pied de page */
.cadre-lueur-footer {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    z-index: 1;
    opacity: 90%;
}
.lueur-correction {
    margin-top: -600px;
}
@media (max-width: 900px) {
    .cadre-lueur-footer {
        opacity: 0%;
    }
}
/* Style général pour la section FAQ */
#faq {
    margin: 20px auto;
    margin-top: 10%;
    margin-bottom: 7%;
    width: 40%;
    padding: 20px;
    background: linear-gradient(to right, rgba(51, 51, 252, 0.198), rgba(241, 44, 248, 0.294));
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
}
#faq h2 {
    text-align: center;
}
@media (max-width: 900px) {
    #faq {
        width: 69%;
        margin-bottom: 69px;
    }
    #faq h2 {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 15px;
    }
}
/* Style pour chaque élément 'details' */
#faq details {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    background: white;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
/* Style pour 'summary' quand 'details' est fermé */
#faq summary {
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
/* Style pour 'summary' quand 'details' est ouvert */
#faq details[open] summary {
    color: #0056b3;
}
/* Style pour le contenu caché à l'intérieur de 'details' */
#faq details p {
    padding: 10px;
    margin-top: 5px;
    border-left: 3px solid #0056b3;
    color: #666;
    font-size: 15px;
}
/* Animation pour le panneau qui s'ouvre/ferme */
#faq details summary {
    position: relative;
    list-style: none; /* Supprime le marqueur par défaut */
    cursor: pointer;
    padding-left: 5px;
    display: flex;
    align-items: center;
    min-height: 24px;
}
#faq details:hover, #faq details:focus {
    z-index: 2;
}
#faq details summary::before {
    content: "▶"; /* Marqueur personnalisé */
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;
}
#faq details summary:hover::before {
    transform: rotate(90deg);
}
#faq details[open] summary::before {
    transform: rotate(90deg);
}
details[open] summary ~ * {
    animation: open 0.3s ease-in-out;
}
#faq details[open] summary {
    color: #000000;
}
#faq details summary:hover {
    color: #0056b3;
}
@keyframes open {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Style spécifique pour "Plus de Questions" */
.additional-questions {
    background-color: transparent;
    border-color: transparent;
}
.additional-questions summary {
    color: inherit;
}
.additional-questions details {
    background-color: transparent;
}

/* FAQ partagé */
:is(.qrcadre-faq, .portfolio-faq, .story-section.story-faq, .hub-faq, .blog-faq, .faq-block, .seo-block.seo-block--plain, section#faq) {
    --faq-accent-1: #7158e2;
    --faq-accent-2: #cf3f83;
    --faq-accent-3: #ec8ffc;
    --faq-text: #1a1033;
    --faq-muted: rgba(26, 16, 51, 0.74);
    --faq-item-surface: rgba(255, 255, 255, 0.72);
    --faq-item-surface-open: rgba(255, 255, 255, 0.88);
    --faq-item-border: rgba(26, 16, 51, 0.12);

    max-width: 980px;
    margin: 3.5rem auto;
    padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2rem);
    border-radius: 28px;
    scroll-margin-top: 96px;
    color: var(--faq-text);
    border: 1px solid rgba(113, 88, 226, 0.22);
    background:
        radial-gradient(880px circle at 10% 0%, rgba(236, 143, 252, 0.22) 0%, transparent 60%),
        radial-gradient(760px circle at 92% 12%, rgba(147, 148, 232, 0.18) 0%, transparent 58%),
        radial-gradient(720px circle at 55% 120%, rgba(255, 214, 165, 0.12) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 245, 252, 0.74) 100%);
    box-shadow: 0 22px 60px rgba(7, 5, 21, 0.14);
    backdrop-filter: blur(14px);
}

html[data-theme="dark"] :is(.qrcadre-faq, .portfolio-faq, .story-section.story-faq, .hub-faq, .blog-faq, .faq-block, .seo-block.seo-block--plain, section#faq) {
    --faq-text: rgba(255, 255, 255, 0.95);
    --faq-muted: rgba(255, 255, 255, 0.78);
    --faq-item-surface: rgba(255, 255, 255, 0.08);
    --faq-item-surface-open: rgba(255, 255, 255, 0.12);
    --faq-item-border: rgba(255, 255, 255, 0.16);

    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
    background:
        radial-gradient(880px circle at 10% 0%, rgba(236, 143, 252, 0.18) 0%, transparent 60%),
        radial-gradient(820px circle at 92% 12%, rgba(207, 63, 131, 0.18) 0%, transparent 58%),
        radial-gradient(720px circle at 55% 120%, rgba(255, 214, 165, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.qrcadre-faq > h2,
.story-section.story-faq > h2,
.hub-faq > h2,
.blog-faq > h2,
section#faq > h2,
.portfolio-faq .faq-header h2,
.faq-block .section-heading h2 {
    margin: 0;
    text-align: center;
    font-weight: 850;
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
    letter-spacing: 0.2px;
    color: var(--faq-text);
}

.qrcadre-faq > h2::after,
.story-section.story-faq > h2::after,
.hub-faq > h2::after,
.blog-faq > h2::after,
section#faq > h2::after,
.portfolio-faq .faq-header h2::after,
.faq-block .section-heading h2::after {
    content: "";
    display: block;
    width: 88px;
    height: 3px;
    margin: 0.9rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--faq-accent-1), var(--faq-accent-3), var(--faq-accent-2));
    opacity: 0.9;
}

.qrcadre-faq > h4 {
    margin: 0 0 1rem 0;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--faq-text);
}

.portfolio-faq .faq-header,
.faq-block .section-heading {
    margin-bottom: 1.35rem;
}

.portfolio-faq .faq-grid,
.hub-faq .faq-grid,
.blog-faq .faq-items,
.blog-faq .faq-items-article,
.faq-block .seo-accordion-block,
.seo-block.seo-block--plain .seo-accordion-block {
    display: grid;
    gap: 0.85rem;
}

.qrcadre-faq details,
.portfolio-faq .faq-item,
.story-section.story-faq details,
.hub-faq .faq-grid details,
.blog-faq .faq-items details,
.blog-faq .faq-items-article details,
.faq-block .seo-accordion-item,
.seo-block.seo-block--plain .seo-accordion-item,
section#faq > details,
section#faq .additional-questions > details {
    border-radius: 18px;
    border: 1px solid var(--faq-item-border);
    background: var(--faq-item-surface);
    box-shadow: 0 10px 22px rgba(7, 5, 21, 0.08);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.qrcadre-faq details + details,
.story-section.story-faq details + details,
section#faq > details + details {
    margin-top: 0.85rem;
}

.qrcadre-faq details > summary,
.portfolio-faq .faq-item > summary,
.story-section.story-faq details > summary,
.hub-faq .faq-grid details > summary,
.blog-faq .faq-items details > summary,
.blog-faq .faq-items-article details > summary,
.faq-block .seo-accordion-item > summary,
.seo-block.seo-block--plain .seo-accordion-item > summary,
section#faq > details > summary,
section#faq .additional-questions > details > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.1rem;
    font-weight: 740;
    color: var(--faq-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
}

.qrcadre-faq details > summary::-webkit-details-marker,
.portfolio-faq .faq-item > summary::-webkit-details-marker,
.story-section.story-faq details > summary::-webkit-details-marker,
.hub-faq .faq-grid details > summary::-webkit-details-marker,
.blog-faq .faq-items details > summary::-webkit-details-marker,
.blog-faq .faq-items-article details > summary::-webkit-details-marker,
.faq-block .seo-accordion-item > summary::-webkit-details-marker,
.seo-block.seo-block--plain .seo-accordion-item > summary::-webkit-details-marker,
section#faq > details > summary::-webkit-details-marker,
section#faq .additional-questions > details > summary::-webkit-details-marker {
    display: none;
}

.qrcadre-faq details > summary::before,
.portfolio-faq .faq-item > summary::before,
.story-section.story-faq details > summary::before,
.hub-faq .faq-grid details > summary::before,
.blog-faq .faq-items details > summary::before,
.blog-faq .faq-items-article details > summary::before,
.faq-block .seo-accordion-item > summary::before,
.seo-block.seo-block--plain .seo-accordion-item > summary::before,
section#faq > details > summary::before,
section#faq .additional-questions > details > summary::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--faq-accent-1), var(--faq-accent-2));
    box-shadow: 0 0 0 5px rgba(113, 88, 226, 0.12);
    flex: 0 0 auto;
}

.qrcadre-faq details > summary::after,
.portfolio-faq .faq-item > summary::after,
.story-section.story-faq details > summary::after,
.hub-faq .faq-grid details > summary::after,
.blog-faq .faq-items details > summary::after,
.blog-faq .faq-items-article details > summary::after,
.faq-block .seo-accordion-item > summary::after,
.seo-block.seo-block--plain .seo-accordion-item > summary::after,
section#faq > details > summary::after,
section#faq .additional-questions > details > summary::after {
    content: "";
    margin-left: auto;
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: transform 180ms ease, opacity 180ms ease;
}

.qrcadre-faq details[open],
.portfolio-faq .faq-item[open],
.story-section.story-faq details[open],
.hub-faq .faq-grid details[open],
.blog-faq .faq-items details[open],
.blog-faq .faq-items-article details[open],
.faq-block .seo-accordion-item[open],
.seo-block.seo-block--plain .seo-accordion-item[open],
section#faq > details[open],
section#faq .additional-questions > details[open] {
    background: var(--faq-item-surface-open);
    border-color: rgba(113, 88, 226, 0.28);
    box-shadow: 0 18px 40px rgba(113, 88, 226, 0.16);
}

.qrcadre-faq details[open] > summary::after,
.portfolio-faq .faq-item[open] > summary::after,
.story-section.story-faq details[open] > summary::after,
.hub-faq .faq-grid details[open] > summary::after,
.blog-faq .faq-items details[open] > summary::after,
.blog-faq .faq-items-article details[open] > summary::after,
.faq-block .seo-accordion-item[open] > summary::after,
.seo-block.seo-block--plain .seo-accordion-item[open] > summary::after,
section#faq > details[open] > summary::after,
section#faq .additional-questions > details[open] > summary::after {
    transform: rotate(-135deg);
    opacity: 0.82;
}

.qrcadre-faq details > summary:hover,
.portfolio-faq .faq-item > summary:hover,
.story-section.story-faq details > summary:hover,
.hub-faq .faq-grid details > summary:hover,
.blog-faq .faq-items details > summary:hover,
.blog-faq .faq-items-article details > summary:hover,
.faq-block .seo-accordion-item > summary:hover,
.seo-block.seo-block--plain .seo-accordion-item > summary:hover,
section#faq > details > summary:hover,
section#faq .additional-questions > details > summary:hover {
    background: rgba(113, 88, 226, 0.06);
}

.qrcadre-faq details > summary:focus-visible,
.portfolio-faq .faq-item > summary:focus-visible,
.story-section.story-faq details > summary:focus-visible,
.hub-faq .faq-grid details > summary:focus-visible,
.blog-faq .faq-items details > summary:focus-visible,
.blog-faq .faq-items-article details > summary:focus-visible,
.faq-block .seo-accordion-item > summary:focus-visible,
.seo-block.seo-block--plain .seo-accordion-item > summary:focus-visible,
section#faq > details > summary:focus-visible,
section#faq .additional-questions > details > summary:focus-visible {
    outline: 2px solid rgba(236, 143, 252, 0.6);
    outline-offset: 4px;
    border-radius: 14px;
}

.qrcadre-faq details > p,
.portfolio-faq .faq-item > p,
.story-section.story-faq details > p,
.hub-faq .faq-grid details > p,
.blog-faq .faq-items details > p,
.blog-faq .faq-items-article details > p,
section#faq > details > p,
section#faq .additional-questions > details > p {
    margin: 0;
    padding: 0 1.1rem 1.1rem 2.35rem;
    color: var(--faq-muted);
    line-height: 1.65;
}

.faq-block .seo-accordion-panel,
.seo-block.seo-block--plain .seo-accordion-panel {
    padding: 0 1.1rem 1.1rem 2.35rem;
    color: var(--faq-muted);
    line-height: 1.65;
}

.faq-block .seo-accordion-panel > :first-child,
.seo-block.seo-block--plain .seo-accordion-panel > :first-child {
    margin-top: 0;
}

.faq-block .seo-accordion-panel > :last-child,
.seo-block.seo-block--plain .seo-accordion-panel > :last-child {
    margin-bottom: 0;
}

.faq-block .seo-accordion-panel p,
.faq-block .seo-accordion-panel li,
.faq-block .seo-accordion-panel a,
.seo-block.seo-block--plain .seo-accordion-panel p,
.seo-block.seo-block--plain .seo-accordion-panel li,
.seo-block.seo-block--plain .seo-accordion-panel a {
    color: inherit;
}

.faq-block .seo-accordion-panel ul,
.faq-block .seo-accordion-panel ol,
.seo-block.seo-block--plain .seo-accordion-panel ul,
.seo-block.seo-block--plain .seo-accordion-panel ol {
    margin: 0.85rem 0 0;
    padding-left: 1.2rem;
}

.qrcadre-faq details.additional-questions,
section#faq > details.additional-questions {
    margin-top: 1.15rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.qrcadre-faq details.additional-questions > summary,
section#faq > details.additional-questions > summary {
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
    padding: 0.8rem 1.05rem;
    border-radius: 999px;
    border: 1px dashed rgba(113, 88, 226, 0.34);
    background: linear-gradient(135deg, rgba(113, 88, 226, 0.12), rgba(207, 63, 131, 0.1));
}

.qrcadre-faq details.additional-questions > summary::before,
section#faq > details.additional-questions > summary::before {
    display: none;
}

.qrcadre-faq details.additional-questions > p,
section#faq > details.additional-questions > p {
    padding-left: 1.1rem;
}

.qrcadre-faq details.additional-questions details,
section#faq > details.additional-questions details {
    margin-top: 0.85rem;
}

/* Go en haut */
#back-to-top,
#back-to-top2 {
    --btt-accent-1: #7d78ff;
    --btt-accent-2: #ec8ffc;
    --btt-accent-3: rgba(147, 148, 232, 0.92);
    --btt-border: rgba(26, 16, 51, 0.16);

    display: none;
    width: fit-content;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 2rem auto;
    padding: 12px 16px;
    z-index: 10;
    outline: none;
    border: 1px solid var(--btt-border);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(212, 210, 255, 0.92) 0%, rgba(147, 148, 232, 0.92) 100%);
    color: #111111;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0.1px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 18px 50px rgba(7, 5, 21, 0.18);
    backdrop-filter: blur(14px);
    transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease;
}

#back-to-top::before,
#back-to-top2::before {
    content: "↑";
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--btt-accent-1), var(--btt-accent-3));
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.22);
    flex: 0 0 auto;
}

#back-to-top:hover,
#back-to-top2:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 97, 252, 0.32);
    box-shadow: 0 22px 60px rgba(102, 97, 252, 0.18), 0 18px 50px rgba(7, 5, 21, 0.16);
}

#back-to-top:active,
#back-to-top2:active {
    transform: translateY(0);
}

#back-to-top:focus-visible,
#back-to-top2:focus-visible {
    outline: 2px solid rgba(236, 143, 252, 0.7);
    outline-offset: 4px;
}

html[data-theme="dark"] #back-to-top,
html[data-theme="dark"] #back-to-top2 {
    color: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(700px circle at 20% 0%, rgba(236, 143, 252, 0.2) 0%, transparent 60%),
        radial-gradient(640px circle at 90% 10%, rgba(207, 63, 131, 0.18) 0%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.quick-faq .quick-faq__cta {
    --btt-accent-1: #7d78ff;
    --btt-accent-3: rgba(147, 148, 232, 0.92);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(26, 16, 51, 0.16);
    background: linear-gradient(180deg, rgba(212, 210, 255, 0.92) 0%, rgba(147, 148, 232, 0.92) 100%);
    color: #111111;
    font-weight: 750;
    letter-spacing: 0.1px;
    text-decoration: none;
    box-shadow: 0 18px 50px rgba(7, 5, 21, 0.18);
    backdrop-filter: blur(14px);
    transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.quick-faq .quick-faq__cta::before {
    content: "↑";
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--btt-accent-1), var(--btt-accent-3));
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.22);
    flex: 0 0 auto;
}

.quick-faq .quick-faq__cta span[aria-hidden="true"] {
    display: none;
}

.quick-faq .quick-faq__cta:hover,
.quick-faq .quick-faq__cta:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(102, 97, 252, 0.32);
    box-shadow: 0 22px 60px rgba(102, 97, 252, 0.18), 0 18px 50px rgba(7, 5, 21, 0.16);
}

html[data-theme="dark"] .quick-faq .quick-faq__cta {
    color: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(700px circle at 20% 0%, rgba(236, 143, 252, 0.2) 0%, transparent 60%),
        radial-gradient(640px circle at 90% 10%, rgba(207, 63, 131, 0.18) 0%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
    #back-to-top,
    #back-to-top2,
    .quick-faq .quick-faq__cta {
        padding: 11px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qrcadre-faq details,
    .portfolio-faq .faq-item,
    .story-section.story-faq details,
    .hub-faq .faq-grid details,
    .blog-faq .faq-items details,
    .blog-faq .faq-items-article details,
    .faq-block .seo-accordion-item,
    .seo-block.seo-block--plain .seo-accordion-item,
    section#faq > details,
    section#faq .additional-questions > details,
    #back-to-top,
    #back-to-top2,
    .quick-faq .quick-faq__cta {
        transition: none;
    }

    .qrcadre-faq details > summary::after,
    .portfolio-faq .faq-item > summary::after,
    .story-section.story-faq details > summary::after,
    .hub-faq .faq-grid details > summary::after,
    .blog-faq .faq-items details > summary::after,
    .blog-faq .faq-items-article details > summary::after,
    .faq-block .seo-accordion-item > summary::after,
    .seo-block.seo-block--plain .seo-accordion-item > summary::after,
    section#faq > details > summary::after,
    section#faq .additional-questions > details > summary::after {
        transition: none;
    }
}
/* Style du footer */
/* style vague
.basfooter {
    position: absolute;
    left: 0;
    z-index: -1;
    top: -58px;
    height: auto;
    opacity: 1;
    width: 100%;
}
@media (max-width: 600px) {
    .basfooter {
        display: none;
    }
}*/
footer {
    position: relative;
    z-index: 20;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 288px;
    background: linear-gradient(to right, blue, rgb(231, 11, 187));
    opacity: 100%;
    padding: 20px 0;
    text-align: center;
}
.footer-content a {
    margin: 0 15px;
    text-decoration: none;
}
.newsletter-signup h3 {
    color: white;
    margin-bottom: 1%;
}
.newsletter-signup form {
    display: flex;
    justify-content: center;
    gap: 1%;
}
.newsletter-signup input[type="email"], .newsletter-signup input[type="submit"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
}
.newsletter-signup input[type="submit"] {
    background-color: #ff69b4;
    color: white;
    cursor: pointer;
}
.footer-links {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: 200px;
    margin-top: 20px;
}
.footer-links a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin: 0 10px;
}
.footer-links p {
    margin-top: 23px;
    text-align: center; 
    font-size: small;
    color: #ffffff;
    pointer-events: none;
}
.footer-seo {
    max-width: 230px;
    text-align: center;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    pointer-events: none;
    margin-top: -0px !important;
    margin-bottom: -0px;
}
.footer-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.footer-logos #footer-main-logo {
    max-width: 169px;
    margin-bottom: 10px;
    margin-top: 1%;
}
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4 !important;
}
.social-links a img {
    width: 20px;
    height: 20px;
    margin-top: 19px;
}
.social-links a {
    margin: 0 3px;
}
.copyright {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.newsletter-signup-footer {
    position: relative;
    z-index: 9 !important;
    width: 400px;
    margin: 0 auto;
}
@media (max-width: 420px) {
    .newsletter-signup-footer {
        display: none;
    }
}
#mat-desktop {
    display: block;
}
#mat-mobile {
    display: none;
}
.footer-layout {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -30px;
    padding: 0 10%;
    right: 0;
}
@media (max-width: 420px) {
    .footer-layout {
        margin-top: 100px !important;
    }
}
.mat-text {
    position: relative;
    z-index: 5;
    width: 300px;
    text-align: left;
    margin: 0 auto;
    margin-top: 15px;
    font-size: 14px;
    color: white;
    text-shadow: 1px 1px 10px rgba(255, 192, 203, 0.74);
}
.mat-text .contact-link {
    color: #ff69b4;
    text-decoration: none;
}
.footer-human-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
}
.footer-human-avatar {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(33, 10, 73, 0.28);
}
.footer-human-contact .mat-text {
    width: 255px;
    margin: 0;
}
.middle-section h4, .right-section h4 {
    color: rgb(255, 222, 249);
    font-size: 19px;
    font-weight:100;
    text-align: left;
    margin-bottom: -2px;
}
.middle-section ul, .right-section ul {
    list-style: none;
    padding: 0;
    text-align: left;
}
.middle-section li, .right-section li {
    margin: 5px 0;
}
.middle-section li a, .right-section li a {
    color: white;
    text-decoration: none;
}
.left-section img {
    position: absolute;
    z-index: 3;
    width: auto;
    max-width: 555px;
    left: -270%;
    top: -124px;
}
@media (max-width: 1920px) {
    .left-section img {
        position: absolute;
        z-index: 3;
        width: auto;
        max-width: 555px;
        left: -990px;
        top: -124px;
    }
}
.middle-section {
    position: absolute;
    z-index: 5;
    top: -130px;
    right: 320px;
    width: 200px;
}
.right-section {
    position: absolute;
    z-index: 5;
    top: -130px;
    right: 120px;
    width: 230px;
}
.flechecontacte {
    position: absolute;
    z-index: 2;
    left: -144px;
    top: 45px;
    width: 140px;
    height: auto;
}
@media (max-width: 1600px) {
    .left-section img {
        position: absolute;
        z-index: 3;
        width: auto;
        max-width: 555px;
        left: -930px;
        top: -124px;
    }
    .middle-section {
        position: absolute;
        z-index: 5;
        top: -130px;
        right: 220px;
        width: 200px;
    }
    .right-section {
        position: absolute;
        z-index: 5;
        top: -130px;
        right: 40px;
        width: 230px;
    }
    .flechecontacte {
        position: absolute;
        z-index: 2;
        left: -144px;
        top: 45px;
        width: 140px;
        height: auto;
    }
}
@media (max-width: 1450px) {
    .left-section img {
        position: absolute;
        z-index: 3;
        width: auto;
        max-width: 555px;
        left: -870px;
        top: -124px;
    }
    .middle-section {
        position: absolute;
        z-index: 5;
        top: -130px;
        right: 180px;
        width: 200px;
    }
    .right-section {
        position: absolute;
        z-index: 5;
        top: -130px;
        right: 20px;
        width: 230px;
    }
    .flechecontacte {
        position: absolute;
        z-index: 2;
        left: -144px;
        top: 45px;
        width: 140px;
        height: auto;
    }
}
@media (max-width: 1350px) {
    .footer-links {
        position: relative;
        display: flex;
        width: 100%;
        margin: 0 auto;
        left: 0;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: left;
    }       
    .footer-logos #footer-main-logo {
        max-width: 149px;
    }
    #mat-desktop {
        display: none;
    }
    #mat-mobile {
        display: block;
        max-width: 200px;
    }
    footer {
        padding: 10px 0;
        height: 780px;
    }
    .newsletter-signup form {
        flex-direction: column;
    }
    .newsletter-signup input[type="email"], .newsletter-signup input[type="submit"] {
        width: 45%;
        font-size: 15px;
        margin: 6px auto;
    }
    .footer-layout {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
        margin-top: 40px;
        padding: none;
        right: auto; 
    }
    .middle-section {
        position: relative;
        z-index: 5;
        top: 0;
        right: 0;
        width: 25%;
    }
    .right-section {
        position: relative; 
        z-index: 5;
        top: 0;
        right: 0;
        width: 25%;
        margin: 0 auto; 
    }
    .middle-section ul, .right-section ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .middle-section ul, .right-section ul {
        padding: 0;
        margin: 0 auto; 
        list-style: none;
    }
    .middle-section h4, .right-section h4 {
        margin-bottom: 10px;
        font-size: 18px;
        text-align: center;
    }
    .middle-section ul li, .right-section ul li {
        margin-bottom: 10px;
        text-align: left; 
    }
    .footer-links {
        position: relative;
        top: 0px;
        margin-top: 20px;
        left: none;
        margin-top: none;
        display: flex;
        flex-direction: column;
        align-content: center;
    }
    .mat-text {
        position: relative;
        z-index: 5;
        width: 300px;
        text-align: left;
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
        color: white;
        text-shadow: 1px 1px 10px rgba(255, 192, 203, 0.74);
    }
    .left-section img {
        position: absolute;
        z-index: 3;
        width: 200px;
        max-width: 555px;
        left: 28%;
        top: -73px;
    }
    .flechecontacte {
        position: absolute;
        z-index: 2;
        left: -110px;
        top: 55px;
        width: 100px;
        height: auto;
    }
}
@media (max-width: 1200px) {
    .left-section img {
        left: 25%;
    }
    .flechecontacte {
        top: 45px;
        left: -99px;
    }
}
@media (max-width: 1000px) {
    .left-section img {
        left: 23%;
    }
}
@media (max-width: 800px) {
    .left-section img {
        left: 20%;
    }
    .middle-section {
        width: 40%;
    }
    .right-section {
        width: 40%;
    }
}
@media (max-width: 700px) {
    .left-section img {
        left: 18%;
    }
}
@media (max-width: 600px) {
    .left-section img {
        left: -2%;
    }
    .middle-section {
        width: 70%;
    }
    .right-section {
        width: 70%;
    }
}

/* Image cadre */
#concept-cadre {
    position: relative;
    z-index: 3;
    width: auto;
    height: 251px;
    margin: 0 auto;
}
/* Image Artisan videaste */
#concept-video {
    display: block;
    position: relative;
    z-index: 3;
    width: auto;
    height: 369px;
    margin: 30px auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0px 8px #5c57f7bf);
}
.presta-videophoto-container {
    display: flex;
    justify-content: center;
    margin-top: -20px;
    margin-bottom: 80px;
}
@media (max-width: 1000px) {
    .presta-videophoto-container {
        display: block;
        margin-top: 10px;
    }
}
#concept-moi {
    display: block;
    position: relative;
    z-index: 3;
    width: auto;
    height: 369px;
    margin: 30px auto;
    margin-bottom: 20px;
    border-radius: 8px;
    filter: drop-shadow(0 0px 8px #3c3996bf);
    /*cursor: pointer;*/
}

.container-imageetbtneleven {
    position: relative;
}

.concept-moi-visual {
    position: relative;
    width: fit-content;
    margin: 30px auto 20px;
}

.concept-moi-visual #concept-moi {
    margin: 0;
}

.concept-moi-caption {
    position: absolute;
    z-index: 4;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background: rgba(35, 22, 69, 0.72);
    box-shadow: 0 8px 20px rgba(31, 15, 66, 0.28);
    color: #fff;
    font-size: clamp(0.78rem, 1.2vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}
/* Image Photographe */
#concept-photo {
    position: relative;
    z-index: 3;
    width: auto;
    height: 309px;
    display: block;
    margin-top: 50px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    footer {
        height: auto;
        min-height: 780px;
        box-sizing: border-box;
        padding-bottom: 32px;
    }
    #concept-cadre {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 69px;
    }
    #concept-video {
        width: 350px;
        margin: 0 auto;
        height: auto;
        margin-bottom: 69px;
    }
    #concept-moi {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 34px;
    }
    .concept-moi-visual {
        width: 80%;
        margin: 0 auto 34px;
    }
    .concept-moi-visual #concept-moi {
        width: 100%;
        margin: 0;
    }
    .concept-moi-caption {
        right: 12px;
        bottom: 12px;
        left: auto;
        transform: none;
    }
    #concept-photo {
        width: 300px;
        margin: 0 auto;
        margin-bottom: 70px;
        height: auto;
    }
    #concept-cadre, #concept-video, #concept-photo {
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.348));
    }
}
@media (max-width: 800px) {
    #concept-video {
        width: 80%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 69px;
    }
}
/*#concept-cadre:hover, #concept-video:hover, #concept-photo:hover {
    filter: drop-shadow(0 0px 10px #5c57f7);
    transition-duration: 0.69s;
    scale: 1.01;
}*/
.newsletter-signup {
    position: relative;
    z-index: 4;
}

/* Avis clients : bandeau autonome placé après le footer, sans superposition. */
.home-review-bar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 8vw, 7rem);
    width: 100%;
    min-height: 96px;
    padding: 16px clamp(20px, 5vw, 72px);
    box-sizing: border-box;
    background: linear-gradient(110deg, #160d3b 0%, #32205f 48%, #a51783 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.home-review-bar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

.home-review-bar__item:hover,
.home-review-bar__item:focus-visible {
    transform: translateY(-2px);
    opacity: 0.9;
}

.home-review-bar__logo {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.home-review-bar__logo img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.home-review-bar__logo--google img {
    width: 38px;
    height: 38px;
}

.home-review-bar__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
    text-align: left;
}

.home-review-bar__stars {
    color: #fff;
    font-size: clamp(23px, 2vw, 29px);
    letter-spacing: 2px;
}

.home-review-bar__label {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .home-review-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        min-height: 0;
        padding: 22px max(20px, env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom));
    }

    .home-review-bar__item {
        width: min(100%, 330px);
        margin: 0 auto;
    }
}
.privacy-note {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}
[data-theme="dark"] .privacy-note {
    color: rgba(255, 255, 255, 0.65);
}


.newsletter-signup-footer .privacy-note {
    display: inline-block;
    margin-top: 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.544);
    text-shadow: none;
}

.newsletter-signup-footer .privacy-note a {
    color: rgba(255, 255, 255, 0.544);
    font-weight: 700;
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

.newsletter-signup-footer .privacy-note a:hover {
    text-decoration-color: rgba(255, 255, 255, 1);
}

.newsletter-signup-footer .privacy-note a:focus-visible {
    outline: 3px solid rgba(255, 105, 180, 0.65);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Newsletter - Popup désinscription (homepage) */
.newsletter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(6px);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.newsletter-modal {
    position: fixed;
    z-index: 1201;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(10px);
    width: min(520px, calc(100vw - 32px));
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
    padding: 18px 18px 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.newsletter-modal.is-active,
.newsletter-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.newsletter-modal.is-active {
    transform: translate(-50%, -50%) translateY(0);
}

.newsletter-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: rgba(15, 23, 42, 0.82);
}

.newsletter-modal h3 {
    margin: 4px 0 8px 0;
    font-size: 1.1rem;
    color: rgba(15, 23, 42, 0.92);
}

.newsletter-modal__frame {
    width: 100%;
    height: min(80vh, 680px);
    border: 0;
    border-radius: 14px;
    background: white;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#texte-content a:focus {
    color: #3833be;
    text-decoration: none;
}
[data-theme="dark"] {
    #texte-content a:focus {
        color: #bebcff;
    }
}
/* Conteneur de la flèche */
.scroll-down-home {
    position: absolute;
    z-index: 1000;
    top: 93%;
    right: 0;
    left: 0;
    margin: 0 auto;
    cursor: pointer;
    z-index: 10;
    overflow: visible;
    opacity: 0.69;
    width: fit-content;
}
/* Utilisation de l'image pour la flèche */
.chevron-home {
    width: 50px; /* Largeur de la flèche */
    height: 50px; /* Hauteur de la flèche */
    background-image: url('../2src/xrefcontaint/chevronlight.png'); /* Chemin vers ton image */
    background-repeat: no-repeat;
    background-size: contain; /* Ajuste l'image pour s'adapter au conteneur */
    cursor: pointer;
    transition: transform 0.2s;
    animation: bounce 2.69s infinite;
}
.chevron-home:hover {
    transform: translateY(-5px) scale(1.1); /* Agrandissement et déplacement au survol */
    filter: drop-shadow(0 0 5px rgb(0, 136, 255)); /* Effet de surbrillance */
}
/* Animation de rebond */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Revenir à la position d'origine */
    }
    40% {
        transform: translateY(10px); /* Déplacer vers le bas */
    }
    60% {
        transform: translateY(5px); /* Remonter un peu */
    }
}
.flashing-color {
    filter: drop-shadow(0 0 10px rgb(255, 0, 251)); 
    transition: filter 2s ease, transform 8.5s ease !important;
}
/*CHAT BOT - style hérité lorsque le hub n'est pas actif */
body:not(.qa-ready) .chatbot-btn img {
    z-index: 300;
    margin: 16px;
    color: #000000;
    width: auto;
    height: auto;
    max-width: 56px;
    max-height: 56px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    bottom: 25px;
    left: 45px;
    scale: 1.2;
    opacity: 0.4;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.205));
    transition: scale 0.3s, opacity 0.5s, filter 0.5s ease;
}

[data-theme="dark"] body:not(.qa-ready) .chatbot-btn img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.48));
}

body:not(.qa-ready) .chatbot-btn img:hover {
    scale: 1.28;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(0, 242, 255, 0.717));
}

[data-theme="dark"] body:not(.qa-ready) .chatbot-btn img:hover {
    filter: drop-shadow(0 0 4px rgb(0, 242, 255));
}

@media (max-width: 770px) {
    body:not(.qa-ready) .chatbot-btn img {
        margin: 19px;
        bottom: 70px;
        left: 4px;
        scale: 1.22;
        opacity: 0.8;
    }

    body:not(.qa-ready) .chatbot-btn img:hover {
        scale: 1.08;
    }
}
/* Conteneur du chatbot */
.chatbot-container {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50px;
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: solid 2px rgba(102, 97, 252, 0.45);
    box-shadow: 0 18px 48px rgba(102, 97, 252, 0.25);
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    /* Ajout de la transition pour l'opacité et la translation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-theme="dark"] {
    .chatbot-container {
        border: solid 2px rgba(102, 97, 252, 0.35);
        box-shadow: 0 18px 48px rgba(102, 97, 252, 0.3);
    }
}
/* Classe pour afficher le chatbot */
.chatbot-container.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 700px) {
        .chatbot-container {
            position: fixed;
            bottom: 20px;
            right: 15%;
            bottom: 380px;
        }
    }
/* En-tête du chat */
.chat-header {
    display: none !important;
    background: linear-gradient(100deg, rgba(26, 36, 36, 0.94), rgb(24, 34, 93), rgba(44, 24, 84, 0.92));
    color: white;
    padding: 4px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}
[data-theme="dark"] {
    .chat-header {
    background: linear-gradient(100deg, rgba(26, 36, 36, 0.94), rgb(24, 34, 93), rgba(44, 24, 84, 0.92));
    }
}
.bgeo {
    position: absolute;
    right: -18px;
    bottom: -19px;
    width: 50px;
    z-index: 200;
}
.chat-header img {
    position: absolute;
    top: -14px;
    filter: drop-shadow(0 0 4px rgb(0, 251, 255));
    max-width: 49px;
    max-height: 49px;
    margin-left: -63px;
}
.chat-header h3 {
    margin: 0;
    background: linear-gradient(to right, rgb(36, 244, 255), rgb(154, 102, 251), rgb(123, 100, 255), rgb(98, 0, 255));
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.482));
    font-size: 16px;
}

.chat-header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff url("/2src/icons/browkie.png") center/72% no-repeat;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    border: 2px solid #9da3f6;
}

.chat-header-title {
    font-weight: 700;
}
/* Bouton pour fermer la fenêtre du chatbot */
.fermer-btn {
    font-size: 18px;
    top: -10px;
    margin-right: 10px;
    cursor: pointer;
}
.fermer-btn:hover {
    font-size: 20px;
    color: #4a45e9;
}
/* Corps du chat où s'affichent les messages */
.chat-body {
    padding: 15px;
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f2f2f2;
}
/* Style des messages */
.chat-body {
    width: 100%;
    display: flex;
    overflow-y: auto; /* Permet le scroll vertical lorsque les messages dépassent */
    flex-direction: column;
}
.chat-body img {
    width: 35px;
}

.chat-starter {
    width: 100%;
    border-radius: 12px;
    padding: 4px 6px;
    margin: 8px 0 10px;
    width: 85%;
    background: linear-gradient(135deg, rgba(102, 97, 252, 0.08), rgba(185, 183, 255, 0.12));
}

.chat-starter__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.chat-starter__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #6661fc;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.32);
}

.chat-starter__headline {
    font-weight: 700;
    color: #0f172a;
    font-size: 16px;
}

.chat-starter__hint {
    margin: 0;
    color: #475569;
    font-size: 13px;
}

.chat-starter__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-starter__card {
    display: block;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    background: #f8fbff;
    color: #0f172a;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.chat-starter--reply {
    background: transparent;
    border: 0;
    border-radius: 14px;
    padding: 0;
    box-shadow: none;
    margin: 0 0 6px;
}

.chat-starter__card--back {
    background: linear-gradient(135deg, #d6d4ff, #fcfdff);
    border-color: rgba(102, 97, 252, 0.35);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin-bottom: 8px;
    padding: 10px 13px;
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.18);
}

.chat-starter__card--back .chat-starter__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

.chat-starter__card--back .chat-starter__title::before {
    content: '↩';
    font-size: 12px;
}

.chat-starter__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.18);
    border-color: rgba(102, 97, 252, 0.35);
}

.chat-starter__card:active {
    transform: translateY(0);
}

.chat-starter__eyebrow {
    font-size: 12px;
    color: #6661fc;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-starter__title {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    color: #0f172a;
}

.chat-reply-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 22px rgba(0, 0, 0, 0.05);
    margin-top: 6px;
    max-width: min(80%, 360px);
    font-size: 14px;
    line-height: 1.5;
}

.chat-reply-list {
    margin: 8px 0;
    padding-left: 18px;
    color: #111827;
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.chat-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(102, 97, 252, 0.3);
    background: linear-gradient(135deg, rgba(102, 97, 252, 0.12), rgba(185, 183, 255, 0.12));
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    margin-right: 6px;
    margin-top: 6px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.chat-link-pill:hover {
    border-color: rgba(102, 97, 252, 0.6);
    box-shadow: 0 12px 24px rgba(102, 97, 252, 0.2);
    transform: translateY(-1px);
}

.chat-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

[data-theme="dark"] .chat-starter {
    background: linear-gradient(135deg, rgba(102, 97, 252, 0.2), rgba(58, 50, 144, 0.2));
    border: 0;
}

[data-theme="dark"] .chat-starter__headline {
    color: #e2e8f0;
}

[data-theme="dark"] .chat-starter__hint {
    color: #cbd5f5;
}

[data-theme="dark"] .chat-starter__card {
    background: #c0d2ff;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .chat-starter--reply {
    background: transparent;
    border: 0;
    box-shadow: none;
}

[data-theme="dark"] .chat-starter__card--back {
    background: linear-gradient(135deg, #b7b5ff, #5f5af4);
    color: #e2e8f0;
    border-color: rgba(102, 97, 252, 0.45);
    box-shadow: 0 12px 26px rgba(102, 97, 252, 0.2);
}

[data-theme="dark"] .chat-reply-card {
    background: #0b1120;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 22px rgba(0, 246, 255, 0.06);
    color: #e2e8f0;
}

[data-theme="dark"] .chat-reply-list {
    color: #e2e8f0;
}

[data-theme="dark"] .chat-link-pill {
    border-color: rgba(102, 97, 252, 0.5);
    color: #e2e8f0;
}

.message img.bgeo {
    display: none !important;
}
.message {
    display: inline-block;
    margin-bottom: 8px;
    padding: 8px;
    font-size: 15px;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
    position: relative;
    clear: both; /* Assure que chaque message prend une ligne entière */
}
/* Message reçu (aligné à gauche) */
.received {
    background-color: #6661fc;
    border: 1px solid #ddd;
    color: white;
    align-self: flex-start;
    text-align: left;
    margin-left: 0;
    position: relative;
}

.received::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff url("/2src/icons/browkie.png") center/80% no-repeat;
    border: 2px solid #9da3f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    bottom: -4px;
    right: -10px;
}

.typing-indicator::after {
    display: none;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f3f5ff;
    color: #111827;
    border: 1px solid rgba(102, 97, 252, 0.18);
}

[data-theme="dark"] .typing-indicator {
    background: #0f172a;
    color: #e5edff;
    border-color: rgba(0, 191, 255, 0.16);
}

.typing-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff url("/2src/icons/browkie.png") center 52%/78% no-repeat; /* Réduit légèrement l'image pour éviter qu'elle soit rognée */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.typing-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.typing-dots span {
    display: block;
    width: 6px;
    height: 6px;
    background: #6661fc;
    border-radius: 50%;
    animation: typing-bounce 1s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
    40% { transform: translateY(-4px); opacity: 1; }
}
/* Message envoyé (aligné à droite) */
.sent {
    background-color: white;
    color: #6661fc;
    border: 1px solid #6661fc;
    align-self: flex-end;
    text-align: left;
    margin-right: 25px;
    margin-left: auto; /* Assure que le message est aligné à droite */
}
/* Pied de page du chat avec zone de saisie */
.chat-footer {
    z-index: 3;
    display: flex;
    padding: 10px;
    background-color: white;
    border-top: 1px solid #ddd;
}
.chat-footer input {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    margin-right: 10px;
}
.chat-footer button {
    background-color: #6661fc;
    color: white;
    border: 1px solid #6661fc;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
}
.chat-footer button:hover {
    background-color: #ffffff;
    color: #6661fc;
    border: 1px solid #6661fc;
}
/* Actions rapides (chatbot, thème, contact) */
.quick-actions-container {
    position: fixed;
    bottom: clamp(24px, 6vh, 60px);
    left: clamp(24px, 4vw, 60px);
    z-index: 1100;
    --qa-circle-size: clamp(160px, 30vw, 228px);
    --qa-halo-color: rgba(82, 126, 255, 0.28);
    --qa-main-size: 82px;
    --qa-halo-scale: 1;
    pointer-events: none;
    opacity: 1;
    transition: bottom 0.6s ease, left 0.6s ease, opacity 1s ease;
}

.quick-actions-container.open {
    bottom: clamp(70px, 11vh, 120px);
    left: clamp(56px, 8vw, 120px);
}

.quick-actions-container.qa-delayed-hidden {
    opacity: 0;
}
.quick-actions-container.qa-delayed-hidden .quick-actions-root {
    pointer-events: none;
}

.quick-actions-container.qa-hide-root .quick-actions-root {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.quick-actions-container.qa-hide-root .quick-action-item,
.quick-actions-container.qa-hide-root .quick-actions-halo {
    opacity: 0 !important;
    pointer-events: none !important;
}

.quick-actions-root {
    position: relative;
    width: var(--qa-main-size);
    height: var(--qa-main-size);
    pointer-events: auto;
}

.quick-actions-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    opacity: 1;
    background: none;
    overflow: hidden;
    transition: filter 1s ease, transform 1s ease, opacity 1s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.quick-actions-main img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.quick-actions-main.qa-model-enabled {
    box-shadow: none;
}
.quick-actions-main.qa-model-enabled img {
    opacity: 0;
}
.quick-actions-main .qa-model-shell {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(80, 208, 255, 0.95));
}
.quick-actions-main .qa-model-shell .qa-model-viewer,
.quick-actions-main .qa-model-shell model-viewer {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(80, 208, 255, 0.95));
}

.quick-actions-container.qa-private-mode {
    --qa-main-size: 70px;
    --qa-circle-size: clamp(144px, 27vw, 200px);
    --qa-halo-color: rgba(102, 97, 252, 0.32);
}
.quick-actions-container.qa-private-mode .quick-actions-main {
    background: radial-gradient(circle at 30% 30%, rgba(187, 184, 255, 0.95), rgba(102, 97, 252, 0.98) 55%, rgba(23, 18, 78, 0.98) 100%);
    border: 2px solid rgba(213, 211, 255, 0.88);
    box-shadow: 0 12px 28px rgba(102, 97, 252, 0.38), 0 0 0 4px rgba(255, 255, 255, 0.12);
    animation: qa-private-float 4.8s ease-in-out infinite;
}
.quick-actions-container.qa-private-mode .quick-actions-main::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 120deg, rgba(187, 184, 255, 0.0), rgba(102, 97, 252, 0.6), rgba(106, 196, 255, 0.0));
    opacity: 0.85;
    filter: blur(2px);
    animation: qa-private-rotate 6.5s linear infinite;
}
.quick-actions-container.qa-private-mode .quick-actions-main img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 12px rgba(18, 14, 58, 0.45));
}
.quick-actions-container.qa-private-mode .qa-model-shell {
    display: none;
}
.quick-actions-main:hover {
    transform: scale(1.11);
    filter: drop-shadow(0 2px 8px rgba(27, 15, 255, 0.95));
}
[data-theme="dark"] {
.quick-actions-main:hover {
    filter: drop-shadow(0 2px 18px rgba(146, 140, 255, 0.95));
}
}
.quick-actions-main:active {
    transform: scale(0.9);
}

@keyframes qa-private-float {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.04);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes qa-private-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.quick-actions-container.open .quick-actions-main {
    transform: rotate(0deg) scale(0.92);
    opacity: 0.15;
}

.quick-actions-container.open .quick-actions-main:hover {
    opacity: 0.75;
    transform: rotate(0deg);
}

.quick-actions-container.open .quick-actions-main:active {
    transform: rotate(45deg) scale(0.9);
}


.quick-actions-panel {
    position: absolute;
    bottom: calc(var(--qa-main-size) / 2);
    left: calc(var(--qa-main-size) / 2);
    width: 0;
    height: 0;
    pointer-events: none;
    transform-origin: center;
}

.quick-action-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(var(--qa-translate-x, 0px), var(--qa-translate-y, 0px)) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.18s ease, box-shadow 0.22s ease;
    --qa-index: 0;
    transition-delay: calc(var(--qa-index, 0) * 0.03s);
}

.quick-actions-container.open .quick-action-item {
    transform: translate(-50%, -50%) translate(var(--qa-translate-x, 0px), var(--qa-translate-y, 0px)) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.quick-action-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 1px 22px rgba(80, 208, 255, 0.412);
    color: #17213a;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.quick-action-button svg,
.quick-action-button img {
    width: 34px;
    height: 34px;
    pointer-events: none;
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}
[data-theme="dark"] {
.quick-action-mail img {
    filter: invert(1);
}
}

.quick-action-icon {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.quick-action-button:hover,
.quick-action-button:focus-visible {
    box-shadow: 0 1px 32px rgba(12, 18, 44, 0.34);
    transform: translateZ(0) scale(1.05);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(233, 240, 255, 0.99) 100%);
}

[data-theme="dark"] .quick-action-button {
    background: rgba(10, 10, 64, 0.98);
    color: #f2f6ff;
    box-shadow: 0 1px 22px rgba(80, 208, 255, 0.412);
}

[data-theme="dark"] .quick-action-button:hover,
[data-theme="dark"] .quick-action-button:focus-visible {
    box-shadow: 0 1px 16px rgba(161, 26, 188, 0.55);
}

.quick-action-button:active {
    transform: translateZ(0) scale(0.93);
}

.quick-actions-main:focus-visible,
.quick-action-button:focus-visible {
    outline: 2px solid rgba(82, 126, 255, 0.85);
    outline-offset: 3px;
}

.quick-actions-panel #theme-toggle img {
    width: 24px;
    height: 24px;
}

.chatbot-icon-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

.chatbot-icon-primary {
    width: 30px;
    height: 30px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.chatbot-icon-legacy {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.quick-actions-container.open .chatbot-icon-legacy {
    animation: chatbot-bounce 0.6s ease;
}

.quick-actions-panel .qa-chatbot-trigger:hover .chatbot-icon-primary {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 6px 12px rgba(137, 196, 255, 0.55));
}

.quick-actions-panel .qa-chatbot-trigger:hover .chatbot-icon-legacy {
    opacity: 1;
    transform: translate(2px, 2px) scale(1.1);
}

.quick-actions-panel .qa-chatbot-trigger:active .chatbot-icon-primary {
    transform: scale(0.9);
}

.quick-actions-panel .qa-chatbot-trigger:active .chatbot-icon-legacy {
    transform: translate(1px, 1px) scale(0.9);
}

.quick-actions-root::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px dashed var(--qa-halo-color);
    opacity: 0;
    transform: scale(0.35);
    transform-origin: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: -1;
}


.quick-actions-halo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--qa-halo-scale, 1));
    transform-origin: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    filter: drop-shadow(0 0 18px rgba(92, 138, 255, 0.5));
    mix-blend-mode: screen;
    z-index: 1;
}

.quick-actions-container.open .quick-actions-halo {
    opacity: 0.6;
}

.quick-actions-halo canvas {
    scale: 0.3;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

@keyframes chatbot-bounce {
    0% {
        transform: scale(0.6) translate(4px, 4px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

/* CHAT BOT - Version modale responsive */

/* Style du bouton d'ouverture du chatbot (héritage hors hub) */
.chatbot-btn {
    position: fixed;
    bottom: 25px;
    left: 45px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 998;
    transition: all 0.3s ease;
}

.chatbot-btn img {
    width: 56px;
    height: 56px;
    scale: 1.2;
    opacity: 0.4;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.205));
    transition: scale 0.3s, opacity 0.5s, filter 0.5s ease;
}

[data-theme="dark"] .chatbot-btn img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.48));
}

.chatbot-btn img:hover {
    scale: 1.28;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(0, 242, 255, 0.717));
}

[data-theme="dark"] .chatbot-btn img:hover {
    filter: drop-shadow(0 0 4px rgb(0, 242, 255));
}

/* Overlay pour la modale */
.chatbot-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chatbot-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Conteneur du chatbot - Responsive modale */
.chatbot-container {
    position: fixed;
    display: none;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: solid 2px rgba(102, 97, 252, 0.45);
    box-shadow: 0 22px 70px rgba(102, 97, 252, 0.28);
    overflow: hidden;
    z-index: 1000;
    
    /* Propriétés pour desktop */
    bottom: 120px;
    left: 120px;
    width: 350px;
    height: 500px;
    
    /* Animation */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="dark"] .chatbot-container {
    background-color: #0f172a;
        border: solid 2px rgba(102, 97, 252, 0.45);
        box-shadow: 0 22px 70px rgba(102, 97, 252, 0.32);
}

/* Classe pour afficher le chatbot */
.chatbot-container.active {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.chatbot-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 12px;
    background: linear-gradient(135deg, rgba(136, 131, 255, 0.88), rgba(102, 97, 252, 0.88));
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.chatbot-actions__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1c1d21;
}

.chatbot-actions__subtitle {
    font-size: 12px;
    color: #344055;
}

.chatbot-actions__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chatbot-actions .quick-action-item {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

.chatbot-actions .quick-action-button {
    position: static;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.chatbot-action-btn {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(102, 97, 252, 0.12);
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(102, 97, 252, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.chatbot-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(102, 97, 252, 0.45);
}

.chatbot-action-btn:active {
    transform: translateY(0);
}

.chatbot-action-icon {
    width: 26px;
    height: 26px;
}

[data-theme="dark"] .chatbot-actions {
    background: linear-gradient(135deg, rgba(102, 97, 252, 0.22), rgba(60, 54, 140, 0.28));
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chatbot-actions__title {
    color: #e8f1ff;
}

[data-theme="dark"] .chatbot-actions__subtitle {
    color: #9fb4d3;
}

[data-theme="dark"] .chatbot-action-btn {
    background: #0b1120;
    border-color: rgba(102, 97, 252, 0.32);
    box-shadow: 0 12px 26px rgba(102, 97, 252, 0.22);
}

[data-theme="dark"] .chatbot-action-btn:hover {
    border-color: rgba(102, 97, 252, 0.7);
    box-shadow: 0 14px 34px rgba(102, 97, 252, 0.28);
}

/* Responsive : Modale plein écran sur mobile */
@media (max-width: 768px) {
    body:not(.qa-ready) .chatbot-btn {
        bottom: 70px;
        left: 20px;
    }
    
    body:not(.qa-ready) .chatbot-btn img {
        width: 60px;
        height: 60px;
        scale: 1.1;
        opacity: 0.8;
    }
    
    body:not(.qa-ready) .chatbot-btn img:hover {
        scale: 1.15;
    }
    
    /* Modale plein écran sur mobile */
    .chatbot-container {
        top: 0;
        z-index: 10012;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 40px;
        scale: 0.91;
        border: none;
        max-width: none;
        max-height: none;
        transform: translateY(100%);
    }
    
    .chatbot-container.active {
        transform: translateY(0);
    }
    
    /* Ajustements pour le header sur mobile */
    .chat-header {
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top, 8px));
    }
    
    .chat-header h3 {
        font-size: 17px;
        margin-left: 36px;
    }
    
    .chat-header img {
        width: 30px;
        height: 30px;
        margin-left: -38px;
    }
    
    .fermer-btn {
        font-size: 22px;
        margin: 3px;
    }
    
    /* Corps du chat optimisé mobile */
    .chat-body {
        padding: 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    }
    
    /* Footer optimisé mobile */
    .chat-footer {
        padding: 15px 20px;
        padding-bottom: max(15px, env(safe-area-inset-bottom, 15px));
        gap: 10px;
    }
    
    .chat-footer input {
        font-size: 16px; /* Évite le zoom sur iOS */
        padding: 12px;
        border-radius: 8px;
    }
    
        .chat-footer button {
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 16px;
        min-width: 80px;
    }
    
    /* Messages optimisés mobile */
    .message {
        max-width: 85%;
        font-size: 16px;
        padding: 12px;
        line-height: 1.4;
    }
    
    .bgeo {
        width: 40px;
        right: -15px;
        bottom: -15px;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .chat-body {
        padding: 15px;
    }
    
    .chat-footer {
        padding: 12px 15px;
        flex-direction: column;
        gap: 8px;
    }
    
    .chat-footer input {
        margin-right: 0;
        margin-bottom: 0;
    }
    
    .chat-footer button {
        width: 100%;
    }
}

/* Prestations défilantes */
.ideas-container-horizontal {
    position: relative;
    border-radius: 5px;
    z-index: 3;
    width: 92%;
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -20px;
}
.idea {
    position: absolute;
    font-size: 15px;
    z-index: 2;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0; 
    transition: transform 1.6s ease, opacity 1.6s ease; 
}
@media (max-width: 750px) {
    .idea {
        font-size: 13px;
        margin: 15px;
    }
}
.idea.active {
    opacity: 1; /* Montre l'élément */
    transform: translateX(0%); /* Pas de déplacement */
}
.idea.hidden {
    opacity: 0;
    transform: translateX(70%);
}
/* SLIDER IMAGE APRES/AVANT */
.container-imageetbtn3 {
    position: relative;
    width: 100%;
}
.container-slider-1 {
    width: 100%;
    position: relative;
    z-index: 3;
    flex: 1;
    filter: drop-shadow(0 0px 8px #5c57f7bf);
}
.container-slider-1 h2 {
    position: relative;
    z-index: 3;
    color: #6661fc;
    text-align: center;
    top: 10px;
}
.img-container-1 {
    position: relative;
/*    border: 1px solid #6661fc;
    border-radius: 15px;*/
    width: 350px;
    margin: 0px auto;
    margin-top: 60px;
    overflow: hidden;
}
@media (max-width: 750px) {
    .img-container-1 {
        width: 300px;
        margin: 70px auto;
    }
}
.image-1 {
    width: 100%;
    display: block;
}
.apres-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    clip: rect(0, 175px, 400px, 0);
}
@media (max-width: 650px) {
    .apres-1 {
        clip: rect(0, 195px, 400px, 0);
    }
}
.slider-1 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    border-left: 2px solid #6661fc;
    cursor: ew-resize;
    border-radius: 10px;
}
.handle-1 {
    position: absolute;
    top: 0;
    border-radius: 10px;
    z-index: 4;
    left: -6px;
    width: 11px;
    height: 100%;
    background: #67669197;
    cursor: ew-resize;
}
.handle-1:hover {
    filter: drop-shadow(0 0 3px #ffffff81);
}
.handle-1 {
    transition: filter 0.3s;
}
.slider-instruction-1 {
    position: absolute;
    bottom: 70%;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255);
    border: 2px solid #ff00159a;
    color: #ff0015;
    box-shadow: 0px 0px 8px #000000c8;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    z-index: 5;
    transition: opacity 0.3s ease-in-out;
    animation: shadowBlink 1s infinite alternate; /* Animation ajoutée */
}
/* Animation pour le clignotement de l'ombre */
@keyframes shadowBlink {
    0% {
        box-shadow: 0px 0px 8px #000000c8;
        border: 2px solid #ff00159a;
    }
    100% {
        box-shadow: 0px 0px 18px #ff0000;
        border: 2px solid #ff0015;
    }
}
.slider-instruction-1.hidden-1 {
    opacity: 0;
    pointer-events: none;
}
/* Afficher en block uniquement le lien "Gestion de cookies" */
li.ongletfooteropen > a[href="/fr/14cookies/14cookies.html"] {
    display: block;
  }
  /* Masquer (ou ne pas forcer en block) le lien "Plan du site" */
  li.ongletfooteropen > a[href="/fr/15sitemap/15sitemap.html"] {
    display: none;
  }
/* === PORTFOLIO ANIMATED LINK (footer) === */
.footer-portfolio-anim {
  display: inline-block !important;
  padding: 0.1rem 0.6rem !important;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #ff41f5, #6661fc, #4dc3ff, #a259ff, #ff41f5) !important;
  background-size: 300% 100% !important;
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
  animation: footer-glow-flow 2.8s linear infinite !important;
  box-shadow: 0 0 8px rgba(102, 97, 252, 0.5);
}
.footer-portfolio-anim:hover {
  box-shadow: 0 0 16px rgba(255, 65, 245, 0.7) !important;
}
@keyframes footer-glow-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

.linkedinme {
    scale: 0.8;
}
/* TRUST CLIENT PRO VER*/
.trust-section {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 0px auto;
    padding: 1.5rem clamp(1rem, 3vw, 1.75rem) 6rem;
    border-radius: 10px;
}
.trust-section h2 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333333;
}
.trust-title__merci {
    font-style: normal;
    display: inline-block;
    background: linear-gradient(90deg,
        #333 0%, #333 40%,
        #aaa 43%, #e8e8e8 46%, #aaa 49%,
        #333 52%, #333 100%);
    background-size: 600% auto;
    background-position: 100% center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: trustMerciShimmer 5s ease-in-out infinite;
}
@keyframes trustMerciShimmer {
    0%, 65% { background-position: 100% center; }
    90%     { background-position: 0% center; }
    100%    { background-position: 100% center; }
}
.trust-container {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(330px, 1.05fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}
.trust-photos {
    min-width: 0;
    text-align: right;
}
.main-photo {
    width: 100%;
    height: clamp(180px, 22vw, 255px);
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.thumbnail-gallery {
    display: flex;
    gap: 10px;
    justify-content: right;
    margin-top: 15px; /* Ajout d'un espacement pour une meilleure séparation */
}
.thumbnail-gallery img {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 130px;
    object-fit: cover;
    border-radius: 10px; /* Coins légèrement arrondis pour un design plus moderne */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Renforcement de l'ombre */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 900px) {
    .trust-section {
        margin-top: 30px;
        margin-bottom: 0;
    }
    .main-photo {
        height: 180px;
    }
    .trust-container {
        gap: 1rem;
    }
    .thumbnail-gallery img {
        max-width: 100px;
        max-height: 130px;
    }
}
@media (max-width: 700px) {
    .main-photo {
        height: 180px;
    }
    .thumbnail-gallery img {
        max-width: 100px;
        max-height: 40px;
    }
}
/* Colonne de droite : Projets */
.trust-projects {
    min-width: 0;
}
.trust-projects ul,
.trust-projects-featured,
.trust-projects-rail {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-projects-featured {
    display: grid;
    gap: 0.65rem;
}
.trust-projects-note {
    margin: 0.7rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    font-style: italic;
    color: #77758a;
}
.trust-projects li {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    padding: 0.56rem 0.68rem;
    border: 1px solid rgba(203, 201, 255, 0.6);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 8px rgba(32, 20, 80, 0.05);
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.2s;
}
.trust-projects li.trust-project-card--featured {
    background: rgba(248, 247, 255, 0.9);
    border-color: rgba(102, 111, 236, 0.2);
}
.trust-projects li.trust-project-card--compact {
    flex: 0 0 285px;
    padding: 0.5rem 0.58rem;
    background: rgba(255, 255, 255, 0.75);
}
.trust-projects li:hover {
    background: rgba(246, 244, 255, 0.95);
    border-color: rgba(102, 111, 236, 0.38);
    box-shadow: 0 4px 16px rgba(102, 111, 236, 0.1);
    transform: translateY(-1px);
}
.trust-project-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
    box-shadow: 0 8px 18px rgba(28, 20, 70, 0.14);
}
.trust-project-card--compact .trust-project-thumb {
    width: 40px;
    height: 40px;
}
.trust-project-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}
.trust-projects strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 12.5px;
    color: #333333;
    line-height: 1.16;
}
.trust-projects span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.14;
    color: #666fec;
}
.trust-project-card--compact span {
    font-size: 11.5px;
}
.trust-projects em {
    font-size: 11.5px;
    color: #888888;
    line-height: 1.1;
}
.trust-projects-archive {
    position: relative;
    margin-top: 0.75rem;
    overflow: hidden;
}
.trust-section .trust-projects-archive-label {
    margin: 0 0 0.45rem;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    color: #666fec;
}
.trust-projects-marquee {
    position: relative;
    overflow: hidden;
    padding-block: 0.1rem 0.35rem;
}
.trust-projects-rail {
    display: flex;
    gap: 0.65rem;
    width: max-content;
    padding: 0;
    animation: trustProjectMarquee 22s linear infinite;
    will-change: transform;
}
.trust-projects-marquee:hover .trust-projects-rail {
    animation-play-state: paused;
}
.trust-projects-archive::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62px;
    height: calc(100% - 1.3rem);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
}
.trust-projects-archive::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 32px;
    height: calc(100% - 1.3rem);
    pointer-events: none;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}
@keyframes trustProjectMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 0.325rem));
    }
}
[data-theme="dark"] .trust-section h2,
[data-theme="dark"] .trust-section p {
    color: #cbc9ff;
}
[data-theme="dark"] .trust-title__merci {
    background: linear-gradient(90deg,
        #cbc9ff 0%, #cbc9ff 40%,
        #e8e4ff 43%, #fff 46%, #e8e4ff 49%,
        #cbc9ff 52%, #cbc9ff 100%);
    background-size: 600% auto;
    background-position: 100% center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .trust-projects li {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(203, 201, 255, 0.18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .trust-projects li.trust-project-card--featured {
    background: rgba(102, 111, 236, 0.1);
    border-color: rgba(203, 201, 255, 0.22);
}
[data-theme="dark"] .trust-projects li.trust-project-card--compact {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(203, 201, 255, 0.14);
}
[data-theme="dark"] .trust-projects strong {
    color: #f6f4ff;
}
[data-theme="dark"] .trust-projects span {
    color: #8e95ff;
}
[data-theme="dark"] .trust-projects em {
    color: #cbc9ff;
}
[data-theme="dark"] .trust-section .trust-projects-archive-label {
    color: #cbc9ff;
}
[data-theme="dark"] .trust-projects-archive::after {
    background: linear-gradient(90deg, rgba(13, 0, 45, 0), #0d002d);
}
[data-theme="dark"] .trust-projects-archive::before {
    background: linear-gradient(90deg, #0d002d, rgba(13, 0, 45, 0));
}
.trust-projects li.active {
    background: rgba(102, 111, 236, 0.07);
    border-color: #666fec;
    box-shadow: 0 4px 16px rgba(102, 111, 236, 0.12);
    transform: translateY(-1px);
}
.trust-projects li.active .trust-project-copy strong {
    color: #222;
}
.trust-projects li.active .trust-project-copy span {
    color: #666fec;
}
.trust-projects li.active .trust-project-copy em {
    color: #888;
}
.trust-projects li.active .trust-project-thumb {
    outline: 2px solid #666fec;
    outline-offset: 1px;
}
[data-theme="dark"] .trust-projects li.active {
    background: rgba(102, 111, 236, 0.14);
    border-color: #666fec;
    box-shadow: 0 4px 20px rgba(102, 111, 236, 0.22);
}
[data-theme="dark"] .trust-projects li.active .trust-project-copy strong {
    color: #f6f4ff;
}
[data-theme="dark"] .trust-projects li.active .trust-project-copy em {
    color: #cbc9ff;
}
@media (max-width: 820px) {
    .trust-section {
        padding-inline: 1rem;
    }
    .trust-container {
        grid-template-columns: 1fr;
    }
    .trust-photos {
        text-align: left;
    }
    .thumbnail-gallery {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.35rem;
    }
    .trust-projects-featured {
        display: grid;
        gap: 0.55rem;
    }
    .trust-projects li.trust-project-card--featured {
        width: 100%;
        min-width: 0;
    }
    .trust-projects li.trust-project-card--compact {
        flex-basis: min(285px, 78vw);
    }
}
@media (max-width: 520px) {
    .trust-section {
        padding-inline: 0.85rem;
    }
    .trust-section h2 {
        font-size: 1.45rem;
    }
    .trust-section p {
        margin-bottom: 1.25rem;
    }
    .main-photo {
        height: 210px;
    }
    .trust-projects span {
        font-size: 13px;
    }
    .trust-projects strong {
        font-size: 12px;
    }
    .trust-projects li {
        padding: 0.52rem 0.58rem;
    }
    .trust-project-thumb {
        width: 44px;
        height: 44px;
    }
    .trust-project-card--compact .trust-project-thumb {
        width: 38px;
        height: 38px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .trust-projects-rail {
        animation: none;
        transform: none;
    }
    .trust-projects-marquee {
        overflow-x: auto;
    }
}
.lien-externe-lkd {
    filter: invert();
    margin-left: 10px;
}
.highlight {
    pointer-events: none;
}
.jedevoilefaq {
    display: none;
}
/* Lorsque vous êtes prêt à révéler ces sections
.jedevoilefaq {
    display: block;
}*/
#faq {
    margin-top: 260px;
}
/* XXX */
/* Sva gogle */
.review-container {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 540px;
    height: auto;
    margin: 0px auto;
    margin-top: 180px;
    margin-bottom: -60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 138px 0 24px;
    box-sizing: border-box;
}
@media (max-width: 1000px) {
    .review-container {
        margin-top: 48px;
        margin-bottom: 0px;
        min-height: 0;
        padding: 116px 0 16px;
    }
}
.review-container h2 {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 50%;
    width: min(92vw, 780px);
    transform: translateX(-50%);
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    text-align: center;
}
.arrow {
    position: relative;
    top: 112px;
    z-index: 4;
    border: none;
    padding: 10px;
    font-size: 44px;
    cursor: pointer;
    color: #6661fc;
    border-radius: 50%;
    background-color: #00000000;
}
.reviews {
    display: flex;
    overflow: hidden;
    width: min(860px, calc(100vw - 260px));
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    align-self: flex-start;
}
.review-card {
    background-color: white;
    border-radius: 10px;
    width: 350px;
    height: 360px;
    scale: 0.90;
    box-shadow: 0 0px 12px #302e64b1;
    padding: 20px;
    margin: 0 -3px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] {
    .review-card {
        background-color: #9492d4;
        box-shadow: 0 0px 12px #cfceff;
    }
}
.profile {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.avatar {
    width: 35px;
    height: 35px;
    margin-right: 10px;
}
.avatar-placeholder {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: black;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info h3 {
    color: black;
    margin: 0;
    font-size: 16px;
}
.info p {
    margin: 0;
    font-size: 12px;
    color: rgb(87, 87, 87);
}
.google-logo {
    margin-left: auto;
    width: 20px;
    height: 20px;
}
.rating {
    font-size: 25px;
    color: #f4c150;
    margin-bottom: 10px;
}
.rating2 {
    font-size: 25px;
    color: #f4c150;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: 0.04em;
}
.review-text {
    font-size: 15px;
    color: #000000;
    line-height: 1.6;
    max-height: 8.2em;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}
.review-card.has-toggle .review-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.8em;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 95%);
    pointer-events: none;
}
[data-theme="dark"] .review-card.has-toggle .review-text::after {
    background: linear-gradient(180deg, rgba(148,146,212,0) 0%, #9492d4 95%);
}
.review-card.is-expanded .review-text {
    max-height: 170px;
    overflow-y: auto;
    padding-right: 6px;
}
.review-card.is-expanded .review-text::after {
    display: none;
}
.review-toggle {
    margin-top: auto;
    padding-top: 12px;
    border: none;
    background: none;
    color: #6661fc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}
[data-theme="dark"] .review-toggle {
    color: #ebe9ff;
}
.textegoogle{
  position:absolute;
  z-index: 200;
  top:72px;
  left:0;
  width:100%;
  margin:24px auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.textegoogle p{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  line-height: 1.1;
}
.google-rating-label {
  margin-right: 8px;
}
.google-rating-value {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  font-weight: 700;
}
.google-rating-value strong {
  line-height: 1;
  font-weight: inherit;
  margin-right: 0;
}
.google-rating-slash,
.google-rating-last {
  line-height: 1;
  font-weight: inherit;
}
.google-rating-slash {
  margin-left: 1px;
}
.google-rating-last {
  margin-left: 2px;
}
.google-rating-count {
  margin-left: 8px;
}
.textegoogle .cta-google{
  display:inline-flex;
  align-items:center;
  margin:0;
  font-size:15px;
  color:#6661fc;    
font-weight:bold;
  opacity:0.69;
  scale: 0.8;
  text-decoration:none;
  transition:opacity .3s ease, transform .2s ease, color .2s ease;
}
[data-theme="dark"] {
    .textegoogle .cta-google {
    color:#afacff;
    opacity: 0.87;
    }
    .textegoogle .cta-google img{
    filter: invert();
    }
}
.textegoogle .cta-google img{
  width:18px;
  height:18px;
  margin-right:6px;
}
.textegoogle .cta-google:hover{
  opacity:1;
  transform:scale(1.05);
}
@media (max-width:1000px){
  .review-container h2{
    top: 16px;
    font-size: 24px;
    width: min(92vw, 520px);
  }
  .textegoogle{top:58px;margin:20px auto;}
  .arrow{
    top: 96px;
  }
  .textegoogle .cta-google{font-size:12px;}
  .textegoogle .cta-google img{width:16px;height:16px;}
  .reviews{
    width: calc(100vw - 88px);
  }
  .review-card{
    height: 340px;
    width: 300px;
  }
  .review-card.is-expanded .review-text{
    max-height: 150px;
  }
}

.smooth-appear {
    opacity: 0;
    transform: translateY(-100px); /* Valeur par défaut */
    transition: opacity 2s ease-out, transform 1.7s ease-out;
}
.animate__pulse {
    animation-name: animate__pulse;
    animation-delay: 0.69s;
    animation-duration: 1s;
}
.animate__pulse {
    --animate-duration: 2s;
}
/* Ajoutez ces règles CSS pour afficher une main lors du survol sur ordinateur */
.reviews {
    cursor: grab;
    margin-top: 0;
}
.reviews:active {
    cursor: grabbing;
}
.reviews {
    /* Garde la possibilité de faire défiler le contenu, 
       mais supprime l'affichage de la barre de scroll */
    -ms-overflow-style: none;  /* Pour Internet Explorer et Edge */
    scrollbar-width: none;     /* Pour Firefox */
}
.reviews::-webkit-scrollbar {
    display: none; /* Pour Chrome, Safari et Opera */
}
/* Lightbox */
.lightbox {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.lightbox img {
    max-width: 50%;
    max-height: 50%;
    border-radius: 4px;
    transition: transform 0.3s ease-in-out;
}
.close-lightbox {
    position: absolute;
    top: 125px;
    right: 10%;
    font-size: 60px;
    color: white;
    cursor: pointer;
}
@media (max-width: 1500px) {
    .lightbox img {
        max-width: 80%;
        max-height: 80%;
    }
}
@media (max-width: 600px) {
    .lightbox img {
        max-width: 90%;
        max-height: 90%;
    }
}
.mariagefoll {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    margin: 12px auto;
    justify-content: center;
    scale: 0.7;
}
@media (max-width: 750px) {
.mariagefoll {
    margin: 12px auto;
    top: 40px;
    margin-bottom: 120px;
}
}
/*PUPOP Temporaire, Travaux*/
.loading-wrapper {
    text-align: center;
    position: relative;
    z-index: 200;
    top: 30%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
.loading-text {
    margin-bottom: 10px;
    font-size: 14px;
    width: 82%;
    font-weight: bold;
    color: #6661fc;
    z-index: 200;
    text-align: left;
    position: relative;
}
.loading-container-bar {
    width: 300px;
    height: 10px;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
}
.loading-bar {
    position: absolute;
    z-index: 200;
    background: radial-gradient(circle, #6661fc, transparent);
    filter: blur(4px);
    animation: loadingAnimation 3s infinite linear;
    mix-blend-mode: color-dodge;
    width: 100%;
    height: 100%;
}
@keyframes loadingAnimation {
    0% {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            #6661fc 50%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.teasing-form {
    position: relative;
    z-index: 10000;
    margin: 60px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
}
[data-theme="dark"] {
    .teasing-form {
        background-color: #d9d7ff;
        border: 2px solid #ffffff;
        box-shadow: 0 0px 9px rgba(255, 255, 255, 0.593);
    }
    .teasing-form:hover {
        border: 2px solid #6661fc;
    }
}
@media (max-width: 800px) {
    .teasing-form {
        max-width: 350px;
    }
}
.teasing-form:hover {
    border: 2px solid #deddff;
}
.teasing-title {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}
.teasing-form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.teasing-form-content label {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
}
.teasing-form-content input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    color: #333;
    box-sizing: border-box;
}
.teasing-form-content input[type="email"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
.checkbox-container-travaux {
    display: flex;
    margin-bottom: 20px;
    font-size: 0.9em;
    flex-direction: column;
    width: 100%;
    align-items: flex-start; /* Aligne les éléments à gauche */
    text-align: left;
    margin-left: 155px;
    gap: 5px;
}
@media (max-width: 700px) {
    .checkbox-container-travaux {
        margin-left: 55px;
    }
}
.checkbox-container-travaux input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
}
.checkbox-container-travaux label {
    color: #555;
    cursor: pointer;
}
.cta-button-travaux {
    padding: 10px 20px;
    background-color: #6661fc;
    color: white;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.cta-button-travaux:hover {
    background-color: #a6a3ff;
}
.cta-button-travaux:active {
    background-color: #003d80;
    transform: scale(0.98);
}
.teasing-form-content {
    margin-bottom: 60px;
}
.hidden-travaux {
    display: none;
}
.popup-container-travaux {
    position: fixed;
    z-index: 2001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 1; /* Ajoute une propriété d'opacité pour la transition */
    transition: opacity 0.5s ease; /* Durée et effet pour la transition */
}
.popup-container-travaux.hidden {
    opacity: 0; /* Réduit l'opacité à 0 */
    pointer-events: none; /* Empêche les clics lorsqu'elle disparaît */
}
.popup-content-travaux {
    position: relative;
    z-index: 3002;
    border-radius: 10px;
    max-width: 500px;
}
.close-popup-travaux {
    position: absolute;
    z-index: 19005;
    top: 41px;
    right: -18px;
    background: rgb(255, 0, 225);
    color: #fff;
    border: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
}
.close-popup-travaux:hover {
    background: rgb(120, 0, 106);
}
/* Popup RDV visio */
.popup-container-rdv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 0, 20, 0.85);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease; 
    z-index: 99999 !important;
}
.popup-container-rdv.hidden {
    opacity: 0; /* Réduit l'opacité à 0 */
    pointer-events: none; /* Empêche les clics lorsqu'elle disparaît */
}
.popup-content-rdv {
    background: white;
    padding: 20px;
    border-radius: 15px;
    max-width: 500px;
    text-align: left;
    position: relative;
    border: 2px solid #6661fc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 700px) {
    .popup-content-rdv {
        max-width: 270px;
    }
}
[data-theme="dark"] {
    .popup-container-rdv {
        background: rgba(255, 255, 255, 0.18);
    }
    .popup-content-rdv {
        background: rgb(24, 6, 71);
        border: 2px solid #6661fc90 !important;
        box-shadow: 0 2px 12px rgba(255, 255, 255, 0.201);
    }
}
.offer-badge-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 25px;
}
.offer-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.offer-badge.badge-offert {
    background: linear-gradient(120deg, #0ed8b6, #03b0ff);
}
.offer-badge.badge-premium {
    background: linear-gradient(120deg, #ff8f5f, #ff3a8f);
}
.popup-content-rdv p {
    margin-bottom: 50px;
}
.popup-content-rdv .rdv-popup-description {
    margin-bottom: 22px;
    line-height: 1.45;
}
.rdv-whatsapp-cta {
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 12px;
    background-color: rgba(22, 163, 74, 0.08);
    background-image: url("/2src/xrefcontaint/msg-popup.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid rgba(22, 163, 74, 0.2);
}
.rdv-whatsapp-cta p {
    margin: 0 0 18px;
    width: 62%;
    max-width: 560px;
    font-size: 0.94rem;
    line-height: 1.4;
}
@media (max-width: 700px) {
    .rdv-whatsapp-cta p {
        width: 100%;
        max-width: 100%;
    }
}
.rdv-whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #34d399);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.24);
}
.rdv-whatsapp-button:hover {
    color: #fff;
    transform: translateY(-1px);
}
.close-popup-rdv {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6661fc;
}
.popup-content-services {
    background: white;
    padding: 24px;
    border-radius: 18px;
    max-width: 680px;
    width: calc(100% - 32px);
    text-align: left;
    position: relative;
    border: 2px solid #6661fc !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}
.popup-content-services h2 {
    margin: 0 0 8px;
}
.popup-content-services p {
    margin: 0;
}
.services-popup-lead {
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.55;
    margin-bottom: 22px !important;
}
.services-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.services-popup-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(111, 125, 255, 0.18);
    background: linear-gradient(180deg, rgba(111, 125, 255, 0.06), rgba(255, 126, 224, 0.04));
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.services-popup-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(111, 125, 255, 0.16);
    border-color: rgba(111, 125, 255, 0.32);
}
.services-popup-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.02);
}
.services-popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(12, 10, 36, 0.18) 0%, rgba(12, 10, 36, 0.52) 52%, rgba(12, 10, 36, 0.84) 100%),
        linear-gradient(135deg, rgba(111, 125, 255, 0.18), rgba(255, 126, 224, 0.1));
}
.services-popup-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
}
.services-popup-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.18));
}
.services-popup-card strong {
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}
.services-popup-card span {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
}
.services-popup-card em {
    margin-top: auto;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
}
.close-popup-services {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6661fc;
}
@media (max-width: 700px) {
    .popup-content-services {
        width: calc(100% - 24px);
        padding: 18px;
    }
    .services-popup-grid {
        grid-template-columns: 1fr;
    }
}
[data-theme="dark"] {
    .popup-content-services {
        background: rgb(24, 6, 71);
        border: 2px solid #6661fc90 !important;
        box-shadow: 0 2px 12px rgba(255, 255, 255, 0.201);
    }
    .services-popup-lead,
    .services-popup-card span {
        color: rgba(255, 255, 255, 0.76);
    }
    .services-popup-card {
        background: linear-gradient(180deg, rgba(111, 125, 255, 0.16), rgba(255, 126, 224, 0.08));
        border-color: rgba(111, 125, 255, 0.24);
    }
    .services-popup-overlay {
        background:
            linear-gradient(180deg, rgba(5, 4, 18, 0.24) 0%, rgba(5, 4, 18, 0.58) 52%, rgba(5, 4, 18, 0.88) 100%),
            linear-gradient(135deg, rgba(111, 125, 255, 0.2), rgba(255, 126, 224, 0.12));
    }
    .services-popup-card em,
    .close-popup-services {
        color: #a5adff;
    }
}
/* Style spéciale bouton google */
.qxCTlb {
    background-color: #6661fc !important;
    border: 2px solid #6661fc00 !important;
    color: white !important;
    height: 20px !important;
    display: flex !important; /* Flexbox est essentiel pour centrer */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    transition: ease-out 0.1s;
    line-height: normal !important; /* Évite que la hauteur de ligne interfère */
}
.qxCTlb:hover {
    background-color: #ffffff !important;
    border: 2px solid #6661fc !important;
    color: #6661fc !important;
}
[data-theme="dark"] {
    .qxCTlb:hover {
        background-color: #e7e7e7 !important;
    }
}
/* Changement de langue */
#langage-container {
    margin-right: 27px;
    top: 0;
    right: 0;
    margin-top: 22px;
    background: none;
    border: none;
    position: fixed;
    z-index: 2001;
    transition: opacity 0.4s, filter 0.4s ease;
}
#langage-container img {
    width: 23px;
    min-width: 10px;
    z-index: 2001;
}
#langage-container:hover {
    cursor: pointer; /* Change en 'cursor: grab;' si tu veux un autre style */
    /* effet de lueur avec filter: drop-shadow */
    filter: drop-shadow(0 0 4px #6661fc );
    opacity: 0.7;
}
@media (max-width: 760px) {
    #langage-container {
        width: 42px;
        margin-top: 34px;
        margin-left: 31px;
        display: none;
        left: 0;
    }
}
@media (max-width: 400px) {
    #langage-container {
        width: 37px;
        margin-top: 34px;
        margin-left: 17px;
        display: none;
        left: 0;
    }
}
/* Par défaut, on la cache (pour la version desktop) */
#arrowExpand {
    display: none;
    cursor: pointer;
    /* Autres styles (taille, etc.) */
}
@media (max-width: 1200px) {
    #arrowExpand {
        display: block;
        position: fixed; /* pour qu’elle reste visible même si le header est replié */
        top: 14px;
        right: 174.5px;
        width: 35px; /* ajustez selon votre besoin */
        height: auto;
        z-index: 10000; 
        opacity: 1;
        transition: opacity 0.5s ease;
    }
    header:not(.minimized) #arrowExpand {
        opacity: 0.2;
    }
}
/* En version mobile, on l’affiche et on le positionne en haut à droite */
@media (max-width: 1250px) {
#arrowExpand {
    right: 34.5px;
  }
}
[data-theme="dark"] {
    #arrowExpand {
      filter: invert();
    }  
    header:not(.minimized) #arrowExpand {
        opacity: 0.34;
    }
}
[data-theme="dark"] {
/* Ne pas appliquer de filtre aux drapeaux de langue. */
img[src="/2src/xrefheader/usa.png"] {
    filter: none;
}
}
@media (max-width: 400px) {
    #arrowExpand {
        right: 20.5px;
      }
    }
/* 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: 14000;
    }
    .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);
    }
    }
/* Animation confetti */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--accent);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
}
/*
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

    // 5. Animation de confetti pour récompense
        function createConfetti() {
            const colors = ['#ff00f2', '#6661fc', '#00e676', '#ffeb3b'];
            const container = document.body;
            
            for (let i = 0; i < 150; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                
                // Position aléatoire
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = '-10px';
                
                // Couleur aléatoire
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                // Taille aléatoire
                const size = Math.random() * 10 + 5;
                confetti.style.width = size + 'px';
                confetti.style.height = size + 'px';
                
                // Rotation aléatoire
                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
                
                container.appendChild(confetti);
                
                // Animation
                const animation = confetti.animate([
                    { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
                    { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
                ], {
                    duration: Math.random() * 3000 + 2000,
                    easing: 'cubic-bezier(0,0.9,0.57,1)'
                });
                
                // Supprimer après l'animation
                animation.onfinish = () => confetti.remove();
            }
            */

            /* Container de la barre de progression */
.progress-bar-container {
    position: absolute;
    z-index: 30300;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute; /* AJOUT : sortir du flux */
    bottom: -3px; /* AJOUT : positionner sous l'onglet */
    left: 0;
    overflow: hidden;
}
/* Barre de progression */
.progress-bar {
    height: 100%;
    width: 30px;
    border-radius: 5px;
    opacity: 0.5;
    background: linear-gradient(90deg, #8b88e0, #6661fc);
    transition: none; /* MODIFIÉ : pas de transition par défaut */
    position: relative;
}
/* Effet de brillance */
.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: none; /* MODIFIÉ : pas de transition par défaut */
}
/* Animation activée uniquement quand nécessaire */
.progress-bar.animating {
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.progress-bar.animating::after {
    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* États de progression */
.progress-bar.active {
    opacity: 1;
    width: 100%;
}
.progress-bar.active::after {
    left: 0%;
}

.dropdown:hover > .progress-bar-container .progress-bar,
.dropdown:focus-within > .progress-bar-container .progress-bar {
    opacity: 1;
    width: 100%;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dropdown:hover > .progress-bar-container .progress-bar::after,
.dropdown:focus-within > .progress-bar-container .progress-bar::after {
    left: 0%;
    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dropdown doit être en position relative pour contenir la barre absolue */
.dropdown {
    position: relative;
}
/* Effet tactile sur mobile */
.dropdown.touched .dropdown-toggle {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}
@media (max-width: 740px) {
.progress-bar-container {
    display: none;
}
.progress-bar::after {
    display: none;
}
.progress-bar {
    display: none;
}
}
/* Projet : responsiv menu burger tel téléphone phone smart*/
/* =================================
   RESPONSIVE BREAKPOINTS
   ================================= */
:root {
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
}

/* =================================
   HEADER DESKTOP
   ================================= */
.desktop-header-container {
    position: f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .desktop-header-container {
    background: rgba(15, 15, 15, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Masquer header desktop sur mobile */
@media (max-width: 1200px) {
    .desktop-header-container {
        display: none !important;
    }
}

/* =================================
   HEADER MOBILE
   ================================= */
/* ==== HEADER MOBILE ==== */
.mobile-header-container {
    display: none;
    position: sticky;
    top: 0;
    z-index: 2000;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    isolation: isolate; /* stacking context isolé pour que ::before z-index:-1 reste dans le header */
}

/* Pseudo-élément pour le blur — technique fiable sur sticky + Safari/iOS */
.mobile-header-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(22px) saturate(1.8);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    transition: backdrop-filter 0.25s ease, background 0.25s ease;
}

[data-theme="dark"] .mobile-header-container {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-header-container::before {
    background: rgba(16, 0, 63, 0.48);
}

/* Menu ouvert → plus de blur, fond opaque */
body.menu-open .mobile-header-container::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="dark"] body.menu-open .mobile-header-container::before {
    background: rgba(16, 0, 63, 0.98);
}

/* Afficher header mobile uniquement sur mobile */
@media (max-width: 1200px) {
    .mobile-header-container {
        display: block !important;
    }
}

.mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1.25rem;
    height: fit-content;
    position: relative;
    gap: 0.75rem;
}

/* =================================
   LOGO MOBILE
   ================================= */
/* Par défaut : logo à gauche (blog et autres) */
.mobile-logo-container {
    flex-shrink: 0;
}

/* Vitrine et QR-cadre : logo centré absolument */
body.vitrine-mode .mobile-logo-container,
body.qr-creation-mode .mobile-logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

body.vitrine-mode .mobile-logo-container a,
body.qr-creation-mode .mobile-logo-container a {
    pointer-events: auto;
}

#main-logo-mobile {
    height: 24px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

#main-logo-mobile:hover {
    transform: scale(1.05);
}

/* =================================
   ACTIONS UTILISATEUR MOBILE
   ================================= */
.mobile-user-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}

.mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-action-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.mobile-action-btn img {
    width: 20px;
    height: 20px;
}

[data-theme="dark"] .mobile-action-btn {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mobile-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
#mobile-burger-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0px #6661fc88;
}
/* =================================
   BOUTON BURGER
   ================================= */
.mobile-burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2001;
}
.burger-line {
    width: 24px;
    height: 2px;
    background: #333;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.burger-line:not(:last-child) {
    margin-bottom: 4px;
}

[data-theme="dark"] .burger-line {
    background: #fff;
}

/* Animation du bouton burger quand actif */
.mobile-burger-btn.active .burger-line-1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-burger-btn.active .burger-line-2 {
    opacity: 0;
    transform: scale(0);
}

.mobile-burger-btn.active .burger-line-3 {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* =================================
   MENU OVERLAY - ÉTAT INITIAL FERMÉ
   ================================= */
/* ==== OVERLAY MENU MOBILE ==== */
.mobile-menu-overlay {
    position: fixed;
    top: 50px; /* Hauteur du header mobile */
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
    /* ÉTAT INITIAL : FERMÉ */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}

/* Fond bleu nuit transparent + flou pour l'overlay du menu mobile en dark mode */
[data-theme="dark"] .mobile-menu-overlay {
    background: rgba(16, 0, 63, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ÉTAT OUVERT */
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* =================================
   NAVIGATION MOBILE
   ================================= */
.mobile-menu-nav {
    padding: 1rem 1.25rem 0;
    max-width: 100%;
    background-color: white;
}
[data-theme="dark"] 
.mobile-menu-nav {
    background-color: rgba(16, 0, 63, 0.92);
}
/* =================================
   SECTIONS DU MENU
   ================================= */
.mobile-menu-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    
    /* Animation d'apparition */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

[data-theme="dark"] .mobile-menu-section {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Animation quand le menu s'ouvre */
.mobile-menu-overlay.active .mobile-menu-section {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-section:last-child {
    border-bottom: none;
}

/* =================================
   BOUTONS DE SECTION
   ================================= */
.mobile-menu-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.75rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] .mobile-menu-section-toggle {
    color: #fff;
}

.mobile-menu-section-toggle:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .mobile-menu-section-toggle:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* =================================
   FLÈCHE DE SECTION
   ================================= */
.mobile-menu-arrow {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.mobile-menu-section.active .mobile-menu-arrow {
    transform: rotate(180deg);
}

/* =================================
   CONTENU DES SECTIONS
   ================================= */
.mobile-menu-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .mobile-menu-section-content {
    background: rgba(255, 255, 255, 0.01);
}

.mobile-menu-section.active .mobile-menu-section-content {
    max-height: 2000px; /* Valeur élevée pour permettre l'animation */
}

/* =================================
   ÉLÉMENTS DE MENU
   ================================= */
.mobile-menu-item {
    display: block;
    padding: 0.85rem 0.75rem;
    text-decoration: none;
    color: #555;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

[data-theme="dark"] .mobile-menu-item {
    color: #ddd;
}

.mobile-menu-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-left-color: #007bff;
    color: #333;
}

[data-theme="dark"] .mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

/* Sous-onglets mobile (hamburger) */
.mobile-submenu {
    display: none;
    margin: 0.35rem 1.5rem 0.75rem 2.15rem;
    padding-left: 1.05rem;
    border-left: 2px solid rgba(112, 88, 226, 0.22);
}

.mobile-submenu-wrap > .submenu-parent-link--trigger-only {
    transition: opacity 0.18s ease;
}

.mobile-submenu-wrap.is-open > .submenu-parent-link--trigger-only {
    opacity: 0.58;
}

.mobile-submenu-wrap.is-open .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    display: block;
    padding: 0.65rem 0.9rem;
    padding-left: 0.7rem;
    margin-top: 0.5rem;
    border-radius: 14px;
    text-decoration: none;
    color: #333;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(112, 88, 226, 0.12);
}

[data-theme="dark"] .mobile-submenu {
    border-left-color: rgba(167, 139, 250, 0.35);
}

[data-theme="dark"] .mobile-submenu a {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* =================================
   CONTENU DES ÉLÉMENTS
   ================================= */
.mobile-menu-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-menu-item-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.mobile-menu-item-description {
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.3;
}

/* =================================
   BADGES
   ================================= */
.mobile-menu-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.mobile-menu-item-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* =================================
   MON ESPACE - FOOTER MENU QR-CADRE
   ================================= */
.mobile-menu-account-footer,
.mobile-menu-preferences {
    padding: 1.25rem 1.25rem 0.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .mobile-menu-account-footer,
[data-theme="dark"] .mobile-menu-preferences {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Icône thème uniquement : inversion en dark (SVG sombre sinon invisible) */
[data-theme="dark"] #pref-theme-icon {
    filter: invert(1);
}
/* Icône langue : jamais inversée (drapeau coloré) */
#pref-lang-icon {
    filter: none !important;
}

.mobile-menu-account-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 0.6rem;
}

.mobile-menu-account-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mobile-menu-account-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    transition: background 0.2s, border-color 0.2s;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
}

.mobile-menu-account-link:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.4);
}

.mobile-menu-account-link img {
    width: 16px;
    height: 16px;
}

/* Dark mode : fond blanc conservé pour que les icônes restent lisibles */
[data-theme="dark"] .mobile-menu-account-link {
    background: rgba(255, 255, 255, 0.88);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .mobile-menu-account-link:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.35);
}

/* =================================
   RÉSEAUX SOCIAUX - FOOTER MOBILE
   ================================= */
.mobile-menu-social {
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .mobile-menu-social {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.mobile-menu-social .social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
}

.social-links .social-label {
    display: none;
}

.mobile-menu-social .social-label {
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.mobile-menu-social .social-links img {
    margin: 0 auto;
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease;
    filter: invert(1);
    display: block;
}

[data-theme="dark"] .mobile-menu-social .social-links img {
    filter: none;
}

.mobile-menu-social .social-links a:focus-visible img,
.mobile-menu-social .social-links a:hover img {
    transform: scale(1.1);
}

.mobile-menu-social .social-links a {
    display: inline-flex;
    align-items: center;
}

.badge-travaux {
    background: #ffeaa7;
    color: #d63031;
}

.badge-nouveau {
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
    color: #fff;
}

.badge-nouveautes {
    background: #00b894;
    color: #fff;
}

.badge-top {
    background: #fd79a8;
    color: #fff;
}

.badge-gratuit {
    background: #00cec9;
    color: #fff;
}

.badge-special {
    background: linear-gradient(45deg, #fd79a8, #fdcb6e);
    color: #fff;
}

/* =================================
   ANIMATIONS PERSONNALISÉES
   ================================= */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-overlay.active .mobile-menu-section:nth-child(1) {
    animation: slideInUp 0.3s ease 0.1s both;
}

.mobile-menu-overlay.active .mobile-menu-section:nth-child(2) {
    animation: slideInUp 0.3s ease 0.2s both;
}

.mobile-menu-overlay.active .mobile-menu-section:nth-child(3) {
    animation: slideInUp 0.3s ease 0.3s both;
}

/* =================================
   FERMETURE AU SCROLL
   ================================= */
body.menu-open {
    overflow: hidden;
}

/* Le verrouillage du scroll fait perdre son ancrage au header sticky sur iOS
   lorsque le menu est ouvert depuis le bas de la page. On le fixe uniquement
   pendant cet état afin que la barre du haut couvre toujours l'overlay. */
@media (max-width: 1200px) {
    body.menu-open #mobile-header-main {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
    }
}

/* =================================
   RESPONSIVE
   ================================= */
@media (min-width: 1201px) {
    .mobile-header-container,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* Optimisation pour très petits écrans */
@media (max-width: 320px) {
    .mobile-header-content {
        padding: 0.45rem 1rem;
    }
    
    .mobile-user-actions {
        gap: 0.25rem;
        margin-right: 0.5rem;
    }
    
    .mobile-action-btn {
        width: 36px;
        height: 36px;
    }
}

/* =================================
   SECTIONS MENU ACCORDÉON
   ================================= */
.mobile-menu-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

[data-theme="dark"] .mobile-menu-section {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.mobile-menu-section:last-child {
    border-bottom: none;
}

.mobile-menu-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0.75rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: color 0.2s ease;
}

[data-theme="dark"] .mobile-menu-section-toggle {
    color: #fff;
}

.mobile-menu-section-toggle:hover {
    color: #666;
}

[data-theme="dark"] .mobile-menu-section-toggle:hover {
    color: #ccc;
}

.mobile-menu-arrow {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-section.active .mobile-menu-arrow {
    transform: rotate(180deg);
}

.mobile-menu-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.mobile-menu-section.active .mobile-menu-section-content {
    max-height: 800px;
    padding-bottom: 1rem;
}

/* =================================
   ITEMS MENU MODERNE
   ================================= */
.mobile-menu-item {
    display: block;
    padding: 1rem 0.75rem;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

[data-theme="dark"] .mobile-menu-item {
    color: #e0e0e0;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-menu-item:hover {
    background: rgba(0, 0, 0, 0.02);
    padding-left: 0.5rem;
}

[data-theme="dark"] .mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.mobile-menu-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-menu-item-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
}

.mobile-menu-item-description {
    font-size: 0.85rem;
    opacity: 0.7;
    line-height: 1.3;
}

/* =================================
   BADGES MODERNES
   ================================= */
.mobile-menu-item-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    align-self: flex-start;
}

.badge-nouveau {
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
    color: white;
}

.badge-nouveautes {
    background: linear-gradient(45deg, #2196F3, #42A5F5);
    color: white;
}

.badge-top {
    background: linear-gradient(45deg, #FF9800, #FFB74D);
    color: white;
}

/* =================================
   ANIMATIONS ENTRANCE
   ================================= */
.mobile-menu-section {
    opacity: 0;
    transform: translateY(10px);
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mobile-menu-section:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-section:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu-section:nth-child(3) { animation-delay: 0.2s; }

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================
   SCROLLBAR PERSONNALISÉE
   ================================= */
.mobile-menu-overlay::-webkit-scrollbar {
    width: 4px;
}

.mobile-menu-overlay::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-menu-overlay::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

[data-theme="dark"] .mobile-menu-overlay::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mobile-menu-overlay::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* =================================
   OPTIMISATIONS PERFORMANCE
   ================================= */
.mobile-menu-overlay {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.mobile-burger-btn {
    will-change: transform;
}

.burger-line {
    will-change: transform, opacity;
}

/* =================================
   ÉTATS FOCUS POUR ACCESSIBILITÉ
   ================================= */
.mobile-burger-btn:focus,
.mobile-menu-section-toggle:focus,
.mobile-menu-item:focus,
.mobile-action-btn:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

[data-theme="dark"] .mobile-burger-btn:focus,
[data-theme="dark"] .mobile-menu-section-toggle:focus,
[data-theme="dark"] .mobile-menu-item:focus,
[data-theme="dark"] .mobile-action-btn:focus {
    outline-color: #64B5F6;
}
/* =================================
   MASQUAGE DESKTOP/MOBILE
   ================================= */

/* MASQUER LE DESKTOP SUR MOBILE */
@media (max-width: 1200px) {
    /* Cible tes classes/IDs ORIGINAUX */
    header:not(#mobile-header-main),
    .logo-main-container,
    #top-right-logos,
    #textes-links,
    #arrowExpand {
        display: none !important;
    }
}

/* MASQUER LE MOBILE SUR DESKTOP */
@media (min-width: 1201px) {
    #mobile-header-main,
    .mobile-header-container,
    .mobile-header-content,
    .mobile-logo-container,
    .mobile-user-actions,
    .mobile-burger-btn,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* =================================
   STYLES MOBILE UNIQUEMENT
   ================================= */
@media (max-width: 1200px) {
    #mobile-header-main {
        height: fit-content;
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 2000;
        background: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        /* Reset des styles desktop qui héritent de header {} */
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        max-width: none;
        left: auto;
        transform: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body, html {
        padding-top: 0;
    }

    .mobile-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.35rem 0.85rem;
        height: 52px;
        min-height: 52px;
    }

    /* Logo mobile */
    .mobile-logo-container {
        flex-shrink: 0;
    }

    #main-logo-mobile {
        height: 28px;
        width: auto;
    }
    /* Actions centrées */
    .mobile-user-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex: 1;
        margin: 0 1rem;
    }

    .mobile-action-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-action-btn img {
        width: 30px;
        height: 30px;
        background-color: #fff3;
        border-radius: 50%;
    }

    /* Bouton burger */
    .mobile-burger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 8px;
    }
    .burger-line {
        width: 23px;
        height: 3px;
        background: #333;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    .burger-line:not(:last-child) {
        margin-bottom: 5px;
    }

    .mobile-menu-overlay.active {
        transform: translateY(0);
    }

    /* Styles des sections et items */
    .mobile-menu-section {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mobile-menu-section-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1rem;
        background: none;
        border: none;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-menu-section-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-menu-section.active .mobile-menu-section-content {
        max-height: 800px;
        padding-bottom: 1rem;
    }

    .mobile-menu-item {
        display: block;
        padding: 1rem;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .mobile-menu-item-title {
        font-weight: 500;
        font-size: 1rem;
    }

    /* Badges */
    .mobile-menu-item-badge {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 20px;
        margin-top: 0.25rem;
    }

    .badge-nouveau { background: #4CAF50; color: white; }
    .badge-top { background: #FF9800; color: white; }
    .badge-nouveautes { background: #2196F3; color: white; }

    /* Dark mode */
    [data-theme="dark"] #mobile-header-main {
        background: transparent;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .mobile-menu-overlay {
        background: rgba(16, 0, 63, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    [data-theme="dark"] .burger-line {
        background: #fff;
    }

    [data-theme="dark"] .mobile-menu-item {
        color: #e0e0e0;
    }
}
@media (max-width: 540px) {
    #main-logo-mobile {
        height: 22px;
        width: auto;
    }
}
@media (max-width: 440px) {
    #main-logo-mobile {
        height: 22px;
        width: auto;
    }
}
/*FRAMEWORK.JS pour afficher les particules, ici sont proposées deux style, deux sortes. Idée : prévori theme neige noel*/
#three-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0 !important;
    pointer-events: none; /* pour ne pas gêner les clics */
}
#particles-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Correctif final du header vitrine mobile : aucune superposition logo / CTA. */
@media (max-width: 1200px) {
    body.vitrine-mode .mobile-header-content {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 8px;
    }

    body.vitrine-mode .mobile-burger-btn {
        grid-column: 1;
    }

    body.vitrine-mode .mobile-logo-container {
        position: static !important;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        max-width: 104px;
        transform: none !important;
    }

    body.vitrine-mode #main-logo-mobile {
        height: 18px;
        max-width: 100%;
    }

    body.vitrine-mode .vitrine-cta--mobile {
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
        /* Le bouton s'élargit vers la gauche dans sa colonne : libellé entier, bord droit stable. */
        padding: 6px 10px;
    }

    body.vitrine-mode .vitrine-cta--mobile .vitrine-cta__title {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        font-size: 10.5px;
    }
}

@media (max-width: 374px) {
    body.vitrine-mode .mobile-header-content {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: 4px;
    }

    body.vitrine-mode .mobile-burger-btn {
        width: 40px;
    }

    body.vitrine-mode .mobile-logo-container {
        max-width: 80px;
    }

    body.vitrine-mode #main-logo-mobile {
        height: 16px;
    }

    body.vitrine-mode .vitrine-cta--mobile {
        padding: 5px 8px;
    }

    body.vitrine-mode .vitrine-cta--mobile .vitrine-cta__title {
        max-width: none;
        font-size: 9.5px;
    }
}
/* Carrousel infini */
.carousel {
    overflow: hidden;
    --carousel-edge-color: #000;
    background-color: var(--carousel-edge-color);
    padding: 10px;
}

[data-theme="dark"] .carousel {
    --carousel-edge-color: #10003f;
}

#boxedefilement {
    position: relative;
    margin-top: 0px;
}

#boxedefilement::before,
#boxedefilement::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: clamp(56px, 9vw, 150px);
    pointer-events: none;
}

#boxedefilement::before {
    left: 0;
    background: linear-gradient(90deg, var(--carousel-edge-color) 0%, color-mix(in srgb, var(--carousel-edge-color) 78%, transparent) 28%, transparent 100%);
}

#boxedefilement::after {
    right: 0;
    background: linear-gradient(270deg, var(--carousel-edge-color) 0%, color-mix(in srgb, var(--carousel-edge-color) 78%, transparent) 28%, transparent 100%);
}

.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)));
}
}


/* ===== Présence locale (Clermont-Ferrand) ===== */
.local-presence {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin: 4rem auto;
    padding: 3rem;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(11, 0, 63, 0.15);
    position: relative;
    isolation: isolate;
}

.local-presence__content,
.local-presence__map-card {
    flex: 1 1 360px;
    min-width: 290px;
}

.local-presence__content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.local-presence__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: #7461ff;
    margin: 0;
}

.local-presence__content h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    margin: 0;
    color: #1d1740;
}

.local-presence__headline {
    display: block;
    line-height: 1.15;
    font-weight: 700;
    color: #0b0a14;
}

.local-presence__accent {
    display: inline-block;
    margin-top: 0.2rem;
    font-weight: 900;
    font-size: 1em;
    letter-spacing: 0.015em;
    text-transform: none;
    color: transparent;
    background: linear-gradient(120deg, #ff8edc, #9065ff, #51c3ff);
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
}

.local-presence__accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.25rem;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(255, 142, 220, 0.25), rgba(144, 101, 255, 0.15));
}

.local-presence__content p {
    line-height: 1.7;
    margin: 0;
    color: #2b254f;
}

.local-presence__services {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.local-presence__services li {
    padding-left: 1.4rem;
    position: relative;
    font-weight: 600;
    color: #1e1748;
}

.local-presence__services li::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #7461ff;
    position: absolute;
    left: 0;
    top: 0.6rem;
}

.local-presence__note {
    font-style: italic;
    color: #4d3f91;
}

.local-presence__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(120deg, #5f4bff, #c44fff);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(95, 75, 255, 0.35);
    width: fit-content;
}

.local-presence__cta-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.45rem;
}

.local-presence__map-card {
    background: linear-gradient(145deg, rgba(116, 97, 255, 0.12), rgba(255, 255, 255, 0.95));
    border-radius: 28px;
    padding: 2rem;
    box-shadow: inset 0 0 0 1px rgba(69, 52, 122, 0.08);
}

.map-card__title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5c4bff;
}

.map-card__subtitle {
    margin: 0.2rem 0 0;
    color: #2c255a;
    font-size: 0.95rem;
}

.auvergne-map-container {
    margin-top: 1.5rem;
    padding: 1.2rem;
    border-radius: 24px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), rgba(94, 68, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(92, 75, 255, 0.08);
}

#local-presence-map {
    width: 100%;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0.4rem 0.4rem 1.2rem;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}

#local-presence-map .leaflet-control-attribution {
    bottom: -1.6rem;
}

.map-legend {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #2b255a;
}

.map-legend strong {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5c4bff;
}

.map-legend-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.map-legend-pill {
    border-radius: 999px;
    background: rgba(92, 75, 255, 0.14);
    color: #1e1748;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(92, 75, 255, 0.2);
}

.map-legend-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #5c4bff;
    border-radius: 6px;
    padding: 0.05rem 0.3rem;
    font-weight: 700;
    margin-right: 0.35rem;
    font-size: 0.7rem;
    border: 1px solid rgba(92, 75, 255, 0.2);
}

.map-legend-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #5c4bff;
    border-radius: 6px;
    padding: 0.05rem 0.3rem;
    font-weight: 700;
    margin-right: 0.35rem;
    font-size: 0.7rem;
    border: 1px solid rgba(92, 75, 255, 0.2);
}

#local-presence-map[data-map-error="true"]::after {
    content: "Carte temporairement indisponible";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #2b255a;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    z-index: 5;
}

.local-presence__map-card .leaflet-container {
    font-size: 12px;
}

.local-presence__map-card .leaflet-control-attribution {
    font-size: 0.6rem;
}

.local-presence__map-card .leaflet-tile-pane {
    filter: saturate(1.1);
}

.local-presence__map-card .leaflet-interactive {
    transition: opacity 0.3s ease;
}

@media (max-width: 600px) {
    #local-presence-map {
        height: 280px;
    }
}

.local-map-hq-icon {
    background: transparent;
    border: none;
}

.local-map-hq {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(31, 21, 74, 0.22);
    color: #1f154a;
    font-weight: 700;
    border: 1px solid rgba(31, 21, 74, 0.08);
    font-size: 0.92rem;
}

.local-map-hq__logo {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.local-map-hq__logo img {
    width: 22px;
    height: 22px;
    display: block;
}

.local-map-hq__text {
    line-height: 1.1;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .local-presence {
        padding: 2.2rem;
    }
}

@media (max-width: 768px) {
    .local-presence {
        flex-direction: column;
    }

    .local-presence__map-card {
        padding: 1.5rem;
    }
}

[data-theme="dark"] .local-presence {
    background: rgba(14, 1, 45, 0.85);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .local-presence__content h2,
[data-theme="dark"] .local-presence__content p,
[data-theme="dark"] .local-presence__services li,
[data-theme="dark"] .local-presence__note {
    color: #f4f1ff;
}

[data-theme="dark"] .local-presence__headline {
    color: #f5f2ff;
}

[data-theme="dark"] .local-presence__accent {
    background: linear-gradient(120deg, #ffd3f6, #d8c5ff, #7fe3ff);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="dark"] .local-presence__map-card {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .map-card__subtitle,
[data-theme="dark"] .map-legend,
[data-theme="dark"] .map-legend-pill {
    color: #dcd6fe;
}

[data-theme="dark"] .map-legend-pill {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #local-presence-map[data-map-error="true"]::after {
    background: rgba(16, 1, 45, 0.9);
    color: #f4f1ff;
}

[data-theme="dark"] .local-map-tooltip {
    background: #f4f1ff;
    color: #1f154a;
}

[data-theme="dark"] .local-map-tooltip::before {
    border-top-color: #f4f1ff;
}

/* Scroll-driven video → voir /1assets/effectvideoscroll.css */

.hp-field-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.u-border-reset {
    border: 0 !important;
}

.quiz-progress-init-20 {
    width: 20%;
}

.quiz-progress-init-25 {
    width: 25%;
}

.quiz-progress-init-33 {
    width: 33%;
}

body.accompagnement-creatif-page {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 24%),
        radial-gradient(circle at 80% 10%, rgba(167, 139, 250, 0.24), transparent 24%),
        radial-gradient(circle at 50% 55%, rgba(99, 102, 241, 0.12), transparent 38%),
        linear-gradient(180deg, #eef2ff 0%, #dfe5ff 48%, #d4dbff 100%);
    overflow-x: hidden;
    transition: background 320ms ease, color 220ms ease;
}

body.accompagnement-creatif-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.14) 0%, transparent 58%);
    pointer-events: none;
    z-index: -2;
}

.accompagnement-creatif-page .hero-pattern {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.accompagnement-creatif-page .card-hover {
    transition: all 0.3s ease;
}

.accompagnement-creatif-page .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.accompagnement-creatif-page .floating {
    animation: accompagnement-floating 6s ease-in-out infinite;
}

@keyframes accompagnement-floating {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 15px); }
    100% { transform: translate(0, 0px); }
}

.accompagnement-creatif-page .input-focus:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.accompagnement-creatif-page .blink {
    animation: accompagnement-blink 1.4s ease-in-out infinite;
}

@keyframes accompagnement-blink {
    0%, 45% { opacity: 1; transform: scale(1); }
    50%, 60% { opacity: 0.35; transform: scale(0.98); }
    65%, 100% { opacity: 1; transform: scale(1); }
}

.accompagnement-creatif-page #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.accompagnement-creatif-page .reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.985);
    filter: blur(18px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.accompagnement-creatif-page .reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.accompagnement-creatif-page .nav-link,
.accompagnement-creatif-page .pressable {
    position: relative;
    transform: translateZ(0);
    transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease, background-color 220ms ease;
}

.accompagnement-creatif-page .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transform: translateX(-50%);
    transition: width 240ms ease;
}

.accompagnement-creatif-page .nav-link.tab-active::after {
    width: 100%;
}

.accompagnement-creatif-page .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #4338ca;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12);
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.accompagnement-creatif-page .theme-toggle:hover {
    transform: translateY(-1px);
}

body.lp-test-page {
    padding-top: 0 !important;
}

.lp-test-page,
.lp-test-page *,
.lp-test-page *::before,
.lp-test-page *::after {
    box-sizing: border-box;
}

.lp-test-page .text-gradient-brand {
    background: linear-gradient(135deg, #7158e2 0%, #cf3f83 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-test-page .text-gradient-dark {
    background: linear-gradient(140deg, #1a0f36 10%, #7158e2 60%, #cf3f83 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-test-page .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lp-test-page .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.lp-test-page .hero-bg {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(160deg, #ffaad9 0%, #f0ccff 48%, #9a98ff 100%);
    padding-top: clamp(4.5rem, 9vh, 7rem);
}

.lp-test-page .hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 22%, rgba(255, 180, 220, 0.45), transparent 42%),
        radial-gradient(circle at 82% 14%, rgba(180, 160, 255, 0.38), transparent 38%),
        radial-gradient(circle at 52% 86%, rgba(255, 255, 255, 0.5), transparent 46%);
    pointer-events: none;
    z-index: 0;
}

.lp-test-page .hero-bg > * {
    position: relative;
    z-index: 1;
}

.lp-test-page .pill-glow {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(207, 63, 131, 0.25);
    backdrop-filter: blur(8px);
}

@keyframes lp-test-scanline {
    0% { top: 8%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 88%; opacity: 0; }
}

.lp-test-page .scan-beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #7158e2 30%, #cf3f83 70%, transparent 100%);
    box-shadow: 0 0 12px 3px rgba(207, 63, 131, 0.5);
    animation: lp-test-scanline 2.8s ease-in-out infinite;
    pointer-events: none;
}

.lp-test-page .btn-primary {
    background: linear-gradient(106deg, #865eff 0%, #e070c7 100%);
    box-shadow: 0 12px 32px rgba(113, 88, 226, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.lp-test-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(113, 88, 226, 0.45);
}

.lp-test-page .btn-primary:active {
    transform: translateY(0);
}

.lp-test-page .pricing-popular {
    background: linear-gradient(145deg, #2d1458 0%, #4a1f7a 100%);
    border: 1.5px solid rgba(207, 63, 131, 0.4);
    box-shadow: 0 0 0 4px rgba(207, 63, 131, 0.08), 0 24px 60px rgba(113, 88, 226, 0.2);
}

.lp-test-page .mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.lp-test-page .mosaic .tall {
    grid-row: span 2;
}

.lp-test-page .lp-eyebrow {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: rgba(207, 63, 131, 0.85);
    margin-bottom: 0.5rem;
}

@keyframes lp-test-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.lp-test-page .marquee-track {
    animation: lp-test-marquee 24s linear infinite;
}

.lp-test-page .marquee-wrap:hover .marquee-track {
    animation-play-state: paused;
}

.lp-test-page .stat-card {
    background: white;
    padding: 2rem;
}

.lp-test-page .testi-card {
    background: white;
    border: 1px solid rgba(207, 63, 131, 0.15);
    border-radius: 1.5rem;
    padding: 1.75rem;
}

.lp-test-page .testi-card--highlight {
    border-color: rgba(113, 88, 226, 0.3);
    box-shadow: 0 0 0 3px rgba(113, 88, 226, 0.08);
}

.lp-test-page .lp-faq details > summary {
    cursor: pointer;
    list-style: none;
}

.lp-test-page .lp-faq details > summary::-webkit-details-marker {
    display: none;
}

.lp-test-page .lp-faq details[open] .faq-icon {
    transform: rotate(45deg);
}

.lp-test-page .faq-icon {
    transition: transform 0.22s ease;
    display: inline-block;
}

.lp-test-page .reveal-delay-100 {
    transition-delay: 0.1s;
}

.lp-test-page .reveal-delay-200 {
    transition-delay: 0.2s;
}

.lp-test-page .lp-eyebrow--flush {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .lp-test-page .mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-test-page .mosaic .tall {
        grid-row: span 1;
    }
}

/* ============================================
   HOME TRUST STRIPS — Services + Produit
   ============================================ */

.home-service-strip,
.home-product-strip {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  z-index: 4;
  padding: 13px 0;
  overflow: hidden;
}

.home-service-strip {
  background: linear-gradient(90deg, #7468f5 0%, #8a77ff 48%, #7468f5 100%);
  box-shadow: 0 12px 32px rgba(50, 33, 129, 0.18);
}

.home-service-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7468f5 0%, transparent 10%, transparent 90%, #7468f5 100%);
  pointer-events: none;
  z-index: 2;
}

.home-product-strip {
  background: linear-gradient(90deg, #1a1050 0%, #2e1d7a 50%, #1a1050 100%);
  box-shadow: 0 12px 32px rgba(20, 10, 60, 0.35);
}

.home-product-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0c0820 0%, transparent 10%, transparent 90%, #0c0820 100%);
  pointer-events: none;
  z-index: 2;
}

.home-service-strip__inner,
.home-product-strip__inner {
  display: flex;
  width: 100%;
  overflow: hidden;
  justify-content: center;
}

.home-service-strip__track,
.home-product-strip__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(24px, 3.5vw, 48px);
  padding: 0 clamp(16px, 2.5vw, 32px);
}

.home-service-strip__track[aria-hidden="true"],
.home-product-strip__track[aria-hidden="true"] {
  display: none;
}

@keyframes home-service-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes home-product-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (max-width: 768px) {
  .home-service-strip__inner,
  .home-product-strip__inner {
    justify-content: flex-start;
  }
  .home-service-strip__track {
    animation: home-service-scroll 22s linear infinite;
  }
  .home-product-strip__track {
    animation: home-product-scroll 22s linear infinite;
  }
  .home-service-strip__track[aria-hidden="true"],
  .home-product-strip__track[aria-hidden="true"] {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-service-strip__track,
  .home-product-strip__track {
    animation: none !important;
  }
}

.home-service-strip__item,
.home-product-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.78rem, 1.15vw, 0.9rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(35, 22, 91, 0.16);
}

.home-product-strip__item {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 18px rgba(140, 100, 255, 0.45);
}

.home-service-strip__item svg,
.home-product-strip__item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
  opacity: 0.88;
}

/* ============================================
   HOME BRAND VALUES — Humain + savoir-faire
   ============================================ */

.home-brand-values {
  width: min(1180px, calc(100% - 32px));
  box-sizing: border-box;
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(1.7rem, 3.5vw, 3rem);
  padding: clamp(1.3rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid rgba(105, 82, 227, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(128, 101, 255, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(250, 248, 255, 0.98), rgba(240, 236, 255, 0.9));
  box-shadow: 0 22px 58px rgba(48, 32, 112, 0.12);
}

.home-brand-values__header {
  display: grid;
  justify-items: center;
  max-width: 760px;
  margin: 0 auto clamp(1.2rem, 2.6vw, 1.8rem);
  text-align: center;
}

.home-brand-values__eyebrow {
  width: fit-content;
  margin-bottom: 0.55rem;
  padding: 0.28rem 0.78rem;
  border: 1px solid rgba(105, 82, 227, 0.18);
  border-radius: 999px;
  color: #6952df;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-brand-values h2 {
  margin: 0;
  color: #171326;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.home-brand-values h2 span {
  color: #7057e6;
}

.home-brand-values__proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.7vw, 1.15rem);
}

.home-brand-value {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 126, 255, 0.22);
  border-radius: 20px;
  background: #171321;
  box-shadow: 0 14px 34px rgba(30, 20, 77, 0.2);
  isolation: isolate;
}

.home-brand-value::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 8, 24, 0.03) 24%, rgba(18, 12, 37, 0.24) 48%, rgba(21, 13, 46, 0.94) 100%);
  pointer-events: none;
}

.home-brand-value video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-brand-value--human video {
  object-position: center 55%;
}

.home-brand-value figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: grid;
  gap: 0.28rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  color: #fff;
  text-align: left;
}

.home-brand-value__number {
  color: #d8ceff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-brand-value figcaption strong {
  max-width: 28ch;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  line-height: 1.16;
  text-wrap: balance;
}

.home-brand-value figcaption > span:last-child {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.76rem, 1.2vw, 0.88rem);
  font-weight: 600;
  line-height: 1.38;
}

.home-brand-values__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: clamp(1.15rem, 2.4vw, 1.6rem) 0 0;
  padding: 0;
  color: #4d3d98;
  list-style: none;
}

.home-brand-values__signature li {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.72rem, 1.25vw, 0.84rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-brand-values__signature li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 clamp(0.55rem, 1.4vw, 1rem);
  border-radius: 50%;
  background: #9b82f3;
  box-shadow: 0 0 8px rgba(111, 83, 230, 0.55);
}

[data-theme="dark"] .home-brand-values {
  border-color: rgba(179, 150, 255, 0.2);
  background:
    radial-gradient(circle at 8% 0%, rgba(118, 81, 229, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(24, 20, 36, 0.98), rgba(30, 24, 50, 0.96));
  box-shadow: 0 22px 58px rgba(5, 2, 18, 0.42);
}

[data-theme="dark"] .home-brand-values h2 {
  color: #f5f1ff;
}

[data-theme="dark"] .home-brand-values__eyebrow {
  color: #c5b4ff;
  border-color: rgba(190, 165, 255, 0.2);
  background: rgba(255, 255, 255, 0.045);
}

[data-theme="dark"] .home-brand-values__signature {
  color: #c9bcff;
}

@media (max-width: 700px) {
  .home-brand-values {
    width: calc(100% - 20px);
    padding: 1.35rem 0 1.2rem;
    border-radius: 22px;
  }

  .home-brand-values__header {
    padding-inline: 1rem;
  }

  .home-brand-values h2 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
  }

  .home-brand-values__proofs {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 1rem 0.7rem;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-brand-values__proofs::-webkit-scrollbar {
    display: none;
  }

  .home-brand-value {
    flex: 0 0 min(72vw, 330px);
    aspect-ratio: 5 / 4;
    scroll-snap-align: start;
  }

  .home-brand-value figcaption {
    padding: 1rem;
  }

  .home-brand-value figcaption strong {
    font-size: 1.05rem;
  }

  .home-brand-value figcaption > span:last-child {
    font-size: 0.76rem;
  }

  .home-brand-values__signature {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand-values__proofs {
    scroll-behavior: auto;
  }
}

.home-video-references {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(2rem, 4vw, 3.4rem) auto 1.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.3fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  overflow: visible;
  box-sizing: border-box;
}

.home-video-references__copy {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.home-video-references__eyebrow {
  width: fit-content;
  padding: 0.22rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(111, 125, 255, 0.28);
  background: rgba(111, 125, 255, 0.1);
  color: #6757dc;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-video-references h2 {
  margin: 0;
  color: #11101b;
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
}

.home-video-references p {
  margin: 0;
  max-width: 48ch;
  color: rgba(18, 16, 32, 0.68);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.45;
  font-weight: 650;
}

.home-video-references__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.72rem;
  margin-top: 0.32rem;
}

.home-video-references__cta,
.home-video-references__link {
  box-sizing: border-box;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.08;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-video-references__cta {
  padding: 0.78rem 1.2rem;
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #635dff 0%, #9b6bff 45%, #ff64c7 100%);
  box-shadow:
    0 16px 34px rgba(111, 125, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 10px rgba(38, 20, 122, 0.42);
}

.home-video-references__cta::after {
  content: "↗";
  font-size: 0.82em;
  line-height: 1;
  transform: translateY(-1px);
}

.home-video-references__link {
  padding: 0.72rem 1.02rem;
  color: #5d52ff !important;
  border: 1px solid rgba(93, 82, 255, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 246, 255, 0.72));
  box-shadow:
    0 10px 24px rgba(70, 55, 160, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.home-video-references__link::after {
  content: "›";
  font-size: 1.12em;
  line-height: 0.8;
  transform: translateY(-1px);
}

.home-video-references__cta:hover,
.home-video-references__link:hover {
  transform: translateY(-2px);
}

.home-video-references__cta:hover {
  box-shadow:
    0 20px 42px rgba(111, 125, 255, 0.28),
    0 0 0 4px rgba(255, 118, 205, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.home-video-references__link:hover {
  border-color: rgba(93, 82, 255, 0.46) !important;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 16px 32px rgba(70, 55, 160, 0.12),
    0 0 0 4px rgba(93, 82, 255, 0.08);
}

.home-video-references__stage {
  position: relative;
  display: grid;
  gap: 0.66rem;
  min-width: 0;
  padding: 10px 10px 12px;
  background: #050505;
  box-shadow: 0 24px 62px rgba(16, 0, 63, 0.18);
}

.home-video-references__stage::before {
  content: "";
  position: absolute;
  inset: -26px -30px -24px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 118, 205, 0.18), transparent 30%),
    radial-gradient(circle at 90% 28%, rgba(111, 125, 255, 0.24), transparent 42%);
  filter: blur(20px);
  opacity: 0.75;
  pointer-events: none;
}

.home-video-references__screen {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 7px;
  border: 0;
  background: #090914;
  box-shadow: none;
}

.home-video-references__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 4, 22, 0) 34%, rgba(7, 4, 22, 0.75) 100%),
    linear-gradient(90deg, rgba(7, 4, 22, 0.4), rgba(7, 4, 22, 0) 58%);
  pointer-events: none;
}

.home-video-references__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-video-references__overlay {
  position: absolute;
  left: clamp(1rem, 3vw, 1.55rem);
  right: clamp(1rem, 3vw, 1.55rem);
  bottom: clamp(0.9rem, 2.5vw, 1.35rem);
  z-index: 2;
  display: grid;
  gap: 0.22rem;
  color: #fff;
}

.home-video-references__overlay span {
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
}

.home-video-references__overlay strong {
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  line-height: 1.05;
}

.home-video-references__nav {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
}

.home-video-references__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.44rem;
}

.home-video-references__arrow,
.home-video-references__dot {
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.home-video-references__arrow {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  position: relative;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.home-video-references__arrow::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  left: 53%;
  border-left: 3px solid #cabdff;
  border-bottom: 3px solid #cabdff;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.home-video-references__arrow--next::before {
  left: 47%;
  transform: translate(-50%, -50%) rotate(225deg);
}

.home-video-references__arrow:hover,
.home-video-references__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(202, 189, 255, 0.4);
  box-shadow: 0 12px 28px rgba(111, 125, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.home-video-references__dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.home-video-references__dot.is-active {
  width: 15px;
  height: 15px;
  background: linear-gradient(135deg, #6f7dff, #ff76cd);
  box-shadow: 0 8px 18px rgba(126, 89, 255, 0.25);
}

.home-video-references__dot:hover,
.home-video-references__dot:focus-visible {
  transform: scale(1.18);
  outline: none;
}

[data-theme="dark"] .home-video-references {
  background: transparent;
}

[data-theme="dark"] .home-video-references__eyebrow {
  color: #d8d2ff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .home-video-references h2,
[data-theme="dark"] .home-video-references p {
  color: rgba(248, 248, 255, 0.9);
}

[data-theme="dark"] .home-video-references__stage {
  background: #030309;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .home-video-references__link {
  color: #f0edff !important;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(205, 196, 255, 0.22) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .home-video-references__link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(205, 196, 255, 0.36) !important;
}

[data-theme="dark"] .home-video-references__cta {
  color: #fff !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(124, 104, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

[data-theme="dark"] .home-video-references__arrow {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 840px) {
  .home-video-references {
    grid-template-columns: 1fr;
    width: min(620px, calc(100% - 28px));
    padding: 0;
  }

  .home-video-references__copy {
    text-align: center;
    justify-items: center;
  }

  .home-video-references p {
    max-width: 42ch;
  }

  .home-video-references__actions {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .home-video-references {
    width: min(100% - 24px, 430px);
    margin-block: 2rem 0.85rem;
    gap: 0.95rem;
  }

  .home-video-references h2 {
    font-size: clamp(1.55rem, 9vw, 2.25rem);
  }

  .home-video-references p {
    font-size: 0.92rem;
  }

  .home-video-references__actions {
    gap: 0.5rem;
  }

  .home-video-references__cta,
  .home-video-references__link {
    min-height: 42px;
    padding-block: 0.6rem;
    font-size: 0.86rem;
  }

  .home-video-references__screen {
    border-radius: 6px;
  }

  .home-video-references__overlay {
    bottom: 0.85rem;
  }
}