@charset "UTF-8";
@import url(main.css);
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&display=swap");
nav#navigation-bar-show { border-bottom: 1px solid #000 !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px !important; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px !important; }

h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: #000 !important; }

.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { border-radius: 0px !important; }

.d-flex.flex-column.h-100.p-4.text-center.text-white.text-shadow-1 { padding: 5rem !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; font-family: 'Cormorant Garamond' !important; font-size: 20px !important; }

.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { border: 1px solid #000 !important; border-radius: 0px !important; }

.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative { border: 1px solid #000 !important; border-radius: 0px !important; }

.mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { border: 1px solid #000 !important; border-radius: 0px !important; }

/**************************************************************************** HERO **************************************************************************************************/
/********************************************************* IMPORT TYPO */
/********************************************************* SECTION HERO */
.hair-hero-luxe { width: 100%; min-height: 760px; display: flex; justify-content: flex-end; align-items: center; padding: 40px; box-sizing: border-box; overflow: hidden; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FFBujqTjkhbS8L73KtJmz2lqNAn33%2Fimages%2FLHAIR_DE_JOYE_image_1_6shm.webp"); background-repeat: no-repeat; background-size: cover; background-position: left center; background-color: #f5f1eb; }

/********************************************************* ZONE DE DROITE */
.hair-hero-luxe-panel { width: 100%; max-width: 650px; display: flex; justify-content: flex-end; }

/********************************************************* CARTE */
.hair-hero-luxe-card { width: 100%; max-width: 590px; padding: 58px 52px 56px; box-sizing: border-box; background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 18px 50px rgba(40, 31, 24, 0.1); text-align: left; }

/********************************************************* LOGO */
.hair-hero-luxe-logo { width: 165px; margin: 0 0 34px; }

.hair-hero-luxe-logo img { display: block; width: 100%; height: auto; }

/********************************************************* SURTITRE */
.hair-hero-luxe-subtitle { margin: 0 0 24px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 4px; text-transform: uppercase; color: #1f1c19; }

/********************************************************* TITRE GLOBAL */
.hair-hero-luxe-title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 0.95; }

/********************************************************* L'HAIR DE STYLE FIN / CONTOUR */
.hair-hero-luxe-title-main { display: block; font-family: "Bodoni Moda", Georgia, "Times New Roman", serif; font-size: clamp(54px, 5vw, 82px); font-weight: 400; line-height: 0.95; letter-spacing: -2px; color: #2a2724; -webkit-text-stroke: 0.5px #2a2724; text-shadow: 0.7px 0 rgba(255, 255, 255, 0.26), -0.7px 0 rgba(255, 255, 255, 0.18); }

/********************************************************* JOYE STYLE DORÉ */
.hair-hero-luxe-title-gold { display: block; margin-top: 6px; font-family: "Bodoni Moda", Georgia, "Times New Roman", serif; font-size: clamp(48px, 4.2vw, 68px); font-weight: 400; line-height: 1; letter-spacing: 1px; color: #d9b259; }

/********************************************************* CTA */
.hair-hero-luxe-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 38px; padding: 18px 28px; border: 1px solid #26221f; background: transparent; color: #26221f; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 2px; text-transform: uppercase; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }

.hair-hero-luxe-button span { font-size: 17px; line-height: 1; }

.hair-hero-luxe-button:hover { background: #d9b259; border-color: #d9b259; color: #1d1a17; }

/********************************************************* PETIT DESKTOP */
@media (max-width: 1200px) { .hair-hero-luxe { min-height: 690px; padding: 30px; } .hair-hero-luxe-panel { max-width: 570px; } .hair-hero-luxe-card { max-width: 520px; padding: 48px 40px; } .hair-hero-luxe-logo { width: 150px; margin-bottom: 28px; } .hair-hero-luxe-subtitle { font-size: 11px; letter-spacing: 3px; } .hair-hero-luxe-title-main { font-size: clamp(48px, 5vw, 68px); } .hair-hero-luxe-title-gold { font-size: clamp(42px, 4vw, 58px); } }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .hair-hero-luxe { min-height: 680px; padding: 24px; background-position: 28% center; } .hair-hero-luxe-panel { max-width: 100%; justify-content: center; } .hair-hero-luxe-card { max-width: 560px; padding: 42px 30px; } .hair-hero-luxe-logo { width: 140px; margin-bottom: 24px; } .hair-hero-luxe-subtitle { margin-bottom: 18px; font-size: 10px; letter-spacing: 2.5px; } .hair-hero-luxe-title-main { font-size: clamp(46px, 7vw, 62px); } .hair-hero-luxe-title-gold { font-size: clamp(40px, 6vw, 52px); } .hair-hero-luxe-button { margin-top: 30px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .hair-hero-luxe { min-height: 620px; padding: 16px; background-position: 24% center; } .hair-hero-luxe-card { max-width: 100%; padding: 34px 22px; } .hair-hero-luxe-logo { width: 120px; margin-bottom: 20px; } .hair-hero-luxe-subtitle { font-size: 9px; letter-spacing: 2px; line-height: 1.5; } .hair-hero-luxe-title-main { font-size: clamp(38px, 10vw, 48px); letter-spacing: -1.2px; } .hair-hero-luxe-title-gold { font-size: clamp(34px, 8.5vw, 42px); } .hair-hero-luxe-button { width: 100%; max-width: 270px; margin-top: 26px; padding: 16px 18px; font-size: 11px; letter-spacing: 1.6px; } }

/********************************************************* TRÈS PETIT MOBILE */
@media (max-width: 380px) { .hair-hero-luxe { padding: 12px; } .hair-hero-luxe-card { padding: 28px 16px; } .hair-hero-luxe-logo { width: 108px; } .hair-hero-luxe-title-main { font-size: 34px; } .hair-hero-luxe-title-gold { font-size: 30px; } .hair-hero-luxe-subtitle { font-size: 8px; letter-spacing: 1.5px; } }

/**************************************************************************** INTRO **************************************************************************************************/
/********************************************************* SECTION A PROPOS */
.hair-about { position: relative; padding: 120px 30px; background: #f8f6f1; overflow: hidden; }

.hair-about-container { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; text-align: center; }

/********************************************************* IMAGE DÉCORATIVE GAUCHE */
.hair-about-decoration-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 420px; height: 520px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FFBujqTjkhbS8L73KtJmz2lqNAn33%2Fimages%2FLHAIR_DE_JOYE_logo_7_27mq.webp"); background-repeat: no-repeat; background-position: left center; background-size: contain; opacity: 0.55; pointer-events: none; z-index: 1; }

/********************************************************* IMAGE DÉCORATIVE BAS DROITE */
.hair-about-decoration-right { position: absolute; right: 0; bottom: 0; width: 420px; height: 430px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FFBujqTjkhbS8L73KtJmz2lqNAn33%2Fimages%2FLHAIR_DE_JOYE_logo_8_6p76.webp"); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: 0.55; pointer-events: none; z-index: 1; }

/********************************************************* TITRE SUPERPOSE */
.hair-about-title { position: relative; display: flex; justify-content: center; align-items: center; min-height: 170px; }

.hair-about-background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-family: 'Cormorant Garamond' !important; font-size: 180px; font-weight: 400; letter-spacing: 8px; color: #eadfce; opacity: 0.8; line-height: 1; }

/********************************************************* TITRE DEVANT */
.hair-about-title h2 { position: relative; z-index: 2; margin: 0; font-size: 55px; font-style: italic; font-weight: 400; color: #181818; line-height: 1.2; }

/********************************************************* TEXTE */
.hair-about-text { max-width: 850px; margin: 45px auto 0; font-size: 18px; line-height: 1.9; color: #303030; }

/********************************************************* BOUTON */
.hair-about-button { display: inline-flex; margin-top: 45px; padding: 18px 55px; background: #e1b96b; color: #171717; text-decoration: none; font-size: 14px; letter-spacing: 3px; transition: 0.3s ease; }

.hair-about-button:hover { background: #f0c567; }

/********************************************************* RESPONSIVE TABLETTE */
@media (max-width: 992px) { .hair-about-background { font-size: 120px; } .hair-about-title h2 { font-size: 42px; } .hair-about-decoration-left { width: 320px; height: 430px; opacity: 0.48; } .hair-about-decoration-right { width: 320px; height: 350px; opacity: 0.48; } }

/********************************************************* RESPONSIVE MOBILE */
@media (max-width: 768px) { .hair-about { padding: 80px 25px; } .hair-about-background { font-size: 70px; } .hair-about-title { min-height: 120px; } .hair-about-title h2 { font-size: 32px; } .hair-about-text { font-size: 17px; } /**************** IMAGE GAUCHE ****************/ .hair-about-decoration-left { width: 250px; height: 340px; opacity: 0.38; } /**************** IMAGE DROITE ****************/ .hair-about-decoration-right { width: 240px; height: 280px; opacity: 0.38; } }

/********************************************************* TRÈS PETIT MOBILE */
@media (max-width: 480px) { .hair-about { padding: 70px 20px; } .hair-about-decoration-left { width: 190px; height: 270px; opacity: 0.30; } .hair-about-decoration-right { width: 180px; height: 220px; opacity: 0.30; } }

/**************************************************************************** ICONES **************************************************************************************************/
/********************************************************* SECTION PRESTATIONS */
.hair-services { width: 100%; padding: 70px 40px 75px; box-sizing: border-box; }

/********************************************************* CONTENEUR */
.hair-services-container { width: 100%; max-width: 1650px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: clamp(30px, 4vw, 80px); }

/********************************************************* PRESTATION */
.hair-service-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }

/********************************************************* ICONE */
.hair-service-icon { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }

.hair-service-icon img { display: block; width: auto; height: auto; max-width: 155px; max-height: 155px; object-fit: contain; }

/********************************************************* TITRE */
.hair-service-item h3 { margin: 0; font-size: clamp(14px, 1.25vw, 20px); font-weight: 600 !important; line-height: 1.3; letter-spacing: 3px; text-transform: uppercase; font-family: 'Cormorant Garamond' !important; color: #2f2a27; white-space: nowrap; }

/********************************************************* PETIT DESKTOP */
@media (max-width: 1250px) { .hair-services { padding-left: 25px; padding-right: 25px; } .hair-services-container { gap: 25px; } .hair-service-icon { height: 150px; margin-bottom: 25px; } .hair-service-icon img { max-width: 125px; max-height: 125px; } .hair-service-item h3 { font-size: 14px; letter-spacing: 2px; white-space: normal; } }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .hair-services { padding: 55px 30px; } .hair-services-container { grid-template-columns: repeat(3, 1fr); gap: 55px 35px; } .hair-service-icon { height: 140px; margin-bottom: 20px; } .hair-service-icon img { max-width: 120px; max-height: 120px; } .hair-service-item h3 { font-size: 13px; letter-spacing: 2px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .hair-services { padding: 45px 20px 50px; } .hair-services-container { grid-template-columns: repeat(2, 1fr); gap: 45px 25px; } .hair-service-icon { height: 120px; margin-bottom: 18px; } .hair-service-icon img { max-width: 105px; max-height: 105px; } .hair-service-item h3 { font-size: 11px; line-height: 1.4; letter-spacing: 1.5px; white-space: normal; } }

/********************************************************* TRÈS PETIT MOBILE */
@media (max-width: 380px) { .hair-services { padding-left: 15px; padding-right: 15px; } .hair-services-container { gap: 40px 15px; } .hair-service-icon { height: 105px; } .hair-service-icon img { max-width: 90px; max-height: 90px; } .hair-service-item h3 { font-size: 10px; letter-spacing: 1px; } }

/**************************************************************************** SERVICES **************************************************************************************************/
/********************************************************* SECTION */
.hair-savoir-section { width: 100%; box-sizing: border-box; padding: 70px 0 75px; overflow: hidden; }

/********************************************************* CONTENEUR PRINCIPAL */
.hair-savoir-container { width: 100%; max-width: 1500px; margin: 0 auto; box-sizing: border-box; padding-left: 55px; display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 50px; align-items: center; }

/********************************************************* COLONNE GAUCHE */
.hair-savoir-intro { position: relative; z-index: 2; align-self: center; }

/********************************************************* GROS TITRE GAUCHE */
.hair-savoir-intro h2 { margin: 0; max-width: 340px; font-style: italic; font-size: clamp(48px, 4.2vw, 70px); font-weight: 400; line-height: 0.98; letter-spacing: -1.8px; color: #181411; }

/********************************************************* PETITE LIGNE */
.hair-savoir-line { width: 48px; height: 1px; margin: 30px 0; background: rgba(74, 57, 45, 0.38); }

/********************************************************* TEXTE INTRO */
.hair-savoir-intro p { max-width: 295px; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.7; color: #66594f; }

/********************************************************* PARTIE DROITE */
.hair-savoir-right { position: relative; min-width: 0; }

/********************************************************* CONTRÔLES */
.hair-savoir-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; box-sizing: border-box; padding-right: 40px; margin-bottom: 18px; }

/********************************************************* TEXTE "FAITES DÉFILER" */
.hair-savoir-slide-text { margin-right: 8px; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #8b7461; }

/********************************************************* FLÈCHES */
.hair-savoir-arrow { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(42, 33, 27, 0.38); border-radius: 50%; background: transparent; color: #211b17; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; }

.hair-savoir-arrow span { display: block; font-size: 18px; line-height: 1; }

/********************************************************* HOVER FLÈCHES */
.hair-savoir-arrow:hover { background: #1d1815; border-color: #1d1815; color: #ffffff; }

/********************************************************* FLÈCHE DÉSACTIVÉE */
.hair-savoir-arrow:disabled { opacity: 0.28; cursor: default; }

.hair-savoir-arrow:disabled:hover { background: transparent; color: #211b17; border-color: rgba(42, 33, 27, 0.38); }

/********************************************************* CARROUSEL */
.hair-savoir-slider { width: 100%; display: flex; /* Espace généreux entre les cartes */ gap: 28px; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; padding-right: 40px; padding-bottom: 8px; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }

.hair-savoir-slider:active { cursor: grabbing; }

.hair-savoir-slider::-webkit-scrollbar { display: none; }

/********************************************************* CARTES */
.hair-savoir-card { /* Environ 3 cartes visibles sur grand écran. */ flex: 0 0 calc((100% - 56px) / 3); min-width: 0; scroll-snap-align: start; background: transparent; border-left: 1px solid rgba(79, 59, 45, 0.12); }

/********************************************************* BLOC IMAGE */
.hair-savoir-card-image { width: 100%; /* Images légèrement agrandies en hauteur. */ height: clamp(285px, 27vw, 390px); overflow: hidden; background: #d6c3b3; }

/********************************************************* IMAGE */
.hair-savoir-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/********************************************************* CONTENU SOUS IMAGE */
.hair-savoir-card-content { min-height: 155px; box-sizing: border-box; padding: 20px 16px 10px; }

/********************************************************* TITRE CARTE */
.hair-savoir-card-content h3 { margin: 0 0 8px; font-size: clamp(14px, 1.25vw, 18px); font-weight: 500; line-height: 1.25; letter-spacing: 1.2px; text-transform: uppercase; color: #2c241f; }

/********************************************************* SOUS-TITRE CARTE */
.hair-savoir-card-content h4 { margin: 0 0 10px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; text-transform: uppercase; color: #796658; }

/********************************************************* DESCRIPTION CARTE */
.hair-savoir-card-content p { margin: 0; max-width: 300px; font-size: 12px; font-weight: 400; line-height: 1.55; color: #6d6057; }

/********************************************************* PETIT DESKTOP */
@media (max-width: 1200px) { .hair-savoir-section { padding: 60px 0 65px; } .hair-savoir-container { padding-left: 35px; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; } /**************** TITRE ****************/ .hair-savoir-intro h2 { max-width: 300px; font-size: 48px; } /**************** TEXTE ****************/ .hair-savoir-intro p { font-size: 13px; } /**************** CONTROLES ****************/ .hair-savoir-controls, .hair-savoir-slider { padding-right: 25px; } /**************** SLIDER ****************/ .hair-savoir-slider { gap: 24px; } /**************** CARTES ****************/ .hair-savoir-card { flex: 0 0 calc((100% - 48px) / 3); } /**************** IMAGES ****************/ .hair-savoir-card-image { height: 335px; } }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .hair-savoir-section { padding: 55px 0 60px; } .hair-savoir-container { display: block; padding-left: 25px; } /**************** INTRO ****************/ .hair-savoir-intro { max-width: 650px; margin-bottom: 38px; padding-right: 25px; } .hair-savoir-intro h2 { max-width: 600px; font-size: clamp(46px, 7.5vw, 62px); } .hair-savoir-intro p { max-width: 600px; font-size: 14px; } /**************** CONTROLES ****************/ .hair-savoir-controls { padding-right: 25px; } /**************** SLIDER ****************/ .hair-savoir-slider { gap: 22px; padding-right: 25px; } /**************** CARTES ****************/ .hair-savoir-card { flex-basis: 43%; } /**************** IMAGES ****************/ .hair-savoir-card-image { height: 335px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .hair-savoir-section { padding: 48px 0 52px; } .hair-savoir-container { padding-left: 16px; } /**************** INTRO ****************/ .hair-savoir-intro { margin-bottom: 30px; padding-right: 16px; } .hair-savoir-intro h2 { max-width: 420px; font-size: 44px; line-height: 0.98; } .hair-savoir-line { margin: 24px 0; } .hair-savoir-intro p { max-width: 500px; font-size: 14px; line-height: 1.65; } /**************** CONTRÔLES ****************/ .hair-savoir-controls { justify-content: flex-start; padding-right: 16px; margin-bottom: 14px; } .hair-savoir-slide-text { font-size: 8px; letter-spacing: 1.5px; } .hair-savoir-arrow { width: 38px; height: 38px; } /**************** SLIDER ****************/ .hair-savoir-slider { gap: 18px; padding-right: 16px; } /**************** CARTES ****************/ .hair-savoir-card { flex-basis: 82vw; max-width: 345px; } /**************** IMAGES ****************/ .hair-savoir-card-image { height: 320px; } /**************** CONTENU ****************/ .hair-savoir-card-content { min-height: 145px; padding: 18px 13px 8px; } .hair-savoir-card-content h3 { font-size: 15px; } .hair-savoir-card-content h4 { font-size: 10px; } .hair-savoir-card-content p { font-size: 12px; } }

/********************************************************* PETIT MOBILE */
@media (max-width: 380px) { .hair-savoir-container { padding-left: 12px; } .hair-savoir-intro { padding-right: 12px; } /**************** TITRE ****************/ .hair-savoir-intro h2 { font-size: 39px; } /**************** CONTROLES ****************/ .hair-savoir-controls { padding-right: 12px; } /**************** SLIDER ****************/ .hair-savoir-slider { gap: 15px; padding-right: 12px; } /**************** CARTES ****************/ .hair-savoir-card { flex-basis: 85vw; } /**************** IMAGES ****************/ .hair-savoir-card-image { height: 295px; } }

/**************************************************************************** INFOS **************************************************************************************************/
/********************************************************* SECTION */
.hair-creator-section { position: relative; width: 100%; overflow: hidden; box-sizing: border-box; padding: 90px 40px; background: #f7f4ef; }

/********************************************************* CONTENEUR */
.hair-creator-container { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(420px, 1fr) 520px; gap: 38px; align-items: center; }

/********************************************************* CONTENU */
.hair-creator-content { max-width: 760px; padding-left: 20px; position: relative; z-index: 2; }

/********************************************************* BLOC TITRE */
.hair-creator-title-wrap { position: relative; margin-bottom: 38px; /* un peu de hauteur pour laisser vivre le mot d’arrière-plan */ padding-top: 28px; isolation: isolate; }

/********************************************************* GROS MOT EN ARRIÈRE-PLAN */
.hair-creator-background-word { position: absolute; /* Descendu pour être bien centré derrière les 2 lignes du titre */ top: 52%; left: 42%; transform: translate(-50%, -50%); z-index: -1; font-family: 'Cormorant Garamond' !important; font-size: clamp(95px, 10vw, 180px); font-weight: 400; line-height: 1; letter-spacing: -4px; color: rgba(214, 190, 152, 0.16); white-space: nowrap; pointer-events: none; user-select: none; }

/********************************************************* TITRE PRINCIPAL */
.hair-creator-content h2 { margin: 0; font-size: clamp(46px, 4.8vw, 78px); font-weight: 400; font-style: italic; line-height: 0.98; letter-spacing: -1.4px; color: #171412; position: relative; z-index: 2; max-width: 670px; }

.hair-creator-content h2 span { display: block; }

/********************************************************* PARAGRAPHES */
.hair-creator-content p { margin: 0 0 22px; font-size: clamp(15px, 1.05vw, 17px); font-weight: 400; line-height: 1.9; color: #5e5852; max-width: 720px; }

.hair-creator-content p:last-of-type { margin-bottom: 34px; }

/********************************************************* BOUTON */
.hair-creator-button { display: inline-flex; align-items: center; justify-content: center; min-width: 262px; padding: 19px 34px; border: 1px solid #1c1815; background: #1c1815; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 2.2px; line-height: 1; text-transform: uppercase; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }

.hair-creator-button:hover { background: #d8b26a; border-color: #d8b26a; color: #1a1512; transform: translateY(-2px); }

/********************************************************* IMAGE */
.hair-creator-image { width: 100%; max-width: 520px; /* image un peu plus à gauche */ justify-self: start; margin-left: -18px; background: #ebe4dc; overflow: hidden; }

.hair-creator-image img { display: block; width: 100%; height: 675px; object-fit: cover; object-position: center; transition: transform 0.5s ease; }

.hair-creator-image:hover img { transform: scale(1.02); }

/********************************************************* PETIT DESKTOP */
@media (max-width: 1200px) { .hair-creator-section { padding: 75px 25px; } .hair-creator-container { grid-template-columns: minmax(320px, 1fr) 430px; gap: 28px; } .hair-creator-content { max-width: 680px; padding-left: 12px; } .hair-creator-title-wrap { margin-bottom: 30px; padding-top: 24px; } .hair-creator-background-word { top: 54%; left: 44%; font-size: clamp(82px, 10vw, 145px); } .hair-creator-content h2 { font-size: clamp(40px, 4.5vw, 60px); max-width: 560px; } .hair-creator-content p { font-size: 15px; line-height: 1.8; } .hair-creator-image { max-width: 430px; margin-left: -10px; } .hair-creator-image img { height: 580px; } }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .hair-creator-section { padding: 65px 25px; } .hair-creator-container { grid-template-columns: 1fr; gap: 34px; } .hair-creator-content { max-width: 100%; padding-left: 0; } .hair-creator-title-wrap { padding-top: 24px; margin-bottom: 28px; } .hair-creator-background-word { top: 54%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(82px, 17vw, 140px); } .hair-creator-content h2 { max-width: 620px; font-size: clamp(38px, 6vw, 54px); } .hair-creator-content p { max-width: 800px; font-size: 16px; line-height: 1.8; } .hair-creator-image { width: 100%; max-width: 500px; margin-left: 0; justify-self: start; } .hair-creator-image img { height: 560px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .hair-creator-section { padding: 50px 16px; } .hair-creator-container { gap: 28px; } .hair-creator-title-wrap { padding-top: 18px; margin-bottom: 22px; } .hair-creator-background-word { top: 54%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(56px, 18vw, 90px); letter-spacing: -3px; } .hair-creator-content h2 { font-size: 34px; line-height: 1.03; letter-spacing: -0.8px; max-width: 100%; } .hair-creator-content p { margin-bottom: 16px; font-size: 15px; line-height: 1.78; } .hair-creator-content p:last-of-type { margin-bottom: 28px; } .hair-creator-button { width: 100%; max-width: 260px; min-width: 0; padding: 16px 20px; font-size: 11px; } .hair-creator-image { max-width: 100%; margin-left: 0; } .hair-creator-image img { height: 420px; } }

/********************************************************* TRÈS PETIT MOBILE */
@media (max-width: 380px) { .hair-creator-section { padding: 42px 12px; } .hair-creator-title-wrap { margin-bottom: 20px; } .hair-creator-background-word { font-size: 54px; } .hair-creator-content h2 { font-size: 30px; } .hair-creator-content p { font-size: 14px; line-height: 1.72; } .hair-creator-image img { height: 360px; } }

/**************************************************************************** CTA **************************************************************************************************/
/********************************************************* BANNIÈRE CTA */
.hair-banner { position: relative; width: 100%; min-height: clamp(330px, 34vw, 520px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #302424; }

/********************************************************* IMAGE DE FOND */
.hair-banner-background { position: absolute; inset: 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FFBujqTjkhbS8L73KtJmz2lqNAn33%2Fimages%2Fbv6fgwxajqb9mjenanc8_3sm0.webp?alt=media&token=449194bf-af28-4b01-a925-7a52db59907d"); background-size: cover; background-position: center center; background-repeat: no-repeat; }

/********************************************************* FILTRE POUR LA LISIBILITÉ */
.hair-banner-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 12, 12, 0.58) 0%, rgba(20, 12, 12, 0.48) 50%, rgba(20, 12, 12, 0.58) 100%), linear-gradient(0deg, rgba(20, 12, 12, 0.35) 0%, rgba(20, 12, 12, 0.15) 50%, rgba(20, 12, 12, 0.35) 100%); }

/********************************************************* CONTENU CENTRAL */
.hair-banner-content { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 40px 20px; text-align: center; color: #ffffff; }

/********************************************************* SURTITRE */
.hair-banner-small-title { display: block; margin-bottom: 20px; font-size: 20px !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: clamp(4px, 0.65vw, 8px); text-transform: uppercase; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); }

/********************************************************* GRAND TITRE */
.hair-banner-content h2 { margin: 0; font-size: clamp(72px, 9vw, 145px); font-weight: 400; line-height: 0.9; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 4px 18px rgba(0, 0, 0, 0.18); }

/********************************************************* BOUTON CTA */
.hair-banner-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 35px; padding: 14px 36px; border: 1px solid #e1b96b; background: #ffffff; color: #563820; font-size: 16px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; }

.hair-banner-button:hover { background: #e1b96b; border-color: #e1b96b; color: #ffffff; }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .hair-banner { min-height: 400px; } .hair-banner-small-title { margin-bottom: 18px; font-size: 9px; letter-spacing: 5px; } .hair-banner-content h2 { font-size: clamp(70px, 13vw, 110px); } .hair-banner-overlay { background: rgba(20, 12, 12, 0.48); } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .hair-banner { min-height: 380px; } .hair-banner-background { background-position: center center; } .hair-banner-content { padding: 30px 16px; } .hair-banner-small-title { margin-bottom: 16px; font-size: 8px; line-height: 1.5; letter-spacing: 3.5px; } .hair-banner-content h2 { font-size: clamp(62px, 20vw, 90px); line-height: 0.95; } .hair-banner-button { margin-top: 25px; padding: 12px 28px; font-size: 13px; } .hair-banner-overlay { background: rgba(20, 12, 12, 0.52); } }

/********************************************************* PETIT MOBILE */
@media (max-width: 380px) { .hair-banner { min-height: 340px; } .hair-banner-small-title { margin-bottom: 14px; font-size: 7px; letter-spacing: 3px; } .hair-banner-content h2 { font-size: 64px; } }

/**************************************************************************** REALISATIONS **************************************************************************************************/
/********************************************************* SECTION */
.portfolio-section { width: 100%; box-sizing: border-box; padding: 60px 20px 85px; }

/********************************************************* TITRE */
.portfolio-heading { text-align: center; margin-bottom: 62px; }

.portfolio-heading h2 { margin: 0; font-size: clamp(32px, 3vw, 46px); font-weight: 400; font-style: italic; line-height: 1; letter-spacing: 1px; color: #2f2823; }

/********************************************************* GRILLE */
.portfolio-grid { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 22px; row-gap: 20px; align-items: start; }

/********************************************************* CARTES */
.portfolio-card { width: 100%; height: 465px; overflow: hidden; background: #e8dfd6; }

/********************************************************* IMAGES */
.portfolio-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/********************************************************* DÉCALAGE - RANGÉE DU HAUT */
.portfolio-card:nth-child(1) { margin-top: 0; }

.portfolio-card:nth-child(2) { margin-top: 26px; }

.portfolio-card:nth-child(3) { margin-top: 0; }

/********************************************************* DÉCALAGE - RANGÉE DU BAS */
.portfolio-card:nth-child(4) { margin-top: -22px; }

.portfolio-card:nth-child(5) { margin-top: 24px; }

.portfolio-card:nth-child(6) { margin-top: -22px; }

/********************************************************* CTA */
.portfolio-cta-wrapper { width: 100%; display: flex; justify-content: center; margin-top: 65px; }

/********************************************************* BOUTON */
.portfolio-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 210px; padding: 17px 30px; box-sizing: border-box; background: #111111; border: 1px solid #111111; color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 2px; line-height: 1; text-transform: uppercase; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/********************************************************* FLÈCHE CTA */
.portfolio-cta span { font-size: 17px; line-height: 1; transition: transform 0.3s ease; }

/********************************************************* HOVER CTA */
.portfolio-cta:hover { background: #d8b26a; border-color: #d8b26a; color: #111111; }

.portfolio-cta:hover span { transform: translateX(4px); }

/********************************************************* TABLETTE */
@media (max-width: 900px) { .portfolio-section { padding: 50px 18px 70px; } .portfolio-heading { margin-bottom: 34px; } .portfolio-grid { grid-template-columns: repeat(2, 1fr); column-gap: 18px; row-gap: 16px; } .portfolio-card { height: 430px; } .portfolio-card:nth-child(1) { margin-top: 0; } .portfolio-card:nth-child(2) { margin-top: 18px; } .portfolio-card:nth-child(3) { margin-top: -8px; } .portfolio-card:nth-child(4) { margin-top: 12px; } .portfolio-card:nth-child(5) { margin-top: -8px; } .portfolio-card:nth-child(6) { margin-top: 12px; } .portfolio-cta-wrapper { margin-top: 50px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .portfolio-section { padding: 42px 14px 58px; } .portfolio-heading { margin-bottom: 28px; } .portfolio-heading h2 { font-size: 28px; } .portfolio-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; } .portfolio-card { height: 400px; } .portfolio-card:nth-child(1), .portfolio-card:nth-child(2), .portfolio-card:nth-child(3), .portfolio-card:nth-child(4), .portfolio-card:nth-child(5), .portfolio-card:nth-child(6) { margin-top: 0; } .portfolio-cta-wrapper { margin-top: 36px; } .portfolio-cta { width: 100%; max-width: 260px; min-width: 0; padding: 16px 22px; } }

/********************************************************* PETIT MOBILE */
@media (max-width: 380px) { .portfolio-section { padding: 36px 12px 50px; } .portfolio-heading h2 { font-size: 25px; } .portfolio-card { height: 355px; } .portfolio-cta-wrapper { margin-top: 30px; } .portfolio-cta { max-width: 240px; font-size: 11px; } }

/**************************************************************************** RESEAUX *********************************************************************************************/
/********************************************************* SECTION */
.social-section { width: 100%; box-sizing: border-box; padding: 85px 45px 90px; }

/********************************************************* TITRE GLOBAL */
.social-heading { max-width: 1200px; margin: 0 auto 65px; text-align: center; }

/********************************************************* PETIT TITRE */
.social-eyebrow { display: block; margin-bottom: 16px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 5px; text-transform: uppercase; color: #d9b259; }

/********************************************************* GRAND TITRE */
.social-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); font-weight: 400 !important; font-style: italic; line-height: 1.05; letter-spacing: -1.5px; color: #000; }

/********************************************************* GRILLE */
.social-grid { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

/********************************************************* CARTE */
.social-card { position: relative; min-height: 390px; padding: 10px 55px 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }

/********************************************************* SÉPARATEURS VERTICAUX */
.social-card + .social-card { border-left: none; }

/* Traits plus courts et mieux centrés */
.social-card + .social-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(112, 94, 79, 0.28); }

/********************************************************* ICÔNE */
.social-icon { width: 145px; height: 145px; margin-bottom: 26px; display: flex; align-items: center; justify-content: center; }

/********************************************************* IMAGE ICÔNE */
.social-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/********************************************************* TITRE RÉSEAU */
.social-card h3 { margin: 0 0 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 3vw, 48px); font-weight: 400; font-style: italic; line-height: 1; letter-spacing: -1px; color: #6b5c51; }

/********************************************************* DESCRIPTION */
.social-card p { max-width: 330px; margin: 0 auto 24px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.75; color: #746960; }

/********************************************************* BOUTON */
.social-button { width: 100%; max-width: 320px; min-height: 58px; /* Le bouton reste directement sous le titre */ margin-top: 0; padding: 16px 22px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(116, 94, 76, 0.55); background: transparent; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: #897565; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }

/********************************************************* HOVER BOUTON */
.social-button:hover { background: #d7b46a; border-color: #d7b46a; color: #211b17; }

/********************************************************* PETIT DESKTOP */
@media (max-width: 1100px) { .social-section { padding: 75px 25px 80px; } .social-heading { margin-bottom: 55px; } .social-card { min-height: 365px; padding-left: 35px; padding-right: 35px; } .social-card + .social-card::before { top: 20px; bottom: 20px; } .social-icon { width: 125px; height: 125px; margin-bottom: 24px; } .social-card h3 { margin-bottom: 20px; font-size: 38px; } .social-card p { font-size: 14px; } .social-button { min-height: 54px; max-width: 290px; } }

/********************************************************* TABLETTE */
@media (max-width: 850px) { .social-section { padding: 65px 25px 70px; } .social-heading { margin-bottom: 45px; } .social-heading h2 { font-size: clamp(40px, 7vw, 58px); } /******************************************************** UNE SEULE COLONNE */ .social-grid { grid-template-columns: 1fr; } .social-card { min-height: auto; padding: 42px 20px; border-left: none; } /******************************************************** ON RETIRE LE TRAIT VERTICAL */ .social-card + .social-card::before { display: none; } /******************************************************** TRAIT HORIZONTAL */ .social-card + .social-card { border-top: 1px solid rgba(112, 94, 79, 0.25); } .social-icon { width: 130px; height: 130px; margin-bottom: 24px; } .social-card h3 { margin-bottom: 20px; font-size: 40px; } .social-card p { max-width: 450px; margin-bottom: 24px; font-size: 15px; } .social-button { margin-top: 0; max-width: 300px; } }

/********************************************************* MOBILE */
@media (max-width: 600px) { .social-section { padding: 55px 16px 60px; } /**************** EN-TÊTE ****************/ .social-heading { margin-bottom: 30px; } .social-eyebrow { margin-bottom: 13px; font-size: 9px; letter-spacing: 3.5px; } .social-heading h2 { font-size: 38px; line-height: 1.08; } /**************** CARTES ****************/ .social-card { padding: 36px 10px; } .social-icon { width: 110px; height: 110px; margin-bottom: 20px; } .social-card h3 { margin-bottom: 18px; font-size: 35px; } .social-card p { max-width: 340px; margin-bottom: 22px; font-size: 14px; line-height: 1.7; } .social-button { max-width: 280px; min-height: 52px; margin-top: 0; padding: 14px 18px; font-size: 10px; letter-spacing: 2.2px; } }

/********************************************************* PETIT MOBILE */
@media (max-width: 380px) { .social-section { padding-left: 12px; padding-right: 12px; } .social-heading h2 { font-size: 34px; } .social-card { padding: 32px 8px; } .social-icon { width: 100px; height: 100px; } .social-card h3 { margin-bottom: 16px; font-size: 32px; } .social-card p { margin-bottom: 20px; font-size: 13px; } .social-button { max-width: 260px; min-height: 50px; } }

/**************************************************************************** HORAIRES ********************************************************************************************/
/********************************************************* VARIABLES */
.hair-contact { --hair-dark: #201b17; --hair-dark-soft: #2b2520; --hair-cream: #f6f1e9; --hair-cream-light: #fcfaf6; --hair-gold: #d2aa59; --hair-gold-dark: #a78346; --hair-text: #5d544c; --hair-line: rgba(117, 94, 66, 0.16); position: relative; width: 100%; overflow: hidden; box-sizing: border-box; padding: 90px 0; }

/********************************************************* RESET LOCAL */
.hair-contact, .hair-contact *, .hair-contact *::before, .hair-contact *::after { box-sizing: border-box; }

/********************************************************* CONTENEUR PRINCIPAL */
.hair-contact-container { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 5%; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 45px; align-items: stretch; }

/********************************************************* BLOC HORAIRES */
.hair-contact-hours { min-width: 0; }

.hair-contact-hours-card { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 38px 34px; background: var(--hair-dark-soft); box-shadow: 0 22px 55px rgba(44, 34, 26, 0.13); }

/********************************************************* LOGO DÉCORATIF EN FOND */
.hair-contact-hours-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FFBujqTjkhbS8L73KtJmz2lqNAn33%2Fimages%2FLHAIR_DE_JOYE_logo_7_0pt7.webp"); background-repeat: no-repeat; /* Logo volontairement décalé vers le bord gauche. */ background-position: left -75px center; background-size: 82% auto; opacity: 0.48; pointer-events: none; user-select: none; }

/********************************************************* VOILE DU BLOC HORAIRES */
.hair-contact-hours-card::after { content: ""; position: absolute; inset: 0; z-index: 0; /* Plus transparent à gauche : on distingue mieux le logo. Plus sombre à droite : les horaires restent lisibles. */ background: linear-gradient(90deg, rgba(32, 27, 23, 0.25) 0%, rgba(32, 27, 23, 0.58) 45%, rgba(32, 27, 23, 0.9) 100%); pointer-events: none; }

/********************************************************* CONTENU AU-DESSUS DU LOGO */
.hair-contact-header, .hair-contact-schedule { position: relative; z-index: 2; }

/********************************************************* EN-TÊTES */
.hair-contact-header, .hair-contact-map-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }

/********************************************************* BLOC ICÔNE */
.hair-contact-icon-wrapper { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 50px; height: 50px; border: 1px solid rgba(210, 170, 89, 0.46); background: rgba(210, 170, 89, 0.08); color: var(--hair-gold); }

/********************************************************* ICÔNE SVG */
.hair-contact-icon { width: 24px; height: 24px; color: var(--hair-gold); }

/********************************************************* PETITS TITRES */
.hair-contact-heading > span { display: block; margin-bottom: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: var(--hair-gold); }

/********************************************************* TITRES H2 */
.hair-contact-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 2.4vw, 38px); font-weight: 400; line-height: 1.05; letter-spacing: -0.8px; }

/********************************************************* TITRE HORAIRES */
.hair-contact-hours-card .hair-contact-heading h2 { color: #ffffff; }

/********************************************************* LISTE HORAIRES */
.hair-contact-schedule { display: flex; flex-direction: column; gap: 8px; }

/********************************************************* LIGNE D'UN JOUR */
.hair-contact-day-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 54px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }

/********************************************************* HOVER LIGNE */
.hair-contact-day-row:hover { background: rgba(210, 170, 89, 0.14); border-color: rgba(210, 170, 89, 0.23); transform: translateX(3px); }

/********************************************************* JOUR ACTUEL */
.hair-contact-day-row.hair-contact-today { border-color: rgba(210, 170, 89, 0.65); background: rgba(210, 170, 89, 0.19); }

/********************************************************* NOM DU JOUR */
.hair-contact-day-name { color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; }

/********************************************************* HEURES */
.hair-contact-time { color: #e4c37c; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; text-align: right; white-space: nowrap; }

/********************************************************* FERMÉ */
.hair-contact-time.hair-contact-closed { color: rgba(255, 255, 255, 0.48); font-style: italic; font-weight: 400; }

/********************************************************* BADGE AUJOURD'HUI */
.hair-contact-today-badge { display: inline-block; margin-left: 7px; color: var(--hair-gold); font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0.3px; opacity: 0.95; }

/********************************************************* BLOC LOCALISATION */
.hair-contact-map-wrapper { min-width: 0; padding: 34px; background: var(--hair-cream-light); border: 1px solid rgba(130, 106, 73, 0.13); box-shadow: 0 22px 55px rgba(44, 34, 26, 0.08); }

/********************************************************* HEADER LOCALISATION */
.hair-contact-map-header { margin-bottom: 24px; }

.hair-contact-map-header .hair-contact-heading h2 { color: var(--hair-dark); }

/********************************************************* GOOGLE MAP */
.hair-contact-map { display: block; width: 100%; height: 405px; overflow: hidden; border: 0; /* Carte un peu plus douce pour être cohérente avec la charte du site. */ filter: saturate(0.76) contrast(0.96) sepia(0.06); }

/********************************************************* INFOS SOUS LA CARTE */
.hair-contact-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 22px; }

/********************************************************* ADRESSE */
.hair-contact-address > span { display: block; margin-bottom: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 2.5px; color: var(--hair-gold-dark); }

.hair-contact-address p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 400; line-height: 1.45; color: var(--hair-text); }

/********************************************************* BOUTON ITINÉRAIRE */
.hair-contact-route { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 46px; padding: 13px 20px; border: 1px solid rgba(167, 131, 70, 0.55); background: transparent; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 2px; text-decoration: none; color: var(--hair-gold-dark); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }

/********************************************************* FLÈCHE ITINÉRAIRE */
.hair-contact-route > span { font-size: 15px; line-height: 1; }

/********************************************************* HOVER BOUTON */
.hair-contact-route:hover { background: var(--hair-gold); border-color: var(--hair-gold); color: var(--hair-dark); }

/********************************************************* TABLETTE / PETIT DESKTOP */
@media (max-width: 1024px) { .hair-contact { padding: 75px 0; } .hair-contact-container { grid-template-columns: 1fr; gap: 35px; padding: 0 5%; } .hair-contact-map { height: 370px; } }

/********************************************************* MOBILE */
@media (max-width: 640px) { .hair-contact { padding: 55px 0; } .hair-contact-container { gap: 25px; padding: 0 16px; } /**************** BLOCS ****************/ .hair-contact-hours-card, .hair-contact-map-wrapper { padding: 25px 19px; } /**************** LOGO FOND ****************/ .hair-contact-hours-card::before { background-position: left -60px center; background-size: 110% auto; opacity: 0.42; } .hair-contact-hours-card::after { background: linear-gradient(90deg, rgba(32, 27, 23, 0.32) 0%, rgba(32, 27, 23, 0.68) 55%, rgba(32, 27, 23, 0.92) 100%); } /**************** HEADER ****************/ .hair-contact-header, .hair-contact-map-header { gap: 12px; margin-bottom: 23px; } .hair-contact-icon-wrapper { width: 43px; height: 43px; } .hair-contact-icon { width: 21px; height: 21px; } .hair-contact-heading > span { font-size: 8px; letter-spacing: 2.2px; } .hair-contact-heading h2 { font-size: 25px; } /**************** HORAIRES ****************/ .hair-contact-day-row { min-height: 51px; padding: 12px 13px; } .hair-contact-day-name, .hair-contact-time { font-size: 13px; } /**************** MAP ****************/ .hair-contact-map { height: 300px; } /**************** FOOTER MAP ****************/ .hair-contact-map-footer { align-items: flex-start; flex-direction: column; gap: 18px; } .hair-contact-route { min-height: 44px; padding: 12px 18px; } }

/********************************************************* TRÈS PETIT MOBILE */
@media (max-width: 420px) { .hair-contact-container { padding: 0 12px; } .hair-contact-hours-card, .hair-contact-map-wrapper { padding: 22px 15px; } /**************** HORAIRES ****************/ .hair-contact-day-row { flex-direction: column; align-items: flex-start; gap: 5px; } .hair-contact-time { text-align: left; } /**************** MAP ****************/ .hair-contact-map { height: 270px; } }

/**************************************************************************** HERO **************************************************************************************************/
/**************************************************************************** HERO **************************************************************************************************/
a.portfolio-cta a:visited { color: white !important; }

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