body{
  scroll-behavior: smooth;
}




.bg-gradient{
  background-image:linear-gradient(90deg,#004b57 0%,#005d8b 40%,#008bca 100%);
}


.logo{
  height:88px;           
  width:auto;
  margin-top:-10px;        
  margin-bottom:-10px;
}

.navbar-nav{
  gap:2rem;                         
}

.navbar .nav-link{
  position:relative;
  font-weight:600;
  letter-spacing:2px;
  padding:.4rem .75rem;
  color:#f5faff;
}



.navbar .nav-item{
  position:relative;          
}

.navbar .nav-item + .nav-item::before{
  content:"";
  position:absolute;
  left:-1.10rem;               
  top:50%; transform:translateY(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:#f7d458;        
  pointer-events:none;       
  opacity:.9;
}

.navbar .nav-link::before{
  content:"";
  position:absolute; left:0; bottom:2px;
  width:0; height:2px;
  background:#fff;
  transition:width .25s ease;
}

.navbar .nav-link:hover::before,
.navbar .nav-link.active::before{
  width:70%;
}

@media(max-width:991.98px){
  .navbar .nav-item::before{ display:none; }
  .d-none.d-lg-flex{ display:none!important; } 
}



/* Burger custom (fond transparent) */
.navbar-toggler{
  display:flex;                
  flex-direction:column;
  justify-content:center;
  gap:4px;                     
  width:44px; height:44px;     
  background:#0d2538;          
  border:0;
  border-radius:0.6rem;
  transition:background .3s;
}

.navbar-toggler:hover,
.navbar-toggler:focus{
  background:#123f5f;
  outline:none;
}

.toggler-bar{
  display:block;
  width:22px; height:2px;
  background:#fff;
  border-radius:1px;
  transition:transform .3s;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2){
  opacity:0;
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28 255,255,255, .9 %29)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'%3E%3C/path%3E%3C/svg%3E");
}





.section-title1{
  font-weight:700;
}

.section-title1 span{
  display:inline-block;
  padding:.25em 1.2em;
  border-radius:2rem;
  background:#c8e2e4d8;
  box-shadow:0 0 0 6px rgba(234, 238, 243, 0.644);
}

.service-hero{
  min-height:60vh;
  background-size:cover;
  background-position:center;
  position:relative;
  color:#fff;
}

.creation-hero{background-image:url('https://source.unsplash.com/1600x900/?webdesign');}
.maintenance-hero{background-image:url('https://source.unsplash.com/1600x900/?computer,repair');}
.formation-hero{background-image:url('https://source.unsplash.com/1600x900/?training,computer');}

.service-hero::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);
}

.service-hero .container{
  position:relative;
  z-index:2;
}



/* Contact Form */
#contact-form .form-control:focus{
  box-shadow:none;
  border-color:#0d6efd;
}

/*==========  SECTION SERVICES  ==========*/
.services-section{
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
  position:relative;
  overflow:hidden;
}



/* titre stylé */
.services-section .section-title1 span{
  display:inline-block;
  padding:0.25em 1.2em;
  border-radius:2rem;
  background:#c8e2e4d8;
  box-shadow:0 0 0 6px rgba(233,243,255,.7);
}

/* cartes */
.service-card{
  border: 1;
  transition:transform .3s ease, box-shadow .3s ease;
  border-color:#3972b4;
}

/* image top dans la carte */
.service-card .card-img-top{
  max-height:140px;
  object-fit:contain;
}




/*==========  ZONE D'INTERVENTION  ==========*/
.zone-section{
  overflow:hidden;
}



/* badge <mark> élégant */
mark{
  background:#cfe9ff;
  padding:0 .25em;
  border-radius:4px;
}

/* ==== IMAGE WRAPPER (remplace la map) ==== */
.img-wrapper{
  max-width:550px;         
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(2px);
}

.img-wrapper::before{
  content:"";
  position:absolute; inset:0;
  border-radius:1rem;
  ;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.border_glow, .border_glow{ 
  box-shadow:0 0 25px rgba(13,110,253,.6);
}

.img-wrapper img{ cursor:zoom-in; }
.modal img{ cursor:zoom-out; }



:root{
  --nav-h: 98px;          
  --crumb-h: 34px;        
}


.breadcrumb-bar{
  position:fixed;
  top:var(--nav-h);
  left:0; right:0;
  z-index:1030;
  background:linear-gradient(90deg,#03244d 0%,rgba(3,36,77,.4) 70%);
  color:#fff;
  font-size:.9rem;
  padding:.4rem 0 .6rem;   /* ≈ 34 px total → même que --crumb-h */
}



.bg-gradient-light{
  background:linear-gradient(#f2f6ff 0%, #e8edf8 100%);
}

/* petites puces dans les listes */
#offres-sites ul li::before{
  content:"■";
  display:inline-block;
  margin-right:.5rem;
  font-size:.55em;
  color:#17c964;         
}


.intro-offres{
  background:radial-gradient(circle at 30% 20%,#0d6efd 0%,#003b63 60%,#002442 100%);
  padding-top:4rem;              
  padding-bottom:0rem;
  color:#212529;      
}


/* dégradé dans le mot-clé */
.gradient-text{
  background:linear-gradient(15deg, #FFDAB9 , #FFB347 , #FF8C00 );
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  animation:hueShift 6s linear infinite;
}
@keyframes hueShift{
  0%{filter:hue-rotate(0);}
 100%{filter:hue-rotate(-360deg);}
}

/* jolie découpe blanche en bas */
.intro-offres .decor{
  position:absolute;
  bottom:-1px; left:0;
  width:100%; height:60px;
}

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

html{ scroll-behavior:smooth; }


.hero-img{
  position:relative;
  background:url("../images/onepage.png") center/cover no-repeat;
}

/* voile foncé pour améliorer le contraste */
.hero-img::before{
  content:"";
  position:absolute; inset:0;
  
}

.hero-img > *{
  position:relative;   
  z-index:1;
}


/* ===== bulles d'icônes ===== */
.icon-bubble{
  width:70px; height:70px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:1.8rem;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.text-success-dark{ color:#ffffff; }

.feature h3{
  position:relative;
  padding-bottom:.4rem;
  margin-bottom:1rem;
}
.feature h3::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:40px; height:2px;
  background:currentColor;
  transform:translateX(-50%);
}

.bg-primary-gradient{
  background:linear-gradient(135deg,#0d6efd 0%,#17c964 100%);
}

/* champ + bouton dans une section sombre */
.bg-primary-gradient .form-control{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}
.bg-primary-gradient .form-control::placeholder{
  color:rgba(255,255,255,.6);
}
.bg-primary-gradient .form-control:focus{
  background:rgba(255,255,255,.15);
  border-color:#fff;
  box-shadow:none;
}

/* bouton hover */
.bg-primary-gradient .btn-light:hover{
  background:#f7f9ff;
  color:#0d6efd;
}

.devis-img{
  position:relative;
  background:url("../images/imgdev.png") center/cover no-repeat;
}


/* ======= STYLES PAGE ONE-PAGE ======= */

.hero-onepage{
  background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;
  padding:8rem 0 4rem;
  position:relative;
  overflow:hidden;
}

@keyframes hueShift{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(-360deg)}}

.section-title{position:relative;display:inline-block;padding-bottom:.4rem;}
.section-title::after{
  content:\"\";position:absolute;left:50%;bottom:0;
  width:60px;height:3px;background:var(--bs-primary);transform:translateX(-50%);
}

/* TABLEAU COMPARATIF */
.compare-table thead th{background:#0d2538;color:#fff}
.compare-table tr:nth-child(even){background:#f8f9fa}

/* FAQ */
.accordion-button:not(.collapsed){
  background:#e8f1ff;color:#0d6efd;
}



/* ===== PAGE SITE VITRINE ===== */
.hero-vitrine{
  background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;
  padding:8rem 0 5rem;
  position:relative;
  overflow:hidden;
}

/* ===== PAGE E-COMMERCE ===== */
.hero-ecommerce{
  background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;padding:8rem 0 4rem;position:relative;overflow:hidden;
}



.footer-mini{
  background:#0d2538;                
  color:#fff;                       
}

.footer-link{
  color:#ddd;
  margin:0 .5rem;
  text-decoration:none;
}
.footer-link:hover{
  color:#fff;text-decoration:underline;
}

.footer-addr i{color:#0d6efd;margin-right:.25rem;}

/*  HERO gestion */
.hero-gestion{
   background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;padding:8rem 0 6rem;position:relative;overflow:hidden;
}


/*  petits pictos ronds */
.icon-round{
  width:64px;height:64px;
  border-radius:50%;font-size:1.75rem;
  display:flex;align-items:center;justify-content:center;
  color:#0d6efd;
}

/* HERO Community-Management */
.hero-cm{
  background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;padding:9rem 0 2rem;position:relative;overflow:hidden;
}


.list-check li::before{
  content:"✔︎";color:#0d6efd;font-weight:600;margin-right:.5rem;
}
.compare-table th, .compare-table td{vertical-align:middle;}
abbr[title]{border-bottom:0;cursor:help}


/* HERO Maintenance */
.hero-maint{
  background:url("../images/onepage.png") center/cover no-repeat;
  color:#fff;padding:8rem 0 4rem;position:relative;overflow:hidden;
}

.hero-contact{
  color:#000000;padding:8rem 0 2rem;position:relative;overflow:hidden;
}

.hero-index{
  background:url("../images/imageacceuil.png") center/cover no-repeat;
  color:#fff;padding:8rem 0 4rem;position:relative;overflow:hidden;
}




/*  GRID SERVICES  */
.services-grid .service-card{
  position:relative;overflow:hidden;
  border-radius:8px;isolation:isolate;
  aspect-ratio: 4/3;                
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;
}
.services-grid .service-card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:.4s;
}
.services-grid .service-card::after{         
  content:"";position:absolute;inset:0;
  background:#0f172a;opacity:0;transition:.4s;
}
.services-grid .service-card h3{
  position:relative;z-index:1;
  font-size:clamp(1.1rem,2.3vw,1.35rem);
  font-weight:700;margin:0;padding-bottom:1.5rem;
}
.services-grid .service-card h3::after{      
  content:"";display:block;width:30px;height:3px;
  background:#facc15;margin:.7rem auto 0;border-radius:2px;
  transition:.4s;
}
.services-grid .service-card a{
  position:absolute;bottom:1.25rem;left:50%;
  transform:translateX(-50%);z-index:1;
  opacity:0;transition:.4s;
}

/* Effet HOVER */
.services-grid .service-card:hover img{transform:scale(1.07);}
.services-grid .service-card:hover::after{opacity:.55;} 
.services-grid .service-card:hover h3::after{width:60px;} 
.services-grid .service-card:hover a{opacity:1;bottom:2rem;}



/* Dépannage Internet & Réseau */

/* HERO  */
.hero-net{
  background:url('../images/maintenance/network-hero.webp') center/cover no-repeat;
  min-height:45vh;display:flex;align-items:center;position:relative;color:#fff;
}
.hero-net::after{content:"";position:absolute;inset:0;background:rgba(0,23,45,.55);}
.hero-net .container{position:relative;z-index:1}

.reason-card{
  background:#fff;border-radius:8px;padding:2rem;text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.06);transition:.3s;
}
.reason-card i{
  font-size:2.3rem;color:#f37208;margin-bottom:.9rem;
}
.reason-card:hover{
  transform:translateY(-6px);box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* — FAQ */
.faq-net .section-title{font-weight:700}
.faq-net .accordion-button:not(.collapsed){
  color:#0d6efd;background:#e7f1ff;font-weight:600
}

/* — CTA */
.cta-net{background:#0d6efd;color:#fff}
.cta-net .btnbas{background:#fff;color:#0d6efd;border:none}
.cta-net .btnbas:hover{background:#ffc107;color:#000}

/*  Avantages dépannage à domicile */
.home-adv{background:#fff}
.adv-item{
  background:#ffffff;border-radius:8px;padding:2rem;text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.05);transition:.3s;
}
.adv-item:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.adv-item .emoji{font-size:2rem;display:inline-block;margin-bottom:.7rem}
.adv-item h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}

/* Cartes de prix */
.price-card{
  background:#fff;
  border:3px solid transparent;
  border-radius:1rem;
  padding:2.5rem 2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 1rem 2rem rgba(0,0,0,.12);
}
.price-title{font-weight:600;margin-bottom:.25rem;}
.price-amount{font-size:2rem;font-weight:700;margin-bottom:1.5rem;}
.price-features li{margin-bottom:.4rem;}
Border-primary{--bs-border-opacity:1;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}
.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}
.border-warning{--bs-border-opacity:1;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}

/* FAQ */
#faq .accordion-button{
  font-weight:600;
  gap:.5rem;
}
#faq .accordion-button::after{
  background-image:var(--bs-accordion-btn-icon);
  transition:transform .25s;
}
#faq .accordion-button:not(.collapsed)::after{
  transform:rotate(-180deg);
}
#faq .accordion-item{
  border:0;
  border-left:5px solid var(--bs-primary);
  border-radius:.75rem;
  overflow:hidden;
}
#faq .accordion-button{
  background:#fff;
  border-radius:.75rem;
}
#faq .accordion-body{
  background:#f8f9fa;
}

/*  CONTACT */
#contact { background: var(--bs-gray-100); }

/* Cartes coordonnées */
.card-contact{
  padding:2rem 1.5rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg,#fff 0%,#2a8ee0 100%);
  transition:transform .25s var(--bs-ease), box-shadow .25s var(--bs-ease);
}
.card-contact:hover{
  transform:translateY(-4px);
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.15);
}
.card-contact .icon-gradient{
  display:inline-block;
  font-size:2.2rem;
  margin-bottom:.5rem;
  background:linear-gradient(135deg,#d5dde9 0%,#00d6ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.glassy{
  backdrop-filter:blur(7px);
  background:linear-gradient(135deg,#4996c2cb 0%,#e2c17a 100%);
  border-left:4px solid var(--bs-primary);
  border-radius:1.5rem;
}

.form-floating>.form-control::placeholder{
  color:transparent;
}
.form-floating>label{
  color:#6c757d; font-size:.9rem;
}

.form-control:focus{
  box-shadow:0 0 0 0.1rem rgba(var(--bs-primary-rgb),.25);
}

@media (max-width: 575.98px){
  #submitBtn{ display:block; width:100%; }
}



.img-fluid1{
  max-width: 85%;
}

.img-fluid{
  max-width: 100%;
}

@media (max-width: 991.98px) {
  #mobileNav {
    width: 270px;
    background: linear-gradient(180deg, #0d2538 0%, #0d2538 100%);
  }
  #mobileNav .nav-link:hover {
    color: #0d6efd;
  }

  #mobileNav .offcanvas-header {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
  }
}

/* Overlay de recherche */
.search-overlay{
  position: fixed; inset: 0;
  background: rgba(13,17,40,.95);
  backdrop-filter: blur(4px);
  display: none;                      
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto; z-index: 1080;
}
.search-box{
  margin-top: 5rem;                    
  width: min(550px, 90%);
  animation: slideDown .4s ease;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}}

#searchInput{
  background: #e7f3f7;
  font-family: 'Poppins',sans-serif;
}
#searchResults{
  max-height: 420px;
  overflow-y:auto;
}
#searchResults li{
  display: flex; gap:1rem;
  align-items: center;
  padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .2s;
}
#searchResults li:hover{background:rgba(255,255,255,.06)}
#searchResults img{
  width: 100px; height: 100px; object-fit: cover; border-radius:.35rem;
}
#searchResults span{color:#fff;font-size:1rem;line-height:1.25}






/* CONTACT ZONE */
.contact-zone{
  padding:0rem 1rem 6rem;
  color:#000000;position:relative;overflow:hidden;


}

.cz-wrapper{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  gap:3rem;
  flex-wrap:wrap-reverse;            
}

.cz-infos{
  display:flex;
  flex-direction:column;
  gap:2rem;
  flex:1 1 260px;
}

.cz-card{
  background:#ffffff;
  color:#073264;
  border-radius:1.2rem;
  padding:1rem 1.5rem;
  box-shadow:0 6px 18px 0 rgba(0,0,0,.07);
  text-align:center;
  backdrop-filter:saturate(180%) blur(12px);
  transition:transform .3s ease, box-shadow .3s;
  border: 3px solid #ffc107;         
  box-shadow: 0 12px 28px rgba(0,0,0,.25); 
}
.cz-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px 0 rgba(0,0,0,.12);
}
.cz-card i{
  font-size:2rem;
  color:#073264;
  background:rgba(255,255,255,.15);
  padding:.5rem;
  border-radius:50%;
}
.cz-card h4{
  margin:.8rem 0 .4rem;
  font-size:1.1rem;
}
.cz-card a{
  color:#073264; text-decoration:none; font-weight:600;
}
.cz-card small{
  display:block; margin-top:.25rem; font-size:.8rem; color:#e4f2ff;
}

/* form box */
.cz-form-box{
  flex:2 1 540px;
  padding:2.5rem 2rem 3rem;
  border-radius:1.5rem;
  background:#ffffff;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  backdrop-filter:blur(14px);
  color: #073264;
}

.cz-form-box h3{
  text-align:center; margin-bottom:2rem; font-size:1.9rem;
}

/* grille d’inputs */
.cz-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cz-span-2{ grid-column:1 / -1; }

.cz-grid input,
.cz-grid textarea{
  width:100%; border:0;
  padding:1rem 1.25rem;
  border-radius:.6rem;
  font-size:.95rem;
  color:#0d1b2a;
  background:#ebeaea;
  transition:box-shadow .2s;
  border: 1px solid #d0e3ff
}
.cz-grid input:focus,
.cz-grid textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px #0d8bff44;
}

/* bouton */
.cz-btn{
  margin:2rem auto 0;
  display:inline-flex; align-items:center; gap:.5rem;
  background:#ffc107;
  color:#fff; border:0; border-radius:.7rem;
  padding:.9rem 2.5rem; font-size:1.05rem; font-weight:600;
  cursor:pointer; transition:background .2s, transform .2s;
}
.cz-btn:hover{ background:#808283; transform:translateY(-2px); }
.cz-btn i{ font-size:1.1rem; }

/* message succès */
.cz-alert{
  margin-top:1.5rem;
  padding:1rem 1.4rem;
  border-radius:1rem;
  background:#d2f4e2;
  color:#026d37; text-align:center;
  font-weight:600;
  animation:slideIn .4s ease;
}
@keyframes slideIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }

/* responsive ajustements */
@media(max-width:1199px){
  .contact-zone{ padding-top:3rem; }
  .cz-wrapper{ gap:2rem; }
  .cz-form-box{ padding:2rem 1.5rem 2.5rem; }
}


.cz-form-box{
  border: 3px solid #ffc107;       
  box-shadow: 0 12px 28px rgba(0,0,0,.25); 
}

/* Arrondis plus marqués si besoin */
.cz-form-box{
  border-radius: 22px;
}

.price-card{
    position:relative;     
}

.price-card .badge{
    position:absolute;
    top:-16px;           
    left:50%;
    transform:translateX(-50%);
    
    background:#ff6c00;  
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.5px;
    padding:.35rem 1.1rem;
    
    border-radius:999px;  
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}


.price-card.best{
    position:relative;         
}

.price-card.best::before{
    content:'';
    position:absolute;
    inset:-8px;               
    z-index:-1;                
    
    border-radius:inherit;      
    background:transparent;
    box-shadow:0 0 0 3px #ff6c00; 
    pointer-events:none;
}

/*
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
*/

.digilow-outline{
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  
  font-size: clamp(2rem, 2.5rem, 4rem);
  

  color: #5184be;

  -webkit-text-stroke: 1px #073264;   

 
  text-shadow:
     
      0  0   2px  #db8e29,
      0  0   6px  #db8e29,
 
      0  2px  4px rgba(0,0,0,.15);
  
  text-align: center;
  margin: 0 auto 2rem;
}

.digilow-outline .brand{
  color: #ffd36f;            
  -webkit-text-stroke: 1px #db8e29;
}

.testtext{
  font-size: 1.1rem;
}





/* FOOTER GLASS-WAVE */
.footer-gw{
  position:relative;
  background:#071929;            
  color:#eaf4ff;
  overflow:hidden;
  padding:1rem 1rem 1rem;
  font-family:"Inter",sans-serif;
}

/* décor animé : disques flous + bande ondulée */
.gw-bg,
.gw-bg::before,
.gw-bg::after{
  content:"";
  position:absolute;
  inset:0;
}
.gw-bg{
  background:radial-gradient(circle at 25% 30%,rgba(0,181,255,.15) 0 40%,
            rgba(0,0,0,0) 60%),
            radial-gradient(circle at 80% 70%,rgba(255,200,0,.12) 0 35%,
            transparent 60%);
  animation:gwShift 30s linear infinite;
}
@keyframes gwShift{from{transform:translateX(-100%)}to{transform:translateX(0%)}}

/* petites vagues abstraites */
.gw-bg::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200'%3E%3Cpath fill='%2308395d30' d='M0 87c67 0 133 26 200 26s133-26 200-26 133 26 200 26 133-26 200-26v113H0z'/%3E%3C/svg%3E");
  background-size:900px 200px;
  background-repeat:repeat-x;
  background-position:0 100%;
  animation:wave 40s linear infinite;
  opacity:.35;
}
@keyframes wave{to{background-position:-900px 100%}}

.gw-bg::after{                
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect width='160' height='160' fill='%2300000020'/%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff05'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:overlay;
}

.gw-container{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4rem;
  max-width:1180px;margin:0 auto;z-index:1;position:relative;
}

.gw-card{
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem 1rem 0rem;
  flex:1 1 240px;
  min-width:240px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* survol subtil */
.gw-card:hover{transform:translateY(-4px);transition:.3s}

/* titres + souligné animé */
.gw-title{
  font-size:1.3rem;
  margin:0 0 1.2rem;
  position:relative;
  display:inline-block;
}
.gw-title::after{
  content:"";display:block;width:38px;height:3px;
  background:#ffc233;margin:6px auto 0;
  transition:transform .4s cubic-bezier(.55,.05,.2,.9);
}
.gw-card:hover .gw-title::after{transform:scaleX(1.5)}

/* logo & texte */
.gw-logo{width:170px;margin-bottom:1.3rem}
.gw-tag{font-size:.95rem;line-height:1.5}
.gw-tag a{color:#57adff;text-decoration:none}
.gw-tag a:hover{text-decoration:underline}

/* navigation */
.gw-nav a{
  display:block;color:#c6d3e8;
  text-decoration:none;padding:.25rem 0;
}
.gw-nav a:hover{color:#ffffff}

/* petites icônes dans contact */
.ico{width:15px;vertical-align:-2px;margin-right:6px;opacity:.8}

/* Réseaux sociaux */
.gw-social{margin-top:1.1rem}
.gw-social a{
  display:inline-grid;
  transition:transform .3s;filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.gw-social a:hover{transform:translateY(-3px) scale(1.1)}

/* mention légale */
.gw-copy{
  font-size:.8rem;margin-top:1rem;
  text-align:center;opacity:.65;z-index:1;position:relative;
  margin-bottom: 0rem;
}

@media(max-width:768px){
  .gw-container{gap:2rem}
  .gw-card{padding:2rem 1.5rem}
  .gw-title{font-size:1.15rem}
}






.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

.scroll {
	animation-name: scroll;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
	animation-iteration-count: infinite;
	transform-origin: 50% 20.5px;
	will-change: transform, opacity;
	opacity: 1;
}

.scroll-link {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
}

@keyframes scroll {

	0%, 20% {
		transform: translateY(0) scaleY(1);
	}

	100% {
		transform: translateY(36px) scaleY(2);
		opacity: 0;
	}

}




.snow {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.snow .svg {
	position: absolute;
	width: 100%;
	height: 100%;
}

#snow-top-layer {
	will-change: transform;
	transform: translateY(-768px);
	animation: fall 22.5s infinite linear;
}

#snow-bottom-layer {
	will-change: transform;
	transform: translateY(-768px);
	animation: fall 45s infinite linear;
}

@keyframes fall {
	
	100% {
		transform: translateY(0);
	}
	
}





.hero-title{
  display:inline-block;      
  font-weight:700;
  font-size:clamp(1.8rem, 6vw, 3rem);
  line-height:1.15;
  text-wrap:balance;           
  max-width:100%;
  white-space:normal;        
}



/* Texte du typewriter : dégradé visible */
#typewriter{
  display:inline;
  min-width:1ch;
  min-height:1em;
  background:linear-gradient(90deg,#ffffff,#628daa);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent; 
}

/* curseur */
.caret{
  width:.09em;
  height:1em;
  background:#cfe6ff;
  display:inline-block;
  animation:blink .9s steps(1,end) infinite;
  margin-left:.15rem;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: .7; }
}



.slogan-highlight{
  position:relative;
  display:inline-block;
  margin:.4rem 0 0;
  font-size:1.05rem;
  color:#bdc4c9;
}







html, body{ width:100%; overflow-x:hidden; }   
@media (max-width: 991.98px){
  .nav-right{ padding-left:0; }               
}




/* HOVER & HALO */
.service-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 30%,
            rgba(13,110,253,.25) 0%,
            rgba(13,110,253,.15) 40%,
            transparent 70%);
  opacity:0; transform:scale(.8);
  transition:opacity .4s ease, transform .4s ease;
  z-index:-1;
}

.service-card:hover{
  transform:translateY(-8px);              
}

.service-card:hover::before{
  opacity:1; transform:scale(1);
}

.service-card:hover{
  box-shadow:0 18px 36px -14px rgba(13,110,253,.35);
}








/* ===== Section ===== */
:root{
  --bg-body: #0b1622;
  --c-primary: #1f6fff;
  --c-primary-2: #6fa8ff;
  --c-glass: rgba(255,255,255,.08);
  --c-border: rgba(255,255,255,.18);
  --c-text: #dfe7f1;
  --c-muted: #98a7bd;
  --c-green: #39d98a;
  --shadow-xl: 0 5px 60px rgba(0,0,0,.35);
}


.offer-hero{
  position:relative;
  padding: clamp(40px, 2.5vw, 100px) 20px;
  display:flex;
  justify-content:center;
}

.offer-blob{
  position:absolute; filter: blur(50px); opacity:.5; pointer-events:none;
  animation: blob 18s ease-in-out infinite alternate;
}
.blob-1{
  width: 420px; height: 420px; left: -120px; top: -60px;
  background: radial-gradient(ellipse at center, #5d7cff, transparent 60%);
}
.blob-2{
  width: 420px; height: 420px; right: -120px; bottom: -60px;
  background: radial-gradient(ellipse at center, #6de1ff, transparent 60%);
  animation-delay: 1.2s;
}
@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(30px,-30px) scale(1.15); }
}

/* Carte principale */
.offer-card{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 350ms cubic-bezier(.2,.65,.2,1);
  width: min(1100px, 98%);
  min-height: 380px;
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 32px;
  border: 1px solid var(--c-border);
  background:#1078e724;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 28px 28px 38px;
  box-shadow: var(--shadow-xl);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  margin: 0 auto;

}
.offer-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}


.offer-card1{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 350ms cubic-bezier(.2,.65,.2,1); 
  width: min(1100px, 98%);
  min-height: 380px;
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 32px;
  border: 1px solid var(--c-border);
  background:#058f3836;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 28px 28px 38px;
  box-shadow: var(--shadow-xl);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  margin: 0 auto;

}
.offer-card1:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}


.offer-card2{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 350ms cubic-bezier(.2,.65,.2,1); 
  width: min(1100px, 98%);
  min-height: 380px;
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 32px;
  border: 1px solid var(--c-border);
  background:#ffa8076e;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 28px 28px 38px;
  box-shadow: var(--shadow-xl);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  margin: 0 auto;

}
.offer-card2:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

/* Prix flottant */
.offer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(10px,2vw,24px);
  margin-bottom: clamp(8px, 1.8vw, 18px);
}

.offer-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.offer-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 10px; border-radius:999px; color:#fff; font-size:12px;
  background: linear-gradient(90deg, var(--c-primary), #5e91ff);
  box-shadow: 0 8px 16px rgba(31,111,255,.45);
}


/* Prix à droite */
.offer-right{
  display:flex; align-items:baseline; gap:10px;
}
.offer-right__label{
  font-size:16px; color: #071929; letter-spacing:.02em;
}
.offer-right__price{
  font-weight: 800;
  font-size: clamp(24px, 4.2vw, 44px);
  color:#071929;
}
.offer-right__euro{
  font-size:.6em; color: #071929; margin-left:4px;
}

.offer-right1{
  display:flex; align-items:baseline; gap:10px;
}
.offer-right__label1{
  font-size:16px; color: #22c55e; letter-spacing:.02em;
}
.offer-right__price1{
  font-weight: 800;
  font-size: clamp(24px, 4.2vw, 44px);
  color:#22c55e;
}
.offer-right__euro1{
  font-size:.6em; color: #22c55e; margin-left:4px;
}


.offer-right2{
  display:flex; align-items:baseline; gap:10px;
}
.offer-right__label2{
  font-size:16px; color: #ff9c07; letter-spacing:.02em;
}
.offer-right__price2{
  font-weight: 800;
  font-size: clamp(24px, 4.2vw, 44px);
  color:#ff9c07;
}
.offer-right__euro2{
  font-size:.6em; color: #ff9c07; margin-left:4px;
}


@media (max-width: 700px){
  .offer-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .offer-right{
    align-self:flex-start; 
  }
}

@media (max-width: 700px){
  .offer-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .offer-right1{
    align-self:flex-start;
  }
}

@media (max-width: 700px){
  .offer-row{
    flex-direction:column;
    align-items:flex-start; 
    gap:8px;
  }
  .offer-right2{
    align-self:flex-start; 
  }
}

/* Head */
.offer-head{
  grid-column: 1 / span 2;
  display:flex; align-items:center; gap: 14px;
}
.offer-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; color:#fff;
  background: linear-gradient(90deg, var(--c-primary), #5e91ff);
  box-shadow: 0 8px 16px rgba(31,111,255,.45);
}
.offer-title1{
  font-weight: 800; margin:0; font-size: clamp(18px,2.5vw,35px);
  color:#22c55e; letter-spacing:.2px;
}

.offer-title{
  font-weight: 800; margin:0; font-size: clamp(18px,2.5vw,35px);
  color:#071929; letter-spacing:.2px;
}

.offer-title2{
  font-weight: 800; margin:0; font-size: clamp(18px,2.5vw,35px);
  color:#ff9c07; letter-spacing:.2px;
}

.offer-body{
  grid-column: 1 / 2;
}
.offer-features{ list-style:none; padding: 14px 0 0; margin:0; }
.offer-features li{
  display:flex; align-items:center; gap: 12px;
  font-size: clamp(14px,1.6vw,18px); color:#000000;
  padding: 10px 0; position:relative;
  transform: translateZ(0);
}
.offer-features li + li{ border-top: 1px dashed #071929 }
.i-check{
  width:22px; height:22px; border-radius:6px; background: rgba(57,217,138,.15);
  border:1px solid #071929; position:relative; display:inline-block;
}
.i-check::after{
  content:""; position:absolute; inset: 4px 6px auto auto;
  width: 6px; height: 11px; border-right: 2px solid #071929; border-bottom: 2px solid #071929;
  transform: rotate(45deg);
}

/* CTA */
.offer-cta{ margin-top: 18px; }
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 18px; border-radius:12px; color:#fff; text-decoration:none;
  background: linear-gradient(90deg, var(--c-primary), #3b87ff);
  box-shadow: 0 12px 22px rgba(31,111,255,.35);
  transition: transform .2s ease, box-shadow .2s ease, letter-spacing .2s ease;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(31,111,255,.45);
  letter-spacing: .3px;
}
.btn-primary .arrow{ transition: transform .2s ease; }
.btn-primary:hover .arrow{ transform: translateX(4px); }
.offer-note{ display:block; margin-top: 10px; color: var(--c-muted); font-size: 12px; }

/* Aside / mock décor */
.offer-aside{
  grid-column: 2 / 3; display:flex; align-items:center; justify-content:center;
  position:relative; pointer-events:none;
}
.device-mock{
  width: 280px; height: 180px; border-radius: 18px; position:relative;
  background: linear-gradient(180deg, #071929, #2c4e6b);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 -30px 60px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35);
}

.device-mock1{
  width: 280px; height: 180px; border-radius: 18px; position:relative;
  background: linear-gradient(180deg, #22c55e, #058f3836);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 -30px 60px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35);
}

.device-mock2{
  width: 280px; height: 180px; border-radius: 18px; position:relative;
  background: linear-gradient(180deg, #ff9c07 , #ffa8076e);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 -30px 60px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35);
}


.device-top, .device-bottom{
  position:absolute; left: 50%; transform: translateX(-50%);
  width: 30%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.2);
}
.device-top{ top: 8px; width: 36% }
.device-bottom{ bottom: 8px }
.device-screen{
  position:absolute; inset: 22px 16px; border-radius: 14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(31,111,255,.15), rgba(31,111,255,.05));
}
.pulse-dot{
  position:absolute; width: 9px; height: 9px; background: #39d98a; border-radius: 50%;
  left: 14px; top: 14px; box-shadow: 0 0 18px rgba(57,217,138,.7);
  animation: ping 1.8s infinite ease-out;
}
.pulse-bar{ position:absolute; left: 14px; height: 8px; right: 20px; border-radius: 6px; background: rgba(255,255,255,.6); }
.bar-1{ top: 38px; animation: bar .9s .05s infinite alternate ease }
.bar-2{ top: 58px; animation: bar 1.1s .15s infinite alternate ease }
.bar-3{ top: 78px; animation: bar 1s .25s infinite alternate ease }
@keyframes ping{ 0%{ transform: scale(.9); opacity:1 } 100%{ transform: scale(1.45); opacity:.2 } }
@keyframes bar{ 0%{ transform: scaleX(.8) } 100%{ transform: scaleX(1) } }

/* ===== Responsive ===== */
@media (max-width: 920px){
  .offer-card{ grid-template-columns: 1fr; padding-bottom: 26px }
  .offer-head{ grid-column: 1; padding-left: 140px }
  .offer-body{ padding-left: 140px }
  .offer-aside{ margin-top: -6px }
}

@media (max-width: 920px){
  .offer-card1{ grid-template-columns: 1fr; padding-bottom: 26px }
  .offer-head{ grid-column: 1; padding-left: 140px }
  .offer-body{ padding-left: 140px }
  .offer-aside{ margin-top: -6px }
}

@media (max-width: 950px){
  .offer-head{ padding-left: 0 }
  .offer-body{ padding-left: 0 }
  .offer-price{ left: 6px }
  .offer-price__ring{ width:110px; height:110px }
  .offer-price__value{ top: 14px }
  .device-mock{ width: 240px; height: 160px }
}


@media (max-width: 950px){
  .device-mock1{ width: 240px; height: 160px }
}

@media (max-width: 950px){
  .device-mock2{ width: 240px; height: 160px }
}


@media (max-width: 800px){
  .offer-aside{
    display: none;
  }
}






/* Base */
.packs-section{
  --card:#112b3a;        
  --ink:#e9f3ff;        
  --muted:#a5c0d3;       
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  position: relative;
  padding: clamp(2rem, 3.2vw, 4rem);
 
  border-radius: 24px;
}

.packs-title{
  font-size: clamp(1.8rem, 1.6rem + 1.3vw, 2.4rem);
  margin: 0 0 1.5rem;
  letter-spacing: .2px;
}
.packs-title span{ color:#3fa2ff; }

.packs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

@media (max-width:1000px){
  .packs-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.plan-card{
           /* default (green) */
  --accent-soft: color-mix(in oklab, var(--accent) 35%, #0000);
  position: relative;
  border-radius: 20px;
  padding: clamp(1rem, 1.2rem + 1vw, 1.6rem);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.plan--green1{
  background:  #1078e724;
}

.plan--amber{
    background: #ffa8076e;
}

.plan--cyan{
    background: #dd10095b;
}

.plan--blue{
    background: #058f3836;
}

/* soft halo */
.plan--card::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width: 65%; height: 65%;
  background: radial-gradient(600px 300px at right top, var(--accent-soft), transparent 60%);
  pointer-events:none;
  transform: translateZ(-10px);
}

/* colored variants */
.plan--green{ --accent:#22c55e; }
.plan--amber{ --accent:#facc15; }
.plan--cyan{  --accent:#06b6d4; }

.plan-card:is(:hover,:focus-within){
  box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.plan-head{
  display:flex;
  flex-direction:column;
  align-items:center;      
  gap:.35rem;
  margin-bottom:1rem;
}



.plan-head-left{ display:flex; align-items:center; gap:.75rem; }

.plan-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .35rem .55rem;
  font-size:.8rem; color:#0b1c26;
  background: linear-gradient(180deg, #fff, #e9f3ff);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.plan-badge::before{
  content:"★"; color:#0b7cff; font-weight:700;
}

.plan-title1{
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
  margin:0; font-weight: 700; letter-spacing:.3px;
  color: #058f38;
}

.plan-price1{
  margin:0; text-align:right;
  color: var(--muted);
  display:flex; align-items: baseline; gap:.5rem;
}
.plan-small1{ font-size:.9rem; 
  opacity:.95;
  color: #058f38; 
}

.plan-euro1{
  font-size: clamp(1.2rem, .8rem + 2.4vw, 2rem);
  font-weight:800; color:#058f38; letter-spacing:.5px;
  filter: drop-shadow(0 6px 18px color-mix(in oklab,var(--accent) 30%, transparent));
}
.plan-euro1 em{ font-style:normal; font-size:.8em; opacity:.85; }


.plan-title2{
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
  margin:0; font-weight: 700; letter-spacing:.3px;
  color: #ff9c07;
}

.plan-price2{
  margin:0; text-align:right;
  color: var(--muted);
  display:flex; align-items: baseline; gap:.5rem;
}
.plan-small2{ font-size:.9rem; 
  opacity:.95;
  color: #ff9c07; 
}

.plan-euro2{
  font-size: clamp(1.2rem, .8rem + 2.4vw, 2rem);
  font-weight:800; color:#ff9c07; letter-spacing:.5px;
  filter: drop-shadow(0 6px 18px color-mix(in oklab,var(--accent) 30%, transparent));
}
.plan-euro2 em{ font-style:normal; font-size:.8em; opacity:.85; }


.plan-title3{
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
  margin:0; font-weight: 700; letter-spacing:.3px;
  color: #dd1009a1;
}

.plan-price3{
  margin:0; text-align:right;
  color: var(--muted);
  display:flex; align-items: baseline; gap:.5rem;
}
.plan-small3{ font-size:.9rem; 
  opacity:.95;
  color: #dd1009a1; 
}

.plan-euro3{
  font-size: clamp(1.2rem, .8rem + 2.4vw, 2rem);
  font-weight:800; color:#dd1009a1; letter-spacing:.5px;
  filter: drop-shadow(0 6px 18px color-mix(in oklab,var(--accent) 30%, transparent));
}
.plan-euro3 em{ font-style:normal; font-size:.8em; opacity:.85; }


.plan-title4{
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
  margin:0; font-weight: 700; letter-spacing:.3px;
  color: #071929;
}

.plan-price4{
  margin:0; text-align:right;
  color: var(--muted);
  display:flex; align-items: baseline; gap:.5rem;
}
.plan-small4{ font-size:.9rem; 
  opacity:.95;
  color: #071929; 
}

.plan-euro4{
  font-size: clamp(1.2rem, .8rem + 2.4vw, 2rem);
  font-weight:800; color:#071929; letter-spacing:.5px;
  filter: drop-shadow(0 6px 18px color-mix(in oklab,var(--accent) 30%, transparent));
}
.plan-euro4 em{ font-style:normal; font-size:.8em; opacity:.85; }


/* List */
.plan-list{
  list-style:none; padding: .8rem 0 0; margin:0 0 .9rem;
  display:grid; gap:.75rem;
}
.plan-list li{
  position:relative; padding: .75rem 0 .75rem 2.2rem;
  color: #000000; line-height: 1.25;
  border-bottom: 1px dashed #ffffff;
}
.plan-list li:last-child{ border-bottom: none; }

/* CTA */
.plan-cta{ margin-top: .5rem; }
.btn-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.1rem;
  color:#031924; font-weight:700; text-decoration:none;
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
  border-radius:12px; box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.btn-cta::after{
  content:"↗"; font-size:1rem; translate:0 1px;
}
.plan-card:hover .btn-cta{ transform: translateY(-1px); }

/* Note */
.packs-note{
  color:#000000; margin:1.5rem 0 0; font-size:.9rem;
  opacity:.9;
}

.section-title{
  color:#000000; 
}



.click-btn {
  display: flex;
  width: 100%; 
  height: 50px;
  justify-content: center;
  align-items: center;
  line-height: 35px;
  border: 1px solid;
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  color: #000000;
  text-decoration: none;
  transition: all 0.35s;
  box-sizing: border-box;
}

.btn-style501 {
    background-image: linear-gradient(to right, #058f38 0%, #5cc783 51%);
    background-size: 200% auto;
    background-position: left top;
    border-color: transparent;
    color: #ffffff;
    font-weight:700
  }
  .btn-style501:hover {
    background-position: right bottom;
    color: #000;
}


.btn-style1 {
    background-image: linear-gradient(to right, #0b1c26 0%, #5288a7 51%);
    background-size: 200% auto;
    background-position: left top;
    border-color: transparent;
    color: #ffffff;
    font-weight:700
  }
  .btn-style1:hover {
    background-position: right bottom;
    color: #000;
}



.btn-style2 {
    background-image: linear-gradient(to right, #ff9c07 0%, #eb944d 51%);
    background-size: 200% auto;
    background-position: left top;
    border-color: transparent;
    color: #ffffff;
    font-weight:700
  }
  .btn-style2:hover {
    background-position: right bottom;
    color: #000;
}


.btn-style3 {
    background-image: linear-gradient(to right, #dd1009a1 0%, #c94642a1 51%);
    background-size: 200% auto;
    background-position: left top;
    border-color: transparent;
    color: #ffffff;
    font-weight:700
  }
  .btn-style3:hover {
    background-position: right bottom;
    color: #000;
}






/* Badge */
.badge-pop{
  position: absolute;
  top: 1px;                 
  right: 20px;
  display:flex;
  align-items:center;
  gap: .35rem;

  padding: .35rem .8rem .35rem .6rem;
  font-size: .825rem;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff;

  background: linear-gradient(135deg,#ff7b7b 0%, #ff4242 100%);
  border-radius:30px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);

  transition: transform .25s ease, box-shadow .25s ease;
}



.badge-pop svg{
  flex-shrink:0;
}




:root{
  --nav-height: 90px;
  --glass-bg: rgba(13, 25, 43, .55);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 8px 28px rgba(0,0,0,.35);
  --accent: #14d2b8;  
  --text: #e9eef6;
  --text-dim: #aab7cc;
  --link: #dfe7f7;
  --link-active: #ffffff;
}

*{box-sizing:border-box}


/* ===== Header ===== */
.glass-nav{
  position: fixed;          
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 1000;
  display: flex;
  align-items: center;

  /* verre flouté */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.glass-nav.scrolled{
  background: rgba(13,25,43,.72);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 36px rgba(0,0,0,.48);
}

.nav-inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.burger {                     
  display: none;
}

/* Brand */
.brand{
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
}

.brand-badge{
  width: 34px; height:34px;
  border-radius: 10px;
  background: var(--accent);
  color:#08121a;
  font-weight:900;
  display:grid;
  place-items:center;
  box-shadow: 0 6px 16px rgba(20,210,184,.35);
}

.brand-text strong{
  font-size: 16px;
  line-height: 1.1;
  letter-spacing:.2px;
}
.brand-text small{
  display:block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top:2px;
}

/* Nav */
.main-nav{
  display:flex;
  gap: 22px;
  align-items:center;
  justify-content:center;
}
.main-nav a{
  color: #ffffff;
  text-decoration:none;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.main-nav a:hover{ color:#f8b726; background: rgba(13, 25, 43, .55); }
.main-nav a.active{ color: var(--link-active); background: rgba(255,255,255,.08); }

/* Actions */
.nav-actions{
  display:flex;
  gap:14px;
  align-items:center;
}

.icon-btn{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:transparent;
  color:var(--link);
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.2); }

.icon-link{
  display:grid; place-items:center;
  width:50px; height:50px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  color:var(--link);
  text-decoration:none; font-weight:700;
  transition:.2s;
}
.icon-link:hover{ background:rgba(13, 25, 43, .55); color:#f8b726; border-color:rgba(255,255,255,.2); }

/* Burger (mobile) */
.burger{
  width:40px; height:40px; border:0;
  background:transparent; border-radius:10px;
  display: none;; flex-direction:column; gap:5px;
  justify-content:center; align-items:center;
  cursor:pointer; color:#fff;
  margin-left: auto;
}
.burger span{
  width:22px; height:2px; background:#dfe7f7; border-radius:2px; transition:.25s;
}
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.mobile-panel{
  position: fixed;
  inset: var(--nav-height) 0 auto 0;
  height: calc(100dvh - var(--nav-height));
  background: rgba(10, 18, 32, 0.925);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(-12px) scale(.98);
  opacity: 0;
  pointer-events:none;
  transition: .25s ease;
}

.mobile-panel.open{
  opacity:1; transform:none; pointer-events:auto;
}

.mobile-nav{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-nav a{
  color:#ffffff;
  text-decoration:none; font-weight:700;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding: 14px 16px;
}
.mobile-nav a.active{ background: rgba(255,255,255,.12); color:#ffffff; }

.mobile-nav a:hover{ color:#f8b726; background: rgba(13, 25, 43, .55); }


.mobile-socials{
  display:flex; gap:10px; margin-top:8px;
}

@media (max-width: 980px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .nav-inner{ grid-template-columns:auto auto auto; }
}







@media (max-width: 980px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: inline-flex !important; }

  .icon-btn[data-action="open-search"] { display: none !important; }

  }
 



  @media (max-width: 980px) {
  .main-nav,
  .nav-social,
  .icon-btn[data-action="open-search"] {
    display: none !important;
  }

  .burger {
    display: inline-flex;     
    margin-left: auto;        
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}




.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 12px 12px 12px 14px;

  background: rgba(255, 255, 255, 0.06);     
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 12px 26px rgba(0,0,0,0.35);

  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}

/* Glow et légère mise en avant au focus */
.drawer-search:focus-within {
  border-color: rgba(77, 163, 255, .9);
  box-shadow:
    0 0 0 3px rgba(77,163,255,.22),
    0 12px 30px rgba(20, 100, 200, .25),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.drawer-search__icon {
  display: inline-flex;
  color: rgba(255,255,255,0.7);
}

/* Champ texte */
.drawer-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;

  border: none;
  outline: none;
  background: transparent;
  color: #fff;

  font-size: 16px;
  line-height: 1.2;
}

.drawer-search input::placeholder {
  color: rgba(255,255,255,0.55);
}

/* Bouton compact */
.drawer-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 12px;

  border: none;
  border-radius: 12px;
  color: #fff;

  background: linear-gradient(135deg, #1f7bff, #4da3ff);
  box-shadow: 0 6px 18px rgba(32, 122, 255, 0.35);

  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

.drawer-search__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(32, 122, 255, 0.45);
}

.drawer-search__btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(32, 122, 255, 0.35);
}

.drawer-search input::-webkit-search-decoration,
.drawer-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}




.search-results[hidden] { display: none !important; }

.search-results {
  margin-top: 10px;
  width: 100%;
  max-height: 300px;
  overflow: auto;

  background: rgba(10, 18, 32, 0.925);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 12px 26px rgba(0,0,0,0.35);
}

.search-results li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #ffffff;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.search-results li:not(:last-child) {
  border-bottom: 1px dashed rgba(255,255,255,.08);
}

.search-results li:hover,
.search-results li.is-active {
  background: rgba(77,163,255,.12);
}

.search-results li .url {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.search-results mark {
  color: #4da3ff;
  background: transparent;
  font-weight: 700;
}





.search-popover[hidden] { display: none !important; }

.search-popover {
  position: absolute;
  right: 16px;
  top: calc(100% + 10px);
  z-index: 9999;
  width: min(640px, calc(100vw - 32px));
}

.search--desktop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;

  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 12px 26px rgba(0,0,0,0.35);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.search--desktop:focus-within {
  border-color: rgba(77,163,255,0.45);
  background: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 1px rgba(77,163,255,0.3),
    0 16px 38px rgba(0,0,0,0.45);
}

.search--desktop input {
  flex: 1;
  min-width: 160px;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 20px;
}



.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;

  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;

  /* reset bouton natif */
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
}

button.nav-icon { all: unset; }       
button.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nav-icon:hover { background: #f8b726; }
.nav-icon:focus-visible { box-shadow: 0 0 0 3px rgba(77,163,255,.35); }

.nav-icon[aria-expanded="true"] {
  background: rgba(255,255,255,.14);
  border-color: rgba(77,163,255,.45);
}





:root{
  --bg:#ffffff;
  --panel:#131f3ab4;
  --panel-2:#0b162aaf;
  --text:#e6eefc;
  --muted:#e7edf8;
  --line:#243149;
  --primary:#5b7cfa;
  --primary-2:#7b5bfa;
  --success:#18c964;
  --danger:#ff6b6b;
  --glass: rgba(255,255,255,.045);
  --shadow: 0 10px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.02);
  --radius:16px;
}



.containerform{
  max-width:1120px;
  margin-inline:auto;
  padding: clamp(20px, 4vw, 48px);
}

.contact{
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
}
@media(min-width:980px){
  .contact{ grid-template-columns: 1fr 1.3fr; gap:32px; }
}

.cardform{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid #19233a;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cardform::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(250px 120px at 15% 0, rgba(93,120,255,.12), transparent 55%),
    radial-gradient(200px 180px at 100% 70%, rgba(123,91,250,.10), transparent 60%);
  z-index:-1;
}

/* TITRES */
.cardform h2{font-weight:700; font-size: clamp(28px, 3.6vw, 40px); letter-spacing:.2px; margin:0 0 14px; color: #000000;}
.form-title h2{font-weight:700; font-size: clamp(22px, 2.6vw, 28px); margin:0 0 16px; color: #000000}
.muted{color:var(--muted)}
.sep{height:1px; background:var(--line); margin:14px 0 18px}

/* Ligne info */
.info-line{display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:12px; padding:10px 0}
.chip-copy{
  border:1px solid #2a3a5f; color:var(--muted);
  border-radius:999px; padding:6px 10px; font-size:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  cursor:pointer; transition:all .2s ease;
}
.chip-copy:hover{ color:var(--text); border-color:#3b4e7c; background:rgba(255,255,255,.04) }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }

/* Boutons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer;
  border:1px solid transparent; text-decoration:none; color:white;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}




.btn:active{ transform:translateY(1px) }
.btn-primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: 0 8px 20px rgba(91,124,250,.28);
}
.btn-primary:hover{ box-shadow:0 10px 28px rgba(91,124,250,.42) }
.btn-ghost{
  background:var(--glass);
  border-color:#25406e;
  color:#dbe6ff;
}
.btn-ghost:hover{ background:rgba(255,255,255,.06) }

/* ICONES */
.icon{width:20px;height:20px;display:inline-block;flex:0 0 20px}
.icon svg{width:100%;height:100%;display:block}

/* FORM */
.form-title{gap:12px; margin-bottom:14px }
.badge{ font-size:13px; color:#f3f5fa; background:rgba(255,255,255,.05); border:1px solid #22345a; border-radius:999px; padding:6px 10px }
.form-grid{ display:grid; grid-template-columns:1fr; gap:14px }
@media(min-width:760px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid .full{ grid-column: 1/-1 }
}
label{ font-weight:600; font-size:14px; margin-bottom:6px; display:block; color:var(--muted) }

.field{
  background:rgba(255,255,255,.03);
  border:1px solid #203252; color:var(--text);
  border-radius:12px; padding:12px 14px;
  outline:none; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field::placeholder{ color:#8b98b6 }
.field:focus{ border-color:#3f58a2; box-shadow:0 0 0 3px rgba(93,120,255,.18) }
textarea.field{ min-height:160px; resize:vertical }

.check{ display:flex; align-items:flex-start; gap:10px; margin-top:6px; font-size:14px; color:var(--muted) }
.check input{ margin-top:2px; accent-color:#6b86ff; width:18px;height:18px }

.form-actions{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; justify-content: center; }
.btn-send{ padding:12px 20px; border-radius:999px }
.btn-send .arrow{ width:18px;height:18px; transform:translateX(0); transition:transform .15s ease }
.btn-send:hover .arrow{ transform: translateX(3px) }

.hint{ font-size:12px; color:#8fa3c8; display: flex; align-items: center; justify-content: center; }
.error{ color:var(--danger); font-size:13px; margin-top:8px; display:none }
.toast{
  position: fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background: #0f1d3e; color:#e9f0ff; border:1px solid #2a3d6a;
  padding:10px 14px; border-radius:999px; box-shadow:var(--shadow);
  display:none; z-index:999;
}
.toast.show{ display:block; animation:pop .18s ease }
@keyframes pop{ from{ transform:translate(-50%, 8px); opacity:0 } to{ transform:translate(-50%,0); opacity:1 } }

.mt-8{ margin-top:8px } .mt-10{margin-top:10px} .mt-16{margin-top:16px}
.small{ font-size:13px }








/* Ruban diagonal sur desktop */
.best-seller .corner-ribbon {
  position: absolute;
  top: 4px;
  right: -48px;                 
  width: 210px;
  padding: 10px 0;
  background: linear-gradient(135deg, #29ffd8, #00bcd4);
  color: #0b2a2f;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(45deg);
  z-index: 5;
  box-shadow: 0 12px 24px rgba(0, 188, 212, .25),
              0 4px 8px rgba(0, 0, 0, .12);
}

/* Petite animation de brillance subtile */
.best-seller .corner-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: ribbonShine 3.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes ribbonShine {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

.best-seller .corner-ribbon i {
  margin-right: .5rem;
  font-size: 1rem;
}




.best-seller:hover {
  animation: bestSellerPulse 1.8s ease-in-out infinite;
}
@keyframes bestSellerPulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50%      { transform: translateZ(0) scale(1.01); }
}




.best-seller1 .corner-ribbon {
  position: absolute;
  top: 0px;
  right: -48px;                 
  width: 210px;
  padding: 10px 0;
  background: linear-gradient(135deg, #29ffd8, #00bcd4);
  color: #0b2a2f;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(45deg);
  z-index: 5;
  box-shadow: 0 12px 24px rgba(0, 188, 212, .25),
              0 4px 8px rgba(0, 0, 0, .12);
}

/* Petite animation de brillance */
.best-seller1 .corner-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: ribbonShine 3.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes ribbonShine {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

.best-seller1 .corner-ribbon i {
  margin-right: .5rem;
  font-size: 1rem;
}




.best-seller1:hover {
  animation: bestSellerPulse 1.8s ease-in-out infinite;
}
@keyframes bestSellerPulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50%      { transform: translateZ(0) scale(1.01); }
}



.btn1{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer;
  border:1px solid; text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}


/* bouton */


.btn1:hover{
  color:#f8b726;
}



.btnbas{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  background: #ffffff;
}


.hidden { display: none; }






.anim-card{
  position: relative; width:100%; aspect-ratio: 3/2;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
#map-zone{ position:absolute; inset:0; }

#map-zone .leaflet-pane,
#map-zone .leaflet-control-container{ pointer-events:none; }


.anim-overlay{
  position:absolute; inset:0; z-index:999;

  pointer-events:none;          
}

.island-anim{
  width:100%;
  height:100%;
  display:block;              
}

/* Effets animés */
.dot-core{ filter: drop-shadow(0 0 6px rgba(250,176,46,.9)); }
.dot-pulse{
  opacity:.9; transform-origin:300px 210px;
  animation: pulse 2.2s ease-out infinite;
}
.ray-line{
  stroke-dasharray:220; stroke-dashoffset:220;
  filter: drop-shadow(0 0 10px rgba(0,104,176,.7));
  animation: draw 1.4s ease forwards;
  animation-delay: var(--d, 0s);
}

/* Petit CTA */
.cta-mini{
  position:absolute; left:24px; bottom:18px; z-index:3;
  background:#0b6eae; color:#fff; text-decoration:none; font-weight:700;
  padding:12px 16px; border-radius:18px 18px 32px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.cta-mini:hover{ transform: translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.32); background:#0781cd; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pulse{ 0%{ r:6; opacity:.9 } 60%{ r:28; opacity:0 } 100%{ r:28; opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .ray-line,.dot-pulse{ animation:none!important; }
}







.city-label{
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  fill:#0b2240;
  stroke:#fff;               
  stroke-width:3px;
  paint-order: stroke fill;    
  dominant-baseline: middle;
  opacity:0; animation: labelFade .4s ease forwards;
}
@keyframes labelFade { to { opacity:1; } }