/* Biostem — surcouche des écrans de maquette du portfolio.
   biostem.css est la feuille du site, reprise telle quelle ; ce fichier ne
   porte que ce qui distingue la maquette du site : un cadre de 1440 × 900
   sans défilement, le mot-symbole à la place du logotype dessiné, et les
   états que le site pose par script — aucun ne tourne ici. */

/* Un cadre d'une hauteur d'écran, comme les autres maquettes du portfolio.
   La barre de défilement est retirée d'abord pour la largeur : rendue, elle
   prend 15px sur la page et laisse un liseré clair le long du bord droit. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden;
}
html::-webkit-scrollbar { display: none; }

/* Le site pose l'encre sur le canevas parce que ses pages finissent sur le
   pied. Un écran de maquette ne montre qu'une section : sous elle, c'est le
   papier du site qu'il faut voir, pas une bande noire. Le pied, lui, porte
   son propre fond. */
html, body { background: var(--paper); }

/* Mot-symbole. Le logo du projet est un dessin ; ici c'est du texte, donc net
   à tous les zooms — c'est tout l'intérêt d'un mockup en HTML. La police est
   celle des titres du site, en capitales espacées. */
.header__mot {
  font-family: var(--font-titre);
  font-size: 26px;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le même mot, gravé sur la carte cadeau : la règle du site fixait la hauteur
   du dessin qu'il remplace, elle couperait le texte. */
.carteCadeau__logo {
  height: auto;
  font-family: var(--font-titre);
  font-size: 13px;
  letter-spacing: .199em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Écrans d'une seule section ----------
   Le site les montre au fil du défilement, précédées de tout ce qui vient
   avant. Ici chacune ouvre sa page : il faut lui rendre la place que le
   header fixe lui prendrait, et remplir la hauteur d'écran. */

body.ecranService .services,
body.ecranBoutique .boutique,
body.ecranAvis .avis,
body.ecranDiagnostic .diagnostic { min-height: 100vh; }

/* Le deuxième service a sa photo à droite : sur le site c'est son rang qui
   le décide (:nth-child(even)), et seul dans sa page il redevient le
   premier. */
/* En deux colonnes seulement : sous 988px le service s'empile, et poser une
   deuxième colonne qui n'existe pas sortait la photo de la page. */
@media (min-width: 988px) {
  body.ecranService--miroir .service__visuel { grid-area: 1 / 2; }
  body.ecranService--miroir .service__texte  { grid-area: 1 / 1; }
}

/* La carte cadeau vient d'ordinaire après la réservation : seule en tête de
   page, son titre passait sous le header. */
body.ecranOffrir .offrir { padding-top: calc(var(--header-h, 110px) + 34px); }

/* Le pied se voit du BAS de la page : il se cale en bas de l'écran, le papier
   au-dessus — ce que montre la référence du mockup à deux écrans. */
body.ecranPied {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.ecranPied .footer { margin-top: auto; }

/* ---------- La fiche produit ----------
   Sa photo est posée par le script du site, qui en choisit une carrée. Sans
   script, le fichier d'origine est plus haut que large et débordait de sa
   cellule, jusqu'à passer sous le texte. */
@media (max-width: 987px) {
  /* La cellule est un carré, prévu pour une photo carrée. Celle du fichier
     d'origine est en 4/5 : elle débordait par le bas et venait passer sous le
     texte. La cellule suit donc la photo, comme elle le ferait avec la bonne. */
  .produitPage .ficheVisuel { aspect-ratio: auto; }
}