/**
 * Ajustements MOBILE — aucun impact desktop.
 *
 * 600px = point de bascule natif du bloc Navigation (hamburger < 600px).
 * 781px = point de bascule natif des colonnes (elles s'empilent <= 781px).
 */

/* ============================================================
 * 1. Téléphone (< 600px)
 * ============================================================ */
@media (max-width: 599.98px) {

	/* --- Header : une seule ligne + hauteur réduite --- */
	.vv-header-bar {
		flex-wrap: nowrap;
		padding-top: 0.45rem !important;
		padding-bottom: 0.45rem !important;
	}

	.vv-header-bar .wp-block-site-logo,
	.vv-header-bar .wp-block-site-logo img {
		width: 46px;
	}

	/* Sélecteur de langue + bouton tél : masqués dans la barre tant qu'ils y
	   sont (avant relocation JS / si JS absent). Une fois déplacés dans le
	   menu ouvert, ils ne sont plus enfants directs de .vv-header-actions →
	   réaffichés. */
	.vv-header-actions > .vv-lang-switch,
	.vv-header-actions > .wp-block-buttons {
		display: none;
	}

	.wp-block-navigation__responsive-container .vv-menu-extras {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		margin-top: 1.75rem;
	}

	.wp-block-navigation__responsive-container .vv-menu-extras .wp-block-buttons {
		margin: 0;
	}

	/* --- Accueil : photo du bloc de bienvenue en pleine largeur, non rognée --- */
	/* On neutralise le grand espace bas du hero (overlap desktop) sur mobile. */
	.page-id-24 .has-creme-background-color[style*="30vh"] {
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Groupe qui porte la photo château : pleine largeur, sans décalage. */
	.page-id-24 .has-charbon-background-color {
		padding: 0 !important;
	}

	.page-id-24 .has-charbon-background-color .wp-block-cover {
		margin-top: 0 !important;
		min-height: 0 !important;
	}

	/* L'image de fond du Cover repasse en flux : affichée entière, non rognée. */
	.page-id-24 .has-charbon-background-color .wp-block-cover__image-background {
		position: relative;
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: contain;
	}

	.page-id-24 .has-charbon-background-color .wp-block-cover__inner-container {
		display: none;
	}

	/* --- Footer : logo + coordonnées sur une ligne --- */
	.vv-footer-brand {
		flex-wrap: nowrap;
		align-items: center;
	}

	.vv-footer-brand > .wp-block-site-logo,
	.vv-footer-brand > .wp-block-site-logo img {
		flex: 0 0 auto;
		width: 90px;
	}
}

/* ============================================================
 * 2. Utilitaire éditeur : photo sous le texte (colonnes empilées, <= 781px)
 *
 * À ajouter dans « Réglages avancés › Classe(s) CSS additionnelle(s) » :
 *   - sur le bloc « Colonnes » : la colonne contenant la photo passe en bas ;
 *   - ou directement sur la colonne qui contient la photo.
 * ============================================================ */
@media (max-width: 781px) {

	.vv-photo-sous-texte.wp-block-columns > .wp-block-column:has( .wp-block-image ),
	.wp-block-column.vv-photo-sous-texte {
		order: 1;
	}
}