@charset "UTF-8";
@import url(main.css);
@media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1420px !important; } }

.lead, p { font-size: 1.25rem !important; font-weight: 300 !important; font-family: 'Google Sans'; }

div.col-lg-6.p-3.p-lg-4.pt-lg-2 { align-content: center; }

.spacer { display: none; }

/*------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/*----------------------------------------------Ajustements SEO---------------------------------------*/
#navbarSupportedContent > ul > li.dropdown.px-4 > div > a:nth-child(1) { font-size: 0.8em !important; }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > ul a { transition: all 0.5s ease; }

#logo-seo-page + .my-5 + #contact .col-md-10 { width: 100% !important; }

#logo-seo-page + .my-5.pb-4 + #contact .text-color-sixth { display: none; }

#custom-cards + .cta_banner { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fg5dCFDgZ8bhAkHXzzP19PaLud8J2%2Fimages%2FLOGO_2_d3j0.webp?alt=media&token=c7df7dd7-63eb-4386-9121-bfeaf4d35063") !important; background-size: cover; background-attachment: fixed; background-position: center; }

.first-banner-seo-page .background-image-div-opacity { opacity: 1 !important; }

.first-banner-seo-page h1 { font-weight: 700; width: 80%; margin: auto; }

.bandeau h1 { font-weight: 700; width: 80%; margin: auto; color: white !important; }

/*----------------------------------------------CONTACT------------------------------------------------*/
#contact { background: linear-gradient(135deg, #0d2233 0%, #0b1c26 50%, #325980 100%) !important; position: relative; border-radius: 16px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(253, 231, 130, 0.15); width: 90%; margin: 50px auto; }

#contact .background-image-div-opacity { background-size: 50%; opacity: 0.2; }

#contact .titles::before { content: ''; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fg5dCFDgZ8bhAkHXzzP19PaLud8J2%2Fimages%2FLogo_transparent_duax.webp?alt=media&token=50cfc62d-40d7-4866-9d43-2dd10a5e592e"); width: 200px; height: 200px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; filter: drop-shadow(0 0 24px rgba(253, 231, 130, 0.4)); }

/* Conteneur principal pour la section contact */
#contact .row { z-index: 1; }

/* Titre de la section Contact */
#contact .titles h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 24px rgba(253, 231, 130, 0.4)); }

#contact .titles p { color: #fff4e1; font-size: 1rem; line-height: 1.6; margin-top: 15px; }

/* Formulaire de contact */
#formContact { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(253, 231, 130, 0.15); padding: 30px; width: 100%; max-width: 600px; margin: auto; }

/* Champ du formulaire */
#formContact .form-floating { margin-bottom: 1.5rem; }

#formContact .form-control { border-radius: 8px; box-shadow: 0 0 5px rgba(253, 231, 130, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease-in-out; }

#formContact .form-control:focus { box-shadow: 0 0 10px rgba(253, 231, 130, 0.3); }

/* Zone de texte pour le message */
#formContact textarea { border-radius: 8px; box-shadow: 0 0 5px rgba(253, 231, 130, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1); }

/* Input de type file pour les pièces jointes */
#formContact .input-group { margin-bottom: 1.5rem; }

#formContact .input-group input { border-radius: 8px; box-shadow: 0 0 5px rgba(253, 231, 130, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1); }

#formContact .input-group button { background-color: #f5d063; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transition: background-color 0.3s ease; }

#formContact .input-group button:hover { background-color: #d9c37d; }

/* Bouton d'envoi */
#formContact button { background: linear-gradient(45deg, #f5d063, #d9c37d); color: white; padding: 12px 30px; border-radius: 50px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); width: 100%; transition: all 0.3s ease; }

#formContact button:hover { background: linear-gradient(45deg, #d9c37d, #f5d063); transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }

/* Modal success */
.modal .modal-content { border-radius: 16px; }

.modal .modal-header { background-color: #0d2233; color: white; border-top-left-radius: 16px; border-top-right-radius: 16px; }

.modal .modal-body { text-align: center; }

.modal .modal-footer .btn { border-radius: 50px; padding: 10px 20px; }

/* Modal error */
.modal .modal-header { background-color: #dc3545; }

.modal .modal-header .text-danger { color: white; }

/* Responsive */
@media (max-width: 768px) { #formContact { padding: 20px; } #contact .titles h2 { font-size: 2.5rem; } #contact .titles p { font-size: 0.9rem; } }

/*--------------------------------------------------- Activity Sections -------------------------------------------------*/
/* Styles communs pour les trois sections */
div.first-activity-div, div.second-activity-div, div.third-activity-div { background: linear-gradient(135deg, #0d2233 0%, #0b1c26 50%, #325980 100%) !important; border-radius: 16px !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(253, 231, 130, 0.15) !important; position: relative; }

.first-activity-div .card, .second-activity-div .card, .third-activity-div .card { background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(253, 231, 130, 0.15); position: relative; }

/* Golden text effect on titles */
.first-activity-div h2, .second-activity-div h2, .third-activity-div h2 { font-size: clamp(1.2rem, 2.7vw, 1.9rem); font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Applying the same styles to all activity images */
.first-activity-div .card img, .second-activity-div .card img, .third-activity-div .card img { border-radius: 16px; }

/* Padding adjustments for text */
.first-activity-div .lead, .second-activity-div .lead, .third-activity-div .lead { color: #fff4e1 !important; }

/*--------------------------------------------Barre de navigation-------------------------------------------*/
.navbar-brand { width: 4vw !important; height: 10vh !important; }

.logo_nav { height: 10vh !important; }

/* ----------------------------------------------Bloc Espacement----------------------------------------------*/
.b-bloc-divider { height: 150px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/*---------------------------------------------------Bloc Avis-------------------------------------------------*/
.googleReviews-div { position: relative; padding: 50px 0; background: linear-gradient(172deg, #0d2233 0%, #0e2533 50%, #325980 100%) !important; border-radius: 16px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(253, 231, 130, 0.15); z-index: 1; transition: box-shadow 0.3s ease, background 0.3s ease; width: 90%; margin: 100px auto; }

.googleReviews-div:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 6px 18px rgba(253, 231, 130, 0.25); }

.googleReviews-div .card { border-radius: 16px !important; background: linear-gradient(135deg, #0d2233 0%, #182e42 50%, #23435f 100%); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(253, 231, 130, 0.15) !important; color: white !important; }

/* Section contenant les informations de l'entreprise */
.card .d-lg-flex { display: flex; align-items: center; justify-content: space-between; }

.card .avatar-google-place { border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(253, 231, 130, 0.15); width: 70px; height: 70px; object-fit: contain; transition: transform 0.3s ease; }

.card .card-body { color: #fff4e1; }

.card .star { color: #fde782; }

#place-rating { font-size: 1rem; display: inline-block; margin-top: 10px; }

/* Bouton Voir la fiche Google */
#maps-url { background: linear-gradient(45deg, #f5d063, #d9c37d) !important; color: white !important; font-weight: 600; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 12px 30px !important; border-radius: 50px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s ease-out !important; z-index: 2; }

#maps-url i { margin-right: 8px; }

/* Effet au survol des avis */
.owl-carousel .owl-item { transition: transform 0.4s ease; }

.owl-carousel .card .card-img-top.avatar-google-reviews { border-radius: 50%; width: 40px; height: 40px; object-fit: contain; }

.owl-carousel .card .card-body .card-text { font-size: 1rem; line-height: 1.5; }

/* Animation des éléments au scroll */
.fade-block { opacity: 0; transform: translateY(40px); transition: all 0.9s cubic-bezier(0.2, 0.65, 0.2, 1); }

.fade-block.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 768px) { .googleReviews-div .card .d-lg-flex { flex-direction: column; align-items: center; text-align: center; } .googleReviews-div .card .avatar-google-place { width: 60px; height: 60px; } #maps-url { font-size: 0.9rem; padding: 10px 24px; } }

/*---------------------------------------------------Carrousel----------------------------------------------*/
/* === CARROUSEL D'IMAGES === */
.carousel-inner .carousel-item { transition: transform 0.6s ease; }

#carouselExampleAutoplaying { height: 100% !important; }

.carousel-inner { height: 100% !important; width: 60% !important; border-radius: 16px; margin: auto; transform: rotate(3.5deg); transition: transform .6s ease; transform: rotate(3deg) scale(1.25); }

.my-5.col-lg-11.position-relative:hover .carousel-inner { transform: rotate(3deg) scale(1.35); }

.carousel-item { height: 100%; }

.carousel-item img { border-radius: 16px; box-shadow: 0 0 0 1px rgba(253, 231, 130, 0.15), 0 20px 55px rgba(0, 0, 0, 0.65), 0 0 35px rgba(19, 90, 144, 0.25); object-fit: cover; /* Maintient la couverture de l'image */ display: block; height: 100% !important; width: 100% !important; margin: auto; }

/*--------------------------------------------------Bloc vidéo + TEXTE--------------------------------------*/
.my-5.col-lg-11.position-relative { color: #fff4e1; }

.my-5.col-lg-11.position-relative h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.my-5.col-lg-11.position-relative h3 { font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.my-5.col-lg-11.position-relative .portrait-video-container { overflow: visible !important; }

.my-5.col-lg-11.position-relative video { border-radius: 16px; box-shadow: 0 0 0 1px rgba(253, 231, 130, 0.15), 0 20px 55px rgba(0, 0, 0, 0.65), 0 0 35px rgba(19, 90, 144, 0.25); object-fit: cover; display: block; height: 100%; width: auto; margin: auto; transform: rotate(3.5deg); }

/* === BLOC VIDEO + TEXTE MODERNISÉ === */
.my-5.col-lg-11.position-relative { position: relative; border-radius: 18px; box-shadow: 0 0 0 1px rgba(253, 231, 130, 0.1), 0 30px 80px rgba(0, 0, 0, 0.65); z-index: 1; background: linear-gradient(172deg, #0d2233 0%, #0e2533 50%, #325980 100%) !important; transition: box-shadow 0.3s ease, background 0.3s ease; }

.my-5.col-lg-11.position-relative:hover { box-shadow: 0 0 30px rgba(253, 231, 130, 0.2), 0 40px 100px rgba(0, 0, 0, 0.7); }

/* === LIGNE VERTICALE ANIMÉE === */
.my-5.col-lg-11.position-relative .vertical-line { position: absolute; top: 0; bottom: 0; right: 50px; width: 2px; transform: translateX(-50%); background: rgba(253, 231, 130, 0.4); height: 0; transition: height 1s ease-out; z-index: 3; pointer-events: none; }

.my-5.col-lg-11.position-relative:hover .vertical-line { height: 100%; }

/* === COINS DORES ANIMÉS === */
.my-5.col-lg-11.position-relative .corner { position: absolute; width: 36px; height: 36px; pointer-events: none; z-index: 3; border: 2px solid rgba(253, 231, 130, 0.6); border-radius: 8px; transition: all 0.4s ease-in-out; opacity: 0.5; }

.corner.tl { top: -5px; left: -5px; }

.corner.tr { top: -5px; right: -5px; }

.corner.bl { bottom: -5px; left: -5px; }

.corner.br { bottom: -5px; right: -5px; }

.my-5.col-lg-11.position-relative:hover .corner { transform: scale(1.1); opacity: 1; box-shadow: 0 0 20px rgba(253, 231, 130, 0.4); }

/* === TEXTES (effet lumineux) === */
.my-5.col-lg-11.position-relative h2, .my-5.col-lg-11.position-relative h3 { text-shadow: 0 4px 15px rgba(253, 231, 130, 0.3); }

/* === ANIMATION AU SCROLL === */
.fade-block { opacity: 0; transform: translateY(40px); transition: all 0.9s cubic-bezier(0.2, 0.65, 0.2, 1); }

.fade-block.visible { opacity: 1; transform: translateY(0); }

/* === VIDÉO INTERACTIVE === */
.my-5.col-lg-11.position-relative video { transition: transform .6s ease; transform: rotate(3deg) scale(1.45); }

.my-5.col-lg-11.position-relative:hover video { transform: rotate(3deg) scale(1.65); }

/* === RESPONSIVE === */
@media (max-width: 992px) { .my-5.col-lg-11.position-relative .vertical-line { display: none; } }

/*---------------------------------------------------Réseaux-sociaux-------------------------------------------------*/
.reseaux::before { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 101px; background: #0d2333; clip-path: polygon(0 100%, 100% 100%, 50% 0); z-index: 6; pointer-events: none; }

/*---------------------------------------------------Horaires et Maps-------------------------------------------------*/
#horaires::before { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 101px; background: #0d2333; clip-path: polygon(0 100%, 100% 100%, 50% 0); z-index: 6; pointer-events: none; }

/*------------------------------------------------------Bloc prestations------------------------------------------------*/
.prestations-container.my-5.col-lg-11.position-relative { position: relative; padding: 50px 0; width: 100vw !important; border-radius: 0 !important; background: radial-gradient(#325980 0%, #0e2533 50%, #0d2233 100%) !important; }

.prestations-container.my-5.col-lg-11.position-relative p { color: #fff4e1 !important; }

.prestations-container.my-5.col-lg-11.position-relative h2 { margin-bottom: 50px !important; }

.prestations-container.my-5.col-lg-11.position-relative .col-md-8 { min-width: 80% !important; }

.prestations-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #13334cb0; /* Couleur d'overlay avec transparence */ z-index: 0; border-radius: 16px; /* Garder la même bordure arrondie que la carte */ }

.prestations-container::before { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 101px; background: #0d2333; clip-path: polygon(0 100%, 100% 100%, 50% 0); z-index: 6; pointer-events: none; }

.prestations-container::after { content: ''; position: absolute; bottom: -100px; left: 0; width: 100%; height: 101px; background: #0d2433; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 6; pointer-events: none; }

.prestations-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: .04em; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 40px; z-index: 1; position: relative; }

.prestations-description { z-index: 1; position: relative; }

.prestations-card { position: relative; background: linear-gradient(135deg, #0d2233 0%, #0b1c26 50%, #081420 100%); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(253, 231, 130, 0.15); padding: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }

.prestations-card:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(253, 231, 130, 0.3), 0 4px 12px rgba(0, 0, 0, 0.6); }

.prestations-icon img { transition: transform 0.3s ease, filter 0.3s ease; filter: grayscale(100%) brightness(0.8); /* Gris et légèrement assombri par défaut */ position: relative; z-index: 1; max-width: 100px; }

.prestations-card:hover .prestations-icon img { transform: scale(1.1); /* Agrandissement de l'image au survol */ filter: grayscale(0%) brightness(1.2) drop-shadow(0 0 1px var(--gold-deep)); /* Effet de couleur or */ }

h4 { font-size: clamp(1.1rem, 2.8vw, 2.2rem) !important; font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 50px !important; }

.prestations-items { margin-top: 30px; }

@media (max-width: 768px) { .prestations-card { padding: 20px; } .prestations-title { font-size: clamp(1.8rem, 5vw, 3rem); } }

/*-----------------------------------------Bannière d'accueil----------------------------------------*/
:root { --blue-deep:   #135a90; --blue-dark:   #304a56; --gold-bright: #fde782; --gold-warm:   #d2b76b; --gold-deep:   #b8942a; }

.hero { position: relative; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px 40px 24px; background: linear-gradient(175deg, #0d2233 0%, #0b1c26 50%, #081420 100%); box-sizing: border-box; z-index: 2; }

.hero::after { content: ''; position: absolute; bottom: -100px; left: 0; width: 100%; height: 101px; background: #0a1723; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 3; pointer-events: none; }

.hero__bg-radial { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(19, 90, 144, 0.5) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 15% 80%, rgba(210, 183, 107, 0.1) 0%, transparent 60%), radial-gradient(ellipse 35% 35% at 85% 10%, rgba(253, 231, 130, 0.07) 0%, transparent 55%); z-index: 0; pointer-events: none; }

.hero__noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; opacity: .45; z-index: 0; pointer-events: none; }

.hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent, transparent 59px, rgba(253, 231, 130, 0.035) 60px); }

.hero__columns { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1500px; height: 100%; gap: 4.5rem; }

@media (max-width: 790px) { .hero__reel { display: none; } }

.hero__reel { position: relative; flex: 1.2; overflow: hidden; height: 85%; border-radius: 16px; transform: rotate(-4deg); box-shadow: 0 0 0 1px rgba(253, 231, 130, 0.15), 0 20px 55px rgba(0, 0, 0, 0.65), 0 0 35px rgba(19, 90, 144, 0.25); z-index: 6; }

.hero__reel--2 { transform: rotate(4deg); }

.hero__reel video { width: 100%; height: 100%; object-fit: cover; }

.hero__center { flex: 1.5; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; text-align: center; z-index: 2; }

.hero__logo img { width: clamp(130px, 14vw, 235px); height: auto; filter: drop-shadow(0 0 24px rgba(253, 231, 130, 0.4)); }

.hero__sep { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-warm), transparent); margin: 0 auto 14px; }

.hero__h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3.8vw, 3.2rem); font-weight: 700 !important; line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-warm) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; }

.hero__h2 { font-size: clamp(0.75rem, 1.5vw, 1.05rem); font-family: 'Google Sans'; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(253, 231, 130, 0.55); max-width: 400px; margin: 20px auto 70px auto; }

/* ═══════════════════════════ BUTTON ═══════════════════════════ */
.hero__phone-wrap { position: relative; margin-bottom: 32px; animation: hFadeUp .9s .25s ease both; display: inline-flex; align-items: center; justify-content: center; }

/* rotating conic halo behind button */
.hero__phone-wrap::before { content: ''; position: absolute; inset: -3px; border-radius: 100px; background: conic-gradient(from var(--angle, 0deg), transparent 0deg, rgba(253, 231, 130, 0) 60deg, rgba(253, 231, 130, 0.9) 120deg, rgba(210, 183, 107, 0.6) 150deg, rgba(253, 231, 130, 0) 200deg, transparent 360deg); animation: rotateConic 3s linear infinite; z-index: -1; }

/* subtle blur glow layer */
.hero__phone-wrap::after { content: ''; position: absolute; inset: -8px; border-radius: 100px; background: conic-gradient(from var(--angle, 0deg), transparent 0deg, rgba(253, 231, 130, 0) 60deg, rgba(253, 231, 130, 0.35) 120deg, rgba(210, 183, 107, 0.2) 150deg, rgba(253, 231, 130, 0) 200deg, transparent 360deg); filter: blur(8px); animation: rotateConic 3s linear infinite; z-index: -2; }

@property --angle { syntax: '<angle>';
  initial-value: 0deg;
  inherits: false; }

@keyframes rotateConic { to { --angle: 360deg; } }

.hero__phone { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; position: relative; padding: 12px 20px; border-radius: 100px; overflow: hidden; isolation: isolate; /* dark fill with micro-inset border */ background: #0b1c26; border: 1px solid rgba(253, 231, 130, 0.12); transition: border-color .4s, transform .3s; }

.hero__phone:hover { border-color: rgba(253, 231, 130, 0); transform: translateY(-2px); }

/* shimmer sweep */
.hero__phone::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: skewX(-20deg); transition: left .55s ease; z-index: 1; }

.hero__phone:hover::after { left: 130%; }

.hero__phone__label { position: relative; z-index: 2; font-size: 1rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-bright); transition: color .35s; white-space: nowrap; }

.hero__phone-glow { position: absolute; inset: -20px; border-radius: 100px; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(253, 231, 130, 0.18) 0%, transparent 70%); opacity: 0; transition: opacity .4s; z-index: -3; pointer-events: none; }

.hero__phone:hover ~ .hero__phone-glow, .hero__phone-wrap:hover .hero__phone-glow { opacity: 1; }

.hero__vline_right { position: absolute; top: 0; bottom: 0; right: 0; transform: translateX(-50%); width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(210, 183, 107, 0) 10%, rgba(210, 183, 107, 0.5) 30%, rgba(253, 231, 130, 0.8) 50%, rgba(210, 183, 107, 0.5) 70%, rgba(210, 183, 107, 0) 90%, transparent 100%); z-index: 1; }

.hero__vline_left { position: absolute; top: 0; bottom: 0; left: 0; transform: translateX(-50%); width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(210, 183, 107, 0) 10%, rgba(210, 183, 107, 0.5) 30%, rgba(253, 231, 130, 0.8) 50%, rgba(210, 183, 107, 0.5) 70%, rgba(210, 183, 107, 0) 90%, transparent 100%); z-index: 1; }

/* --------------------------------------------------BUTTON ------------------------------------------------- */
/* ═══════════════════════════ BOUTONS DORÉS MODERNES & RAFFINÉS ═══════════════════════════ */
/* Style général du bouton */
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 30px !important; border-radius: 50px !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; background: linear-gradient(45deg, #f5d063, #d9c37d) !important; /* Subtil dégradé doré */ color: white !important; /* Texte blanc */ border: none !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: all 0.3s ease-out !important; }

/* Effet au survol */
a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { background: linear-gradient(45deg, #d9c37d, #f5d063) !important; /* Inversion des couleurs au hover */ transform: translateY(-5px) !important; /* Léger effet de soulèvement */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important; /* Ombre plus marquée */ }

/* Effet de lumière sur le bouton */
a.button_header::after, a.button_homepageScreen::after, a.button_homepageDoubleScreen::after, a.phone-number-button::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: rgba(255, 255, 255, 0.15) !important; transform: skewX(-20deg) !important; transition: left 0.4s ease-out !important; z-index: 1 !important; }

/* Animation de la lumière lors du survol */
a.button_header:hover::after, a.button_homepageScreen:hover::after, a.button_homepageDoubleScreen:hover::after, a.phone-number-button:hover::after { left: 100% !important; }

/* Halo lumineux subtil autour du bouton */
a.button_header::before, a.button_homepageScreen::before, a.button_homepageDoubleScreen::before, a.phone-number-button::before { content: '' !important; position: absolute !important; inset: -5px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(253, 231, 130, 0.15), transparent 80%) !important; /* Halo doré subtil */ opacity: 0.3 !important; z-index: -1 !important; }

/* Animation de halo lumineux au survol */
a.button_header:hover::before, a.button_homepageScreen:hover::before, a.button_homepageDoubleScreen:hover::before, a.phone-number-button:hover::before { opacity: 0.6 !important; }

/* Texte du bouton avec un léger effet lumineux */
a.button_header span, a.button_homepageScreen span, a.button_homepageDoubleScreen span, a.phone-number-button span { position: relative !important; z-index: 2 !important; color: white !important; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; /* Légère lueur dorée autour du texte */ }

/*# sourceMappingURL=custom.css.map */