/**
 * Fiche détail « style La Redoute » (location, service, produit boutique).
 * Utilise la charte TRACEA (voir brand.css). Deux colonnes galerie / infos, puis sections.
 */

.ra-fiche-main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }

.ra-fiche-fil { font-size: 13px; color: var(--ra-muted); margin-bottom: 18px; }
.ra-fiche-fil a { color: inherit; text-decoration: none; }
.ra-fiche-fil a:hover { text-decoration: underline; }
.ra-fiche-fil span[aria-hidden] { margin: 0 6px; }

/* ---- Haut : deux colonnes ---- */
.ra-fiche-haut {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Galerie — modèle « La Redoute » : rail de vignettes vertical à gauche, grande image à droite.
   La galerie custom (fiches location/service/activité) place l'image AVANT les vignettes dans le DOM,
   donc `row-reverse` remonte les vignettes à gauche. Sur la fiche produit WooCommerce, la mise en
   page interne est gérée plus bas (bloc `.woocommerce-product-gallery`). */
.ra-fiche-galerie { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 14px; }
.ra-fiche-galerie-principale {
	flex: 1 1 auto; min-width: 0;
	background: var(--ra-bg-soft);
	border-radius: var(--ra-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
}
.ra-fiche-image, .ra-fiche-galerie-principale img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-fiche-galerie-vide {
	flex: 1 1 auto;
	background: var(--ra-bg-soft); border-radius: var(--ra-radius); aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center; color: #cbd0d6;
}
.ra-fiche-galerie-vide .dashicons { font-size: 64px; width: 64px; height: 64px; }
.ra-fiche-galerie-miniatures {
	flex: 0 0 84px; width: 84px;
	display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin: 0;
	max-height: 560px; overflow-y: auto;
}
.ra-fiche-miniature {
	width: 84px; height: 84px; padding: 0; border: 2px solid transparent; border-radius: var(--ra-radius-sm);
	overflow: hidden; cursor: pointer; background: var(--ra-bg-soft); flex: 0 0 auto;
}
.ra-fiche-miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-fiche-miniature.actif { border-color: var(--ra-brand); }
/* Les vignettes sont des <button> : certains thèmes (Hello Elementor / MonCanyon) leur imposent
   padding, bordure et line-height avec une forte spécificité, ce qui rétrécit l'image au centre au
   lieu de remplir la tuile. Plutôt que de gagner la bataille du padding, on positionne l'image en
   ABSOLU (inset:0) : elle remplit la boîte de la vignette quel que soit le padding du thème →
   chaque tuile est pleine et uniforme (modèle La Redoute : toutes les photos au même format). */
.ra-fiche-miniature.ra-fiche-miniature.ra-fiche-miniature {
	position: relative !important; overflow: hidden !important; box-shadow: none !important; outline: none !important;
	border: 2px solid transparent !important; border-radius: var(--ra-radius-sm) !important;
	background: var(--ra-bg-soft) !important; -webkit-appearance: none !important; appearance: none !important;
}
.ra-fiche-miniature.ra-fiche-miniature.ra-fiche-miniature.actif { border-color: var(--ra-brand) !important; }
.ra-fiche-miniature.ra-fiche-miniature img {
	position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover !important; display: block !important; border-radius: 0 !important;
}

/* Colonne infos */
.ra-fiche-infos { position: sticky; top: 24px; }
/* Duo de polices repris des pages catégories : sous-titre en Manrope (sans), titre en Montez (manuscrit). */
.ra-fiche-surtitre, .ra-fiche-produit-surtitre {
	display: block; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--ra-brand-dark); margin: 0 0 2px;
}
.ra-fiche-titre {
	font-family: "Montez", cursive; font-weight: 400; font-size: clamp(38px, 5vw, 54px);
	line-height: 1.05; margin: 0 0 14px; color: #54595F; text-transform: none;
}
/* Fiche produit : le titre WooCommerce (.product_title) reprend le même traitement Montez. */
.ra-fiche-produit .product_title {
	font-family: "Montez", cursive !important; font-weight: 400 !important; font-size: clamp(38px, 5vw, 54px) !important;
	line-height: 1.05 !important; margin: 0 0 8px !important; color: #54595F !important; text-transform: none !important;
}

.ra-fiche-prix { margin: 0 0 20px; }
.ra-fiche-prix-des { color: var(--ra-muted); font-size: 14px; }
.ra-fiche-prix-montant { font-size: 26px; font-weight: 800; color: var(--ra-ink); }
.ra-fiche-prix-note { color: var(--ra-muted); font-size: 14px; margin-left: 6px; }
.ra-fiche-tarifs { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ra-line); }
.ra-fiche-tarifs li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.ra-fiche-tarifs li span { color: var(--ra-ink-2); }

.ra-fiche-cta { margin: 8px 0 20px; }
/* Boutons d'action des widgets de réservation (service / location) dans la colonne CTA. */
.ra-fiche-cta .button, .ra-fiche-cta button.button {
	background: var(--ra-accent); color: var(--ra-on-accent); border: 0; border-radius: var(--ra-radius-sm);
	padding: 13px 26px; font-size: 15px; font-weight: 700; cursor: pointer; text-shadow: none;
}
.ra-fiche-cta .button:hover, .ra-fiche-cta button.button:hover { background: var(--ra-accent-dark); color: var(--ra-on-accent); }

.ra-fiche-avantages { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--ra-line); }
.ra-fiche-avantages li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ra-ink-2); padding: 5px 0; }
.ra-fiche-avantages .dashicons { color: var(--ra-brand-dark); font-size: 18px; width: 18px; height: 18px; }

/* ---- Bas : sections pleine largeur ---- */
.ra-fiche-bas { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.ra-fiche-section h2 { font-size: 20px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ra-brand); display: inline-block; color: var(--ra-ink); }
.ra-fiche-desc { line-height: 1.7; color: var(--ra-ink-2); }

.ra-fiche-specs-table { width: 100%; border-collapse: collapse; max-width: 640px; }
.ra-fiche-specs-table th, .ra-fiche-specs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ra-line); font-size: 14px; }
.ra-fiche-specs-table th { width: 200px; color: var(--ra-muted); font-weight: 600; }
.ra-fiche-specs-liste { columns: 2; gap: 32px; margin: 0; padding-left: 18px; color: var(--ra-ink-2); }
.ra-fiche-specs-liste li { margin: 4px 0; }

.ra-fiche-similaires-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ra-fiche-carte { display: block; text-decoration: none; color: inherit; }
.ra-fiche-carte-img { display: block; border-radius: var(--ra-radius-sm); overflow: hidden; background: var(--ra-bg-soft); aspect-ratio: 1 / 1; margin-bottom: 8px; }
.ra-fiche-carte-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ra-fiche-carte:hover .ra-fiche-carte-img img { transform: scale(1.04); }
.ra-fiche-carte-titre { display: block; font-weight: 600; font-size: 15px; color: var(--ra-ink); }
.ra-fiche-carte-meta { display: block; color: var(--ra-muted); font-size: 13px; margin-top: 2px; }

/* ==================================================================
 * Galerie produit en mosaïque (2 colonnes) + lightbox « highslide »
 * ------------------------------------------------------------------ */
.ra-pgal {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
}
.ra-pgal-item {
	position: relative; display: block; margin: 0; padding: 0; border: 0; cursor: pointer;
	background: var(--ra-bg-soft); border-radius: 5px; overflow: hidden; aspect-ratio: 1 / 1;
	-webkit-appearance: none; appearance: none;
}
.ra-pgal-item img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .45s ease; max-width: none;
}
.ra-pgal-item:hover img, .ra-pgal-item:focus-visible img { transform: scale(1.08); }
.ra-pgal-item:focus-visible { outline: 2px solid var(--ra-brand); outline-offset: 2px; }
/* 1 seule photo : image large seule (4/3). */
.ra-pgal--1 { grid-template-columns: 1fr; }
.ra-pgal--1 .ra-pgal-item { aspect-ratio: 4 / 3; }
/* Compteur « +N » sur la dernière tuile quand il reste des photos hors grille. */
.ra-pgal-more {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(23, 23, 23, .55); color: #fff; font-size: 26px; font-weight: 600; letter-spacing: .02em;
}

/* Neutralise la couleur d'accent rouge du thème sur toute la fiche : les tuiles de la mosaïque
   sont des <button> (le thème leur met une bordure rouge) et les liens héritent du rouge du thème.
   On ramène tout aux couleurs Tracea (vert / ocre). */
.ra-pgal-item.ra-pgal-item.ra-pgal-item { border: 0 !important; color: inherit !important; box-shadow: none !important; }
.ra-fiche-main a:not(.button):not(.ra-pgal-item) { color: var(--ra-brand-dark); }
.ra-fiche-main a:not(.button):not(.ra-pgal-item):hover { color: var(--ra-accent-dark); }
.ra-fiche-fil a { color: var(--ra-muted) !important; }
.ra-fiche-fil a:hover { color: var(--ra-brand-dark) !important; text-decoration: underline; }

/* Lightbox plein écran */
.ra-lb { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column;
	background: rgba(17, 17, 17, .92); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.ra-lb.is-open { opacity: 1; visibility: visible; }
.ra-lb-scene { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 64px 12px; min-height: 0; }
.ra-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
	transform: scale(.92); opacity: 0; transition: transform .3s ease, opacity .3s ease; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.ra-lb.is-shown .ra-lb-img { transform: scale(1); opacity: 1; }
.ra-lb-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.ra-lb-close:hover { background: rgba(255,255,255,.24); }
.ra-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ra-lb-nav:hover { background: rgba(255,255,255,.24); }
.ra-lb-prev { left: 16px; } .ra-lb-next { right: 16px; }
.ra-lb-count { position: absolute; top: 22px; left: 24px; color: rgba(255,255,255,.85); font-size: 14px; }
.ra-lb-thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; padding: 10px 16px 18px; }
.ra-lb-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; border: 2px solid transparent;
	cursor: pointer; padding: 0; background: none; opacity: .55; transition: opacity .2s; }
.ra-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-lb-thumb.is-active, .ra-lb-thumb:hover { opacity: 1; }
.ra-lb-thumb.is-active { border-color: #fff; }
@media (max-width: 640px) {
	.ra-lb-scene { padding: 40px 12px 8px; }
	.ra-lb-nav { width: 42px; height: 42px; font-size: 24px; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.ra-fiche-haut { grid-template-columns: 1fr; gap: 24px; }
	.ra-fiche-infos { position: static; }
	.ra-fiche-similaires-grille { grid-template-columns: repeat(2, 1fr); }
	.ra-fiche-specs-liste { columns: 1; }
	/* Galerie : image en haut, vignettes en bande horizontale scrollable en dessous. */
	.ra-fiche-galerie,
	.ra-fiche-produit .woocommerce-product-gallery { flex-direction: column; }
	.ra-fiche-galerie-miniatures,
	.ra-fiche-produit .woocommerce-product-gallery .flex-control-thumbs {
		flex: 0 0 auto; width: auto !important; flex-direction: row; flex-wrap: nowrap;
		max-height: none; overflow-x: auto; overflow-y: visible; margin-top: 12px !important;
	}
	.ra-fiche-galerie-miniatures .ra-fiche-miniature { width: 72px; height: 72px; }
	.ra-fiche-produit .flex-control-thumbs li { width: 72px !important; flex: 0 0 72px; }
}
@media (max-width: 520px) {
	.ra-fiche-titre { font-size: 23px; }
}

/* ==================================================================
 *  Fiche PRODUIT (WooCommerce) — balisage natif WC adapté au gabarit.
 * ================================================================== */
.ra-fiche-produit .ra-fiche-fil .woocommerce-breadcrumb { margin: 0; font-size: 13px; color: var(--ra-muted); }
.ra-fiche-produit .ra-fiche-fil a { color: inherit; }

.ra-fiche-produit .ra-fiche-galerie .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; }
.ra-fiche-produit .ra-fiche-galerie img { border-radius: var(--ra-radius); }
.ra-fiche-produit .ra-fiche-galerie { position: relative; }
/* Galerie produit WooCommerce (flexslider) → même rail « La Redoute » : vignettes verticales à
   gauche, grande image à droite. On restyle uniquement la mise en page ; le carrousel flexslider
   (clic sur une vignette → change l'image) continue de fonctionner. */
.ra-fiche-produit .woocommerce-product-gallery { display: flex !important; flex-direction: row-reverse; align-items: flex-start; gap: 14px; }
.ra-fiche-produit .woocommerce-product-gallery .flex-viewport,
.ra-fiche-produit .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { flex: 1 1 auto; width: auto !important; margin: 0; }
.ra-fiche-produit .woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important; flex-direction: column; flex: 0 0 84px; width: 84px !important;
	margin: 0 !important; padding: 0; gap: 10px; max-height: 560px; overflow-y: auto;
}
.ra-fiche-produit .flex-control-thumbs li { width: 100% !important; margin: 0 !important; float: none !important; list-style: none; }
.ra-fiche-produit .flex-control-thumbs img { border-radius: var(--ra-radius-sm); opacity: .6; transition: opacity .15s; cursor: pointer; }
.ra-fiche-produit .flex-control-thumbs img.flex-active,
.ra-fiche-produit .flex-control-thumbs img:hover { opacity: 1; outline: 2px solid var(--ra-brand); outline-offset: 1px; }
/* WooCommerce impose float:right + width:48% sur .summary/.images ; on neutralise pour que
   les deux enfants remplissent bien leur colonne de grille (sinon le résumé tombe à ~250px). */
.ra-fiche-haut > .ra-fiche-galerie,
.ra-fiche-haut > .ra-fiche-infos { width: 100% !important; float: none !important; }
.ra-fiche-produit .onsale {
	position: absolute; z-index: 2; top: 12px; left: 12px; margin: 0;
	background: var(--ra-sale) !important; color: #fff !important; border-radius: 999px; padding: 4px 12px;
	font-size: 12px; font-weight: 700; min-height: 0; min-width: 0; line-height: 1.6; width: auto; height: auto;
}

.ra-fiche-produit .summary.entry-summary { margin: 0; }
.ra-fiche-produit .product_title { font-size: 28px; line-height: 1.2; margin: 6px 0 14px; color: var(--ra-ink); }
.ra-fiche-produit .woocommerce-product-rating { margin-bottom: 14px; }

.ra-fiche-produit .summary .price { color: var(--ra-ink); font-size: 24px; font-weight: 800; margin: 0 0 18px; }
.ra-fiche-produit .summary .price del { color: var(--ra-muted); font-weight: 500; font-size: 18px; margin-right: 8px; }
.ra-fiche-produit .summary .price ins { text-decoration: none; color: var(--ra-sale); }
.ra-fiche-produit .summary .price .woocommerce-Price-currencySymbol { font-weight: inherit; }

.ra-fiche-produit .woocommerce-product-details__short-description { color: var(--ra-ink-2); line-height: 1.7; margin-bottom: 20px; }

.ra-fiche-produit .variations { margin-bottom: 12px; }
.ra-fiche-produit .variations td, .ra-fiche-produit .variations th { padding: 6px 8px 6px 0; }
.ra-fiche-produit .quantity { margin-right: 10px; }
.ra-fiche-produit .single_add_to_cart_button {
	background: var(--ra-accent) !important; color: var(--ra-on-accent) !important; border: 0; border-radius: var(--ra-radius-sm);
	padding: 14px 28px; font-size: 16px; font-weight: 700; cursor: pointer; text-shadow: none;
}
.ra-fiche-produit .single_add_to_cart_button:hover { background: var(--ra-accent-dark) !important; color: var(--ra-on-accent) !important; }
/* Mobile : quantité + bouton sur une ligne, bouton pleine largeur et bien haut (cible tactile). */
@media (max-width: 520px) {
	.ra-fiche-produit form.cart { display: flex; align-items: stretch; gap: 10px; }
	.ra-fiche-produit .quantity { margin-right: 0; flex: 0 0 auto; }
	.ra-fiche-produit .single_add_to_cart_button { flex: 1 1 auto; width: auto; min-height: 48px; padding: 14px 16px !important; font-size: 16px !important; }
}
.ra-fiche-produit .product_meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ra-line); font-size: 13px; color: var(--ra-muted); }

.ra-fiche-produit .woocommerce-tabs { margin-top: 8px; }
.ra-fiche-produit .related.products > h2, .ra-fiche-produit .upsells.products > h2 {
	font-size: 20px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ra-brand); display: inline-block; color: var(--ra-ink);
}
.ra-fiche-produit .related.products ul.products, .ra-fiche-produit .upsells.products ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; list-style: none;
}
.ra-fiche-produit .related.products ul.products li, .ra-fiche-produit .upsells.products ul.products li { width: auto; margin: 0; float: none; }

@media (max-width: 900px) {
	.ra-fiche-produit .related.products ul.products, .ra-fiche-produit .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Encart vidéo de la fiche (métabox _ra_video) — responsive 16:9. */
.ra-fiche-video-wrap {
	position: relative;
	width: 100%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
}
.ra-fiche-video-wrap iframe,
.ra-fiche-video-wrap video,
.ra-fiche-video-wrap embed,
.ra-fiche-video-wrap object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}