/*
 * Rayan Studio — feuille d'appoint.
 * Uniquement ce que theme.json ne sait pas faire :
 * focus clavier visible, micro-animations sobres (désactivées si
 * l'utilisateur préfère réduire les animations), en-tête collant.
 */

/* Focus clavier bien visible partout (accessibilité). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--blanc, #ffffff);
	outline-offset: 2px;
	border-radius: 2px;
}

/* L'en-tête reste au-dessus du contenu quand il est collant. */
.rayan-header {
	z-index: 100;
}

/* Cartes de projet : l'image remplit sa vignette. */
.rayan-carte-projet .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sous-titre du héros : largeur de lecture confortable. */
.rayan-hero-sous-titre {
	max-width: 40rem;
}

/* Filtres de projets : listes de termes affichées en pastilles. */
.wp-block-categories.rayan-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wp-block-categories.rayan-filtres li {
	margin: 0;
}

.wp-block-categories.rayan-filtres a {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--wp--preset--color--acier, #1c2830);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
}

.wp-block-categories.rayan-filtres a:hover {
	border-color: var(--wp--preset--color--blanc, #ffffff);
	color: var(--wp--preset--color--blanc, #ffffff);
}

/* Filtre actif : pastille inversée pour situer le visiteur. */
.wp-block-categories.rayan-filtres li.current-cat > a {
	background: var(--wp--preset--color--blanc, #ffffff);
	border-color: var(--wp--preset--color--blanc, #ffffff);
	color: var(--wp--preset--color--encre, #10181e);
}

/* Logos clients : jamais déformés ni rognés. */
.rayan-logos img {
	object-fit: contain;
}

/* Rangée de logos : hauteur uniforme, largeur naturelle, jamais étirés. */
.rayan-logos-row figure {
	margin: 0;
}

.rayan-logos-row img {
	height: 76px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 600px) {
	.rayan-logos-row img {
		height: 48px;
	}
}

/* Logo clair (ex. Le Cube, blanc) : pastille sombre pour rester lisible sur fond clair. */
.rayan-logo-sombre {
	background: var(--wp--preset--color--acier, #1c2830);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}

/* Bande démo en fond du héros : l'iframe muette couvre tout le bloc,
   le voile sombre du bloc Couverture reste au-dessus pour la lisibilité. */
.rayan-hero-video__fond {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.rayan-hero-video__fond iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100vw, 177.78vh);
	height: max(100vh, 56.25vw);
	transform: translate(-50%, -50%);
	border: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.rayan-hero-video__fond.est-pret iframe {
	opacity: 1;
}

.rayan-hero-video .wp-block-cover__background,
.rayan-hero-video .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Les sections pleine largeur s'enchaînent bord à bord : plus d'interstice
   de fond sombre entre deux bandes claires qui se suivent. */
.entry-content > .alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Deux sections claires consécutives fusionnent visuellement : l'écart
   résiduel du moteur de rendu est comblé (même couleur, aucun risque). */
.entry-content > .is-style-section-claire + .is-style-section-claire,
.entry-content > .is-style-section-acier + .is-style-section-acier {
	margin-top: -1.75rem !important;
}

/* Apparition douce des sections au défilement (classe ajoutée en JavaScript,
   seulement si l'utilisateur accepte les animations). */
@media (prefers-reduced-motion: no-preference) {
	.rayan-reveal {
		opacity: 0;
		transition: opacity 0.7s ease;
	}

	.rayan-reveal.est-visible {
		opacity: 1;
	}
}

/* Lien isolé présenté comme une pastille (ex. « Tout afficher » des filtres). */
.rayan-pilule a {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--wp--preset--color--acier, #1c2830);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

.rayan-pilule a:hover {
	border-color: var(--wp--preset--color--blanc, #ffffff);
	color: var(--wp--preset--color--blanc, #ffffff);
}

/* Micro-animations — seulement si l'utilisateur n'a pas demandé de les réduire. */
@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-element-button {
		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
	}

	.rayan-carte-projet {
		transition: transform 0.25s ease;
	}

	.rayan-carte-projet:hover {
		transform: translateY(-4px);
	}

	.rayan-carte-projet .wp-block-post-featured-image img {
		transition: transform 0.4s ease;
	}

	.rayan-carte-projet:hover .wp-block-post-featured-image img {
		transform: scale(1.03);
	}
}