/* ============================================================
   PAGE « À PROPOS » - a-propos.html
   Cinq sections : hero, engagements, chiffres clés, valeurs, CTA.
   Source : ui-system/other-screen/Bois-et-Braise-A-propos.zip (géométrie conservée),
   ramenée aux tokens du site : valeurs converties en px (base de conception de l'écran : 16 px),
   couleurs dérivées de tokens.css, rayons --r-*, une seule paire de polices.
   Classes préfixées `about-` (les noms de la source - .hero, .stats, .values, .cta -
   existent déjà sur la home) ; variables locales scopées à .about-page, jamais sur :root.
   ============================================================ */

.about-page {
  /* Échelle d'espacement de l'écran (grille de 8 px, fluide au-delà de 24 px) */
  --about-sp-1: 8px;
  --about-sp-2: 16px;
  --about-sp-3: 24px;
  --about-sp-4: clamp(16px, 1.6vw + 14px, 32px);
  --about-sp-5: clamp(24px, 2vw + 16px, 40px);
  --about-sp-6: clamp(28px, 2.4vw + 18px, 48px);
  --about-sp-7: clamp(32px, 3.2vw + 18px, 64px);
  --about-sp-8: clamp(40px, 4vw + 20px, 80px);
  --about-sp-9: clamp(48px, 5vw + 20px, 96px);
  --about-sp-10: clamp(56px, 6.5vw + 20px, 120px);

  --about-prose: 760px;    /* largeur de lecture (engagements, CTA) */

  /* Teintes pour fonds sombres, dérivées des tokens (aucun hex indépendant).
     La braise nue ne fait que 2,55:1 sur l'anthracite : mélangée à 35 % de papier elle passe à 5:1. */
  --about-accent-on-dark: var(--color-ember-on-dark); /* token global (tokens.css) */
  --about-text-on-dark: color-mix(in srgb, var(--color-paper) 85%, var(--color-ink));

  color: var(--color-text-muted);
}

/* Conteneur de l'écran : même bord que le reste du site (1440 px, gouttière commune). */
.about-container {
  width: 100%;
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}
.about-container--narrow { max-width: calc(var(--about-prose) + var(--container-padding-x) * 2); }

/* Titres : sérif de marque (H1-H3), couleur sapin */
/* :where() = spécificité nulle : les classes de titre (fonds sombres) gardent la main */
:where(.about-page) :is(h1, h2, h3) { color: var(--color-forest); letter-spacing: -0.01em; }

/* ============================================================
   FIL D'ARIANE
   Même position que sur le catalogue, la fiche produit, le panier, le contact et les pages légales :
   tout en haut du <main>, 24 px sous le header, sur la gouttière commune du site.
   ============================================================ */
.about-breadcrumb { padding-top: var(--page-top-gap); }

/* ============================================================
   1. HERO
   ============================================================ */
.about-hero { padding-block: var(--about-sp-7) var(--about-sp-10); }
.about-hero__container { display: flex; align-items: flex-start; gap: var(--about-sp-7); }

/* 638/588 ≈ 1,085 : ratio mesuré sur la maquette à 1440 px */
.about-hero__content { flex: 638 1 320px; display: flex; flex-direction: column; }
.about-hero__media { flex: 588 1 280px; display: flex; }


.about-hero__eyebrow {
  margin: 0 0 var(--eyebrow-title-gap);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ember);
}
.about-hero__title {
  max-width: 22ch;
  margin: 0 0 var(--about-sp-4);
  font-size: var(--fs-page-title);
  font-weight: 700;
  line-height: 1.15;
}
.about-hero__text { display: flex; flex-direction: column; gap: var(--about-sp-4); }
/* max-width en ch sur le paragraphe lui-même : sur le conteneur, « ch » se mesurerait à 12 px (html 75 %) */
.about-hero__paragraph { max-width: 46ch; margin: 0; font-size: var(--fs-lead); line-height: 1.7; }

.about-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 588 / 835;   /* ratio mesuré sur la maquette (portrait) */
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   2. ENGAGEMENTS
   ============================================================ */
.about-commitments { padding-block: var(--about-sp-10); background: var(--color-paper); }
.about-commitments__container { display: flex; flex-direction: column; align-items: center; gap: var(--about-sp-9); text-align: center; }
.about-commitment { display: flex; flex-direction: column; align-items: center; gap: var(--about-sp-3); }
.about-commitment__title { margin: 0; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.15; }
.about-commitment__text { max-width: 56ch; margin: 0; font-size: var(--fs-base); line-height: 1.8; }
.about-commitment__divider { width: 64px; height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-ember); opacity: 0.55; }

/* ============================================================
   3. CHIFFRES CLÉS
   ============================================================ */
.about-stats { padding-block: var(--about-sp-8); background: var(--color-ink); color: var(--about-text-on-dark); }
.about-stats__container { display: flex; flex-direction: column; align-items: center; gap: var(--about-sp-7); }
.about-stats__title { margin: 0; text-align: center; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.15; color: var(--color-paper); }
.about-stats__list { display: flex; align-items: stretch; justify-content: center; width: 100%; }

.about-stats__item {
  flex: 1 1 0%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--about-sp-1);
  padding-inline: var(--about-sp-4);
  border-left: 1px solid var(--color-wood);   /* filet vertical décoratif */
}
.about-stats__item:first-child { border-left: 0; }

.about-stats__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(36px, 3.4vw + 12px, 64px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--about-accent-on-dark);
  font-variant-numeric: tabular-nums;
  transition: text-shadow 600ms ease;
}
.about-stats__item.is-visible .about-stats__value {
  text-shadow: 0 0 16px color-mix(in srgb, var(--color-ember) 15%, transparent);
}
.about-stats__label { margin: 0; font-size: var(--fs-sm); text-align: center; color: color-mix(in srgb, var(--color-paper) 70%, var(--color-ink)); }

/* ============================================================
   4. VALEURS - manifeste en trois lignes (plus de cartes)
   Chaque valeur = un numéro, un mot en grand corps serif, un texte et une preuve concrète.
   Au survol (souris uniquement), la ligne se remplit de sapin et les deux autres s'effacent.
   Cercles concentriques en fond = coupe de tronc, discrète.
   ============================================================ */
.about-values {
  position: relative;
  overflow: clip;
  padding-block: var(--about-sp-10);
  --about-ring: color-mix(in srgb, var(--color-wood) 16%, transparent);
}
/* Cernes de croissance : deux trames de périodes différentes, centrées à des endroits différents → aspect organique */
.about-values::before {
  content: "";
  position: absolute;
  top: -260px; right: -260px;
  width: 760px; height: 760px;
  background:
    repeating-radial-gradient(circle at 46% 54%, transparent 0 17px, var(--about-ring) 17px 18px),
    repeating-radial-gradient(circle at 56% 44%, transparent 0 29px, var(--about-ring) 29px 30px);
  -webkit-mask: radial-gradient(circle, black 25%, transparent 68%);
          mask: radial-gradient(circle, black 25%, transparent 68%);
  pointer-events: none;
}
.about-values__container { position: relative; display: flex; flex-direction: column; gap: var(--about-sp-8); }

.about-values__intro { display: flex; flex-direction: column; gap: var(--eyebrow-title-gap); max-width: 640px; }
.about-values__eyebrow { margin: 0; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-ember); }
.about-values__title { margin: 0; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.15; }
.about-values__lead { margin: 0; font-size: var(--fs-lead); line-height: 1.6; }

.about-values__list { list-style: none; margin: 0; padding: 0; width: 100%; border-bottom: 1px solid var(--about-rule); }
.about-values__item { border-top: 1px solid var(--about-rule); }
.about-page { --about-rule: color-mix(in srgb, var(--color-wood) 45%, var(--color-cream)); }

.about-value {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(56px, 96px) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--about-sp-5);
  padding-block: var(--about-sp-7);
  transition: opacity 300ms ease;
}
/* Remplissage sapin : déborde jusqu'aux bords de la gouttière */
.about-value::before {
  content: "";
  position: absolute; z-index: -1;
  inset-block: 0; inset-inline: calc(-1 * var(--container-padding-x));
  background: var(--color-forest);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.16, 0.8, 0.24, 1);
}

.about-value__index {
  font-family: var(--font-serif);
  font-size: var(--fs-card-title);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-ember);
  transition: color 300ms ease;
}
.about-value__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.6vw, 84px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-forest);
  overflow-wrap: anywhere;
  transition: color 300ms ease, transform 420ms cubic-bezier(0.16, 0.8, 0.24, 1);
}
.about-value__body { display: flex; flex-direction: column; gap: var(--about-sp-3); max-width: 52ch; }
.about-value__text { margin: 0; font-size: var(--fs-base); line-height: 1.75; transition: color 300ms ease; }

/* Preuve : la promesse rattachée à un fait vérifiable sur le site */
.about-value__proof {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding-left: var(--about-sp-2);
  border-left: 2px solid var(--color-ember);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--color-ink);
  transition: color 300ms ease, border-color 300ms ease;
}
.about-value__proof-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-ember); transition: color 300ms ease; }

@media (hover: hover) and (pointer: fine) {
  .about-values__list:hover .about-value { opacity: 0.45; }
  .about-values__list:hover .about-value:hover { opacity: 1; }
  .about-value:hover::before { transform: scaleX(1); }
  .about-value:hover .about-value__index { color: var(--about-accent-on-dark); }
  .about-value:hover .about-value__name { color: var(--color-paper); }
  .about-value:hover .about-value__text { color: var(--about-text-on-dark); }
  .about-value:hover .about-value__proof { color: var(--color-paper); border-left-color: var(--about-accent-on-dark); }
  .about-value:hover .about-value__proof-label { color: var(--about-accent-on-dark); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-value:hover .about-value__name { transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-value, .about-value::before, .about-value__name { transition: none; }
}

/* ============================================================
   5. CTA FINAL
   ============================================================ */
/* Fond identique à la section de clôture de l'accueil (.winter-cta, css/home/section-cta.css) :
   sapin plein + deux motifs de cernes concentriques (bas-gauche / bas-droite) + grain fin en « soft-light ».
   Aucune image bitmap ; tout est dérivé des tokens. */
.about-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--about-sp-9);
  color: var(--color-paper);

  background-color: var(--color-forest);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    repeating-radial-gradient(
      circle at 6% 92%,
      color-mix(in srgb, var(--color-paper) 2.8%, transparent) 0px,
      color-mix(in srgb, var(--color-paper) 2.8%, transparent) 1px,
      transparent 1px,
      transparent 26px
    ),
    repeating-radial-gradient(
      circle at 94% 92%,
      color-mix(in srgb, var(--color-paper) 2.8%, transparent) 0px,
      color-mix(in srgb, var(--color-paper) 2.8%, transparent) 1px,
      transparent 1px,
      transparent 26px
    );
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
}

.about-cta__container { display: flex; flex-direction: column; align-items: center; gap: var(--about-sp-4); text-align: center; }
.about-cta__title { margin: 0; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.15; color: var(--color-paper); }
.about-cta__text { max-width: 52ch; margin: 0; font-size: var(--fs-lead); line-height: 1.7; color: var(--about-text-on-dark); }

.about-cta__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--about-sp-2);
  min-height: var(--btn-height);
  padding: 0 32px;
  border-radius: var(--r-control);
  background: var(--color-paper);
  color: var(--color-forest);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--color-ink) 18%, transparent);
  transition: box-shadow 240ms ease, background-color 180ms ease;
}
.about-cta__button:hover { background: var(--color-surface-dim); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-ink) 22%, transparent); }
.about-cta__button:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 3px; }
.about-cta__button-icon { display: inline-block; transition: transform 240ms ease; }

/* Mouvements de survol : uniquement si l'utilisateur n'a pas demandé de les réduire */
@media (prefers-reduced-motion: no-preference) {
  .about-cta__button:hover .about-cta__button-icon { transform: translateX(4px); }
}

/* ============================================================
   RESPONSIVE (du plus grand au plus petit)
   ============================================================ */
@media (min-width: 1600px) {
  .about-hero { padding-block: var(--about-sp-8) 160px; }
}

@media (max-width: 1024px) {
  .about-hero__container { gap: var(--about-sp-5); }
  .about-hero__content { flex-basis: 55%; }
  .about-hero__media { flex-basis: 40%; }
}

@media (max-width: 899px) {
  /* Valeurs : le texte passe sous le mot, aligné avec lui ; le numéro reste en marge */
  .about-value { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--about-sp-3); padding-block: var(--about-sp-6); }
  .about-value__index { grid-row: 1 / span 2; align-self: start; padding-top: 0.5em; }
  .about-value__body { grid-column: 2; }
}

@media (max-width: 767px) {
  /* Hero : colonne unique ; le portrait 588×835 écraserait le texte, l'image passe en paysage */
  .about-hero { padding-block: var(--about-sp-5) var(--about-sp-8); }
  .about-hero__container { flex-direction: column; align-items: stretch; gap: var(--about-sp-6); }
  /* flex-basis en px deviendrait une hauteur dans une colonne : on le neutralise */
  .about-hero__content, .about-hero__media { flex: 0 0 auto; }
  .about-hero__title, .about-hero__paragraph { max-width: none; }
  .about-hero__image { aspect-ratio: 4 / 3; object-position: center 55%; }

  .about-commitments__container { gap: var(--about-sp-7); }
  .about-commitment__text { max-width: 100%; }

  /* Chiffres : 4 colonnes → grille 2×2, filet horizontal entre les rangées */
  .about-stats__list { flex-wrap: wrap; row-gap: var(--about-sp-6); column-gap: var(--about-sp-4); }
  .about-stats__item { flex: 1 1 calc(50% - var(--about-sp-4) / 2); border-left: 0; border-top: 1px solid var(--color-wood); padding-block: var(--about-sp-4) 0; }
  .about-stats__item:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
  .about-stats__item:last-child:nth-child(odd) { flex-basis: 100%; } /* 3 chiffres (note masquée) : le dernier occupe toute la largeur */

}

@media (max-width: 576px) {
  .about-values::before { top: -200px; right: -240px; width: 520px; height: 520px; opacity: 0.6; }  /* cernes décalés hors du texte */
  .about-commitment__divider { width: 40px; }
  .about-cta__button { width: 100%; white-space: normal; text-align: center; padding: 12px 20px; }  /* nowrap + 32 px de marge : le libellé dépassait du bouton à 320 px */
}

/* Petit smartphone : les chiffres passent en une seule colonne (« origine contrôlée » ne doit pas se serrer) */
@media (max-width: 380px) {
  .about-stats__item { flex: 1 1 100%; border-top: 1px solid var(--color-wood); padding-block: var(--about-sp-4) 0; }
  .about-stats__item:first-child { border-top: 0; padding-top: 0; }
  .about-stats__item:nth-child(2) { border-top: 1px solid var(--color-wood); padding-top: var(--about-sp-4); }  /* annule la règle 2 x 2 (-n + 2), sinon pas de filet entre les chiffres 1 et 2 */
}