/*
Theme Name: Studio Quai Loti
Theme URI: https://studioquailoti.com/
Description: Thème sur mesure pour Studio Quai Loti, location de charme face au port de Paimpol.
Version: 1.3.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: quai-loti
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------- Base ---------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--laiton);
	outline-offset: 3px;
}

/* Les sections pleine largeur se suivent sans espace blanc entre elles. */
.entry-content > .alignfull {
	margin-block: 0;
}

/* ---------- Logo ---------- */

.ql-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--wp--preset--color--marine);
	text-decoration: none;
}

.ql-logo:hover {
	color: var(--wp--preset--color--marine);
}

.ql-logo__ancre {
	width: 40px;
	height: 40px;
	flex: none;
}

.ql-logo__texte {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.ql-logo__studio {
	align-self: flex-start;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	margin-left: 0.15rem;
}

.ql-logo__nom {
	font-family: var(--wp--preset--font-family--manuscrite);
	font-size: 2.05rem;
	line-height: 0.95;
	white-space: nowrap;
}

.ql-logo__ville {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-top: 0.15rem;
}

.ql-logo__ville::before,
.ql-logo__ville::after {
	content: "";
	width: 1rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.ql-logo--clair,
.ql-logo--clair:hover {
	color: var(--wp--preset--color--blanc);
}

/* ---------- En-tête ---------- */

.ql-entete {
	border-bottom: 1px solid rgba(20, 41, 74, 0.08);
	box-shadow: 0 2px 18px rgba(20, 41, 74, 0.05);
}

.ql-entete .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.ql-entete .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--laiton);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.ql-entete .wp-block-navigation-item__content:hover::after,
.ql-entete .current-menu-item > .wp-block-navigation-item__content::after,
.ql-entete .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.ql-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.3rem;
	font-family: var(--wp--preset--font-family--titres);
}

@media (max-width: 599px) {
	.ql-entete .ql-bouton-reserver {
		display: none;
	}
}

/* Entre 600 et 1000 px, le menu passe en bouton « hamburger » pour tenir sur une ligne. */
@media (min-width: 600px) and (max-width: 1000px) {
	.ql-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ql-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------- Styles de blocs ---------- */

.is-style-surtitre {
	font-family: var(--wp--preset--font-family--manuscrite);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--laiton);
}

.is-style-surtitre + :where(h1, h2, h3) {
	margin-top: 0.2rem;
}

.wp-block-group.is-style-carte {
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--custom--ombre);
}

ul.is-style-coches {
	list-style: none;
	padding-left: 0;
}

ul.is-style-coches li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.45em;
}

ul.is-style-coches li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	background: url("assets/icons/coche.svg") no-repeat center / contain;
}

.wp-block-button.is-style-laiton .wp-block-button__link {
	background: var(--wp--preset--color--laiton);
	color: var(--wp--preset--color--marine);
}

.wp-block-button.is-style-laiton .wp-block-button__link:hover,
.wp-block-button.is-style-laiton .wp-block-button__link:focus {
	background: #b4863a;
	color: var(--wp--preset--color--marine);
}

.wp-block-button.is-style-contour-blanc .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--blanc);
	border: 1.5px solid currentColor;
}

.wp-block-button.is-style-contour-blanc .wp-block-button__link:hover,
.wp-block-button.is-style-contour-blanc .wp-block-button__link:focus {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--marine);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--marine);
	color: var(--wp--preset--color--blanc);
}

/* ---------- Sections ---------- */

.ql-atouts .wp-block-image img {
	width: 44px;
	height: 44px;
}

.ql-atouts p {
	line-height: 1.35;
}

.ql-trait {
	width: 56px;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--laiton);
	margin-inline: 0 !important;
}

.has-text-align-center + .ql-trait,
.ql-trait.aligncenter {
	margin-inline: auto !important;
}

.ql-carte-lieu {
	border-top: 3px solid var(--wp--preset--color--laiton);
	height: 100%;
}

.ql-distance {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ocean);
}

.ql-galerie img {
	border-radius: var(--wp--custom--rayon);
}

.ql-a-completer {
	background: #fff4d6;
	border-radius: 3px;
	padding: 0 0.25em;
}

/* ---------- Tableau des tarifs ---------- */

.ql-tarifs table {
	border-collapse: collapse;
	width: 100%;
	background: var(--wp--preset--color--blanc);
}

.ql-tarifs thead {
	border-bottom: 2px solid var(--wp--preset--color--laiton);
}

.ql-tarifs th {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	color: var(--wp--preset--color--marine);
	text-align: left;
}

.ql-tarifs th,
.ql-tarifs td {
	border: 0;
	border-bottom: 1px solid #e3e8ee;
	padding: 0.9rem 1rem;
}

/* ---------- Questions fréquentes ---------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--marine);
}

.wp-block-details[open] summary {
	margin-bottom: 0.6rem;
}

/* ---------- Formulaire (Contact Form 7) ---------- */

.wpcf7-form .ql-form-ligne {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

@media (max-width: 600px) {
	.wpcf7-form .ql-form-ligne {
		grid-template-columns: 1fr;
	}
}

.wpcf7-form label {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wp--preset--color--marine);
}

.wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--blanc);
	border: 1px solid #cfd8e2;
	border-radius: 6px;
}

.wpcf7-form textarea {
	height: 9rem;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--wp--preset--color--ocean);
	outline: 2px solid rgba(31, 95, 139, 0.2);
}

.wpcf7-form .wpcf7-acceptance label {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--wp--preset--color--galet);
}

.wpcf7-form input[type="submit"] {
	cursor: pointer;
	border: 0;
	border-radius: 4px;
	padding: 0.95em 2em;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
	background: var(--wp--preset--color--marine);
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--ocean);
}

/* ---------- Calendrier (WP Simple Booking Calendar) ---------- */

.ql-calendrier .wpsbc-container {
	font-family: inherit;
}

/* ---------- Pied de page ---------- */

.ql-pied a {
	color: inherit;
	text-decoration: none;
}

.ql-pied a:hover {
	color: var(--wp--preset--color--laiton);
}

.ql-pied .ql-pied-titre {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--laiton);
}

.ql-liste-simple {
	list-style: none;
	padding-left: 0;
}

.ql-liste-simple li {
	margin-bottom: 0.4rem;
}

.ql-pied-separateur {
	width: auto;
	border: 0;
	border-top: 1px solid #2b3f60;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

/* ---------- En-tête collant ---------- */

.ql-entete-collant {
	position: sticky;
	top: 0;
	z-index: 50;
}

body.admin-bar .ql-entete-collant {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ql-entete-collant {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .ql-entete-collant {
		top: 0;
	}
}

/* ---------- Ajustements ---------- */

/* En-tête, contenu et pied de page s'enchaînent sans marge. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Surtitre plus clair sur fond sombre (photos, sections bleu marine). */
.wp-block-cover .is-style-surtitre,
.has-marine-background-color .is-style-surtitre {
	color: #e6c584;
}

.wp-block-cover .wp-block-cover__inner-container {
	text-shadow: 0 1px 14px rgba(10, 20, 40, 0.35);
}

.wp-block-cover .wp-block-button__link {
	text-shadow: none;
}

/* Grilles à nombre de colonnes fixe : 6 → 3 → 2 et 4 → 2 → 1. */
.wp-block-group.ql-grille-6.is-layout-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wp-block-group.ql-grille-4.is-layout-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-block-group.ql-grille-3.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 780px) {
	.wp-block-group.ql-grille-3.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1100px) {
	.wp-block-group.ql-grille-4.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.wp-block-group.ql-grille-6.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.wp-block-group.ql-grille-6.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.ql-grille-4.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wp-block-cover .is-style-surtitre {
	text-shadow: 0 2px 10px rgba(5, 12, 25, 0.7);
}

/* Menu mobile centré. */
.ql-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.ql-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
}

.ql-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
}

/* ---------- Carte de prix ---------- */

.ql-carte-prix .ql-trait {
	margin-inline: auto !important;
}

.ql-prix {
	font-size: clamp(3rem, 6vw, 4rem);
	font-weight: 500;
	line-height: 1;
}


/* ---------- Vidéo ---------- */

.ql-video iframe {
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--custom--ombre);
}

/* ---------- Affiche ---------- */

.ql-affiche img {
	box-shadow: var(--wp--custom--ombre);
}

.wpcf7-form .ql-form-case {
	align-self: end;
	padding-bottom: 0.4rem;
}

/* Titre de carte cliquable (ex. Maestro Croisières). */
.is-style-carte h3 a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--laiton);
	text-underline-offset: 0.2em;
}

.is-style-carte h3 a:hover {
	color: var(--wp--preset--color--ocean);
}

/* Galeries : toutes les photos au même format paysage, même si l'une est en hauteur. */
.wp-block-gallery.ql-galerie.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* ---------- Sélecteur de langue (drapeaux) ---------- */

.ql-langues {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.ql-drapeau {
	display: block;
	line-height: 0;
	border-radius: 4px;
	opacity: 0.5;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ql-drapeau img {
	display: block;
	width: 28px;
	height: 20px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(20, 41, 74, 0.25);
}

.ql-drapeau:hover,
.ql-drapeau:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

.ql-drapeau.is-actif {
	opacity: 1;
}

.ql-drapeau.is-actif img {
	box-shadow: 0 0 0 2px var(--wp--preset--color--laiton);
}