/* ═══════════════════════════════════════════════════════════════════════
   UNIFROID — Section « Bureau d'études »
   bureau-etudes.css

   PRINCIPE DE RÉSILIENCE (important, lire avant de modifier) :
   Le CSS ci-dessous décrit par défaut l'état STATIQUE, complet et
   accessible de la section (grille visible, plan entièrement dessiné,
   panneaux en flux normal). Ce n'est QUE lorsque le JavaScript a
   confirmé que GSAP est chargé et a construit la
   timeline avec succès qu'il ajoute la classe `.be-ready` sur
   `.be-section` : c'est cette classe qui active la mise en page
   « sticky + progression » et le masquage initial des tracés (masquage lui
   -même posé en JS via gsap.set(), jamais en CSS, cf. bureau-etudes.js).
   Résultat : si un script échoue à charger, l'utilisateur voit quand
   même un contenu complet, lisible, non cassé.
   ═══════════════════════════════════════════════════════════════════════ */

.be-bureau-etudes {
  --be-bg: #F5F8FC;
  --be-bg-2: #FBFCFE;
  --be-ink: #20242B;
  --be-ink-soft: #545C66;
  --be-ink-faint: #8A93A0;
  --be-line: #DCE3EC;
  --be-grid-line: rgba(32, 36, 43, .07);
  --be-cold: #0878B9;
  --be-hot: #F47A3A;
  --be-eco: #65A851;
  --be-radius: 0;
  --be-font-display: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --be-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --be-ease: cubic-bezier(.22, 1, .36, 1);

  /* Hauteur de la zone de scroll pilotée, volontairement resserrée pour
     préserver le dessin animé sans monopoliser le parcours. */
  --be-scroll-h: 205vh;
  --be-contrast: 1;

  display: block;
  background: var(--be-bg);
  color: var(--be-ink);
  font-family: var(--be-font-body);
  -webkit-font-smoothing: antialiased;
}

.be-bureau-etudes *,
.be-bureau-etudes *::before,
.be-bureau-etudes *::after { box-sizing: border-box; }

/* Évite toute image intermédiaire entre l'activation du module et la pose
   synchrone des états GSAP, notamment pendant un changement d'orientation. */
.be-section.be-initializing:not(.be-primed) .be-svg-wrap,
.be-section.be-initializing:not(.be-primed) .be-panel { visibility: hidden; }

/* ─────────────────────────────────────────────────────────────────────
   1. SECTION / STAGE — état statique par défaut (mode A, résilient)
   ───────────────────────────────────────────────────────────────────── */

.be-section {
  position: relative;
  height: auto;
  padding: clamp(60px, 7vw, 92px) 0;
  overflow: hidden;
}

.be-stage {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
}

.be-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--be-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--be-line) 1px, transparent 1px),
    linear-gradient(var(--be-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--be-grid-line) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  opacity: .4; /* valeur de repos ; réduite à 0 par le JS puis ranimée au scroll */
  z-index: 0;
}

.be-svg-wrap {
  position: relative;
  z-index: 1;
  width: min(92vw, 1360px);
  aspect-ratio: 1600 / 900;
  max-height: 78vh;
  margin: 0 auto;
}

.be-plan {
  display: block;
  width: 100%;
  height: 100%;
  filter: contrast(var(--be-contrast, 1));
  overflow: visible;
}

/* Le halo de lumière final : décoratif uniquement, invisible par défaut
   (rien à « replier » dessus en mode statique — cf. commentaire JS). */
.be-plan .p-sweep { opacity: 0; }

/* Repère de progression : n'a de sens qu'en mode « prêt » (pin + scrub) ;
   masqué par défaut pour ne laisser aucun bloc vide en mode statique. */
.be-progress { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   2. PANNEAU GLASSMORPHISM — texte d'intro
   ───────────────────────────────────────────────────────────────────── */

.be-panel {
  position: relative;
  z-index: 5;
  width: min(92vw, 520px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 38px);
  border-radius: var(--be-radius);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--be-line);
  box-shadow: 0 18px 44px rgba(16, 22, 45, .08);
}

.be-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--be-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--be-cold);
  margin: 0 0 12px;
}

.be-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

.be-title {
  font-family: var(--be-font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 0 0 14px;
  color: var(--be-ink);
  text-wrap: balance;
}

.be-desc {
  font-family: var(--be-font-body);
  font-weight: 300;
  font-size: clamp(13.5px, 1.35vw, 15.5px);
  line-height: 1.65;
  color: var(--be-ink-soft);
  margin: 0;
  max-width: 40ch;
}

.be-indicators {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 20px 0 0;
  padding: 0;
}

.be-indicator {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 0;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--be-line);
  font-family: var(--be-font-body);
  font-size: 9.3px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--be-ink-soft);
  white-space: nowrap;
}

.be-indicator svg { width: 11px; height: 11px; flex: none; }
.be-indicator--cold svg { color: var(--be-cold); }
.be-indicator--eco  svg { color: var(--be-eco); }
.be-indicator--hot  svg { color: var(--be-hot); }

/* ─────────────────────────────────────────────────────────────────────
   3. MODE « PRÊT » (.be-ready) — mise en page immersive pilotée par JS
   Ajoutée uniquement quand GSAP + ScrollTrigger ont initialisé la
   timeline avec succès (cf. bureau-etudes.js → markReady()).
   ───────────────────────────────────────────────────────────────────── */

.be-section.be-ready {
  height: var(--be-scroll-h);
  padding: 0;
  /* An overflow scroll container would stop the native sticky stage. */
  overflow: visible;
}

.be-section.be-ready .be-stage {
  position: sticky; /* A single positioning owner, stable in both scroll directions. */
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  flex-direction: row;
  gap: 0;
}

.be-section.be-ready .be-svg-wrap {
  max-height: 88vh;
  will-change: transform;
}

.be-section.be-ready .be-plan .p-sweep { will-change: opacity, transform; }

.be-section.be-ready .be-panel {
  position: absolute;
  top: 10%;
  left: clamp(24px, 6vw, 84px);
  margin: 0;
  will-change: transform, opacity;
}

.be-section.be-ready .be-progress {
  display: block;
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 34vh;
  background: rgba(32, 36, 43, .08);
  border-radius: 999px;
  z-index: 6;
  overflow: hidden;
}

.be-section.be-ready .be-progress-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--be-hot), var(--be-eco), var(--be-cold));
}

@media (min-width: 901px) and (max-width: 1100px) {
  .be-section.be-ready .be-svg-wrap {
    width: 80vw;
    margin-right: 0;
    margin-left: auto;
  }
  .be-section.be-ready .be-panel {
    top: clamp(86px, 11vh, 104px);
    left: 24px;
    width: 340px;
    padding: 22px 24px;
  }
  .be-section.be-ready .be-progress { right: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────
   4. RESPONSIVE — tablette / mobile
   Le responsive est entièrement piloté ici : la timeline JS ne se
   reconstruit plus lorsque la largeur franchit un point de rupture.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .be-section.be-ready { --be-scroll-h: 165vh; }

  .be-section.be-ready .be-stage {
    height: 100svh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding-top: clamp(78px, 11svh, 96px);
  }

  .be-section.be-ready .be-svg-wrap {
    order: 2;
    width: min(100vw, 760px);
    max-height: none;
    margin: clamp(-18px, -2vw, -8px) auto 0;
  }

  .be-section.be-ready .be-panel {
    position: relative;
    order: 1;
    inset: auto;
    top: auto;
    left: auto;
    transform: none;
    width: min(calc(100% - 32px), 520px);
    max-width: 420px;
    margin: 0 auto;
    padding: 18px 20px;
  }

  .be-section.be-ready .be-progress { display: none; }

  .be-indicators { gap: 7px; }
  .be-indicator { font-size: 11px; padding: 7px 11px; }
}

@media (max-width: 640px) {
  .be-section.be-ready { --be-scroll-h: 145vh; }
}

@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  .be-section.be-ready .be-stage {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 72px 16px 12px;
  }
  .be-section.be-ready .be-panel {
    width: 42%;
    max-width: none;
    max-height: calc(100svh - 92px);
    margin: 0;
    padding: 12px 14px;
    overflow-y: auto;
  }
  .be-section.be-ready .be-svg-wrap {
    width: 58%;
    margin: 0;
  }
  .be-title { margin-bottom: 8px; font-size: 22px; }
  .be-desc { font-size: 12px; line-height: 1.5; }
  .be-indicators { gap: 4px; margin-top: 10px; }
  .be-indicator { gap: 3px; padding: 4px 5px; font-size: 8px; }
  .be-indicator svg { width: 10px; height: 10px; }
}

@media (max-width: 460px) {
  .be-title { font-size: clamp(32px, 10vw, 40px); }
  .be-desc { font-size: 13px; }
  .be-section.be-ready .be-stage { padding-top: 76px; }
  .be-section.be-ready .be-panel { width: calc(100% - 24px); padding: 15px 16px; }
  .be-indicators { gap: 4px; margin-top: 14px; }
  .be-indicator { gap: 3px; padding: 4px; font-size: clamp(7px, 2.1vw, 9px); letter-spacing: 0; }
  .be-indicator svg { width: 9px; height: 9px; }
}

/* ─────────────────────────────────────────────────────────────────────
   5. ACCESSIBILITÉ — prefers-reduced-motion (filet de sécurité CSS)
   Le JS détecte déjà cette préférence et choisit une init « statique »
   (pas de pin, pas de scrub). Ce bloc garantit qu'même en cas d'anomalie
   JS, aucun pin ni aucune très grande hauteur de scroll ne persiste.
   ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .be-section.be-ready { height: auto; }
  .be-section.be-ready .be-stage {
    position: relative;
    height: auto;
    flex-direction: column;
  }
  .be-section.be-ready .be-panel {
    position: relative;
    inset: auto;
    top: auto; left: auto; transform: none;
    margin: 0 auto;
  }
  .be-section.be-ready .be-progress { display: none; }
}