@charset "UTF-8";
/* =====================================================================
   Monblazon — finitions téléphone (chargé APRÈS le style de chaque page)
   Règles communes à tout le site + quelques retouches par page.
   ===================================================================== */

/* ---------- Commun ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

@media screen and (max-width: 640px){
  /* Pas de défilement horizontal parasite. « clip » ne crée PAS de zone de
     défilement : avec « hidden » sur html ET body, certains Android (Samsung
     Internet, appli installée) bloquaient complètement le défilement vertical. */
  html, body{ overflow-x:clip; }
  img, video, canvas, iframe{ max-width:100%; }
  /* iPhone : un champ en dessous de 16 px fait zoomer toute la page au toucher. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea{ font-size:16px !important; }
  /* Textes longs (n° de devis, emails, liens) : jamais de débordement. */
  h1, h2, h3, p, td, th, li, label, a, strong, span{ overflow-wrap:anywhere; }
  .btn, button{ overflow-wrap:normal; }
  textarea{ min-height:96px; }
  /* Champ « fichier » natif lisible partout. */
  input[type=file]{ max-width:100%; font-size:14px; }
  input[type=file]::file-selector-button{
    margin-right:10px; padding:8px 12px; border:0; border-radius:8px;
    background:#F0F0F2; color:#1D1D1F; font:inherit; font-weight:600; cursor:pointer;
  }
}

/* Anciens navigateurs sans « clip » : seulement sur html (jamais sur body). */
@supports not (overflow-x: clip){
  @media screen and (max-width: 640px){ html, body{ overflow-x:visible; } html{ overflow-x:hidden; } }
}

/* ---------- Tableaux transformés en cartes (assets/mobile.js) ---------- */
@media screen and (max-width: 640px){
  table.m-stack{ display:block; width:100% !important; min-width:0 !important; border:0; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
  table.m-stack thead{ display:none; }
  table.m-stack tbody, table.m-stack tfoot{ display:block; }
  table.m-stack tr{
    display:block; margin:0 0 12px; padding:6px 14px;
    background:#fff; border:1px solid #E5E5EA; border-radius:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  table.m-stack td, table.m-stack th{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    width:auto !important; min-width:0 !important; max-width:none !important;
    padding:9px 0 !important; border:0 !important; border-bottom:1px solid #F0F0F2 !important;
    text-align:right !important; font-size:14px; white-space:normal !important;
    position:static !important;
  }
  table.m-stack tr > :last-child{ border-bottom:0 !important; }
  table.m-stack td::before, table.m-stack th::before{
    content:attr(data-m-label); flex:0 0 auto; max-width:45%;
    text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.03em;
    text-transform:uppercase; color:#6E6E73;
  }
  table.m-stack td[data-m-label=""]::before, table.m-stack th[data-m-label=""]::before{ content:none; }
  table.m-stack td[data-m-label=""], table.m-stack th[data-m-label=""]{ justify-content:flex-end; }
  table.m-stack td.m-full, table.m-stack th.m-full{ display:block; text-align:left !important; }
  table.m-stack td.m-full::before, table.m-stack th.m-full::before{ content:none; }
  table.m-stack td > *, table.m-stack th > *{ min-width:0; }
  table.m-stack form{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; margin:0; }
  table.m-stack input[type=number], table.m-stack input[type=text]{ max-width:140px; }
  table.m-stack tfoot tr{ background:#F5F9FF; border-color:#D6E6FB; }
  /* Conteneurs à défilement horizontal devenus inutiles. */
  .m-stack-wrap{ overflow:visible !important; box-shadow:none !important; background:transparent !important; border:0 !important; }
}

/* ---------- Page de connexion (index.php) ---------- */
/* Téléphone : connexion au centre de l'écran, encart « Rejoins-nous » centré
   juste en dessous du formulaire. */
@media screen and (max-width: 900px){
  .access-gate{ justify-content:flex-start !important; }
  .access-gate > .gate-wrap{ margin-top:auto !important; margin-bottom:0 !important; }
  .access-gate > .join-cta{
    order:2 !important; align-self:center !important;
    display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important;
    width:100% !important; max-width:360px !important;
    margin:26px auto auto !important; padding:16px 18px !important;
    text-align:center !important; border-radius:16px !important;
  }
  .access-gate > .join-cta p{ font-size:14px !important; line-height:1.4 !important; }
  .access-gate > .join-cta p br{ display:none; }
  .access-gate > .join-cta p strong:first-child::after{ content:" "; }
  .access-gate > .join-cta p .join-free{ display:block; margin-top:2px; }
  .access-gate > .join-cta span.btn-like{ width:100%; padding:11px 14px !important; font-size:14px !important; border-radius:10px !important; }
}

/* ---------- Boutique (index.php connecté) ---------- */
@media screen and (max-width: 640px){
  /* Produits sur 2 colonnes : moins de défilement, lecture « boutique ». */
  #produits .product-grid{
    display:grid !important; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line, #E5E5EA) !important; border-radius:16px; overflow:hidden;
  }
  #produits .product{
    border:0 !important; border-radius:0 !important; padding:20px 10px 18px !important;
    display:flex !important; flex-direction:column; align-items:center;
  }
  #produits .product .icon{ width:32px; height:32px; margin:0 auto 12px; }
  #produits .product h3{ font-size:15.5px !important; line-height:1.25 !important; margin-bottom:6px; overflow-wrap:break-word; hyphens:auto; }
  #produits .product p{ font-size:12.5px !important; line-height:1.4 !important; margin-bottom:8px; }
  #produits .product .price{ font-size:15px !important; margin-top:auto; }
  #produits .product .fabric{ font-size:11.5px; }
  #produits .product .stock-badge, #produits .product .soldout-badge, #produits .product .limited-badge{ font-size:10.5px; padding:3px 8px; }
  #produits .product .photo-btn{ margin-top:10px; padding:7px 10px; font-size:12px; max-width:100%; white-space:normal; line-height:1.25; }
  #produits .size-chart-cell, #produits .product-grid > :not(.product){ grid-column:1 / -1; }
  /* Commande en cours du club : cartes au lieu du tableau coupé. */
  .draft-table-wrap{ overflow:visible !important; }
  /* Une pièce = une petite carte : nom + pièce, puis Qté / Prix / Total côte à côte. */
  table.draft-table.m-stack tbody tr:not(.stock-summary-row){
    display:grid; grid-template-columns:1fr 1fr 1fr auto; column-gap:10px; padding:12px 14px;
    grid-template-areas:"m m m x" "p p p p" "q u t t";
  }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td{ border:0 !important; padding:0 !important; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(1){ grid-area:m; justify-content:flex-start; font-weight:600; font-size:15px; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(2){ grid-area:p; justify-content:flex-start; text-align:left !important; color:#3A3A3C; margin:4px 0 10px; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(3){ grid-area:q; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(4){ grid-area:u; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(5){ grid-area:t; font-weight:600; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(6){ grid-area:x; align-self:start; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(1)::before,
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(2)::before{ content:none; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(n+3):nth-child(-n+5){
    flex-direction:column; align-items:flex-start; gap:2px; text-align:left !important;
    padding-top:8px !important; border-top:1px solid #F0F0F2 !important;
  }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(n+3):nth-child(-n+5)::before{ max-width:none; font-size:10.5px; }
  table.draft-table.m-stack tbody tr:not(.stock-summary-row) td:nth-child(5){ align-items:flex-end; text-align:right !important; }
  table.draft-table.m-stack tbody tr td.m-full{ display:block; text-align:left !important; }
  table.draft-table.m-stack tr.stock-summary-row td{ display:block; text-align:left !important; }
  table.draft-table.m-stack tfoot tr{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; }
  table.draft-table.m-stack tfoot td{ border:0 !important; padding:0 !important; }
  table.draft-table.m-stack tfoot td::before{ content:none; }
  .draft-remove-btn{ min-width:34px; min-height:34px; }
  /* Formulaire de commande : gros boutons pleine largeur, faciles au pouce. */
  .form-foot{ flex-direction:column; align-items:stretch !important; gap:10px; }
  .form-foot .btn[type=submit]{ width:100%; min-height:50px; font-size:16px; }
  .add-line-btn{ width:100%; min-height:42px; }
  .price-total{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
}
@media screen and (max-width: 340px){
  #produits .product-grid{ grid-template-columns:1fr; }
}

/* ---------- Espace responsable ---------- */
@media screen and (max-width: 640px){
  /* Statistiques en 2 × 2 */
  .stats-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .stats-grid > .stat-card{ min-width:0; margin:0 !important; padding:14px !important; }
  .stats-grid .label{ font-size:12px !important; }
  .stats-grid .value{ font-size:clamp(18px, 5.6vw, 24px) !important; overflow-wrap:anywhere; }
  /* Cellules vides des tableaux « carte » (ex. vignette absente) */
  .mb-resp body{ padding:20px 14px !important; }
  td.thumb:not(:has(img)), table.m-stack td.m-empty{ display:none !important; }
  /* Ligne produit : « Sélectionner » et « Supprimer » sur une seule ligne. */
  .prices-table td.actions:has(.del-pick){ display:flex !important; justify-content:space-between; align-items:center; gap:10px; }
  .prices-table td.actions:has(.del-pick) form{ margin:0; }
  .prices-table td.actions:has(.del-pick) .btn{ width:auto !important; }
  /* Formulaires : un peu d'air entre un champ et le libellé suivant. */
  .card-form .field + .field, .card-form label + input, .card-form input + label, .card-form select + label, .card-form textarea + label{ margin-top:6px; }
  .ann-card{ padding:20px 16px 16px; }
  .ann-actions{ display:flex; flex-direction:column; gap:8px; }
  .ann-actions .btn{ width:100%; justify-content:center; }
  #del-bulk-bar{ left:12px !important; right:12px !important; }
  /* Bénéfice flottant : barre compacte en bas d'écran (le détail reste sur ordinateur). */
  .profit-float{ padding:10px 16px !important; border-radius:14px !important; }
  .profit-float .pf-title{ margin:0 0 2px !important; font-size:10.5px !important; }
  .profit-float .pf-row{ display:none !important; }
  .profit-float .pf-net{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; font-size:18px !important; }
  body:has(.profit-float){ padding-bottom:84px; }
}

/* ---------- Rejoindre ---------- */
@media screen and (max-width: 520px){
  .search-wrap{ flex-direction:column !important; align-items:stretch !important; }
  .search-wrap > input, .search-wrap > .search-btn{ width:100% !important; min-height:46px; }
}

/* ---------- Pages admin (classe ajoutée par assets/mobile.js) ---------- */
@media screen and (max-width: 640px){
  .mb-admin .wrap{ padding-left:16px !important; padding-right:16px !important; }
  .mb-admin .top{ flex-direction:column; align-items:stretch !important; gap:12px; }
  .mb-admin .top > div:last-child{ flex-wrap:wrap; }
  .mb-admin .club-row{ flex-wrap:wrap; gap:8px; padding-bottom:10px; }
  .mb-admin .club-row .club-header{ flex:1 1 100%; }
  .mb-admin .club-row .delete-club-form{ margin-left:14px; }
  .mb-admin .club-row .delete-club-form .btn{ white-space:nowrap; }
}
@media screen and (max-width: 640px){
  .mb-admin form select:not([multiple]){ width:100%; min-height:44px; padding:0 10px; border:1px solid #D2D2D7; border-radius:10px; background:#fff; color:#1D1D1F; }
  .mb-admin table.m-stack form select{ width:auto; }
  .mb-admin .table-scroll[data-no-stack]{ -webkit-overflow-scrolling:touch; }
}