/**
 * Composants transverses (boutons, liens...).
 */

/* ---------------------------------------------------------------------------
 * Neutralisation des états de survol du thème parent.
 *
 * hello-elementor/assets/css/reset.css impose deux règles agressives :
 *   a:active, a:hover                { color: #336 }          (bleu nuit)
 *   button:hover, [type=submit]:hover { background: #c36; color: #fff }  (framboise)
 *
 * Nos sélecteurs de classe les emportent : `.btn:hover` pèse (0,2,0) contre
 * (0,1,1) pour `a:hover`. On redéclare donc explicitement l'état de survol de
 * chaque composant plutôt que de tenter un reset global, qui écraserait à son
 * tour nos propres règles.
 * ------------------------------------------------------------------------ */

.btn--gold:hover,
.btn--gold:focus {
	background: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
}

/* ---------------------------------------------------------------------------
 * Bouton doré à pastille fléchée
 * ------------------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--anidjar-espace-sm);
	box-sizing: border-box;
	min-height: 42px;
	padding: 5px 5px 5px var(--anidjar-espace-md);
	border: 0;
	border-radius: var(--anidjar-rayon-pilule);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--anidjar-transition), box-shadow var(--anidjar-transition);
}

.btn--gold {
	background: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
}

/* Grande variante : bandeau d'appel à l'action (376,67 × 70 dans la maquette). */
.btn--lg {
	min-height: 70px;
	padding: 8px 8px 8px 69px;
	gap: 38px;
	font-size: var(--anidjar-fs-md); /* 24px */
}

.btn--lg .btn__icon {
	width: 53.33px;
	height: 53.33px;
}

.btn--lg .btn__icon svg {
	width: 25px;
}

/* Sur petit écran, 69px de retrait + une pastille de 53 dépassent la gouttière. */
@media (max-width: 600px) {
	.btn--lg {
		max-width: 100%;
		padding-left: var(--anidjar-espace-md);
		gap: var(--anidjar-espace-sm);
		font-size: var(--anidjar-fs-sm);
	}

	.btn--lg .btn__icon {
		width: 40px;
		height: 40px;
	}

	.btn--lg .btn__icon svg {
		width: 18px;
	}
}

.btn__label {
	white-space: nowrap;
}

/* Sur mobile, un libellé long sortait de l'écran : on l'autorise à passer sur
   plusieurs lignes plutôt que de déborder. */
@media (max-width: 900px) {
	.btn {
		max-width: 100%;
	}

	.btn__label {
		white-space: normal;
		overflow-wrap: break-word;
	}
}

.btn__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--anidjar-ivoire);
	color: var(--anidjar-brun);
}

.btn__icon svg {
	width: 15px;
	height: auto;
	transition: transform var(--anidjar-transition);
}

.btn:hover {
	box-shadow: var(--anidjar-ombre-carte);
}

.btn:hover .btn__icon svg {
	transform: translateX(2px);
}

.btn:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn__icon svg {
		transition: none;
	}

	.btn:hover .btn__icon svg {
		transform: none;
	}
}

/* Voile clair des images masquées (anidjar_the_masked_image). Inactif par
   défaut : chaque section l'active quand son texte passe sur l'image. */
.anidjar-masked-veil {
	opacity: 0;
	transition: opacity var(--anidjar-transition);
	pointer-events: none;
}

/* Sur mobile, le texte occupe toute la largeur : un dégradé laisserait un pan
   de l'image non voilé, donc du texte illisible. On repasse en voile uniforme
   (le `fill` du SVG est surchargeable en CSS). */
@media (max-width: 900px) {
	.anidjar-masked-veil {
		fill: #fffaf2;
	}
}

/* ---------------------------------------------------------------------------
 * Boutons ronds de contact (téléphone, WhatsApp)
 *
 * Réutilisés dans l'en-tête, les bandeaux CTA et le bloc contact. Chacun porte
 * son lien (tel: / wa.me). Icône seule par défaut ; libellé optionnel.
 * ------------------------------------------------------------------------ */

.contact-pills {
	display: flex;
	align-items: center;
	gap: var(--anidjar-espace-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--anidjar-espace-sm);
	color: var(--anidjar-brun);
	text-decoration: none;
}

.contact-pill__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--anidjar-ivoire);
	color: var(--anidjar-brun);
	transition: transform var(--anidjar-transition), background-color var(--anidjar-transition),
		background-image var(--anidjar-transition), color var(--anidjar-transition);
}

.contact-pill__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.contact-pill__label {
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	color: var(--anidjar-texte);
}

/* Survol : la pastille se soulève et prend la couleur du canal (vert WhatsApp,
   or pour le téléphone). Les sélecteurs de classe emportent le a:hover:#336. */
.contact-pill:hover .contact-pill__icon,
.contact-pill:focus-visible .contact-pill__icon {
	transform: translateY(-2px);
}

.contact-pill--whatsapp:hover .contact-pill__icon,
.contact-pill--whatsapp:focus-visible .contact-pill__icon {
	background-color: #25d366;
	color: #fff;
}

.contact-pill--phone:hover .contact-pill__icon,
.contact-pill--phone:focus-visible .contact-pill__icon {
	background-image: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
}

.contact-pill:focus-visible {
	outline: none;
}

.contact-pill:focus-visible .contact-pill__icon {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.contact-pill__icon {
		transition: none;
	}

	.contact-pill:hover .contact-pill__icon {
		transform: none;
	}
}