/*
Theme Name:  Noa Noa Pearls and Gems
Theme URI:   https://noanoapg.com
Description: Thème custom premium pour Noa Noa Pearls and Gems.
             Joaillerie de création — Papeete, Polynésie Française.
Author:      Noa Noa Pearls and Gems
Version:     1.2.0
Text Domain: noanoa

=======================================================
  SOMMAIRE
=======================================================
  1.  Variables & Reset
  2.  Typographie
  3.  Boutons
  4.  Header & Navigation
  5.  Hero
  6.  Section Collections
  7.  Section Haute Joaillerie (feature)
  8.  Section L'Atelier
  9.  Section Sur Mesure
  10. Section Événements
  11. Section Journal
  12. Pages intérieures — Galerie
  13. Pages intérieures — Article (Journal)
  14. Pages intérieures — Sur Mesure (formulaire)
  15. Pages intérieures — L'Atelier
  16. Pages intérieures — Événements
  17. Footer
  18. Utilitaires
  19. Responsive
=======================================================
*/


/* =======================================================
   1. VARIABLES & RESET
   Pour changer une couleur globale → modifier ici.
   Toute la charte est pilotée depuis ces variables.
   ======================================================= */

:root {
  /* Couleurs */
  --color-bg:        #f5f2ed;   /* Fond principal ivoire */
  --color-bg-soft:   #efebe5;   /* Fond secondaire légèrement plus sombre */
  --color-surface:   #fbf9f6;   /* Surface de carte, fond blanc cassé */
  --color-dark:      #1f1d1a;   /* Texte principal, sections sombres */
  --color-dark-mid:  #2a2724;   /* Sections sombres intermédiaires */
  --color-muted:     #7a7268;   /* Texte secondaire, labels */
  --color-line:      rgba(31, 29, 26, 0.12); /* Séparateurs */
  --color-accent:    #b18b57;   /* Or — couleur d'accentuation */

  /* Typographie */
  --font-display: 'Cormorant Garamond', serif; /* Titres, logo */
  --font-body:    'Inter', sans-serif;          /* Corps de texte, navigation */

  /* Mise en page */
  --max-width:    1440px;
  --gutter:       40px;   /* Marge horizontale principale */
  --gutter-sm:    24px;   /* Marge horizontale mobile */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Conteneur principal — centre le contenu sur grands écrans */
.site-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-surface);
}


/* =======================================================
   2. TYPOGRAPHIE
   Hiérarchie visuelle :
   - .display  → grands titres hero (Cormorant, 56–88px)
   - .title     → titres de section (Cormorant, 40–60px)
   - .kicker    → labels de section (Inter caps, 11px)
   - .eyebrow   → surtitre hero (Inter caps, 11px)
   ======================================================= */

.display {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 400;
  line-height: 1;
  margin: 0;
}

.subtitle {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 300;
  line-height: 1.05;
  color: #5f5346;
  margin: 0;
}

.kicker {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 22px;
}

.body-text {
  font-size: 16px;
  line-height: 1.75;
  color: #62584c;
}

.small-text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}


/* =======================================================
   3. BOUTONS
   Deux variantes :
   - .btn-primary  → bordure or, hover léger
   - .btn-ghost    → bordure sombre, pour fonds clairs
   ======================================================= */

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  white-space: nowrap;
}

/* Bouton or — sur fonds clairs et sombres */
.btn-primary {
  border: 1px solid rgba(177, 139, 87, 0.45);
  color: var(--color-dark);
}

.btn-primary:hover {
  border-color: rgba(177, 139, 87, 0.8);
  background: rgba(177, 139, 87, 0.06);
}

/* Bouton sur fond sombre — texte clair */
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  white-space: nowrap;
  border: 1px solid rgba(177, 139, 87, 0.5);
  color: #f5f2ed;
}

.btn-light:hover {
  border-color: rgba(177, 139, 87, 0.9);
  background: rgba(177, 139, 87, 0.08);
}

/* Lien texte avec soulignement */
.link-text {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.link-text:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}


/* =======================================================
   4. HEADER & NAVIGATION
   Structure : nav-gauche | logo centré | nav-droite
   Position sticky — reste visible au scroll.
   ======================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  /* Pas de backdrop-filter direct : créerait un stacking context
     qui emprisonnerait les éléments fixed enfants (mobile-menu).
     Le blur est appliqué via ::before pour éviter ce problème. */
  background: transparent;
  border-bottom: 1px solid var(--color-line);
}

/* Blur appliqué sur pseudo-élément — ne crée pas de stacking context */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(251, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  min-height: 78px;
}

/* Navigation links */
.site-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-nav a:hover,
.site-nav a.current {
  color: var(--color-dark);
}

/* Navigation droite — alignée à droite */
.site-nav--right {
  justify-content: flex-end;
}

/* Logo centré */
.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-logo-img {
  display: block;
  width: auto !important;
  height: 40px;
  object-fit: contain;
}


/* =======================================================
   5. HERO (Homepage)
   Grille 2 colonnes : texte | image
   ======================================================= */

.hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  min-height: 78svh;
  border-bottom: 1px solid var(--color-line);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 56px 80px var(--gutter);
  background: linear-gradient(180deg, #faf8f4 0%, #f3eee8 100%);
}

.hero-copy .display {
  margin-bottom: 16px;
}

.hero-copy .subtitle {
  margin-top: 16px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap;
}

/* Stats sous le CTA hero */
.hero-proof {
  display: flex;
  gap: 40px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}

.proof-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero-media {
  min-height: 560px;
  background: #ece6de;
  overflow: hidden;
}


/* =======================================================
   6. SECTION COLLECTIONS
   Grille 3 cartes catégories : Bagues | Colliers | Boucles
   ======================================================= */

.section-collections {
  padding: 72px var(--gutter);
  background: var(--color-surface);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 34px;
}

/* Grille des 3 catégories */
.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.category-card {
  display: block;
  color: inherit;
}

.category-media {
  aspect-ratio: 0.9 / 1;
  overflow: hidden;
  background: #ede7de;
}

.category-media img {
  transition: transform 240ms ease;
}

.category-card:hover .category-media img {
  transform: scale(1.02);
}

.category-body {
  padding: 18px 4px 0;
  text-align: center;
}

.category-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
}


/* =======================================================
   7. SECTION HAUTE JOAILLERIE (feature)
   Grille 2 colonnes : image | texte
   ======================================================= */

.section-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: #f7f3ee;
}

.feature-media {
  min-height: 520px;
  background: #ebe4da;
  overflow: hidden;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--gutter);
}

.feature-copy .title {
  margin-bottom: 18px;
}

.feature-text {
  margin: 0 0 28px;
  max-width: 420px;
}


/* =======================================================
   8. SECTION L'ATELIER
   Grille 2 colonnes : texte | image
   ======================================================= */

.section-atelier {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.atelier-copy {
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.atelier-text {
  margin: 18px 0 28px;
  max-width: 360px;
}

.atelier-media {
  min-height: 460px;
  background: #d8d0c6;
  overflow: hidden;
}


/* =======================================================
   9. SECTION SUR MESURE
   Fond sombre, centré, CTA unique
   ======================================================= */

.section-sur-mesure {
  padding: 96px var(--gutter);
  background: var(--color-dark-mid);
  text-align: center;
  color: #f5f2ed;
}

.sur-mesure-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sur-mesure-inner .kicker {
  color: var(--color-accent);
  margin-bottom: 16px;
}

.sur-mesure-inner .title {
  color: #f5f2ed;
  margin-bottom: 16px;
}

.sur-mesure-text {
  font-size: 16px;
  color: rgba(245, 242, 237, 0.6);
  line-height: 1.75;
  margin: 0 0 32px;
  font-weight: 300;
}


/* =======================================================
   10. SECTION ÉVÉNEMENTS
   Fond noir, grille 2 cartes
   ======================================================= */

.section-events {
  padding: 72px var(--gutter);
  background: var(--color-dark);
  color: #f5f2ed;
}

.section-events .kicker {
  color: var(--color-accent);
}

.section-events .title {
  color: #f5f2ed;
  margin-bottom: 40px;
}

/* Grille événements — séparateur 1px entre les cartes */
.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Un seul événement — pleine largeur */
.events-grid--single {
  grid-template-columns: 1fr;
  max-width: 640px;
  background: transparent;
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 32px;
  background: var(--color-dark);
  color: #f5f2ed;
  transition: background 160ms ease;
}

.event-card:hover {
  background: #2a2724;
}

.event-card-img {
  margin: -36px -32px 16px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.event-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.event-card:hover .event-card-img img {
  transform: scale(1.02);
}


  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.event-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  color: #f5f2ed;
}

.event-location {
  font-size: 12px;
  color: rgba(245, 242, 237, 0.4);
  letter-spacing: 0.08em;
}

.event-link {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* =======================================================
   11. SECTION JOURNAL (homepage)
   Grille 3 articles — premier plus large
   ======================================================= */

.section-journal {
  padding: 72px var(--gutter);
  background: var(--color-surface);
}

.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 34px;
}

/* Grille 3 colonnes, première plus large */
.journal-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
}

.article-card {
  display: block;
  color: inherit;
}

.article-media {
  overflow: hidden;
  background: #ede7de;
}

.article-media--large { aspect-ratio: 4 / 3; }
.article-media--small { aspect-ratio: 1 / 1; }

.article-media img {
  transition: transform 240ms ease;
}

.article-card:hover .article-media img {
  transform: scale(1.02);
}

.article-body {
  padding: 16px 0 0;
}

.article-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 8px;
}

.article-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  color: var(--color-dark);
}


/* =======================================================
   12. PAGES INTÉRIEURES — GALERIE
   Page listant les pièces d'une catégorie.
   Grille 2 ou 3 colonnes selon le nombre de pièces.
   ======================================================= */

/* En-tête de page intérieure */
.page-header {
  padding: 72px var(--gutter) 48px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.page-header .kicker {
  margin-bottom: 12px;
}

.page-header .title {
  margin-bottom: 16px;
}

.page-header-desc {
  font-size: 16px;
  color: var(--color-muted);
  max-width: 480px;
  line-height: 1.75;
}

/* Grille produits */
.gallery-section {
  padding: 56px var(--gutter) 80px;
  background: var(--color-surface);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 22px;
}

/* Carte bijou individuelle */
.piece-card {
  display: block;
  color: inherit;
}

.piece-media {
  aspect-ratio: 0.85 / 1;
  overflow: hidden;
  background: #ede7de;
  margin-bottom: 16px;
}

.piece-media img {
  transition: transform 300ms ease;
}

.piece-card:hover .piece-media img {
  transform: scale(1.03);
}

.piece-body {
  padding: 0 4px;
}

.piece-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 6px;
}

.piece-materials {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.piece-cta {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid rgba(177, 139, 87, 0.3);
  padding-bottom: 2px;
  display: inline-block;
}


/* =======================================================
   13. PAGES INTÉRIEURES — ARTICLE JOURNAL
   Template single post WordPress (single-journal.php)
   ======================================================= */

.article-header {
  padding: 72px var(--gutter) 48px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.article-header .article-tag {
  margin-bottom: 20px;
}

.article-header .title {
  margin-bottom: 20px;
}

.article-header-meta {
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.08em;
}

.article-hero-media {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #ede7de;
  margin-bottom: 64px;
}

.article-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

/* Styles pour le contenu Gutenberg */
.article-content p {
  font-size: 17px;
  line-height: 1.8;
  color: #3a332b;
  margin-bottom: 28px;
}

.article-content h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  margin: 48px 0 20px;
  color: var(--color-dark);
}

.article-content h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin: 36px 0 16px;
  color: var(--color-dark);
}

.article-content blockquote {
  border-left: 2px solid var(--color-accent);
  margin: 36px 0;
  padding: 0 0 0 28px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  color: #5f5346;
  line-height: 1.4;
}

.article-content img {
  width: 100%;
  height: auto;
  margin: 36px 0;
}


/* =======================================================
   14. PAGE SUR MESURE — FORMULAIRE
   ======================================================= */

.sur-mesure-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

.sur-mesure-left {
  padding: 80px var(--gutter);
  background: #f7f3ee;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sur-mesure-left .kicker {
  margin-bottom: 20px;
}

.sur-mesure-left .title {
  margin-bottom: 24px;
}

.sur-mesure-steps {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-accent);
  line-height: 1;
  min-width: 24px;
}

.step-label {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
}

.sur-mesure-right {
  padding: 80px var(--gutter);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Formulaire de contact */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-dark);
  outline: none;
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  border-radius: 0; /* Pas de bordures arrondies — design premium */
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-accent);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}


/* =======================================================
   15. PAGE L'ATELIER
   ======================================================= */

.atelier-page-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  border-bottom: 1px solid var(--color-line);
}

.atelier-page-media {
  background: #d8d0c6;
  overflow: hidden;
}

.atelier-page-copy {
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f7f3ee;
}

.atelier-page-copy .kicker { margin-bottom: 16px; }
.atelier-page-copy .title { margin-bottom: 24px; }

/* Section signature — citation de l'artisan */
.atelier-quote {
  padding: 80px var(--gutter);
  background: var(--color-dark);
  text-align: center;
}

.atelier-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  font-style: italic;
  color: #f5f2ed;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.3;
}

.atelier-quote cite {
  display: block;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-style: normal;
}


/* =======================================================
   16. PAGE ÉVÉNEMENTS
   ======================================================= */

.events-page {
  padding: 72px var(--gutter) 96px;
  background: var(--color-surface);
}

.events-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.event-page-card {
  border: 1px solid var(--color-line);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 160ms ease;
}

.event-page-card:hover {
  border-color: rgba(177, 139, 87, 0.4);
}

.event-page-card .event-date     { color: var(--color-accent); }
.event-page-card .event-title    { color: var(--color-dark); }
.event-page-card .event-location { color: var(--color-muted); }

/* Image optionnelle en haut de la carte */
.event-page-img {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  margin: -40px -36px 8px;
  background: var(--color-bg-soft);
}

.event-page-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.event-page-card:hover .event-page-img img {
  transform: scale(1.02);
}

/* Événement passé — légèrement atténué */
.event-page-card--past {
  opacity: 0.6;
}

.event-page-card--past .event-date::after {
  content: ' — Passé';
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}


/* =======================================================
   17. FOOTER
   Grille 4 colonnes : marque | collections | maison | contact
   ======================================================= */

.site-footer {
  padding: 56px var(--gutter) 32px;
  background: #f6f1eb;
  border-top: 1px solid var(--color-line);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-line);
}

.footer-brand .footer-logo {
  justify-content: flex-start;
}

.footer-brand .footer-logo img {
  height: 32px;
  width: auto;
}

.footer-tagline {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.8;
  max-width: 220px;
}

.footer-col h4 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 500;
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 8px;
  transition: color 160ms ease;
}

.footer-col a:hover {
  color: var(--color-dark);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--color-muted);
}


/* =======================================================
   18. UTILITAIRES
   Classes réutilisables dans tous les templates.
   ======================================================= */

/* Séparateur horizontal */
.divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

/* Masquer visuellement mais garder pour les lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fond sombre — texte clair */
.bg-dark { background: var(--color-dark); color: #f5f2ed; }
.bg-dark .kicker { color: var(--color-accent); }

/* Accent color */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-muted); }


/* =======================================================
   19. RESPONSIVE
   Breakpoints :
   - 1100px → tablette large, grilles en 1 colonne
   - 760px  → mobile, nav repliée, layout vertical
   ======================================================= */

@media (max-width: 1100px) {
  :root { --gutter: var(--gutter-sm); }

  .hero                 { grid-template-columns: 1fr; }
  .hero-copy            { padding: 56px var(--gutter-sm) 32px; }
  .hero-media           { min-height: 420px; }

  .section-feature,
  .section-atelier,
  .sur-mesure-page,
  .atelier-page-hero    { grid-template-columns: 1fr; }

  .feature-copy,
  .atelier-copy,
  .sur-mesure-left,
  .sur-mesure-right,
  .atelier-page-copy    { padding: 48px var(--gutter-sm); }

  .feature-media,
  .atelier-media,
  .atelier-page-media   { min-height: 360px; }

  .category-grid        { grid-template-columns: repeat(3, 1fr); }

  .journal-grid,
  .gallery-grid,
  .events-grid,
  .events-page-grid     { grid-template-columns: 1fr 1fr; }

  .footer-top           { grid-template-columns: 1fr 1fr; gap: 24px; }

  .site-nav             { gap: 18px; font-size: 10px; }
}

@media (max-width: 760px) {
  .header-inner {
    grid-template-columns: 52px 1fr 52px;
    padding: 14px 16px;
  }

  .site-logo            { order: unset; font-size: unset; }

  .category-grid        { grid-template-columns: repeat(2, 1fr); }

  .journal-grid,
  .gallery-grid,
  .events-grid,
  .events-page-grid     { grid-template-columns: 1fr; }

  .hero-proof           { flex-wrap: wrap; gap: 24px; }

  .footer-top           { grid-template-columns: 1fr; }
  .footer-bottom        { flex-direction: column; text-align: center; }
}


/* =======================================================
   20. JOURNAL — ARCHIVE (home.php)
   Page listant tous les articles avec filtres catégories.
   ======================================================= */

/* Barre de filtres catégories */
.journal-filters {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.journal-filters-inner {
  display: flex;
  gap: 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.journal-filters-inner::-webkit-scrollbar { display: none; }

.journal-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 18px 24px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.journal-filter-btn:hover {
  color: var(--color-dark);
}

.journal-filter-btn.active {
  color: var(--color-dark);
  border-bottom-color: var(--color-accent);
}

/* Section archive */
.journal-archive {
  padding: 56px var(--gutter) 96px;
  background: var(--color-surface);
}

/* Grille : premier article en grand, reste en 3 colonnes */
.journal-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 22px;
}

/* Article lead — pleine largeur */
.article-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 40px;
}

.article-lead .article-card-link {
  display: contents;
}

.article-media--lead {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ede7de;
}

.article-lead .article-body {
  padding: 0 0 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-lead .article-title {
  font-size: clamp(28px, 3vw, 44px);
  margin: 12px 0 16px;
}

.article-excerpt {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0 0 20px;
}

/* Lien card */
.article-card-link {
  display: block;
  color: inherit;
}

.article-card-link:hover .article-media img {
  transform: scale(1.02);
}

/* Métadonnées article */
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.article-date {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.05em;
}

/* Lire → */
.article-read-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Placeholder image manquante */
.article-media-placeholder {
  width: 100%;
  height: 100%;
  background: #ede7de;
}

/* Pagination */
.journal-pagination {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: center;
}

.journal-pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.journal-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--color-muted);
  border: 1px solid transparent;
  transition: all 160ms ease;
}

.journal-pagination .page-numbers.current,
.journal-pagination .page-numbers:hover {
  border-color: var(--color-line);
  color: var(--color-dark);
}

.journal-pagination .page-numbers.current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* État vide */
.journal-empty {
  padding: 80px 0;
  text-align: center;
}

/* Responsive journal */
@media (max-width: 1100px) {
  .journal-archive-grid  { grid-template-columns: repeat(2, 1fr); }
  .article-lead          { grid-template-columns: 1fr; }
  .article-lead .article-body { padding: 24px 0 0; }
}

@media (max-width: 760px) {
  .journal-archive-grid  { grid-template-columns: 1fr; }
  .journal-filters-inner { padding: 0 var(--gutter-sm); }
}


/* =======================================================
   21. FIL D'ARIANE (BREADCRUMB)
   Style cible : Accueil › Collections › Bagues
   - Texte couleur normale (pas muted, pas caps)
   - Séparateur › entre chaque niveau
   - Lien cliquable sauf dernier item
   ======================================================= */

.breadcrumb {
  padding: 12px var(--gutter);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

nav.breadcrumb div.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Chaque élément */
nav.breadcrumb span.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  line-height: 1;
}

/* Séparateur › — injecté entre chaque item */
nav.breadcrumb div.breadcrumb-list .breadcrumb-sep {
  display: inline-block;
  margin: 0 8px;
  font-size: 11px;
  color: var(--color-muted);
  opacity: 0.4;
  font-style: normal;
  font-weight: 300;
  vertical-align: middle;
}

/* Liens — même couleur que le texte muted */
nav.breadcrumb span.breadcrumb-item a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

nav.breadcrumb span.breadcrumb-item a:hover {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Page courante — texte sombre, non cliquable */
nav.breadcrumb span.breadcrumb-item[aria-current="page"] {
  color: var(--color-dark);
  font-weight: 400;
}

@media (max-width: 760px) {
  .breadcrumb { padding: 10px var(--gutter-sm); }
  nav.breadcrumb span.breadcrumb-item { font-size: 12px; }
}




/* =======================================================
   22. HEADER MOBILE — hamburger + layout
   ======================================================= */

/* Hamburger — cercle fin premium */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: none;
  cursor: pointer;
  color: var(--color-dark);
  padding: 0;
  flex-shrink: 0;
  transition: border-color 160ms ease;
}

.nav-hamburger:hover {
  border-color: var(--color-muted);
}

/* Layout header mobile — grille stricte 3 colonnes */
@media (max-width: 900px) {
  .site-nav       { display: none !important; }
  .nav-hamburger  { display: flex !important; }

  .header-inner {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    padding: 14px 16px;
    min-height: 72px;
    gap: 0;
  }

  .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
  }

  .site-logo {
    grid-column: 2;
    justify-self: center;
  }

  .site-logo-img {
    height: 44px;
    width: auto !important;
  }

  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
  }
}


/* =======================================================
   23. MENU MOBILE — panneau slide depuis la gauche
   ======================================================= */

/* Overlay — plein écran derrière le panneau */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(31, 29, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.menu-open .mobile-overlay,
body.menu-open .mobile-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Panneau principal — plein écran depuis le haut */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80vw;
  max-width: 320px;
  z-index: 9999;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 320ms;
  overflow: hidden;
}

/* Barre admin WordPress */
.admin-bar .mobile-menu { top: 46px; }
@media screen and (min-width: 783px) {
  .admin-bar .mobile-menu { top: 32px; }
}

.menu-open .mobile-menu,
body.menu-open .mobile-menu {
  transform: translateX(0);
  visibility: visible;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* ── En-tête panneau : logo + fermeture ── */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-line);
  flex-shrink: 0;
}

.mobile-menu-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 0.9;
}

.mobile-menu-logo span {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 5px;
}

/* Bouton fermer — cercle fin premium */
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: none;
  cursor: pointer;
  color: var(--color-dark);
  padding: 0;
  flex-shrink: 0;
  transition: border-color 160ms ease, color 160ms ease;
}

.mobile-menu-close:hover {
  border-color: var(--color-muted);
}

/* ── Navigation avec icônes ── */
.mobile-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--color-line);
}

.mobile-nav-item:first-child {
  border-top: none;
}

.mobile-nav-item a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  color: var(--color-dark);
  text-decoration: none;
  transition: background 160ms ease;
}

.mobile-nav-item a:hover,
.mobile-nav-item a:active {
  background: var(--color-bg-soft);
}

.mobile-nav-item.current-menu-item a {
  color: var(--color-accent);
}

/* Icône SVG */
.mobile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  flex-shrink: 0;
  color: var(--color-dark);
  transition: background 160ms ease;
}

.mobile-nav-item a:hover .mobile-nav-icon {
  background: var(--color-bg-soft);
}

.mobile-nav-item.current-menu-item .mobile-nav-icon {
  color: var(--color-accent);
}

/* Label */
.mobile-nav-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 400;
}

/* ── Image ambiance en bas ── */
.mobile-menu-image {
  flex-shrink: 0;
  height: 160px;
  overflow: hidden;
}

.mobile-menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Filtre léger pour ne pas distraire */
  filter: brightness(0.85) saturate(0.9);
}


/* =======================================================
   24. HEADER — left / centre / right + icône sélection
   ======================================================= */

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right { justify-content: flex-end; }

#nn-sel-icon {
  position: relative;
  display: none;
  align-items: center;
  color: var(--color-dark);
  text-decoration: none;
  transition: color 160ms ease;
}

#nn-sel-icon:hover { color: var(--color-accent); }

#nn-sel-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* =======================================================
   25. FICHES BIJOUX — double CTA
   ======================================================= */

.piece-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.piece-vendue {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.piece-select-link {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.piece-select-link:hover { color: var(--color-dark); }
.piece-select-link.selected { color: var(--color-accent); }


/* =======================================================
   26. BANDEAU SÉLECTION — page contact
   ======================================================= */

.nn-selection-banner {
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--color-bg-soft);
  border-left: 2px solid var(--color-accent);
}

.nn-selection-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 14px;
}

.nn-selection-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nn-selection-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nn-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-muted);
  transition: color 160ms ease;
}

.nn-remove-btn:hover { color: var(--color-dark); }

.nn-selection-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-bg);
}

.nn-selection-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nn-selection-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-dark);
  flex: 1;
}

.nn-selection-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.nn-add-more {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 139, 87, 0.35);
  padding-bottom: 2px;
  transition: border-color 160ms ease;
}

.nn-add-more:hover { border-color: var(--color-accent); }

.nn-clear-btn {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.nn-clear-btn:hover { color: var(--color-dark); }


/* =======================================================
   27. TOAST
   ======================================================= */

.nn-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-dark);
  color: #f5f2ed;
  padding: 11px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 9999;
  white-space: nowrap;
}

.nn-toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Confirmation formulaire */
.form-confirmation { padding: 40px 0; }


/* =======================================================
   28. PAGES LÉGALES (confidentialité, mentions légales)
   ======================================================= */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

.legal-header {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 48px;
}

.legal-date {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 16px;
  letter-spacing: 0.05em;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-dark);
  margin: 48px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.legal-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-dark);
  margin: 32px 0 12px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #3a332b;
  margin-bottom: 20px;
}

.legal-content ul {
  margin: 0 0 20px 20px;
  padding: 0;
}

.legal-content ul li {
  font-size: 15px;
  line-height: 1.8;
  color: #3a332b;
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content strong {
  font-weight: 500;
  color: var(--color-dark);
}


/* =======================================================
   29. FORMULAIRE CONTACT — Case RGPD
   ======================================================= */

.form-rgpd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}

.form-rgpd input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.form-rgpd label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
  cursor: pointer;
}

.form-rgpd label a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}