/* ==========================================================================
   1. IMPORTS & CONFIGURATION
   ========================================================================== */
   @import '../variables.css';

   /* ==========================================================================
      2. HERO MAP SECTION
      ========================================================================== */
   .hero-map-section {
       height: 85vh; 
       position: relative;
       width: 100%;
       z-index: 1;
       overflow: visible;
   }
   
   #map.map-home {
       position: relative !important;
       width: 100% !important;
       height: 100% !important;
       display: block !important;
       visibility: visible !important;
       background-color: #010813;
   }
   
   /* ==========================================================================
      3. INTERFACES DE RECHERCHE (OVERLAYS)
      ========================================================================== */
   
   /* --- VARIANTE A : SEARCH-PILL --- */
   .map-search-overlay {
       position: absolute;
       bottom: 60px;
       left: 50%;
       transform: translateX(-50%);
       width: 85%;
       max-width: 750px;
       z-index: 100;
   }
   
   .search-pill {
       background: #F7F3E8;
       padding: 8px 8px 8px 30px;
       border-radius: 100px;
       display: flex;
       align-items: center;
       box-shadow: 0 15px 40px rgba(0,0,0,0.4);
   }
   
   .search-pill input {
       flex: 1;
       background: transparent;
       border: none;
       outline: none;
       font-size: 1rem;
       font-family: 'Inter', sans-serif;
       color: #1C3B6E;
   }
   
   .btn-decouvrir {
       background: #1C3B6E;
       color: white;
       border: none;
       padding: 14px 35px;
       border-radius: 100px;
       font-weight: 800;
       font-size: 0.75rem;
       letter-spacing: 1px;
       cursor: pointer;
   }
   
   /* --- VARIANTE B : SEARCH-BOX --- */
   .map-overlay {
       position: absolute; 
       bottom: 60px; 
       left: 50%;
       transform: translateX(-50%); 
       width: 90%; 
       max-width: 800px; 
       z-index: 10;
   }
   
   .search-box {
       background: #F7F3E8; 
       padding: 10px 10px 10px 30px;
       border-radius: 100px; 
       display: flex; 
       align-items: center;
       box-shadow: 0 10px 30px rgba(0,0,0,0.3);
   }
   
   .search-box input { 
       flex: 1; 
       border: none; 
       background: transparent; 
       outline: none; 
       font-size: 1rem; 
       color: var(--primary); 
   }
   
   .btn-search {
       background: var(--primary); 
       color: white; 
       border: none;
       padding: 15px 40px; 
       border-radius: 100px; 
       font-weight: 800; 
       cursor: pointer;
   }
   
   /* ==========================================================================
      4. SECTIONS DE CONTENU & INTRO
      ========================================================================== */
   .excellence-intro { 
       text-align: center; 
       padding: 100px 20px 60px; 
   }
   
   .excellence-intro h1 { 
       font-size: 3rem; 
       margin-bottom: 20px; 
       color: var(--primary); 
   }
   
   /* ==========================================================================
      5. SECTION EXPÉRIENCES : SLIDER PANORAMIQUE EN ARC
      ========================================================================== */
   .featured-experiences { 
       padding: 80px 0 120px; 
       background-color: var(--beige); 
       overflow: hidden;
   }
   
   .section-title {
       text-align: center;
       font-size: 2.1rem;
       color: var(--primary); 
       margin-bottom: 40px;
       font-family: 'Montserrat', sans-serif;
       font-weight: 800;
       letter-spacing: 1px;
   }
   
   .experience-slider {
       display: flex;
       gap: 40px;
       padding: 60px 0 100px;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       scroll-behavior: smooth;
       scrollbar-width: none;
       outline: none;
   }
   
   .experience-slider.grabbing { cursor: grabbing; }
   .experience-slider::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
   
   .slider-spacer {
       flex: 0 0 calc(50vw - 200px); 
   }
   
   /* --- LA CARTE --- */
   .experience-card { 
       flex: 0 0 350px; 
       height: 480px;
       background: #EFEBE0;
       border-radius: 30px; 
       overflow: hidden; 
       border: 3px solid rgba(28, 59, 110, 0.2);
       box-shadow: 0 8px 20px rgba(0,0,0,0.05); 
       display: flex;
       flex-direction: column;
       transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
       pointer-events: auto !important;
       user-select: none;
       cursor: grab;
   }
   
   .experience-card img {
       pointer-events: none;
       -webkit-user-drag: none;
   }
   
   .experience-card:active { cursor: grabbing; }
   
   .experience-card:hover {
       transform: translateY(-5px);
       border-color: rgba(28, 59, 110, 0.3);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
   }
   
   .experience-card:hover .card-image img {
       transform: scale(1.08);
   }
   
   /* --- LOGIQUE D'ARC (U-SHAPE) --- */
   .experience-card.active { 
       transform: scale(1.1) translateY(50px); 
       box-shadow: 0 30px 60px rgba(28, 59, 110, 0.2);
       z-index: 10;
   }
   .experience-card.near { opacity: 0.7; transform: scale(0.9); }
   .experience-card.far { opacity: 0.4; transform: scale(0.8); }
   
   /* --- CONTENU DE LA CARTE --- */
   .card-image { 
       position: relative; 
       height: 62%; 
       width: calc(100% - 20px);
       margin: 12px 12px 0 12px;
       border-radius: 22px;
       overflow: hidden; 
       border : 2px solid rgba(28, 59, 110, 0.1);
   }
   
   .card-image img { 
       width: 100%; 
       height: 100%; 
       object-fit: cover; 
   }
   
   .card-tag {
       position: absolute;
       top: 15px;
       right: 15px;
       background: var(--gold);
       color: white;
       padding: 6px 14px;
       border-radius: 100px;
       font-size: 0.65rem;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 1.2px;
   }
   
   .card-body { 
       padding: 25px 30px; 
       flex-grow: 1; 
       display: flex; 
       flex-direction: column; 
       align-items: center;
       text-align: center;
   }
   
   .card-body h3 { 
       font-family: 'Montserrat', sans-serif;
       font-weight: 800;
       font-size: 1.5rem; 
       color: #1C3B6E; 
       margin-bottom: 15px; 
   }
   
   .card-body p { 
       font-size: 0.95rem; 
       color: var(--text-light); 
       margin-bottom: 25px; 
       line-height: 1.6; 
       flex-grow: 1; 
   }
   
   .card-link { 
       display: inline-block;
       background: #1C3B6E;
       color: white !important; 
       padding: 12px 30px;
       border-radius: 100px;
       font-weight: 800;
       font-size: 0.75rem;
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: 1px;
       transition: all 0.3s ease;
       margin-top: auto;
   }
   
   .card-link:hover {
       background: var(--gold);
       transform: scale(1.05);
   }
   
   /* ==========================================================================
      6. LIGHTBOX & MODALES
      ========================================================================== */
   .lightbox {
       position: fixed;
       top: 0; left: 0; width: 100%; height: 100%;
       background-color: rgba(247, 243, 232, 0.4); 
       backdrop-filter: blur(25px);
       -webkit-backdrop-filter: blur(25px);
       display: flex; justify-content: center; align-items: center;
       z-index: 9999 !important;
       opacity: 0; visibility: hidden;
       transition: all 0.4s ease;
       cursor: pointer;
   }
   
   .lightbox.active { opacity: 1; visibility: visible; }
   
   .lightbox-content img {
       max-width: 90vw; max-height: 80vh;
       border-radius: 4px;
       box-shadow: 0 20px 50px rgba(0,0,0,0.5);
       transform: scale(0.9);
       transition: transform 0.4s ease;
   }
   
   .lightbox.active .lightbox-content img { transform: scale(1); }
   
   .no-scroll { overflow: hidden !important; }
   
   /* ==========================================================================
      7. MARKETING : NEWSLETTER SECTION
      ========================================================================== */
   .newsletter-section {
       position: relative;
       padding: 140px 0;
       overflow: hidden;
       background-color: var(--beige);
       width: 100%;
   }
   
   .newsletter-section::before {
       content: '';
       position: absolute;
       top: 0; left: -5%; width: 110%; height: 100%;
       background-color: var(--accent);
       transform: rotate(-3deg);
       transform-origin: center;
       z-index: 1;
   }
   
   .newsletter-section .container {
       position: relative;
       z-index: 2;
       text-align: center;
       color: white;
   }
   
   .newsletter-box {
       background-color: transparent !important; 
       padding: 0; 
       text-align: center;
   }
   
   .newsletter-section h2, .newsletter-box h2 {
       color: white;
       font-size: 2.2rem;
       margin-bottom: 10px;
       font-family: 'Montserrat', sans-serif;
   }
   
   .newsletter-section p, .newsletter-box p {
       color: white;
       font-size: 1rem;
       margin-bottom: 40px;
       opacity: 0.95;
   }
   
   .newsletter-form {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 20px;
       max-width: 700px;
       margin: 0 auto;
   }
   
   .newsletter-form input {
       flex: 1;
       background: white;
       border: none;
       padding: 18px 30px;
       border-radius: 100px;
       font-size: 1rem;
       color: var(--primary);
       outline: none;
   }
   
   .btn-newsletter {
       background-color: var(--primary) !important; 
       color: white;
       border: none;
       padding: 18px 45px;
       border-radius: 100px;
       font-weight: 800;
       text-transform: uppercase;
       font-size: 0.85rem;
       cursor: pointer;
       transition: transform 0.3s ease, background-color 0.3s ease;
   }
   
   .btn-newsletter:hover {
       transform: translateY(-3px);
       background-color: #13284a !important;
   }
   
   /* ==========================================================================
      8. PROJET FERRANDI
      ========================================================================== */
   .section-projet {
       padding: 100px 0;
       background-color: var(--beige);
   }
   
   .container-project {
       background-color: var(--primary);
       color: white;
       padding: 100px 60px;
       border-radius: 40px; 
       text-align: center; 
       margin: 0 auto; 
       max-width: 1000px;
       box-shadow: 0 25px 50px rgba(28, 59, 110, 0.2);
       display : flex;
       flex-direction: column;
       align-items: center;
   }
   
   .container-project h2 {
       font-size: 2.5rem;
       margin-bottom: 25px;
   }
   
   .container-project p {
       font-size: 1.1rem;
       max-width: 700px;
       margin: 0 auto 40px;
   }
   
   .boutons-group {
       display: flex;
       justify-content: center;
       gap: 20px;
   }
   
   .btn-or { 
       background-color: var(--gold) !important; 
       color: white !important;
       border: 2px solid var(--gold);
       padding: 14px 35px; 
       border-radius: 100px; 
       font-weight: 800;
       text-transform: uppercase;
       font-size: 0.85rem;
       display: inline-block;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .btn-or:hover {
       background-color: transparent !important;
       color: var(--gold) !important;
       transform: translateY(-3px);
   }
   
   /* --- HELPERS --- */
   .text-primary { color: var(--primary) !important; }
   .text-accent { color: var(--accent) !important; }
   
   /* ==========================================================================
      9. RESPONSIVE DESIGN (UNIFIÉ)
      ========================================================================== */
   
   @media (max-width: 1024px) {
       .excellence-intro h1 { font-size: 2.5rem; }
       .experience-card { flex: 0 0 340px; height: 460px; }
       .container-project { width: 92%; padding: 60px 40px; }
   }
   
   @media (max-width: 768px) {
       .hero-map-section { height: 60vh !important; }
   
       .map-search-overlay, .map-overlay { bottom: 20px; width: 92%; }
       .search-pill, .search-box {
           flex-direction: column !important;
           height: auto !important;
           padding: 15px !important;
           border-radius: 25px !important;
           gap: 10px !important;
       }
   
       .search-pill input, .search-box input { width: 100% !important; text-align: center !important; }
       .btn-decouvrir, .btn-search { width: 100% !important; border-radius: 15px !important; }
   
       .excellence-intro { padding: 50px 20px; }
       .excellence-intro h1 { font-size: 1.7rem !important; }
   
       /* SLIDER ARC MOBILE */
       .featured-experiences { padding: 20px 0 60px; }
       .section-title { font-size: 1.5rem; margin-bottom: 10px; }
       .experience-slider {
           padding: 60px 0 100px !important;
           gap: 25px !important;
           scroll-padding-inline: calc(50vw - 120px);
       }
       .experience-card {
           flex: 0 0 240px !important;
           height: 380px !important;
           scroll-snap-align: center;
           transform: scale(0.8) translateY(-10px);
           opacity: 0.4; filter: grayscale(1);
       }
       .experience-card.near { transform: scale(0.9) translateY(0px); opacity: 0.7; filter: grayscale(0.5); }
       .experience-card.active { transform: scale(1.1) translateY(25px) !important; opacity: 1; filter: grayscale(0); }
       .experience-card.active * { cursor: zoom-in !important; }
   
       .experience-card .card-image { pointer-events: none; }
       .experience-card.active .card-image { pointer-events: auto; }
       .experience-card.active .card-image img { cursor: zoom-in !important; }
   
       .card-body h3 { font-size: 1.1rem !important; }
       .card-link { padding: 10px 20px !important; font-size: 0.65rem !important; }
       .slider-spacer { flex: 0 0 calc(50vw - 120px) !important; }
   
       /* NEWSLETTER MOBILE */
       .newsletter-section { padding: 80px 0; }
       .newsletter-section::before { width: 120%; left: -10%; transform: rotate(-1.5deg); }
       .newsletter-section h2 { font-size: 1.4rem; }
       .newsletter-section p { font-size: 0.75rem !important; max-width: 240px !important; margin: 0 auto 20px !important; }
       .newsletter-form { flex-direction: column; width: 85%; }
   
       /* PROJET MOBILE */
       .section-projet { padding: 30px 0px !important; }
       .container-project { width: 85% !important; padding: 30px 20px !important; border-radius: 25px !important; }
       .container-project h2 { font-size: 1.2rem !important; }
       .container-project p { font-size: 0.85rem !important; margin-bottom: 25px !important; }
       .boutons-group { flex-direction: column !important; width: 100% !important; }
       .btn-or { min-width: 180px !important; font-size: 0.7rem !important; }
   }
   
   @media (max-width: 400px) {
       .experience-card { flex: 0 0 230px !important; }
       .excellence-intro h1 { font-size: 1.5rem !important; }
   }