/* ══════════════════════════════════════════════════════════════════════
   RANDOPLAK — CORRECTIFS D'AFFICHAGE TÉLÉPHONE / TABLETTE
   Chargé en dernier dans <head> par les pages de commande / devis.
   TOUTES les règles sont dans des @media (max-width:…) : l'affichage PC
   (plus de 1024 px de large) n'est jamais touché.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tablette et téléphone (≤ 1024 px) ── */
@media (max-width: 1024px) {
  /* La colonne unique du formulaire ne doit jamais dépasser l'écran :
     sans « minmax(0,1fr) », un long mot ou une rangée de pastilles
     élargissait toute la colonne et le texte était coupé à droite. */
  .cmd-main { grid-template-columns: minmax(0, 1fr); }
  .cmd-main > * { min-width: 0; }

  /* Barre des étapes (1 · Mode de commande, 2 · Votre fichier…) :
     elle défile horizontalement au doigt au lieu d'élargir la page. */
  .steps-nav-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .steps-nav-inner::-webkit-scrollbar { display: none; }
  .step-tab { flex-shrink: 0; }

  /* Cartes « mode de commande » : rond de sélection, icône, texte. */
  .mode-card { grid-template-columns: auto auto minmax(0, 1fr); }
  .mode-content { min-width: 0; }
}

/* ── Téléphone (≤ 600 px) ── */
@media (max-width: 600px) {
  /* Titre du bandeau : taille adaptée à la largeur de l'écran. */
  .cmd-hero h1 { font-size: clamp(30px, 10vw, 44px); }
  .cmd-hero h1, .cmd-hero h1 em { overflow-wrap: break-word; }

  /* Cartes « mode de commande » : rond + icône sur la 1re ligne,
     texte sur toute la largeur en dessous. */
  .mode-card { padding: 20px; gap: 14px 16px; }
  .mode-card > .mode-content { grid-column: 1 / -1; }
  .mode-tags { flex-wrap: wrap !important; }

  /* Page Dossards : les 4 atouts passent sur 2 colonnes. */
  .dossard-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONFIGURATEURS (plaque, dossard, flyer) — ajout du 15/10/2026
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Phrase sous le titre (« Choisissez votre gabarit… ») : elle était
     forcée sur une seule ligne, débordait du cadre et obligeait le
     téléphone à dézoomer toute la page. */
  .cfg-header .section-sub { white-space: normal; }
}
@media (max-width: 900px) {
  /* Éditeur en une colonne : la colonne ne s'élargit plus quand on
     zoome au-delà de 100 % ; seul le gabarit défile dans son cadre. */
  .editor-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .editor-layout > * { min-width: 0; }
  #editorCenterCol, .editor-canvas-wrap { min-width: 0; width: 100%; box-sizing: border-box; }
  .canvas-viewport { max-width: 100%; }
}

/* Zoom tactile (zoom-mobile.js) : ces règles ne s'appliquent que si le
   script est actif (classe ajoutée sur <html>, écran tactile ≤ 1024 px). */
@media (max-width: 1024px) {
  /* Désactive le zoom « double tap » du navigateur (le pincement reste
     possible) : le double tap sert à revenir à 100 %. */
  .rp-zoom-tactile body { touch-action: manipulation; }
  /* Dans la zone de création, le pincement zoome le gabarit, pas la page. */
  .rp-zoom-tactile .canvas-viewport { touch-action: pan-x pan-y; }
  .rp-zoom-retour {
    display: none; position: fixed; left: 0; top: 0; z-index: 10000;
    transform-origin: 0 0; padding: 10px 18px; border: 0; border-radius: 999px;
    background: #E8521A; color: #fff; font: 700 14px/1 var(--font-body, sans-serif);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; white-space: nowrap;
  }
}