@charset "UTF-8";
@import url(main.css);
div.shadow-lg { box-shadow: none !important; }

.animated-border-button:after { background-color: white; }

/*--------------------------------------------RESPONSIVE-----------------------------------------*/
@media (max-width: 1000px) { .dh3-mascot { display: none !important; } }

/*----------------------------------------Ajustements SEO----------------------------------------*/
.first-banner-seo-page .background-image-div-opacity, .bandeau, #custom-cards + .cta_banner { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2F389788955995144_ax9y.webp?alt=media&token=24a295ac-6fb9-427f-bf44-5b31dd323b78") !important; background-size: cover; background-position: center; background-attachment: fixed; }

.bandeau h1, #custom-cards + .cta_banner span { text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.6); }

#custom-cards + div.cta_banner { margin: 0 !important; padding: 4rem 0 !important; }

#bandeau-title-seo .titles { font-weight: 300 !important; }

#photo-text-seo-page h2.titles, #seo-text-images h2.titles { font-weight: 300 !important; }

.first-activity-div .card-cover a, .second-activity-div .card-cover a, .third-activity-div .card-cover a { font-weight: 300 !important; }

.first-activity-div .order-xl-2.order-xxl-2, .second-activity-div .order-xl-2.order-xxl-2, .third-activity-div .order-xl-2.order-xxl-2 { min-width: 500px; }

@media (max-width: 1000px) { .first-activity-div .order-xl-2.order-xxl-2, .second-activity-div .order-xl-2.order-xxl-2, .third-activity-div .order-xl-2.order-xxl-2 { min-width: 300px; } }

/*------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/* ================================ TAGS OUTLINE MODERN ================================ */
.dupuy-hero__tags { position: relative; z-index: 3; margin-top: 1.1rem; display: flex; flex-direction: column; align-items: flex-start; padding-left: 20px; width: 80%; }

@media (max-width: 1000px) { .dupuy-hero__tags { margin: auto !important; padding: 0 !important; margin-top: 20px !important; } }

.dupuy-hero__tag { --stroke: 1px; --enter-dur: 900ms; --exit-dur: 700ms; font-family: 'Ubuntu' !important; font-weight: 900; text-transform: uppercase; font-size: 5rem; line-height: 1.1; -webkit-text-stroke: var(--stroke) rgba(255, 255, 255, 0.55); opacity: 0; transform: translateY(10px) translateX(-18px); filter: blur(2px); will-change: transform, opacity, filter; }

@media (max-width: 1000px) { .dupuy-hero__tag { font-size: 2rem; } }

.dupuy-hero__tag--blue { color: black; -webkit-text-stroke-color: rgba(44, 109, 179, 0.85); text-shadow: 0 0 18px rgba(44, 109, 179, 0.1); transform: translateY(10px) translateX(-22px); }

.dupuy-hero__tag--blue:hover { color: rgba(44, 109, 179, 0.85) !important; }

.dupuy-hero__tag--yellow { color: black; -webkit-text-stroke-color: rgba(255, 196, 0, 0.9); text-shadow: 0 0 16px rgba(255, 196, 0, 0.08); transform: translateY(10px) translateX(-8px); }

.dupuy-hero__tag--yellow:hover { color: rgba(255, 196, 0, 0.9); }

/* IN */
.dupuy-hero__tag.is-in { opacity: 1; transform: translateY(0) translateX(0); filter: blur(0); transition: all var(--enter-dur) cubic-bezier(0.22, 1, 0.36, 1); }

/* OUT */
.dupuy-hero__tag.is-out { opacity: 0; transform: translateY(-10px) translateX(22px); filter: blur(3px); transition: opacity var(--exit-dur) cubic-bezier(0.64, 0, 0.78, 0), transform var(--exit-dur) cubic-bezier(0.64, 0, 0.78, 0), filter var(--exit-dur) cubic-bezier(0.64, 0, 0.78, 0); }

/* Responsive */
@media (max-width: 768px) { .dupuy-hero { justify-content: flex-start; padding-top: 4rem; text-align: center; } .dupuy-hero__logo { max-width: 80%; margin-top: 30px; } }

/*------------------------------------Ajustements SEO------------------------------------------------*/
div:has(> .first-activity-div) { padding: 100px 0; }

.first-activity-div h2, .second-activity-div h2, .third-activity-div h2 { font-size: clamp(1.5rem, 1.7vw, 2rem) !important; font-weight: 900 !important; color: rgba(255, 196, 0, 0.9) !important; }

/* ===================================================== CONTACT SECTION – DUPUY FINAL DESIGN ===================================================== */
#contact { background: #000 !important; padding: 80px 40px 140px 40px !important; position: relative; overflow: hidden; color: #fff !important; }

/* =============================== LAYOUT PLUS LARGE FORM ================================ */
#contact .col-lg-6:first-child { flex: 0 0 40% !important; max-width: 40% !important; }

#contact .col-lg-6:last-child { flex: 0 0 60% !important; max-width: 60% !important; }

@media (max-width: 992px) { #contact .col-lg-6:first-child, #contact .col-lg-6:last-child { flex: 0 0 100% !important; max-width: 100% !important; } }

/* =============================== DIAGONALES FOND ================================ */
#contact::before, #contact::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: clamp(260px, 28vw, 480px); left: 50%; transform-origin: center; opacity: 0.15; pointer-events: none; }

#contact::before { transform: translateX(calc(-50% - 160px)) rotate(12deg); background: linear-gradient(180deg, #7a2a00 0%, #ff6a00 100%); }

#contact::after { transform: translateX(calc(-50% + 160px)) rotate(12deg); background: linear-gradient(180deg, #4a0000 0%, #ff1f1f 100%); }

/* =============================== TITRE STYLE JAUNE ================================ */
#contact h3 { font-size: clamp(2rem, 2vw, 2.3rem) !important; font-weight: 900 !important; text-transform: uppercase !important; color: rgba(255, 196, 0, 0.9) !important; margin-bottom: 25px !important; }

/* =============================== TEXTE INTRO ================================ */
#contact .lead { line-height: 1.5 !important; text-align: left; }

/* =============================== FORM CARD ================================ */
#contact form { background: rgba(255, 255, 255, 0.03) !important; border: 2px solid #2c6db3 !important; border-radius: 20px !important; backdrop-filter: blur(6px); width: 100%; }

/* =============================== INPUTS ================================ */
#contact .form-control { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid #2c6db3 !important; color: #fff !important; }

#contact .form-control:focus { border-color: #ffc400 !important; box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.3) !important; background: rgba(255, 255, 255, 0.08) !important; }

#contact .form-floating label { color: rgba(255, 255, 255, 0.7) !important; }

/* =============================== SUBMIT BUTTON ================================ */
#contact .btn-outline-dark { border: 3px solid #ffc400 !important; color: #ffc400 !important; background: transparent !important; text-transform: uppercase !important; font-weight: 700 !important; transition: all 0.4s ease !important; }

#contact .btn-outline-dark:hover { background: #ffc400 !important; color: #000 !important; }

/* =============================== MODALS ================================ */
#contact .modal-content { background: #111 !important; border: 2px solid #2c6db3 !important; color: #fff !important; }

#contact .modal-header { border-bottom: 1px solid #2c6db3 !important; }

#contact .modal-footer { border-top: 1px solid #2c6db3 !important; }

/*-----------------------------------------------------------------------AVIS GOOGLE---------------------------------------------*/
div.googleReviews-div { padding: 100px 0; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2FLogo_Dupuy_Frederic_3_-_Copie_yeh0.webp); background-size: contain; background-repeat: no-repeat; background-position: top right; margin: 0 !important; }

div.googleReviews-div .container .card { border: 2px solid !important; border-color: #2c6db3 !important; background-color: transparent; }

div.googleReviews-div div.d-lg-flex.align-items-lg-center { color: white; }

div.googleReviews-div h3 { font-weight: 900 !important; }

#google-reviews-widget .card { border: 2px solid !important; border-color: #ffc400 !important; background: #ffc400; border-radius: 20px !important; }

#google-reviews-widget .card .card-body { background-color: white; border-radius: 0 0 20px 20px; }

#google-reviews-widget .card div.d-flex.flex-wrap.justify-content-center.align-items-center.my-2 { filter: brightness(100); }

/*--------------------------------------------------------------Barre de nav----------------------------------------------------------*/
nav { font-family: 'Ubuntu'; }

/*--------------------------------------------------------------Réseaux sociaux----------------------------------------------------*/
@media (min-width: 992px) { .reseaux .row-cols-lg-2 > * { flex: 0 0 auto; width: 33%; } }

/*-------------------------------------------------------------Bannières CTA----------------------------------------------------------*/
#satisfaction p { position: relative; }

#satisfaction p::after { content: ""; position: absolute; bottom: 0; left: 0; width: clamp(180px, 22vw, 450px); height: clamp(180px, 22vw, 320px); background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2FLogo_Dupuy_Frederic_2_0x4a.webp); background-size: contain; background-repeat: no-repeat; background-position: bottom right; pointer-events: none; z-index: 2; }

/*---------------------------------------------------------------Services---------------------------------------------------------*/
.dupuy-services { position: relative; background: #000; padding: 140px 20px; overflow: hidden; color: #fff; }

.dupuy-services .lead { font-size: 1.15rem !important; }

.dupuy-services h3 { font-weight: 900 !important; }

.dupuy-services h2 { font-size: clamp(2rem, 2vw, 2.3rem) !important; font-weight: 900 !important; color: rgba(255, 196, 0, 0.9); z-index: 999; }

.dupuy-services a { text-decoration: none; }

.dupuy-services .dupuy-hero__tag--yellow { font-size: 5rem !important; --stroke: 1px !important; padding: 0 !important; }

.dupuy-services .dupuy-hero__tag--yellow:hover { color: black !important; }

@media (max-width: 1000px) { .dupuy-services .dupuy-hero__tag--yellow { font-size: 2.5rem !important; } }

/* Diagonales */
.dupuy-services__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.80; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2FChatGPT_Image_25_fevr_2026_14_59_42_c6bs.webp?alt=media&token=c6d49649-fb32-4342-b7b3-dfe4ea272326); background-size: 30%; background-repeat: no-repeat; background-position: bottom right; }

.dupuy-services__bg .dupuy-diag { position: absolute; top: -20%; bottom: -20%; width: clamp(260px, 28vw, 480px); left: 50%; transform-origin: center; }

.dupuy-services__diag--orange { background: linear-gradient(180deg, #30366f 0%, #4267b2 100%); }

.dupuy-services__diag--red { background: linear-gradient(180deg, #3d3d3d 0%, #777777 100%); }

/* ======================= CARDS ======================= */
.dupuy-service-card { padding: 35px; border-radius: 14px; background: rgba(255, 255, 255, 0.02); border: 2px solid; height: 100%; }

/* Alternance bordures */
.dupuy-card-blue { border-color: #2c6db3; transition: all 0.5s ease; }

a:hover .dupuy-card-blue { background-color: #2c6db3; }

.dupuy-card-yellow { border-color: #ffc400; transition: all 0.5s ease; }

a:hover .dupuy-card-yellow { background-color: #ffc400; }

/* Contenu centré verticalement */
.dupuy-service-inner { display: flex; align-items: center; gap: 20px; height: 100%; }

/* Icône */
.dupuy-service-icon { font-size: 2rem; flex-shrink: 0; }

/* Responsive */
@media (max-width: 768px) { .dupuy-services { padding: 90px 20px; } .dupuy-service-inner { flex-direction: column; align-items: flex-start; } }

/*---------------------------------------------------------Paragraphes----------------------------------------------------------------------*/
div.order-xl-2.order-xxl-2 > img { max-width: 700px; aspect-ratio: 1 / 1; object-fit: cover; }

/* ====================================================== DIAGONALES + LISERÉS — posés sur le div.col parent overflow: hidden clip tout au bord de l'image ====================================================== */
.order-xl-2.order-xxl-2 { position: relative; overflow: hidden; border-radius: 30px; padding: 6px; background: linear-gradient(135deg, #0c2a4d 0%, #2c6db3 35%, #ffc400 65%, #ffd54f 100%); width: fit-content; margin: auto; }

/* Neutralise l'ancien cadre sur l'img puisque le col le porte désormais */
.order-xl-2.order-xxl-2 > img { border-radius: 24px !important; padding: 0 !important; background: none !important; width: 100%; }

/* ---- COIN HAUT GAUCHE — triangle rouge/orange ---- */
.order-xl-2.order-xxl-2::before { content: ""; position: absolute; top: 0; left: 0; width: clamp(60px, 9vw, 130px); height: clamp(60px, 9vw, 130px); background: linear-gradient(135deg, #7a1a00 0%, #c0392b 45%, #ff6a00 100%); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 2; pointer-events: none; }

/* ---- COIN BAS DROITE — triangle rouge/orange ---- */
.order-xl-2.order-xxl-2::after { content: ""; position: absolute; bottom: 0; right: 0; width: clamp(60px, 9vw, 130px); height: clamp(60px, 9vw, 130px); background: linear-gradient(315deg, #7a1a00 0%, #c0392b 45%, #ff6a00 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 2; pointer-events: none; }

div.dupuy-section { position: relative; overflow: hidden; margin: 0 auto !important; padding: 100px 0 150px 0 !important; }

div.dupuy-section h2 { font-size: clamp(2rem, 2vw, 2.3rem) !important; font-weight: 900 !important; color: rgba(255, 196, 0, 0.9); }

div.dupuy-section h1 { font-size: clamp(2rem, 2vw, 2.3rem) !important; font-weight: 900 !important; color: rgba(255, 196, 0, 0.9); }

div.dupuy-section .dupuy-hero__tag--yellow { font-size: 5rem !important; --stroke: 1px !important; padding: 0 !important; }

div.dupuy-section .dupuy-hero__tag--yellow:hover { color: black !important; }

@media (max-width: 1600px) { div.dupuy-section .dupuy-hero__tag--yellow { font-size: 4rem !important; } }

@media (max-width: 1000px) { div.dupuy-section .dupuy-hero__tag--yellow { font-size: 2rem !important; } }

div.dupuy-section::after { content: ""; position: absolute; bottom: 50px; left: 0; width: clamp(180px, 22vw, 450px); height: clamp(180px, 22vw, 320px); background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2FChatGPT_Image_25_fevr_2026_16_13_44_3tfn.webp); background-size: contain; background-repeat: no-repeat; background-position: bottom right; pointer-events: none; z-index: 2; }

div.dupuy-section.paragraphe1::after { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FgLr4fGwPIUM4Z83LFK4TlzKjBVx1%2Fimages%2FChatGPT_Image_25_fevr_2026_11_25_16_zfq3.webp?alt=media&token=c3983cf9-339d-4cd2-bbfe-48929636c57c); }

/* container fond */
.dupuy-section__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* base diagonale (identique hero) */
.dupuy-section__bg .dupuy-diag { position: absolute; top: -20%; bottom: -20%; width: clamp(260px, 28vw, 480px); left: 50%; transform-origin: center; opacity: 0.25; }

/* ORANGE */
.dupuy-section__diag--orange { background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%), linear-gradient(180deg, #7a2a00 0%, #c04314 35%, #ff6a00 70%, #ff9a2a 100%); }

/* ROUGE */
.dupuy-section__diag--red { background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.22) 100%), linear-gradient(180deg, #4a0000 0%, #8f0000 35%, #ff1f1f 70%, #ff5a5a 100%); }

/* assure que le contenu passe au dessus */
.dupuy-section .row { position: relative; z-index: 2; }

/* --------------------------------------------BOUTONS GLOBAUX - SLICE ANIMATION GRISE---------------------------------------------------- */
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { --c1: #1a1a1a; /* texte hover */ --c2: #cfcfcf; /* couleur principale */ --size-letter: 16px; position: relative; display: inline-block; padding: 0.7em 1.8em !important; font-size: var(--size-letter) !important; font-weight: 700 !important; font-family: 'Ubuntu'; text-transform: uppercase; text-decoration: none; background: transparent; color: var(--c2) !important; border: 3px solid var(--c2) !important; border-radius: 6px !important; cursor: pointer; overflow: hidden; transition: all 0.5s ease !important; }

/* Texte au-dessus du slice */
a.button_header span, a.button_homepageScreen span, a.button_homepageDoubleScreen span, a.phone-number-button span { position: relative; z-index: 2 !important; transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1) !important; }

/* Diagonal slice */
a.button_header::after, a.button_homepageScreen::after, a.button_homepageDoubleScreen::after, a.phone-number-button::after { content: ""; position: absolute; width: 0; height: 450%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(30deg); background: linear-gradient(180deg, #e0e0e0 0%, #bdbdbd 50%, #9e9e9e 100%); transition: 1000ms cubic-bezier(0.83, 0, 0.17, 1); z-index: -1; }

/* Hover */
a.button_header:hover::after, a.button_homepageScreen:hover::after, a.button_homepageDoubleScreen:hover::after, a.phone-number-button:hover::after { width: 140%; }

a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { color: var(--c1) !important; }

/* Active */
a.button_header:active, a.button_homepageScreen:active, a.button_homepageDoubleScreen:active, a.phone-number-button:active { transform: scale(0.98); filter: brightness(0.9) !important; }

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