@charset "UTF-8";
@import url(main.css);
/*-----------------------------------------------------------------------------bloc counter %-------------------------------------------------------------------------------*/
.counter-item.counters-number.titles.mb-2.text-color-sixth { font-family: 'Outfit', sans-serif; font-weight: 700 !important; font-size: 64px !important; color: #FFE125 !important; }

/*------vrai bloc-------*/
.chiffrage-tpn { padding: 60px 140px; text-align: center; background: #FFFFFF; font-family: 'Outfit', sans-serif; }

.chiffrage-tpn__title { font-size: 40px; font-weight: 700 !important; color: #000000; letter-spacing: -0.01em; margin: 0 0 3rem; }

.chiffrage-tpn__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 1080px; margin: 0; }

.chiffrage-tpn__card { padding: 2rem 1rem 1.75rem; border-radius: 16px; border: 2px solid rgba(0, 0, 0, 0.12); background: #FFFFFF; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; transition: transform 0.2s ease, border-color 0.2s ease; }

.chiffrage-tpn__card:hover { transform: translateY(-4px); border-color: #FFE125; }

.chiffrage-tpn__number { font-size: 3rem; font-weight: 900; color: #FFE125; line-height: 1; letter-spacing: -0.03em; }

.chiffrage-tpn__bar { width: 36px; height: 3px; background: #FFE125; border-radius: 2px; opacity: 0.4; }

.chiffrage-tpn__label { font-size: 24px; font-weight: 600 !important; color: #000000; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }

/* Tablette */
@media (max-width: 1024px) { .chiffrage-tpn { padding: 50px 60px; } .chiffrage-tpn__title { font-size: 32px; } .chiffrage-tpn__number { font-size: 2.5rem; } .chiffrage-tpn__label { font-size: 18px; } }

/* Mobile paysage / petite tablette */
@media (max-width: 768px) { .chiffrage-tpn { padding: 40px 30px; } .chiffrage-tpn__title { font-size: 26px; margin: 0 0 2rem; } .chiffrage-tpn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; } .chiffrage-tpn__number { font-size: 2.2rem; } .chiffrage-tpn__label { font-size: 15px; } }

/* Mobile portrait */
@media (max-width: 480px) { .chiffrage-tpn { padding: 32px 16px; } .chiffrage-tpn__title { font-size: 22px; margin: 0 0 1.5rem; } .chiffrage-tpn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .chiffrage-tpn__card { padding: 1.5rem 0.75rem 1.25rem; } .chiffrage-tpn__number { font-size: 2rem; } .chiffrage-tpn__label { font-size: 13px; letter-spacing: 0.04em; } }

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

.custom-header .container-fluid { margin: 0; padding: 18px 24px; border-radius: 0; background: #000000; /* fond sombre au début */ transition: margin 0.4s ease, padding 0.4s ease, background 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 0.4s ease; }

.custom-header.scrolled { top: 14px; }

.custom-header.scrolled .container-fluid { margin-left: 20px; margin-right: 20px; padding: 12px 24px; background: rgba(10, 18, 32, 0.68); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28); }

.custom-header .logo_nav { height: 72px; transition: height 0.4s ease; }

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

@media (max-width: 991px) { .custom-header .container-fluid { padding: 12px 14px; background: rgba(10, 18, 32, 0.95); } .custom-header.scrolled { top: 8px; } .custom-header.scrolled .container-fluid { margin-left: 10px; margin-right: 10px; padding: 10px 14px; background: rgba(10, 18, 32, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 18px; } .custom-header .logo_nav, .custom-header.scrolled .logo_nav { height: 52px; } }

.custom-header .animated-border-button { background-color: transparent !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: 'Outfit', sans-serif; }

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

.logo_nav { height: 10vh !important; }

/*----------------------------------------------------------------------------Bloc maps-------------------------------------------------------------------------------------*/
.maps-section .content { color: #000000 !important; }

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

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

.item-content.mx-5 { color: #000000 !important; font-family: 'Outfit', sans-serif; }

/*-----------------------------------------------------------------------------ancre etape-----------------------------------------------------------------------------------*/
#etape { scroll-margin-top: 95px; }

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

/*--------------------------------------------------------------------------bloc image droite--------------------------------------------------------------------------------*/
#bloc-image-droite li { color: #FFFFFF; }

.image-droite { background-color: #000000 !important; }

/*-------------------------------------------------------------------------bloc image gauche--------------------------------------------------------------------------------*/
#bloc-image-gauche li { color: #FFFFFF; }

.image-gauche { background-color: #000000 !important; }

/*----------------------------------------------------------------------------texte footer------------------------------------------------------------------------------------*/
footer, footer p, footer a, footer li, footer ul, footer i { color: #FFFFFF !important; font-family: 'Outfit', sans-serif; font-size: 1rem; }

footer h5 { color: #FFE125 !important; font-family: 'Quantico', sans-serif; font-weight: 700 !important; font-size: 1.25rem; /* légèrement plus grand pour se démarquer */ }

.text-color-third { color: #FFFFFF !important; font-family: 'Outfit', sans-serif; font-size: 1rem; text-align: left; hyphens: auto; }

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

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

.animated-border-button span { transition: color 0.3s ease; }

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

/* ---------------------------------------------------------------------bouton contact envoyer------------------------------------------------------------------------------ */
button.btn-outline-dark { --bs-btn-color: #FFFFFF; --bs-btn-border-color: #000000; --bs-btn-hover-color: #000000; --bs-btn-hover-bg: #FFE125; --bs-btn-hover-border-color: #FFE125; --bs-btn-bg: #000000; --bs-gradient: none; background-color: var(--bs-btn-bg); color: var(--bs-btn-color); }

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

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

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

/*---------------------------------------------------------------------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: 'Quantico', sans-serif; letter-spacing: 1px; text-decoration: none; color: #FFFFFF !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFFFF !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #FFFFFF; }

.button_homepageFirstScreen:hover { color: #000000 !important; box-shadow: inset 0 -100px 0 0 #FFE125 !important; border-color: #FFE125 !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: 'Quantico', sans-serif; letter-spacing: 1px; text-decoration: none; color: #000000 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #000000 !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #000000; }

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

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

/*--------------------------------------------------------------------------Bouton presta-----------------------------------------------------------------------------------*/
.button_prestaDoubleScreen { position: relative; z-index: 2; display: inline-block; padding: 15px 30px; text-align: center; font-family: 'Quantico', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-decoration: none; color: #000000; background: transparent; cursor: pointer; border: 2px solid #000000; border-radius: 30px; box-shadow: inset 0 0 0 0 #000000; transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.5s ease, transform 0.2s ease; }

/* Card hover → bouton visible sur fond noir */
.presta-tpn__card:hover .button_prestaDoubleScreen { color: #FFE125; border-color: #FFE125; }

/* Hover bouton */
.button_prestaDoubleScreen:hover { color: #000; border-color: #FFE125; box-shadow: inset 0 -100px 0 0 #FFE125; transform: scale(0.95); }

/* Priorité si bouton + card hover */
.presta-tpn__card:hover .button_prestaDoubleScreen:hover { color: #000; }

/* Active (click) */
.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: 'Quantico', sans-serif; letter-spacing: 1px; text-decoration: none; color: #FFFFFF !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FFFFFF !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #FFFFFF; }

.button_secondepageDoubleScreen:hover { color: #000000 !important; box-shadow: inset 0 -100px 0 0 #FFE125 !important; border-color: #FFE125 !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: 'Quantico', sans-serif; letter-spacing: 1px; text-decoration: none; color: #000000 !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #000000 !important; border-radius: 30px; box-shadow: inset 0 0 0 0 #000000; }

.all-activities-button:hover { color: #000000 !important; box-shadow: inset 0 -100px 0 0 #FFE125 !important; border-color: #FFE125 !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: 1px solid #000000; }

/* ───────────────────────────────────────────── VARIABLES ───────────────────────────────────────────── */
:root { --y: #FFE125; --dark: #111110; --white: #ffffff; --offwhite: #f6f5f1; --muted: #71706b; --radius-card: 20px; --shadow: 0 8px 40px rgba(0,0,0,0.10); --transition: 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }

/* ───────────────────────────────────────────── WRAPPER COMMUN AUX 3 BLOCS ───────────────────────────────────────────── */
.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1 { padding: 20px 60px 20px 60px !important; }

.first-activity-div, .second-activity-div, .third-activity-div { background: var(--white) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: hidden; position: relative; opacity: 0; transform: translateY(36px); animation: riseUp 0.75s ease forwards; }

.first-activity-div { animation-delay: 0.05s; border-radius: var(--radius-card) var(--radius-card) 0 0 !important; }

.second-activity-div { animation-delay: 0.20s; border-top: 2px solid var(--offwhite); }

.third-activity-div { animation-delay: 0.35s; border-top: 2px solid var(--offwhite); border-radius: 0 0 var(--radius-card) var(--radius-card) !important; }

/* outer container to group the 3 cards */
.first-activity-div { margin-top: 60px !important; }

.third-activity-div { margin-bottom: 60px !important; box-shadow: var(--shadow) !important; }

/* ───────────────────────────────────────────── ROWS — make them proper split layouts ───────────────────────────────────────────── */
.first-activity-div .row, .second-activity-div .row, .third-activity-div .row { margin: 0 !important; padding: 0 !important; gap: 0 !important; min-height: 220px; }

/* ───────────────────────────────────────────── IMAGE COLUMN ───────────────────────────────────────────── */
.col-12.col-sm-8.col-lg-5 { padding: 0 !important; overflow: hidden; }

.card.card-cover { border-radius: 30 !important; box-shadow: none !important; height: 100% !important; min-height: 300px; transition: transform var(--transition); }

.first-activity-div:hover .card.card-cover, .second-activity-div:hover .card.card-cover, .third-activity-div:hover .card.card-cover { transform: scale(0.96); }

/* hide the dark overlay */
.black-screen { display: none; }

/* ───────────────────────────────────────────── TEXT COLUMN ───────────────────────────────────────────── */
.col-lg-7 { padding: 56px 60px !important; display: flex; flex-direction: column; justify-content: center; background: var(--white); position: relative; overflow: hidden; }

/* subtle yellow glow in corner */
.col-lg-7::after { content: ''; position: absolute; inset: 0; pointer-events: none; }

/* ───────────────────────────────────────────── TITLES ───────────────────────────────────────────── */
.first-activity-title, .second-activity-title, .third-activity-title { margin-bottom: 0 !important; }

.first-activity-title h2, .second-activity-title h2, .third-activity-title h2 { margin-bottom: 20px; }

/* override inline color/font with something richer */
.first-activity-title h2 span, .second-activity-title h2 span, .third-activity-title h2 span { font-family: 'Quantico', sans-serif !important; font-weight: 900 !important; font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important; line-height: 1.05 !important; color: var(--dark) !important; display: block; position: relative; padding-bottom: 20px; }

/* yellow underline bar */
.first-activity-title h2 span::after, .second-activity-title h2 span::after, .third-activity-title h2 span::after { content: ''; display: block; width: 44px; height: 4px; background: var(--y); border-radius: 2px; margin-top: 16px; }

/* ───────────────────────────────────────────── BODY COPY ───────────────────────────────────────────── */
.fs-6.lead { margin-top: 0 !important; }

/* subtitle strong */
.fs-6.lead p:first-child strong span { font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--dark) !important; letter-spacing: -0.01em; }

/* body paragraphs */
.fs-6.lead p span { font-family: 'Outfit', sans-serif !important; font-size: 0.97rem !important; font-weight: 300 !important; line-height: 1.8 !important; color: var(--muted) !important; }

/* ───────────────────────────────────────────── ANIMATION ───────────────────────────────────────────── */
@keyframes riseUp { to { opacity: 1;
    transform: translateY(0); } }

/* ───────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991px) { .col-lg-7 { padding: 40px 32px !important; } .card.card-cover { min-height: 260px; } }

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

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

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

/*-----------------------------------------------------------------------------bloc avis--------------------------------------------------------------------------------------*/
.d-lg-flex.align-items-lg-center { font-family: 'Outfit', sans-serif; }

p.lead.fs-6 { font-family: 'Outfit', sans-serif; }

.mx-2 { font-family: 'Quantico', sans-serif; }

.d-lg-flex.align-items-center.justify-content-lg-between.text-center.text-lg-start.p-lg-4 { background: #ffffff !important; border-radius: 30px !important; }

.card.p-2.rounded-3.shadow-lg.px-4.border-0.d-flex.justify-content-lg-between { background: #ffffff !important; }

/*-------vrai bloc avis----------*/
.gr-wrap { padding: 60px 140px; background: #fff; font-family: 'Quantico', sans-serif; }

.gr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }

.gr-brand { display: flex; align-items: center; gap: 14px; }

.gr-logo { width: 80px; height: 80px; border-radius: 12px; object-fit: contain; background: #ffffff; padding: 2px; }

.gr-name { font-size: 28px; font-weight: 500; color: #000; margin: 0 0 4px; }

.gr-label { font-size: 16px; font-family: 'Outfit', sans-serif; color: #555; margin: 0 0 4px; }

.gr-stars { display: flex; gap: 2px; }

.gr-star { width: 18px; height: 18px; }

.gr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.gr-card { background: #fff; border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s; }

.gr-card:hover { border-color: #FFE125; }

.gr-reviewer { display: flex; align-items: center; gap: 10px; }

.gr-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }

.gr-reviewer-name { font-size: 16px; font-weight: 500; color: #000; margin: 0; }

.gr-date { font-size: 14px; color: #888; margin: 0; }

.gr-body { font-size: 16px; color: #333; line-height: 1.6; font-family: 'Outfit', sans-serif; margin: 0; }

.gr-divider { border: none; border-top: 1px solid #f0f0f0; margin: 0; }

@media (max-width: 1024px) { .gr-wrap { padding: 40px 60px; } }

@media (max-width: 768px) { .gr-wrap { padding: 40px 24px; } .gr-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .gr-name { font-size: 22px; } .gr-label { font-size: 14px; } .gr-grid { grid-template-columns: 1fr; } .button_homepageScreen { width: 100%; justify-content: center; } }

@media (max-width: 480px) { .gr-wrap { padding: 24px 16px; } .gr-logo { width: 60px; height: 60px; } .gr-name { font-size: 18px; } .gr-avatar { width: 40px; height: 40px; } .gr-body { font-size: 14px; } .gr-reviewer-name { font-size: 14px; } }

/* ----------------------------------------------------------------------Flèche retour en haut------------------------------------------------------------------------------- */
/* Bouton Retour en haut */
#back-to-top { position: fixed; bottom: 24px; right: 24px; background-color: #000000; color: #FFFFFF !important; font-size: 20px; font-weight: 700 !important; line-height: 1; text-align: center; padding: 14px 18px; border-radius: 100%; border: 2px solid #FFFFFF; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; text-decoration: none; opacity: 0; pointer-events: none; z-index: 9999; min-width: 48px; /* 👈 meilleure accessibilité mobile */ min-height: 48px; /* 👈 idem */ transform: scale(0.9); /* 👈 effet “pop” à l’apparition */ transition: opacity .3s ease, transform .3s ease, background-color .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 { background-color: #FFE125; border: 2px solid #000000; color: #000000 !important; transform: translateY(-3px); }

/* Défilement fluide global (même sans JS) */
html { scroll-behavior: smooth; }

/* -----------------------------------------------------------------------bloc first impression------------------------------------------------------------------------------- */
.first-impression-tpn { height: 100vh; width: 100%; display: flex; align-items: center; position: relative; overflow: hidden; }

/* IMAGE BACKGROUND + ZOOM */
.first-impression-tpn::before { content: ""; position: absolute; inset: 0; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FaqR3DuIOSvUHkVg9RDB55JhlDgt1%2Fimages%2FChatGPT_Image_27_avr_2026_14_19_47_0nw8.webp") center center/cover no-repeat; transform: scale(1); animation: zoomHero 15s ease-in-out infinite alternate; z-index: 0; }

/* overlay sombre pour lisibilité */
.first-impression-tpn::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1; }

/* CONTENU */
.first-impression-tpn-container { width: 90%; max-width: 1200px; margin: auto; position: relative; z-index: 2; }

.first-impression-tpn-text { max-width: 520px; color: #F6F1E3; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

.first-impression-tpn .tagline { color: #F6F1E3; font-weight: 700; font-family: 'Outfit', sans-serif; letter-spacing: 2px; font-size: 16px; }

.first-impression-tpn-text h1 { font-size: 72px; font-weight: 700 !important; font-family: 'Figtree', sans-serif; color: #F6F1E3; line-height: 1.1; margin: 15px 0; }

.first-impression-tpn-text p { font-size: 18px; font-family: 'Outfit', sans-serif; margin-bottom: 30px; color: #F6F1E3; line-height: 1.6; }

/* LOGO */
.first-impression-tpn-logo { margin-bottom: 40px; }

.first-impression-tpn-logo img { height: 70px; width: auto; }

/* ANIMATION ZOOM */
@keyframes zoomHero { from { transform: scale(1); }
  to { transform: scale(1.15); } }

/* MOBILE */
@media (max-width: 900px) { .first-impression-tpn-text h1 { font-size: 46px; } .first-impression-tpn { text-align: center; } .first-impression-tpn-text { margin: auto; } .first-impression-tpn-logo { text-align: center; margin-bottom: 30px; } .first-impression-tpn-logo img { height: 55px; } }

/* ---------------------------------------------------------------------------bloc etape------------------------------------------------------------------------------------- */
.hiw-section { font-family: 'Outfit', sans-serif; background: #fff; padding: 60px 40px; max-width: 1200px; margin: 0 auto; text-align: center; box-sizing: border-box; }

.hiw-badge { display: inline-flex; align-items: center; gap: 6px; background: #F1F1F1; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: #000000; margin-bottom: 18px; }

.hiw-badge .dot { width: 8px; height: 8px; background: #FFE125; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.hiw-title { font-family: 'Quantico', sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 900 !important; color: #000000; margin: 0 0 40px; line-height: 1.15; }

.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }

.hiw-card { padding: 28px; border-right: 1px solid #e8e8e8; box-sizing: border-box; }

.hiw-card--last { border-right: none; }

.hiw-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #FFE125; border-radius: 50%; font-family: 'Quantico', sans-serif; font-weight: 800; font-size: 15px; color: #000000; margin-bottom: 14px; }

.hiw-card-title { font-family: 'Quantico', sans-serif; font-weight: 700 !important; font-size: 18px; color: #000000; margin: 0 0 10px; line-height: 1.3; }

.hiw-card-text { font-size: 14px; color: #3d4349; line-height: 1.6; margin: 0; }

/* Tablette */
@media (max-width: 991px) { .hiw-section { padding: 50px 24px; } .hiw-grid { grid-template-columns: 1fr; border-bottom: none; } .hiw-card { border-right: none; border-bottom: 1px solid #e8e8e8; padding: 24px 20px; } .hiw-card--last { border-bottom: none; } .hiw-title { margin-bottom: 30px; } }

/* Mobile */
@media (max-width: 576px) { .hiw-section { padding: 40px 16px; } .hiw-badge { font-size: 12px; padding: 6px 12px; } .hiw-title { font-size: 28px; line-height: 1.2; margin-bottom: 24px; } .hiw-card { padding: 20px 16px; } .hiw-num { width: 42px; height: 42px; font-size: 14px; margin-bottom: 12px; } .hiw-card-title { font-size: 17px; } .hiw-card-text { font-size: 14px; line-height: 1.5; } }

/* ---------------------------------------------------------------------------bloc presta------------------------------------------------------------------------------------ */
.presta-tpn { background-color: #000; padding: 60px 40px; font-family: 'Outfit', sans-serif; }

/* Header */
.presta-tpn__header { text-align: center; margin-bottom: 56px; }

.presta-tpn__label { display: inline-block; font-size: 13px; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #FFE125; margin-bottom: 14px; }

.presta-tpn__title { font-family: 'Quantico', sans-serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900 !important; line-height: 1.05; color: #fff; text-transform: uppercase; letter-spacing: -0.01em; }

.presta-tpn__title span { color: #FFE125; display: block; }

/* Grid */
.presta-tpn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1140px; margin: 0 auto; }

/* Card */
.presta-tpn__card { background: #fff; border-radius: 20px; overflow: hidden; position: relative; display: flex; flex-direction: column; border: 2px solid transparent; transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; cursor: pointer; }

.presta-tpn__link-overlay { position: absolute; inset: 0; z-index: 1; }

.presta-tpn__card:hover { background: #000; border-color: #FFE125; transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(255, 225, 37, 0.18), 0 4px 16px rgba(0, 0, 0, 0.4); }

/* Image */
.presta-tpn__img-wrap { position: relative; height: 200px; overflow: hidden; }

.presta-tpn__img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); transition: transform 0.5s ease, filter 0.5s ease; }

.presta-tpn__card:hover .presta-tpn__img-wrap img { transform: scale(1.07); filter: brightness(0.6); }

/* Overlay */
.presta-tpn__img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.45) 100%); pointer-events: none; transition: background 0.35s ease; }

.presta-tpn__card:hover .presta-tpn__img-wrap::after { background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.95) 100%); }

/* Icon */
.presta-tpn__icon { position: absolute; top: 16px; left: 16px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: #000; border: 3px solid #FFE125; display: flex; align-items: center; justify-content: center; color: #FFE125; transition: background 0.3s ease, color 0.3s ease, transform 0.35s ease; }

.presta-tpn__icon svg { width: 24px; height: 24px; }

.presta-tpn__card:hover .presta-tpn__icon { background: #FFE125; color: #000; transform: rotate(8deg) scale(1.1); }

/* Body */
.presta-tpn__body { padding: 28px 24px 28px; display: flex; flex-direction: column; flex: 1; }

.presta-tpn__body h3 { font-family: 'Quantico', sans-serif; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #000; margin-bottom: 10px; transition: color 0.3s ease; }

.presta-tpn__body p { font-size: 0.88rem; line-height: 1.65; color: #555; flex: 1; margin-bottom: 20px; transition: color 0.3s ease; }

.presta-tpn__card:hover .presta-tpn__body h3, .presta-tpn__card:hover .presta-tpn__body p { color: #fff; }

/* Responsive */
@media (max-width: 900px) { .presta-tpn__grid { grid-template-columns: 1fr; max-width: 480px; } .presta-tpn { padding: 60px 20px; } }

/* ------------------------------------------------------------------------bloc real accueil---------------------------------------------------------------------------------- */
.real-accueil-tpn { background: #000000; padding: 60px 40px; font-family: 'Outfit', sans-serif; box-sizing: border-box; }

.real-accueil-tpn-header { text-align: center; margin-bottom: 40px; }

.real-accueil-tpn-label { color: #FFE125; font-size: 13px; font-weight: 700 !important; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

.real-accueil-tpn-label::before { content: ''; width: 18px; height: 2px; background: #FFE125; flex-shrink: 0; }

.real-accueil-tpn-title { font-family: 'Quantico', sans-serif; font-size: clamp(28px, 6vw, 64px); font-weight: 900 !important; text-transform: uppercase; color: #FFFFFF; margin: 0; line-height: 1.1; }

.real-accueil-tpn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1150px; margin: 0 auto; }

.real-accueil-tpn-item { position: relative; overflow: hidden; border-radius: 6px; background: #111; height: 180px; }

.real-accueil-tpn-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

.real-accueil-tpn-item:hover img { transform: scale(1.05); }

.real-accueil-tpn-item::after { content: ''; position: absolute; inset: 0; background: rgba(255, 225, 37, 0); transition: background 0.3s ease; }

.real-accueil-tpn-item:hover::after { background: rgba(255, 225, 37, 0.12); }

/* Mosaïque desktop */
.real-accueil-tpn-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 372px; }

.real-accueil-tpn-item:nth-child(2) { grid-column: 2; grid-row: 1; }

.real-accueil-tpn-item:nth-child(3) { grid-column: 3; grid-row: 1; }

.real-accueil-tpn-item:nth-child(4) { grid-column: 2; grid-row: 2; }

.real-accueil-tpn-item:nth-child(5) { grid-column: 3; grid-row: 2; }

.real-accueil-tpn-item:nth-child(6) { grid-column: 1; grid-row: 3; }

.real-accueil-tpn-item:nth-child(7) { grid-column: 2 / 4; grid-row: 3; }

.real-accueil-tpn-btn-wrap { display: flex; justify-content: center; margin-top: 40px; }

/* ---------------- TABLETTE ---------------- */
@media (max-width: 991px) { .real-accueil-tpn { padding: 50px 24px; } .real-accueil-tpn-header { margin-bottom: 30px; } .real-accueil-tpn-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .real-accueil-tpn-item, .real-accueil-tpn-item:nth-child(1), .real-accueil-tpn-item:nth-child(2), .real-accueil-tpn-item:nth-child(3), .real-accueil-tpn-item:nth-child(4), .real-accueil-tpn-item:nth-child(5), .real-accueil-tpn-item:nth-child(6), .real-accueil-tpn-item:nth-child(7) { grid-column: auto; grid-row: auto; height: 220px; min-height: unset; } .real-accueil-tpn-item:nth-child(7) { grid-column: span 2; } .real-accueil-tpn-btn-wrap { margin-top: 30px; } }

/* ---------------- MOBILE ---------------- */
@media (max-width: 576px) { .real-accueil-tpn { padding: 40px 16px; } .real-accueil-tpn-label { font-size: 12px; letter-spacing: 1.5px; } .real-accueil-tpn-title { font-size: 30px; line-height: 1.15; } .real-accueil-tpn-grid { grid-template-columns: 1fr; gap: 10px; } .real-accueil-tpn-item, .real-accueil-tpn-item:nth-child(1), .real-accueil-tpn-item:nth-child(2), .real-accueil-tpn-item:nth-child(3), .real-accueil-tpn-item:nth-child(4), .real-accueil-tpn-item:nth-child(5), .real-accueil-tpn-item:nth-child(6), .real-accueil-tpn-item:nth-child(7) { grid-column: auto; grid-row: auto; height: 200px; } .real-accueil-tpn-btn-wrap { margin-top: 24px; } .real-accueil-tpn-btn-wrap a { width: 100%; text-align: center; } }

/*----------------------------------------------------------------------------bloc en-tete-----------------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* SECTION */
.en-tete-tpn-section { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 170px 60px 80px 60px; gap: 48px; flex-wrap: wrap; min-height: 70vh; overflow: hidden; }

/* BACKGROUND */
.en-tete-tpn-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* OVERLAY */
.en-tete-tpn-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.92) 100%); z-index: 1; }

/* CONTENU */
.en-tete-tpn-content { position: relative; z-index: 2; flex: 1; min-width: 300px; max-width: 50%; display: flex; flex-direction: column; align-items: flex-start; }

/* EYEBROW */
.en-tete-tpn-eyebrow { font-family: 'Quantico', sans-serif; font-size: 11px; font-weight: 700 !important; letter-spacing: 0.22em; text-transform: uppercase; color: #FFE125; margin-bottom: 0.8rem; }

/* TITLE */
.en-tete-tpn-content h1 { font-family: 'Quantico', sans-serif; font-size: clamp(26px, 4.5vw, 48px); font-weight: 700 !important; line-height: 1.18; margin-bottom: 1.2rem; color: #FFFFFF; }

.en-tete-tpn-content h1 span { color: #FFE125; }

/* TEXT */
.en-tete-tpn-content p { font-size: 15px; font-family: 'Outfit', sans-serif; font-weight: 300; color: rgba(255, 255, 255, 0.75); max-width: 480px; line-height: 1.75; margin-bottom: 2rem; }

/* IMAGE */
.en-tete-tpn-image { position: relative; z-index: 2; flex: 1; min-width: 300px; max-width: 48%; }

.en-tete-tpn-image-wrapper { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 225, 37, 0.25); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }

/* Accent line */
.en-tete-tpn-image-wrapper::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42%; height: 2px; background: #FFE125; border-radius: 0 0 4px 4px; z-index: 3; }

.en-tete-tpn-image img { width: 100%; display: block; }

/* REFLET */
.en-tete-tpn-image-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }

/* RESPONSIVE */
@media (max-width: 900px) { .en-tete-tpn-section { flex-direction: column; padding: 120px 24px 60px 24px; } .en-tete-tpn-content, .en-tete-tpn-image { max-width: 100%; width: 100%; text-align: center; align-items: center; } }

@media (max-width: 480px) { .en-tete-tpn-section { padding: 110px 16px 48px 16px; } .en-tete-tpn-content h1 { font-size: 1.8rem; } }

/*------------------------------------------------------------------------------bloc step------------------------------------------------------------------------------------*/
.step-tpn { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; padding: 80px 50px 120px 50px; background: #ffffff; overflow: hidden; box-sizing: border-box; }

.step-tpn__intro { position: relative; z-index: 2; }

.step-tpn__intro h2 { margin: 0 0 24px; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; font-weight: 800; color: #000000; }

.step-tpn__intro p { max-width: 300px; margin: 0; font-size: 16px; font-family: 'Outfit', sans-serif; line-height: 1.8; color: #3d4349; }

/* TIMELINE */
.step-tpn__timeline { position: relative; width: 100%; aspect-ratio: 800 / 400; }

.step-tpn__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.step-tpn__halo { fill: none; stroke: #FFF8C2; stroke-width: 28; stroke-linecap: round; }

.step-tpn__path { fill: none; stroke: #FFE125; stroke-width: 3; stroke-linecap: round; }

.step-tpn__dot-svg { fill: #000000; }

/* ÉTAPES */
.step-tpn__step { position: absolute; z-index: 3; }

/* dot 1 : cx=80 cy=320 → texte sous le dot, à gauche de la ligne */
.step-tpn__step--1 { left: 2%; top: 15%; }

.step-tpn__step--1 .step-tpn__number { left: 0; top: 8px; }

.step-tpn__step--1 .step-tpn__content { left: 0; top: 26px; }

/* dot 2 : cx=720 cy=60 → texte sous le dot, ancré à droite */
.step-tpn__step--2 { left: auto; right: 2%; top: 55%; }

.step-tpn__step--2 .step-tpn__number { right: 0; top: 8px; left: auto; }

.step-tpn__step--2 .step-tpn__content { right: 0; top: 26px; left: auto; text-align: right; }

.step-tpn__number { position: absolute; font-size: clamp(60px, 10vw, 120px); line-height: 1; font-weight: 800; color: rgba(0, 0, 0, 0.05); pointer-events: none; white-space: nowrap; }

.step-tpn__content { position: absolute; width: 200px; }

.step-tpn__content h3 { margin: 0 0 8px; font-size: clamp(14px, 1.8vw, 20px); line-height: 1.2; font-weight: 700; color: #000000; white-space: nowrap; }

.step-tpn__content p { margin: 0; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.7; font-family: 'Outfit', sans-serif; color: #3d4349; }

/* RESPONSIVE — tablet */
@media (max-width: 900px) { .step-tpn { grid-template-columns: 1fr; padding: 50px 24px; } .step-tpn__intro p { max-width: 100%; } .step-tpn__content { width: 160px; } }

/* RESPONSIVE — mobile : liste verticale */
@media (max-width: 560px) { .step-tpn__svg { display: none; } .step-tpn__timeline { aspect-ratio: auto; display: flex; flex-direction: column; gap: 36px; } .step-tpn__step { position: relative; left: auto !important; right: auto !important; top: auto !important; display: flex; align-items: flex-start; gap: 16px; padding-left: 14px; border-left: 3px solid #FFE125; } .step-tpn__step--2 .step-tpn__number, .step-tpn__step--2 .step-tpn__content { right: auto; text-align: left; } .step-tpn__number { position: relative; font-size: 48px; color: rgba(0, 0, 0, 0.08); flex-shrink: 0; } .step-tpn__content { position: relative; width: auto; } .step-tpn__content h3 { white-space: normal; font-size: 16px; } .step-tpn__content p { font-size: 14px; } }

/*------------------------------------------------------------------------------bloc step-4----------------------------------------------------------------------------------*/
.step-tpn-4 { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; padding: 80px 50px 120px 50px; background: #ffffff; overflow: hidden; box-sizing: border-box; }

.step-tpn-4__intro { position: relative; z-index: 2; }

.step-tpn-4__intro h2 { margin: 0 0 24px; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; font-weight: 800; color: #000000; }

.step-tpn-4__intro p { max-width: 300px; font-family: 'Outfit', sans-serif; margin: 0; font-size: 16px; line-height: 1.8; color: #3d4349; }

/* TIMELINE */
.step-tpn-4__timeline { position: relative; width: 100%; aspect-ratio: 1000 / 420; }

.step-tpn-4__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.step-tpn-4__halo { fill: none; stroke: #FFF8C2; stroke-width: 28; stroke-linecap: round; }

.step-tpn-4__path { fill: none; stroke: #FFE125; stroke-width: 3; stroke-linecap: round; }

.step-tpn-4__dot-svg { fill: #000000; }

/* ÉTAPES */
.step-tpn-4__step { position: absolute; z-index: 3; }

/* étape 1 */
.step-tpn-4__step--1 { left: 4%; top: 16%; }

.step-tpn-4__step--1 .step-tpn-4__number { left: 0; top: 8px; }

.step-tpn-4__step--1 .step-tpn-4__content { left: 0; top: 26px; }

/* étape 2 */
.step-tpn-4__step--2 { left: 36%; top: 45%; transform: translateX(-50%); }

.step-tpn-4__step--2 .step-tpn-4__number { left: 50%; top: 8px; transform: translateX(-50%); }

.step-tpn-4__step--2 .step-tpn-4__content { left: 50%; top: 26px; transform: translateX(-50%); text-align: center; }

/* étape 3 */
.step-tpn-4__step--3 { left: 68%; top: 74%; transform: translateX(-50%); }

.step-tpn-4__step--3 .step-tpn-4__number { left: 50%; top: 8px; transform: translateX(-50%); }

.step-tpn-4__step--3 .step-tpn-4__content { left: 50%; top: 26px; transform: translateX(-50%); text-align: center; }

/* étape 4 */
.step-tpn-4__step--4 { right: 4%; top: 92%; }

.step-tpn-4__step--4 .step-tpn-4__number { right: 0; top: 8px; left: auto; }

.step-tpn-4__step--4 .step-tpn-4__content { right: 0; top: 26px; left: auto; text-align: right; }

/* éléments texte */
.step-tpn-4__number { position: absolute; font-size: clamp(60px, 10vw, 120px); line-height: 1; font-weight: 800; color: rgba(0, 0, 0, 0.05); pointer-events: none; white-space: nowrap; }

.step-tpn-4__content { position: absolute; width: 220px; }

.step-tpn-4__content h3 { margin: 0 0 8px; font-size: clamp(14px, 1.8vw, 20px); line-height: 1.2; font-weight: 700; color: #000000; white-space: nowrap; }

.step-tpn-4__content p { margin: 0; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.7; font-family: 'Outfit', sans-serif; color: #3d4349; }

/* TABLET */
@media (max-width: 1200px) { .step-tpn-4 { grid-template-columns: 1fr; gap: 30px; padding: 80px 24px; } .step-tpn-4__intro p { max-width: 100%; } .step-tpn-4__timeline { aspect-ratio: 1000 / 520; } .step-tpn-4__content { width: 180px; } .step-tpn-4__content h3 { white-space: normal; } }

/* MOBILE */
@media (max-width: 560px) { .step-tpn-4__svg { display: none; } .step-tpn-4__timeline { aspect-ratio: auto; display: flex; flex-direction: column; gap: 36px; } .step-tpn-4__step { position: relative; left: auto !important; right: auto !important; top: auto !important; transform: none !important; display: flex; align-items: flex-start; gap: 16px; padding-left: 14px; border-left: 3px solid #FFE125; } .step-tpn-4__number { position: relative; top: auto !important; left: auto !important; right: auto !important; transform: none !important; font-size: 48px; color: rgba(0, 0, 0, 0.08); flex-shrink: 0; } .step-tpn-4__content { position: relative; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: auto; text-align: left !important; } .step-tpn-4__content h3 { white-space: normal; font-size: 16px; } .step-tpn-4__content p { font-size: 14px; } }

/*------------------------------------------------------------------------------bloc horaire----------------------------------------------------------------------------------*/
.horaire-tpn-section { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.88)), url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FaqR3DuIOSvUHkVg9RDB55JhlDgt1%2Fimages%2F36_u4v8.webp?alt=media&token=3ce4b18c-fde9-4181-9444-77a23a4dc4cf") center center/cover no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; position: relative; }

/* ===== BLOC HORAIRE ===== */
.horaire-tpn { background: #FFFFFF; border-radius: 16px; border: 2px solid #000000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); padding: 32px; max-width: 550px; width: 100%; margin: 0 auto; font-family: 'Outfit', sans-serif; transition: box-shadow 0.3s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; position: relative; z-index: 1; }

.horaire-tpn:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(255, 225, 37, 0.24); border-color: #FFE125 !important; }

.horaire-tpn .header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

.horaire-tpn .icon-wrapper { background: rgba(255, 225, 37, 0.22); padding: 10px; border-radius: 10px; }

.horaire-tpn .icon { width: 24px; height: 24px; color: #000000; }

.horaire-tpn h2 { font-size: 24px; font-weight: 700 !important; color: #000000; margin: 0; }

.horaire-tpn .schedule { display: flex; flex-direction: column; gap: 8px; }

.horaire-tpn .day-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 10px; transition: background 0.2s ease, transform 0.2s ease; }

.horaire-tpn .day-row:hover { background: rgba(255, 225, 37, 0.1); }

.horaire-tpn .day-row.today { background: rgba(255, 225, 37, 0.2); border-left: 4px solid #FFE125; font-weight: 600; }

.horaire-tpn .day-name { font-size: 16px; color: #000000; }

.horaire-tpn .today-badge { font-size: 18px; color: rgba(0, 0, 0, 0.75); margin-left: 8px; }

.horaire-tpn .hours { font-size: 16px; font-weight: 500; color: #000000; font-variant-numeric: tabular-nums; }

.horaire-tpn .hours.closed { color: rgba(0, 0, 0, 0.65); }

.horaire-tpn .open-status { margin-top: 12px; padding: 10px 14px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.3; width: 100%; display: block; }

.horaire-tpn .open-status.open { background: rgba(34, 197, 94, 0.12); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.35); }

.horaire-tpn .open-status.closed { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }

@media (max-width: 480px) { .horaire-tpn { padding: 24px; } .horaire-tpn h2 { font-size: 20px; } .horaire-tpn .day-row { padding: 10px 12px; } .horaire-tpn .day-name, .horaire-tpn .hours { font-size: 14px; } .horaire-tpn .today-badge { font-size: 14px; } }

/*-------------------------------------------------------------------------bloc texte presta-T--------------------------------------------------------------------------------*/
.texte-photo-tpn-terrassement { position: relative; background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FaqR3DuIOSvUHkVg9RDB55JhlDgt1%2Fimages%2F1_r2qq.webp?alt=media&token=689080e8-6b52-4503-b3ae-960597332115") center/cover no-repeat; padding: 120px 80px; overflow: hidden; }

.texte-photo-tpn-terrassement::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: 1; }

.texte-photo-tpn-terrassement .overlay { position: relative; z-index: 2; }

.texte-photo-tpn-terrassement .row { display: flex; align-items: center; justify-content: space-between; gap: 80px; margin-bottom: 100px; }

.texte-photo-tpn-terrassement .row:last-child { margin-bottom: 0; }

.texte-photo-tpn-terrassement .row.reverse { flex-direction: row-reverse; }

.texte-photo-tpn-terrassement .image { flex: 0 0 38%; display: flex; }

.texte-photo-tpn-terrassement .row:not(.reverse) .image { justify-content: flex-start; }

.texte-photo-tpn-terrassement .row.reverse .image { justify-content: flex-end; }

.texte-photo-tpn-terrassement .image img { display: block; width: 100%; height: auto; border-radius: 16px; }

.texte-photo-tpn-terrassement .text { flex: 0 0 55%; max-width: none; color: white; }

.texte-photo-tpn-terrassement .row:not(.reverse) .text { text-align: left; }

.texte-photo-tpn-terrassement .row.reverse .text { text-align: left; margin-left: 0; }

.texte-photo-tpn-terrassement .text h2 { margin: 0 0 24px; font-size: 32px; line-height: 1.1; color: #FFE125; text-align: center; }

.texte-photo-tpn-terrassement .text p { margin: 0; font-size: 16px; font-family: 'Outfit', sans-serif; line-height: 1.7; max-width: 900px; }

@media (max-width: 1024px) { .texte-photo-tpn-terrassement { padding: 90px 40px; } .texte-photo-tpn-terrassement .row, .texte-photo-tpn-terrassement .row.reverse { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 80px; } .texte-photo-tpn-terrassement .image, .texte-photo-tpn-terrassement .text { flex: 1 1 100%; width: 100%; } .texte-photo-tpn-terrassement .row.reverse .image { justify-content: flex-start; } .texte-photo-tpn-terrassement .image img { max-width: 100%; } .texte-photo-tpn-terrassement .text h2 { font-size: 46px; } .texte-photo-tpn-terrassement .text p { font-size: 20px; max-width: 100%; } }

@media (max-width: 767px) { .texte-photo-tpn-terrassement { padding: 70px 20px; } .texte-photo-tpn-terrassement .text h2 { font-size: 34px; } .texte-photo-tpn-terrassement .text p { font-size: 18px; line-height: 1.6; } }

/*------------------------------------------------------------------------bloc texte presta-A--------------------------------------------------------------------------------*/
.texte-photo-tpn-assainissement { position: relative; background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FaqR3DuIOSvUHkVg9RDB55JhlDgt1%2Fimages%2F2_5488.webp?alt=media&token=b22a77d5-a3e2-4ab9-90d9-dc7c979965e2") center/cover no-repeat; padding: 120px 80px; overflow: hidden; }

.texte-photo-tpn-assainissement::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: 1; }

.texte-photo-tpn-assainissement .overlay { position: relative; z-index: 2; }

.texte-photo-tpn-assainissement .row { display: flex; align-items: center; justify-content: space-between; gap: 80px; margin-bottom: 100px; }

.texte-photo-tpn-assainissement .row:last-child { margin-bottom: 0; }

.texte-photo-tpn-assainissement .row.reverse { flex-direction: row-reverse; }

.texte-photo-tpn-assainissement .image { flex: 0 0 38%; display: flex; }

.texte-photo-tpn-assainissement .row:not(.reverse) .image { justify-content: flex-start; }

.texte-photo-tpn-assainissement .row.reverse .image { justify-content: flex-end; }

.texte-photo-tpn-assainissement .image img { display: block; width: 100%; height: auto; border-radius: 16px; }

.texte-photo-tpn-assainissement .text { flex: 0 0 55%; max-width: none; color: white; }

.texte-photo-tpn-assainissement .row:not(.reverse) .text { text-align: left; }

.texte-photo-tpn-assainissement .row.reverse .text { text-align: left; margin-left: 0; }

.texte-photo-tpn-assainissement .text h2 { margin: 0 0 24px; font-size: 32px; line-height: 1.1; color: #FFE125; text-align: center; }

.texte-photo-tpn-assainissement .text p { margin: 0; font-size: 16px; font-family: 'Outfit', sans-serif; line-height: 1.7; max-width: 900px; }

@media (max-width: 1024px) { .texte-photo-tpn-assainissement { padding: 90px 40px; } .texte-photo-tpn-assainissement .row, .texte-photo-tpn-assainissement .row.reverse { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 80px; } .texte-photo-tpn-assainissement .image, .texte-photo-tpn-assainissement .text { flex: 1 1 100%; width: 100%; } .texte-photo-tpn-assainissement .row.reverse .image { justify-content: flex-start; } .texte-photo-tpn-assainissement .image img { max-width: 100%; } .texte-photo-tpn-assainissement .text h2 { font-size: 46px; } .texte-photo-tpn-assainissement .text p { font-size: 20px; max-width: 100%; } }

@media (max-width: 767px) { .texte-photo-tpn-assainissement { padding: 70px 20px; } .texte-photo-tpn-assainissement .text h2 { font-size: 34px; } .texte-photo-tpn-assainissement .text p { font-size: 18px; line-height: 1.6; } }

/*----------------------------------------------------------------------bloc texte presta-A-P--------------------------------------------------------------------------------*/
.texte-photo-tpn-amenagement-exterieur { position: relative; background: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FaqR3DuIOSvUHkVg9RDB55JhlDgt1%2Fimages%2F3_ifuu.webp?alt=media&token=9217f405-8348-4ae2-8b52-bd31a2379d18") center/cover no-repeat; padding: 120px 80px; overflow: hidden; }

.texte-photo-tpn-amenagement-exterieur::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: 1; }

.texte-photo-tpn-amenagement-exterieur .overlay { position: relative; z-index: 2; }

.texte-photo-tpn-amenagement-exterieur .row { display: flex; align-items: center; justify-content: space-between; gap: 80px; margin-bottom: 100px; }

.texte-photo-tpn-amenagement-exterieur .row:last-child { margin-bottom: 0; }

.texte-photo-tpn-amenagement-exterieur .row.reverse { flex-direction: row-reverse; }

.texte-photo-tpn-amenagement-exterieur .image { flex: 0 0 38%; display: flex; }

.texte-photo-tpn-amenagement-exterieur .row:not(.reverse) .image { justify-content: flex-start; }

.texte-photo-tpn-amenagement-exterieur .row.reverse .image { justify-content: flex-end; }

.texte-photo-tpn-amenagement-exterieur .image img { display: block; width: 100%; height: auto; border-radius: 16px; }

.texte-photo-tpn-amenagement-exterieur .text { flex: 0 0 55%; max-width: none; color: white; }

.texte-photo-tpn-amenagement-exterieur .row:not(.reverse) .text { text-align: left; }

.texte-photo-tpn-amenagement-exterieur .row.reverse .text { text-align: left; margin-left: 0; }

.texte-photo-tpn-amenagement-exterieur .text h2 { margin: 0 0 24px; font-size: 32px; line-height: 1.1; color: #FFE125; text-align: center; }

.texte-photo-tpn-amenagement-exterieur .text p { margin: 0; font-size: 16px; font-family: 'Outfit', sans-serif; line-height: 1.7; max-width: 900px; }

@media (max-width: 1024px) { .texte-photo-tpn-amenagement-exterieur { padding: 90px 40px; } .texte-photo-tpn-amenagement-exterieur .row, .texte-photo-tpn-amenagement-exterieur .row.reverse { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 80px; } .texte-photo-tpn-amenagement-exterieur .image, .texte-photo-tpn-amenagement-exterieur .text { flex: 1 1 100%; width: 100%; } .texte-photo-tpn-amenagement-exterieur .row.reverse .image { justify-content: flex-start; } .texte-photo-tpn-amenagement-exterieur .image img { max-width: 100%; } .texte-photo-tpn-amenagement-exterieur .text h2 { font-size: 46px; } .texte-photo-tpn-amenagement-exterieur .text p { font-size: 20px; max-width: 100%; } }

@media (max-width: 767px) { .texte-photo-tpn-amenagement-exterieur { padding: 70px 20px; } .texte-photo-tpn-amenagement-exterieur .text h2 { font-size: 34px; } .texte-photo-tpn-amenagement-exterieur .text p { font-size: 18px; line-height: 1.6; } }

/*----------------------------------------------------------------------Galerie Custom chantier------------------------------------------------------------------------------*/
/* -------- SECTION -------- */
.reali-tpn-travaux-section { background: #FFFFFF; padding: 60px 20px 0 20px; }

.reali-tpn-travaux-overlay { max-width: 1200px; margin: 0 auto; padding: 40px 20px 20px; display: block !important; }

.reali-tpn-travaux-main-title { text-align: center; font-size: 2.8rem; font-weight: 900 !important; color: #FFE125; font-family: 'Quantico', sans-serif; margin-bottom: 32px; }

/* -------- FIX DES <p> AUTOMATIQUES DU BUILDER -------- */
.reali-tpn-travaux-filter-tabs p { margin: 0 !important; padding: 0 !important; display: inline !important; }

/* -------- CONTAINERS DES BOUTONS -------- */
.reali-tpn-travaux-filter-tabs { width: 100%; display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; margin: 20px 0 !important; }

.reali-tpn-travaux-bottom-filters { margin-top: 40px !important; }

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

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

.tpnButton.button_homepageDoubleScreen.active { color: #000000 !important; background: #FFE125 !important; border-color: #FFE125 !important; box-shadow: inset 0 -100px 0 0 #FFE125 !important; }

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

/* -------- GRID DES IMAGES -------- */
.reali-tpn-travaux-realisations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.reali-tpn-travaux-realisation-card { border-radius: 8px; overflow: hidden; transition: transform 0.2s; }

.reali-tpn-travaux-realisation-card:hover { transform: translateY(-4px); }

.reali-tpn-travaux-realisation-card img { width: 100%; height: 320px; object-fit: cover; cursor: pointer; }

.reali-tpn-travaux-realisation-card.hidden { display: none !important; }

/* -------- MODALE -------- */
.reali-tpn-travaux-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 1000; align-items: center; justify-content: center; padding: 80px 20px 20px 20px; box-sizing: border-box; }

.reali-tpn-travaux-modal-content { max-width: 90vw; max-height: 75vh; width: auto; height: auto; border-radius: 25px; object-fit: contain; display: block; }

.reali-tpn-travaux-modal-close { position: absolute; top: 110px; right: 32px; color: #FFE125; font-size: 36px; cursor: pointer; }

/* -------- RESPONSIVE -------- */
@media (max-width: 900px) { .reali-tpn-travaux-realisations-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .reali-tpn-travaux-realisation-card img { height: 240px; } .tpnButton.button_homepageDoubleScreen { margin: 8px !important; padding: 12px 20px !important; font-size: 15px !important; } }

@media (max-width: 500px) { .reali-tpn-travaux-main-title { font-size: 2rem; } .reali-tpn-travaux-realisation-card img { height: 200px; } .reali-tpn-travaux-filter-tabs { gap: 8px !important; } .tpnButton.button_homepageDoubleScreen { margin: 6px !important; padding: 10px 16px !important; font-size: 14px !important; } }

#realisation { scroll-margin-top: 60px; }

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