/*
Theme Name: Mas Dorandeu
Theme URI: https://example.com/mas-dorandeu
Author: Antoine Dupuis
Description: Thème WordPress simple pour les deux hébergements du Mas Dorandeu à Joch (El Capoll et El Madres). Thème « bloc » : tout se modifie dans l'éditeur WordPress, sans code. Inclut une page par hébergement, une galerie photos, un livre d'or modéré et un formulaire de demande de réservation.
Version: 1.3.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mas-dorandeu
Tags: full-site-editing, block-patterns, one-column, custom-colors, translation-ready
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
img { height: auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group { margin-block-start: 0; }

/* ---------- En-tête (reste en haut au défilement) ---------- */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 46px; } }
.site-header {
	/* Fond plein, sans « backdrop-filter » : ce filtre enfermait le menu mobile
	   dans la hauteur de l'en-tête et obligeait à faire défiler. */
	background: #f4f3f1;
	border-bottom: 1px solid #dedad4;
	box-shadow: 0 4px 18px rgba(74, 44, 32, .06);
	padding: 1rem 1.25rem;
	transition: padding .25s ease;
}
.site-header .entete-interieur { gap: 1.5rem; align-items: center; }
.site-logo-lien { display: block; line-height: 0; }
.site-logo-img { display: block; height: 56px; width: auto; max-width: 160px; object-fit: contain; transition: height .25s ease; }
.is-scrolled .site-header { padding-block: .6rem; }
.is-scrolled .site-logo-img { height: 46px; }

/* Menu : majuscules, et « Réserver » en bouton */
.site-header .wp-block-navigation { gap: .4rem 1.6rem; }
.site-header .wp-block-navigation a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .88rem;
	font-weight: 500;
	color: var(--wp--preset--color--brun);
	padding-block: .3rem;
}
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--terre-fonce); }
.site-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--terre-fonce); box-shadow: inset 0 -2px 0 var(--wp--preset--color--terre); }
.site-header .wp-block-navigation .menu-bouton > a,
.site-header .wp-block-navigation a[href$="/reserver/"],
.site-header .wp-block-navigation .menu-bouton.current-menu-item > a {
	background: var(--wp--preset--color--terre-fonce);
	color: #fff;
	border-radius: 999px;
	padding: .85rem 1.8rem;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
	box-shadow: none;
	transition: background .2s ease;
}
.site-header .wp-block-navigation .menu-bouton > a:hover,
.site-header .wp-block-navigation a[href$="/reserver/"]:hover { background: #9a3412; color: #fff; }
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	background: #f4f3f1;
	padding: 1.25rem 1.5rem 2rem;
	overflow-y: auto;
}
.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open { top: 46px; height: calc(100dvh - 46px); }
@media (min-width: 783px) { .admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open { top: 32px; height: calc(100dvh - 32px); } }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	align-items: center;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	gap: 1.4rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.05rem; }
.site-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; color: var(--wp--preset--color--brun); }
.site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; color: var(--wp--preset--color--brun); }
@media (max-width: 781px) {
	.site-header { padding: .8rem 1rem; }
	.site-logo-img { height: 44px; }
	.is-scrolled .site-logo-img { height: 40px; }
}

/* ---------- Sections ---------- */
.section { padding: 5rem 1.25rem 4.5rem; }
.section.is-tight { padding-block: 4rem 2.5rem; }
.lead { font-size: var(--wp--preset--font-size--moyen); }
.section > h2 { margin-bottom: 1.5rem; }
/* Petit trait coloré sous les titres de section */
.section > h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 5px;
	margin: .7rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--terre), var(--wp--preset--color--soleil));
}
.section > h2::after { margin-left: 0; }

/* ---------- Alignement : tout à gauche, mêmes largeurs partout ---------- */
.wp-block-cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-inline: auto;
	text-align: center;
}
.wp-block-cover .wp-block-cover__inner-container > * { margin-inline: auto; text-align: center; }
.wp-block-cover .wp-block-cover__inner-container p { max-width: 760px; }
.wp-block-cover .wp-block-buttons { justify-content: center; }
main .has-text-align-center:not(.wp-block-cover *) { text-align: left; }
main .is-content-justification-center:not(.wp-block-cover *) { justify-content: flex-start; }

/* ---------- Bandeau (hero) ---------- */
.wp-block-cover.hero { padding: 6rem 1.25rem 4.5rem; }
.wp-block-cover.hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.wp-block-cover.hero p { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); font-size: var(--wp--preset--font-size--moyen); }
.wp-block-cover.hero h1,
.wp-block-cover.hero p { color: #fff; }
.wp-block-cover.hero .wp-block-buttons .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
	background: transparent;
}
.wp-block-cover.hero .wp-block-buttons .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.15); }

/* ---------- Cartes ---------- */
.card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(74, 44, 32, .12);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74, 44, 32, .18); }
.card .wp-block-image { margin: 0; }
.card .wp-block-image img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card .card-body { padding: 1.5rem; }
.card-simple {
	background: #fff;
	border-radius: 14px;
	border-top: 5px solid var(--wp--preset--color--soleil);
	box-shadow: 0 10px 30px rgba(74, 44, 32, .10);
	padding: 1.5rem;
}
.picto { text-align: left; }
.picto .ico { font-size: 2.2rem; margin-bottom: .2rem; }

/* ---------- Pastilles (capacité, équipements clés) ---------- */
.tags { gap: .4rem; }
.tags .tag {
	display: inline-block;
	margin: 0;
	background: var(--wp--preset--color--soleil-clair);
	color: #7a4a00;
	border-radius: 999px;
	padding: .2rem .9rem;
	font-size: .85rem;
	font-weight: 500;
}

/* ---------- Galeries ---------- */
.wp-block-gallery .wp-block-image img { border-radius: 14px; transition: transform .3s ease; }
.wp-block-gallery .wp-block-image:hover img { transform: scale(1.03); }
.wp-block-gallery .wp-block-image { overflow: hidden; border-radius: 14px; }

/* ---------- Listes d'équipements ---------- */
ul.equip { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
ul.equip li { margin-bottom: .4rem; padding-left: 1.5rem; position: relative; break-inside: avoid; }
ul.equip li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--olive); font-weight: 700; }
ul.equip.one-col { columns: 1; }

/* ---------- Tableaux (tarifs) ---------- */
.wp-block-table table { border-collapse: collapse; width: 100%; background: #fff; }
.wp-block-table th { background: var(--wp--preset--color--olive); color: #fff; text-align: left; }
.wp-block-table th, .wp-block-table td { padding: .8rem 1rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--pierre-fonce); }

/* ---------- Bandeau d'appel à l'action ---------- */
.cta { text-align: left; }
.cta h2, .cta p { color: #fff; }
.cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--terre-fonce); }
.cta .wp-block-button__link:hover { background: var(--wp--preset--color--soleil-clair); color: var(--wp--preset--color--terre-fonce); }

/* ---------- Livre d'or ---------- */
.avis {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(43, 42, 40, .12);
	border-left: 5px solid var(--wp--preset--color--terre);
	box-shadow: 0 10px 30px rgba(74, 44, 32, .10);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
}
.avis:nth-child(3n+2) { border-left-color: var(--wp--preset--color--soleil); }
.avis:nth-child(3n) { border-left-color: var(--wp--preset--color--mer); }
.etoiles { color: var(--wp--preset--color--soleil); font-size: 1.4rem; letter-spacing: .15em; }
.avis .wp-block-comment-author-name { font-weight: 600; margin: 0; color: var(--wp--preset--color--nuit); }
.avis .wp-block-comment-date { font-size: .85rem; color: #7d756d; margin: 0 0 .5rem; }
.wp-block-comments .comment-respond { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 8px 28px rgba(43, 42, 40, .12); margin-top: 2rem; }
.wp-block-comments .comment-form { display: grid; gap: 1rem; }
.wp-block-comments .comment-form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.wp-block-comments .comment-form input[type="text"],
.wp-block-comments .comment-form input[type="email"],
.wp-block-comments .comment-form textarea { width: 100%; }

/* ---------- Formulaire de réservation ---------- */
.mas-form { display: grid; gap: 1.25rem; }
.mas-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.mas-form label { display: block; font-weight: 500; font-size: .95rem; color: var(--wp--preset--color--brun); }
.mas-form input,
.mas-form select,
.mas-form textarea,
.wp-block-comments .comment-form input,
.wp-block-comments .comment-form textarea {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	margin-top: .3rem;
	padding: .75rem 1rem;
	border: 1px solid #d9d4cd;
	border-radius: 10px;
	background: #fff;
	color: inherit;
}
.mas-form input:focus,
.mas-form select:focus,
.mas-form textarea:focus,
.wp-block-comments .comment-form input:focus,
.wp-block-comments .comment-form textarea:focus { outline: 2px solid var(--wp--preset--color--terre); border-color: transparent; }
.mas-form .mas-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mas-form button,
.wp-block-comments .form-submit input[type="submit"] {
	background: var(--wp--preset--color--terre-fonce);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .85rem 1.8rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	width: auto;
}
.mas-form button:hover,
.wp-block-comments .form-submit input[type="submit"]:hover { background: #9a3412; }
.mas-notice { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1rem; }
.mas-notice.ok { background: #e6efd6; border: 1px solid #b8cf8c; }
.mas-notice.err { background: #f7ddd3; border: 1px solid #e3a38c; }

/* ---------- Carte ---------- */
.map-embed iframe { width: 100%; height: 380px; border: 0; border-radius: 14px; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--wp--preset--color--brun); color: #eadfd8; padding: 3.5rem 1.25rem 1.5rem; border-top: 6px solid var(--wp--preset--color--terre); }
.site-footer h3,
.site-footer a { color: var(--wp--preset--color--soleil); }
.site-footer h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
.site-footer .copy { margin-top: 2rem; font-size: .85rem; text-align: left; opacity: .75; }

@media (max-width: 781px) {
	ul.equip { columns: 1; }
	.section { padding-block: 3.5rem 3rem; }
	.site-header { padding: 1.2rem 1rem 1rem; }
	.wp-block-cover.hero { padding-top: 4.5rem; }
}

/* ---------- Formulaire de réservation (mise en forme) ---------- */
.mas-form {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(74, 44, 32, .10);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}
.mas-form .etape { border: 0; margin: 0; padding: 0 0 1.5rem; border-bottom: 1px solid #ece8e3; display: grid; gap: 1rem; min-width: 0; }
.mas-form legend {
	display: flex; align-items: center; gap: .7rem;
	font-weight: 600; font-size: 1.1rem; color: var(--wp--preset--color--brun);
	padding: 0; margin-bottom: 1rem;
}
.mas-form legend .num {
	display: inline-grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--wp--preset--color--terre-fonce); color: #fff; font-size: .95rem;
}
.mas-form .facultatif { font-weight: 400; color: #8a8178; font-size: .85rem; }
.mas-form input, .mas-form textarea { background: #faf9f7; transition: border-color .2s, background .2s, box-shadow .2s; }
.mas-form input:hover, .mas-form textarea:hover { border-color: #bdb5ab; }
.mas-form input:focus, .mas-form textarea:focus { outline: none; background: #fff; border-color: var(--wp--preset--color--terre); box-shadow: 0 0 0 4px rgba(228, 87, 46, .15); }

.mas-form .choix-gites { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.mas-form .choix-gite { position: relative; cursor: pointer; margin: 0; }
.mas-form .choix-gite input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mas-form .choix-carte {
	display: block; height: 100%;
	border: 2px solid #e4e0da; border-radius: 14px; overflow: hidden; background: #fff;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mas-form .choix-carte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.mas-form .choix-texte { display: block; padding: .8rem 1rem 1rem 2.9rem; position: relative; }
.mas-form .choix-texte::before {
	content: ""; position: absolute; left: 1rem; top: 1.05rem;
	width: 1.1rem; height: 1.1rem; border-radius: 50%;
	border: 2px solid #c9c2b9; background: #fff; transition: all .2s;
}
.mas-form .choix-texte strong { display: block; color: var(--wp--preset--color--brun); }
.mas-form .choix-texte small { color: #8a8178; font-weight: 400; }
.mas-form .choix-gite:hover .choix-carte { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(74, 44, 32, .10); }
.mas-form .choix-gite input:checked + .choix-carte { border-color: var(--wp--preset--color--terre-fonce); box-shadow: 0 10px 24px rgba(194, 65, 12, .15); }
.mas-form .choix-gite input:checked + .choix-carte .choix-texte::before { border-color: var(--wp--preset--color--terre-fonce); background: var(--wp--preset--color--terre-fonce); box-shadow: inset 0 0 0 3px #fff; }
.mas-form .choix-gite input:focus-visible + .choix-carte { outline: 3px solid rgba(228, 87, 46, .4); outline-offset: 2px; }
.mas-form .nuits { margin: 0; font-weight: 500; color: var(--wp--preset--color--olive); min-height: 1.4em; }
.mas-form .envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.mas-form .envoi button { font-size: 1.05rem; padding: 1rem 2.2rem; box-shadow: 0 8px 20px rgba(194, 65, 12, .25); }
.mas-form .envoi p { margin: 0; flex: 1 1 260px; font-size: .9rem; color: #7d756d; }

/* ---------- Avis sur l'accueil ---------- */
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-block: 1rem 1.5rem; }
.avis-carte {
	position: relative; margin: 0;
	background: #fff; border-radius: 16px; padding: 2.4rem 1.6rem 1.4rem;
	box-shadow: 0 10px 30px rgba(74, 44, 32, .08);
	display: flex; flex-direction: column;
}
.avis-carte .avis-guillemet {
	position: absolute; top: .2rem; left: 1.3rem;
	font-family: var(--wp--preset--font-family--titres); font-size: 4rem; line-height: 1;
	color: var(--wp--preset--color--terre);
}
.avis-carte blockquote { margin: 0 0 1rem; flex: 1; }
.avis-carte blockquote p { margin: 0; font-style: italic; }
.avis-carte figcaption strong { display: block; color: var(--wp--preset--color--brun); }
.avis-carte figcaption span { font-size: .85rem; color: #8a8178; }