/* Styles de la page */
body, html {
margin: 0;
padding: 0;
/*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;
}
.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;
top: 0;
bottom: 0;
width: 1%;
height: 100%;
opacity: 100%;
background: linear-gradient(to bottom, rgb(231, 11, 187), blue);
z-index: 3000;
}
@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: space-between;
padding: 8px 10px;
background-color: #ffffff;
display: flex;
text-align: left;
font-size: 14px;
margin-bottom: 0;
}
.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;
}
/* 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;
}
/* 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[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"] {
animation: colorTransition3 3s infinite, colorTransition1 3.7s infinite;
filter: drop-shadow(0 0 5px #4e3cff);
}
[data-theme="dark"] .dropdown-img[alt="Portfolio clients"],
[data-theme="dark"] .dropdown-img[alt="Client portfolio"] {
animation: colorTransition3 3s infinite, colorTransition1-dark 3s infinite;
filter: invert(1) drop-shadow(0 0 4px #ffffff);
}
.dropdown-img[alt="Mariage"] {
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;
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;
filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.8));
}
.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[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="Mariage"] {
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="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 {
position: absolute;
z-index: 10000000 !important;
vertical-align: middle;
width: auto; /* Suppression des dimensions fixes pour le texte */
height: auto;
font-size: 12px;
font-weight: 600;
color: #fff;
background-color: #ff00d0; /* Couleur de fond similaire à un badge */
border-radius: 12px;
padding: 2px 8px; /* Padding pour donner l'apparence d'un badge */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre légère */
}
/* gestion téléphone */
@media (max-width: 740px) {
.best-seller {
scale: 1.1;
right: 5px !important;
}
}
.dropdown a {
position: relative; /* Nécessaire pour positionner les badges */
}
@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); }
}
/*QR-cadre product*/
/* EN TRAVAUX (couleur grise) */
.reglage0 {
margin-left: 173px;
display: block;
}
.reglage1 {
margin-left: 175px;
display: block;
}
.reglage2 {
margin-left: 144px;
display: block;
}
.reglage3 {
margin-left: 120px;
display: block;
}
.reglage4 {
margin-left: 111px;
display: none;
}
.reglage19 {
margin-left: 174px;
display: block;
}
.reglage0, .reglage1, .reglage2, .reglage3, .reglage4, .reglage19 {
background-color: #90718a;
display: none;
}
/* EN PROD (couleur rose)
animation: badgePulse 1.7s infinite;
*/
.reglage00 {
margin-left: 167px;
display: none;
animation: badgePulse 1.7s infinite;
}
.reglage01 {
margin-left: 141px;
display: none;
}
.reglage02 {
margin-left: 144px;
display: none;
}
.reglage03 {
margin-left: 120px;
display: none;
}
.reglage04 {
margin-left: 111px;
display: none;
}
.reglage019 {
margin-left: 160px;
display: none;
}
/* Reglage de votre galerie en ligne premium */
.reglageA23 {
margin-left: 160px;
display: block;
animation: badgePulse 1.7s infinite;
}
.workinghard-A23 {
display: block;
}
@media (max-width: 750px) {
.reglageA23 {
margin-right: 3%;
display: block;
}
}
/* Cacher les liens spécifiques */
a:has(img[alt="Animal compagnie"]),
a:has(img[alt="libre cadre"]),
a:has(img[alt="Sportif cadre"]) {
display: none;
}
/* Prestation vidéaste/photographe
animation: badgePulse 1.7s infinite;
*/
.reglage5 {
margin-left: 157px;
display: none;
}
.reglage20 {
margin-left: 164px;
display: none;
}
.reglage20B {
margin-left: 173px;
display: block;
animation: badgePulse 1.7s infinite;
}
.reglage21 {
margin-left: 156px;
display: none;
}
.reglage22 {
margin-left: 169px;
display: none;
}
.reglage23 {
margin-left: 123px;
display: none;
}
.reglage24 {
margin-left: 123px;
display: block;
}
/*Docu*/
.reglage25 {
margin-left: 174px;
display: none;
}
/*Art et portrait*/
.reglage26 {
margin-left: 176px;
display: block;
}
/* chantier */
.reglage27 {
margin-left: 134px;
display: block;
}
/* Village */
.reglage28 {
margin-left: 187px;
display: none;
}
/* Vin */
.reglage29 {
margin-left: 106px;
display: none;
}
/* Immobilier */
.reglage39 {
margin-left: 125px;
display: none;
}
/* GEstion des onglets en travaux coté prestation vidéo/photo*/
.workinghard-1 {
display: block;
}
.workinghard-2 {
display: none;
}
.workinghard-3 {
display: block;
}
.workinghard-4 {
display: none;
}
.workinghard-5 {
display: block;
}
.workinghard-2233 {/*ENTREPRISE*/
display: none;
}
.workinghard-39303 {/*Onglet univers des prestations*/
display: none;
}
.workinghard-22334 {/*IMMO*/
display: none;
}
/*REFERENCE*/
.reglage6 {
margin-left: 121px;
display: none;
}
.reglage9 {
margin-left: 120px;
display: none;
}
/*TARIFS*/
.reglage7 {
margin-left: 158px;
display: none;
animation: badgePulse 1.7s infinite;
}
.reglage7B {
margin-left: 113px;
display: block;
animation: badgePulse 1.7s infinite;
}
.reglage10 {
margin-left: 162px;
display: none;
}
/*Blog*/
.reglage11 {
margin-left: 163px;
display: none;
}
/*Mathieu*/
.workinghard-10 {
display: none;
}
/*Redaction*/
.workinghard-7 {
display: none;
}
.reglage12 {
margin-left: 83px;
display: none;
}
/*Newsletter*/
.reglage13 {
margin-left: 95px;
display: none;
}
.workinghard-6 {
display: 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 {
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));
}
}
@media (max-width: 1300px) {
#mobile-header-main .vitrine-cta {
padding: 9px 9px;
font-size: 12px;
margin-right: 13%;
box-shadow: 0 0px 10px rgb(168, 127, 250);
align-self: center;
}
#mobile-header-main .vitrine-cta::before {
background-size: 19px;
}
#mobile-header-main .vitrine-cta__text {
align-items: center;
text-align: center;
}
#mobile-header-main .vitrine-cta__sub {
display: none;
}
#mobile-header-main .vitrine-cta__title {
font-size: 14px;
margin-left: -3px;
white-space: normal;
text-overflow: unset;
}
}
.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(135deg, #1a0b4e 0%, #2d1b69 50%, #1a0b4e 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
position: relative;
width: 100%;
min-height: 18px;
padding: 8px 0px;
box-shadow: 0 4px 12px rgba(26, 11, 78, 0.3);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
user-select: none;
z-index: 10;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-strip--pending {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
.notification-strip::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}
@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;
}
.notification-message {
line-height: 1.4;
letter-spacing: 0.3px;
}
.social-link {
color: #c4b5fd;
text-decoration: none;
font-weight: 600;
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, #c4b5fd, #a78bfa);
transition: width 0.3s ease;
}
.social-link:hover {
color: #a78bfa;
background-color: rgba(196, 181, 253, 0.1);
transform: translateY(-1px);
}
.social-link:hover::before {
width: 100%;
}
.dismiss-button {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
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;
}
.dismiss-button:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ff6b9d;
transform: rotate(90deg) scale(1.1);
}
.dismiss-button:focus {
outline: 2px solid #a78bfa;
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(135deg, #0f0729 0%, #1a0f3a 50%, #0f0729 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .social-link {
color: #6366f1;
}
[data-theme="dark"] .social-link:hover {
color: #4f46e5;
background-color: rgba(99, 102, 241, 0.1);
}
/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
.notification-strip {
min-height: 64px;
font-size: 16px;
}
.dismiss-button {
margin-left: 12px;
}
}
@media (max-width: 768px) {
.notification-strip {
min-height: 56px;
font-size: 14px;
}
.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: 72px;
}
.notification-message {
font-size: 13px;
max-width: 70%;
}
.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 */
.container-lateralglow {
display: block;
position: relative;
z-index: 0;
}
.lateralglow {
position: absolute;
z-index: 1;
top: 290px;
filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
left: 0;
width: 100%;
height: 4300px;
opacity: 69%;
}
@media (max-width: 1200px) {
.lateralglow {
height: 720px;
}
}
@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 */
.container-cylindro {
display: block;
position: relative;
z-index: 0;
}
/* largeur 1640px-infini */
.cylindro {
position: absolute;
z-index: -20;
top: 100px;
filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.416));
left: 0;
width: 100%;
height: 1800px;
opacity: 70%;
}
[data-theme="dark"] {
.cylindro {
opacity: 20%;
}
}
@media (max-width: 1000px) {
.cylindro {
display: none;
}
}
/* 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;
}
}
/* 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: #e8e8e8;
border-color: #b3b3b3;
}
.additional-questions summary {
color: #333333;
}
.additional-questions details {
background-color: white;
}
/* Go en haut*/
/* Style de base pour le bouton de retour en haut */
#back-to-top {
display: none;
position: relative;
align-items: center;
bottom: 20px;
z-index: 10;
outline: none;
border: none;
margin: 2% auto;
background-color: #000000;
color: white;
cursor: pointer;
padding: 5px 13px;
border-radius: 50px; /* Bordures arrondies */
font-size: 15px; /* Taille du texte */
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 1px 5px rgba(255, 255, 255, 0.643)
}
#back-to-top:hover {
background-color: #3709428d;
transform: scale(1.1);
}
/* Style pour le focus, important pour l'accessibilité */
#back-to-top:focus {
box-shadow: 0 0 0 3px rgba(52,152,219,0.5); /* Lueur externe pour indiquer le focus */
}
#back-to-top2 {
display: none;
position: relative;
align-items: center;
bottom: -120px;
z-index: 10;
outline: none;
border: none;
margin: 2% auto;
background-color: #000000;
color: white;
cursor: pointer;
padding: 5px 13px;
border-radius: 50px; /* Bordures arrondies */
font-size: 15px; /* Taille du texte */
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 1px 5px rgba(255, 255, 255, 0.643)
}
#back-to-top2:hover {
background-color: #3709428d;
transform: scale(1.1);
}
/* Style pour le focus, important pour l'accessibilité */
#back-to-top2:focus {
box-shadow: 0 0 0 3px rgba(52,152,219,0.5); /* Lueur externe pour indiquer le focus */
}
[data-theme="dark"] {
#back-to-top {
background-color: #dbe8ff;
color: rgb(0, 3, 46);
}
#back-to-top2 {
background-color: #dbe8ff;
color: rgb(0, 3, 46);
}
#back-to-top:hover {
background-color: #ffffff;
transform: scale(1.1);
}
#back-to-top2:hover {
background-color: #ffffff;
transform: scale(1.1);
}
}
/* 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;
}
.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: -10px;
}
@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;*/
}
/* 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) {
#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-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;
}*/
/* Section Newsletter */
#newsletter {
position: relative;
z-index: 3;
width: min(100%, 630px);
background: linear-gradient(135deg, #f9f9ff 0%, #f1edff 55%, #fdf7ff 100%);
border: 1px solid rgba(102, 97, 252, 0.35);
box-shadow: 0 20px 60px rgba(92, 87, 247, 0.25);
padding: 32px;
border-radius: 32px;
margin: 120px auto;
}
[data-theme="dark"] {
#newsletter {
background: linear-gradient(145deg, rgba(16, 0, 63, 0.95), rgba(34, 15, 93, 0.9));
border: 1px solid rgba(158, 155, 252, 0.4);
box-shadow: 0 20px 60px rgba(5, 0, 30, 0.7);
}
}
@media (max-width: 900px) {
#newsletter {
padding: 24px;
max-width: 77%;
border-radius: 22px;
background-color: rgba(227, 221, 254, 0.43);
}
}
#newsletter h2 {
font-size: 1.5em;
position: relative;
z-index: 3;
color: #6661fc;
margin-bottom: 10px;
}
.newsletter-title {
font-size: clamp(1.9rem, 3vw, 2.6rem);
text-transform: uppercase;
letter-spacing: 0.12em;
font-family: 'Bahnschrift', 'Montserrat', sans-serif;
background: linear-gradient(120deg, #ff69b4 0%, #ff9770 35%, #6661fc 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 8px 20px rgba(102, 97, 252, 0.35);
}
[data-theme="dark"] .newsletter-title {
text-shadow: 0 6px 16px rgba(255, 255, 255, 0.65), 0 0 14px rgba(167, 139, 250, 0.42);
filter: drop-shadow(0 0 10px rgba(191, 0, 255, 0.25));
}
[data-theme="dark"] {
#newsletter h2 {
color: hsl(0, 0%, 100%);
}
}
#newsletter p {
font-size: 1em;
line-height: 1.5;
text-align: left;
}
#newsletter b {
font-size: 1em;
line-height: 1.5;
text-align: center;
}
#newsletter a {
color: #6661fc;
text-decoration: none;
}
#newsletter a:hover {
color: #3833be;
text-decoration: none;
}
.newsletter-signup {
position: relative;
z-index: 4;
}
.newsletter-card {
display: flex;
flex-direction: column;
gap: 32px;
}
.newsletter-card__content,
.newsletter-card__form {
flex: 1 1 auto;
}
.newsletter-card__form {
display: flex;
flex-direction: column;
max-width: 420px;
width: 100%;
align-self: center;
}
.newsletter-card__content {
display: flex;
flex-direction: column;
gap: 16px;
}
.badge-news {
display: inline-flex;
align-self: flex-start;
padding: 4px 12px;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(255, 105, 180, 0.15);
color: #ff3e9e;
}
.lead {
font-size: 1.1rem;
line-height: 1.6;
}
.newsletter-benefits {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.newsletter-benefits li {
position: relative;
padding-left: 26px;
}
.newsletter-benefits li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, #6661fc, #ff69b4);
box-shadow: 0 0 8px rgba(255, 105, 180, 0.4);
}
.newsletter-card__form form {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(102, 97, 252, 0.2);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .newsletter-card__form form {
background: rgba(8, 0, 40, 0.7);
border-color: rgba(158, 155, 252, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.newsletter-card__form input[type="email"] {
border: 1px solid rgba(102, 97, 252, 0.4);
border-radius: 14px;
padding: 12px 16px;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.9);
}
.newsletter-card__form input[type="email"]:focus {
outline: 2px solid rgba(255, 105, 180, 0.6);
box-shadow: 0 0 0 3px rgba(102, 97, 252, 0.2);
}
.newsletter-card__form button {
border: none;
border-radius: 14px;
padding: 14px 18px;
font-size: 1rem;
font-weight: 600;
background: linear-gradient(135deg, #ff69b4, #6661fc);
color: #fff;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-card__form button:hover,
.newsletter-card__form button:focus {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(102, 97, 252, 0.35);
}
.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);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
#newsletter a {
color: #6661fc;
text-decoration: none; /* Supprime le soulignement par défaut des liens */
}
#newsletter a:hover, #texte-content a:focus {
color: #3833be;
text-decoration: none;
}
[data-theme="dark"] {
#newsletter a:hover, #texte-content a:focus {
color: #bebcff;
}
}
@media (max-width: 900px) {
.newsletter-card {
gap: 24px;
}
.newsletter-card__form {
max-width: none;
align-self: stretch;
}
.newsletter-card__form form {
padding: 20px;
}
}
/* 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;
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;
pointer-events: none;
}
.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: 40px;
height: 40px;
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;
}
.linkedinme {
scale: 0.8;
}
/* TRUST CLIENT PRO VER*/
.trust-section {
position: relative;
z-index: 3;
max-width: 850px;
margin: 0 auto;
margin-top: 150px;
margin-bottom: -150px;
padding: 1.5rem;
border-radius: 10px;
}
.trust-section h2 {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-bottom: 0.5rem;
color: #333333;
}
.trust-section p {
font-size: 1rem;
text-align: center;
color: #555555;
margin-bottom: 2rem;
}
.trust-container {
display: flex;
gap: 2rem;
}
.trust-photos {
flex: 1;
text-align: right;
}
.main-photo {
width: auto;
max-height:200px;
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: 50px;
margin-bottom: -60px;
}
.main-photo {
max-height:150px;
}
.trust-container {
gap: 1rem;
}
.thumbnail-gallery img {
max-width: 100px;
max-height: 130px;
}
}
@media (max-width: 700px) {
.main-photo {
max-height:80px;
}
.thumbnail-gallery img {
max-width: 100px;
max-height: 40px;
}
}
/* Colonne de droite : Projets */
.trust-projects {
flex: 1;
}
.trust-projects ul {
list-style: none;
padding: 0;
margin: 0;
}
.trust-projects li {
padding: 1rem;
margin-bottom: 0.5rem;
border: 1px solid #e6e6e6;
border-radius: 8px;
background-color: #f8f8f8;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.trust-projects li:hover {
background-color: #e8f0fe;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.trust-projects strong {
font-size: 18px;
color: #333333;
}
.trust-projects span {
font-size: 14px;
color: #555555;
}
.trust-projects em {
font-size: 12px;
color: #888888;
}
[data-theme="dark"] {
.trust-section h2, .trust-section p {
color: #cbc9ff;
}
}
.trust-projects li.active {
background-color: #cbc9ff;
box-shadow: 0 0px 6px #cbc9ff;
border: 1px solid #6661fc1a;
font-weight: bold;
color: #333333;
}
.trust-projects li.active::before {
background-color: #cbc9ff;
box-shadow: 0 0px 6px #cbc9ff;
}
.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;
}*/
/* MEMOIRE QR CADRE NEWSLETTER*/
#newsletter {
display : block;
}
#faq {
margin-top: 260px;
}
/* XXX */
.categories {
position: relative;
display: block;
z-index: 3;
margin: 250px auto;
margin-bottom: -130px;
width: 400px;
background-color: #ffffff;
border-radius: 20px;
border: 1px solid #000000;
filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.275));
}
@media (max-width: 600px) {
.categories {
width: 300px;
top: -100px;
}
}
.categories a {
filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.285));
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
text-decoration: none;
padding: 0 20px;
color: #000;
box-sizing: border-box;
font-size: 16px;
font-weight: bold;
}
[data-theme="dark"] {
.categories {
border: 1px solid #ffffff;
background-color: #171358;
}
.categories a {
color: #ffffff;
}
}
.categories a:hover {
color: #6661fc;
transition: 0.16s;
}
.categories span.best-seller {
font-size: 12px;
color: #ff6347;
margin-left: auto;
margin-right: 10px;
}
.categories img.dropdown-img {
height: 30px;
width: auto;
}
.texteneutral {
background-color: #ffffff29;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.textemariage1 {
background-color: #ffcccb88;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.textemariage2 {
background-color: #ffcccb88;
}
.texteimmo {
background-color: #e6c8ad97;
}
.texteentreprise {
background-color: #add8e674;
}
.texteresto {
background-color: #ffcb2163;
}
.textesport {
background-color: rgba(0, 0, 255, 0.313);
}
.textevillage {
background-color: #9c315784;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.texteart {
background-color: #ee82ee88;
}
.textedocu {
background-color: #096f0956;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.textevin {
background-color: #a162ff7d;
}
.fonglet {
position: absolute;
z-index: -1!important;
height: 700px;
filter: drop-shadow(0 0 6px rgba(83, 15, 255, 0.54));
opacity: 0.1;
top: -480px;
width: 100%;
}
@media (max-width: 600px) {
.fonglet {
display: none;
}
}
/* Sva gogle */
.review-container {
position: relative;
z-index: 3;
width: 100%;
height: 400px;
margin: 0px auto;
margin-top: 270px;
margin-bottom: -100px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
@media (max-width: 1000px) {
.review-container {
margin-top: 70px;
margin-bottom: 0px; }
}
.review-container h2 {
position: absolute;
z-index: 3;
height: 400px;
margin: 0 auto;
margin-top: -370px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
border: none;
padding: 10px;
font-size: 44px;
cursor: pointer;
color: #6661fc;
border-radius: 50%;
background-color: #00000000;
}
.reviews {
display: flex;
overflow: hidden;
width: 800px;
margin-top: 70px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.review-card {
background-color: white;
border-radius: 10px;
width: 350px;
scale: 0.90;
box-shadow: 0 0px 12px #302e64b1;
padding: 20px;
margin: 0 -3px;
flex-shrink: 0;
}
[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 {
position: relative;
font-size: 25px;
color: #f4c150;
top: -8px;
}
.review-text {
font-size: 15px;
color: #000000;
}
.textegoogle{
position:absolute;
z-index: 200;
top:0;
left:0;
width:100%;
margin:40px auto;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
text-align:center;
}
.textegoogle p{
margin:0;
}
.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){
.textegoogle{margin:32px auto;}
.textegoogle .cta-google{font-size:12px;}
.textegoogle .cta-google img{width:16px;height:16px;}
}
.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: 100px;
}
.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;
top: 130px;
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;
}
.close-popup-rdv {
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
color: #6661fc;
}
/* 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;
}
/*
// 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 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: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Fond bleu nuit transparent + flou pour le menu mobile en dark mode */
[data-theme="dark"] .mobile-header-container {
background: rgba(16, 0, 63, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* 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.55rem 0.85rem;
height: fit-content;
}
/* =================================
LOGO MOBILE
================================= */
.mobile-logo-container {
flex-shrink: 0;
}
#main-logo-mobile {
height: 32px;
width: auto;
scale: 0.8;
margin-right:-20px;
margin-left:-20px;
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 */
left: 0;
width: 100%;
height: calc(100vh - 60px);
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;
}
/* 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);
}
/* =================================
NAVIGATION MOBILE
================================= */
.mobile-menu-nav {
padding: 1rem 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 1.5rem;
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.75rem 2rem;
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;
}
/* =================================
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;
}
/* =================================
RÉSEAUX SOCIAUX - FOOTER MOBILE
================================= */
.mobile-menu-social {
padding: 1.5rem 1.25rem 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: #74b9ff;
color: #fff;
display: none !important;
}
.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;
}
/* =================================
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.5rem 0.75rem;
}
.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;
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;
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 {
position: relative;
height: fit-content;
display: block !important;
position: fixed;
top: 0;
margin-top: 5px;
z-index: 2000;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mobile-header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 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: rgba(16, 0, 63, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
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;
}
/* Carrousel infini */
.carousel {
overflow: hidden;
background-color: #000;
padding: 10px;
}
#boxedefilement {
margin-top: 0px;
}
.carousel-inner {
position: relative;
z-index: 3;
display: flex;
/* L’animation est déclenchée en JS */
animation-timing-function: linear;
animation-fill-mode: forwards;
}
/* Style des images */
.carousel-inner img {
display: block;
max-height: 200px;
max-width: 350px;
border-radius: 3px;
height: auto;
width: auto;
margin-right: 10px;
}
/* Animation qui déplace le conteneur d'images */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-1 * var(--scroll-distance)));
}
}
/* ===== 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;
}