/*
Theme Name: Sainte Rita
Description: Thème enfant de Hello Elementor pour le site de l'Église Sainte Rita (Nice). Ne contient aucun template d'affichage : la mise en forme est assurée par les Theme Builder templates d'Elementor Pro, qui lisent le contenu via les Dynamic Tags. Les types de contenu, taxonomies, champs et réécritures d'URL sont portés par l'extension sainte-rita-core.
Author: Thomas Poulain
Template: hello-elementor
Version: 3.41.1
Requires PHP: 8.1
Text Domain: sainte-rita
*/

/* Le contour visuel est monté dans Elementor.
   Ce fichier ne reçoit que les correctifs qui ne peuvent pas y vivre. */

/* --- Colonne latérale des gabarits single -----------------------------------

   Menu WordPress rendu tel quel par wp_nav_menu() (widget Shortcode), donc
   avec les classes par défaut de WordPress plutôt que celles d'Elementor : la
   liste garde ses puces et son indentation par défaut sans ce reset.
   L'entrée active porte déjà la classe .current-menu-item, posée par
   WordPress lui-même — la couleur ci-dessous ne fait que la reprendre. */
/* Boîte « Actualités publiées » : bordure et fond repris de
   .sidebar-full-articles .uk-tile-secondary sur le site Joomla d'origine.
   Classe dédiée (sr-sidebar-actualites, pas sr-sidebar-section) : ce dernier
   nom est déjà le container_class posé par wp_nav_menu() pour les colonnes à
   menu des autres sections — leur donner aussi cette bordure produisait un
   double encadré (la leur, déjà posée dans Elementor, plus celle-ci). */
.sr-sidebar-actualites {
	background: #ffffff;
	padding: 20px;
	border: 1px solid #D1D3D4;
}

.sr-sidebar-section-titre {
	margin: 0 0 8px 0;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #e44e56;
}

.sr-sidebar-section-liste,
.sr-sidebar-section-liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-sidebar-section-liste li {
	margin: 0;
}

.sr-sidebar-section-liste ul {
	padding-left: 16px;
}

.sr-sidebar-section-liste a {
	display: block;
	padding: 10px 0;
	color: #374047 !important;
	font-size: 14px;
}

/* Page courante et branche qui y mène, en orange — WordPress pose ces classes
   lui-même (current-menu-item sur la page exacte, current-menu-ancestor /
   current-menu-parent sur les entrées de premier niveau qui la contiennent),
   pas besoin de les calculer ici. */
.sr-sidebar-section-liste .current-menu-item > a,
.sr-sidebar-section-liste .current-menu-ancestor > a,
.sr-sidebar-section-liste .current-menu-parent > a {
	color: #e0862c !important;
	font-weight: 700;
}

/* Accordéon sans JavaScript : seule la branche qui contient la page courante
   reste dépliée, les autres sous-menus restent en place dans le HTML (pas de
   contenu perdu pour le SEO ou l'accessibilité) mais masqués. Les mêmes
   classes que ci-dessus décident lesquels rester ouverts. */
.sr-sidebar-section-liste .sub-menu {
	display: none;
}

.sr-sidebar-section-liste .current-menu-ancestor > .sub-menu,
.sr-sidebar-section-liste .current-menu-parent > .sub-menu,
.sr-sidebar-section-liste .current-menu-item > .sub-menu {
	display: block;
}

/* --- Bouton global « button-global » ----------------------------------------

   Classe posée à la main dans Elementor, sur chaque bouton concerné — pas de
   liste centralisée ici, Thomas l'ajoute lui-même bouton par bouton. Couleur,
   bordure et survol restent de son ressort ; cette règle ne fait que ce
   qu'Elementor ne sait pas faire par lui-même :

   1. Redimensionner l'icône SVG posée à gauche. C'est une image vectorielle
      personnalisée (pas un glyphe de bibliothèque) : Elementor l'insère avec
      sa taille d'origine (50 x 50 dans le fichier), sans réglage pour la
      changer.
   2. Poser la flèche jaune à droite. Le widget Bouton ne prend qu'une seule
      icône, casée à gauche ou à droite du texte, jamais les deux en même
      temps. La flèche est donc un pseudo-élément, à la manière de l'icône
      Accueil du menu et de la couverture du panneau Boutique plus bas. */

/* La classe est posée dans l'onglet Avancé du widget, qui la pose sur le
   conteneur du widget (.elementor-widget-button) et non sur le lien qu'il
   contient (.elementor-button) — d'où le sélecteur en descendant, et non en
   classes combinées sur un seul élément. */
/* Réserve symétrique à gauche et à droite (icône, puis flèche) : c'est cette
   symétrie qui permet au texte de se centrer sur le bouton entier, et non
   sur un sous-espace décalé par une réserve à sens unique. */
.button-global .elementor-button {
	position: relative;
	padding-left: 54px !important;
	padding-right: 54px !important;
}

.button-global .elementor-button-icon svg {
	width: 50px;
	height: 50px;
}

/* Chaque trait de l'icône porte sa propre couleur en attribut fill : une
   règle CSS l'emporte sur cet attribut de présentation sans besoin de
   !important, d'où le passage au blanc au survol. */
.button-global .elementor-button:hover .elementor-button-icon svg path {
	fill: #ffffff;
}

/* L'icône sort du flux (position absolue) : le texte reste alors seul dans
   le conteneur flex, et le centrage qu'Elementor lui applique déjà porte
   sur le bouton entier plutôt que sur l'espace restant après l'icône. */
.button-global .elementor-button .elementor-button-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.button-global .elementor-button .elementor-button-content-wrapper {
	width: 100%;
}

.button-global .elementor-button .elementor-button-text {
	text-align: center;
}

.button-global .elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23F9C95A'/%3E%3Cpath d='M13 10l6 6-6 6' stroke='%23ffffff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --- Entrées de menu traitées à part ---------------------------------------

   Elementor ne sait pas styler une entrée de menu en particulier. Les entrées
   concernées portent donc une classe, posée par la commande
   « wp sainte-rita menu », et le traitement vit ici.

   L'icône de maison est une SVG en fond, et non un caractère de police : cela
   évite de dépendre du chargement de Font Awesome, qu'Elementor n'inclut que
   si un widget en réclame.
-------------------------------------------------------------------------- */

/* L'icône ne remplace le libellé que dans la barre de bureau. Dans le panneau
   mobile, « Accueil » reste un texte, comme sur le site d'origine — sans cette
   restriction, le libellé et l'icône se superposaient. */
.elementor-nav-menu--main .sr-menu-accueil > a .elementor-item-title,
.elementor-nav-menu--main .sr-menu-accueil > a {
	font-size: 0 !important;          /* masque le libellé « Accueil » */
	line-height: 0 !important;
	/* Elementor rend ses entrées en flex. Sans ces deux lignes, l'icône n'est
	   pas centrée sur la hauteur du bandeau. */
	align-items: center;
	justify-content: center;
	/* Largeur imposée : la base flex de l'icône ne suffisait pas à donner sa
	   largeur au lien, qui restait à ses seules marges et laissait l'icône
	   déborder sur l'entrée suivante. 18 px d'icône plus les 2 x 10 px de
	   marge, soit la même respiration que les autres entrées. */
	min-width: 38px;
}

.elementor-nav-menu--main .sr-menu-accueil > a.elementor-item::before,
.elementor-nav-menu--main .sr-menu-accueil > a::before {
	content: "";
	/* flex 0 0 : dans le conteneur flex du lien, l'icône se rétractait à
	   néant et le lien ne mesurait plus que ses marges — l'icône débordait
	   sur l'entrée suivante. La base fixe lui rend sa largeur, et l'entrée
	   retrouve le même espacement que les autres. */
	flex: 0 0 18px;
	display: block;
	width: 18px;
	height: 18px;
	/* !important nécessaire : Elementor applique la couleur d'accent de son
	   kit (#61ce70 par défaut) au même pseudo-élément, via le style de
	   pointeur du widget de menu, et l'emporte sur une règle simple. */
	background-color: #666666 !important;
	/* Elementor réserve ce pseudo-élément à son « pointeur » de menu et le
	   garde transparent tant que l'entrée n'est pas active. L'icône
	   n'apparaissait donc que sur la page d'accueil. */
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	-webkit-mask: var(--sr-icone-maison) no-repeat center / contain;
	        mask: var(--sr-icone-maison) no-repeat center / contain;
}

.elementor-nav-menu--main .sr-menu-accueil > a:hover::before,
.elementor-nav-menu--main .sr-menu-accueil.current-menu-item > a::before {
	background-color: #2d2e33 !important;
}

:root {
	--sr-icone-maison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
}

/* « Boutique » sur son fond jaune, comme sur le site d'origine. */
.sr-menu-boutique > a {
	background-color: #F9C95A;
	padding-left: 18px !important;
	padding-right: 18px !important;
	/* !important : la couleur du menu vient de la typographie globale du
	   kit (#666666), à plus forte spécificité qu'une règle simple. */
	color: #ffffff !important;
}

.sr-menu-boutique > a:hover,
.sr-menu-boutique > a:focus {
	background-color: #f3bd3d;
	color: #ffffff !important;
}

/* --- Accès compte et panier : icône au-dessus du texte ---------------------

   La classe « icon-top-menu » est posée sur le widget de liste à icônes de
   l'en-tête. Elementor dispose l'icône et le texte en ligne ; on bascule le
   conteneur en colonne.

   Deux sélecteurs sont nécessaires : selon le réglage « lien sur toute la
   largeur », le conteneur flex est soit l'élément de liste, soit le lien
   qu'il contient.
-------------------------------------------------------------------------- */

.icon-top-menu .elementor-icon-list-item,
.icon-top-menu .elementor-icon-list-item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.icon-top-menu .elementor-icon-list-icon {
	margin: 0;
	padding: 0;
}

/* En disposition « inline », Elementor sépare les entrées par un trait
   vertical calé sur une hauteur de ligne unique : il tombe de travers une
   fois les entrées empilées. */
.icon-top-menu .elementor-inline-item:not(:last-child)::after {
	display: none;
}

/* --- Panneau Boutique -------------------------------------------------------

   Le site d'origine ouvre au survol de « Boutique » un panneau large rangé en
   colonnes. On le reproduit à partir du sous-menu WordPress : la branche
   Boutique descend d'un niveau de plus que les autres, ses intitulés de
   rubrique portent la classe « sr-boutique-rubrique ».

   Desktop seulement. Sur mobile le menu reste tel quel, comme demandé : un
   panneau de cette taille n'y a pas de sens.
-------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* Le panneau se cale sur la barre entière, pas sur l'entrée survolée. */
	.elementor-nav-menu--main > .elementor-nav-menu {
		position: relative;
	}

	.sr-menu-boutique {
		position: static !important;
	}

	/* --- Fondu des sous-menus classiques (« Qui sommes-nous ? », etc.) ------

	   Même mécanisme que le panneau Boutique ci-dessous, et pour la même
	   raison : SmartMenus les affiche par un display:none → block en
	   JavaScript, ce qu'une transition CSS ne sait pas animer. Le sous-menu
	   reste donc rendu en permanence — il est positionné en absolu par
	   Elementor, donc sans effet sur la mise en page — et l'opacité fait
	   tout le travail.

	   Explicitement exclu de « Boutique » : sa liste ci-dessous a ses propres
	   règles, avec display:grid et non block. Sans ce :not(), cette règle-ci
	   l'emportait — quatre classes plus un élément contre deux classes pour
	   la règle du panneau — et le panneau se retrouvait empilé en pleine
	   largeur, sa grille de cinq colonnes réduite à néant. */
	.elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:not(.sr-menu-boutique) > .elementor-nav-menu--dropdown {
		display: block !important;
		/* Le <li> porte lui-même position:relative (réglage d'Elementor), ce
		   qui en fait le bloc de référence de ce sous-menu absolument
		   positionné. Sans largeur explicite, le calcul « shrink-to-fit »
		   se limite à la largeur du lien parent (« Actualités » ≈ 156 px) et
		   non à celle du texte des sous-entrées. Le texte, en white-space:
		   nowrap, débordait alors visuellement de ce cadre trop étroit, sans
		   fond blanc pour le suivre — d'où l'effet de texte flottant
		   directement sur la page, sans encadré. max-content le redimensionne
		   sur son propre contenu ; max-width évite qu'un titre très long ne
		   pousse le menu hors de l'écran. */
		width: max-content;
		max-width: 320px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}

	/* max-width plafonne la largeur, mais Elementor garde ses liens en
	   white-space:nowrap. Sans repasser en « normal », un titre plus long
	   que 320 px déborderait exactement de la même façon, seulement
	   décalé : ici le texte revient à la ligne au lieu de sortir du cadre. */
	.elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:not(.sr-menu-boutique) > .elementor-nav-menu--dropdown a {
		white-space: normal;
	}

	.elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:not(.sr-menu-boutique):hover > .elementor-nav-menu--dropdown,
	.elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:not(.sr-menu-boutique):focus-within > .elementor-nav-menu--dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
	}

	/* Le panneau reste « display: grid » en permanence — il est positionné en
	   absolu (voir plus bas) et ne pèse donc pas sur la mise en page — et
	   c'est l'opacité qui pilote sa visibilité. C'est nécessaire pour obtenir
	   un fondu : Elementor bascule ses menus déroulants en display:none/block
	   par JavaScript (bibliothèque SmartMenus), et une transition CSS ne peut
	   pas animer un changement de display. En le gardant toujours rendu, seule
	   l'opacité varie, ce qui se transitionne normalement.
	   « visibility » suit avec un délai : il coupe les clics et la
	   tabulation tant que le panneau est invisible, et ne redevient actif
	   qu'une fois le fondu terminé à l'ouverture ; à la fermeture, il coupe
	   immédiatement pendant que l'opacité s'estompe. */
	.sr-menu-boutique > .elementor-nav-menu--dropdown {
		display: grid !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: none !important;
		/* !important : Elementor remet à zéro la marge intérieure de ses
		   déroulants. Valeur relevée sur le panneau d'origine. */
		padding: 25px !important;
		background: #ffffff;
		color: #666;
		box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
		/* Grille à placement explicite plutôt que column-count : ce dernier
		   fait couler les rubriques sans qu'on maîtrise leur répartition, et
		   la disposition dérivait de celle du site. Cinq colonnes, dont deux
		   pour « Objets religieux » qui en compte vingt-deux. */
		grid-template-columns: 1fr 1fr 1fr 1fr 0.9fr;
		grid-auto-rows: min-content;
		gap: 4px 36px;
		align-items: start;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	}

	.sr-menu-boutique:hover > .elementor-nav-menu--dropdown,
	.sr-menu-boutique:focus-within > .elementor-nav-menu--dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
	}

	/* Mot d'accueil et conditions d'envoi, repris du panneau d'origine. */
	.sr-menu-boutique > .elementor-nav-menu--dropdown::before {
		content: "BIENVENUE SUR NOTRE BOUTIQUE SAINTE RITA";
		white-space: pre-line;
		display: block;
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 22px;
		/* Valeurs relevées sur le panneau d'origine : Nunito Sans 14 px,
		   graisse 700, #6c6d74. */
		font-family: "Nunito Sans", sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.6;
		color: #6c6d74;
	}

	/* Les conditions d'envoi : même taille que les liens du panneau, en
	   graisse normale — le titre seul est en gras. Un second pseudo-élément
	   est nécessaire, le contenu de ::before ne pouvant porter deux styles. */
	.sr-menu-boutique > .elementor-nav-menu--dropdown::after {
		content: "Tous nos prix sont indiqués TTC et frais de port compris pour la France métropolitaine, Monaco et Andorre.\A Pour les autres destinations, les frais de port sont en supplément et sont calculés lorsque vous passez votre commande.";
		white-space: pre-line;
		display: block;
		grid-column: 1 / -1;
		grid-row: 2;
		margin-bottom: 20px;
		font-family: "Nunito Sans", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.6;
		color: #6c6d74;
	}

	/* Chaque rubrique reste d'un seul tenant, sauf la première — « Objets
	   religieux » liste les catégories boutique actives, en nombre variable
	   (ajoutées/retirées automatiquement selon le stock), répartie sur deux
	   colonnes. */
	.sr-menu-boutique .sr-boutique-rubrique {
		margin-bottom: 18px;
	}

	/* Placement calqué sur le site : Objets religieux occupe une colonne plus
	   large (sa liste est la plus longue et varie en longueur), Livres et
	   Cartes ensemble, Messes / Soutenir / Revue ensemble, puis la colonne
	   promotionnelle. grid-row en 3 / 8 (au lieu de 3 / 6) : marge pour une
	   liste plus longue que les vingt-deux entrées d'origine. */
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(1) { grid-column: 1 / 3; grid-row: 3 / 8; }
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(2) { grid-column: 3; grid-row: 3; }
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(3) { grid-column: 3; grid-row: 4; }
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(4) { grid-column: 4; grid-row: 3; }
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(5) { grid-column: 4; grid-row: 4; }
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(6) { grid-column: 4; grid-row: 5; }
	.sr-menu-boutique .sr-boutique-promo            { grid-column: 5; grid-row: 3 / 8; }

	/* Les entrées d'Objets religieux se répartissent en deux colonnes CSS,
	   qui s'équilibrent automatiquement quel que soit le nombre d'entrées.
	   break-inside: avoid (posé par le plugin sainte-rita-core, voir
	   inc/menu-boutique-dynamique.php) empêche un lien de se couper entre
	   les deux colonnes. */
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(1) > .elementor-nav-menu--dropdown {
		column-count: 2;
		column-gap: 36px;
	}

	/* Intitulé de rubrique : non cliquable, en capitales. */
	.sr-menu-boutique .sr-boutique-rubrique > a {
		pointer-events: none;
		/* Le site d'origine écrit ses intitulés en capitales dans le texte
		   même, sans text-transform. Nos libellés viennent du menu en casse
		   normale : on capitalise donc en CSS. Le reste est mesuré —
		   Nunito Sans 14 px, graisse 700, #666666. */
		text-transform: uppercase;
		font-family: "Nunito Sans", sans-serif;
		font-weight: 700 !important;
		font-size: 14px !important;
		color: #666666 !important;
		padding: 0 0 6px !important;
	}

	/* Le troisième niveau reste déroulant pour Elementor : dans le panneau, il
	   doit s'afficher en permanence, à plat sous son intitulé.

	   Restreint au panneau ouvert (:hover / :focus-within sur Boutique) : posé
	   sans condition, visibility:visible !important s'appliquait aussi quand
	   le panneau parent est fermé, et l'emportait sur le visibility:hidden
	   hérité de celui-ci. Ces listes de troisième niveau — et les liens
	   qu'elles contiennent — restaient donc survolables en permanence, à
	   l'endroit exact où le panneau apparaît une fois ouvert, même repositionné
	   loin en dessous après un défilement. Comme :hover remonte à tous les
	   ancêtres, survoler un de ces liens invisibles rouvrait le panneau tout
	   seul, sans jamais être passé sur « Boutique ». */
	.sr-menu-boutique:hover .sr-boutique-rubrique > .elementor-nav-menu--dropdown,
	.sr-menu-boutique:focus-within .sr-boutique-rubrique > .elementor-nav-menu--dropdown {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		position: static !important;
		box-shadow: none;
		width: auto !important;
		max-width: none !important;
		padding: 0;
		background: transparent !important;
	}

	.sr-menu-boutique .sr-boutique-rubrique > .elementor-nav-menu--dropdown {
		display: block !important;
		position: static !important;
		box-shadow: none;
		width: auto !important;
		max-width: none !important;
		padding: 0;
		background: transparent !important;
	}

	/* Elementor colore le fond de ses entrées de sous-menu ; dans un panneau
	   sur fond blanc, cela dessinait des pavés sombres. */
	.sr-menu-boutique .elementor-nav-menu--dropdown li:not(.sr-boutique-promo) > a {
		background: transparent !important;
	}

	/* Elementor pose white-space: nowrap par défaut sur ses liens de menu.
	   Sans repasser en « normal », un nom de catégorie plus long que sa
	   colonne (« Bougies et Cierges de neuvaine ») déborde tout droit dans
	   la colonne suivante au lieu de revenir à la ligne. */
	.sr-menu-boutique .sr-boutique-rubrique:nth-of-type(1) .elementor-nav-menu--dropdown a {
		white-space: normal !important;
	}

	/* Le chevron des intitulés n'a plus lieu d'être : rien ne se déplie. */
	.sr-menu-boutique .sr-boutique-rubrique > a .sub-arrow,
	.sr-menu-boutique .sr-boutique-rubrique > a .fa,
	.sr-menu-boutique .sr-boutique-rubrique > a svg {
		display: none !important;
	}

	.sr-menu-boutique .sr-boutique-rubrique .elementor-sub-item {
		padding: 3px 0 !important;
		/* Mesuré : Nunito Sans 14 px, graisse 500, #666666. */
		font-family: "Nunito Sans", sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: #666666 !important;
	}

	.sr-menu-boutique .sr-boutique-rubrique .elementor-sub-item:hover {
		color: #2d2e33 !important;
	}
}

/* --- Colonne « Revue Sainte Rita » du panneau -------------------------------

   La couverture est posée en image de fond plutôt qu'en balise : un menu
   WordPress ne porte pas d'image, et le fond ne coûte rien au HTML de chaque
   page — seul le fichier est chargé, puis mis en cache.

   L'intitulé passe en Ibarra Real Nova 22 px, comme sur le site, et le lien
   d'abonnement prend la forme du bouton jaune.
-------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* Le pseudo-élément « après » se place naturellement derrière le lien.
	   Une colonne flex permet de rétablir l'ordre du site : titre, puis
	   couverture, puis bouton. */
	.sr-menu-boutique .sr-boutique-promo {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sr-menu-boutique .sr-boutique-promo::before { order: 1; }
	.sr-menu-boutique .sr-boutique-promo::after  { order: 2; width: 100%; }
	.sr-menu-boutique .sr-boutique-promo > a     { order: 3; }

	/* Titre au-dessus de la couverture, comme sur le site. */
	.sr-menu-boutique .sr-boutique-promo::before {
		content: "Revue Sainte Rita";
		display: block;
		font-family: "Ibarra Real Nova", serif;
		font-size: 22px;
		color: #374047;
		margin-bottom: 14px;
	}

	/* La couverture vit sur un pseudo-élément : une règle d'Elementor vise
	   nommément background-image sur les entrées de sous-menu et l'emporte,
	   même face à un !important de spécificité supérieure.

	   L'image elle-même vient d'une variable personnalisée, imprimée dans
	   l'en-tête du document par la page de réglages « Menu Boutique »
	   (Réglages → Menu Boutique) : elle traverse jusqu'à ::after sans qu'un
	   style inline soit nécessaire. Tant qu'aucune image n'y a été choisie,
	   le repli de var() retombe sur celle posée ici. */
	.sr-menu-boutique .sr-boutique-promo::after {
		content: "";
		display: block;
		height: 150px;
		margin: 0 auto 16px;
		background-image: var(--sr-revue-couverture, url("/wp-content/uploads/2026/07/Impa_St_Rita_Juin_2026_Pagina_01-922ce990.jpeg"));
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	/* Le lien de l'entrée devient le bouton jaune, sous la couverture. */
	.sr-menu-boutique .sr-boutique-promo > a {
		display: inline-block;
		padding: 11px 30px !important;
		background: #F9C95A !important;
		color: #2d2e33 !important;
		font-family: "Nunito Sans", sans-serif !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		border-radius: 24px;
		text-transform: none !important;
	}

	.sr-menu-boutique .sr-boutique-promo > a:hover {
		background: #f3bd3d !important;
	}
}

/* --- Chevrons du menu -------------------------------------------------------

   Elementor ajoute un caret sous chaque entrée à sous-menu. Additionnés aux
   onze entrées et au bouton Boutique, ils faisaient déborder la rangée sur
   deux lignes, là où le site d'origine tient sur une.

   Le sous-menu reste accessible : il s'ouvre au survol et au focus clavier.
-------------------------------------------------------------------------- */

/* Masqués dans la barre de bureau seulement : c'est là que leur largeur, sur
   onze entrées, faisait déborder la rangée. Dans le panneau mobile ils sont
   conservés — ils sont le seul indice qu'une entrée cache des sous-pages, et
   la place ne manque pas. */
.elementor-nav-menu--main > .elementor-nav-menu > li > a .e-font-icon-svg.e-fas-caret-down,
.elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow,
.elementor-nav-menu--main > .elementor-nav-menu > li > a svg.e-fas-caret-down {
	display: none !important;
}

/* --- Entrée active : trait jaune en pied de bandeau -------------------------

   Le trait se cale sur le bas du bandeau et non sur le texte : l'entrée est
   étirée sur toute la hauteur, et le trait posé en pseudo-élément absolu.
-------------------------------------------------------------------------- */

.elementor-nav-menu--main .elementor-nav-menu > li {
	position: relative;
}

/* Texte au survol : couleur mesurée par Thomas sur le site en production. */
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover {
	color: #2d2e33 !important;
}

.elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active::after,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a::after,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a::after,
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;          /* compense le padding du bandeau */
	height: 1px;
	/* !important : Elementor applique la couleur d'accent de son kit au même
	   pseudo-élément, via le pointeur du widget de menu. Même piège que pour
	   l'icône d'accueil. */
	background: #F9C95A !important;
}

/* Sous-menu déroulant : sans « top » explicite, sa position par défaut
   (calculée sur son emplacement dans le flux normal, avant sa mise en
   position absolue) le fait remonter d'environ 6px dans la zone du
   lien — mesuré au survol, il chevauchait alors le trait jaune
   ci-dessus au lieu de s'afficher franchement en dessous. Repositionné
   sous le bandeau (100% de la hauteur de l'entrée), avec un espace net
   après le trait plutôt que collé dessus. */
.elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu {
	top: calc(100% + 14px) !important;
}

/* L'entrée Boutique a déjà son fond jaune : un trait de la même couleur n'y
   apporterait rien. */
.elementor-nav-menu--main .sr-menu-boutique > a::after {
	display: none !important;
}

/* --- Mobile -----------------------------------------------------------------

   Sous 1025 px la barre haute se réduit à trois éléments : le menu, le logo et
   la recherche. Les accès boutique et le bouton de don rejoignent le panneau,
   sous forme d'entrées de menu réservées au mobile.
-------------------------------------------------------------------------- */

/* Les entrées de secours n'existent que sur mobile. */
@media (min-width: 1025px) {
	.sr-mobile-only {
		display: none !important;
	}

	/* Logo vraiment centré sur toute la barre haute, pas seulement dans sa
	   propre colonne : les colonnes réseaux (20 %) et actions (48 %) n'ont pas
	   la même largeur, donc centrer le logo dans son propre 32 % le décale du
	   centre réel de la page. Sorti du flux pour se caler sur le milieu du
	   conteneur entier, quelle que soit la largeur des colonnes voisines. */
	.sr-barre-haute > .e-con-inner {
		position: relative;
	}

	.sr-barre-haute > .e-con-inner > .e-con:nth-of-type(2) {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* Bouton « Faire un don » collé au bandeau du menu : l'écart venait de
	   l'espacement (20px) qu'Elementor pose entre la barre haute et le
	   bandeau du menu quand ils s'empilent en colonne — ni une marge, ni un
	   padding sur l'un des deux conteneurs. */
	.elementor-location-header > .e-con > .e-con-inner {
		gap: 0 !important;
	}

	/* 20px d'air entre le logo/les actions et le bandeau du menu : padding
	   ajouté sous la barre haute elle-même (après son contenu, avant le
	   bandeau — le gap ci-dessus reste à 0). Sélecteur doublé : Elementor
	   omet parfois le niveau .e-con-inner intermédiaire selon les éditions.
	   Variable partagée avec l'extension du bouton juste en dessous : les
	   deux valeurs doivent rester égales, un seul endroit à changer. */
	.sr-barre-haute,
	.sr-barre-haute.e-con-inner {
		--sr-header-gap: 20px;
		padding-bottom: var(--sr-header-gap);
	}

	/* Le bouton doit rester aligné avec recherche/compte/panier (même
	   align-self:center, même zone) ET rester collé au bandeau du menu.
	   Un décalage du bouton entier (position relative + bottom négatif)
	   déplaçait aussi son icône et son texte hors de cet alignement — vu
	   en le mesurant : centre à 75px au lieu de 55px comme les autres.
	   Seul le FOND doit descendre : un ::after étire juste le
	   background-color jusqu'au bandeau, sans toucher au contenu ni à la
	   position du bouton lui-même. */
	.sr-barre-haute .elementor-widget-button .elementor-button {
		position: relative;
	}

	.sr-barre-haute .elementor-widget-button .elementor-button::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: var(--sr-header-gap);
		background-color: inherit;
	}

	/* Bouton sur la même ligne que recherche/compte/panier, hauteur réduite
	   pour s'aligner sur leur gabarit plutôt que les forcer à s'étirer :
	   padding vertical d'Elementor (15px) ramené à 8px, la hauteur suit le
	   contenu (icône 30px + texte) plutôt qu'une valeur fixe imposée. */
	.sr-barre-haute .elementor-widget-button .elementor-button {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* Le logo ne grandit pas avec la barre : centré dans une barre devenue
	   plus haute, il gagne de l'air au-dessus comme en dessous — c'est ce
	   qui lui donne ses 20px sous lui, sans réglage séparé. */

	/* Compte, panier et bouton alignés sur la recherche : cette dernière a
	   son propre align-self:center posé dans l'éditeur, les deux autres
	   héritent du "normal" (= stretch) de la colonne et s'étirent donc sur
	   toute la hauteur de la barre — collés en haut plutôt que centrés. */
	.sr-barre-haute .elementor-widget-icon-list,
	.sr-barre-haute .elementor-widget-button {
		align-self: center !important;
	}

	/* Icône du bouton au-dessus du texte : l'éditeur est bien réglé sur
	   « haut », mais la hauteur du bouton (120px) laisse le contenu en ligne
	   par défaut sans cette règle. */
	.sr-barre-haute .elementor-button .elementor-button-content-wrapper {
		flex-direction: column;
		align-items: center;
	}

	/* Icônes à 30px : recherche (la CSS générée par Elementor pour ce widget
	   pose 33px avec 3 classes, plus précis que nous — !important nécessaire),
	   compte/panier (posé côté données, comme le reste du réglage de ce
	   widget) et bouton. */
	.sr-barre-haute .elementor-search-form__toggle {
		--e-search-form-toggle-size: 30px !important;
	}

	.sr-barre-haute .elementor-button-icon,
	.sr-barre-haute .elementor-button-icon i,
	.sr-barre-haute .elementor-button-icon svg {
		font-size: 30px;
		width: 30px;
		height: 30px;
	}

	/* Icône du bouton « Faire un don » (Lucide, trait fin) : le SVG porte
	   lui-même fill="none" et stroke="currentColor", mais Elementor pose sa
	   propre couleur en `fill` (pensé pour des glyphes pleins) sur le même
	   élément — sans ce fill:none il repasse en aplat. `color` (déjà posée à
	   #ffffff par Elementor) fait le lien avec currentColor pour le trait.
	   Compte et panier utilisent des SVG pleins (pas Lucide) : leur fill
	   d'origine doit rester, aucun override ici. */
	.sr-barre-haute .elementor-button-icon svg {
		fill: none !important;
	}

	/* Icône compte/panier décalée de 8px vers la gauche (vide visible à
	   droite) : Elementor pose « margin: 0 calc(taille * .25) 0 0 » en
	   shorthand sur le SVG (widget-icon-list.min.css), pensé pour un
	   icône-puis-texte en ligne. Inutile ici, où icône et texte sont
	   empilés verticalement (icône au-dessus) par notre propre CSS.
	   Reprendre le même shorthand (pas juste margin-right) et !important :
	   un override en longhand perd face au shorthand d'Elementor, qui
	   réécrit les quatre côtés d'un coup. */
	.sr-barre-haute .elementor-icon-list-icon svg {
		margin: 0 !important;
	}

	/* Icône de recherche personnalisée : posée en dur dans le widget par
	   Elementor Pro (icône Font Awesome fixée dans le code du plugin, sans
	   réglage pour la changer — vérifié dans Search_Form::render(), aucun
	   filtre disponible). Remplacée en CSS : le glyphe natif est masqué, un
	   ::before affiche le SVG fourni à la place, à la même taille que les
	   autres icônes de la barre.
	   Rendu natif en <svg> (pas en <i>) : l'expérience Elementor
	   « e_font_icon_svg » est active sur ce site. */
	.sr-barre-haute .elementor-search-form__toggle .e-font-icon-svg-container {
		display: none;
	}

	.sr-barre-haute .elementor-search-form__toggle::before {
		content: "";
		display: block;
		width: 30px;
		height: 30px;
		background-image: url("/wp-content/uploads/2026/07/icon-search.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	/* « Rechercher » sous l'icône, comme « Mon compte »/« Panier » sous les
	   leurs : le widget n'a pas de réglage de texte pour ce bouton (skin
	   « plein écran »), posé en ::after généré plutôt qu'en vrai texte —
	   même typographie que les deux autres labels (mesurée : 14.5px, 500,
	   #666666, Nunito Sans) pour rester cohérent visuellement. L'intitulé
	   accessible existe déjà par ailleurs (aria-label="Search" posé par
	   Elementor sur ce même bouton) : ce texte-ci est décoratif. */
	.sr-barre-haute .elementor-search-form__toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sr-barre-haute .elementor-search-form__toggle::after {
		content: "Rechercher";
		font-family: "Nunito Sans", sans-serif;
		font-size: 14.5px;
		font-weight: 500;
		color: #666666;
	}
}

@media (max-width: 1024px) {

	/* En-tête sur une seule rangée : menu à gauche, logo au centre,
	   recherche à droite.

	   Trois obstacles, tous relevés au navigateur. La commande enveloppe les
	   éléments du gabarit dans un conteneur supplémentaire, donc mes deux
	   conteneurs sont des petits-enfants de l'en-tête et non ses enfants.
	   Elementor pose ensuite une largeur de 100 % sur chaque conteneur sous le
	   point de rupture, ce qui les fait passer à la ligne quoi qu'on masque.
	   Et le parent est en flex-wrap: wrap. Il faut donc annuler les trois. */

	.elementor-location-header > .e-con > .e-con-inner {
		/* Elementor bascule ses conteneurs en colonne sous le point de
		   rupture : c'est le dernier verrou qui empilait le menu et la barre. */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 10px !important;
		/* Fond gris posé par Thomas sur le conteneur du bandeau du menu
		   (sr-bandeau-menu, #F8F8F8) : le display:contents plus bas supprime
		   sa boîte, donc son fond, avec le reste de son style propre. Reposé
		   ici, sur le bloc fusionné entier plutôt que sur le seul bandeau —
		   cohérent avec la fusion demandée en un bloc unique. */
		background-color: #F8F8F8;
		padding-left: 15px !important;
		padding-right: 15px !important;
		/* 20px en haut vient du conteneur d'en-tête (desktop et mobile) ; en
		   bas, desktop veut le bouton « Faire un don » collé au bandeau du
		   menu (0px, déjà le cas), mobile veut 20px — d'où ce complément posé
		   ici plutôt que sur le réglage partagé des deux ruptures. */
		padding-bottom: 20px !important;
	}

	/* Un seul bloc visuel pour le menu, le logo et la recherche, sans dupliquer
	   aucun widget : la barre haute (logo, recherche…) et le bandeau du menu
	   (bouton d'ouverture) restent deux conteneurs Elementor distincts dans
	   l'éditeur — display:contents fait disparaître leur boîte propre sur
	   mobile seulement, si bien que leurs enfants rejoignent directement la
	   rangée flex de .e-con-inner ci-dessus, comme s'ils y avaient toujours
	   été. Chaque conteneur garde son comportement normal aux autres points de
	   rupture : rien n'est désactivé, juste rendu transparent pour la mise en
	   page à celui-ci.

	   Deux niveaux à effacer côté menu (le conteneur du gabarit, puis le
	   widget nav-menu lui-même) contre un seul côté barre haute : profondeurs
	   vérifiées au navigateur, pas supposées. */
	.elementor-location-header .sr-bandeau-menu,
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .sr-barre-haute {
		/* !important nécessaire : Elementor pose display:flex directement sur
		   .elementor-widget-nav-menu avec la même spécificité, et gagne sinon
		   au dernier arrivé dans la feuille de style compilée. */
		display: contents !important;
	}

	/* Bouton d'ouverture : premier dans la rangée. Le menu complet (desktop)
	   et le panneau plein écran sont aussi promus par le display:contents
	   ci-dessus, mais le premier reste caché ici et le second sort du flux en
	   position fixe (réglé plus bas) — aucun des deux ne perturbe la rangée. */
	.elementor-location-header .elementor-menu-toggle {
		order: 1;
	}

	.elementor-location-header .elementor-nav-menu--main {
		display: none !important;
	}

	/* Barre haute : à droite du bouton, sur une rangée. Le conteneur
	   lui-même a disparu (display:contents) ; ses colonnes (réseaux, logo,
	   actions) rejoignent donc directement la rangée partagée.

	   Elementor enveloppe (ou non) ces colonnes dans un .e-con-inner
	   intermédiaire selon des passages difficiles à prévoir à l'avance — déjà
	   rencontré sur ce même conteneur (voir plus haut dans ce fichier). Les
	   deux formes de sélecteur sont posées côte à côte : l'une des deux ne
	   correspond à rien selon la structure du moment, sans effet de bord. */
	.elementor-location-header .sr-barre-haute > .e-con-inner.e-con-inner,
	.elementor-location-header .sr-barre-haute {
		gap: 10px !important;
	}

	.elementor-location-header .sr-barre-haute > .e-con-inner.e-con-inner {
		order: 2;
		width: auto !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		padding: 0 !important;
	}

	/* Les colonnes de la barre haute perdent leur largeur imposée, avec ou
	   sans le niveau .e-con-inner intermédiaire. */
	.elementor-location-header .sr-barre-haute > .e-con-inner > .e-con,
	.elementor-location-header .sr-barre-haute > .e-con {
		width: auto !important;
		min-width: 0 !important;
	}

	/* Colonne des réseaux sociaux : le conteneur entier disparaît, pas
	   seulement son widget — il gardait vingt pixels de hauteur. */
	.elementor-location-header .sr-barre-haute > .e-con-inner > .e-con:nth-of-type(1),
	.elementor-location-header .sr-barre-haute > .e-con:nth-of-type(1) {
		display: none !important;
	}

	/* Logo au centre, recherche à droite. Sans .e-con-inner intermédiaire,
	   ces deux colonnes sont elles-mêmes les éléments promus dans la rangée
	   partagée : elles portent donc directement l'ordre, plutôt qu'un
	   conteneur parent qui n'existe plus dans cette structure. */
	.elementor-location-header .sr-barre-haute > .e-con-inner > .e-con:nth-of-type(2),
	.elementor-location-header .sr-barre-haute > .e-con:nth-of-type(2) {
		order: 2;
		flex: 1 1 auto !important;
	}

	.elementor-location-header .sr-barre-haute > .e-con-inner > .e-con:nth-of-type(3),
	.elementor-location-header .sr-barre-haute > .e-con:nth-of-type(3) {
		order: 3;
		flex: 0 0 auto !important;
	}

	.elementor-location-header .elementor-widget-image img {
		/* !important : Elementor cible cette image avec trois classes
		   (.elementor-1105 .elementor-element.elementor-element-XXXXXXX img),
		   plus spécifique que ce sélecteur à deux classes. */
		width: 125px !important;
		height: 35px !important;
	}

	/* La recherche est en peau « plein écran » : elle se réduit d'elle-même à
	   une loupe. Aucune règle ne la contraint ici — masquer son champ
	   casserait le voile qui s'ouvre au clic. */
	.elementor-location-header .elementor-widget-search-form {
		flex: 0 0 auto !important;
	}

	/* Barre haute : réseaux, compte, panier et bouton de don s'effacent. */
	.elementor-location-header .elementor-widget-social-icons,
	.elementor-location-header .icon-top-menu,
	.elementor-location-header .elementor-widget-button {
		display: none !important;
	}

	/* Panneau plein écran. */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		height: 100dvh !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-y: auto !important;
		background: #ffffff !important;
		z-index: 9998;
	}

	/* La croix de fermeture : le bouton d'ouverture d'Elementor passe
	   au-dessus du panneau et bascule en croix de lui-même. */
	.elementor-location-header .elementor-menu-toggle {
		position: relative;
		z-index: 9999;
	}

	.elementor-menu-toggle.elementor-active {
		position: fixed !important;
		top: 14px;
		right: 16px;
	}

	/* Elementor pose un fond sombre sur l'entrée active de son panneau
	   mobile. Le site d'origine se contente de colorer le libellé. */
	.elementor-nav-menu--dropdown .current-menu-item > a,
	.elementor-nav-menu--dropdown .current-menu-ancestor > a,
	.elementor-nav-menu--dropdown a.elementor-item-active {
		background: transparent !important;
		color: #478cb3 !important;
	}

	/* Chevron du panneau : rejeté à droite de l'entrée, avec une zone de tap
	   confortable. Il pivote quand le sous-menu s'ouvre. */
	.elementor-nav-menu--dropdown .elementor-item {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}

	.elementor-nav-menu--dropdown .elementor-item .e-font-icon-svg.e-fas-caret-down,
	.elementor-nav-menu--dropdown .elementor-item svg.e-fas-caret-down {
		display: inline-block !important;
		width: 14px;
		height: 14px;
		margin-left: auto;
		flex: 0 0 14px;
		transition: transform .2s ease;
	}

	.elementor-nav-menu--dropdown .elementor-item.highlighted .e-fas-caret-down,
	.elementor-nav-menu--dropdown li.elementor-active > .elementor-item .e-fas-caret-down {
		transform: rotate(180deg);
	}

	/* Entrées à pleine largeur, aérées. */
	.elementor-nav-menu--dropdown a {
		padding: 16px 20px !important;
		font-size: 16px !important;
	}

	/* « Se connecter » en bandeau gris, en tête de panneau. */
	.sr-menu-connexion {
		order: -1;
	}

	.sr-menu-connexion > a {
		background: #6c6d74 !important;
		color: #ffffff !important;
		text-transform: uppercase;
		font-weight: 700 !important;
		letter-spacing: .04em;
	}

	/* « Faire un don » en bouton bleu, en pied de panneau. */
	.sr-menu-don > a {
		background: #478cb3 !important;
		color: #ffffff !important;
		text-align: center;
		font-weight: 700 !important;
		text-transform: uppercase;
		margin: 18px 0 30px;
	}

	.elementor-nav-menu--dropdown > ul {
		display: flex;
		flex-direction: column;
		/* La liste doit occuper toute la hauteur du panneau, sans quoi le
		   margin-top: auto du bouton de don n'a rien contre quoi pousser et
		   le bouton flotte au milieu. */
		min-height: 100%;
	}

	.sr-menu-don {
		margin-top: auto;
	}
}

/* --- Pied de page -----------------------------------------------------------

   Fond déjà blanc côté données (background_color posé sur le conteneur
   racine du gabarit). Seuls les liens restaient roses (#cc3366) : couleur
   par défaut de hello-elementor/assets/css/reset.css, jamais surchargée
   pour cette zone. */
.elementor-location-footer a {
	color: #000000;
}

/* --- Widget Posts (ex. « Derniers articles » du gabarit Single — Page) -----

   Le bouton « Lire la suite » se faisait rogner en bas (~8px, mesuré) :
   Elementor calcule la hauteur de chaque carte (.elementor-post, grille) à
   partir d'un pré-calcul interne qui ne colle pas exactement au rendu final
   du bouton une fois notre CSS personnalisée appliquée (padding ajouté dans
   le widget) — un écart de quelques pixels entre hauteur calculée et hauteur
   réellement nécessaire, qu'Elementor masque d'ordinaire sans dommage grâce
   à l'overflow:hidden posé sur chaque carte (utile pour rogner net les coins
   d'une vignette). Ici, sans vignette dans ce widget, cet overflow:hidden ne
   sert à rien d'autre qu'à couper le bouton — le retirer laisse le contenu
   se montrer en entier quelle que soit la longueur du titre ou le padding
   du bouton, sans jamais revenir sur ce correctif à chaque réglage.

   Portée volontairement sur tout le widget Posts (pas juste cette instance) :
   seule utilisation actuelle du widget sur le site, aucune vignette nulle
   part qui aurait besoin de cet overflow — sûr à généraliser. */
.elementor-widget-posts .elementor-post {
	overflow: visible;
}

/* --- Liens dans le contenu importé du Joomla -------------------------------

   Reprend le style de l'ancien site (sainte-rita.net, custom.css du template
   YOOtheme : .uk-content-article p a et .fleche). Les paragraphes "En savoir
   plus sur..." portent déjà la classe `fleche` telle quelle dans le HTML
   repris du dump Joomla — seul le CSS manquait. La flèche Font Awesome Pro
   de l'original (icône \f061) est remplacée par un caractère Unicode : pas
   de licence Font Awesome Pro chargée sur ce site. */
.elementor-widget-theme-post-content a {
	color: #D36D26;
}
.elementor-widget-theme-post-content .fleche {
	font-weight: 700;
}
.elementor-widget-theme-post-content .fleche::before {
	content: "→";
	display: inline-block;
	margin-right: 5px;
}

/* --- Titre des pages single : reprend le style de l'ancien site -----------

   Repris de theme.12.css (YOOtheme) : h1{font-size:36.54px} en mobile,
   42px à partir de 959px (breakpoint YOOtheme d'origine, conservé pour ne
   pas surdimensionner le titre sur petit écran).

   !important nécessaire : ce titre vient du gabarit Theme Builder « Single »,
   dont la CSS générée par Elementor (post-XXXX.css) cible directement l'ID de
   l'élément — .elementor-1111 .elementor-element-31042e7 .elementor-heading-
   title — plus spécifique que ce sélecteur à deux classes. */
.elementor-widget-theme-post-title .elementor-heading-title {
	font-size: 36.54px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: #2d2e33 !important;
}
@media (min-width: 959px) {
	.elementor-widget-theme-post-title .elementor-heading-title {
		font-size: 42px !important;
	}
}

/* --- Rubrique au-dessus du titre --------------------------------------

   Injectee par sainte-rita-core (inc/rubrique-eyebrow.php) devant le widget
   Titre de l'article. Reprend le lien de categorie du site Joomla d'origine
   (couleur mesuree sur les etats actifs du menu, deja utilisee ailleurs sur
   le site). */
.sr-rubrique-eyebrow {
	text-align: center;
	text-transform: uppercase;
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 8px;
}
.sr-rubrique-eyebrow a,
.sr-rubrique-eyebrow span {
	color: #e0862c;
}
.sr-rubrique-eyebrow a:hover {
	text-decoration: underline;
}

/* --- Sous-titres du contenu importé : même hiérarchie que l'ancien site ---

   Repris de theme.12.css. h1/h2/h3 en Ibarra Real Nova (titre), h4/h5/h6 en
   Nunito Sans capitales espacées (repère de type "surtitre"). Seuls h1 et h2
   grandissent à partir de 959px dans l'original ; h3 à h6 restent fixes. */
.elementor-widget-theme-post-content h2 {
	font-family: "Ibarra Real Nova", serif;
	font-size: 32.04px;
	font-weight: 400;
	line-height: 1.3;
	color: #2d2e33;
	margin: 0 0 20px 0;
}
.elementor-widget-theme-post-content h3 {
	font-family: "Ibarra Real Nova", serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	color: #2d2e33;
	margin: 0 0 20px 0;
}
.elementor-widget-theme-post-content h4 {
	font-family: "Nunito Sans", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #2d2e33;
	margin: 0 0 20px 0;
}
.elementor-widget-theme-post-content h5 {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #2d2e33;
	margin: 0 0 20px 0;
}
.elementor-widget-theme-post-content h6 {
	font-family: "Nunito Sans", sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #2d2e33;
	margin: 40px 0 20px 0;
}
@media (min-width: 959px) {
	.elementor-widget-theme-post-content h2 {
		font-size: 36px;
	}
}

/* --- Fil d'ariane (RankMath) -------------------------------------------

   Ajoute par sainte-rita-core (wp-content/add-breadcrumbs.php, gabarits
   Theme Builder Single) via un widget Shortcode [rank_math_breadcrumb].
   Valeurs mesurées au navigateur sur le site en production par Thomas. */
.rank-math-breadcrumb p {
	margin: 0 0 20px 0;
}
.rank-math-breadcrumb a {
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #484848;
	text-decoration: none;
}
.rank-math-breadcrumb .last {
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #478CB3;
}
.rank-math-breadcrumb .separator {
	color: #b4b5ba;
	margin: 0 8px;
}

/* --- Blocs image flottante du contenu importé du Joomla --------------------

   Classes posées tel quel dans le HTML du dump (bloc-photo-droit,
   bloc-photo-gauche, variantes bloc-flottant-*) : l'image et sa légende
   flottent à côté du texte plutôt que de s'empiler avec lui. 151 pages avec
   bloc-photo-droit, 33 avec bloc-photo-gauche, 30 avec bloc-flottant-*.
   Valeurs reprises de custom.css sur le site Joomla d'origine. */
.elementor-widget-theme-post-content .bloc-photo-droit,
.elementor-widget-theme-post-content .bloc-flottant-droit {
	display: block;
	float: right;
	margin: 0 0 10px 20px;
}
.elementor-widget-theme-post-content .bloc-photo-gauche,
.elementor-widget-theme-post-content .bloc-flottant-gauche {
	display: block;
	float: left;
	margin: 0 20px 10px 0;
}
.elementor-widget-theme-post-content .bloc-photo-droit,
.elementor-widget-theme-post-content .bloc-photo-gauche,
.elementor-widget-theme-post-content .bloc-photo-centre,
.elementor-widget-theme-post-content .bloc-flottant-droit,
.elementor-widget-theme-post-content .bloc-flottant-gauche,
.elementor-widget-theme-post-content .bloc-centre {
	text-align: center;
	font-style: italic;
	font-size: 85%;
	line-height: 1.4;
	color: #000000;
}
/* Sous 768px les floats font plus de mal que de bien (texte compressé sur
   une colonne trop étroite) : le site d'origine les désactive, on fait
   pareil. */
@media (max-width: 768px) {
	.elementor-widget-theme-post-content .bloc-photo-droit,
	.elementor-widget-theme-post-content .bloc-photo-gauche,
	.elementor-widget-theme-post-content .bloc-flottant-droit,
	.elementor-widget-theme-post-content .bloc-flottant-gauche {
		float: none;
		margin: 0 0 10px 0;
	}
}
/*Suppresion paddig menu */

.elementor-1105 .elementor-element.elementor-element-454a04d {
    --padding-top: 0px!important;
    --padding-bottom: 0px!important;
}