/**
 * Charte Silver Plus — habillage commun à tout le site.
 *
 * Le nom, le logo et l'or ne changent pas. Trois choses changent :
 *
 *   - une couleur chaude en plus de l'or, la terre, pour tout ce qui doit
 *     attirer l'œil sans être précieux ;
 *   - Cinzel réservé au titre principal, une fois par page ;
 *   - l'arche du logo reprise en haut des photos.
 *
 * Les sélecteurs sont parfois doublés (.sp-x.sp-x) : Kadence impose ses propres
 * règles sur les liens et les boutons, il faut passer devant.
 */

:root {
	/* L'or : la couleur de la marque. Le logo, le menu, les filets, les
	   chiffres sur fond sombre. Il ne sert plus à rien d'autre. */
	--sp-or-marque: #e9c36e;

	/* 07/10/2026 — LA CHARTE EST NOIR, IVOIRE, OR (demande de la cliente).
	   « --sp-terre » garde son nom, parce que tout le site le lit, mais il
	   porte désormais un OR PROFOND (#8a6a2c) : lisible sur l'ivoire (4,6:1)
	   et sous du texte blanc (4,9:1), ce que l'or de marque n'est pas.
	   L'ancienne explication ci-dessous date de la terre cuite.

	   La terre : ce qui doit attirer l'œil sans être précieux — un avantage,
	   un bouton, un surtitre, un chiffre sur fond clair.

	   L'or faisait les deux jusqu'ici, couleur de marque ET couleur d'action.
	   À force d'être partout il ne se remarquait plus nulle part ; et sur
	   fond clair il passait tout juste (l'or texte #a8823c sur ivoire :
	   3,9:1, sous les 4,5 exigés). La terre est à 5,6:1 sur l'ivoire et à
	   6:1 sous du texte blanc. */
	--sp-terre: #8a6a2c;
	--sp-terre-fonce: #0d0c0b;
	--sp-terre-claire: #f3ead6;

	--sp-encre: #0d0c0b;
	--sp-texte: #2b231d;
	--sp-ivoire: #fbf6ef;
	--sp-creme: #f4eadc;

	/* Cinzel ne fait plus que le titre principal. En capitales et sur tous
	   les titres, il effaçait la hiérarchie de la page — et les capitales se
	   lisent plus lentement. Les titres de section passent en Cormorant
	   Garamond, en bas de casse. */
	--sp-titre: 'Cinzel', Georgia, serif;
	--sp-accent: 'Cormorant Garamond', Georgia, serif;
	--sp-corps: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

	/* L'arche du logo : les deux boucliers dessinent une ogive. Reprise en
	   haut des photos, elle donne au site une forme à lui — ce qu'un
	   rectangle arrondi ne fera jamais. */
	--sp-arche: 50% 50% 16px 16px / 40% 40% 16px 16px;
	--sp-arche-petite: 50% 50% 8px 8px / 45% 45% 8px 8px;
}
/* ---------------------------------------------------------------
 * Menu principal
 *
 * Il y avait neuf entrées de premier niveau, 1 268 px de barre pour 1 425 px
 * d'écran, et 8 px entre deux mots. Pour les faire tenir plus bas, cinq
 * paliers de largeur réduisaient la police jusqu'à 12,5 px — du texte
 * capitales en Cinzel à 12,5 px, sur un site dont une partie des visiteurs
 * lit mal de près.
 *
 * On a retiré la cause plutôt que le symptôme : « La fondatrice » est
 * descendue dans « Le club », et les deux actions — mon compte, adhérer —
 * sont parties à droite, séparées des rubriques. Ce qui reste tient à
 * 16 px jusqu'à l'apparition du menu mobile, sans palier intermédiaire.
 * ------------------------------------------------------------ */

.main-navigation .primary-menu-container > ul {
	align-items: center;
	gap: 0 2px;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	letter-spacing: 0.04em;
	padding-left: 11px;
	padding-right: 11px;
	transition: color 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--sp-or-marque);
}

/* --- Les deux actions, à droite ------------------------------- */

.main-navigation .primary-menu-container > ul > li.sp-menu-compte {
	/* La barre est centrée : sa largeur suit son contenu, et une marge
	   automatique n'y pousse rien. Un écart franc et un filet séparent donc
	   les actions des rubriques, quelle que soit la largeur d'écran. */
	margin-left: 22px;
	padding-left: 22px;
	border-left: 1px solid rgba(246, 239, 228, 0.18);
}

/*
 * Le bouton d'adhésion.
 *
 * Il héritait de la police du menu : Cinzel, 18 px, graisse 600, en
 * CAPITALES. Des capitales serif de 18 px dans une pilule de 9 px de marge
 * intérieure, ça déborde de partout — le mot était plus grand que le bouton,
 * et le bouton pesait plus lourd que toute la barre.
 *
 * Une action n'est pas une rubrique : elle se lit d'un coup d'œil, en bas de
 * casse, dans la police du corps, avec de la place autour d'elle. L'or reste,
 * car sur l'en-tête sombre c'est la couleur de la marque.
 */
.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a {
	background: var(--sp-or-marque);
	color: var(--sp-encre);
	font-family: var(--sp-corps);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.2;
	border-radius: 999px;
	padding: 12px 26px;
	margin-left: 14px;
	box-shadow: 0 2px 10px rgba(233, 195, 110, 0.28);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a:hover,
.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a:focus-visible {
	background: #f5d894;
	color: var(--sp-encre);
	box-shadow: 0 5px 16px rgba(233, 195, 110, 0.42);
	transform: translateY(-1px);
}

/* « Mon compte » est une action elle aussi, mais secondaire : pas de pilule,
   et la police du corps pour qu'elle ne pèse pas autant qu'une rubrique. */
.main-navigation .primary-menu-container > ul > li.sp-menu-compte > a {
	font-family: var(--sp-corps);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* --- Les panneaux déroulants ---------------------------------- */

.header-navigation .sub-menu,
.header-navigation ul ul.sub-menu {
	border: 1px solid rgba(233, 195, 110, 0.25);
	border-top: 2px solid var(--sp-or-marque);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	border-radius: 0 0 14px 14px;
	padding: 10px 0;
}

/* Un panneau dont les entrées s'expliquent a besoin de place : 320 px
   laissent tenir une ligne de description sans la couper en trois. */
.header-navigation .sub-menu li.sp-menu-decrit {
	min-width: 320px;
}

.header-navigation .sub-menu li a {
	padding-top: 11px;
	padding-bottom: 11px;
	line-height: 1.3;
}

.header-navigation .sub-menu li a:hover,
.header-navigation .sub-menu li.current-menu-item > a {
	color: var(--sp-or-marque);
	background: rgba(233, 195, 110, 0.07);
}

/* La ligne d'explication, sous l'intitulé. Elle est dans le lien : toute la
   surface reste une seule cible. */
.sp-menu-desc {
	display: block;
	margin-top: 3px;
	font-family: var(--sp-corps);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.35;
	color: rgba(246, 239, 228, 0.62);
}

/* Entre 1 150 et 1 420 px, la barre se resserre — un seul palier, et la
   police ne descend pas en dessous de 15 px.
   « Accueil » s'efface dans cette bande : le logo est juste au-dessus, il
   mène à la même page, et l'entrée coûtait 110 px. Sur le panneau mobile,
   où le logo est masqué par le panneau, elle reste. */
@media (min-width: 1150px) and (max-width: 1420px) {

	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		font-size: 15px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.main-navigation .primary-menu-container > ul > li.menu-item-home {
		display: none;
	}

	.main-navigation .primary-menu-container > ul > li.sp-menu-compte {
		margin-left: 14px;
		padding-left: 14px;
	}

	.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a {
		padding-left: 18px;
		padding-right: 18px;
		margin-left: 6px;
	}
}

.header-navigation .sub-menu li a:hover .sp-menu-desc {
	color: rgba(246, 239, 228, 0.85);
}


/* ---------------------------------------------------------------
 * Menu mobile
 * ------------------------------------------------------------ */

#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content {
	background: var(--sp-encre);
}

/* Les entrées qui ont un sous-menu sont enveloppées par le thème dans un
   « drawer-nav-drop-wrap », pour loger la flèche à côté du lien. Un sélecteur
   en enfant direct de <li> ne les atteignait donc pas : elles retombaient sur
   la police du thème, et le panneau affichait deux typographies selon qu'une
   entrée avait ou non des sous-entrées. */
#mobile-menu li.menu-item > a,
#mobile-menu li.menu-item > .drawer-nav-drop-wrap > a,
.mobile-navigation ul li.menu-item > a,
.mobile-navigation ul li.menu-item > .drawer-nav-drop-wrap > a {
	font-family: var(--sp-titre);
	font-size: 16px;
	letter-spacing: 0.05em;
	border-bottom-color: rgba(233, 195, 110, 0.22);
}

#mobile-menu li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > a {
	color: var(--sp-or-marque);
}

/* Les descriptions, dans le panneau mobile aussi : la place ne manque pas, et
   c'est là qu'on hésite le plus. Un cran plus petites que sur ordinateur. */
#mobile-drawer .sp-menu-desc {
	font-size: 12px;
	margin-top: 2px;
	color: rgba(246, 239, 228, 0.55);
}

/* Les deux actions se détachent de la liste des rubriques. */
#mobile-menu li.sp-menu-compte,
.mobile-navigation ul li.sp-menu-compte {
	margin-top: 14px;
	border-top: 1px solid rgba(233, 195, 110, 0.22);
}

/* L'adhésion : bouton pleine largeur en bas du panneau, l'action principale
   pour qui n'est pas encore membre.

   Auparavant, ce bouton était ajouté par le plugin en plus du menu, ce qui
   faisait deux entrées d'adhésion sur mobile dès que l'une fut ajoutée au
   menu. C'est désormais l'entrée de menu elle-même qui prend cette forme. */
#mobile-menu li.sp-menu-adherer,
.mobile-navigation ul li.sp-menu-adherer {
	margin: 20px 20px 8px;
	border: 0;
}

#mobile-menu li.sp-menu-adherer > a,
.mobile-navigation ul li.sp-menu-adherer > a {
	display: block;
	background: var(--sp-or-marque);
	color: var(--sp-encre);
	font-family: var(--sp-corps);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	border: 0;
	border-radius: 0;
	padding: 16px 20px;
}


/* ---------------------------------------------------------------
 * Textes et liens
 * ------------------------------------------------------------ */

/* Le thème met une majuscule à chaque mot des titres : cela ne se fait pas en français. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
	text-transform: none;
}

.entry-content a:not(.button):not(.wp-block-button__link):not(.elementor-button):not(.sp-btn),
.entry-content a:not(.button):not(.wp-block-button__link):not(.elementor-button):not(.sp-btn):visited {
	color: var(--sp-terre);
	text-decoration-color: rgba(168, 130, 60, 0.45);
	text-underline-offset: 3px;
}

.entry-content a:not(.button):not(.wp-block-button__link):not(.elementor-button):not(.sp-btn):hover {
	color: var(--sp-terre-fonce);
	text-decoration-color: currentColor;
}

::selection {
	background: rgba(233, 195, 110, 0.35);
	color: var(--sp-encre);
}

blockquote {
	border-left: 3px solid var(--sp-or-marque);
	padding-left: 22px;
	font-family: var(--sp-accent);
	font-size: 1.22em;
	line-height: 1.45;
	color: var(--sp-texte);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid rgba(168, 130, 60, 0.3);
}

/* ---------------------------------------------------------------
 * Boutons et champs
 * ------------------------------------------------------------ */

.wp-block-button__link,
.entry-content .button,
input[type="submit"],
button[type="submit"],
.elementor-button {
	border-radius: 100px;
	letter-spacing: 0.03em;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover,
.entry-content .button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.elementor-button:hover {
	transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
	border: 1px solid rgba(28, 23, 20, 0.18);
	border-radius: 10px;
	padding: 11px 14px;
	background: #fff;
	font-family: var(--sp-corps);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	border-color: var(--sp-terre);
	box-shadow: 0 0 0 3px rgba(138, 106, 44, 0.18);
	outline: none;
}

/* Repère de navigation au clavier, absent jusqu'ici. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sp-or-marque);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.site-footer a:hover,
.site-footer .footer-navigation a:hover {
	color: var(--sp-or-marque);
}

.site-footer .footer-navigation .menu > li > a {
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
 * Les déplacements d'un partenaire
 * ------------------------------------------------------------ */

.sp-zones {
	margin: 6px 0 0;
	font-size: 0.95em;
	color: var(--sp-terre);
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * L'invitation à installer l'application
 *
 * Elle vit ici, et non dans la feuille des blocs du club : elle s'affiche
 * sur n'importe quelle page, y compris celles qui ne portent aucun bloc
 * Silver Plus.
 *
 * Posée au-dessus du bouton flottant des cookies, jamais par-dessus : ce
 * bouton doit rester atteignable pour revenir sur son choix.
 * ------------------------------------------------------------ */

.sp-app-invite {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 84px;
	z-index: 9000;
	background: var(--sp-encre);
	color: var(--sp-ivoire);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(28, 23, 20, 0.3);
	padding: 18px 20px;
	max-width: 30rem;
	margin: 0 auto;
	font-family: var(--sp-corps);
}

.sp-app-invite[hidden] {
	display: none;
}

.sp-app-invite .sp-app-invite-titre {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--sp-or-marque);
}

.sp-app-invite .sp-app-invite-texte {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(251, 246, 239, 0.9);
}

.sp-app-invite-boutons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.sp-app-invite .sp-app-invite-non {
	appearance: none;
	background: none;
	border: 0;
	color: rgba(251, 246, 239, 0.72);
	font-family: var(--sp-corps);
	font-size: 0.92rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 10px 4px;
}

.sp-app-invite .sp-app-invite-non:hover {
	color: var(--sp-ivoire);
}

.sp-app-invite [data-sp-app-installer][hidden] {
	display: none;
}

/* ---------------------------------------------------------------
 * Une liste d'étapes sous un titre centré
 *
 * Sans largeur maximale, elle s'étalait sur toute la page et le bloc perdait
 * son centre de gravité.
 * ------------------------------------------------------------ */

.sp-etapes.sp-etapes {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.sp-etapes ol {
	margin: 0;
	padding-left: 1.4em;
}

.sp-etapes li {
	margin-bottom: 8px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------
 * Un récit
 *
 * La page de la fondatrice tenait en un seul pavé où les paragraphes se
 * touchaient, sur toute la largeur de l'écran. Un texte se lit entre 60 et
 * 75 signes par ligne ; au-delà, l'œil perd le début de la ligne suivante.
 * ------------------------------------------------------------ */

.sp-recit.sp-recit {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.sp-recit p {
	margin: 0 0 20px;
	line-height: 1.7;
}

.sp-recit p:last-child {
	margin-bottom: 0;
}

/* Une phrase mise en exergue : un filet or à gauche, rien de plus. */
.sp-exergue.sp-exergue {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	border-left: 3px solid var(--sp-or-marque);
	padding-left: 22px;
}

.sp-exergue p {
	margin: 0;
	font-family: var(--sp-accent);
	font-size: 1.35rem;
	line-height: 1.5;
	color: var(--sp-encre);
}

@media (max-width: 720px) {
	.sp-exergue p {
		font-size: 1.15rem;
	}
}

/* ===============================================================
 * Le pied de page en noir et or (09/10/2026)
 *
 * Section de marque ajoutée par includes/club/pied-de-page.php, au-dessus
 * des rangées du thème ; les rangées du thème (logos des soutiens, menu
 * légal, copyright) sont restylées ici sans toucher à leur contenu.
 * ============================================================= */

#colophon.site-footer {
	position: relative;
	background-color: #0d0c0b;
	background-image:
		radial-gradient(560px 260px at 6% 0%, rgba(233, 195, 110, 0.12), transparent),
		radial-gradient(520px 240px at 96% 40%, rgba(192, 192, 200, 0.06), transparent),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M10 140V70a60 60 0 0 1 120 0v70' fill='none' stroke='%23e9c36e' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
	color: rgba(246, 239, 227, 0.78);
}

/* Le filet d'or qui ouvre le pied de page, comme celui qui ferme les en-têtes. */
#colophon.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sp-or-marque, #e9c36e) 30%, #f6e3b4 50%, var(--sp-or-marque, #e9c36e) 70%, transparent);
	opacity: 0.8;
}

/* --- La section de marque --- */

.sp-pied {
	padding: clamp(56px, 7vw, 84px) 24px clamp(40px, 5vw, 56px);
}

.sp-pied-grille {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 40px 48px;
	max-width: 1180px;
	margin: 0 auto;
}

.sp-pied p {
	margin: 0;
}

.sp-pied-nom {
	font-family: var(--sp-titre, 'Cinzel', serif);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: #f3efe8;
	background: linear-gradient(180deg, #ffffff 0%, #e7e2da 45%, #e9c36e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sp-pied p.sp-pied-club {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-family: var(--sp-corps, 'Montserrat', sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--sp-or-marque, #e9c36e);
}

.sp-pied-club::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.sp-pied p.sp-pied-devise {
	margin-top: 18px;
	font-family: var(--sp-accent, 'Cormorant Garamond', serif);
	font-size: 1.25rem;
	font-style: italic;
	color: #f6efe3;
}

.sp-pied p.sp-pied-texte {
	margin-top: 8px;
	max-width: 34ch;
	font-size: 0.92rem;
	line-height: 1.6;
}

.sp-pied a.sp-pied-bouton {
	display: inline-flex;
	margin-top: 22px;
	padding: 12px 22px;
	border-radius: 0;
	background: var(--sp-or-marque, #e9c36e);
	color: #0d0c0b;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.sp-pied a.sp-pied-bouton:hover,
.sp-pied a.sp-pied-bouton:focus-visible {
	background: #fff;
	color: #0d0c0b;
}

.sp-pied p.sp-pied-titre {
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(233, 195, 110, 0.25);
	font-family: var(--sp-corps, 'Montserrat', sans-serif);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sp-or-marque, #e9c36e);
}

.sp-pied ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-pied li {
	margin: 0 0 11px;
}

.sp-pied .sp-pied-colonne a {
	color: rgba(246, 239, 227, 0.82);
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sp-pied .sp-pied-colonne a:hover,
.sp-pied .sp-pied-colonne a:focus-visible {
	color: var(--sp-or-marque, #e9c36e);
}

.sp-pied .sp-pied-contact a {
	font-size: 1rem;
	color: #f6efe3;
}

.sp-pied-reseaux {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.sp-pied .sp-pied-reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(233, 195, 110, 0.55);
	border-radius: 50%;
	color: var(--sp-or-marque, #e9c36e);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-pied .sp-pied-reseaux a:hover,
.sp-pied .sp-pied-reseaux a:focus-visible {
	background: var(--sp-or-marque, #e9c36e);
	color: #0d0c0b;
}

/* --- Les rangées du thème --- */

#colophon .site-top-footer-wrap,
#colophon .site-middle-footer-wrap,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container-inner {
	background: transparent !important;
	border: 0 !important;
}

/* Rangée du haut : les réseaux et labels, sur des pastilles ivoire
   (le logo de Femmes du Parisis est sombre : sur le noir, il disparaîtrait). */
#colophon .site-top-footer-wrap .site-top-footer-inner-wrap {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 26px 0 30px !important;
	min-height: 0 !important;
	border-top: 1px solid rgba(233, 195, 110, 0.14);
}

#colophon .site-top-footer-inner-wrap::before {
	content: "Nos réseaux et labels";
	flex: 0 0 100%;
	text-align: center;
	font-family: var(--sp-corps, 'Montserrat', sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(246, 239, 227, 0.5);
}

/* Les réseaux sociaux sont dans la section de marque : pas en double ici. */
#colophon .site-top-footer-wrap .site-footer-section:has(.footer-social-inner-wrap) {
	display: none !important;
}

#colophon .site-top-footer-wrap .site-footer-section {
	flex: 0 0 auto;
	width: auto;
}

#colophon .site-top-footer-wrap figure {
	margin: 0;
}

#colophon .site-top-footer-wrap img {
	display: block;
	width: auto !important;
	height: 52px !important;
	max-width: 100%;
	padding: 8px 14px;
	border-radius: 12px;
	background: #fbf6ef;
	box-sizing: content-box;
	object-fit: contain;
}

/* Rangées du bas : le menu légal et le copyright, une seule barre discrète. */
#colophon .site-middle-footer-wrap .site-middle-footer-inner-wrap {
	padding: 22px 0 6px !important;
	min-height: 0 !important;
	border-top: 1px solid rgba(233, 195, 110, 0.14);
}

#colophon .footer-navigation .menu {
	justify-content: center;
	gap: 2px 10px;
}

#colophon.site-footer .footer-navigation .footer-menu-container > ul > li > a {
	padding: 4px 12px;
	font-size: 0.82rem;
	color: rgba(246, 239, 227, 0.62);
}

#colophon.site-footer .footer-navigation .footer-menu-container > ul > li > a:hover,
#colophon.site-footer .footer-navigation .footer-menu-container > ul > li > a:focus-visible {
	color: var(--sp-or-marque, #e9c36e);
}

#colophon .site-bottom-footer-wrap .site-bottom-footer-inner-wrap {
	padding: 6px 0 26px !important;
	min-height: 0 !important;
}

#colophon .footer-html,
#colophon .footer-html-inner p {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: rgba(246, 239, 227, 0.45);
	text-align: center;
}

/* --- Tablette et téléphone --- */

@media (max-width: 1024px) {

	.sp-pied-grille {
		grid-template-columns: 1fr 1fr;
	}

	.sp-pied-marque {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {

	.sp-pied {
		padding: 48px 20px 36px;
	}

	.sp-pied-grille {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.sp-pied p.sp-pied-texte {
		margin-left: auto;
		margin-right: auto;
	}

	.sp-pied-reseaux {
		justify-content: center;
	}

	#colophon .site-top-footer-wrap img {
		height: auto !important;
		max-height: 42px;
		max-width: calc(100vw - 88px);
	}
}

/* ---------------------------------------------------------------
 * Le bouton « Adhérer » (09/10/2026)
 *
 * Le thème étire chaque lien du menu sur toute la hauteur de la barre : la
 * pilule touchait le haut et le bas du bandeau noir. Elle est désormais fine
 * et centrée, en aplat d'or et à angles droits (demande de Dimitri : « pas
 * d'arrondis, un aplat de couleur »).
 *
 * Couleur du texte imposée : quand on fait défiler la page, le menu devient
 * « collant » et le thème repasse tous ses liens en blanc par une règle à
 * identifiant (#masthead …) — blanc sur or, le mot disparaissait.
 * ------------------------------------------------------------ */

.main-navigation .primary-menu-container > ul > li.sp-menu-adherer {
	display: flex;
	align-items: center;
}

.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a,
#masthead .kadence-sticky-header .header-menu-container > ul > li.sp-menu-adherer > a {
	align-self: center;
	height: auto !important;
	min-height: 0 !important;
	padding: 8px 22px;
	border: 0;
	border-radius: 0;
	background: var(--sp-or-marque, #e9c36e);
	color: #0d0c0b !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: none;
	transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a:hover,
.main-navigation .primary-menu-container > ul > li.sp-menu-adherer > a:focus-visible,
#masthead .kadence-sticky-header .header-menu-container > ul > li.sp-menu-adherer > a:hover {
	background: #ffffff;
	color: #0d0c0b !important;
	box-shadow: none;
	transform: none;
}