/*
 * Styles de la page "Nos réalisations" (projects.php) : carrousel, filtres
 * par dossier, grille de photos, liseuse plein écran. Propre à cette page,
 * chargé uniquement ici (voir header.php). Le bandeau du haut (.page-hero)
 * est commun à toutes les pages qui en ont un : voir styles-personnalises.css.
 *
 * Palette reprise de l'identité du site (teintes Var/Méditerranée : bleu
 * pétrole + ocre), simplement posée sur un fond papier chaud plutôt que du
 * blanc pur, pour une présentation plus soignée des photos.
 */

/* Définies au niveau de :root (et non de .realisations-page) car la liseuse
   plein écran (.realisations-lightbox) est un élément voisin de la page, pas
   un enfant — les variables ne seraient sinon pas visibles pour elle. */
:root {
	--rp-ink: #09444f;
	--rp-accent: #197789;
	--rp-gold: #e8ad35;
	--rp-near-black: #171717;
	--rp-paper: #faf8f4;
	--rp-mist: #e3ddd1;
	--rp-grey: #6b7280;
}

.realisations-page {
	max-width: 1240px;
	margin: 0 auto;
	padding: 70px 24px 90px;
	background: var(--rp-paper);
}

/* ===== Carrousel : fondu enchaîné, chrome minimal ===== */
.realisations-carousel {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 80px;
	height: 520px;
	box-shadow: 0 24px 48px -24px rgba(9, 68, 79, 0.35);
}
.realisations-carousel-track {
	position: relative;
	width: 100%;
	height: 100%;
}
.realisations-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
	pointer-events: none;
}
.realisations-carousel-slide.is-active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}
.realisations-carousel-slide {
	background: var(--rp-near-black);
}
.realisations-carousel-slide img {
	width: 100%;
	height: 100%;
	/* "contain" plutôt que "cover" : la photo reste entière, jamais recadrée,
	   quitte à laisser une bande de fond de part et d'autre si son format ne
	   correspond pas exactement au cadre du carrousel. */
	object-fit: contain;
	display: block;
	cursor: zoom-in;
	transform: scale(1);
	transition: transform 7s ease-out;
}
/* Léger effet "Ken Burns" : la photo continue de s'agrandir très lentement
   tant qu'elle reste affichée, pour une sensation plus cinématographique
   qu'une image figée. Désactivé si le visiteur préfère moins d'animation. */
.realisations-carousel-slide.is-active img {
	transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
	.realisations-carousel-slide.is-active img {
		transform: scale(1);
		transition: none;
	}
}
.realisations-carousel-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 48px 56px 36px;
	background: linear-gradient(0deg, rgba(9, 9, 8, 0.78), transparent);
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.realisations-carousel-tag {
	display: inline-block;
	align-self: flex-start;
	color: var(--rp-gold);
	font-family: 'Karla', sans-serif;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}
.realisations-carousel-caption-title {
	color: #ffffff;
	font-family: 'Rubik', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.realisations-carousel-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 72px;
	border: none;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.65;
	transition: opacity 0.25s ease;
}
.realisations-carousel-nav:hover,
.realisations-carousel-nav:focus {
	background-color: transparent;
	border-color: transparent;
	opacity: 1;
}
.realisations-carousel-nav svg {
	width: 32px;
	height: 32px;
	/* Sans ça, un SVG posé en enfant direct d'un bouton display:flex peut
	   s'effondrer à largeur nulle (bug constaté sur la flèche "précédent"
	   de la liseuse, invisible alors que le bouton existait bien). */
	flex-shrink: 0;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.realisations-carousel-prev {
	left: 0;
}
.realisations-carousel-next {
	right: 0;
}
.realisations-carousel-meta {
	position: absolute;
	left: 56px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}
.realisations-carousel-count {
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Karla', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}
.realisations-carousel-progress {
	width: 120px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
}
.realisations-carousel-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--rp-gold);
}
@keyframes realisations-progress-fill {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
.realisations-carousel-progress-bar.is-animating {
	animation: realisations-progress-fill 5s linear forwards;
}

/* ===== Filtres : onglets discrets, pas de boutons pleins ===== */
.realisations-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 36px;
	margin-bottom: 64px;
	border-bottom: 1px solid var(--rp-mist);
	padding-bottom: 0;
}
.realisations-filter {
	border: none;
	background: none;
	color: var(--rp-grey);
	padding: 0 0 14px;
	font-family: 'Karla', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}
.realisations-filter::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--rp-gold);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
.realisations-filter:hover,
.realisations-filter:focus,
.realisations-filter.active {
	/* Le thème applique un fond plein à tous les button:hover du site ;
	   on l'annule explicitement ici pour garder le style "onglet discret". */
	background-color: transparent;
	color: var(--rp-ink);
}
.realisations-filter.active::after {
	transform: scaleX(1);
}

/* ===== Section dossier ===== */
.realisations-dossier {
	margin-bottom: 84px;
}
.realisations-dossier-titre {
	text-align: center;
	color: var(--rp-ink);
	font-family: 'Rubik', sans-serif;
	font-size: 1.9rem;
	letter-spacing: -0.01em;
	margin-bottom: 0;
}
.realisations-dossier-titre::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--rp-gold);
	margin: 18px auto 0;
}
/* Le titre commence du même côté que le texte du dossier (voir
   sudm_alignement_titre_dossier() côté PHP) ; le soulignement suit le même
   côté. Un texte centré ou justifié n'a pas de "côté" à suivre : le titre
   reste centré (classe "--centre", mêmes règles que ci-dessus). */
.realisations-dossier-titre--gauche {
	text-align: left;
}
.realisations-dossier-titre--gauche::after {
	margin: 18px 0 0;
}
.realisations-dossier-titre--droite {
	text-align: right;
}
.realisations-dossier-titre--droite::after {
	margin: 18px 0 0 auto;
}
/* Le contenu vient de l'éditeur de texte riche du backoffice (Quill) : du
   HTML avec son propre alignement/sa propre couleur par paragraphe. Ici on
   ne fixe que la mise en page du bloc et le style par défaut, repris si
   l'admin n'a rien choisi de particulier pour un paragraphe donné. */
.realisations-dossier-texte {
	max-width: 100%;
	margin: 22px auto 40px;
	text-align: left;
	color: var(--rp-grey);
	font-size: 1rem;
	line-height: 1.7;
}
.realisations-dossier-texte p {
	margin: 0 0 12px;
}
.realisations-dossier-texte p:last-child {
	margin-bottom: 0;
}
.realisations-dossier-texte ul,
.realisations-dossier-texte ol {
	margin: 0 0 12px;
	padding-left: 1.4em;
	text-align: left;
}
/* Quill marque l'alignement avec une classe (pas un style inline) — ces
   classes ne sont définies que dans le CSS de l'éditeur (backoffice), donc
   il faut les reprendre ici pour qu'elles s'appliquent sur le site public.
   Important : Quill ne pose JAMAIS de classe "ql-align-left" (il considère
   "gauche" comme la valeur par défaut, donc "rien à stocker"), d'où le
   text-align: left ci-dessus sur le conteneur — sinon un paragraphe mis à
   gauche dans l'éditeur (qui s'affiche bien à gauche là-bas) se retrouverait
   centré ici faute de classe distinctive. */
.realisations-dossier-texte .ql-align-center {
	text-align: center;
}
.realisations-dossier-texte .ql-align-right {
	text-align: right;
}
.realisations-dossier-texte .ql-align-justify {
	text-align: justify;
}

/* ===== Disposition "côte à côte" : une seule photo du dossier, texte à
   gauche ou à droite (réglée depuis le backoffice) au lieu de la grille
   habituelle. Le texte garde son propre alignement (ql-align-*) ; c'est
   seulement sa position par rapport à la photo qui change ici. ===== */
.realisations-dossier-cote-a-cote {
	display: flex;
	align-items: center;
	gap: 48px;
}
.realisations-dossier-cote-a-cote .realisations-dossier-texte {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.realisations-dossier-cote-a-cote .realisations-card,
.realisations-dossier-cote-a-cote .realisations-dossier-carousel {
	flex: 0 0 420px;
}
.realisations-dossier--droite .realisations-dossier-cote-a-cote {
	flex-direction: row-reverse;
}
/* En dessous d'une certaine largeur, gauche/droite n'a plus de sens : on
   revient à un empilement simple, photo au-dessus du texte. */
@media (max-width: 760px) {
	.realisations-dossier-cote-a-cote {
		flex-direction: column !important;
		gap: 24px;
	}
	.realisations-dossier-cote-a-cote .realisations-card,
	.realisations-dossier-cote-a-cote .realisations-dossier-carousel {
		flex-basis: auto;
		width: 100%;
	}
}

/* ===== Carrousel propre à un dossier (affichage "carrousel" choisi depuis
   le backoffice) : même mécanique que le grand carrousel d'accueil
   (.realisations-carousel), mais plus compact et sans la marge de bas de
   page déjà gérée par .realisations-dossier. Légende réduite en conséquence. ===== */
.realisations-dossier-carousel {
	height: 420px;
	margin-bottom: 0;
}
.realisations-dossier-carousel .realisations-carousel-caption {
	padding: 28px 32px 20px;
}
.realisations-dossier-carousel .realisations-carousel-caption-title {
	font-size: 1.25rem;
}
@media (max-width: 760px) {
	.realisations-dossier-carousel {
		height: 320px;
	}
}

/* ===== Grille de photos : taille fixe, jamais de débordement ===== */
.realisations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 28px;
}
.realisations-card {
	background: #ffffff;
	border: 1px solid var(--rp-mist);
	border-radius: 2px;
	overflow: hidden;
	height: 320px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.realisations-card:hover {
	border-color: transparent;
	box-shadow: 0 20px 40px -20px rgba(9, 68, 79, 0.3);
}
.realisations-card-img {
	position: relative;
	height: 200px;
	flex-shrink: 0;
	overflow: hidden;
}
.realisations-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
	transition: transform 0.5s ease;
}
.realisations-card:hover .realisations-card-img img {
	transform: scale(1.06);
}

/* ===== Vignette vidéo (lien YouTube/Vimeo) =====
 * Même emplacement qu'une photo (carte, carrousel), avec sa miniature
 * (récupérée via oEmbed à l'ajout, voir RealisationsController) ou un fond
 * uni si elle manque, plus une icône "lecture" superposée. Le vrai clic est
 * capté par .realisations-lightbox-trigger, un calque invisible qui recouvre
 * toute la vignette (voir sudm_vignette_realisation()).
 */
.realisations-card-img--video img,
.realisations-carousel-slide .realisations-video-thumb-empty {
	cursor: pointer;
}
.realisations-video-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--rp-near-black);
}
.realisations-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(9, 9, 8, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
	transition: transform 0.3s ease, background 0.3s ease;
}
.realisations-play-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 56%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent #fff;
}
.realisations-card:hover .realisations-play-icon,
.realisations-carousel-slide:hover .realisations-play-icon {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--rp-accent);
}
.realisations-card-img--video .realisations-lightbox-trigger,
.realisations-carousel-slide .realisations-lightbox-trigger[data-type="video"] {
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.realisations-card-body {
	padding: 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.realisations-card-body h3 {
	font-family: 'Rubik', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--rp-ink);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	background-image: linear-gradient(var(--rp-gold), var(--rp-gold));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size 0.3s ease;
}
.realisations-card:hover .realisations-card-body h3 {
	background-size: 100% 1px;
}
.realisations-card-body p {
	font-size: 0.82rem;
	color: var(--rp-grey);
	margin: 0;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===== Liseuse plein écran =====
 * Même principe que celle du backoffice : cliquer une photo (carrousel ou
 * grille) l'ouvre en grand, avec navigation précédent/suivant au clavier ou
 * au clic, sur l'ensemble des photos du dossier affiché.
 */
.realisations-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(9, 9, 8, 0.96);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.realisations-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.realisations-lightbox-figure {
	margin: 0;
	max-width: min(90vw, 1100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.realisations-lightbox-figure img {
	max-width: 100%;
	max-height: 76vh;
	object-fit: contain;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.realisations-lightbox-figure img.is-hidden {
	display: none;
}
.realisations-lightbox-video {
	display: none;
	width: min(90vw, 1100px);
	aspect-ratio: 16 / 9;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.realisations-lightbox-video.is-active {
	display: block;
}
.realisations-lightbox-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.realisations-lightbox-figure figcaption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.realisations-lightbox-tag {
	color: var(--rp-gold);
	font-family: 'Karla', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}
.realisations-lightbox-title {
	color: #ffffff;
	font-family: 'Rubik', sans-serif;
	font-size: 1.1rem;
}
.realisations-lightbox-close {
	position: absolute;
	top: 24px;
	right: 90px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: #ffffff;
	font-size: 1.6rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.realisations-lightbox-close:hover,
.realisations-lightbox-close:focus {
	background-color: var(--rp-ink);
	border-color: transparent;
}
.realisations-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.realisations-lightbox-nav:hover,
.realisations-lightbox-nav:focus {
	background-color: var(--rp-ink);
	border-color: transparent;
}
.realisations-lightbox-nav svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.realisations-lightbox-prev {
	left: 24px;
}
.realisations-lightbox-next {
	right: 24px;
}
/* Alerte façon Bootstrap "alert-danger" : fond rosé, bordure rouge franche à
   gauche, texte rouge foncé — bien plus lisible qu'un texte rouge posé
   directement sur le fond sombre de la liseuse. */
.realisations-lightbox-warning {
	position: absolute;
	top: 28px;
	left: 50%;
	z-index: 4;
	transform: translate(-50%, -10px);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: min(90vw, 640px);
	text-align: left;
	background: #f8d7da;
	border: 1px solid #f1aeb5;
	border-left: 4px solid #dc3545;
	color: #842029;
	font-family: 'Karla', sans-serif;
	font-size: 0.82rem;
	line-height: 1.55;
	padding: 14px 18px;
	border-radius: 6px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.realisations-lightbox-warning.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.realisations-lightbox-warning-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: #dc3545;
}

@media (max-width: 782px) {
	.realisations-page {
		padding: 50px 18px 70px;
	}
	.realisations-carousel {
		height: 360px;
	}
	.realisations-carousel-caption {
		padding: 28px 24px;
	}
	.realisations-carousel-caption-title {
		font-size: 1.4rem;
	}
	.realisations-carousel-nav {
		width: 48px;
	}
	.realisations-carousel-meta {
		left: 24px;
	}
	.realisations-filters {
		gap: 20px;
	}
	.realisations-lightbox-nav {
		width: 44px;
		height: 44px;
	}
	.realisations-lightbox-close {
		right: 76px;
	}
}