/* =============================================
   Mobile overrides (phones) — Lua d'Enigmas
   Apply with: <link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)">
   ============================================= */

/* ----- Global header & spacing ----- */
@media (max-width: 768px) {
  :root { --header-height-mobile: 72px; --safe-top: 0px; --safe-bottom: 0px; }
  header {
  height: var(--header-height-mobile);
  padding: calc(var(--safe-top) + 6px) 14px 6px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
  body { padding-top: calc(var(--header-height-mobile) + var(--safe-top)); }
  header.scrolled { height: var(--header-height-mobile); } /* no shrink jump on mobile */

  .logo-container { width: 56px; height: 56px; background-position: center left; }
  /* Restore left-aligned header on mobile and vertically center logo/title */
  .header-content { position: static; justify-content: flex-start; display: flex; align-items: center; }
  .site-title { font-size: clamp(1.2rem, 5.5vw, 1.8rem); margin-left: 8px; position: static; transform: none; text-align: left; line-height: 1; display: inline-flex; align-items: center; }
  .menu-toggle { align-self: center; }

  .menu-toggle { width: 28px; height: 20px; }
  .slide-menu {
    top: calc(var(--header-height-mobile) + var(--safe-top));
    height: calc(100vh - (var(--header-height-mobile) + var(--safe-top)));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;      /* let children control vertical placement */
    align-items: center;
    text-align: center;
    padding: 24px 16px calc(24px + var(--safe-bottom) + 16px);
    box-sizing: border-box;
    overflow-y: auto;
  }
  .slide-menu ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: auto 0;                   /* center list vertically in menu */
  }
  .slide-menu ul li { margin: 18px 0; }
  .slide-menu ul li a { font-size: 1.6rem; }
  .language-switcher {
    position: static;                 /* participate in flex flow */
    margin-top: auto;                 /* push to bottom inside flex */
    margin-bottom: calc(16px + var(--safe-bottom));
    transform: none;
    left: auto; right: auto;
    z-index: 1002;
  }
  .language-switcher select { font-size: 0.95rem; padding: 6px 8px; }
}

/* ----- Hero video (header banner) ----- */
@media (max-width: 768px) {
  /* Default, easily overridable with custom property or helper class */
  :root { --hero-mobile-h: 43vh; --hero-mobile-h-svh: 43svh; }

  .hero-video { height: var(--hero-mobile-h); background-color: transparent !important; line-height: 0; margin: 0; border: 0; }
  /* tiny overlap to cancel rounding gaps between stacked videos */
  .hero-video + .hero-video { margin-top: -2px; }
  .video-link { display: block; height: 100%; }
  .hero-content h1 { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1.1; }
  /* Ensure video fills and avoid inline-gaps */
  .hero-video video { display: block; object-position: center center; transform: none; }

  /* Helper classes to adjust height quickly on mobile */
  .hero-h-32 { --hero-mobile-h: 32vh; --hero-mobile-h-svh: 32svh; }
  .hero-h-36 { --hero-mobile-h: 36vh; --hero-mobile-h-svh: 36svh; }
  .hero-h-38 { --hero-mobile-h: 38vh; --hero-mobile-h-svh: 38svh; }
  .hero-h-40 { --hero-mobile-h: 40vh; --hero-mobile-h-svh: 40svh; }
  .hero-h-43 { --hero-mobile-h: 43vh; --hero-mobile-h-svh: 43svh; }
  .hero-h-45 { --hero-mobile-h: 45vh; --hero-mobile-h-svh: 45svh; }
}

/* Use small/large/dynamic viewport units when supported */
@supports (height: 1svh) {
  @media (max-width: 768px) {
    .slide-menu { height: calc(100svh - (var(--header-height-mobile) + var(--safe-top))); }
    /* Apply svh for split images */
    .domaine-section1-image, .domaine-section2-image, .domaine-section3-image, .domaine-section4-image,
    .cabinet-section1-image, .cabinet-section2-image, .cabinet-section3-image { height: var(--split-image-h-svh); }
    .cabinet-section2-image { height: var(--cab2-h-svh, var(--split-image-h-svh)); }
  }
}
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .slide-menu { height: calc(100dvh - (var(--header-height-mobile) + var(--safe-top))); }
  }
}
@supports (height: 1svh) {
  @media (max-width: 768px) {
    .hero-video { height: var(--hero-mobile-h-svh); }
  }
}

/* ----- Index / Age Gate title (mobile) ----- */
@media (max-width: 768px) {
  body.age-gate, body.age-blocked { height: 100svh; overflow: hidden; overscroll-behavior: none; }
  body.age-gate .video-title,
  body.age-blocked .video-title,
  .video-title {
    top: 16px;
    font-size: clamp(3.2rem, 14vw, 5.6rem);
    letter-spacing: 0.14rem;
    left: 0; right: 0;
    transform: none;
    width: 100%;
    text-align: center;
  }
}

/* ====== Header mobile: pas de débordement en portrait ====== */
@media (max-width: 768px) {
  /* verrouille la largeur, évite tout scroll horizontal */
  html, body { overflow-x: hidden; }

  header {
    position: fixed;       /* garde le header stable */
    left: 0; right: 0;     /* colle aux bords sans 100vw */
    width: 100%;
    max-width: 100%;
    overflow-x: clip;      /* coupe toute dérive sur iOS */
  }

  /* même hauteur en scroll pour éviter un "saut" qui élargit */
  header, header.scrolled { height: var(--header-height-mobile); }

  /* logo + titre compactés */
  .logo-container { width: 56px; height: 56px; }
  .site-title,
  header.scrolled .site-title {
    white-space: normal;               /* autorise le retour à la ligne */
    font-size: clamp(1.4rem, 6.5vw, 2.2rem);
    line-height: 1.05;
  }

  /* évite qu’un enfant du header dépasse */
  .header-content { max-width: 100%; }

  /* menu coulissant calé sous le header */
  .slide-menu {
    top: calc(var(--header-height-mobile) + var(--safe-top));
    height: calc(100svh - (var(--header-height-mobile) + var(--safe-top)));
  }
}



/* ----- Home: team section ----- */
@media (max-width: 768px) {
  .notre-equipe { padding: 1.5rem 0; }
  .membre-equipe { flex-direction: column; gap: 1rem; padding: 1.25rem; align-items: center; }
  /* Force photo above description, even for variants with row-reverse on desktop */
  .membre-equipe.sacha,
  .membre-equipe.david { flex-direction: column !important; }
  .membre-equipe .photo-membre { width: 140px; height: 140px; }
  .membre-equipe .description-membre { max-width: 100%; }
  /* Center texts on mobile to avoid side-concentration */
  .membre-equipe .description-membre,
  .membre-equipe .description-membre h3,
  .membre-equipe .fonction-membre { text-align: center; }
  /* But paragraphs for Sacha & David should be justified */
  .membre-equipe.sacha .description-membre p,
  .membre-equipe.david .description-membre p,
  .bio-membre { font-size: 16px; text-align: justify; text-justify: inter-word; hyphens: auto; }
  /* Center social icons row fully */
  .contacts-membre { justify-content: center; gap: 12px; width: 100%; }
  .membre-equipe.david .contacts-membre,
  .membre-equipe.sacha .contacts-membre { justify-content: center !important; }
  .contact-icon, .social-icon { width: 28px; height: 28px; }

  /* David: name centered, function left (override desktop right-align) */
  .membre-equipe.david .description-membre h3 { text-align: center; }
  .membre-equipe.david .description-membre .fonction-membre { text-align: left !important; width: 100%; }
}

/* ----- Domain & Consulting split sections ----- */
@media (max-width: 768px) {
  .domaine-section1, .domaine-section2, .domaine-section3, .domaine-section4,
  .cabinet-section1, .cabinet-section2, .cabinet-section3 {
    height: auto;
    min-height: 60vh;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }

  /* Vidéos d'arrière-plan : pas cliquables sur mobile */
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .hero-video video,
  .bg-video video,
  .split-section-domaine video,
  .split-section-conseil video {
    pointer-events: none;       /* empêche tout tap -> plus de contrôles natifs */
    user-select: none;
    -webkit-touch-callout: none;
  }
}


@media (max-width: 768px) {
  /* Default split image heights (Domaine / Conseil sections) */
  :root { --split-image-h: 40vh; --split-image-h-svh: 40svh; }
  /* image blocks become top banners */
  .domaine-section1-image, .domaine-section2-image, .domaine-section3-image, .domaine-section4-image,
  .cabinet-section1-image, .cabinet-section2-image, .cabinet-section3-image {
    position: relative;
    width: 100%;
    height: var(--split-image-h);
    left: auto; right: auto; top: auto; bottom: auto;
  }

  /* Specific adjustable height for Conseil 2 (cabinet-section2-image) */
  .cabinet-section2-image { height: var(--cab2-h, var(--split-image-h)); }

    /* Adjust focal point on mobile as requested */
    /* Fine-tuned focal points (one more notch) */
    .domaine-section2-image { background-position: center 30% !important; }
    .domaine-section3-image { background-position: center 40% !important; }
    .cabinet-section2-image { background-position: center 10% !important; }

  /* text blocks full width */
  .domaine-section1-text, .domaine-section2-text, .domaine-section3-text, .domaine-section4-text,
  .cabinet-section1-text, .cabinet-section2-text, .cabinet-section3-text {
    width: 100%;
    margin: 0;
    padding: 20px;
  }

  .split-section-domaine { height: auto; flex-direction: column; width: 100%; margin-left: 0; box-sizing: border-box; }
  .boutique, .contact { width: 100%; height: 36vh; }
  .split-content-domaine h2 { font-size: 2rem; }
}

/* Home CTA band full-bleed fix on mobile */
@media (max-width: 768px) {
  .contact-section { width: 100%; margin-left: 0; }
}

/* Safe-area variables for iOS notches */
@supports (top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    :root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
  }
}

/* ----- "Nos vins" carousel ----- */
@media (max-width: 768px) {
  .carousel { height: 320px; }
  /* tighter, responsive cards and harmonious fit */
  .carousel-track { gap: 8px; padding: 0 8px; }
  .carousel-item { width: clamp(140px, 42vw, 220px); margin: 0 6px; max-height: 280px; }
  .carousel-item img { max-height: 280px; }
  .carousel-prev, .carousel-next { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* ----- Wine pages: layout & timeline ----- */
@media (max-width: 768px) {
  .wine-title-section .wine-title { font-size: 2rem; }

  .wine-details-container { flex-direction: column; gap: 1rem; }
  .wine-image img { height: 360px; }
  .info-table { width: 100%; table-layout: fixed; }
  .info-table td { vertical-align: top; padding: 6px 8px; }
  /* Center icon with the description (second row) by nudging it down */
  .pictogram-cell { width: 64px; vertical-align: middle; }
  .pictogram-image { display: block; margin: 0 auto; max-width: 48px; height: auto; transform: translateY(var(--pictogram-shift, 10px)); }
  .title-cell h3 { font-size: 1.2rem; margin: 0; }
  .paragraph-cell p { margin: 0.25rem 0; }

  .timeline-container { padding: 10px 0; }
  .timeline { gap: 12px; padding: 0 12px; }
  .timeline-year { width: 42px; height: 42px; }

  .vintage-details {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right";
    row-gap: 20px;
    padding: 0 16px;
    margin: 10px 0 24px 0;
    width: 100%;
    max-width: 100%;
  }
  .vintage-attributes {
    grid-template-columns: 1fr 1fr; /* two per row on mobile */
    column-gap: 16px;
    row-gap: 22px;
  }
  .vintage-attribute img { width: 36px; height: 36px; }
  .vintage-status { font-size: 1rem; margin-bottom: 14px; }
  .spotify-widget-container { max-width: 100%; height: 80px; }
  .wine-description { font-size: 1rem; }

  /* Reduce width of the "Où trouver ce vin ?" button on wine pages */
  .find-wine-container { text-align: center; }
  .find-wine-btn { width: auto; max-width: 320px; display: inline-block; padding: 12px 20px; }
}

/* ----- Contact page grid ----- */
@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "cordoner"
      "map"
      "bouton"
      "social";
    padding: 14px;
    gap: 14px;
  }
  .map iframe { width: 100%; height: 300px; }
  /* Center the CTA container on mobile and remove absolute positioning */
  .bouton .middle-button { position: static; transform: none; margin: 6px 0 0; text-align: center; }
  /* Make "Envoyer un Email" smaller and centered on contact page */
  .contact-container .contact-email-btn { width: auto; max-width: 320px; display: inline-block; padding: 12px 20px; }
  /* Keep other CTAs in contact grid responsive but not full viewport */
  .contact-container .find-wine-btn { width: auto; max-width: 320px; display: inline-block; padding: 12px 20px; }
}

/* ----- Où trouver nos vins ----- */
@media (max-width: 768px) {
  .wine-lieu-container { flex-direction: column; }
  .wine-lieu-container > div { flex: 1 1 100%; }
}

/* ----- Footer ----- */
@media (max-width: 768px) {
  .footer-content { justify-content: center; text-align: center; }
  .footer-content .footer-section:last-child { text-align: center; }
}

/* Reduced motion: cut animations/transitions on request */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}