/*
Theme Name: Mon Lopin, Kadence Child
Description: Thème enfant de Kadence pour monlopin.fr. Porte la charte (jetons, polices, largeur de lecture) et tout le code sur mesure. Ne jamais modifier le thème parent.
Author: Mon Lopin
Version: 0.2.9
Template: kadence
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monlopin-kadence-child
*/

/* ==========================================================================
   1. Polices auto-hébergées (licence SIL OFL 1.1, fichiers dans fonts/).
   Aucun appel à Google Fonts : rien ne sort vers un CDN tiers (RGPD et vitesse).
   Depuis la 0.2.3 (décision d'Olivia du 22/10/2026) : les MÊMES fichiers que le site
   Elementor, c'est-à-dire les polices variables de Google Fonts qu'Elementor sert en local
   (wp-content/uploads/elementor/google-fonts/fonts/), relevées le 22/10/2026 :
     fraunces-32d75342 (droit) et fraunces-6fa7a056 (italique), graisses 100 à 900 ;
     mulish-c63107f3 (droit) et mulish-d98651a9 (italique), graisses 200 à 900.
   Mêmes fichiers, mêmes largeurs de texte : les passages à la ligne sont ceux du site.
   Sous-ensemble latin seulement : aucun texte du site n'utilise le latin étendu (relevé du
   22/10/2026) ; un caractère qui en sortirait s'afficherait dans la police de repli.
   Seule Fraunces droite est préchargée (police du H1), voir inc/structure.php.
   Piles : --ml-titres et --ml-texte (section 2).
   ========================================================================== */
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-normal-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-italic-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Mulish";
	src: url("fonts/mulish-latin-normal-variable.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Mulish";
	src: url("fonts/mulish-latin-italic-variable.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1 bis. Polices de repli ajustées (contre le CLS, leçon de Sœurs 1.11.36) : tant que
   Fraunces ou Mulish n'est pas arrivée, le texte s'affiche dans une police système aux
   métriques recalées (size-adjust = largeur moyenne d'un texte français de jardinage,
   ascent et descent ramenés à ceux de la police du site). Le changement de police ne
   recompose presque plus les titres.
   Deux familles par police : Georgia / Arial (Mac, iOS, Windows), Noto Serif / Roboto
   (Android). Valeurs calculées le 22/10/2026 avec fontTools (hhea, hmtx) sur les fichiers
   de Fontsource 5.3.0 (polices statiques jusqu'à la 0.2.2, mêmes dessins que les variables
   actuelles). À vérifier dans le navigateur (médiane sur les H1 réels) une fois le site en
   ligne, comme pour Sœurs.
   ========================================================================== */
@font-face {
	font-family: "Fraunces repli";
	src: local("Georgia Bold"), local("Georgia-Bold");
	font-weight: 600;
	size-adjust: 92.97%;
	ascent-override: 105.19%;
	descent-override: 27.43%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Fraunces repli Android";
	src: local("Noto Serif SemiBold"), local("NotoSerif-SemiBold"), local("Noto Serif Bold"), local("NotoSerif-Bold");
	font-weight: 600;
	size-adjust: 96.37%;
	ascent-override: 101.49%;
	descent-override: 26.46%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Mulish repli";
	src: local("Arial"), local("ArialMT");
	font-weight: 400;
	size-adjust: 102.26%;
	ascent-override: 98.28%;
	descent-override: 24.45%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Mulish repli";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700;
	size-adjust: 98.62%;
	ascent-override: 101.90%;
	descent-override: 25.35%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Mulish repli Android";
	src: local("Roboto"), local("Roboto-Regular");
	font-weight: 400;
	size-adjust: 103.23%;
	ascent-override: 97.36%;
	descent-override: 24.22%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Mulish repli Android";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 700;
	size-adjust: 105.04%;
	ascent-override: 95.68%;
	descent-override: 23.80%;
	line-gap-override: 0%;
}

/* ==========================================================================
   2. Jetons de marque Mon Lopin : source de vérité des couleurs.
   Déclarés sur :root ET sur body : Kadence imprime sa palette dans un :root en ligne
   APRÈS cette feuille (section 3). Une valeur posée sur body l'emporte pour tout ce
   qui est dans la page, sans !important.
   Contrastes WCAG mesurés sur Crème (#F4EEE2), puis sur Crème foncé (#EAE1CE).
   Une teinte sous 4,5:1 sur Crème reçoit une variante « -texte », calculée pour
   tenir 4,5:1 sur Crème foncé aussi (fond des encadrés). Les teintes de charte
   restent pour filets, puces, bordures, fonds et grands pictos.
   ========================================================================== */
:root,
body {
	--ml-sauge:            #6B7A52; /* 4,01 sur crème : sous 4,5, voir --ml-sauge-texte */
	--ml-sauge-clair:      #8E9C73; /* 2,54 sur crème : décor seulement, voir --ml-sauge-clair-texte */
	--ml-creme:            #F4EEE2; /* fond général */
	--ml-creme-fonce:      #EAE1CE; /* fond secondaire (1,12 sur crème : jamais pour du texte) */
	--ml-terre:            #3E342B; /* texte courant : 10,50 sur crème, 9,34 sur crème foncé */
	--ml-terracotta:       #C97B4A; /* 2,83 sur crème : accent décoratif, voir --ml-terracotta-texte */

	/* Teintes réservées au TEXTE (contraste ≥ 4,5:1 sur crème et sur crème foncé). */
	--ml-sauge-texte:      #5C6947; /* 5,10 sur crème, 4,53 sur crème foncé */
	--ml-sauge-clair-texte:#5E684A; /* 5,11 sur crème, 4,55 sur crème foncé ; presque confondue avec --ml-sauge-texte */
	--ml-terracotta-texte: #94542C; /* 5,10 sur crème, 4,53 sur crème foncé */

	/* Teintes réservées au texte sur fond Terre (pied de page, encart « Côté terrier »). */
	--ml-sauge-sur-terre:      #A9B58F; /* 5,60 sur terre (la sauge-clair de charte n'y fait que 4,13) */
	--ml-terracotta-sur-terre: #D9905F; /* 4,68 sur terre (la terracotta de charte n'y fait que 3,71) */

	/* Piles typographiques : à utiliser partout, jamais Georgia ni Arial en dur. */
	--ml-titres: "Fraunces", "Fraunces repli", "Fraunces repli Android", Georgia, "Times New Roman", serif;
	--ml-texte:  "Mulish", "Mulish repli", "Mulish repli Android", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Largeurs relevées sur le site Elementor (modèles 51, 71, 255 et 603). */
	--ml-largeur-lecture: 760px;  /* colonne d'article */
	--ml-largeur-site:    1140px; /* conteneurs de l'accueil, fil d'Ariane */

	/* Rayons relevés sur le site Elementor. */
	--ml-rayon-carte:  20px;
	--ml-rayon-photo:  30px;
	--ml-rayon-encart: 14px;
}

/* ==========================================================================
   3. Branchement sur la palette Kadence.
   Déclaré sur `body` et non sur `:root` : Kadence imprime sa propre palette dans un
   `:root` en ligne dans le <head>, donc APRÈS cette feuille. Une valeur posée sur
   `body` l'emporte quoi qu'il arrive, sans `!important` et sans dépendre de l'ordre
   de chargement.
   Couleurs de bouton : Crème sur Sauge ne fait que 4,01:1 ; le fond des boutons est
   donc Sauge texte (5,10:1 avec le Crème).
   ========================================================================== */
body {
	--global-palette1: var(--ml-sauge-texte);
	--global-palette2: var(--ml-terracotta-texte);
	--global-palette3: var(--ml-terre);           /* titres */
	--global-palette4: var(--ml-terre);           /* texte courant */
	--global-palette5: var(--ml-sauge-texte);     /* texte secondaire */
	--global-palette6: var(--ml-sauge-clair);     /* bordures */
	--global-palette7: var(--ml-creme-fonce);
	--global-palette8: var(--ml-creme);
	--global-palette9: var(--ml-creme);           /* fond général */
	--global-palette9rgb: 244, 238, 226;

	--global-palette-highlight:      var(--ml-terracotta-texte);
	--global-palette-highlight-alt:  var(--ml-terre);
	--global-palette-highlight-alt2: var(--ml-terre);

	--global-palette-btn:              var(--ml-creme);
	--global-palette-btn-bg:           var(--ml-sauge-texte);
	--global-palette-btn-hover:        var(--ml-creme);
	--global-palette-btn-bg-hover:     var(--ml-terre);
	--global-palette-btn-sec:          var(--ml-sauge-texte);
	--global-palette-btn-sec-bg:       transparent;
	--global-palette-btn-sec-hover:    var(--ml-terre);
	--global-palette-btn-sec-bg-hover: transparent;

	--global-body-font-family:        var(--ml-texte);
	--global-heading-font-family:     var(--ml-titres);
	--global-primary-nav-font-family: var(--global-body-font-family);
}

/* ==========================================================================
   4. Fond général et texte.
   ========================================================================== */
body {
	background-color: var(--ml-creme);
	color: var(--ml-terre);
	font-family: var(--ml-texte);
	font-size: 18px; /* kit Elementor : 18 px, 17 px sous 768 px */
	line-height: 1.7;
}
@media (max-width: 767px) {
	body { font-size: 17px; }
}
a { color: var(--ml-terracotta-texte); }
a:hover { color: var(--ml-terre); }

/* ==========================================================================
   5. Titres : Fraunces 600 (seule graisse chargée : pas de graisse synthétique).
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
	color: var(--ml-terre);
}

/* Tailles du kit Elementor (5). Toutes les hauteurs de ligne sont sans unité :
   une valeur en px héritée écrase les titres sur plusieurs lignes (pages légales, 22/10/2026). */
h1, .entry-title { font-size: 44px; line-height: 1.2; }
h2 { font-size: 34px; line-height: 1.25; }
h3 { font-size: 26px; line-height: 1.3; }
h4 { font-size: 21px; line-height: 1.3; }
h5 { font-size: 18px; line-height: 1.4; }
h6 { font-size: 16px; line-height: 1.4; }
@media (max-width: 767px) {
	h1, .entry-title { font-size: 32px; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	h4 { font-size: 19px; line-height: 1.35; }
	h5 { font-size: 17px; }
	h6 { font-size: 15px; }
}

/* ==========================================================================
   6. Largeur de lecture : posée par chaque gabarit (assets/article.css, section 13
   ci-dessous), sans dépendre des conteneurs ni des réglages de Kadence.
   ========================================================================== */

/* ==========================================================================
   7. Liens et accents.
   ========================================================================== */
.entry-content a:not(.button):not(.wp-block-button__link) {
	color: var(--ml-sauge-texte);
}
.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--ml-terracotta-texte);
}

.entry-meta,
.entry-meta a,
.entry-taxonomies,
.post-date {
	color: var(--ml-sauge-texte);
	font-family: var(--global-body-font-family);
}

hr, .entry-content hr,
.wp-block-separator {
	border-color: var(--ml-sauge-clair);
	color: var(--ml-sauge-clair);
}

/* ==========================================================================
   8. Fil d'Ariane (inc/structure.php). Source : Rank Math (nav.rank-math-breadcrumb >
   p > a, span.separator, span.last) ; repli sans Rank Math : nav.crumbs > ol > li.
   Fil complet à toutes les largeurs, comme sur le site Elementor (décision d'Olivia du
   22/10/2026, version 0.2.2 : la règle de Sœurs qui masquait la page courante sous 640 px
   n'est pas reprise).
   ========================================================================== */
.rank-math-breadcrumb {
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	font-family: var(--global-body-font-family);
}
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb .separator {
	margin: 0 8px;
	color: var(--ml-sauge-clair);
}
.rank-math-breadcrumb a {
	color: var(--ml-sauge-texte);
	text-decoration: none;
}
.rank-math-breadcrumb a:hover { text-decoration: underline; }
.crumbs {
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	font-family: var(--global-body-font-family);
}
.crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
	content: "»";
	margin-right: 8px;
	color: var(--ml-sauge-clair);
}
.crumbs a {
	color: var(--ml-sauge-texte);
	text-decoration: none;
}
.crumbs a:hover { text-decoration: underline; }

/* ==========================================================================
   9. Page 404 : liens vers les pages principales (inc/structure.php).
   ========================================================================== */
.monlopin-404-liens { margin-top: 2rem; }
.monlopin-404-liens p { margin: 0 0 .5rem; }
.monlopin-404-liens ul { margin: 0; padding-left: 1.2em; }
.monlopin-404-liens li { margin: .3rem 0; }

/* Cible du lien d'évitement (tabindex="-1" posé par inc/structure.php) : pas de contour au clic. */
#main:focus,
#inner-wrap:focus { outline: none; }

/* ==========================================================================
   10. Bouton « Remonter en haut de la page » (inc/haut-de-page.php).
   Rond de 44 px, à 20 px des bords. --monlopin-bas-reserve : hauteur du bandeau de
   cookies, posée sur :root par monlopin-haut.js, pour que le bouton passe au-dessus.
   ========================================================================== */
.monlopin-haut {
	position: fixed;
	right: 20px;
	bottom: calc(20px + var(--monlopin-bas-reserve, 0px));
	z-index: 900;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ml-sauge-clair);
	border-radius: 50%;
	background: var(--ml-sauge-texte);
	box-shadow: 0 4px 14px rgba(62, 52, 43, .25);
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}
.monlopin-haut[hidden] { display: none; }
.monlopin-haut.est-visible { opacity: 1; transform: none; }
.monlopin-haut svg { width: 42px; height: 42px; display: block; }
.monlopin-haut:hover { background: var(--ml-terre); }
.monlopin-haut:focus-visible { outline: 2px solid var(--ml-terracotta-texte); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.monlopin-haut { transition: opacity .01s; transform: none; }
}
@media print { .monlopin-haut { display: none; } }

/* ==========================================================================
   11. Pied de page du site (inc/pied.php), repris du modèle Elementor 71.
   Valeurs relevées le 22/10/2026 (relecture/reference/valeurs-elementor.json) :
   marges 40/44/28 px, 4 colonnes, titres de colonne 13 px capitales, liens 14 px.
   Crème sur Terre : 10,50:1. Titres de colonne en --ml-sauge-sur-terre (5,60:1),
   la sauge-clair de charte n'y faisant que 4,13:1.
   ========================================================================== */
.monlopin-pied {
	background: var(--ml-terre);
	color: var(--ml-creme);
	font-family: var(--ml-texte);
	font-size: 14px;
	line-height: 1.45;
	padding: 40px 44px 28px;
}
.monlopin-pied a { color: var(--ml-creme); text-decoration: none; }
.monlopin-pied a:hover { text-decoration: underline; text-underline-offset: .2em; }
.monlopin-pied ul { list-style: none; margin: 0; padding: 0; }
.monlopin-pied li { margin: 0 0 9px; line-height: 1.42858; } /* lignes de 20 px, comme le modèle 71 */
.monlopin-pied .pied-inner {
	/* Comme le modèle 71 : colonnes en pourcentage (26, 20, 20 et 24 %) réparties sur toute la largeur
	   (space-between), texte en retrait de 10 px. Liens à 404, 682 et 960 px à 1 280 px ; à 1 568 px,
	   les colonnes s'étalent comme avant la bascule au lieu de rester à gauche. */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 36px 32px;
}
.monlopin-pied .pied-inner > .pied-col { box-sizing: border-box; width: 20%; padding-left: 10px; }
.monlopin-pied .pied-inner > .pied-marque { width: 26%; }
.monlopin-pied .pied-inner > .pied-col-contact { width: 24%; }
.monlopin-pied .pied-marque { padding: 10px 0 0 10px; }
.monlopin-pied .pied-nom {
	font-family: var(--ml-titres);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.275; /* 30,6 px */
	margin: 0 0 12px;
}
.monlopin-pied .pied-nom em { font-style: italic; color: var(--ml-sauge-clair); } /* 24 px : grand texte, 3:1 suffit (4,13:1) */
.monlopin-pied .pied-phrase { margin: 0 0 14.4px; color: rgba(244, 238, 226, .82); line-height: 1.6; }
.monlopin-pied .pied-titre {
	font-weight: 800;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ml-sauge-sur-terre);
	margin: 10px 0 14px;
}
.monlopin-pied .pied-bas {
	margin-top: 37px;
	padding-top: 20px;
	border-top: 1px solid rgba(244, 238, 226, .15);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 24px;
	font-size: 13px;
	line-height: 2.35385; /* 30,6 px, comme le modèle 71 */
	color: rgba(244, 238, 226, .82);
}
.monlopin-pied .pied-bas p { margin: 0; }
.monlopin-pied .pied-legal { display: flex; flex-wrap: wrap; }
.monlopin-pied .pied-legal li { margin: 0; line-height: inherit; }
.monlopin-pied .pied-legal li + li::before { content: "·"; content: "·" / ""; margin: 0 6px; }
.monlopin-pied .pied-legal a { color: rgba(244, 238, 226, .82); }
/* Bouton « Gérer mes cookies » (inc/pied.php) : vrai bouton pour Complianz, présenté comme un lien. */
.monlopin-pied .pied-cookies {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(244, 238, 226, .82);
	cursor: pointer;
}
.monlopin-pied .pied-cookies:hover { text-decoration: underline; text-underline-offset: .2em; background: none; color: var(--ml-creme); }
.monlopin-pied .pied-cookies:focus-visible { outline: 2px solid var(--ml-creme); outline-offset: 2px; }
@media (max-width: 1024px) {
	.monlopin-pied .pied-inner { display: grid; gap: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.monlopin-pied .pied-inner > .pied-col { width: auto; padding-left: 0; }
}
@media (max-width: 767px) {
	/* Cotes du modèle 71 à 390 px, relevées le 22/10/2026 : marges 44/22 px, 9 px entre colonnes,
	   liens sur 20 px tous les 29 px, copyright sur une ligne de 28,9 px, liens légaux en 10 px. */
	.monlopin-pied { padding: 44px 22px 22px; }
	.monlopin-pied .pied-inner { grid-template-columns: minmax(0, 1fr); gap: 9px; }
	.monlopin-pied .pied-marque { padding: 0; max-width: none; }
	.monlopin-pied .pied-nom { padding-top: 8px; line-height: 1.2042; }
	.monlopin-pied .pied-col:not(.pied-marque) { padding: 10px; }
	.monlopin-pied .pied-col-contact { padding: 6px 0 0; } /* « Rester en lien » sans retrait, comme le modèle 71 */
	.monlopin-pied .pied-titre { margin: 0 0 14px; line-height: 1.35; }
	.monlopin-pied .pied-col li:last-child { margin-bottom: 0; }
	.monlopin-pied .pied-bas { margin-top: 0; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 12px; } /* aligné à gauche, comme le modèle 71 */
	.monlopin-pied .pied-bas p { line-height: 2.22308; }
	.monlopin-pied .pied-legal { font-size: 10px; line-height: 1.7; } /* les liens légaux tiennent sur une ligne */
}

/* ==========================================================================
   12. En-tête du site (inc/en-tete.php), repris du modèle Elementor 51.
   Valeurs relevées : bande crème à 92 % d'opacité, marges 20 px, logo de 200 px,
   liens Mulish 600 15 px (marges 8 et 11 px), bouton quiz en pilule bordée de 2 px.
   Menu replié sous 1 025 px (comme Elementor), dans une colonne centrée.
   En-tête collant à toutes les largeurs, comme Elementor (décision d'Olivia du 22/10/2026).
   Bouton quiz (0.2.8, demande d'Olivia) : toujours sur une ligne. Géométrie du modèle 51 : rangée
   centrée, logo 200 px, bloc de menu de 902,688 px (retrait gauche 53 px), bloc du bouton de 500 px
   compressible, bouton calé à droite ; donc 20 px à droite jusqu'à 1 683 px, puis la rangée se centre.
   Sous 1 405 px, le modèle 51 passait le bouton sur trois lignes : ici, menu et bouton se resserrent.
   ========================================================================== */
/* #masthead : Kadence pose un fond blanc sur cet identifiant ; on le reprend à la même force. */
#masthead.monlopin-entete,
.monlopin-entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(244, 238, 226, .92);
	font-family: var(--ml-texte);
}
.monlopin-entete .entete-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
}
.monlopin-entete .entete-logo { flex: none; display: block; line-height: 0; }
.monlopin-entete .entete-logo img { display: block; width: 200px; height: auto; }
.monlopin-entete .entete-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.monlopin-entete .entete-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.monlopin-entete .entete-menu li { margin: 0; }
.monlopin-entete .entete-menu a {
	display: block;
	padding: 8px 11px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ml-terre);
	text-decoration: none;
}
.monlopin-entete .entete-menu a:hover,
.monlopin-entete .entete-menu a:focus-visible,
.monlopin-entete .entete-menu .current-menu-item > a { color: var(--ml-sauge-texte); }
.monlopin-entete .entete-quiz {
	flex: none;
	display: inline-block;
	padding: 9px 18px;
	border: 2px solid var(--ml-terracotta);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .5px;
	color: var(--ml-terracotta); /* bouton : teinte d'origine (décision d'Olivia du 22/10/2026) */
	text-align: center;
	text-decoration: none;
}
@media (min-width: 1025px) {
	.monlopin-entete .entete-inner { justify-content: center; }
	.monlopin-entete .entete-nav { flex: 0 0 902.688px; box-sizing: border-box; padding-left: 53px; }
	.monlopin-entete .entete-action { flex: 0 1 500px; min-width: 0; display: flex; justify-content: flex-end; }
	.monlopin-entete .entete-quiz { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1404px) {
	/* Le modèle 51 ne tient pas sur une ligne ici : menu et bouton resserrés (le menu passe sur deux lignes sous 1 247 px). */
	.monlopin-entete .entete-nav { flex: 1 1 auto; padding-left: 0; }
	.monlopin-entete .entete-action { flex: none; }
	.monlopin-entete .entete-menu a { padding: 8px 5px; }
	.monlopin-entete .entete-quiz { padding: 9px 12px; letter-spacing: 0; }
}
@media (max-width: 1024px) {
	.monlopin-entete .entete-action { display: contents; }
}
.monlopin-entete .entete-quiz:hover,
.monlopin-entete .entete-quiz:focus-visible { background: var(--ml-terracotta); color: var(--ml-creme); }
.monlopin-entete .entete-menu-bouton { display: none; }
/* Barre d'administration de WordPress : 32 px, 46 px sous 783 px (fixe seulement au-delà de 600 px). */
.admin-bar #masthead.monlopin-entete { top: 32px; }
@media (max-width: 782px) {
	.admin-bar #masthead.monlopin-entete { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar #masthead.monlopin-entete { top: 0; }
}
@media (max-width: 1024px) {
	.monlopin-entete .entete-inner { flex-direction: column; gap: 18px; padding: 12px 20px; }
	.monlopin-entete .entete-quiz { margin-top: 23px; }
	.monlopin-entete .entete-quiz { white-space: nowrap; }
	.monlopin-entete .entete-menu-bouton {
		display: grid;
		place-items: center;
		width: 33px;
		height: 33px;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: rgba(62, 52, 43, .06);
		color: var(--ml-terre);
		cursor: pointer;
	}
	.monlopin-entete .entete-menu-bouton svg { width: 22px; height: 22px; display: block; }
	.monlopin-entete .entete-menu-bouton:focus-visible { outline: 2px solid var(--ml-terracotta-texte); outline-offset: 2px; }
	.monlopin-entete .entete-nav { display: none; width: 100%; }
	.monlopin-entete.est-ouvert .entete-nav,
	.no-js .monlopin-entete .entete-nav { display: block; }
	.monlopin-entete .entete-menu { flex-direction: column; align-items: stretch; }
	.monlopin-entete .entete-menu a { padding: 12px 20px; text-align: center; }
	.monlopin-entete .entete-menu a:hover { background: var(--ml-creme); }
}

/* ==========================================================================
   13. Page simple (page.php : mentions légales, politique de confidentialité…).
   Colonne de lecture de l'article, mêmes styles de texte, sans encadrés.
   ========================================================================== */
.monlopin-page {
	max-width: calc(var(--ml-largeur-lecture) + 72px);
	margin: 0 auto;
	padding: 18px 36px 80px;
	font-size: 16px;
	line-height: 1.7;
}
.monlopin-page .page-tete { margin: 0 0 32px; }
.monlopin-page h1 { margin: 26px 0 0; color: var(--ml-terre); text-wrap: balance; }
/* H1 à italique et surtitre (v0.2.9), comme l'accueil : italique en Sauge (#6B7A52, 4,01:1, grand texte),
   surtitre en capitales espacées. */
.monlopin-page h1 em { color: var(--ml-sauge); font-style: italic; }
.monlopin-page .page-surtitre { margin: 26px 0 -14px; font-family: var(--ml-titres); font-size: 14px; font-weight: 800; letter-spacing: 4px; line-height: 1.4; text-transform: uppercase; color: var(--ml-sauge-texte); }
.monlopin-page .page-corps p { margin: 0 0 1.3em; }
.monlopin-page .page-corps :is(h2, h3, h4) { color: var(--ml-sauge); line-height: 1.25; }
.monlopin-page .page-corps h2 { font-size: 1.6rem; margin: 1.8em 0 .5em; }
.monlopin-page .page-corps h3 { font-size: 1.3rem; margin: 1.5em 0 .4em; }
.monlopin-page .page-corps h4 { font-size: 1.1rem; margin: 1.3em 0 .4em; }
.monlopin-page .page-corps ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.monlopin-page .page-corps li { margin: 0 0 .5em; line-height: 1.6; }
.monlopin-page .page-corps li::marker { color: var(--ml-terracotta); }
/* Page simple à modules d'article (À propos…) : assets/article.css s'applique, sans sa marge de tête. */
.monlopin-page.monlopin-article .art-corps { margin-top: 0; }
.monlopin-page .page-hero { gap: 32px; margin: 0 0 8px; }
.monlopin-page .page-hero .wp-block-image { margin: 0; }
.monlopin-page .page-hero img { border-radius: 16px; }
/* Boutons natifs : Crème sur Sauge texte (5,10:1), pas la couleur des liens d'article. */
.monlopin-page.monlopin-article .art-corps a.wp-block-button__link { color: var(--ml-creme); }
.monlopin-page.monlopin-article .art-corps a.wp-block-button__link:hover { color: var(--ml-creme); background: var(--ml-terre); text-decoration: none; }
@media (max-width: 767px) {
	.monlopin-page { padding: 16px 24px 56px; }
	.monlopin-page h1 { font-size: 30px; }
}