@charset "UTF-8";
@import url(main.css);
a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button { border-radius: 0px !important; }

/*----------------------------------------------------------------------------fond tally--------------------------------------------------------------------------------*/
.background-image-div-opacity { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 15%, #000000 25%, #000000 75%, rgba(0, 0, 0, 0.35) 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 15%, #000000 25%, #000000 75%, rgba(0, 0, 0, 0.35) 85%, transparent 100%); }

/* ----------------------------------------------------------------------------- CUSTOM HEADER - SKLEURENN COUVERTURE ----------------------------------------------------------------------------- */
.custom-header { position: fixed; top: 0; right: 0; left: 0; z-index: 9999; width: 100%; margin: 0; padding: 0 !important; background: transparent !important; border: none; box-shadow: none; --bs-navbar-padding-y: 0; --bs-navbar-padding-x: 0; transition: top 0.4s ease; }

/* ----------------------------------------------------------------------------- CONTENEUR PRINCIPAL ----------------------------------------------------------------------------- */
.custom-header .container-fluid { margin: 0; padding: 18px 24px; background-color: rgba(241, 92, 35, 0.9) !important; border: 1px solid rgba(42, 12, 0, 0.14); border-radius: 0; box-shadow: 0 8px 30px rgba(42, 12, 0, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: margin 0.4s ease, padding 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; }

/* ----------------------------------------------------------------------------- HEADER AU SCROLL ----------------------------------------------------------------------------- */
.custom-header.scrolled { top: 14px; }

.custom-header.scrolled .container-fluid { margin-right: 20px; margin-left: 20px; padding: 12px 24px; background-color: rgba(241, 92, 35, 0.82) !important; border: 1px solid rgba(255, 251, 245, 0.72); border-radius: 3px; box-shadow: 0 12px 35px rgba(42, 12, 0, 0.24); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ----------------------------------------------------------------------------- LOGO ----------------------------------------------------------------------------- */
.custom-header .logo_nav { display: block; width: auto; height: 72px; object-fit: contain; transition: height 0.4s ease; }

.custom-header.scrolled .logo_nav { height: 56px; }

/* ----------------------------------------------------------------------------- MARQUE ----------------------------------------------------------------------------- */
.custom-header .navbar-brand { margin-right: 20px; padding: 0; }

/* ----------------------------------------------------------------------------- NAVIGATION ----------------------------------------------------------------------------- */
.custom-header .navbar-nav { gap: 0; }

/* ----------------------------------------------------------------------------- LIENS DU MENU ----------------------------------------------------------------------------- */
.custom-header .nav-link, .custom-header .navbar-nav .nav-link { color: #FFFBF5 !important; font-family: "Source Sans 3", sans-serif !important; transition: color 0.3s ease, opacity 0.3s ease; }

.custom-header .nav-link:hover, .custom-header .navbar-nav .nav-link:hover, .custom-header .nav-link:focus, .custom-header .navbar-nav .nav-link:focus, .custom-header .nav-link.active, .custom-header .navbar-nav .nav-link.active { color: #FFFBF5 !important; }

/* ----------------------------------------------------------------------------- BOUTONS ANIMÉS DU MENU ----------------------------------------------------------------------------- */
.custom-header .animated-border-button { color: #FFFBF5 !important; background-color: transparent !important; cursor: pointer; transition: color 0.3s ease, opacity 0.3s ease; }

.custom-header .animated-border-button span { color: #FFFBF5 !important; font-family: "Source Sans 3", sans-serif !important; transition: color 0.3s ease, opacity 0.3s ease; }

.custom-header .animated-border-button:hover, .custom-header .animated-border-button:focus, .custom-header .animated-border-button:active, .custom-header .animated-border-button:hover span, .custom-header .animated-border-button:focus span, .custom-header .animated-border-button:active span { color: #FFFBF5 !important; }

/* ----------------------------------------------------------------------------- SURLIGNEMENT ----------------------------------------------------------------------------- */
.custom-header .animated-border-button::after { background-color: #FFFBF5 !important; }

/* ----------------------------------------------------------------------------- BURGER ----------------------------------------------------------------------------- */
.custom-header .navbar-toggler { padding: 8px 10px; color: #FFFBF5 !important; background-color: transparent !important; border: 1px solid rgba(255, 251, 245, 0.65); border-radius: 3px; box-shadow: none !important; transition: border-color 0.3s ease, background-color 0.3s ease; }

.custom-header .navbar-toggler:hover, .custom-header .navbar-toggler:focus, .custom-header .navbar-toggler:active { color: #FFFBF5 !important; background-color: rgba(255, 251, 245, 0.14) !important; border-color: #FFFBF5; box-shadow: none !important; }

/* ----------------------------------------------------------------------------- ICÔNE BURGER ----------------------------------------------------------------------------- */
.custom-header .navbar-toggler-icon { filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(267%) hue-rotate(322deg) brightness(103%) contrast(101%); }

/* ============================================================================= TABLETTE ET MOBILE ============================================================================= */
@media (max-width: 991px) { .custom-header .container-fluid { padding: 12px 14px; background-color: rgba(241, 92, 35, 0.94) !important; border: 1px solid rgba(42, 12, 0, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .custom-header.scrolled { top: 8px; } .custom-header.scrolled .container-fluid { margin-right: 10px; margin-left: 10px; padding: 10px 14px; background-color: rgba(241, 92, 35, 0.96) !important; border: 1px solid rgba(255, 251, 245, 0.7); border-radius: 3px; box-shadow: 0 10px 28px rgba(42, 12, 0, 0.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .custom-header .logo_nav, .custom-header.scrolled .logo_nav { height: 52px; } .custom-header .navbar-brand { margin-right: 0; } /* --------------------------------------------------------------------------- MENU DÉROULANT MOBILE --------------------------------------------------------------------------- */ .custom-header .navbar-collapse { margin-top: 12px; padding: 18px; background-color: rgba(241, 92, 35, 0.98) !important; border: 1px solid rgba(255, 251, 245, 0.62); border-radius: 3px; box-shadow: 0 14px 32px rgba(42, 12, 0, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .custom-header .navbar-nav { width: 100%; } .custom-header .custom-nav-list { width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; } /* --------------------------------------------------------------------------- LIENS MOBILE --------------------------------------------------------------------------- */ .custom-header .nav-link, .custom-header .navbar-nav .nav-link, .custom-header .animated-border-button, .custom-header .animated-border-button span { color: #FFFBF5 !important; } .custom-header .nav-link:hover, .custom-header .navbar-nav .nav-link:hover, .custom-header .nav-link:focus, .custom-header .navbar-nav .nav-link:focus, .custom-header .nav-link.active, .custom-header .navbar-nav .nav-link.active, .custom-header .animated-border-button:hover, .custom-header .animated-border-button:focus, .custom-header .animated-border-button:active, .custom-header .animated-border-button:hover span, .custom-header .animated-border-button:focus span, .custom-header .animated-border-button:active span { color: #FFFBF5 !important; } .custom-header .animated-border-button::after { background-color: #FFFBF5 !important; } .custom-header .custom-header-phone-wrap { display: flex; justify-content: center; width: 100%; margin-top: 10px; } }

/* ============================================================================= PETIT MOBILE ============================================================================= */
@media (max-width: 575px) { .custom-header .container-fluid { padding: 10px 12px; background-color: rgba(241, 92, 35, 0.95) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .custom-header.scrolled .container-fluid { margin-right: 8px; margin-left: 8px; padding: 10px 12px; background-color: rgba(241, 92, 35, 0.97) !important; border: 1px solid rgba(255, 251, 245, 0.7); border-radius: 3px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .custom-header .logo_nav, .custom-header.scrolled .logo_nav { height: 46px; } .custom-header .navbar-collapse { margin-top: 10px; padding: 14px; background-color: rgba(241, 92, 35, 0.99) !important; border: 1px solid rgba(255, 251, 245, 0.65); border-radius: 3px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .custom-header .nav-link, .custom-header .navbar-nav .nav-link, .custom-header .animated-border-button, .custom-header .animated-border-button span { color: #FFFBF5 !important; } .custom-header .nav-link:hover, .custom-header .navbar-nav .nav-link:hover, .custom-header .nav-link:focus, .custom-header .navbar-nav .nav-link:focus, .custom-header .nav-link.active, .custom-header .navbar-nav .nav-link.active, .custom-header .animated-border-button:hover, .custom-header .animated-border-button:focus, .custom-header .animated-border-button:active, .custom-header .animated-border-button:hover span, .custom-header .animated-border-button:focus span, .custom-header .animated-border-button:active span { color: #FFFBF5 !important; } .custom-header .animated-border-button::after { background-color: #FFFBF5 !important; } }

/*-------------------------------------------------------------------------image fixe formulaire-----------------------------------------------------------------------------*/
.background-image-div-opacity { background-attachment: scroll; }

/*-----------------------------------------------------------------------padding bloc avant/après---------------------------------------------------------------------------*/
.photoTitleText.text-color-sixth { padding: 3%; }

/*-----------------------------------------------------------------------space page secondaire-----------------------------------------------------------------------------*/
.spacer { display: none; }

/*------------------------------------------------------------------------formulaire de contact------------------------------------------------------------------------------*/
form#formContact { font-family: "Source Sans 3", sans-serif !important; }

/*------------------------------------------------------------------------augmentation header------------------------------------------------------------------------------*/
.navbar-brand { height: 10vh !important; width: 14vw !important; }

.logo_nav { height: 10vh !important; }

/*--------------------------------------------------------------------enlever recherche fréquente---------------------------------------------------------------------------*/
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { display: none !important; }

/*----------------------------------------------------------------------------Bloc maps-------------------------------------------------------------------------------------*/
.maps-section .content { color: #2A0C00 !important; font-family: "Urbanist", sans-serif !important; }

.maps-section .map-content { padding: 50px; }

.maps-section iframe { border-radius: 0px !important; }

.item-content.mx-5 { color: #2A0C00 !important; font-family: "Urbanist", sans-serif !important; }

/*-----------------------------------------------------------------------ancre bloc qui suis-je-------------------------------------------------------------------------------*/
#decouvrir { scroll-margin-top: 90px; }

/*---------------------------------------------------------------------ancre bloc presta accueil------------------------------------------------------------------------------*/
#presta { scroll-margin-top: 60px; }

/*---------------------------------------------------------------------ancre bloc real accueil------------------------------------------------------------------------------*/
#realisation { scroll-margin-top: 90px; }

/*---------------------------------------------------------------------ancre bloc cta accueil------------------------------------------------------------------------------*/
#contact { scroll-margin-top: 90px; }

/*----------------------------------------------------------------------------texte footer------------------------------------------------------------------------------------*/
footer, footer p, footer a, footer li, footer ul, footer i { color: #FFFAF8 !important; font-family: "Source Sans 3", sans-serif !important; font-size: 1rem; }

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: #FFFAF8 !important; font-family: "Urbanist", sans-serif !important; font-weight: 700 !important; }

footer h5 { font-size: 1.25rem; }

.text-color-third { color: #FFFAF8 !important; font-family: "Source Sans 3", sans-serif !important; font-size: 1rem; text-align: left; hyphens: auto; }

/* ------------------------------------------------------------------------------ombre---------------------------------------------------------------------------------------*/
div.shadow-lg { box-shadow: none !important; }

/*-----------------------------------------------------------------------surlignement header--------------------------------------------------------------------------------*/
.animated-border-button:after { background-color: #FFFAF8 !important; }

.animated-border-button span { font-family: "Urbanist", sans-serif !important; transition: color 0.3s ease; }

.animated-border-button:hover span { color: #FFFAF8 !important; }

/*--------------------------------------------------------------------------Bouton header-----------------------------------------------------------------------------------*/
.button-header-telephone { position: relative; display: inline-block; margin: 15px; padding: 8px 15px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #FFFAF8 !important; background: transparent; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFAF8; box-shadow: inset 0 0 0 0 #FFFAF8; }

.button-header-telephone:hover { color: #F15C23 !important; box-shadow: inset 0 -100px 0 0 #FFFAF8 !important; border-color: #FFFAF8 !important; transform: scale(0.95) !important; }

.button-header-telephone:active { transform: scale(0.9); }

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: 3px !important; }

/*---------------------------------------------------------------------Bouton first impression-------------------------------------------------------------------------------*/
.button_homepageFirstScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #FFFAF8 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFAF8 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #FFFAF8; }

.button_homepageFirstScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_homepageFirstScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton simple-----------------------------------------------------------------------------------*/
.button_homepageDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #2A0C00 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #2A0C00 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #2A0C00; }

.button_homepageDoubleScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_homepageDoubleScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton cta-----------------------------------------------------------------------------------*/
.button_ctaDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #FFFAF8 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFAF8 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #FFFAF8; }

.button_ctaDoubleScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_ctaDoubleScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton presta-----------------------------------------------------------------------------------*/
.button_prestaDoubleScreen { position: relative; display: inline-block; padding: 10px 20px; text-align: center; font-weight: 700 !important; font-size: 16px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #FFFAF8 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFAF8 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #FFFAF8; }

.button_prestaDoubleScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_prestaDoubleScreen:active { transform: scale(0.9); }

/*-------------------------------------------------------------------------Bouton en-tête-----------------------------------------------------------------------------------*/
.button_secondepageDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #2A0C00 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #2A0C00 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #2A0C00; }

.button_secondepageDoubleScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_secondepageDoubleScreen:active { transform: scale(0.9); }

/*----------------------------------------------------------------------------Bouton seo------------------------------------------------------------------------------------*/
.all-activities-button { position: relative; display: inline-block; margin: 15px; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #2A0C00 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #2A0C00 !important; border-radius: 3px; box-shadow: inset 0 0 0 0 #2A0C00; }

.all-activities-button:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.all-activities-button:active { transform: scale(0.9); }

/*----------------------------------------------------------------------------bloc seo------------------------------------------------------------------------------------*/
.first-activity-div, .second-activity-div, .third-activity-div { border: #F15C23; }

.fs-6 { font-family: "Source Sans 3", sans-serif !important; font-weight: 400 !important; }

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

/*----------------------------------------------------------------------------Bouton avis------------------------------------------------------------------------------------*/
.button_homepageScreen { position: relative; display: inline-block; margin: 15px; padding: 12px 16px !important; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: "Source Sans 3", sans-serif !important; letter-spacing: 1px; text-decoration: none; color: #2A0C00 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #2A0C00 !important; border-radius: 3px !important; box-shadow: inset 0 0 0 0 #2A0C00; }

.button_homepageScreen:hover { color: #FFFAF8 !important; box-shadow: inset 0 -100px 0 0 #F15C23 !important; border-color: #F15C23 !important; transform: scale(0.95) !important; }

.button_homepageScreen:active { transform: scale(0.9); }

/* ----------------------------------------------------------------------Flèche retour en haut------------------------------------------------------------------------------- */
#back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 9999; min-width: 48px; min-height: 48px; padding: 14px 18px; color: #FFFAF8 !important; background-color: #2A0C00; border: 2px solid #FFFAF8; border-radius: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); font-family: "Source Sans 3", sans-serif !important; font-size: 20px; font-weight: 700 !important; line-height: 1; text-align: center; text-decoration: none; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; }

/* Visible après le défilement */
#back-to-top.show { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Effet au survol */
#back-to-top:hover { color: #FFFAF8 !important; background-color: #F15C23; border: 2px solid #FFFAF8; transform: translateY(-3px); }

/* Défilement fluide global */
html { scroll-behavior: smooth; }

/* ============================================================================= HERO - SKLEURENN COUVERTURE ============================================================================= */
.first-skleurenn { position: relative; display: flex; align-items: center; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; background-color: #2A0C00; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* ----------------------------------------------------------------------------- OVERLAY PRINCIPAL ----------------------------------------------------------------------------- */
.first-skleurenn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(42, 12, 0, 0.97) 0%, rgba(42, 12, 0, 0.91) 36%, rgba(42, 12, 0, 0.66) 64%, rgba(42, 12, 0, 0.2) 100%); }

/* ----------------------------------------------------------------------------- HALO ORANGE ----------------------------------------------------------------------------- */
.first-skleurenn::before { content: ""; position: absolute; right: -170px; bottom: -280px; z-index: 2; width: 650px; height: 650px; background-color: rgba(241, 92, 35, 0.28); border-radius: 50%; filter: blur(100px); pointer-events: none; }

/* ============================================================================= CONTENEUR ============================================================================= */
.first-skleurenn-container { position: relative; z-index: 3; width: 90%; max-width: 1220px; margin: 0 auto; }

/* ============================================================================= CONTENU ============================================================================= */
.first-skleurenn-text { max-width: 820px; color: #FFFAF8; text-shadow: 0 3px 22px rgba(42, 12, 0, 0.32); }

/* ============================================================================= SURTITRE ============================================================================= */
.first-skleurenn-tagline { position: relative; display: inline-block; padding-left: 54px; color: #FFFAF8; font-family: "Source Sans 3", sans-serif; font-size: 14px; font-weight: 700 !important; line-height: 1.5; letter-spacing: 2.5px; text-transform: uppercase; }

.first-skleurenn-tagline::before { content: ""; position: absolute; top: 50%; left: 0; width: 38px; height: 3px; background-color: #F15C23; transform: translateY(-50%); }

/* ============================================================================= TITRE ============================================================================= */
.first-skleurenn-text h1 { margin: 20px 0 24px; color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 78px; font-weight: 750 !important; line-height: 0.98; letter-spacing: -1.5px; text-transform: uppercase; }

.first-skleurenn-text h1::after { content: ""; display: block; width: 82px; height: 5px; margin-top: 25px; background-color: #F15C23; }

/* ============================================================================= TEXTE ============================================================================= */
.first-skleurenn-text p { max-width: 690px; margin: 0 0 36px; color: rgba(255, 250, 248, 0.9); font-family: "Source Sans 3", sans-serif; font-size: 19px; font-weight: 400 !important; line-height: 1.7; }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 900px) { .first-skleurenn { height: auto; min-height: 700px; background-position: center; text-align: center; } .first-skleurenn::after { background: linear-gradient(180deg, rgba(42, 12, 0, 0.58) 0%, rgba(42, 12, 0, 0.84) 52%, rgba(42, 12, 0, 0.97) 100%); } .first-skleurenn::before { right: -260px; bottom: -280px; width: 580px; height: 580px; background-color: rgba(241, 92, 35, 0.25); } .first-skleurenn-container { width: 88%; padding: 145px 0 95px; } .first-skleurenn-text { margin: 0 auto; } .first-skleurenn-tagline { padding-top: 20px; padding-left: 0; font-size: 13px; } .first-skleurenn-tagline::before { top: 0; left: 50%; width: 40px; transform: translateX(-50%); } .first-skleurenn-text h1 { margin-top: 22px; font-size: 58px; line-height: 1; letter-spacing: -0.5px; } .first-skleurenn-text h1::after { width: 68px; margin-right: auto; margin-left: auto; } .first-skleurenn-text p { margin-right: auto; margin-left: auto; font-size: 17px; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 576px) { .first-skleurenn { min-height: 660px; background-position: center; } .first-skleurenn-container { width: 90%; padding: 125px 0 75px; } .first-skleurenn-tagline { font-size: 11px; letter-spacing: 1.7px; } .first-skleurenn-text h1 { margin-bottom: 20px; font-size: 43px; line-height: 1.03; letter-spacing: -0.5px; } .first-skleurenn-text h1::after { width: 55px; height: 4px; margin-top: 19px; } .first-skleurenn-text p { margin-bottom: 30px; font-size: 16px; line-height: 1.65; } .first-skleurenn .button_homepageFirstScreen { width: 100%; max-width: 300px; min-height: 54px; padding: 0 20px; font-size: 15px; } }

/* ============================================================================= À PROPOS - SKLEURENN COUVERTURE ============================================================================= */
.qsj-skleurenn-section, .qsj-skleurenn-section *, .qsj-skleurenn-section *::before, .qsj-skleurenn-section *::after { box-sizing: border-box; }

.qsj-skleurenn-section { position: relative; overflow: hidden; padding: 110px 24px; background-color: #FFFAF8; font-family: "Source Sans 3", sans-serif; }

/* ============================================================================= DÉCORATIONS DE FOND ============================================================================= */
.qsj-skleurenn-section::before { content: ""; position: absolute; top: -230px; right: -180px; width: 480px; height: 480px; background-color: rgba(241, 92, 35, 0.08); border-radius: 50%; pointer-events: none; }

.qsj-skleurenn-section::after { content: ""; position: absolute; bottom: -280px; left: -210px; width: 520px; height: 520px; background-color: rgba(42, 12, 0, 0.045); border-radius: 50%; pointer-events: none; }

/* ============================================================================= CONTENEUR ============================================================================= */
.qsj-skleurenn-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 0.92fr 1fr; align-items: center; gap: 82px; max-width: 1220px; margin: 0 auto; }

/* ============================================================================= IMAGE ============================================================================= */
.qsj-skleurenn-media { position: relative; padding: 0 0 28px 28px; }

/* Fond orange derrière la photo */
.qsj-skleurenn-media-decor { position: absolute; bottom: 0; left: 0; width: 74%; height: 80%; background-color: #F15C23; border-radius: 3px; }

/* Détail brun */
.qsj-skleurenn-media-decor::before { content: ""; position: absolute; top: -18px; left: 22px; width: 74px; height: 3px; background-color: #2A0C00; }

/* Cadre */
.qsj-skleurenn-media-frame { position: relative; z-index: 1; overflow: hidden; background-color: #2A0C00; border-radius: 3px; box-shadow: 0 28px 60px rgba(42, 12, 0, 0.18); }

/* Accent supérieur */
.qsj-skleurenn-media-frame::before { content: ""; position: absolute; top: 0; left: 0; z-index: 3; width: 100px; height: 4px; background-color: #F15C23; }

/* Overlay photo */
.qsj-skleurenn-media-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 50%, rgba(42, 12, 0, 0.28) 100%); pointer-events: none; }

.qsj-skleurenn-media-frame img { display: block; width: 100%; height: 500px; object-fit: cover; }

/* ============================================================================= BADGE ============================================================================= */
.qsj-skleurenn-media-badge { position: absolute; right: -28px; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 14px; max-width: 300px; padding: 17px 20px; background-color: rgba(42, 12, 0, 0.97); border: 1px solid rgba(241, 92, 35, 0.45); border-radius: 3px; box-shadow: 0 16px 38px rgba(42, 12, 0, 0.25); }

/* Icône */
.qsj-skleurenn-media-badge-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; color: #F15C23; background-color: rgba(241, 92, 35, 0.1); border: 1px solid rgba(241, 92, 35, 0.35); border-radius: 3px; }

.qsj-skleurenn-media-badge-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Texte badge */
.qsj-skleurenn-media-badge-text strong { display: block; margin-bottom: 2px; color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 16px; font-weight: 700 !important; line-height: 1.25; }

.qsj-skleurenn-media-badge-text span { display: block; color: rgba(255, 250, 248, 0.68); font-family: "Source Sans 3", sans-serif; font-size: 12.5px; line-height: 1.4; }

/* ============================================================================= CONTENU ============================================================================= */
.qsj-skleurenn-content { padding-left: 5px; }

/* ============================================================================= PILL ============================================================================= */
.qsj-skleurenn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 22px; padding: 7px 15px; color: #F15C23; background-color: rgba(241, 92, 35, 0.07); border: 1px solid rgba(241, 92, 35, 0.25); border-radius: 3px; font-family: "Source Sans 3", sans-serif; font-size: 12.5px; font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase; }

.qsj-skleurenn-pill-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; background-color: #F15C23; border-radius: 50%; }

/* ============================================================================= TITRE ============================================================================= */
.qsj-skleurenn-title { max-width: 630px; margin: 0 0 24px; color: #2A0C00; font-family: "Urbanist", sans-serif; font-size: 44px; font-weight: 700 !important; line-height: 1.12; letter-spacing: -0.6px; }

.qsj-skleurenn-title span { color: #F15C23; }

/* ============================================================================= SOUS-TITRE ============================================================================= */
.qsj-skleurenn-name { position: relative; margin: 0 0 21px; padding-left: 17px; color: #2A0C00; font-family: "Urbanist", sans-serif; font-size: 18px; font-weight: 700 !important; line-height: 1.4; }

.qsj-skleurenn-name::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 3px; background-color: #F15C23; }

/* ============================================================================= TEXTE ============================================================================= */
.qsj-skleurenn-text { max-width: 650px; color: rgba(42, 12, 0, 0.72); font-family: "Source Sans 3", sans-serif; font-size: 15.5px; line-height: 1.8; }

.qsj-skleurenn-text p { margin: 0 0 17px; }

.qsj-skleurenn-text p:last-child { margin-bottom: 0; }

/* ============================================================================= TAGS ============================================================================= */
.qsj-skleurenn-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }

.qsj-skleurenn-tag { display: inline-flex; align-items: center; padding: 9px 14px; color: #2A0C00; background-color: rgba(241, 92, 35, 0.035); border: 1px solid rgba(241, 92, 35, 0.3); border-radius: 3px; font-family: "Source Sans 3", sans-serif; font-size: 12.5px; font-weight: 700 !important; letter-spacing: 0.2px; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }

.qsj-skleurenn-tag::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-right: 8px; background-color: #F15C23; border-radius: 50%; transition: background-color 0.25s ease; }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 900px) { .qsj-skleurenn-section { padding: 85px 24px; } .qsj-skleurenn-wrap { grid-template-columns: 1fr; gap: 65px; } .qsj-skleurenn-media { width: 100%; max-width: 650px; margin: 0 auto; padding-left: 22px; } .qsj-skleurenn-media-frame img { height: 430px; } .qsj-skleurenn-media-badge { right: 15px; } .qsj-skleurenn-content { padding-left: 0; } .qsj-skleurenn-title { max-width: 650px; font-size: 37px; } .qsj-skleurenn-text { max-width: none; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 600px) { .qsj-skleurenn-section { padding: 70px 18px; } .qsj-skleurenn-wrap { gap: 46px; } .qsj-skleurenn-media { padding: 0 0 16px 16px; } .qsj-skleurenn-media-decor { width: 72%; height: 75%; } .qsj-skleurenn-media-frame img { height: 340px; } .qsj-skleurenn-media-badge { right: 8px; max-width: 250px; padding: 13px 15px; } .qsj-skleurenn-media-badge-icon { width: 39px; height: 39px; } .qsj-skleurenn-media-badge-icon svg { width: 21px; height: 21px; } .qsj-skleurenn-media-badge-text strong { font-size: 14px; } .qsj-skleurenn-media-badge-text span { font-size: 11px; } .qsj-skleurenn-pill { margin-bottom: 18px; padding: 6px 11px; font-size: 11px; letter-spacing: 1px; } .qsj-skleurenn-title { margin-bottom: 20px; font-size: 31px; line-height: 1.17; } .qsj-skleurenn-name { font-size: 17px; } .qsj-skleurenn-text { font-size: 15px; line-height: 1.72; } .qsj-skleurenn-tags { gap: 7px; margin-top: 25px; } .qsj-skleurenn-tag { padding: 8px 11px; font-size: 12px; } }

/* ============================================================================= PETIT MOBILE ============================================================================= */
@media (max-width: 420px) { .qsj-skleurenn-section { padding: 60px 16px; } .qsj-skleurenn-media-frame img { height: 290px; } .qsj-skleurenn-media-badge { position: relative; right: auto; bottom: auto; width: calc(100% - 16px); max-width: none; margin: -18px 0 0 16px; } .qsj-skleurenn-title { font-size: 28px; } }

/* ============================================================================= ÉTAPES - SKLEURENN COUVERTURE ============================================================================= */
.etape-skleurenn, .etape-skleurenn *, .etape-skleurenn *::before, .etape-skleurenn *::after { box-sizing: border-box; }

.etape-skleurenn { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 90px 40px; background-color: #FFFAF8; font-family: "Source Sans 3", sans-serif; text-align: center; }

/* ============================================================================= HEADER ============================================================================= */
.etape-skleurenn-header { max-width: 760px; margin: 0 auto 48px; }

/* ============================================================================= BADGE ============================================================================= */
.etape-skleurenn-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; padding: 7px 15px; color: #F15C23; background-color: rgba(241, 92, 35, 0.07); border: 1px solid rgba(241, 92, 35, 0.24); border-radius: 3px; font-family: "Source Sans 3", sans-serif; font-size: 12.5px; font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase; }

.etape-skleurenn-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; background-color: #F15C23; border-radius: 50%; }

/* ============================================================================= TITRE ============================================================================= */
.etape-skleurenn-title { margin: 0 0 16px; color: #2A0C00; font-family: "Urbanist", sans-serif; font-size: 44px; font-weight: 700 !important; line-height: 1.14; letter-spacing: -0.4px; }

.etape-skleurenn-title span { color: #F15C23; }

/* ============================================================================= INTRODUCTION ============================================================================= */
.etape-skleurenn-intro { max-width: 650px; margin: 0 auto; color: rgba(42, 12, 0, 0.66); font-family: "Source Sans 3", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 1.7; }

/* ============================================================================= GRILLE ============================================================================= */
.etape-skleurenn-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }

/* ============================================================================= CARTES ============================================================================= */
.etape-skleurenn-card { position: relative; overflow: hidden; min-height: 300px; padding: 32px 28px 30px; background-color: #FFFFFF; border: 1px solid rgba(42, 12, 0, 0.11); border-radius: 3px; box-shadow: 0 18px 38px -30px rgba(42, 12, 0, 0.42); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }

/* Accent supérieur */
.etape-skleurenn-card::before { content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 3px; background-color: rgba(241, 92, 35, 0.45); transition: width 0.35s ease, background-color 0.35s ease; }

/* Halo */
.etape-skleurenn-card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 170px; height: 170px; background-color: rgba(241, 92, 35, 0.045); border-radius: 50%; pointer-events: none; transition: background-color 0.35s ease, transform 0.4s ease; }

/* ============================================================================= PARTIE HAUTE ============================================================================= */
.etape-skleurenn-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }

/* ============================================================================= NUMÉRO ============================================================================= */
.etape-skleurenn-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; color: #2A0C00; background-color: rgba(241, 92, 35, 0.13); border: 1px solid rgba(241, 92, 35, 0.45); border-radius: 3px; font-family: "Urbanist", sans-serif; font-size: 17px; font-weight: 700 !important; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

/* Trait */
.etape-skleurenn-line { display: block; width: 38px; height: 1px; background-color: rgba(241, 92, 35, 0.5); transition: width 0.3s ease, background-color 0.3s ease; }

/* ============================================================================= TITRE CARTE ============================================================================= */
.etape-skleurenn-card-title { position: relative; z-index: 2; margin: 0 0 13px; color: #2A0C00; font-family: "Urbanist", sans-serif; font-size: 21px; font-weight: 700 !important; line-height: 1.3; transition: color 0.3s ease; }

/* ============================================================================= TEXTE CARTE ============================================================================= */
.etape-skleurenn-card-text { position: relative; z-index: 2; margin: 0; color: rgba(42, 12, 0, 0.68); font-family: "Source Sans 3", sans-serif; font-size: 15px; font-weight: 400 !important; line-height: 1.7; }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 991px) { .etape-skleurenn { padding: 70px 24px; } .etape-skleurenn-header { margin-bottom: 38px; } .etape-skleurenn-title { font-size: 36px; } .etape-skleurenn-grid { grid-template-columns: 1fr; gap: 14px; } .etape-skleurenn-card { min-height: auto; padding: 28px 25px; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 576px) { .etape-skleurenn { padding: 55px 16px; } .etape-skleurenn-header { margin-bottom: 30px; } .etape-skleurenn-badge { margin-bottom: 17px; padding: 6px 11px; font-size: 11px; letter-spacing: 1px; } .etape-skleurenn-dot { width: 6px; height: 6px; } .etape-skleurenn-title { margin-bottom: 13px; font-size: 29px; line-height: 1.2; } .etape-skleurenn-intro { font-size: 14.5px; line-height: 1.65; } .etape-skleurenn-grid { gap: 12px; } .etape-skleurenn-card { padding: 24px 20px; } .etape-skleurenn-top { margin-bottom: 20px; } .etape-skleurenn-num { width: 46px; height: 46px; font-size: 15px; } .etape-skleurenn-line { width: 30px; } .etape-skleurenn-card-title { font-size: 19px; } .etape-skleurenn-card-text { font-size: 14px; line-height: 1.65; } }

/* ============================================================================= PRESTATIONS - SKLEURENN COUVERTURE ============================================================================= */
.presto-skleurenn, .presto-skleurenn *, .presto-skleurenn *::before, .presto-skleurenn *::after { box-sizing: border-box; }

/* ============================================================================= SECTION ============================================================================= */
.presto-skleurenn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; padding: 95px 24px 85px; overflow: hidden; font-family: "Source Sans 3", sans-serif; }

/* ============================================================================= IMAGE DE FOND ============================================================================= */
.presto-skleurenn-bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.025); }

/* ============================================================================= OVERLAY ============================================================================= */
.presto-skleurenn-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(42, 12, 0, 0.98) 0%, rgba(42, 12, 0, 0.95) 48%, rgba(84, 29, 8, 0.92) 100%); }

/* Halo orange */
.presto-skleurenn::before { content: ""; position: absolute; right: -220px; bottom: -280px; z-index: 2; width: 650px; height: 650px; background-color: rgba(241, 92, 35, 0.18); border-radius: 50%; filter: blur(95px); pointer-events: none; }

/* Halo clair */
.presto-skleurenn::after { content: ""; position: absolute; top: -280px; left: -220px; z-index: 2; width: 520px; height: 520px; background-color: rgba(255, 250, 248, 0.055); border-radius: 50%; filter: blur(90px); pointer-events: none; }

/* ============================================================================= CONTENU ============================================================================= */
.presto-skleurenn-content { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 0 auto; text-align: center; }

/* ============================================================================= SURTITRE ============================================================================= */
.presto-skleurenn-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 20px; padding: 7px 15px; color: #FFFAF8; background-color: rgba(255, 250, 248, 0.055); border: 1px solid rgba(241, 92, 35, 0.48); border-radius: 3px; font-family: "Source Sans 3", sans-serif; font-size: 12.5px; font-weight: 700 !important; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; }

.presto-skleurenn-eyebrow-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; background-color: #F15C23; border-radius: 50%; }

/* ============================================================================= TITRE ============================================================================= */
.presto-skleurenn-title { max-width: 850px; margin: 0 auto 18px; color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 48px; font-weight: 700 !important; line-height: 1.14; letter-spacing: -0.5px; }

.presto-skleurenn-title span { display: block; color: #F15C23; }

/* ============================================================================= INTRODUCTION ============================================================================= */
.presto-skleurenn-subtitle { max-width: 760px; margin: 0 auto 50px; color: rgba(255, 250, 248, 0.74); font-family: "Source Sans 3", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 1.7; }

/* ============================================================================= GRILLE ============================================================================= */
.presto-skleurenn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 1180px; margin: 0 auto; }

/* ============================================================================= CARTES ============================================================================= */
.presto-skleurenn-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 345px; padding: 32px 27px 26px; overflow: hidden; color: #FFFAF8; background-color: rgba(255, 250, 248, 0.06); border: 1px solid rgba(255, 250, 248, 0.14); border-radius: 3px; box-shadow: 0 18px 45px rgba(20, 4, 0, 0.18); text-align: center; text-decoration: none; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }

/* Ligne supérieure */
.presto-skleurenn-card::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 3px; background-color: #F15C23; transition: width 0.35s ease, background-color 0.35s ease; }

/* Halo carte */
.presto-skleurenn-card::after { content: ""; position: absolute; right: -80px; bottom: -100px; width: 190px; height: 190px; background-color: rgba(241, 92, 35, 0.06); border-radius: 50%; pointer-events: none; transition: background-color 0.35s ease, transform 0.4s ease; }

/* ============================================================================= HOVER CARTE ============================================================================= */
.presto-skleurenn-card:hover { color: #FFFAF8; background-color: rgba(241, 92, 35, 0.2); border-color: rgba(241, 92, 35, 0.95); box-shadow: 0 24px 52px rgba(20, 4, 0, 0.3); text-decoration: none; transform: translateY(-6px); }

.presto-skleurenn-card:hover::before { width: 100%; background-color: #F15C23; }

.presto-skleurenn-card:hover::after { background-color: rgba(241, 92, 35, 0.16); transform: scale(1.2); }

.presto-skleurenn-card:focus-visible { outline: 3px solid #F15C23; outline-offset: 4px; }

.presto-skleurenn-card:active { transform: translateY(-2px); }

/* ============================================================================= ICÔNE ============================================================================= */
.presto-skleurenn-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 58px; height: 58px; margin-bottom: 10px; color: #F15C23; background-color: rgba(241, 92, 35, 0.1); border: 1px solid rgba(241, 92, 35, 0.38); border-radius: 3px; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.presto-skleurenn-icon svg { width: 27px; height: 27px; }

/* Hover icône */
.presto-skleurenn-card:hover .presto-skleurenn-icon { color: #2A0C00; background-color: #F15C23; border-color: #F15C23; transform: translateY(-3px); }

/* ============================================================================= TITRE CARTE ============================================================================= */
.presto-skleurenn-card-title { position: relative; z-index: 2; margin: 11px 0 12px; color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 22px; font-weight: 700 !important; line-height: 1.25; }

/* ============================================================================= DESCRIPTION ============================================================================= */
.presto-skleurenn-card-desc { position: relative; z-index: 2; margin: 0; color: rgba(255, 250, 248, 0.7); font-family: "Source Sans 3", sans-serif; font-size: 15px; font-weight: 400 !important; line-height: 1.65; transition: color 0.3s ease; }

.presto-skleurenn-card:hover .presto-skleurenn-card-desc { color: rgba(255, 250, 248, 0.9); }

/* ============================================================================= LIEN / FLÈCHE BAS ============================================================================= */
.presto-skleurenn-card-link { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: auto; padding-top: 24px; color: #F15C23; font-family: "Source Sans 3", sans-serif; font-size: 13.5px; font-weight: 800 !important; letter-spacing: 0.2px; transition: color 0.3s ease, gap 0.3s ease; }

.presto-skleurenn-card-link svg { width: 18px; height: 18px; transition: transform 0.3s ease; }

.presto-skleurenn-card:hover .presto-skleurenn-card-link { color: #FFFAF8; }

.presto-skleurenn-card:hover .presto-skleurenn-card-link svg { transform: translateY(5px); }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 991px) { .presto-skleurenn { min-height: auto; padding: 75px 24px; } .presto-skleurenn-title { font-size: 39px; } .presto-skleurenn-subtitle { margin-bottom: 42px; } .presto-skleurenn-grid { grid-template-columns: repeat(2, 1fr); max-width: 780px; gap: 18px; } .presto-skleurenn-card { min-height: 330px; } .presto-skleurenn-card:hover { transform: none; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 650px) { .presto-skleurenn { padding: 62px 16px; } .presto-skleurenn-overlay { background: linear-gradient(180deg, rgba(42, 12, 0, 0.98) 0%, rgba(42, 12, 0, 0.96) 62%, rgba(73, 24, 6, 0.95) 100%); } .presto-skleurenn-eyebrow { margin-bottom: 17px; padding: 6px 11px; font-size: 11px; letter-spacing: 1px; } .presto-skleurenn-eyebrow-dot { width: 6px; height: 6px; } .presto-skleurenn-title { font-size: 31px; line-height: 1.18; } .presto-skleurenn-subtitle { margin-bottom: 34px; font-size: 15px; } .presto-skleurenn-grid { grid-template-columns: 1fr; max-width: 100%; gap: 14px; } .presto-skleurenn-card { width: 100%; min-height: 300px; padding: 28px 22px 24px; } .presto-skleurenn-card-title { font-size: 21px; } .presto-skleurenn-card-link { padding-top: 22px; } }

/* ============================================================================= PETIT MOBILE ============================================================================= */
@media (max-width: 480px) { .presto-skleurenn { padding: 55px 14px; } .presto-skleurenn-title { font-size: 28px; } .presto-skleurenn-subtitle { font-size: 14px; line-height: 1.65; } .presto-skleurenn-card { min-height: 285px; padding: 26px 18px 22px; } .presto-skleurenn-icon { width: 54px; height: 54px; } .presto-skleurenn-icon svg { width: 25px; height: 25px; } .presto-skleurenn-card-title { font-size: 20px; } .presto-skleurenn-card-desc { font-size: 14px; } }

/* ============================================================================= PRESTATIONS DÉTAILLÉES - SKLEURENN COUVERTURE ============================================================================= */
.texte-skleurenn, .texte-skleurenn *, .texte-skleurenn *::before, .texte-skleurenn *::after { box-sizing: border-box; }

/* ============================================================================= SECTION ============================================================================= */
.texte-skleurenn { position: relative; width: 100%; padding: 120px 70px 95px; overflow: hidden; background-color: #FFFAF8; font-family: "Source Sans 3", sans-serif !important; }

/* ============================================================================= DÉCORATION DE FOND - HALO ORANGE ============================================================================= */
.texte-skleurenn::before { content: ""; position: absolute; top: -280px; right: -260px; z-index: 0; width: 620px; height: 620px; background: radial-gradient(circle, rgba(241, 92, 35, 0.11) 0%, rgba(241, 92, 35, 0.04) 45%, rgba(241, 92, 35, 0) 72%); border-radius: 50%; pointer-events: none; }

/* ============================================================================= DÉCORATION DE FOND - HALO BRUN ============================================================================= */
.texte-skleurenn::after { content: ""; position: absolute; bottom: -340px; left: -280px; z-index: 0; width: 650px; height: 650px; background: radial-gradient(circle, rgba(42, 12, 0, 0.055) 0%, rgba(42, 12, 0, 0.02) 48%, rgba(42, 12, 0, 0) 72%); border-radius: 50%; pointer-events: none; }

/* ============================================================================= CONTENEUR PRINCIPAL ============================================================================= */
.texte-skleurenn-overlay { position: relative; z-index: 2; width: 100%; max-width: 1350px; margin: 0 auto; }

/* ============================================================================= BLOCS PRESTATIONS ============================================================================= */
.texte-skleurenn-row { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 85px; margin: 0 0 115px; }

.texte-skleurenn-row:last-of-type { margin-bottom: 75px; }

.texte-skleurenn-row-reverse { flex-direction: row-reverse; }

/* ============================================================================= BLOC IMAGE ============================================================================= */
.texte-skleurenn-image { position: relative; display: flex; flex: 0 0 41%; min-width: 0; }

/* Image à gauche */
.texte-skleurenn-row:not(.texte-skleurenn-row-reverse) .texte-skleurenn-image { justify-content: flex-start; }

/* Image à droite */
.texte-skleurenn-row-reverse .texte-skleurenn-image { justify-content: flex-end; }

/* ============================================================================= ANGLE DÉCORATIF IMAGE ============================================================================= */
.texte-skleurenn-image::before { content: ""; position: absolute; top: -14px; left: -14px; z-index: -1; width: 110px; height: 110px; border-top: 2px solid rgba(42, 12, 0, 0.55); border-left: 2px solid rgba(42, 12, 0, 0.55); border-radius: 3px; transition: width 0.4s ease, height 0.4s ease, border-color 0.4s ease; }

.texte-skleurenn-row-reverse .texte-skleurenn-image::before { right: -14px; left: auto; border-right: 2px solid rgba(42, 12, 0, 0.55); border-left: none; }

/* ============================================================================= TRAIT ORANGE SOUS IMAGE ============================================================================= */
.texte-skleurenn-image::after { content: ""; position: absolute; right: 24px; bottom: -8px; z-index: 2; width: 42%; height: 4px; background-color: #F15C23; border-radius: 3px; transition: width 0.4s ease, background-color 0.4s ease; }

.texte-skleurenn-row-reverse .texte-skleurenn-image::after { right: auto; left: 24px; }

/* ============================================================================= PHOTO ============================================================================= */
.texte-skleurenn-image img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center; border: 1px solid rgba(42, 12, 0, 0.13); border-radius: 3px; box-shadow: 0 24px 55px rgba(42, 12, 0, 0.13); transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, filter 0.45s ease; }

/* ============================================================================= AVANT / APRÈS ============================================================================= */
.texte-skleurenn-compare { --compare-position: 50%; position: relative; width: 100%; height: 420px; overflow: hidden; background-color: #F1EBE7; border: 1px solid rgba(42, 12, 0, 0.13); border-radius: 3px; box-shadow: 0 24px 55px rgba(42, 12, 0, 0.13); cursor: ew-resize; transition: border-color 0.45s ease, box-shadow 0.45s ease; }

.texte-skleurenn-compare-image { position: absolute; inset: 0; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; pointer-events: none; }

.texte-skleurenn-compare-before { z-index: 1; }

.texte-skleurenn-compare-after { z-index: 2; clip-path: inset(0 calc(100% - var(--compare-position)) 0 0); }

/* ============================================================================= LABELS AVANT / APRÈS ============================================================================= */
.texte-skleurenn-compare-label { position: absolute; top: 18px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; color: #ffffff; background-color: rgba(42, 12, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2px; font-family: "Source Sans 3", sans-serif !important; font-size: 11px; font-weight: 700 !important; line-height: 1; letter-spacing: 1.1px; text-transform: uppercase; pointer-events: none; }

.texte-skleurenn-compare-label-before { left: 18px; }

.texte-skleurenn-compare-label-after { right: 18px; }

/* ============================================================================= SÉPARATEUR AVANT / APRÈS ============================================================================= */
.texte-skleurenn-compare-divider { position: absolute; top: 0; bottom: 0; left: var(--compare-position); z-index: 4; width: 2px; background-color: #ffffff; box-shadow: 0 0 12px rgba(42, 12, 0, 0.34); transform: translateX(-1px); pointer-events: none; }

.texte-skleurenn-compare-handle { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: #F15C23; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 8px 22px rgba(42, 12, 0, 0.28); transform: translate(-50%, -50%); }

.texte-skleurenn-compare-handle i { position: relative; display: block; width: 9px; height: 9px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; }

.texte-skleurenn-compare-handle i:first-child { margin-right: 6px; transform: rotate(-45deg); }

.texte-skleurenn-compare-handle i:last-child { margin-left: 6px; transform: rotate(135deg); }

/* ============================================================================= RANGE INVISIBLE ============================================================================= */
.texte-skleurenn-compare-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* ============================================================================= HOVER IMAGE ============================================================================= */
.texte-skleurenn-row:hover .texte-skleurenn-image img { filter: saturate(1.05) contrast(1.02); border-color: #F15C23; box-shadow: 0 30px 65px rgba(42, 12, 0, 0.19); transform: translateY(-7px); }

/* Pas de déplacement des photos du comparateur */
.texte-skleurenn-row:hover .texte-skleurenn-compare-image { filter: none !important; border: none !important; box-shadow: none !important; transform: none !important; }

.texte-skleurenn-row:hover .texte-skleurenn-compare { border-color: #F15C23; box-shadow: 0 30px 65px rgba(42, 12, 0, 0.19); }

.texte-skleurenn-row:hover .texte-skleurenn-image::before { width: 145px; height: 145px; border-color: #F15C23; }

.texte-skleurenn-row:hover .texte-skleurenn-image::after { width: 62%; }

/* ============================================================================= BLOC TEXTE ============================================================================= */
.texte-skleurenn-text { flex: 0 0 53%; min-width: 0; color: #2A0C00; text-align: left; }

/* ============================================================================= TITRES ============================================================================= */
.texte-skleurenn-text h2 { position: relative; margin: 0 0 24px; padding: 0 0 17px; color: #2A0C00; font-family: "Urbanist", sans-serif !important; font-size: 44px; font-weight: 700 !important; line-height: 1.1; letter-spacing: -0.4px; }

.texte-skleurenn-text h2 span { color: #F15C23; }

/* Trait sous le titre */
.texte-skleurenn-text h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 66px; height: 3px; background-color: #F15C23; border-radius: 3px; }

/* ============================================================================= PARAGRAPHES ============================================================================= */
.texte-skleurenn-text p { max-width: 780px; margin: 0 0 14px; color: rgba(42, 12, 0, 0.7); font-family: "Source Sans 3", sans-serif !important; font-size: 16px; font-weight: 400 !important; line-height: 1.72; }

/* ============================================================================= LISTE DES PRESTATIONS ============================================================================= */
.texte-skleurenn-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; width: 100%; max-width: 700px; margin: 25px 0 0 !important; padding: 0 !important; list-style: none; }

.texte-skleurenn-services li { position: relative; margin: 0; padding: 0 0 0 21px; color: rgba(42, 12, 0, 0.86); font-family: "Source Sans 3", sans-serif !important; font-size: 14px; font-weight: 600 !important; line-height: 1.45; }

/* ============================================================================= PUCE ORANGE ============================================================================= */
.texte-skleurenn-services li::before { content: ""; position: absolute; top: 7px; left: 2px; width: 7px; height: 7px; background-color: #F15C23; transform: rotate(45deg); }

/* ============================================================================= CTA ============================================================================= */
.texte-skleurenn-btn-wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 1024px) { .texte-skleurenn { padding: 95px 40px; } .texte-skleurenn-row, .texte-skleurenn-row-reverse { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 90px; } .texte-skleurenn-row:last-of-type { margin-bottom: 65px; } .texte-skleurenn-image, .texte-skleurenn-text { flex: 1 1 auto; width: 100%; } .texte-skleurenn-image { justify-content: flex-start !important; } .texte-skleurenn-image img { width: 100%; height: 430px; } .texte-skleurenn-compare { height: 430px; } .texte-skleurenn-text h2 { font-size: 39px; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 767px) { .texte-skleurenn { padding: 75px 20px; } .texte-skleurenn-row, .texte-skleurenn-row-reverse { gap: 30px; margin-bottom: 72px; } .texte-skleurenn-row:last-of-type { margin-bottom: 52px; } /* =========================================================================== IMAGE =========================================================================== */ .texte-skleurenn-image::before { top: -9px; left: -9px; width: 75px; height: 75px; } .texte-skleurenn-row-reverse .texte-skleurenn-image::before { right: -9px; left: auto; } .texte-skleurenn-image::after { right: 15px; bottom: -6px; } .texte-skleurenn-row-reverse .texte-skleurenn-image::after { right: auto; left: 15px; } .texte-skleurenn-image img { height: 285px; } .texte-skleurenn-compare { height: 285px; } .texte-skleurenn-compare-label { top: 12px; padding: 6px 9px; font-size: 10px; } .texte-skleurenn-compare-label-before { left: 12px; } .texte-skleurenn-compare-label-after { right: 12px; } .texte-skleurenn-compare-handle { width: 42px; height: 42px; } .texte-skleurenn-compare-handle i { width: 8px; height: 8px; } /* Pas de déplacement au hover sur tactile */ .texte-skleurenn-row:hover .texte-skleurenn-image img { transform: none; } .texte-skleurenn-row:hover .texte-skleurenn-image::before { width: 75px; height: 75px; } /* =========================================================================== TITRE =========================================================================== */ .texte-skleurenn-text h2 { margin-bottom: 19px; padding-bottom: 14px; font-size: 32px; line-height: 1.15; } /* =========================================================================== TEXTE =========================================================================== */ .texte-skleurenn-text p { margin-bottom: 12px; font-size: 15px; line-height: 1.68; } /* =========================================================================== LISTE =========================================================================== */ .texte-skleurenn-services { grid-template-columns: 1fr; gap: 9px; margin-top: 21px !important; } .texte-skleurenn-services li { font-size: 14px; } /* =========================================================================== CTA =========================================================================== */ .texte-skleurenn-btn-wrap a { width: 100%; text-align: center; } }

/* ============================================================================= PETIT MOBILE ============================================================================= */
@media (max-width: 480px) { .texte-skleurenn { padding: 65px 16px; } .texte-skleurenn-row, .texte-skleurenn-row-reverse { gap: 26px; margin-bottom: 65px; } .texte-skleurenn-image img { height: 250px; } .texte-skleurenn-compare { height: 250px; } .texte-skleurenn-compare-handle { width: 38px; height: 38px; } .texte-skleurenn-compare-handle i { width: 7px; height: 7px; } .texte-skleurenn-text h2 { font-size: 28px; } .texte-skleurenn-text p { font-size: 14.5px; } .texte-skleurenn-services li { padding-left: 19px; font-size: 13.5px; } }

/* ============================================================================= ACCESSIBILITÉ - RÉDUCTION DES ANIMATIONS ============================================================================= */
@media (prefers-reduced-motion: reduce) { .texte-skleurenn-image img, .texte-skleurenn-image::before, .texte-skleurenn-image::after, .texte-skleurenn-compare { transition: none; } .texte-skleurenn-row:hover .texte-skleurenn-image img { transform: none; } }

/* ============================================================================= HORAIRES & RÉSEAUX SOCIAUX - SKLEURENN COUVERTURE ============================================================================= */
.rs-horaire-skleurenn-section, .rs-horaire-skleurenn-section *, .rs-horaire-skleurenn-section *::before, .rs-horaire-skleurenn-section *::after { box-sizing: border-box; }

.rs-horaire-skleurenn-section { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 680px; padding: 95px 24px; overflow: hidden; font-family: "Source Sans 3", sans-serif; }

/* ============================================================================= IMAGE DE FOND ============================================================================= */
.rs-horaire-skleurenn-bg { position: absolute; inset: 0; z-index: 0; }

.rs-horaire-skleurenn-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.8) contrast(1.04); transform: scale(1.02); }

/* ============================================================================= OVERLAY ============================================================================= */
.rs-horaire-skleurenn-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(42, 12, 0, 0.98) 0%, rgba(42, 12, 0, 0.95) 50%, rgba(111, 39, 12, 0.91) 100%); }

/* Halo orange */
.rs-horaire-skleurenn-section::before { content: ""; position: absolute; top: -260px; right: -200px; z-index: 2; width: 580px; height: 580px; background-color: rgba(241, 92, 35, 0.18); border-radius: 50%; filter: blur(95px); pointer-events: none; }

/* Second halo */
.rs-horaire-skleurenn-section::after { content: ""; position: absolute; bottom: -300px; left: -250px; z-index: 2; width: 560px; height: 560px; background-color: rgba(255, 250, 248, 0.05); border-radius: 50%; filter: blur(100px); pointer-events: none; }

/* ============================================================================= CONTENEUR ============================================================================= */
.rs-horaire-skleurenn-wrapper { position: relative; z-index: 3; display: grid; grid-template-columns: 520px 1fr; align-items: center; gap: 82px; width: 100%; max-width: 1220px; }

/* ============================================================================= CARTE HORAIRES ============================================================================= */
.rs-horaire-skleurenn-horaire { position: relative; padding: 32px; overflow: hidden; background-color: #FFFAF8; border: 1px solid rgba(255, 250, 248, 0.35); border-radius: 4px; box-shadow: 0 28px 65px rgba(20, 4, 0, 0.34); }

/* Trait supérieur */
.rs-horaire-skleurenn-horaire::before { content: ""; position: absolute; top: 0; left: 0; width: 82px; height: 4px; background-color: #F15C23; }

/* Petit halo intérieur */
.rs-horaire-skleurenn-horaire::after { content: ""; position: absolute; right: -110px; bottom: -130px; width: 250px; height: 250px; background-color: rgba(241, 92, 35, 0.055); border-radius: 50%; pointer-events: none; }

/* ============================================================================= HEADER HORAIRES ============================================================================= */
.rs-horaire-skleurenn-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }

.rs-horaire-skleurenn-icon-wrapper { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; color: #F15C23; background-color: rgba(241, 92, 35, 0.09); border: 1px solid rgba(241, 92, 35, 0.28); border-radius: 3px; }

.rs-horaire-skleurenn-icon { width: 25px; height: 25px; }

.rs-horaire-skleurenn-label { display: block; margin-bottom: 3px; color: #F15C23; font-family: "Source Sans 3", sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }

.rs-horaire-skleurenn-header h2 { margin: 0; color: #2A0C00; font-family: "Urbanist", sans-serif; font-size: 30px; font-weight: 700 !important; line-height: 1.1; }

/* ============================================================================= HORAIRES ============================================================================= */
.rs-horaire-skleurenn-schedule { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 7px; }

.rs-horaire-skleurenn-day { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; background-color: transparent; border: 1px solid transparent; border-radius: 3px; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.rs-horaire-skleurenn-day:hover { background-color: rgba(241, 92, 35, 0.055); border-color: rgba(241, 92, 35, 0.18); transform: translateX(3px); }

.rs-horaire-skleurenn-day span { color: rgba(42, 12, 0, 0.75); font-family: "Source Sans 3", sans-serif; font-size: 15px; font-weight: 600; }

.rs-horaire-skleurenn-day strong { padding: 5px 10px; color: #2A0C00; background-color: rgba(241, 92, 35, 0.07); border: 1px solid rgba(241, 92, 35, 0.18); border-radius: 3px; font-family: "Urbanist", sans-serif; font-size: 13px; font-weight: 700 !important; }

.rs-horaire-skleurenn-day.today { background-color: rgba(241, 92, 35, 0.1); border-color: rgba(241, 92, 35, 0.35); }

.rs-horaire-skleurenn-day.today strong { color: #FFFAF8; background-color: #F15C23; border-color: #F15C23; }

.rs-horaire-skleurenn-day.closed { opacity: 0.48; }

.rs-horaire-skleurenn-today { display: block; margin-top: 3px; color: #F15C23; font-size: 10px; font-weight: 800; letter-spacing: 0.2px; }

/* ============================================================================= STATUT ============================================================================= */
.rs-horaire-skleurenn-status { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 13px 15px; color: #FFFAF8; background-color: #2A0C00; border: 1px solid #2A0C00; border-radius: 3px; font-size: 14px; font-weight: 700; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }

.rs-horaire-skleurenn-status.is-open { color: #FFFAF8; background-color: #F15C23; border-color: #F15C23; }

.rs-horaire-skleurenn-status-dot { flex-shrink: 0; width: 8px; height: 8px; background-color: rgba(255, 250, 248, 0.7); border-radius: 50%; }

.rs-horaire-skleurenn-status.is-open .rs-horaire-skleurenn-status-dot { background-color: #FFFAF8; box-shadow: 0 0 0 4px rgba(255, 250, 248, 0.12); }

/* ============================================================================= RÉSEAUX SOCIAUX ============================================================================= */
.rs-horaire-skleurenn-rs { max-width: 590px; }

/* Petit surtitre */
.rs-horaire-skleurenn-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #FFFAF8; font-family: "Source Sans 3", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }

.rs-horaire-skleurenn-eyebrow span { display: inline-block; width: 32px; height: 3px; background-color: #F15C23; }

.rs-horaire-skleurenn-rs h2 { margin: 0 0 20px; color: #FFFAF8; font-family: "Urbanist", sans-serif !important; font-size: 45px; font-weight: 700 !important; line-height: 1.12; letter-spacing: -0.5px; }

.rs-horaire-skleurenn-rs h2 span { display: block; color: #F15C23; }

.rs-horaire-skleurenn-rs p { max-width: 560px; margin: 0 0 30px; color: rgba(255, 250, 248, 0.72); font-family: "Source Sans 3", sans-serif; font-size: 16px; line-height: 1.7; }

/* ============================================================================= CARTES RÉSEAUX ============================================================================= */
.rs-horaire-skleurenn-socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.rs-horaire-skleurenn-social { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px; overflow: hidden; color: #FFFAF8; background-color: rgba(255, 250, 248, 0.065); border: 1px solid rgba(255, 250, 248, 0.15); border-radius: 3px; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }

.rs-horaire-skleurenn-social::before { content: ""; position: absolute; top: 0; left: 0; width: 45px; height: 3px; background-color: #F15C23; transition: width 0.35s ease; }

.rs-horaire-skleurenn-social:hover { color: #FFFAF8; background-color: rgba(241, 92, 35, 0.18); border-color: #F15C23; box-shadow: 0 18px 38px rgba(20, 4, 0, 0.18); text-decoration: none; transform: translateY(-4px); }

.rs-horaire-skleurenn-social:hover::before { width: 100%; }

/* ============================================================================= ICÔNES RÉSEAUX ============================================================================= */
.rs-horaire-skleurenn-social-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 55px; height: 55px; padding: 10px; background-color: #FFFAF8; border: 1px solid rgba(241, 92, 35, 0.18); border-radius: 3px; }

.rs-horaire-skleurenn-social-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ============================================================================= TEXTE RÉSEAUX ============================================================================= */
.rs-horaire-skleurenn-social-content { min-width: 0; }

.rs-horaire-skleurenn-social-content span { display: block; margin-bottom: 2px; color: rgba(255, 250, 248, 0.58); font-family: "Source Sans 3", sans-serif; font-size: 11px; }

.rs-horaire-skleurenn-social-content strong { color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 17px; font-weight: 700 !important; }

.rs-horaire-skleurenn-arrow { margin-left: auto; color: #F15C23; font-size: 22px; transition: color 0.3s ease, transform 0.3s ease; }

.rs-horaire-skleurenn-social:hover .rs-horaire-skleurenn-arrow { color: #FFFAF8; transform: translateX(4px); }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 950px) { .rs-horaire-skleurenn-section { padding: 80px 24px; } .rs-horaire-skleurenn-wrapper { grid-template-columns: 1fr; gap: 60px; max-width: 650px; } .rs-horaire-skleurenn-rs { max-width: none; text-align: center; } .rs-horaire-skleurenn-eyebrow { justify-content: center; } .rs-horaire-skleurenn-rs p { margin-right: auto; margin-left: auto; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 600px) { .rs-horaire-skleurenn-section { padding: 65px 16px; } .rs-horaire-skleurenn-wrapper { gap: 48px; } .rs-horaire-skleurenn-horaire { padding: 26px 18px; } .rs-horaire-skleurenn-header h2 { font-size: 26px; } .rs-horaire-skleurenn-day { padding: 8px; } .rs-horaire-skleurenn-day:hover { transform: none; } .rs-horaire-skleurenn-day span { font-size: 13px; } .rs-horaire-skleurenn-day strong { padding: 5px 8px; font-size: 11px; } .rs-horaire-skleurenn-status { font-size: 12.5px; line-height: 1.4; text-align: center; } .rs-horaire-skleurenn-rs h2 { font-size: 32px; } .rs-horaire-skleurenn-rs p { font-size: 15px; } .rs-horaire-skleurenn-socials { grid-template-columns: 1fr; } .rs-horaire-skleurenn-social { text-align: left; } }

/* ============================================================================= PETIT MOBILE ============================================================================= */
@media (max-width: 420px) { .rs-horaire-skleurenn-section { padding: 58px 14px; } .rs-horaire-skleurenn-horaire { padding: 23px 14px; } .rs-horaire-skleurenn-icon-wrapper { width: 46px; height: 46px; } .rs-horaire-skleurenn-icon { width: 22px; height: 22px; } .rs-horaire-skleurenn-header h2 { font-size: 24px; } .rs-horaire-skleurenn-rs h2 { font-size: 28px; } .rs-horaire-skleurenn-social { padding: 13px; } .rs-horaire-skleurenn-social-icon { width: 49px; height: 49px; } }

/*=================================================================================== EN TETE : PAGE REALISATIONS ====================================================================================*/
/* ============================================================================= EN-TÊTE PAGE RÉALISATIONS - SKLEURENN COUVERTURE ============================================================================= */
.page-header-skleurenn, .page-header-skleurenn *, .page-header-skleurenn *::before, .page-header-skleurenn *::after { box-sizing: border-box; }

.page-header-skleurenn { position: relative; display: flex; align-items: center; width: 100%; min-height: 56vh; padding: 140px 24px 70px; overflow: hidden; background-color: #2A0C00; background-position: center; background-repeat: no-repeat; background-size: cover; font-family: "Source Sans 3", sans-serif; }

/* Overlay dégradé (même logique que le hero d'accueil) */
.page-header-skleurenn-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(42, 12, 0, 0.96) 0%, rgba(42, 12, 0, 0.9) 45%, rgba(84, 29, 8, 0.72) 100%); }

/* Halo orange */
.page-header-skleurenn::before { content: ""; position: absolute; right: -200px; bottom: -240px; z-index: 2; width: 560px; height: 560px; background-color: rgba(241, 92, 35, 0.22); border-radius: 50%; filter: blur(100px); pointer-events: none; }

/* Container */
.page-header-skleurenn-container { position: relative; z-index: 3; width: 90%; max-width: 1220px; margin: 0 auto; color: #FFFAF8; }

/* Fil d'Ariane */
.page-header-skleurenn-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; font-family: "Source Sans 3", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }

.page-header-skleurenn-breadcrumb a { color: rgba(255, 250, 248, 0.65); text-decoration: none; transition: color 0.3s ease; }

.page-header-skleurenn-breadcrumb a:hover { color: #F15C23; }

.page-header-skleurenn-breadcrumb-sep { color: rgba(255, 250, 248, 0.4); }

.page-header-skleurenn-breadcrumb-current { color: #F15C23; }

/* Surtitre */
.page-header-skleurenn-tagline { position: relative; display: inline-block; padding-left: 54px; margin-bottom: 18px; color: #FFFAF8; font-size: 14px; font-weight: 700 !important; line-height: 1.5; letter-spacing: 2.5px; text-transform: uppercase; }

.page-header-skleurenn-tagline::before { content: ""; position: absolute; top: 50%; left: 0; width: 38px; height: 3px; background-color: #F15C23; transform: translateY(-50%); }

/* Titre */
.page-header-skleurenn-container h1 { max-width: 700px; margin: 0 0 20px; color: #FFFAF8; font-family: "Urbanist", sans-serif; font-size: 58px; font-weight: 750 !important; line-height: 1.05; letter-spacing: -1px; text-transform: uppercase; }

.page-header-skleurenn-container h1 span { color: #F15C23; }

/* Texte */
.page-header-skleurenn-container p { max-width: 620px; margin: 0; color: rgba(255, 250, 248, 0.8); font-size: 17px; font-weight: 400 !important; line-height: 1.65; }

/* ============================================================================= TABLETTE ============================================================================= */
@media (max-width: 900px) { .page-header-skleurenn { min-height: auto; padding: 120px 24px 60px; } .page-header-skleurenn-container h1 { font-size: 42px; } .page-header-skleurenn-container p { font-size: 16px; } }

/* ============================================================================= MOBILE ============================================================================= */
@media (max-width: 576px) { .page-header-skleurenn { padding: 105px 16px 50px; } .page-header-skleurenn-breadcrumb { font-size: 12px; } .page-header-skleurenn-tagline { font-size: 11px; letter-spacing: 1.7px; } .page-header-skleurenn-container h1 { font-size: 32px; letter-spacing: -0.5px; } .page-header-skleurenn-container p { font-size: 15px; } }

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