/**
 * Wobi - reflet balayant sur les images, au survol.
 *
 * Une bande lumineuse diagonale traverse l'image une fois, puis disparait.
 * L'image reste nette : aucun flou, aucun voile permanent, aucun texte
 * ajoute.
 *
 * Choix techniques
 * ----------------
 * 1. Le reflet est un degrade porte par un pseudo-element en inset: 0, et
 *    c'est sa POSITION DE FOND qui est animee, pas une transformation. Rien
 *    ne sort donc du cadre : inutile d'ajouter overflow: hidden sur les
 *    hotes, ce qui aurait rogne les ombres portees du collage de l'agence
 *    et les bords blancs de ses photos.
 * 2. Le pseudo-element reprend l'arrondi de l'image, sinon le reflet
 *    deborderait dans les angles.
 * 3. pointer-events: none : les liens, la visionneuse et le carrousel
 *    continuent de recevoir les clics.
 * 4. Les hotes sont listes un par un, jamais img en general : le logo de
 *    l'en-tete et du pied de page, et le bandeau de cookies, restent hors
 *    du dispositif.
 * 5. Le pseudo-element retenu differe selon les blocs, car plusieurs
 *    portent deja une decoration : voir le detail en regard de chaque
 *    regle.
 */

:root {
	--wobi-reflet-duree: .75s;
	--wobi-reflet-force: .42;
}

@keyframes wobi-reflet-passe {
	0% {
		opacity: 0;
		background-position: 160% 0;
	}

	12% {
		opacity: 1;
	}

	88% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		background-position: -60% 0;
	}
}

/*
 * Fabrique du reflet. Les selecteurs ci-dessous ne font qu'appeler ces
 * declarations via une liste, pour n'ecrire le degrade qu'une fois.
 */
.wobi-reflet,
.wobi-rea__visuel .wobi-reflet,
.wobi-zz__img::after,
.wobi-sup .wobi-sup__media::after,
.wobi-medias__photo::before,
.wobi-sf-carte__visuel::after,
.wobi-sf-corps__visuel::after,
.wobi-fiche-visuel::after,
body .v2-svc__img::after,
body .v2-collage__main::after,
body .v2-collage__top::after,
body .v2-collage__bottom::after,
body .v2-valeurs__img::after,
body .v2-contact__img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background-image: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 255, 255, var(--wobi-reflet-force)) 50%,
		rgba(255, 255, 255, 0) 62%
	);
	background-repeat: no-repeat;
	background-size: 240% 100%;
	background-position: 160% 0;
}

/* Declenchement. Le survol porte sur le bloc englobant quand il existe. */
.wobi-rea__carte:hover .wobi-reflet,
.wobi-zz__media:hover .wobi-zz__img::after,
.wobi-sup .wobi-sup__carte:hover .wobi-sup__media::after,
.wobi-medias__photo:hover::before,
.wobi-sf-carte:hover .wobi-sf-carte__visuel::after,
.wobi-sf-corps__visuel:hover::after,
.wobi-fiche-visuel:hover::after,
body .v2-svc:hover .v2-svc__img::after,
body .v2-collage__main:hover::after,
body .v2-collage__top:hover::after,
body .v2-collage__bottom:hover::after,
body .v2-valeurs__media:hover .v2-valeurs__img::after,
body .v2-contact__img:hover::after {
	animation: wobi-reflet-passe var(--wobi-reflet-duree) ease-out;
}

/* ---------- Reperes de positionnement et arrondis ---------- */

/*
 * Chaque hote doit etre positionne pour porter le reflet, et le reflet doit
 * reprendre l'arrondi de la photo. Les valeurs reprennent celles deja
 * posees sur les images par les feuilles existantes.
 */

/* Cartes realisations : les deux pseudo-elements du visuel servent deja
   (pastille fleche et voile), d'ou la couche .wobi-reflet dans le gabarit. */
.wobi-rea__visuel .wobi-reflet {
	border-radius: inherit;
}

/* Blocs zigzag de la page Services : arrondi 26 px. */
.wobi-zz__img {
	position: relative;
}

.wobi-zz__img::after {
	border-radius: 26px;
}

/* Cartes supports : cadre carre, arrondi porte par la carte. */
.wobi-sup .wobi-sup__media::after {
	border-radius: inherit;
}

/* Galerie des fiches realisation : ::after porte deja le degrade du bas. */
.wobi-medias__photo::before {
	border-radius: 16px;
}

/* Fiches service. */
.wobi-sf-carte__visuel {
	position: relative;
}

.wobi-sf-carte__visuel::after {
	border-radius: inherit;
}

/* ::before de ce bloc porte deja le carre orange decoratif. */
.wobi-sf-corps__visuel {
	position: relative;
}

.wobi-sf-corps__visuel::after {
	border-radius: 26px;
}

/* Visuel d'ouverture d'une fiche realisation : l'image est remontee de
   56 px par une marge negative, le reflet suit le meme decalage. */
.wobi-fiche-visuel {
	position: relative;
}

.wobi-fiche-visuel::after {
	top: -56px;
	height: 520px;
	inset-block-end: auto;
	border-radius: 26px;
}

@media (max-width: 767px) {
	.wobi-fiche-visuel::after {
		top: -28px;
		border-radius: 18px;
	}
}

/* Images de l'accueil, posees par des widgets Elementor : le widget
   contient directement la balise img, il sert donc d'hote. */
body .v2-svc__img,
body .v2-collage__main,
body .v2-collage__top,
body .v2-collage__bottom,
body .v2-valeurs__img,
body .v2-contact__img {
	position: relative;
}

body .v2-svc__img::after,
body .v2-collage__main::after,
body .v2-valeurs__img::after,
body .v2-contact__img::after {
	border-radius: var(--v2-radius);
}

/* Ces deux photos ont un bord blanc de 5 px : le reflet s'arrete au bord
   interieur pour ne pas le traverser. */
body .v2-collage__top::after,
body .v2-collage__bottom::after {
	inset: 5px;
	border-radius: calc(var(--v2-radius) - 2px);
}

/* ---------- Accessibilite ---------- */

/*
 * Le reflet est un ornement : il disparait pour qui demande moins
 * d'animations, et sur les appareils sans vrai survol, ou il se declencherait
 * au toucher juste avant l'ouverture du lien.
 */
@media (prefers-reduced-motion: reduce) {
	.wobi-reflet,
	.wobi-zz__img::after,
	.wobi-sup .wobi-sup__media::after,
	.wobi-medias__photo::before,
	.wobi-sf-carte__visuel::after,
	.wobi-sf-corps__visuel::after,
	.wobi-fiche-visuel::after,
	body .v2-svc__img::after,
	body .v2-collage__main::after,
	body .v2-collage__top::after,
	body .v2-collage__bottom::after,
	body .v2-valeurs__img::after,
	body .v2-contact__img::after {
		display: none;
	}
}

@media (hover: none) {
	.wobi-reflet,
	.wobi-zz__img::after,
	.wobi-sup .wobi-sup__media::after,
	.wobi-medias__photo::before,
	.wobi-sf-carte__visuel::after,
	.wobi-sf-corps__visuel::after,
	.wobi-fiche-visuel::after,
	body .v2-svc__img::after,
	body .v2-collage__main::after,
	body .v2-collage__top::after,
	body .v2-collage__bottom::after,
	body .v2-valeurs__img::after,
	body .v2-contact__img::after {
		display: none;
	}
}