/**
 * Oguey — single « Réalisation »
 * Styles du template `single-oguey_realisation.php`.
 *
 * Repris du Figma node 166:1521 (et sous-noeuds). Toutes les valeurs
 * s'appuient sur les design tokens du thème (oguey-variables.css).
 *
 * Chargé uniquement sur ce template (enqueue conditionnel) — §4.5 perf.
 * Responsive : desktop → tablette → mobile, sans masquer de contenu (§4.6).
 *
 * RÈGLES FIGMA RESPECTÉES :
 *   - AUCUN border-radius sur les images (le Figma n'en a pas) ;
 *   - boutons pleins : fond #143F84, texte BLANC ;
 *   - bouton « texte seul » : texte #143F84, sans fond ;
 *   - section « Pourquoi » : fond #F7F2E9 (crème) ;
 *   - bloc documentation : volet gauche #082351, volet droit #F7F2E9.
 */

/* ====================================================================
   Briques réutilisables
   ==================================================================== */

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

.oguey-container {
	width: 100%;
	max-width: var(--oguey-container-width);
	margin-inline: auto;
	padding-inline: var(--oguey-container-padding);
}

@media (max-width: 767px) {
	.oguey-container {
		padding-inline: var(--oguey-container-padding-mobile);
	}
}

/* Toutes les images du template : jamais d'arrondi (conforme Figma) */
.oguey-realisation img {
	border-radius: 0;
}

/* Boutons — repris du composant Figma « bt 2/v2 ».
   Scopes sous l'ID + !important : Elementor stylise agressivement les <a>,
   ce qui ecrasait la couleur de texte des boutons (texte bleu au lieu de
   blanc) — corrige ici. */
#oguey-single-realisation .oguey-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--oguey-space-3) !important;
	padding: var(--oguey-space-3) var(--oguey-space-5) !important;
	font-family: var(--oguey-font-body) !important;
	font-size: var(--oguey-fs-button) !important;
	font-weight: 600 !important;
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background-color var(--oguey-transition-normal),
		color var(--oguey-transition-normal),
		border-color var(--oguey-transition-normal) !important;
}

#oguey-single-realisation .oguey-btn__icon {
	flex: 0 0 auto !important;
}

/* Bouton plein : fond bleu, TEXTE BLANC */
#oguey-single-realisation .oguey-btn--primary {
	background-color: var(--oguey-color-brand) !important;
	color: #ffffff !important;
}

#oguey-single-realisation .oguey-btn--primary:hover,
#oguey-single-realisation .oguey-btn--primary:focus-visible {
	background-color: var(--oguey-color-brand-deep) !important;
	color: #ffffff !important;
}

/* Bouton contour : bordure bleue, texte bleu → plein bleu + texte blanc au survol */
#oguey-single-realisation .oguey-btn--ghost {
	background-color: transparent !important;
	color: var(--oguey-color-brand) !important;
	border-color: var(--oguey-color-brand) !important;
}

#oguey-single-realisation .oguey-btn--ghost:hover,
#oguey-single-realisation .oguey-btn--ghost:focus-visible {
	background-color: var(--oguey-color-brand) !important;
	color: #ffffff !important;
}

/* Bouton « texte seul » : pas de fond, texte bleu, pictogramme bleu
   (ex. « Voir nos réalisations », « Devis gratuit », « Découvrir nos solutions ») */
#oguey-single-realisation .oguey-btn--text {
	background-color: transparent !important;
	color: var(--oguey-color-brand) !important;
	border-color: transparent !important;
	padding-inline: var(--oguey-space-2) !important;
}

#oguey-single-realisation .oguey-btn--text:hover,
#oguey-single-realisation .oguey-btn--text:focus-visible {
	color: var(--oguey-color-brand-deep) !important;
}

/* ====================================================================
   1. Hero — trois couches (Figma 605:3860)
   --------------------------------------------------------------------
   Toutes les regles du hero sont scopees sous #oguey-single-realisation
   ET marquees !important : Elementor injecte des styles globaux qui
   gagnaient sur les classes — diagnostic confirme en preprod (DevTools).

   Structure :
     .oguey-hero
       .oguey-hero__banner          <- photo de fond + texte blanc
         .oguey-hero__banner-inner
       .oguey-hero__cards           <- rangee qui CHEVAUCHE le bas de la photo
         .oguey-hero__card-white
         .oguey-hero__card-blue
   ==================================================================== */

#oguey-single-realisation .oguey-hero {
	position: relative !important;
	background-color: #ffffff !important;
}

/* a) Bandeau photo — photo de fond + texte blanc dessus.
   Overlay : noir 30% (#0000004D) par-dessus la photo. */
#oguey-single-realisation .oguey-hero__banner {
	background-color: var(--oguey-color-brand-deep) !important;
	background-size: cover !important;
	background-position: center !important;
	position: relative !important;
	min-height: 537px !important;
	display: flex !important;
	align-items: center !important;
	padding-bottom: 140px !important; /* place du chevauchement des cartes */
}

/* Overlay noir 30% sur la photo (#0000004D) */
#oguey-single-realisation .oguey-hero__banner::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background-color: #0000004d !important;
	pointer-events: none !important;
}

/* Le texte blanc passe au-dessus de l'overlay.
   ALIGNEMENT : le bloc reproduit le .oguey-container (max-width 1320px,
   centre, padding-inline 24px) PUIS ajoute 67px a gauche pour s'aligner
   exactement sur le texte de la carte blanche (qui a 67px de padding
   interne). C'est la correction de l'alignement signale en preprod :
   avant, .oguey-container et padding-left se chevauchaient. */
#oguey-single-realisation .oguey-hero__banner-inner {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--oguey-space-3) !important;
	width: 100% !important;
	max-width: var(--oguey-container-width) !important; /* 1320px */
	margin-inline: auto !important;
	padding-left: calc(var(--oguey-container-padding) + 0px) !important;
	padding-right: var(--oguey-container-padding) !important;
}

/* Sur-titre blanc sur la photo */
#oguey-single-realisation .oguey-hero__photo-eyebrow {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 600 !important;
	font-size: 1rem !important; /* 16px */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
}

/* Grand titre blanc sur la photo — Playfair Display SemiBold ~48px */
#oguey-single-realisation .oguey-hero__photo-title {
	margin: 0 !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 600 !important;
	font-size: clamp(2rem, 2vw + 1.5rem, 3rem) !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
}

/* c) Rangee de cartes — chevauche le bas de la photo via margin-top negatif */
#oguey-single-realisation .oguey-hero__cards {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	margin-top: -140px !important;
	position: relative !important;
	z-index: 2 !important;
	padding-bottom: var(--oguey-space-24) !important;
}

/* Carte blanche — 969px de large dans le Figma, fluide jusqu'a ce max */
#oguey-single-realisation .oguey-hero__card-white {
	background-color: #ffffff !important;
	flex: 1 1 auto !important;
	max-width: 969px !important;
	min-height: 466px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--oguey-space-5) !important;
	padding: 51px 67px !important; /* contenu decale ml67/mt51 dans le Figma */
}

#oguey-single-realisation .oguey-hero__card-eyebrow {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 600 !important;
	font-size: 1rem !important; /* 16px */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: uppercase !important;
	color: #f7735e !important; /* corail */
}

/* Titre de la carte — Playfair Display SC Bold 32px */
#oguey-single-realisation .oguey-hero__card-title {
	margin: 0 !important;
	font-family: var(--oguey-font-heading) !important;
	font-weight: 700 !important;
	font-size: 2rem !important; /* 32px */
	line-height: 1.2 !important;
	color: var(--oguey-color-brand) !important; /* #143F84 */
}

/* Intro de la carte — Raleway Medium 18px, #464646 */
#oguey-single-realisation .oguey-hero__card-intro {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1.125rem !important; /* 18px */
	line-height: 1.756 !important;
	color: var(--oguey-neutral-600) !important;
	max-width: 795px !important;
}

#oguey-single-realisation .oguey-hero__card-cta {
	margin-top: auto !important;
	align-self: flex-start !important;
	text-transform: none !important; /* « Voir nos realisations » : pas de majuscules */
}

/* Carte bleue « D'autres questions ? » — #082351, 351px.
   Contenu (texte + bouton) centre verticalement ET horizontalement.
   La feuille SVG est positionnee en absolu et clippee (overflow hidden). */
#oguey-single-realisation .oguey-hero__card-blue {
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--oguey-color-brand-deep) !important; /* #082351 */
	flex: 0 0 351px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 30px !important;
}

/* Feuille decorative — valeurs exactes demandees par le client */
#oguey-single-realisation .oguey-hero__card-blue-leaf {
	position: absolute !important;
	width: 500px !important;
	height: 322px !important;
	top: -201px !important;
	left: -50px !important;
	pointer-events: none !important;
	opacity: 1 !important;
}

/* Bloc texte + bouton, au-dessus de la feuille */
#oguey-single-realisation .oguey-hero__card-blue-inner {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 71px !important;
	width: 100% !important;
}

#oguey-single-realisation .oguey-hero__card-blue-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 30px !important;
	width: 100% !important;
	text-align: center !important;
}

/* « D'autres questions ? » — Raleway Bold 23px, creme #F7F2E9, PAS de majuscules */
#oguey-single-realisation .oguey-hero__card-blue-title {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 700 !important;
	font-size: 1.4375rem !important; /* 23px */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;
	color: var(--oguey-color-cream) !important; /* #F7F2E9 */
}

/* Sous-texte — Raleway Medium 16px, #F4F4F4 */
#oguey-single-realisation .oguey-hero__card-blue-desc {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1rem !important; /* 16px */
	line-height: 1.475 !important;
	color: var(--oguey-neutral-100) !important;
}

#oguey-single-realisation .oguey-hero__card-blue-cta {
	flex: 0 0 auto !important;
}

/* ---- Hero responsive ---- */
@media (max-width: 1024px) {
	#oguey-single-realisation .oguey-hero__cards {
		flex-direction: column !important;
		margin-top: -100px !important;
	}
	#oguey-single-realisation .oguey-hero__banner {
		padding-bottom: 100px !important;
	}
	#oguey-single-realisation .oguey-hero__card-white {
		max-width: none !important;
		min-height: 0 !important;
		padding: var(--oguey-space-10) var(--oguey-space-8) !important;
	}
	#oguey-single-realisation .oguey-hero__card-blue {
		flex: 1 1 auto !important;
	}
}

@media (max-width: 767px) {
	#oguey-single-realisation .oguey-hero__banner {
		min-height: 360px !important;
		/* plus d'air en haut et en bas de la photo sur mobile */
		padding-top: var(--oguey-space-12) !important;
		padding-bottom: var(--oguey-space-16) !important;
	}
	/* Titre du hero plus petit sur mobile — il débordait trop */
	#oguey-single-realisation .oguey-hero__photo-title {
		font-size: 1.625rem !important; /* ~26px */
		line-height: 1.25 !important;
	}
	#oguey-single-realisation .oguey-hero__banner-inner {
		padding-left: calc(var(--oguey-container-padding-mobile) + 16px) !important;
		padding-right: var(--oguey-container-padding-mobile) !important;
	}
	#oguey-single-realisation .oguey-hero__cards {
		margin-top: -80px !important;
	}
	#oguey-single-realisation .oguey-hero__card-white {
		padding: var(--oguey-space-8) var(--oguey-space-5) !important;
	}
	#oguey-single-realisation .oguey-hero__card-blue {
		padding: var(--oguey-space-10) var(--oguey-space-6) !important;
		gap: var(--oguey-space-10) !important;
	}
}

/* ====================================================================
   2. Sections de contenu (alternance gauche / droite)
   --------------------------------------------------------------------
   Valeurs reprises du Figma node 605:3937. Scopees sous l'ID +
   !important : Elementor ecrase sinon. Pas de carrousel — pile verticale
   (demande client). Images TOUJOURS carrees (demande client).
   ==================================================================== */

#oguey-single-realisation .oguey-section {
	padding-block: var(--oguey-space-20) !important;
}

#oguey-single-realisation .oguey-section__inner {
	display: flex !important;
	gap: 49px !important;            /* Figma 605:3937 */
	align-items: center !important;
}

/* Position de l'image : a gauche (defaut) ou a droite */
#oguey-single-realisation .oguey-section--img-right .oguey-section__inner {
	flex-direction: row-reverse !important;
}

#oguey-single-realisation .oguey-section__media,
#oguey-single-realisation .oguey-section__text {
	flex: 1 1 50% !important;
	min-width: 0 !important;
}

/* Image : TOUJOURS parfaitement carree (aspect-ratio 1/1, recadrage cover) */
#oguey-single-realisation .oguey-section__media {
	display: block !important;
}

#oguey-single-realisation .oguey-section__img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;  /* carre parfait — demande client */
	height: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* Bloc texte — gap 28px dans le Figma */
#oguey-single-realisation .oguey-section__text {
	display: flex !important;
	flex-direction: column !important;
	gap: 28px !important;            /* Figma 605:3937 */
}

/* Sur-titre (optionnel) — Raleway Light 20px, #949494, PAS de majuscules */
#oguey-single-realisation .oguey-section__eyebrow {
	margin: 0 !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 300 !important;     /* Light */
	font-size: 1.25rem !important;   /* 20px */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;
	color: #949494 !important;
}

/* Titre — Playfair Display SC Bold 32px, #143f84 */
#oguey-single-realisation .oguey-section__title {
	font-family: var(--oguey-font-heading) !important;
	font-weight: 700 !important;
	font-size: 2rem !important;      /* 32px */
	line-height: var(--oguey-lh-tight) !important;
	color: #143F84 !important;
	margin: 0 !important;
}

/* Corps — Raleway Medium 18px, #464646, interligne 31.6px */
#oguey-single-realisation .oguey-section__body {
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1.125rem !important;  /* 18px */
	line-height: 1.756 !important;   /* 31.6 / 18 */
	color: #464646 !important;
}

#oguey-single-realisation .oguey-section__body p {
	margin: 0 0 var(--oguey-space-4) !important;
}

#oguey-single-realisation .oguey-section__body p:last-child {
	margin-bottom: 0 !important;
}

#oguey-single-realisation .oguey-section__body ul,
#oguey-single-realisation .oguey-section__body ol {
	margin: var(--oguey-space-4) 0 !important;
	padding-left: 27px !important;   /* Figma : ms-[27px] sur les <li> */
}

#oguey-single-realisation .oguey-section__body li {
	margin-bottom: var(--oguey-space-2) !important;
}

#oguey-single-realisation .oguey-section__body a {
	color: var(--oguey-color-link) !important;
}

/* CTA — fond #143f84, texte blanc, 10/20 de padding, largeur ~291px */
#oguey-single-realisation .oguey-section__cta {
	margin-top: var(--oguey-space-2) !important;
	align-self: flex-start !important;
}

@media (max-width: 1024px) {
	#oguey-single-realisation .oguey-section__inner {
		gap: var(--oguey-space-10) !important;
	}
}

@media (max-width: 767px) {
	#oguey-single-realisation .oguey-section {
		padding-block: var(--oguey-space-12) !important;
	}

	/* Mobile : image toujours au-dessus du texte, quel que soit `side`.
	   On n'enleve rien — on empile (cdc 4.6). */
	#oguey-single-realisation .oguey-section__inner,
	#oguey-single-realisation .oguey-section--img-right .oguey-section__inner {
		flex-direction: column !important;
		gap: var(--oguey-space-6) !important;
		align-items: stretch !important;
	}
}

/* ====================================================================
   3. Pourquoi faire appel à Oguey  — fond crème #F7F2E9
   ==================================================================== */

.oguey-pourquoi {
	background-color: var(--oguey-color-cream);
	padding-block: var(--oguey-space-24);
}

.oguey-pourquoi__head {
	max-width: 1033px; /* Figma */
	margin: 0 auto var(--oguey-space-20);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--oguey-space-8);
	align-items: center;
}

#oguey-single-realisation .oguey-pourquoi__title {
	font-family: var(--oguey-font-heading) !important;
	font-size: 2rem !important;        /* 32px — demande client */
	font-weight: 700 !important;
	line-height: var(--oguey-lh-tight) !important;
	color: #143F84 !important;
	margin: 0 !important;
	max-width: 724px !important;
}

.oguey-pourquoi__intro {
	font-family: var(--oguey-font-body);
	font-weight: 500;
	font-size: var(--oguey-fs-body);
	line-height: var(--oguey-lh-loose);
	color: var(--oguey-neutral-600);
	margin: 0;
}

.oguey-pourquoi__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--oguey-space-12);
}

.oguey-atout {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--oguey-space-6);
}

.oguey-atout__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}

.oguey-atout__icon img {
	display: block;
	width: auto;
	height: 100%;
}

#oguey-single-realisation .oguey-atout__title {
	font-family: var(--oguey-font-body) !important;  /* Raleway */
	font-weight: 700 !important;
	font-size: 1.125rem !important;   /* 18px — Figma */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;  /* pas en majuscules — demande client */
	color: #000000 !important;
	margin: 0 !important;
}

.oguey-atout__text {
	font-family: var(--oguey-font-body);
	font-weight: 500;
	font-size: 0.8125rem; /* 13px — Figma */
	line-height: 1.43;
	color: var(--oguey-neutral-500);
	margin: 0;
}

@media (max-width: 1024px) {
	.oguey-pourquoi__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--oguey-space-12) var(--oguey-space-8);
	}
}

@media (max-width: 767px) {
	.oguey-pourquoi {
		padding-block: var(--oguey-space-16);
	}

	.oguey-pourquoi__grid {
		grid-template-columns: 1fr;
		gap: var(--oguey-space-10);
	}
}

/* ====================================================================
   4. D'autres projets à découvrir
   --------------------------------------------------------------------
   Valeurs reprises du Figma node 499:3608. Scopees sous l'ID +
   !important : Elementor ecrase sinon.
   Ordre de la carte : image -> badge corail « Realisation » -> titre -> extrait.
   ==================================================================== */

#oguey-single-realisation .oguey-realisation__related {
	padding-block: var(--oguey-space-24) !important;
}

#oguey-single-realisation .oguey-realisation__related-head {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: var(--oguey-space-16) !important;
	margin-bottom: 57px !important;   /* Figma : gap 57px section */
}

#oguey-single-realisation .oguey-realisation__related-intro {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;             /* Figma 499:3547 */
}

/* Titre — Playfair Display SC Bold 32px, #143f84 */
#oguey-single-realisation .oguey-realisation__related-intro .oguey-section-title,
#oguey-single-realisation .oguey-realisation__related-intro h2 {
	font-family: var(--oguey-font-heading) !important;
	font-weight: 700 !important;
	font-size: 2rem !important;       /* 32px */
	line-height: var(--oguey-lh-tight) !important;
	color: #143F84 !important;
	margin: 0 !important;
}

/* Intro — Raleway Medium 18px, #464646, interligne 31.6px */
#oguey-single-realisation .oguey-realisation__related-intro p {
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1.125rem !important;   /* 18px */
	line-height: 1.756 !important;    /* 31.6 / 18 */
	color: #464646 !important;
	margin: 0 !important;
}

#oguey-single-realisation .oguey-realisation__related-head .oguey-btn {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}

#oguey-single-realisation .oguey-realisation__related-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 17px !important;             /* Figma 499:3584 */
}

/* Carte realisation — gap 18px entre image et bloc texte (Figma) */
#oguey-single-realisation .oguey-card-realisation__link {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	text-decoration: none !important;
	color: inherit !important;
}

#oguey-single-realisation .oguey-card-realisation__media {
	overflow: hidden !important;
}

#oguey-single-realisation .oguey-card-realisation__img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 428 / 371 !important; /* Figma */
	height: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform var(--oguey-transition-slow) !important;
}

#oguey-single-realisation .oguey-card-realisation__link:hover .oguey-card-realisation__img,
#oguey-single-realisation .oguey-card-realisation__link:focus-visible .oguey-card-realisation__img {
	transform: scale(1.04) !important;
}

/* Badge « Realisation » — contour corail, angles droits.
   Figma : largeur fixe 104px, hauteur hug, bordure 1px, padding 9px.
   Texte « Realisation » : Raleway SemiBold 12px majuscules.
   Reste en MAJUSCULES : c'est un badge, pas un bouton (conforme Figma). */
#oguey-single-realisation .oguey-card-realisation__tag {
	align-self: flex-start !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 104px !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 600 !important;      /* SemiBold */
	font-size: 0.75rem !important;    /* 12px — Figma */
	line-height: 1 !important;
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: uppercase !important;
	color: #f7735e !important;
	border: 1px solid #f7735e !important;
	padding: 9px !important;          /* Figma : p-[9px] */
}

/* Titre de carte — #000000, Raleway SemiBold 16px, PAS de majuscules
   (demande client). */
#oguey-single-realisation .oguey-card-realisation__title {
	font-family: var(--oguey-font-body) !important;
	font-weight: 600 !important;      /* SemiBold */
	font-size: 1rem !important;       /* 16px */
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;
	color: #000000 !important;
	margin: 0 !important;
}

/* Extrait — Raleway Light 14px, #464646, interligne 19.6px */
#oguey-single-realisation .oguey-card-realisation__excerpt {
	font-family: var(--oguey-font-body) !important;
	font-weight: 300 !important;      /* Light */
	font-size: 0.875rem !important;   /* 14px — Figma */
	line-height: 1.4 !important;      /* 19.6 / 14 */
	color: #464646 !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	#oguey-single-realisation .oguey-realisation__related-head {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--oguey-space-6) !important;
	}
	#oguey-single-realisation .oguey-realisation__related-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	#oguey-single-realisation .oguey-realisation__related {
		padding-block: var(--oguey-space-16) !important;
	}
	#oguey-single-realisation .oguey-realisation__related-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ====================================================================
   5. Documentation technique — volet gauche #082351, volet droit #F7F2E9
   --------------------------------------------------------------------
   Scopee sous l'ID + !important : Elementor ecrase sinon.
   Catalogue : dimensions et rotation exactes demandees par le client.
   ==================================================================== */

#oguey-single-realisation .oguey-documentation__split {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: stretch !important;
}

/* Volet gauche — fond bleu profond, porte le catalogue.
   overflow visible + z-index : le catalogue déborde par-dessus le volet
   crème, comme dans la maquette. */
#oguey-single-realisation .oguey-documentation__visual {
	position: relative !important;
	background-color: var(--oguey-color-brand-deep) !important; /* #082351 */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--oguey-space-16) !important;
	min-height: 620px !important;  /* assez haut pour la hauteur du catalogue */
	overflow: visible !important;
	z-index: 2 !important;
}

/* Catalogue — dimensions fixes + position + rotation exactes (demande client).
   W 434.71 / H 588.73 ; top 50% / left 101% ; rotation -11.42 deg.
   Déborde sur le volet crème (z-index au-dessus). */
#oguey-single-realisation .oguey-documentation__catalogue {
	position: absolute !important;
	display: block !important;
	width: 434.71px !important;
	height: 588.73px !important;
	top: 50% !important;
	left: 85% !important;
	transform: translate(-50%, -50%) rotate(-11.42deg) !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	z-index: 3 !important;
}

#oguey-single-realisation .oguey-documentation__content {
	background-color: var(--oguey-color-cream) !important; /* #F7F2E9 */
	display: flex !important;
	flex-direction: column !important;
	gap: var(--oguey-space-6) !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	padding: var(--oguey-space-16) !important;
}

/* Titre — #143F84 (demande client) */
#oguey-single-realisation .oguey-documentation__title {
	font-family: var(--oguey-font-heading) !important;
	font-weight: 700 !important;
	font-size: 2rem !important;       /* 32px */
	line-height: var(--oguey-lh-tight) !important;
	color: #143F84 !important;
	margin: 0 !important;
}

#oguey-single-realisation .oguey-documentation__text {
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1.125rem !important;   /* 18px */
	line-height: 1.756 !important;
	color: #464646 !important;
	margin: 0 !important;
}

#oguey-single-realisation .oguey-documentation__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--oguey-space-8) !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: var(--oguey-space-2) !important;
}

@media (max-width: 1024px) {
	#oguey-single-realisation .oguey-documentation__visual,
	#oguey-single-realisation .oguey-documentation__content {
		padding: var(--oguey-space-12) !important;
	}
}

@media (max-width: 767px) {
	#oguey-single-realisation .oguey-documentation__split {
		grid-template-columns: 1fr !important;
	}
	#oguey-single-realisation .oguey-documentation__visual {
		min-height: 480px !important;
		padding: var(--oguey-space-10) !important;
		overflow: hidden !important; /* le catalogue ne déborde plus sur mobile */
	}
	/* Catalogue centré dans le volet sur mobile (desktop : décalé à droite) */
	#oguey-single-realisation .oguey-documentation__catalogue {
		left: 50% !important;
	}
}

/* ====================================================================
   6. FAQ — liste de questions + carte « D'autres questions ? »
   --------------------------------------------------------------------
   Accordeon repris du Figma node 499:4119 : PAS de fond bleu, juste la
   question + un chevron, et une ligne de separation en bas. Meme rendu
   ouvert ou ferme. Scopee sous l'ID + !important (Elementor ecrase sinon).
   La carte aside « D'autres questions ? » reutilise telle quelle la
   structure .oguey-hero__card-blue du hero (motif feuille compris).
   ==================================================================== */

#oguey-single-realisation .oguey-realisation__faq {
	padding-block: var(--oguey-space-24) !important;
}

#oguey-single-realisation .oguey-realisation__faq-inner {
	display: grid !important;
	grid-template-columns: 1fr 351px !important; /* carte aside = 351px */
	gap: var(--oguey-space-16) !important;
	align-items: start !important;
}

#oguey-single-realisation .oguey-realisation__faq-head {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--oguey-space-4) !important;
	margin-bottom: var(--oguey-space-8) !important;
}

/* Titre FAQ — Raleway SemiBold 32px, #143F84, PAS de majuscules (demande client) */
#oguey-single-realisation .oguey-realisation__faq-head .oguey-section-title,
#oguey-single-realisation .oguey-realisation__faq-head h2 {
	font-family: var(--oguey-font-body) !important;
	font-weight: 600 !important;      /* SemiBold */
	font-size: 2rem !important;       /* 32px */
	line-height: var(--oguey-lh-tight) !important;
	letter-spacing: var(--oguey-ls-wide) !important;
	text-transform: none !important;
	color: #143F84 !important;
	margin: 0 !important;
}

#oguey-single-realisation .oguey-realisation__faq-head p {
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1.125rem !important;   /* 18px */
	line-height: 1.756 !important;
	color: #464646 !important;
	margin: 0 !important;
}

/* --- Accordeon (Figma 499:4119) --- */
#oguey-single-realisation .oguey-faq {
	display: flex !important;
	flex-direction: column !important;
}

/* Chaque item : la ligne de separation est en bas (border-bottom). */
#oguey-single-realisation .oguey-faq__item {
	border-bottom: 1px solid var(--oguey-color-border) !important;
}

#oguey-single-realisation .oguey-faq__question {
	margin: 0 !important;
}

/* Declencheur : pas de fond, juste question a gauche + chevron a droite. */
#oguey-single-realisation .oguey-faq__trigger {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--oguey-space-6) !important;
	padding: 22px 0px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	text-align: left !important;
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;      /* Medium */
	font-size: 1rem !important;       /* 16px — Figma */
	line-height: 1.35 !important;
	color: #464646 !important;
	transition: color var(--oguey-transition-fast) !important;
}

#oguey-single-realisation .oguey-faq__trigger:hover,
#oguey-single-realisation .oguey-faq__trigger:focus-visible {
	color: var(--oguey-color-brand) !important;
}

#oguey-single-realisation .oguey-faq__q-text {
	flex: 1 1 auto !important;
	text-transform: none !important;
}

/* Chevron — chevron-right tourne de 90deg (pointe vers le bas) ferme,
   -90deg (pointe vers le haut) ouvert. */
#oguey-single-realisation .oguey-faq__chevron {
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 24px !important;
	color: #464646 !important;
	transform: rotate(90deg) !important;
	transition: transform var(--oguey-transition-normal) !important;
}

#oguey-single-realisation .oguey-faq__trigger[aria-expanded="true"] .oguey-faq__chevron {
	transform: rotate(-90deg) !important;
}

/* Panneau de reponse */
#oguey-single-realisation .oguey-faq__panel {
	padding: 4px 0px 26px !important;
}

#oguey-single-realisation .oguey-faq__panel[hidden] {
	display: none !important;
}

#oguey-single-realisation .oguey-faq__answer {
	font-family: var(--oguey-font-body) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;       /* 16px */
	line-height: 1.6 !important;
	color: #464646 !important;
}

#oguey-single-realisation .oguey-faq__answer p {
	margin: 0 0 var(--oguey-space-3) !important;
}

#oguey-single-realisation .oguey-faq__answer p:last-child {
	margin-bottom: 0 !important;
}

#oguey-single-realisation .oguey-faq__answer ul,
#oguey-single-realisation .oguey-faq__answer ol {
	margin: var(--oguey-space-3) 0 !important;
	padding-left: var(--oguey-space-6) !important;
}

#oguey-single-realisation .oguey-faq__answer a {
	color: var(--oguey-color-link) !important;
}

#oguey-single-realisation .oguey-realisation__faq-aside {
	position: sticky !important;
	top: var(--oguey-space-8) !important;
}

/* La carte « D'autres questions ? » réutilise .oguey-hero__card-blue ;
   dans la grille FAQ elle doit simplement remplir sa colonne (351px). */
#oguey-single-realisation .oguey-realisation__faq-aside .oguey-hero__card-blue {
	flex: 1 1 auto !important;
	width: 100% !important;
}

@media (max-width: 1024px) {
	#oguey-single-realisation .oguey-realisation__faq-inner {
		grid-template-columns: 1fr !important;
		gap: var(--oguey-space-10) !important;
	}
	#oguey-single-realisation .oguey-realisation__faq-aside {
		position: static !important;
	}
}

@media (max-width: 767px) {
	#oguey-single-realisation .oguey-realisation__faq {
		padding-block: var(--oguey-space-16) !important;
	}
}