/* =============================================================
   FLOWUP SKELETON — Squelette canonique (v1.0)
   Source unique de vérité pour structure / layout / wrappers.
   Préfixe : --fu-* / .fu-*
   Charger via flowup-skeleton-loader.php (priority 99) APRÈS
   le custom_css GeneratePress.
   ============================================================= */

/* -- Reset minimal ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  background: var(--fu-surface, #FAF8F4);
  color: var(--fu-ink, #2C2C2C);
  font-family: var(--fu-font-sans, system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.fu-display {
  font-family: var(--fu-font-display, Georgia, serif);
}

/* -- §F-9 — Neutralisation wrappers GeneratePress ----------
   Quand body.full-width-content, body.home OU body.archive,
   on libère TOUS les wrappers structurels GP de leurs containers,
   max-widths, paddings, backgrounds et bordures pour permettre aux
   sections .pp-* / .fu-* de prendre la pleine largeur du viewport.
   ----------------------------------------------------------- */

/* Wrapper .grid-container.container (id=page) */
body.full-width-content .grid-container.container,
body.home .grid-container.container,
body.archive .grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Chaîne site → site-content → content-area → site-main */
body.full-width-content .site,
body.full-width-content .site-content,
body.full-width-content .content-area,
body.full-width-content .site-main,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.archive .site,
body.archive .site-content,
body.archive .content-area,
body.archive .site-main {
  max-width: 100% !important;
  width: 100% !important;
}

/* .inside-article — neutralisation totale du container GP */
body.full-width-content.separate-containers .inside-article,
body.home.separate-containers .inside-article,
body.archive.separate-containers .inside-article {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* .entry-content — pleine largeur sans padding/margin */
body.full-width-content .entry-content,
body.home .entry-content,
body.archive .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GenerateBlocks inner-container — empêche le cap 1600px sur les groupes wp-block-group
   placés directement dans .entry-content de la home / archive / full-width. */
body.full-width-content .entry-content > .wp-block-group > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group > .wp-block-group__inner-container,
body.archive .entry-content > .wp-block-group > .wp-block-group__inner-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Site-info GP : on laisse le footer custom prendre la main */
body.full-width-content .site-info,
body.home .site-info {
  display: none !important;
}

/* =============================================================
   ARTICLE CARD — Composant canonique réutilisé partout
   (archive cat/sous-cat, home "À la une", related, etc.)
   ----------------------------------------------------------- */
/* R-PERF-1 — WebP servi par LiteSpeed Cache (auto). */
/* R-PERF-2 — 40-60 Ko cible, 100 Ko max card, 150 Ko max hero. */
/* R-PERF-3 — 800x600 max card 4:3, 1600x600 hero, 600x750 avatar. */
/* R-PERF-4 — Médiathèque WP locale (anti-corrélation réseau). */
/* R-PERF-5 — loading="lazy" + decoding="async" + srcset auto WP. */

.fu-article-card {
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius-sm, 14px);
  overflow: hidden;
  box-shadow: var(--fu-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fu-article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fu-shadow-hover);
}

.fu-article-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fu-article-card-imgwrap {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Pallier I — Fix I.4-ter.A Bug 1 : flex: 0 0 auto empêche le parent .fu-article-card-link
     (flex column height:100%) d'étirer le wrapper et de créer un trou entre l'image
     visible et le bord bas du wrapper. La hauteur est dictée uniquement par aspect-ratio. */
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--fu-surface-soft);
}

.fu-article-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.fu-article-card:hover .fu-article-card-img {
  transform: scale(1.04);
}

/* Pallier I — Fix I.4-ter.A Bug 1 : le placeholder div n'avait pas height effective dans le
   parent .fu-article-card-imgwrap (aspect-ratio:4/3), créant un trou de 46px entre le bas
   visible du placeholder et le bas du wrapper où démarre la meta. position:absolute + inset:0
   force le placeholder à remplir 100% du wrapper, alignant le delta photo→eyebrow sur la
   référence home (28px). */
.fu-article-card-img--placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fu-surface-soft), var(--fu-line));
}
/* Pallier H — Fix H5 : icône appareil photo discrète sur placeholder pour casser l'aplat beige */
.fu-article-card-img--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9826A' stroke-width='1.2' opacity='0.35'><rect x='3' y='6' width='18' height='13' rx='2'/><circle cx='12' cy='12.5' r='3.2'/><path d='M8 6V4h8v2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px 56px;
}

/* Pallier I — Fix I.5-A : grammaire UNIQUE alignée sur la card "À la une" home (.pp-card-body)
   qui sert de référence visuelle. padding 22px 24px 26px, margins explicites par enfant
   (pas de gap flex), titre + excerpt + author en variante B. */
.fu-article-card-meta {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.fu-article-card-meta > :first-child { margin-top: 0 !important; }

.fu-article-card-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--fu-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fu-primary);
  text-decoration: none;
  margin: 0 0 10px;
  transition: color .15s;
}

.fu-article-card-eyebrow:hover {
  color: var(--fu-primary-hover, #B26F58);
}

.fu-article-card-title {
  font-family: var(--fu-font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.3;
  color: var(--fu-ink);
  transition: color .15s;
}

.fu-article-card:hover .fu-article-card-title {
  color: var(--fu-primary);
}

.fu-article-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fu-ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fu-article-card-author {
  margin: 16px 0 0;
  padding-top: 12px;
  font-size: 12px;
  color: var(--fu-ink-soft);
  letter-spacing: .02em;
  border-top: 1px solid var(--fu-line);
}

.fu-article-card-author-name {
  font-weight: 500;
  color: var(--fu-ink);
}

@media (max-width: 768px) {
  .fu-article-card-title { font-size: 17px; }
  .fu-article-card-meta { padding: 18px 18px 22px; }
  .fu-article-card-author { margin-top: 12px; }
}

/* =============================================================
   ARCHIVE — Layouts spécifiques cat / sous-cat
   ----------------------------------------------------------- */

/* S2.FIX-16 B.2 — Centrage canon flotte sous-cats (Bruce 2026-05-04).
   Override historique `repeat(3, 1fr) !important` retiré : il forçait 3 cols
   et empêchait le centrage adaptatif (4 cards = ligne de 3 + 1 orpheline).
   Le canon défini dans flowup-skeleton-archive.php ligne 637 prend la main
   (auto-fit + justify-content:center). Cible AUSSI .pp-subcats-grid (legacy
   pp-archive) pour cohérence pendant la coexistence. */
body.archive .pp-subcats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, max-content)) !important;
  gap: 20px !important;
  justify-content: center !important;
  justify-items: center !important;
}
body.archive .pp-subcats-grid > * { max-width: 340px; width: 100%; }
@media (max-width: 600px) {
  body.archive .fu-subcats-grid,
  body.archive .pp-subcats-grid { grid-template-columns: 1fr !important; }
}

/* Pallier E — Fix 1.B : masque pp-archive entièrement (tous renders, pas seulement doublons).
   pp-archive-template.php reste actif (interdit de toucher), juste invisible côté visiteur.
   fu-archive prend la main visuellement. */
body.archive .pp-archive-wrap {
  display: none !important;
}

/* Pallier F — Fix 3+8 : footer universal (toutes pages, pas seulement archives).
   Pallier E ciblait body.archive uniquement → pages WP custom (page, single, home,
   404) gardaient l'ancien footer mal aligné. Étendu à TOUS les contextes via sélecteur
   universel sur footer.pp-footer / footer.fu-footer (pas de qualifier body.X).
   Spécificité maximale (html footer.X) + !important pour battre custom_css inline et
   <style> wp_footer. */
html footer.pp-footer,
html footer.fu-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}
html footer.pp-footer .pp-footer-inner,
html footer.fu-footer .fu-footer-inner,
html footer.pp-footer .pp-footer-bottom,
html footer.fu-footer .fu-footer-bottom {
  max-width: var(--fu-content-max, 1320px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
}

/* Section articles cat/sous-cat — grille 4/2/1 */
.fu-archive-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: var(--fu-content-max, 1320px);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 1024px) {
  .fu-archive-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .fu-archive-articles-grid { grid-template-columns: 1fr; padding: 0 16px; }
}

.fu-archive-articles-section {
  max-width: var(--fu-content-max, 1320px);
  margin: 0 auto 80px;
  padding: 32px 0 0;
}

.fu-archive-articles-section h2 {
  font-family: var(--fu-font-display);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  margin: 0 0 24px;
  font-weight: 500;
  text-align: left;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .fu-archive-articles-section h2 { padding: 0 16px; }
}

/* ============================================================================
   I.10 — HERO overrides + Universe grid adaptatif (Pattern Wizard v2)
   ============================================================================
   ZONE A : opacité du glass renforcée (0.95) pour contraste lisible des chips,
            chips centrées dans le glass.
   ZONE D : grid Universe adaptive selon count via classe --n<X>.
            Auto-fit fallback pour --n13+. Mobile <768px = 1 col.
   Fakes mock (?fu_mock_universe=N) : fallback gradient sur cards sans modifier
            slug-class (--mode/--beaute/--maison/--voyage/--culture).
*/
.pp-hero-glass { background: rgba(250, 247, 242, 0.95) !important; }
.pp-hero-chips { justify-content: center !important; }

.pp-universe-grid--n5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
/* Override breakpoint pour --n5 : préserver les 5 cards alignées dès 900px
   (laptops standard 1024-1366) au lieu de downgrade à 3 cols dès 1100px.
   Sur PhotoPlus le breakpoint canon était 1101 (custom_css), mais avec 5
   cards le rendu 3+2 à 800-1100 est moins lisible que 5 cols compactes. */
@media (min-width: 900px) {
  .pp-universe-grid--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 899px) and (min-width: 769px) {
  .pp-universe-grid--n5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.pp-universe-grid--n6,
.pp-universe-grid--n9  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pp-universe-grid--n7,
.pp-universe-grid--n8,
.pp-universe-grid--n11,
.pp-universe-grid--n12 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.pp-universe-grid--n10 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.pp-universe-grid[class*="--n1"]:not([class*="--n10"]):not([class*="--n11"]):not([class*="--n12"]),
.pp-universe-grid[class*="--n2"], .pp-universe-grid[class*="--n3"], .pp-universe-grid[class*="--n4"] {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
@media (max-width: 1100px) {
  .pp-universe-grid[class*="--n"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .pp-universe-grid[class*="--n"] { grid-template-columns: 1fr !important; }
}

/* Fakes mock : pas de modifier slug-class, donc pas de --ucard-bg défini.
   Fallback dégradé canon pour qu'elles soient visuellement cohérentes. */
.pp-universe-grid .pp-ucard:not([class*="--mode"]):not([class*="--beaute"]):not([class*="--maison"]):not([class*="--voyage"]):not([class*="--culture"]) {
  --ucard-bg: linear-gradient(135deg, var(--fu-line, #E8DDD0) 0%, var(--fu-primary, #C9826A) 100%);
}

/* ============================================================================
   I.5-C D — Pagination magazine canonique .fu-pagination
   ============================================================================
   Pattern Wizard v2 : container centré, page courante --fu-primary, autres
   en --fu-ink-soft, typo Fraunces serif. Mobile <700px : flèches + Page X/Y.
*/
.fu-pagination {
  margin: 48px auto 0;
  padding: 24px 32px 0;
  text-align: center;
  border-top: 1px solid var(--fu-line, #E8DDD0);
}
.fu-pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.fu-pagination-item { margin: 0; padding: 0; }
.fu-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--fu-ink-soft, #6E6661);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.fu-pagination .page-numbers:hover {
  color: var(--fu-primary, #C9826A);
  border-color: var(--fu-line, #E8DDD0);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fu-pagination .page-numbers.current {
  color: var(--fu-primary, #C9826A);
  border-color: var(--fu-primary, #C9826A);
  background: rgba(201, 130, 106, 0.06);
  font-weight: 600;
}
.fu-pagination .page-numbers.dots {
  border-color: transparent;
  cursor: default;
  opacity: .5;
}
.fu-pagination .page-numbers.prev,
.fu-pagination .page-numbers.next {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 14px;
  letter-spacing: .02em;
}
.fu-pagination-mobile {
  display: none;
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--fu-ink-soft, #6E6661);
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .fu-pagination-mobile { display: block; }
  .fu-pagination .page-numbers:not(.prev):not(.next) { display: none; }
  .fu-pagination-list { gap: 12px; }
}
@media (max-width: 600px) {
  .fu-pagination { padding: 24px 16px 0; }
}

/* ============================================================================
   I.7 — Bloc auteur titulaire fin cat principale (.fu-cat-author)
   ============================================================================
   Pattern Wizard v2 : présente le persona titulaire du silo en bas de la cat
   principale. Photo gauche (4:5), texte droite (eyebrow + nom + bio + voice
   quote + CTA souligné). Mobile <900px : photo dessus, texte dessous.
*/
.fu-cat-author {
  background: var(--fu-surface-soft, #F0E6DA);
  margin: 72px 0 0;
  padding: 64px 0 80px;
}
.fu-cat-author-header {
  max-width: var(--fu-content-max, 1320px);
  margin: 0 auto 32px;
  padding: 0 32px;
  text-align: center;
}
.fu-cat-author-eyebrow {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fu-primary, #C9826A);
  margin: 0 0 8px;
  font-weight: 500;
}
.fu-cat-author-title {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  margin: 0;
  color: var(--fu-ink, #2C2C2C);
  letter-spacing: -.01em;
}
/* Pallier I.7-quater : layout sans photo, texte centré, max-width serré pour
   respiration éditoriale. Cohérent avec le rythme typographique des autres
   sections du squelette. */
.fu-cat-author-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.fu-cat-author-meta {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fu-ink-soft, #6E6661);
  margin: 0 0 8px;
  font-weight: 500;
}
.fu-cat-author-name {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--fu-ink, #2C2C2C);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.fu-cat-author-bio {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fu-ink-soft, #6E6661);
  margin: 0 0 24px;
}
/* Citation magazine sans border-left : guillemets « » natifs déjà rendus en PHP,
   italique + bordures haut/bas fines pour démarcation centrée. */
.fu-cat-author-quote {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--fu-ink, #2C2C2C);
  margin: 24px auto 28px;
  padding: 18px 0;
  max-width: 600px;
  border-top: 1px solid var(--fu-line, #E8DDD0);
  border-bottom: 1px solid var(--fu-line, #E8DDD0);
}
.fu-cat-author-cta {
  display: inline-block;
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fu-primary, #C9826A);
  text-decoration: none;
  border-bottom: 1px solid var(--fu-primary, #C9826A);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.fu-cat-author-cta:hover {
  color: var(--fu-primary-hover, #B26F58);
  border-color: var(--fu-primary-hover, #B26F58);
}
@media (max-width: 600px) {
  .fu-cat-author { padding: 48px 0 56px; }
  .fu-cat-author-header { padding: 0 16px; }
  .fu-cat-author-card { padding: 0 16px; }
  .fu-cat-author-quote { padding: 14px 0; margin: 18px auto 22px; }
}

/* Section "À découvrir aussi" sur sous-cat — fond contrasté pour démarcation visuelle */
.fu-archive-related {
  background: var(--fu-surface-soft, #F0E6DA);
  padding: 64px 0 72px;
  margin-top: 64px;
}

.fu-archive-related-inner {
  max-width: var(--fu-content-max, 1320px);
  margin: 0 auto;
  padding: 0 32px;
}

.fu-archive-related h2 {
  font-family: var(--fu-font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 32px;
  color: var(--fu-ink);
  text-align: center;
}

.fu-archive-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) { .fu-archive-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fu-archive-related-grid { grid-template-columns: 1fr; } .fu-archive-related-inner { padding: 0 16px; } }

.fu-archive-related-card {
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--fu-ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--fu-shadow);
  transition: transform .25s, box-shadow .25s;
}

.fu-archive-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fu-shadow-hover);
}

.fu-archive-related-card-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--fu-surface-soft);
}

.fu-archive-related-card-img--fallback {
  background: linear-gradient(135deg, var(--fu-surface-soft), var(--fu-line));
  display: flex;
  align-items: center;
  justify-content: center;
}

.fu-archive-related-card-name {
  font-family: var(--fu-font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 16px 18px 18px;
  color: var(--fu-ink);
}

/* Fallback typographique pour sous-cats sans image — gradient pastel + nom en grand */
.fu-subcat-img--fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fu-surface-soft, #F0E6DA), var(--fu-line, #E8DDD0)) !important;
}

.fu-subcat-img--fallback::after {
  content: attr(data-name);
  font-family: var(--fu-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--fu-primary);
  opacity: .55;
  text-align: center;
  padding: 12px 16px;
  line-height: 1.2;
}

/* =============================================================
   FEATURED ARTICLE — section "À la une rubrique" (cat top-level)
   ----------------------------------------------------------- */
.fu-featured-article {
  max-width: var(--fu-content-max, 1320px);
  margin: 56px auto 64px;
  padding: 0 32px;
}
.fu-featured-article-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius, 22px);
  overflow: hidden;
  box-shadow: var(--fu-shadow);
}
.fu-featured-article-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--fu-surface-soft);
  min-height: 360px;
}
.fu-featured-article-img--placeholder {
  background: linear-gradient(135deg, var(--fu-surface-soft), var(--fu-line));
}
.fu-featured-article-meta {
  padding: 48px 48px 48px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.fu-featured-article-kicker {
  font-family: var(--fu-font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fu-primary);
  margin: 0;
  font-weight: 500;
}
.fu-featured-article-eyebrow {
  font-family: var(--fu-font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--fu-accent);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}
.fu-featured-article-title { font-family: var(--fu-font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 600; margin: 0; line-height: 1.18; }
.fu-featured-article-title a { color: var(--fu-ink); text-decoration: none; transition: color .15s; }
.fu-featured-article-title a:hover { color: var(--fu-primary); }
.fu-featured-article-excerpt { font-size: 16px; line-height: 1.6; color: var(--fu-ink-soft); margin: 0; }
.fu-featured-article-author { font-size: 13px; color: var(--fu-ink-soft); margin: 0; }
.fu-featured-article-cta { align-self: flex-start; margin-top: 8px; padding: 12px 28px; border-radius: 999px; background: var(--fu-primary); color: #FFF; text-decoration: none; font-weight: 500; font-size: 14px; transition: background .2s; }
.fu-featured-article-cta:hover { background: var(--fu-primary-hover); }
@media (max-width: 900px) {
  .fu-featured-article-inner { grid-template-columns: 1fr; gap: 0; }
  .fu-featured-article-img { min-height: 240px; }
  .fu-featured-article-meta { padding: 32px 28px 36px; }
}

/* =============================================================
   MANIFESTO — fin de cat top-level
   ----------------------------------------------------------- */
.fu-manifesto {
  background: var(--fu-surface-soft, #F0E6DA);
  padding: 72px 32px;
  margin-top: 64px;
}
.fu-manifesto-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.fu-manifesto-text {
  font-family: var(--fu-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  color: var(--fu-ink);
  margin: 0 0 24px;
}
.fu-manifesto-signature {
  font-family: var(--fu-font-sans);
  font-size: 13px;
  color: var(--fu-ink-soft);
  margin: 0;
  letter-spacing: .04em;
}
.fu-manifesto-signature-name {
  font-weight: 600;
  color: var(--fu-primary);
  margin-right: 8px;
}
.fu-manifesto-signature-spec {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .75;
}
.fu-manifesto-signature-spec::before { content: '— '; }

/* =============================================================
   ATMOSPHERIC BANNER — sous-cat (image + citation surimpression)
   Pallier F — Fix 5A : hauteur 60vh desktop / 50vh mobile (au lieu d'aspect 21/9
   qui devenait trop massif sur viewport tall). Pavé éditorial respirant.
   ----------------------------------------------------------- */
.fu-atmospheric-banner {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 560px;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 48px;
}
@media (max-width: 768px) {
  .fu-atmospheric-banner { height: 50vh; min-height: 280px; max-height: 420px; }
}
.fu-atmospheric-banner-quote {
  max-width: 60%;
  margin: 0;
  font-family: var(--fu-font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 500;
  font-style: italic;
  color: #FFF;
  text-align: center;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  padding: 24px;
}
@media (max-width: 768px) {
  .fu-atmospheric-banner-quote { max-width: 86%; font-size: 18px; }
}

/* =============================================================
   PERSONA QUOTE — bloc encadré sur sous-cat
   ----------------------------------------------------------- */
.fu-persona-quote {
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 28px 40px;
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius-sm, 14px);
  box-shadow: var(--fu-shadow);
  text-align: center;
}
.fu-persona-quote-text {
  font-family: var(--fu-font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--fu-ink);
  margin: 0 0 14px;
}
.fu-persona-quote-signature {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fu-persona-quote-name {
  font-family: var(--fu-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fu-primary);
  letter-spacing: .02em;
}
.fu-persona-quote-spec {
  font-family: var(--fu-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fu-ink-soft);
}
@media (max-width: 600px) {
  .fu-persona-quote { padding: 20px 24px; margin: 0 16px 40px; }
}

/* -- Marqueur canonique --
   Marker DOM pour vérifier en runtime que le squelette est bien chargé. */
body::before {
  content: "fu-skeleton-v1";
  display: none;
}


/* ============================================================================
   I.10-bis-FIX-v4 — Refonte radicale page /le-magazine/ (4 blocs pleine largeur)
   ============================================================================
   Suppression complète des classes .fu-magazine-territoire* + -persona* +
   -divider (FIX-v3 abandonné). Suppression Bloc 3 territoires (redondant home)
   et Bloc 4 personas (redondant /notre-redaction/). Page passe en pleine
   largeur via override .inside-article ciblé sur body.page-id-179.

   Manifeste éditorial long (~500 mots) en centré 720px sur fond pastel.
*/

/* FIX-v9 — Réintégration /le-magazine/ dans le pattern .fu-page-card canon
   (overrides FIX-v4 pleine largeur PURGÉS). On garde uniquement le hide du H1
   .entry-header / .fu-page-card-title car le HERO sober contient déjà le titre.
   Tous les wrappers GP/mu-plugin reprennent leur comportement canon. */
html body.page.page-id-179 .entry-header { display: none !important; }
html body.page.page-id-179 .fu-page-card-title { display: none !important; }

/* ============================================================================
   I.10-bis-FIX — Page /le-magazine/ refonte canon (Pattern Wizard v2)
   ============================================================================
   Réutilise le pattern HERO home (.pp-hero + .pp-hero-glass) avec modifier
   --center pour centrer le glass. Sections suivantes en cards canon
   (--fu-surface-card, --fu-radius 22px, --fu-shadow). Aucune référence
   thématique, grammaire visuelle pure réplicable Wizard v2. */

/* Modifier minimal : centre le glass dans le pp-hero-inner */
.pp-hero-glass--center { margin: 0 auto !important; }

/* Sections magazine — structure générique */
/* Sections magazine FIX-v9 : padding vertical seulement, fond transparent
   (le card .fu-page-card fournit fond blanc + padding latéral 56px) */
.fu-magazine-section { padding: 56px 0; background: transparent; }
.fu-magazine-section-inner { max-width: var(--fu-content-max, 1320px); margin: 0 auto; }
.fu-magazine-section-header { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.fu-magazine-section-kicker {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fu-primary, #C9826A); margin: 0 0 10px; font-weight: 500;
}
.fu-magazine-section-title {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: clamp(28px, 3.5vw, 38px); font-weight: 600;
  margin: 0 0 14px; color: var(--fu-ink, #2C2C2C); letter-spacing: -.01em;
  line-height: 1.15;
}
.fu-magazine-section-sub {
  font-family: var(--fu-font-display, "Fraunces", serif); font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px); color: var(--fu-ink-soft, #6E6661);
  margin: 0; line-height: 1.5;
}

/* Bloc 2 — Manifeste long-form structuré (3 sections H3 + 1 pull-quote)
   Pattern Wizard v2 : long-form magazine premium avec hiérarchie typo claire. */
.fu-magazine-vision { background: transparent; }
.fu-magazine-vision-inner { max-width: 720px; margin: 0 auto; text-align: left; }
.fu-magazine-vision-inner .fu-magazine-section-kicker,
.fu-magazine-vision-inner .fu-magazine-section-title { text-align: center; }
.fu-magazine-vision-body {
  margin: 40px 0 0;
}
.fu-magazine-vision-body p {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: 18px;
  line-height: 1.75;
  color: var(--fu-ink, #2C2C2C);
  margin: 0 0 22px;
}
.fu-magazine-vision-body > p:last-child {
  margin: 0;
  font-style: italic;
  color: var(--fu-ink-soft, #6E6661);
  text-align: center;
}
.fu-magazine-vision-body > p:first-of-type::first-letter {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--fu-primary, #C9826A);
}
.fu-magazine-vision-h3 {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  margin: 36px 0 16px;
  color: var(--fu-ink, #2C2C2C);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.fu-magazine-vision-h3:first-child { margin-top: 0; }
.fu-magazine-vision-pullquote {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--fu-primary, #C9826A);
  text-align: center;
  margin: 44px 0;
  padding: 28px 0;
  border-top: 1px solid var(--fu-line, #E8DDD0);
  border-bottom: 1px solid var(--fu-line, #E8DDD0);
  font-weight: 500;
}

/* Bloc 1 HERO sobre — pattern long-form magazine, sans photo, cartouche centré
   FIX-v7 : abandon split image+content (FIX-v5/v6 abandonnés). La section prend
   toute la largeur du viewport, contenu max-width 720px aligné sur les autres
   blocs (manifeste, engagements stacked) pour continuité visuelle verticale. */
/* HERO sober FIX-v9 : vit dans .fu-page-card (fond blanc + padding du card),
   donc pas de fond propre, padding vertical seulement. */
.fu-magazine-hero-sober {
  background: transparent;
  padding: 24px 0 56px;
  text-align: center;
}
.fu-magazine-hero-sober-inner {
  max-width: 720px;
  margin: 0 auto;
}
.fu-magazine-hero-sober-title {
  font-family: var(--fu-font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  margin: 18px 0 22px;
  color: var(--fu-ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.fu-magazine-hero-sober-title em {
  color: var(--fu-primary);
  font-style: italic;
}
.fu-magazine-hero-sober-sub {
  font-family: var(--fu-font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--fu-ink-soft);
  margin: 0;
}
@media (max-width: 768px) {
  .fu-magazine-hero-sober { padding: 16px 0 40px; }
  .fu-magazine-hero-sober-sub { font-size: 17px; }
}

/* Bloc Engagements — supprimé FIX-v8 (page /le-magazine/ archivée à 3 blocs) */

/* Bloc 3 — Territoires : 5 cards canon */
.fu-magazine-territoires { background: var(--fu-surface-soft, #F0E6DA); }
.fu-magazine-territoires-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px; max-width: var(--fu-content-max, 1320px); margin: 0 auto;
}
.fu-magazine-territoire-card {
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius, 22px);
  box-shadow: var(--fu-shadow);
  padding: 36px 28px;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.fu-magazine-territoire-card:hover {
  transform: translateY(-3px); box-shadow: var(--fu-shadow-hover);
}
.fu-magazine-territoire-name {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: 20px; font-weight: 600; letter-spacing: .04em;
  color: var(--fu-primary, #C9826A); margin: 0 0 14px;
  text-transform: uppercase;
}
.fu-magazine-territoire-desc {
  font-size: 14px; line-height: 1.65;
  color: var(--fu-ink-soft, #6E6661); margin: 0;
}

/* Bloc 4 — Personas : 5 cards canon avec photo 4/5 */
.fu-magazine-redaction { background: var(--fu-surface, #FAF7F2); }
.fu-magazine-personas-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px; max-width: var(--fu-content-max, 1320px); margin: 0 auto;
}
.fu-magazine-persona-card {
  background: var(--fu-surface-card, #FFF);
  border-radius: var(--fu-radius, 22px);
  box-shadow: var(--fu-shadow);
  overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.fu-magazine-persona-card:hover {
  transform: translateY(-4px); box-shadow: var(--fu-shadow-hover);
}
.fu-magazine-persona-photo {
  aspect-ratio: 4 / 5; background: var(--fu-surface-soft, #F0E6DA);
}
.fu-magazine-persona-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fu-magazine-persona-body { padding: 22px 22px 26px; text-align: center; }
.fu-magazine-persona-silo {
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fu-primary, #C9826A); margin: 0 0 8px; font-weight: 500;
}
.fu-magazine-persona-name {
  font-family: var(--fu-font-display, "Fraunces", serif);
  font-size: 17px; font-weight: 600; margin: 0 0 10px;
  color: var(--fu-ink, #2C2C2C); line-height: 1.2;
}
.fu-magazine-persona-sig {
  font-family: var(--fu-font-display, "Fraunces", serif); font-style: italic;
  font-size: 13px; line-height: 1.45;
  color: var(--fu-ink-soft, #6E6661); margin: 0;
}

/* CTA souligné canon (réutilisable) */
.fu-magazine-cta-wrap { text-align: center; margin: 48px 0 0; }
.fu-magazine-cta {
  display: inline-block;
  font-family: var(--fu-font-sans, "DM Sans", sans-serif);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  color: var(--fu-primary, #C9826A); text-decoration: none;
  border-bottom: 1px solid var(--fu-primary, #C9826A);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.fu-magazine-cta:hover {
  color: var(--fu-primary-hover, #B26F58);
  border-color: var(--fu-primary-hover, #B26F58);
}

/* Bloc 5 — Engagements supprimé FIX-v8 (canon Wizard v2 : 3 blocs hero+manifeste+contact) */

/* Bloc 6 — Contact (utilise .pp-btn-primary canon pour le bouton) */
.fu-magazine-contact { background: transparent; padding: 56px 0 24px; }
.fu-magazine-contact-inner { max-width: 720px; text-align: center; margin: 0 auto; }
.fu-magazine-contact-text {
  font-size: 16px; line-height: 1.65;
  color: var(--fu-ink-soft, #6E6661); margin: 0 0 28px;
}
.fu-magazine-contact-cta { margin: 0 0 32px; }
.fu-magazine-mention {
  font-size: 13px; opacity: .65; font-style: italic; margin: 0;
  color: var(--fu-ink-soft, #6E6661);
}

/* Responsive */
@media (max-width: 1100px) {
  .fu-magazine-territoires-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
  .fu-magazine-personas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
}
@media (max-width: 768px) {
  .fu-magazine-section { padding: 40px 0; }
  .fu-magazine-section-header { margin-bottom: 32px; }
  .fu-magazine-territoires-grid { grid-template-columns: 1fr; max-width: 460px; }
  .fu-magazine-personas-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; gap: 16px; }
  .fu-magazine-territoire-card { padding: 28px 24px; }
}


/* =============================================================
 * BLOC PORTÉ depuis wp_options.custom_css PhotoPlus prod (Phase 2.1)
 * --------------------------------------------------------------
 * Source       : https://photosplus.fr — wp_get_custom_css()
 * Date portage : 2026-05-01
 * Filtres P1   : sélecteurs .pp-* + :root uniquement
 *                @import IGNORÉ (fonts via flowup-skeleton-fonts.php)
 *                body/html/* IGNORÉS (génériques canon)
 * Neutralisé   : couleurs hex hardcodées → var(--fu-*) (palette dynamique
 *                via flowup_palette() / flowup-skeleton-colors.php).
 * Classes      : ~101 sélecteurs .pp-* (extension du squelette canon).
 * Voir         : _audit/css-portage-decisions.md pour le détail des
 *                rules ignorées et leurs raisons.
 * ============================================================= */

600;700;900&amp;family=DM+Sans:wght@400;500;600;700&amp;display=swap');

:root {
  --pp-primary: var(--fu-primary);
  --pp-primary-hover: var(--fu-primary-hover);
  --pp-accent: var(--fu-accent);
  --pp-accent-dark: var(--fu-accent-dark);
  --pp-gold: var(--fu-secondary);
  --pp-surface: var(--fu-surface);
  --pp-surface-soft: var(--fu-surface-soft);
  --pp-surface-card: var(--fu-surface-card);
  --pp-ink: var(--fu-ink);
  --pp-ink-soft: var(--fu-ink-soft);
  --pp-line: var(--fu-line);
  --pp-shadow: 0 14px 40px rgba(58, 42, 32, .07);
  --pp-shadow-hover: 0 22px 56px rgba(58, 42, 32, .13);
  --pp-radius: 22px;
  --pp-radius-sm: 14px;
  --pp-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --pp-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --pp-content-max: 1320px;
  --pp-hero-max: 1480px;
}

.pp-header {
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-line);
  position: relative;
  z-index: 100;
}

.pp-header-inner {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: 0 32px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pp-header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* H.2 : brand alignée à gauche, nav reste à droite via parent justify-content:space-between */
  text-decoration: none;
  color: var(--pp-ink);
  flex-shrink: 0;
}

.pp-header-brand-name {
  font-family: var(--pp-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1;
}

.pp-header-brand-tag {
  font-family: var(--pp-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--pp-primary);
  margin-top: 4px;
  font-weight: 500;
}

.pp-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
}

.pp-header-nav::-webkit-scrollbar { display: none; }

.pp-header-nav a {
  font-family: var(--pp-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--pp-ink-soft);
  text-decoration: none;
  padding: 0 16px;
  line-height: 78px;
  white-space: nowrap;
  position: relative;
  transition: color .25s;
}

.pp-header-nav a:hover { color: var(--pp-primary); }

.pp-header-nav a.is-active { color: var(--pp-primary); }

.pp-header-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 22px;
  height: 1.5px;
  background: var(--pp-primary);
}

.pp-wrap {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: 0 32px;
}

.pp-section {
  padding: 80px 0;
}

.pp-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.pp-section-eyebrow {
  font-family: var(--pp-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pp-primary);
  margin: 0 0 14px;
}

.pp-section-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--pp-ink);
}

.pp-section-sub {
  font-size: 16px;
  color: var(--pp-ink-soft);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

.pp-hero {
  position: relative;
  width: 100%;
  max-width: var(--pp-hero-max);
  margin: 24px auto 0;
  min-height: 620px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(115deg, rgba(28, 22, 18, .55) 0%, rgba(28, 22, 18, .25) 50%, rgba(28, 22, 18, .05) 100%),
    url('/wp-content/uploads/flowup/photoplus/photos/photo-1469334031218-e382a71b716b.webp') center/cover no-repeat;
  box-shadow: 0 18px 56px rgba(58, 42, 32, .12);
}

.pp-hero-inner {
  width: min(var(--pp-content-max), calc(100% - 64px));
  margin-inline: auto;
  padding: 64px 0;
}

.pp-hero-glass {
  max-width: 540px;
  padding: 42px 40px;
  border-radius: 22px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  background: rgba(250, 247, 242, .82);
  border: 1px solid rgba(255, 255, 255, .7);
  color: var(--pp-ink);
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

.pp-hero-eyebrow {
  font-family: var(--pp-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  font-weight: 600;
  color: var(--pp-primary);
  margin: 0 0 18px;
}

.pp-hero-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--pp-ink);
}

.pp-hero-title em {
  font-style: italic;
  color: var(--pp-primary);
  font-weight: 500;
}

.pp-hero-text {
  font-size: 16px;
  color: var(--pp-ink-soft);
  line-height: 1.75;
  margin: 0 0 30px;
}

.pp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.pp-hero-cta a {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .25s;
}

.pp-btn-primary {
  background: var(--pp-primary);
  color: var(--fu-surface-card) !important;
  box-shadow: 0 6px 20px rgba(201, 130, 106, .3);
}

.pp-btn-primary:hover {
  background: var(--pp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(201, 130, 106, .4);
}

.pp-btn-ghost {
  background: transparent;
  color: var(--pp-ink) !important;
  border: 1.5px solid var(--pp-ink);
}

.pp-btn-ghost:hover {
  background: var(--pp-ink);
  color: var(--pp-surface) !important;
}

.pp-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.pp-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .06);
  color: var(--pp-ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  transition: all .2s;
}

.pp-chip:hover { background: var(--pp-primary); color: var(--fu-surface-card); border-color: var(--pp-primary); }

.pp-universe-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.pp-ucard {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 22px;
  border-radius: var(--pp-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--fu-surface-card);
  box-shadow: var(--pp-shadow);
  transition: transform .3s, box-shadow .3s;
  background:
    linear-gradient(180deg, rgba(28, 22, 18, .04) 0%, rgba(28, 22, 18, .65) 100%),
    var(--ucard-bg) center/cover no-repeat;
}

.pp-ucard:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-hover); }

.pp-ucard-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  margin: 0 0 6px;
}

.pp-ucard-name {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  line-height: 1.15;
}

.pp-ucard-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 14px;
  line-height: 1.55;
}

.pp-ucard-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fu-surface-card);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: 4px;
  align-self: flex-start;
}

.pp-ucard--mode { --ucard-bg: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&amp;q=82&amp;auto=format&amp;fit=crop'); }

.pp-ucard--beaute { --ucard-bg: url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=900&amp;q=82&amp;auto=format&amp;fit=crop'); }

.pp-ucard--maison { --ucard-bg: url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=900&amp;q=82&amp;auto=format&amp;fit=crop'); }

.pp-ucard--voyage { --ucard-bg: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=900&amp;q=82&amp;auto=format&amp;fit=crop'); }

.pp-ucard--createurs { --ucard-bg: url('https://images.unsplash.com/photo-1452587925148-ce544e77e70d?w=900&amp;q=82&amp;auto=format&amp;fit=crop'); }

.pp-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.pp-card {
  display: block;
  background: var(--pp-surface-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--pp-shadow);
  transition: transform .25s, box-shadow .25s;
}

.pp-card:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-hover); }

.pp-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--pp-surface-soft);
}

.pp-card-img--placeholder {
  background: linear-gradient(135deg, var(--pp-surface-soft) 0%, var(--pp-line) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-card-img--placeholder::after {
  content: '&#x2728;';
  font-size: 32px;
  opacity: .5;
}

.pp-card-body { padding: 22px 24px 26px; }

.pp-card-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--pp-primary);
  margin-bottom: 10px;
}

.pp-card-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--pp-ink);
}

.pp-card-excerpt {
  font-size: 14px;
  color: var(--pp-ink-soft);
  line-height: 1.6;
  margin: 0;
}

.pp-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--pp-ink-soft);
}

.pp-editorial {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-surface-card);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
}

.pp-editorial-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--pp-surface-soft);
}

.pp-editorial-body {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-editorial-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--pp-primary);
  margin: 0 0 16px;
}

.pp-editorial-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--pp-ink);
}

.pp-editorial-text {
  font-size: 16px;
  color: var(--pp-ink-soft);
  line-height: 1.75;
  margin: 0 0 28px;
}

.pp-editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-primary);
  text-decoration: none;
  letter-spacing: .02em;
}

.pp-editorial-link:hover { color: var(--pp-primary-hover); text-decoration: underline; }

.pp-placeholder {
  background: var(--pp-surface-card);
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 56px 32px;
  text-align: center;
}

.pp-placeholder-icon {
  font-size: 32px;
  margin-bottom: 16px;
  opacity: .55;
}

.pp-placeholder-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--pp-ink);
}

.pp-placeholder-text {
  font-size: 15px;
  color: var(--pp-ink-soft);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.pp-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 60px 56px;
  background: var(--pp-surface-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-about-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--pp-primary);
  font-weight: 600;
  margin: 0 0 14px;
}

.pp-about-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.01em;
  margin: 0 0 18px;
  line-height: 1.2;
}

.pp-about-text {
  font-size: 16px;
  color: var(--pp-ink-soft);
  line-height: 1.8;
  margin: 0 0 24px;
}

.pp-about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-primary);
  text-decoration: none;
}

.pp-about-link:hover { text-decoration: underline; }

.pp-about-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--pp-radius);
  background: var(--pp-surface-soft);
}

.pp-archive-wrap {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: 24px 32px 80px;
}

.pp-archive-hero {
  padding: 64px 48px 56px;
  border-radius: var(--pp-radius);
  background: linear-gradient(135deg, var(--pp-surface-card) 0%, var(--pp-surface-soft) 100%);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  text-align: center;
  overflow: hidden;
}

.pp-archive-hero--image {
  border: none;
  color: var(--fu-surface-card);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-archive-hero--image .pp-archive-title { color: var(--fu-surface-card); text-shadow: 0 2px 16px rgba(0,0,0,.25); }

.pp-archive-hero--image .pp-archive-desc { color: rgba(255, 255, 255, .9); }

.pp-archive-hero--image .pp-archive-breadcrumb a { color: rgba(255, 255, 255, .8); }

.pp-archive-hero--image .pp-archive-breadcrumb span { color: rgba(255, 255, 255, .65); }

.pp-archive-breadcrumb { font-size: 13px; font-weight: 500; margin-bottom: 16px; }

.pp-archive-breadcrumb a { color: var(--pp-primary); text-decoration: none; }

.pp-archive-breadcrumb a:hover { text-decoration: underline; }

.pp-archive-breadcrumb span { color: var(--pp-ink-soft); }

.pp-archive-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -.02em;
  margin: 0 0 16px;
  line-height: 1.05;
}

.pp-archive-desc {
  font-size: 16px;
  color: var(--pp-ink-soft);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.75;
}

.pp-subcats-section { padding: 56px 0 0; }

.pp-subcats-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 24px;
  color: var(--pp-ink);
}

.pp-subcats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.pp-subcat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--pp-radius-sm);
  overflow: hidden;
  background: var(--pp-surface-card);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  transition: transform .25s, box-shadow .25s;
}

.pp-subcat-card:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-hover); }

.pp-subcat-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--pp-surface-soft);
}

.pp-subcat-img--fallback {
  background: linear-gradient(135deg, var(--pp-surface-soft) 0%, var(--pp-line) 100%);
}

.pp-subcat-body { padding: 14px 16px 16px; }

.pp-subcat-name {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: var(--pp-ink);
}

.pp-subcat-count { font-size: 12px; color: var(--pp-ink-soft); margin: 4px 0 0; }

.pp-archive-articles { padding: 56px 0 0; }

.pp-archive-articles-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 24px;
}

.pp-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.pp-pagination { margin-top: 40px; text-align: center; }

.pp-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

.pp-pagination li { display: inline-flex; }

.pp-pagination a, .pp-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; font-size: 14px; font-weight: 500;
  text-decoration: none; transition: all .2s;
}

.pp-pagination a { background: var(--pp-surface-card); border: 1px solid var(--pp-line); color: var(--pp-ink); }

.pp-pagination a:hover { border-color: var(--pp-primary); color: var(--pp-primary); }

.pp-pagination .current { background: var(--pp-primary); color: var(--fu-surface-card); border: 1px solid var(--pp-primary); }

.pp-empty {
  text-align: center;
  padding: 80px 32px;
  margin: 56px auto;
  max-width: 620px;
  background: var(--pp-surface-card);
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
}

.pp-empty-icon { font-size: 36px; margin-bottom: 18px; opacity: .65; }

.pp-empty-title {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 14px;
}

.pp-empty-text {
  font-size: 15px;
  color: var(--pp-ink-soft);
  line-height: 1.75;
  margin: 0 0 28px;
}

.pp-empty-text strong { color: var(--pp-ink); font-weight: 600; }

.pp-empty-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--pp-primary);
  color: var(--fu-surface-card) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s;
  box-shadow: 0 6px 20px rgba(201, 130, 106, .25);
}

.pp-empty-btn:hover { background: var(--pp-primary-hover); transform: translateY(-1px); }

.pp-footer-wrap {
  background: var(--pp-ink);
  color: rgba(255, 255, 255, .7);
  margin-top: 80px;
}

.pp-footer {
  max-width: var(--pp-content-max);
  margin: 0 auto;
  padding: 64px 32px 36px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

.pp-footer-col--brand .pp-footer-brand {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--fu-surface-card);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.pp-footer-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .55);
  margin: 0;
  max-width: 360px;
}

.pp-footer-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .45);
  margin: 0 0 18px;
}

.pp-footer-links { list-style: none; padding: 0; margin: 0; }

.pp-footer-links li { line-height: 2.2; }

.pp-footer-links a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}

.pp-footer-links a:hover { color: var(--fu-surface-card); }

.pp-footer-bottom {
  text-align: center;
  padding: 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .03em;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .pp-universe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-editorial { grid-template-columns: 1fr; }
  .pp-about { grid-template-columns: 1fr; text-align: center; gap: 32px; padding: 48px 32px; }
  .pp-about-img { max-width: 540px; margin: 0 auto; }
  .pp-footer { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

@media (max-width: 768px) {
  .pp-header-inner { min-height: 64px; padding: 0 18px; }
  .pp-header-brand-name { font-size: 22px; }
  .pp-header-brand-tag { font-size: 9.5px; letter-spacing: 1.6px; }
  .pp-header-nav a { padding: 0 10px; font-size: 12px; line-height: 64px; }
  .pp-hero { min-height: 480px; border-radius: 18px; margin-top: 12px; }
  .pp-hero-inner { width: calc(100% - 32px); padding: 36px 0; }
  .pp-hero-glass { padding: 28px 24px; max-width: 100%; }
  .pp-hero-title { font-size: clamp(28px, 7vw, 38px); }
  .pp-section { padding: 56px 0; }
  .pp-wrap { padding: 0 18px; }
  .pp-universe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pp-ucard { min-height: 220px; padding: 18px; }
  .pp-cards-4, .pp-archive-grid { grid-template-columns: 1fr; gap: 18px; }
  .pp-editorial { grid-template-columns: 1fr; }
  .pp-editorial-body { padding: 36px 28px; }
  .pp-about { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; text-align: center; }
  .pp-about-img { max-width: 100%; }
  .pp-archive-wrap { padding: 16px 18px 56px; }
  .pp-archive-hero { padding: 40px 24px; }
  .pp-archive-hero--image { min-height: 240px; }
  .pp-subcats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pp-footer { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px 28px; }
}

.pp-section, .pp-hero, .pp-footer, .pp-section--alaune, .pp-section--featured, .pp-section--latest { width:100%; box-sizing:border-box }

.pp-section-inner, .pp-hero-inner, .pp-footer-inner { max-width:1280px; margin-left:auto !important; margin-right:auto !important; padding-left:24px; padding-right:24px; box-sizing:border-box }

.pp-cards-4, .pp-cards-3, .pp-cards-2, .pp-alaune-grid { margin-left:auto; margin-right:auto; max-width:1280px }

.pp-section-eyebrow, .pp-section-title, .pp-section-lead, .pp-hero-eyebrow, .pp-hero-title, .pp-hero-text { text-align:center }

.pp-hero-cta { justify-content:center }

@media (max-width:768px) {
  .pp-section-inner, .pp-hero-inner, .pp-footer-inner { padding-left:16px; padding-right:16px }
}