/* =====================================================================
   solyshealth.com — téléphone
   Chargée seulement sous 600 px de large (media de la balise <link>) :
   l'ordinateur et la tablette ne la lisent jamais.

   Elle ne refait pas le site du téléphone (site.css, sous 760 px) : elle
   l'enrichit. Des photos, pour que la médecine ait un visage, et des
   sections à leur hauteur naturelle au lieu d'un écran entier chacune,
   qui laissait de grands vides entre deux idées.
   ===================================================================== */

/* ------------------------------------------------------------ rythme */
section { min-height: 0; padding: 64px 0; }
.heros { min-height: 0; padding: 104px 0 60px; }
.heros .defile { display: none; }          /* la suite se voit déjà sous la photo */

/* ------------------------------------------------------------ photos */
.photo-m {
  display: block; position: relative; width: 100%; margin: 26px 0 0;
  border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papier-3);
}
.photo-m picture, .photo-m img { display: block; width: 100%; height: 100%; }
.photo-m img { object-fit: cover; }
#probleme .photo-m { margin: 0 0 28px; }
#comment .photo-m { margin: 0 0 30px; }

/* Le premier écran : la photo, et le produit posé dessus. */
.photo-heros { margin-top: 30px; overflow: visible; }
.photo-heros picture { border-radius: 22px; overflow: hidden; }
.photo-badge {
  position: absolute; left: 14px; right: 14px; bottom: -20px;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--bord); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(28, 27, 25, .12); text-align: left;
}
.photo-badge-coche {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--sur-accent); font-size: 15px; font-weight: 700;
}
.photo-badge b { display: block; font-size: 14.5px; color: var(--encre); }
.photo-badge b + span { display: block; font-size: 12.5px; color: var(--encre-3); }

/* Les photos de l'ordinateur et de la tablette : le téléphone a déjà les siennes. */
.photo-d { display: none; }