/* ==========================================================================
   FLASH APÉRO — CORRECTIFS MOBILES
   Chargé EN DERNIER, après style.css et v3-cartes.css.
   RÈGLE ABSOLUE : ce fichier ne contient QUE des @media max-width.
   Au-delà de 900 px, il n'existe pas. Le bureau ne bouge d'aucun pixel.
   Les règles qui touchent l'en-tête sont bornées à 860 px, car la bande
   861–900 px est encore pilotée par @media(min-width:861px) de v3-cartes.css.
   ========================================================================== */

/* ==========================================================================
   1. DÉBORDEMENTS HORIZONTAUX
   ========================================================================== */
@media (max-width:900px){

  /* v3-cartes.css l.447 et l.886 : .lienfort{white-space:nowrap}.
     « Composition, origine et parfums du Vody → » mesure 305 px insécables.
     À 320 px, Chrome élargit la fenêtre de mise en page à 327 px : toute la
     page se décale. C'est LE seul débordement réel de index.html. */
  .lienfort{white-space:normal}

  /* vody.html : le tableau à 4 colonnes a une largeur mini de 354 px et
     pousse la page à 374 px sur un écran de 320. */
  .tbl{table-layout:fixed;font-size:13px}
  .tbl th,.tbl td{padding:9px 7px;overflow-wrap:anywhere;hyphens:auto}

  /* Mots longs : communes, intitulés de produits, libellés du panier. */
  .zone b,.zone span,.c__t,.c__d,.citem__t b,.citem__t span,
  .foot a,.somm a,.mopt span,.sec__l,.legal-check span{overflow-wrap:break-word}

  /* Cause STRUCTURELLE. v3-cartes.css l.10 : .cat{grid-template-columns:1fr}.
     Une piste « 1fr » vaut minmax(auto,1fr) : son minimum est le min-content
     de son contenu. Tout élément insécable du catalogue pousse donc la page
     entière. minmax(0,1fr) supprime ce plancher une fois pour toutes. */
  .cat{grid-template-columns:minmax(0,1fr);padding-inline:16px}
}

/* ==========================================================================
   2. BARRES FIXES — chevauchements et zone morte en bas de page
   ========================================================================== */
@media (max-width:860px){

  /* Constat : .callbar mesure 99 px (le libellé « Appeler 07 78 78 39 44 »
     passe sur deux lignes), alors que style.css l.745 réserve
     body{padding-bottom:78px}. 21 px de contenu passent sous la barre —
     55 px sur un iPhone à encoche, où env(safe-area-inset-bottom)=34 px.
     On fige la hauteur de la barre et on la reporte partout. */
  :root{--callbar-h:64px}

  .callbar{
    gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    align-items:stretch
  }
  .callbar .btn{
    flex:1 1 0;min-width:0;min-height:48px;padding:0 8px;
    font-size:13.5px;white-space:nowrap;line-height:1.15
  }

  /* Le contenu s'arrête exactement au-dessus de la barre. */
  body{padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom))}

  /* style.css l.746 pose .cartbtn{bottom:88px} : avec une barre de 99 px
     (133 px avec l'encoche) le bouton panier se pose DESSUS. */
  .cartbtn{
    bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom) + 12px);
    right:14px;padding:13px 18px;font-size:14px
  }

  /* Le pied de page doit pouvoir être lu en entier. */
  .foot{padding-bottom:28px}
}

/* ==========================================================================
   3. SAISIE — plus de zoom automatique iOS
   Safari agrandit la page dès qu'un champ passe sous 16 px à la mise au point.
   .field est à 15,5 px (style.css l.281).
   ========================================================================== */
@media (max-width:900px){
  .field,textarea.field,.opts .opt,select{font-size:16px}
}

/* ==========================================================================
   4. CIBLES TACTILES
   ========================================================================== */
@media (max-width:900px){
  /* fermeture du tiroir : 28,7 × 34 px mesurés */
  .xbtn{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:24px}

  /* + / − de quantité : 30 × 30 px mesurés, c'est la commande la plus utilisée */
  .qty{gap:10px}
  .qty button{width:40px;height:40px;border-radius:11px;font-size:19px}

  /* boutons d'accès au logement : 119 × 38 px mesurés */
  .opt{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}

  /* la case « je certifie avoir 18 ans » mesure 13 × 17 px : elle est écrasée
     par le flex parent, faute de flex:0 0 auto. C'est une case légale. */
  .legal-check{gap:12px;align-items:center}
  .legal-check input{flex:0 0 auto;width:24px;height:24px;margin-top:0}

  /* questions fréquentes : 24 px de haut mesurés */
  summary{min-height:44px;padding:10px 0}
  .faq details{padding:6px 16px}

  /* lien inline « Composition, origine… » : 20 px de haut */
  .lienfort{display:inline-block;padding:6px 0}

  /* liens du pied de page : 30,4 px */
  .foot a{min-height:40px;padding:8px 0}
}

/* ==========================================================================
   5. ÉCRAN DE COMPOSITION DE LA FORMULE
   Bogue : .mod porte overflow:hidden (v3-cartes.css l.154). Un ancêtre en
   overflow:hidden devient le conteneur de défilement de ses descendants
   sticky — or .mod ne défile pas. Résultat : .mod__h (sticky top) et
   .mod__f (sticky bottom) ne collent JAMAIS. Sur mobile la modale mesure
   1712 px : il faut traverser 21 cases à cocher avant de voir le bouton
   « Ajouter au panier », et le compteur « 0 / 2 » disparaît dès le 3e soft.
   Correctif : feuille plein écran, en-tête et pied hors flux, corps défilant.
   Aucun sticky, donc aucun transform sur un sticky.
   ========================================================================== */
@media (max-width:900px){
  .ov{padding:0;overflow:hidden}
  .mod{
    margin:0;max-width:none;width:100%;height:100dvh;max-height:100dvh;
    border:0;border-radius:0;box-shadow:none;
    display:flex;flex-direction:column
  }
  .mod__h{position:static;flex:0 0 auto;padding:14px 16px}
  .mod__h h2{font-size:19px}
  .mod__b{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:14px 16px 4px
  }
  .mod__f{
    position:static;flex:0 0 auto;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))
  }
  /* deux colonnes d'options : 21 cases passent de 1365 px à 700 px */
  .mopts{grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 16px}
  .mopt span{min-height:52px;font-size:13px;padding:8px 10px;gap:8px}
  .mopt span small{display:block;font-size:11px}
  .mod__ok{flex:1 1 100%;min-height:52px}
}
@media (max-width:380px){
  .mopts{grid-template-columns:1fr}
}

/* ==========================================================================
   6. TIROIR DU PANIER
   ========================================================================== */
@media (max-width:900px){
  .drawer__panel{width:100%;border-left:0}
  /* .drawer__head est sticky : on ne lui met AUCUN transform. */
  .drawer__head{padding:14px 16px}
  .drawer__body{padding:14px 16px}
  .drawer__foot{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
  .rappelbox{padding:12px 16px;font-size:12.5px}
  .citem__p{min-width:52px}
  .form{gap:10px}
}

/* ==========================================================================
   7. HAUTEUR DE PAGE — le catalogue
   28 927 px à 390 px de large, dont 21 531 px pour le seul catalogue.
   ========================================================================== */
@media (max-width:900px){

  /* 7.1 — toutes les familles passent en deux colonnes.
     .grid restait en une seule colonne (minmax(min(300px,100%),1fr)) :
     bières et vins occupaient à eux seuls 5 171 px. */
  /* minmax(0,1fr) et non 1fr : une piste « 1fr » garde un plancher
     min-content et, à 360 px exactement, élargissait la page à 363 px. */
  .grid,.grid--sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  /* 7.2 — la vignette. 300 px pour une carte large, 140 px pour une petite. */
  .grid .c__vis{height:186px}
  .grid--sm .c__vis{height:124px}

  /* 7.3 — le corps de carte : on récupère 100 px par carte. */
  .c__b{padding:10px 11px 11px}
  .c__t{font-size:15px;min-height:0;line-height:1.15;display:block}
  .grid--sm .c__t{font-size:13.5px;min-height:0}
  .grid .c__d,.c__d{font-size:12px;line-height:1.35;margin:4px 0 0}
  .grid--sm .c__d{font-size:11px;line-height:1.3}

  /* Le prix et le bouton étaient empilés : 119 px. Côte à côte : 58 px. */
  .c__f{padding-top:9px;display:flex;align-items:center;gap:8px}
  .px{font-size:19px;min-width:0;padding:7px 9px 6px;border-radius:10px}
  .grid--sm .px{font-size:17px;padding:6px 8px 5px}
  .px sup{font-size:10px;margin-left:1px}
  .cta{
    margin-top:0;flex:1 1 auto;width:auto;min-height:44px;
    font-size:11.5px;letter-spacing:.6px;padding:0 6px
  }

  /* le sélecteur Standard / Premium */
  .seg{padding:3px;gap:3px;margin:6px 0 0}
  .seg button{min-height:40px;font-size:11.5px;padding:0 4px}
  .grid--sm .seg button{font-size:11px}

  /* 7.4 — les en-têtes de section */
  .sec{padding:4px 0 22px}
  .sec h2{font-size:23px}
  .sec__h{margin:0 0 2px;gap:8px}
  .sec__c{font-size:11px;letter-spacing:.8px}
  .sec__l{font-size:13px;margin:0 0 12px}
  .rappel{font-size:12px;padding:10px 12px;margin:0 0 14px;line-height:1.45}
  .rappel span{font-size:11.5px}
  .evin{margin:18px 0 0;padding:12px 13px;font-size:11.5px}
  .cat{gap:0}
}

/* --------------------------------------------------------------------------
   7 bis — TRÈS PETITS ÉCRANS (≤ 359 px)
   À 320 px, deux colonnes de cartes dont le pied est en flex ont un
   min-content de 148 px chacune : 2×148 + 12 + 32 = 340 > 320, et Chrome
   élargit la fenêtre de mise en page à 363 px. On resserre le pied.
   -------------------------------------------------------------------------- */
/* vignettes un cran plus basses sur les écrans de moins de 375 px */
@media (max-width:374px){
  .grid .c__vis{height:152px}
  .grid--sm .c__vis{height:112px}
  .sec__l{font-size:12.5px}
}
@media (max-width:359px){
  .cat{padding-inline:12px}
  .hero__media img{max-height:none}
  .hero__p{font-size:14px}
  .zones{gap:7px}
  .zone{padding:9px 9px}
  .grid,.grid--sm{gap:10px}
  .c__b{padding:9px 8px 10px}
  .px{font-size:16px;padding:6px 6px 5px}
  .grid--sm .px{font-size:15px}
  .cta{font-size:10px;letter-spacing:0;padding:0 4px}
  .c__f{gap:6px}
}

/* ==========================================================================
   8. HAUTEUR DE PAGE — hors catalogue
   ========================================================================== */
@media (max-width:900px){
  :root{--sp-section:36px}

  /* hero : 1 081 px */
  .hero{padding:16px 0 22px}
  .hero__grid{gap:16px}
  .hero h1{font-size:clamp(32px,9vw,44px);margin:8px 0 0}
  .clock{margin:12px 0 4px}
  .hero__p{font-size:14.5px;line-height:1.5;margin:14px 0 0}
  .hero__cta{gap:9px;margin:16px 0 0}
  .hero__cta .btn{flex:1 1 100%;padding:15px 18px;font-size:15px}
  .hero__media img{max-height:none;border-radius:18px}

  /* bandeaux défilants : 47 px chacun */
  .marquee{padding:8px 0}
  .marquee span{font-size:11px;padding:0 16px;letter-spacing:.16em}

  /* bande de réassurance : 404 px en une colonne sous 520 px
     (v3-cartes.css l.304). Deux colonnes : 3 rangées au lieu de 5. */
  .assur__grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 16px}
  .assur .fact b{font-size:18px}
  .assur .fact span{font-size:10px;letter-spacing:.1em}

  /* le déroulé */
  .steps{gap:10px;margin-top:20px}
  .step{padding:16px}
  .step b.num{font-size:26px}
  .step h3{font-size:15.5px;margin:8px 0 5px}
  .step p{font-size:13px;line-height:1.5}
  .timeline{margin-top:20px;padding:16px}
  .tl{margin-top:14px}
  .tl__legend{gap:14px;margin-top:14px;font-size:12px}
  .h2{font-size:clamp(26px,7vw,34px)}
  .lead{font-size:14.5px;margin:10px 0 0}
  .eyebrow{margin:0 0 8px}

  /* zone de livraison : 2 149 px, 19 communes en une colonne */
  .zones{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
  .zone{padding:10px 11px;border-radius:12px}
  .zone b{font-size:13px}
  .zone span{font-size:11px;margin-top:2px}
  #zones{margin-top:18px}
  .zgrp + .zgrp{margin-top:18px}
  .zgrp__t{font-size:18px;margin:0 0 10px}

  /* questions fréquentes */
  .faq{gap:8px;margin-top:18px}
  .faq details p{font-size:13.5px;margin:8px 0 0;padding-left:26px;line-height:1.5}
  .faq summary{font-size:14.5px}

  /* pied de page : 1 055 px, une seule colonne sous 620 px */
  .foot{padding-top:30px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:18px 20px}
  .foot__grid > :first-child{grid-column:1 / -1}
  .foot__logo{width:56px;height:56px;margin-bottom:10px}
  /* Le jeu : sur téléphone on est déjà sur l'appareil, le code QR ne sert plus
     à rien — le bouton suffit. */
  .done .jeuc{padding:20px 16px 18px;margin-top:24px}
  .done .jeuc__d{font-size:13px}
  .done .jeuc__qr{display:none}
  .done .jeuc__m{font-size:11px}
  .foot p{font-size:12.5px}
  .foot h3{margin:0 0 8px}
  .foot ul{gap:2px}
  .sanitaire{padding:12px 14px;font-size:12px}
  .foot .sanitaire{margin:18px 0}
  .prevention{margin-top:18px;font-size:11.5px}
  .copy{margin-top:20px;font-size:11.5px}
}

/* ==========================================================================
   9. BARRE DE CATÉGORIES MOBILE  (optionnelle, voir le rapport)
   ⚠ Piège documenté : .hdr__nav{display:flex} ne doit JAMAIS être écrit hors
   media query, sinon il annule le display:none mobile de style.css l.740.
   Ici la règle est enfermée dans max-width:860px, et la règle bureau de
   v3-cartes.css l.313 est en min-width:861px : les deux ne se croisent
   jamais. Rien au-dessus de 860 px n'est touché.
   ========================================================================== */
@media (max-width:860px){
  :root{--hdr-h:132px}          /* 83 px d'en-tête + 49 px de barre */

  .hdr__in{flex-wrap:wrap;row-gap:6px;padding-bottom:6px}
  .hdr__right{margin-left:auto}

  .hdr__nav{
    display:flex;order:3;flex:1 0 100%;margin:0;gap:6px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent)
  }
  .hdr__nav::-webkit-scrollbar{display:none}

  .navlink{
    flex:0 0 auto;scroll-snap-align:start;
    display:inline-flex;align-items:center;min-height:40px;
    padding:0 13px;font-size:12px;letter-spacing:.04em;
    border:1px solid rgba(255,46,136,.28);border-radius:999px;
    background:rgba(255,46,136,.08)
  }
  .navlink[aria-current="true"]{background:var(--pink-btn);color:#fff;border-color:transparent}
  .navlink[aria-current="true"]::after{display:none}
  .navlink--excl .excl{display:none}
}

/* ==========================================================================
   10. CONSTAT (b) — le produit doit primer sur le décor de marque
   Dans une petite carte, la vignette mesure 169 × 124 px et le fond
   fond-marque.webp est posé en center/cover : le motif « FLASH APÉRO » est
   agrandi et occupe toute la tuile. La bouteille détourée, elle, fait
   186 × 700 px (rapport 0,27) : à 96 % de hauteur elle ne fait que 32 px de
   large, soit 19 % de la tuile. On voit le décor, pas le produit.
   Correctif : dans les petites cartes uniquement, le décor cède la place à
   un halo de la teinte de la famille, et le produit prend toute la hauteur.
   Les grandes cartes (formules, packs) gardent leur visuel composé.
   ========================================================================== */
@media (max-width:900px){
  .grid--sm .c__vis{
    background-image:none;
    background-color:#0a0410
  }
  .grid--sm .c__vis::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:radial-gradient(110% 80% at 50% 108%,rgba(var(--t),.30),transparent 72%)
  }
  .grid--sm .c__vis::after{
    background:linear-gradient(180deg,rgba(6,5,10,0) 70%,rgba(6,5,10,.35) 88%,var(--ink-2) 100%)
  }
  .grid--sm .c__vis img,
  .zoom .grid--sm .c__vis img{height:100%;max-width:100%;bottom:0}

  /* les visuels déjà composés (packs Vody) gardent leur cadrage */
  .grid--sm .c__vis--plein img,
  .zoom .grid--sm .c__vis--plein img{height:92%;max-width:98%;bottom:4%}
  .grid--sm .c__vis--plein::before{display:none}

  /* la carte sans photo garde son décor */
  .c__vis--vide{background-image:url('../img/p/fond-marque.webp')}
}

/* ==========================================================================
   11. MOUVEMENT RÉDUIT
   Les feuilles précédentes coupent déjà animation ET transition en
   !important. On coupe en plus ce que ce fichier introduit : le défilement
   par à-coups de la barre de catégories et de la modale.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hdr__nav{scroll-snap-type:none;scroll-behavior:auto}
  .mod__b,.drawer__panel{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ==========================================================================
   12. RANGÉES DÉFILANTES POUR LES FAMILLES LONGUES
   Palier 3 du plan de réduction. Les cinq familles homogènes (on choisit un
   parfum, pas un produit) passent d'une grille verticale à une rangée qui
   défile horizontalement. Aucun produit n'est retiré.
   Prérequis : .cat{grid-template-columns:minmax(0,1fr)} du bloc 1, sans quoi
   la piste « 1fr » prend la largeur de la rangée et fait exploser la page.
   ========================================================================== */
@media (max-width:900px){
  #softs .grid,#redbull .grid,#vody .grid,#snacks .grid,#depannage .grid{
    display:grid;grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:minmax(158px,46%);
    overflow-x:auto;overflow-y:hidden;
    gap:10px;padding:3px 3px 12px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);
    mask-image:linear-gradient(90deg,#000 94%,transparent)
  }
  #softs .grid::-webkit-scrollbar,#redbull .grid::-webkit-scrollbar,
  #vody .grid::-webkit-scrollbar,#snacks .grid::-webkit-scrollbar,
  #depannage .grid::-webkit-scrollbar{display:none}
  #softs .c,#redbull .c,#vody .c,#snacks .c,#depannage .c{scroll-snap-align:start}

  /* la colonne fait 158 px : « AJOUTER » doit tenir à côté du prix */
  #softs .cta,#redbull .cta,#vody .cta,#snacks .cta,#depannage .cta{
    font-size:10px;letter-spacing:0;padding:0 4px}
  #softs .px,#redbull .px,#vody .px,#snacks .px,#depannage .px{
    font-size:16px;padding:6px 7px 5px}
  #softs .c__f,#redbull .c__f,#vody .c__f,#snacks .c__f,#depannage .c__f{gap:6px}

  /* le compteur de la section devient l'indice de défilement */
  #softs .sec__c::after,#redbull .sec__c::after,#vody .sec__c::after,
  #snacks .sec__c::after,#depannage .sec__c::after{content:' · faites glisser →'}
}
@media (prefers-reduced-motion:reduce){
  #softs .grid,#redbull .grid,#vody .grid,#snacks .grid,#depannage .grid{
    scroll-snap-type:none}
}

/* ══════════════════════════════════════════════════════════════════════
   AJOUTS DU 30/07 — le bandeau d'offre et l'accès à l'espace gérant.
   Comme tout ce fichier : sous 900 px uniquement, le bureau ne bouge pas.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* Les offres : une par ligne, visuel plus petit, la phrase respire. */
  .offres{grid-template-columns:1fr;gap:12px}
  .offrec{padding:16px 15px;gap:13px}
  .offrec__vis{width:78px;height:78px;border-radius:13px}
  .offrec__t{font-size:18px}
  .offrec__d{font-size:13px}
  .offrec__badge{left:15px;font-size:10.5px;padding:5px 10px 4px}

}
@media (max-width:380px){
  .offrec__t{font-size:16.5px}
  .offrec__vis{width:66px;height:66px}
}

/* La colonne « Entreprise » prend toute la largeur sur téléphone : l'adresse
   se lit mieux, et le point d'accès tombe juste après le SIREN. */
@media (max-width:900px){
  .foot__grid > div:last-child{grid-column:1 / -1}
}