/* ============================================================
   BMH — apropos.css
   Sections spécifiques de la page À propos.
   Le chrome + les tokens viennent de produits.css (chargé avant).
   Même esprit graphique que home.css / produits.css (Inter, sage).
   ============================================================ */

/* ----- Boutons (repris de la home) ----- */
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: clamp(1.75rem, 4vh, 2.75rem); }
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 1.75rem; background: var(--sage); color: var(--bg);
  border-radius: var(--r-pill); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover { background: var(--sage-l); color: var(--ink); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::before { animation: btnSheen .8s cubic-bezier(.16,1,.3,1); }
@keyframes btnSheen { from { left: -75%; } to { left: 130%; } }
.btn-ghost {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem .5rem; color: var(--sage-l); font-weight: 500; font-size: .9375rem;
  transition: color var(--t-fast);
}
.btn-ghost::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover { color: var(--bg); }
.btn-ghost:hover::after { transform: scaleX(1); }

/* ----- Hero (titre À propos sur 3 lignes) ----- */
/* Hero À propos : 2 lignes, « Trois générations » en accent sauge léger (cohérent home/produits), sans italique */
.hero--produits h1 { line-height: 1.06; text-wrap: balance; }
.hero--produits h1 em { color: var(--sage); font-weight: 300; font-style: normal; }

/* ----- Stats ----- */
.stat { text-align: center; }

/* ----- Sections : en-têtes éditoriales ----- */
.ab-sec { padding: clamp(3.5rem, 7vw, 6.5rem) var(--pad-x); }
.ab-sec--bg { background: var(--bg); }
.ab-sec--light { background: var(--bg-light); }
.ab-inner { max-width: var(--container); margin-inline: auto; }
.ab-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.ab-eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--olive); margin-bottom: 1rem; }
.ab-title { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.ab-title em { color: var(--olive); font-weight: 300; font-style: normal; }
.ab-lead { margin-top: 1rem; color: var(--char); font-size: var(--fs-body); line-height: 1.6; }

/* ----- Histoire : chapitres alternés ----- */
.ab-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); }
.ab-chapter:first-of-type { margin-top: 0; }
.ab-chapter:nth-child(even) .ab-chapter-media { order: 2; }
.ab-chapter-media { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(26,31,23,.45); background: var(--bg-light); }
.ab-chapter-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.ab-chapter:hover .ab-chapter-media img { transform: scale(1.05); }
.ab-chapter-num { font-family: var(--ff-display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; color: var(--sage-l); line-height: 1; }
.ab-chapter-title { font-family: var(--ff-display); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--ink); margin: .4rem 0 1.25rem; letter-spacing: -.01em; }
.ab-chapter-title em { color: var(--olive); font-style: italic; font-weight: 400; }
.ab-chapter-body p { color: var(--char); line-height: 1.7; margin: 0 0 1rem; }
.ab-chapter-body p:last-child { margin-bottom: 0; }
.ab-dropcap { float: left; font-family: var(--ff-display); font-size: 3.4rem; line-height: .72; font-weight: 700; color: var(--olive); margin: .15rem .65rem 0 0; }
@media (max-width: 760px) {
  .ab-chapter { grid-template-columns: 1fr; gap: 1.5rem; }
  .ab-chapter:nth-child(even) .ab-chapter-media { order: 0; }
}

/* ----- Citation pleine largeur ----- */
.ab-pullquote { max-width: 680px; margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0; text-align: center; font-family: var(--ff-display); font-size: clamp(.88rem, .35vw + .78rem, 1.02rem); font-weight: 400; font-style: italic; line-height: 1.6; color: var(--stone); opacity: .85; }
.ab-pullquote em { color: var(--sage-d); font-style: italic; }

/* ----- Terroirs (cartes régions) ----- */
.terroir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.terroir-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid rgba(74,90,58,.16); border-radius: var(--r-card); padding: 1.6rem; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.terroir-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sage), var(--sage-l)); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.terroir-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(26,31,23,.28); border-color: rgba(74,90,58,.4); }
.terroir-card:hover::before { transform: scaleX(1); }
.terroir-num { font-family: var(--ff-display); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--sage-d); text-transform: uppercase; }
.terroir-name { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: .3rem 0 .15rem; letter-spacing: -.01em; }
.terroir-meta { font-size: .8rem; color: var(--stone); }
.terroir-meta em { font-style: italic; color: var(--sage-d); }
.terroir-tags { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(74,90,58,.13); font-size: .82rem; color: var(--char); line-height: 1.5; }
.terroir-alt { position: absolute; top: 1.3rem; right: 1.5rem; font-family: var(--ff-display); font-size: 1.05rem; font-weight: 700; color: var(--sage-l); opacity: .55; }
@media (max-width: 860px) { .terroir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .terroir-grid { grid-template-columns: 1fr; } }

/* ----- Terroirs : atlas (liste des villes à gauche · carte à droite) ----- */
.terroir-atlas { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.75rem, 4vw, 3.75rem); align-items: center; }
.terroir-list { list-style: none; margin: 0; padding: 0; }
.terroir-row {
  display: grid; grid-template-columns: 2rem 1fr; gap: .85rem; align-items: start;
  padding: 1rem .8rem; border-top: 1px solid rgba(74,90,58,.16); border-radius: 10px;
  transition: background var(--t-med), transform var(--t-med); cursor: pointer;
}
.terroir-list .terroir-row:last-child { border-bottom: 1px solid rgba(74,90,58,.16); }
.terroir-row-num { font-family: var(--ff-display); font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--sage-d); padding-top: .3rem; transition: color var(--t-med); }
.terroir-row-name { font-family: var(--ff-display); font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 600; color: var(--ink); margin: 0 0 .12rem; letter-spacing: -.01em; }
.terroir-row-meta { font-size: .8rem; color: var(--stone); margin: 0; }
.terroir-row-meta em { font-style: italic; color: var(--sage-d); }
.terroir-row-tags { font-size: .8rem; color: var(--char); margin: .35rem 0 0; line-height: 1.5; }
.terroir-row:hover, .terroir-row.is-active { background: rgba(138,155,117,.16); transform: translateX(4px); }
.terroir-row:hover .terroir-row-num, .terroir-row.is-active .terroir-row-num { color: var(--olive); }

/* carte (silhouette Albanie + pastilles i–vi) */
.terroir-map { display: flex; justify-content: center; margin: 0; padding: 0; }
.terroir-map-svg { width: auto; height: clamp(330px, 52vw, 430px); max-width: 100%; overflow: visible; filter: drop-shadow(0 20px 34px rgba(26,31,23,.18)); }
.terroir-atlas .terroir-map-svg { height: clamp(370px, 40vw, 500px); }
.terroir-map-shape { fill: url(#terroirLand); stroke: var(--sage-d); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.terroir-map-pin { cursor: pointer; }
.terroir-map-hit { fill: transparent; }                    /* zone tactile ≈44px (a11y) */
.terroir-map-dot { fill: var(--olive); stroke: var(--bg-light); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform var(--t-med), fill var(--t-med), stroke var(--t-med); }
.terroir-map-pin:hover .terroir-map-dot, .terroir-map-pin:focus-visible .terroir-map-dot { transform: scale(1.32); }
.terroir-map-pin:focus-visible .terroir-map-dot { stroke: var(--olive); stroke-width: 3; }
.terroir-map-pin.is-active .terroir-map-dot { transform: scale(1.5); fill: var(--sage-d); stroke: var(--olive); stroke-width: 2.5; }
.terroir-map-pin:focus-visible { outline: none; }
.terroir-map-pin .num { fill: var(--white); font-family: var(--ff-display); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.terroir-map-pin .lbl { fill: var(--ink); font-family: var(--ff-display); font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: var(--bg-light); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity var(--t-med); }
.terroir-map-pin:hover .lbl, .terroir-map-pin:focus-visible .lbl, .terroir-map-pin.is-active .lbl { opacity: 1; }
@media (max-width: 820px) {
  .terroir-atlas { grid-template-columns: 1fr; gap: 1.5rem; }
  .terroir-atlas .terroir-map { order: -1; }
  .terroir-atlas .terroir-map-svg { height: clamp(340px, 76vw, 410px); }
}
/* chiffres d'altitude alignés (tabular) */
.terroir-row-meta { font-variant-numeric: tabular-nums; }
/* respect du réglage « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  .terroir-row, .terroir-map-dot { transition: none; }
  .terroir-row:hover, .terroir-row.is-active { transform: none; }
  .terroir-map-pin:hover .terroir-map-dot,
  .terroir-map-pin:focus-visible .terroir-map-dot,
  .terroir-map-pin.is-active .terroir-map-dot { transform: none; }
}

/* ----- Principes (engagements) ----- */
.principes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.principe { background: var(--white); border: 1px solid rgba(74,90,58,.16); border-radius: var(--r-card); padding: 1.75rem 1.5rem; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.principe:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(26,31,23,.24); border-color: rgba(74,90,58,.4); }
.principe-num { font-family: var(--ff-display); font-size: .78rem; font-weight: 700; color: var(--sage-d); letter-spacing: .12em; }
.principe-title { font-family: var(--ff-display); font-size: 1.18rem; font-weight: 600; color: var(--ink); margin: .65rem 0 .6rem; letter-spacing: -.01em; }
.principe-title em { color: var(--olive); font-style: italic; font-weight: 400; }
.principe-desc { font-size: .9rem; color: var(--char); line-height: 1.65; }
@media (max-width: 900px) { .principes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .principes-grid { grid-template-columns: 1fr; } }

/* ----- Signature de clôture ----- */
.ab-signature { background: var(--bg-dark); color: var(--bg); padding: clamp(4rem, 8vw, 7rem) var(--pad-x); text-align: center; }
.ab-signature-inner { max-width: 720px; margin-inline: auto; }
.ab-signature-mark { display: block; font-size: 1.75rem; color: var(--sage-l); margin-bottom: .5rem; }
.ab-signature-title { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; margin: 0 0 1.25rem; color: var(--bg); letter-spacing: -.015em; }
.ab-signature-title em { color: var(--sage-l); font-style: italic; font-weight: 300; }
.ab-signature-text { color: var(--warm); font-size: var(--fs-body); line-height: 1.7; max-width: 60ch; margin: 0 auto; }
.ab-signature-sign { display: block; margin-top: 1.5rem; font-style: italic; color: var(--sage-l); font-size: .95rem; }