/* Wonder Eyes — téléphone : corrections page par page (chargé après style.css).
   Tout est sous 700 px et préfixé body:not(.is-home) : l'accueil a sa propre passe.
   Principe des cibles tactiles : on agrandit la zone d'appui (padding) et on la
   compense par une marge négative, pour que la mise en page ne bouge pas. */

@media (max-width:699px){

  /* ---------- commun : en-tête, menu, champs, liens d'action ---------- */

  /* « compte » et la marque : 44 px de haut à l'appui, même place à l'œil */
  body:not(.is-home) .top .util a,
  body:not(.is-home) .top .brand{padding-block:10px;margin-block:-10px}

  /* menu plein écran : le bouton fermer et les liens du bas */
  body:not(.is-home) .menu-head button{min-height:44px;padding:0 0 0 var(--s2)}
  body:not(.is-home) .menu-foot{gap:0}
  body:not(.is-home) .menu-foot a{display:block;padding-block:10px;text-decoration:none}

  /* iOS zoome sur tout champ sous 16 px */
  body:not(.is-home) .field input,
  body:not(.is-home) .field select,
  body:not(.is-home) .news input,
  body:not(.is-home) .promo-box input,
  body:not(.is-home) select.mini{font-size:16px}

  /* petits textes : 13 px minimum pour ce qui se lit */
  body:not(.is-home) .small,
  body:not(.is-home) .pnote,
  body:not(.is-home) .tag,
  body:not(.is-home) .countdown{font-size:13px;line-height:20px}
  body:not(.is-home) .facts dt{font-size:13px;line-height:24px;padding-top:0}

  /* cases à cocher : boîte de 20 px, ligne de 44 px à l'appui */
  body:not(.is-home) .check{align-items:flex-start;gap:12px;padding-block:12px;margin-block:-12px}
  body:not(.is-home) .check input{width:20px;height:20px;margin:0}
  body:not(.is-home) .check span{line-height:20px}
  body:not(.is-home) form[data-auth] .check{margin:calc(var(--s1) - 12px) 0 -12px}

  /* liens d'action isolés ([ act ], linkish, fil d'Ariane, pagination) */
  body:not(.is-home) .act,
  body:not(.is-home) .linkish,
  body:not(.is-home) .crumb a,
  body:not(.is-home) .a-intro p a,
  body:not(.is-home) .pnote a{display:inline-block;padding-block:12px;margin-block:-12px}
  body:not(.is-home) .pager a{display:inline-block;padding-block:12px;margin-block:-12px}
  body:not(.is-home) .actions{row-gap:var(--s2)}
  body:not(.is-home) .actions > a:not(.btn),
  body:not(.is-home) .actions > button:not(.btn){padding-block:10px;margin-block:-10px}
  body:not(.is-home) .actions .btn.sm{min-height:44px}

  /* en-têtes de page : moins de vide avant le contenu */
  body:not(.is-home) .phead{padding-block:var(--s4) var(--s3)}

  /* ---------- pied de page ---------- */

  /* Aide passe sous Shop ; Collectif occupe la colonne de droite */
  body:not(.is-home) .fcols{grid-auto-flow:row dense;row-gap:var(--s4)}
  body:not(.is-home) .fcols > .fcol:nth-child(2){grid-column:2;grid-row:span 2}
  body:not(.is-home) .fcol h2{margin-bottom:var(--s0)}
  body:not(.is-home) .fcol li,
  body:not(.is-home) .foot-brand ul li{padding:0}
  body:not(.is-home) .fcol li a,
  body:not(.is-home) .foot-brand ul a{display:inline-block;padding-block:12px;line-height:20px}
  body:not(.is-home) .foot-brand ul li:last-child{padding-block:12px}
  body:not(.is-home) .news button{width:52px}
  body:not(.is-home) .foot-legal{font-size:13px;line-height:20px;row-gap:0;padding-top:var(--s2)}
  body:not(.is-home) .foot-legal > span{padding-block:12px}
  body:not(.is-home) .foot-legal a{display:inline-block;padding-block:12px;margin-block:-12px}
  body:not(.is-home) .foot-brand .brand{padding-block:8px;margin-block:-8px}
  body:not(.is-home) .foot-legal .sep{margin-left:0}

  /* ---------- lecteur (v7) ----------
     La barre est décrite dans style.css (bloc « v7 — lecteur ») : 87 px sur
     téléphone, plus 216 px quand la vidéo YouTube flotte au-dessus.
     Place réservée en bas de page = barre + vidéo. */
  body.has-player:not(.is-home),body.has-player.notabs:not(.is-home){padding-bottom:calc(var(--pl-h) + var(--pl-v, 0px) + env(safe-area-inset-bottom))}

  /* ---------- tiroir du panier (feuille) ---------- */
  body:not(.is-home) .drawer-head button{width:44px;height:44px;margin-right:-12px}
  body:not(.is-home) .drawer-foot .lnk{padding-block:10px;margin-block:-10px}

  /* ---------- quantité et lignes de panier (panier, tiroir) ---------- */
  body:not(.is-home) .qty{height:44px}
  body:not(.is-home) .qty button{width:44px}
  body:not(.is-home) .qty output{min-width:40px;font-size:15px}
  body:not(.is-home) .cl-act .rm{padding-block:12px;margin-block:-12px}
  body:not(.is-home) .cl-top a{display:inline-block;padding-block:10px;margin-block:-10px}
  body:not(.is-home) .cl-top > :last-child,
  body:not(.is-home) .sum-lines li > :last-child{white-space:nowrap}

  /* ---------- /sets : la roue ---------- */
  body:not(.is-home) .reel-foot button{width:44px;height:44px;display:grid;place-items:center;padding:0}
  body:not(.is-home) .reel-foot{gap:var(--s2)}
  /* la pochette prend la place libre : 72 % de la largeur, bornée par la hauteur */
  body:not(.is-home) .reel.is-on .reel-track{--cw:min(72vw,calc(100svh - var(--head) - 330px))}
  body.has-player:not(.is-home) .reel.is-on .reel-pin{padding-bottom:calc(var(--pl-h) + var(--pl-v, 0px) + env(safe-area-inset-bottom))}
  body.has-player:not(.is-home) .reel.is-on .reel-track{--cw:min(64vw,calc(100svh - var(--head) - 330px - var(--pl-h) - var(--pl-v, 0px)))}
  body.has-player:not(.is-home) .reel.is-on .reel-hint{display:none}
  /* vidéo YouTube ouverte : 200 px de moins, la roue garde l'essentiel */
  body.pl-yt:not(.is-home) .reel.is-on .reel-lead,
  body.pl-yt:not(.is-home) .reel.is-on .reel-card .sub{display:none}
  body.pl-yt:not(.is-home) .reel.is-on .reel-track{--cw:min(64vw,calc(100svh - var(--head) - 300px - var(--pl-h) - var(--pl-v, 0px)))}

  /* ---------- /shop et vignettes produit ---------- */
  body:not(.is-home) .filters{flex-wrap:wrap}
  body:not(.is-home) .filters button{padding-block:10px;margin-block:-10px}
  /* le prix ne se coupe plus en « 35 / € » */
  body:not(.is-home) .tile .cap > span:last-child{white-space:nowrap}

  /* ---------- fiche produit ---------- */
  body:not(.is-home) .panel{padding-bottom:var(--s5)}
  body:not(.is-home) .choice legend{font-family:var(--sans);font-size:13px;line-height:20px;letter-spacing:0;color:#9a9a9a}
  body:not(.is-home) .choice:not(.cells) span{min-height:44px;margin-block:-10px}
  body:not(.is-home) .hint{font-size:13px}
  body:not(.is-home) .buybar .mono{font-size:13px;line-height:18px}
  body:not(.is-home) .lb-bar button{min-width:44px;min-height:44px}
  body:not(.is-home) .lb-bar kbd{display:none}
  body:not(.is-home) .lb-bar{padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom))}

  /* ---------- panier ---------- */
  /* un seul filet entre la dernière ligne et le sous-total */
  body:not(.is-home) .cartwrap .summary{margin-top:var(--s3)}
  body:not(.is-home) .cartwrap .sum{border-top:0;padding-top:0}

  /* ---------- commande ---------- */
  body:not(.is-home) .stepper{flex-wrap:wrap;column-gap:var(--s3)}
  body:not(.is-home) .stepper button{padding-block:12px;margin-block:-12px}
  body:not(.is-home) .cowrap .summary{margin-top:var(--s2)}
  body:not(.is-home) .co{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  body:not(.is-home) .promo-box .btn{min-height:44px}

  /* ---------- scènes (compte, panier vide, merci, 404) ----------
     body.fixed ramenait la marge basse à 32 px : l'illustration passait sous
     le texte du compte connecté. On garde de la place pour sa partie claire. */
  body.fixed:not(.is-home) .scene-body{padding-bottom:30svh}

  /* ---------- compte ---------- */
  body:not(.is-home) .auth-links{flex-wrap:wrap}
  body:not(.is-home) .acc-foot{row-gap:0}

  /* ---------- collectif ---------- */
  body:not(.is-home) .crew{padding-top:var(--s4)}
  body:not(.is-home) .crew-foot{margin-top:var(--s5);padding-bottom:var(--s4)}
  body:not(.is-home) .crew-list a{padding-block:4px;gap:var(--s2)}
  /* le genre tient sur une ligne, à côté du nom */
  body:not(.is-home) .crew-list .rl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:not(.is-home) .crew-list .nm{flex:none}
  body:not(.is-home) .crew-mail{display:inline-block;padding-block:8px;margin-block:-8px}
  body:not(.is-home) .crew-cta .btn{min-height:48px}
  body:not(.is-home) .crew-press{display:inline-block;padding-block:12px;margin-block:4px -12px}

  /* ---------- soirée, membre : le journal ---------- */
  body:not(.is-home) .journal .row a{grid-template-columns:80px minmax(0,1fr)}

  /* ---------- aide ---------- */
  /* .plain li + li décalait le premier lien d'une rangée */
  body:not(.is-home) .help-toc{row-gap:0;margin-bottom:var(--s4)}
  body:not(.is-home) .help-toc li + li{margin-top:0}
  body:not(.is-home) .help-toc a{display:inline-block;padding-block:12px;line-height:20px}
}

/* =============================================================
   v6 — téléphone : « menu » à la place de « compte » dans l'en-tête,
   plus de barre d'onglets, pied de page réduit à l'essentiel
   ============================================================= */
@media (max-width:699px){
  .top .util [data-account]{display:none}
  .top .util .hide-s{display:inline}
  .top .util [data-menu-open]{display:inline-block;min-height:44px;padding:0 0 0 4px;color:var(--ink);font:inherit}
  body.has-player:not(.is-home) .reel.is-on .reel-pin{padding-bottom:calc(var(--pl-h) + var(--pl-v, 0px) + env(safe-area-inset-bottom))}

  /* pied de page : la marque, deux liens, la lettre, le légal sur une ligne */
  .foot .lede,.foot .fcols,.foot .foot-brand li:nth-child(3),.foot .bpm{display:none}
  .foot .foot-top{row-gap:var(--s3)}
  .foot .foot-brand ul{display:flex;flex-wrap:wrap;gap:0 var(--s3);font-size:14px}
  .foot .news h2{font-size:13px;margin-bottom:var(--s1)}
  .foot .foot-legal{font-size:12px;line-height:18px;gap:0 var(--s2);padding-top:var(--s3)}
  .foot .foot-legal .sep{margin-left:0}
  .foot .foot-legal > span{padding-block:6px}
  .foot .foot-art{min-height:36vw}

  .hx [data-hx-view="table"] .tb-f{padding-right:0;margin-top:52px}
  .hx-act .btn,.hx-drop .btn{flex:1 1 100%;width:100%}
  .lg-dl div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:699px){
  /* le pied de page ne remplit plus tout un écran sur téléphone */
  .foot{min-height:0 !important}
  .foot .foot-art{flex:none;height:40vw;min-height:0}
}
@media (max-width:699px){ body:not(.is-home) .reel.is-on .reel-track{--cw:min(68vw,calc(100svh - var(--head) - 400px))} }