/*
Theme Name: Gurume
Template: twentytwentyfive
Description: Child theme de Twenty Twenty-Five pour gurume.land — layout Untitled UI, DA noemie.land
Version: 2.0.0
Author: Necraidan
Text Domain: gurume
*/

/* ================================================================
   DESIGN TOKENS — palette noemie.land
   ================================================================ */
:root {
  /* Couleurs — tokens exacts de noemie.land */
  --color-primary: #5a4b9c;
  --color-primary-hover: #483b80;
  --color-primary-text: #fff5f7;
  --color-secondary: #1b4965;
  --color-accent: #d4a03c;
  --color-bg: #f7f1f8;
  --color-surface: #fbf7fb;
  --color-surface-alt: #f5d6de;
  --color-text: #2c2420;
  --color-text-muted: #6b5e54;
  --color-border: #2c24201f;
  --color-success: #5b8a3c;
  --color-error: #b83230;
  --color-footer-bg: #3b2d6b;
  --color-footer-link: #fff5f7cc;
  --color-footer-link-hover: #fff5f7;

  /* Typo */
  --font-heading: "Fraunces", "Zen Old Mincho", Georgia, serif;
  --font-body: "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* Espacements */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: 128px;

  /* Layout */
  --page-max-width: 1080px;
  --reading-max-width: 680px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;

  /* Composants */
  --radius-card: 16px;
  --radius-button: 8px;
  --shadow-card: 0 1px 3px #2c24200f;
  --shadow-card-hover: 0 4px 12px #2c24201a;
  --shadow-button: 0 2px 6px #5a4b9c38;

  /* Motifs */
  --pattern-size: 160px 80px;
  --pattern-opacity-subtle: 0.07;
  --pattern-opacity-medium: 0.06;
}

/* ================================================================
   BASE / GLOBAL
   ================================================================ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  font-family: var(--font-heading);
  color: var(--color-text);
}

h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.75rem;
    line-height: 1.12;
  }
  h2 {
    font-size: 1.875rem;
    line-height: 1.2;
  }
  h3 {
    font-size: 1.375rem;
  }
  h4 {
    font-size: 1.125rem;
  }
}

/* ================================================================
   LINKS
   ================================================================ */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-primary-hover);
}

/* WordPress met un outline currentColor sur *:focus ; on le retire au clic
   souris mais on le garde pour la navigation clavier (:focus-visible) */
.wp-site-blocks a:focus:not(:focus-visible) {
  outline: none;
}

/* ================================================================
   HEADER — clair, façon Untitled UI : logo / nav / CTA
   ================================================================ */
.gurume-header {
  background: var(--color-footer-bg);
  border-bottom: 1px solid rgba(255, 245, 247, 0.12);
  overflow: visible;
  position: relative;
  z-index: 100;
}

.gurume-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/patterns/header-washoku-light.svg");
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  clip-path: inset(0);
}

.gurume-header > * {
  position: relative;
  z-index: 1;
}

.gurume-header .wp-block-site-title a {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-primary-text) !important;
}

.gurume-header .wp-block-navigation a {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  color: var(--color-footer-link) !important;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 200ms ease;
}

.gurume-header .wp-block-navigation a:hover {
  color: var(--color-footer-link-hover) !important;
}

.gurume-header .wp-block-navigation a[aria-current="page"] {
  color: var(--color-primary-text) !important;
}

/* Bouton burger mobile — caché par défaut (desktop) */
.gurume-nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 245, 247, 0.1);
  border: 1px solid rgba(255, 245, 247, 0.2);
  border-radius: var(--radius-button);
  color: var(--color-footer-link);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 40px;
  padding: 0.25rem 0.75rem;
  transition: background 200ms ease;
}

.gurume-nav-toggle:hover {
  background: rgba(255, 245, 247, 0.18);
}

/* Dropdown mobile — caché par défaut (desktop) */
.gurume-nav-dropdown {
  display: none;
}

.gurume-nav-toggle[aria-expanded="true"] .gurume-nav-toggle-icon::before {
  content: "✕";
}

.gurume-nav-toggle-icon::before {
  content: "☰";
}

/* Marque : logo + titre du site */
.gurume-brand {
  flex-wrap: nowrap;
}

.gurume-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.gurume-logo img {
  display: block;
  height: 40px;
  width: auto;
  transition: transform 300ms ease;
}

.gurume-logo:hover img {
  transform: rotate(-6deg) scale(1.06);
}

/* Navigation header : Accueil + catégories */
.gurume-nav {
  row-gap: 4px;
}

.gurume-nav p {
  margin: 0;
}

/* On cible aussi .wp-block-categories directement : selon la version
   de WP, la liste peut être rendue sans la className personnalisée */
.gurume-nav .gurume-nav-cats,
.gurume-nav ul.wp-block-categories,
.gurume-nav .wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gurume-nav .gurume-nav-cats li,
.gurume-nav ul.wp-block-categories li,
.gurume-nav .wp-block-categories-list li {
  margin: 0;
}

.gurume-nav .gurume-nav-cats a,
.gurume-nav ul.wp-block-categories a,
.gurume-nav .wp-block-categories-list a {
  color: var(--color-footer-link);
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition:
    color 200ms ease,
    background-color 200ms ease;
  white-space: nowrap;
}

.gurume-nav .gurume-nav-cats a:hover,
.gurume-nav ul.wp-block-categories a:hover,
.gurume-nav .wp-block-categories-list a:hover {
  background: rgba(255, 245, 247, 0.12);
  color: var(--color-footer-link-hover);
}

/* La barre du header ne wrappe jamais : la recherche se comprime au besoin */
.gurume-header-bar {
  flex-wrap: nowrap !important;
}

/* Barre de recherche compacte */
.gurume-search {
  flex: 0 1 220px;
  margin-left: 8px;
  min-width: 140px;
}

.gurume-search .wp-block-search__inside-wrapper {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2px 4px 2px 14px;
  transition: border-color 200ms ease;
}

.gurume-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(90, 75, 156, 0.12);
}

.gurume-search .wp-block-search__input {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  padding: 6px 0;
}

.gurume-search .wp-block-search__button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--color-text-muted);
  cursor: pointer;
  flex: none;
  min-height: 32px;
  min-width: 32px;
  padding: 6px;
}

.gurume-search .wp-block-search__button:hover {
  background: rgba(90, 75, 156, 0.08);
  color: var(--color-primary);
  transform: none;
}

/* Desktop : la barre plafonne à 1032px utiles (--page-max-width moins les
   gouttières), quelle que soit la taille de l'écran. La nav doit donc rester
   compacte pour tenir sur une seule ligne. */
@media (min-width: 1025px) {
  .gurume-nav .gurume-nav-cats a,
  .gurume-nav ul.wp-block-categories a,
  .gurume-nav .wp-block-categories-list a {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
  }

  .gurume-search {
    flex: 0 1 200px;
    margin-left: 4px;
    min-width: 130px;
  }

  /* Sélecteur renforcé : WP pose le blockGap via .wp-container-core-group-* */
  .gurume-header .gurume-header-bar {
    column-gap: 12px;
  }
}

/* 1025 → 1127px : la barre n'a que ~929px, on resserre aussi la marque */
@media (min-width: 1025px) and (max-width: 1127px) {
  .gurume-logo img {
    height: 34px;
  }

  .gurume-header .wp-block-site-title a {
    font-size: 1.125rem;
  }
}

/* Header responsive : la barre s'empile proprement sur mobile */
@media (max-width: 1024px) {
  /* Une seule ligne : logo — recherche — bouton Menu */
  .gurume-header-bar {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .gurume-brand {
    flex: 0 1 auto;
    min-width: 0;
    order: 1;
  }

  .gurume-brand .wp-block-site-title {
    min-width: 0;
    overflow: hidden;
  }

  .gurume-brand .wp-block-site-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gurume-logo img {
    height: 34px;
  }

  /* Bouton burger : visible sur mobile uniquement, en fin de ligne */
  .gurume-nav-toggle {
    display: flex;
    flex: 0 0 auto;
    order: 3;
  }

  /* Nav cachée sur mobile, remplacée par le dropdown */
  .gurume-nav {
    display: none !important;
  }

  /* Dropdown catégories */
  .gurume-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-footer-bg);
    border-top: 1px solid rgba(255, 245, 247, 0.12);
    margin: 0 !important;
    padding: 0.75rem 1rem 1rem;
    z-index: 100;
  }

  .gurume-nav-dropdown.is-open {
    display: block;
  }

  /* Le clone de la recherche n'apparaît qu'en mobile (< 600px) */
  .gurume-nav-dropdown .gurume-search {
    display: none;
  }

  .gurume-nav-dropdown ul.wp-block-categories,
  .gurume-nav-dropdown .wp-block-categories-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .gurume-nav-dropdown p {
    text-align: left;
  }

  .gurume-nav-dropdown a {
    color: var(--color-footer-link);
    display: inline-flex;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 40px;
    text-decoration: none;
    transition: color 200ms ease;
    white-space: nowrap;
  }

  .gurume-nav-dropdown a:hover {
    color: var(--color-footer-link-hover);
  }

  .gurume-nav .gurume-nav-cats a,
  .gurume-nav ul.wp-block-categories a,
  .gurume-nav .wp-block-categories-list a {
    min-height: 40px;
  }

  /* Recherche : alignée à droite, juste avant le bouton Menu */
  .gurume-search {
    flex: 0 1 220px;
    order: 2;
    margin-left: auto;
    min-width: 0;
  }
}

/* Mobile : la recherche quitte la barre et rejoint le menu déroulant */
@media (max-width: 600px) {
  .gurume-header-bar .gurume-search {
    display: none;
  }

  .gurume-nav-dropdown .gurume-search {
    display: block;
    margin: 0 0 0.75rem;
    flex: none;
    min-width: 0;
    max-width: none !important;
    width: 100% !important;
  }

  .gurume-nav-dropdown .gurume-search .wp-block-search__inside-wrapper {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Très petits écrans (Galaxy Fold 280px…) : tout se resserre pour
   que logo + titre + bouton Menu tiennent sur une ligne */
@media (max-width: 360px) {
  .gurume-header-bar {
    gap: 8px;
  }

  .gurume-logo img {
    height: 28px;
  }

  .gurume-header .wp-block-site-title a {
    font-size: 1.125rem;
  }

  .gurume-nav-toggle {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
  }

  .gurume-page-title {
    font-size: 2rem;
  }
}

/* ================================================================
   FOOTER — plum profond + seigaiha
   ================================================================ */
.gurume-footer {
  overflow: hidden;
  position: relative;
}

.gurume-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/patterns/sakura-sushi-light.svg");
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

.gurume-footer > * {
  position: relative;
  z-index: 1;
}

.gurume-footer > .wp-block-group.alignwide {
  padding-left: 0;
  padding-right: 0;
}

footer a,
.gurume-footer a {
  color: var(--color-footer-link) !important;
  text-decoration: none;
  transition: color 200ms ease;
}

footer a:hover,
.gurume-footer a:hover {
  color: var(--color-footer-link-hover) !important;
}

/* Marque centrée : logo au-dessus du nom du site */
.gurume-footer-brand {
  align-items: center;
}

.gurume-footer-logo {
  display: inline-flex;
}

.gurume-footer-logo img {
  display: block;
  height: 48px;
  width: auto;
  transition: transform 300ms ease;
}

.gurume-footer-logo:hover img {
  transform: rotate(-6deg) scale(1.06);
}

/* Nav du footer : liste sémantique, centrée, wrap sur mobile */
.gurume-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gurume-footer-nav li {
  margin: 0;
}

.gurume-footer-nav a {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0 var(--space-xs);
}

/* Mobile : liens du footer en colonne, alignés à gauche (comme le menu du header) */
@media (max-width: 600px) {
  .gurume-footer-nav ul {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
  }
}

.gurume-footer-separator {
  border: 0;
  border-top: 1px solid rgba(255, 245, 247, 0.12);
  margin: 0 auto var(--space-sm);
  max-width: var(--page-max-width);
  opacity: 1;
  width: 100%;
}

.gurume-footer-copyright {
  color: rgba(255, 245, 247, 0.6);
  font-size: 0.8125rem;
  margin: 0;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.wp-block-button__link,
.wp-element-button {
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-button);
  color: var(--color-primary-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 22px;
  text-decoration: none;
  text-transform: none;
  transition:
    background-color 300ms ease,
    transform 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-text);
  transform: translateY(-1px);
}

.wp-block-button__link:active,
.wp-element-button:active {
  transform: scale(0.99);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--color-border);
  box-shadow: none;
  color: var(--color-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.gurume-btn-small .wp-block-button__link {
  font-size: 0.8125rem;
  min-height: 40px;
  padding: 8px 16px;
}

/* ================================================================
   IMAGES / SEPARATOR / QUOTE / COVER
   ================================================================ */
.wp-block-image img {
  border-radius: var(--radius-card);
}

.wp-block-image.is-style-rounded img {
  border-radius: 999px;
}

.is-style-gurume-circle img {
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: cover;
  object-position: center top;
}

.wp-block-separator {
  border-color: var(--color-border);
  opacity: 1;
}

.wp-block-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-sm);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.wp-block-cover {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* ================================================================
   CONTENT WIDTH
   ================================================================ */
.wp-site-blocks .wp-block-group.alignwide,
.wp-site-blocks .alignwide {
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
}

@media (max-width: 768px) {
  .wp-site-blocks .wp-block-group.alignwide,
  .wp-site-blocks .alignwide {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  /* Article / page / 404 n'ont pas le wrapper .alignwide de l'accueil : on leur
     ajoute la gouttière mobile au padding racine pour retomber sur les mêmes 30px. */
  main.gurume-single,
  main.gurume-page,
  main.gurume-404 {
    padding-left: calc(var(--wp--style--root--padding-left, 0.875rem) + var(--gutter-mobile));
    padding-right: calc(var(--wp--style--root--padding-right, 0.875rem) + var(--gutter-mobile));
  }

  /* Sinon les blocs déjà .alignwide de l'article (bloc « même catégorie », images
     mises en large dans le contenu) cumuleraient une deuxième fois la gouttière.
     Les deux sélecteurs sont nécessaires pour repasser devant chacune des deux
     variantes de la règle CONTENT WIDTH ci-dessus. */
  main.gurume-single .alignwide,
  main.gurume-single .wp-block-group.alignwide,
  main.gurume-page .alignwide,
  main.gurume-page .wp-block-group.alignwide {
    padding-left: 0;
    padding-right: 0;
  }

  /* Les templates posent padding-top: spacing-70 (50px min) en inline
       sur le main — trop d'air sous le header en mobile */
  main.wp-block-group {
    padding-top: var(--wp--preset--spacing--20, 30px) !important;
  }
}

/* ================================================================
   ÉLÉMENTS PARTAGÉS BLOG (home + single)
   ================================================================ */
/* Eyebrow violet, semibold */
.gurume-eyebrow {
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Gros titre de page, aligné à gauche comme la réf */
.gurume-page-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 18ch;
}

.gurume-subtitle {
  color: var(--color-text-muted);
  font-size: 1.1875rem;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 60ch;
}

/* Pastilles catégorie — pill lavande/violette */
.gurume-blog .wp-block-post-terms,
.gurume-single .wp-block-post-terms {
  margin: 0;
  line-height: 1;
}

.gurume-blog .wp-block-post-terms a,
.gurume-single .wp-block-post-terms a {
  display: inline-block;
  background: rgba(90, 75, 156, 0.08);
  border: 1px solid rgba(90, 75, 156, 0.25);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.gurume-blog .wp-block-post-terms a:hover,
.gurume-single .wp-block-post-terms a:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.wp-block-post-date {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Accès par thème : rangée de pastilles catégories */
.gurume-themes-label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

.gurume-themes-cats,
.gurume-themes ul.wp-block-categories,
.gurume-themes .wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gurume-themes-cats li,
.gurume-themes ul.wp-block-categories li,
.gurume-themes .wp-block-categories-list li {
  margin: 0;
}

.gurume-themes-cats a,
.gurume-themes ul.wp-block-categories a,
.gurume-themes .wp-block-categories-list a {
  display: inline-block;
  background: rgba(90, 75, 156, 0.08);
  border: 1px solid rgba(90, 75, 156, 0.25);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.gurume-themes-cats a:hover,
.gurume-themes ul.wp-block-categories a:hover,
.gurume-themes .wp-block-categories-list a:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ================================================================
   BLOG HOME — layout Untitled UI
   ================================================================ */
.gurume-blog {
  position: relative;
  z-index: 1;
}

/* Cartes flat : image arrondie, contenu nu en dessous */
.gurume-blog .wp-block-post {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.gurume-blog .wp-block-post-featured-image {
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
}

.gurume-blog .wp-block-post-featured-image img {
  border-radius: inherit;
  display: block;
  width: 100%;
  height: auto;
  transition: transform 600ms ease;
}

.gurume-blog .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.03);
}

/* ----- Article vedette : cover image + texte en surimpression ----- */
.gurume-featured-cover {
  border-radius: var(--radius-card);
  overflow: hidden;
  /* fallback si l'article n'a pas d'image mise en avant */
  background: linear-gradient(135deg, #3b2d6b 0%, #5a4b9c 100%);
}

.gurume-featured-cover .wp-block-cover__inner-container {
  padding: var(--space-md);
}

.gurume-featured-cover .wp-block-post-title {
  margin: 0;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

.gurume-featured-cover .wp-block-post-title a {
  color: var(--color-surface);
  text-decoration: none;
}

.gurume-featured-cover .wp-block-post-title a:hover {
  color: var(--color-surface-alt);
}

.gurume-featured-meta {
  color: rgba(255, 245, 247, 0.85);
}

.gurume-featured-meta .wp-block-post-date {
  color: rgba(255, 245, 247, 0.85);
}

/* Pastilles catégorie sur fond sombre */
.gurume-featured-meta .wp-block-post-terms a {
  background: rgba(255, 245, 247, 0.12);
  border-color: rgba(255, 245, 247, 0.35);
  color: var(--color-surface);
}

.gurume-featured-meta .wp-block-post-terms a:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

/* ----- En-tête de section : titre + bouton "voir tout" ----- */
.gurume-section-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

/* ----- Grille de cartes ----- */
.gurume-grid .wp-block-post-template.is-layout-grid {
  gap: var(--space-lg) var(--space-md);
}

.gurume-blog .gurume-card-title {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 8px 0 0;
}

.gurume-blog .gurume-card-title a {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gurume-blog .gurume-card-title a::after {
  content: "↗";
  flex: none;
  font-size: 0.8em;
  color: var(--color-text-muted);
  transition:
    transform 200ms ease,
    color 200ms ease;
}

.gurume-blog .gurume-card-title a:hover {
  color: var(--color-primary);
}

.gurume-blog .gurume-card-title a:hover::after {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

.gurume-blog .gurume-card-excerpt,
.gurume-blog .wp-block-post-excerpt {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 6px 0 0;
}

.gurume-blog .wp-block-post-excerpt__more-text,
.gurume-blog .wp-block-post-excerpt__more-link {
  display: none;
}

.gurume-card-meta {
  align-items: center;
}

/* ----- Pagination épurée ----- */
.gurume-pagination {
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-sm);
  font-size: 0.875rem;
  align-items: center;
}

.gurume-pagination .wp-block-query-pagination-numbers {
  display: inline-flex;
  gap: 4px;
}

.gurume-pagination a,
.gurume-pagination .page-numbers {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-button);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.gurume-pagination a:hover {
  background: rgba(90, 75, 156, 0.08);
  color: var(--color-primary);
}

.gurume-pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
}

.gurume-pagination .wp-block-query-pagination-previous,
.gurume-pagination .wp-block-query-pagination-next {
  color: var(--color-primary);
  font-weight: 600;
}

/* ================================================================
   SINGLE — article en colonne unique de lecture
   ================================================================ */
/* Fil d'Ariane */
.gurume-breadcrumb {
  font-size: 0.875rem;
}

.gurume-breadcrumb p {
  margin: 0;
}

.gurume-breadcrumb-home a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.gurume-breadcrumb-home a:hover {
  color: var(--color-primary);
}

.gurume-breadcrumb-home::after {
  content: "›";
  color: var(--color-text-muted);
  margin-left: 8px;
}

/* Méta : auteur · date · temps de lecture */
.gurume-single-meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.gurume-single-meta .gurume-author-name {
  color: var(--color-text);
  font-weight: 600;
}

.gurume-single-meta > *:not(:first-child)::before {
  content: "·";
  margin-right: var(--wp--preset--spacing--30, 16px);
}

.gurume-reading-time {
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .gurume-single-meta + .wp-block-spacer {
    display: none;
  }
}

/* Sommaire (injecté en JS si l'article est long) */
.gurume-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 0 auto var(--space-md);
  max-width: var(--reading-max-width);
  padding: 20px 24px;
}

.gurume-toc-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.gurume-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gurume-toc li {
  margin: 0 0 2px;
}

.gurume-toc-h3 {
  padding-left: 16px;
}

.gurume-toc a {
  color: var(--color-text);
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.gurume-toc a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* Bouton "Copier le lien" */
.gurume-share-wrap {
  margin: 0 auto;
  max-width: var(--reading-max-width);
}

.gurume-share {
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 20px;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background-color 200ms ease;
}

.gurume-share::before {
  content: "🔗 ";
}

.gurume-share:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.gurume-share.is-copied {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* Articles liés */
.gurume-related .gurume-no-results {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ================================================================
   ARCHIVES (catégories, tags) & RECHERCHE
   ================================================================ */
.wp-block-query-title.gurume-page-title {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
}

.gurume-search-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.wp-block-term-description {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  margin-top: 12px;
  max-width: 60ch;
}

.wp-block-term-description p {
  margin: 0;
}

.gurume-no-results {
  color: var(--color-text-muted);
  font-size: 1rem;
}

/* Formulaire de recherche pleine page (recherche, 404) */
.gurume-search-page {
  margin-left: 0;
  max-width: 440px;
}

.gurume-search-page .wp-block-search__input {
  font-size: 1rem;
  padding: 10px 0;
}

.gurume-search-center {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 781px) {
  .gurume-search-page {
    display: block;
  }
}

/* ================================================================
   404
   ================================================================ */
.gurume-404-code {
  color: var(--color-primary);
  font-size: clamp(5rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 8px;
}

.gurume-404 .gurume-subtitle {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ================================================================
   CONTENU ÉDITORIAL (corps d'article et de page)
   ================================================================ */
.gurume-page-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.gurume-single-content p,
.gurume-page-content p {
  margin-block: 0 1.1em;
}

.gurume-single-content ul,
.gurume-single-content ol,
.gurume-page-content ul,
.gurume-page-content ol {
  margin-block: 0 1.1em;
  padding-left: 1.4em;
}

.gurume-single-content li,
.gurume-page-content li {
  margin-bottom: 0.4em;
}

.gurume-single-content li::marker {
  color: var(--color-primary);
}

.gurume-single-content h2,
.gurume-page-content h2 {
  margin-bottom: 0.6em;
}

.gurume-page-content h2,
.gurume-page-content h3 {
  margin-top: 2em;
}

/* Images, galeries et légendes */
.gurume-single-content figure,
.gurume-page-content figure {
  margin-block: 1.6em;
}

.gurume-single-content img,
.gurume-page-content img {
  border-radius: 12px;
  height: auto;
  max-width: 100%;
}

.gurume-single-content figcaption,
.gurume-page-content figcaption {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-top: 10px;
  text-align: center;
}

/* Tableaux */
.gurume-single-content table,
.gurume-page-content table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  width: 100%;
}

.gurume-single-content th,
.gurume-page-content th {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
}

.gurume-single-content th,
.gurume-single-content td,
.gurume-page-content th,
.gurume-page-content td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
}

/* Code */
.gurume-single-content code,
.gurume-page-content code {
  background: var(--color-surface-alt);
  border-radius: 4px;
  font-size: 0.875em;
  padding: 2px 6px;
}

.gurume-single-content pre,
.gurume-page-content pre {
  background: var(--color-footer-bg);
  border-radius: 12px;
  color: var(--color-surface);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  padding: 20px 24px;
}

.gurume-single-content pre code,
.gurume-page-content pre code {
  background: transparent;
  padding: 0;
}

/* Séparateur dans le contenu */
.gurume-single-content hr,
.gurume-page-content hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: 2.5em;
}

.gurume-single-title {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

.gurume-single .wp-block-post-featured-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

.gurume-single .wp-block-post-featured-image img {
  border-radius: inherit;
  display: block;
  width: 100%;
}

/* Contenu : mesure de lecture + lettrine sur le premier paragraphe */
.gurume-single-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.gurume-single-content > p:first-child::first-letter {
  color: var(--color-primary);
  float: left;
  font-family: var(--font-heading);
  font-size: 3.6em;
  font-weight: 600;
  line-height: 0.8;
  padding: 6px 10px 0 0;
}

.gurume-single-content h2,
.gurume-single-content h3 {
  margin-top: 2em;
}

/* Navigation article précédent / suivant */
.gurume-post-nav {
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.gurume-post-nav a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.gurume-post-nav a:hover {
  color: var(--color-primary);
}

/* ================================================================
   UTILITIES / FOCUS / RESPONSIVE
   ================================================================ */
.has-text-muted-color {
  color: var(--color-text-muted);
}

.has-surface-alt-background-color {
  background-color: var(--color-surface-alt);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }

  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.375rem;
  }

  .gurume-featured-cover {
    min-height: 420px !important;
  }

  .gurume-subtitle {
    font-size: 1.0625rem;
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .gurume-blog .wp-block-post:hover .wp-block-post-featured-image img {
    transform: none;
  }
  .wp-block-button__link:hover,
  .wp-element-button:hover {
    transform: none;
  }
}