/*
 * Surcouche AUREA Lab — chargée en DERNIER.
 *
 * Raison d'être : les fichiers de assets/css/ sont des copies à l'octet près du site
 * Next.js et ne doivent jamais être édités. Certains chemins qu'ils contiennent ne sont
 * valides que dans l'arborescence Next (`../../public/…`). On les recorrige ici.
 *
 * Règle : ce fichier ne contient QUE des corrections de chemin et des compensations
 * d'Elementor. Aucune décision de design — le rendu doit rester pixel pour pixel
 * identique aux captures de migration-data/screenshots/.
 */

/* --- Chemins d'images -------------------------------------------------------
 * components.css:546 — seule règle background-image active des CSS copiés
 * (toutes les autres occurrences de ../../public/ sont commentées à la source).
 */
.ouverture-section {
	background-image: url('../img/bg-ouverture.webp');
}

/* --- Neutralisation d'Elementor ---------------------------------------------
 * Elementor et Hello Elementor imposent des largeurs et des marges de conteneur
 * qui décalent les sections pleine largeur du site d'origine. Les CSS copiés
 * supposent des sections qui occupent toute la fenêtre.
 */
.elementor-section-wrap > .elementor-section,
.elementor-widget-container > * {
	margin-block: 0;
}

/* Hello Elementor borne le contenu ; le site d'origine ne borne rien globalement. */
body:not(.wp-admin) .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* --- Neutralisation du reset de Hello Elementor -----------------------------
 * `hello-elementor/reset.css` habille les champs de formulaire, que les CSS copiés
 * supposent nus :
 *   input[type="text"], input[type="email"], … { padding: .5rem 1rem; border: 1px solid #666 }
 *   button, input, optgroup, select, textarea  { line-height: 1.5 }
 * Ces sélecteurs (0,1,1) battent `.form-input` (0,1,0) des CSS copiés : les champs
 * perdaient leur padding et leur bordure claire. Mesuré sur la page Contact avant
 * correction : champ texte 42 px au lieu de 55, zone de message 149 au lieu de 157.
 *
 * Aucune décision de design ici : les valeurs sont recopiées de pages.css:669-680.
 *
 * Le même reset pose `label { line-height: 1 }`, ce qui écrase l'héritage du body
 * sur `.form-label`. Rendre l'interligne à l'héritage a été essayé et **écarté** :
 * mesure à l'appui, la page s'en éloignait davantage de la référence (dérive
 * 4.3 % → 7.2 %). Non corrigé, et volontairement : le rendu actuel est plus proche.
 */
input.form-input,
textarea.form-textarea {
	padding: 0.875rem 1rem;
	border: 1px solid #e5e5e5;
	line-height: inherit;
}

/* --- Correctifs d'audit — 02/09/2026 ---------------------------------------
 * Ces règles corrigent des défauts présents dans les CSS copiés eux-mêmes. Elles
 * s'écartent donc du rendu du site d'origine, sur décision explicite du client :
 * le pixel-perfect n'est plus l'objectif, un site utilisable l'est.
 */

/* 1. `.values-grid` (pages.css:143) est en 4 colonnes à TOUTES les largeurs — sa
 *    media query ne change que le `gap`. À 375 px, la page À propos mesurait 649 px
 *    de large : le site entier glissait latéralement sous le doigt. */
@media (max-width: 767px) {
	.values-grid {
		grid-template-columns: 1fr;
	}
}

/* 2. `.prestations-signature` (components.css:532) est en blanc pur sur `--off-white` :
 *    illisible, et un trou de 80 px inexpliqué au milieu de l'accueil. */
.prestations-signature {
	color: var(--gold-dark);
}

/* 3. Contraste de la navigation. Les liens étaient à ~3,7:1, sous le seuil AA de 4,5:1 —
 *    illisibles en plein soleil sur un téléphone, la situation d'usage la plus courante. */
.nav-link,
.nav-link-mobile {
	color: #2C2C2C;
	opacity: 0.82;
}
.nav-link:hover,
.nav-link-mobile:hover {
	opacity: 1;
}

/* 4. Les flèches de défilement recouvraient le sous-titre et le bouton WhatsApp en
 *    mobile. Elles n'apportent rien sur un écran qu'on fait défiler au pouce. */
@media (max-width: 767px) {
	.aurea-scroll-wrap,
	.aurea-scroll-to {
		display: none !important;
	}
}

/* 5. Les lignes dorées sur fond crème étaient à ~2:1. */
.contact-footer,
.booking-footer {
	color: var(--gold-dark);
}

/* -------------------------------------------------------------------------
 * Correctifs d'audit — réduction du mouvement
 *
 * Le site animait sans condition : une flèche qui rebondit en boucle, des
 * apparitions au défilement, et un diaporama qui tourne toutes les 5 secondes.
 * Pour qui souffre de troubles vestibulaires ou de migraines, ce mouvement
 * permanent rend une page pénible à lire, voire inutilisable.
 *
 * `prefers-reduced-motion` est le réglage système par lequel ces personnes le
 * font savoir. On ne supprime pas les transitions — un changement instantané
 * désoriente aussi — on les ramène à une durée imperceptible, et on arrête ce
 * qui boucle sans fin. La rotation du diaporama est arrêtée côté script.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.scroll-arrow,
	.hero-arrow {
		animation: none !important;
	}
}

/* -------------------------------------------------------------------------
 * La neutralisation d'Elementor a déménagé.
 *
 * Elle vit maintenant dans `assets/css/elementor-reset.css`, chargé **avant** les
 * feuilles du projet. Ici, chargé après `pages.css`, un `display: block` posé sur les
 * conteneurs écrasait `.about-grid` et `.values-grid` : on corrigeait Elementor en
 * cassant le site. La cascade règle le problème mieux qu'une bataille de spécificité.
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Elementor redresse les images, et écrase le recadrage du site.
 *
 * `.elementor img { height: auto }` pèse 0,1,1 — une classe et un élément. Les règles
 * du projet qui donnent leur hauteur à ces images n'en pèsent que 0,1,0 : Elementor
 * gagne, l'image reprend sa hauteur naturelle et déborde de la boîte qui la recadrait.
 * Sur la page Prestations, les 25 vignettes passaient de 437 px à leur format d'origine.
 * La mise en page ne bougeait pas — les boîtes gardaient leur taille — mais le cadrage
 * de chaque photographie changeait.
 *
 * Les quatre classes visées déclarent toutes exactement `height: 100%` avec
 * `object-fit: cover` : le motif « remplis la boîte qu'on t'a donnée, quitte à être
 * rognée ». La valeur est donc **recopiée d'elles**, pas choisie, et la règle est
 * bornée à `.elementor` — elle ne change rien hors des pages basculées.
 *
 * Ce correctif ne peut pas vivre dans `elementor-reset.css` : ce fichier est chargé
 * avant les feuilles du projet, et à 0,1,0 il perdrait justement contre Elementor.
 * ------------------------------------------------------------------------- */

.elementor .prestation-item-img,
.elementor .prestation-image,
.elementor .gallery-image,
.elementor .about-image {
	height: 100%;
}