/* =================================== */
/* ==== 1. STYLES DE BASE & POLICES ==== */
/* =================================== */
html,
body {
   margin: 0;
   padding: 0;
   font-family: "Sansation", sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* Classes de police (si vous en avez besoin) */
.sansation-regular {
   font-family: "Sansation", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.sansation-bold {
   font-family: "Sansation", sans-serif;
   font-weight: 700;
   font-style: normal;
}

/* =================================== */
/* ======== 2. STICKY FOOTER ========= */
/* =================================== */
.main-content {
   flex-grow: 1;
}

/* =================================== */
/* ======== 3. TOP-BAR (HEADER) ======== */
/* =================================== */
.top-bar {
   position: relative;
   top: 0px;
   left: 0px;
   height: auto;
   background-color: white;
   color: rgb(0, 0, 0);
   display: flex;
   align-items: center;
   padding-bottom: 15px;
   padding-left: 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   z-index: 100;
}

.top-bar h1 {
   color: rgba(163, 144, 74, 1);
   text-shadow: #000000 3px 3px 3px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin: 0;
   font-size: 3rem;
}

.logo {
   margin-top: 10px;
   margin-left: 20px;
   width: 80px;
}

.logo img {
   width: 80px;
   height: auto;
   display: block;
}

/* =================================== */
/* ====== 4. NAV LINKS (DESKTOP) ======= */
/* =================================== */
.nav-links {
   display: none;
   margin-left: auto;
   gap: 15px;
   margin-right: auto;
}

.nav-links a {
   background-color: #A3904A;
   padding: 8px 12px;
   border-radius: 5px;
   box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   color: black;
   transition: 0.2s;
}

.nav-links a:hover {
   background: rgb(47, 61, 48);
   color: white;
}

/* =================================== */
/* ======= 5. MENU BURGER (MOBILE) ===== */
/* =================================== */
.burger {
   position: absolute;
   right: 20px;
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
}

.burger img {
   width: 40px;
   height: auto;
   transition: transform 0.4s ease-in-out;
   display: block;
}

.burger:hover img {
   transform: rotate(180deg);
}

.menu {
   position: fixed;
   top: 0;
   right: 0;
   height: 100vh;
   width: 250px;
   background: white;
   box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
   padding: 20px;
   z-index: 1001;
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
}

.menu.active {
   transform: translateX(0);
}

.menu a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: black;
   transition: 0.2s;
   border-radius: 5px;
   margin-bottom: 5px;
}

.menu a:hover {
   background: rgba(163, 144, 74, 1);
   color: white;
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: none;
   z-index: 1000;
}

.overlay.active {
   display: block;
}

/* =================================== */
/* ====== 6. SLIDER (PAGE ACCUEIL) ===== */
/* =================================== */
#background-slider {
   position: relative;
   width: 100%;
   height: 80vh;
   overflow: hidden;
}

.slide-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   background: rgba(0, 0, 0, 0.3);
   color: white;
   border: none;
   font-size: 2rem;
   padding: 10px 15px;
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.2s;
}

.slide-arrow:hover {
   background: rgba(0, 0, 0, 0.6);
}

#arrow-left {
   left: 20px;
}

#arrow-right {
   right: 20px;
}

#play-pause-btn {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   background: rgba(0, 0, 0, 0.3);
   color: white;
   border: none;
   font-size: 1.5rem;
   padding: 5px 15px;
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.2s;
   font-family: Arial, sans-serif;
}

#play-pause-btn:hover {
   background: rgba(0, 0, 0, 0.6);
}

.slide-preview {
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
   transition: 1s ease-in-out;
   background-size: cover;
   background-position: center;
   filter: blur(10px) brightness(0.7);
   z-index: 1;
}

#preview-left {
   left: 0;
}

#preview-right {
   right: 0;
}

#main-slide-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
}

.slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   z-index: 8;
}

.slide.active {
   opacity: 1;
   z-index: 9;
}

/* =================================== */
/* ======== 7. PAGE PORTFOLIO ======== */
/* =================================== */
.portfolio-container {
   max-width: 1200px;
   margin: 40px auto;
   padding: 30px;
   font-family: "Sansation", sans-serif;
   background: #ffffff;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.portfolio-container h2 {
   text-align: center;
   color: rgba(163, 144, 74, 1);
   font-size: 2.8rem;
   margin-bottom: 15px;
   font-weight: 700;
}

.portfolio-container>p {
   text-align: center;
   font-size: 1.1rem;
   line-height: 1.6;
   color: #555;
   margin-bottom: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid #eee;
}

/* Grille en colonne (1 projet par ligne) */
.portfolio-grid {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

/* =================================== */
/* === 8. COMPOSANT: SLIDER AVANT/APRÈS == */
/* =================================== */
.ba-slider {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   background: #f0f0f0;

   /* Format 16/9, centré */
   aspect-ratio: 16 / 9;
   max-width: 800px;
   /* Plus petit que la page */
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   /* Responsive sur mobile */
}

/* Image "Avant" (dessous) */
.ba-slider .ba-before-img {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Image "Après" (dessus) */
.ba-slider .ba-after-img {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;

   /* Masque initial (corrigé) */
   clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.ba-slider .ba-slider-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 4px;
   background: white;
   z-index: 2;
   /* Au-dessus de l'image "après" */
   cursor: ew-resize;
   transform: translateX(-50%);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.ba-slider .ba-handle-arrow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   color: #333;
   font-family: Arial, sans-serif;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.ba-slider .ba-handle-arrow::before {
   content: '<';
   margin-right: 2px;
}

.ba-slider .ba-handle-arrow::after {
   content: '>';
   margin-left: 2px;
}

.ba-slider .ba-title {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
   padding: 30px 20px 15px 20px;
   color: white;
   z-index: 1;
}

.ba-slider .ba-title h3 {
   margin: 0 0 5px 0;
   font-size: 1.4rem;
}

.ba-slider .ba-title p {
   margin: 0;
   font-size: 0.9rem;
   color: #eee;
}

/* =================================== */
/* ========== 9. PAGE CONTACT ========== */
/* =================================== */
.contact-container {
   max-width: 900px;
   margin: 40px auto;
   padding: 30px;
   font-family: "Sansation", sans-serif;
   background: #ffffff;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.contact-container h2 {
   text-align: center;
   color: rgba(163, 144, 74, 1);
   font-size: 2.8rem;
   margin-bottom: 15px;
   font-weight: 700;
}

.contact-container>p {
   text-align: center;
   font-size: 1.1rem;
   line-height: 1.6;
   color: #555;
   margin-bottom: 40px;
}

.contact-methods {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid #eee;
}

.method {
   flex: 1;
   min-width: 280px;
   text-align: center;
   padding: 20px;
   background: #fdfdfd;
   border: 1px solid #eee;
   border-radius: 8px;
}

.method h3 {
   font-size: 1.5rem;
   color: #333;
   margin-top: 0;
   margin-bottom: 10px;
}

.method p {
   color: #666;
   margin-bottom: 15px;
   font-size: 1rem;
}

.contact-btn {
   display: inline-block;
   padding: 12px 25px;
   background-color: rgba(163, 144, 74, 0.1);
   color: rgba(163, 144, 74, 1);
   border: 1px solid rgba(163, 144, 74, 0.4);
   border-radius: 5px;
   text-decoration: none;
   font-weight: 700;
   transition: all 0.3s ease;
}

.contact-btn:hover {
   background-color: rgba(163, 144, 74, 1);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#contact-form h3 {
   font-size: 1.8rem;
   color: #333;
   text-align: center;
   margin-bottom: 30px;
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 700;
   color: #555;
   font-size: 0.9rem;
   text-transform: uppercase;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 14px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-family: "Sansation", sans-serif;
   font-size: 1.1rem;
   color: #333;
   box-sizing: border-box;
   transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: rgba(163, 144, 74, 1);
   box-shadow: 0 0 8px rgba(163, 144, 74, 0.3);
}

.form-group textarea {
   resize: vertical;
   min-height: 120px;
}

.submit-btn {
   display: block;
   width: 100%;
   padding: 16px;
   font-size: 1.2rem;
   font-weight: 700;
   color: white;
   background-color: rgba(163, 144, 74, 1);
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   font-family: "Sansation", sans-serif;
}

.submit-btn:hover {
   background-color: rgb(47, 61, 48);
   transform: translateY(-3px);
}

/* =================================== */
/* ============ 10. FOOTER =========== */
/* =================================== */
.low-bar {
   background-color: rgba(255, 255, 255, 1);
   color: #2F3D30;
   padding: 30px 20px;
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
   text-align: left;
}

.footer-content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   max-width: 1200px;
   margin: 0 auto;
   gap: 30px;
}

.footer-column {
   flex: 1;
   min-width: 250px;
   padding: 0 10px;
}

.footer-column ul {
   list-style-type: none;
   padding-left: 0;
   margin: 0;
}

.footer-logo-text {
   color: #F97316;
   font-size: 1.5rem;
   margin-top: 0;
   margin-bottom: 15px;
}

.footer-column p {
   color: rgba(163, 144, 74, 1);
   font-size: 0.9rem;
   line-height: 1.6;
   margin: 0;
}

.footer-column h4 {
   color: rgba(163, 144, 74, 1);
   font-size: 1.1rem;
   margin-top: 0;
   margin-bottom: 20px;
}

.footer-column ul li a {
   color: rgba(163, 144, 74, 1);
   text-decoration: none;
   display: block;
   padding: 5px 0;
   transition: color 0.2s ease;
}

.footer-column ul li a:hover {
   color: #000000;
}

.social-icons {
   display: flex;
   gap: 15px;
   margin-top: 20px;
}

.social-icons a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.1);
   color: rgba(163, 144, 74, 1);
   font-size: 1rem;
   font-weight: bold;
   text-decoration: none;
   transition: background-color 0.2s ease;
}

.social-icons a:hover {
   background-color: rgba(0, 0, 0, 0.2);
}

.social-icons a img {
   width: 20px;
   height: 20px;
}

/* =================================== */
/* ======= 11. PAGE SUCCESS MESSAGE ====== */
/* =================================== */

.success-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 60vh;
   /* Prend une bonne partie de la hauteur */
   padding: 20px;
}

.success-card {
   background: white;
   padding: 50px;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
   /* Même ombre que tes autres conteneurs */
   text-align: center;
   max-width: 600px;
   border-top: 5px solid rgba(163, 144, 74, 1);
   /* Ta couleur dorée */
}

.success-icon img {
   width: 40px;
   height: 40px;
   margin-bottom: 20px;
}

.success-card h2 {
   color: #333;
   margin-bottom: 15px;
}

.success-card p {
   color: #555;
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 30px;
}

.fallback-contact {
   margin-top: 20px;
   background-color: #fff4f4;
   padding: 15px;
   border-radius: 5px;
   border: 1px dashed #d32f2f;
   margin-bottom: 30px;
}

.phone-link {
   font-weight: bold;
   color: #d32f2f;
   text-decoration: none;
   font-size: 1.2rem;
   background: white;
   margin: 5px;
   padding: 3px;
   border-radius: 5px;
   border: 1px dashed #d32f2f;
   margin-top: 5px;
}

.fail-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 60vh;
   padding: 20px;
}

.fail-card {
   background: white;
   padding: 50px;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
   /* Même ombre que tes autres conteneurs */
   text-align: center;
   max-width: 600px;
   border-top: 5px solid rgb(255, 0, 0);
   /* Ta couleur dorée */
}

.contact-btn-fail {
   display: flex;
   padding: 12px 25px;
   background-color: rgba(163, 144, 74, 0.1);
   color: rgba(163, 144, 74, 1);
   border: 1px solid rgba(163, 144, 74, 0.4);
   border-radius: 5px;
   text-decoration: none;
   font-weight: 700;
   transition: all 0.3s ease;
   width: 25%;
   justify-content: center;
}

.contact-btn-fail:hover {
   background-color: rgba(163, 144, 74, 1);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.fail-buttons-container {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
   flex-wrap: wrap;
}

.fail-buttons-container .contact-btn {
   min-width: 160px;
   text-align: center;
   margin: 0;
}