/* Deep Beauty — Médias : photos, vidéos et visuels de résultats posés à la place des emplacements.
 * Les dégradés de secours restent dans 16-emplacements.css et 17-machines.css : ils ne s'affichent que si un fichier manque.
 * Les images arrivent par la couche média (medias.php) : width et height réels, srcset, chargement différé. */

:root {
	--ratio-photo-machine: 1024 / 583; /* proportions des photos d'appareil de la médiathèque (1 024 × 583) */
	--ratio-vignette-menu: 400 / 228;  /* proportions des vignettes du menu */
	--rayon-photo-hero: var(--rayon-carte);
	--duree-zoom-photo: 0.7s;
}

/* Une image dont le cadre ne doit jamais rogner (visuel détouré, gamme). */
.media-contain { object-fit: contain !important; background: #fff; }

/* ---------- Hero de l'accueil : affiche nette, puis vidéo muette par-dessus ---------- */
.heros-fond { overflow: hidden; }
.heros-fond img.heros-affiche { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.heros-fond video { position: relative; z-index: 1; display: block; }
/* Le titre reste lisible sur une image claire : voile plus dense dès qu'une affiche est posée. */
.heros-diapo.avec-media .heros-voile { background: linear-gradient(180deg, rgba(10, 10, 14, 0.62) 0%, rgba(10, 10, 14, 0.5) 50%, rgba(10, 10, 14, 0.72) 100%); }

/* ---------- Cartes produit de l'accueil : photo d'appareil sans rognage ---------- */
.carte-visuel-photo { align-items: stretch; height: auto; aspect-ratio: var(--ratio-photo-machine); background: var(--emplacement-clair); }
.carte-visuel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--duree-zoom-photo) var(--ease-sortie); }
@media (hover: hover) { .carte-produit:hover .carte-visuel-photo img { transform: scale(1.05); } }

/* ---------- Icônes des traitements (accueil) ---------- */
.domaine-icone { display: block; width: 56px; height: 56px; margin-bottom: 14px; opacity: 0.9; transition: transform 0.4s var(--ease-sortie); }
@media (hover: hover) { .domaine:hover .domaine-icone { transform: scale(1.12) rotate(-4deg); } }

/* ---------- Menu : vignettes en photo ---------- */
.vignette img { aspect-ratio: var(--ratio-vignette-menu); height: auto; }
.menu-panneau-large .vignette img { aspect-ratio: auto; height: 170px; }

/* ---------- Hero des pages-machines : vidéo muette du fond et photo de l'appareil ---------- */
.hero-fond-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-machine .hero-elite-fond:has(.hero-fond-video) { opacity: 1; background: #05060b; }
.hero-machine .hero-elite-fond:has(.hero-fond-video)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 14, 0.84) 0%, rgba(8, 9, 14, 0.74) 45%, rgba(8, 9, 14, 0.92) 100%); }
img.hero-elite-appareil { object-fit: cover; border-radius: var(--rayon-photo-hero) var(--rayon-photo-hero) 0 0; background: #e2e2e4; box-shadow: 0 -12px 70px rgba(255, 255, 255, 0.1); }

/* ---------- Hero des pages de traitements : photo de séance sous un voile ---------- */
.hero-elite-fond-photo { opacity: 0.6 !important; background-position: center 35% !important; }
.hero-elite-fond-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 14, 0.55), rgba(8, 9, 14, 0.4) 50%, rgba(8, 9, 14, 0.75)); }

/* ---------- Cartes de traitement et de machine ---------- */
.tr-carte:has(.tr-carte-photo) { overflow: hidden; }
.tr-carte-photo { display: block; width: calc(100% + 48px); max-width: none; height: 200px; margin: -26px -24px 6px; object-fit: cover; }
.tr-machine img.tr-machine-photo { height: auto; aspect-ratio: var(--ratio-photo-machine); padding: 0; object-fit: cover; background: var(--emplacement-clair); }

/* ---------- Bento : tuiles en photo, vidéo muette dans la grande tuile ---------- */
img.tuile-fond { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tuile-visuel-a img.tuile-fond { object-position: 100% 50%; }
.tuile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.tuile-grande .tuile-video + .tuile-voile { background: linear-gradient(0deg, rgba(var(--bento-voile, 17, 18, 23), 0.85), rgba(var(--bento-voile, 17, 18, 23), 0) 70%); }

/* ---------- Produits Ceuticals : flacon détouré au-dessus du nom ---------- */
.produit-visuel { display: block; width: auto; max-width: 100%; height: 150px; margin: 0 auto 16px; object-fit: contain; transition: transform 0.5s var(--ease-sortie); }
@media (hover: hover) { .domaine:hover .produit-visuel { transform: translateY(-6px) scale(1.04); } }

/* ---------- Résultats : visuels composés par INDIBA, agrandissables ---------- */
.resultat-photo { min-width: 0; margin: 0; }
.resultat-photo-cadre { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 28px; background: #ddd; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); cursor: zoom-in; }
.resultat-photo-cadre img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform var(--duree-zoom-photo) var(--ease-sortie); }
.resultat-photo-cadre::after { content: "+"; position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); font-size: 22px; line-height: 1; color: var(--encre); opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s; }
.resultat-photo figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; text-align: center; font-family: var(--police-titre); font-size: 14px; color: var(--texte); }
.resultat-photo figcaption strong { font-weight: 600; font-size: 16px; color: var(--encre); }
@media (hover: hover) {
	.resultat-photo { transition: transform 0.4s var(--ease-sortie); }
	.resultat-photo:hover { transform: translateY(-6px); }
	.resultat-photo-cadre:hover img { transform: scale(1.05); }
	.resultat-photo-cadre:hover::after { opacity: 1; transform: none; }
}
.resultat-photo-cadre:focus-visible::after { opacity: 1; transform: none; }
/* Sur les pages courtes (trois visuels) la grille reste centrée. */
.comparatifs-machines:has(.resultat-photo) { align-items: start; }

/* ---------- Vidéos de la page « Vidéos » : l'affiche tient lieu de première image ---------- */
.vid-grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.vid-carte { width: 100%; max-width: 560px; margin: 0 auto; }
.vid-carte video { object-fit: cover; }

@media (max-width: 700px) {
	.carte-visuel-photo { aspect-ratio: var(--ratio-photo-machine); }
	.produit-visuel { height: 120px; }
	.tr-carte-photo { height: 170px; }
	.vignette img { aspect-ratio: auto; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
	.carte-visuel-photo img, .domaine-icone, .produit-visuel, .resultat-photo, .resultat-photo-cadre img, .resultat-photo-cadre::after { transition: none; }
	.carte-produit:hover .carte-visuel-photo img, .domaine:hover .domaine-icone, .domaine:hover .produit-visuel, .resultat-photo:hover, .resultat-photo-cadre:hover img { transform: none; }
}