/* ==========================================================================
   Chez Balzac — Styles communs aux pages intérieures
   ========================================================================== */

/* === LIEN ACTIF DANS LA NAV === */
.header-nav a.nav-active {
  color: var(--kaki-text); /* header sur fond --blanc : --kaki seul ne passe pas 4.5:1 */
  border-bottom: 1px solid var(--kaki-text);
  padding-bottom: 1px;
}

/* === TITRE DE PAGE === */
.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-serif);
  color: var(--prune);
  margin-bottom: var(--s-5);
}

.page-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--prune);
  max-width: 520px;
}
.page-lead + .page-lead { margin-top: var(--s-4); }

/* ============================================================
   INTRO ÉDITORIALE (hero alternatif — pas de photo full-bleed)
   ============================================================ */

.page-intro {
  background: var(--blanc);
  padding: var(--s-10) var(--s-8);
  border-bottom: 1px solid var(--beige);
}

.page-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.page-intro-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--beige);
  box-shadow: var(--shadow-paper);
}
.page-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(8%) saturate(80%);
}

/* ============================================================
   ATLAS — carte des lieux de fabrication (page Collections)
   ============================================================ */

.atlas {
  background: var(--blanc);
  padding: var(--s-10) var(--s-8);
  border-bottom: 1px solid var(--beige);
}

.atlas-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Panneau : le lieu choisi et ses marques */
.atlas-panel {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--beige);
  min-height: 15rem;
}
.atlas-panel-hint,
.atlas-panel-note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tr-body);
  color: var(--prune-light);
}
.atlas-panel-eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--kaki-text);
  margin-bottom: var(--s-2);
}
.atlas-panel-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--prune);
  margin-bottom: var(--s-1);
}
.atlas-brands { margin-top: var(--s-4); }
.atlas-brand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--beige);
  text-decoration: none;
  color: var(--prune);
  transition: padding var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.atlas-brand::after {
  content: '→';
  font-family: var(--font-sans);
  color: var(--kaki-text);
  margin-left: auto;
}
.atlas-brand:hover { padding-left: var(--s-2); color: var(--prune-light); }
.atlas-brand-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.atlas-brand-detail {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-small);
  color: var(--kaki-text);
}

/* Cartes */
.atlas-maps { position: relative; }
.atlas-france,
.atlas-pays-map { position: relative; }
.atlas-svg { display: block; width: 100%; height: auto; }
.atlas-svg .dep {
  fill: var(--beige-light);
  stroke: var(--blanc);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.atlas-svg .dep.is-fab {
  fill: var(--beige);
  cursor: pointer;
  transition: fill var(--t-fast) var(--ease);
}
.atlas-svg .dep.is-fab:hover { fill: var(--kaki); }
.atlas-svg .dep.is-active,
.atlas-svg .dep.is-active:hover { fill: var(--prune-light); }

/* Repères : vrais boutons posés sur la carte */
.atlas-pin {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--prune);
  background: var(--blanc);
  border: 1px solid var(--prune);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.atlas-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.atlas-pin.is-active {
  background: var(--prune);
  color: var(--beige-light);
}
.atlas-pin:focus-visible { outline: 2px solid var(--kaki); outline-offset: 3px; }

/* Hors de France (Japon, Chine) : à part, sous la France, pour être transparents */
.atlas-ailleurs {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--s-6);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--beige);
}
.atlas-ailleurs-label {
  align-self: center;
  margin-right: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--kaki-text);
}
.atlas-pays-map { position: relative; width: 110px; }
.atlas-pays-name {
  margin-top: var(--s-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--prune);
  text-align: center;
}

/* ============================================================
   NOS CRÉATEURS — fiches des marques
   ============================================================ */

.createurs {
  background: var(--beige-light);
  padding: var(--s-10) var(--s-8);
}
.createurs .section-inner { max-width: 1000px; margin: 0 auto; }

.createurs-group {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--kaki-text);
  margin: var(--s-8) 0 var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--kaki);
}

.createur {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-7);
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--beige);
}
.createur.is-highlight { animation: createurFlash 1.8s var(--ease); }
@keyframes createurFlash {
  0%, 30% { background: var(--blanc); }
  100%    { background: transparent; }
}

.createur-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  align-self: start;
}
.createur-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(6%) saturate(82%);
}

.createur-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--prune);
  line-height: var(--lh-heading);
  margin-bottom: var(--s-4);
}
.createur-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  margin-bottom: var(--s-5);
}
.createur-meta dd { margin: 0; }
.createur-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--prune);
  max-width: 600px;
}
.createur-body + .createur-body { margin-top: var(--s-3); }
.createur-link {
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--prune-light);
  text-decoration: none;
  border-bottom: 1px solid var(--beige);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.createur-link:hover { color: var(--prune); border-color: var(--prune); }

/* Après les fiches (fond ivoire), le CTA repasse sur fond papier */
.createurs + .page-cta { background: var(--blanc); }

/* ============================================================
   CTA BAS DE PAGE
   ============================================================ */

.page-cta {
  background: var(--beige-light);
  padding: var(--s-10) var(--s-8);
  text-align: center;
}

.page-cta .section-eyebrow,
.page-cta .section-title { text-align: center; margin-left: auto; margin-right: auto; }
.page-cta .hairline { margin-left: auto; margin-right: auto; }

.page-cta-actions {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-7);
}

/* ============================================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .page-intro       { padding: var(--s-9) var(--s-6); }
  .atlas            { padding: var(--s-9) var(--s-6); }
  .createurs        { padding: var(--s-9) var(--s-6); }
  .atlas-inner      { gap: var(--s-7); }
  .page-cta         { padding: var(--s-9) var(--s-6); }

  .page-intro-inner { gap: var(--s-7); }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */

@media (max-width: 767px) {
  .page-intro       { padding: var(--s-8) var(--s-5); }
  .atlas            { padding: var(--s-8) var(--s-5); }
  .createurs        { padding: var(--s-8) var(--s-5); }

  /* Texte, puis carte, puis panneau : le panneau sort de sa colonne */
  .atlas-inner  { grid-template-columns: 1fr; gap: 0; }
  .atlas-text   { display: contents; }
  .atlas-maps   { order: 1; margin-top: var(--s-6); }
  .atlas-panel  { order: 2; min-height: 0; margin-top: var(--s-6); }
  .atlas-pin    { width: 26px; height: 26px; font-size: 0.7rem; }
  .atlas-pays-map { width: 90px; }
  .atlas-ailleurs { gap: var(--s-4); }

  .createur { grid-template-columns: 110px 1fr; gap: var(--s-5); padding: var(--s-6) 0; }
  .createur-name { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
  .createur-meta { gap: var(--s-2) var(--s-5); }

  .page-cta         { padding: var(--s-8) var(--s-5); }

  .page-intro-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .page-intro-image { aspect-ratio: 4 / 3; }

  .page-cta-actions { flex-direction: column; align-items: center; }
}