/* ============================================================
   Reprise mobile — 16/09
   ------------------------------------------------------------
   Chargee en DERNIER sur les six pages, apres toutes les autres
   feuilles. Elle ne contient que des corrections propres au
   telephone : chaque regle ici repond a une mesure faite en
   375x812 dans le navigateur, jamais a une impression.

   Ce qui N'EST PAS ici : les etats :hover. Ils ont ete corriges a
   la source le 16/09, les 36 regles concernees sont desormais
   enveloppees dans @media (hover: hover) dans leur propre feuille.
   C'etait une erreur de correctness, pas un sujet mobile.

   Etat mesure avant intervention, sur les six pages : le
   debordement horizontal vaut -4px partout, autrement dit il n'y
   en a pas. Le site se replie deja correctement. Ce qui suit
   corrige la QUALITE, pas la casse.

   Pour tout annuler : retirer le <link> des six pages et
   supprimer ce fichier. Sauvegarde des feuilles d'origine :
   archive/avant-mobile-20260916/css/
   ============================================================ */

/* --- 1. Cibles tactiles ------------------------------------------------
   Mesure : 13 a 23 elements par page sous 40px de haut. Les pires, sur
   l'accueil : les boutons FR / EN a 18x18, les puces du slider a 22x22,
   les liens de navigation a 19px de haut.

   Le seuil retenu est 44px, valeur commune aux recommandations Apple et
   Google. On l'obtient par du rembourrage et des marges negatives plutot
   qu'en grossissant le texte : la composition ne bouge pas d'un pixel,
   seule la surface qui repond au doigt s'agrandit.

   Pourquoi pas un ::before en absolu : plusieurs de ces elements vivent
   dans des conteneurs a overflow, la zone etendue y serait rognee. */
@media (max-width: 820px){

  /* Le doigt reste au-dessus de 44px meme si le texte fait 11px. */
  .lang-btn{
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* La marge negative annule l'encombrement ajoute : le groupe FR · EN
       garde exactement la hauteur qu'il avait dans la barre. */
    margin-block: -13px;
  }

  .nav-burger{
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: -0.35rem;
  }

  /* Liens du menu deplie. 19px de haut pour « Conseil & accompagnement »
     obligeait a viser. */
  .nav-links a{
    padding-block: 0.7rem;
  }

  /* Commandes du carrousel de reperes : fleches a 32x29, puces a 22x22. */
  #signature .sig-fleche,
  #signature .sig-puces button{
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Les puces se toucheraient une fois elargies : on annule l'ecart pour
     que la rangee garde sa longueur d'origine. */
  #signature .sig-puces{ gap: 0; }

  /* Liens de texte soulignes, partout sur le site. Le trait reste ou il
     est, c'est la zone sensible qui s'etend autour.

     display: inline-flex est indispensable, pas cosmetique : sur un
     element inline, padding-block est peint mais n'entre pas dans la
     hauteur de ligne. Premiere version sans lui : .hero-link mesurait
     encore 22px apres coup. */
  .home-text-link,
  .hero-link,
  .btn-ghost,
  .exp-liens a,
  .insta-cta,
  .home-invitation-link{
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    margin-block: -0.5rem;
  }

  /* Le verrou est un lien : il mesurait 18px de haut, soit la hauteur de
     ses images. On lui donne la meme surface qu'aux autres commandes de
     la barre, sans deplacer le logo. */
  .nav-brand{
    min-block-size: 44px;
    margin-block: -13px;
  }

  /* Pied de page. Premiere version a 0.45rem : les liens plafonnaient a
     38px, il en manquait six. */
  .footer-nav-list a,
  .footer-contact-list a,
  .footer-logo a{
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}


/* --- 2. HOSPITALITY revient sur telephone ------------------------------
   Il etait masque sous 420px : ses capitales seraient tombees sous 5px et
   il fallait de la place pour le bouton menu.

   Mesure a 375 : la barre fait 375px, le verrou 177 et le groupe de
   droite, FR · EN plus le burger, environ 110. Il reste donc de la marge,
   la suppression etait excessive.

   On garde les deux lignes en reduisant l'ensemble. C'est petit, mais
   c'est le meme registre qu'un verrou imprime en petit format, et le mot
   redevient present la ou l'essentiel du trafic se trouve. */
@media (max-width: 420px){
  .nav-brand .nav-baseline{
    display: block;
    block-size: 0.38rem;
  }
  .nav-brand .nav-mot{ block-size: 0.62rem; }
  .nav-brand .nav-marque{ block-size: 1.15rem; }
  .nav-lockup{ gap: 0.12rem; }
  .nav-brand{ gap: 0.34rem; }
}


/* --- 3. La galerie des plats prend toute la largeur --------------------
   Mesure avant : tuiles de 94x94 pour des fichiers sources de 800px. Sur
   le site d'un cuisinier, l'assiette est le produit ; a cette taille elle
   ne se lit plus.

   Choix retenu avec Alexis : garder les trois colonnes et retirer les
   marges laterales. La galerie va d'un bord a l'autre de l'ecran, les
   tuiles passent d'environ 94 a 125px, soit un tiers de plus, sans
   toucher au rythme de la grille.

   Technique : la galerie vit dans un .container qui porte le rembourrage
   lateral. On le neutralise sur ce seul element et on resserre l'ecart
   entre tuiles pour gagner encore quelques pixels. Le titre et le lien
   gardent leur marge : seules les images sortent. */
@media (max-width: 560px){
  #ecriture .home-plats-wrap{
    max-inline-size: 100%;
    padding-inline: 0;
  }

  #ecriture .home-plats{
    gap: 2px;
  }

  /* Le lien « Decouvrir l'identite culinaire » reste aligne sur le texte
     de la section, pas sur le bord de l'ecran. */
  #ecriture .home-plats-lien{
    margin-inline: 1.25rem;
  }
}


/* --- 5. Les largeurs en ch ne servent plus rien sur telephone ----------
   Inventaire : 95 regles du site plafonnent une largeur en ch, reparties
   sur 16 feuilles. C'est juste sur grand ecran, ou une ligne de 120
   caracteres devient penible a suivre.

   Sur un ecran de 375px, la fenetre EST deja la mesure : ces plafonds ne
   protegent plus rien et creent des colonnes inutilement etroites, donc
   des coupures de mots au mauvais endroit.

   Mesures sur le hero de l'accueil, fenetre de 375 :
     .hero-kicker  plafonne a 187px → « THOMAS DANIGO · CHEF 1 » puis
                   « ÉTOILE MICHELIN » sur deux lignes, coupe en plein
                   milieu de la distinction
     .hero-lede    plafonne a 271px → quatre lignes au lieu de trois

   On rend donc sa largeur au texte. Le geste est volontairement large :
   sur cette taille d'ecran, aucun bloc n'a de raison d'etre plus etroit
   que la fenetre. */
@media (max-width: 560px){
  h1, h2, h3, h4,
  p, li, blockquote, figcaption,
  .kicker, .hero-kicker, .hero-lede, .hero-baseline,
  .page-intro, .page-title, .exp-lead, .signature-text,
  .home-section-copy, .fiche-accroche, .quote-text{
    max-inline-size: 100%;
  }
}


/* --- 6. Interlignes des grands titres ----------------------------------
   Le titre du hero est en line-height 0.88. A 82px sur grand ecran, les
   lignes se serrent et l'effet est voulu. A 42px sur telephone, l'ecart
   entre deux lignes tombe a 36.6px pour des capitales de 42 : les jambages
   d'une ligne touchent les hampes de la suivante.

   Un rapport sous 1 se tient tant que le corps est grand. On plafonne
   donc a 1.02 en dessous de 560px, valeur qui laisse respirer sans
   deformer le dessin de la composition. */
@media (max-width: 560px){
  .hero-logotype,
  .display,
  .home-section-title,
  .galerie-sub,
  .fiche-title{
    line-height: 1.02;
  }

  /* Ces deux-la demandent la meme specificite que la regle qu'elles
     corrigent, sinon elles perdent l'arbitrage. Premiere version ecrite
     avec un seul selecteur : le scanner signalait toujours 0.90 et 0.96.
       .page-hero .page-title      → studio-sections.css ligne 246,
                                     deja dans une media query mobile
       .commission-panel-copy h3   → editorial.css ligne 224
     A specificite egale, c'est la derniere feuille chargee qui l'emporte,
     et mobile.css est chargee en dernier. */
  .page-hero .page-title{ line-height: 1.02; }
  .home-commission-grid .commission-panel-copy h3{ line-height: 1.02; }
}


/* --- 7. Le plancher typographique -------------------------------------
   Le scanner a releve 48 blocs de texte sous 11.5px sur les six pages.
   Le site emploie volontairement de petites capitales espacees comme
   signal editorial, et a 10-11px sur grand ecran cela se tient.

   Deux cas ne se tiennent pas sur telephone :
     - les numeros des panneaux de mission tombent a 9px. La regle vient
       de panneaux-missions.css : clamp(0.56rem, 1.5cqw, 0.68rem), ou le
       cqw s'effondre quand le panneau devient etroit, donc on reste colle
       au plancher de 0.56rem.
     - les capitales espacees perdent beaucoup plus vite que le bas de
       casse : l'espacement de 0.22em separe des lettres deja minuscules.

   On remonte le plancher a 0.75rem, soit 12px, sans toucher a la casse ni
   a l'espacement : le signal editorial est conserve, seule la taille
   bouge. */
@media (max-width: 560px){
  .kicker,
  .section-index,
  .hero-kicker,
  .hero-baseline,
  .footer-heading,
  .footer-copy,
  .press-media,
  .press-partenaires-label,
  .presse-media-name{
    font-size: 0.75rem;
  }

  .home-commission-grid .commission-panel-copy > p,
  .home-commission-grid .commission-panel-link{
    font-size: 0.72rem;
  }

  /* Memes cas de specificite que plus haut : ces deux regles vivent sous
     un selecteur plus fort que le simple nom de classe.
       #presse .press-partenaires-label → sections-parallax.css, 0.62rem
       .todo-title                      → titre des encarts de travail */
  #presse .press-partenaires-label,
  #presse .press-media{ font-size: 0.75rem; }

  .todo-bloc .todo-title,
  h2.todo-title{ font-size: 0.8rem; }
}


/* --- 8. Le voile des panneaux de mission -------------------------------
   Le degrade de panneaux-missions.css reste transparent jusqu'a 42 % de
   la hauteur, puis descend a 0.70 en bas. Il a ete regle le 16/09 sur des
   panneaux larges, ou le texte occupe le dernier quart de l'image.

   En colonne unique, le panneau devient vertical : 375x585 mesure ici. Le
   bloc de texte occupe alors le tiers bas, et « Conseil & accompagnement »
   traverse la veste blanche du chef. Titre clair sur zone claire, le
   contraste tombe.

   On remonte donc le depart du voile et on le fonce en bas. La photo
   garde sa lumiere sur les deux tiers hauts, la ou il n'y a pas de texte
   par-dessus. */
@media (max-width: 820px){
  .home-commission-grid .commission-panel figure::after{
    background: linear-gradient(
      180deg,
      rgba(8, 9, 10, 0) 0%,
      rgba(8, 9, 10, 0.10) 34%,
      rgba(8, 9, 10, 0.62) 62%,
      rgba(8, 9, 10, 0.88) 100%
    );
  }
}


/* --- 9. Le rythme vertical ---------------------------------------------
   Mesure : les sections portent 128px de rembourrage en haut ET en bas,
   soit 256px de vide entre deux sections sur un ecran qui en fait 812.
   Un tiers d'ecran de rien, sept fois de suite : l'accueil mesure 11 905px
   de haut, une quinzaine d'ecrans.

   Sur grand ecran cette respiration se lit comme du calme, parce qu'elle
   est accompagnee de largeur. En colonne unique il n'y a plus de largeur
   pour l'accompagner, et le meme vide se lit comme un trou : le visiteur
   fait defiler sans savoir si la section est finie.

   On descend a 80px. C'est encore genereux, cela reste le site le plus
   aere de son secteur, mais on retire environ 670px de vide sur la seule
   page d'accueil. Le blanc entre un titre et son texte, lui, n'est pas
   touche : c'est lui qui porte la respiration de lecture. */
@media (max-width: 560px){
  .section{
    padding-block: 80px;
  }

  /* #signature et #instagram etaient deja a 64px : on ne les alourdit pas
     en leur appliquant la valeur commune. */
  #signature,
  #instagram{
    padding-block: 64px;
  }
}


/* --- 4. L'image du hero depassait de 5px ------------------------------
   Mesure sur l'accueil : l'image allait de -5 a 380 pour une fenetre de
   375. Invisible a l'oeil, mais c'est elle qui fabriquait la largeur de
   defilement, donc le risque de glissement lateral parasite au doigt. */
@media (max-width: 820px){
  .hero-immersive-media img,
  .page-hero-media img{
    max-inline-size: 100%;
  }
}