/* Deep Beauty — Mosaïque bento. */
/* ---------- Mosaïque bento des pages-machines ---------- */
.bento-cadre { position: relative; overflow: hidden; background: var(--fond-sombre); }
.bento { --sortie: cubic-bezier(0.77, 0, 0.175, 1); background: var(--bento-fond, var(--fond-sombre)); position: relative; display: grid; grid-template-columns: 706fr 339fr 339fr; gap: 0 14px; box-sizing: border-box; height: calc(clamp(720px, 100svh, 900px) + var(--recouvrement)); padding: 18px 14px calc(18px + var(--recouvrement)); } /* le bloc suivant recouvre le bas de la mosaïque : marge basse = marge haute + recouvrement */
.bento-lueur { position: absolute; left: 50%; bottom: -400px; width: 1500px; height: 1500px; margin-left: -750px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 61%); opacity: 0; pointer-events: none; }
.bento-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.bento-rang, .bento-boutons { display: flex; gap: 14px; min-height: 0; }
.bento-col-a > .tuile-grande { flex: 414 1 0; }
.bento-col-a > .bento-rang { flex: 324 1 0; }
.bento-col-a > .bento-boutons { flex: 90 1 0; }
.bento-rang > .tuile { flex: 1 1 0; }
.bento-boutons > .tuile { flex: 166 1 0; }
.bento-boutons > .tuile-bouton-fort { flex: 346 1 0; }
.bento-col-b > .tuile-indications { flex: 180 1 0; }
.bento-col-b > .tuile-visuel-b { flex: 468 1 0; }
.bento-col-b > .tuile-profil { flex: 180 1 0; }
.bento-col-c > .tuile { flex: 423 1 0; }
.tuile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 8px; }
.tuile-in { position: absolute; inset: 0; }
.tuile-fond { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.tuile-voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--bento-voile, 17, 18, 23), 0.6), rgba(var(--bento-voile, 17, 18, 23), 0) 55%); }
.tuile-carte .tuile-in { background: linear-gradient(135deg, #555, #151515); }
.tuile-carte:not(.tuile-indications):not(.tuile-profil):not(.tuile-techno) .tuile-in { background: linear-gradient(40deg, rgba(36, 37, 44, 0.96), rgba(62, 64, 74, 0.9)); }
.tuile-bouton .tuile-in { background: #1b1c22; }
.tuile-bouton-fort .tuile-in { background: linear-gradient(135deg, #555, #151515); }
.tuile-texte { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 36px 32px; color: #fff; }
.tuile-carte .tuile-texte::before { content: ""; flex: none; width: 34px; height: 3px; border-radius: 3px; background: var(--bento-barre, var(--accent-sombre)); } /* même filet que sous les titres du site */
.tuile-texte-bas { justify-content: flex-end; gap: 10px; padding: 0 40px 40px; }
.tuile-indications .tuile-texte, .tuile-profil .tuile-texte { gap: 10px; padding: 24px 28px 18px; }
.tuile-techno .tuile-texte { padding: 40px 32px; }
.ligne { display: block; margin: 0; overflow: hidden; }
.ligne .l { display: block; }
.bento-titre-xl { font-family: var(--police-titre); font-weight: 600; font-size: 64px; line-height: 1.05; letter-spacing: -1.5px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
.bento-accroche { font-family: var(--police-titre); font-weight: 300; font-size: 19px; line-height: 1.4; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.bento-titre { font-family: var(--police-titre); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.5px; color: #fff; }
.bento-titre-long, .tuile-indications .bento-titre, .tuile-profil .bento-titre { font-size: 26px; }
.bento-texte { font-family: var(--police-titre); font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.tuile-indications .bento-texte, .tuile-profil .bento-texte { font-size: 14px; line-height: 1.5; }
.bento-appareil { position: absolute; left: 50%; bottom: 0; width: 100%; max-height: 52%; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%); pointer-events: none; }
.bento-bouton { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; font-family: var(--police-titre); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); cursor: pointer; transition: background 0.3s; }
.bento-bouton:hover { background: rgba(255, 255, 255, 0.08); }
.bento-bouton .ligne { overflow: hidden; }
.tuile-photo { background: #474949; }
.tuile-visuel-a .tuile-fond { background-position: 100% 50%; }
/* fiche vidéo : plein écran, vidéo en fond, informations clés à droite */
.bento-video { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--fond-sombre); color: #fff; }
.bento-video[open] { display: block; animation: bv-ouvre 0.5s var(--sortie, ease) both; }
.bento-video::backdrop { background: var(--fond-sombre); }
@keyframes bv-ouvre { from { opacity: 0; } }
.bv-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bv-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 18, 23, 0.55), rgba(17, 18, 23, 0.4) 60%, rgba(17, 18, 23, 0.8)); }
.bv-gauche { position: absolute; left: 70px; bottom: 50px; width: min(720px, calc(100% - 520px)); }
.bv-surtitre { margin: 0 0 6px; font-family: var(--police-titre); font-weight: 300; font-size: 36px; line-height: 1.3; color: var(--bv-accent, #fff); }
.bv-titre { margin: 0 0 34px; font-family: var(--police-titre); font-weight: 600; font-size: 64px; line-height: 1.12; letter-spacing: -1.5px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); }
.bv-fermer { display: grid; place-items: center; width: 58px; height: 60px; border-radius: 6px; background: var(--bv-degrade); color: #fff; cursor: pointer; transition: transform 0.3s var(--ease-sortie), filter 0.3s; }
.bv-fermer:hover { transform: scale(1.06); filter: brightness(1.15); }
.bv-fermer .icone { width: 22px; height: 22px; }
.bv-droite { position: absolute; top: 0; right: 70px; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 360px; overflow: hidden auto; padding: 24px 0; }
.bv-etiquette { margin: 8px 0 0 30px; font-family: var(--police-titre); font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.bv-carte { flex: none; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, rgba(85, 85, 85, 0.92), rgba(21, 21, 21, 0.92)); }
.bv-carte:nth-of-type(even) { background: linear-gradient(135deg, rgba(58, 59, 66, 0.92), rgba(24, 25, 30, 0.92)); }
.bv-carte-in { padding: 20px 30px 20px; }
.bv-carte-titre { margin: 0 0 4px; font-family: var(--police-titre); font-weight: 600; font-size: 18px; line-height: 1.3; color: #fff; }
.bv-texte { margin: 0; font-family: var(--police-titre); font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.bv-cta { display: block; flex: none; margin-top: 4px; padding: 26px 20px; border-radius: 8px; background: var(--bv-degrade); font-family: var(--police-titre); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-align: center; text-transform: uppercase; color: #fff; transition: filter 0.3s, transform 0.3s var(--ease-sortie); }
.bv-cta:hover { filter: brightness(1.12); transform: translateY(-2px); }
/* entrée : fonds de cartes dévoilés depuis la gauche, textes qui glissent depuis la droite 0,25 s après */
.bento-video[open] .bv-carte { animation: bv-carte 1s var(--sortie, ease) both; animation-delay: calc(0.1s + var(--i, 0) * 0.12s); }
.bento-video[open] .l { display: inline-block; animation: bv-texte 1s var(--sortie, ease) both; animation-delay: calc(0.35s + var(--i, 0) * 0.12s); }
.bv-droite .bv-etiquette, .bv-droite .bv-cta, .bv-droite .bv-texte, .bv-droite .bv-carte-titre { overflow: hidden; }
.bento-video[open] .bv-surtitre, .bento-video[open] .bv-titre { animation: bv-monte 1s var(--sortie, ease) 0.2s both; }
@keyframes bv-carte { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bv-texte { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bv-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 1100px) {
	.bv-gauche { left: 40px; width: calc(100% - 460px); }
	.bv-titre { font-size: 46px; }
	.bv-droite { right: 30px; width: 340px; }
}
@media (max-width: 860px) {
	.bento-video { overflow-y: auto; }
	.bv-gauche { position: relative; left: auto; bottom: auto; width: auto; padding: 76px 24px 0; }
	.bv-surtitre { font-size: 24px; }
	.bv-titre { margin-bottom: 20px; font-size: 36px; }
	.bv-fermer { position: fixed; top: 16px; right: 16px; z-index: 3; width: 48px; height: 48px; }
	.bv-droite { position: relative; top: auto; right: auto; bottom: auto; width: auto; padding: 8px 24px 40px; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
	.bento-video[open], .bento-video[open] .bv-carte, .bento-video[open] .l, .bento-video[open] .bv-surtitre, .bento-video[open] .bv-titre { animation: none; }
}

/* entrée : tuiles qui glissent depuis le bord (1,2 s), textes démasqués 0,25 s plus tard, lueur en fondu */
.js .bento .tuile-in, .js .bento .l { animation-duration: 1.2s; animation-timing-function: var(--sortie); animation-fill-mode: both; animation-play-state: paused; }
.js .bento .l { animation-delay: 0.25s; }
.js .bento .tuile-in[data-de="gauche"], .js .bento .l[data-de="gauche"] { animation-name: bento-gauche; }
.js .bento .tuile-in[data-de="droite"], .js .bento .l[data-de="droite"] { animation-name: bento-droite; }
.js .bento .tuile-in[data-de="haut"], .js .bento .l[data-de="haut"] { animation-name: bento-haut; }
.js .bento .tuile-in[data-de="bas"], .js .bento .l[data-de="bas"] { animation-name: bento-bas; }
.js .bento .bento-lueur { animation: bento-lueur 1s var(--sortie) 0.2s both paused; }
.js .bento.est-visible .tuile-in, .js .bento.est-visible .l, .js .bento.est-visible .bento-lueur { animation-play-state: running; }
@keyframes bento-gauche { from { transform: translate3d(-100%, 0, 0); } }
@keyframes bento-droite { from { transform: translate3d(100%, 0, 0); } }
@keyframes bento-haut { from { transform: translate3d(0, -100%, 0); } }
@keyframes bento-bas { from { transform: translate3d(0, 100%, 0); } }
@keyframes bento-lueur { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1023px) {
	.bento-titre-xl { font-size: 54px; }
	.bento-titre { font-size: 28px; }
	.tuile-texte { padding: 32px 28px; }
}
@media (max-width: 860px) {
	.bento { display: flex; flex-direction: column; height: auto; gap: 14px; padding: 14px 14px calc(14px + var(--recouvrement)); }
	.bento-col { gap: 14px; }
	.bento-col > .tuile, .bento-col-a > .bento-rang, .bento-col-a > .bento-boutons { flex: none; }
	.bento-col-a > .tuile-grande { height: 380px; }
	.bento-rang { flex-direction: column; }
	.bento-rang > .tuile { flex: none; height: 300px; }
	.bento-boutons > .tuile { height: 72px; }
	.bento-col-b > .tuile-indications, .bento-col-b > .tuile-profil { height: 220px; }
	.bento-col-b > .tuile-visuel-b, .bento-col-c > .tuile-visuel-c { height: 340px; }
	.bento-col-c > .tuile-techno { height: 460px; }
	.bento-titre-xl { font-size: 44px; }
	.bento-titre { font-size: 26px; }
	.bento-boutons { flex-wrap: wrap; }
	.bento-boutons > .tuile-bouton-fort { flex: 1 0 100%; }
	.bento-boutons > .tuile { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
	.js .bento .tuile-in, .js .bento .l, .js .bento .bento-lueur { animation: none; }
	.bento-lueur { opacity: 1; }
}

/* ---------- Tuile sans photo (phase finale) : emplacement propre, avec un reflet qui passe de temps en temps ---------- */
.tuile-photo.tuile-vide .tuile-in { background: var(--points-clairs) 0 0 / 16px 16px, linear-gradient(135deg, #3a3b42, #1d1e24); }
.tuile-photo.tuile-vide .tuile-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.12) 50%, transparent 62%); transform: translateX(-120%); animation: reflet 5s ease-in-out 1.6s infinite; }
@media (max-width: 860px) {
	.bento-col-a > .tuile-grande { height: 300px; }
	.bento-rang > .tuile-photo, .bento-col-b > .tuile-visuel-b, .bento-col-c > .tuile-visuel-c { height: 150px; }
	.bento-col-c > .tuile-techno { height: 220px; }
	.bento-rang > .tuile-carte { height: 220px; }
	.bento-col-b > .tuile-indications, .bento-col-b > .tuile-profil { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
	.tuile-photo.tuile-vide .tuile-in::after { animation: none; }
}