/*
Theme Name: RAF
Theme URI: https://renovation-raf.com
Author: Adnan Ammara — Conseil & Web AI
Description: Thème sur mesure pour RAF — Rénovation Aménagement Français. Artisan rénovation en Île-de-France.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raf
*/

/* --------------------------------------------------------------------------
   Bases
   Les couleurs proviennent de theme.json ; on les lit via les variables
   générées par WordPress pour n'avoir qu'une seule source de vérité.
   -------------------------------------------------------------------------- */

:root {
	--raf-sombre: var(--wp--preset--color--sombre, #071E21);
	--raf-accent: var(--wp--preset--color--accent, #416A51);
	--raf-accent-clair: var(--wp--preset--color--accent-clair, #7FA88C);
	--raf-creme: var(--wp--preset--color--creme, #F5F3EE);
	--raf-beige: var(--wp--preset--color--beige, #E8E1D3);
	--raf-blanc: #fff;

	--raf-max: 1240px;
	--raf-max-etroit: 760px;
	--raf-rayon: 4px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--raf-creme);
	color: var(--raf-sombre);
	font-family: var(--wp--preset--font-family--corps, system-ui, sans-serif);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--raf-accent);
}

/* Cible de focus visible : exigence d'accessibilité, pas une option. */
:focus-visible {
	outline: 3px solid var(--raf-accent);
	outline-offset: 2px;
}

.raf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--raf-sombre);
	color: var(--raf-blanc);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}

.raf-skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */

.raf-conteneur {
	width: min(100% - 2.5rem, var(--raf-max));
	margin-inline: auto;
}

.raf-conteneur--etroit {
	max-width: var(--raf-max-etroit);
}

.raf-section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.raf-section--claire { background: var(--raf-creme); }
.raf-section--beige  { background: var(--raf-beige); }

.raf-section--sombre {
	position: relative;
	background: var(--raf-sombre);
	color: var(--raf-creme);
	overflow: hidden;
}

/* Le contenu doit rester lisible au-dessus du fond vidéo (spec du 2026-09-04). */
.raf-section--sombre > .raf-conteneur {
	position: relative;
	z-index: 1;
}

.raf-centre { text-align: center; }

/*
 * Carte isolée pour les blocs d'appel à l'action (accueil et « Qui suis-je »).
 * Le client trouvait le bloc trop noyé dans le fond de la section : une carte
 * blanche avec ombre le détache nettement, cohérent avec le traitement déjà
 * utilisé pour les cartes de services.
 *
 * Ombre teintée de vert plutôt que neutre, et débordement volontaire sur les
 * sections voisines (marges négatives) pour que la carte flotte visuellement
 * entre la section vidéo au-dessus et le pied de page en dessous.
 *
 * Les marges négatives ne coupent pas la carte car ni .raf-section (fond
 * clair de la section du CTA) ni le pied de page n'ont d'overflow masqué —
 * seules .raf-section--sombre (qui contient la vidéo juste au-dessus) l'a,
 * et ce n'est pas elle qui porte le débordement.
 */
.raf-cta {
	position: relative;
	z-index: 1;
	background: var(--raf-blanc);
	border-radius: 12px;
	box-shadow: 0 20px 45px rgba(65, 106, 81, 0.28);
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
	/*
	 * Le padding de la section (.raf-section) va jusqu'à 6rem : une marge
	 * négative plus faible resterait « absorbée » dedans, sans jamais
	 * atteindre la section voisine. Il faut dépasser ce padding pour que le
	 * chevauchement soit visible.
	 *
	 * En haut, la section vidéo est haute : une marge franche (-9rem) reste
	 * sans risque. En bas, le pied de page n'a que 3rem (48px) de padding
	 * avant ses liens (Contact, Informations) : une marge plus grande les
	 * recouvrirait et les rendrait cliquables sans être lisibles. Valeur
	 * volontairement plus prudente pour ce côté.
	 */
	margin-top: -9rem;
	margin-bottom: -2.25rem;
}

@media (max-width: 640px) {
	.raf-cta {
		/* Un débordement trop marqué grignoterait le peu d'espace disponible
		   en petit écran, au point de gêner la lecture des sections voisines. */
		margin-top: -4rem;
		margin-bottom: -1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Titres
   -------------------------------------------------------------------------- */

/*
 * En-tête de section, repris de la maquette validée : le libellé discret reste
 * à gauche, le titre occupe la colonne principale décalée vers la droite.
 * C'est ce décalage qui donne son caractère éditorial à la page — une grille
 * uniformément alignée à gauche donne un rendu de gabarit générique.
 */
.raf-entete-section {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	align-items: start;
	margin-bottom: 2.5rem;
}

.raf-entete-section__col {
	grid-column: 2;
}

.raf-suptitre {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--raf-accent);
	margin: 0 0 0.75rem;
	grid-column: 1;
	align-self: start;
}

.raf-suptitre::before {
	content: "";
	display: inline-block;
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	vertical-align: middle;
	margin-right: 0.6rem;
}

/* Sur petit écran, la colonne décalée n'a plus de sens : tout repasse à gauche. */
@media (max-width: 900px) {
	.raf-entete-section {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.raf-entete-section__col,
	.raf-entete-section .raf-suptitre {
		grid-column: 1;
	}
}

/*
 * Sur fond sombre, le vert d'accent tombe à un contraste de 2,80 — sous le
 * seuil WCAG AA de 4,5. On passe à la variante éclaircie (spec §3.2).
 */
.raf-suptitre--clair,
.raf-section--sombre .raf-suptitre {
	color: var(--raf-accent-clair);
}

.raf-titre {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 2.375rem);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 1rem;
}

.raf-titre--hero {
	font-size: clamp(2.25rem, 6vw, 3.625rem);
	color: var(--raf-blanc);
}

.raf-titre--clair { color: var(--raf-blanc); }

.raf-chapo {
	font-size: 1.0625rem;
	max-width: 60ch;
	margin: 0 0 2rem;
}

/*
 * Dans un bloc centré (.raf-centre), le chapô doit l'être aussi comme bloc,
 * pas seulement dans son propre texte : sans marge automatique, sa largeur
 * limitée (60ch) le laissait collé à gauche du conteneur, décalé par rapport
 * au titre et au bouton qui occupent toute la largeur. Relevé par le client
 * sur le CTA final de l'accueil.
 */
.raf-centre .raf-chapo {
	margin-left: auto;
	margin-right: auto;
}

.raf-note {
	border-left: 3px solid var(--raf-accent);
	background: rgba(65, 106, 81, 0.08);
	padding: 0.85rem 1.1rem;
	margin-top: 2rem;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.raf-bouton {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--raf-rayon);
	border: 2px solid transparent;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Blanc sur vert : contraste 6,17 — conforme AA. */
.raf-bouton--accent {
	background: var(--raf-accent);
	color: var(--raf-blanc);
}

.raf-bouton--accent:hover,
.raf-bouton--accent:focus {
	background: #35583f;
	color: var(--raf-blanc);
}

.raf-bouton--sombre {
	background: var(--raf-sombre);
	color: var(--raf-blanc);
}

.raf-bouton--fantome {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--raf-blanc);
}

.raf-bouton--fantome:hover,
.raf-bouton--fantome:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--raf-blanc);
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

/*
 * Bande claire : le logo est vert foncé, il disparaîtrait sur le fond sombre
 * du site. Le fond crème lui rend son contraste et détache la navigation du
 * hero.
 */
.raf-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--raf-creme);
	color: var(--raf-sombre);
	padding-block: 1rem;
	border-bottom: 1px solid rgba(7, 30, 33, 0.1);
}

.raf-entete__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/*
 * Le logo fourni est une image large avec beaucoup de fond autour du motif :
 * sans contrainte de hauteur, il occuperait toute la largeur de l'en-tête.
 */
.raf-entete__marque .custom-logo-link {
	display: block;
	line-height: 0;
}

.raf-entete__marque .custom-logo {
	height: clamp(44px, 5vw, 58px);
	width: auto;
	max-width: 240px;
	object-fit: contain;
}

.raf-entete__nom {
	color: var(--raf-sombre);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.raf-entete__nom strong {
	font-size: 1.5rem;
	letter-spacing: 0.08em;
}

.raf-entete__nom span {
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--raf-accent);
}

.raf-nav {
	margin-left: auto;
}

.raf-nav__liste {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.raf-nav__liste a {
	color: var(--raf-sombre);
	text-decoration: none;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.raf-nav__liste a:hover,
.raf-nav__liste a:focus {
	color: var(--raf-accent);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.raf-hero {
	position: relative;
	background: var(--raf-sombre);
	color: var(--raf-creme);
	padding-block: clamp(3.5rem, 9vw, 7rem);
	/* Empêche le fond vidéo (position: absolute) de déborder de la section. */
	overflow: hidden;
	/*
	 * Fine ligne de couleur en séparation avec la section suivante, plutôt
	 * qu'une coupure nette sombre/claire — demande du client. La variante
	 * éclaircie (déjà utilisée pour le texte sur fond sombre) est nécessaire
	 * ici : le vert accent standard se distinguait à peine du fond sombre
	 * du hero, l'effet passait inaperçu.
	 */
	border-bottom: 3px solid var(--raf-accent-clair);
}

/*
 * Deux colonnes comme dans la maquette : le texte n'occupe que la moitié
 * gauche, ce qui laisse respirer le titre et réserve la place du visuel.
 * En pleine largeur, les lignes seraient trop longues à lire.
 */
.raf-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.raf-hero__chapo {
	font-size: 1.0625rem;
	max-width: 52ch;
	margin: 0 0 2rem;
	color: rgba(245, 243, 238, 0.85);
}

/* Visuel du hero : photo de chantier une fois que Franck en aura fourni une. */
.raf-hero__visuel {
	aspect-ratio: 4 / 3;
	border-radius: var(--raf-rayon);
	overflow: hidden;
	background: rgba(245, 243, 238, 0.06);
	border: 1px solid rgba(245, 243, 238, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.raf-hero__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.raf-hero__attente {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 243, 238, 0.4);
	padding: 1rem;
	text-align: center;
}

/*
 * Cadre transparent pour laisser voir le fond vidéo du hero derrière le logo
 * (demande du client) — pas de bloc de couleur derrière.
 */
.raf-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 2.5rem;
}

/*
 * Le logo fourni est vert foncé, pensé pour un fond clair (cf. en-tête) : sur
 * un fond vidéo sombre il se distinguerait à peine. Le filtre le passe en
 * blanc pur pour qu'il reste lisible quelle que soit la vidéo affichée.
 */
.raf-hero__logo .custom-logo {
	width: 100%;
	max-width: 320px;
	height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
	.raf-hero__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Sans photo ni logo, la zone d'attente n'apporte rien sur mobile. */
	.raf-hero__visuel:not(:has(img)):not(:has(.raf-hero__logo)) {
		display: none;
	}
}

.raf-hero__actions {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Chiffres clés
   -------------------------------------------------------------------------- */

.raf-chiffres {
	background: var(--raf-beige);
	padding-block: 2rem;
}

.raf-chiffres__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.raf-chiffre__valeur {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	margin: 0;
	color: var(--raf-accent);
}

.raf-chiffre__libelle {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0.25rem 0 0;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Services et étapes
   -------------------------------------------------------------------------- */

/*
 * Services : cartes avec fond, bordure et icône, palette du site.
 *
 * Reprend une proposition du client (icônes SVG, numéro en badge, pastilles,
 * ombre au survol) — remplace la version en colonnes filetées d'une itération
 * précédente, sur décision explicite du 2026-09-04.
 */
.raf-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.raf-service {
	background: var(--raf-blanc);
	border: 1px solid rgba(7, 30, 33, 0.1);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raf-service:hover,
.raf-service:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(7, 30, 33, 0.08);
	border-color: var(--raf-accent);
}

/* Photo de couverture (spec client) : chaque domaine illustré plutôt qu'une simple icône seule. */
.raf-service__photo {
	position: relative;
	aspect-ratio: 4 / 3;
}

.raf-service__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.raf-service__corps {
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Carte sans photo (ex. page Qui suis-je) : un peu plus d'air en haut. */
.raf-service:not(:has(.raf-service__photo)) .raf-service__corps {
	padding-top: 2rem;
}

.raf-service__titre {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.75rem;
}

.raf-service__texte {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: rgba(7, 30, 33, 0.7);
	line-height: 1.55;
	flex-grow: 1;
}

/* Utilitaire : met un mot en évidence dans un texte courant, couleur de marque. */
.raf-texte-accent {
	color: var(--raf-accent);
}

.raf-service__details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(7, 30, 33, 0.1);
}

.raf-service__details li {
	font-size: 0.75rem;
	font-weight: 500;
	background: var(--raf-creme);
	color: var(--raf-sombre);
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}

@media (max-width: 640px) {
	.raf-services {
		grid-template-columns: 1fr;
	}
}

.raf-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	counter-reset: none;
}

.raf-etape {
	border-left: 1px solid rgba(7, 30, 33, 0.15);
	padding-left: 1.25rem;
}

.raf-etape__numero {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	color: rgba(7, 30, 33, 0.25);
}

/*
 * Sur fond sombre (section « Cinq étapes » avec vidéo, spec du 2026-09-04),
 * le filet et le numéro sombres posés pour un fond clair deviendraient
 * invisibles : on les repasse en clair. Le titre et le texte suivent déjà la
 * couleur de la section par héritage, pas de règle supplémentaire nécessaire.
 */
.raf-section--sombre .raf-etape {
	border-left-color: rgba(245, 243, 238, 0.2);
}

.raf-section--sombre .raf-etape__numero {
	color: rgba(245, 243, 238, 0.3);
}

.raf-etape__titre {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0.25rem 0 0.5rem;
}

.raf-etape__texte {
	font-size: 0.9375rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Réalisations
   -------------------------------------------------------------------------- */

.raf-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.75rem;
	margin-top: 2.5rem;
}

/*
 * Mosaïque décalée du portfolio, reprise de la maquette : les cartes ne sont
 * pas alignées sur une même ligne de base, ce qui casse l'effet de catalogue.
 * Le décalage s'applique à une carte sur deux et disparaît sous 900 px, où il
 * ne produirait qu'un espacement incohérent.
 */
@media (min-width: 900px) {
	.raf-grille--mosaique {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
		row-gap: 2.5rem;
	}

	.raf-grille--mosaique > *:nth-child(even) {
		transform: translateY(3.5rem);
	}

	/* Compense le décalage de la dernière carte, sinon la section se termine
	   sur un vide. */
	.raf-grille--mosaique {
		padding-bottom: 3.5rem;
	}
}

/*
 * Bandeau défilant du portfolio sur l'accueil.
 *
 * Défilement continu en CSS pur : pas de bibliothèque de carrousel à charger
 * pour un simple mouvement de translation. Le contenu est dupliqué dans le
 * HTML (front-page.php) pour que la boucle soit continue — sans ce doublon,
 * l'animation « saute » visiblement en revenant au début.
 */
.raf-defilement {
	overflow: hidden;
	margin-top: 2.5rem;
	/* Estompe les bords du bandeau plutôt que de le couper net. */
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 4%,
		#000 96%,
		transparent
	);
}

.raf-defilement__piste {
	display: flex;
	width: max-content;
	gap: 1.75rem;
	animation: raf-defiler 36s linear infinite;
}

/* Le survol interrompt le mouvement : un visiteur qui veut regarder une
   photo ne doit pas la voir filer sous son curseur. */
.raf-defilement:hover .raf-defilement__piste,
.raf-defilement:focus-within .raf-defilement__piste {
	animation-play-state: paused;
}

.raf-defilement__item {
	flex: 0 0 340px;
}

@media (min-width: 640px) {
	.raf-defilement__item {
		flex-basis: 400px;
	}
}

@keyframes raf-defiler {
	from {
		transform: translateX(0);
	}
	to {
		/* La piste contient le contenu deux fois (spec front-page.php) : glisser
		   d'exactement une moitié ramène au point de départ visuel sans coupure. */
		transform: translateX(-50%);
	}
}

/* Cohérent avec la règle générale déjà posée pour le site (spec §3.6) : le
   défilement automatique est un mouvement, il doit s'arrêter. */
@media (prefers-reduced-motion: reduce) {
	.raf-defilement__piste {
		animation: none;
	}

	.raf-defilement {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
	}

	/* Sans animation, le second passage (dupliqué pour boucler) n'a plus lieu
	   d'être visible : il ferait défiler deux fois le même contenu. */
	.raf-defilement__item[aria-hidden="true"] {
		display: none;
	}
}

.raf-carte {
	background: var(--raf-blanc);
	border: 1px solid rgba(7, 30, 33, 0.08);
	border-radius: var(--raf-rayon);
	overflow: hidden;
}

.raf-carte__infos {
	padding: 1.1rem 1.25rem;
}

.raf-carte__categorie {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--raf-accent);
	margin: 0 0 0.25rem;
}

.raf-carte__titre {
	font-size: 1.0625rem;
	margin: 0;
}

.raf-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.raf-carte__titre a:hover,
.raf-carte__titre a:focus {
	text-decoration: underline;
}

.raf-carte__ville {
	font-size: 0.8125rem;
	margin: 0.35rem 0 0;
	opacity: 0.7;
}

.raf-filtres__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.raf-filtre {
	display: inline-block;
	padding: 0.4rem 1rem;
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--raf-sombre);
	border: 1px solid rgba(7, 30, 33, 0.2);
	border-radius: 999px;
}

.raf-filtre--actif,
.raf-filtre:hover,
.raf-filtre:focus {
	background: var(--raf-accent);
	border-color: var(--raf-accent);
	color: var(--raf-blanc);
}

.raf-vide {
	padding: 2.5rem;
	background: var(--raf-blanc);
	border: 1px dashed rgba(7, 30, 33, 0.2);
	border-radius: var(--raf-rayon);
	text-align: center;
	margin-bottom: 1.5rem;
}

.raf-contenu {
	margin-block: 2rem;
}

.raf-retour {
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Citation et appels à l'action
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   À propos du fondateur
   Deux colonnes sur fond sombre, comme dans la maquette : la photo donne un
   visage à l'entreprise, ce qui pèse davantage qu'un argumentaire pour un
   artisan qui intervient chez les gens.
   -------------------------------------------------------------------------- */

.raf-apropos__inner {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* Sans photo, le texte ne doit pas s'étirer sur toute la largeur. */
.raf-apropos__inner--sans-photo {
	grid-template-columns: 1fr;
	max-width: var(--raf-max-etroit);
}

.raf-apropos__photo {
	border-radius: var(--raf-rayon);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.raf-apropos__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.raf-apropos__texte p {
	color: rgba(245, 243, 238, 0.85);
	max-width: 58ch;
}

.raf-apropos__signature {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(245, 243, 238, 0.15);
}

.raf-apropos__signature strong {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: 1.0625rem;
	color: var(--raf-blanc);
}

.raf-apropos__signature span {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--raf-accent-clair);
}

.raf-apropos__lien {
	display: inline-block;
	margin-top: 1.5rem;
	color: var(--raf-accent-clair);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

@media (max-width: 900px) {
	.raf-apropos__inner {
		grid-template-columns: 1fr;
	}

	.raf-apropos__photo {
		max-width: 320px;
		aspect-ratio: 1;
	}
}

.raf-citation blockquote {
	margin: 0;
	border-left: 3px solid var(--raf-accent-clair);
	padding-left: 1.5rem;
}

.raf-citation p {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	line-height: 1.4;
	margin: 0 0 1rem;
}

.raf-citation cite {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--raf-accent-clair);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.raf-pied {
	background: var(--raf-sombre);
	color: var(--raf-creme);
	padding-block: 3rem 1.5rem;
}

.raf-pied__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
}

.raf-pied a {
	color: var(--raf-creme);
	text-decoration: none;
}

.raf-pied a:hover,
.raf-pied a:focus {
	text-decoration: underline;
}

.raf-pied__nom {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	margin: 0;
}

.raf-pied__signature {
	font-size: 0.875rem;
	color: var(--raf-accent-clair);
	margin: 0.25rem 0 0;
}

.raf-pied__zone {
	font-size: 0.875rem;
	opacity: 0.75;
	margin: 0.75rem 0 0;
}

.raf-pied__titre {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--raf-accent-clair);
	margin: 0 0 0.75rem;
}

.raf-pied__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.raf-pied__liens li {
	margin-bottom: 0.4rem;
}

.raf-pied__bas {
	border-top: 1px solid rgba(245, 243, 238, 0.15);
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Formulaire de contact
   Le style par défaut de l'extension n'a rien à voir avec le reste du site :
   on l'aligne sur la charte, sans toucher au plugin lui-même.
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form {
	font-family: inherit;
	max-width: var(--raf-max-etroit);
	margin-top: 2rem;
}

.forminator-ui .forminator-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--raf-sombre);
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select.forminator-select2,
.forminator-ui .forminator-select .selectize-input {
	border-radius: var(--raf-rayon);
	border: 1px solid rgba(7, 30, 33, 0.22);
	font-family: inherit;
	font-size: 1rem;
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
	border-color: var(--raf-accent);
	box-shadow: 0 0 0 3px rgba(65, 106, 81, 0.18);
}

/* Zone de dépôt des pièces jointes */
.forminator-ui .forminator-multi-upload,
.forminator-ui .forminator-file-upload {
	border: 2px dashed rgba(65, 106, 81, 0.45);
	border-radius: var(--raf-rayon);
	background: rgba(65, 106, 81, 0.04);
}

.forminator-ui .forminator-multi-upload:hover,
.forminator-ui .forminator-multi-upload.forminator-dragover {
	border-color: var(--raf-accent);
	background: rgba(65, 106, 81, 0.08);
}

/* Bouton d'envoi : même traitement que les autres CTA du site. */
.forminator-ui.forminator-custom-form button.forminator-button-submit {
	background: var(--raf-accent);
	color: #fff;
	border: 2px solid transparent;
	border-radius: var(--raf-rayon);
	padding: 0.8rem 1.6rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:hover,
.forminator-ui.forminator-custom-form button.forminator-button-submit:focus {
	background: #35583f;
	color: #fff;
}

/* Astérisque des champs obligatoires : lisible sans être agressif. */
.forminator-ui .forminator-required {
	color: #b3261e;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.wp-block-query-pagination,
.navigation.pagination {
	margin-top: 2.5rem;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	text-decoration: none;
	border: 1px solid rgba(7, 30, 33, 0.2);
	border-radius: var(--raf-rayon);
	margin-right: 0.35rem;
	color: var(--raf-sombre);
}

.navigation.pagination .page-numbers.current {
	background: var(--raf-accent);
	border-color: var(--raf-accent);
	color: var(--raf-blanc);
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.raf-entete__inner {
		justify-content: space-between;
	}

	.raf-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	.raf-nav__liste {
		gap: 1rem;
		flex-wrap: wrap;
	}

	.raf-entete__cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@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;
	}
}

/* --------------------------------------------------------------------------
   Fond vidéo des sections sombres
   -------------------------------------------------------------------------- */

.raf-fond-video {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.raf-fond-video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La vidéo est décorative (aria-hidden sur le conteneur) : aucune légende
	   ni son n'existe à annoncer. */
}

/*
 * Voile sombre semi-transparent : le texte crème doit rester lisible quelle
 * que soit la luminosité de l'image vidéo en dessous, à tout instant de la
 * boucle — pas seulement sur l'image d'affiche.
 */
.raf-fond-video__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(7, 30, 33, 0.82),
		rgba(7, 30, 33, 0.88)
	);
}

/*
 * La vidéo ne joue pas : un visiteur qui demande moins de mouvement ne doit
 * pas avoir droit à un chantier qui s'agite en boucle derrière le texte. La
 * réduction CSS générale ci-dessus n'agit pas sur la lecture vidéo — la
 * balise est retirée du DOM par JavaScript (voir functions.php), et cette
 * règle est le filet de sécurité si le script n'a pas encore tourné.
 */
@media (prefers-reduced-motion: reduce) {
	.raf-fond-video__media {
		display: none;
	}

	/* Sans vidéo, la section retombe sur son fond uni : le voile seul, sur
	   transparent, laisserait un aplat trop clair pour le texte crème. */
	.raf-fond-video {
		background: var(--raf-sombre);
	}
}

/*
 * Connexion lente ou économie de données demandée par le visiteur : la vidéo
 * ne vaut pas le coût de téléchargement, l'image d'affiche suffit très bien
 * en fond fixe.
 */
@media (prefers-reduced-data: reduce) {
	.raf-fond-video__media {
		display: none;
	}

	.raf-fond-video {
		background: var(--raf-sombre);
	}
}

/* --------------------------------------------------------------------------
   FAQ
   <details>/<summary> natif : accordéon accessible au clavier sans JS.
   -------------------------------------------------------------------------- */

.raf-faq {
	margin-block: 3rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.raf-faq__item {
	background: var(--raf-blanc);
	border: 1px solid rgba(7, 30, 33, 0.1);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}

.raf-faq__item[open] {
	border-color: var(--raf-accent);
}

.raf-faq__question {
	font-family: var(--wp--preset--font-family--titre, Georgia, serif);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Remplace le triangle par défaut du navigateur par un chevron animé. */
.raf-faq__question::-webkit-details-marker {
	display: none;
}

.raf-faq__question::after {
	content: '+';
	font-size: 1.5rem;
	line-height: 1;
	color: var(--raf-accent);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.raf-faq__item[open] .raf-faq__question::after {
	content: '−';
}

.raf-faq__reponse {
	margin: 1rem 0 0;
	color: rgba(7, 30, 33, 0.7);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Zone d'intervention (page Qui suis-je)
   -------------------------------------------------------------------------- */

.raf-villes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.raf-villes__item {
	padding: 0.5rem 1.1rem;
	background: var(--raf-blanc);
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 500;
}

.raf-villes__note {
	color: rgba(7, 30, 33, 0.65);
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Galerie de photos complémentaires (fiche réalisation)
   -------------------------------------------------------------------------- */

.raf-galerie {
	margin-top: 3rem;
}

.raf-galerie__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.raf-galerie__vignette {
	display: block;
	padding: 0;
	border: 0;
	border-radius: var(--raf-rayon);
	overflow: hidden;
	cursor: zoom-in;
	background: none;
	aspect-ratio: 4 / 3;
}

.raf-galerie__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.raf-galerie__vignette:hover img,
.raf-galerie__vignette:focus-visible img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Lightbox de la galerie
   -------------------------------------------------------------------------- */

.raf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(7, 30, 33, 0.92);
	padding: 2rem;
}

.raf-lightbox--ouverte {
	display: flex;
}

body.raf-lightbox-ouverte {
	overflow: hidden;
}

.raf-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--raf-rayon);
}

.raf-lightbox__fermer,
.raf-lightbox__nav {
	position: absolute;
	background: none;
	border: 0;
	color: var(--raf-blanc);
	cursor: pointer;
	line-height: 1;
}

.raf-lightbox__fermer {
	top: 1.5rem;
	right: 1.5rem;
	font-size: 2.5rem;
}

.raf-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	padding: 0.5rem 1rem;
}

.raf-lightbox__nav--precedent {
	left: 0.5rem;
}

.raf-lightbox__nav--suivant {
	right: 0.5rem;
}

.raf-lightbox__fermer:hover,
.raf-lightbox__nav:hover {
	color: var(--raf-accent-clair);
}