/* =============================================================
   KMG AGENCEMENT — fold.css
   Responsive complémentaire : foldables + téléphones récents
   Chargé sur index.html ET header.php (toutes les pages)
   Principe : on AJOUTE ce qui manque, on ne réécrit pas
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. ULTRA-ÉTROIT ≤ 360px
   Cible : Z Fold 4 replié (344px), Z Flip 4 déplié (360px)
   Les règles existantes descendent à 340px pour le footer
   uniquement — on complète header, hero, formulaires, layout
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 360px) {

  /* Header */
  header {
    padding: 6px 8px !important;
    min-height: 52px !important;
  }
  header .logo img,
  .logo img {
    height: 34px !important;
    max-width: 90px !important;
  }
  #telephone-defilant {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    letter-spacing: 0 !important;
  }

  /* Burger KMG (index, services, devis) */
  .kmg-burger {
    width: 34px !important;
    height: 34px !important;
    top: 9px !important;
    left: 9px !important;
    font-size: 0.95rem !important;
  }

  /* Hero index.html */
  .hero h1 {
    font-size: clamp(1.05rem, 7vw, 1.5rem) !important;
    letter-spacing: 0 !important;
  }
  .hero p {
    font-size: clamp(0.78rem, 4vw, 0.95rem) !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* Hero pages services & devis (.kmg-hero) */
  .kmg-headline {
    font-size: clamp(0.95rem, 6vw, 1.3rem) !important;
    letter-spacing: 0 !important;
    margin: 8px 0 0 !important;
  }
  .kmg-subline {
    font-size: clamp(0.72rem, 3.5vw, 0.88rem) !important;
    padding: 0 8px !important;
    margin: 6px 0 0 !important;
  }
  .kmg-logo-hero img {
    width: 110px !important;
  }
  .kmg-btn.kmg-btn-hero {
    padding: 10px 24px !important;
    font-size: 0.88rem !important;
    margin-top: 14px !important;
  }

  /* Formulaire devis */
  .devis-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .devis-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .devis-panel-body {
    padding: 12px 10px 16px !important;
  }
  .devis-step-body {
    padding: 12px 10px !important;
  }
  .devis-panel summary {
    padding: 18px 12px !important;
    font-size: 0.95rem !important;
  }
  .devis-section > .kmg-container {
    padding: 0 10px !important;
  }

  /* Section services (index) — cards pleine largeur */
  #services .service {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Section avis slider */
  .slider-wrap .item {
    min-width: 85vw !important;
  }

  /* Boutons généraux */
  .kmg-btn {
    padding: 12px 24px !important;
    font-size: 1rem !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   2. Z FLIP 4 ÉCRAN COUVERTURE (≤ 280px)
   Très réduit — navigation minimale sur cet écran
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 280px) {

  header {
    padding: 4px 6px !important;
  }
  header .logo img,
  .logo img {
    height: 26px !important;
  }
  .kmg-burger {
    width: 28px !important;
    height: 28px !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 0.8rem !important;
  }
  .hero h1 {
    font-size: 0.95rem !important;
  }
  .hero p {
    font-size: 0.72rem !important;
  }
  .kmg-headline {
    font-size: 0.88rem !important;
  }
  .kmg-subline {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   3. TÉLÉPHONES EN PAYSAGE — hauteur ≤ 500px
   Cible : tous les téléphones modernes retournés en landscape
   iPhone 15 Pro (852×393), Galaxy S24 (915×412),
   Z Fold 4 replié landscape (882×344)
   Problème existant : la règle styles.css met min-height:100vh
   en landscape sous 1024px — correct pour tablettes mais
   crée un héro de seulement 393px de haut sur téléphone :
   le contenu peut déborder ou paraître écrasé.
───────────────────────────────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 500px) {

  /* Hero index.html : limiter la hauteur, ne pas forcer 100vh */
  .hero {
    min-height: 100dvh !important;   /* dvh : tient compte de la barre d'adresse */
    padding-top: 56px !important;
    padding-bottom: 24px !important;
  }
  .hero h1 {
    font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
    margin: 0 !important;
  }
  .hero p {
    font-size: clamp(0.75rem, 2.5vw, 0.92rem) !important;
    margin: 4px 0 0 !important;
    max-width: 65ch !important;
  }
  #cookie-popup {
    bottom: 10px !important;
  }

  /* Hero pages services */
  .kmg-hero.full {
    min-height: 100dvh !important;
    height: auto !important;
  }
  .kmg-hero__inner {
    min-height: 100dvh !important;
    padding: 52px 24px 20px !important;
    gap: 6px !important;
  }
  .kmg-logo-hero {
    position: static !important;
    margin: 0 auto 4px !important;
  }
  .kmg-logo-hero img {
    width: 90px !important;
  }
  .kmg-headline {
    font-size: clamp(0.95rem, 3.5vw, 1.3rem) !important;
    margin: 4px 0 0 !important;
  }
  .kmg-subline {
    font-size: clamp(0.72rem, 2vw, 0.88rem) !important;
    margin: 4px 0 0 !important;
    padding: 0 8px !important;
  }
  .kmg-btn.kmg-btn-hero {
    margin-top: 10px !important;
    padding: 10px 28px !important;
    font-size: 0.9rem !important;
  }

  /* Devis hero */
  body.devis-page .kmg-hero.full {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;   /* ne pas tronquer le contenu */
  }
  body.devis-page .kmg-hero__inner {
    min-height: 100dvh !important;
    padding: 50px 20px 16px !important;
    gap: 5px !important;
  }
  body.devis-page .kmg-logo-hero img {
    width: 80px !important;
  }
  body.devis-page .kmg-headline {
    font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
  }
  body.devis-page .kmg-subline {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

}


/* ─────────────────────────────────────────────────────────────
   4. Z FOLD 4 REPLIÉ EN PAYSAGE — cas extrême (≤ 360px haut)
   882px large × 344px haut → aspect ultra-large très court
───────────────────────────────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 360px) {

  .hero h1,
  .kmg-headline {
    font-size: clamp(0.88rem, 3vw, 1.1rem) !important;
  }
  .hero p,
  .kmg-subline {
    display: none !important;   /* plus de place */
  }
  .kmg-logo-hero img {
    width: 60px !important;
  }
  .kmg-hero__inner,
  body.devis-page .kmg-hero__inner {
    padding: 46px 20px 10px !important;
    gap: 4px !important;
  }
  .kmg-btn.kmg-btn-hero {
    padding: 7px 18px !important;
    font-size: 0.8rem !important;
    margin-top: 6px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   5. Z FOLD 4 DÉPLIÉ — PORTRAIT QUASI-CARRÉ (~904 × 833px)
   Tombe dans la zone "tablette" (768-1024px) mais l'aspect
   ratio ~1:1 est inhabituel. On ajuste sans casser la tablette.
───────────────────────────────────────────────────────────── */
@media screen and (min-width: 769px) and (max-width: 960px) and (orientation: portrait) {

  /* Hero index : plein viewport */
  .hero {
    min-height: 100dvh !important;
  }

  /* Hero service pages : padding adapté à l'écran quasi-carré */
  .kmg-hero__inner {
    padding: 80px 40px 60px !important;
    gap: 12px !important;
  }
  .kmg-logo-hero img {
    width: 150px !important;
  }
  .kmg-headline {
    font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
  }
  .kmg-subline {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
    max-width: 70ch !important;
  }

  /* Devis : grille 2 colonnes confortables */
  .devis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .devis-options {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }

  /* Services index : 2 cards par ligne */
  #services {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  #services h1#services-title {
    grid-column: 1 / -1 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   6. GRANDS TÉLÉPHONES RÉCENTS — 393 à 430px
   iPhone 15 Pro Max (430px), Galaxy S24 Ultra (412px),
   Pixel 8 Pro (412px)
   Les règles 430px de styles.css couvrent déjà l'essentiel.
   On affine uniquement les éléments qui débordent encore.
───────────────────────────────────────────────────────────── */
@media screen and (min-width: 393px) and (max-width: 430px) {

  .hero p {
    font-size: clamp(0.88rem, 3.2vw, 1.05rem) !important;
    padding: 0 12px !important;
  }
  .kmg-subline {
    font-size: clamp(0.82rem, 2.5vw, 0.98rem) !important;
    padding: 0 14px !important;
  }
  /* Devis : options restent sur 2 colonnes si la largeur le permet */
  .devis-options {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   7. CORRECTIFS GÉNÉRAUX dvh/svh (barre d'adresse mobile)
   `100dvh` corrige la hauteur réelle sur Chrome/Safari mobile
   où `100vh` inclut la barre d'adresse masquée.
───────────────────────────────────────────────────────────── */
@supports (min-height: 100dvh) {
  .hero {
    min-height: 100dvh;
  }
  .kmg-hero.full {
    min-height: 100dvh;
  }
}

/* iPhone home hero: one full visible screen before #services */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 430px) and (orientation: portrait) {
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero,
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section#top.hero {
      min-height: 100svh !important;
      height: 100svh !important;
      max-height: 100svh !important;
      overflow: hidden !important;
      margin: 0 !important;
    }

    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero h1,
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero p {
      transform: translateY(-78px) !important;
    }
  }

  @media screen and (max-width: 360px) and (orientation: portrait) {
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero h1,
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero p {
      transform: translateY(-92px) !important;
    }
  }
}
@supports (-webkit-touch-callout: none) and (height: 100dvh) {
  @media screen and (max-width: 430px) and (orientation: portrait) {
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero,
    body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section#top.hero {
      min-height: 100dvh !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }
}

@media screen and (max-width: 360px) and (orientation: portrait) {
  /* Fold plié: remonter le texte hero au-dessus de la zone back-to-top */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero h1,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero p {
    transform: translateY(-118px) !important;
  }
}

/* Home mobile lock: logo + ticker stay attached to Hero (not viewport floating) */
@media screen and (max-width: 430px) and (orientation: portrait) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 12001 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    position: absolute !important;
    top: 156px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

}

@media screen and (max-width: 360px) and (orientation: portrait) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger {
    top: 9px !important;
    left: 9px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo {
    top: 22vh !important;
  }
}

/* Home mobile: outside Hero, hide burger like logo/ticker to avoid floating */
@media screen and (max-width: 430px) and (orientation: portrait) {
  body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) header .kmg-burger {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. FOLD / FLIP ≤ 360px — aération hero + carrousel + footer icônes
   Cible : Z Fold 4 replié (344px), Z Flip 5 écran externe (315px)
   Complète les règles globales max-width:360px sans les toucher.
   N'affecte PAS tablette, desktop, ni ≥ 375px.
───────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 360px) {

  /* ── A. HERO DEVIS ─────────────────────────────────────────────────────── */
  body.devis-page .kmg-hero__inner {
    padding-top: 72px !important;
    padding-bottom: 28px !important;
    gap: 18px !important;
    min-height: auto !important;
  }
  body.devis-page .kmg-logo-hero img {
    width: 130px !important;
  }
  body.devis-page .kmg-headline {
    font-size: clamp(1.05rem, 7vw, 1.4rem) !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }
  body.devis-page .kmg-subline {
    font-size: clamp(0.72rem, 3.8vw, 0.9rem) !important;
    line-height: 1.55 !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }
  body.devis-page .kmg-btn.kmg-btn-hero {
    margin-top: 10px !important;
    padding: 11px 20px !important;
    font-size: 0.85rem !important;
  }

  /* ── B. HERO RÉALISATIONS ──────────────────────────────────────────────── */
  body.realisations-page .kmg-hero__inner {
    padding-top: 90px !important;
    padding-bottom: 30px !important;
    gap: 12px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    justify-content: center !important;
  }
  body.realisations-page .kmg-logo-hero {
    margin: 0 auto !important;
  }
  body.realisations-page .kmg-logo-hero img {
    width: clamp(130px, 40vw, 150px) !important;
    max-width: clamp(130px, 40vw, 150px) !important;
  }
  body.realisations-page .kmg-hero .kmg-headline {
    font-size: clamp(1.2rem, 7vw, 1.6rem) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.realisations-page .kmg-hero .kmg-subline {
    font-size: clamp(0.72rem, 3.6vw, 0.9rem) !important;
    line-height: 1.45 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 10px !important;
  }
  body.realisations-page .kmg-hero .kmg-btn {
    padding: 9px 20px !important;
    font-size: 0.85rem !important;
    margin-top: 0 !important;
  }

  /* ── C. CARROUSEL RÉALISATIONS 3D (namespace .real-*) ─────────────────── */
  /* Réduction des cartes pour tenir dans 315-360px sans perdre l'effet 3D.   */
  /* overflow:visible conservé sur .real-slider pour préserver la perspective. */
  .real-slider-wrap {
    padding: 8px 0 !important;
  }
  .real-slider {
    height: 255px !important;
  }
  .real-card {
    width: 165px !important;
    height: 230px !important;
    margin-left: -82px !important;
    margin-top: -115px !important;
  }
  #real-prev,
  #real-next {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.8rem !important;
  }
  #real-prev { left: 0 !important; }
  #real-next { right: 0 !important; }

  /* ── D. AVIS CLIENTS — SLIDER ─────────────────────────────────────────── */
  .slider-wrap {
    width: 90% !important;
    margin: 0 auto !important;
  }
  .slider-wrap .item {
    min-width: 80vw !important;
    padding: 14px 10px !important;
  }

  /* ── E. FOOTER — icônes sociales ─────────────────────────────────────── */
  /* Les images référencées depuis images/Iconessocial/ (chemin corrigé).    */
  /* Ces règles ne modifient que la taille d'affichage sur écran très étroit. */
  .footer-social a img {
    width: 28px !important;
    height: 28px !important;
  }
  .footer-social {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* =================================================================
   BURGER PANEL -- Reduire l'espace vide en haut du menu ouvert
   (padding-top: 64px trop genereux -> 18px)
   S'applique a tous les ecrans et toutes les pages burger-only.
   ================================================================= */
body.kmg-burger-only .kmg-burger-panel {
  padding-top: 18px !important;
}

/* =================================================================
   Z FOLD 4 DEPLIE -- Logo remonte a 18vh (etait 35vh via 769-1023px)
   min-width:769 + max-width:960 + portrait = Fold 4 deplie
   ================================================================= */
@media screen and (min-width: 769px) and (max-width: 960px) and (orientation: portrait) {
  html body.home-page .logo {
    top: 18vh !important;
  }
}