/* =====================================================================
   SPACE.LTD SARL — Feuille de styles
   Étape 1 : HERO SECTION
   ===================================================================== */

:root {
  /* Palette (issue du roadmap) */
  --navy:        #031B3E;   /* Bleu marine principal */
  --navy-deep:   #02142F;   /* Bleu marine profond */
  --soft-blue:   #354459;
  --sky-blue:    #82B8E3;
  --gold:        #D9AB5E;   /* Or premium */
  --gold-soft:   #E8C988;
  --gold-dark:   #695235;
  --gold-ink:    #8A6A1F;   /* or lisible sur fond clair */
  --white:       #FFFFFF;
  --off-white:   #F2F2F1;
  --ink:         #252119;   /* texte principal (fond clair) */
  --muted:       #737985;   /* texte secondaire */
  --border:      #CFCFCD;   /* bordures */

  /* Typo — inspirée d'Armory : Inter Tight (grands titres regular très
     resserrés) + IBM Plex Mono (labels techniques) */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Mesures */
  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --maxw:  1340px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* les ancres s'arrêtent sous la nav fixe */
html { scroll-padding-top: 88px; }

html { overflow-x: hidden; }

body {
  margin: 0;
  /* clip (et non hidden) : hidden ferait de body un scroll container,
     ce qui casserait les timelines view() des animations au scroll */
  overflow-x: clip;
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--navy-deep);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* =====================================================================
   HERO — structure
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip; /* pas hidden : ne crée pas de scroll container */
  isolation: isolate;
  /* compense la nav fixe (sortie du flux) */
  padding: clamp(64px, 9vh, 84px) var(--pad-x) 0;
}

/* ---- Arrière-plan ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--navy-deep);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Légère teinte marine + animation très lente pour donner vie */
  animation: heroZoom 28s var(--ease) infinite alternate;
}

/* Recoloration de la vidéo vers le bleu marine (force l'identité marine
   quelles que soient les couleurs d'origine de la vidéo) */
.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  /* pleine recoloration marine (identité) — la visibilité de la vidéo
     est gérée par l'overlay, pas par cette couche */
  opacity: 0.78;
}

/* Teinte bleu marine par-dessus la vidéo (lisibilité + identité) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(2, 14, 32, 0.72) 0%,
      rgba(2, 14, 32, 0.55) 32%,
      rgba(3, 27, 62, 0.34) 64%,
      rgba(3, 27, 62, 0.22) 100%
    ),
    linear-gradient(
      to top,
      rgba(2, 14, 32, 0.82) 0%,
      rgba(2, 14, 32, 0.12) 42%,
      rgba(2, 14, 32, 0.30) 100%
    );
}

/* Grain léger */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
/* Barre fixe pleine largeur ; le contenu reste calé sur --maxw grâce au
   padding max(). Pas de transform/filter ici : le menu mobile (fixed)
   doit garder le viewport comme bloc englobant. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(0.85rem, 1.7vh, 1.25rem) max(var(--pad-x), calc((100% - var(--maxw)) / 2));
  /* repli sans scroll-timeline : fond lisible en permanence */
  background: rgba(2, 14, 32, 0.9);
  border-bottom: 1px solid rgba(217, 171, 94, 0.16);
  opacity: 0;
  animation: fadeIn 0.9s var(--ease) 0.1s forwards;
}
@supports (animation-timeline: scroll()) {
  /* transparente sur le hero, se solidifie au fil du scroll */
  .nav {
    background: transparent;
    border-bottom-color: transparent;
    animation: fadeIn 0.9s var(--ease) 0.1s forwards, navSolid linear both;
    animation-timeline: auto, scroll();
    animation-range: normal, 60px 300px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
/* logo officiel (wordmark empilé SPACE./LTD) */
.brand__logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  padding-left: 0.1em;
  color: var(--gold);
  border: 1px solid rgba(217, 171, 94, 0.4);
  border-radius: 0;
  padding: 3px 6px 2px 8px;
  align-self: center;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.2vw, 2.1rem);
}
.nav__links a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--white); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__cta {
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
  padding: 0.62rem 1.25rem;
  border: 1px solid rgba(217, 171, 94, 0.55);
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav__cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 6;
}
.burger span {
  height: 2px;
  width: 26px;
  margin-left: auto;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s ease, width 0.35s var(--ease);
}

/* =====================================================================
   CONTENU HERO
   ===================================================================== */
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.2rem, 3.5vh, 2.6rem) 0 clamp(2rem, 5vh, 3.5rem);
}
/* contenu principal — bas-gauche */
.hero__content {
  margin-top: auto;
  max-width: min(62ch, 100%);
  min-width: 0; /* autorise l'élément flex à rétrécir → le texte se replie */
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.9vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.15s forwards;
}
.eyebrow__line {
  width: 22px;
  height: 12px;
  background: repeating-linear-gradient(115deg, var(--gold) 0 2px, transparent 2px 5.5px);
  margin-right: 0.4rem;
}
.eyebrow__sep { color: rgba(217, 171, 94, 0.5); }

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Taille bornée par la largeur ET la hauteur d'écran → pas de scroll dans la hero */
  font-size: clamp(1.8rem, min(4.4vw, 6.4vh), 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
  overflow-wrap: break-word;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.3s forwards;
}
.hero__title-accent {
  color: var(--gold);
}

.hero__subtitle {
  max-width: 53ch;
  margin: 1.35rem 0 0;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.45s forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.1rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.6s forwards;
}

/* Boutons — rectangles nets, motif Armory « label + carré-icône » */
.btn {
  --b: 0.85rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: var(--b) 1.4rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* place réservée au carré-flèche quand il est présent */
.btn:has(.btn__arrow) { padding-right: calc(1rem + 42px); }
.btn--primary {
  background: var(--white);
  color: var(--navy-deep);
}
.btn--primary:hover { background: var(--gold-soft); }
/* la flèche vit dans un carré contrasté, calé exactement sur le bord droit */
.btn__arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  transition: background 0.3s ease;
}
.btn--primary .btn__arrow { background: var(--navy); color: var(--gold); }
.btn:hover .btn__arrow { animation: arrowNudge 0.45s var(--ease); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-deep);
}
.btn--ghost .btn__arrow { background: rgba(255, 255, 255, 0.1); }
.btn--ghost:hover .btn__arrow { background: var(--navy); color: var(--gold); }

/* =====================================================================
   PIED DE HERO
   ===================================================================== */
.hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(1.5rem, 4vh, 2.6rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.85s forwards;
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.scroll-cue:hover { color: var(--white); }
.scroll-cue__rail {
  position: relative;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.scroll-cue__dot {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollDot 2.1s var(--ease) infinite;
}
.scroll-cue__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
  font-family: var(--font-mono);
}
.hero__meta-k {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
}
.hero__meta-v {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   SECTIONS — base
   ===================================================================== */
.section {
  position: relative;
  padding: clamp(4rem, 9vh, 8rem) var(--pad-x);
}

/* Libellé de section (eyebrow) — variante fond clair */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.sec-eyebrow b { color: var(--navy); font-weight: 600; }
/* pavé hachuré façon Armory (remplace la ligne) */
.sec-eyebrow__line {
  width: 22px;
  height: 12px;
  background: repeating-linear-gradient(115deg, var(--gold) 0 2px, transparent 2px 5.5px);
}

/* Titre de section — grand, regular, très resserré (Armory) */
.sec-title {
  margin: 1.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
}
.sec-title em { color: var(--gold-ink); font-style: normal; }

/* Intro de section */
.sec-intro {
  margin: 1.3rem 0 0;
  max-width: 58ch;
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

/* Variante fond sombre */
.section--dark { background: var(--navy-deep); color: var(--white); }
.section--dark .sec-eyebrow { color: var(--gold-soft); }
.section--dark .sec-eyebrow b { color: #fff; }
.section--dark .sec-title { color: #fff; }
.section--dark .sec-title em { color: var(--gold); }
.section--dark .sec-intro { color: rgba(255, 255, 255, 0.68); }

.text-link--light { color: #fff; }

/* Lien texte avec flèche + soulignement doré animé */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-bottom: 3px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.35s var(--ease);
}
.text-link svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.text-link:hover { background-size: 100% 1.5px; }
.text-link:hover svg { transform: translateX(4px); }

/* =====================================================================
   À PROPOS
   ===================================================================== */
.about {
  position: relative;
  background: var(--off-white);
  color: var(--ink);
  /* clip et non hidden : hidden créerait un scroll container local
     qui gèlerait les timelines view() des enfants animés */
  overflow: clip;
}
/* (la grille structurelle générique .section::after remplace l'ancienne trame) */
.about__bracket {
  position: absolute;
  top: clamp(1.6rem, 4vh, 3rem);
  right: var(--pad-x);
  width: clamp(36px, 5vw, 60px);
  height: clamp(36px, 5vw, 60px);
  border-top: 1px solid rgba(217,171,94,0.6);
  border-right: 1px solid rgba(217,171,94,0.6);
  pointer-events: none;
}

.about__head {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Grand paragraphe progressif — les mots s'allument au scroll (Armory) */
.about__lead {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(2.2rem, 4.5vh, 3.4rem) auto 0;
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about__lead .w { color: inherit; }

.about__grid {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vh, 4rem) auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}

.about__body {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(0.92rem, 0.98vw, 1rem);
  font-weight: 300;
  line-height: 1.75;
  color: #54514b;
}
.about__body strong { color: var(--navy); font-weight: 600; }

/* Blocs de confiance — stats Armory : chiffres fins, crochets de coin */
.about__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.4rem, 2.4vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem 0 1.7rem;
  border-top: 1px solid rgba(3, 27, 62, 0.16);
  background: transparent;
}
/* tiret doré qui s'étend au survol (rappel des caps DALLAM) */
.fact::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 1px;
  background: var(--gold-ink);
  transition: width 0.45s var(--ease);
}
.fact:hover::before { width: 100%; }
/* crochet de coin, haut-droite (Armory stats) */
.fact::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgba(3, 27, 62, 0.4);
  border-right: 1px solid rgba(3, 27, 62, 0.4);
}
.fact__k {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1;
}
.fact__v {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--muted);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  position: relative;
  background: #010a16;
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x) 0;
  border-top: 1px solid rgba(217, 171, 94, 0.22);
}
.footer__top {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.footer__logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.footer__logo img {
  display: block;
  height: 58px;
  width: auto;
}
.footer__sarl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--gold);
  padding-bottom: 3px;
}
.footer__pitch {
  margin: 1.2rem 0 0;
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.footer__sectors {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(217, 171, 94, 0.7);
}

.footer__h {
  margin: 0 0 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__contact li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.25s ease;
}
.footer__col a:hover { color: var(--gold); }
.footer__zone {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  padding-top: 0.4rem;
}

.footer__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__copy { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }
.footer__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
}
.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}
.footer__top-link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.footer__top-link:hover { color: var(--gold); }
.footer__top-link:hover svg { transform: translateY(-3px); }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact { background: var(--off-white); color: var(--ink); }
.contact__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact__list {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.contact__list li { display: flex; align-items: flex-start; gap: 1rem; }
.contact__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--gold-ink);
  background: transparent;
  border: 1px solid rgba(217, 171, 94, 0.4);
  border-radius: 0;
}
.contact__ic svg { width: 20px; height: 20px; }
.contact__txt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.98rem;
  color: var(--ink);
  padding-top: 0.15rem;
}
.contact__txt b {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__txt a { color: var(--ink); transition: color 0.25s ease; }
.contact__txt a:hover { color: var(--gold-ink); }
.contact__muted { color: var(--muted); }
.contact__zone {
  margin: 1.8rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Formulaire (panneau marine, angles droits + crochets de visée) */
.contact__form {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 0;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact__form::before,
.contact__form::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.contact__form::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.contact__form::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  padding: 0.78rem 0.9rem;
  transition: border-color 0.25s ease, background 0.25s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.field select { color: rgba(255, 255, 255, 0.55); cursor: pointer; }
.field select option { color: #111; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}
.contact__submit { margin-top: 0.4rem; align-self: flex-start; }
.contact__note {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* =====================================================================
   DALLAM (pôle défense)
   ===================================================================== */
.dallam {
  position: relative;
  overflow: clip; /* pas hidden : préserve les timelines view() des enfants */
  background:
    radial-gradient(90% 80% at 85% 15%, rgba(217,171,94,.08), transparent 60%),
    linear-gradient(160deg, #061325 0%, #02101f 60%, #010a16 100%);
}
.dallam__br {
  position: absolute;
  width: clamp(28px, 4vw, 50px);
  height: clamp(28px, 4vw, 50px);
  pointer-events: none;
}
.dallam__br--tl { top: clamp(1.4rem,3vh,2.4rem); left: var(--pad-x); border-top: 1px solid rgba(217,171,94,.5); border-left: 1px solid rgba(217,171,94,.5); }
.dallam__br--br { bottom: clamp(1.4rem,3vh,2.4rem); right: var(--pad-x); border-bottom: 1px solid rgba(217,171,94,.5); border-right: 1px solid rgba(217,171,94,.5); }

.dallam__frame {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center; /* le corps se centre face au rail monumental */
  gap: clamp(2rem, 4.5vw, 4.5rem);
}

/* ---- Rail vertical : wordmark monumental en contour ---- */
.dallam__rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-right: clamp(1.4rem, 2.4vw, 2.4rem);
  border-right: 1px solid rgba(217, 171, 94, 0.28);
}
.dallam__rail-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 9vh, 6.4rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217, 171, 94, 0.5);
}
.dallam__rail-name i {
  font-style: normal;
  color: var(--gold);
  -webkit-text-stroke: 0;
}
.dallam__rail-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ---- Corps : lede + fiche ---- */
.dallam__body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
}

.dallam .sec-title { font-size: clamp(1.4rem, 2.4vw, 2.1rem); margin-top: 0.6rem; }

.dallam__text {
  margin: 1.4rem 0 0;
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
}

.dallam__cta { margin-top: 2.4rem; }

/* ---- Fiche d'identité du pôle ---- */
.dallam__fiche {
  position: relative;
  background: linear-gradient(165deg, rgba(12, 34, 73, 0.5), rgba(2, 16, 47, 0.85));
  border: 1px solid rgba(217, 171, 94, 0.3);
}
/* crochets de visée */
.dallam__fiche::before,
.dallam__fiche::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.dallam__fiche::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.dallam__fiche::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

.dallam__fiche-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px dashed rgba(217, 171, 94, 0.35);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.dallam__fiche-head svg { width: 16px; height: 16px; flex: none; }
.dallam__status {
  position: relative;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.dallam__status::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(217, 171, 94, 0.55);
  animation: statusPulse 2.4s ease-out infinite;
}

.dallam__fiche-rows { margin: 0; padding: 0.3rem 0; }
.dallam__fiche-rows > div {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.78rem 1.25rem;
}
.dallam__fiche-rows > div + div { border-top: 1px dashed rgba(255, 255, 255, 0.09); }
.dallam__fiche-rows dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(217, 171, 94, 0.8);
}
.dallam__fiche-rows dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

/* ---- Index des capacités ---- */
.dallam__caps {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(3rem, 6vh, 4.5rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 clamp(1.2rem, 2vw, 2rem);
}
.dallam__cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.05rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
/* tiret doré qui s'étend au survol */
.dallam__cap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}
.dallam__cap:hover::before { width: 100%; }
.dallam__cap span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* ---- Bandeau de conformité (bande de classification) ---- */
.dallam__classif {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(2.8rem, 5.5vh, 4.2rem) auto 0;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
.dallam__classif-hatch {
  flex: 1;
  min-width: 42px;
  height: 9px;
  background: repeating-linear-gradient(-45deg, rgba(217, 171, 94, 0.42) 0 1px, transparent 1px 7px);
}
.dallam__classif p {
  margin: 0;
  flex: none;
  max-width: min(74ch, 70%);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.8vw, 0.76rem);
  letter-spacing: 0.09em;
  line-height: 1.9;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.dallam__classif strong { color: var(--gold); font-weight: 600; }

/* =====================================================================
   RÉALISATIONS
   ===================================================================== */
.projects { background: var(--off-white); color: var(--ink); }
.projects__head { max-width: var(--maxw); margin: 0 auto; }

/* ---- Registre tabulaire (case studies Armory) ---- */
.projects__rows {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vh, 3.6rem) auto 0;
  display: flex;
  flex-direction: column;
}
.prow {
  display: grid;
  grid-template-columns: 3rem minmax(150px, 0.62fr) 1.6fr auto 2.4rem;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.2rem, 2vh, 1.6rem) 0.4rem;
  border-top: 1px solid rgba(3, 27, 62, 0.16);
  transition: background 0.3s ease;
}
.prow:last-child { border-bottom: 1px solid rgba(3, 27, 62, 0.16); }
.prow:hover { background: rgba(3, 27, 62, 0.04); }
.prow__idx {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(3, 27, 62, 0.4);
}
.prow__idx::before { content: "//"; margin-right: 2px; color: rgba(3, 27, 62, 0.25); }
.prow__sector {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.prow__main { min-width: 0; }
.prow__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--navy);
}
.prow__desc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
}
.prow__ref {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(3, 27, 62, 0.22);
}
.prow__ref--conf { color: var(--gold-ink); border-color: rgba(138, 106, 31, 0.45); }
.ic-lock { width: 11px; height: 11px; }
.prow__go {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold-ink);
  justify-self: end;
  transition: transform 0.3s var(--ease);
}
.prow:hover .prow__go { transform: translateX(6px); }

/* bandeau CTA sous le registre */
.projects__cta {
  max-width: var(--maxw);
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.projects__cta-text {
  margin: 0;
  max-width: 52ch;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}
/* variante bouton pour fond clair */
.btn--dark {
  background: var(--navy);
  color: #fff;
}
.btn--dark:hover { background: var(--navy-deep); }
.btn--dark .btn__arrow { background: rgba(255, 255, 255, 0.12); color: var(--gold); }

/* =====================================================================
   NOTRE MÉTHODE (courbe de processus)
   ===================================================================== */
.method__head { max-width: var(--maxw); margin: 0 auto; }
.method__flow {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(3rem, 6vh, 4.5rem) auto 0;
}
/* ornements console (Armory) : label vertical + hachures d'angle */
.method__flow::before {
  content: "PROCESSUS //";
  position: absolute;
  top: 8px;
  left: -1.4rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(217, 171, 94, 0.55);
}
.method__flow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1.6rem;
  width: 74px;
  height: 9px;
  background: repeating-linear-gradient(-45deg, rgba(217, 171, 94, 0.4) 0 1px, transparent 1px 6px);
}
/* courbe reliant les étapes — les x s'étirent, les y restent en px */
.method__curve {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(0 16px 20px rgba(217, 171, 94, 0.22));
  pointer-events: none;
}
.method__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 1.6vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* position verticale du nœud de chaque étape sur la courbe
   (colonnes centrées à 10/30/50/70/90 % ⇒ x = 120/360/600/840/1080) */
.mstep:nth-child(1) { --node-y: 210px; }
.mstep:nth-child(2) { --node-y: 90px; }
.mstep:nth-child(3) { --node-y: 170px; }
.mstep:nth-child(4) { --node-y: 50px; }
.mstep:nth-child(5) { --node-y: 130px; }
.mstep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--node-y) + 40px);
}
/* pastille blanche posée sur la courbe */
.mstep__node {
  position: absolute;
  top: var(--node-y);
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--white);
  box-shadow: 0 12px 26px rgba(1, 10, 22, 0.45);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease);
}
.mstep__node::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
}
.mstep:hover .mstep__node { transform: translate(-50%, -50%) scale(1.14); }
/* grand chiffre fantôme derrière l'étape */
.mstep__ghost {
  position: absolute;
  top: calc(var(--node-y) - 68px);
  left: 56%;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(6rem, 8.5vw, 8.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(130, 184, 227, 0.13);
  user-select: none;
  pointer-events: none;
  transition: color 0.35s ease;
}
.mstep:hover .mstep__ghost { color: rgba(130, 184, 227, 0.22); }
.mstep__title {
  position: relative;
  z-index: 2;
  width: min(24ch, 100%);
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.mstep__text {
  position: relative;
  z-index: 2;
  width: min(24ch, 100%);
  margin: 0;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* =====================================================================
   POURQUOI NOUS CHOISIR
   ===================================================================== */
.pourquoi { background: var(--off-white); color: var(--ink); }
.pourquoi__head { max-width: var(--maxw); margin: 0 auto; }
.pourquoi__grid {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vh, 3.6rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.4vw, 1.3rem);
}
/* cellules éditoriales sur filet, sans carte (Armory features) */
.value {
  position: relative;
  padding: 1.4rem 1.2rem 0.6rem 0;
  background: transparent;
  border-top: 1px solid rgba(3, 27, 62, 0.18);
  transition: border-color 0.35s ease;
}
.value::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 1px;
  background: var(--gold-ink);
  transition: width 0.45s var(--ease);
}
.value:hover::before { width: 100%; }
.value__num {
  position: absolute;
  top: 1.35rem;
  right: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(3, 27, 62, 0.35);
}
.value__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.3rem;
  color: var(--gold-ink);
  border: 1px solid rgba(217, 171, 94, 0.45);
  border-radius: 0;
  background: transparent;
  transition: background 0.35s ease;
}
.value__icon svg { width: 23px; height: 23px; }
.value:hover .value__icon { background: rgba(217, 171, 94, 0.12); }
.value__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--navy);
}
.value__text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
}

/* =====================================================================
   DOMAINES D'ACTIVITÉ
   ===================================================================== */
.domaines { position: relative; overflow: clip; /* pas hidden : préserve les timelines view() */ }
.domaines::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 45%;
  height: 70%;
  background: radial-gradient(circle, rgba(217,171,94,0.10), transparent 70%);
  pointer-events: none;
}
.domaines__head {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

.domaines__grid {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vh, 3.8rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.3vw, 1.1rem);
}

.dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.3vw, 2.1rem);
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.dcard:hover {
  border-color: rgba(217, 171, 94, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

/* Illustration isométrique sur trame de points (Armory) */
.dcard__art {
  align-self: flex-end;
  width: clamp(88px, 11vw, 116px);
  height: clamp(88px, 11vw, 116px);
  margin-bottom: 0.4rem;
  padding: 8px;
  background-image: radial-gradient(rgba(130, 184, 227, 0.16) 1px, transparent 1px);
  background-size: 13px 13px;
  pointer-events: none;
  transition: transform 0.45s var(--ease);
}
.dcard__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dcard:hover .dcard__art { transform: translateY(-5px); }
.dcard--feature .dcard__art--lg {
  width: clamp(168px, 23vw, 252px);
  height: auto;
  aspect-ratio: 240 / 218;
}
.dcard--feature .dcard__art--lg svg { height: 100%; }

/* titres de cellule en mono (Armory) */
.dcard__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #fff;
}

.dcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dcard__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}
.dcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Card vedette DALLAM */
.dcard--feature {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(217,171,94,0.12), rgba(255,255,255,0.02) 55%);
  border-color: rgba(217, 171, 94, 0.42);
}
.dcard__tag {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(217, 171, 94, 0.4);
  border-radius: 0;
  padding: 5px 11px;
}
.dcard__list--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
}
.dcard--feature .text-link { margin-top: 1.6rem; color: var(--gold-soft); }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes scrollDot {
  0%   { transform: translateY(-16px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}
@keyframes statusPulse {
  from { transform: scale(0.5); opacity: 1; }
  to   { transform: scale(1.7); opacity: 0; }
}
@keyframes arrowNudge {
  0%   { translate: 0 0; }
  40%  { translate: 4px 0; }
  100% { translate: 0 0; }
}
/* la nav gagne son fond en quittant le haut de page (timeline scroll) */
@keyframes navSolid {
  from { background: rgba(2, 14, 32, 0); border-bottom-color: rgba(217, 171, 94, 0); }
  to   { background: rgba(2, 14, 32, 0.9); border-bottom-color: rgba(217, 171, 94, 0.16); }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
  .burger { display: flex; }

  .nav__menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.4rem;
    padding: 2rem;
    background: linear-gradient(160deg, var(--navy-deep), #061226 70%, #02101f);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 5;
  }
  .nav__links {
    flex-direction: column;
    gap: 1.7rem;
    text-align: center;
  }
  .nav__links a { font-size: 1.18rem; }
  .nav__cta { font-size: 1rem; padding: 0.8rem 2rem; }

  /* Ouverture du menu (CSS pur) */
  .nav-toggle:checked ~ .nav .nav__menu { transform: translateX(0); }
  .nav-toggle:checked ~ .nav .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav .burger span:nth-child(2) { opacity: 0; width: 0; }
  .nav-toggle:checked ~ .nav .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }


}

/* À propos — empilement */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); align-items: start; }
  .about__bracket { display: none; }
}
@media (max-width: 440px) {
  .about__facts { grid-template-columns: 1fr; }
}

/* Domaines — grille adaptative */
@media (max-width: 900px) {
  .domaines__grid { grid-template-columns: repeat(2, 1fr); }
  .dcard--feature { grid-column: span 2; }
  .dcard__list--row { flex-direction: column; }
}

/* Pourquoi — grille adaptative */
@media (max-width: 900px) {
  .pourquoi__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pourquoi__grid { grid-template-columns: 1fr; }
}

/* Footer — empilement */
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}

/* Contact — empilement */
@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .contact__submit { width: 100%; justify-content: center; }
}

/* DALLAM — empilement */
@media (max-width: 1060px) {
  .dallam__body { grid-template-columns: 1fr; }
  .dallam__caps { grid-template-columns: repeat(3, 1fr); gap: 1.6rem clamp(1.2rem, 2vw, 2rem); }
}
@media (max-width: 900px) {
  /* le rail devient un bandeau horizontal au-dessus du contenu */
  .dallam__frame { grid-template-columns: 1fr; gap: 2.2rem; }
  .dallam__rail {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 1.2rem;
    border-right: 0;
    border-bottom: 1px solid rgba(217, 171, 94, 0.28);
  }
  .dallam__rail-name,
  .dallam__rail-tag { writing-mode: horizontal-tb; transform: none; }
  .dallam__rail-name { font-size: clamp(2.6rem, 9vw, 4rem); }
  .dallam__br { display: none; }
}
@media (max-width: 640px) {
  .dallam__caps { grid-template-columns: 1fr; gap: 0; }
  .dallam__cap { flex-direction: row; align-items: baseline; gap: 1rem; padding: 0.9rem 0; }
  .dallam__rail-tag { display: none; }
  .dallam__cta { width: 100%; justify-content: center; }
  .dallam__classif p { max-width: 100%; }
  .dallam__classif-hatch { display: none; }
  .dallam__fiche-rows > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Réalisations — le registre se replie */
@media (max-width: 900px) {
  .prow {
    grid-template-columns: 2.4rem 1fr auto;
    grid-template-areas:
      "idx sector ref"
      "idx main   go";
    row-gap: 0.5rem;
    align-items: start;
  }
  .prow__idx { grid-area: idx; padding-top: 0.15rem; }
  .prow__sector { grid-area: sector; align-self: center; }
  .prow__main { grid-area: main; }
  .prow__ref { grid-area: ref; justify-self: end; }
  .prow__go { grid-area: go; align-self: end; }
}
@media (max-width: 560px) {
  .prow { grid-template-columns: 1fr auto; grid-template-areas: "sector ref" "main go"; }
  .prow__idx { display: none; }
  .projects__cta { flex-direction: column; align-items: flex-start; }
}

/* Méthode — timeline verticale */
@media (max-width: 860px) {
  .method__curve { display: none; }
  .method__steps { grid-template-columns: 1fr; gap: 0; }
  .mstep {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 1.2rem;
    align-items: start;
    padding: 0 0 2.2rem;
  }
  .mstep__node {
    position: static;
    grid-row: 1 / span 2;
    transform: none;
    margin-top: 2px;
  }
  .mstep:hover .mstep__node { transform: scale(1.14); }
  .mstep__ghost {
    top: -1.4rem;
    left: auto;
    right: 0;
    font-size: 5rem;
  }
  .mstep__title { grid-column: 2; width: auto; }
  .mstep__text { grid-column: 2; width: auto; max-width: none; }
  .mstep:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 46px;
    bottom: 4px;
    width: 1px;
    background: rgba(217, 171, 94, 0.4);
  }
}
@media (max-width: 600px) {
  .domaines__grid { grid-template-columns: 1fr; }
  .dcard--feature { grid-column: auto; }
}

/* La liste des domaines du hero a besoin de place : on la replie tôt */
@media (max-width: 860px) {
  .hero__content { margin-top: 0; }
  .hero__inner { justify-content: center; }
}
@media (max-width: 600px) {
  /* bornée par la largeur ET la hauteur → tient même sur petits écrans courts */
  .hero__title { font-size: clamp(1.5rem, min(6.4vw, 4.6vh), 2.1rem); }
  .hero__subtitle { font-size: 0.96rem; line-height: 1.55; margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.7rem; gap: 0.7rem; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hero__meta { align-items: flex-start; text-align: left; }
  .btn { width: 100%; justify-content: center; }
  /* le carré-flèche gêne en pleine largeur */
  .btn .btn__arrow { display: none; }
  .btn:has(.btn__arrow) { padding-right: 1.4rem; }
}

/* Écrans peu hauts (paysage mobile, petits laptops) : resserre les espacements */
@media (max-height: 700px) {
  .hero__content { margin-top: 0; }
  .hero__inner { justify-content: center; }
  .eyebrow { margin-bottom: 0.8rem; }
  .hero__title { font-size: clamp(1.6rem, min(4vw, 5.6vh), 2.6rem); }
  .hero__subtitle { margin-top: 0.85rem; line-height: 1.5; }
  .hero__actions { margin-top: 1.3rem; }
  .nav { padding-block: 0.7rem; }
  .hero { padding-top: 56px; }
  .hero__inner { padding: 1rem 0; }
  .hero__foot { padding-bottom: 1.1rem; }
}

/* Très peu de hauteur (paysage téléphone) : on libère le maximum de place */
@media (max-height: 480px) {
  .hero__title { font-size: clamp(1.4rem, min(4vw, 7vh), 2.1rem); }
  .hero__subtitle { margin-top: 0.6rem; font-size: 0.9rem; }
  .hero__actions { margin-top: 1rem; }
  .hero__foot { display: none; }
  .hero__inner { padding: 0.5rem 0 0.9rem; }
}

/* =====================================================================
   MICRO-INTERACTIONS (tous navigateurs)
   ===================================================================== */
.btn:active { transform: translateY(1px) scale(0.97); }
.dcard__art svg { transition: transform 0.5s var(--ease); }
.dcard:hover .dcard__art svg { transform: translateY(-6px); }
.value__icon { transition: transform 0.4s var(--ease); }
.value:hover .value__icon { transform: translateY(-4px); }
.fact { transition: translate 0.35s var(--ease); }
.fact:hover { translate: 8px 0; }

/* =====================================================================
   ANIMATIONS AU SCROLL — pur CSS (scroll-driven animations)
   Amélioration progressive : sans support, tout reste visible.
   ===================================================================== */
@supports (animation-timeline: view()) {
  /* — keyframes (propriétés individuelles translate/scale :
       aucun conflit avec les transform des états hover) — */
  @keyframes sda-rise    { from { opacity: 0; translate: 0 38px; }  to { opacity: 1; translate: 0 0; } }
  @keyframes sda-left    { from { opacity: 0; translate: -46px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes sda-right   { from { opacity: 0; translate: 46px 0; }  to { opacity: 1; translate: 0 0; } }
  @keyframes sda-pop     { from { opacity: 0; scale: 0.4; }         to { opacity: 1; scale: 1; } }
  @keyframes sda-fade    { from { opacity: 0; }                     to { opacity: 1; } }
  @keyframes sda-draw    { from { stroke-dashoffset: 1; }           to { stroke-dashoffset: 0; } }

  /* — têtes de section (toutes sections) — */
  .sec-eyebrow { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 0% cover 18%; }
  .sec-title   { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 4% cover 24%; }
  .sec-intro   { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 8% cover 30%; }

  /* — À propos : le grand paragraphe s'allume mot à mot (Armory) — */
  @keyframes sda-word { from { opacity: 0.16; } to { opacity: 1; } }
  .about__lead .w {
    animation: sda-word linear both;
    animation-timeline: view();
    animation-range: cover calc(14% + var(--i) * 0.85%) cover calc(22% + var(--i) * 0.85%);
  }
  .about__body            { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 10% cover 32%; }
  .about__text .text-link { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 14% cover 36%; }

  /* — grilles / registres (stagger par nth-child) — */
  .dcard, .value, .prow, .fact,
  .dallam__cap, .contact__list li {
    animation: sda-rise linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
  }
  .projects__cta { animation: sda-rise linear both; animation-timeline: view(); animation-range: cover 0% cover 26%; }
  .dcard:nth-child(2), .value:nth-child(2), .prow:nth-child(2),
  .fact:nth-child(2), .dallam__cap:nth-child(2), .contact__list li:nth-child(2) { animation-range: cover 5% cover 35%; }
  .dcard:nth-child(3), .value:nth-child(3), .prow:nth-child(3),
  .fact:nth-child(3), .dallam__cap:nth-child(3), .contact__list li:nth-child(3) { animation-range: cover 10% cover 40%; }
  .dcard:nth-child(4), .value:nth-child(4), .prow:nth-child(4),
  .fact:nth-child(4), .dallam__cap:nth-child(4), .contact__list li:nth-child(4) { animation-range: cover 15% cover 45%; }
  .dcard:nth-child(5), .value:nth-child(5), .prow:nth-child(5),
  .dallam__cap:nth-child(5) { animation-range: cover 20% cover 50%; }

  /* — Méthode : la courbe se trace, les étapes s'allument à son passage —
       timeline partagée pour synchroniser tracé / pastilles / textes */
  .method__flow { view-timeline: --method block; }
  .method__curve path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sda-draw linear both;
    animation-timeline: --method;
    animation-range: cover 5% cover 45%;
  }
  .mstep__node  { animation: sda-pop linear both;  animation-timeline: --method; }
  .mstep__ghost { animation: sda-fade linear both; animation-timeline: --method; }
  .mstep__title,
  .mstep__text  { animation: sda-rise linear both; animation-timeline: --method; }
  .mstep:nth-child(1) .mstep__node  { animation-range: cover 8% cover 13%; }
  .mstep:nth-child(2) .mstep__node  { animation-range: cover 16% cover 21%; }
  .mstep:nth-child(3) .mstep__node  { animation-range: cover 24% cover 29%; }
  .mstep:nth-child(4) .mstep__node  { animation-range: cover 32% cover 37%; }
  .mstep:nth-child(5) .mstep__node  { animation-range: cover 39% cover 44%; }
  .mstep:nth-child(1) .mstep__ghost { animation-range: cover 9% cover 19%; }
  .mstep:nth-child(2) .mstep__ghost { animation-range: cover 17% cover 27%; }
  .mstep:nth-child(3) .mstep__ghost { animation-range: cover 25% cover 35%; }
  .mstep:nth-child(4) .mstep__ghost { animation-range: cover 33% cover 43%; }
  .mstep:nth-child(5) .mstep__ghost { animation-range: cover 40% cover 50%; }
  .mstep:nth-child(1) .mstep__title, .mstep:nth-child(1) .mstep__text { animation-range: cover 11% cover 21%; }
  .mstep:nth-child(2) .mstep__title, .mstep:nth-child(2) .mstep__text { animation-range: cover 19% cover 29%; }
  .mstep:nth-child(3) .mstep__title, .mstep:nth-child(3) .mstep__text { animation-range: cover 27% cover 37%; }
  .mstep:nth-child(4) .mstep__title, .mstep:nth-child(4) .mstep__text { animation-range: cover 35% cover 45%; }
  .mstep:nth-child(5) .mstep__title, .mstep:nth-child(5) .mstep__text { animation-range: cover 42% cover 52%; }

  /* — DALLAM — */
  .dallam__rail    { animation: sda-left linear both;  animation-timeline: view(); animation-range: cover 0% cover 26%; }
  .dallam__text    { animation: sda-rise linear both;  animation-timeline: view(); animation-range: cover 8% cover 30%; }
  .dallam__fiche   { animation: sda-right linear both; animation-timeline: view(); animation-range: cover 0% cover 30%; }
  .dallam__classif { animation: sda-fade linear both;  animation-timeline: view(); animation-range: cover 0% cover 24%; }

  /* — Contact — */
  .contact__form { animation: sda-right linear both; animation-timeline: view(); animation-range: cover 0% cover 28%; }

  /* — Footer : plages `entry` (dépendent de la hauteur de l'élément,
       pas du viewport) — garanties atteignables même pinné en fin de page — */
  .footer__top > * { animation: sda-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .footer__top > *:nth-child(2) { animation-range: entry 10% entry 80%; }
  .footer__top > *:nth-child(3) { animation-range: entry 20% entry 90%; }
  .footer__top > *:nth-child(4) { animation-range: entry 30% entry 100%; }
  .footer__bottom { animation: sda-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* =====================================================================
   ACCESSIBILITÉ — mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__bg {
    background:
      radial-gradient(120% 100% at 80% 0%, rgba(53, 68, 89, 0.6), transparent 60%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, #01101f 100%);
  }
  *,
  *::before,
  *::after {
    /* timeline auto : ramène les animations au scroll sur la timeline
       temporelle, où la durée ~0 les termine instantanément (état final) */
    animation-timeline: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .eyebrow, .hero__title, .hero__subtitle, .hero__actions,
  .hero__foot, .nav { opacity: 1 !important; }
}