/* ==========================================================================
   Dream Studio — hero de la page d'accueil
   Une seule section, plein écran, sans défilement.
   Les @keyframes ds-fondu / ds-zoom / ds-jauge sont générés par PHP
   (inc/hero.php) car leurs pourcentages dépendent du nombre de diapositives.
   ========================================================================== */

body.ds-accueil-ancien { overflow: hidden; }

.ds-hero {
	display: flex;
	height: calc(100vh - var(--ds-header-h)); /* repli pour les navigateurs sans dvh */
	height: calc(100dvh - var(--ds-header-h));
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Colonne éditoriale
   -------------------------------------------------------------------------- */

.ds-hero__texte {
	position: relative;
	width: 620px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0 56px 0 var(--ds-gouttiere);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ds-hero__surtitre {
	margin-bottom: 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1.5;
	color: var(--ds-rouge);
	text-transform: uppercase;
}

.ds-hero__titre {
	font-family: var(--ds-serif);
	font-weight: 400;
	font-size: clamp(44px, 5.3vw, 76px);
	line-height: 1.04;
	letter-spacing: -.01em;
	color: var(--ds-encre);
}

.ds-hero__titre-accent {
	color: var(--ds-rouge);
	font-style: italic;
}

.ds-hero__chapo {
	margin-top: 26px;
	max-width: 440px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ds-encre-douce);
}

.ds-hero__actions {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ---- Boutons ---- */

.ds-bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: background-color var(--ds-duree) var(--ds-sortie),
	            border-color var(--ds-duree) var(--ds-sortie),
	            color var(--ds-duree) var(--ds-sortie);
}

.ds-bouton__fleche,
.ds-bouton__porte {
	flex: 0 0 auto;
}

.ds-bouton__fleche {
	transition: transform var(--ds-duree) var(--ds-sortie);
}

.ds-bouton--plein {
	background: var(--ds-rouge);
	color: #fff;
}

.ds-bouton--plein:hover { background: var(--ds-rouge-sombre); }

.ds-bouton--plan::after {
	content: "";
	position: absolute;
	left: 26px;
	right: 38px;
	bottom: 7px;
	height: 7px;
	border-right: 1px solid rgba(255, 255, 255, .72);
	border-bottom: 1px solid rgba(255, 255, 255, .72);
	transform: scaleX(.12);
	transform-origin: right center;
	transition: transform .35s var(--ds-sortie);
}

.ds-bouton--plan:hover::after,
.ds-bouton--plan:focus-visible::after {
	transform: scaleX(1);
}

.ds-bouton--plan:hover .ds-bouton__fleche,
.ds-bouton--plan:focus-visible .ds-bouton__fleche {
	transform: translateX(4px);
}

.ds-bouton--ligne {
	border: 1px solid var(--ds-filet-fort);
	color: var(--ds-encre);
}

.ds-bouton--ligne:hover {
	border-color: var(--ds-encre);
	color: var(--ds-rouge);
}

.ds-bouton__porte {
	color: var(--ds-rouge);
	overflow: visible;
}

.ds-bouton__vantail {
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform .3s var(--ds-sortie);
}

.ds-bouton--seuil:hover .ds-bouton__vantail,
.ds-bouton--seuil:focus-visible .ds-bouton__vantail {
	transform: perspective(28px) rotateY(-28deg);
}

/* ---- Pied de colonne : coordonnées + réseaux ---- */

.ds-hero__pied {
	position: absolute;
	left: var(--ds-gouttiere);
	right: 56px;
	bottom: 44px;
}

.ds-hero__pied-ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ds-hero__coord {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 14px;
}

.ds-hero__coord a {
	color: var(--ds-encre-douce);
	transition: color var(--ds-duree) var(--ds-sortie);
}

.ds-hero__coord a:hover { color: var(--ds-rouge); }

/* --------------------------------------------------------------------------
   Panneau visuel
   -------------------------------------------------------------------------- */

.ds-hero__visuel {
	position: relative;
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	background: #E9E4DC;
}

/* Le seuil : filet rouge sur la limite blanc / image, en écho au logo. */
.ds-hero__seuil {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	z-index: 4;
	background: var(--ds-rouge);
	transform-origin: top;
	transform: scaleY(0);
	animation: ds-seuil 1.4s var(--ds-sortie) .5s forwards;
}

@keyframes ds-seuil { to { transform: scaleY(1); } }

.ds-hero__diapos { position: absolute; inset: 0; }

.ds-diapo {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: ds-fondu var(--ds-cycle) cubic-bezier(.4, 0, .2, 1) infinite;
	animation-delay: calc(var(--i) * var(--ds-pas));
}

.ds-diapo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: ds-zoom var(--ds-cycle) ease-out infinite;
	animation-delay: calc(var(--i) * var(--ds-pas));
}

/* Voile sombre en bas : rend la légende lisible quelle que soit l'image. */
.ds-hero__voile {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 240px;
	z-index: 2;
	background: linear-gradient(to top, rgba(20, 18, 16, .74), rgba(20, 18, 16, 0));
}

/* ---- Légendes ---- */

.ds-hero__legendes {
	position: absolute;
	left: 48px;
	right: 48px;
	bottom: 52px;
	z-index: 3;
	height: 58px;
}

.ds-legende {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	animation: ds-fondu var(--ds-cycle) cubic-bezier(.4, 0, .2, 1) infinite;
	animation-delay: calc(var(--i) * var(--ds-pas));
}

.ds-legende__titre {
	display: block;
	font-family: var(--ds-serif);
	font-size: 25px;
	line-height: 1.2;
	color: #fff;
}

.ds-legende__meta {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

/* ---- Jauges de progression ---- */

.ds-hero__jauges {
	position: absolute;
	right: 48px;
	bottom: 60px;
	z-index: 3;
	display: flex;
	gap: 10px;
}

.ds-jauge {
	display: block;
	width: 40px;
	height: 2px;
	background: rgba(255, 255, 255, .35);
}

.ds-jauge i {
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
	animation: ds-jauge var(--ds-cycle) linear infinite;
	animation-delay: calc(var(--i) * var(--ds-pas));
}

/* --------------------------------------------------------------------------
   Animations d'entrée
   -------------------------------------------------------------------------- */

.ds-monte {
	opacity: 0;
	transform: translateY(16px);
	animation: ds-monte-in .8s var(--ds-sortie) var(--d, 0s) forwards;
}

@keyframes ds-monte-in { to { opacity: 1; transform: none; } }

/* Révélation ligne par ligne : le rembourrage protège les accents du masque. */
.ds-masque { display: block; overflow: hidden; }

.ds-masque > span {
	display: block;
	padding-block: .06em;
	transform: translateY(112%);
	animation: ds-revele .95s var(--ds-sortie) var(--d, 0s) forwards;
}

@keyframes ds-revele { to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Tablette et mobile : la colonne passe au-dessus, l'image occupe le bas
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.ds-hero { flex-direction: column; }

	.ds-hero__texte {
		width: auto;
		padding: 8px var(--ds-gouttiere) 28px;
		flex: 0 0 auto;
		justify-content: flex-start;
		padding-top: 24px;
	}

	.ds-hero__titre { font-size: clamp(40px, 7.4vw, 66px); }
	.ds-hero__chapo { max-width: 540px; margin-top: 22px; }
	.ds-hero__actions { margin-top: 30px; }

	/* Coordonnées et réseaux vivent dans le panneau de menu sur ces tailles. */
	.ds-hero__pied { display: none; }

	.ds-hero__visuel {
		flex: 1 1 auto;
		min-height: 240px;
	}

	/* Le seuil devient horizontal, sur la limite haute de l'image. */
	.ds-hero__seuil {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 3px;
		transform-origin: left;
		transform: scaleX(0);
		animation-name: ds-seuil-h;
	}

	@keyframes ds-seuil-h { to { transform: scaleX(1); } }

	.ds-hero__legendes { left: var(--ds-gouttiere); right: var(--ds-gouttiere); bottom: 44px; }
	.ds-hero__jauges { right: var(--ds-gouttiere); bottom: 52px; }
	.ds-jauge { width: 34px; }
}

@media (max-width: 767px) {
	/* Rythme resserré : sur un téléphone, l'image doit garder au moins
	   45 % de la hauteur — c'est elle qui vend le travail de l'agence. */
	.ds-hero__texte { padding-top: 16px; padding-bottom: 20px; }
	.ds-hero__surtitre { margin-bottom: 14px; font-size: 10px; letter-spacing: .18em; }
	.ds-hero__chapo { margin-top: 14px; font-size: 14px; line-height: 1.55; }

	.ds-hero__actions {
		margin-top: 20px;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ds-bouton { height: 52px; }

	/* Pas de plancher en vh ici : sur un écran court il ferait déborder le
	   panneau hors du cadre, et l'overflow masquerait la légende sans rien dire.
	   Le partage se fait par flex, le plancher reste un secours absolu. */
	.ds-hero__visuel { min-height: 200px; }

	.ds-hero__legendes { bottom: 34px; height: 62px; }
	.ds-legende__titre { font-size: 22px; }
	.ds-legende__meta { font-size: 10px; }

	.ds-hero__jauges { left: var(--ds-gouttiere); right: auto; bottom: 18px; gap: 6px; }
	.ds-jauge { width: 26px; }

	.ds-hero__voile { height: 190px; }
}

/* --------------------------------------------------------------------------
   Écrans courts (iPhone SE et assimilés)
   On resserre la typographie pour que l'image garde sa place, plutôt que de
   laisser le bloc de texte pousser le panneau hors du cadre.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) and (max-height: 720px) {
	/* Le second appel à l'action disparaît au profit de l'image : « Contact »
	   reste accessible par le menu, donc rien n'est perdu pour l'utilisateur. */
	.ds-hero__actions .ds-bouton--ligne { display: none; }

	.ds-hero__texte { padding-top: 14px; padding-bottom: 16px; }
	.ds-hero__surtitre { margin-bottom: 12px; }
	.ds-hero__titre { font-size: 38px; }
	.ds-hero__chapo { margin-top: 12px; }
	.ds-hero__actions { margin-top: 18px; }
	.ds-bouton { height: 48px; }
	.ds-legende__titre { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Écrans très courts : soupape de sécurité
   Plutôt que de rogner le contenu, on rend la page défilante.
   -------------------------------------------------------------------------- */

@media (max-height: 560px) {
	body.ds-accueil-ancien { overflow: auto; }

	.ds-hero {
		height: auto;
		min-height: calc(100vh - var(--ds-header-h));
		min-height: calc(100dvh - var(--ds-header-h));
	}

	.ds-hero__visuel { min-height: 280px; }
	.ds-hero__pied { display: none; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ds-diapo,
	.ds-diapo img,
	.ds-legende,
	.ds-jauge i,
	.ds-monte,
	.ds-masque > span,
	.ds-hero__seuil {
		animation: none !important;
	}

	.ds-diapo:first-child,
	.ds-legende:first-child { opacity: 1 !important; }

	.ds-monte,
	.ds-masque > span {
		opacity: 1 !important;
		transform: none !important;
	}

	.ds-hero__seuil { transform: none !important; }
	.ds-hero__jauges { display: none; }
}