@charset "UTF-8";
@import url(main.css);
.social-section { background-color: white; text-align: center; padding: 100px 40px; }

.social-header { margin-bottom: 50px; }

.social-subtitle { display: block; color: #de7d5d; font-size: 1.5rem; margin-bottom: 10px; }

.social-header h2 { font-size: 2.2rem; color: #222; margin-bottom: 10px; }

.social-header p { color: #555; font-size: 1rem; line-height: 1.6; }

/* Liens vers les réseaux */
.social-links { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }

.social-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform 0.3s ease; }

.social-item img { width: 60px; height: 60px; margin-bottom: 12px; transition: filter 0.3s ease; }

.social-item span { color: #222; font-size: 1rem; font-weight: 600; }

/* Effet au survol */
.social-item:hover { transform: translateY(-5px); }

.social-item:hover img { filter: brightness(0) saturate(100%) invert(64%) sepia(8%) saturate(639%) hue-rotate(82deg) brightness(94%) contrast(86%); }

/* Responsive */
@media (max-width: 768px) { .social-section { padding: 80px 20px; } .social-links { gap: 40px; } .social-header h2 { font-size: 1.8rem; } }

lottie-player.lottie-scroll { display: none !important; }

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

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

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

.b-bloc-divider { border: none !important; border-width: none !important; box-shadow: none !important; background-color: #FFFFFF !important; }

h5.mb-4 { color: #da6f4b; font-family: 'Boogaloo'; font-size: 1.5rem; }

h5.mb-3 { color: #da6f4b; font-family: 'Boogaloo'; font-size: 1.5rem; }

.logo-footer > .logo_nav { height: 12vh !important; }

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

div#inverse { margin: 0 !important; width: 100%; margin-bottom: 4rem !important; }

div#toiture { margin: 0 !important; width: 100%; margin-bottom: 4rem !important; }

.titleText.text-white.text-center.fs-2.mb-4.mt-4.titles { position: relative; left: 50%; transform: translateX(-50%); text-align: center !important; width: 1000px !important; }

@media (max-width: 768px) { .titleText.text-center { max-width: 100%; font-size: 1.4rem; /* Ajustable */ } }

h1 { text-shadow: 5px 5px 5px #2f2f2f !important; }

.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

.slider-with-features-carousel-logo { height: 40vh !important; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.175) !important; }

#inverse > .flex-lg-row-reverse { flex-direction: row !important; }

h1 { margin-bottom: 15px !important; }

/*-------------------texte accueil--------------------------*/
/* 🟢 Force le texte à gauche dans tout le bloc du slider */
.bloc-slider-homepage.text-center { text-align: left !important; }

/* 🟢 Supprime le centrage automatique du logo */
.sliderLogoContainer.mx-auto { margin: 0 !important; }

/* 🟢 Force les titres à gauche aussi */
.titleText.text-white.text-center.fs-2.mb-4.mt-lg-5.titles { text-align: left !important; }

/* 🟢 Bonus : si Bootstrap réapplique .text-center, tu peux écraser globalement */
.bloc-slider-homepage .text-center, .titleText.text-center { text-align: left !important; }

/*-------------------bouton accueil--------------------------*/
/*-------------------------------------  🔸 BOUTON ACCUEIL (style inversé) -------------------------------------*/
a#phone-analytics-tag-video-bloc { display: inline-block; font-family: Boogaloo; border: 2px solid #ffffff !important; /* 🟠 contour orange */ border-radius: 0; padding: 10px 28px; color: #ffffff !important; /* 🟠 texte orange */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background-color: transparent !important; text-decoration: none; text-shadow: none !important; }

/* ✅ Tous les enfants héritent de la couleur */
a#phone-analytics-tag-video-bloc * { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; }

/* 🔸 Hover : fond orange + texte blanc */
a#phone-analytics-tag-video-bloc:hover, a#phone-analytics-tag-video-bloc:focus, a#phone-analytics-tag-video-bloc:active { background-color: #da6f4b !important; /* 🟠 fond orange */ color: #fff !important; /* ⚪ texte blanc */ border-color: #da6f4b !important; box-shadow: 0 6px 20px rgba(218, 111, 75, 0.3); text-shadow: none !important; }

/* ✅ Les enfants passent aussi en blanc au survol */
a#phone-analytics-tag-video-bloc:hover *, a#phone-analytics-tag-video-bloc:focus *, a#phone-analytics-tag-video-bloc:active * { color: #fff !important; fill: #fff !important; stroke: #fff !important; }

/*-------------------bouton cta--------------------------*/
/*------------------------------------- 🔸 BOUTON CTA (page d'accueil double screen) -------------------------------------*/
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { display: inline-block; font-family: boogaloo; border: 2px solid #ffffff  !important; /* 🔸 contour orange */ border-radius: 0; padding: 10px 28px; color: #ffffff  !important; /* 🔸 texte orange de base */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background: transparent !important; text-shadow: none !important; text-decoration: none; }

/* ✅ Tous les enfants héritent de la couleur */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 * { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; }

/* 🔸 Hover CTA */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:focus, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:active { background-color: #da6f4b !important; /* 🔸 fond orange */ color: #fff !important; /* ✅ texte blanc */ box-shadow: 0 6px 20px rgba(218, 111, 75, 0.4) !important; }

/* ✅ Les enfants passent aussi en blanc au survol */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover *, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:focus *, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:active * { color: #fff !important; fill: #fff !important; stroke: #fff !important; }

/*-------------------bouton nav--------------------------*/
/* 🔸 Style bouton orange contour */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { display: inline-block; font-family: boogaloo; border: 2px solid #da6f4b; /* 🔸 contour orange */ border-radius: 0px !important; padding: 10px 28px; color: #da6f4b !important; /* 🔸 texte orange */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background: transparent !important; text-decoration: none; text-shadow: none !important; }

/* 🔸 Effet au survol, focus, clic */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:focus, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:active { background-color: #da6f4b !important; /* 🔸 fond orange */ color: #fff !important; /* ⚪ texte blanc */ box-shadow: 0 6px 18px rgba(218, 111, 75, 0.3); text-shadow: none !important; }

/*-------------------Présentations 1--------------------------*/
/* ✅ Reset global */
.presentation-poree * { margin: 0; padding: 0; box-sizing: border-box; color: #000000; }

/* 🌿 Section principale */
.presentation-poree { width: 100%; background-color: #ffffff; /* ✅ fond blanc */ display: flex; justify-content: center; padding: 80px 40px; /* espace interne global */ }

/* 🧱 Structure */
.presentation-poree-inner { display: grid; grid-template-columns: 560px 610px; /* remplacement du 1.2fr / 1.3fr */ align-items: center; gap: 80px; max-width: 1300px; width: 100%; }

/* 📝 Bloc texte */
.presentation-poree-text { display: flex; flex-direction: column; justify-content: center; }

.presentation-poree-subtitle { color: #da6f4b; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 0; font-size: 22px; }

.presentation-poree-title { font-size: 44px; font-weight: 700; line-height: 52px; margin-bottom: 20px; margin-top: 10px; color: #222; }

.presentation-poree-description { color: #000000; line-height: 28px; font-size: 19px; margin-bottom: 40px; max-width: 600px; }

/* 🟧 Bouton CTA */
.presentation-poree-button { display: inline-block; border: 2px solid #da6f4b; color: #da6f4b; background: transparent; text-decoration: none; font-weight: 600; padding: 10px 26px; border-radius: 0; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; font-size: 15px; align-self: flex-start; }

.presentation-poree-button:hover { background: #da6f4b; color: #fff; }

/* 🖼️ Image */
.presentation-poree-image { display: flex; justify-content: center; align-items: center; }

.presentation-poree-image img { width: 100%; max-width: 690px; height: 388px; /* correspond à l’ancien 16/9 environ */ object-fit: cover; border-radius: 6px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }

/* 📱 Responsive */
@media (max-width: 1024px) { .presentation-poree-inner { grid-template-columns: 1fr; text-align: center; gap: 60px; } .presentation-poree-text { align-items: center; } .presentation-poree-title { font-size: 34px; line-height: 42px; } .presentation-poree-description { max-width: 100%; } .presentation-poree-button { align-self: center; } .presentation-poree-image img { width: 100%; max-width: 100%; height: 400px; } }

/*------------------- Présentation 2 --------------------------*/
/* ✅ Reset global */
.presentation-deux * { margin: 0; padding: 0; box-sizing: border-box; color: #ffffff; }

/* 🌿 Section principale */
.presentation-deux { width: 100%; background-color: #da6f4b; display: flex; justify-content: center; padding: 80px 40px; }

/* 🧱 Structure */
.ppresentation-deux-inner { display: grid; grid-template-columns: 560px 610px; align-items: center; gap: 80px; max-width: 1300px; width: 100%; }

/* 📝 Bloc texte */
.presentation-deux-text { display: flex; flex-direction: column; justify-content: center; }

.presentation-deux-subtitle { color: #ffffff; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 0; font-size: 22px; }

.presentation-deux-title { font-size: 44px; font-weight: 700; line-height: 52px; margin-bottom: 20px; margin-top: 10px; color: #ffffff; }

.presentation-deux-description { color: #ffffff; line-height: 28px; font-size: 19px; margin-bottom: 40px; max-width: 600px; }

/* 🟧 Bouton CTA */
.presentation-deux-button { display: inline-block; border: 2px solid #ffffff; color: #ffffff; background: transparent; text-decoration: none; font-weight: 600; padding: 10px 26px; border-radius: 0; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; font-size: 15px; align-self: flex-start; }

.presentation-deux-button:hover { background: #ffffff; color: #da6f4b; }

/* 🖼️ Image */
.presentation-deux-image { display: flex; justify-content: center; align-items: center; }

.presentation-deux-image img { width: 100%; max-width: 690px; height: 388px; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }

/* 📱 Responsive */
@media (max-width: 1024px) { .ppresentation-deux-inner { grid-template-columns: 1fr; text-align: center; gap: 60px; } .presentation-deux-text { align-items: center; } .presentation-deux-title { font-size: 34px; line-height: 42px; } .presentation-deux-description { max-width: 100%; } .presentation-deux-button { align-self: center; } .presentation-deux-image img { width: 100%; max-width: 100%; height: 400px; } }

/*-------------------Services--------------------------*/
/* 🌿 RESET */
.services-poree * { margin: 0; padding: 0; box-sizing: border-box; }

/* 🌿 Section principale */
.services-poree { background: #da6f4be6; color: #4a5c4a; padding: 60px 20px 90px; }

.services-poree .container { max-width: 1300px; margin: 0 auto; }

/* 🏷️ Titre principal */
.services-poree .header { text-align: center; margin-bottom: 60px; }

.services-poree h2 { font-size: 52px; font-weight: 400; letter-spacing: 10px; margin-bottom: 25px; color: #ffffff; text-transform: uppercase; }

.services-poree .subtitle { font-size: 19px; line-height: 28px; color: #ffffff; max-width: 820px; margin: 0 auto; letter-spacing: 0.5px; }

/* 🧱 Grille cartes */
.cards-container.single-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }

/* 🪵 Carte */
.card { position: relative; border-radius: 8px; overflow: hidden; height: 400px; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; }

.card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }

/* 🖼️ Image */
.card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

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

/* 🌑 Overlay sombre */
.card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%); padding: 30px 25px; color: white; }

/* ✍️ Bloc bas : titre + flèche */
.card-bottom { display: flex; align-items: flex-end; justify-content: space-between; }

/* ✍️ Titre */
.card-title { font-size: 28px; font-weight: 500; color: #fff; text-transform: none; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); flex: 1; }

/* ➡️ Flèche ronde */
.card-arrow { width: 44px; height: 44px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; margin-left: 15px; }

.card-arrow::after { content: '→'; font-size: 20px; color: #333; }

.card:hover .card-arrow { background-color: #da6f4b; transform: rotate(45deg) scale(1.1); }

.card:hover .card-arrow::after { color: white; }

/* 📱 Responsive */
@media (max-width: 1024px) { .cards-container.single-row { grid-template-columns: repeat(2, 1fr); gap: 25px; } .services-poree h2 { font-size: 40px; letter-spacing: 6px; } }

@media (max-width: 640px) { .cards-container.single-row { grid-template-columns: 1fr; } .card { height: 350px; } .card-title { font-size: 22px; } .card-arrow { width: 38px; height: 38px; } }

/*-------------------Réalisations--------------------------*/
/* 🌿 Réalisation Porée V2 — Version sans cadre ni effet */
.realisation-poree-v2 { width: 100%; padding: 80px 40px; background-color: #ffffff; display: flex; justify-content: center; }

.realisation-poree-v2-container { display: flex; align-items: center; justify-content: space-between; gap: 70px; max-width: 1350px; width: 100%; }

/* 📸 Image unique (sans bord ni ombre) */
.realisation-poree-v2-images { flex: 1.4; display: flex; justify-content: center; align-items: center; }

.realisation-poree-v2-images img.img-unique-v2 { width: 80%; max-width: 650px; aspect-ratio: 3 / 3.2; object-fit: cover; border-radius: 0; box-shadow: none; transform: none; }

/* 📝 Texte */
.realisation-poree-v2-content { flex: 1.2; color: #000000; max-width: 680px; padding-right: 20px; }

.realisation-poree-v2-content .intro-v2 span { color: #c9693a; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 22px; font-family: Arial; }

.realisation-poree-v2-content h2 { font-weight: 700; color: #111; margin: 18px 0 24px; line-height: 1.3; font-size: 40px; /* ✅ titre plus large */ max-width: 90%; }

.realisation-poree-v2-content .description-v2 { color: #000; line-height: 1.8; font-size: 19px; /* ✅ texte plus grand et aéré */ margin-bottom: 40px; max-width: 95%; }

/* 🔘 CTA */
.realisation-poree-v2 .cta-v2 { display: inline-block; border: 2px solid #c9693a; color: #c9693a; padding: 14px 36px; font-weight: 600; font-size: 15px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 2px; transition: all 0.25s ease; }

.realisation-poree-v2 .cta-v2:hover { background-color: #c9693a; color: #fff; transform: translateY(-2px); }

/* 📱 Responsive */
@media (max-width: 992px) { .realisation-poree-v2-container { flex-direction: column; text-align: center; gap: 40px; } .realisation-poree-v2-images img.img-unique-v2 { width: 90%; max-width: 550px; } .realisation-poree-v2-content { padding-right: 0; max-width: 700px; } .realisation-poree-v2-content h2 { font-size: 36px; max-width: 100%; } .realisation-poree-v2-content .description-v2 { font-size: 17px; max-width: 100%; } }

@media (max-width: 640px) { .realisation-poree-v2 { padding: 50px 20px; } .realisation-poree-v2-images img.img-unique-v2 { width: 100%; max-width: 420px; } .realisation-poree-v2-content h2 { font-size: 28px; } .realisation-poree-v2-content .description-v2 { font-size: 16px; } }

/*-------------------lien page--------------------------*/
.card-notch-link { text-decoration: none !important; color: inherit !important; display: block; }

/* On laisse la couleur hériter normalement (sans !important) */
.card-notch-link * { text-decoration: none !important; color: inherit; }

/* ❌ SUPPRIMÉ : .card-notch * { color: #ffffff !important; } */
/* ✅ On cible seulement le texte */
.card-notch h3, .card-notch p { color: #ffffff; }

.cards-notch-final { --orange: #da6f4b; --bg: #ffffff; background: transparent; padding: 70px 40px; display: flex; justify-content: center; }

.cards-notch-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; max-width: 1200px; width: 100%; margin-top: 40px; }

.card-notch { position: relative; background: var(--orange); border-radius: 4px; padding: 28px 28px 60px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; }

.card-notch:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15); }

.card-notch::after { content: ""; position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: var(--bg); border-top-left-radius: 18px; }

.icon-notch { width: 65px; height: 65px; margin-bottom: 16px; }

.icon-bg { background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }

.icon-notch img { width: 60%; height: 60%; object-fit: contain; }

.line-notch { height: 2px; background: #ffffff55; width: 65%; margin-bottom: 16px; border-radius: 2px; position: relative; }

.line-notch::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: #fff; border-radius: 50%; }

.card-notch-content { flex: 1; display: flex; flex-direction: column; }

.card-notch h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; min-height: 48px; }

.card-notch p { font-size: 15px; line-height: 1.6; min-height: 72px; }

/* 👉 Flèche indépendante du texte */
.fab-notch { position: absolute; bottom: -6px; right: 6px; width: 54px; height: 54px; background: #ffffff; /* Rond blanc */ border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); color: #da6f4b; /* Couleur de la flèche (currentColor) */ display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; z-index: 5; }

.fab-notch svg { stroke: currentColor; /* Flèche = couleur du parent */ transition: all 0.3s ease; }

/* HOVER = rond orange + flèche blanche */
.fab-notch:hover { background: #da6f4b; /* Rond ORANGE */ color: #ffffff; /* Flèche BLANCHE */ transform: translateY(-2px); }

@media (max-width: 992px) { .cards-notch-container { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .cards-notch-container { grid-template-columns: 1fr; } }

/*-------------------lien page 2--------------------------*/
/* ================================ 🔗 Liens de cartes ================================ */
.lien-num-link { text-decoration: none; color: inherit; display: block; }

.lien-num-link * { text-decoration: none; color: inherit; }

/* ================================ 🎨 Wrapper général ================================ */
.lien-num-final { --orange: #da6f4b; --bg: #ffffff; background: transparent; padding: 70px 40px; display: flex; justify-content: center; }

/* ================================ 🟧 Grille 3 colonnes ================================ */
.lien-num-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; max-width: 1050px; width: 100%; margin-top: 40px; justify-content: center; }

/* ================================ 🧱 Carte ================================ */
.lien-num-card { background: var(--orange); border-radius: 4px; padding: 28px 28px 60px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); position: relative; display: flex; flex-direction: column; height: 100%; min-height: 200px; transition: transform 0.25s ease, box-shadow 0.25s ease; }

.lien-num-card:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15); }

/* Petite découpe décorative */
.lien-num-card::after { content: ""; position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: var(--bg); border-top-left-radius: 18px; }

/* ================================ 🧡 Icône ================================ */
.lien-num-icon { width: 70px; height: 70px; margin-bottom: 16px; }

.lien-num-icon-bg { background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }

.lien-num-icon img { width: 60%; height: 60%; object-fit: contain; }

/* ================================ 🟦 Ligne décorative ================================ */
.lien-num-line { height: 2px; background: #ffffff55; width: 65%; border-radius: 2px; margin-bottom: 16px; position: relative; }

.lien-num-line::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: #ffffff; border-radius: 50%; }

/* ================================ ✏️ Contenu texte ================================ */
.lien-num-content { flex-grow: 1; display: flex; flex-direction: column; }

.lien-num-card h3 { font-size: 22px; font-weight: 700; color: #ffffff; margin-bottom: 12px; min-height: 48px; }

.lien-num-card p { font-size: 17px; color: #ffffff; line-height: 1.6; min-height: 72px; }

/* ================================ ➤ Bouton rond ================================ */
.lien-num-fab { position: absolute; bottom: -6px; right: 6px; width: 54px; height: 54px; background: #ffffff; border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); color: var(--orange); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; z-index: 5; }

.lien-num-fab svg { stroke: currentColor; transition: all 0.3s ease; }

.lien-num-fab:hover { background: var(--orange); color: #ffffff; transform: translateY(-2px); }

/* ================================ 📱 Responsive ================================ */
@media (max-width: 992px) { .lien-num-container { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .lien-num-container { grid-template-columns: 1fr; } }

/*-------------------numéro--------------------------*/
/* ✅ Reset local */
.etape-poree * { margin: 0; padding: 0; box-sizing: border-box; }

/* 🌿 Section principale */
.etape-poree { background-color: #da6f4b; color: #333; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.etape-poree-content { max-width: 1200px; width: 100%; }

.etape-poree-title { text-align: center; margin-bottom: 60px; }

.etape-poree-title h2 { font-size: 2.5em; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; color: #ffffff; }

/* 🧱 Grille des cartes */
.etape-poree-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colonnes = 3 cartes centrées */ gap: 25px; justify-content: center; /* centre la grille */ }

/* 🪵 Carte */
.etape-poree-card { background: #f0f0f0; border: 1px solid #ddd; border-radius: 12px; padding: 40px 30px; text-align: left; display: flex; flex-direction: column; }

/* Numéro */
.etape-poree-number { font-size: 4.5em; font-weight: 300; color: #da6f4b; line-height: 1; margin-bottom: 20px; }

/* Bloc texte global dans la carte */
.etape-poree-card-text { display: flex; flex-direction: column; flex: 1; }

/* Titre — hauteur fixes pour aligner */
.etape-poree-card-title { font-size: 1.4em; font-weight: 600; color: #222; margin-bottom: 15px; line-height: 1.4; /* 🔥 Hauteur fixe pour l’alignement horizontal Ajuste si besoin selon la longueur max de tes titres */ min-height: 3.2em; /* ≈ 2 lignes */ display: flex; align-items: flex-start; }

/* Description — on peut aussi lui donner un min-height si tu veux que la fin des blocs texte tombe au même niveau */
.etape-poree-card-description { font-size: 1em; line-height: 1.6; color: #555; font-weight: 400; /* Optionnel : égaliser les blocs de texte */ min-height: 4.8em; /* ≈ 3 lignes */ }

/* 📱 Responsive */
@media (max-width: 1024px) { .etape-poree-grid { grid-template-columns: repeat(2, 1fr); } .etape-poree-title h2 { font-size: 2em; } }

@media (max-width: 640px) { .etape-poree-grid { grid-template-columns: 1fr; } .etape-poree-title h2 { font-size: 1.6em; } .etape-poree-number { font-size: 3.5em; } .etape-poree { padding: 60px 20px; } }

/*-------------------Galerie--------------------------*/
/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Section */
.galerie-poree { width: 100%; padding: 80px 40px; background: #f3f0ed; font-family: "Poppins",sans-serif; color: #2b2b2b; }

/* Titre + sous-titre */
.galerie-poree-titre { text-align: center; font-size: 48px; font-weight: 600; letter-spacing: 6px; margin-bottom: 10px; text-transform: uppercase; }

.galerie-poree-soustitre { text-align: center; font-size: 19px; color: #5a5a5a; margin-bottom: 50px; }

/* Filtres */
.galerie-poree-filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 60px; }

.galerie-poree-filtres button { padding: 14px 30px; border: none; border-radius: 0; background: #555; color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all .25s ease; }

.galerie-poree-filtres button:hover, .galerie-poree-filtres button.actif { background: #da6f4b; color: #fff; }

/* Grille */
.galerie-poree-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; max-width: 1400px; margin: 0 auto; }

.galerie-poree-item { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }

.galerie-poree-item img { width: 100%; height: 100%; object-fit: cover; }

/* Avant/Après */
.avant-apres-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }

.avant-apres-avant, .avant-apres-apres { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.avant-apres-apres { clip-path: inset(0 50% 0 0); }

.avant-apres-curseur { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #da6f4b; transform: translateX(-50%); pointer-events: none; z-index: 10; }

.curseur-poignee { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: #da6f4b; border-radius: 50%; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #fff; font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

.avant-apres-labels { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 16px; pointer-events: none; z-index: 5; }

.label-avant, .label-apres { background: rgba(218, 111, 75, 0.9); color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* Responsive */
@media (max-width: 1024px) { .galerie-poree-grille { grid-template-columns: repeat(2, 1fr); } .galerie-poree-titre { font-size: 40px; } }

@media (max-width: 640px) { .galerie-poree-grille { grid-template-columns: 1fr; } .galerie-poree-titre { font-size: 32px; } .galerie-poree { padding: 60px 20px; } }

/*-------------------Dépannage--------------------------*/
/* --- Section plein écran orange --- */
.bloc-depannage { width: 100%; background: #de7d5d; /* ORANGE sur toute la largeur */ padding: 90px 20px; display: flex; justify-content: center; }

/* --- Bloc blanc centré --- */
.depannage-inner { background: #ffffff; padding: 55px 45px; max-width: 850px; text-align: center; border-radius: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); }

/* --- Titre --- */
.depannage-inner h2 { font-size: 36px; font-weight: 700; color: #c96a3a; margin-bottom: 18px; line-height: 1.2; }

/* --- Texte --- */
.depannage-inner p { font-size: 19px; line-height: 1.65; color: #000000; margin-bottom: 35px; }

/* --- CTA blanc bord blanc --- */
.btn-orange-white { display: inline-block; padding: 14px 40px; border: 2px solid #da6f4b; color: #da6f4b; background: transparent; font-weight: 600; font-size: 15px; text-decoration: none; letter-spacing: 0.7px; transition: 0.3s ease; }

/* --- SURVOL : fond blanc + texte orange --- */
.btn-orange-white:hover { background: #da6f4b; color: #ffffff; border-color: #da6f4b; }

/*-------------------Numéro deux--------------------------*/
/* Reset local */
.numero-deux * { margin: 0; padding: 0; box-sizing: border-box; }

/* Section */
.numero-deux { background-color: #da6f4b; padding: 80px 20px; display: flex; justify-content: center; }

.nd-content { width: 100%; max-width: 1200px; }

/* Titre */
.nd-title { text-align: center; margin-bottom: 60px; }

.nd-title h2 { font-size: 2.6rem; font-weight: 500; line-height: 1.3; color: #ffffff; }

/* Grille centrée */
.nd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; justify-items: stretch; }

/* Carte */
.nd-card { background: #f4f4f4; border-radius: 14px; padding: 38px 30px; border: 1px solid #e2e2e2; display: flex; flex-direction: column; }

/* Numéro */
.nd-number { font-size: 3.8rem; font-weight: 300; color: #da6f4b; line-height: 1; margin-bottom: 18px; }

/* Titre de carte */
.nd-card-title { font-size: 1.3rem; font-weight: 600; color: #222; margin-bottom: 14px; line-height: 1.4; min-height: 3rem; }

/* Description */
.nd-card-description { font-size: 1rem; line-height: 1.6; color: #555; }

/* Responsive tablette */
@media (max-width: 1024px) { .numero-deux { padding: 60px 20px; } .nd-title h2 { font-size: 2.1rem; } .nd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Responsive mobile */
@media (max-width: 640px) { .nd-title h2 { font-size: 1.7rem; } .nd-grid { grid-template-columns: 1fr; } .nd-card { padding: 28px 22px; } .nd-number { font-size: 3rem; } }

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