/* ════════════════════════════════════════════════════════════════════
   mobile.css — Couche responsive mobile/tablette (Gardet B2B)
   Chargé APRÈS style.css + polish.css. 100% sous @media → desktop intact.
   ════════════════════════════════════════════════════════════════════ */

/* ============================================================================
   mobile.css — SHELL MOBILE/TABLETTE Gardet B2B
   À charger APRÈS style.css et polish.css. 100% sous @media → desktop intact.
   ============================================================================ */

/* ── Tokens mobiles. Déclarés DANS un @media (≤1024px couvre 768/480) → zéro
      règle au niveau racine, donc desktop strictement byte-identique. ───────── */
@media (max-width: 1024px) {
  :root {
    --drawer-w: 300px;
    --app-pad-x: 40px; /* miroir du padding horizontal desktop de .app-main */
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLETTE & EN DESSOUS — bascule en drawer (≤1024px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Grille → 1 colonne : la sidebar quitte le flux, main occupe tout. */
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  /* HEADER : place pour le hamburger à gauche, safe-areas. */
  .app-header {
    padding: 0 18px;
    padding-top: env(safe-area-inset-top);
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    gap: 6px;
  }

  /* Hamburger visible (desktop le garde en display:none, cf. plus bas). */
  .app-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    margin-right: 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition);
  }
  .app-hamburger svg { width: 22px; height: 22px; display: block; }
  .app-hamburger:active { background: rgba(201,168,76,0.10); }

  /* Le sélecteur de langue quitte le header → déplacé dans le drawer
     (.sidebar-langs, rendu par sidebar.php). On masque la copie header. */
  .header-langs { display: none; }

  /* Rangée bouteilles décorative (hover-only) → masquée. .header-welcome a son
     propre margin-left:auto, l'alignement à droite tient sans le margin-right:auto. */
  .header-bottles { display: none; }

  /* Bloc langues en pied de drawer (séparé de la nav par un filet). */
  .sidebar-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    margin-top: 18px;
    padding: 16px 20px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
  }
  .sidebar-langs .hl-flag { display: inline-flex; align-items: center; gap: 8px; }
  .sidebar-lang-label {
    font: 400 13px/1 'Jost', sans-serif;
    letter-spacing: .04em;
    color: var(--text-muted);
  }
  .sidebar-langs .hl-flag.is-active .sidebar-lang-label { color: var(--gold); }

  /* Logo réduit, reste centré (le hamburger gauche et cart/logout droite ont
     un z-index supérieur, le logo réduit ne couvre plus leurs zones). */
  .logo-svg { height: 34px; }
  .header-logo { z-index: 1; }
  .app-hamburger,
  .header-welcome { position: relative; z-index: 2; }

  /* SIDEBAR → DRAWER off-canvas. */
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, var(--drawer-w));
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-left: env(safe-area-inset-left);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: 0 0 0 1px var(--border-subtle), 8px 0 32px rgba(0,0,0,.5);
    will-change: transform;
  }
  .app-sidebar.is-open { transform: translateX(0); }

  /* Backdrop (injecté par le JS dans .app). */
  .app-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    z-index: 150;
    transition: opacity .28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  html.drawer-open .app-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Verrou de scroll body quand le drawer est ouvert. */
  html.drawer-open,
  html.drawer-open body { overflow: hidden; }

  /* Accent de l'item actif côté GAUCHE (drawer ouvre depuis la gauche). */
  .nav-item.active::before {
    right: auto;
    left: 0;
    border-radius: 0 2px 2px 0;
  }

  /* MAIN pleine largeur (la sidebar a quitté la grille). */
  .app-main {
    padding: 28px 28px 52px;
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }

  /* FOOTER : 2 colonnes en tablette, rose réduite. */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .footer-rose { height: 220px; right: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE (≤768px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .app-header {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    min-height: 56px;
  }

  .logo-svg { height: 32px; }

  /* Drapeaux plus serrés. */
  .header-langs { gap: 6px; margin-right: 6px; }

  /* Greeting texte masqué : on ne garde que cart + logout à droite.
     Le wrapper .header-welcome reste (porte cart/logout) ; on neutralise
     le texte « Bienvenue, » + le <strong> nom via la taille de police nulle
     sur les noeuds texte directs, en conservant les enfants <a> visibles. */
  .header-welcome {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0;            /* masque les noeuds texte « Bienvenue, » */
  }
  .header-welcome strong { display: none; }  /* masque le nom */
  .header-welcome > a { font-size: 13px; }   /* restaure cart + logout */

  /* Cart : cible tactile ≥44px (icône 24px + hit-area). */
  .header-cart {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* MAIN. */
  .app-main {
    padding: 24px 20px 48px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* FOOTER : 1 colonne. */
  .app-footer {
    padding: 32px 24px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-rose { height: 180px; }

  /* Nav items confortables au pouce. */
  .nav-item { padding: 15px 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PETIT (≤480px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .app-header {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    gap: 4px;
  }
  .logo-svg { height: 30px; }
  .header-langs { gap: 5px; margin-right: 4px; }

  /* Logout déplacé dans le drawer → masqué du header (place rare). */
  .header-welcome > .header-logout-link { display: none; }

  /* … et affiché en pied de drawer (tout en bas), style repris du logout desktop
     (majuscules · letter-spacing · muted→gold). Sur tablette/iPad + desktop il
     reste dans le header → masqué ici via @media (min-width:481px) plus bas. */
  .sidebar-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 16px 20px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font: 500 12px/1 'Jost', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease;
  }
  .sidebar-logout:hover,
  .sidebar-logout:active { color: var(--gold); }
  .sidebar-logout-icon { width: 18px; height: 18px; flex: 0 0 auto; }

  .app-main {
    padding: 18px 14px 40px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .app-footer {
    padding: 24px 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  /* Rose décorative masquée (chevauche le contenu empilé). */
  .footer-rose { height: 380px; right: 1px; }

  .demo-banner-inner { gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TACTILE — cibles ≥44px + neutralisation des :hover collants
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Pas de hover collant sur la nav : seul .active marque l'état. */
  .nav-item:hover { background: transparent; color: var(--text-muted); }
  .nav-item:hover .nav-icon { opacity: 0.7; }
  .nav-item.active,
  .nav-item:active { background: rgba(201,168,76,0.10); color: var(--gold); }
  .nav-item.active .nav-icon { opacity: 1; }

  /* Drapeaux : pas de translate au tap, hit-area verticale élargie. */
  .hl-flag:hover { transform: none; opacity: 0.85; filter: saturate(1); }
  .hl-flag { padding: 14px 0; }            /* zone cliquable haute, image inchangée */
  .hl-flag img { /* taille visuelle inchangée (22×16) */ }

  /* Icônes sociales : hit-area 44px, cercle visuel 28px conservé. */
  .social-icon:hover { border-color: rgba(201,168,76,0.3); background: transparent; color: var(--text-muted); }
  .social-icon { position: relative; }
  .social-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Liens footer : pas de hover, cible verticale correcte. */
  .footer-col a { line-height: 2.1; }
}

/* Logout du drawer : n'existe QUE sur mobile (≤480px). Sur tablette/iPad et
   desktop, le bouton déconnexion reste dans le header → on masque la copie drawer. */
@media (min-width: 481px) {
  .sidebar-logout { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HAMBURGER — masqué en desktop (la version visible est dans les @media).
   Cette règle DOIT être sous un @media pour ne jamais toucher le desktop ;
   on l'attache au media large standard des desktops fins/larges.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .app-hamburger { display: none; }
  .app-drawer-backdrop { display: none; }
  /* La copie langue du drawer n'existe qu'en mobile (le header garde .header-langs). */
  .sidebar-langs { display: none; }
}


/* ████ ZONE: CATALOGUE (INDEX.PHP, COLLECTIONS.PHP, PRODUCT.PHP, ACCESSOIRES.PHP, ACCESSOIRE.PHP) ████ */
/* ============================================================================
   ZONE CATALOGUE — responsive mobile/tablette
   index.php · collections.php · product.php · accessoires.php · accessoire.php
   100% sous @media. Aucune regle hors media-query. Le desktop ne change jamais.
   ============================================================================ */

/* ====================================================================
   TABLETTE  @media (max-width:1024px)
   Bascule du hero product/accessoire en 1 colonne, onglets scrollables.
   ==================================================================== */
@media (max-width: 1024px) {

  /* ---- product.php : hero 2/3 colonnes -> 1 colonne empilee ---- */
  .product-hero,
  .product-hero.has-perf {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* image au-dessus du contenu : sticky inutile/nuisible une fois empile */
  .product-img-col {
    position: static;
    top: auto;
  }
  /* la colonne info ne doit plus rester etroite/centree */
  .product-info-col {
    max-width: 100%;
  }
  /* widget Performance pleine largeur sous le hero */
  .product-perf-card {
    width: 100%;
  }

  /* ---- accessoire.php : hero 2 colonnes -> 1 colonne ---- */
  .ac-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ac-hero-img-col {
    position: static;
    top: auto;
  }
  .ac-specs {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }

  /* ---- Onglets catalogue : eviter l'overflow horizontal qui casse la ligne.
     .collection-tabs (collections) : scroll-x horizontal lisse.
     .collection-tabs--fit (index) : les 3 collections tiennent sur UNE ligne, a
     egalite, sans scroll ni swipe.  (--wrap d'accessoires deja en flex-wrap.) */
  .collection-tabs:not(.collection-tabs--wrap):not(.collection-tabs--fit) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .collection-tabs:not(.collection-tabs--wrap):not(.collection-tabs--fit)::-webkit-scrollbar {
    display: none;
  }
  .collection-tabs:not(.collection-tabs--wrap):not(.collection-tabs--fit) .col-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* index.php : 3 onglets collections sur une ligne, repartis a egalite (1/3 chacun),
     libelle centre pouvant wrapper dans l'onglet. Aucun scroll horizontal. */
  .collection-tabs--fit {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 6px;
  }
  .collection-tabs--fit .col-tab {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  /* Onglets empilés (classe .is-stacked posée par script.js dès qu'un onglet
     passe sur 2 lignes) : 2 lignes cohérentes pour TOUS les onglets.
     FR/EN → « Collection » / « BRUT » ; DE → « BRUT- » / « Kollektion ».
     nowrap sur les 2 spans → chaque partie tient sur sa ligne (pas de coupure). */
  .collection-tabs--fit.is-stacked .col-tab-word,
  .collection-tabs--fit.is-stacked .col-tab-name { display: block; white-space: nowrap; }
}

/* ====================================================================
   MOBILE  @media (max-width:768px)
   Grilles de cartes compactees, paddings reduits, inputs anti-zoom iOS.
   ==================================================================== */
@media (max-width: 768px) {

  /* ---- Grilles de cartes catalogue ----
     Les 3 .order-grid des catalogues portent un grid-template-columns INLINE
     (collections minmax(220px), accessoires minmax(180px)) -> !important requis.
     index.php utilise la classe seule (minmax 130px, deja OK en 2 col auto-fill). */
  .order-grid {
    gap: 14px;
  }
  /* collections.php + accessoires.php : inline override -> 2 colonnes 
  .collection-panel .order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }*/

  /* ---- Hauteurs visuelles des cards reduites (les bottle-wrap inline
     valent 300px collections / 200px accessoires : trop hauts sur mobile).
     L'image garde object-fit:contain -> pas de deformation. 
  .collection-card .bottle-wrap {
    height: 300px !important;
    margin-bottom: 10px !important;
  }
  .accessory-card .bottle-wrap {
    height: 300px !important;        
    margin-bottom: 10px !important;
  }
  .accessory-card .bottle-wrap img {
    max-height: 300px !important;
    max-width: 300px !important;     
  }*/

  /* ---- Onglets : cibles plus confortables, padding lateral reduit ---- */
  .col-tab {
    padding: 11px 14px;
  }
  .collection-tabs--wrap .col-tab {
    padding: 9px 11px;
  }

  /* ---- accessoire.php : titre reduit (deja gere a 900px en interne, on
     aligne la valeur ici pour coherence de la zone) ---- */
  .ac-name {
    font-size: 32px;
  }
  .ac-detail-main {
    padding: 20px 16px 56px;
  }

  /* ---- product.php : nom de cuvee (52px deborde en colonne sur mots longs) */
  .product-name {
    font-size: 34px;
    margin-bottom: 18px;
  }
  /* image hero recadree pour ne pas pousser le contenu trop bas */
  .product-img-wrap {
    min-height: 340px;
    padding: 18px 14px;
  }

  /* ---- INPUTS / SELECTS / TEXTAREA : >=16px anti-zoom iOS ----
     .acc-option-select porte font-size:12px INLINE -> !important.
     .ac-qty-input porte font-size:14px (classe) -> source-order suffit mais on
     securise. Les steppers col/acc-qty-input sont deja a 16px (rien a forcer). */
  .acc-option-select {
    font-size: 16px !important;
    min-height: 44px;
  }
  .ac-qty .ac-qty-input {
    font-size: 16px;
    width: 56px;
  }
  .ac-qty .ac-qty-btn {
    width: 44px;
    height: 44px;
  }
}

/* ====================================================================
   PETIT  @media (max-width:480px)
   Cards plus serrees, toast pleine largeur, specs en 1 colonne.
   ==================================================================== */
@media (max-width: 480px) {

  /* ---- index.php : grille 130px -> 2 colonnes nettes ---- 
  .order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }*/
  /* collections/accessoires gardent leur override 2 col (768) ; on reduit le gap */
  .collection-panel .order-grid {
    gap: 12px;
  }

  /* ---- Cards : padding interne reduit ---- */
  .order-card {
    padding: 12px 10px 14px;
  }
  .collection-card,
  .accessory-card {
    padding: 20px 20px 20px !important;  /* override du padding inline 18px 14px 16px */
  }

  /* badges absolus : eviter le debordement sur image en card etroite */
  .collection-card .card-badges {
    max-width: 64%;
  }

  /* ---- product.php : nom encore reduit, specs 1 colonne ---- */
  .product-name {
    font-size: 28px;
  }
  .specs-grid {
    grid-template-columns: 1fr;
  }
  .product-img-wrap {
    min-height: 260px;
  }
  .product-portfolio-bar {
    margin-bottom: 18px;
  }

  /* ---- index.php : value strip (texte court a droite) padding reduit ---- */
  .account-value-strip {
    padding-bottom: 10px;
  }

  /* ---- accessoire.php : related grid -> 2 colonnes (minmax 220px tomberait
     a 1 col sur 360px) ; titre + padding encore reduits ---- */
  .ac-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ac-name {
    font-size: 28px;
  }
  .ac-detail-main {
    padding: 16px 14px 48px;
  }

  /* ---- Toast cart : colle aux bords, pleine largeur, hors notch ---- */
  #cartToast {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
    text-align: center;
  }
}

/* ====================================================================
   TACTILE  @media (hover:none) and (pointer:coarse)
   Cibles >=44px, neutralisation des :hover collants (translate/reflets).
   ==================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* ---- Onglets : hauteur tactile confortable ---- */
  .col-tab {
    min-height: 44px;
  }
  .collection-tabs--wrap .col-tab {
    min-height: 44px;
  }

  /* ---- Fleches de format : agrandir la ZONE cliquable sans changer la
     hauteur visuelle de la rangee (padding genere la hit-area) ---- */
  .format-switch .fmt-arrow {
    padding: 10px 12px;
    margin: -8px -4px;        /* compense le padding pour ne pas grandir la rangee */
  }
  /* neutraliser le micro-hover collant (translateY persiste apres tap) */
  .format-switch .fmt-arrow:hover {
    color: #fff;
    transform: none;
  }

  /* ---- index.php : stepper qty (.qty-btn 30px -> 40px tactile) ---- */
  .qty-btn {
    height: 40px;
  }
  .qty-value {
    height: 30px;
    line-height: 30px;
  }

  /* ---- collections.php : col-qty-btn confortable (44px) ---- */
  .col-qty-btn {
    width: 44px;
  }

  /* ---- accessoire.php : stepper + pills options ---- */
  .ac-qty .ac-qty-btn {
    width: 44px;
    height: 44px;
  }
  .ac-option-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* product.php : pills format cliquables */
  .b2b-formats .format-pill {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* ---- Chevron reveal accessoires (20px -> hit-area >=40px) ---- */
  .acc-reveal-toggle {
    padding: 11px;
    margin: -11px;            /* etend la cible sans deplacer l'icone */
  }

  /* ---- Reveal options : sur tactile, l'ouverture se fait au tap (.is-open).
     On neutralise l'ouverture au :hover/:focus-within (collante au doigt) ---- */
  .accessory-card:hover .acc-reveal,
  .accessory-card:focus-within .acc-reveal {
    /* laisse seulement .is-open piloter l'affichage en tactile */
    opacity: 0;
    pointer-events: none;
  }
  .accessory-card.is-open .acc-reveal {
    opacity: 1;
    pointer-events: auto;
  }
  .accessory-card:hover .acc-reveal-toggle,
  .accessory-card:focus-within .acc-reveal-toggle {
    transform: none;
  }
  .accessory-card.is-open .acc-reveal-toggle {
    transform: rotate(180deg);
  }

  /* ---- CTAs catalogue : >=44px de hauteur tactile ---- */
  .btn-add,
  .btn-add-case,
  .btn-add-col-quote,
  .btn-add-acc-cart,
  .btn-add-acc-quote {
    min-height: 44px;
  }

  /* ---- neutraliser les hovers de card (border/bg/transform) qui restent
     colles apres un tap sur mobile ---- */
  .order-card:hover {
    transform: none;
  }
  .bottle-img,
  .product-bottle-img {
    /* pas de scale au hover qui resterait fige */
    transform: none;
  }
}

/* ████ ZONE: COMMERCE (CART, DEVIS/QUOTE_REQUEST, GIFTS, ACCOUNT) ████ */
/* ════════════════════════════════════════════════════════════════════
   ZONE COMMERCE — cart.php · quote_request.php · gifts.php · account.php
   100% sous @media. Desktop grand écran inchangé.
   Breakpoints partagés : 1024 (tablette) · 768 (mobile) · 480 (petit) · tactile.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1024px — TABLETTE : panier en 1 colonne (summary sous les items)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* cart.php : .orders-layout est ré-injecté par AJAX (replaceWith) →
     on cible la CLASSE stable, jamais un id volatil. */
  .orders-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   768px — MOBILE : paddings réduits, empilages, inputs 16px, tables scroll
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Padding du contenu principal (cart / devis / account) + safe-area bas.
     gifts.php a sa propre .gifts-main (padding-bottom:80px) traitée plus bas. */
  .app-main {
    padding: 20px 16px 48px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }

  /* ── INPUTS ≥16px (anti-zoom iOS) ──
     Champs par classe (surchargeables par source-order). */
  .form-input,
  .form-select,
  .ac-input,
  .qr-qty-input,
  .qr-add-form select,
  .qr-add-form input[type=number],
  .cart-qty-input {
    font-size: 16px;
  }

  /* Champs en style INLINE (font-size:13px gravé) : un sélecteur ne bat pas
     l'inline → !important ciblé. Voucher (cart l.1180) + date pickup (l.764).
     Si édition PHP possible, retirer le font-size inline plutôt (voir notes). */
  .cart-voucher-box input[type=text],
  input[type="date"]#pickupDateField,
  .qr-add-form input[type=text] {
    font-size: 16px !important;
  }

  /* ── CARTES PRODUIT PANIER ──
     .order-item garde sa 2-col (72px|1fr), tient à pleine largeur. */
  .orders-card,
  .summary-card {
    padding: 22px 18px;
  }

  /* ── DEVIS : tables larges → scroll-x.
     Aucun wrapper scroll dans le PHP : on rend la <table> elle-même
     scrollable (display:block + overflow-x:auto). Les cellules gardent
     leurs steppers/boutons intacts. .app-main a overflow-x:hidden donc
     sans ceci la table serait coupée à droite. */
  .qr-items-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .qr-items-table thead,
  .qr-items-table tbody,
  .qr-items-table tr {
    /* conserve le rendu tabulaire à l'intérieur du conteneur scrollable */
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .qr-items-table th,
  .qr-items-table td {
    white-space: nowrap;
  }

  /* Harmonisation des colonnes sur mobile (.qr-items-table dans .table-scroll) :
     .activity-table td a « padding: 15px 0 » (0 horizontal) → sans espace, le nom,
     le format et le stepper se collent, tandis que les colonnes numériques (headers
     longs « Bouteilles » / « Prix HT / btl ») laissent un grand vide à gauche du
     chiffre aligné à droite. On ajoute un padding horizontal cohérent + on autorise
     les headers numériques à passer sur 2 lignes (colonne moins large). */
  .table-scroll .qr-items-table th,
  .table-scroll .qr-items-table td { padding-left: 9px; padding-right: 9px; }
  .table-scroll .qr-items-table th:first-child,
  .table-scroll .qr-items-table td:first-child { padding-left: 2px; }   /* la vignette colle au bord */
  .table-scroll .qr-items-table th.qr-num { white-space: normal; }       /* « Prix HT / btl » · « Total HT » → header sur 2 lignes */

  /* Table historique des devis (.section-activity .activity-table) :
     même traitement scroll-x. */
  .section-activity .activity-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .section-activity .activity-table thead,
  .section-activity .activity-table tbody,
  .section-activity .activity-table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .section-activity .activity-table th,
  .section-activity .activity-table td {
    white-space: nowrap;
  }

  /* Tables enveloppées dans .table-scroll (index.php « Activité récente » +
     quote_request.php .qr-items-table) : le wrapper porte le scroll-x. On ANNULE
     ici le hack « 1 <table> par <tr> » ci-dessus (display:table + table-layout:auto
     sur chaque row) — chaque row calculait ses propres largeurs → les colonnes ne
     s'alignaient plus verticalement d'une ligne à l'autre. En restaurant une
     <table> UNIQUE (display natifs), le navigateur partage les largeurs de colonnes
     sur toutes les lignes → alignement vertical. overflow:visible → seul le wrapper
     .table-scroll scrolle (pas de double conteneur de défilement sur la table). */
  .table-scroll .activity-table       { display: table; width: 100%; overflow: visible; }
  .table-scroll .activity-table thead { display: table-header-group; }
  .table-scroll .activity-table tbody { display: table-row-group; }
  .table-scroll .activity-table tr    { display: table-row; }

  /* ── ACCOUNT : .ct-row passe en 1 colonne (libellé au-dessus de la valeur).
     Couvre conditions commerciales + profil + 2 formulaires d'adresses +
     facturation (~30 rows). Inline <style> est plus bas dans le DOM que
     mobile.css → on monte d'un cran via .account-stack pour battre l'inline. */
  .account-stack .ct-row,
  .ct-row {
    grid-template-columns: 1fr;
  }
  .account-stack .ct-key,
  .ct-key {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px 6px;
    align-items: flex-start;
  }
  .account-stack .ct-val,
  .ct-val {
    padding: 8px 16px 14px;
    align-items: flex-start;
  }
  .ct-row-manager .ct-key { padding-top: 12px; }
  .ct-manager { padding: 14px 16px; }

  /* .ac-input : passe en pleine largeur (sinon reste figé à 360px).
     Inline <style> → bump via .account-stack. */
  .account-stack .ac-input,
  .ac-input {
    max-width: 100%;
  }

  /* .ship-card-addr : déjà masquée à 700px en inline ; on réaligne sur 768. */
  .account-stack .ship-card-addr,
  .ship-card-addr {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   480px — PETIT : compaction fine
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .app-main {
    padding: 16px 12px 40px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  /* ── PANIER : items plus compacts ── */
  .order-item { gap: 12px; }
  .oi-thumb { height: 110px; }
  .oi-thumb img { max-height: 90px; }

  /* Ligne quantité (label + stepper + "(=X bt.)") : wrap pour que le stepper
     ne compresse pas le label. Les autres .oi-meta (prix/total) gardent
     space-between. On cible la ligne contenant le stepper. */
  .oi-meta:has(.cart-qty-stepper) {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* ── SUMMARY CARD ── */
  .summary-card { padding: 22px 18px; }
  .summary-total-amount { font-size: 32px; }

  /* ── MODE DE LIVRAISON (dm-pill) : 1 pill / ligne sur très petit écran.
     flex-basis inline (240px) → on force 100% via !important ciblé. */
  .dm-pill { flex-basis: 100% !important; }

  /* ── VOUCHER : autoriser le bouton à passer dessous ── */
  .cart-voucher-box form { flex-wrap: wrap; }
  .cart-voucher-box form button[type="submit"] {
    flex: 1 1 100%;
    min-height: 44px;
  }

  /* ── MODALES confirm (devis + cart) : padding réduit + safe-area ── */
  .qr-modal-dialog {
    padding: 22px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .qr-modal { padding: 16px; }

  /* ── DEVIS : builder en 1 colonne (selects/inputs longs) ──
     Le @720 existant (style.css) donne 1fr 1fr ; on passe à 1fr ici. */
  .qr-add-form { grid-template-columns: 1fr; }
  .qr-add-form > * { width: 100%; }

  /* Totaux devis : étalés pleine largeur plutôt que collés à droite. */
  .qr-totals { justify-content: stretch; }
  .qr-totals dl { width: 100%; }

  /* Actions devis : boutons empilés pleine largeur. */
  .qr-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .qr-actions .qr-btn-primary,
  .qr-actions .qr-btn-ghost {
    width: 100%;
    min-height: 44px;
  }
  .qr-actions .qr-action-spacer { display: none; }

  /* Méta-rows / status banner devis : gap resserré. */
  .qr-meta-row { gap: 10px; }
  .qr-status-banner { gap: 10px; }
  .qr-status-banner .qr-status-text { flex-basis: 100%; }

  /* ── ACCOUNT : gap pile réduit + identité empilée ── */
  .account-stack { gap: 16px; }

  .identity-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 18px;
  }
  .certified-badge-img,
  .certified-badge-svg { height: 96px; }

  .ct-manager { gap: 12px; }

  /* Mini-ladder fidélité : 5 paliers serrés → dots/labels réduits.
     On conserve la grille (métaphore d'échelle), pas d'empilage vertical.
     Inline <style> → bump via .account-stack. */
  .account-stack .lp-dot,
  .lp-dot { width: 18px; height: 18px; }
  .account-stack .lp-label,
  .lp-label { font-size: 10px; }

  /* Pills cadeaux : ne pas déborder. */
  .account-stack .lp-gift-pill,
  .lp-gift-pill { max-width: 100%; }
  .account-stack .lp-gift-name,
  .lp-gift-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
  }

  /* Juridique : padding latéral réduit. */
  .legal-row { padding: 18px 16px; }

  /* ── GIFTS : box pas trop haute sur petit écran ── */
  .gift-box { max-width: 280px; }
  .gifts-consumed-item { gap: 10px; padding: 8px 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   GIFTS — réalignement des gaps existants (1024) sans contredire le @720
   déjà présent dans gifts.php (1 colonne). Le @720 reste prioritaire en
   dessous de 720px ; ici on règle uniquement la tranche 721-1024 (2-col).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 721px) {
  /* gap:100px → vide énorme en 2 colonnes tablette : on resserre. */
  .gifts-grid { gap: 48px; }
}

/* gifts.php : .gifts-main a son propre padding-bottom:80px → on le réduit
   sur petit écran (cohérent avec .app-main). */
@media (max-width: 480px) {
  .gifts-main { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────────────
   TACTILE — cibles ≥44px, neutralisation des :hover collants
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* ── STEPPERS qty (cart + devis) : input ≥44px de haut, boutons ≥44×44 ──
     Les boutons +/− sont conçus clavier/souris (petits) → on les agrandit
     et on neutralise les :hover qui restent collés au tap. */
  .qr-qty-stepper .qr-qty-input,
  .cart-qty-stepper .qr-qty-input,
  .qr-qty-input {
    min-height: 44px;
  }
  .qr-qty-stepper-buttons { min-width: 36px; }
  .qr-qty-step {
    min-width: 36px;
    min-height: 22px;        /* 2 boutons empilés sur ~44px d'input = ~22px chacun */
  }
  .qr-qty-step:hover  { background: transparent; }
  .qr-qty-step:active { background: rgba(201,168,76,0.22); }
  .cart-qty-stepper .qr-qty-step:hover { background: transparent; }

  /* ── PILLS mode livraison : zone tactile suffisante (padding déjà 14px) ── */
  .dm-pill { min-height: 44px; }

  /* ── VOUCHER bouton ── */
  .cart-voucher-box form button[type="submit"] { min-height: 44px; }

  /* ── GIFTS : neutraliser hover/translate, garantir ≥44px ── */
  .gift-btn { min-height: 44px; }
  .gift-btn:hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -2px 6px rgba(0, 0, 0, 0.25),
      0 4px 14px rgba(201, 168, 76, 0.3);
  }
  .gift-btn:active { transform: none; }
  .gift-card.is-unlocked .gift-box:hover { transform: none; }

  /* ── ACCOUNT : pills cadeaux & legal PDF & ship summary tactiles ── */
  .lp-gift-pill:hover { transform: none; box-shadow: none; }
  .legal-pdf-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ship-card summary { min-height: 44px; }
  .ac-btn:hover { transform: none; }
  .manager-contact { line-height: 2; }   /* liens tél/email plus faciles à toucher */

  /* ── BOUTONS devis tactiles ── */
  .qr-btn-primary,
  .qr-btn-ghost { min-height: 44px; }
  .qr-btn-primary:hover { background: var(--bg-card, #303030); color: var(--gold); }
}

/* ████ ZONE: RECORDS (ORDERS.PHP, ORDER_DETAILS.PHP, INVOICES.PHP, ANALYTICS.PHP) ████ */
/* ============================================================================
   ZONE RECORDS — orders.php · order_details.php · invoices.php · analytics.php
   Mobile/tablette. 100% sous @media. Aucune regle racine.
   Breakpoints partages : 1024 / 768 / 480 + (hover:none)and(pointer:coarse).
   Pour analytics.php : les classes .an-* / .metric* / .tier-track / .ach-grid
   sont definies dans un <style> scoped PLUS BAS dans le DOM que mobile.css.
   => on prefixe par .app-main pour monter la specificite et l'emporter.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TABLETTE (<=1024) : timelines de statut compactees, grilles analytics 2 cols
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* --- Timeline statut (orders + order_details) : reste horizontale, compactee --- */
  .section-status .status-badges { margin-bottom: 22px; }
  .badge-pill { padding: 4px 8px; font-size: 10px; }
  .badge-label { font-size: 10px; }
  .badge-date { font-size: 9px; }
  .progress-labels span { font-size: 10px; line-height: 1.25; }

  /* --- analytics : KPI 4 cartes -> 2 colonnes (partage avec index 3 cartes) --- */
  .metrics-row { grid-template-columns: repeat(2, 1fr); }

  /* --- analytics : carte Leaflet : hauteur reduite --- */
  .app-main .an-map { height: 320px; }

  /* === invoices.php : lignes proforma / facture trop larges → scrollbar
     HORIZONTALE dès qu'elles débordent, sur tablette ET mobile (<1024px).
     Chaque <table> est enveloppée d'un wrapper .inv-scroll (côté PHP) qui
     fournit le défilement. La <table> reste UNE table réelle → les colonnes
     thead/tbody restent ALIGNÉES (l'ancien hack display:block + thead/tbody en
     display:table cassait l'alignement : 2 tables indépendantes).
     overflow-x:auto → la barre n'apparaît QUE si le contenu dépasse.
     ⚠ Préfixe .app-main : bat le <style> INLINE de invoices.php (chargé après
     mobile.css) qui sinon fige la largeur des cellules. === */
  .app-main .inv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }
  .app-main .inv-scroll .inv-table { min-width: 560px; white-space: nowrap; }
  .app-main .inv-scroll .inv-table td,
  .app-main .inv-scroll .inv-table thead th { padding: 10px 12px; }
}

/* ----------------------------------------------------------------------------
   MOBILE (<=768) : empilage des grilles 2 cols, paddings reduits, inputs 16px
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* === GRILLES 2 COLONNES STRUCTURANTES (inline sans classe -> voir notes) ===
     orders.php l.198 (1.4fr 1fr) et order_details.php l.282 (1.5fr 1fr) sont
     en style INLINE sans classe. Tentative de capture via les classes parentes
     reelles : .section-status est suivie du grid. On cible le grid par sa
     structure dans .app-main des qu'une classe sera ajoutee cote PHP.
     En attendant, fallback sur les classes proposees (.order-2col / .od-2col)
     SI elles sont posees cote PHP : */
  .order-2col,
  .od-2col {
    grid-template-columns: 1fr !important;  /* bat le grid-template-columns inline */
    gap: 18px !important;
  }
  /* neutraliser les margin-top d'alignement (orders l.283 :33px / od l.428 :38px)
     une fois une classe posee sur ces blocs (.order-summary-card / .od-sidebar) */
  .order-summary-card,
  .od-sidebar { margin-top: 0 !important; }

  /* === orders.php : table « toutes les commandes » ===
     Le wrapper a deja overflow-x:auto (l.350). On garantit le scroll tactile
     et on reduit le padding des cellules pour gagner de la largeur. */
  .section-activity > div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
  .section-activity table th,
  .section-activity table td { padding: 10px 3px !important; }

  /* order_details.php : badges « 🎁 Cadeau » et « Accessoire » après le nom
     d'article → toujours sur une seule ligne (emoji/mot solidaires). Le
     margin-left:8px des styles inline est conservé (pas d'override). */
  .od-gift-badge,
  .od-acc-badge { white-space: nowrap; }

  /* === order_details.php : meta commande + en-tete d'activite === */
  .activity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* === invoices.php : RIB 2 cols -> 1 col (inline ternaire -> voir notes) ===
     Capture via la classe proposee .inv-rib-grid si posee cote PHP. */
  .inv-rib-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* === invoices.php : le scroll-x des tables .inv-table est désormais géré
     dans le bloc @media (max-width:1024px) plus haut (tablette + mobile). === */

  /* === invoices.php : titres de section + banniere === */
  .inv-section { margin-bottom: 30px; }
  .inv-section-title { font-size: 18px; gap: 10px; }
  .inv-info-banner { padding: 12px 14px; }

  /* === titres partages (orders/order_details/invoices) === */
  .section-title { font-size: 19px; margin-bottom: 14px; }

  /* === ANALYTICS (<=768) : hero, KPI, cartes, chart, carte === */
  .app-main .an-hero { padding: 20px 18px; gap: 20px; }
  .app-main .an-hero-title { font-size: 30px; }
  .app-main .metric-value { font-size: 34px; }
  .app-main .an-chart-wrap { padding: 0 14px 18px; }
  /* Chart.js maintainAspectRatio:true => sans hauteur fixe le graphe s'aplatit.
     On borne la hauteur du canvas en CSS (palliatif ; ideal = JS, voir notes). */
  .app-main .an-chart-wrap canvas { max-height: 300px; }
  .app-main .an-map { height: 280px; }

  /* === INPUTS / SELECTS >=16px (anti-zoom iOS) — zone Records === */
  .period-select,
  .inv-table select,
  .section-activity select,
  .app-main select { font-size: 16px !important; }
}

/* ----------------------------------------------------------------------------
   PETIT (<=480) : timeline statut verticale, compaction maximale
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* === TIMELINE STATUT : on GARDE la structure desktop (grille horizontale 5 cols
     + dots + barre de progression visible) — juste BEAUCOUP plus fine (font, gap,
     dots réduits) pour tenir sur un petit écran. On NE bascule PAS en vertical et
     on NE masque PAS la piste : aspect pro identique au desktop, en miniature.
     (NB : on ne touche pas à grid-template-columns → repeat(5,1fr) hérité du desktop.) === */
  .section-status .status-badges { margin-bottom: 14px; }
  .status-badge { gap: 3px; }
  .badge-label { font-size: 8.5px; line-height: 1.2; }
  .badge-pill  { padding: 2px 5px; font-size: 8px; letter-spacing: .03em; }
  .badge-date  { font-size: 7.5px; }

  .progress-track { margin-bottom: 9px; }
  .progress-dot   { width: 13px; height: 13px; border-width: 2px; }
  .progress-dot.current {
    animation: none;                                  /* le halo pulsant est trop gros sur un dot 13px */
    box-shadow: 0 0 0 3px rgba(201,168,76,.18), 0 0 7px rgba(201,168,76,.3);
  }
  .progress-labels span { font-size: 8px; line-height: 1.2; }

  /* === orders.php : table « toutes les commandes » encore plus serree === */
  .section-activity table th,
  .section-activity table td { padding: 8px 10px !important; font-size: 11px; }

  /* === invoices.php === */
  .inv-section-title { font-size: 17px; gap: 8px; }
  .inv-info-banner { padding: 11px 13px; font-size: 12px; }
  /* min-width réduit sous 480px (bat la règle ≤1024 à 560px, même spécificité, source plus tardive). */
  .app-main .inv-scroll .inv-table { min-width: 480px; }

  /* === titres partages === */
  .section-title { font-size: 18px; margin-bottom: 12px; }

  /* === ANALYTICS (<=480) === */
  .app-main .metrics-row { grid-template-columns: 1fr; }
  .app-main .an-hero-title { font-size: 26px; }
  .app-main .metric-value { font-size: 30px; }
  .app-main .an-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 16px 12px;
  }
  .app-main .compass-wrap { width: 180px; height: 180px; }
  .app-main .ach-grid { grid-template-columns: 1fr; }
  .app-main .ach { padding: 16px 12px; }
  .app-main .an-map { height: 240px; }
}

/* ----------------------------------------------------------------------------
   TACTILE : cibles >=44px, neutralisation des :hover collants
   ---------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  /* boutons d'action factures : agrandis pour le tap, alignes en flex */
  .inv-action-btn {
    padding: 11px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .inv-action-btn + .inv-action-btn { margin-left: 8px; }
  .inv-action-btn:hover {
    background: rgba(201,168,76,.10);
    border-color: rgba(201,168,76,.35);   /* fige l'etat repos, pas d'effet hover collant */
  }
  .inv-table tr:hover td { background: inherit; transition: none; }

  /* lien « Toutes les commandes » (order_details) : hit-area tactile */
  .activity-header a { min-height: 44px; display: inline-flex; align-items: center; }

  /* analytics : period-select et achievements >=44px, hover neutralise */
  .app-main .period-select { min-height: 44px; }
  .app-main .ach:hover { transform: none; }

  /* controles zoom Leaflet >=44px */
  .app-main .leaflet-control-zoom a {
    width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  }

  /* CTA « Voir le detail complet » (orders) deja pleine largeur ; on garantit le tap */
  .section a[href^="order_details.php"] { min-height: 44px; }
}

/* ████ ZONE: COMMS (CONCIERGE, CONTACT, PAGE CMS, SUCCESS) ████ */
/* =====================================================================
   ZONE COMMS — concierge.php · contact.php · page.php (CMS) · success.php
   100% sous @media. Aucune règle racine. Desktop intact.
   NOTE SPÉCIFICITÉ : les <style> inline de concierge/contact/page se
   chargent APRÈS mobile.css (mobile.css est dans <head>, les <style> sont
   en fin de <body>). Pour battre ces inline à breakpoint égal, les règles
   ci-dessous montent d'un cran via l'ancêtre `.app-main` (structurel,
   présent sur toutes ces pages) ou via un sélecteur composé. success.php
   est dans style.css (pas inline) → simples classes suffisent.
   ===================================================================== */

/* ---------------------------------------------------------------------
   CONCIERGE.php — tablette : collapse de la grille chat dès 1024px
   (l'inline ne collapse qu'à 900px). On préfixe par .app-main pour
   l'emporter sur l'inline `.conc-grid { grid-template-columns:1fr }`.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .app-main .conc-grid {
    /*grid-template-columns: 280px 1fr;*/
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .app-main .conc-grid { grid-template-columns: 280px 1fr; gap: 12px; }

  /* Le chat occupe moins de hauteur résiduelle (carte profil empilée au-dessus) */
  .app-main .conc-chat {
    min-height: 60vh;
    min-height: 60svh;
    max-height: calc(100svh - var(--header-h) - 120px);
  }

  /* Bulles plus larges sur écran étroit */
  .app-main .conc-msg { max-width: 88%; }

  /* Anti-zoom iOS : le textarea passe de 13px à 16px */
  .app-main .conc-compose textarea { font-size: 16px; }
}

@media (max-width: 480px) {
	.app-main .conc-grid { grid-template-columns: 1fr; gap: 12px; }
  .app-main .conc-messages { padding: 16px 14px; gap: 10px; }
  .app-main .conc-msg { max-width: 90%; }

  .app-main .conc-compose {
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  /* activity-header (partagé dashboard) : éviter l'écrasement titre + badge.
     Restreint à la page concierge via l'ancêtre du conc-grid voisin :
     on cible le header en tête du main de concierge. */
  .app-main .activity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Cibles tactiles concierge : ≥44px + neutralisation des hover collants */
@media (hover: none) and (pointer: coarse) {
  .app-main .conc-compose button {
    width: 44px;
    height: 44px;
  }
  .app-main .conc-compose button:hover {
    background: var(--gold);
    transform: none;
  }

  .app-main .conc-action-btn {
    min-height: 44px;
  }
  .app-main .conc-action-btn:hover {
    transform: none;
    background: rgba(201, 168, 76, .06);
  }
  .app-main .conc-action-btn:active { transform: none; }

  .app-main .conc-refresh {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .app-main .conc-refresh:hover {
    color: var(--gold);
    background: transparent;
  }
}

/* ---------------------------------------------------------------------
   CONTACT.php — translateX de compensation sidebar.
   L'inline applique translateX à partir de min-width:1100px. Quand la
   sidebar devient drawer (≤1024px), elle est hors-flux → tout décalage
   horizontal est un bug. On neutralise le translateX entre 1025 et 1100px
   (plage où la sidebar EST déjà drawer mais l'inline 1100px ne s'applique
   pas encore — en réalité l'inline ne s'active qu'au-dessus de 1100 donc
   pas de chevauchement ; on durcit néanmoins en annulant tout transform
   sous le breakpoint drawer pour robustesse). */
@media (max-width: 1024px) {
  .app-main .contact-wrap { transform: none; }
}

@media (max-width: 768px) {
  /* Anti-zoom iOS : champs 14px → 16px (préfixe .app-main pour battre l'inline) */
  .app-main .contact-card input,
  .app-main .contact-card textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .app-main .contact-wrap { padding: 28px 14px 56px; }
  .app-main .contact-title { font-size: 30px; }
  .app-main .contact-card { padding: 20px 16px; }

  /* Bouton or pleine largeur dans les actions */
  .app-main .contact-actions { margin-top: 22px; }
  .app-main .metal-btn {
    width: 100%;
    justify-content: center;
  }

  /* État succès compacté */
  .app-main .contact-success { padding: 32px 20px; }
  .app-main .contact-success-mark {
    width: 52px;
    height: 52px;
  }
}

/* Bouton or tactile : neutraliser le reflet ::before et le brightness hover */
@media (hover: none) and (pointer: coarse) {
  .app-main .metal-btn {
    min-height: 48px;
  }
  .app-main .metal-btn:hover {
    filter: none;
    transform: none;
  }
  .app-main .metal-btn:hover::before { left: -130%; }
  .app-main .metal-btn:active { transform: none; }
}

/* ---------------------------------------------------------------------
   PAGE.php (CMS) — compaction 480 + garde-fou contenu HTML injecté.
   Préfixe .app-main pour l'emporter sur l'inline 768. --------------- */
@media (max-width: 480px) {
  .app-main .cms-page { padding: 24px 16px 56px; }
  .app-main .cms-page .cms-title {
    font-size: 30px;
    margin-bottom: 22px;
  }
  .app-main .cms-page .cms-body h2 {
    font-size: 22px;
    margin-top: 26px;
  }
}

/* Garde-fou : le body_html CMS (édité en admin) peut contenir un tableau
   ou une image large → empêcher tout débordement horizontal. */
@media (max-width: 768px) {
  .app-main .cms-page .cms-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-main .cms-page .cms-body img,
  .app-main .cms-page .cms-body iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ---------------------------------------------------------------------
   SUCCESS.php — CSS dans style.css (pas d'inline) → classes simples OK.
   --------------------------------------------------------------------- */
/* Mobile + tablette (≤1024) : .success-title est un item flex dans un conteneur
   align-items:center. En white-space:nowrap, son min-width:auto vaut la largeur
   ENTIÈRE du texte (aucun point de coupure) → l'item ne se contraint jamais au
   conteneur, scrollWidth == clientWidth, et le JS d'auto-fit ne se déclenche pas
   → le titre déborde des 2 côtés. min-width:0 casse ce plancher, max-width:100%
   le plafonne à la largeur du conteneur → le texte déborde DANS une boîte à la
   largeur écran, le JS détecte (scrollWidth > clientWidth) et réduit la police. */
@media (max-width: 1024px) {
  .success-title { min-width: 0; max-width: 100%; }
}

@media (max-width: 768px) {
  /* svh évite le saut lié aux barres d'adresse mobiles */
  .success-hero {
    min-height: calc(100svh - var(--header-h));
  }
  .success-content {
    padding: 0 20px 56px;
  }
}

@media (max-width: 480px) {
  .success-content {
    padding: 0 16px 40px;
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  }

  /* Meilleur point de départ pour le JS d'auto-fit (nowrap conservé) */
  .success-title {
    font-size: clamp(26px, 7vw, 40px);
  }

  .success-body {
    margin-bottom: 22px;
  }

  /* Boutons CTA : largeur disponible au lieu du max 320px fixe */
  .success-actions {
    max-width: 100%;
  }
}

/* CTA tactile : ≥44px + neutralisation hover (box-shadow/bg) */
@media (hover: none) and (pointer: coarse) {
  .btn-success-outline {
    min-height: 48px;
  }
  .btn-success-outline:hover {
    background: rgba(43, 43, 43, .45);
    box-shadow: none;
  }
  .btn-success-outline:active { opacity: .8; }
}

/* Accessibilité / batterie : figer le canvas de bulles si mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .success-bubbles { display: none; }
}

/* ████ AJUSTEMENTS CIBLÉS (retours utilisateur) ████ */
@media (max-width: 768px) {
  /* 1) Drapeau de langue actif : pas de soulignement or (box-shadow inset) sur mobile. */
  .hl-flag.is-active { box-shadow: none; }

  /* 2) Bannière démo : gap resserré à 5px (compacte la hauteur quand les items wrappent).
        Spécificité .demo-mode … pour battre la base de demo.css (chargé après mobile.css). */
  .demo-mode .demo-banner-inner { gap: 2px; }

  /* 3) Image bouteille des cards collections contrainte à la hauteur du wrap réduit :
        .bottle-collection-img (max-height:300px dans le <style> inline) débordait sur le
        titre / le haut de la .collection-card. .collection-card … (0,0,2,0) bat l'inline. */
  .collection-card .bottle-collection-img { max-height: 300px; }
}
/*
@media (max-width: 480px) {
  .collection-card .bottle-wrap { height: 300px !important; }
  .collection-card .bottle-collection-img { max-height: 300px; }
}
*/
/* ████ POLISH (tables larges + graphe analytics) ████ */
@media (max-width: 768px) {
  /* Wrapper scroll-x autour des tables larges (ex. activité récente index.php) :
     plein neutre en desktop (le <div> n'a de style qu'ici). */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Graphe « Buys » : hauteur fixe du conteneur, couplée à maintainAspectRatio:false
     (mobile-only côté JS) → le graphe remplit 300px au lieu de s'aplatir. */
  .app-main .an-chart-wrap { height: 300px; }
}

/* ████ index.php : onglets collections « 3 sur une ligne » (tailles) ████ */
@media (max-width: 768px) {
  .collection-tabs--fit .col-tab { padding: 9px 6px; font-size: 11px; }
}
@media (max-width: 480px) {
  .collection-tabs--fit .col-tab { padding: 8px 4px; font-size: 9.5px; }
}

/* ████ AJUSTEMENTS UTILISATEUR (overrides finaux) ████ */
@media (max-width: 1024px) {
  /* collections.php : grille auto-fill minmax 260px (à tous les breakpoints mobiles).
     Scopé via :has(.collection-card) → ne touche PAS accessoires (.collection-panel partagé). 
  .collection-panel .order-grid:has(.collection-card) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }*/
  /* Image bouteille collections : 300px sur tout mobile (robustesse tablette). */
  .collection-card .bottle-collection-img { max-height: 300px !important; }
  /* Drawer ouvert : largeur AUTO → s'adapte au libellé de nav le plus long. */
  .app-sidebar.is-open { width: max-content; max-width: 90vw; }
}
@media (max-width: 768px) {
  .demo-mode .demo-banner-text { font-size: 11px; text-align: center; }
  .demo-mode .demo-banner-cta  { font-size: 10px; }
  .footer-bottom { font-size: 10px; }
}