@charset "UTF-8";
@import url(main.css);
/*---------------------------------------------------------------------------ancrage presta---------------------------------------------------------------------------------*/
#prestation { scroll-margin-top: 30px; }

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

.logo_nav { height: 9vh !important; }

/*----------------------------------------------------------------------bug padding bas de site-----------------------------------------------------------------------------*/
body { padding-bottom: 0px !important; }

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

#bloc-image-droite { scroll-margin-top: 50px; }

.image-droite { background-color: #FDE6D5; }

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

.image-gauche { background-color: #840505; }

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

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

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

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

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

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

/*-----------------------------------------------------------------------texte bloc map----------------------------------------------------------------------------------*/
.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { color: #260505 !important; font-family: 'Karla', sans-serif; }

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

/*--------------------------------------------------------------écriture bouton téléphone header-------------------------------------------------------------------------*/
.text-color-fourth { color: #FDE6D5 !important; font-family: 'Karla', sans-serif; }

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

/*----------------------------------------------------------------------effet hover header--------------------------------------------------------------------------------*/
.animated-border-button span { transition: color 0.3s ease; }

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

/*-----------------------------------------------------------------grossissement bouton header--------------------------------------------------------------------------*/
.button-header-telephone { transition: transform 0.3s ease, border 0.3s ease; display: inline-block; font-family: 'Karla', sans-serif; font-weight: 600px !important; font-size: 1rem; border: 2px solid #FDE6D5; }

.button-header-telephone:hover { transform: scale(1.1); }

/*----------------------------------------------------------------------grossissement bouton----------------------------------------------------------------------------*/
.button_homepageDoubleScreen { transition: transform 0.3s ease; display: inline-block; border: 2px solid #FDE6D5 !important; }

.button_homepageDoubleScreen:hover { transform: scale(1.05); }

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

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

/* Visible après le défilement */
#back-to-top.show { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Effet au survol */
#back-to-top:hover { background-color: #840505; transform: translateY(-3px); }

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

/*------------------------------------------------------------------------bloc presta/real 2 case---------------------------------------------------------------------------*/
/* ==== Galerie ==== */
.macon-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 80px 20px; background-color: #FDE6D5; /* ton fond terre clair */ }

.macon-link { text-decoration: none; }

/* ==== Carte ==== */
.macon-card { position: relative; overflow: hidden; border: 3px solid #840505; /* rouge brique */ border-radius: 1.5rem; width: 450px; height: 450px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); background: #840505; }

/* ==== Image ==== */
.macon-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.6s ease; }

.macon-card:hover img { opacity: 0.5; }

/* ==== Traits ==== */
.macon-card::before, .macon-card::after { content: ''; position: absolute; height: 3px; background: #FDE6D5; left: 10px; right: 10px; width: calc(100% - 20px); z-index: 3; transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.5s ease, opacity 0.3s ease; }

.macon-card::before { top: 10px; }

.macon-card::after { bottom: 10px; }

/* ==== Hover : apparition gauche → droite ==== */
.macon-card:hover::before, .macon-card:hover::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

/* ==== Transition de sortie : rétraction droite ==== */
.macon-card::before, .macon-card::after { transition: transform 0.5s ease, opacity 0.3s ease; }

.macon-card:hover::before, .macon-card:hover::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

.macon-card:not(:hover)::before, .macon-card:not(:hover)::after { transform: scaleX(0); transform-origin: right; opacity: 1; transition: transform 0.5s ease, opacity 0.3s ease; }

/* ==== Overlay ==== */
.macon-overlay { position: absolute; inset: 0; background: rgba(132, 5, 5, 0.75); color: #FDE6D5; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease; z-index: 2; }

.macon-card:hover .macon-overlay { opacity: 1; }

/* Texte Overlay */
.macon-overlay-text { text-align: center; font-size: 1.3rem; color: #FDE6D5; font-weight: bold; font-family: 'Urbanist', sans-serif; z-index: 4; position: relative; }

/* ==== Responsive ==== */
@media (max-width: 980px) { .macon-card { width: 380px; height: 380px; } .macon-overlay { opacity: 1 !important; } }

@media (max-width: 640px) { .macon-card { width: 100%; height: 300px; } }

/*------------------------------------------------------------------------------presta 8 card--------------------------------------------------------------------------------*/
/* ====== CONTAINER ====== */
.jm-container { background-color: #FDE6D5; padding-top: 5rem; padding-bottom: 1.5rem; /* Ajout de padding sur les côtés */ padding-left: 1rem; padding-right: 1rem; }

/* ====== LIEN ====== */
.jm-link { text-decoration: none; width: 100%; max-width: 20rem; }

/* ====== CARD ====== */
.jm-card { position: relative; overflow: hidden; border: 3px solid #840505; border-radius: 1.5rem; width: 100%; height: 20rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); background: #840505; }

/* Image masquée par défaut et qui apparaît au hover */
.jm-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.6s ease; }

.jm-card:hover img { opacity: 1; }

/* Traits visibles avec animation */
.jm-card::before, .jm-card::after { content: ''; position: absolute; height: 2px; background: #FDE6D5; left: 10px; right: 10px; width: calc(100% - 20px); z-index: 3; transition: transform 0.4s ease; transform: scaleX(1); transform-origin: left; }

.jm-card::before { top: 10px; }

.jm-card::after { bottom: 10px; }

.jm-card:hover::before, .jm-card:hover::after { transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; }

/* ====== OVERLAY ====== */
.jm-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(132, 5, 5, 0.75); color: #FDE6D5; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease; z-index: 2; }

.jm-card:hover .jm-overlay { opacity: 0; }

/* ====== TEXTE ====== */
.jm-text { text-align: center; font-size: 1.3rem; color: #FDE6D5; font-weight: bold; font-family: 'Raleway', sans-serif; z-index: 4; position: relative; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) { .jm-card { height: 15rem !important; } .jm-overlay { opacity: 1 !important; } }

/*---------------------------------------------------------------------------bloc en-tête présta-----------------------------------------------------------------------------*/
.jm-hero-block { position: relative; background-size: cover; background-position: center; height: 550px; /* ajuste selon besoin */ display: flex; align-items: center; justify-content: flex-start; padding: 40px; }

.jm-hero-overlay { background: rgba(0, 0, 0, 0.6); /* fond semi-transparent */ color: #fff; padding: 30px 40px; border-radius: 20px; max-width: 550px; }

.jm-hero-overlay h2 { font-size: 2.4rem; font-weight: 700 !important; color: #FDE6D5; margin-bottom: 20px; font-family: 'Urbanist', sans-serif; }

.jm-hero-btn { display: inline-flex; align-items: center; gap: 8px; background: #B14A2A; color: #FDE6D5; text-decoration: none; font-weight: 600; padding: 10px 20px; border-radius: 25px; border: 2px solid #F7FFE0; transition: background 0.3s ease; font-family: 'Karla', sans-serif; }

.jm-hero-btn:hover { background: #840505; color: #FDE6D5; }

.jm-hero-btn .arrow { font-size: 1.2rem; transition: transform 0.3s ease; }

.jm-hero-btn:hover .arrow { transform: translateY(4px); }

/*----------------------------------------------------------------------------Galerie Custom--------------------------------------------------------------------------------*/
#custom-gallery { padding-top: 40px; }

@media screen and (min-width: 991px) { #custom-gallery { padding: 30px 30px 0 30px; } }

#custom-gallery .image { height: 400px !important; margin: 20px 0; border-radius: 20px; }

.img-wrapper { position: relative; height: 100%; margin-top: -15px; }

.img-wrapper img { border-radius: 30px; width: 100%; }

.img-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; border-radius: 30px; }

.img-overlay i { color: #B14A2A; font-size: 3em; }

#overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#overlay img { margin: 0; width: 80%; height: auto; object-fit: contain; padding: 5%; }

@media screen and (min-width: 768px) { #overlay img { width: 60%; } }

@media screen and (min-width: 1200px) { #overlay img { width: 50%; } }

#nextButton, #prevButton, #exitButton { background-color: #840505; color: #fff; font-size: 1.2em; transition: background-color 0.3s; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

#nextButton:hover, #prevButton:hover, #exitButton:hover { background-color: #B14A2A; }

@media screen and (min-width: 768px) { #nextButton, #prevButton, #exitButton { font-size: 1.6em; width: 50px; height: 50px; } }

#exitButton { position: absolute; top: 105px; right: 15px; }

.img-responsive { height: 100% !important; object-fit: cover !important; }

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