.riad-t2 {
	--nuit-medina: #1A1410;
	--terre-cuite: #3D2B1A;
	--or-epice: #C5853A;
	--or-doux: #E8C07A;
	--safran: #7D4A28;
	--cannelle: #A0522D;
	--cannelle-clair: #D4885F;
	--ivoire: #F5ECD8;
	--parchemin: #E8E0D0;
	--vert-zellige: #4A6741;
	--texte: #2C1F12;
	background: var(--ivoire);
	font-family: 'DM Sans', sans-serif;
	color: var(--texte);
	/* « clip » et non « hidden » : hidden ferait de ce bloc un conteneur de défilement,
	   ce qui désactiverait le position: sticky de la colonne de réservation. */
	overflow-x: clip;
}
.riad-t2 * { box-sizing: border-box; }
.riad-t2 a { text-decoration: none; color: var(--safran); }
.riad-t2 a:hover { color: var(--nuit-medina); }
.riad-t2 button { font-family: inherit; cursor: pointer; }
.riad-t2__shell { max-width: 90rem; margin: 0 auto; }

/* Ce gabarit fournit son propre header/footer : on masque ceux d'Avada et on
   libère le conteneur #main/.fusion-row (borné à 1100px par le thème parent)
   pour que les sections occupent toute la largeur de la fenêtre. */
body.page-template-template-chambre-php .fusion-header-wrapper,
body.page-template-template-chambre-php .fusion-footer-widget-area,
body.page-template-template-chambre-php .fusion-footer-copyright-area {
	display: none !important;
}
body.page-template-template-chambre-php #main,
body.page-template-template-chambre-php #main .fusion-row,
body.page-template-template-chambre-php #content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* La barre de navigation est commune aux gabarits : son habillage vit dans
   assets/css/nav.css et son balisage dans riad_nav_render(). Rien a styler ici. */

/* Gallery hero */
.riad-t2__gallery-section { background: var(--nuit-medina); padding: 8rem 3rem 0; }
.riad-t2__breadcrumb { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cannelle-clair); margin-bottom: 1.75rem; }
.riad-t2__breadcrumb a { color: var(--cannelle-clair); }
.riad-t2__breadcrumb a:hover { color: var(--or-doux); }
.riad-t2__breadcrumb .is-current { color: var(--parchemin); }
.riad-t2__hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 19.75rem; gap: 0.875rem; padding-bottom: 0.875rem; }
.riad-t2__hero-photo, .riad-t2__thumb, .riad-t2__mosaic-item {
	border: 0; padding: 0; margin: 0; text-align: left; background: none; color: inherit; display: block; width: 100%;
}
.riad-t2__hero-photo {
	position: relative; aspect-ratio: 16/10; cursor: zoom-in;
	background-color: var(--terre-cuite); background-size: cover; background-position: center;
	display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden;
}
.riad-t2__hero-badge {
	position: absolute; bottom: 1.375rem; right: 1.5rem; background: rgba(26,20,16,0.82); border: 1px solid rgba(197,133,58,0.5);
	color: var(--or-doux); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5625rem 1rem;
}
/* Les rangées sont créées à la demande : une chambre qui n'a que deux ou trois vignettes
   remplit quand même toute la hauteur de la photo principale. */
.riad-t2__thumbs { display: grid; grid-auto-rows: 1fr; gap: 0.875rem; }
.riad-t2__thumb {
	position: relative; cursor: zoom-in; background-color: var(--terre-cuite); background-size: cover; background-position: center;
}

/* Main content */
.riad-t2__main { background: var(--ivoire); padding: 0 3rem 7.5rem; }
.riad-t2__main-shell { max-width: 90rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 23.75rem; gap: 6rem; align-items: start; }
.riad-t2__content { padding-top: 6rem; }
.riad-t2__room-tag { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.375rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--safran); }
.riad-t2__dot { width: 0.5625rem; height: 0.5625rem; background: var(--vert-zellige); border-radius: 50%; }
.riad-t2__h1 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.75rem, 1.6rem + 4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--nuit-medina); margin: 0 0 1.25rem; }
.riad-t2__tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.625rem; line-height: 1.45; color: var(--safran); margin: 0 0 3rem; max-width: 22ch; }
.riad-t2__body { max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--texte); }
.riad-t2__body p { margin: 0 0 1.375rem; }
.riad-t2__body p:last-child { margin-bottom: 0; }

/* Boutons posés dans l'éditeur par le constructeur du thème parent : chaque bouton
   embarque ses propres couleurs (bleu, vert, orange) et sa forme de pilule dans une
   balise <style> placée après cette feuille. On les ramène à la charte du gabarit ;
   les sélecteurs sont volontairement plus spécifiques que « .fusion-button.button-N ».
   Le bouton du moteur de réservation garde le remplissage or, les autres sont en filet. */
.riad-t2__body .fusion-button-wrapper { margin: 0.5rem 0.75rem 0.5rem 0; display: inline-block; vertical-align: middle; }
/* Avada force « display: block » sur .fusion-aligncenter, ce qui empile les boutons
   les uns sous les autres : on le casse pour les aligner en rangée. */
.riad-t2__body .fusion-button-wrapper.fusion-aligncenter { display: inline-block !important; text-align: center; }
.riad-t2__content-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 2rem 0 0.5rem;
	/* La rangée d'actions n'est pas du texte courant : elle peut dépasser la largeur de
	   lecture (62ch) et s'étendre dans la colonne, pour tenir sur une seule ligne. */
	width: max-content;
	max-width: none;
}
.riad-t2__content-actions .fusion-button-wrapper,
.riad-t2__content-actions .fusion-button-wrapper.fusion-aligncenter {
	margin: 0;
	display: block !important;
}
/* Filet de sécurité si le cache sert encore l'ancien HTML : la galerie du contenu
   double celle du gabarit, donc elle reste masquée. */
.riad-t2__body .gallery,
.riad-t2__body [id^="gallery-"] { display: none !important; }
.riad-t2 .riad-t2__body a.fusion-button {
	display: inline-block;
	border-radius: 0 !important;
	border: 1px solid var(--or-epice) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	padding: 0.875rem 1.25rem !important;
	height: auto !important;
	line-height: 1.2 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease;
}
/* La forme en pilule vient de « #wrapper .button-pill { border-radius: 25px !important } »
   dans la feuille du thème parent : il faut donc aussi passer par #wrapper pour la défaire. */
#wrapper .riad-t2__body a.fusion-button { border-radius: 0 !important; }
.riad-t2 .riad-t2__body a.fusion-button .fusion-button-text { color: var(--safran) !important; font-size: inherit !important; letter-spacing: inherit !important; }
.riad-t2 .riad-t2__body a.fusion-button:hover,
.riad-t2 .riad-t2__body a.fusion-button:focus,
.riad-t2 .riad-t2__body a.fusion-button:active { background: var(--or-epice) !important; border-color: var(--or-epice) !important; }
.riad-t2 .riad-t2__body a.fusion-button:hover .fusion-button-text,
.riad-t2 .riad-t2__body a.fusion-button:focus .fusion-button-text,
.riad-t2 .riad-t2__body a.fusion-button:active .fusion-button-text { color: var(--nuit-medina) !important; }
.riad-t2 .riad-t2__body a.fusion-button[href*="verticalbooking"] { background: var(--or-epice) !important; }
.riad-t2 .riad-t2__body a.fusion-button[href*="verticalbooking"] .fusion-button-text { color: var(--nuit-medina) !important; }
.riad-t2 .riad-t2__body a.fusion-button[href*="verticalbooking"]:hover,
.riad-t2 .riad-t2__body a.fusion-button[href*="verticalbooking"]:focus,
.riad-t2 .riad-t2__body a.fusion-button[href*="verticalbooking"]:active { background: var(--or-doux) !important; border-color: var(--or-doux) !important; }
/* Les pictogrammes du thème (lit, enveloppe…) jurent avec le reste du gabarit, qui
   n'utilise que du texte et des filets. */
.riad-t2 .riad-t2__body a.fusion-button i,
.riad-t2 .riad-t2__body a.fusion-button .button-icon-left,
.riad-t2 .riad-t2__body a.fusion-button .button-icon-right { display: none !important; }

.riad-t2__h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.625rem; line-height: 1.2; color: var(--nuit-medina); margin: 0 0 1.875rem; }
.riad-t2__h2--light { font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); line-height: 1.45; color: var(--or-doux); margin: 0; }
.riad-t2__specs-block { margin-top: 4.5rem; border-top: 1px solid rgba(125,74,40,0.24); padding-top: 2.75rem; }
/* Une caractéristique par ligne sur toute la largeur : en deux colonnes, les valeurs
   longues (« … idéale pour un enfant ») se coupaient au milieu de la phrase. */
.riad-t2__specs { display: grid; grid-template-columns: minmax(0,1fr); }
.riad-t2__spec-row { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1.5rem; align-items: baseline; padding: 1.0625rem 0; border-bottom: 1px solid rgba(125,74,40,0.16); }
.riad-t2__spec-k { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--safran); white-space: nowrap; }
.riad-t2__spec-v { font-size: 0.9375rem; line-height: 1.5; color: var(--texte); text-wrap: pretty; }
.riad-t2__details-block { margin-top: 4.5rem; }
.riad-t2__mosaic { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.875rem; }
.riad-t2__mosaic-item {
	background-color: var(--parchemin); background-size: cover; background-position: center;
	cursor: zoom-in; aspect-ratio: 16/10; border: 0;
}
.riad-t2__mosaic-item:only-child { grid-column: 1 / -1; aspect-ratio: 21/9; }

/* Sidebar : collante en desktop seulement, pour accompagner la lecture de la description
   sans jamais passer devant le titre de la suite (voir les points de rupture en bas). */
.riad-t2__sidebar { position: sticky; top: 7rem; margin-top: 6rem; z-index: 2; align-self: start; }
.riad-t2__book { background: var(--nuit-medina); padding: 2.375rem 2.125rem; }
.riad-t2__book-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cannelle-clair); }
.riad-t2__book-price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.75rem; }
.riad-t2__price-num { font-family: 'Cormorant Garamond', serif; font-size: 3.25rem; line-height: 1; color: var(--or-doux); }
.riad-t2__price-cur { font-family: 'Cormorant Garamond', serif; font-size: 1.625rem; color: var(--or-doux); }
.riad-t2__price-unit { font-size: 0.8125rem; color: var(--cannelle-clair); margin-left: 0.25rem; }
.riad-t2__book-note { font-size: 0.75rem; color: var(--cannelle-clair); margin-top: 0.5rem; }
.riad-t2__btn { display: block; text-align: center; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; padding: 1.0625rem; margin-top: 1.75rem; }
.riad-t2__btn--primary { background: var(--or-epice); color: var(--nuit-medina) !important; }
.riad-t2__btn--primary:hover { background: var(--or-doux); }
.riad-t2__book-sub { font-size: 0.6875rem; text-align: center; color: var(--cannelle-clair); margin-top: 0.75rem; }
.riad-t2__book-perks { margin-top: 1.875rem; padding-top: 1.625rem; border-top: 1px solid rgba(197,133,58,0.24); display: flex; flex-direction: column; gap: 0.875rem; }
.riad-t2__perk { display: flex; gap: 0.75rem; align-items: center; font-size: 0.8125rem; color: var(--parchemin); }
.riad-t2__perk-dot { width: 0.375rem; height: 0.375rem; background: var(--or-epice); border-radius: 50%; flex: none; }
.riad-t2__question { background: var(--parchemin); padding: 1.875rem 2.125rem; margin-top: 0.875rem; }
.riad-t2__question-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--safran); margin-bottom: 0.875rem; }
.riad-t2__question-text { font-size: 0.875rem; line-height: 1.65; color: var(--texte); margin: 0 0 1.125rem; }
.riad-t2__phone { font-family: 'Cormorant Garamond', serif; font-size: 1.375rem; color: var(--safran); }
.riad-t2__phone:hover { color: var(--nuit-medina); }

/* Other rooms rail */
.riad-t2__other-rooms { background: var(--terre-cuite); padding: 6.5rem 3rem; }
.riad-t2__rooms-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.5rem; margin-bottom: 2.75rem; }
.riad-t2__eyebrow { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cannelle-clair); margin-bottom: 0.875rem; }
.riad-t2__rail-controls { display: flex; gap: 0.625rem; flex: none; }
.riad-t2__rail-btn {
	width: 2.875rem; height: 2.875rem; background: transparent; border: 1px solid rgba(232,192,122,0.4); color: var(--or-doux); font-size: 1rem;
}
.riad-t2__rail-btn:hover { background: var(--or-epice); color: var(--nuit-medina); border-color: var(--or-epice); }
/* Le défilement reste possible à la molette et au pavé tactile ; la navigation visible
   passe par les deux flèches de l'entête, donc la barre native est masquée. */
.riad-t2__rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 0.5rem; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.riad-t2__rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.riad-t2__room-card { flex: 0 0 16.75rem; scroll-snap-align: start; }
.riad-t2__room-card:hover { opacity: 0.86; }
.riad-t2__room-photo { aspect-ratio: 4/5; background-color: var(--terre-cuite); background-size: cover; background-position: center; }
.riad-t2__room-info { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-bottom: 0.875rem; border-bottom: 1px solid rgba(232,192,122,0.2); }
.riad-t2__room-name { font-family: 'Cormorant Garamond', serif; font-size: 1.5625rem; color: var(--ivoire); }
.riad-t2__room-kind { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cannelle-clair); }

/* Lightbox */
.riad-t2__lightbox {
	position: fixed; inset: 0; background: rgba(12,9,7,0.96); z-index: 200; display: none;
	flex-direction: column; padding: 2rem 2.5rem;
}
.riad-t2__lightbox.is-open { display: flex; }
.riad-t2__lightbox-head { display: flex; justify-content: space-between; align-items: center; color: var(--cannelle-clair); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; }
.riad-t2__lightbox-close { background: none; border: 0; font-size: 1.375rem; line-height: 1; color: var(--or-doux); }
.riad-t2__lightbox-body { flex: 1; display: flex; align-items: center; gap: 1.75rem; min-height: 0; padding: 1.75rem 0; }
.riad-t2__lightbox-nav {
	flex: none; width: 3.25rem; height: 3.25rem; background: transparent; border: 1px solid rgba(232,192,122,0.4); color: var(--or-doux); font-size: 1.125rem;
}
.riad-t2__lightbox-nav:hover { background: var(--or-epice); color: var(--nuit-medina); }
.riad-t2__lightbox-frame {
	flex: 1; height: 100%; background-color: var(--terre-cuite); background-size: contain; background-position: center; background-repeat: no-repeat;
}
.riad-t2__lightbox-caption { text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1875rem; color: var(--parchemin); }

/* Breakpoints */
@media (max-width: 71.875rem) {
	.riad-t2__main-shell { grid-template-columns: minmax(0,1fr); gap: 0; }
	.riad-t2__hero-grid { grid-template-columns: minmax(0,1fr); }
	.riad-t2__thumbs { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; aspect-ratio: 16/4; }
	/* Sur tablette et mobile, la colonne de réservation quitte le collant et reprend sa
	   place dans le fil de lecture — photos, titre, description, réservation, puis les
	   autres logements. Le titre de la suite reste ainsi visible dès l'arrivée. */
	.riad-t2__sidebar { position: static; margin: 4rem 0 0; max-width: 32.5rem; }
	.riad-t2__content { padding-top: 4rem; }
	.riad-t2__content-actions { width: auto; max-width: 100%; }
}
@media (max-width: 47.5rem) {
	.riad-t2__gallery-section { padding: 8rem 1.5rem 0; }
	.riad-t2__main { padding: 0 1.5rem 5rem; }
	.riad-t2__content { padding-top: 3rem; }
	.riad-t2__other-rooms { padding: 4.5rem 1.5rem; }
	.riad-t2__spec-row { grid-template-columns: minmax(0,1fr); gap: 0.375rem; }
	.riad-t2__mosaic { grid-template-columns: minmax(0,1fr); }
	.riad-t2__rooms-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.riad-t2__sidebar { margin-top: 3rem; }
	/* Sur mobile étroit, les trois actions passent sur deux lignes plutôt qu'en colonne. */
	.riad-t2__body .fusion-button-wrapper { margin: 0.375rem 0.5rem 0.375rem 0; }
	.riad-t2 .riad-t2__body a.fusion-button { padding: 0.75rem 1rem !important; font-size: 0.6875rem !important; white-space: normal; max-width: 100%; }
}