@charset "UTF-8";
@import url(main.css);
/*-------------------------------- BARRE DE NAVIGATION --------------------------------*/
/* Logo */
.navbar-brand { width: 11vw !important; height: 9vh !important; transform: translateX(60px); }

.logo_nav { height: 8vh !important; }

/* Police générale de la navigation */
.navbar-nav, .navbar-nav a, .navbar-nav span, .button-header-telephone { font-family: "Poppins", sans-serif !important; }

/* Couleur des liens au survol */
.navbar-nav .animated-border-button span { transition: color 0.3s ease; }

.navbar-nav .animated-border-button:hover span { color: #b4212d !important; }

/* Bouton téléphone */
.button-header-telephone { background-color: transparent !important; color: #233369 !important; border: 2px solid #233369 !important; border-radius: 50px !important; font-family: "Poppins", sans-serif !important; font-weight: 600 !important; font-synthesis-weight: none; overflow: hidden !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.button-header-telephone, .button-header-telephone span, .button-header-telephone p { color: #233369 !important; }

/* Survol du bouton téléphone */
.button-header-telephone:hover { background-color: #233369 !important; color: #ffffff !important; border-color: #233369 !important; transform: translateY(-2px); }

.button-header-telephone:hover span, .button-header-telephone:hover p { color: #ffffff !important; }

/* Arrondi du bouton */
a.button-header-telephone, a.button-header-telephone.rounded-pill, .button_header.button-header-telephone, .button_header.button-header-telephone.rounded-pill { border-radius: 50px !important; overflow: hidden !important; }

/* Masquage de l’icône téléphone */
.button-header-telephone i, .button-header-telephone .bi, .button-header-telephone .bi-telephone { display: none !important; }

/* Ombre sous la navigation */
nav.navbar { box-shadow: 0 18px 25px -22px rgba(35, 51, 105, 0.55); }

@media screen and (max-width: 991px) { .navbar-brand { width: auto !important; height: 8vh !important; transform: none; } .logo_nav { width: auto !important; max-width: 180px; height: 7vh !important; object-fit: contain; } }

@media screen and (max-width: 576px) { .navbar-brand { height: 7vh !important; } .logo_nav { max-width: 150px; height: 6vh !important; } .button-header-telephone { border-radius: 50px !important; } }

/*------------------------------------HERO--------------------------------*/
.hero-contact { position: relative; display: flex; align-items: center; width: 100%; min-height: clamp(720px, 88vh, 950px); margin: 0; padding: 0; overflow: hidden; isolation: isolate; background-repeat: no-repeat; background-position: center; background-size: 110% auto; }

/* ================================================== DÉGRADÉ NOIR ================================================== */
.hero-contact__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.05) 100%); pointer-events: none; }

/* ================================================== CONTENEUR ================================================== */
.hero-contact__container { position: relative; z-index: 1; width: 100%; max-width: 1500px; margin: 0 auto; padding: 130px 7% 80px; box-sizing: border-box; }

/* ================================================== CONTENU À GAUCHE ================================================== */
.hero-contact__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1100px; margin: 0; padding: 0; }

/* ================================================== LOGO ================================================== */
.hero-contact__logo { display: flex; align-items: center; justify-content: flex-start; width: auto; max-width: 340px; margin: 0 0 24px; padding: 0; }

.hero-contact__logo img { display: block; width: auto; height: auto; max-width: 340px; max-height: 220px; margin: 0; padding: 0; object-fit: contain; object-position: left center; }

/* ================================================== TITRE ================================================== */
.hero-contact__title { width: 100%; max-width: 1100px; margin: 0 0 18px; padding: 0; color: #ffffff; }

.hero-contact__title h1, .hero-contact__title h2, .hero-contact__title h3, .hero-contact__title h4, .hero-contact__title p { width: 100%; margin: 0; padding: 0; color: #ffffff; line-height: 1.04; letter-spacing: -0.7px; }

/* ================================================== DESCRIPTION ================================================== */
.hero-contact__description { width: 100%; max-width: 760px; margin: 0; padding: 0; color: #ffffff; }

.hero-contact__description, .hero-contact__description p, .hero-contact__description span { color: #ffffff; }

.hero-contact__description p { margin: 0; padding: 0; line-height: 1.7; }

/* ================================================== BOUTON DOUBLE ================================================== */
.hero-contact__actions { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 430px; min-height: 56px; margin: 28px 0 0; padding: 0; overflow: hidden; isolation: isolate; background: #ffffff; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); }

/* Partie colorée coulissante */
.hero-contact__actions::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 50%; background: #233369; border-radius: 999px; transform: translateX(0); transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1); }

.hero-contact__actions:has( .hero-contact__action--phone:hover)::before { transform: translateX(100%); }

.hero-contact__actions:has( .hero-contact__action--page:hover)::before { transform: translateX(0); }

/* ================================================== LIENS ================================================== */
.hero-contact__action { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 54px; margin: 0; padding: 10px 20px; box-sizing: border-box; background: transparent; color: #000000 !important; border: none; border-radius: 999px; line-height: 1.2; text-align: center; text-decoration: none !important; transition: color 0.35s ease, transform 0.3s ease; }

.hero-contact__action span, .hero-contact__action span p, .hero-contact__action p { margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: 1.2; }

.hero-contact__action--page { color: #ffffff !important; }

.hero-contact__actions:has( .hero-contact__action--phone:hover) .hero-contact__action--phone { color: #ffffff !important; }

.hero-contact__actions:has( .hero-contact__action--phone:hover) .hero-contact__action--page { color: #111111 !important; }

.hero-contact__actions:has( .hero-contact__action--page:hover) .hero-contact__action--page { color: #ffffff !important; }

.hero-contact__actions:has( .hero-contact__action--page:hover) .hero-contact__action--phone { color: #111111 !important; }

.hero-contact__action:hover { transform: translateY(-1px); }

.hero-contact__action i { margin: 0; padding: 0; color: inherit !important; line-height: 1; }

.hero-contact__action--phone, .hero-contact__action--phone span, .hero-contact__action--phone p { white-space: nowrap !important; }

.hero-contact__action--phone p { margin: 0 !important; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 900px) { .hero-contact { min-height: 760px; background-size: cover; } .hero-contact__container { padding: 120px 60px 70px; } .hero-contact__content { max-width: 760px; } .hero-contact__logo, .hero-contact__logo img { max-width: 260px; } .hero-contact__logo img { max-height: 180px; } .hero-contact__title { max-width: 760px; margin-bottom: 16px; } .hero-contact__description { max-width: 650px; } .hero-contact__actions { margin-top: 25px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 600px) { .hero-contact { min-height: 740px; background-position: center; background-size: cover; } .hero-contact__overlay { background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.68) 100%); } .hero-contact__container { padding: 110px 22px 55px; } .hero-contact__content { max-width: 100%; } .hero-contact__logo { margin-bottom: 20px; } .hero-contact__logo, .hero-contact__logo img { max-width: 210px; } .hero-contact__logo img { max-height: 145px; } .hero-contact__title { max-width: 100%; margin-bottom: 14px; } .hero-contact__title h1, .hero-contact__title h2, .hero-contact__title h3, .hero-contact__title h4, .hero-contact__title p { font-size: 36px; line-height: 1.06; letter-spacing: -0.4px; } .hero-contact__description { max-width: 100%; } .hero-contact__description p { line-height: 1.6; } .hero-contact__actions { max-width: 100%; min-height: 54px; margin-top: 22px; } .hero-contact__action { min-height: 52px; padding: 9px 12px; font-size: 14px; } }

/*---------------------------------HERO PAGES SECONDAIRES---------------------------*/
.carousel-item-homepage img, .first-carousel-img, .second-carousel-img { transform: none !important; transition: none !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; }

.titleText { letter-spacing: 0; }

/* ================================================== DIMENSIONS DU CARROUSEL ================================================== */
.first-carousel-img, .second-carousel-img { display: block; width: 100%; height: 55vh; object-fit: cover; }

.carousel-item-homepage { position: relative; height: 55vh; overflow: hidden; isolation: isolate; }

#fullHeight { height: 55vh; overflow: hidden; }

/* ================================================== DÉGRADÉ NOIR SUR LES PHOTOS ================================================== */
.carousel-item-homepage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 35%, rgba(0, 0, 0, 0.32) 68%, rgba(0, 0, 0, 0.12) 100%); pointer-events: none; }

/* Place les textes devant le dégradé */
.carousel-item-homepage .carousel-caption, .carousel-item-homepage .carousel-content, .carousel-item-homepage .hero-content, .carousel-item-homepage .titleText { z-index: 2; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .first-carousel-img, .second-carousel-img, .carousel-item-homepage, #fullHeight { height: 50vh; } .carousel-item-homepage::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 50%, rgba(0, 0, 0, 0.25) 100%); } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 576px) { .first-carousel-img, .second-carousel-img, .carousel-item-homepage, #fullHeight { height: 50vh; } .first-carousel-img { height: 35vh; } .carousel-item-homepage::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.56) 60%, rgba(0, 0, 0, 0.3) 100%); } }

/*--------------------------------------BLOC PRÉSENTATION-----------------------------------*/
.nc-about-section { position: relative; width: 100%; padding: 100px 30px; background-color: #f3f3f3; box-sizing: border-box; overflow: hidden; }

.nc-about-section *, .nc-about-section *::before, .nc-about-section *::after { box-sizing: border-box; }

.nc-about-container { width: 100%; max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 90px; }

/* ================================================== PHOTO ================================================== */
.nc-about-visual { position: relative; width: 100%; }

.nc-about-photo { position: relative; width: 100%; height: 550px; background-color: #d8d8d8; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 60px rgba(16, 30, 65, 0.16); }

.nc-about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ================================================== CONTENU ================================================== */
.nc-about-content { position: relative; padding-right: 20px; }

.nc-about-eyebrow { margin: 0 0 20px; color: #b4212d; font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }

.nc-about-title { margin: 0 0 28px; color: #183069; font-size: 48px; line-height: 1.12; font-weight: 700; letter-spacing: -1px; }

/* ================================================== DESCRIPTION ET GRAND TRAIT ================================================== */
.nc-about-description { position: relative; padding-left: 28px; color: #5f5f5f; font-size: 17px; line-height: 1.8; font-weight: 400; }

.nc-about-description::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; background-color: #b4212d; border-radius: 10px; }

.nc-about-description p { margin-top: 0; margin-bottom: 18px; }

.nc-about-description p:last-child { margin-bottom: 0; }

/* ================================================== TROIS POINTS ================================================== */
.nc-about-values { margin-top: 38px; padding-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid rgba(24, 48, 105, 0.15); }

.nc-about-value { display: flex; flex-direction: column; gap: 8px; }

.nc-about-value-number { color: #b4212d; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 1px; }

.nc-about-value p { margin: 0; color: #183069; font-size: 14px; line-height: 1.45; font-weight: 600; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .nc-about-section { padding: 75px 25px; } .nc-about-container { grid-template-columns: 1fr; gap: 60px; } .nc-about-visual, .nc-about-content { width: 100%; max-width: 720px; margin: 0 auto; } .nc-about-photo { height: 500px; border-radius: 22px; } .nc-about-content { padding-right: 0; } .nc-about-title { font-size: 40px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 576px) { .nc-about-section { padding: 55px 18px; } .nc-about-container { gap: 42px; } .nc-about-photo { height: 390px; border-radius: 18px; } .nc-about-eyebrow { margin-bottom: 16px; font-size: 11px; letter-spacing: 2px; } .nc-about-title { margin-bottom: 22px; font-size: 32px; line-height: 1.2; } .nc-about-description { padding-left: 20px; font-size: 15px; line-height: 1.7; } .nc-about-values { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; padding-top: 24px; } .nc-about-value { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; } }

/*---------------------------------------BLOC SERVICES----------------------------------*/
.sector-cards-section { position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding: 0; overflow: hidden; }

.sector-cards { width: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0; }

.sector-card { position: relative; flex: 1 1 0; min-width: 0; min-height: 430px; display: flex; align-items: flex-end; overflow: hidden; color: #ffffff; text-decoration: none; border-radius: 0; transition: flex-grow 0.4s ease, flex-basis 0.4s ease; }

.sector-card-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* ================================================== DÉGRADÉ NOIR ================================================== */
.sector-card-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.9) 100%); transition: background 0.4s ease; }

/* ================================================== CONTENU ================================================== */
.sector-card-content { position: relative; z-index: 2; width: 100%; padding: 0 28px 70px; }

.sector-card-content h2, .sector-card-content h3, .sector-card-content h4, .sector-card-content h5 { margin: 0; color: #ffffff; font-size: 26px; line-height: 1.15; font-weight: 700; }

.sector-card-content h2 span, .sector-card-content h3 span, .sector-card-content h4 span, .sector-card-content h5 span { color: inherit !important; }

/* ================================================== TRAIT ROUGE ================================================== */
.sector-card-line { display: block; width: 70px; height: 3px; margin: 12px 0 20px; background-color: #b4212d; border-radius: 10px; transition: width 0.4s ease; }

/* ================================================== BOUTON BLEU ================================================== */
.sector-card-button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 13px 25px; background-color: #233369; color: #ffffff; border: 2px solid #233369; border-radius: 50px; text-decoration: none; white-space: nowrap; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.sector-card-button p { margin: 0 !important; padding: 0 !important; color: inherit !important; white-space: nowrap !important; }

.sector-card-button p span, .sector-card-button span { color: inherit !important; }

/* ================================================== SURVOL DES CARTES ================================================== */
.sector-card:hover { flex-grow: 1.35; }

.sector-card:hover .sector-card-img { transform: scale(1.08); }

.sector-card:hover .sector-card-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.82) 100%); }

/* Le trait reste rouge au survol */
.sector-card:hover .sector-card-line { width: 95px; background-color: #b4212d; }

/* Le bouton devient blanc au survol */
.sector-card:hover .sector-card-button { background-color: #ffffff; color: #233369 !important; border-color: #ffffff; transform: translateY(-2px); }

.sector-card:hover .sector-card-button p, .sector-card:hover .sector-card-button p span, .sector-card:hover .sector-card-button span { color: #233369 !important; }

/* Les titres restent blancs au survol */
.sector-card:hover h2, .sector-card:hover h2 span, .sector-card:hover h3, .sector-card:hover h3 span, .sector-card:hover h4, .sector-card:hover h4 span, .sector-card:hover h5, .sector-card:hover h5 span { color: #ffffff !important; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .sector-cards { flex-wrap: wrap; } .sector-card { flex: 0 0 50%; min-height: 360px; } .sector-card:hover { flex: 0 0 50%; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 600px) { .sector-card { flex: 0 0 100%; min-height: 320px; } .sector-card:hover { flex: 0 0 100%; } .sector-card-content { padding: 0 24px 45px; } .sector-card-content h2, .sector-card-content h3, .sector-card-content h4, .sector-card-content h5 { font-size: 23px; } .sector-card-button { padding: 12px 22px; border-radius: 50px; } }

/*----------------------------------------BLOC AVANT/APRES------------------------------------*/
.before-after-premium { position: relative; width: 100%; padding: 100px 30px; background-color: #233369; box-sizing: border-box; overflow: hidden; }

.before-after-premium *, .before-after-premium *::before, .before-after-premium *::after { box-sizing: border-box; }

.before-after-container { position: relative; z-index: 1; width: 100%; max-width: 1350px; margin: 0 auto; }

.before-after-layout { display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: center; gap: 85px; }

/* ================================================== CARTE AVANT / APRÈS ================================================== */
.before-after-card { position: relative; width: 100%; overflow: hidden; background-color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); transition: transform 0.4s ease, box-shadow 0.4s ease; }

.before-after-card:hover { transform: translateY(-6px); box-shadow: 0 32px 75px rgba(0, 0, 0, 0.35); }

/* ================================================== ZONE IMAGE ================================================== */
.before-after-media { position: relative; width: 100%; height: 560px; overflow: hidden; background-color: #233369; }

.before-after-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 1.1s ease; }

.before-after-slide.is-visible { opacity: 1; visibility: visible; }

.before-after-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 5s ease; }

.before-after-slide.is-visible img { transform: scale(1.04); }

.before-after-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.02) 68%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; }

/* ================================================== ÉTIQUETTES AVANT / APRÈS ================================================== */
.before-after-labels { position: absolute; top: 22px; left: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 5px; background-color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); }

.before-after-label { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 19px; background-color: transparent; color: #233369; border-radius: 50px; font-size: 14px; line-height: 1; font-weight: 600; transition: background-color 0.45s ease, color 0.45s ease, transform 0.45s ease; }

.before-after-label.is-active { background-color: #b4212d; color: #ffffff; transform: scale(1.03); }

/* ================================================== BARRE DE PROGRESSION ================================================== */
.before-after-progress { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 4; height: 4px; overflow: hidden; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; }

.before-after-progress span { display: block; width: 0; height: 100%; background-color: #b4212d; border-radius: inherit; }

.before-after-card.is-running .before-after-progress span { animation-name: before-after-progress-animation; animation-timing-function: linear; animation-fill-mode: forwards; }

@keyframes before-after-progress-animation { from { width: 0; }
  to { width: 100%; } }

/* ================================================== CONTENU ================================================== */
.before-after-text { position: relative; width: 100%; }

.before-after-title { margin: 0 0 28px; color: #ffffff; }

.before-after-title h2, .before-after-title h3, .before-after-title h4, .before-after-title h5, .before-after-title h6, .before-after-title p { margin: 0; color: #ffffff; }

.before-after-title span { color: inherit !important; }

.before-after-description { position: relative; margin-bottom: 34px; padding-left: 27px; color: rgba(255, 255, 255, 0.82); }

.before-after-description::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; background-color: #b4212d; border-radius: 50px; }

.before-after-description p { margin-top: 0; margin-bottom: 18px; color: rgba(255, 255, 255, 0.82); }

.before-after-description p:last-child { margin-bottom: 0; }

.before-after-description p span, .before-after-description span { color: inherit !important; }

/* ================================================== BOUTON ================================================== */
.before-after-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 13px 25px; background-color: transparent; color: #ffffff !important; border: 2px solid #ffffff; border-radius: 50px; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.before-after-button:hover { background-color: #b4212d; color: #ffffff !important; border-color: #b4212d; transform: translateY(-2px); }

.before-after-button-text, .before-after-button-text p, .before-after-button-text span { margin: 0 !important; padding: 0 !important; color: #ffffff !important; white-space: nowrap; }

.before-after-button-arrow { display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; line-height: 1; transition: transform 0.3s ease; }

.before-after-button:hover .before-after-button-arrow { color: #ffffff !important; transform: translateX(4px); }

.before-after-button .before-after-button-arrow i, .before-after-button .before-after-button-arrow svg, .before-after-button .before-after-button-arrow svg path { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 1050px) { .before-after-premium { padding: 80px 25px; } .before-after-layout { grid-template-columns: 1fr; gap: 60px; } .before-after-card, .before-after-text { width: 100%; max-width: 760px; margin: 0 auto; } .before-after-media { height: 540px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 700px) { .before-after-premium { padding: 60px 20px; } .before-after-layout { gap: 45px; } .before-after-card { border-radius: 22px; } .before-after-media { height: 420px; } .before-after-title { margin-bottom: 22px; } .before-after-description { margin-bottom: 28px; padding-left: 21px; } }

@media screen and (max-width: 480px) { .before-after-premium { padding: 50px 15px; } .before-after-card { border-radius: 18px; } .before-after-media { height: 350px; } .before-after-labels { top: 15px; left: 15px; } .before-after-label { min-height: 36px; padding: 0 14px; font-size: 12px; } .before-after-progress { right: 15px; bottom: 15px; left: 15px; } .before-after-button { width: 100%; min-height: 50px; padding: 12px 20px; } }

/*------------------------------------BLOC SEO------------------------------------*/
/* ================================================== BLOCS ACTIVITÉS — NC COUVERTURE ================================================== */
.first-activity-div, .second-activity-div, .third-activity-div { position: relative !important; width: calc(100% - 40px) !important; max-width: 1350px !important; margin: 60px auto !important; padding: 50px !important; background: linear-gradient(135deg, #ffffff 0%, #ffffff 72%, rgba(35, 51, 105, 0.045) 100%) !important; color: #4f5360 !important; border: 1px solid rgba(35, 51, 105, 0.1) !important; border-radius: 28px !important; box-shadow: 0 20px 55px rgba(35, 51, 105, 0.12) !important; overflow: hidden !important; font-family: "Poppins", sans-serif !important; transition: transform 0.35s ease, box-shadow 0.35s ease; }

.first-activity-div:hover, .second-activity-div:hover, .third-activity-div:hover { transform: translateY(-5px); box-shadow: 0 28px 65px rgba(35, 51, 105, 0.18) !important; }

/* Cercle décoratif discret */
.first-activity-div::after, .second-activity-div::after, .third-activity-div::after { content: ""; position: absolute; right: -110px; bottom: -110px; width: 240px; height: 240px; border: 1px solid rgba(35, 51, 105, 0.1); border-radius: 50%; pointer-events: none; }

/* Désactivation de l’éventuelle image de fond du bloc */
.first-activity-div .background-image-div-opacity, .second-activity-div .background-image-div-opacity, .third-activity-div .background-image-div-opacity { display: none !important; }

/* ================================================== STRUCTURE INTERNE ================================================== */
.first-activity-div > .row, .second-activity-div > .row, .third-activity-div > .row { position: relative; z-index: 2; margin: 0 !important; padding: 0 !important; column-gap: 0; row-gap: 40px; }

.first-activity-div .col-lg-7, .second-activity-div .col-lg-7, .third-activity-div .col-lg-7 { padding: 25px 45px !important; }

.first-activity-div .col-lg-5, .second-activity-div .col-lg-5, .third-activity-div .col-lg-5 { padding: 0 !important; }

/* ================================================== IMAGES ================================================== */
.first-activity-div .card-cover, .second-activity-div .card-cover, .third-activity-div .card-cover { position: relative; width: 100%; min-height: 430px; border: 0 !important; border-radius: 24px !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; box-shadow: 0 18px 42px rgba(35, 51, 105, 0.2) !important; overflow: hidden !important; transform: translateZ(0); transition: transform 0.5s ease, box-shadow 0.5s ease; }

.first-activity-div:hover .card-cover, .second-activity-div:hover .card-cover, .third-activity-div:hover .card-cover { transform: scale(1.015); box-shadow: 0 24px 52px rgba(35, 51, 105, 0.27) !important; }

/* Voile léger sur les images */
.first-activity-div .black-screen, .second-activity-div .black-screen, .third-activity-div .black-screen { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.08) 60%, rgba(35, 51, 105, 0.34) 100%) !important; pointer-events: none; transition: background 0.4s ease; }

.first-activity-div:hover .black-screen, .second-activity-div:hover .black-screen, .third-activity-div:hover .black-screen { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(35, 51, 105, 0.25) 100%) !important; }

/* Masque le titre vide présent dans les images */
.first-activity-div .card-cover h3, .second-activity-div .card-cover h3, .third-activity-div .card-cover h3 { margin: 0 !important; }

.first-activity-div .card-cover h3:empty, .second-activity-div .card-cover h3:empty, .third-activity-div .card-cover h3:empty, .first-activity-div .card-cover h3 a:empty, .second-activity-div .card-cover h3 a:empty, .third-activity-div .card-cover h3 a:empty { display: none !important; }

/* ================================================== TITRES ================================================== */
.first-activity-title, .second-activity-title, .third-activity-title { position: relative; margin: 0 0 28px !important; padding-bottom: 22px; color: #233369 !important; font-family: "Poppins", sans-serif !important; }

.first-activity-title h2, .second-activity-title h2, .third-activity-title h2 { margin: 0 !important; color: #233369 !important; font-family: "Poppins", sans-serif !important; font-size: 38px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: -0.6px; }

/* Trait rouge sous chaque titre */
.first-activity-title::after, .second-activity-title::after, .third-activity-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 72px; height: 4px; background-color: #b4212d; border-radius: 50px; transition: width 0.4s ease; }

.first-activity-div:hover .first-activity-title::after, .second-activity-div:hover .second-activity-title::after, .third-activity-div:hover .third-activity-title::after { width: 105px; }

/* Neutralise Bootstrap text-body-emphasis */
.first-activity-div .text-body-emphasis, .second-activity-div .text-body-emphasis, .third-activity-div .text-body-emphasis { color: #233369 !important; }

/* ================================================== DESCRIPTIONS ================================================== */
.first-activity-div .lead, .second-activity-div .lead, .third-activity-div .lead { position: relative; margin: 0 !important; padding-left: 24px; color: #555b68 !important; font-family: "Poppins", sans-serif !important; font-size: 16px !important; line-height: 1.85 !important; font-weight: 400 !important; }

/* Grand trait rouge à gauche du texte */
.first-activity-div .lead::before, .second-activity-div .lead::before, .third-activity-div .lead::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; background-color: #b4212d; border-radius: 50px; }

.first-activity-div .lead p, .second-activity-div .lead p, .third-activity-div .lead p { margin: 0 !important; color: #555b68 !important; font-family: "Poppins", sans-serif !important; font-size: inherit !important; line-height: inherit !important; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .first-activity-div, .second-activity-div, .third-activity-div { width: calc(100% - 40px) !important; margin: 45px auto !important; padding: 35px !important; border-radius: 24px !important; } .first-activity-div::before, .second-activity-div::before, .third-activity-div::before { left: 35px; } .first-activity-div .col-lg-7, .second-activity-div .col-lg-7, .third-activity-div .col-lg-7 { padding: 10px 15px 25px !important; } .first-activity-div .col-lg-5, .second-activity-div .col-lg-5, .third-activity-div .col-lg-5 { width: 100% !important; max-width: 100% !important; padding: 0 15px !important; } .first-activity-div .card-cover, .second-activity-div .card-cover, .third-activity-div .card-cover { min-height: 420px; border-radius: 20px !important; } .first-activity-title h2, .second-activity-title h2, .third-activity-title h2 { font-size: 34px !important; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 576px) { .first-activity-div, .second-activity-div, .third-activity-div { width: calc(100% - 30px) !important; margin: 32px auto !important; padding: 24px 18px !important; border-radius: 20px !important; } .first-activity-div::before, .second-activity-div::before, .third-activity-div::before { left: 24px; width: 65px; height: 4px; } .first-activity-div::after, .second-activity-div::after, .third-activity-div::after { display: none; } .first-activity-div > .row, .second-activity-div > .row, .third-activity-div > .row { row-gap: 28px; } .first-activity-div .col-lg-7, .second-activity-div .col-lg-7, .third-activity-div .col-lg-7, .first-activity-div .col-lg-5, .second-activity-div .col-lg-5, .third-activity-div .col-lg-5 { padding-right: 0 !important; padding-left: 0 !important; } .first-activity-div .card-cover, .second-activity-div .card-cover, .third-activity-div .card-cover { min-height: 320px; border-radius: 17px !important; } .first-activity-title, .second-activity-title, .third-activity-title { margin-bottom: 22px !important; padding-bottom: 18px; } .first-activity-title h2, .second-activity-title h2, .third-activity-title h2 { font-size: 28px !important; line-height: 1.25 !important; } .first-activity-title::after, .second-activity-title::after, .third-activity-title::after { width: 58px; height: 3px; } .first-activity-div .lead, .second-activity-div .lead, .third-activity-div .lead { padding-left: 18px; font-size: 15px !important; line-height: 1.75 !important; } }

/*----------------------------------------MAPS----------------------------------------*/
.contact-map-section { position: relative; width: 100%; padding: 90px 20px; background-color: #233369; overflow: hidden; }

.contact-map-section *, .contact-map-section *::before, .contact-map-section *::after { box-sizing: border-box; }

.contact-map-container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; }

/* ================================================== TITRE ================================================== */
.contact-map-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; }

.contact-map-heading::before { content: ""; display: block; width: 65px; height: 4px; margin: 0 auto 22px; background-color: #b4212d; border-radius: 50px; }

.contact-map-heading h2 { margin: 0; color: #ffffff; line-height: 1.1; font-weight: 500 !important; }

.contact-map-heading h2 span { color: inherit !important; }

/* ================================================== CARTES D’INFORMATIONS ================================================== */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 55px; }

.contact-info-card { position: relative; display: flex; align-items: center; gap: 18px; min-height: 105px; padding: 24px 26px; background-color: #ffffff; color: inherit; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2); text-decoration: none; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; }

/* Trait rouge qui apparaît au survol */
.contact-info-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 4px; background-color: #b4212d; border-radius: 50px 0 0 0; transition: width 0.35s ease; }

.contact-info-card:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28); }

.contact-info-card:hover::after { width: 75px; }

/* ================================================== ICÔNES ================================================== */
.contact-info-icon { flex: 0 0 50px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #233369 !important; color: #ffffff !important; border-radius: 50%; font-size: 19px; transition: none; }

/* L’icône et son rond restent identiques au survol */
.contact-info-card:hover .contact-info-icon { background-color: #233369 !important; color: #ffffff !important; transform: none !important; }

/* Icônes Bootstrap */
.contact-info-icon i, .contact-info-icon .bi, .contact-info-card:hover .contact-info-icon i, .contact-info-card:hover .contact-info-icon .bi { color: #ffffff !important; }

/* Icônes SVG */
.contact-info-icon svg, .contact-info-card:hover .contact-info-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; }

.contact-info-icon svg path, .contact-info-card:hover .contact-info-icon svg path { fill: currentColor !important; stroke: currentColor !important; }

/* ================================================== TEXTES DES CARTES ================================================== */
.contact-info-card span { display: block; margin-bottom: 5px; color: #b4212d; font-size: 12px; line-height: 1.3; font-weight: 600 !important; letter-spacing: 1.2px; text-transform: uppercase; }

.contact-info-card p { margin: 0; color: #233369; font-size: 16px; line-height: 1.4; font-weight: 600 !important; }

.contact-info-card p span { margin: 0; color: inherit !important; font-size: inherit; line-height: inherit; font-weight: inherit !important; letter-spacing: 0; text-transform: none; }

/* Les textes restent identiques au survol */
.contact-info-card:hover span { color: #b4212d; }

.contact-info-card:hover p, .contact-info-card:hover p span { color: #233369 !important; }

/* ================================================== CARTE GOOGLE MAPS ================================================== */
.contact-map-wrapper { position: relative; width: 100%; height: 460px; overflow: hidden; background-color: #ffffff; border: 5px solid #ffffff; border-radius: 26px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25); }

.contact-map-wrapper::before { content: ""; position: absolute; top: 0; left: 45px; z-index: 2; width: 90px; height: 5px; background-color: #b4212d; border-radius: 0 0 50px 50px; pointer-events: none; }

.contact-map-wrapper iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 21px; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .contact-map-section { padding: 75px 20px; } .contact-map-heading h2 { font-size: 40px; } .contact-info-grid { grid-template-columns: 1fr; gap: 20px; } .contact-info-card { min-height: 95px; } .contact-map-wrapper { height: 390px; border-radius: 22px; } .contact-map-wrapper iframe { border-radius: 17px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 600px) { .contact-map-section { padding: 60px 16px; } .contact-map-heading { margin-bottom: 35px; } .contact-map-heading::before { width: 50px; height: 3px; margin-bottom: 18px; } .contact-map-heading h2 { font-size: 32px; line-height: 1.2; } .contact-info-grid { gap: 16px; margin-bottom: 38px; } .contact-info-card { gap: 15px; min-height: 90px; padding: 19px 18px; border-radius: 16px; } .contact-info-icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 17px; } .contact-info-card span { font-size: 11px; } .contact-info-card p { font-size: 15px; } .contact-map-wrapper { height: 330px; border-width: 4px; border-radius: 18px; } .contact-map-wrapper::before { left: 25px; width: 65px; height: 4px; } .contact-map-wrapper iframe { border-radius: 14px; } }

/*----------------------------------BLOC BULLET POINT-------------------------------*/
.habitat-feature { position: relative; width: 100%; padding: 90px 24px; background-color: #ffffff; font-family: "Poppins", sans-serif; box-sizing: border-box; overflow: hidden; }

.habitat-feature *, .habitat-feature *::before, .habitat-feature *::after { box-sizing: border-box; }

.habitat-feature__container { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.8fr; align-items: center; gap: 75px; }

/* ================================================== CONTENU ================================================== */
.habitat-feature__content { position: relative; width: 100%; max-width: 580px; }

.habitat-feature__title { position: relative; margin-bottom: 28px; padding-bottom: 22px; color: #233369; }

.habitat-feature__title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 70px; height: 4px; background-color: #b4212d; border-radius: 50px; }

.habitat-feature__title h2, .habitat-feature__title h3, .habitat-feature__title h4 { margin: 0; color: #233369; font-family: "Poppins", sans-serif; font-size: 42px; line-height: 1.18; font-weight: 500 !important; letter-spacing: -0.6px; }

.habitat-feature__title span { color: inherit !important; }

/* ================================================== DESCRIPTION ================================================== */
.habitat-feature__description { position: relative; margin-bottom: 28px; padding-left: 23px; color: #555b68; font-size: 16px; line-height: 1.8; font-weight: 400 !important; }

.habitat-feature__description::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; background-color: #b4212d; border-radius: 50px; }

.habitat-feature__description p { margin-top: 0; margin-bottom: 16px; color: #555b68; font-family: "Poppins", sans-serif; line-height: 1.8; font-weight: 400 !important; }

.habitat-feature__description p:last-child { margin-bottom: 0; }

.habitat-feature__description p span, .habitat-feature__description span { color: inherit !important; }

/* ================================================== LISTE ================================================== */
.habitat-feature__list { margin: 0 0 35px; padding: 0; list-style: none; }

.habitat-feature__list li { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; color: #233369; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.5; font-weight: 500 !important; }

.habitat-feature__list li:last-child { margin-bottom: 0; }

.habitat-feature__list li p { margin: 0; color: #233369; line-height: 1.5; font-weight: 500 !important; }

.habitat-feature__list li p span { color: inherit !important; }

/* Icônes de validation */
.habitat-feature__list svg { flex: 0 0 22px; width: 22px; min-width: 22px; height: 22px; padding: 4px; background-color: rgba(180, 33, 45, 0.1); fill: #b4212d; border-radius: 50%; }

/* ================================================== BOUTON ================================================== */
.habitat-feature__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 28px; background-color: transparent; color: #233369; border: 2px solid #233369; border-radius: 50px; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1; font-weight: 600 !important; text-decoration: none; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }

.habitat-feature__button p { margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: 1; font-weight: inherit !important; }

.habitat-feature__button p span, .habitat-feature__button span { color: inherit !important; }

.habitat-feature__button:hover { background-color: #233369; color: #ffffff; border-color: #233369; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35, 51, 105, 0.22); }

.habitat-feature__button:hover p, .habitat-feature__button:hover p span, .habitat-feature__button:hover span { color: #ffffff !important; }

/* ================================================== IMAGE ================================================== */
.habitat-feature__image { position: relative; width: 100%; }

.habitat-feature__image::before { content: ""; position: absolute; right: -14px; bottom: -14px; z-index: 0; width: 75%; height: 75%; background-color: rgba(35, 51, 105, 0.08); border-radius: 24px; }

.habitat-feature__image img { position: relative; z-index: 1; display: block; width: 100%; height: 460px; object-fit: cover; object-position: center; border-radius: 24px; box-shadow: 0 22px 52px rgba(35, 51, 105, 0.18); }

/* ================================================== DEUXIÈME BLOC UNIQUEMENT IMAGE À GAUCHE / CONTENU À DROITE ================================================== */
.habitat-feature--reverse { background-color: #233369 !important; }

/* Image à gauche et texte à droite */
.habitat-feature--reverse .habitat-feature__container { grid-template-columns: 0.8fr 1fr; }

.habitat-feature--reverse .habitat-feature__image { order: 1; }

.habitat-feature--reverse .habitat-feature__content { order: 2; }

/* Titres blancs */
.habitat-feature--reverse .habitat-feature__title, .habitat-feature--reverse .habitat-feature__title h2, .habitat-feature--reverse .habitat-feature__title h3, .habitat-feature--reverse .habitat-feature__title h4, .habitat-feature--reverse .habitat-feature__title h5, .habitat-feature--reverse .habitat-feature__title span { color: #ffffff !important; }

/* Description blanche */
.habitat-feature--reverse .habitat-feature__description, .habitat-feature--reverse .habitat-feature__description p, .habitat-feature--reverse .habitat-feature__description span { color: rgba(255, 255, 255, 0.88) !important; }

/* Liste blanche */
.habitat-feature--reverse .habitat-feature__list li, .habitat-feature--reverse .habitat-feature__list li p, .habitat-feature--reverse .habitat-feature__list li div, .habitat-feature--reverse .habitat-feature__list li span { color: #ffffff !important; }

/* Icônes */
.habitat-feature--reverse .habitat-feature__list svg { background-color: #ffffff !important; fill: #b4212d !important; }

/* Bouton */
.habitat-feature--reverse .habitat-feature__button { background-color: transparent !important; color: #ffffff !important; border-color: #ffffff !important; }

.habitat-feature--reverse .habitat-feature__button p, .habitat-feature--reverse .habitat-feature__button span { color: #ffffff !important; }

.habitat-feature--reverse .habitat-feature__button:hover { background-color: #ffffff !important; color: #233369 !important; border-color: #ffffff !important; }

.habitat-feature--reverse .habitat-feature__button:hover p, .habitat-feature--reverse .habitat-feature__button:hover span { color: #233369 !important; }

/* Décoration de l’image placée à gauche */
.habitat-feature--reverse .habitat-feature__image::before { right: -14px; left: auto; }

/* ================================================== RESPONSIVE ================================================== */
@media screen and (max-width: 991px) { .habitat-feature--reverse .habitat-feature__container { grid-template-columns: 1fr; } .habitat-feature--reverse .habitat-feature__image { order: 1; } .habitat-feature--reverse .habitat-feature__content { order: 2; } }

@media screen and (max-width: 576px) { .habitat-feature--reverse .habitat-feature__image::before { right: -8px; left: auto; } }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .habitat-feature { padding: 75px 24px; } .habitat-feature__container, .habitat-feature--reverse .habitat-feature__container { grid-template-columns: 1fr; gap: 50px; } .habitat-feature__content, .habitat-feature--reverse .habitat-feature__content { order: 2; width: 100%; max-width: 720px; margin: 0 auto; } .habitat-feature__image, .habitat-feature--reverse .habitat-feature__image { order: 1; width: 100%; max-width: 720px; margin: 0 auto; } .habitat-feature__image img { height: 420px; } .habitat-feature__title h2, .habitat-feature__title h3, .habitat-feature__title h4 { font-size: 36px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 576px) { .habitat-feature { padding: 55px 18px; } .habitat-feature__container, .habitat-feature--reverse .habitat-feature__container { gap: 38px; } .habitat-feature__image::before, .habitat-feature--reverse .habitat-feature__image::before { right: -8px; bottom: -8px; left: auto; border-radius: 18px; } .habitat-feature__image img { height: 300px; border-radius: 18px; } .habitat-feature__title { margin-bottom: 23px; padding-bottom: 18px; } .habitat-feature__title h2, .habitat-feature__title h3, .habitat-feature__title h4 { font-size: 30px; line-height: 1.25; } .habitat-feature__title::after { width: 55px; height: 3px; } .habitat-feature__description { margin-bottom: 25px; padding-left: 18px; font-size: 15px; line-height: 1.7; } .habitat-feature__description p { line-height: 1.7; } .habitat-feature__list { margin-bottom: 30px; } .habitat-feature__list li { align-items: flex-start; gap: 11px; font-size: 14px; } .habitat-feature__list svg { flex-basis: 20px; width: 20px; min-width: 20px; height: 20px; margin-top: 1px; } .habitat-feature__button { width: 100%; min-height: 50px; padding: 12px 20px; } }

/*---------------------------------------GALERIE-------------------------------------------*/
.custom-gallery-block { position: relative; width: 100%; padding: 90px 24px; background-color: #f3f3f3; font-family: "Poppins", sans-serif; box-sizing: border-box; overflow: hidden; }

.custom-gallery-block *, .custom-gallery-block *::before, .custom-gallery-block *::after, .custom-gallery-lightbox *, .custom-gallery-lightbox *::before, .custom-gallery-lightbox *::after { box-sizing: border-box; }

.custom-gallery-container { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ================================================== TITRE CENTRÉ ================================================== */
.custom-gallery-title { position: relative; width: 100%; max-width: 850px; margin: 0 auto 50px; padding-bottom: 22px; color: #233369; text-align: center; }

/* Trait rouge sous le titre */
.custom-gallery-title::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 70px; height: 4px; background-color: #b4212d; border-radius: 50px; transform: translateX(-50%); }

.custom-gallery-title h2, .custom-gallery-title h3, .custom-gallery-title h4, .custom-gallery-title h5, .custom-gallery-title p { margin: 0; color: #233369; font-family: "Poppins", sans-serif; line-height: 1.2; font-weight: 700 !important; text-align: center; }

.custom-gallery-title span { color: inherit !important; }

/* ================================================== GRILLE D’IMAGES ================================================== */
.custom-gallery-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; width: 100%; gap: 24px; }

.custom-gallery-item { position: relative; flex: 1 1 270px; width: 100%; max-width: 296px; height: 380px; }

/* ================================================== CARTES ET IMAGES ================================================== */
.custom-gallery-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background-color: #233369; border: 1px solid rgba(35, 51, 105, 0.12); border-radius: 22px; box-shadow: 0 16px 38px rgba(35, 51, 105, 0.14); text-decoration: none; cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }

.custom-gallery-link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35, 51, 105, 0.02) 0%, rgba(35, 51, 105, 0.08) 55%, rgba(35, 51, 105, 0.42) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }

.custom-gallery-image { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; transform: scale(1); transition: transform 0.65s ease, filter 0.65s ease; }

/* ================================================== SURVOL DES IMAGES ================================================== */
.custom-gallery-link:hover, .custom-gallery-link:focus-visible { transform: translateY(-7px); border-color: rgba(180, 33, 45, 0.38); box-shadow: 0 25px 55px rgba(35, 51, 105, 0.22); }

.custom-gallery-link:hover::after, .custom-gallery-link:focus-visible::after { opacity: 1; }

.custom-gallery-link:hover .custom-gallery-image, .custom-gallery-link:focus-visible .custom-gallery-image { transform: scale(1.07); filter: saturate(1.05); }

.custom-gallery-link:focus-visible { outline: 3px solid #b4212d; outline-offset: 5px; }

/* ================================================== LIGHTBOX ================================================== */
.custom-gallery-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 35px 90px; background-color: rgba(10, 17, 43, 0.96); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; -webkit-user-select: none; user-select: none; }

.custom-gallery-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.custom-gallery-lightbox__visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.custom-gallery-lightbox__image { display: block; width: auto; max-width: 85vw; height: auto; max-height: 86vh; margin: 0; object-fit: contain; border: 4px solid rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55); }

/* ================================================== BOUTONS DE LA LIGHTBOX ================================================== */
.custom-gallery-lightbox__button { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; background-color: #233369; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); font-family: "Poppins", sans-serif; font-size: 30px; line-height: 1; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.custom-gallery-lightbox__button span, .custom-gallery-lightbox__button i { display: flex; align-items: center; justify-content: center; color: #ffffff !important; font-family: inherit; line-height: 1; }

.custom-gallery-lightbox__button:hover { background-color: #b4212d; color: #ffffff; border-color: #b4212d; }

.custom-gallery-lightbox__button:hover span, .custom-gallery-lightbox__button:hover i { color: #ffffff !important; }

.custom-gallery-lightbox__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }

/* Flèche précédente et suivante */
.custom-gallery-lightbox__previous, .custom-gallery-lightbox__next { top: 50%; transform: translateY(-50%); }

.custom-gallery-lightbox__previous { left: 24px; }

.custom-gallery-lightbox__next { right: 24px; }

.custom-gallery-lightbox__previous:hover { transform: translate(-4px, -50%); }

.custom-gallery-lightbox__next:hover { transform: translate(4px, -50%); }

/* Bouton de fermeture */
.custom-gallery-lightbox__close { top: 20px; right: 20px; background-color: #b4212d; border-color: #b4212d; font-size: 31px; }

.custom-gallery-lightbox__close:hover { background-color: #ffffff; color: #233369; border-color: #ffffff; }

.custom-gallery-lightbox__close:hover span, .custom-gallery-lightbox__close:hover i { color: #233369 !important; }

/* ================================================== COMPTEUR ================================================== */
.custom-gallery-lightbox__counter { position: absolute; bottom: 22px; left: 50%; padding: 8px 17px; background-color: rgba(35, 51, 105, 0.92); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50px; font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: 0.08em; transform: translateX(-50%); }

body.custom-gallery-lightbox-open { overflow: hidden; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .custom-gallery-block { padding: 75px 22px; } .custom-gallery-title { margin-bottom: 42px; } .custom-gallery-grid { gap: 20px; } .custom-gallery-item { flex-basis: 310px; max-width: 340px; height: 340px; } .custom-gallery-lightbox { padding: 50px 65px; } .custom-gallery-lightbox__previous { left: 8px; } .custom-gallery-lightbox__next { right: 8px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 600px) { .custom-gallery-block { padding: 55px 16px; } .custom-gallery-title { margin-bottom: 35px; padding-bottom: 18px; } .custom-gallery-title::after { width: 55px; height: 3px; } .custom-gallery-grid { gap: 18px; } .custom-gallery-item { flex-basis: 100%; max-width: 100%; height: 310px; } .custom-gallery-link { border-radius: 18px; } .custom-gallery-lightbox { padding: 65px 42px; } .custom-gallery-lightbox__image { max-width: 90vw; max-height: 78vh; border-width: 3px; border-radius: 15px; } .custom-gallery-lightbox__button { width: 42px; height: 42px; font-size: 24px; } .custom-gallery-lightbox__previous { left: 2px; } .custom-gallery-lightbox__next { right: 2px; } .custom-gallery-lightbox__close { top: 10px; right: 10px; font-size: 25px; } .custom-gallery-lightbox__counter { bottom: 14px; font-size: 12px; } }

@media screen and (max-width: 400px) { .custom-gallery-item { height: 275px; } }

/*------------------------------------TRAIT ROUGE H1--------------------------------------*/
h1 { position: relative; margin-bottom: 28px !important; padding-bottom: 22px !important; }

h1::after { content: ""; display: block; width: 70px; height: 4px; margin: 18px 0 0; background-color: #b4212d; border-radius: 50px; }

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