@charset "UTF-8";
@import url(main.css);
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&family=Caveat+Brush&family=Lato:wght@300;400;700&display=swap");
a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border: thick double #bca98a !important; border-radius: 0px; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { color: #e4e1df !important; border: thick double #e4e1df; background-color: transparent !important; }

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

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { color: #e4e1df !important; border: thick double #e4e1df; background-color: transparent !important; }

p.fs-5.mt-4 { color: #e4e1df; }

p.mx-lg-4 { color: #e4e1df; }

p.lead { color: #e4e1df; }

h2.display-6.fw-bold.p-3.pt-lg-3.titles { color: #e4e1df; }

.text-center.fs-6.text-color-sixth > p { color: #e4e1df !important; }

h3.fs-2.py-5.my-5.lh-1.fw-bold { color: #e4e1df; }

form#formContact { border-radius: 0px !important; border: thick double #bca98a !important; }

p.ms-2 { color: #fff; }

/* -------------Navbar affichée------------ */
#navigation-bar-hide { position: fixed !important; top: 0 !important; opacity: 1 !important; transition: none !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; border: thick double #bca98a; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { color: #e4e1df !important; border: thick double #e4e1df; }

/* --- Suppression du zoom et de l’ombre sur le Hero --- */
.carousel-item-homepage img, .first-carousel-img { transform: none !important; /* ✅ retire tout effet de zoom ou scale */ transition: none !important; /* ✅ empêche les animations au chargement */ box-shadow: none !important; /* ✅ supprime toute ombre */ filter: none !important; /* ✅ retire les filtres type fondu sombre */ opacity: 1 !important; /* ✅ garantit la pleine luminosité */ }

/* ============================== 🧱 POLICES GLOBALES DU SITE SARL ICSM ============================== */
/* Import des polices Google Fonts */
/* ----- TITRES GÉNÉRAUX ----- */
h1, h2, h3 { line-height: 1.2; margin-bottom: 0.5em; color: #383433; }

/* H1 et H2 : Antonio (épaisse, impactante) */
h1, h2 { font-family: 'Antonio', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* 🔄 H1 prend le style de l’ancien H2 */
h1 { font-size: 2.2rem; font-weight: 600; }

/* 🔄 H3 prend le style de l’ancien H1 */
h3 { font-family: 'Antonio', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 3rem; color: #383433; }

/* H2 reste inchangé */
h2 { font-size: 2.2rem; font-weight: 600; }

/* ----- PETITS TITRES (sous-titres décoratifs) ----- */
.subtitle, .prestation-subtitle, h4 { font-family: 'Caveat Brush', cursive !important; font-size: 1.3rem; color: #726b65; letter-spacing: 0.5px; font-weight: normal; }

h5 { font-family: 'Caveat Brush', cursive !important; color: #fff; font-size: 1.2rem; }

/* ----- PARAGRAPHES ----- */
p { font-family: 'Lato', sans-serif; font-size: 1rem; color: #383433; line-height: 1.7; margin-bottom: 1em; }

/* ----- AJUSTEMENT SUR MOBILE ----- */
@media (max-width: 768px) { h1 { font-size: 1.8rem; /* ancien h2 mobile */ } h2 { font-size: 1.8rem; } h3 { font-size: 2.3rem; /* ancien h1 mobile */ } .subtitle, h4 { font-size: 1.1rem; } p { font-size: 0.95rem; } }

/* ============================== 🏠 HERO ACCUEIL - SARL ICSM ============================== */
.hero-icsm { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }

/* Image de fond */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-position: center; z-index: 0; }

/* Overlay sombre */
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; }

/* Contenu centré */
.hero-content { position: relative; z-index: 2; color: #fff; padding: 20px; max-width: 800px; }

/* Logo */
.hero-logo { width: 250px; margin-bottom: 0px; }

/* Titre principal */
.hero-content h1 { font-family: 'Antonio', sans-serif; font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; color: #ecddbf; }

/* Sous-texte */
.hero-content p { font-family: 'Lato', sans-serif; font-size: 1.2rem; color: #e4e1df; margin-bottom: 40px; }

/* Bouton */
.hero-btn { display: inline-block; padding: 14px 36px; background-color: #ecddbf; color: #383433; font-family: 'Antonio', sans-serif; text-transform: uppercase; letter-spacing: 1px; border: thick double #bca98a; text-decoration: none; transition: all 0.3s ease; border-radius: 0; }

.hero-btn:hover { background-color: transparent; border: thick double #e4e1df; color: #e4e1df; }

/* ============================== 📱 RESPONSIVE ============================== */
@media (max-width: 992px) { .hero-content h1 { font-size: 2.3rem; } .hero-content p { font-size: 1.05rem; } }

@media (max-width: 600px) { .hero-logo { width: 120px; } .hero-content h1 { font-size: 1.9rem; } .hero-content p { font-size: 1rem; } .hero-btn { padding: 12px 26px; font-size: 0.9rem; } }

/* ============================== 💼 SECTION SERVICES - SARL ICSM ============================== */
.services-section { background-color: #e4e1df; padding: 100px 40px; text-align: center; }

/* ----- EN-TÊTE ----- */
.services-header { max-width: 800px; margin: 0 auto 60px; }

.services-header h2 { font-family: 'Antonio', sans-serif; font-size: 2.5rem; color: #383433; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }

.services-header p { font-family: 'Lato', sans-serif; color: #726b65; font-size: 1.1rem; line-height: 1.6; }

/* ----- LIGNE DE 4 BLOCS ----- */
.services-row { display: flex; justify-content: center; align-items: stretch; gap: 25px; flex-wrap: nowrap; overflow: hidden; max-width: 1400px; margin: 0 auto; }

/* ----- CHAQUE BLOC SERVICE ----- */
.service-item { flex: 1 1 22%; /* équilibré pour 4 colonnes */ position: relative; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; background-color: #383433; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; }

.service-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, opacity 0.4s ease; }

/* ----- OVERLAY COULEUR AU SURVOL ----- */
.service-item::after { content: ""; position: absolute; inset: 0; background-color: rgba(188, 169, 138, 0); transition: background-color 0.4s ease; z-index: 1; }

.service-item:hover::after { background-color: rgba(188, 169, 138, 0.4); }

.service-item:hover img { transform: scale(1.08); opacity: 0.9; }

/* ----- OVERLAY TEXTE ----- */
.service-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); padding: 20px 25px; text-align: left; z-index: 2; }

.service-overlay h3 { font-family: 'Antonio', sans-serif; color: #ecddbf; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }

.service-item { text-decoration: none; color: inherit; display: block; }

.service-item:hover { transform: scale(1.03); }

/* ============================== 📱 RESPONSIVE DESIGN ============================== */
@media (max-width: 1024px) { .services-row { flex-wrap: wrap; /* ✅ 2 par ligne sur tablette */ justify-content: center; } .service-item { flex: 1 1 45%; max-width: 45%; aspect-ratio: 16 / 9; } }

@media (max-width: 768px) { .service-item { flex: 1 1 90%; max-width: 90%; } .service-overlay { text-align: center; } .service-overlay h3 { font-size: 1.2rem; } }

@media (max-width: 480px) { .services-section { padding: 80px 20px; } .services-header h2 { font-size: 2rem; } .services-header p { font-size: 1rem; } .service-item { aspect-ratio: 4 / 3; } .service-overlay h3 { font-size: 1.1rem; } }

/* ============================== SECTION À PROPOS - SARL ICSM ============================== */
.about-section { background-color: #383433; /* fond clair global */ padding: 120px 0; }

/* --- GRILLE PRINCIPALE --- */
.about-container { display: flex; justify-content: center; align-items: stretch; max-width: 1400px; margin: 0 auto; gap: 40px; /* ✅ espace entre les images et le fond anthracite */ padding: 0 40px; position: relative; }

/* --- IMAGES --- */
.about-image { flex: 1; display: flex; justify-content: center; align-items: stretch; overflow: hidden; }

.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }

/* --- BLOC TEXTE CENTRAL --- */
.about-text { flex: 1.2; background-color: #e4e1df; color: #e4e1df; border: thick double #bca98a; text-align: center; padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

/* --- TRAIT FIN --- */
.about-line { width: 1px; height: 40px; background-color: #383433; margin: 0 auto 25px auto; }

/* --- TITRES ET TEXTES --- */
.about-text h2 { font-family: 'Antonio', sans-serif; font-size: 2.4rem; text-transform: uppercase; color: #383433; letter-spacing: 1px; margin-bottom: 15px; line-height: 1.2; }

.about-subtitle { display: block; font-family: 'Caveat Brush', cursive; font-size: 1.5rem; color: #383433; margin-bottom: 25px; }

.about-text p { font-family: 'Lato', sans-serif; font-size: 1rem; color: #383433; line-height: 1.8; margin-bottom: 1.2em; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ============================== 📱 RESPONSIVE DESIGN ============================== */
@media (max-width: 992px) { .about-container { flex-direction: column; align-items: center; gap: 30px; } .about-image { width: 100%; height: auto; } .about-image img { height: 400px; } .about-text { width: 100%; padding: 60px 40px; } .about-text h2 { font-size: 2.1rem; } }

@media (max-width: 768px) { .about-section { padding: 80px 0; } .about-container { flex-direction: column; padding: 0 20px; gap: 25px; } .about-image.right { display: none; } .about-image.left img { height: 400px; } .about-text { padding: 40px 25px; } .about-line { height: 35px; } .about-text h2 { font-size: 1.9rem; } .about-subtitle { font-size: 1.3rem; } .about-text p { font-size: 0.95rem; } }

@media (max-width: 480px) { .about-text { padding: 30px 20px; } .about-text h2 { font-size: 1.7rem; } .about-subtitle { font-size: 1.2rem; } .about-text p { font-size: 0.9rem; } .about-image.left img { height: 360px; } }

/* ============================== 🧱 RÉALISATIONS - SARL ICSM ============================== */
.realisations-section { background-color: #e4e1df; padding: 100px 40px; text-align: center; }

.realisations-header { max-width: 800px; margin: 0 auto 50px; }

.realisations-header h2 { font-family: 'Antonio', sans-serif; font-size: 2.5rem; color: #383433; text-transform: uppercase; margin-bottom: 15px; }

.realisations-header p { font-family: 'Lato', sans-serif; color: #726b65; font-size: 1.1rem; line-height: 1.6; }

/* ----- ONGLET / BOUTONS ----- */
.realisations-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 40px; }

.tab-button { font-family: 'Antonio', sans-serif; background-color: #383433; color: #e4e1df; border: none; padding: 12px 22px; border-radius: 0px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; }

.tab-button:hover { background-color: #726b65; color: #fff; }

.tab-button.active { background-color: #bca98a; color: #383433; }

/* ----- CONTENU DES ONGLET ----- */
.tab-content { display: none; animation: fadeIn 0.5s ease; }

.tab-content.active { display: block; }

/* ----- GALERIE (3x3) ----- */
.gallery { display: grid; grid-template-columns: repeat(3, 300px); /* ✅ 3 colonnes fixes */ justify-content: center; gap: 25px; /* ✅ espace entre les photos */ margin-top: 40px; }

.gallery img { width: 300px; height: 300px; object-fit: cover; object-position: center; border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease; background-color: #ccc; }

.gallery img:hover { transform: scale(1.05); }

/* ----- ANIMATION ----- */
@keyframes fadeIn { from { opacity: 0;
    transform: translateY(10px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) { .gallery { grid-template-columns: repeat(2, 280px); /* ✅ 2 colonnes sur tablette */ gap: 20px; } }

@media (max-width: 650px) { .gallery { grid-template-columns: 1fr; /* ✅ 1 colonne sur mobile */ } .gallery img { width: 100%; max-width: 320px; height: auto; } }

/* ============================== 🧱 SECTION NOS ENGAGEMENTS - VERSION FOND SOMBRE ============================== */
.engagements-section { background-color: #383433; /* ✅ fond anthracite */ padding: 100px 40px; text-align: center; }

.engagements-container { max-width: 1200px; margin: 0 auto; }

/* ----- En-tête ----- */
.engagements-header h2 { font-family: 'Antonio', sans-serif; font-size: 2.5rem; color: #e4e1df; /* ✅ beige clair */ text-transform: uppercase; margin-bottom: 15px; }

.engagements-header p { font-family: 'Lato', sans-serif; color: #e4e1df; /* gris clair */ font-size: 1.1rem; max-width: 700px; margin: 0 auto 50px; line-height: 1.6; }

/* ----- Grille ----- */
.engagements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

/* ----- Cartes ----- */
.engagement-card { background-color: #e4e1df; /* ✅ cartes grises */ padding: 40px 25px; border: thick double #bca98a; border-radius: 0px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }

.engagement-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }

/* Icônes */
.engagement-card img { width: 60px; margin-bottom: 20px; }

/* Titres */
.engagement-card h3 { font-family: 'Antonio', sans-serif; color: #383433; /* texte foncé sur fond beige */ font-size: 1.4rem; margin-bottom: 10px; text-transform: uppercase; }

/* Texte */
.engagement-card p { font-family: 'Lato', sans-serif; color: #726b65; /* gris doux */ font-size: 1rem; line-height: 1.5; }

/* ============================== 📱 RESPONSIVE ============================== */
@media (max-width: 992px) { .engagements-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

@media (max-width: 600px) { .engagements-grid { grid-template-columns: 1fr; } .engagement-card { padding: 30px 20px; } }

/* ============================== 📣 CTA FIXE - SARL ICSM ============================== */
.cta-fixed { position: relative; height: 80vh; /* hauteur réduite par rapport à un hero */ background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80"); background-size: cover; background-position: center; background-attachment: fixed; /* ✅ effet d'image fixe */ display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }

/* Superposition sombre pour lisibilité du texte */
.cta-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; }

/* Contenu */
.cta-content { position: relative; z-index: 2; color: #fff; padding: 20px; max-width: 800px; }

/* Titre */
.cta-title { font-family: 'Antonio', sans-serif; font-size: 2.8rem; line-height: 1.2; color: #fff; margin-bottom: 30px; }

/* ======== Bouton CTA ======== */
.cta-btn { display: inline-block; background-color: #e4e1df; /* ✅ gris clair */ color: #383433; /* texte anthracite */ font-family: 'Antonio', sans-serif; text-transform: uppercase; letter-spacing: 1px; padding: 14px 30px; border: thick double #bca98a; border-radius: 0px; /* ✅ angles carrés */ text-decoration: none; transition: all 0.3s ease; }

.cta-btn:hover { background-color: transparent; /* ✅ fond transparent */ border: thick double #e4e1df; /* ✅ double contour gris clair */ color: #e4e1df; /* ✅ texte gris clair */ transform: translateY(-3px); }

/* ============================== 📱 RESPONSIVE ============================== */
@media (max-width: 992px) { .cta-title { font-size: 2.2rem; } }

@media (max-width: 600px) { .cta-title { font-size: 1.8rem; } .cta-btn { padding: 12px 25px; font-size: 0.9rem; } }

/* ============================== 🧱 EN-TÊTE PAGE SERVICES - ICSM ============================== */
.icsm-header { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }

/* Image de fond dans le HTML */
.icsm-header-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; filter: brightness(0.8); }

/* Overlay pour effet sombre */
.icsm-header-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; }

/* Contenu centré */
.icsm-header-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; }

/* Boîte principale transparente */
.icsm-header-box { background-color: rgba(255, 255, 255, 0.05); border: thick double #ecddbf; backdrop-filter: blur(6px); padding: 0; text-align: center; width: fit-content; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); }

/* Titre principal */
.icsm-header-box h3 { font-family: 'Antonio', sans-serif; text-transform: uppercase; font-size: 2.8rem; letter-spacing: 1.5px; font-weight: 700; padding: 25px 70px 10px 70px; color: #ffffff; }

/* Sous-titre */
.icsm-header-box span { display: block; font-family: 'Lato', sans-serif; color: #ffffff; font-size: 1.1rem; letter-spacing: 1px; padding: 10px 0 25px 0; margin-left: 20px; margin-right: 20px; }

/* Points beige (•) uniquement */
.icsm-header-box span::before, .icsm-header-box span::after { color: #ecddbf; }

.icsm-header-box span span.dot { color: #ecddbf; }

/* ============================== 📱 RESPONSIVE ============================== */
@media (max-width: 768px) { .icsm-header { height: 50vh; } .icsm-header-box h3 { font-size: 2rem; padding: 20px 40px 10px 40px; } .icsm-header-box span { font-size: 0.95rem; padding-bottom: 20px; } }

/* ============================== 💼 SECTION SERVICES - SARL ICSM ============================== */
.icsm-services-section { background-color: #e4e1df; padding: 100px 60px; }

/* ----- EN-TÊTE DE SECTION ----- */
.icsm-services-header { text-align: center; max-width: 800px; margin: 0 auto 80px; }

.icsm-services-header h1 { font-family: 'Antonio', sans-serif; color: #383433; text-transform: uppercase; font-size: 2.6rem; letter-spacing: 1px; margin-bottom: 20px; }

.icsm-services-header p { font-family: 'Lato', sans-serif; color: #726b65; font-size: 1.1rem; line-height: 1.6; }

/* ----- GRILLE DES SERVICES ----- */
.icsm-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; justify-items: center; }

/* ----- CARTE SERVICE ----- */
.service-card { background-color: #383433; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 0; transition: transform 0.3s ease; width: 100%; max-width: 700px; position: relative; }

/* ----- Alternance automatique ----- */
.service-card:nth-child(odd) { flex-direction: row-reverse; /* ✅ pour les blocs de gauche */ }

.service-card:nth-child(even) { flex-direction: row; /* ✅ pour les blocs de droite */ }

/* ----- Image semi-circulaire ----- */
.service-image { flex: 1; height: 280px; background-size: cover; background-position: center; transition: all 0.5s ease; position: relative; }

.service-card:nth-child(odd) .service-image { clip-path: circle(75% at 0% 50%); }

.service-card:nth-child(even) .service-image { clip-path: circle(75% at 100% 50%); }

/* ----- Texte ----- */
.service-text { flex: 1; padding: 50px 40px; text-align: left; transition: background-color 0.5s ease, color 0.5s ease; }

.service-text h2 { font-family: 'Antonio', sans-serif; color: #ecddbf; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 10px; }

.service-text p { font-family: 'Lato', sans-serif; color: #e4e1df; font-size: 1rem; line-height: 1.5; }

/* ----- Hover corrigé (plein fond sur toute la carte) ----- */
.service-card::before { content: ""; position: absolute; inset: 0; background-color: rgba(188, 169, 138, 0); transition: background-color 0.4s ease; z-index: 1; }

.service-card:hover::before { background-color: #bca98a; /* plein fond beige */ }

/* On garde le texte lisible au-dessus */
.service-card * { position: relative; z-index: 2; }

/* Et on supprime l'ancien fond sur .service-text */
.service-card:hover .service-text { background-color: transparent; }

.service-card:hover h2, .service-card:hover p { color: #383433; }

.service-card:hover .service-image { transform: scale(1.05); }

/* ============================== 📱 RESPONSIVE ============================== */
@media (max-width: 992px) { .icsm-services-section { padding: 80px 30px; } .icsm-services-header h1 { font-size: 2rem; } .icsm-services-header p { font-size: 1rem; } .icsm-services-grid { grid-template-columns: 1fr; gap: 50px; } .service-card { flex-direction: column; } .service-card:nth-child(odd), .service-card:nth-child(even) { flex-direction: column; } .service-image { width: 100%; height: 240px; clip-path: circle(85% at 50% 50%) !important; } .service-text { padding: 40px 25px; text-align: center; } .service-text h2 { font-size: 1.4rem; } }

/* ============================== 🪜 GALERIE EN QUINCONCE RESPONSIVE ============================== */
.icsm-gallery-section { background-color: #383433; padding: 80px 40px; overflow-x: hidden; }

/* --- Grille principale --- */
.icsm-gallery-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; width: 100%; max-width: 1600px; margin: 0 auto; flex-wrap: nowrap; /* Les 5 images sur une ligne */ }

/* --- Élément d’image --- */
.gallery-item { flex: 1 1 18%; aspect-ratio: 1 / 1; /* Garde la forme carrée */ background-size: cover; background-position: center; border: 3px solid #e4e1df; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); transition: transform 0.4s ease, filter 0.4s ease; position: relative; }

/* --- Quinconce (décalage) --- */
.gallery-item:nth-child(odd) { margin-top: 50px; }

.gallery-item:nth-child(even) { margin-top: 0; }

/* --- Effet au survol --- */
.gallery-item:hover { transform: scale(1.05); filter: brightness(0.9) sepia(20%) hue-rotate(10deg) saturate(120%); border-color: #bca98a; }

/* --- Responsive tablette --- */
@media (max-width: 900px) { .icsm-gallery-grid { gap: 15px; } .gallery-item { flex: 1 1 19%; } .gallery-item:nth-child(odd) { margin-top: 30px; } }

/* --- Responsive mobile --- */
@media (max-width: 600px) { .icsm-gallery-grid { flex-direction: column; /* 👈 On passe en colonne */ align-items: center; gap: 25px; } .gallery-item { width: 100%; max-width: 420px; /* 👈 Limite pour les très grands mobiles */ aspect-ratio: 1 / 1; margin-top: 0 !important; /* 👈 On supprime le quinconce */ } }

/* ============================== 🏠 CTA SUR TOUTES LES PAGES SERVICES - SARL ICSM ============================== */
.cta-interieur { position: relative; height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }

/* --- Image de fond intégrée --- */
.cta-interieur-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; filter: brightness(100%); }

/* --- Superposition sombre --- */
.cta-interieur-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; }

/* --- Contenu centré --- */
.cta-interieur-content { position: relative; z-index: 2; color: #fff; padding: 20px; max-width: 800px; }

/* --- Titre --- */
.cta-interieur-title { font-family: 'Antonio', sans-serif; font-size: 2.8rem; line-height: 1.3; color: #fff; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }

/* --- Texte --- */
.cta-interieur-text { font-family: 'Lato', sans-serif; font-size: 1.1rem; color: #e4e1df; line-height: 1.7; margin-bottom: 40px; }

/* --- Bouton --- */
.cta-interieur-btn { display: inline-block; background-color: #e4e1df; color: #383433; text-transform: uppercase; font-family: 'Antonio', sans-serif; font-weight: 700; letter-spacing: 1px; padding: 14px 35px; text-decoration: none; border: thick double #bca98a; border-radius: 0; transition: all 0.3s ease; }

/* --- Effet hover --- */
.cta-interieur-btn:hover { background-color: transparent; color: #e4e1df; border: thick double #e4e1df; transform: translateY(-3px); }

/* ============================= 📱 RESPONSIVE ============================== */
@media (max-width: 992px) { .cta-interieur-title { font-size: 2.2rem; } .cta-interieur-text { font-size: 1rem; } }

@media (max-width: 600px) { .cta-interieur { height: auto; padding: 80px 20px; } .cta-interieur-img { position: absolute; height: 100%; object-position: center; } .cta-interieur-title { font-size: 1.8rem; } .cta-interieur-text { font-size: 0.95rem; } }

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