/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FX.CSS — Pergolas Caraïbes
   v1 — 2026-05-02

   OBJECTIF : recréer TOUS les effets desktop pour mobile & tablette
   - Sticky About : image fixe à gauche (PC) → image fixe en haut (mobile)
   - Sticky Why : image fixe à droite (PC) → image fixe en haut (mobile)
   - Crossfade entre 2 images au scroll (gardé)
   - Scroll horizontal touch natif pour les réalisations (remplace le scroll-jack)
   - Parallax conservé (translateY)
   - Tous les reveal (.rv) fonctionnent partout
   - Hero plein écran adapté
   - Produits cards aérées
   - CTA empilé propre
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. TABLETTE & MOBILE (≤ 1024px) — adaptations communes
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Padding des sections plus serré */
  .prod-sec,
  .zones-sec,
  .test-sec,
  .faq-sec {
    padding: 5.5rem 4vw !important;
  }
  .par-sec {
    padding: 6rem 4vw !important;
    min-height: 70vh !important;
  }
  .cta-sec {
    padding: 5rem 4vw !important;
  }

  /* Navigation : items du milieu cachés sur tablette aussi */
  .n-mid { display: none !important; }
  nav { padding: 0 1.2rem !important; }

  /* Hero : padding intérieur réduit */
  .hero-c { padding: 0 4vw 4rem !important; }

  /* Marquee : plus dense */
  .mq-band { padding: .8rem 0 !important; }
  .mq-track { animation-duration: 22s !important; }
  .mq-item span { font-size: .58rem !important; }

  /* Produits : 2 colonnes en tablette */
  .prod-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   2. STICKY ABOUT / WHY — VERSION MOBILE & TABLETTE PREMIUM
   L'image reste FIXE en haut, le texte scroll dessous
   Crossfade entre 2 images quand on atteint la 2e moitié
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Container : flex column pour permettre order + sticky child */
  .swrap {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    background: var(--bg);
  }
  /* Background dark pour swrap-why */
  #swrap-why { background: var(--dark); }

  /* IMAGE COL : sticky en haut avec hauteur 55vh */
  .simg-col {
    order: 1 !important;
    position: sticky !important;
    top: var(--nav-h, 66px) !important;
    height: 55vh !important;
    width: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  /* Frame qui contient les 2 images crossfade */
  .simg-frame {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  /* Les 2 images crossfade : héritent du desktop, on garde la transition opacity */
  .simg-a, .simg-b {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Caption en bas de l'image */
  .simg-cap {
    bottom: 1rem !important;
    left: 1rem !important;
    font-size: .6rem !important;
    padding: .35rem .7rem !important;
  }

  /* CONTENT COL : passe par-dessus l'image en relative + z-index plus haut */
  .scnt,
  .scnt-dark {
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 4rem 1.5rem 4rem !important;
    margin-top: 0 !important;
  }
  .scnt { background: var(--bg) !important; }
  .scnt-dark { background: var(--dark) !important; }

  /* Blocs de texte */
  .st-block {
    margin-bottom: 3rem !important;
    padding-bottom: 2.5rem !important;
  }
  .st-h {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }
  .st-p {
    font-size: .9rem !important;
    line-height: 1.7 !important;
  }
  .st-n {
    font-size: .75rem !important;
    margin-bottom: .6rem !important;
  }

  /* Grille des chiffres clés */
  .kn-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
    margin-top: 1.5rem !important;
  }
  .kn { padding: 1rem !important; }
  .kn-n { font-size: 1.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   3. RÉALISATIONS — Section vide (les règles sont dans le PATCH section I plus bas)
   L'ancien bloc qui mettait `transform: none !important` a été retiré
   car il bloquait le scroll-jacked mobile.
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   4. PARALLAX SECTION — adapté mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .par-sec {
    min-height: 65vh !important;
  }
  .par-bg {
    background-attachment: scroll !important;
    inset: -10% 0 !important;
  }
  .par-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.6) 0%,
      rgba(0,0,0,.45) 50%,
      rgba(0,0,0,.7) 100%
    ) !important;
  }
  .par-content {
    max-width: 100% !important;
  }
  .par-h {
    font-size: clamp(2rem, 7vw, 3.5rem) !important;
    line-height: 1.08 !important;
  }
  .par-p {
    font-size: .9rem !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   5. HERO — version mobile premium
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    height: 100vh !important;
    min-height: 600px !important;
  }
  .hero-img {
    inset: -8% 0 !important;
  }
  .hero-c {
    padding: 0 1.5rem 4.5rem !important;
  }
  .hero-eyebrow {
    margin-bottom: 1.5rem !important;
  }
  .he-t {
    font-size: .55rem !important;
    letter-spacing: .18em !important;
  }
  .hero-big {
    margin-bottom: 2rem !important;
  }
  .hero-big-l1,
  .hero-big-l2 {
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    line-height: 1.05 !important;
  }
  .hero-big-l2 {
    padding-left: 12% !important;
  }
  .hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .7rem !important;
    width: 100% !important;
  }
  .btn-hero-gold,
  .btn-hero-glass {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: .78rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hero-scroll-ind {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
  }
  .hs-ln { height: 30px !important; }
  .hero-wm {
    font-size: clamp(4rem, 22vw, 8rem) !important;
    bottom: -.05em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   6. PRODUITS GRID — Mobile : 1 col grandes cards
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .prod-sec {
    padding: 5rem 1.5rem !important;
  }
  .prod-hd {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  .prod-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .pc {
    aspect-ratio: 4/5 !important;
    min-height: 380px !important;
  }
  .pc-info {
    padding: 1.4rem !important;
    transform: none !important;
  }
  .pc-name {
    font-size: 1.4rem !important;
  }
  .pc-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .sec-h {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
  .sec-spec-p {
    font-size: .72rem !important;
    line-height: 1.55 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   7. ZONES GRID
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .zones-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .zones-sec { padding: 5rem 1.5rem !important; }
  .zones-grid {
    grid-template-columns: 1fr !important;
    margin-top: 2.5rem !important;
  }
  .zone {
    padding: 2rem 1.5rem !important;
  }
  .zone-n { font-size: 1.15rem !important; }
  .zone-d { font-size: .8rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   8. TESTIMONIALS — Slider touch optimisé
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .test-sec { padding: 5rem 0 !important; }
  .test-sec > .rv {
    padding: 0 1.5rem !important;
  }
  .tc-wrap {
    padding: 0 0 0 1.5rem !important;
  }
  .tc-track {
    gap: 1rem !important;
    padding-right: 1.5rem !important;
    scroll-padding-left: 1.5rem !important;
  }
}
@media (max-width: 768px) {
  .tc-track > .tc {
    flex: 0 0 88% !important;
    scroll-snap-align: start !important;
  }
  .tc {
    padding: 2rem 1.6rem !important;
  }
  .tc-q {
    font-size: .9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.4rem !important;
  }
  .tc-nav {
    padding: 0 1.5rem !important;
    margin-top: 1.5rem !important;
    justify-content: center !important;
  }
  .tc-prev, .tc-next {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   9. FAQ
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-sec { padding: 5rem 1.5rem !important; }
  .faq-inner { margin: 2.5rem auto 0 !important; }
  .faq-q {
    font-size: .88rem !important;
    padding: 1.3rem 0 !important;
  }
  .faq-a-inner {
    padding: 0 0 1.3rem 0 !important;
    font-size: .82rem !important;
  }
  .faq-icon {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   10. CTA SECTION — mobile stack premium
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cta-sec {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 768px) {
  .cta-sec {
    padding: 5rem 1.5rem !important;
  }
  .cta-h {
    font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
  .cta-p {
    font-size: .85rem !important;
    margin-bottom: 2rem !important;
  }
  .cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .7rem !important;
  }
  .cta-btns button {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .cta-info-box {
    padding: 1.8rem 1.4rem !important;
  }
  .cta-info-item {
    padding: .9rem 0 !important;
    gap: .7rem !important;
  }
  .cta-tel-line {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .15rem !important;
    padding: .6rem 0 !important;
  }
  .cta-ii-val {
    font-size: .82rem !important;
    line-height: 1.5 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   11. FOOTER — stack
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ft-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}
@media (max-width: 768px) {
  footer { padding: 4rem 1.5rem 2rem !important; }
  .ft-top {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ft-bot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
    text-align: left !important;
  }
  .ft-desc {
    max-width: 100% !important;
  }
  .ft-link { font-size: .78rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   12. SECTION DARK CTA "Voir toutes les réalisations"
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  section[style*="background:var(--dark)"][style*="6vw"] {
    padding: 3rem 1.5rem 4rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13. AMÉLIORATION TACTILE — focus, hover, tap targets
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Tap targets minimum 44x44 (Apple HIG) */
  .ni, .ni-ext, .mml, .ft-link, .faq-q,
  .cta-tel-line, .cmo-item, .ft-ci {
    min-height: 44px;
  }

  /* Désactiver hover effects qui ne fonctionnent pas en touch */
  .pc:hover .pc-bg { transform: none !important; }
  .rc:hover .rc-bg { transform: none !important; }
  .zone:hover { background: transparent !important; }

  /* Focus visible plus marqué */
  *:focus-visible {
    outline: 2px solid var(--gold, #D4A843) !important;
    outline-offset: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   14. SAFE AREAS iOS (notch, home indicator)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: max(1.2rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.2rem, env(safe-area-inset-right)) !important;
  }
  footer {
    padding-bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom))) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   15. PERFORMANCE — réduire animations sur mobile pour fluidité
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Grain animation : plus simple sur mobile */
  .hero-grain {
    animation: none !important;
    opacity: .025 !important;
  }
  /* Reveal plus rapide en mobile */
  .rv {
    transition-duration: .6s !important;
  }
}

/* Respect reduce-motion user preference */
@media (prefers-reduced-motion: reduce) {
  .rv,
  .simg-a, .simg-b,
  .pc-bg, .rc-bg,
  .par-bg, .hero-img, .hero-wm,
  .mq-track,
  .nav-burger span {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════
   PATCH v2 — 2026-05-02 — corrections retours utilisateur
   ════════════════════════════════════════════════════════════════════
   Toutes les règles dans @media (max-width:...) — desktop intact
═══════════════════════════════════════════════════════════════════ */

/* ─── PRELOADER — centrer texte multi-ligne sur mobile ─── */
@media (max-width: 768px) {
  #loader {
    padding: 0 1.4rem !important;
  }
  .ld-logo {
    text-align: center !important;
    font-size: 1.4rem !important;
  }
  .ld-sub {
    text-align: center !important;
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }
  .ld-bar {
    width: 140px !important;
  }
}

/* ─── A. SCROLL FIX — empêcher scroll bloqué sur Android
   Bug : quand html ET body ont overflow-x:hidden sans overflow-y
   explicite, certains Android créent un scroll-container interne
   et scrollTop reste 0 (scroll bloqué).
   Fix : html porte le scroll vertical (overflow-y:scroll) et
   body gère le clip horizontal. Compatible Android 5+, Samsung
   Internet 4+, Chrome 40+, Edge. */
@media (max-width: 1024px) {
  html {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }
  body {
    overflow: visible !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
}

/* ─── B. HEADER MOBILE REDESIGN — zéro bouton rond ─── */
@media (max-width: 768px) {
  /* Bouton appel : ZÉRO carré, juste l'icône SVG, rien d'autre */
  .btn-nav,
  #contact-btn,
  .n-r .btn-nav,
  nav button[onclick*="openContact"],
  nav button[onclick*="openContact"]:hover,
  nav button[onclick*="openContact"]:active,
  nav button[onclick*="openContact"]:focus {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .55rem 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--dark, #0A0A0A) !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .btn-nav svg,
  #contact-btn svg,
  nav button[onclick*="openContact"] svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    stroke: var(--dark, #0A0A0A) !important;
    stroke-width: 1.6 !important;
    fill: none !important;
    background: transparent !important;
  }
  .btn-nav:active,
  #contact-btn:active {
    transform: none !important;
    box-shadow: none !important;
    opacity: .55 !important;
  }
  /* Sur hero (nav transparente) : icône blanche
     SAUF sur pages sans hero (body.no-hero) où nav est toujours en bg clair */
  body:not(.no-hero) nav:not(.s) .btn-nav,
  body:not(.no-hero) nav:not(.s) #contact-btn {
    color: rgba(255,255,255,.95) !important;
  }
  body:not(.no-hero) nav:not(.s) .btn-nav svg,
  body:not(.no-hero) nav:not(.s) #contact-btn svg {
    stroke: rgba(255,255,255,.95) !important;
  }
  /* Pages sans hero : icônes TOUJOURS noires */
  body.no-hero .btn-nav,
  body.no-hero #contact-btn,
  body.no-hero #contact-btn:hover,
  body.no-hero #contact-btn:active {
    color: var(--dark, #0A0A0A) !important;
  }
  body.no-hero .btn-nav svg,
  body.no-hero #contact-btn svg {
    stroke: var(--dark, #0A0A0A) !important;
  }
  body.no-hero .nav-burger span {
    background: var(--dark, #0A0A0A) !important;
  }

  /* Burger remis (juste 3 traits flat noirs, zéro bg, zéro border) */
  .nav-burger {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    padding: .55rem 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-left: .8rem !important;
    box-shadow: none !important;
  }
  .nav-burger span {
    width: 22px !important;
    height: 1px !important;
    background: var(--dark, #0A0A0A) !important;
    border-radius: 0 !important;
  }
  .nav-burger.on { background: transparent !important; border: none !important; }
  .nav-burger.on span:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; }
  .nav-burger.on span:nth-child(2) { opacity: 0 !important; }
  .nav-burger.on span:nth-child(3) { transform: translateY(-5px) rotate(-45deg) !important; }
  /* Sur hero (nav transparente) : traits blancs */
  nav:not(.s) .nav-burger span { background: rgba(255,255,255,.95) !important; }
  /* Drawer reste accessible — IMPORTANT : laisser flex column pour que
     header en haut, body au milieu, footer en bas s'affichent correctement */
  .mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-drawer-overlay { display: block; }
  /* Body scrollable au milieu — IMPORTANT : override les règles globales
     `nav { position: fixed; height: var(--nav-h); align-items: center;
     justify-content: space-between }` qui s'appliquaient accidentellement
     parce que le body est une balise <nav> */
  .mobile-drawer-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* sections prennent toute la largeur */
    justify-content: flex-start !important; /* empilées en haut */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1.4rem 0 .5rem !important;
    background: transparent !important;
    transition: none !important;
    border: none !important;
  }
  /* Head en haut, foot en bas (pas de flex-shrink) */
  .mobile-drawer-head,
  .mobile-drawer-foot {
    flex-shrink: 0 !important;
  }
  /* Sections empilées verticalement + tout aligné au BORD GAUCHE */
  .mobile-drawer-section {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 1rem !important; /* léger padding 16px pour ne pas coller au bord */
    transform: none !important; /* annule le translateX(20px) de l'animation */
    opacity: 1 !important; /* tout de suite visible, pas d'animation décalée */
    transition: none !important; /* AUCUNE transition pour éviter les positions intermédiaires */
  }
  /* Section headers : aligné bord gauche, sans barre or */
  .mobile-drawer-h {
    display: block !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 1.5rem 0 .7rem !important;
    padding: 0 !important;
  }
  .mobile-drawer-h::before {
    display: none !important;
  }
  .mobile-drawer-section:first-child .mobile-drawer-h {
    margin-top: 0 !important;
  }
  /* Liens : texte ET flèche collés au bord gauche */
  .mobile-drawer a {
    justify-content: flex-start !important;
    text-align: left !important;
    gap: .5rem !important;
    margin: 0 !important;
    padding: .9rem 0 !important;
  }
  .mobile-drawer a::after {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Aligner les 2 icônes à droite */
  nav { justify-content: space-between !important; }
  .n-r {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    gap: .15rem !important;
  }
  .n-logo { margin-right: auto !important; }

  /* Nav padding plus serré */
  nav {
    padding: 0 1.1rem !important;
    height: 58px !important;
  }
  :root, body { --nav-h: 58px; }
  .n-r { gap: .25rem !important; }
}

/* ─── C. HERO — boutons + typo plus contenus ─── */
@media (max-width: 768px) {
  .hero-c {
    padding: 0 1.4rem 4rem !important;
  }
  .hero-eyebrow {
    margin-bottom: 1.2rem !important;
    gap: .6rem !important;
  }
  .he-line {
    width: 22px !important;
  }
  .he-t {
    font-size: .5rem !important;
    letter-spacing: .15em !important;
    line-height: 1.5 !important;
  }
  .hero-big {
    margin-bottom: 1.7rem !important;
  }
  .hero-big-l1,
  .hero-big-l2 {
    font-size: clamp(1.85rem, 8.5vw, 2.7rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }
  .hero-big-l2 {
    padding-left: 18% !important;
  }
  .hero-btns {
    gap: .55rem !important;
  }
  .btn-hero-gold,
  .btn-hero-glass {
    padding: .82rem 1.2rem !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    border-radius: 4px !important;
  }
  .hero-scroll-ind {
    bottom: 1.2rem !important;
    right: 1.2rem !important;
  }
  .hs-txt { font-size: .5rem !important; }
  .hs-ln { height: 26px !important; }
}

/* ─── D. TYPO GLOBALE — réduire toutes les écritures sur mobile ─── */
@media (max-width: 768px) {
  .sec-h {
    font-size: clamp(1.55rem, 5.8vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }
  .sec-spec-p {
    font-size: .68rem !important;
    line-height: 1.55 !important;
  }
  .sec-ey {
    margin-bottom: .7rem !important;
    gap: .6rem !important;
  }
  .ey-line { width: 20px !important; }
  .ey-t { font-size: .55rem !important; letter-spacing: .18em !important; }

  .st-h {
    font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
    line-height: 1.15 !important;
    margin-bottom: .8rem !important;
  }
  .st-n {
    font-size: .68rem !important;
    margin-bottom: .55rem !important;
    letter-spacing: .18em !important;
  }
  .st-p {
    font-size: .82rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1rem !important;
  }
  .st-ft { font-size: .76rem !important; }
  .st-fd { font-size: .68rem !important; }

  .par-h {
    font-size: clamp(1.85rem, 6.5vw, 2.8rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 1.1rem !important;
  }
  .par-p {
    font-size: .82rem !important;
    line-height: 1.65 !important;
  }

  .cta-h {
    font-size: clamp(1.65rem, 6vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
  .cta-p {
    font-size: .8rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.6rem !important;
  }

  .kn-n { font-size: 1.35rem !important; }
  .kn-l { font-size: .62rem !important; }
}

/* ─── DESKTOP : prod-sticky-wrap transparent (le wrap injecté par JS doit
   être invisible pour le layout PC) */
@media (min-width: 1025px) {
  .prod-sticky-wrap {
    display: contents !important;
  }
}

/* ─── E. PRODUITS — Scroll-jacked HORIZONTAL au scroll vertical
   Sticky-wrap en flex column : header en haut + grid centré verticalement
   sans espace vide gaspillé. */
@media (max-width: 1024px) {
  /* prod-sec : hauteur dynamique calculée par JS (100vh + maxShift) */
  .prod-sec {
    position: relative !important;
    padding: 0 !important;
    background: var(--bg, #F5F4F0) !important;
  }
  /* Wrap injecté par mobile-fx.js : sticky 100vh, flex column */
  .prod-sticky-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--bg, #F5F4F0);
    display: flex;
    flex-direction: column;
  }
  /* Header en flow normal au TOP du sticky */
  .prod-sticky-wrap .prod-hd {
    position: relative !important;
    flex-shrink: 0;
    padding: calc(var(--nav-h, 58px) + .8rem) 1.4rem .6rem !important;
    background: var(--bg, #F5F4F0) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .4rem !important;
    margin: 0 !important;
    z-index: 5;
  }
  .prod-sticky-wrap .prod-hd .sec-h {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    line-height: 1.1 !important;
  }
  .prod-sticky-wrap .prod-hd .sec-spec-p {
    font-size: .68rem !important;
    line-height: 1.5 !important;
  }
  /* Grille = track qui translate, prend l'espace restant verticalement */
  .prod-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    flex: 1 1 auto;
    align-items: center;
    padding: 0 1.4rem 1.5rem !important;
    gap: .8rem !important;
    background: transparent !important;
    overflow: visible !important;
    will-change: transform;
    margin: 0 !important;
  }
  .pc {
    flex: 0 0 62vw !important;
    aspect-ratio: 3/4 !important;
    height: auto !important;
    min-height: 320px !important;
    max-height: 480px !important;
    border-radius: 6px !important;
  }
  .pc-info {
    padding: 1rem !important;
    transform: none !important;
  }
  .pc-tag {
    font-size: .52rem !important;
    letter-spacing: .15em !important;
    margin-bottom: .25rem !important;
  }
  .pc-name {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    margin-bottom: .25rem !important;
  }
  .pc-price {
    font-size: .6rem !important;
    line-height: 1.4 !important;
    margin-bottom: .55rem !important;
  }
  .pc-cta {
    opacity: 1 !important;
    transform: none !important;
    font-size: .55rem !important;
    padding: .3rem .7rem !important;
  }
  .prod-all { font-size: .65rem !important; }
}

/* ─── F. ZONES — empilées 1 par 1, layout horizontal interne, séparateurs gris ─── */
@media (max-width: 768px) {
  .zones-sec {
    padding: 4rem 1.4rem !important;
  }
  .zones-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    background: transparent !important;
    margin-top: 1.8rem !important;
    border-top: 1px solid var(--line, #E5E5E0) !important;
  }
  .zone {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: .9rem !important;
    row-gap: .15rem !important;
    align-items: center !important;
    padding: 1.1rem 0 !important;
    border-bottom: 1px solid var(--line, #E5E5E0) !important;
    background: transparent !important;
  }
  .zone::after {
    display: none !important;
  }
  .zone-icon {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .zone-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
  .zone-n {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: .92rem !important;
    margin: 0 !important;
    align-self: end !important;
    line-height: 1.2 !important;
  }
  .zone-d {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: .68rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    align-self: start !important;
  }
}

/* ─── G. STICKY ABOUT/WHY — image 60vh fixée en haut, passe PAR-DESSUS le texte ───
   Image z-index élevé : reste DEVANT, le texte scrolle EN-DESSOUS et disparaît
   sous l'image quand il atteint le haut du viewport. */
@media (max-width: 1024px) {
  /* Container flex column : image en haut, texte en dessous */
  .swrap {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  /* IMAGE : sticky top, 40vh (taille réduite),
     z-index DEVANT le texte + bg opaque pour pas voir à travers le crossfade */
  .simg-col {
    order: 1 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 40vh !important;
    min-height: 40vh !important;
    width: 100% !important;
    z-index: 5 !important;
    overflow: hidden !important;
    background: var(--dark, #0A0A0A) !important;
  }
  .simg-frame {
    background: var(--dark, #0A0A0A) !important;
  }
  /* Crossfade smooth entre 2 images : pas de see-through pendant la transition
     L'image A reste à 1 et B fade sur 0 → 1. Pas de moment où les 2 sont à <1. */
  .simg-a {
    transition: opacity .9s ease !important;
    opacity: 1 !important;
  }
  .simg-a.fade {
    opacity: 0 !important;
    transition: opacity .9s ease !important;
  }
  .simg-b {
    transition: opacity .9s ease !important;
    opacity: 0 !important;
    z-index: 2;
  }
  .simg-b.show {
    opacity: 1 !important;
  }
  /* Caption discrète en bas */
  .simg-cap {
    font-size: .55rem !important;
    padding: .25rem .6rem !important;
    bottom: 1rem !important;
    left: 1rem !important;
  }
  /* TEXTE : derrière l'image (z-index 1), scrolle et disparaît sous l'image */
  .scnt,
  .scnt-dark {
    order: 2 !important;
    position: relative !important;
    z-index: 1 !important;  /* DERRIÈRE l'image */
    margin-top: 0 !important;
    width: 100%;
  }
  .scnt {
    background: var(--bg, #F5F4F0) !important;
    padding: 3.5rem 1.4rem !important;
  }
  .scnt-dark {
    background: var(--dark, #0A0A0A) !important;
    padding: 3.5rem 1.4rem !important;
  }
  .st-block {
    margin-bottom: 2.5rem !important;
    padding-bottom: 2rem !important;
  }
  .kn-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }
  .kn { padding: .9rem !important; }
}

/* ─── H. PARALLAX "Notre savoir-faire" — full-screen 100vh ─── */
@media (max-width: 1024px) {
  .par-sec {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 5rem 1.4rem !important;
    align-items: center !important;
  }
  .par-bg {
    inset: 0 !important;
    background-attachment: scroll !important;
  }
  .par-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.4) 45%,
      rgba(0,0,0,.7) 100%
    ) !important;
  }
  .par-content {
    max-width: 100% !important;
  }
}

/* ─── I. RÉALISATIONS — scroll-jacked horizontal au scroll vertical (comme PC) ─── */
@media (max-width: 1024px) {
  /* #rout height calculée par setupReal() en JS */
  #rout {
    background: var(--dark, #0A0A0A) !important;
  }
  .real-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: var(--dark, #0A0A0A) !important;
  }
  .real-header {
    padding: 3rem 1.4rem 1.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
  }
  .real-header h2 {
    font-size: clamp(1.6rem, 6vw, 2.3rem) !important;
  }
  /* Track : translateX appliqué par rTrackLoop, pas de scroll touch ici */
  .real-track {
    display: flex !important;
    overflow: visible !important;
    will-change: transform !important;
    padding: calc(var(--nav-h, 58px) + 7rem) 1.4rem 0 !important;
    gap: 1rem !important;
  }
  .rc {
    flex: 0 0 70vw !important;
    height: calc(100vh - var(--nav-h, 58px) - 9rem) !important;
    max-height: 520px !important;
    min-height: 340px !important;
    border-radius: 6px !important;
  }
  .rc-info {
    bottom: 1.1rem !important;
    left: 1.1rem !important;
    right: 1.1rem !important;
  }
  .rc-name {
    font-size: .95rem !important;
    line-height: 1.25 !important;
  }
  .rc-loc {
    font-size: .52rem !important;
    margin-bottom: .3rem !important;
  }
  .real-progress {
    display: block !important;
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 1.4rem !important;
    right: 1.4rem !important;
    height: 1px !important;
  }
  .real-bar { background: var(--gold, #D4A843) !important; }
}

/* Tablette : cards plus larges */
@media (min-width: 768px) and (max-width: 1024px) {
  .rc { flex: 0 0 50vw !important; }
}

/* ─── J. AVIS CLIENTS — un avis à la fois, pas de peek ─── */
@media (max-width: 768px) {
  .test-sec { padding: 4rem 0 !important; }
  .test-sec > .rv {
    padding: 0 1.4rem !important;
  }
  .tc-wrap {
    padding: 0 1.4rem !important;
    margin-top: 2rem !important;
  }
  .tc-track {
    gap: 1rem !important;
    padding: 0 !important;
  }
  .tc-track > .tc {
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
  }
  .tc {
    padding: 1.5rem 1.3rem !important;
  }
  .tc-stars {
    margin-bottom: .9rem !important;
    gap: .12rem !important;
  }
  .tc-star {
    width: 9px !important;
    height: 9px !important;
  }
  .tc-q {
    font-size: .78rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1rem !important;
  }
  .tc-auth {
    font-size: .72rem !important;
    margin-bottom: .1rem !important;
  }
  .tc-loc {
    font-size: .62rem !important;
  }
  .tc-nav {
    padding: 1.2rem 1.4rem 0 !important;
    margin-top: 0 !important;
  }
  .tc-prev, .tc-next {
    width: 36px !important;
    height: 36px !important;
  }
  .tc-prev svg, .tc-next svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ─── K. CTA section — plus compact ─── */
@media (max-width: 768px) {
  .cta-sec {
    padding: 4.5rem 1.4rem !important;
    gap: 2rem !important;
  }
  .cta-info-box {
    padding: 1.5rem 1.2rem !important;
    border-radius: 4px !important;
  }
  .cta-info-title {
    font-size: .58rem !important;
    margin-bottom: 1.1rem !important;
  }
  .cta-info-item {
    padding: .8rem 0 !important;
    gap: .6rem !important;
  }
  .cta-ii-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .cta-ii-icon svg {
    width: 11px !important;
    height: 11px !important;
  }
  .cta-ii-lbl {
    font-size: .6rem !important;
    margin-bottom: .2rem !important;
  }
  .cta-ii-val {
    font-size: .76rem !important;
    line-height: 1.45 !important;
  }
  .cta-tel-zone { font-size: .65rem !important; }
  .cta-tel-num { font-size: .82rem !important; }
  .cta-btns { gap: .6rem !important; }
  .cta-btns button {
    padding: .9rem 1.3rem !important;
    font-size: .7rem !important;
    letter-spacing: .12em !important;
  }
}

/* ─── L. FOOTER MOBILE — visuel curtain + footer relatif (footer trop grand
   pour position: fixed sur mobile) ─── */
@media (max-width: 768px) {
  /* Visuel curtain : body dark, curtain-wrap au-dessus avec ombre */
  body {
    background: var(--dark, #0A0A0A) !important;
  }
  .curtain-wrap {
    position: relative !important;
    z-index: 2 !important;
    background: var(--bg, #F5F4F0) !important;
    box-shadow: 0 -4px 40px rgba(0,0,0,.18) !important;
    margin-bottom: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Footer en flow normal — pas de fixed, pas de troncage */
  footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: auto !important;
    padding: 3rem 1.4rem 2rem !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ─── M. FAQ plus compact ─── */
@media (max-width: 768px) {
  .faq-sec { padding: 4rem 1.4rem !important; }
  .faq-inner { margin: 2rem auto 0 !important; }
  .faq-q {
    font-size: .82rem !important;
    padding: 1.1rem 0 !important;
    gap: .8rem !important;
  }
  .faq-a-inner {
    font-size: .76rem !important;
    line-height: 1.65 !important;
    padding: 0 0 1.2rem !important;
  }
  .faq-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: .75rem !important;
  }
}

/* ─── N. MARQUEE + DARK CTA "voir réalisations" ─── */
@media (max-width: 768px) {
  .mq-band {
    padding: .65rem 0 !important;
  }
  .mq-track {
    animation-duration: 18s !important;
  }
  .mq-item {
    padding: 0 1.1rem !important;
    gap: 1.1rem !important;
  }
  .mq-item span {
    font-size: .54rem !important;
    letter-spacing: .16em !important;
  }
}

/* ─── O. SCROLL — laisser le scroll natif sans smooth-behavior
   (le smooth-behavior interférait avec les scroll programmatiques) */

/* ─── P. FOOTER mobile — 1 col stack avec séparateurs nets ─── */
@media (max-width: 768px) {
  /* Container principal : 1 colonne, sections empilées avec séparateurs */
  .ft-top {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin-bottom: 1.4rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* Chaque section (brand, products, nav, islands) : full width + séparateur */
  .ft-top > div {
    grid-column: auto !important;
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .ft-top > div:first-child {
    padding-top: 0 !important;
  }
  .ft-top > div:last-child {
    border-bottom: none !important;
  }

  /* Brand section */
  .ft-brand {
    font-size: 1.2rem !important;
    margin-bottom: .8rem !important;
  }
  .ft-desc {
    font-size: .75rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.3rem !important;
    max-width: 100% !important;
  }
  .ft-ci {
    font-size: .75rem !important;
    margin-bottom: .7rem !important;
    line-height: 1.4 !important;
  }
  .ft-ci:last-child { margin-bottom: 0 !important; }

  /* Section headers (gold) */
  .ft-col-h {
    font-size: .6rem !important;
    letter-spacing: .25em !important;
    margin-bottom: 1.1rem !important;
    color: var(--gold, #D4A843) !important;
  }

  /* Links */
  .ft-link {
    font-size: .8rem !important;
    margin-bottom: .65rem !important;
    line-height: 1.4 !important;
  }
  .ft-link:last-child { margin-bottom: 0 !important; }

  /* Bottom legal + made — séparé, plus petit */
  .ft-bot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .7rem !important;
    text-align: left !important;
    padding-top: 1.3rem !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  .ft-legal, .ft-made {
    font-size: .62rem !important;
    line-height: 1.6 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE NOS-PRODUITS — règles mobile spécifiques
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* PAGE HEADER — réduire padding et taille titre */
  .page-header {
    padding-top: calc(var(--nav-h, 58px) + 2.5rem) !important;
    padding-bottom: 1.8rem !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
  .page-eyebrow {
    font-size: .55rem !important;
    letter-spacing: .2em !important;
    margin-bottom: .9rem !important;
    gap: .5rem !important;
  }
  .page-eyebrow::before { width: 18px !important; }
  .page-title {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1 !important;
    margin-bottom: .9rem !important;
  }
  .page-sub {
    font-size: .65rem !important;
    letter-spacing: .1em !important;
    line-height: 1.6 !important;
  }

  /* FILTRES — sticky sous nav, scroll horizontal touch si besoin */
  /* FILTRES : sticky top:0 avec z-index plus haut que nav,
     pour COUVRIR le nav (au lieu de le faire glisser) */
  .filters {
    padding: 0 1.4rem !important;
    top: 0 !important;                    /* sticks au tout-haut */
    z-index: 1100 !important;             /* au-dessus de nav (1000) */
    background: rgba(245,244,240,0.96) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    gap: 0 !important;
    border-bottom: 1px solid var(--line, #E5E5E0) !important;
  }
  /* Nav reste FIXÉ en place — pas de translate quand nav-up */
  nav.nav-up {
    transform: none !important;
  }
  /* Ignore le body.nav-hidden : filter est déjà à top:0 */
  body.nav-hidden .filters {
    top: 0 !important;
  }
  .filt {
    padding: .9rem 1rem !important;
    font-size: .6rem !important;
    letter-spacing: .15em !important;
  }
  .count-bar {
    padding: 1.4rem 1.4rem .3rem !important;
    font-size: .6rem !important;
  }

  /* PRODUITS — cards plus aérées sur mobile */
  .products {
    padding: 2.5rem 1.4rem 4rem !important;
  }
  .prod-card {
    margin-bottom: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .prod-img {
    aspect-ratio: 4/3 !important;
    margin-bottom: 1.6rem !important;
  }
  .prod-meta {
    gap: .65rem !important;
    margin-bottom: .7rem !important;
  }
  .prod-num,
  .prod-cat {
    font-size: .52rem !important;
    letter-spacing: .15em !important;
  }
  .prod-sep-line { width: 12px !important; }
  .prod-title {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
    line-height: 1.05 !important;
    margin-bottom: .8rem !important;
  }
  .prod-desc {
    font-size: .82rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.4rem !important;
  }
  .prod-cols {
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    padding-top: 1.2rem !important;
    margin-bottom: 1.5rem !important;
  }
  .prod-feats {
    gap: .55rem !important;
  }
  .prod-feats li {
    font-size: .75rem !important;
    line-height: 1.5 !important;
    padding-left: 1.1rem !important;
  }
  .prod-link {
    font-size: .62rem !important;
    letter-spacing: .12em !important;
    gap: .5rem !important;
  }

  /* PAGE WRAP : pas de margin-bottom (pour éviter scroll dans le vide) */
  .page-wrap {
    margin-bottom: 0 !important;
    background: var(--bg, #F5F4F0) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE PRODUIT (pergola-autoportee, etc.) — règles mobile spécifiques
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* HERO FR — image de fond + titre */
  .hero-fr {
    min-height: 80vh !important;
    padding: 0 1.4rem !important;
  }
  .hero-fr-back {
    top: calc(var(--nav-h, 58px) + .8rem) !important;
    left: 1rem !important;
    font-size: .65rem !important;
  }
  .hero-fr-tag {
    font-size: .55rem !important;
    letter-spacing: .15em !important;
    bottom: auto !important;
    top: calc(var(--nav-h, 58px) + .9rem) !important;
    right: 1.4rem !important;
  }
  .hero-fr-inner {
    padding-bottom: 4rem !important;
  }
  .hero-fr-h {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .hero-fr-s {
    font-size: .55rem !important;
    letter-spacing: .12em !important;
    margin: 1rem 0 1.5rem !important;
    line-height: 1.7 !important;
  }
  .hero-fr-cta {
    flex-direction: column !important;
    gap: .6rem !important;
    align-items: stretch !important;
  }
  .hero-fr-cta a,
  .hero-fr-cta button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Bouton "Configurer ma pergola autoportée" : plus petit/discret */
  .btn-hero-config {
    padding: .65rem 1.2rem !important;
    font-size: .62rem !important;
    letter-spacing: .1em !important;
    gap: .5rem !important;
    border-radius: 4px !important;
  }
  .btn-hero-config svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* INTRO SECTION */
  .intro-sec {
    padding: 4rem 1.4rem !important;
  }
  .intro-sec h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.4rem !important;
  }
  .intro-sec p {
    font-size: .88rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1rem !important;
  }

  /* PILLARS — points clés */
  .pillars-sec {
    padding: 4rem 1.4rem !important;
  }
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
  .pillar {
    padding: 1.5rem 1.3rem !important;
    border-radius: 8px !important;
  }
  .pillar-n {
    font-size: 1.8rem !important;
    margin-bottom: .6rem !important;
  }
  .pillar h3 {
    font-size: 1.05rem !important;
    margin-bottom: .5rem !important;
  }
  .pillar p {
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }

  /* PARALLAX SECTIONS */
  .parallax {
    min-height: 50vh !important;
    padding: 4rem 1.4rem !important;
    background-attachment: scroll !important;
  }
  .parallax-inner .quote-mark {
    font-size: 2.5rem !important;
    margin-bottom: .5rem !important;
  }
  .parallax-inner blockquote {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
  }

  /* USE SECTION */
  .use-sec {
    padding: 4rem 1.4rem !important;
  }
  .use-sec h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.4rem !important;
  }
  .use-sec p {
    font-size: .88rem !important;
    line-height: 1.75 !important;
  }

  /* TK SECTIONS (technique) */
  .tk-sec {
    padding: 4rem 1.4rem !important;
  }
  .tk-eyebrow {
    margin-bottom: 1rem !important;
    gap: .7rem !important;
  }
  .tk-ey-line { width: 25px !important; }
  .tk-ey-t {
    font-size: .58rem !important;
    letter-spacing: .18em !important;
  }
  .tk-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }
  .tk-lead {
    font-size: .88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 2rem !important;
  }
  .tk-drypole .tk-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .tk-visual {
    padding: 1.2rem !important;
    border-radius: 10px !important;
  }
  .tk-steps { gap: 1.4rem !important; }
  .tk-step {
    grid-template-columns: auto 1fr !important;
    gap: 1rem !important;
    padding-bottom: 1.2rem !important;
  }
  .tk-step-num {
    font-size: 1.4rem !important;
  }
  .tk-step-t {
    font-size: .98rem !important;
    margin-bottom: .35rem !important;
  }
  .tk-step-body p {
    font-size: .85rem !important;
    line-height: 1.55 !important;
  }
  .tk-result {
    padding: 1rem 1.2rem !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }
  .tk-configs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .8rem !important;
    margin-bottom: 2rem !important;
  }
  .tk-cfg {
    padding: 1rem .6rem !important;
    border-radius: 8px !important;
  }
  .tk-cfg-visual { height: 56px !important; }
  .tk-cfg-lbl { font-size: .72rem !important; }
  .tk-configs-note {
    padding: 1rem 1.2rem !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }
  .tk-silence-visual {
    padding: 1.2rem !important;
    margin-bottom: 2rem !important;
  }
  .tk-silence-cards {
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
    margin-bottom: 1.8rem !important;
  }
  .tk-scard {
    padding: 1.4rem 1.3rem !important;
  }
  .tk-scard h3 {
    font-size: 1rem !important;
    margin-bottom: .4rem !important;
  }
  .tk-scard p {
    font-size: .85rem !important;
    line-height: 1.55 !important;
  }
  .tk-silence-footer {
    padding: 1.2rem 1.4rem !important;
    border-radius: 8px !important;
  }
  .tk-silence-footer p {
    font-size: .9rem !important;
  }

  /* MATERIAUX */
  .mat-sec {
    padding: 4rem 1.4rem !important;
  }
  .mat-sec h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 2rem !important;
  }
  .mat-row {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  .mat-img { border-radius: 10px !important; }
  .mat-n {
    font-size: 1.7rem !important;
    margin-bottom: .5rem !important;
  }
  .mat-text h3 {
    font-size: 1.2rem !important;
    margin-bottom: .7rem !important;
  }
  .mat-text p {
    font-size: .85rem !important;
    line-height: 1.7 !important;
  }

  /* INSTALLATION */
  .inst-sec {
    padding: 4rem 1.4rem !important;
  }
  .inst-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .inst-img { border-radius: 10px !important; }
  .inst-text h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }
  .inst-text p {
    font-size: .88rem !important;
    line-height: 1.7 !important;
  }
  .inst-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
  }
  .inst-stat-n {
    font-size: 1.5rem !important;
  }
  .inst-stat-l {
    font-size: .58rem !important;
    letter-spacing: .1em !important;
  }

  /* FAQ */
  .faq-sec {
    padding: 4rem 1.4rem !important;
  }
  .faq-sec h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 2rem !important;
  }
  .faq-item {
    padding: 1.2rem 0 !important;
  }
  .faq-item summary {
    font-size: .92rem !important;
    gap: 1rem !important;
  }
  .faq-icon {
    font-size: 1.2rem !important;
  }
  .faq-item p {
    font-size: .85rem !important;
    line-height: 1.7 !important;
    margin-top: .9rem !important;
  }

  /* FINAL CTA */
  .final-cta {
    padding: 4.5rem 1.4rem !important;
  }
  .final-cta h2 {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }
  .final-cta p {
    font-size: .9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.8rem !important;
  }

  /* STICKY CTA — petit bouton bas droit */
  .sticky-cta {
    bottom: 1rem !important;
    right: 1rem !important;
    left: 1rem !important;
    padding: .85rem 1.2rem !important;
    font-size: .65rem !important;
    justify-content: center !important;
  }

  /* GALLERY MIX — Swipe carousel horizontal touch natif */
  .gal-mix-head {
    padding: 0 1.4rem .8rem !important;
    margin-top: 1.5rem !important;
  }
  .gal-mix-head h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    margin-top: .3rem !important;
    line-height: 1.1 !important;
  }
  .gal-mix {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 1.4rem 2rem !important;
    gap: .8rem !important;
  }
  .gal-mix::-webkit-scrollbar { display: none !important; }
  .gal-mix-item,
  .gal-mix-item.big,
  .gal-mix-item.small,
  .gal-mix-item.wide {
    flex: 0 0 88% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4/5 !important;
    border-radius: 10px !important;
    scroll-snap-align: center !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
  }
  .gal-mix-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* Bouton "Voir toutes les photos" injecté par JS, AU-DESSUS de la galerie
     mais juste en-dessous du titre, sans gros écart */
  .gal-mobile-viewall {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: .6rem 1.4rem .6rem !important;
    padding: .5rem .9rem !important;
    background: transparent !important;
    border: 1px solid rgba(10,10,10,.18) !important;
    border-radius: 4px !important;
    font-family: var(--sans, Inter, sans-serif) !important;
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    color: var(--dark, #0A0A0A) !important;
    cursor: pointer !important;
    align-self: flex-start !important;
  }
  .gal-mobile-viewall:active { background: rgba(10,10,10,.05) !important; }

  /* Modal galerie complète */
  .gal-mobile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    background: var(--bg, #F5F4F0) !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s ease !important;
  }
  .gal-mobile-modal.on {
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .gal-modal-head {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.4rem !important;
    border-bottom: 1px solid rgba(10,10,10,.08) !important;
    background: var(--bg, #F5F4F0) !important;
  }
  .gal-modal-head span {
    font-family: var(--serif, Inter, sans-serif) !important;
    font-size: 1rem !important;
    color: var(--dark, #0A0A0A) !important;
  }
  .gal-modal-close {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(10,10,10,.18) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: var(--dark, #0A0A0A) !important;
  }
  .gal-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: .8rem !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }
  .gal-modal-item {
    aspect-ratio: 4/5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .gal-modal-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CONFIGURATEUR — "aperçu" souligné + modal preview (PC + mobile)
   Pas de @media : visible aussi sur PC (le user veut sur les 2)
═══════════════════════════════════════════════════════════════════ */

/* Mot "aperçu" souligné dans l'angle de chaque .opt-item */
.opt-item { position: relative; }
.opt-preview-link {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--sans, Inter, sans-serif);
  font-size: .65rem;
  letter-spacing: .04em;
  color: var(--dark, #0A0A0A);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  padding: 2px 0;
}
.opt-preview-link:hover { opacity: .75; }
.opt-preview-link:active { opacity: .55; }

/* Modal preview — fullscreen avec X close style header */
.opt-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(10, 10, 10, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.opt-preview-modal.on {
  opacity: 1;
  pointer-events: all;
}
.opt-preview-content {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.opt-preview-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.opt-preview-label {
  font-family: var(--sans, Inter, sans-serif);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}
.opt-preview-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.opt-preview-close:hover {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08);
}

/* ═══════════════════════════════════════════════════════════════════
   CONFIGURATEUR — masquer le wireframe pergola + overlays
   sur TOUS viewports (mobile, tablette, PC)
   pour ne voir QUE la photo de la pergola configurée
═══════════════════════════════════════════════════════════════════ */
.pergola-wrap,
.carport-svg,
.img-ambient,
.opt-overlay,
.ov-led,
.ov-stores,
.ov-capteurs,
.ov-chauffage,
.ov-ventilo {
  display: none !important;
  opacity: 0 !important;
}
/* Garder uniquement imgBg (la photo de la pergola/carport configuré) */
.img-bg, .img-bg-next {
  z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE LIVRAISON — fix hero texte trop long sur image mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .liv-hero {
    min-height: 70vh !important;
    padding: calc(var(--nav-h, 58px) + 2rem) 1.4rem 3rem !important;
    background-attachment: scroll !important;
  }
  .liv-hero-eb {
    font-size: .55rem !important;
    letter-spacing: .15em !important;
    margin-bottom: 1rem !important;
  }
  .liv-hero-h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    margin-bottom: 1rem !important;
    max-width: 100% !important;
  }
  .liv-hero-sub {
    font-size: .82rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }
  .liv-hero-tag { display: none !important; }
  .liv-cta {
    background-attachment: scroll !important;
    padding: 4rem 1.4rem !important;
  }
  /* Sections "Solutions" + autres sections livraison */
  .liv-sol-eb { font-size: .55rem !important; }
  .liv-sol-h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .liv-sol-p { font-size: .85rem !important; line-height: 1.65 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TÉMOIGNAGES — adaptations mobile
   v43 — 2026-05-05 : combler le manque (zéro règle existait)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Section padding : 5rem 6vw → réduit */
  .tm-section {
    padding: 4rem 4vw !important;
  }
  /* Filtres territoires : scroll horizontal au lieu de wrap */
  .tm-filters {
    display: flex !important;
    gap: .5rem !important;
    margin: 0 -4vw 2rem !important;
    padding: 0 4vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tm-filters::-webkit-scrollbar { display: none !important; }
  .tf-btn {
    flex-shrink: 0 !important;
    padding: .55rem 1rem !important;
    font-size: .65rem !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  /* Grid cartes : 1 colonne sur mobile */
  .seo-tm-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .seo-tm-card {
    padding: 1.5rem 1.3rem !important;
  }
  .seo-tm-stars {
    font-size: .85rem !important;
    margin-bottom: .65rem !important;
  }
  .seo-tm-text {
    font-size: .9rem !important;
    line-height: 1.6 !important;
    margin-bottom: .9rem !important;
  }
  .seo-tm-author {
    font-size: .72rem !important;
  }
  .tc-territory-tag {
    font-size: .58rem !important;
    letter-spacing: .12em !important;
  }
  /* CTA final témoignages */
  .seo-cta-final {
    padding: 4rem 1.4rem !important;
    background-attachment: scroll !important;
  }
}
@media (max-width: 640px) {
  .tm-section { padding: 3rem 4vw !important; }
  .tf-btn { padding: .5rem .85rem !important; font-size: .62rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH UX — globally improve tap feedback & gestures
   v43 — 2026-05-05
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Désactive le flash gris/bleu d'iOS sur tap */
  a, button, [role="button"], input[type="submit"], input[type="button"], summary {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* touch-action: manipulation supprime le délai 300ms du double-tap zoom */
  a, button, [role="button"], input[type="submit"], input[type="button"],
  .btn-gold, .btn-hero-gold, .btn-hero-glass, .btn-glass-d, .btn-primary,
  .btn-ghost, .btn-nav, .btn-sec, .lang-btn, .cmo-close, .cmo-item,
  .ni, .ni-ext, .n-logo, .ft-link, .ft-ci, .tf-btn, .mml,
  .liv-faq-q, .opt-item, .gal-item, .real-card, .prod-card,
  details summary, .faq-q {
    touch-action: manipulation !important;
  }
  /* Prévient le sélecteur de texte accidentel sur double-tap des boutons */
  button, .btn-gold, .btn-hero-gold, .btn-hero-glass, .btn-glass-d,
  .btn-primary, .btn-ghost, .btn-nav, .btn-sec, .tf-btn,
  .lang-btn, [role="button"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  /* Active feedback discret au tap (remplace le hover) */
  a:active, button:active, [role="button"]:active,
  .btn-gold:active, .btn-hero-gold:active, .btn-primary:active,
  .btn-ghost:active, .btn-nav:active {
    opacity: .82 !important;
    transition: opacity .08s ease !important;
  }
  /* Empêche le rebond élastique sur les modals (sinon ça scroll la page derrière) */
  #contact-modal.on, .gal-mobile-modal.on, .opt-preview-modal.on {
    overscroll-behavior: contain !important;
  }
  /* Empêche zoom involontaire sur form inputs iOS (font < 16px déclenche le zoom) */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE LIVRAISON — fixes mineurs supplémentaires
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* CTA final : boutons stack vertical, padding réduit */
  .liv-cta-btns {
    flex-direction: column !important;
    gap: .7rem !important;
    align-items: stretch !important;
  }
  .liv-cta .btn-primary,
  .liv-cta .btn-ghost {
    width: 100% !important;
    text-align: center !important;
    padding: .95rem 1.5rem !important;
    font-size: .78rem !important;
  }
  /* Timeline : numéros plus discrets */
  .timeline-num {
    font-size: 1.6rem !important;
  }
  .timeline-step h4 {
    font-size: 1.05rem !important;
  }
  .timeline-step p {
    font-size: .85rem !important;
    line-height: 1.55 !important;
  }
  /* Cost cards : numéros plus petits */
  .liv-cost-num,
  .liv-why-num {
    font-size: 1.8rem !important;
  }
  .liv-cost-card,
  .liv-why-card {
    padding: 1.4rem 1.2rem !important;
  }
  .liv-cost-card h3,
  .liv-why-card h3 {
    font-size: 1rem !important;
  }
  .liv-cost-card p,
  .liv-why-card p {
    font-size: .85rem !important;
    line-height: 1.55 !important;
  }
  /* Conteneur maritime : checks alignés */
  .liv-ct-list li {
    gap: .8rem !important;
  }
  .liv-ct-list h5 {
    font-size: .95rem !important;
  }
  .liv-ct-list p {
    font-size: .82rem !important;
    line-height: 1.5 !important;
  }
  /* FAQ items */
  .liv-faq-q {
    font-size: .92rem !important;
  }
  .liv-faq-a {
    font-size: .85rem !important;
    line-height: 1.6 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES À PROPOS / GLOSSAIRE / FAQ — fixes responsive
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero pages secondaires : moins gros */
  .hero-fr .hero-fr-eb,
  .hero-fr-h1,
  .hero-fr-sub {
    max-width: 100% !important;
  }
  .hero-fr-h1 {
    font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
  .hero-fr-sub {
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }
  /* Hero blog */
  .blog-hero h1, .seo-hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX CRITIQUE — Nav TRANSPARENT par défaut sur pages avec hero
   v44 — 2026-05-05
   Problème : 51 pages avaient `nav { background:rgba(245,244,240,.94) }`
   par défaut, ce qui rendait le header BLANC même au top sur les pages
   avec hero (livraison, témoignages, blog, etc.). Le header doit être
   TRANSPARENT comme sur la home page.
═══════════════════════════════════════════════════════════════════ */

/* DESKTOP + MOBILE : pages AVEC hero → nav transparent par défaut */
body:not(.no-hero) nav:not(.s) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
/* Scrolled state (class "s" ajouté par JS quand scrollY > 60) → solid */
body:not(.no-hero) nav.s {
  background: rgba(245,244,240,0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--line, rgba(10,10,10,.08)) !important;
}
/* Pages SANS hero (body.no-hero ajouté par mobile-fx.js) → toujours solid */
body.no-hero nav {
  background: rgba(245,244,240,0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--line, rgba(10,10,10,.08)) !important;
}

/* Logo : sur pages avec hero (nav transparente) → texte BLANC, gold à droite */
@media (max-width: 1024px) {
  body:not(.no-hero) nav:not(.s) .n-logo {
    color: rgba(255,255,255,.95) !important;
  }
  body:not(.no-hero) nav.s .n-logo,
  body.no-hero .n-logo {
    color: var(--dark, #0A0A0A) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX LIVRAISON HERO — texte en 2 colonnes sur mobile (BUG)
   v44 — flex row par défaut → empile verticalement sur mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .liv-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    min-height: auto !important;
    padding: calc(var(--nav-h, 58px) + 3rem) 1.4rem 3rem !important;
  }
  .liv-hero-eb,
  .liv-hero-h1,
  .liv-hero-sub {
    max-width: 100% !important;
    width: 100% !important;
  }
  .liv-hero-tag {
    display: none !important;  /* Le tag vertical "PERGOLAS CARAÏBES" n'a pas sa place sur mobile */
  }
  /* CTA primary dans hero livraison (ajouté via HTML) */
  .liv-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin-top: 1rem !important;
    padding: .9rem 1.6rem !important;
    background: var(--gold, #D4A843) !important;
    color: #0A0A0A !important;
    font-size: .8rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: opacity .2s ease !important;
  }
  .liv-hero-cta:active {
    opacity: .85 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — assure aussi que livraison hero a bonne mise en page
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .liv-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .liv-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
    background: var(--gold, #D4A843);
    color: #0A0A0A;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .liv-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212,168,67,.35);
  }
}