/* ============================================================
   Ludovic Baron Art · passe d'optimisation mobile & tablette
   Chargé APRÈS app.css. Respecte la charte (noir, beige, hairlines).
   Objectifs : cibles tactiles ≥ 44px, lecture confortable, zéro
   débordement horizontal, modales plein écran, tableaux admin
   défilables, simulateur et panier lisibles d'une main.
   ============================================================ */

/* ---- Garde-fous globaux ---- */
* { -webkit-tap-highlight-color: transparent; }
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* ============================ TABLETTE (≤ 1024px) ============================ */
@media (max-width: 1024px) {
  .wrap, .wrap-narrow { padding-left: var(--space-3); padding-right: var(--space-3); }
  .detail { grid-template-columns: 1fr; gap: var(--space-3); }
  .sim-grid { grid-template-columns: 1fr; }
  /* cibles tactiles confortables */
  .btn, .text-link, .a-tab, .nav__links a, .seg button { min-height: 44px; }
  .btn { padding: 14px 24px; }
}

/* ============================ MOBILE (≤ 720px) ============================ */
@media (max-width: 720px) {
  /* Rythme typographique resserré pour petit écran */
  :root {
    --display-xl-size: 34px; --display-l-size: 30px;
    --display-m-size: 25px; --display-s-size: 21px;
  }
  .wrap, .wrap-narrow { padding-left: var(--space-2); padding-right: var(--space-2); }
  section { padding-top: var(--space-4); padding-bottom: var(--space-4); }

  /* Boutons : pleine largeur quand seuls dans une pile d'action */
  .btns { flex-direction: column; align-items: stretch; }
  .btns .btn { width: 100%; justify-content: center; }

  /* Panier : ligne en pile nette */
  .cart-line__head { gap: var(--space-2); }
  .cart-line__thumb { width: 64px; height: 64px; }
  .cart-line__row { gap: var(--space-2); }
  .cart-line__price { text-align: left; align-items: flex-start; }
  .cart-controls { width: 100%; justify-content: space-between; }

  /* Simulateur : scène pleine largeur, panneau d'info aéré */
  .scene-frame { padding: var(--space-1); }
  .scene-zoom-btn { width: 42px; height: 42px; }
  .scene-spec__lead { font-size: 15px; }

  /* Sélecteur de format : grille au lieu d'une rangée serrée */
  .format-grid { gap: 8px; }

  /* Stepper : doigts */
  .stepper button { width: 44px; height: 44px; }

  /* Catalogue : 1 colonne lisible, filtres défilables */
  .cat-filters { gap: var(--space-2); }
  .cat-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .cat-chip { flex: none; min-height: 40px; }

  /* Œuvre · détail */
  .work-buy__opt { padding: 14px 16px; }

  /* Mon compte */
  .profile-disclose__summary { padding: 16px var(--space-2); }
  .field-grid-2 { grid-template-columns: 1fr; }

  /* Réservation : décompte qui ne déborde pas */
  .reserve-banner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .reserve-banner .btn { width: 100%; justify-content: center; }
  .reserve-countdown { min-width: 0; }
  .reserve-countdown__clock { flex-wrap: wrap; }

  /* Pied de page compact */
  .footer__cols { grid-template-columns: 1fr; }
}

/* ============================ MODALES PLEIN ÉCRAN (≤ 600px) ============================ */
@media (max-width: 600px) {
  .lb-modal { padding: 0; align-items: stretch; }
  .lb-modal__panel { max-width: none; width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; }
  .lb-modal__panel { padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-2)); }
  .work-pop { grid-template-columns: 1fr; }
  .work-pop__media { min-height: 42vh; }
  .work-pop__img { min-height: 0; }
  .wp-grid { grid-template-columns: 1fr 1fr; }

  /* Sélecteur de titre / œuvre choisie : confort tactile */
  .title-pick { padding: 16px; min-height: 52px; }
  .selwork__media { width: 64px; height: 64px; }

  /* Pool admin : 1 colonne */
  .pool-grid { grid-template-columns: 1fr; }
  .assign-bar .chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Inputs : 16px pour bloquer le zoom auto iOS */
  .input, input.input, textarea.input, select.input,
  .welcome__input, .work-picker__search { font-size: 16px; }

  /* Sélecteur Particulier / Professionnel : deux moitiés égales, pleine largeur */
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 14px 10px; }
}

/* ============================ ADMIN sur petit écran ============================ */
@media (max-width: 860px) {
  /* Tableaux denses : défilement horizontal plutôt que casse */
  .fiche-scroll, .conn-table, .promo-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .a-title { font-size: clamp(22px, 5vw, 30px); }
  /* Les onglets admin restent défilables (déjà géré) mais on agrandit la zone tactile */
  .a-tab { min-height: 48px; }
}

/* ============================ FICHE PRODUIT — codes de la vente d'art en ligne (mobile) ============================ */
@media (max-width: 860px) {
  /* En-tête sobre : pas d'image flottante, titre net */
  .gamme-head__img { display: none; }
  .gamme-head__title { font-size: clamp(28px, 8vw, 38px); }
  .gamme-head__sub { font-size: 15px; max-width: 100%; }

  /* On aplatit les deux colonnes pour ordonner le parcours d'achat (fiche produit
     uniquement · la page Leasing réutilise .detail mais doit rester en pile simple). */
  .detail { display: flex; flex-direction: column; gap: 10px; }
  .detail:not(.detail--lease) > .scene-col,
  .detail:not(.detail--lease) > div:last-child,
  .detail:not(.detail--lease) > div:nth-last-child(2) { display: contents; }

  /* Page Leasing : flux vertical 1 → 2 → 3. L'étape 1 (format · scène + choix) vit
     désormais dans .scene-col et doit rester EN PREMIER, au-dessus de l'étape 2. */
  .detail--lease { gap: 18px; }
  .detail--lease > .scene-col { order: 1; }
  .detail--lease > .lease-panel { order: 2; }
  .lease-panel { gap: 16px; }
  .lease-sim { gap: 14px; }
  .lease-fmt-name { display: none; }
  .lease-sim .fmt-pick { gap: 8px; }
  .lease-sim .fmt-dd__trigger { padding: 13px 14px; }
  .lease-kpi .kpi { padding: 13px 12px; }
  .lease-kpi .kpi__val { font-size: 19px; margin-top: 5px; }
  .lease-cta-wrap .btn { min-height: 50px; }

  /* Espacement homogène : le gap du conteneur gère tout, on neutralise les
     marges en ligne propres à chaque bloc pour un rythme régulier. */
  .detail .scene-gallery,
  .detail .scene-frame,
  .detail .format-pick,
  .detail .title-field,
  .detail > div > .notice,
  .detail .detail__pricesum,
  .detail .pay-teaser,
  .detail .add-block,
  .detail .delais-note { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* PARCOURS resserré pour acheter sans trop de swipe :
     1) œuvre  2) image (hauteur plafonnée)  3) format  4) prix  5) Ajouter au devis
     puis, plus bas : 6) simulation  7) infos  8) paiement  9) délais */
  .detail .title-field        { order: 1; }
  .detail .scene-gallery      { order: 2; width: 100%; }
  .detail .format-pick        { order: 3; }
  .detail .detail__pricesum   { order: 4; }
  .detail .pay-teaser         { order: 5; }
  .detail .add-block          { order: 6; }
  .detail .scene-frame        { order: 7; max-width: 100%; margin: 0; width: 100%; }
  .detail > div > .notice     { order: 8; }
  .detail .delais-note        { order: 9; }
  .detail .gallery            { width: 100%; }

  /* Le prix ne s'affiche QUE dans la section « Comment souhaitez-vous régler ? » :
     on masque le récap-prix autonome (l'encadrement, lui, reste visible). */
  .detail .detail__pricebox--mobhide { display: none; }
  .pay-teaser__price { display: flex; }

  /* Stage situationnel : on plafonne la HAUTEUR du cadre carré (l'image reste en
     "cover", donc la zone de cadre en % reste alignée). Surtout pas d'object-fit ici. */
  .detail .scene-gallery .gallery__stage { max-height: 38vh; }
  /* Image + choix de la taille visibles ENSEMBLE : on supprime tout l'espace superflu */
  .detail .scene-gallery .gallery { padding: 0; border: 0; background: none; }
  .detail .scene-gallery .gallery__cap { display: none; }
  .detail .scene-gallery .gallery__thumbs { display: none; }
  .detail .format-pick { margin-top: 0 !important; }
  .detail .format-pick__head, .detail .format-pick__title { margin-bottom: 4px; }

  .fav-sec__eyebrow { display: none; }
  /* Vignettes d'accueil : texte plus lisible sur mobile (texte complet conservé dans le DOM → SEO intact) */
  .univ-card__photo { object-position: var(--tpos-m, 50% 50%) !important; transform: scale(var(--tzoom-m, 1)) !important; transform-origin: var(--tpos-m, 50% 50%) !important; }
  .insitu__inner { width: auto !important; height: 100% !important; min-width: 100% !important; left: 50% !important; transform: translateX(-50%) translateY(var(--icrop-m, 0%)) scale(var(--izoom-m, 1)) !important; transform-origin: top center !important; }
  .univ-card__sub { font-size: 13px; line-height: 1.45; color: var(--ink-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .univ-card__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0.92) 74%, #000 100%); }
  .univ-card__content { padding: var(--space-2) var(--space-2) calc(var(--space-2) + 2px); }
  .univ-card__foot { margin-top: 12px; padding-top: 12px; }
  .format-pick__title { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 4px; }
  .format-pick__work { display: none; }
  .format-pick__hint { font-size: 11px; }
  .format-grid { gap: 5px; }
  .format-opt { padding: 8px 10px; min-height: 38px; }
  .format-opt__name { font-size: 13px; }
  .format-opt__pack, .format-opt__qty { font-size: 10px; }

  /* Bloc production · délais : un peu d'air à droite pour que le texte ne colle pas au bord */
  .delais-note { padding: 14px 18px; gap: 12px; }

  /* Récap prix : grand prix lisible d'un coup d'œil */
  .detail__name { font-size: clamp(22px, 6vw, 28px) !important; }
  .detail__price { font-size: clamp(30px, 9vw, 40px); }

  /* CTA collant : reste en bas de l'écran et suit le défilement → toujours à portée */
  .add-block { position: sticky; bottom: 0; z-index: 5;
    background: var(--canvas); padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--accent); }
  .add-block .btn { min-height: 52px; padding: 15px 24px; }
}

@media (max-width: 520px) {
  .add-block .spread { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .add-block .btn { width: 100%; justify-content: center; }
  .add-block .body-s { text-align: center; }
}