/* ============================================================
   MEL — La Maison des Ecrivains (m-e-l.fr)
   CSS magazine du child theme (composants ; la base typo/couleurs
   vient des réglages GeneratePress). Zéro JS. Perf-first.
   ============================================================ */

/* ---------- Fonts auto-hébergées (subset latin, woff2) ---------- */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/mel/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/mel/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/mel/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/mel/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/mel/manrope-800.woff2') format('woff2'); }

/* Police du site : Manrope (moderne, chaleureuse, lisible) partout */
body, input, button, select, textarea, .entry-content, p, li, a, span, div,
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .entry-title, .main-title, .site-title {
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, .wp-block-post-title, .entry-title { font-weight: 800; letter-spacing: -0.01em; }

@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/mel/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/mel/spectral-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/mel/spectral-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../fonts/mel/spectral-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/mel/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/mel/archivo-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --mel-primary: #8E06FE;
  --mel-primary-dark: #6E00C8;
  --mel-magenta-text: #A2268F;
  --mel-coral: #FF6472;
  --mel-coral-text: #D63652;
  --mel-ink: #1F1B2E;
  --mel-ink-2: #5A5566;
  --mel-meta: #6B6577;
  --mel-paper-2: #FAF8FC;
  --mel-hairline: #E9E4F0;
  --mel-grad: linear-gradient(90deg, #8E06FE 0%, #CC40C0 50%, #FF6472 100%);
  /* Couleurs de rubriques (dégradé tranché, AA texte) */
  --cat-travaux: #8E06FE;
  --cat-energie: #D63652;
  --cat-decoration: #7A0BD6;
  --cat-amenagement: #7A0BD6;
  --cat-jardin: #A2268F;
  --cat-immobilier: #B0296F;
  --cat-domotique: #6E00C8;
  --cat-entretien: #B0296F;
  --cat-maisons-d-ecrivains: #A2268F;
}

/* ---------- Topbar (élément hook before_header) ---------- */
.mel-gradrule { height: 3px; background: var(--mel-grad); }
.mel-topbar {
  border-bottom: 1px solid var(--mel-hairline);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--mel-meta);
}
.mel-topbar-in {
  max-width: 1200px; margin: 0 auto; padding: 8px 20px;
  display: flex; justify-content: space-between; gap: 16px;
}
.mel-topbar-date::first-letter { text-transform: capitalize; }

/* ---------- Manchette / header GP ---------- */
.site-header { padding-top: 10px !important; padding-bottom: 10px !important; }
/* Logo AU-DESSUS du nom, le tout centré (comme la maquette) */
/* Empiler logo AU-DESSUS du nom, centré (structure : .site-branding-container > .site-logo + .site-branding) */
.site-branding-container { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; width: 100%; }
.site-logo { margin: 0 0 4px !important; display: block; }
.site-logo img { display: inline-block; }
.site-branding { text-align: center; }

/* ---------- Titres d'articles JAMAIS soulignés (aspect magazine) ---------- */
.wp-block-post-title a, .entry-title a, .mel-essentiels a, .mel-card .wp-block-post-title a,
.mel-list .wp-block-post-title a, h1 a, h2 a, h3 a { text-decoration: none !important; }
.wp-block-post-title a:hover, .entry-title a:hover { text-decoration: none !important; color: var(--mel-primary); }
.main-title, .site-branding .main-title a {
  font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: 27px !important; letter-spacing: 0.01em; color: var(--mel-ink) !important;
  text-decoration: none;
}
.site-description {
  font-family: 'Manrope', system-ui, sans-serif !important; font-style: italic; font-weight: 300;
  font-size: 16px; color: var(--mel-ink-2); margin-top: 4px;
}
body:not(.home) .site-logo img { max-height: 46px; }

/* ---------- Nav rubriques : couleur par rubrique + soulignement ---------- */
.main-navigation .main-nav ul li a {
  border-bottom: 3px solid transparent;
  letter-spacing: 0.06em;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current"] > a {
  border-bottom-color: var(--cat, var(--mel-primary));
  color: var(--cat, var(--mel-primary));
}
.main-navigation { border-top: 1px solid var(--mel-hairline); border-bottom: 1px solid var(--mel-hairline); }
/* Couleur par item de menu (classe posée sur le li dans le menu) */
.menu-cat-travaux { --cat: var(--cat-travaux); }
.menu-cat-energie { --cat: var(--cat-energie); }
.menu-cat-decoration { --cat: var(--cat-decoration); }
.menu-cat-amenagement { --cat: var(--cat-amenagement); }
.menu-cat-jardin { --cat: var(--cat-jardin); }
.menu-cat-immobilier { --cat: var(--cat-immobilier); }
.menu-cat-domotique { --cat: var(--cat-domotique); }
.menu-cat-entretien { --cat: var(--cat-entretien); }
.menu-cat-maisons-d-ecrivains { --cat: var(--cat-maisons-d-ecrivains); }

/* ---------- Kickers (surtitres de rubrique) ---------- */
.mel-kicker, .mel-kicker a, .entry-header .cat-links a, .mel-card .wp-block-post-terms a {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--cat, var(--mel-primary));
  text-decoration: none;
}
.wp-block-post-terms { font-size: 12.5px; }

/* Couleur de rubrique portée par les pages/cartes via classe de catégorie */
.category-travaux, .term-travaux { --cat: var(--cat-travaux); }
.category-energie, .term-energie { --cat: var(--cat-energie); }
.category-decoration, .term-decoration { --cat: var(--cat-decoration); }
.category-amenagement, .term-amenagement { --cat: var(--cat-amenagement); }
.category-jardin, .term-jardin { --cat: var(--cat-jardin); }
.category-immobilier, .term-immobilier { --cat: var(--cat-immobilier); }
.category-domotique, .term-domotique { --cat: var(--cat-domotique); }
.category-entretien, .term-entretien { --cat: var(--cat-entretien); }
.category-maisons-d-ecrivains, .term-maisons-d-ecrivains { --cat: var(--cat-maisons-d-ecrivains); }

/* ---------- Têtes de section (Une) ---------- */
.mel-sechead {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 6px;
}
.mel-sechead h2 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--cat, var(--mel-primary));
  margin: 0; flex-shrink: 0;
}
.mel-sechead::after { content: ""; flex: 1; height: 1px; background: var(--mel-hairline); order: 2; }
.mel-sechead h2 { order: 1; }
.mel-sechead .mel-more { order: 3; flex-shrink: 0; }
.mel-more, .mel-more a {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; color: var(--mel-primary); text-decoration: none;
}
.mel-more a:hover { color: var(--mel-primary-dark); text-decoration: underline; }

/* ---------- Cartes ---------- */
.mel-card h3, .mel-card .wp-block-post-title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; line-height: 1.3; }
.mel-card .wp-block-post-title a { text-decoration: none; color: var(--mel-ink); }
.mel-card .wp-block-post-title a:hover { color: var(--mel-primary); }
.mel-card .wp-block-post-date, .mel-meta {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--mel-meta);
}
.mel-card .wp-block-post-featured-image { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: linear-gradient(120deg, #F3EBFD, #FCEEF3); display: block; }
.mel-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.mel-une-main .wp-block-post-featured-image { aspect-ratio: 16 / 9; }
/* ---------- Listes illustrées (vignette + texte) : Essentiels, Jardin, Immo, Énergie ---------- */
/* Listes à vignette (Essentiels, Jardin, Immo, Énergie) : rendu magazine net.
   - Vignette CARRÉE uniforme, alignée en HAUT (le bloc pose un style inline 88x88 sur la
     <figure> : neutralisé en !important).
   - Texte calé en haut avec l'image (kicker au niveau du haut de l'image) et COMPACT :
     le groupe GB imposait un gros écart vertical entre cat/titre/date -> on force un
     gap serré. */
.mel-li { display: flex; gap: 8px; align-items: flex-start; }
.mel-li .mel-thumb { flex: 0 0 72px !important; width: 72px !important; height: 72px !important; align-self: flex-start !important; margin: 0 !important; background: transparent !important; border-radius: 3px; overflow: hidden; }
.mel-li .mel-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 3px; display: block; }
.mel-li .mel-thumb a { display: block; width: 100%; height: 100%; }
.mel-li-txt { flex: 1; min-width: 0; align-self: flex-start; }
/* Le contenu (cat/titre/date) est enveloppé par un .wp-block-group__inner-container qui
   porte le gros écart vertical GB : on le compacte et on le cale en haut. */
.mel-li-txt .wp-block-group__inner-container,
.mel-li-txt.wp-block-group > .wp-block-group__inner-container {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  justify-content: flex-start !important; height: auto !important; min-height: 0 !important; padding: 0 !important;
}
.mel-li-txt .wp-block-group__inner-container > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.mel-li-txt .mel-kicker { margin: 0 0 1px !important; }
.mel-li-txt .wp-block-post-title { font-size: 17px; line-height: 1.3; }
.mel-li-txt .wp-block-post-date { margin-top: 1px !important; }

/* ---------- Images uniformes sur les ARCHIVES / catégories GeneratePress ---------- */
/* (hauteur identique → titres alignés, plus de décalage) */
.generate-columns .post-image,
.generate-columns .post-image a,
.blog .post-image, .archive .post-image, .search .post-image,
.mel-related .wp-block-post-featured-image {
  display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px;
  margin-bottom: 0; background: linear-gradient(120deg, #F3EBFD, #FCEEF3);
}
.generate-columns .post-image img,
.blog .post-image img, .archive .post-image img, .search .post-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px;
}
/* Cartes d'archive : titre/typo cohérents */
.generate-columns .entry-title, .archive .entry-title { font-family: 'Manrope', system-ui, sans-serif; font-size: 21px; line-height: 1.3; }
.generate-columns .entry-title a, .archive .entry-title a { color: var(--mel-ink); text-decoration: none; }
.generate-columns .entry-title a:hover, .archive .entry-title a:hover { color: var(--mel-primary); }

/* À la Une : gros titre */
.mel-une-main .wp-block-post-title { font-size: 42px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.01em; margin: 4px 0 !important; }
.mel-une-main .wp-block-post-excerpt__excerpt, .mel-une-main .wp-block-post-excerpt p {
  font-family: 'Manrope', system-ui, sans-serif; font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 1.5; color: var(--mel-ink-2);
}
.mel-une-main .wp-block-post-date { font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; color: var(--mel-meta); }
/* Formulaire newsletter : le bloc en colonne (ligne email+bouton, puis case consentement dessous) */
.mel-nl-form { display: block; margin-top: 14px; max-width: 520px; }
.mel-nl-form input[type=email] { flex: 1; min-width: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; padding: 12px 16px; border: 0; border-radius: 4px; background: rgba(255,255,255,.95); color: #1F1B2E; }
.mel-nl-form button { font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 700; padding: 12px 22px; border: 0; border-radius: 4px; background: #1F1B2E; color: #fff; cursor: pointer; }
.mel-nl-form button:hover { background: #000; }

/* Les Essentiels (liste numérotée) */
.mel-essentiels { border-left: 1px solid var(--mel-hairline); padding-left: 30px; }
.zone-une, .mel-zone-une, .wp-block-columns.mel-zone-une { align-items: start; }
/* Essentiels resserrés pour équilibrer la hauteur avec l'article principal */
.mel-essentiels .wp-block-post { padding: 12px 0 !important; }
.mel-essentiels .mel-esslabel {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px;
}
/* Items des Essentiels : vignette + texte, filet entre chaque */
.mel-essentiels .wp-block-post { border-top: 1px solid var(--mel-hairline); }
.mel-essentiels .wp-block-post:first-child { border-top: 0; padding-top: 0 !important; }
.mel-essentiels .wp-block-post-title { font-size: 17px; margin: 3px 0 4px; }

/* ---------- Encart newsletter / contact ---------- */
.mel-newsletter {
  background: var(--mel-grad);
  border-radius: 8px; color: #fff;
  padding: 32px 38px; margin: 34px 0;
}
.mel-newsletter h2, .mel-newsletter p, .mel-newsletter a { color: #fff !important; }
.mel-newsletter h2 { font-size: 26px !important; font-weight: 800 !important; margin-bottom: 6px; }
.mel-newsletter p { font-style: italic; font-weight: 300; margin: 0; }
.mel-newsletter a { text-decoration: underline; }

/* ---------- Encadré « Le chiffre » ---------- */
.mel-chiffre {
  background: var(--mel-paper-2);
  border-left: 4px solid;
  border-image: linear-gradient(180deg, #8E06FE, #FF6472) 1;
  padding: 24px 26px;
}
.mel-chiffre .mel-chiffre-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mel-coral-text);
  margin: 0 0 8px;
}
.mel-chiffre .mel-chiffre-big {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 52px !important; font-weight: 800 !important; line-height: 1.05;
  margin: 0 0 6px; font-variant-numeric: tabular-nums;
}
.mel-chiffre p { color: var(--mel-ink-2); margin: 0; }
.mel-chiffre .mel-chiffre-src { font-family: 'Manrope', system-ui, sans-serif; font-size: 12.5px; color: var(--mel-meta); display: block; margin-top: 8px; }

/* ---------- Filets entre items de liste ---------- */
.mel-list .wp-block-post { padding: 14px 0; border-top: 1px solid var(--mel-hairline); }
.mel-list .wp-block-post:first-child { border-top: 0; padding-top: 0; }
.mel-list .wp-block-post-title { font-size: 19px; margin: 2px 0 4px; }

/* ---------- Header compact sur les pages intérieures (le contenu remonte) ---------- */
body:not(.home) .site-header { padding-top: 6px !important; padding-bottom: 6px !important; }
body:not(.home) .site-logo img { max-height: 52px; width: auto; }
body:not(.home) .site-description { display: none; }

/* ---------- Pagination numérotée (archives/catégories) ---------- */
.pagination, .paging-navigation, .mel-pagination { margin: 36px 0 10px; }
.pagination .nav-links, .paging-navigation .nav-links, .mel-pagination ul {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0;
}
.mel-pagination ul li { margin: 0; }
.page-numbers {
  display: inline-flex !important; min-width: 42px; height: 42px; box-sizing: border-box;
  align-items: center; justify-content: center; padding: 0 14px !important;
  border: 1px solid var(--mel-hairline) !important; border-radius: 4px !important;
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 15px; font-weight: 500;
  color: var(--mel-ink) !important; text-decoration: none !important; background: #fff;
}
.page-numbers.current { background: var(--mel-primary) !important; color: #fff !important; border-color: var(--mel-primary) !important; }
a.page-numbers:hover { border-color: var(--mel-primary) !important; color: var(--mel-primary) !important; }
.page-numbers.dots { border-color: transparent !important; background: none; }

/* Logo dans le footer */
.mel-footer-logo { margin: 0 0 14px !important; }
.mel-footer-logo img { width: 132px !important; height: auto !important; }

/* ---------- Fil d'Ariane ---------- */
.mel-breadcrumb {
  max-width: 1200px; margin: 16px auto 0; padding: 0 24px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px; color: var(--mel-meta);
}
.mel-breadcrumb a { color: var(--mel-meta); text-decoration: none; }
.mel-breadcrumb a:hover { color: var(--mel-primary); text-decoration: underline; }
.mel-breadcrumb .breadcrumb_last { color: var(--mel-ink-2); }

/* ---------- Article (single) ---------- */
.single .entry-content > p:first-of-type::first-letter {
  font-family: 'Manrope', system-ui, sans-serif;
  float: left; font-size: 58px; line-height: 0.85; font-weight: 800;
  padding: 6px 10px 0 0; color: var(--mel-primary);
}
.single .entry-content h2 { position: relative; padding-top: 14px; }
.single .entry-content h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; background: var(--mel-grad);
}
.single .entry-content a { color: var(--mel-primary); text-decoration: underline; text-decoration-color: #CC40C0; text-underline-offset: 2px; }
.single .entry-content a:hover { color: var(--mel-primary-dark); }
.single .entry-content blockquote {
  border-left: 4px solid; border-image: linear-gradient(180deg, #8E06FE, #FF6472) 1;
  font-family: 'Manrope', system-ui, sans-serif; font-style: italic; font-size: 21px;
  color: var(--mel-ink-2); margin-left: 0; padding-left: 22px;
}
.single .entry-meta, .single .posted-on { font-family: 'Manrope', system-ui, sans-serif; }

/* ---------- « À lire aussi » (articles liés, single) ---------- */
.mel-related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--mel-hairline); }
.mel-related-title { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.mel-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mel-related-item { display: flex; flex-direction: column; gap: 8px; }
.mel-related-thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: var(--mel-paper-2); }
.mel-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mel-related-item h3 { font-size: 18px; line-height: 1.3; margin: 2px 0; font-weight: 700; }
.mel-related-item h3 a { text-decoration: none; color: var(--mel-ink); }
.mel-related-item h3 a:hover { color: var(--mel-primary); }

/* ---------- Photo d'en-tête des pages ---------- */
.mel-page-hero { margin: 0 0 26px; }
.mel-page-hero img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 4px; display: block; }

/* ---------- Page équipe ---------- */
.mel-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 24px; }
.mel-team-member { text-align: center; }
.mel-team-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.mel-team-member h3 { font-size: 20px; margin: 0 0 2px; font-weight: 800; }
.mel-team-role { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mel-magenta-text); font-weight: 700; margin: 0 0 8px; }
.mel-team-bio { font-size: 15px; color: var(--mel-ink-2); line-height: 1.55; }
.mel-team-member h3 a { color: var(--mel-ink); text-decoration: none; }
.mel-team-member h3 a:hover { color: var(--mel-primary); }
.mel-team-avatar { transition: transform 0.2s ease; }
.mel-team-member a:hover .mel-team-avatar { transform: scale(1.04); }
.mel-team-link a { color: var(--mel-primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.mel-team-link a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .mel-team-avatar { transition: none; } }

/* ---------- Formulaire de contact ---------- */
.mel-contact-form { max-width: 620px; margin-top: 10px; }
.mel-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.mel-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.mel-field label { font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.mel-field label span { color: var(--mel-coral-text); }
.mel-contact-form input, .mel-contact-form textarea {
  font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; padding: 11px 14px;
  border: 1px solid var(--mel-hairline); border-radius: 5px; background: #fff; color: var(--mel-ink);
}
.mel-contact-form input:focus, .mel-contact-form textarea:focus { outline: 2px solid var(--mel-primary); border-color: var(--mel-primary); }
.mel-antibot { max-width: 260px; }
.mel-form-btn { font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; font-weight: 700; padding: 12px 26px; border: 0; border-radius: 5px; background: var(--mel-primary); color: #fff; cursor: pointer; }
.mel-form-btn:hover { background: var(--mel-primary-dark); }
.mel-form-note { font-size: 13px; color: var(--mel-meta); margin-top: 10px; }
.mel-form-ok { background: #EAF7EE; border: 1px solid #B7E0C4; color: #1E6B3A; padding: 16px 18px; border-radius: 6px; }
.mel-form-err { background: #FDECEF; border: 1px solid #F5C2CC; color: #B0264A; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }

/* ---------- Commentaires ---------- */
.comments-area { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--mel-hairline); max-width: 720px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea {
  font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; padding: 11px 14px;
  border: 1px solid var(--mel-hairline); border-radius: 5px; width: 100%;
}
.comment-form .form-submit input { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; padding: 12px 26px; border: 0; border-radius: 5px; background: var(--mel-primary); color: #fff; cursor: pointer; }

/* ---------- Pages héritage ---------- */
.mel-heritage-body { max-width: 720px; margin: 0 auto; }
.mel-heritage-note {
  font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; color: var(--mel-meta);
  border-top: 1px solid var(--mel-hairline); margin-top: 26px; padding-top: 12px;
}
.mel-alireaussi {
  background: var(--mel-paper-2); border-radius: 4px;
  padding: 20px 24px; margin-top: 26px;
}
.mel-alireaussi h2 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mel-magenta-text);
  margin: 0 0 10px;
}
.mel-alireaussi ul { margin: 0; padding-left: 18px; }
.mel-alireaussi li { margin-bottom: 6px; }
.mel-alireaussi a { color: var(--mel-primary); text-decoration: none; }
.mel-alireaussi a:hover { text-decoration: underline; }

/* ---------- Footer éditorial ---------- */
.site-footer { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #8E06FE, #CC40C0, #FF6472) 1; }
.mel-footer-edito {
  font-family: 'Manrope', system-ui, sans-serif; font-style: italic; font-weight: 300;
}
.site-footer .inside-site-info { font-family: 'Manrope', system-ui, sans-serif; font-size: 12.5px; }

/* ============================================================
   Corrections (retours) — logo, images archive, listes, footer
   ============================================================ */
/* Logo : plus petit sur la home, discret ailleurs */
.home .site-logo img { max-height: 88px !important; width: auto !important; }
body:not(.home) .site-logo img { max-height: 44px !important; }

/* Aligner titre/description ET contenu au même bord (pages + catégories).
   NB : ne PAS toucher au margin-left du wrapper de grille GenerateBlocks : sa marge
   négative (-20px) compense le padding-left:20px des colonnes ; l'écraser décalerait
   le 1er article vers la droite (espace blanc). */
.page-header {
  padding-left: 0 !important; margin-left: 0 !important;
}
/* Le header d'archive (.titre-archive) et le fil d'ariane (.mel-breadcrumb) sont rendus
   HORS de .site-content : ils n'héritent pas de son padding de contenu (40px desktop /
   10px mobile) et se retrouvaient collés au bord (titre à 75, contenu à 115). On leur
   applique EXACTEMENT le même padding que .site-content pour un alignement parfait. */
.titre-archive, .mel-breadcrumb {
  padding-left: 40px !important; padding-right: 40px !important;
}
@media (max-width: 768px) {
  /* En mobile, le conteneur parent du header (.gb-container GB) fournit déjà 10px :
     .titre-archive ne doit rien ajouter (sinon double padding = 20px). Le fil d'ariane,
     lui, est standalone et doit porter les 10px comme .site-content. */
  .titre-archive { padding-left: 0 !important; padding-right: 0 !important; }
  .mel-breadcrumb { padding-left: 10px !important; padding-right: 10px !important; }
}
.inside-article { padding-left: 0 !important; padding-right: 0 !important; }
.single .inside-article .entry-content, .page .inside-article .entry-content { margin-left: 0 !important; }

/* Liens éditoriaux DANS LE TEXTE uniquement (paragraphes/listes de contenu),
   jamais les cartes/listes de structure de la Une. */
.single .entry-content p a, .single .entry-content > ul li a, .single .entry-content > ol li a,
.page:not(.home) .entry-content p a, .page:not(.home) .entry-content > ul li a,
.mel-heritage-context a, .mel-heritage-body p a,
.taxonomy-description a, .term-description a, .titre-archive p a {
  color: var(--mel-primary) !important; text-decoration: underline !important;
  text-decoration-color: var(--mel-magenta-text) !important; text-underline-offset: 2px; font-weight: 600;
}
.single .entry-content p a:hover, .page:not(.home) .entry-content p a:hover { color: var(--mel-primary-dark) !important; }
/* Footer : liens clairs (déjà géré plus bas) */
footer a, .site-footer a { text-decoration: none; }

/* Footer : liens lisibles sur fond sombre */
.site-footer a, .site-info a, footer .wp-block-list a { color: #C9C3D6 !important; }
.site-footer a:hover, .site-info a:hover, footer .wp-block-list a:hover { color: #fff !important; text-decoration: underline; }
.site-footer h3 { color: #9B93B0 !important; }

/* Images des pages catégorie (GenerateBlocks Query Loop) : hauteur UNIFORME */
.gb-query-loop-item .gb-block-image { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; display: block; margin-bottom: 12px; }
.gb-query-loop-item .gb-block-image a,
.gb-query-loop-item .gb-block-image figure { display: block; width: 100%; height: 100%; margin: 0; }
.gb-query-loop-item .gb-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border-radius: 3px; }

/* Listes de la Une : espacement resserré (moins de vide entre items) */
.mel-list .wp-block-post-template, .mel-ess-loop .wp-block-post-template { gap: 2px !important; }
.mel-list .wp-block-post, .mel-ess-loop .wp-block-post { padding: 9px 0 !important; }
.mel-essentiels .mel-esslabel { margin-bottom: 8px; }
.mel-li-txt .wp-block-post-title { line-height: 1.28; }
.mel-li-txt .mel-kicker { margin-bottom: 1px; }
.mel-li-txt .wp-block-post-date, .mel-li-txt .mel-kicker { line-height: 1.2; }
/* Date collée juste sous le titre (supprime le vide titre → date) */
.mel-li-txt .wp-block-post-date { margin-top: 2px !important; }

/* Footer : listes alignées sous leur titre (retrait des puces décalées) */
.site-footer ul, .site-info ul, footer .wp-block-list { padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; }
.site-footer ul li, footer .wp-block-list li { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; }

/* Un seul menu mobile : neutraliser les navigations dupliquées (mobile header + slideout) */
#mobile-header, .mobile-header-navigation,
#generate-slideout-menu, .slideout-navigation,
.slideout-overlay, .slideout-menu { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .home .site-logo img, .site-logo img { max-height: 58px !important; }
  .site-header { padding-top: 6px !important; padding-bottom: 6px !important; }
  .main-title, .site-branding .main-title a { font-size: 20px !important; }
  .site-description { font-size: 13px; padding: 0 14px; }
  .site-branding-container { padding: 0 10px; }
  .mel-team-grid, .mel-related-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .mel-page-hero img { max-height: 220px; }
  .mel-une-main .wp-block-post-title { font-size: 29px; }
  .mel-essentiels { border-left: 0; padding-left: 0; border-top: 1px solid var(--mel-hairline); padding-top: 18px; }
  .mel-newsletter { padding: 26px 22px; }
  .mel-topbar-in { flex-direction: column; gap: 2px; }
}

/* ============================================================
   AUDIT EXPERTS — lot 1 : lecture magazine + accessibilité
   ============================================================ */

/* Largeur de lecture "magazine" : corps d'article resserré (~70 caractères/ligne),
   image à la une conservée en pleine largeur. */
.single-post .entry-header,
.single-post .entry-content,
.single-post .mel-related,
.single-post .mel-related-grid,
.single-post .comments-area,
.single-post .mel-chapo,
.single-post .mel-share,
.single-post .mel-authorbox {
  max-width: 748px;
  margin-left: 0 !important;   /* aligné à gauche, comme le corps et le fil d'ariane */
  margin-right: auto;
}
/* les blocs larges volontaires peuvent déborder un peu */
.single-post .entry-content .alignwide { max-width: 960px; }
.single-post .entry-content .alignfull { max-width: none; }
/* image à la une : même largeur que le corps (748px), alignée à gauche */
.single-post .featured-image { max-width: 748px !important; margin-left: 0 !important; margin-right: auto !important; }
.single-post .featured-image img { width: 100%; height: auto; }
/* Encadré auteur : avatar un peu plus grand */
.mel-authorbox img { width: 76px; height: 76px; flex: 0 0 76px; }

/* Chapô éditorial (accroche sous le titre) */
.mel-chapo { font-size: 20px; line-height: 1.5; color: var(--mel-ink-soft, #4a4655); font-style: italic; margin: 6px 0 22px; }

/* Byline enrichie : temps de lecture + avatar */
.mel-readtime::before { content: "•"; margin: 0 7px; color: var(--mel-hairline); font-style: normal; }
.mel-byline-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 7px; }

/* Encadré auteur en fin d'article (E-E-A-T) */
.mel-authorbox { display: flex; gap: 16px; align-items: flex-start; margin: 34px auto 8px; padding: 20px 22px; background: var(--mel-paper-2, #f6f4fa); border-radius: 6px; }
.mel-authorbox img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.mel-authorbox .mel-ab-name { font-weight: 800; font-size: 17px; margin: 0 0 3px; }
.mel-authorbox .mel-ab-bio { font-size: 14.5px; line-height: 1.5; color: var(--mel-ink-soft, #4a4655); margin: 0 0 6px; }
.mel-authorbox .mel-ab-link a { font-size: 13.5px; font-weight: 600; color: var(--mel-primary); }

/* Boutons de partage légers (liens, aucun script tiers) */
.mel-share { display: flex; gap: 10px; align-items: center; max-width: 748px; margin: 22px auto 0; flex-wrap: wrap; }
.mel-share .mel-share-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--mel-ink-soft, #6b6678); }
.mel-share a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--mel-hairline); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--mel-primary); text-decoration: none; }
.mel-share a:hover { background: var(--mel-primary); color: #fff; border-color: var(--mel-primary); }

/* Accessibilité : focus clavier brandé et cohérent */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mel-primary); outline-offset: 2px; border-radius: 2px;
}

/* H1 d'accueil visuellement neutre (le logo reste le repère visuel) */
.home .mel-h1-seo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Cibles tactiles mobiles (>= ~40px de hauteur utile) */
@media (max-width: 768px) {
  .mel-kicker a, .mel-seemore, .mel-li-txt .wp-block-post-title a { display: inline-block; padding-top: 3px; padding-bottom: 3px; }
  .mel-seemore { padding: 6px 0; }
  .main-navigation .menu-toggle { min-height: 44px; }
}

/* Bouton retour en haut (CSS pur) */
.mel-totop { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--mel-primary); color: #fff !important; border-radius: 50%; text-decoration: none; font-size: 20px; line-height: 1; box-shadow: 0 3px 10px rgba(31,27,46,.22); opacity: .85; transition: opacity .15s, transform .15s; }
.mel-totop:hover { opacity: 1; transform: translateY(-2px); color: #fff !important; }
@media (max-width: 768px) { .mel-totop { right: 12px; bottom: 12px; width: 40px; height: 40px; } }

/* Fil d'ariane des pages héritage */
.mel-heritage-bc { font-size: 13px; color: var(--mel-meta); margin: 0 0 18px; }
.mel-heritage-bc a { color: var(--mel-meta); text-decoration: none; }
.mel-heritage-bc a:hover { color: var(--mel-primary); }
.mel-heritage-bc span { color: var(--mel-hairline); margin: 0 4px; }
.mel-heritage-bc .mel-bc-current { color: var(--mel-ink-2); }
.mel-heritage-context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mel-hairline); color: var(--mel-ink-2); font-size: 15px; line-height: 1.6; }

/* Séparateur avant l'auteur dans la byline (évite « lecturepar ») */
.entry-meta .byline::before { content: "•"; margin: 0 8px; color: var(--mel-hairline); }
.entry-meta .byline { margin-left: 0; }

/* ============================================================
   Barre latérale des articles (À la une + rubriques)
   ============================================================ */
/* avec sidebar, le layout gère la largeur : on retire le max-width 748 forcé */
body.single-post.right-sidebar .entry-header,
body.single-post.right-sidebar .entry-content,
body.single-post.right-sidebar .mel-chapo,
body.single-post.right-sidebar .mel-share,
body.single-post.right-sidebar .mel-authorbox,
body.single-post.right-sidebar .mel-related,
body.single-post.right-sidebar .mel-related-grid,
body.single-post.right-sidebar .comments-area,
body.single-post.right-sidebar .featured-image { max-width: none !important; }

.mel-sidebar-inner { position: sticky; top: 24px; }
.mel-sw { margin-bottom: 30px; }
.mel-sw-title { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--mel-primary); border-bottom: 2px solid var(--mel-primary); padding-bottom: 6px; margin: 0 0 14px; }
.mel-sw-list { list-style: none; margin: 0; padding: 0; }
.mel-sw-list li { margin-bottom: 15px; }
.mel-sw-list li:last-child { margin-bottom: 0; }
.mel-sw-list a { display: flex; gap: 11px; align-items: flex-start; text-decoration: none; }
.mel-sw-thumb-wrap { flex: 0 0 62px; }
.mel-sw-thumb { width: 62px; height: 62px; object-fit: cover; border-radius: 3px; display: block; }
.mel-sw-kicker { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mel-meta); margin-bottom: 2px; }
.mel-sw-h { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--mel-ink); }
.mel-sw-list a:hover .mel-sw-h { color: var(--mel-primary); }
.mel-sw-cats { list-style: none; margin: 0; padding: 0; }
.mel-sw-cats li { border-bottom: 1px solid var(--mel-hairline); }
.mel-sw-cats li:last-child { border-bottom: 0; }
.mel-sw-cats a { display: block; padding: 9px 0; text-decoration: none; color: var(--mel-ink); font-weight: 600; font-size: 14.5px; }
.mel-sw-cats a:hover { color: var(--mel-primary); padding-left: 4px; }
@media (max-width: 768px) { .mel-sidebar-inner { position: static; } }

/* ---------- Bandeau de consentement cookies (Accepter / Refuser) ---------- */
.mel-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #1f1b2e; color: #eae7f2; padding: 14px 20px; display: none; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; box-shadow: 0 -2px 14px rgba(0,0,0,.22); font-size: 14px; }
.mel-cookie-txt { margin: 0; max-width: 840px; line-height: 1.5; }
.mel-cookie-txt a { color: #fff; text-decoration: underline; }
.mel-cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.mel-cookie-btn { padding: 9px 22px; border-radius: 4px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.mel-cookie-deny { background: transparent; color: #eae7f2; border-color: rgba(255,255,255,.35); }
.mel-cookie-deny:hover { border-color: #fff; }
.mel-cookie-accept { background: var(--mel-primary, #8E06FE); color: #fff; border: none; }
.mel-cookie-accept:hover { background: var(--mel-primary-dark, #6E00C8); }
@media (max-width: 600px) { .mel-cookie { flex-direction: column; gap: 12px; text-align: center; } }

/* ---------- Newsletter (Brevo, double opt-in) ---------- */
.mel-nl-form .mel-nl-row { display: flex; gap: 8px; }
.mel-nl-form input[type=email] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; font-size: 15px; }
.mel-nl-btn { background: #1f1b2e; color: #fff; border: none; padding: 12px 24px; border-radius: 4px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mel-nl-btn:hover { background: #000; }
.mel-nl-consent { display: block; margin-top: 11px; font-size: 12.5px; color: rgba(255,255,255,.92); line-height: 1.45; }
.mel-nl-consent a { color: #fff; text-decoration: underline; }
.mel-nl-consent input { margin-right: 6px; vertical-align: middle; }
.mel-nl-done { background: rgba(255,255,255,.16); color: #fff; padding: 15px 18px; border-radius: 6px; font-size: 14.5px; line-height: 1.5; }
.mel-nl-formerr { color: #ffe0e6; font-size: 13px; margin: 0 0 8px; font-weight: 600; }
.mel-nl-flash { text-align: center; padding: 13px 16px; font-size: 14.5px; font-weight: 600; }
.mel-nl-ok { background: #E7F8EF; color: #1a7a4a; }
.mel-nl-err { background: #FDECEF; color: #b0244a; }

/* Bandeau cookies : affiché seulement via la classe .mel-open (JS) */
.mel-cookie.mel-open { display: flex; }

/* Sidebar À la une : aligner optiquement la 1re ligne de texte avec le haut de la vignette */
.mel-sw-list .mel-sw-txt { margin-top: -3px; }
.mel-sw-kicker { line-height: 1.15; }

/* Cosmétiques audit final */
.mel-totop { width: 46px; height: 46px; }
@media (max-width: 640px) {
  /* byline mobile : rendu inline avec points médians, pas de puces */
  .entry-meta, .entry-header .entry-meta { list-style: none; padding-left: 0; }
  .entry-meta > *, .entry-header .entry-meta > * { display: inline; }
}