/* =====================================================================
 * DP – Slider d'accueil
 * =====================================================================
 * Le héros de « C7 — Passe-partout » : un panneau arrondi à la hauteur de
 * l'écran, une photo en plein cadre, le dégradé du dôme posé dessus en voile,
 * et le texte ancré en bas à gauche.
 *
 * ── Les deux voiles, et pourquoi il en faut deux ──
 *
 * Le premier est le dégradé du dôme à moitié transparent : c'est lui qui
 * rattache le héros à la marque sans y écrire son nom. Il ne rend pas le texte
 * lisible pour autant — c'est un dégradé de pastels, et sur une photo claire il
 * éclaircit plutôt qu'il n'assombrit.
 *
 * Le second est un voile sombre, plus dense en bas qu'en haut, et c'est lui qui
 * porte la lisibilité. Il est plus appuyé là où le texte se pose. Les deux sont
 * réglables séparément parce qu'ils ne font pas le même travail : baisser le
 * dégradé change l'ambiance, baisser l'assombrissement rend le titre illisible.
 *
 * ── Toutes les vues sont rendues, la feuille les empile ──
 *
 * Photos et textes sont dans le flux, superposés en grille, et seule la vue
 * active est opaque. Le navigateur a donc déjà tout à l'écran : le changement
 * de vue est un fondu, pas un chargement, et rien ne saute.
 * ===================================================================== */

.dp-hs {
	--dp-hs-veil-dome: 46%;
	--dp-hs-veil-dark: 100%;

	/*
	 * Les tailles se règlent sur la largeur ET sur la hauteur.
	 *
	 * Un `clamp()` en `vw` seul ne connaît pas la hauteur de la fenêtre : sur un
	 * écran large et court — un portable posé à plat, un téléphone en paysage,
	 * une fenêtre réduite — le titre restait à sa taille de grand écran, et le
	 * contenu ne tenait plus dans la vue. Le `min()` ajoute la contrainte
	 * manquante : c'est la plus petite des deux mesures qui gagne.
	 */
	--dp-hs-pad: clamp(20px, min(5vw, 6.5vh), 72px);
	--dp-hs-gap: clamp(10px, min(1.6vw, 2.4vh), 22px);
	--dp-hs-title-size: clamp(26px, min(5.6vw, 9vh), 84px);
	--dp-hs-text-size: clamp(14px, min(1.3vw, 2.3vh), 19px);
	--dp-hs-title-width: 18ch;
	--dp-hs-text-width: 52ch;

	width: 100%;
	font-family: var(--dp-font-base, inherit);
}

.dp-hs__panneau {
	position: relative;
	display: grid;

	/*
	 * Une seule rangée, bornée à la hauteur du panneau.
	 *
	 * Sans `minmax(0, 1fr)`, la rangée se dimensionne sur son plus grand item —
	 * et c'est la photo qui gagne : son `<img>` prend sa hauteur intrinsèque,
	 * plus de mille pixels pour un cliché large. La rangée gonflait donc à
	 * mille et quelques, le contenu s'alignait sur SON bas à elle, et les
	 * boutons sortaient du cadre par le dessous pendant qu'`overflow: hidden`
	 * les coupait. Rien ne se voyait dans la feuille : il a fallu mesurer la
	 * page dans un navigateur pour voir la rangée gonfler.
	 *
	 * `minmax(0, 1fr)` renverse le rapport : c'est le panneau qui donne la
	 * hauteur, et les items s'y rangent. Le `min-height: 0` de chacun est
	 * indispensable — sans lui, un item de grille refuse de descendre sous sa
	 * taille minimale de contenu, et la rangée regonfle.
	 */
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);

	isolation: isolate;
	overflow: hidden;
	border-radius: var(--dp-hs-radius, var(--dp-radius-lg, 20px));
	background: var(--dp-color-text, #303030);
	min-height: var(--dp-hs-height, 520px);
}

/* Toute la hauteur de l'écran.
   `100svh` d'abord : sur téléphone, `100vh` compte la barre d'adresse comme si
   elle était rétractée, et le bas du panneau passe donc sous elle — les boutons
   du héros deviennent inatteignables tant qu'on n'a pas fait défiler. */
/* Toute la hauteur de l'écran, mais pas un pixel de plus.
   ---------------------------------------------------------------------------
   C'était un `min-height`, et un `min-height` ne borne rien : dès que le
   contenu ne tenait pas, le panneau grandissait et le héros devenait plus haut
   que l'écran. `height` le fixe, `max-height` le confirme face à un contenu
   trop grand.

   `100svh` d'abord : sur téléphone, `100vh` compte la barre d'adresse comme si
   elle était rétractée, et le bas du panneau passe sous elle — les boutons
   deviennent inatteignables tant qu'on n'a pas fait défiler. `100vh` reste en
   repli pour les navigateurs qui ignorent l'unité.

   `--dp-hs-offset` retranche ce qui surmonte le héros — un en-tête collé, par
   exemple — pour que le panneau tienne dans ce qu'il reste de la fenêtre. */
.dp-hs--plein-ecran .dp-hs__panneau {
	/*
	 * `--dp-hs-dispo` est mesuré par le script : c'est la place qui reste
	 * réellement, une fois retranché ce que le thème pose autour.
	 *
	 * Le thème porte le passe-partout de C7 — un encadré blanc de 76 px en
	 * haut, 54 en bas, 22 sur les flancs, en rembourrage de `<body>`. Un
	 * `100svh` posé là-dedans dépasse l'écran de cent cinquante pixels, et le
	 * bas du héros passe sous le cadre.
	 *
	 * Recopier ces valeurs ici les figerait : elles changent au point de
	 * rupture du thème, et un autre en-tête les changerait encore. Le script
	 * mesure donc, au lieu de supposer.
	 *
	 * Le repli couvre le cas sans script : `100svh` moins le décalage réglé à
	 * la main. Moins juste, jamais cassé.
	 */
	height: var(--dp-hs-dispo, calc(100vh - var(--dp-hs-offset, 0px)));
	height: var(--dp-hs-dispo, calc(100svh - var(--dp-hs-offset, 0px)));
	max-height: var(--dp-hs-dispo, calc(100svh - var(--dp-hs-offset, 0px)));
	min-height: 360px;
}

/* ── Les photos ─────────────────────────────────────────────────────────
   Toutes dans la même cellule de grille : c'est ce qui les superpose sans
   position absolue, donc sans hauteur à calculer. */

.dp-hs__photo {
	grid-area: 1 / 1;
	margin: 0;
	z-index: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--dp-hs-fondu, 900ms) var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}

.dp-hs__photo.is-active {
	opacity: 1;
}

/* `img` en tête : Elementor pose `.elementor img { height: auto }` en (0,1,1),
   plus fort qu'une classe seule, et la photo perdrait sa hauteur. */
.dp-hs__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ── Les voiles ─────────────────────────────────────────────────────── */

.dp-hs__voile-dome,
.dp-hs__voile-sombre {
	grid-area: 1 / 1;
	pointer-events: none;
}

.dp-hs__voile-dome {
	z-index: 1;
	background: var(--dp-gradient-dome, linear-gradient(135deg, #61c2d0, #fff399));
	opacity: var(--dp-hs-veil-dome);
}

.dp-hs--sans-dome .dp-hs__voile-dome {
	display: none;
}

/* Le voile sombre est un dégradé vertical : léger en haut, appuyé en bas, là
   où le texte se pose. Son intensité pilote l'opacité de la couche entière. */
.dp-hs__voile-sombre {
	z-index: 2;
	background: linear-gradient(180deg, rgba(48, 48, 48, .28) 0%, rgba(48, 48, 48, .52) 100%);
	opacity: var(--dp-hs-veil-dark);
}

/* ── Le contenu ─────────────────────────────────────────────────────────
   Ancré en bas à gauche, comme sur la maquette. Les vues sont superposées et
   la vue inactive est retirée du flux de pointage — sans cela, ses liens
   resteraient cliquables sous celle qu'on voit. */

.dp-hs__contenu {
	grid-area: 1 / 1;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--dp-hs-gap);
	padding: var(--dp-hs-pad);
	padding-bottom: calc(var(--dp-hs-inset) + 52px);

	/*
	 * Pas de défilement propre, et c'est délibéré.
	 *
	 * Il y en a eu un — `overflow-y: auto` — pour rattraper un contenu trop
	 * grand. Il rendait le héros infranchissable : la molette, posée sur un
	 * panneau qui occupe tout l'écran, était captée par ce conteneur, et
	 * `overscroll-behavior: contain` l'empêchait de repartir vers la page. On ne
	 * pouvait plus descendre.
	 *
	 * Un héros se traverse. Le débordement se règle donc en amont — les tailles
	 * sont bornées par la hauteur de la fenêtre, et sous 520 px le paragraphe
	 * s'efface — jamais par une barre de défilement posée en travers du chemin.
	 */
	min-height: 0;
	min-width: 0;

	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity var(--dp-hs-fondu, 900ms) var(--dp-ease, cubic-bezier(.4, 0, .2, 1)),
		transform var(--dp-hs-fondu, 900ms) var(--dp-ease, cubic-bezier(.4, 0, .2, 1)),
		visibility 0s linear var(--dp-hs-fondu, 900ms);
}

.dp-hs__contenu.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s, 0s;
}

.dp-hs--center .dp-hs__contenu {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.dp-hs--middle .dp-hs__contenu {
	justify-content: center;
}

.dp-hs__eyebrow {
	margin: 0;
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	/* Blanc assumé : le texte est posé sur une photo assombrie, pas sur un
	   aplat de charte. La charte ne sait pas ce qu'il y a sur la photo, elle
	   ne peut donc rien calculer ici. Voir SKILL §4e, dernière ligne. */
	color: var(--dp-hs-eyebrow, rgba(255, 255, 255, .88));
}

.dp-hs__title {
	margin: 0;
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: var(--dp-font-heading-weight, 700);
	font-size: var(--dp-hs-title-size);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--dp-hs-title, #ffffff);
	max-width: var(--dp-hs-title-width);
	text-wrap: balance;
}

.dp-hs__text {
	margin: 0;
	font-size: var(--dp-hs-text-size);
	line-height: 1.5;
	color: var(--dp-hs-text, rgba(255, 255, 255, .92));
	max-width: var(--dp-hs-text-width);
}

/* ── Les boutons ────────────────────────────────────────────────────── */

.dp-hs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dp-hs .dp-hs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--dp-hs-btn-radius, var(--dp-radius-pill, 999px));
	background: var(--dp-btn-bg, var(--dp-hs-btn-bg, var(--dp-color-primary-fill, #61c2d0)));
	/* `on-primary`, pas du blanc : l'aplat du bouton est une couleur de charte,
	   et un pastel ne porte pas de libellé blanc. */
	color: var(--dp-btn-text, var(--dp-hs-btn-text, var(--dp-color-on-primary, #303030)));
	border: 1px solid transparent;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-hs .dp-hs__btn:hover {
	filter: brightness(.94);
	background: var(--dp-btn-bg-hover, var(--dp-btn-bg, var(--dp-hs-btn-bg, var(--dp-color-primary-fill, #61c2d0))));
	color: var(--dp-btn-text-hover, var(--dp-hs-btn-text, var(--dp-color-on-primary, #303030)));
}

/* Le bouton secondaire est un contour sur la photo : là, le blanc est juste. */
.dp-hs .dp-hs__btn--contour {
	background: var(--dp-btn-bg, transparent);
	border-color: var(--dp-btn-bg, var(--dp-hs-btn2-text, rgba(255, 255, 255, .6)));
	color: var(--dp-btn-text, var(--dp-hs-btn2-text, #ffffff));
}

.dp-hs .dp-hs__btn--contour:hover {
	filter: none;
	background: var(--dp-btn-bg-hover, rgba(255, 255, 255, .14));
	border-color: var(--dp-btn-bg-hover, var(--dp-hs-btn2-text, #ffffff));
	color: var(--dp-btn-text-hover, var(--dp-hs-btn2-text, #ffffff));
}

/* ── Puces, légende, flèches ────────────────────────────────────────── */

/* ── Les commandes ──────────────────────────────────────────────────────
   Puces, invitation et flèches sont posées en absolu SUR LE PANNEAU, et non
   dans la grille du contenu.

   Elles y étaient — `grid-area: 1/1; align-self: end` — et leur position
   dépendait donc de la hauteur de la cellule, elle-même tirée du contenu. Dès
   que celui-ci approchait la hauteur du panneau, les commandes descendaient
   avec lui et venaient se poser sur l'arête arrondie, à cheval sur la marge du
   thème. En absolu, elles sont à une distance FIXE du bord réel du panneau,
   quoi que fasse le contenu.

   Le retrait tient compte de l'arrondi : dans un coin de 26 px de rayon, un
   élément posé à 20 px du bord se retrouve sur la courbe. `--dp-hs-inset` vaut
   donc au moins le rayon du panneau. */

.dp-hs {
	/*
	 * Le retrait des commandes, et il n'a rien à voir avec celui du texte.
	 *
	 * Il a valu `max(--dp-hs-pad, …)` : sur un écran large, `--dp-hs-pad` monte
	 * à 5vw — près de 80 px — et les puces remontaient alors en plein dans la
	 * rangée de boutons. Le texte respire, les commandes se rangent contre
	 * l'arête : ce sont deux mesures différentes.
	 *
	 * Le seul lien avec le reste est l'arrondi : dans un coin de 26 px de
	 * rayon, un élément posé à 20 px du bord se retrouve sur la courbe.
	 */
	--dp-hs-inset: max(20px, calc(var(--dp-hs-radius, var(--dp-radius-lg, 20px)) * .75));
}

/*
 * Toutes les commandes dans la même rangée, en bas à gauche.
 *
 * L'angle bas-droit appartient au thème : il y pose son bouton « haut de
 * page », en `position: fixed` et `z-index: 998`, qui recouvrait la flèche
 * « suivant » dès qu'il paraissait. Le clic atterrissait sur lui.
 */
.dp-hs__reperes {
	position: absolute;
	bottom: var(--dp-hs-inset);
	left: var(--dp-hs-inset);
	z-index: 4;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0;
	/* Blanc franc. Les puces sont posées sur une photo voilée, jamais sur un
	   aplat de charte : il n'y a rien à calculer, et un blanc à 90 % se lisait
	   comme un gris sur les clichés clairs. L'inactive se distingue par son
	   opacité, pas par sa teinte. */
	color: var(--dp-hs-dots, #ffffff);
}

.dp-hs__legende {
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: inherit;
	opacity: .82;
}

.dp-hs__legende:empty {
	display: none;
}

.dp-hs__puces {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Les puces du Héros dôme, à l'identique : des ronds de 9 px, et l'actif
   s'allonge en pastille. C'est le repère de l'identité, et deux dessins de
   puces sur le même site donneraient deux carrousels différents. */
/*
 * Deux classes, et ce n'est pas un excès de zèle.
 *
 * Le thème neutralise le rouge que Hello Elementor pose sur tout `<button>`, et
 * le remplace par la couleur de marque : `background-color: transparent` et
 * `color: var(--dp-button)`. Sa règle pèse une classe — `:where()` ne compte
 * pas — donc à égalité avec la mienne, et c'est l'ordre de chargement qui
 * tranchait. Les puces sortaient en bleu.
 *
 * Elles posent donc leur couleur elles-mêmes, à deux classes, sans passer par
 * `currentColor` que le thème avait déjà repeint.
 */
.dp-hs .dp-hs__puce {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--dp-radius-pill, 999px);
	background-color: var(--dp-hs-dots, #ffffff);
	opacity: .5;
	cursor: pointer;
	transition: width .35s ease, opacity .35s ease;
}

.dp-hs .dp-hs__puce.is-active {
	width: 28px;
	opacity: 1;
}

.dp-hs .dp-hs__puce:hover,
.dp-hs .dp-hs__puce:focus {
	background-color: var(--dp-hs-dots, #ffffff);
	opacity: .78;
}

.dp-hs__fleches {
	display: flex;
	gap: 8px;
	padding: 0;
	/* Un écart franc d'avec les puces : collées, on ne sait plus laquelle des
	   deux commandes on vise. */
	margin-inline-start: 8px;
}

/* Deux classes, pour la même raison que les puces. */
.dp-hs .dp-hs__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Plus petites qu'avant : elles voisinent désormais des puces de 9 px, et
	   deux ronds de 44 px à côté les écrasaient. */
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--dp-hs-dots, rgba(255, 255, 255, .5));
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .1);
	color: var(--dp-hs-dots, #ffffff);
	cursor: pointer;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-hs .dp-hs__fleche:hover,
.dp-hs .dp-hs__fleche:focus {
	background-color: rgba(255, 255, 255, .24);
	border-color: var(--dp-hs-dots, #ffffff);
	color: var(--dp-hs-dots, #ffffff);
}

.dp-hs__fleche:focus-visible,
.dp-hs__puce:focus-visible,
.dp-hs__btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Une seule vue n'est pas un carrousel : rien à piloter. */
.dp-hs--vue-unique .dp-hs__reperes,
.dp-hs--vue-unique .dp-hs__fleches {
	display: none;
}

.dp-hs--vue-unique .dp-hs__contenu {
	padding-bottom: var(--dp-hs-pad);
}

/* ── Responsive ─────────────────────────────────────────────────────────
   Le titre est déjà en `clamp()` : il ne saute pas, il se réduit. Ce qui
   change ici, c'est ce que le `clamp()` ne sait pas faire — une rangée de
   boutons qui ne tient plus, et des repères qui passent sous le texte. */

@media (max-width: 620px) {
	.dp-hs {
		--dp-hs-gap: 16px;
	}

	.dp-hs__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.dp-hs__btn {
		width: 100%;
	}

	.dp-hs__fleches {
		display: none;
	}

	.dp-hs__reperes {
		gap: 10px;
	}
}

/* ── Les écrans courts ──────────────────────────────────────────────────
   Un portable posé à plat, un téléphone en paysage, une fenêtre réduite : la
   largeur ne dit rien de ce qui tient à l'écran, et c'est la hauteur qui
   manque. Les `min()` des tailles y ont déjà répondu ; ce qui reste à retirer,
   ce sont les respirations — la rangée de repères, le rembourrage du bas. */

@media (max-height: 640px) {
	.dp-hs {
		--dp-hs-title-width: 24ch;
		--dp-hs-text-width: 60ch;
	}

	.dp-hs__contenu {
		padding-bottom: calc(var(--dp-hs-inset) + 44px);
	}

	/* Sous 520 px de haut, le texte d'accompagnement passe après le titre et
	   les boutons : il explique, ils agissent. */
	@media (max-height: 520px) {
		.dp-hs__text {
			display: none;
		}
	}
}

/* Le cas le plus serré : peu de hauteur ET peu de largeur. Les repères passent
   sous le contenu plutôt que de lui disputer sa dernière ligne. */
@media (max-height: 560px) and (max-width: 620px) {
	.dp-hs__contenu {
		padding-bottom: calc(var(--dp-hs-inset) + 40px);
	}

	.dp-hs__actions {
		flex-direction: row;
	}

	.dp-hs__btn {
		width: auto;
		padding: 11px 20px;
		font-size: 14px;
	}
}

/* Qui a demandé moins d'animations voit les vues changer sans fondu ni
   glissement. Le carrousel continue de tourner : c'est un contenu, pas un
   effet. */
@media (prefers-reduced-motion: reduce) {
	.dp-hs__photo,
	.dp-hs__contenu {
		transition-duration: 0.01ms;
	}


	.dp-hs__contenu {
		transform: none;
	}
}

@media print {
	.dp-hs__photo:not(.is-active),
	.dp-hs__contenu:not(.is-active),
	.dp-hs__reperes,
	.dp-hs__fleches {
		display: none;
	}

	.dp-hs__panneau {
		min-height: 0;
	}
}