/* =====================================================================
   Ville Voisin — Style par défaut de TOUS les boutons (core/button)
   Calqué sur le CTA « Réserver » de l'accueil. Chargé uniquement quand
   un bloc bouton est présent (via wp_enqueue_block_style — RGESN).
   ===================================================================== */

/* Aucun bouton n'est jamais arrondi */
.wp-block-button > .wp-block-button__link {
	border-radius: 2px !important;
}

/* Boutons pleins (style par défaut) = apparence « Réserver » */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--vert-vv) !important;
	color: var(--wp--preset--color--creme) !important;
	border: 0 !important;
	padding: 15px 30px !important;
	font-size: 0.82rem !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--vert-vv-fonce) !important;
	color: var(--wp--preset--color--creme) !important;
}

/* Boutons « Outline » (alternative conservée) : forme cohérente, jamais arrondie */
.wp-block-button.is-style-outline > .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.82rem;
}

/* Épaisseur de bordure UNIFORME sur tout le site = celle du CTA de la page
   d'accueil (2px, valeur par défaut du style outline). Neutralise les largeurs
   ponctuelles (ex. bouton de contact du header réglé à 1.5px) pour une bordure
   identique sur tous les boutons outline. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px !important;
}

/* Focus clavier visible (RGAA) — tous les boutons */
.wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--vert-vv-fonce);
	outline-offset: 2px;
}

/* Pictogramme téléphone (décoratif) sur le bouton de contact du header.
   SVG en mask → hérite de la couleur du texte (currentColor). Le nom accessible
   du bouton reste le numéro lui-même (RGAA). */
.wp-block-button.vv-btn-tel > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.55em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Survol du bouton téléphone (outline) = même langage que les boutons « Réserver » :
   remplissage vert foncé + texte crème. Le picto (currentColor) passe en crème avec le texte. */
.wp-block-button.vv-btn-tel > .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.vv-btn-tel > .wp-block-button__link:hover,
.wp-block-button.vv-btn-tel > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--vert-vv-fonce) !important;
	color: var(--wp--preset--color--creme) !important;
	border-color: var(--wp--preset--color--vert-vv-fonce) !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.vv-btn-tel > .wp-block-button__link {
		transition: none;
	}
}

/* CTA téléphone de la page d'accueil : même taille de police (et donc de bouton)
   que les CTA « Réserver » des autres pages (.vv-cta-phone = 1.05rem). Scopé à
   `main` (contenu de page) pour NE PAS agrandir le bouton de contact du header,
   qui porte la même classe vv-btn-tel mais est rendu dans le <header>. */
main .wp-block-button.vv-btn-tel > .wp-block-button__link {
	font-size: 1.05rem;
	letter-spacing: normal;
}

/* CTA « Réserver » en bas de page (encart vert : chambres, événements, pages) =
   même style que le CTA de la page d'accueil : fond crème CLAIR par défaut
   (texte + bordure vert foncé), puis remplissage vert FONCÉ + texte crème au
   survol/focus. Le bouton est un `is-style-outline` (texte/bordure crème dans le
   markup) ; on force ici le remplissage clair par défaut et l'inversion au survol.
   Centralisé dans ce plugin car sa feuille se charge sur toute page contenant un
   bouton (les single.css des CPT ne se chargent pas sur Tourisme/Contact/À propos). */
.vv-cta-phone .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--creme) !important;
	color: var(--wp--preset--color--vert-vv-fonce) !important;
	border-color: var(--wp--preset--color--vert-vv-fonce) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vv-cta-phone .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.vv-cta-phone .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--vert-vv-fonce) !important;
	color: var(--wp--preset--color--creme) !important;
	border-color: var(--wp--preset--color--vert-vv-fonce) !important;
}

@media (prefers-reduced-motion: reduce) {
	.vv-cta-phone .wp-block-button.is-style-outline > .wp-block-button__link {
		transition: none;
	}
}

/* Picto téléphone + taille du libellé du CTA « Réserver ».
   Repris des single.css chambres/événements pour que TOUTE page portant un
   bouton .vv-cta-phone (Contact, À propos, Tourisme…) affiche le même bouton,
   même sans les feuilles des CPT. */
.vv-cta-phone {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/* Picto + libellé alignés dans le bouton. */
.vv-cta-phone .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Lisibilité du numéro : on neutralise la MAJUSCULE/condensé du style bouton global. */
.vv-cta-phone .wp-block-button.is-style-outline > .wp-block-button__link {
	font-size: 1.05rem;
	letter-spacing: normal;
	text-transform: none;
}

/* Pictogramme téléphone décoratif (masque SVG, hérite de la couleur du texte). */
.vv-cta-phone .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 0.9em;
	height: 0.9em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Focus clavier visible sur fond vert (RGAA) — contour crème lisible. */
.vv-cta-phone .wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--creme, #fbfaf3);
	outline-offset: 3px;
}

/* Flèche fine automatique quand le lien s'ouvre dans un nouvel onglet (target="_blank").
   SVG en mask → hérite de la couleur du texte. Trait fin (« fine flèche, jamais grosse flèche bleue »). */
.wp-block-button > .wp-block-button__link[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.5em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.wp-block-button > .wp-block-button__link[target="_blank"]:hover::after,
.wp-block-button > .wp-block-button__link[target="_blank"]:focus::after {
	transform: translate(1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button > .wp-block-button__link,
	.wp-block-button > .wp-block-button__link[target="_blank"]::after {
		transition: none;
	}
}