/* ============== Reset & Vars ============== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#034ca7; --accent:#ff7c00; --dark:#0b1220; --text:#222; --muted:#6e6e73;
  --bg:#f7f8fb; --white:#fff; --radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,.08); --shadow-sm:0 4px 12px rgba(0,0,0,.06);
  --trans:all .25s ease; --container:1200px;
  --font:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
img{max-width:100%;height:auto}

/* ============== Top bar ============== */
.top-header{background:#0b3f8a;color:#fff}
.top-header .icon-sec{display:flex;gap:20px;list-style:none;align-items:center;justify-content:flex-end;padding:8px 0}
.icons-sec-li a{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-size:.95rem;opacity:.95}
.top-header img{height:20px;width:auto}
@media (max-width:768px){.top-header .icon-sec{justify-content:center;flex-wrap:wrap}}

/* ============== Header / Nav ============== */
header{background:var(--primary);color:#fff;position:sticky;top:0;z-index:1000}
.header-container{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:16px}
.logo img{max-height:54px;display:block}
nav ul.desktop-menu{list-style:none;display:flex;gap:22px;align-items:center}
nav ul.desktop-menu a{color:#fff;text-decoration:none;font-weight:500;padding:8px 6px;border-radius:8px;transition:var(--trans)}
nav ul.desktop-menu a:hover{background:rgba(255,255,255,.12)}
.mobile-menu-icon{display:none;font-size:1.9rem;cursor:pointer;user-select:none;padding:6px 10px}
ul.mobile-menu{display:none;list-style:none;flex-direction:column;background:#0b3f8a}
ul.mobile-menu li a{display:block;padding:14px 16px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.15)}
ul.mobile-menu.active{display:flex}
@media (max-width:768px){nav ul.desktop-menu{display:none}.mobile-menu-icon{display:block}}

/* ============== Calculateur (.cr_*) ============== */
.cr_search-container{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px;margin:18px 0}
.cr_search-form{display:grid;gap:14px}
.cr_location-section,.cr_options-section{display:grid;gap:12px}
.cr_form-group{display:grid;gap:6px}
.cr_form-group label,.form-label{font-size:.95rem;font-weight:600;color:#1b2a4a}
.cr_form-group select,.cr_form-group input{width:100%;padding:12px 10px;border:1px solid #dfe3ea;border-radius:10px;background:#fff;font-size:1rem}
#price{background:#f1f5fb;border:1px dashed #b9c7e6;font-weight:700}
.cr_search-button{display:inline-flex;justify-content:center;align-items:center;padding:12px 18px;border-radius:12px;background:#1e6cff;color:#fff;text-decoration:none;font-weight:800;transition:var(--trans)}
.cr_search-button:hover{background:#0b56e2}
@media (min-width:900px){
  .cr_search-form{grid-template-columns: 1.2fr 1fr auto;align-items:end}
  .cr_location-section{grid-template-columns:1fr 1fr;align-items:end}
  .cr_options-section{grid-template-columns:1fr 1fr;align-items:end}
}

/* ============== Slider ============== */
.slider{position:relative;overflow:hidden;border-radius:16px;box-shadow:var(--shadow-sm);background:#000}
.slides{display:flex;list-style:none;transition:transform .6s ease}
.slide{min-width:100%;display:none}
.slide.active{display:block}
.slide img{display:block;width:100%}
.dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;list-style:none}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5)}
.dot.active{background:#fff}

/* ============== Sections / typographie ============== */
section{padding:48px 0}
h1,h2,h3,h4{color:#0b1e3a}
h2{font-size:2rem;margin-bottom:16px}
.text-center{text-align:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 18px;cursor:pointer;transition:var(--trans);font-weight:700;text-decoration:none}
.btn:hover{background:var(--accent)}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Section hero */
.section-one-content{display:grid;gap:20px}
.section-one-l{display:flex;justify-content:center}
.section-one-l img{max-height:140px;object-fit:contain}
@media (min-width:900px){.section-one-content{grid-template-columns: 1fr 1.4fr;align-items:center}}

/* ============== Services (cards) ============== */
.services-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.service-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--trans)}
.service-card:hover{transform:translateY(-4px)}
.service-img{width:100%;height:200px;object-fit:cover;display:block}
.service-content{padding:18px}
.info-title,.info-title-lg{color:var(--primary);margin:2px 0 6px}
.price-tag{font-weight:700;color:#2b2b2b;margin-top:6px}

/* ============== Info cards ============== */
.info-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.info-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}
.route-icon{font-size:1.6rem;margin-bottom:6px;color:var(--primary)}
.info-stats{display:flex;gap:16px;margin:10px 0}
.stat-item{display:flex;gap:6px;align-items:center;color:#2a2a2a}

/* ============== Vision ============== */
.vision-section{background:#fff}
.vision-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}
.features-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.feature-tag{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#eff5ff;color:#0b3f8a;font-weight:600}

/* ============== WhatsApp float ============== */
.whatsapp-float{position:fixed;right:16px;bottom:16px;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;text-decoration:none;box-shadow:var(--shadow);z-index:999}
.whatsapp-float i{font-size:26px}

/* ============== Footer ============== */
footer{background:var(--dark);color:#cdd3e1;margin-top:40px}
.footer-content{display:grid;gap:16px;grid-template-columns:1fr;align-items:center;padding:22px 0}
.footer-logo img{max-height:60px}
.footer-links ul,.social-media-icons ul{list-style:none;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:#cdd3e1;text-decoration:none}
.footer-links a:hover{color:#fff}
@media (min-width:900px){.footer-content{grid-template-columns:auto 1fr auto auto;justify-content:space-between}}

/* ============== A11y & reduced motion ============== */
@media (prefers-reduced-motion:reduce){.slides{transition:none}.btn,.service-card,.cr_search-button{transition:none}}

/* Boutons centrés partout */
.btn-group {
    display: flex;
    justify-content: center;   /* centre horizontalement */
    align-items: center;
    gap: 12px;                 /* espace entre boutons */
    margin-top: 14px;          /* espace au-dessus du groupe */
  }
  
  /* Dans les cartes service : évite que le bouton colle au texte */
  .service-card .btn-group { margin-top: 16px; }
  
  /* Bouton unique (Book Now / Get a quote) : beau rayon + padding uniforme */
  .btn,
  .cr_search-button {
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
  }
  
  /* Vision card : centre le CTA sous les tags */
  .vision-card .btn-group { justify-content: center; margin-top: 16px; }
  
  /* Option : petit 'halo' pour l’accessibilité au focus clavier */
  .btn:focus-visible,
  .cr_search-button:focus-visible,
  .footer-links a:focus-visible,
  .social-media-icons a:focus-visible {
    outline: 3px solid rgba(3, 76, 167, .35);
    outline-offset: 2px;
    border-radius: 12px;
  }

  /* Container réseaux : espace régulier */
.social-media-icons ul {
  gap: 14px;                 /* espace égal entre chaque icône */
}

/* Gabarit carré identique pour tous les liens (cliquable + accessible) */
.social-media-icons a {
  width: 44px;               /* même taille pour tous */
  height: 44px;
  display: inline-flex;      /* centre l’icône à l’intérieur */
  align-items: center;
  justify-content: center;
  background: #fff;          /* petit fond blanc comme ta capture */
  border-radius: 10px;       /* angles adoucis */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  text-decoration: none;
}

/* Image/SVG à l’intérieur : taille uniforme */
.social-media-icons img,
.social-media-icons svg {
  width: 22px;               /* même taille visuelle */
  height: 22px;
  object-fit: contain;       /* respecte les proportions */
  display: block;
}

/* Effet hover simple et propre */
.social-media-icons a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Image Disney - taille adaptable et bien centrée */
.section-one-l {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .section-one-l img{
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
  }
  
  /* Taille confortable sur desktop */
  @media (min-width: 900px){
    .section-one-l img{
      max-height: 220px;   /* ↑ augmente si tu veux encore plus grand */
    }
  }
  /* Taille mobile */
  @media (max-width: 899.98px){
    .section-one-l img{
      max-height: 170px;
    }
  }
  

  .social-media-icons a{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #034ca7;           /* fond bleu = icônes blanches visibles */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  text-decoration: none;
}
.social-media-icons img,
.social-media-icons svg{
  width: 22px; height: 22px;
  display: block;
  object-fit: contain;
  /* si le SVG est noir, on peut le rendre blanc: */
  filter: brightness(0) invert(1);
}
.social-media-icons a:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}