/* ============================================================
   STAT GRID — Chiffres clés (Qui sommes-nous)
   ============================================================ */
/* Trois chiffres depuis le 2026-08-09 — la carte « 2 / Gammes emblématiques »
   a été retirée. Les trois restantes se répartissent la largeur. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Les trois chiffres arrivent après le titre, de gauche à droite.
   PAS par transition-delay : .stat-item déclare plus bas son propre raccourci
   `transition` pour le survol, qui l'emporterait sur celui de .js-reveal.
   opacity n'y figurant pas, les trois cartes basculeraient ensemble et les
   délais ci-dessous ne feraient que retarder le soulèvement au survol — le
   défaut exact trouvé sur les cartes d'actualités. On passe donc par les
   images clés de style.css, qui échappent à transition-property.
   backwards, et non both : après l'animation la carte reprend ses valeurs
   déclarées, et le survol retrouve la main.

   600 / 730 / 860 ms : la partition de .pillars--after-title, aux mêmes
   valeurs, parce que c'est la même situation — un titre seul, puis trois
   blocs côte à côte. À 600 ms le titre est à 96,1 % d'opacité. */
.stat-item.js-reveal.is-visible {
  animation: mp-card-reveal 900ms var(--ease-out) backwards;
}

.stat-item.js-reveal:nth-child(1).is-visible { animation-delay: 600ms; }
.stat-item.js-reveal:nth-child(2).is-visible { animation-delay: 730ms; }
.stat-item.js-reveal:nth-child(3).is-visible { animation-delay: 860ms; }

/* Empilées ou sur deux colonnes, les cartes n'entrent plus dans le champ en
   même temps que le titre : le décalage de base se retournerait contre le
   visiteur. Seul le pas subsiste — même arbitrage que pour les piliers. */
@media (max-width: 900px) {
  .stat-item.js-reveal:nth-child(1).is-visible { animation-delay: 0ms; }
  .stat-item.js-reveal:nth-child(2).is-visible { animation-delay: 130ms; }
  .stat-item.js-reveal:nth-child(3).is-visible { animation-delay: 260ms; }
}

/* Mouvement réduit : aucune animation, la carte est simplement là. */
@media (prefers-reduced-motion: reduce) {
  .stat-item.js-reveal.is-visible {
    animation: none;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--spacing-xl) var(--spacing-lg);
  background: #fff;
  border: 1px solid rgba(203, 187, 160, 0.35);
  border-top: 3px solid var(--color-primary);
  border-radius: 12px;
  /* Plate au repos : l'ombre ne signale qu'un état, et celui-ci est le
     survol (ci-dessous). La transition reste — un box-shadow absent
     s'interpole depuis une ombre transparente de dimensions nulles, donc
     l'apparition au survol garde exactement sa douceur. */
  transition: box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}

.stat-item:hover {
  box-shadow: 0 8px 32px rgba(44, 31, 20, 0.12);
  transform: translateY(-3px);
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--color-accent-text);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

.stat-item__label {
  font-family: var(--font-hero);
  font-size: 0.675rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  display: block;
}

.stat-item__detail {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: var(--lh-body);
  margin-top: 0.5rem;
  max-width: none;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(203, 187, 160, 0.3);
}

/* ============================================================
   MISSION BLOCK — Citation de mission (Qui sommes-nous)
   ============================================================ */
.company-mission {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.company-mission .page-section__eyebrow {
  display: block;
}

.company-mission .page-section__title {
  max-width: none;
}

.company-mission__quote {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--color-text);
  line-height: 1.5;
  font-style: italic;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-lg);
  text-align: left;
  max-width: 60ch;
  margin: 0;
}

.company-mission__text {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: var(--lh-body);
  max-width: 58ch;
  margin-top: var(--spacing-lg);
}

/* NOTRE MISSION — quatre temps
     0 → 1200 ms   le sur-titre et le titre montent ;
     600 ms        la citation suit, le titre étant alors à 96,1 % ;
     1050 ms       le jaune balaie « le geste artisanal … à grande échelle » ;
     1700 ms       le paragraphe de conclusion ferme la section.

   POURQUOI LE SURLIGNAGE ATTEND 1050 ms
   La citation porte .js-reveal, et main.js allume son surlignage au même
   instant qu'elle — pas à la fin de son apparition. Sans délai propre, le
   balayage courrait donc sur un texte encore transparent : c'est le défaut
   qui avait été corrigé sur les titres de section. La citation part à 600 ms
   et dure 900 ms, la durée de base de .js-reveal ; elle est à 96,1 % à
   1050 ms. Ce délai est porté par .marker-wrap et non par la citation : celui
   de la citation ne retarde que sa propre opacité.

   POURQUOI LA CONCLUSION ATTEND 1700 ms
   L'intention d'origine est gardée — 300 ms de respiration après le
   surlignage — mais « après le surlignage » se mesure comme partout ailleurs
   sur le site : au moment où il est visuellement posé, pas à la fin de sa
   durée nominale. Le balayage dure 700 ms sur la même courbe --ease-out et
   atteint 95 % de sa largeur en 328 ms, soit 1378 ms ; plus 300 ms de
   respiration, 1700 ms (arrondi de 1678). Lire la durée nominale aurait donné
   2050 ms, c'est-à-dire une demi-seconde de vide sur une barre déjà tirée.

   Sous mouvement réduit ou sans script, transition-property vaut none : aucun
   de ces délais n'a d'effet, tout est là d'emblée. */
.company-mission__quote.js-reveal {
  transition-delay: 600ms;
}

.company-mission__quote.js-reveal .marker-wrap {
  transition-delay: 1050ms;
}

.company-mission__text.js-reveal {
  transition-delay: 1700ms;
}

/* ============================================================
   CAREER EMPTY STATE — Pas d'offre disponible (Carrières)
   ============================================================ */
.career-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.career-empty__icon {
  color: var(--color-primary);
  opacity: 0.6;
}

.career-empty__text {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: var(--lh-body);
  max-width: 52ch;
}

/* .marker-wrap styles déplacés dans style.css (chargé globalement) */


/* Hover doré sur 'Nous contacter' — sections Engagements et Qui sommes-nous */
[aria-labelledby="eng-cta-title"] .btn--filled:hover,
[aria-labelledby="eng-cta-title"] .btn--filled:focus-visible,
[aria-labelledby="qsn-cta-title"] .btn--filled:hover,
[aria-labelledby="qsn-cta-title"] .btn--filled:focus-visible {
  background: #EBB928;
  border-color: #EBB928;
  color: var(--color-text);
}

/* ============================================================
   PAGES ENGAGEMENTS & VALEURS — angles arrondis sur les visuels
   ============================================================ */
.page-template-page-nos-engagements .page-inline__image,
.page-template-page-nos-valeurs .page-inline__image {
  border-radius: 12px;
  overflow: hidden;
}

.page-template-page-nos-engagements .page-inline__image img,
.page-template-page-nos-valeurs .page-inline__image img {
  border-radius: 12px;
}

/* Sur téléphone les visuels vont d'un bord à l'autre (voir products.css) : un
   angle arrondi contre le bord de l'écran se lit comme un défaut d'affichage.
   Ces deux règles-ci sont plus spécifiques que la règle générale, il faut donc
   les reprendre ici pour que le palier s'applique. */
@media (max-width: 600px) {
  .page-template-page-nos-engagements .page-inline__image,
  .page-template-page-nos-valeurs .page-inline__image,
  .page-template-page-nos-engagements .page-inline__image img,
  .page-template-page-nos-valeurs .page-inline__image img {
    border-radius: 0;
  }
}