/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --c-dark-blue:    #016d93;
  --c-medium-blue:  #0bc1f9;
  --c-light-blue:   #73d0fb;
  --c-boring-gray:  #78a4bd;
  --c-light-gray:   #ced4e0;
  --c-gray:         #474747;
  --c-black:        #000000;
  --c-white:        #ffffff;

  --font-serif:     'Cormorant Garamond', Georgia, serif;
  --font-sans:      'Raleway', sans-serif;
  --font-body:      'Proxima Nova', 'Raleway', sans-serif;

  --shadow-ladade:  0 4px 24.4px rgba(0, 0, 0, 0.15);
  --shadow-navbar:  0 4px 47px rgba(17, 37, 61, 0.10);

  --navbar-h:       90px;
  --max-w:          1116px;
  --px-page:        25px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
:html  { scroll-behavior: smooth; }
:body  {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--c-gray);
  background: var(--c-white);
  padding-top: var(--navbar-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
:img  { display: block; max-width: 100%; }
:a    { text-decoration: none; color: inherit; }
:ul   { padding-left: 1.5rem; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.h1-ladade {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 70px;
  line-height: 1.16;
  color: var(--c-dark-blue);
  text-align: center;
}
.h2-ladade {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.16;
  color: var(--c-dark-blue);
  text-align: center;
}
.h3-ladade {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.16;
}
.h4-ladade {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.16;
  color: var(--c-gray);
}
.text-standard {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-gray);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container-ladade {
  width: 100%;
  max-width: calc(var(--max-w) + var(--px-page) * 2);
  margin: 0 auto;
  padding: 0 var(--px-page);
}
.section-block {
  padding: 40px var(--px-page);
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-card {
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: var(--shadow-ladade);
  padding: 40px 25px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-dark-blue,
.btn-light-blue,
.btn-rdv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}
.btn-dark-blue        { background: var(--c-dark-blue);   color: var(--c-white); }
.btn-dark-blue:hover  { background: var(--c-medium-blue); color: var(--c-white); }
.btn-light-blue       { background: var(--c-medium-blue); color: var(--c-white); }
.btn-light-blue:hover { background: var(--c-dark-blue);   color: var(--c-white); }
.btn-rdv              { background: var(--c-medium-blue); color: var(--c-white); width: 166px; }
.btn-rdv:hover        { background: var(--c-dark-blue);   color: var(--c-white); }

/* ============================================================
   SECTION ICON (patte)
   ============================================================ */
.section-icon {
  width: 44px;
  height: 38px;
  display: block;
}

/* ============================================================
   SEPARATOR
   ============================================================ */
.separator-ladade {
  width: 100%;
  max-width: 926px;
  border: none;
  border-top: 1.5px solid var(--c-gray);
  margin: 5px auto;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-ladade {
  height: 200px;
  background-image: url('Images/nav-bg.svg');
  background-size: auto auto;
  background-repeat: no-repeat;
  background-position: left top;
  filter: drop-shadow(0 4px 47.4px rgba(17, 37, 61, 0.10));
  z-index: 1000;
}

/* Wrapper du SVG — overflow:hidden isolé ici pour ne pas casser le fixed */
.navbar-bg-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.navbar-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: auto;
  z-index: 0;
  pointer-events: none;
}

/* Contenu au-dessus du SVG */
.navbar-ladade .container-ladade {
  position: relative;
  z-index: 1;
}
.navbar-ladade .container-ladade {
  max-width: 1308px;
  height: 100%;
  align-items: flex-start;
}
.navbar-ladade .navbar-collapse {
  padding-top: 20px;
}
.navbar-logo {
  height: 160px;
  width: auto;
}
/* Nav desktop — décalée de 20px du haut */
.navbar-nav-desktop {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--c-dark-blue);
  white-space: nowrap;
  padding: 8px 4px;
  transition: opacity 0.2s;
}
.navbar-nav-desktop .nav-link:hover,
.navbar-nav-desktop .nav-link.active { opacity: 0.70; }

/* Dropdown mobile — positionné en absolute sous la navbar */
.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% - 120px);
  right: var(--px-page);
  min-width: 240px;
  background: var(--c-white);
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 24.4px 0 rgba(0, 0, 0, 0.15);
  z-index: 1100;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.is-open { display: flex; }

.mobile-menu-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-dark-blue);
  padding: 10px 0;
  border-bottom: 1px solid rgba(1, 109, 147, 0.08);
  transition: opacity 0.2s;
  text-decoration: none;
}
.mobile-menu-link:last-child { border-bottom: none; }
.mobile-menu-link:hover,
.mobile-menu-link.active { opacity: 0.70; }

/* ============================================================
   SECTION HERO
   ============================================================ */
.hero-section {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: min(640px, 90%);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(60px);
  border-radius: 16px;
  box-shadow: 0 4px 24.4px rgba(0, 0, 0, 0.15);
  padding: 56px 52px;
  text-align: center;
}
.hero-scroll-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 38px;
  height: 24px;
  padding: 0;
}
.hero-scroll-btn img { width: 100%; }

/* ============================================================
   BLOCK 1 — Bienvenue
   ============================================================ */
.block-bienvenue .photo-bienvenue {
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
}
.block-bienvenue .photo-bienvenue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   BLOCK 2 — Philosophie (bg light blue)
   ============================================================ */
.bg-light-blue { background-color: var(--c-light-blue); }
.bg-dark-blue  { background-color: var(--c-dark-blue); }

.philosophie-photo {
  width: 330px;
  height: 330px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

/* ============================================================
   BLOCK 3 — Équipe
   ============================================================ */
.team-photo {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
}
.team-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.16;
  color: var(--c-gray);
  text-align: center;
}

/* ============================================================
   BLOCK 4 — Cabinet & BLOCK 5 — Services (photos)
   ============================================================ */
.photo-rounded {
  border-radius: 12px;
  object-fit: cover;
  width: 100%;
}
.photo-fixed-h {
  height: 342px;
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
}

/* ============================================================
   BLOCK 6 — Rendez-vous
   ============================================================ */
.rdv-photo {
  width: 261px;
  height: 261px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto;
}
.whatsapp-card {
  background: var(--c-white);
  border: 1.5px solid rgba(120,164,189,0.3);
  border-radius: 12px;
  padding: 15px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.whatsapp-qr {
  width: 133px;
  height: 133px;
  border-radius: 4px;
  object-fit: cover;
}
.whatsapp-info { width: 229px; }
.whatsapp-info .wapp-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-black);
}
.whatsapp-info .wapp-url,
.whatsapp-info .wapp-type {
  font-size: 12px;
  color: var(--c-boring-gray);
}
.whatsapp-info .wapp-scan {
  font-size: 12px;
  color: var(--c-gray);
  margin-top: 20px;
}

/* Google map */
.map-container {
  border: 1.5px solid rgba(120,164,189,0.29);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: 478px;
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   BLOCK 7 — Liens utiles
   ============================================================ */
.liens-title-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
}
.liens-photo-round {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   GALERIE / CAROUSEL
   ============================================================ */
.gallery-section { padding: 40px var(--px-page); }

.gallery-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
.gallery-slide {
  height: 661px;
  border-radius: 12px;
  overflow: hidden;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Flèches custom */
.btn-carousel {
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 6px;
  background: var(--c-dark-blue);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.btn-carousel:hover { background: var(--c-medium-blue); }
.btn-carousel img   { width: 24px; height: 24px; display: block; }

@media (max-width: 767px) {
  .gallery-slide { height: 260px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-ladade {
  background: var(--c-dark-blue);
  padding: 20px var(--px-page);
}
.footer-logo img {
  height: 100px;
  width: auto;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-white);
}
.footer-copy a {
  color: var(--c-light-blue);
  transition: opacity 0.2s;
}
.footer-copy a:hover { opacity: 0.8; }

/* ============================================================
   BUTTONS GRID (liens, articles)
   ============================================================ */
.btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.btn-grid .btn-dark-blue,
.btn-grid .btn-light-blue {
  flex: 1 0 0;
  min-width: 290px;
  max-width: 546px;
}

/* ============================================================
   CONSEILS PAGE — articles grid
   ============================================================ */
.articles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.articles-grid .btn-dark-blue {
  flex: 1 0 0;
  min-width: 360px;
  max-width: 546px;
}

/* ============================================================
   RESPONSIVE — TABLET (768px – 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  :root { --navbar-h: 76px; }

  .h1-ladade { font-size: 52px; }
  .h2-ladade { font-size: 42px; }
  .h3-ladade { font-size: 32px; }
  .hero-section { height: 500px; }
  .hero-card { padding: 40px 32px; }
  .philosophie-photo { width: 260px; height: 260px; }
  .navbar-ladade { ... }
  .navbar-ladade .navbar-toggler { ... }
  .navbar-ladade .navbar-toggler-icon { ... }
  .btn-rdv { width: auto; }
  .navbar-logo { height: 64px; }
  .navbar-right { margin-top: 25px; align-items: center!important;}
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root { --navbar-h: 64px; }
  :body { padding-top: var(--navbar-h); }

  .h1-ladade { font-size: 38px; }
  .h2-ladade { font-size: 32px; }
  .h3-ladade { font-size: 26px; }
  .h4-ladade { font-size: 24px; }

  .hero-section { height: 420px; }
  .hero-card { padding: 28px 20px; }

  .philosophie-photo { width: 200px; height: 200px; }
  .team-photo         { width: 160px; height: 160px; }
  .rdv-photo          { width: 200px; height: 200px; }

  .photo-fixed-h { height: 220px; }
  .gallery-slide  { height: 260px; }

  .articles-grid .btn-dark-blue,
  .btn-grid .btn-dark-blue,
  .btn-grid .btn-light-blue {
    min-width: 100%;
    max-width: 100%;
  }

  .footer-ladade .container-ladade {
    flex-direction: column;
    align-items: center;
  }
  .footer-copy { text-align: center; font-size: 15px; }

  .whatsapp-card { flex-direction: column; align-items: center; text-align: center; }
  .whatsapp-info { width: 100%; }
}