/* Archi-Tek — site vitrine (charte 2026-06, direction hero C×A validée par AG) */

/* ---------- utilitaires ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 16px;
}
.skip-link:focus { left: 0; }

.section-head {
  max-width: 720px;
  padding: calc(14 * var(--u)) var(--margin) calc(8 * var(--u));
}
.section-head .display { margin-top: calc(2 * var(--u)); }
.section-head .lead { margin-top: calc(3 * var(--u)); color: var(--slate); }

/* révélations — 240 ms ease-out, un élément à la fois (stagger discret par délai) */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(calc(2 * var(--u)));
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(3 * var(--u)) var(--margin);
}
.brand img { display: block; height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.navlink {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: color var(--t-fast) var(--ease);
}
.navlink:hover { color: var(--white); }
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  border-top: 2px solid var(--cyan);
  transition: right var(--t-base) var(--ease);
}
.navlink:hover::after { right: 0; }
.btn-header {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  padding: calc(1.25 * var(--u)) calc(2.5 * var(--u));
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-header:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* ---------- boutons charte ---------- */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: calc(1.5 * var(--u)) calc(3 * var(--u));
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  transition: background var(--t-fast) var(--ease);
}
.btn-primary:hover { background: #2b2b2b; }
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: calc(1.5 * var(--u)) calc(3 * var(--u));
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.link-arrow {
  color: var(--cyan-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.link-arrow:hover { color: var(--ink); }

/* ---------- ACTE 1 — hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; display: block; }
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.45) 0%, rgba(17, 17, 17, 0) 26%),
    linear-gradient(115deg, rgba(17, 17, 17, 0.38) 0%, rgba(17, 17, 17, 0) 55%),
    linear-gradient(0deg, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0) 30%),
    radial-gradient(ellipse 38% 44% at 76% 38%, rgba(17, 17, 17, 0.62), rgba(17, 17, 17, 0) 70%);
}

/* le Toit coté (registre planche de l'option A) */
.hero-motif {
  position: absolute;
  right: calc(8 * var(--u));
  top: 22%;
  width: min(32vw, 500px);
}
.hero-motif svg { display: block; width: 100%; height: auto; }
.hero-motif .roof-trace {
  stroke: var(--cyan);
  stroke-width: 0.75;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.hero-motif .roof-fill { opacity: 0; }
.js .hero-motif.run .roof-trace { animation: trace 1100ms var(--ease) 350ms forwards; }
.js .hero-motif.run .roof-fill { animation: fillin var(--t-base) var(--ease) 1450ms forwards; }
.js .hero-motif.run .cotes { opacity: 0; animation: fillin var(--t-slow) var(--ease) 1750ms forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { opacity: 1; } }
.hero-motif .cotes line { stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.35; }
.hero-motif .cotes text {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 4.6px;
  letter-spacing: 0.02em;
  fill: rgba(255, 255, 255, 0.92);
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-motif .roof-trace, .js .hero-motif.run .roof-trace { stroke-dashoffset: 0; animation: none; }
  .js .hero-motif .roof-fill, .js .hero-motif.run .roof-fill,
  .js .hero-motif .cotes, .js .hero-motif.run .cotes { opacity: 1; animation: none; }
}

/* cartouche blanc (couverture brand book) */
.plate {
  position: absolute;
  left: 0;
  bottom: calc(9 * var(--u));
  background: var(--white);
  border-top: 0.5px solid var(--hairline);
  padding: calc(5 * var(--u)) calc(7 * var(--u)) calc(5 * var(--u)) var(--margin);
  max-width: min(720px, 88vw);
}
@media (min-width: 768px) {
  .js .plate { opacity: 0; transform: translateY(calc(2 * var(--u))); animation: platein var(--t-slow) var(--ease) 120ms forwards; }
}
@keyframes platein { to { opacity: 1; transform: none; } }
.js .hero.settled .plate { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .js .plate { opacity: 1; transform: none; animation: none; } }
.plate-lockup { display: block; height: 44px; width: auto; margin-bottom: calc(5 * var(--u)); }
.plate h1 {
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin-top: calc(2 * var(--u));
}
.plate-lead { margin-top: calc(3 * var(--u)); color: var(--slate); max-width: 46ch; }
.plate-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(4 * var(--u));
  margin-top: calc(4 * var(--u));
}
.hero-annot {
  position: absolute;
  right: var(--margin);
  bottom: calc(3 * var(--u));
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- ACTE 2 — le moment amont ---------- */
.amont-intro {
  max-width: 760px;
  padding: calc(16 * var(--u)) var(--margin) calc(10 * var(--u));
}
.amont-intro .display { margin-top: calc(2 * var(--u)); max-width: 16em; }
.amont-intro .lead { margin-top: calc(3 * var(--u)); color: var(--slate); max-width: 52ch; }

.panel {
  position: relative;
  min-height: 86svh;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.panel-bg { position: absolute; inset: 0; display: block; }
.panel-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(17, 17, 17, 0.5) 0%, rgba(17, 17, 17, 0.06) 45%);
}
.panel-card {
  position: relative;
  z-index: 1;
  margin: 0 0 calc(8 * var(--u)) var(--margin);
  max-width: 460px;
  background: var(--white);
  padding: calc(4 * var(--u)) calc(5 * var(--u));
}
.panel-card .caption { color: var(--cyan-text); }
.panel-card .title { margin-top: calc(1.5 * var(--u)); }
.panel-card p:last-child { margin-top: calc(1.5 * var(--u)); color: var(--slate); }

/* ---------- ACTE 3 — la plateforme ---------- */
.plateforme { background: var(--white); }
.duo-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: calc(8 * var(--u));
  align-items: start;
  padding: 0 var(--margin) calc(16 * var(--u));
  max-width: 1280px;
}
.duo-side .icon {
  width: 40px; height: 40px;
  stroke: var(--ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.duo-side .title { margin-top: calc(3 * var(--u)); }
.duo-side > p { margin-top: calc(2 * var(--u)); color: var(--slate); max-width: 44ch; }
.duo-list { list-style: none; margin-top: calc(4 * var(--u)); }
.duo-list li {
  display: flex;
  align-items: baseline;
  gap: calc(2 * var(--u));
  padding: calc(2 * var(--u)) 0;
  border-top: 0.5px solid var(--hairline);
}
.duo-list .mono { font-size: var(--fs-caption); color: var(--cyan-text); }

.duo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  padding-top: calc(2 * var(--u));
}
.duo-center img { width: 72px; height: 72px; }
.duo-line { width: 0.5px; height: calc(12 * var(--u)); background: var(--hairline); }
.duo-center .caption { text-align: center; text-transform: uppercase; letter-spacing: 0.12em; }
.duo-center .caption span { display: block; }

/* ---------- ACTE 4 — les projets ---------- */
.projets { background: var(--paper); }
.feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(3 * var(--u));
  padding: 0 var(--margin);
  max-width: 1280px;
}
.card {
  background: var(--white);
  border: 0.5px solid var(--hairline);
  padding: calc(3 * var(--u));
  transition: border-color var(--t-fast) var(--ease);
}
.card:hover { border-color: #b9c4cd; }
.card.detected { border-left: 2px solid var(--cyan); }
.card-state { font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--slate); }
.card.detected .card-state { color: var(--cyan-text); }
.card .title { margin-top: calc(1.5 * var(--u)); }
.card-loc { margin-top: calc(0.5 * var(--u)); color: var(--slate); }
.card-tags {
  margin-top: calc(2.5 * var(--u));
  padding-top: calc(2 * var(--u));
  border-top: 0.5px solid var(--hairline);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--slate);
}
.feed-note {
  padding: calc(3 * var(--u)) var(--margin) calc(14 * var(--u));
}

/* ---------- ACTE 5 — les chiffres ---------- */
.chiffres { background: var(--ink); }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  padding: calc(16 * var(--u)) var(--margin);
  max-width: 1440px;
}
.stat { border-top: 0.5px solid rgba(255, 255, 255, 0.18); padding-top: calc(3 * var(--u)); }
.stat-num {
  font-size: clamp(3rem, 1.4rem + 4.8vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: calc(2 * var(--u));
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-bright);
}

/* ---------- ACTE 6 — la précision ---------- */
.precision { background: var(--white); }
.construction {
  padding: 0 var(--margin) calc(16 * var(--u));
  max-width: 980px;
  margin: 0 auto;
}
.construction img { display: block; width: 100%; height: auto; }
.construction figcaption { margin-top: calc(3 * var(--u)); text-align: center; }

/* ---------- ACTE 7 — CTA ---------- */
.cta {
  background: var(--paper);
  padding: calc(18 * var(--u)) var(--margin);
  text-align: center;
}
.cta .display { max-width: 18em; margin: 0 auto; }
.cta .lead { margin: calc(3 * var(--u)) auto 0; color: var(--slate); max-width: 52ch; }
.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(3 * var(--u));
  margin-top: calc(6 * var(--u));
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  padding: calc(10 * var(--u)) var(--margin);
}
.footer-lockup { display: block; height: 22px; width: auto; }
.footer-contact { margin-top: calc(4 * var(--u)); color: rgba(255, 255, 255, 0.72); }
.footer-note {
  margin-top: calc(2 * var(--u));
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .hero-motif { width: 36vw; top: 18%; }
  .duo-grid { grid-template-columns: minmax(0, 1fr); gap: calc(6 * var(--u)); }
  .duo-center { flex-direction: row; padding: calc(2 * var(--u)) 0; }
  .duo-line { width: calc(10 * var(--u)); height: 0.5px; }
  .duo-center .caption span { display: inline; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --margin: calc(3 * var(--u)); }
  .navlink { display: none; }
  .hero-motif { display: none; }
  .hero-annot { display: none; }
  .plate { bottom: 0; max-width: 100%; border-top: none; padding-top: calc(4 * var(--u)); }
  .plate-lockup { height: 32px; }
  .feed { grid-template-columns: 1fr; }
  .panel-card { margin-right: var(--margin); }
  .stats { grid-template-columns: 1fr; gap: calc(5 * var(--u)); }
  .duo-side > p, .duo-side .duo-list { max-width: none; }
}
/* cibles tactiles ≥ 44 px (mobile + tablette) */
@media (max-width: 1023px) {
  .btn-header, .btn-primary, .btn-secondary, .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .link-arrow { padding-block: calc(1.5 * var(--u)); }
}

/* ---------- passe couleur (feedback AG 2026-06-12) ---------- */
.accent { color: var(--cyan-text); }
.kicker { color: var(--cyan-text); }
.stat-num { color: var(--cyan-bright); }
.stat-label { color: rgba(255, 255, 255, 0.62); }
.card-state { color: var(--cyan-text); }
.hero-motif .cotes line { stroke: rgba(127, 227, 242, 0.65); }
.hero-motif .cotes text { fill: var(--cyan-bright); }

/* ============================================================
   PHASE 6 — EFFET WAHOU : chorégraphie de scroll
   (transform / opacity / clip-path uniquement ; fallback statique
   sans JS et en prefers-reduced-motion)
   ============================================================ */

/* ---------- révélation des titres au masque ---------- */
.mr { display: block; overflow: hidden; }
.mr-in { display: block; }
.js:not(.reduced) .mask-title .mr-in,
.js:not(.reduced) .plate h1 .mr-in {
  transform: translateY(112%);
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.js:not(.reduced) .mask-title.is-in .mr-in,
.js:not(.reduced) .plate.is-open h1 .mr-in { transform: none; }

/* ---------- séquence d'ouverture du hero (desktop, JS, motion OK) ---------- */
.hero-line {
  position: absolute;
  left: var(--margin); right: var(--margin);
  top: 50%;
  border-top: 1px solid var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.js.opening-armed:not(.reduced) .hero-line { opacity: 1; }
.js .hero.s1 .hero-line { transform: scaleX(1); transition: transform 480ms cubic-bezier(0.22,0.61,0.21,1); }
.js .hero.s3 .hero-line { opacity: 0; transition: opacity 280ms var(--ease); }

.js.opening-armed:not(.reduced) .hero-bg {
  clip-path: polygon(-40% 0, -10% 0, -40% 100%, -70% 100%);
}
.js.opening-armed:not(.reduced) .hero.s3 .hero-bg {
  clip-path: polygon(-40% 0, 160% 0, 130% 100%, -70% 100%);
  transition: clip-path 950ms cubic-bezier(0.33, 0, 0.16, 1);
}
.js.opening-armed:not(.reduced) .hero-scrim,
.js.opening-armed:not(.reduced) .hero-annot { opacity: 0; }
.js.opening-armed:not(.reduced) .hero.s3 .hero-scrim,
.js.opening-armed:not(.reduced) .hero.s4 .hero-annot { opacity: 1; transition: opacity 700ms var(--ease); }

.js.opening-armed:not(.reduced) .plate { opacity: 0; transform: translateY(calc(3 * var(--u))); animation: none; }
.js.opening-armed:not(.reduced) .hero.s4 .plate {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform 420ms cubic-bezier(0.22,0.61,0.21,1);
}


/* ---------- acte 2 : scrollytelling en panneaux empilés ---------- */
@media (min-width: 768px) {
  .js-stage .amont-stage { height: 340svh; }
  .js-stage .amont-sticky {
    position: sticky; top: 0;
    height: 100svh;
    overflow: hidden;
  }
  .js-stage .amont-sticky .panel {
    position: absolute; inset: 0;
    min-height: 0;
    visibility: hidden;
    isolation: isolate;
  }
  .js-stage .amont-sticky .panel.on,
  .js-stage .amont-sticky .panel:first-child { visibility: visible; }
  .js-stage .amont-sticky .panel .panel-card {
    opacity: 0;
    transform: translateY(calc(3 * var(--u)));
    transition: opacity var(--t-slow) var(--ease), transform 420ms cubic-bezier(0.22,0.61,0.21,1);
  }
  .js-stage .amont-sticky .panel.card-on .panel-card { opacity: 1; transform: none; }
  /* compteur de scène, registre cotation */
  .amont-counter {
    position: absolute;
    right: var(--margin); bottom: calc(3 * var(--u));
    z-index: 2;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.72);
    display: none;
  }
  .js-stage .amont-counter { display: block; }

}

/* ---------- acte 6 : le dessin se trace au scroll ---------- */
.construction-clip { position: relative; }
.js:not(.reduced) .construction-clip img { clip-path: inset(0 100% 0 0); }
.construction-clip .plotter {
  position: absolute; top: -2%; bottom: -2%; left: 0;
  border-left: 1px solid var(--cyan);
  opacity: 0;
  pointer-events: none;
}

/* ---------- filets qui se tracent à l'entrée ---------- */
.section-head { position: relative; }
.section-head::before {
  content: ""; position: absolute;
  left: var(--margin); right: var(--margin); top: calc(11 * var(--u));
  border-top: 0.5px solid var(--hairline);
  transform: scaleX(0); transform-origin: left center;
}
.js:not(.reduced) .section-head.is-in::before { transform: scaleX(1); transition: transform 700ms cubic-bezier(0.22,0.61,0.21,1); }
.js.reduced .section-head::before, html:not(.js) .section-head::before { transform: scaleX(1); }

.stat { border-top: none; position: relative; }
.stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.18);
  transform: scaleX(0); transform-origin: left center;
}
.js:not(.reduced) .stat.is-in::before { transform: scaleX(1); transition: transform 700ms cubic-bezier(0.22,0.61,0.21,1); }
.js.reduced .stat::before, html:not(.js) .stat::before { transform: scaleX(1); }

/* ---------- fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .mask-title .mr-in, .js .plate h1 .mr-in { transform: none !important; }
  .js .hero-bg { clip-path: none !important; }
  .js .plate { opacity: 1 !important; transform: none !important; }
  .js .hero-scrim, .js .hero-annot { opacity: 1 !important; }
  .js .hero-line { display: none; }
  .js .construction-clip img { clip-path: none !important; }
}