/* ---------------------------------------------------------------
   EN-TETE — titre de commune et icones, page d accueil seule
   Rendu par inc/menu-maxi.php sur le hook kadence_main_header,
   priorite 15 (la fonction Kadence est a 10 : on passe apres,
   sans jamais la retirer).
   Le bloc est en position absolute : mesure du 08/09, le parent
   site-header-upper-inner-wrap passe de block a flex quand la
   barre colle, ce qui decalait le titre de 50 px vers la droite
   et le remontait. Sorti du flux, il ne subit plus ni l un ni
   l autre.
   DETTE : le top est une valeur en dur. Le menu passe sur deux
   rangees sous ~1497 px au repos et sous ~1574 px barre collee
   (mesure du 22/09) : le titre ne suit pas.
   --------------------------------------------------------------- */

.etika-entete-titre {
	position: absolute;
	left: 0;
	right: 0;
	top: 520px;
}

.etika-entete-bloc {
	width: fit-content;
	margin: 0 auto;
}

.etika-entete-l1 {
	color: #fff;
	font-size: 24px;
	letter-spacing: 9px;
	font-weight: 700;
	text-align: left;
	animation: etika-entete-entre-g 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.etika-entete-l2 {
	color: #fff;
	font-family: var(--etika-police-script), cursive;
	font-size: clamp(68px, 8.5vw, 124px);
	line-height: 1;
	margin-top: 6px;
	text-align: center;
	animation: etika-entete-entre-d 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

@keyframes etika-entete-entre-g {
	from { opacity: 0; transform: translateX(-140px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes etika-entete-entre-d {
	from { opacity: 0; transform: translateX(140px); }
	to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.etika-entete-l1,
	.etika-entete-l2 {
		animation: none;
	}
}

/* Icones : rendues par les hooks Kadence (kadence_header_search et
   kadence_header_social), donc avec les URL du Customizer. Aucune
   URL en dur : le plugin reste identique sur tous les sites. */
.etika-entete-icones {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	margin-top: 60px;
}

.etika-entete-icones .header-social-wrap,
.etika-entete-icones .search-toggle-open-container {
	margin: 0;
	padding: 0;
}

.etika-entete-icones .header-social-inner-wrap {
	gap: 22px;
	margin: 0;
}

/* .social-style-outline est repris de la chaine mesuree le 08/09 :
   Kadence vise .social-style-outline .social-button (2 classes).
   En reprenant cette classe intermediaire, on passe a 3 classes et
   on gagne par specificite, sans !important. */
.etika-entete-icones .social-style-outline .social-button,
.etika-entete-icones .social-style-outline .social-button:hover,
.etika-entete-icones .social-style-outline .social-button:focus,
.etika-entete-icones .search-toggle-open,
.etika-entete-icones .search-toggle-open:hover,
.etika-entete-icones .search-toggle-open:focus {
	border: 0 none;
	border-radius: 0;
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	outline: none;
	transition: transform 0.2s ease;
}

/* Zoom, pas opacite : c est l effet d origine du theme, mesure
   absent apres notre neutralisation. */
.etika-entete-icones .social-button:hover,
.etika-entete-icones .search-toggle-open:hover {
	transform: scale(1.15);
}

.etika-entete-icones .social-button svg,
.etika-entete-icones .search-toggle-open svg {
	width: 28px;
	height: 28px;
}

.etika-entete-icones .social-icon-image {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

/* Loupe rendue en derniere entree du menu primaire (cf. inc/menu-maxi.php) :
   masquee au repos, revelee uniquement quand la barre colle. visibility et
   non display : la boite de 45px est conservee, ce qui laisse la largeur du
   groupe centre inchangee et evite tout decalage du menu au collage
   (mesure du 22/09 : premier li a x 331.33 au repos, 293.08 colle, avec et
   sans la loupe dans le menu). */
.site-main-header-wrap.kadence-sticky-header .etika-entete-loupe {
	visibility: hidden;
}

.site-main-header-wrap.kadence-sticky-header.item-is-stuck .etika-entete-loupe {
	visibility: visible;
}

/* Couleur du bouton loupe (etat colle uniquement) : le bouton vit hors du
   <nav> (colonne center, apres le menu), il n'herite donc pas du gris pose
   par Kadence sur les liens du menu. Valeur mesuree sur l'entree CONTACT du
   menu en etat colle. Deux proprietes necessaires : color pour le bouton,
   fill pour le svg (fill explicite, non hérité de color). */
.site-main-header-wrap.kadence-sticky-header.item-is-stuck .etika-entete-loupe .search-toggle-open {
	color: rgb(74, 85, 104);
}

.site-main-header-wrap.kadence-sticky-header.item-is-stuck .etika-entete-loupe .search-toggle-open svg {
	fill: rgb(74, 85, 104);
}

/* Geometrie du bouton loupe : identique quel que soit l'etat sticky/stuck
   (seules la visibility et la couleur, ci-dessus, en dependent), pour que
   rien ne bouge au moment du collage.
   Le li n'est pas lui-meme un conteneur flex : le bouton resterait cale en
   haut de la boite au lieu d'etre centre (mesure du 82ae441, alors sur un
   div). display:flex + centrage corrige cela.
   AUCUNE hauteur declaree. Un height: 100% se resolvait contre la hauteur
   du ul : au repli du menu, le li prenait 95.56px, soit deux rangees, et
   se desalignait de l'enveloppe (mesure du 22/09). Sans hauteur, le li
   fait 45px et le stretch du ul le centre de lui-meme (71.78 + 1.5 =
   73.28 mesure).
   28px choisi a l'essai visuel (commit b11716b) : le svg remplit tout son
   carre la ou le glyphe de l'enveloppe d'icone du menu garde une marge
   interne, si bien qu'a taille egale la loupe paraissait plus grosse. */
.site-main-header-wrap.kadence-sticky-header .etika-entete-loupe {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-main-header-wrap.kadence-sticky-header .etika-entete-loupe .search-toggle-open svg {
	width: 28px;
	height: 28px;
}

/* Le bouton porte, via le theme, transition-property: all (duration 0.2s
   mesuree) : ce raccourci anime aussi la couleur, qui glissait de
   rgb(74, 85, 104) a rgb(255, 255, 255) en ~175ms (4 valeurs intermediaires
   mesurees) pendant que la visibility, elle, bascule instantanement. Cette
   desynchronisation produisait un clignotement blanc au decollage de la
   barre. On restreint donc la transition au seul transform (effet de
   survol du theme, a conserver) : la couleur change alors instantanement,
   au meme rythme que la visibility. */
.site-main-header-wrap.kadence-sticky-header .etika-entete-loupe .search-toggle-open {
	transition-property: transform;
}

/* Pastille de survol de la loupe, alignee sur celle des entrees de menu
   (menu-maxi.css : meme teinte rgba(13,17,23,0.55), meme rayon 999px, meme
   libelle blanc). Cette regle est distincte parce que la loupe n'a pas de
   lien : le selecteur du menu vise li:hover > a, la loupe n'a qu'un bouton.
   La pastille est allongee de 12px de chaque cote : padding 20.5px
   (8.5 d'origine + 12, valeur DERIVEE, non mesuree) et marge negative de
   -12px qui rend la place exactement. La peinture fait 69x45, la boite
   occupee reste 45x45 (mesure du 22/09). Sans cette compensation le li
   grandirait, le menu se decalerait et les deux seuils de repli
   bougeraient. Contrairement a la pastille du menu, qui grandit la boite
   de 26.53px faute d'une telle compensation, le survol ne pousse donc
   rien, mesure : ul a 48.00 avec et sans survol.
   fill en plus de color : le svg porte fill="currentColor" en attribut,
   mais la regle de couleur ci-dessus pose un fill explicite qui l'emporte.
   Poids (1,3,2) contre (0,5,1) : un identifiant suffit, pas de !important.
   Non conditionne a item-is-stuck : au repos la loupe est en
   visibility:hidden et ne recoit aucun evenement de souris. */
#primary-menu > li.etika-entete-loupe {
	margin-left: 13.6px;
}

#primary-menu > li.etika-entete-loupe:hover .search-toggle-open {
	background: rgba(13, 17, 23, 0.55);
	border-radius: 999px;
	color: #ffffff;
	padding-left: 22.1px;
	padding-right: 22.1px;
	margin-left: -13.6px;
	margin-right: -13.6px;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
}

#primary-menu > li.etika-entete-loupe:hover .search-toggle-open svg {
	fill: #ffffff;
}

/* --------------------------------------------------------------------------
   Debordement horizontal : activer le clip du conteneur de site
   #wrapper porte deja overflow-x: clip, mais il est en position static.
   #masthead etant en position absolute, son bloc conteneur est alors
   l'element racine et le clip ne s'applique pas : les panneaux du maxi menu
   non encore repositionnes poussaient le document a 2852px au lieu de 1905.
   Mesure du 10/09 : debordement 947px au repos, accueil et /activites/,
   ramene a 0 par cette seule ligne, sans deplacer #masthead.
   -------------------------------------------------------------------------- */
#wrapper {
	position: relative;
}

/* --------------------------------------------------------------------------
   Bande claire au-dessus du premier bloc de contenu
   Kadence pose un padding-top sur .entry-content-wrap qui varie par palier :
   MESURE le 17/09, 0.2rem au-dessus de 1025px, 2rem entre 768 et 1024,
   1.5rem sous 767. Avec l entete transparent, ce padding laisse apparaitre
   le fond blanc de .content-bg au-dessus de la banniere.
   Cette regle remplace DEUX blocs anterieurs : le padding-top: 0 !important
   du 10/09, limite au bureau, et la marge negative de -24px du 15/09, qui
   compensait sur le premier enfant. Cette derniere etait calee sur une
   mesure a 428px : juste sous 768, elle laissait 8px de bande entre 768 et
   1024. Une valeur en dur ne peut pas suivre trois paliers ; on annule donc
   a la source, a toutes les largeurs.
   Le !important du 10/09 n est plus necessaire : la regle du Customizer est
   un raccourci padding en (0,1,0), notre #inner-wrap pese (1,1,0). Un
   identifiant l emporte, quel que soit l ordre dans le head.
   Seul le padding HAUT est annule : les lateraux et le bas gardent leur
   fonction d espacement. Les marges laterales de la banniere sont reglees
   dans les parametres du bloc, hors du plugin.
   DEPENDANCE : suppose que chaque page commence par une banniere pleine
   largeur (confirme le 17/09). Une page demarrant par du texte verrait
   celui-ci coller au bas de l en-tete.
   -------------------------------------------------------------------------- */
#inner-wrap .entry-content-wrap {
	padding-top: 0;
}

/* Bouton mobile #mobile-toggle (menu burger) : blanc, comme le reste des
   icones du header mobile. Valeur d origine mesuree : rgb(74, 85, 104) sur
   le bouton ET son svg. fill necessaire en plus de color : le svg porte un
   fill explicite, qui n herite pas de color comme le ferait un texte.
   Aucune media query : #mobile-header est masque par Kadence au-dessus de
   1025px, la regle n y peint donc rien.
   NON conditionnee a body.mobile-transparent-header (decision) : toutes les
   pages portent un media derriere l en-tete mobile, le blanc reste donc
   toujours justifie, transparent ou non. */
#mobile-toggle {
	color: #ffffff;
}

#mobile-toggle svg {
	fill: #ffffff;
}

/* Titre de commune mobile (etika_entete_titre_accueil_mobile) : surcharge du
   bloc desktop, qui garde top: 340px et font-size: 24px sur .etika-entete-l1
   (ci-dessus). Meme specificite (une classe chacun sur le meme element) que
   .etika-entete-titre : c est l ordre de declaration qui tranche, d ou ce
   bloc en toute fin de fichier, sans !important.
   top: 502px mesure a 500px de large : place le haut du bloc la ou se
   trouvaient les icones auparavant (bloc a y=386, icones a y=548, soit
   +162px).
   font-size: 13px conserve le ratio desktop entre COMMUNE et le nom
   (24/124 = 0,194 ; 68 x 0,194 = 13), le nom etant bloque a son plancher de
   68px en mobile.
   letter-spacing: 5px suit la meme proportion (9 x 13/24 = 5). */
.etika-entete-titre--mobile {
	top: 502px;
}

.etika-entete-titre--mobile .etika-entete-l1 {
	font-size: 13px;
	letter-spacing: 5px;
}

/* ---------------------------------------------------------------
   TIROIR DE NAVIGATION MOBILE (#mobile-drawer)
   Rendu par Kadence\navigation_popup() dans wp_footer. Vit en dehors
   de #mobile-header : ces regles ne sont donc PAS celles de la barre.

   AUCUNE MEDIA QUERY : le tiroir n existe qu en mode mobile, Kadence
   ne le rend pas au-dessus de 1025px.

   AUCUN !important. MESURE le 16/09 : entete.css est en position 16
   sur 32 dans le head, la feuille INLINE de Kadence en 19 et
   header.min.css en 20 — toutes deux APRES la notre. Nos selecteurs
   portent l identifiant #mobile-drawer (1 id) et l emportent donc par
   la specificite sur .popup-drawer .drawer-inner (2 classes) et sur
   .mobile-navigation ul li ... (3 classes, 2 types).

   DEPENDANCE HORS GIT : le reglage Customizer "le clic sur le parent
   ouvre le sous-menu" doit etre ACTIF. Il pose la classe
   drawer-navigation-parent-toggle-true, laquelle retire d elle-meme le
   trait vertical entre libelle et chevron. Si ce reglage est desactive
   sur une commune, le trait reapparait.
   --------------------------------------------------------------- */

/* Fond du panneau : opaque a 86%. MESURE : .drawer-overlay pose deja
   rgba(0,0,0,0.4) derriere, les deux couches s additionnent. La valeur
   a ete arretee au visuel, le titre de commune en surimpression sur la
   page d accueil etant le cas le plus defavorable. */
#mobile-drawer .drawer-inner {
	background-color: rgba(9, 12, 16, 0.86);
}

/* Suppression des filets horizontaux poses par Kadence
   (1px solid rgba(255,255,255,0.1)). MOTIF : sur un fond devenu
   translucide, ils decoupent l image d arriere-plan en cellules. Le
   rythme vertical ci-dessous les remplace. */
#mobile-drawer .mobile-menu-container > ul > li > a,
#mobile-drawer .mobile-menu-container > ul > li > .drawer-nav-drop-wrap,
#mobile-drawer .sub-menu > li > a {
	border-bottom: 0 none;
}

/* Rythme vertical entre les rubriques de niveau 0. */
#mobile-drawer .mobile-menu-container > ul > li {
	margin-bottom: 6px;
}

/* Decalage commun du niveau 0. Le position: relative sert d ancrage a
   la barre de l element actif (::before ci-dessous). */
#mobile-drawer .mobile-menu-container > ul > li > a,
#mobile-drawer .mobile-menu-container > ul > li > .drawer-nav-drop-wrap > a {
	padding-left: 16px;
	position: relative;
}

/* Indentation des enfants. MESURE : le texte du niveau 0 demarre a
   x=84,31 et celui des enfants a x=106,31, soit 22px d ecart — le ul
   porte deja 14px de padding-left, le lien 24px moins les 7px de
   padding d origine. Sans cette regle l ecart n etait que de 5px, ce
   qui se lisait comme un alignement. */
#mobile-drawer .sub-menu > li > a {
	padding-left: 24px;
	position: relative;
}

/* Ligne de rattachement du groupe deplie, d un seul tenant sur toute
   la hauteur du ul. Reemploi du trait vertical que Kadence retire
   quand la bascule parente est active. */
#mobile-drawer .sub-menu {
	position: relative;
}

#mobile-drawer .sub-menu::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 1px;
	border-radius: 999px;
	background-color: rgba(247, 250, 252, 0.15);
}

/* Element actif — NIVEAU 0 : barre laterale franche.
   Le selecteur est current-menu-ancestor et NON current-menu-item.
   MESURE le 16/09 : sur la page d accueil, current-menu-item est posee
   sur 7 des 8 entrees (les six rubriques sont des liens personnalises
   en href="#"), elle ne discrimine rien. current-menu-ancestor n est
   posee sur aucune entree en accueil, et sur la seule rubrique parente
   de la page courante ailleurs.
   current_page_item couvre le cas ACCUEIL, seule entree de niveau 0
   qui soit elle-meme une page.
   RESERVE MESUREE : la page "Activites" figure sous DEUX rubriques du
   menu (Culture & Loisirs et Tourisme). Sur cette page, deux rubriques
   portent donc la marque. C est une question de structure de menu, pas
   de CSS. */
#mobile-drawer .mobile-menu-container > ul > li.current-menu-ancestor > .drawer-nav-drop-wrap > a,
#mobile-drawer .mobile-menu-container > ul > li.current_page_item > a {
	color: #ffffff;
	font-weight: 600;
}

#mobile-drawer .mobile-menu-container > ul > li.current-menu-ancestor > .drawer-nav-drop-wrap > a::before,
#mobile-drawer .mobile-menu-container > ul > li.current_page_item > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: 999px;
	background-color: rgba(247, 250, 252, 0.85);
}

/* Element actif — SOUS-MENU : voile de fond, PAS de barre.
   Deux grammaires distinctes : la rubrique se marque par un trait, la
   page par une zone. Une barre aux deux niveaux les mettait en
   concurrence — trois traits sur un meme ecran, juge trop lourd.
   Remplace le bleu var(--global-palette-highlight) pose par Kadence,
   lequel ne pouvait pas etre change au Customizer : cette variable
   colore TOUS les liens du site. */
#mobile-drawer .sub-menu > li.current_page_item > a {
	color: #ffffff;
	font-weight: 600;
	background-color: rgba(247, 250, 252, 0.09);
	border-radius: 8px;
}

/* ---------------------------------------------------------------
   BARRE MOBILE COLLEE (rangee du haut) et pastille du hamburger
   Le reglage Customizer "entete epinglee sur mobile : uniquement la
   rangee du haut" rend le hamburger fixe au defilement. Kadence peint
   alors la barre en blanc opaque, ce qui rendait le bouton blanc
   invisible.
   MESURE le 17/09 : la classe d etat est item-is-stuck sur
   .site-top-header-wrap (item-at-start au repos). Le blanc est pose sur
   DEUX elements : le wrap et son .site-header-row-container-inner.
   LES DEUX !important SONT NECESSAIRES, et c est mesure, pas suppose.
   Quatre essais ont ete faits sur la meme cible dans la meme passe :
   selecteur plus specifique que celui de Kadence, feuille chargee apres
   la sienne, avec et sans media query, selecteur simplifie sans :not().
   Les quatre echouent. Seul !important l emporte. Aucune regle
   concurrente ne porte de priorite dans document.styleSheets : la cause
   du blanc n est PAS elucidee, elle est hors de ce que l API expose.
   DETTE OUVERTE, a reprendre.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	#masthead .site-top-header-wrap.kadence-sticky-header.item-is-fixed:not(.item-at-start),
	#masthead .site-top-header-wrap.kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
		background: transparent !important;
	}

	/* Pastille sombre sous le bouton, en etat colle SEULEMENT : au repos
	   le bouton reste nu sur la banniere. Le fond reprend la teinte du
	   tiroir de navigation (decision EY, rgba(9,12,16,0.86)) a une
	   opacite moindre, le bouton devant laisser voir le contenu qui
	   defile derriere lui. */
	.site-top-header-wrap.item-is-stuck #mobile-toggle {
		background-color: rgba(9, 12, 16, 0.45);
		border-radius: 10px;
		padding: 8px;
	}
}

/* ---------------------------------------------------------------
   BOUTON DE RETOUR EN HAUT, aligne sur le hamburger (mobile)
   Kadence rend deux elements superposes qui partagent la classe
   .kadence-scroll-to-top : le lien #kt-scroll-up et le bouton
   #kt-scroll-up-reader destine aux lecteurs d ecran. La regle vise
   la CLASSE, sans quoi l un des deux resterait a l ancien format.
   MESURE le 17/09 : le bouton d origine fait 36,70 px, fond
   rgb(45,55,72) opaque, sans rayon, a 30 px du bord droit. Le
   hamburger fait 42 px, fond rgba(9,12,16,0.45), rayon 10, a 10 px
   du bord. Les valeurs ci-dessous alignent le premier sur le second :
   ecart mesure entre les centres des deux boutons : 0,00.
   LES TROIS !important SONT MESURES, pas supposes. Un essai a ete fait
   sans eux, propriete par propriete : width, height, align-items et
   justify-content passent seuls ; background, right et border-radius
   echouent. Un premier essai avait conclu a tort que background passait
   seul : il avait ete mesure avec un harnais encore pose.
   Le padding d origine est laisse en place : le centrage flex le
   neutralise, une regle padding: 0 serait sans effet.
   PORTEE : l habillage (fond, rayon, centrage) vaut a TOUTES les
   largeurs. Seuls la taille et le retrait droit sont propres au
   mobile, ou ils alignent le bouton sur le hamburger. En bureau,
   Kadence garde ses 36,70 px a 45 px du bord (MESURE le 17/09).
   --------------------------------------------------------------- */
.kadence-scroll-to-top {
	background: rgba(9, 12, 16, 0.45) !important;
	border-radius: 10px !important;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.kadence-scroll-to-top {
		right: 10px !important;
		width: 42px;
		height: 42px;
	}
}

/* ============================================================
   TIROIR MOBILE : loupe et reseaux sociaux sur une seule ligne
   ------------------------------------------------------------
   DEPENDANCE CUSTOMIZER (non versionnee) : suppose que les elements
   "Permutateur de recherche" puis "Social" sont deposes dans la zone
   HORS-CHAMP de l onglet TABLETTE/MOBILE, dans cet ordre.
   Sans ces deux elements, ces regles ne peignent rien.

   La zone hors-champ empile ses elements en blocs pleine largeur.
   Le passage en flex les ramene sur une ligne ; la navigation garde
   sa pleine largeur par flex 0 0 100%.
   gap 20.39px : valeur RELEVEE, celle de l espacement interne du bloc
   social (reglage Customizer a 1.2 em). Si ce reglage change, ce gap
   ne suivra pas.
   Filet de separation : meme teinte que la ligne de groupe des
   sous-menus, rgba(247, 250, 252, 0.15).
   ============================================================ */

#mobile-drawer .drawer-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20.39px;
}

#mobile-drawer .drawer-content > .site-header-item-mobile-navigation {
	flex: 0 0 100%;
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(247, 250, 252, 0.15);
}

#mobile-drawer .drawer-content > .site-header-item:not(.site-header-item-mobile-navigation) {
	flex: 0 0 auto;
	margin: 0;
}

/* ============================================================
   TIROIR MOBILE : entree CONTACT masquee
   ------------------------------------------------------------
   L element social E-mail du tiroir pointe vers la meme page que
   l entree CONTACT du menu (mesure : meme href /contact/). L entree
   fait donc doublon et son libelle est remplace par une enveloppe.
   Elle est masquee ici, dans le TIROIR SEULEMENT : le menu desktop
   la conserve, la decision DJ la rend visible sur la barre collee.
   Cible par la CLASSE menu-item-492 sous le scope #mobile-drawer.
   L id du meme nom existe une seule fois dans le document et
   appartient au menu desktop : aucune collision.
   ============================================================ */

#mobile-drawer .mobile-menu-container > ul > li.menu-item-492 {
	display: none;
}

/* ============================================================
   VOILE DE RECHERCHE (#search-drawer) : arrondi et focus
   ------------------------------------------------------------
   Kadence habille ce champ depuis header.min.css (position 20
   dans le head, APRES la notre en 16) : rayon 3px, et au focus
   une ombre portee dure box-shadow: currentcolor 5px 5px 0 0,
   qui se lit comme un calque blanc decale vers le bas a droite.
   MESURE le 21/09 : couleur currentcolor et non blanc en dur.
   .drawer-content est une classe REELLE de la chaine du DOM,
   reprise ici pour peser une classe de plus que Kadence, selon
   le motif du bloc des icones sociales ci-dessus. Poids : leur
   regle de focus est en (1,3,1), la notre en (1,4,1). Aucun
   !important, l ordre de chargement devient sans objet.
   Fond : teinte du tiroir mobile (decision EY, rgba(9,12,16,0.86)),
   reprise a l identique plutot que d en inventer une. Kadence laisse
   le champ transparent : rgba(0,0,0,0) mesure le 21/09.
   Le rayon est pose HORS du :focus : sinon le champ changerait
   de forme en prenant le focus.
   ============================================================ */

#search-drawer .drawer-inner .drawer-content input.search-field {
	border-radius: 20px;
	background-color: rgba(9, 12, 16, 0.86);
}

#search-drawer .drawer-inner .drawer-content input.search-field:focus {
	box-shadow: none;
	border-width: 2px;
}

/* --------------------------------------------------------------------------
   Hauteur de la barre collee a l etat replie
   --------------------------------------------------------------------------
   Kadence pose en style inline sur .site-main-header-inner-wrap une hauteur
   fixe egale au reglage Customizer de retrecissement (60 px), height,
   min-height et max-height a la fois. Entre 1025 et 1577 px le menu se
   replie sur deux rangees : le ul mesure alors 95.56 et deborde de cette
   boite de 60. On neutralise le plafond dans cette seule plage.
   1578 px est la premiere largeur ou le menu tient sur une rangee.
   1025 px est la premiere largeur ou la barre collee remplace le tiroir
   mobile. Le !important est necessaire : la valeur combattue est inline. */
@media (min-width: 1025px) and (max-width: 1577px) {
	.site-main-header-wrap.item-is-stuck .site-main-header-inner-wrap {
		height: auto !important;
		min-height: 60px !important;
		max-height: none !important;
	}
}

/* ---------------------------------------------------------------
   LOGO BLANC AU REPOS — toutes les pages
   Rendu par inc/menu-maxi.php, meme hook et meme priorite que le
   titre. MESURE du 27/09 : le hook depose dans
   DIV.site-header-upper-inner-wrap, qui est le PARENT de
   .site-main-header-wrap. Les regles de masquage du logo natif,
   scopees sous .site-main-header-wrap, ne l atteignent donc pas.
   position absolute pour la meme raison que le titre : ce parent
   passe de block a flex quand la barre colle.
   Le padding-top de la rangee descend le menu pour degager la
   place. Il vaut a TOUTES les pages, comme le logo lui-meme depuis
   le 27/09. Le titre, lui, reste sur l accueil seul.
   :not(.item-is-stuck) : la barre collee garde sa geometrie.
   height et non width : le logo est en portrait sur une commune,
   en paysage sur une autre. Contraindre la hauteur sert les deux.
   Valeurs arretees a l essai jetable du 27/09, non calculees.
   La hauteur vient desormais du reglage Customizer etika_logo_hauteur
   (inc/entete-reglages.php), via --etika-logo-h. L ecart sous le logo est
   lui aussi un reglage Customizer, etika_logo_ecart, defaut 10 px.
   --------------------------------------------------------------- */
.site-main-header-wrap:not(.item-is-stuck) .site-main-header-inner-wrap {
	padding-top: calc(var(--etika-logo-h, 230px) + var(--etika-logo-ecart, 10px));
}

.etika-entete-logo {
	position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	display: flex;
	justify-content: center;
}

.etika-entete-logo img {
	height: var(--etika-logo-h, 230px);
	width: auto;
}

/* ---------------------------------------------------------------
   ENTETE MOBILE — le padding de la l. 634 ne s applique pas
   Sous 1025 px, Kadence rend #mobile-header et notre bloc
   .etika-entete-logo n est pas produit : le logo affiche est celui
   de Kadence, dans la rangee principale. Le padding-top de 240 px,
   qui degage la place du logo DESKTOP, n a donc plus d objet et
   pousse le logo mobile de 240 px vers le bas.
   MESURE du 28/09 a 500 px : logo a 327,19 avec le padding,
   87,19 sans. Le desktop conserve ses 240 px (verifie a 1025 et
   au dela : logo 72,00 - 302,00, geometrie du 27/09 inchangee).
   L id #mobile-header porte la specificite (1,3,0) contre (0,3,0)
   pour la l. 634 : aucun !important necessaire.
   La hauteur de la rangee du haut est un reglage Customizer, par
   onglet, et non du CSS : mobile ET tablette a regler.
   --------------------------------------------------------------- */
#mobile-header .site-main-header-wrap:not(.item-is-stuck) .site-main-header-inner-wrap {
	padding-top: 0;
}

/* ---------------------------------------------------------------
   LOGO CENTRE DANS SA ZONE — barre collee
   Kadence pose justify-content: flex-end sur .site-header-section-
   left-center et flex-start sur .site-header-section-right-center,
   pour serrer la zone centrale.
   Le logo de la barre collee se retrouve donc plaque contre un bord
   de sa zone au lieu d y etre centre.
   La regle vise le conteneur du logo par :has, et non une zone
   nommee, pour valoir quelle que soit la zone ou la commune a pose
   son logo.
   margin auto centre un enfant flex sans dependre de la valeur de
   justify-content de la zone.
   MESURE du 29/09 sur Venteuges a scrollY 900 : logo collant a left
   192,20 plaque a droite d une zone de 278,20 de large ; apres la
   regle, left 106,11 avec 86,11 de marge a gauche et 86,09 a droite.
   Specificite (0,4,0) contre (0,1,0) pour la regle Kadence : aucun
   important.
   Une regle existante l. 546, scopee #mobile-drawer, porte margin 0
   sur le meme selecteur de base : specificite (1,3,0) contre (0,4,0)
   ici, mais les deux scopes sont disjoints, tiroir mobile contre
   rangee desktop collee.
   --------------------------------------------------------------- */
.site-main-header-wrap.item-is-stuck .site-header-item:has(.site-branding) {
	margin-left: auto;
	margin-right: auto;
}