/**
 * Garde-fou d'affichage mobile.
 *
 * Une poignée de règles chargées sur tout le site, pour les débordements que le
 * thème et Elementor provoquent en dehors de nos propres blocs. Rien de
 * décoratif ici : uniquement ce qui empêche la page de défiler latéralement,
 * ce qui rend un site inutilisable au doigt.
 *
 * @package Amanar
 */

/*
 * Les grilles d'Elementor portent des marges négatives de 20 px pour compenser
 * l'écart entre colonnes. Sur téléphone il n'y a plus qu'une colonne : la
 * compensation ne compense plus rien et dépasse de l'écran des deux côtés.
 */
@media ( max-width: 767px ) {

	/*
	 * Elementor pose la marge négative par une règle qui vise l'identifiant du
	 * widget — plus spécifique que n'importe quel sélecteur de classe. D'où le
	 * !important, limité aux deux marges horizontales des widgets de grille.
	 */
	[class*="elementor-grid-"] > .elementor-widget-container,
	.elementor-widget-loop-grid > .elementor-widget-container,
	.elementor-widget-loop-carousel > .elementor-widget-container,
	.elementor-widget-posts > .elementor-widget-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.elementor-loop-container.elementor-grid,
	.elementor-posts-container.elementor-grid {
		margin-left: 0;
		margin-right: 0;
	}

	/* Un média ne dépasse jamais sa colonne. */
	.elementor img,
	.elementor video,
	.elementor iframe {
		max-width: 100%;
		height: auto;
	}

	/* Un tableau large défile dans son propre cadre, pas avec la page. */
	.elementor-widget-text-editor table,
	.amanar-tarifs-detail table {
		display: block;
		width: 100%;
		overflow-x: auto;
	}
}

/* ==================================================================
 * Débordements horizontaux causés par les décors en position absolue
 *
 * Sur « Qui suis-je ? », deux images décoratives sont posées en absolu
 * avec un décalage (left: 67.5px et 135px). Leur conteneur garde la
 * largeur pleine et dépasse donc de 90 px à droite : la page défilait
 * latéralement alors qu'aucun contenu visible ne sortait de l'écran.
 *
 * `clip` plutôt que `hidden` : il coupe sans créer de conteneur de
 * défilement, donc les éléments collants (l'en-tête) continuent de
 * fonctionner.
 * ================================================================== */

.elementor {
	overflow-x: clip;
}

/*
 * Le liseré sombre au bord des bandes de couleur.
 *
 * Quand les colonnes d'une bande colorée ne totalisent pas exactement la
 * largeur de leur section, le fond de la section apparaît sur quelques
 * pixels — un trait vert très foncé, lu comme une bordure noire, au bord
 * droit de la bande « Voyager autrement ».
 *
 * On laisse la dernière colonne occuper l'espace restant.
 */
.elementor-inner-section > .elementor-container > .elementor-column:last-child {
	flex-grow: 1;
}

/*
 * Les icônes de réseaux du panneau latéral.
 *
 * Elementor n'écrit pas la couleur choisie dans le CSS généré du popup :
 * les icônes restent au gris #69727d par défaut, terne sur le fond blanc
 * du panneau. On les aligne sur le vert sombre des titres, avec le doré
 * de la marque au survol.
 */
#elementor-popup-modal-4600 .elementor-social-icon {
	background-color: transparent;
}

#elementor-popup-modal-4600 .elementor-social-icon i,
#elementor-popup-modal-4600 .elementor-social-icon svg {
	color: #1c211e;
	fill: #1c211e;
	transition: color .2s ease, fill .2s ease;
}

#elementor-popup-modal-4600 .elementor-social-icon:hover i,
#elementor-popup-modal-4600 .elementor-social-icon:hover svg {
	color: #c8a638;
	fill: #c8a638;
}