/* ============================================================
   CAFÉ INTERVIEW — le téléphone
   ============================================================

   Tout ce qui diffère sur un téléphone vit ici, et nulle part
   ailleurs. Le fichier est chargé en dernier et chacune de ses règles
   est enfermée dans une requête de média : le grand écran, qui est
   validé, ne peut donc pas être touché par accident.

   Le reproche auquel ce fichier répond : à 390 pixels, chaque écran
   empilait cinq ou six blocs de texte là où le grand écran les étale.
   On ne réduit pas les tailles, on retire des choses. ============ */

@media (max-width:700px){

/* ---------- La barre du haut ----------

   Le bouton passait sur deux lignes et venait écraser l'enseigne : à
   390 pixels, l'enseigne à 108, les deux langues et un bouton à vingt
   deux de marge ne tiennent pas dans les 350 utiles. On resserre les
   trois. */
.nav{padding:13px var(--gut);gap:10px}
.mark{width:86px}
.navr{gap:8px}
.lang{font-size:10px}
.lang button{padding:9px 5px}
.nav .btn{
  padding:10px 14px;
  font-size:9.5px;letter-spacing:.13em;
  white-space:nowrap;
}

/* Les titres de section passaient SOUS la barre du haut, qui est fixe
   et fait une soixantaine de pixels. Vingt sept ne suffisaient pas : on
   degage la hauteur reelle, et scroll-margin-top fait la meme chose
   pour les sauts d ancre, qui atterrissent sinon au meme endroit. */
.panel .sec-head{padding-top:86px}
.panel{scroll-margin-top:72px}

/* La bande des couvertures ouvre la section : elle passait sous la
   barre du haut, qui lui mangeait le tiers superieur des cadres. */
.bande{padding-top:clamp(36px,10vw,58px)}

/* ---------- Le comptoir ----------

   Ne restent que la question et le bouton. L'étiquette, la phrase de
   réponse et « revoir l'entrée » s'en vont, et l'index se réduit à son
   numéro. Six blocs deviennent deux, et on voit enfin la photo. Les
   textes retirés ne sont pas perdus pour autant : les horaires sont
   dans Pratique, les boissons dans la carte. */
.hero-copy .spk,
.hero-sub,
.replay,
.index-name,
.index-rule{display:none}

.hero-ask{
  font-size:clamp(15px,4.4vw,18px);
  line-height:1.45;
  max-width:26ch;
}
.index{justify-content:flex-end}
.index-num{letter-spacing:.26em}

/* Le lit sombre de la copie peut remonter moins haut, puisqu'il porte
   deux fois moins de texte : la tasse en ressort d'autant. */
.hero-copy::before{top:-18px}
.hero-copy{padding-bottom:clamp(14px,3vh,30px)}
.hero-cta{margin-top:2px}

/* ---------- L'histoire ----------

   La réponse tenait sur quatre lignes pleines. On la resserre sans la
   couper : c'est le seul endroit du site où le texte EST le sujet. */
.story.anime .ech-bas{max-width:30ch}
.story.anime .ech-r{font-size:15px;line-height:1.5}
.story.anime .cadre{right:calc(var(--gut) * .7)}

/* ---------- Pratique ----------

   Un seul pavé garde sa matière et sa taille, celui des horaires, qui
   est ce qu'on vient chercher. Les cinq autres perdent leur cadre et
   leur fond et deviennent des lignes : cinq fois cent quatre vingts
   pixels de hauteur retombent à cinq fois soixante. */
.pave{display:block}

.pav--horaires{margin-bottom:clamp(18px,5vw,30px)}

.pav--tel,
.pav--insta,
.pav--adresse,
.pav--etage,
.pav--concerts{
  background:none;
  border-radius:0;
  min-height:0;
  padding:clamp(14px,4vw,20px) 0;
  gap:clamp(7px,2vw,11px);
  border-top:1px solid var(--rule);
  box-shadow:none;
  transform:none;
}
/* Plus de photo derrière ces cinq là, donc plus de voile ni de texte
   clair : ils reviennent à l'encre du panneau. */
.pav--adresse::before,
.pav--etage::before,
.pav--tel::after,
.pav--insta::after,
.pav--adresse::after,
.pav--etage::after,
.pav--concerts::after{display:none}
.pav.pav--adresse,
.pav.pav--etage{color:var(--fg)}
.pav.pav--adresse dd,.pav.pav--adresse dd a,
.pav.pav--etage dd,.pav.pav--etage dd a{color:var(--fg)}
.pav--adresse dt,.pav--etage dt{color:var(--fg)}
.pav--adresse dt::before,.pav--etage dt::before{background:var(--accent)}

/* L'état du bar tenait sur une ligne et débordait en « dans 11 h / 46 ».
   Le détail passe à la ligne entière. */
.etat{flex-wrap:wrap}
.etat-s{flex:1 0 100%;margin-top:.4em}

/* ---------- Nous trouver ----------

   Le plan est recadré par le script sur sa moitié utile, la rue
   Aldringen et la place Hamilius ; il ne reste donc ici qu'à grossir
   les caractères, qui faisaient deux millimètres. */
.find-grid{grid-template-columns:1fr}
.map .lbl text{font-size:19px;letter-spacing:.14em}
/* L avenue Monterey est hors du cadrage telephone, mais son nom, pose a
   cheval sur le bord, y laissait un trait de lettres coupees. */
.map .l-mont{display:none}
.map .pin-l{font-size:22px}
.map .pin .dot{r:11}
.map-note{font-size:13px;max-width:none}

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

   Le téléphone, l'adresse et l'Instagram y étaient répétés alors qu'on
   vient de les lire deux écrans plus haut. Sur un grand écran la
   répétition ne coûte rien ; ici elle coûte deux écrans de défilement.
   Ne restent que l'enseigne et la mention légale. */
.foot-cols{display:none}
.neon-help{display:none}
.foot-in{gap:clamp(22px,6vw,36px)}

}

/* Au delà de 700 pixels, rien de ce fichier ne s'applique : la version
   grand écran est celle qui a été validée, elle n'est pas touchée. */