/*
Theme Name: Voyage Moto Québec
Template: kadence
Description: Thème enfant de Kadence, habillage de la maquette A (comparateur d'abord). Ne contient que du style.
Author: Bravad
Version: 1.1.0
Text Domain: vmq-kadence
*/

/* Palette Kadence remplacée par celle de la maquette : tous les réglages du thème suivent. */
:root {
	--global-palette1: #C23B12;
	--global-palette2: #A0300E;
	--global-palette3: #14181C;
	--global-palette4: #2C3237;
	--global-palette5: #44494F;
	--global-palette6: #767B82;
	--global-palette7: #F3F4F2;
	--global-palette8: #F7F7F5;
	--global-palette9: #FFFFFF;
	--global-body-font-family: 'Barlow', system-ui, sans-serif;
	--global-heading-font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--global-content-width: 1200px;
}

body { font-family: var(--global-body-font-family); color: #14181C; background: #F3F4F2; font-size: 17px; }
/* Fond gris de la maquette partout ; les cartes blanches ressortent. */
/* Kadence peint .site en blanc quand le contenu est « unboxed » : fond gris de la maquette sur les pages. */
body.page.content-style-unboxed .site, body.page .entry.content-bg { background: #F3F4F2; box-shadow: none; }
h1, h2, h3, h4, .entry-title { font-family: var(--global-heading-font-family); font-weight: 700; text-transform: uppercase; line-height: 1.05; letter-spacing: .01em; }
:focus-visible { outline: 3px solid #14181C; box-shadow: 0 0 0 6px #fff; }

/* ---------- En-tête sombre ---------- */
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#mobile-header .site-header-row-container-inner { background: #14181C; }
#masthead .site-branding .site-title,
#mobile-header .site-branding .site-title { color: #fff; font-family: var(--global-heading-font-family); font-weight: 700; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; }
#masthead .site-branding .site-description { display: none; }
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { color: #fff; font-weight: 500; font-size: 16px; }
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a { color: #F0B49E; }
#masthead .main-navigation .primary-menu-container > ul > li.vmq-menu-cta > a { background: #C23B12; color: #fff; border-radius: 6px; padding: 10px 18px; margin-left: 8px; font-weight: 600; }
#masthead .main-navigation .primary-menu-container > ul > li.vmq-menu-cta > a:hover { background: #A0300E; color: #fff; }
#mobile-header .menu-toggle-open, #mobile-header .menu-toggle-open .menu-toggle-icon { color: #fff; }
#mobile-drawer .drawer-inner { background: #14181C; }
#mobile-drawer .mobile-navigation ul li > a { color: #fff; font-size: 18px; }

/* ---------- Pages pleine largeur faites de blocs (accueil) ---------- */
.vmq-section, .vmq-hero { padding: 64px 24px; margin: 0 !important; }
/* 1152 px = largeur utile de l'en-tête Kadence (1200 - 2 x 24) : sections alignées sur le logo. */
.vmq-section > *, .vmq-hero > * { max-width: 1152px; margin-left: auto !important; margin-right: auto !important; }
.entry-content .vmq-carte p, .entry-content .vmq-carte h3 { margin: 0; }
.vmq-section { background: #F3F4F2; }
.vmq-section--blanc { background: #fff; }
.vmq-section--sombre { background: #14181C; color: #fff; }
.vmq-section--sombre h2, .vmq-section--sombre p { color: inherit; }
.vmq-section h2 { font-size: clamp(32px, 5vw, 40px); margin-top: 0; margin-bottom: 24px; }
/* Kadence enveloppe le contenu des groupes dans .wp-block-group__inner-container */
.vmq-section .vmq-entete { margin-bottom: 24px; }
.vmq-section .vmq-entete > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.vmq-section .vmq-entete h2 { margin: 0; }
.vmq-section .vmq-entete p { margin: 0; }
.vmq-section .vmq-entete a { font-weight: 600; text-decoration: underline; color: #14181C; }

.vmq-hero { background: linear-gradient(180deg, #14181C 0%, #222A31 100%); color: #fff; padding-top: 64px; padding-bottom: 72px; }
.vmq-hero h1 { color: #fff; font-size: clamp(40px, 7vw, 64px); line-height: 1.02; max-width: 840px; margin: 0 0 24px !important; }
.vmq-hero p { color: #D5DAE0; font-size: 19px; line-height: 1.5; max-width: 660px; margin-bottom: 24px !important; }
.vmq-hero .vmq-eyebrow, .vmq-eyebrow { color: #F0B49E; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; margin: 0 0 16px !important; }
.vmq-section .vmq-eyebrow { color: #C23B12; }

.vmq-phil { gap: 40px !important; align-items: center !important; }
.vmq-phil h2 { font-size: clamp(32px, 5vw, 44px); }
.vmq-phil ul { font-size: 18px; line-height: 1.5; color: #2C3237; }
.vmq-phil .wp-block-image img { border-radius: 12px; width: 100%; height: auto; }
.vmq-photo-vide { min-height: 340px; border-radius: 12px; background: linear-gradient(135deg, #56626D 0%, #2B343C 100%); color: #E8ECEF; font-size: 14px; display: flex; align-items: flex-end; padding: 16px; margin: 0; }

.vmq-infolettre-section .wp-block-columns { gap: 32px; align-items: center; }
.vmq-infolettre-section h2 { font-size: clamp(30px, 4.5vw, 40px); margin-bottom: 10px; }
.vmq-infolettre-section p { color: #D5DAE0; font-size: 17px; }

/* Boutons des blocs = boutons de la maquette */
.wp-block-button__link, .wp-element-button { background: #C23B12; color: #fff; border-radius: 6px; padding: 14px 26px; font-weight: 600; }
.wp-block-button__link:hover { background: #A0300E; color: #fff; }

/* Titres de page (pages intérieures) */
.entry-hero .entry-header .entry-title, .entry-header .entry-title { font-size: clamp(36px, 6vw, 56px); }
.single-voyage .entry-title, .single-itineraire .entry-title, .single-hotels .entry-title, .single-spots-a-phil .entry-title { font-size: clamp(34px, 5vw, 48px); }

/* Bannière des pages internes : l'image à la une de la page sert de fond au titre. */
.page-hero-section .entry-hero-container-inner { position: relative; display: flex; align-items: flex-end; min-height: 360px; background-color: #222A31; }
.page-hero-section .hero-section-overlay { position: absolute; inset: 0; opacity: 1; background: linear-gradient(180deg, rgba(20, 24, 28, .1) 0%, rgba(20, 24, 28, .72) 100%); }
.page-hero-section .hero-container { position: relative; z-index: 1; width: 100%; padding-top: 48px; padding-bottom: 40px; }
.page-hero-section .entry-title { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
@media (max-width: 767px) {
	.page-hero-section .entry-hero-container-inner { min-height: 220px; }
	.page-hero-section .hero-container { padding-bottom: 24px; }
}

/* ---------- Pied de page ---------- */
.vmq-pied { background: #0E1114; color: #C3C9D0; font-size: 14px; line-height: 1.5; }
.vmq-pied__inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 8px; display: flex; flex-direction: column; gap: 12px; }
.vmq-pied p { margin: 0; max-width: 760px; }
.vmq-pied a { color: #fff; }
.vmq-pied__agences { color: #fff; font-weight: 600; }
.vmq-pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.vmq-pied__liens a { color: #C3C9D0; text-decoration: underline; }
#colophon .site-footer-row-container-inner, .site-footer .site-bottom-footer-wrap .site-footer-row-container-inner { background: #0E1114; color: #8A9199; }
#colophon a { color: #C3C9D0; }

@media (max-width: 767px) {
	.vmq-section, .vmq-hero { padding: 44px 16px; }
	.vmq-recherche .vmq-bouton { width: 100%; }
}