/* Deep Beauty — Emplacements de visuels (photos et vidéos : phase finale), références, liste d'effets.
 * Tout ce qui s'affiche à la place d'une photo ou d'une vidéo absente : propre, animé, sans lien brisé.
 * Quand le fichier arrive, le gabarit affiche l'image et cet habillage disparaît de lui-même. */

/* ---------- Carte produit : emplacement qui porte le nom de la machine ---------- */
.carte-visuel-vide { position: relative; align-items: center; isolation: isolate; }
.carte-visuel-vide span { position: relative; z-index: 1; padding: 0 18px; text-align: center; font-family: var(--police-titre); font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.carte-visuel-teinte-blanc.carte-visuel-vide span { color: var(--encre); text-shadow: none; }
/* Reflet qui balaie l'emplacement, une fois à l'arrivée à l'écran puis au survol. */
.carte-visuel-vide::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%); transform: translateX(-120%); }
.carte-produit.est-visible .carte-visuel-vide::after { animation: reflet 1.6s var(--ease-sortie) 0.5s 1 both; }
@media (hover: hover) { .carte-produit:hover .carte-visuel-vide::after { animation: reflet 1.1s var(--ease-sortie) 1 both; } }
@keyframes reflet { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.carte-accroche { font-weight: 600 !important; font-size: 14px; color: var(--encre) !important; }

/* ---------- Menu : vignette sans photo ---------- */
.vignette-vide { display: block; width: 100%; height: 149px; background: var(--points-clairs) 0 0 / 14px 14px, var(--emplacement-sombre); transition: transform 0.4s; }
.menu-panneau-large .vignette-vide { height: 170px; }
.vignette:hover .vignette-vide { transform: scale(1.04); }

/* ---------- Vidéo à venir ---------- */
.emplacement-video { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon-carte); background: var(--points-clairs) 0 0 / 16px 16px, var(--emplacement-sombre); }
.emplacement-video .icone { width: 64px; height: 64px; padding: 20px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; color: #fff; animation: pouls-lecture 2.6s ease-in-out infinite; }
@keyframes pouls-lecture { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }

/* ---------- Références : le nom tient lieu de logo ---------- */
.logo-nom { display: grid; place-items: center; min-width: 170px; height: 70px; padding: 0 28px; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-pilule); background: #fff; font-family: var(--police-titre); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; color: var(--encre); transition: transform 0.4s var(--ease-sortie), box-shadow 0.4s, border-color 0.4s; }
@media (hover: hover) { .logo-nom:hover { transform: translateY(-6px); border-color: var(--encre); box-shadow: 0 16px 30px -14px rgba(15, 18, 28, 0.35); } }
.bloc-logos > .chapo { max-width: 760px; margin: 0 auto 28px; padding: 0 20px; }

/* ---------- Liste d'effets de la technologie ---------- */
.liste-effets { display: inline-block; margin-top: 18px; text-align: left; }
.liste-effets li { position: relative; padding: 6px 0 6px 30px; font-weight: 400; color: var(--texte); }
.liste-effets li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--encre); transform: translateY(-50%); box-shadow: 0 0 0 5px rgba(31, 34, 43, 0.1); }
.js .liste-effets li { opacity: 0; transform: translateX(-14px); transition: opacity 0.6s var(--ease-sortie), transform 0.6s var(--ease-sortie); transition-delay: calc(var(--rang, 0) * 90ms); }
.js .apparition.est-visible .liste-effets li { opacity: 1; transform: none; }
.liste-effets li:nth-child(2) { --rang: 1; } .liste-effets li:nth-child(3) { --rang: 2; } .liste-effets li:nth-child(4) { --rang: 3; } .liste-effets li:nth-child(5) { --rang: 4; }

/* ---------- Cartes sans image (ressources, presse) et boutons sous une grille ---------- */
.pr-carte:not(:has(> img)) { padding-top: 24px; }
.domaines + .centre, .comparatifs-machines + .centre, .pr-grille + .centre { margin-top: 40px; }
.domaine .tr-voir { display: inline-block; margin-top: 14px; }

/* ---------- Marque : plus de halo bleu sur les sections claires (l'accent Deep Beauty est à définir : encre) ---------- */
.bloc-ambiance::after { background: radial-gradient(circle, rgba(31, 34, 43, 0.07), rgba(31, 34, 43, 0) 68%); }

@media (max-width: 700px) {
	.carte-visuel-vide span { font-size: 22px; }
	.vignette-vide, .menu-panneau-large .vignette-vide { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
	.carte-visuel-vide::after, .emplacement-video .icone { animation: none; }
	.js .liste-effets li { opacity: 1; transform: none; transition: none; }
	.logo-nom { transition: none; }
}