/* ═══════════════════════════════════════════════════
   CHORBANE v19 — mobile-fix.css
   Correctifs mobile + iOS · Doit être chargé en dernier
   Cible : iOS Safari, Chrome mobile, et tous écrans < 960px
   ═══════════════════════════════════════════════════ */

/* ── 1. HAUTEUR VIEWPORT iOS ─────────────────────────
   Sur iOS, 100vh inclut la barre d'URL Safari → coupe
   le contenu. On utilise svh/dvh (small/dynamic viewport
   height) avec fallback 100vh pour les vieux navigateurs.
   ──────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
}
.mobile-drawer,
.cart-drawer {
  height: 100vh;
  height: 100dvh;
}

/* Empêcher tout débordement horizontal sur le body — origine
   classique des "scrolls fantômes" qui rendent iOS inutilisable */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 2. iOS — RESET TAP HIGHLIGHT + TOUCH ────────────
   Le rectangle gris au toucher est visuellement cassé
   sur ce design éditorial sombre. On le neutralise.
   ──────────────────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}
button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* supprime délai 300ms iOS */
}

/* ── 3. iOS — INPUTS 16px MINIMUM ────────────────────
   iOS Safari zoom automatiquement quand un input a une
   font-size < 16px. On force 16px minimum en focus.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px !important;
  }
}

/* ── 4. SAFE AREA — iPhone à encoche / Dynamic Island ─
   On respecte l'env(safe-area-inset-*) pour éviter que
   le contenu ne soit recouvert par l'encoche ou la barre.
   ──────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .mobile-drawer {
    padding-top: calc(3rem + env(safe-area-inset-top));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    padding-right: calc(2.5rem + env(safe-area-inset-right));
  }
  .cart-drawer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .site-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* ── 5. CIBLES TACTILES — taille minimale 44×44 ──────
   Norme Apple HIG : tout élément interactif doit faire
   au moins 44px de côté sur mobile.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle,
  .theme-toggle,
  .cart-btn,
  .drawer-close,
  .cart-close,
  .back-top {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-right {
    gap: .35rem;
  }
  /* Boutons primaires confortables */
  .btn-primary,
  .btn-ghost,
  .btn-checkout,
  .btn-add-cart,
  .btn-whatsapp,
  .btn-email-big,
  .btn-submit {
    min-height: 48px;
  }
  /* Liens du drawer doivent être largement tappables */
  .mobile-drawer a {
    padding: .4rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .ls-btn {
    min-height: 36px;
    min-width: 36px;
  }
}

/* ── 6. NAVBAR — densité mobile correcte ────────────
   Sur petits écrans la navbar débordait à cause de la
   gap trop large et du padding excessif.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .navbar {
    padding: 1rem 1.2rem !important;
    gap: .8rem;
  }
  .site-header.scrolled .navbar {
    padding: .75rem 1.2rem !important;
  }
  .nav-logo span {
    font-size: .82rem;
    letter-spacing: .3em;
  }
  .nav-logo svg {
    width: 18px;
    height: 18px;
  }
  .container,
  .container-full {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}

/* Sur très petits écrans on cache le label "CHORBANE" pour
   éviter que le panier + thème + menu ne se chevauchent */
@media (max-width: 380px) {
  .nav-logo span {
    display: none;
  }
}

/* ── 7. CURSEUR PERSONNALISÉ — désactivé sur tactile ─
   La media query (pointer:coarse) couvre la plupart des
   cas mais on renforce ici pour iOS qui parfois fait
   passer un faux "fine pointer".
   ──────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse), (max-width: 960px) {
  .cursor {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

/* ── 8. MOBILE DRAWER — comportement iOS correct ────
   Le drawer utilisait position:fixed + right:-100% qui
   sur iOS pouvait créer un scroll horizontal. On bascule
   sur transform pour rester GPU-only.
   ──────────────────────────────────────────────────── */
.mobile-drawer {
  right: 0;
  transform: translateX(100%);
  transition: transform .4s var(--ease) !important;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.mobile-drawer.open {
  transform: translateX(0);
  right: 0;
}
@media (max-width: 380px) {
  .mobile-drawer {
    width: 88%;
  }
}

/* Cart drawer — même traitement */
.cart-drawer {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 680px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
    right: 0;
    transform: translateX(100%);
    transition: transform .4s var(--ease) !important;
  }
  .cart-drawer.open {
    transform: translateX(0);
  }
}

/* ── 9. ANIMATIONS LOURDES — désactivées sur mobile ──
   Sur iOS les animations 3D/blur tuent la performance.
   On les neutralise sous 768px.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Pas de blur lourd dans le hero */
  .hero-shape {
    filter: blur(60px) !important;
  }
  /* Pas de parallax / depth canvas */
  .hero-depth-canvas,
  .hdc-amber,
  .hdc-beam,
  .hdc-lines {
    display: none !important;
  }
  /* Le grain reste, mais sans animation */
  .grain-overlay {
    opacity: .3;
  }
  /* Désactiver les tilts 3D et lift au hover */
  .pi:hover,
  .medal:hover,
  .pei-content:hover,
  .impact-item:hover,
  .ct-form-box:hover,
  .hi-prod-preview:hover,
  .hi-awards:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* will-change agressif → laisser le navigateur gérer */
  .bottle-prod-wrap,
  .chorbane-bottle-svg,
  .hi-bottle {
    will-change: auto !important;
  }
}

/* ── 10. HERO — typographie et bouteille mobile ─────
   Sur mobile la bouteille SVG du hero débordait parfois
   à cause d'une marge externe. On clamp tout proprement.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .hero {
    padding: 0 .8rem;
  }
  .hero-content {
    padding-top: calc(var(--nav-h) + 1rem);
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .hero-title {
    font-size: clamp(2.2rem, 8.5vw, 3rem) !important;
    line-height: 1.08;
  }
  .hero-sub {
    font-size: 1rem;
    line-height: 1.7;
  }
  .hst {
    padding: 0 .8rem;
  }
}

/* ── 11. HOME — éditorial / lien contact CTA ────────
   Sur mobile la section .hi-right empilait mal les
   liens. On force une marge correcte.
   ──────────────────────────────────────────────────── */
@media (max-width: 580px) {
  .hi-editorial {
    gap: 2rem !important;
  }
  .hi-prod-preview,
  .hi-awards,
  .hi-link {
    width: 100%;
  }
  .hi-contact-cta {
    width: 100%;
    text-align: center;
  }
}

/* ── 12. SECTIONS — padding mobile resserré ─────────
   Les sections respiraient trop sur petit écran
   (8.5rem hérité du desktop). On rééquilibre.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .section {
    padding: 4.5rem 0 !important;
  }
}
@media (max-width: 480px) {
  .section {
    padding: 3.5rem 0 !important;
  }
  .page-hero {
    padding: 6rem 0 3rem !important;
  }
}

/* ── 13. PRODUITS — édito intro + lignes produits ───
   Bug signalé : "l'image et le texte ne s'affichent pas
   correctement sur téléphone". Origine :
   • .pei-image utilise object-fit:cover → bouteille
     centrée mais coupée en bas/haut
   • .pei-content avait une bordure-left héritée du
     desktop qui créait une ligne disgracieuse
   • La grille 1fr 1.6fr est cassée sur mobile par
     les paddings hérités
   ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .prod-editorial-intro {
    grid-template-columns: 1fr !important;
    margin-bottom: 4rem !important;
    border: 1px solid var(--bd-card);
  }
  /* La photo produit doit être ENTIÈRE — pas croppée.
     contain au lieu de cover, car c'est un packshot. */
  .pei-image {
    min-height: 280px !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    background: var(--bg-alt) !important;
  }
  .pei-image img,
  .pei-image .pei-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 1rem;
  }
  /* Contenu texte — pleine largeur, padding raisonnable */
  .pei-content {
    padding: 2rem 1.4rem 2.2rem !important;
    border-left: none !important;
    border-top: 1px solid var(--bd-card) !important;
  }
  .pei-content::before {
    display: none !important;
  }
  .pei-title {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    line-height: 1.18 !important;
  }
  .pei-text {
    max-width: 100% !important;
    font-size: .96rem !important;
    line-height: 1.78 !important;
  }
  .pei-trust {
    margin-bottom: 1.4rem !important;
  }
  .pei-trust-item {
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }
  .pei-signature strong {
    font-size: .92rem !important;
  }
  .pei-coords {
    display: none !important;
  }
}

/* Lignes produits (Classique / Prestige / Millésime) */
@media (max-width: 960px) {
  .prod-row {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Visuel TOUJOURS au-dessus, texte EN-DESSOUS — quelle
     que soit la parité de la ligne */
  .prod-row .prod-visual,
  .prod-row:nth-child(even) .prod-visual {
    order: 1 !important;
  }
  .prod-row .prod-text,
  .prod-row:nth-child(even) .prod-text {
    order: 2 !important;
    border-left: 1px solid var(--bd-card) !important;
    border-right: 1px solid var(--bd-card) !important;
    border-top: none !important;
  }
  .prod-visual {
    min-height: 340px !important;
    padding: 2rem 1rem !important;
  }
  .prod-bottle-wrap {
    padding: 1rem !important;
  }
}

@media (max-width: 680px) {
  .prod-editorial-intro {
    margin-bottom: 3rem !important;
  }
  .pei-image {
    min-height: 240px !important;
    aspect-ratio: 4/3 !important;
  }
  .pei-content {
    padding: 1.6rem 1.2rem 2rem !important;
  }
  .pei-label {
    font-size: .54rem !important;
    margin-bottom: 1rem !important;
  }
  .pei-signature {
    padding-top: 1rem !important;
    margin-top: .6rem !important;
  }
  .prod-visual {
    min-height: 280px !important;
    padding: 1.6rem .8rem !important;
  }
  .prod-text {
    padding: 2rem 1.4rem !important;
  }
  .prod-title {
    font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
    line-height: 1.12 !important;
  }
  .prod-desc {
    font-size: .92rem !important;
    line-height: 1.78 !important;
  }
  .prod-badge,
  .prod-origin-tag {
    font-size: .56rem !important;
  }
  /* Sélecteur de format — pleine largeur, boutons généreux */
  .size-options {
    display: flex !important;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .size-opt {
    flex: 1 1 auto;
    min-width: 84px;
    padding: .65rem .5rem !important;
    font-size: .8rem !important;
  }
  .prod-buy {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .prod-price {
    text-align: center;
  }
  .btn-add-cart {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 14. HISTOIRE — image fondatrice & h-facts ──────
   Sur mobile la photo de la fondatrice + le stat-pill
   superposaient mal.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .histoire-grid {
    gap: 2.5rem !important;
  }
  .hist-img-slot {
    aspect-ratio: 4/5 !important;
    max-height: 380px;
    width: 100%;
  }
  .stat-pill {
    bottom: -.6rem !important;
    right: 0 !important;
  }
  .h-facts {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem !important;
    justify-content: space-between;
  }
  .hf {
    flex: 1 1 auto;
    min-width: 30%;
  }
}

/* ── 15. CONTACT — grille mobile + box claire ───────
   Sur mobile la grille 2 colonnes empile mal, et le
   ct-direct-box paraissait flottant. On stabilise.
   ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 680px) {
  .ct-addr {
    margin: 1.4rem 0 !important;
  }
  .ct-social {
    flex-wrap: wrap;
    gap: .6rem !important;
  }
  .soc-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: .65rem 1rem !important;
  }
  .ct-form-box {
    padding: 1.8rem 1.4rem !important;
  }
  .ct-direct-box {
    padding: 1.8rem 1.3rem !important;
  }
  .ctd-title {
    font-size: 1.35rem !important;
  }
  .ctd-body {
    font-size: .94rem !important;
  }
  .btn-whatsapp {
    padding: .95rem 1.1rem !important;
    font-size: .88rem !important;
  }
  .bem-addr {
    font-size: .98rem !important;
    word-break: break-word;
  }
}

/* ── 16. FOOTER — colonnes propres sur mobile ───────
   Les 3 colonnes du footer s'écrasaient. Stack net.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .ft-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ft-nav {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ft-col h4 {
    margin-bottom: .8rem;
  }
  .ft-bottom {
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    padding: 1.5rem 0;
  }
}

/* ── 17. PAGE HERO — taille adaptée mobile ──────────
   Le page-hero avait un padding-top trop important
   et l'eyebrow était presque invisible.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .page-hero {
    padding: 6.5rem 0 3.5rem !important;
  }
  .page-hero-inner {
    padding: 0 .5rem;
  }
  .ph-eyebrow {
    font-size: .58rem !important;
    letter-spacing: .25em !important;
    margin-bottom: 1.1rem;
  }
  .ph-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.12 !important;
  }
  .ph-sub {
    font-size: .94rem !important;
    line-height: 1.7;
  }
}

/* ── 18. PANIER (page de commande) ──────────────────
   Grille summary + form qui s'écrasait.
   ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .checkout-summary {
    position: static !important;
    order: -1;
  }
}

/* ── 19. SECTIONS LABELS sur mobile ─────────────────
   Le sec-label déclenchait un wrap moche.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .sec-label {
    flex-wrap: nowrap;
    gap: .8rem !important;
    margin-bottom: 2.5rem !important;
  }
  .sec-title {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
}

/* ── 20. CART DRAWER MOBILE ─────────────────────────
   Sur iPhone le cart-drawer débordait par la droite.
   ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .cart-drawer-head {
    padding: 1.2rem 1.4rem;
  }
  .cart-foot {
    padding: 1.2rem 1.4rem;
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  }
  .cart-items {
    padding: 1.2rem 1.4rem;
  }
}

/* ── 21. BACK-TOP — bouton confortable sur tactile ──*/
@media (max-width: 680px) {
  .back-top {
    bottom: calc(1.2rem + env(safe-area-inset-bottom)) !important;
    right: 1.2rem !important;
    width: 44px;
    height: 44px;
  }
}

/* ── 22. SCROLLBAR — masqué sur mobile ──────────────
   La scrollbar de 3px gênait sur iOS WebView.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    display: none;
  }
}

/* ── 23. ZOOM iOS au double-tap — désactivé ─────────*/
@media (max-width: 768px) {
  body {
    touch-action: pan-y;
  }
  .cart-drawer,
  .mobile-drawer {
    touch-action: pan-y;
  }
}

/* ── 24. ANIMATIONS REVEAL — fallback rapide ────────
   Si JS échoue à ajouter .in, on force l'affichage
   après 2s pour ne pas laisser du contenu invisible.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  @keyframes mobileSafetyReveal {
    to { opacity: 1; transform: none; }
  }
  .ai, .fu, .fl, .fr {
    animation: mobileSafetyReveal 0s linear 2.5s forwards;
  }
  /* Quand .in est ajouté, on garde le comportement normal */
  .ai.in, .fu.in, .fl.in, .fr.in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}