/* ═══════════════════════════════════════════════════════════════
 *  Page "Notre histoire" — reconstruction PHP pure
 *
 *  Specs prod extraites du DOM post-364 :
 *   - Desktop (≥1025px): layout 2 colonnes (texte 2fr / galerie 1fr)
 *     Galerie : scroll horizontal épinglé (sticky + JS)
 *   - Tablette (768-1024px): 1 colonne, alternance texte puis galerie empilée
 *   - Mobile (≤767px): 1 colonne, stack vertical
 *
 *  Typo inviolable : Anton (kickers) + Poppins (tout le reste).
 *  Aucun Roboto/Barlow/etc (harmonisation charte).
 *
 *  Contrainte créative : "Narration architecturale"
 *  La colonne droite reste épinglée (sticky) pendant que la gauche défile —
 *  scénographie muséale, pas un layout web générique.
 *
 *  Breakpoints : alignés avec la prod Elementor (1024/767).
 *    ≥1025px  = desktop (scroll horizontal actif)
 *    768-1024 = tablette (stack vertical, images 16/9)
 *    ≤767px   = mobile (stack vertical, images 16/10, CTA full-width)
 * ═══════════════════════════════════════════════════════════════ */

.page-notre-histoire {
  background: #FFFFFF;
  color: var(--color-ink);
  position: relative;
}

/* ─── Layout global ──────────────────────────────────────────────── */

.page-notre-histoire__layout {
  display: grid;
  grid-template-columns: 1fr;        /* mobile/tablette par défaut */
}

/* ═══════════════════════════════════════════════════════════════
 *  DESKTOP : 2 colonnes (≥1025px)
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  .page-notre-histoire__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 50/50 texte/images */
    max-width: 1570px;                /* content-width prod */
    margin-inline: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  COLONNE GAUCHE : contenu narratif
 * ═══════════════════════════════════════════════════════════════ */

.page-notre-histoire__content {
  padding-block: clamp(3rem, 10vw, 8rem);
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  min-width: 0;                      /* évite débordement dans grid child */
}

/* ─── Blocs narratifs ──────────────────────────────────────────── */

.page-notre-histoire__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* Kicker (surtitre Anton) */
.page-notre-histoire__kicker {
  display: inline-block;
  font-family: var(--font-display);      /* Anton */
  font-weight: var(--fw-regular);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

/* Titre principal (dual header : forte + light) */
.page-notre-histoire__titre {
  font-family: var(--font-body);
  line-height: 1.15;
  margin: 0;
  color: var(--color-ink);
  /* Empêche débordement de mots longs (ex: "internationales") sur mobile */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.page-notre-histoire__titre-fort {
  display: block;
  font-weight: var(--fw-extrabold);
  /* Max réduit de 3.25 → 2.75rem car la colonne est passée à 50% (était 66%) */
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--color-primary);
  margin-bottom: 0.25em;
  line-height: 1.1;
}

.page-notre-histoire__titre-light {
  display: block;
  font-weight: var(--fw-light);
  font-size: clamp(1.25rem, 2.25vw, 1.75rem);
  color: var(--color-ink);
  line-height: 1.25;
}

/* Titre secondaire (plus petit, pour bloc 2) */
.page-notre-histoire__titre--secondaire .page-notre-histoire__titre-light {
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  font-weight: var(--fw-regular);
}

/* ─── Contenu texte (WYSIWYG) ──────────────────────────────────── */

.page-notre-histoire__texte {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.75;
  color: var(--color-ink);
}

.page-notre-histoire__texte p {
  margin: 0 0 var(--space-m);
}

.page-notre-histoire__texte p:last-child {
  margin-bottom: 0;
}

.page-notre-histoire__texte h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  color: var(--color-primary);
  margin: var(--space-l) 0 var(--space-s);
  line-height: 1.3;
}

.page-notre-histoire__texte a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
  /* Évite les URLs longues qui cassent la grille mobile */
  word-break: break-word;
}

.page-notre-histoire__texte a:hover,
.page-notre-histoire__texte a:focus-visible {
  color: var(--color-ink);
}

.page-notre-histoire__texte strong,
.page-notre-histoire__texte b {
  font-weight: var(--fw-semibold);
}

/* ─── CTA "Découvrez nos Prestations" ──────────────────────────── */

.page-notre-histoire__cta-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-m);
}

.page-notre-histoire__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  padding: 0.875rem 1.75rem;
  color: #FFFFFF;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.page-notre-histoire__cta:hover,
.page-notre-histoire__cta:focus-visible {
  background: #FFFFFF;
  color: var(--color-primary);
  transform: translateY(-2px);
}

.page-notre-histoire__cta-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;                      /* évite compression si label long */
}

.page-notre-histoire__cta-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
 *  COLONNE DROITE : GALERIE
 *
 *  Par défaut (mobile + tablette) : images empilées verticalement,
 *  pleine largeur, ratios différents selon le breakpoint.
 *
 *  Desktop : scroll horizontal épinglé (voir media query plus bas).
 * ═══════════════════════════════════════════════════════════════ */

.page-notre-histoire__gallery {
  position: relative;
  min-width: 0;                        /* évite débordement dans grid child */
}

/* Viewport = conteneur qui clippe le track */
.page-notre-histoire__gallery-viewport {
  width: 100%;
}

/* Track = conteneur direct des slides */
.page-notre-histoire__gallery-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Slide individuelle */
.page-notre-histoire__slide {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;               /* mobile par défaut */
  overflow: hidden;
  background: #F0F0F0;                 /* placeholder pendant loading */
}

.page-notre-histoire__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Progress bar cachée hors desktop */
.page-notre-histoire__gallery-progress {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
 *  DESKTOP (≥1025px) : scroll horizontal épinglé
 *
 *  Technique :
 *   - .gallery a une hauteur calc(nbSlides × 100vh) — pilotée par JS
 *   - .gallery-viewport est position:sticky top:0 height:100vh
 *   - .gallery-track est flex row avec slides côte à côte
 *   - JS translate le track selon progression scroll dans .gallery
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

  .page-notre-histoire__gallery {
    /* Hauteur = nbSlides × 100vh. Si 0 ou 1 slide, pas d'effet scroll → hauteur auto. */
    height: calc(var(--slide-count, 5) * 100vh);
  }

  /* Edge case : 1 seule slide → pas de scroll horizontal, hauteur auto */
  .page-notre-histoire__gallery:has(> .page-notre-histoire__gallery-viewport > .page-notre-histoire__gallery-track > .page-notre-histoire__slide:only-child) {
    height: auto;
  }

  .page-notre-histoire__gallery:has(> .page-notre-histoire__gallery-viewport > .page-notre-histoire__gallery-track > .page-notre-histoire__slide:only-child) .page-notre-histoire__gallery-viewport {
    position: static;
    height: auto;
  }

  .page-notre-histoire__gallery-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  .page-notre-histoire__gallery-track {
    flex-direction: row;
    height: 100%;
    width: max-content;
    will-change: transform;
    /* Pas de transition CSS : le JS pilote via rAF (~16ms) — une transition
       de 60ms provoquerait des saccades car le JS écrase la valeur avant
       que la transition ait fini. */
  }

  .page-notre-histoire__slide {
    flex: 0 0 auto;
    /* Largeur pilotée par JS via --slide-width (= largeur réelle du viewport de galerie).
       Fallback pour le flash initial avant exécution JS :
       50vw borné par 785px (= 1570px × 1/2, la largeur max de la colonne). */
    width: var(--slide-width, min(50vw, 785px));
    height: 100%;
    aspect-ratio: auto;
    background: #F0F0F0;
  }

  /* Progress bar verticale à droite */
  .page-notre-histoire__gallery-progress {
    display: block;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    width: 2px;
    height: 120px;
    background: rgb(0 0 0 / 0.12);
    border-radius: 0;
    z-index: 5;
    pointer-events: none;
  }

  .page-notre-histoire__gallery-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;                         /* piloté par JS en inline-style */
    background: var(--color-primary);
    border-radius: 0;
    /* Transition très courte OK ici : la progress bar ne subit pas les mêmes
       updates continues que le track (on met à jour en pourcentage, transition
       vers la nouvelle valeur est fluide). */
    transition: height 80ms linear;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  TABLETTE (768-1024px) : stack vertical, images 16/9
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {

  .page-notre-histoire__content {
    padding-block: clamp(3rem, 8vw, 5rem);
    padding-inline: clamp(2rem, 5vw, 3rem);
  }

  .page-notre-histoire__slide {
    aspect-ratio: 16 / 9;
  }

  /* CTA centré en tablette (voulu UX : bloc indépendant, pas dans le flux texte) */
  .page-notre-histoire__cta-wrapper {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  MOBILE (≤767px) : stack vertical, CTA full-width
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .page-notre-histoire__content {
    padding-block: clamp(2rem, 8vw, 3.5rem);
    padding-inline: clamp(1rem, 5vw, 1.5rem);
  }

  /* Slide 16/10 en mobile (plus haut qu'en tablette, mieux pour portrait) */
  .page-notre-histoire__slide {
    aspect-ratio: 16 / 10;
  }

  /* CTA pleine largeur centré sur mobile */
  .page-notre-histoire__cta-wrapper {
    justify-content: center;
  }

  .page-notre-histoire__cta {
    width: 100%;
    justify-content: center;
  }

  /* Sur très petits écrans (<380px, iPhone SE), on réduit encore le titre */
  .page-notre-histoire__titre-fort {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  Accessibilité : prefers-reduced-motion
 *  → Désactive le scroll horizontal sur desktop (stack vertical comme mobile)
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .page-notre-histoire__cta {
    transition: none;
  }

  .page-notre-histoire__cta:hover,
  .page-notre-histoire__cta:focus-visible {
    transform: none;
  }

  /* Annule le scroll horizontal sur desktop + reset hauteur de gallery */
  @media (min-width: 1025px) {
    .page-notre-histoire__gallery {
      height: auto;
    }

    .page-notre-histoire__gallery-viewport {
      position: static;
      height: auto;
      overflow: visible;
    }

    .page-notre-histoire__gallery-track {
      flex-direction: column;
      width: 100%;
    }

    .page-notre-histoire__slide {
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;             /* portrait pour contraster la col texte */
    }

    .page-notre-histoire__gallery-progress {
      display: none;
    }
  }
}