/* ============================================================
   TP BAT — GLOBAL REDESIGN
   Palette bleu ciel + ivoire — toutes pages, mobile & desktop
   ============================================================ */

/* ══════════════════════════════════════════
   1. RESET DES VARIABLES LEGACY
══════════════════════════════════════════ */
:root {
  /* Nouvelle palette */
  --sky:        #3B82C4;
  --sky-dark:   #2563A8;
  --sky-light:  #EBF4FF;
  --sky-mid:    #BFDBF7;
  --ivory:      #F8F6F1;
  --ivory-dark: #EDE9E1;
  --white:      #FFFFFF;
  --charcoal:   #1E2A38;
  --grey:       #6B7A8D;
  --grey-lt:    #A8B4C0;
  --divider:    #D9E5F0;
  --shadow-sm:  0 2px 12px rgba(59,130,196,0.10);
  --shadow-md:  0 8px 32px rgba(59,130,196,0.14);
  --shadow-lg:  0 20px 60px rgba(30,42,56,0.12);
  --ease:       0.3s cubic-bezier(0.4,0,0.2,1);
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;

  /* Compat variables legacy utilisées en inline */
  --bleu-nuit:      #1E2A38;
  --bleu-fort:      #2563A8;
  --bleu-moyen:     #3B82C4;
  --bleu-clair:     #BFDBF7;
  --bleu-pale:      #BFDBF7;
  --bleu-tres-pale: #EBF4FF;
  --bleu-glace:     #F0F8FF;
  --or:             #3B82C4;
  --or-clair:       #BFDBF7;
  --or-pale:        #EBF4FF;
  --blanc:          #FFFFFF;
  --blanc-pur:      #FFFFFF;
  --gris-clair:     #D9E5F0;
  --gris-moyen:     #6B7A8D;
  --gris-fonce:     #1E2A38;
  --ombre-douce:    0 4px 24px rgba(59,130,196,0.10);
  --ombre-forte:    0 12px 40px rgba(30,42,56,0.18);
  --ombre-bleue:    0 8px 32px rgba(59,130,196,0.20);
  --rayon:          12px;
  --rayon-lg:       20px;
  --transition:     0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════
   2. BASE & TYPOGRAPHIE
══════════════════════════════════════════ */
body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'Lato', sans-serif;
  color: var(--charcoal);
  line-height: 1.2;
}

.section-label { color: var(--sky); }

.gold-line {
  background: var(--sky) !important;
  width: 44px; height: 3px;
  border-radius: 2px;
  margin: 0.8rem 0 1.1rem;
}
.section-header.centered .gold-line { margin: 0.8rem auto 1.1rem; }

/* ══════════════════════════════════════════
   3. BOUTONS — partout mobile + desktop
══════════════════════════════════════════ */
.btn {
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: var(--ease);
}

.btn-primary {
  background: var(--sky);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(59,130,196,0.30);
}
.btn-primary:hover {
  background: var(--sky-dark);
  box-shadow: 0 8px 24px rgba(59,130,196,0.40);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--divider);
}
.btn-outline:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-light);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--charcoal);
  color: var(--white);
  box-shadow: none;
}
.btn-dark:hover {
  background: var(--sky-dark);
  transform: translateY(-2px);
}

.btn-sms {
  background: #25D366;
  color: var(--white);
  border: none;
}
.btn-sms:hover {
  background: #1da851;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   4. NAVBAR
══════════════════════════════════════════ */
#navbar { transition: all var(--ease); }

/* Mobile : scrolled reste charcoal comme le reste de la navbar */
#navbar.scrolled {
  background: var(--charcoal);
  box-shadow: 0 2px 20px rgba(30,42,56,0.25);
}

/* Desktop : scrolled devient blanc semi-transparent */
@media (min-width: 769px) {
  #navbar.scrolled {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--divider);
  }
  #navbar.scrolled .nav-logo .logo-text { color: var(--charcoal); }
  #navbar.scrolled .nav-logo .logo-text em { color: var(--sky); }
  #navbar.scrolled .nav-logo .logo-icon {
    background: var(--sky);
    color: var(--white);
  }
  #navbar.scrolled .nav-links a { color: var(--grey); }
  #navbar.scrolled .nav-links a:hover,
  #navbar.scrolled .nav-links a.active { color: var(--charcoal); }
  #navbar.scrolled .nav-links a::after { background: var(--sky); }
  #navbar.scrolled .nav-cta {
    background: var(--sky) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 14px rgba(59,130,196,0.28);
    border-radius: var(--r-sm);
  }
  #navbar.scrolled .nav-cta:hover { background: var(--sky-dark) !important; }
}

/* ══════════════════════════════════════════
   5. PAGE HERO (Réalisations, Équipe, Contact)
══════════════════════════════════════════ */
.page-hero {
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
}
.page-hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(37,99,168,0.80) 0%,
    rgba(30,42,56,0.65) 50%,
    rgba(20,30,48,0.72) 100%
  );
}
.page-hero h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}
.page-hero p { color: rgba(255,255,255,0.68); }

/* ══════════════════════════════════════════
   6. FILTRES (réalisations & équipe)
══════════════════════════════════════════ */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.filter-btn {
  background: var(--white);
  color: var(--grey);
  border: 1.5px solid var(--divider);
  border-radius: 50px;
  padding: 0.55rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
}
.filter-btn:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-light);
}
.filter-btn.active {
  background: var(--sky);
  color: var(--white);
  border-color: var(--sky);
  box-shadow: 0 4px 12px rgba(59,130,196,0.28);
}

/* ══════════════════════════════════════════
   7. CARDS RÉALISATIONS
══════════════════════════════════════════ */
.real-card {
  background: var(--white);
  border: 2px solid var(--sky-mid);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.real-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky);
}

.real-badge {
  background: var(--sky);
  color: var(--white);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
}

.real-info { padding: 1.4rem; }
.real-info h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}
.real-info p { font-size: 0.87rem; color: var(--grey); line-height: 1.65; }

/* Barre de recherche */
.search-bar {
  background: var(--white);
  border: 1.5px solid var(--divider);
  border-radius: 50px;
  transition: var(--ease);
}
.search-bar:focus-within {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(59,130,196,0.15);
}
.search-icon { color: var(--sky); }
.search-clear { color: var(--grey-lt); }
.search-clear:hover { color: var(--charcoal); }

/* ══════════════════════════════════════════
   8. CARDS ÉQUIPE
══════════════════════════════════════════ */
.team-card {
  background: var(--white);
  border: 2px solid var(--sky-mid);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky);
}

.team-img-overlay {
  background: linear-gradient(to top, rgba(37,99,168,0.85), transparent);
}

.team-info { padding: 1.3rem 1.4rem; }
.team-info h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--charcoal);
  font-size: 1rem;
}
.team-role {
  color: var(--sky);
  font-size: 0.82rem;
  font-weight: 600;
}
.team-bio { color: var(--grey); font-size: 0.85rem; line-height: 1.65; }

.team-badge {
  background: var(--sky);
  color: var(--white);
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}

/* ══════════════════════════════════════════
   9. CONTACT PAGE
══════════════════════════════════════════ */
/* Bloc infos */
.contact-info-block {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.contact-info-block h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  color: var(--charcoal);
}
.contact-info-block h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--charcoal);
}
.contact-info-block h3 i { color: var(--sky) !important; }

/* Contact items */
.contact-item {
  border: 1px solid var(--divider);
  border-radius: var(--r-sm);
  background: var(--ivory);
  transition: var(--ease);
}
.contact-item:hover {
  border-color: var(--sky);
  background: var(--sky-light);
  transform: translateX(4px);
}
.contact-item strong { color: var(--charcoal) !important; }
.contact-item span { color: var(--grey); }

.contact-item-icon {
  background: var(--sky) !important;
  border-radius: var(--r-sm);
  width: 42px; height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Formulaire */
.form-group label { color: var(--charcoal); font-weight: 600; font-size: 0.88rem; }

.contact-info-block input,
.contact-info-block select,
.contact-info-block textarea {
  border: 1.5px solid var(--divider);
  border-radius: var(--r-sm);
  background: var(--ivory);
  color: var(--charcoal);
  transition: var(--ease);
}
.contact-info-block input:focus,
.contact-info-block select:focus,
.contact-info-block textarea:focus {
  border-color: var(--sky);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(59,130,196,0.15);
  outline: none;
}
.contact-info-block input::placeholder,
.contact-info-block textarea::placeholder { color: var(--grey-lt); }

.form-error { color: #E53E3E; }

.form-submit {
  background: var(--sky);
  color: var(--white);
  width: 100%;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59,130,196,0.28);
}
.form-submit:hover {
  background: var(--sky-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,196,0.38);
}

/* Réseaux sociaux contact */
.social-btn {
  background: var(--sky-light) !important;
  color: var(--sky) !important;
  border: 1.5px solid var(--sky-mid) !important;
  border-radius: var(--r-sm) !important;
  transition: var(--ease);
}
.social-btn:hover {
  background: var(--sky) !important;
  color: var(--white) !important;
  border-color: var(--sky) !important;
  transform: translateY(-2px);
}

/* Horaires */
.horaire-row {
  border-bottom: 1px solid var(--divider);
  padding: 0.65rem 0;
}
.horaire-row .day { color: var(--charcoal); font-weight: 600; }
.horaire-row .hours { color: var(--sky); font-weight: 700; }
.horaire-row .closed { color: var(--grey-lt); }

/* FAQ */
.faq-item {
  border: 1px solid var(--divider);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: var(--ease);
}
.faq-item:hover { border-color: var(--sky-mid); }
.faq-question {
  background: var(--ivory);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9rem;
}
.faq-question:hover { background: var(--sky-light); color: var(--sky-dark); }
.faq-item.open .faq-question { background: var(--sky); color: var(--white); }
.faq-item.open .faq-question .arrow { color: var(--white); }
.faq-answer p { color: var(--grey); }

/* Carte Google Maps */
.map-embed-full iframe {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--divider) !important;
}

/* Boutons rapides contact page */
.contact-page > .container > div > .btn-dark {
  background: var(--charcoal);
}

/* ══════════════════════════════════════════
   10. CTA BANNER (équipe + global)
══════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 60%, #5BA3E0 100%);
  border-radius: var(--r-lg);
}
.cta-banner::before { display: none !important; }

.cta-banner h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}
.cta-banner p { color: rgba(255,255,255,0.75); }

.cta-actions .btn-primary {
  background: var(--white);
  color: var(--sky-dark);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.cta-actions .btn-primary:hover {
  background: var(--ivory);
  transform: translateY(-2px);
}
.cta-actions .btn-outline {
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.90);
}
.cta-actions .btn-outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.12);
  color: var(--white);
}

/* ══════════════════════════════════════════
   11. MENTIONS LÉGALES
══════════════════════════════════════════ */
.legal-page { background: var(--white); }
.legal-section h2 { color: var(--charcoal); font-family: 'Lato', sans-serif; font-weight: 800; }
.legal-section h3 { color: var(--sky-dark); font-family: 'Lato', sans-serif; font-weight: 700; }
.legal-section p,
.legal-section li { color: var(--grey); line-height: 1.8; }
.legal-section a { color: var(--sky); text-decoration: underline; }
.legal-section a:hover { color: var(--sky-dark); }

/* ══════════════════════════════════════════
   12. FOOTER — toutes pages
══════════════════════════════════════════ */
footer {
  background: var(--charcoal) !important;
  border-top: none !important;
}

.footer-top { border-bottom: 1px solid rgba(255,255,255,0.07); }

/* Logo footer — reset inline styles */
footer .footer-logo .logo-icon {
  width: 38px; height: 38px;
  font-size: 0.95rem;
  background: var(--sky) !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white) !important;
}
footer .footer-logo .logo-text {
  font-family: 'Lato', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  margin-left: 0.65rem !important;
}
footer .footer-logo .logo-text em {
  font-style: normal !important;
  color: var(--sky-mid) !important;
}

.footer-brand p { color: rgba(255,255,255,0.42); font-size: 0.86rem; line-height: 1.75; }

.footer-socials a {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--r-sm) !important;
  color: rgba(255,255,255,0.5) !important;
  transition: var(--ease);
}
.footer-socials a:hover {
  background: var(--sky) !important;
  border-color: var(--sky) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
}

.footer-section h4 {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 1.3rem;
}
.footer-section ul li a {
  color: rgba(255,255,255,0.52);
  font-size: 0.87rem;
  transition: color var(--ease);
}
.footer-section ul li a:hover { color: var(--sky-mid); }

/* Icônes footer contact — override les inline style="color:var(--or)" */
.footer-section ul li a i[style] { color: var(--sky-mid) !important; }

.footer-bottom {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.22);
  border-top: none !important;
}
.footer-bottom a { color: rgba(255,255,255,0.38); }
.footer-bottom a:hover { color: var(--sky-mid); }

/* ══════════════════════════════════════════
   13. COOKIE BANNER
══════════════════════════════════════════ */
.cookie-banner {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  color: var(--charcoal);
}
.cookie-banner a { color: var(--sky); }
.cookie-btn.cookie-accept {
  background: var(--sky);
  color: var(--white);
  border-color: var(--sky);
  border-radius: var(--r-sm);
}
.cookie-btn.cookie-accept:hover { background: var(--sky-dark); }
.cookie-btn.cookie-refuse {
  background: transparent;
  border: 1.5px solid var(--divider);
  color: var(--grey);
  border-radius: var(--r-sm);
}
.cookie-btn.cookie-refuse:hover { border-color: var(--charcoal); color: var(--charcoal); }

/* ══════════════════════════════════════════
   14. DESKTOP OVERRIDES (≥769px) — pages internes
══════════════════════════════════════════ */
@media (min-width: 769px) {

  body { background: var(--ivory); }

  /* ── Page hero ── */
  .page-hero {
    padding: 8rem 0 5rem;
    min-height: 340px;
    display: flex;
    align-items: center;
  }
  .page-hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin-bottom: 1rem;
  }
  .page-hero p { max-width: 600px; font-size: 1.05rem; }

  /* Breadcrumb sous le titre */
  .page-hero-content::after {
    content: '';
    display: block;
    width: 48px; height: 3px;
    background: var(--sky);
    margin-top: 1.5rem;
    border-radius: 2px;
  }

  /* ── Sections internes ── */
  .realisations-page { background: var(--ivory); padding: 4rem 0 5rem; }
  .equipe-page      { background: var(--ivory); padding: 4rem 0 5rem; }
  .contact-page     { background: var(--ivory); padding: 4rem 0 5rem; }
  .legal-page       { background: var(--white);  padding: 4rem 0 5rem; }

  /* ── Grille réalisations ── */
  .realisations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* ── Grille équipe ── */
  .team-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  /* ── Contact layout ── */
  .contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  .contact-info-block { padding: 2.5rem !important; }

  .contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
  .contact-sidebar .contact-info-block { padding: 1.8rem !important; }

  /* ── Boutons rapides contact ── */
  .contact-page > .container > div:first-child {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  /* ── CTA section équipe ── */
  .equipe-page .cta-banner {
    padding: 3rem 3rem;
    margin-top: 4rem;
  }
  .equipe-page .cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* ── Filters desktop ── */
  .filters-bar {
    gap: 0.6rem;
    margin-bottom: 2.5rem;
  }
  .filter-btn { padding: 0.6rem 1.4rem; font-size: 0.84rem; }

  /* ── Search bar ── */
  .search-row { margin-bottom: 2.5rem; }
  .search-bar { max-width: 480px; }

  /* ── Mentions légales ── */
  .legal-content { max-width: 820px; margin: 0 auto; }
  .legal-section {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--r-md);
    padding: 2.5rem 3rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
  }
  .legal-section h2 {
    font-size: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--sky-light);
    margin-bottom: 1.5rem;
  }

} /* fin @media desktop */

/* ══════════════════════════════════════════
   15. MOBILE (≤768px) — pages internes
══════════════════════════════════════════ */
@media (max-width: 768px) {

  body { background: var(--ivory); }

  .page-hero { padding: 5rem 1.5rem 3rem; min-height: 240px; }
  .page-hero h1 { font-size: 1.8rem; }

  .realisations-page,
  .equipe-page,
  .contact-page { padding: 2.5rem 0 3.5rem; }

  .filters-bar { gap: 0.4rem; margin-bottom: 1.5rem; }
  .filter-btn { padding: 0.5rem 1rem; font-size: 0.78rem; }

  .real-card { border-radius: var(--r-sm); }

  .contact-info-block { padding: 1.5rem !important; border-radius: var(--r-sm); }
  .contact-sidebar { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }

  .faq-question { font-size: 0.85rem; }

  footer { border-radius: 0; }

}

/* ══════════════════════════════════════════════════════════
   INDEX — VERSION MOBILE (≤768px)
   Applique la palette bleu ciel / ivoire sur toute la page
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero ── */
  .hero { background: var(--charcoal); }

  .hero-bg {
    opacity: 1;
    filter: brightness(0.35) saturate(0.6);
  }

  .hero-overlay {
    background: linear-gradient(
      160deg,
      rgba(37,99,168,0.82) 0%,
      rgba(30,42,56,0.68) 60%,
      rgba(20,30,48,0.75) 100%
    );
  }

  .hero-pattern { display: none; }

  .hero-gold-bar {
    background: linear-gradient(90deg, var(--sky), var(--sky-mid), var(--sky));
    height: 3px;
  }

  .hero-badge {
    background: rgba(59,130,196,0.18);
    border-color: rgba(191,219,247,0.45);
    color: var(--sky-mid);
  }
  .hero-badge .dot { background: var(--sky-mid); animation: none; }

  .hero h1 { color: var(--white); }
  .hero h1 em { color: var(--sky-mid); font-style: normal; }

  .hero-subtitle { color: rgba(255,255,255,0.68); }

  .hero-actions .btn-primary {
    background: var(--sky);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(59,130,196,0.40);
    border-radius: var(--r-sm);
  }
  .hero-actions .btn-outline {
    border-color: rgba(255,255,255,0.40);
    color: rgba(255,255,255,0.85);
    border-radius: var(--r-sm);
  }

  .hero-stat .stat-number { color: var(--white); }
  .hero-stat .stat-label  { color: rgba(255,255,255,0.45); }

  .scroll-indicator { color: rgba(255,255,255,0.35); }
  .scroll-mouse     { border-color: rgba(255,255,255,0.25); }
  .scroll-wheel     { background: var(--sky-mid); }

  /* ── Ticker ── */
  .ticker-bar {
    background: var(--ivory-dark);
    border-bottom: 1px solid var(--divider);
    border-top: none;
  }
  .ticker-item { color: var(--grey); }
  .ticker-item i { color: var(--sky); }
  .ticker-sep { color: var(--divider); opacity: 1; }

  /* ── Présentation ── */
  .presentation { background: var(--white); }
  .presentation .section-label { color: var(--sky); }
  .presentation .section-title { color: var(--charcoal); }
  .presentation .section-subtitle { color: var(--grey); }
  .presentation .gold-line { background: var(--sky); }

  .presentation-image .years-badge {
    background: var(--sky) !important;
    border: none;
    box-shadow: 0 6px 20px rgba(59,130,196,0.35);
  }
  .presentation-image .years-badge .years-num  { color: var(--white); }
  .presentation-image .years-badge .years-label { color: rgba(255,255,255,0.80); }

  .value-item {
    border: 1px solid var(--divider);
    background: var(--sky-light);
    border-radius: var(--r-sm);
    padding: 0.9rem 1rem;
  }
  .value-item .value-text h4 { color: var(--charcoal); }
  .value-item .value-text p  { color: var(--grey); }

  /* ── Services ── */
  .services { background: var(--sky-light); }
  .services::before { display: none; }
  .services .section-label { color: var(--sky); }
  .services .section-title { color: var(--charcoal); }

  .service-card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
  }
  .service-card::before {
    background: linear-gradient(90deg, var(--sky), var(--sky-dark));
    top: 0; bottom: auto;
    height: 3px;
  }
  .service-icon {
    background: var(--sky-light);
    border: 1px solid var(--sky-mid);
    border-radius: var(--r-sm);
  }
  .service-card h3 { color: var(--charcoal); }
  .service-card p  { color: var(--grey); }

  /* ── Réalisations preview ── */
  .realisations-preview { background: var(--ivory); }
  .realisations-preview .section-label { color: var(--sky) !important; }
  .realisations-preview .section-title { color: var(--charcoal) !important; }
  .realisations-preview .section-subtitle { color: var(--grey) !important; }
  .preview-overlay {
    background: linear-gradient(to top, rgba(30,42,56,0.80), transparent);
  }

  /* ── Pourquoi nous ── */
  .pourquoi { background: var(--white); }
  .pourquoi .section-label { color: var(--sky); }
  .pourquoi .section-title { color: var(--charcoal); }

  .avantage-item {
    background: var(--ivory);
    border: 1px solid var(--divider);
    border-radius: var(--r-sm);
  }
  .avantage-num { color: var(--sky); font-weight: 800; }
  .avantage-text h4 { color: var(--charcoal); }
  .avantage-text p  { color: var(--grey); }

  .pourquoi-badge {
    background: var(--white);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-md);
  }
  .pourquoi-badge .badge-text .num { color: var(--sky); font-weight: 800; }
  .pourquoi-badge .badge-text .label { color: var(--grey); }

  /* ── Témoignages ── */
  .temoignages { background: var(--sky-light); }
  .temoignages .section-label { color: var(--sky); }
  .temoignages .section-title { color: var(--charcoal); }

  .temoignage-card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
  }
  .temoignage-card::before { display: none; }
  .stars   { color: var(--sky); }
  .comment { color: var(--grey); }
  .client-name { color: var(--charcoal); font-weight: 700; }
  .client-avatar {
    background: var(--sky);
    color: var(--white);
    border-radius: var(--r-sm);
  }

  /* ── Processus ── */
  .processus { background: var(--ivory); }
  .processus .section-label   { color: var(--sky)      !important; }
  .processus .section-title   { color: var(--charcoal) !important; }
  .processus .section-subtitle{ color: var(--grey)     !important; }
  .processus .gold-line { background: var(--sky); }

  .process-step {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
  }
  .step-num {
    background: var(--sky-light);
    border: 2px solid var(--sky-mid);
    border-radius: 50%;
    color: var(--sky-dark);
    font-weight: 800;
  }
  .process-step h4 { color: var(--charcoal); }
  .process-step p  { color: var(--grey); }

  /* ── CTA Banner ── */
  .cta-banner {
    background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 70%, #5BA3E0 100%);
  }
  .cta-banner::before { display: none !important; }
  .cta-banner h2 { color: var(--white); font-family: 'Lato', sans-serif; font-weight: 800; }
  .cta-banner p  { color: rgba(255,255,255,0.75); }

  .cta-actions .btn-primary {
    background: var(--white) !important;
    color: var(--sky-dark) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .cta-actions .btn-outline {
    border-color: rgba(255,255,255,0.45) !important;
    color: rgba(255,255,255,0.90) !important;
  }

} /* fin @media ≤768px */

/* ══════════════════════════════════════════════════════════
   CONTAINER — plus large sur desktop pour réduire le vide
══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .container {
    max-width: 1380px !important;
    padding: 0 3rem !important;
  }
  section { padding: 5rem 0; }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1560px !important;
    padding: 0 4rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RÉALISATIONS — bouton FILTRE popup + barre recherche dessous
══════════════════════════════════════════════════════════ */

/* Cacher les filtres bar originaux sur toutes tailles */
.realisations-page .filters-bar {
  display: none !important;
}

/* Wrapper du bouton + search */
.filter-trigger-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Bouton "Filtres" */
.filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sky);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  padding: 0.75rem 2rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59,130,196,0.30);
  transition: var(--ease);
}
.filter-trigger-btn:hover {
  background: var(--sky-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59,130,196,0.38);
}
.filter-trigger-btn .filter-icon { font-size: 0.9rem; }
.filter-trigger-btn .filter-count {
  background: rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Popup overlay */
.filter-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,42,56,0.45);
  backdrop-filter: blur(4px);
  z-index: 900;
  animation: fadeOverlay 0.2s ease;
}
.filter-popup-overlay.open { display: flex; align-items: center; justify-content: center; }

@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Popup card */
.filter-popup {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 1.8rem;
  width: min(440px, 90vw);
  box-shadow: 0 24px 64px rgba(30,42,56,0.22);
  transform: translateY(10px);
  animation: popupIn 0.25s ease forwards;
}
@keyframes popupIn {
  to { transform: translateY(0); }
}

.filter-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--divider);
}
.filter-popup-header h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.filter-popup-close {
  background: var(--ivory);
  border: 1px solid var(--divider);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--grey);
  transition: var(--ease);
  line-height: 1;
}
.filter-popup-close:hover { background: var(--sky); color: var(--white); border-color: var(--sky); }

.filter-popup-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

/* Boutons filtre dans le popup */
.filter-popup-body .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.3rem;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--divider);
  background: var(--ivory);
  color: var(--grey);
  transition: var(--ease);
}
.filter-popup-body .filter-btn:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-light);
}
.filter-popup-body .filter-btn.active {
  background: var(--sky);
  color: var(--white);
  border-color: var(--sky);
  box-shadow: 0 3px 10px rgba(59,130,196,0.25);
}

.filter-popup-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
}
.filter-popup-reset {
  background: transparent;
  border: 1.5px solid var(--divider);
  color: var(--grey);
  border-radius: var(--r-sm);
  padding: 0.6rem 1.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
}
.filter-popup-reset:hover { border-color: var(--charcoal); color: var(--charcoal); }
.filter-popup-apply {
  background: var(--sky);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  padding: 0.6rem 1.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(59,130,196,0.28);
  transition: var(--ease);
}
.filter-popup-apply:hover { background: var(--sky-dark); transform: translateY(-1px); }

/* Barre de recherche — reste visible sous le bouton */
.search-row {
  width: 100%;
  display: flex;
  justify-content: center;
}
.search-bar {
  width: 100%;
  max-width: 540px;
}

/* ══════════════════════════════════════════════════════════
   CONTACT — sections empilées verticalement
══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  .contact-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    max-width: 860px;
    margin: 0 auto;
  }

  .contact-info-block {
    width: 100% !important;
    padding: 2.5rem 3rem !important;
  }

  /* Sidebar aussi en colonne pleine largeur */
  .contact-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
    width: 100%;
  }
  .contact-sidebar .contact-info-block {
    padding: 2rem 3rem !important;
  }

  /* Formulaire — 2 colonnes pour les champs */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }

  /* Carte maps pleine largeur */
  .map-embed-full iframe { height: 320px !important; }

  /* FAQ : colonne simple */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Boutons rapides */
  .contact-page > .container > div:first-child {
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
  }

  /* Horaires en ligne */
  .horaires-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .horaire-row {
    flex-direction: column;
    border: 1px solid var(--divider);
    border-radius: var(--r-sm);
    padding: 1rem;
    background: var(--ivory);
    border-bottom: 1px solid var(--divider);
  }
  .horaire-row .day   { margin-bottom: 0.3rem; }
  .horaire-row .hours { font-size: 1.05rem; }

  /* Coordonnées en ligne */
  .contact-rapide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

} /* fin desktop contact */

/* ══════════════════════════════════════════════════════════
   CORRECTIONS MOBILE GLOBALES
══════════════════════════════════════════════════════════ */

/* overflow-x sur body UNIQUEMENT (pas html, sinon iOS bloque le scroll vertical) */
body { overflow-x: hidden; }

@media (max-width: 768px) {

  /* Scroll indicator : masqué sur mobile */
  .scroll-indicator { display: none !important; }

  /* Ticker : isolé pour ne pas déborder */
  .ticker-bar { overflow: hidden; max-width: 100vw; }

  /* Container : ne jamais dépasser l'écran */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hero content dans la largeur */
  .hero-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Hero stats : retour à la ligne */
  .hero-stats {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  /* Hero actions : colonne */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .hero-actions .btn {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Images dans la largeur */
  img { max-width: 100% !important; height: auto; }

  /* Preview grid 1 colonne */
  .preview-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .preview-item:first-child { grid-row: auto !important; }
  .preview-item { height: 220px; }

  /* Grilles 1 colonne */
  .temoignages-grid { grid-template-columns: 1fr !important; }
  .processus-grid   { grid-template-columns: 1fr !important; }
  .cta-inner        { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .contact-layout   { grid-template-columns: 1fr !important; flex-direction: column !important; }
  .form-row         { grid-template-columns: 1fr !important; }

}