/* Dimylahy : décors du site actuel, refaits en CSS autour des widgets Mon Builder. */

/* Fond sombre partout, y compris derrière l'en-tête et pendant le chargement des photos. */
body.mb-canvas { background: var(--mb-fond, #141311); color: var(--mb-text, #f4f0ea); }

/* Logo texte de l'en-tête : pas de soulignement au survol. */
.dy-logo a { text-decoration: none; }

/* ---------- Ouverture ---------- */
.dy-hero__side,
.dy-hero__main { background-position: center center; background-size: cover; }
.dy-hero__main h1 { text-wrap: balance; }

/* Pastille « Voir le portfolio » : deux ondes qui s'élargissent, et l'ensemble flotte doucement. */
.dy-radar-wrap { animation: dy-float 3.2s ease-in-out infinite; }
.dy-radar { position: relative; }
.dy-radar a,
.dy-radar .mb-icon-wrap,
.dy-radar > * { position: relative; }
.dy-radar::before,
.dy-radar::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 48px; height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	border: 2px solid var(--mb-primary, #c48f56);
	opacity: 0;
	animation: dy-wave 2.4s ease-out infinite;
	pointer-events: none;
}
.dy-radar::after { animation-delay: 1.2s; }
.dy-radar-label a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.dy-radar-wrap:hover .dy-radar-label { color: rgba(255, 255, 255, 0.92); }
@keyframes dy-wave {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(2.1); opacity: 0; }
}
@keyframes dy-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* Chevrons « Remonter » sous la galerie : une vague qui monte. */
.dy-chevrons a,
.dy-chevrons svg { transition: opacity 0.3s ease; }
.dy-chevrons svg { animation: dy-chevrons 2s ease-in-out infinite; }
.dy-chevrons:hover svg { opacity: 0.7; }
@keyframes dy-chevrons {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(-6px); opacity: 0.55; }
}

/* ---------- Bouton Instagram fixé sur le bord gauche ---------- */
.dy-insta-fixe .mb-socials { margin: 0; }
.dy-insta-fixe a { border-radius: 0 8px 8px 0 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: transform 0.25s ease; }
.dy-insta-fixe a:hover { transform: translateX(4px); }

/* ---------- Accordéon « Mon histoire » ---------- */
.dy-accordion .mb-accordion__item { border: 0 !important; background: transparent; }
.dy-accordion .mb-accordion__title { gap: 14px; }
.dy-accordion .mb-accordion__icon svg { width: 16px; height: 16px; }

/* ---------- Photos superposées (accueil) ---------- */
.dy-photos { position: relative; }
.dy-photos img { display: block; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.dy-photos__petite img { border: 6px solid var(--mb-fond, #141311); }

/* ---------- Cartes des albums ---------- */
.dy-album { background: var(--mb-carte, #24211d); padding-bottom: 26px; transition: transform 0.35s ease; }
.dy-album:hover { transform: translateY(-6px); }
.dy-album .mb-box__media { margin: 0; overflow: hidden; }
.dy-album .mb-box__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s ease; }
.dy-album:hover .mb-box__media img { transform: scale(1.04); }
.dy-album .mb-box__title { margin: 0 0 6px; }
.dy-album .mb-box__title a { color: inherit; text-decoration: none; }
.dy-album .mb-box__description { margin: 0; }
/* Quinconce sur ordinateur, comme sur le site actuel. */
@media (min-width: 1025px) {
	.dy-album--bas { margin-top: 36px; }
}

/* ---------- Pages légales ---------- */
.dy-legal h2 { font-family: Archivo, sans-serif; font-size: 20px; text-transform: uppercase; color: var(--mb-light, #f9f6f0); margin: 36px 0 10px; }

/* ---------- Popup ---------- */
/* Case d'accord du formulaire : lisible sur le fond sombre (14 px fin par défaut dans Mon Builder). */
.mb-popup .mb-form__choice--acceptance { font-size: 15px; font-weight: 400; color: var(--mb-text, #f4f0ea); }
.mb-popup { background: transparent; }
.mb-popup__close { color: var(--mb-light, #f9f6f0); }

/* La pastille et les chevrons gardent leur animation même quand Windows demande moins d'animations
   (réglage souvent activé sans le savoir) : ce sont de petits mouvements, comme sur le site actuel. */