/*
Theme Name: Oraïa
Theme URI: https://oraia-peinture.fr/
Description: Thème enfant de Hello Elementor pour Oraïa, peinture végétale.
Author: Crealab
Author URI: https://crealab.shop/
Template: hello-elementor
Version: 1.6.2
Text Domain: oraia
*/

/* Police de la charte, hébergée sur le site (aucun appel à Google). */
@font-face {
	font-family: "Urbanist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/urbanist-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Urbanist";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/urbanist-latin-italic.woff2") format("woff2");
}

/* Tiges de cameline au premier plan, par-dessus le site.
   Décor pur : ne capte aucun clic, masqué aux lecteurs d'écran. */
.oraia-herbe {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	overflow: hidden;
}
.oraia-brin {
	position: absolute;
	bottom: -6vh;
	/* Parallaxe : la tige part un peu plus bas et remonte au fil de la page. */
	translate: 0 calc((1 - var(--defil-p, 1)) * var(--parallaxe, 0) * 1vh);
	left: var(--x);
	width: auto;
	height: var(--h);
	max-width: none;
	/* --x vise l'axe de la tige : on recule de la demi-largeur de l'image (691 × 1400 px). */
	margin-left: calc(var(--h) * -0.247);
	opacity: var(--o);
	filter: blur(var(--flou));
	transform-origin: 50% 100%;
	transform: rotate(var(--angle)) scaleX(var(--sens));
	animation: oraia-balance var(--duree) ease-in-out var(--retard) infinite alternate;
	will-change: transform;
}
@keyframes oraia-balance {
	from { transform: rotate(calc(var(--angle) - var(--amplitude))) scaleX(var(--sens)); }
	to   { transform: rotate(calc(var(--angle) + var(--amplitude))) scaleX(var(--sens)); }
}
@media (max-width: 767px) {
	.oraia-brin { height: calc(var(--h) * 0.6); margin-left: calc(var(--h) * -0.148); }
	.oraia-brin:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.oraia-brin { animation: none; }
}
@media print {
	.oraia-herbe { display: none; }
}

/* Jeu d'ombre et de lumière piloté par la souris (js/lumiere.js).
   Sans souris, la lumière reste en haut à gauche. */
:root {
	--lum-x: -0.3;
	--lum-y: -0.6;
}
/* Halo chaud autour de la lumière, pénombre légère au loin. */
.oraia-lumiere {
	position: fixed;
	inset: 0;
	z-index: 9980;
	pointer-events: none;
	overflow: hidden;
}
.oraia-lumiere::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 260vmax;
	height: 260vmax;
	margin: -130vmax 0 0 -130vmax;
	background: radial-gradient(circle, rgba(255, 246, 200, 0.28) 0, rgba(255, 246, 200, 0) 16%, rgba(29, 42, 34, 0) 22%, rgba(29, 42, 34, 0.07) 50%);
	transform: translate(calc(var(--lum-x) * 50vw), calc(var(--lum-y) * 50vh));
	will-change: transform;
}
/* Ombre portée d'un élément en relief : elle part à l'opposé de la lumière.
   À poser sur tout élément par la classe « oraia-relief ». */
.oraia-relief {
	filter:
		drop-shadow(calc(var(--lum-x) * -10px) calc(var(--lum-y) * -10px + 6px) 5px rgba(29, 42, 34, 0.22))
		drop-shadow(calc(var(--lum-x) * -34px) calc(var(--lum-y) * -34px + 22px) 26px rgba(29, 42, 34, 0.16));
}
@media print {
	.oraia-lumiere { display: none; }
}

/* En-tête collant en haut, pied de page collant en bas : fond crème translucide et flou d'arrière-plan.
   Tant que le grand logo de l'ouverture est à l'écran (js/entete.js), le logo de l'en-tête est caché. */
.elementor-location-header,
.elementor-location-footer {
	position: sticky;
	z-index: 100;
	background-color: rgba(251, 251, 244, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.elementor-location-header { top: var(--wp-admin--admin-bar--height, 0px); }
/* Le pied de page passe devant les tiges de cameline (9990) : son flou les estompe. */
.elementor-location-footer { bottom: 0; z-index: 9995; }
.oraia-logo-entete {
	/* Le bloc se cale sur la largeur du logo : la baseline s'aligne à droite, sous « ORAÏA ». */
	width: fit-content !important;
	flex: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.oraia-grand-logo-visible .oraia-logo-entete {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

/* Icône enveloppe devant un bouton (classe globale Elementor « oraia-icone-enveloppe »). */
.oraia-icone-enveloppe::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6.5L20.500 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6.5L20.500 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Parallaxe des trois couches du grand logo : elles glissent à des vitesses différentes au défilement. */
img[src*="oraia-logo-couche-trace"]    { translate: 0 calc(var(--defil, 0) * 0.05px); }
img[src*="oraia-logo-couche-pleiades"] { translate: 0 calc(var(--defil, 0) * -0.03px); }
img[src*="oraia-logo-couche-texte"]    { translate: 0 calc(var(--defil, 0) * -0.07px); }

/* Entrée et sortie des blocs (js/mouvement.js). Sans script, tout reste visible. */
.oraia-anim .oraia-apparait {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--rang, 0) * 90ms);
}
.oraia-anim .oraia-apparait.oraia-vu {
	opacity: 1;
	transform: none;
}