/* Maison Himi · grand écran de bureau
   © 2026 Kodex Production™ · Licence concédée à MD Meat SRL (Maison Himi)

   En dessous de 1700 px de large, ce fichier ne fait rien : les téléphones,
   les tablettes et les portables gardent exactement leurs réglages.

   Au delà, deux choses rendaient le site petit sur un grand écran.
   1. Le contenu était figé à 1680 px de large, d'où deux bandes noires sur
      les côtés, de plus en plus larges à mesure que l'écran grandit.
   2. Presque toutes les tailles du site suivent la HAUTEUR de l'écran
      (unités svh). Sur un écran large mais pas plus haut, elles restaient
      donc au même niveau que sur un portable.

   Chaque règle est préfixée par « html » pour passer devant la feuille de
   style écrite dans la page, qui est chargée après ce fichier.
   Posé le 4 novembre 2026, à la demande de Hakim. */

@media (min-width: 1700px) {

  /* La gouttière et la largeur du contenu suivent l'écran. */
  html:root { --pad: clamp(72px, 3.4vw, 112px); }
  /* « max(1680px, …) » n'est pas decoratif : a 1700 px de large, 93vw ne fait
     que 1581 px. Sans ce garde-fou, le contenu RETRECISSAIT en passant le
     seuil, au lieu de grandir. */
  html .wrap { max-width: max(1680px, min(2400px, 93vw)); }

  /* Les petits caractères communs : sur-titres dorés et boutons. */
  html .eyebrow { font-size: clamp(11px, .58vw, 15px); }
  html .cta { height: clamp(46px, 2.5vw, 60px);
              padding: 0 clamp(24px, 1.5vw, 38px);
              font-size: clamp(13.5px, .72vw, 17px); }

  /* Les titres et les chapeaux de section, sur toutes les pages.
     Rapetissés le 04/11 à la demande de Hakim : la première version montait
     à 76 px, trop haute par rapport au texte.
     On garde EXACTEMENT la formule de la page, on ne relève que le plafond :
     50 px devient 56. Toute autre formule faisait rapetisser les titres juste
     au dessus de 1700 px. */
  html .titre, html .tete h1, html .hero h1 { font-size: clamp(24px, min(3.4vw, 4.8svh), 48px); }
  html .sub, html .tete p { font-size: clamp(16px, .92vw, 22px); max-width: 88ch; }

  /* L'accroche de l'accueil suit la même règle que les autres titres, juste
     au dessus : Hakim les veut tous de la même taille (04/11/2026). */
  /* 76ch et non 86 : au dela, les lignes deviennent trop longues a lire. */
  html .hero p { font-size: clamp(14.6px, .72vw, 18px); max-width: 76ch; }
  html .fondee { font-size: clamp(18px, .94vw, 23px); }
  /* L'animation du logo : son plafond de 980 px la rendait modeste sur un
     grand écran. Elle reste bornée par la hauteur disponible. */
  html .hero video { height: min(calc(100svh - 124px), 1240px); }

  /* Accueil : les pièces de la semaine. Des vignettes plus larges, donc
     davantage par rangée. La règle vise « #arrivages » et non « .grille » :
     la carte a une grille qui porte la même classe, et son découpage en
     écrans est calculé en JavaScript, qui doit rester d'accord avec elle. */
  html #arrivages { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 24svh, 360px), 1fr)); }
  html .carte h3 { font-size: clamp(21px, 1.05vw, 26px); }
  html .carte p { font-size: clamp(13.5px, .72vw, 17px); }
  html .carte .prix { font-size: clamp(14px, .78vw, 18px); }

  /* Accueil : l'encart « Notre sélection » et le mot de la fin. */
  html .mot-semaine h3 { font-size: clamp(24px, 1.2vw, 31px); }
  html .mot-semaine p { font-size: clamp(14.5px, .8vw, 19px); }
  html .mot { font-size: clamp(20px, 1.05vw, 25px); }

  /* Accueil : retrait et livraison. */
  html .recup-mise-en-avant h3, html .recup-second h3 { font-size: clamp(28px, 1.3vw, 33px); }
  html .recup-mise-en-avant .liste li, html .recup-second .liste li { font-size: clamp(15.5px, .84vw, 20px); }
  html .recup-ico { width: clamp(32px, 1.9vw, 46px); height: clamp(32px, 1.9vw, 46px); }
  html .recup-etat { font-size: clamp(13.5px, .74vw, 17px); }

  /* Les maturées et le wagyu : les trois cartes illustrées. */
  html .bloc h3 { font-size: clamp(21px, .98vw, 24px); }
  html .bloc p, html .liste em { font-size: clamp(14.5px, .8vw, 19px); }

  /* La carte : six colonnes de pièces au lieu de quatre. Le découpage en
     écrans est calculé par « colonnes() » dans carte.html : les deux doivent
     rester d'accord, sinon la grille laisse des colonnes vides. */
  html .corps > .grille { grid-template-columns: repeat(5, 1fr); }
  html .grille .piece h2 { font-size: clamp(17px, .95vw, 23px); }
  html .piece p { font-size: clamp(13px, .72vw, 17px); }
  html .piece .origine { font-size: clamp(10.5px, .58vw, 14px); }
  html .piece .prix b { font-size: clamp(17px, 1vw, 24px); }
  html .piece .prix .kilo { font-size: clamp(12.5px, .68vw, 16px); }
  html .filtre { font-size: clamp(15px, .8vw, 19px); }
}

/* Très grand écran : une colonne de plus sur la carte. */
@media (min-width: 2200px) {
  html .corps > .grille { grid-template-columns: repeat(6, 1fr); }
}

/* Les pages de texte long : CGU, CGV, confidentialité, mentions légales,
   suppression de compte. Leur colonne faisait 780 px, perdue au milieu d'un
   écran d'ordinateur. Elle passe à 1100 px et le texte grossit avec elle.

   Pourquoi pas toute la largeur : une ligne de texte juridique étalée sur
   2400 px ne se lit pas, l'oeil perd sa ligne en revenant à gauche. 1100 px
   est la limite haute de ce qui se lit encore confortablement.

   Le seuil est à 1100 px et non à 1700 : ces pages sont étroites dès qu'on
   les ouvre sur un ordinateur, pas seulement sur un grand écran. */
@media (min-width: 1100px) {
  html body.legale .wrap { max-width: min(1100px, 88vw); }
  html body.legale p, html body.legale li { font-size: clamp(15px, 1.15vw, 18px); }
  html body.legale h2 { font-size: clamp(23px, 1.5vw, 28px); }
}
@media (min-width: 1700px) {
  html body.legale h1 { font-size: clamp(46px, 2.3vw, 58px); }
}