/* ============================================================
   HEKLA — Page Expertises
   ============================================================ */


/* ── Hero texte ─────────────────────────────────────────────── */
.exp-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(40px, 8vw, 160px);
  position: sticky;
  top: 0;
  z-index: 1;
}

.exp-hero__inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.exp-hero__text {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0;
  /* Masqué par défaut — expertises-page.js révèle après hekla:texts
     (évite le flash du vieux texte hardcodé avant injection API) */
  opacity: 0;
}

/* SplitType crée des .word inline-block — overflow masqué pour le reveal */
.exp-hero__text .word {
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   SECTION STRATÉGIE
══════════════════════════════════════════════════════════════ */

.exp-strat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: sticky;
  top: 0;
  z-index: 2;
  /* position: sticky + relative cohabitent — le logo absolu s'ancre au parent */
  isolation: isolate;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.exp-branding {
  z-index: 3;
}

.exp-architecture {
  z-index: 4;
}

/* ── Gauche : fond orange ───────────────────────────────────── */
.exp-strat__left {
  background: var(--c-orange, #F26322);
  display: flex;
  flex-direction: row;
}

/* Sidebar verticale — GAUCHE de la zone orange */
.exp-strat__sidebar {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
  border-right: 1px solid rgba(255,255,255,0.2);
}

/* "Poser un cap…" en haut, vertical */
.exp-strat__sidebar-label {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.4;
  text-align: left;
}

/* Groupe roue + "Stratégie" en bas */
.exp-strat__sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.exp-strat__sidebar-title {
  font-family: var(--f-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
}

.exp-strat__sidebar-wheel {
  width: 22px;
  height: 22px;
  opacity: 0.9;
  filter: invert(1);
}

/* Corps : intro + services */
.exp-strat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 56px) clamp(80px, 12vw, 140px);
}

/* Groupe intro en haut */
.exp-strat__body-top {
  display: flex;
  flex-direction: column;
}

.exp-strat__intro {
  font-family: var(--f-sans);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 20px;
}

.exp-strat__services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exp-strat__service {
  display: flex;
  flex-direction: column;
  padding: 11px 0;
  position: relative;          /* ancre les lignes absolues */
  border: none;                /* bordures remplacées par .exp-strat__service-line */
  transition: transform 0.25s ease;
  cursor: default;
}

/* Ligne animée — injectée par expertises-page.js */
.exp-strat__service-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: scaleX(0);
  transform-origin: left center;
}

.exp-strat__service-line--bottom {
  top: auto;
  bottom: 0;
}

.exp-strat__service:hover {
  transform: translateX(6px);
}

.exp-strat__service strong {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

.exp-strat__service span {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* ── Droite : photo + overlay ───────────────────────────────── */
.exp-strat__right {
  position: relative;
  overflow: hidden;
  background: #1A1814;
}

.exp-strat__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

/* Vidéo dans la zone droite */
.exp-strat__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* "Stratégie" en grand collé en haut — remplit 100% de la zone droite */
.exp-strat__big-title {
  position: absolute;
  top: -0.12em;
  left: 0;
  right: 0;
  font-family: var(--f-serif);
  font-size: 9.2vw;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  padding: 0;
  margin: 0; /* reset H2 default */
  pointer-events: none;
  z-index: 2;
}

/* Logo S — centré à la jointure des deux zones */
.exp-strat__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

.exp-strat__logo img {
  width: clamp(75px, 9vw, 120px);
  height: auto;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   VARIANTES COULEUR — Branding (rust) / Architecture (amber)
══════════════════════════════════════════════════════════════ */

/* ── Branding : fond rust ───────────────────────────────────── */
.exp-branding .exp-strat__left {
  background: var(--c-rust, #AC3C16);
}

/* ── Architecture : fond ember (sombre → texte blanc) ──────── */
.exp-architecture .exp-strat__left {
  background: var(--c-ember, #66140B);
}

/* ══════════════════════════════════════════════════════════════
   SECTION MORPHING
══════════════════════════════════════════════════════════════ */

.exp-morph {
  position: relative;
  z-index: 5;               /* passe au-dessus des sections sticky (max z-index 4) */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: var(--c-bg, #FAFAF8);
  padding: 0 clamp(40px, 8vw, 120px);
}

/* ── Colonne texte ──────────────────────────────────────────── */
.exp-morph__text {
  padding-right: clamp(24px, 4vw, 80px);
}

.exp-morph__title {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-orange, #f26322);
  margin: 0 0 clamp(24px, 3vw, 48px);
}

.exp-morph__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exp-morph__body p {
  font-family: var(--f-sans);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-text, #111110);
  margin: 0;
  max-width: 48ch;
}

/* ── Colonne forme ──────────────────────────────────────────── */
.exp-morph__shape {
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-morph__svg {
  width: clamp(180px, 38vw, 480px);
  height: auto;
  cursor: none;
}

/* ══════════════════════════════════════════════════════════════
   SECTION SYNERGY — photo gauche / texte droite
══════════════════════════════════════════════════════════════ */

.exp-synergy {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: #fff;
}

/* ── Photo gauche ───────────────────────────────────────────── */
.exp-synergy__photo {
  position: relative;
  overflow: hidden;
}

.exp-synergy__photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* ── Contenu droite ─────────────────────────────────────────── */
.exp-synergy__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 100px) clamp(40px, 6vw, 88px);
}

.exp-synergy__title {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-orange, #f26322);
  margin: 0 0 clamp(28px, 3.5vw, 52px);
}

.exp-synergy__intro {
  font-family: var(--f-sans);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-text, #111110);
  margin: 0 0 clamp(20px, 2.5vw, 36px);
  max-width: 52ch;
}

.exp-synergy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exp-synergy__list li {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-text, #111110);
  position: relative;
  padding: 12px 0;
}

/* Lignes animées — injectées par expertises-page.js */
.exp-synergy__list-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  transform: scaleX(0);
  transform-origin: left center;
}

.exp-synergy__list-line--bottom {
  top: auto;
  bottom: 0;
}

.exp-synergy__list strong {
  font-weight: 500;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .exp-hero {
    padding: 0 32px;
  }

  /* ── Cards stratégie/branding/architecture ─────────────────
     Mobile : photo sticky plein écran en haut, panneau texte
     défile par-dessus comme une carte (effet slide-over)
     ────────────────────────────────────────────────────────────── */
  .exp-strat {
    display: flex;
    flex-direction: column;
    position: relative;      /* désactive sticky desktop, permet sticky enfant */
    overflow: visible;       /* indispensable pour position:sticky sur l'enfant */
    min-height: auto;
    border-radius: 0;
  }

  /* Photo : format portrait 3:4, sticky → reste collée en haut le temps
     que le panneau gauche défile par-dessus */
  .exp-strat__right {
    order: -1;
    position: sticky;
    top: 0;
    width: 100%;
    aspect-ratio: 3 / 4;    /* portrait fixe */
    height: auto;
    z-index: 1;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 0;
  }

  /* Panneau texte : z-index supérieur + coins arrondis en haut
     → carte qui glisse par-dessus la photo au scroll */
  .exp-strat__left {
    order: 0;
    position: relative;
    z-index: 2;
    min-height: auto;
    border-radius: 20px 20px 0 0;
    margin-top: -24px;       /* léger chevauchement initial sur la photo */
    overflow: hidden;        /* masque les coins du contenu intérieur */
  }

  /* Sidebar masquée sur mobile (écriture verticale inadaptée) */
  .exp-strat__sidebar {
    display: none;
  }

  /* Corps texte pleine largeur sans la sidebar */
  .exp-strat__body {
    padding: 28px 24px 48px;
    justify-content: flex-start;
    gap: 24px;
  }

  /* Big title — repositionné en haut de la photo
     La taille est gérée par JS (fitTitle) pour un fit pixel-perfect */
  .exp-strat__big-title {
    display: block;
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    line-height: 1;
  }

  /* Logo S/B/A masqué sur mobile */
  .exp-strat__logo {
    display: none;
  }

  .exp-morph {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 80px 32px;
    min-height: auto;
    gap: 48px;
  }
  .exp-morph__text {
    padding-right: 0;
  }
  .exp-morph__svg {
    width: clamp(160px, 60vw, 300px);
  }
  .exp-synergy {
    grid-template-columns: 1fr;
  }
  .exp-synergy__photo {
    min-height: 100vw;
  }
  .exp-synergy__content {
    padding: 48px 32px 100px;
  }
}

/* ── Desktop : corps stratégie / branding / architecture à 13px ── */
@media (min-width: 769px) {
  .exp-strat__intro {
    font-size: 16px;
  }
  .exp-strat__service strong,
  .exp-strat__service span {
    font-size: 13px;
  }

  /* .exp-strat est collée en haut : si elle dépasse la fenêtre, sa
     partie basse devient inatteignable. On la borne et on rend la liste
     défilante, ascenseur masqué. */
  .exp-strat {
    max-height: 100vh;
    /* Plafonner la grille ne suffit pas : sa LIGNE reste dimensionnée par
       le contenu et déborde le conteneur. Mesuré : section à 700px mais
       .exp-strat__left toujours à 962px. minmax(0, 1fr) autorise la ligne
       à descendre sous la hauteur de son contenu. */
    grid-template-rows: minmax(0, 1fr);
  }

  /* Sans min-height:0, un enfant flex ou grid refuse de descendre sous la
     hauteur de son contenu : la liste ne deviendrait jamais défilante. */
  .exp-strat__left,
  .exp-strat__body {
    min-height: 0;
  }

  /* L'intro reste entière ; c'est la liste qui absorbe le manque. */
  .exp-strat__body-top {
    flex-shrink: 0;
  }

  .exp-strat__services {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior-y: contain;   /* pas de chaînage brut vers la page */
    scrollbar-width: none;            /* Firefox */
  }

  .exp-strat__services::-webkit-scrollbar {
    display: none;                    /* WebKit / Blink */
  }
}