/* ============================================================
   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 */
  .detail { display: flex; flex-direction: column; gap: var(--space-3); }
  .detail > .scene-col, .detail > div:last-child, .detail > div:nth-last-child(2) { display: contents; }

  /* 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 : 1) choisir l'œuvre  2) exemple en situation  3) choisir le format
     4) simulation  5) prix  6) Ajouter au devis  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 .scene-frame        { order: 4; max-width: 100%; margin: 0; width: 100%; }
  .detail > div > .notice     { order: 5; }
  .detail .detail__pricesum   { order: 6; }
  .detail .pay-teaser         { order: 7; }
  .detail .add-block          { order: 8; }
  .detail .delais-note        { order: 9; }
  .detail .gallery            { width: 100%; }

  /* Sélecteur de format : grandes cibles, lisible */
  .format-pick__title { font-size: 13px; }
  .format-pick__work { display: none; }
  .format-pick__hint { font-size: 12px; }
  .format-opt { padding: 16px 14px; min-height: 60px; }
  .format-opt__name { font-size: 16px; }

  /* 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 dans le flux (non collant) : reste à sa place quand on fait défiler */
  .add-block { 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; }
}