/* NAAR Technology Combustion — demo page d'accueil
   HTML/CSS/JS purs. Palette verrouillee : gris neutre, navy, un seul accent orange. */

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

:root {
  --bg:        #F1F1F0;
  --bg-2:      #EAEAE8;
  --navy:      #0D293C;
  --orange:    #FF6B00;
  --ink:       #12181C;
  --ink-2:     #5B656C;
  --rule:      rgba(13, 41, 60, .13);
  --rule-2:    rgba(13, 41, 60, .30);
  --gut:       clamp(20px, 5vw, 56px);
  --wrap:      1328px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- typographie ---------- */

h1, h2, h3 { font-weight: 200; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(30px, 5.1vw, 60px); max-width: 15ch; }
h2 { font-size: clamp(23px, 3.2vw, 38px); }
h3 { font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 10.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .17em; color: var(--ink-2);
}
.mono i { font-style: normal; opacity: .55; }
.num { color: var(--orange); }

.lede { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-2); max-width: 46ch; margin-top: 22px; }

.ori { margin-bottom: clamp(28px, 4vw, 54px); }

/* ---------- boutons ---------- */

.cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--orange); color: #fff; text-decoration: none;
  padding: 15px 26px; font-size: 13.5px; font-weight: 400; letter-spacing: .01em;
  border: 0; cursor: pointer; font-family: inherit;
}
.cta span { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.cta:hover { background: #E85F00; }

.ghost {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule-2); padding: 8px 16px;
  font-size: 12.5px; text-decoration: none; white-space: nowrap;
}
.ghost:hover { border-color: var(--ink); }

/* ---------- navigation ---------- */

.nav {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 38px);
  padding: 20px var(--gut); position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { height: 32px; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt b { font-size: 16px; font-weight: 500; letter-spacing: .19em; }
.brand-txt i {
  font-family: "IBM Plex Mono", monospace; font-style: normal;
  font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 3px;
}
.nav-links { display: flex; gap: clamp(16px, 2.2vw, 30px); margin-left: auto; }
.nav-links a { font-size: 13.5px; text-decoration: none; }
.nav-links a:hover { color: var(--orange); }
.lang { display: flex; gap: 9px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; }
.lang a { color: var(--ink-2); text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang span { color: var(--ink); }

/* ---------- 001 premier ecran : planche cotee ---------- */

.hero { padding: clamp(8px, 2vw, 26px) var(--gut) clamp(40px, 6vw, 78px); }
.plate {
  position: relative; max-width: var(--wrap); margin-inline: auto;
  border: 1px solid var(--rule);
  padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 36px) clamp(16px, 2vw, 24px);
}
.cx { position: absolute; width: 13px; height: 13px; }
.cx::before, .cx::after { content: ""; position: absolute; background: var(--rule-2); }
.cx::before { left: 0; right: 0; top: 6px; height: 1px; }
.cx::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.cx.tl { left: -7px; top: -7px; } .cx.tr { right: -7px; top: -7px; }
.cx.bl { left: -7px; bottom: -7px; } .cx.br { right: -7px; bottom: -7px; }

.plate-top, .plate-bot { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.plate-top { padding-bottom: clamp(14px, 2vw, 20px); border-bottom: 1px solid var(--rule); }
.plate-bot { padding-top: clamp(14px, 2vw, 20px); border-top: 1px solid var(--rule); }
.plate-bot p { display: flex; flex-direction: column; gap: 7px; }
.plate-bot b { font-weight: 400; color: var(--ink); letter-spacing: .12em; font-size: 10.5px; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(30px, 5vw, 62px) 0;
}
.hero-copy .cta { margin-top: clamp(28px, 3.6vw, 44px); }

/* objet + couche d'annotation */
.hero-obj { position: relative; }
.hero-obj img { width: 100%; }

/* reperes numerotes poses sur l'objet + legende sous la cote : aucune etiquette
   ne chevauche le rendu, quelle que soit la largeur */
.mk, .dim { display: none; }

@media (min-width: 1024px) {
  .mk {
    display: grid; place-items: center; position: absolute;
    width: 17px; height: 17px; border-radius: 50%;
    border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
    font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: 0;
    transform: translate(-50%, -50%);
  }
  .mk.m1 { left: 90%;   top: 62%; }
  .mk.m2 { left: 17%;   top: 71%; }

  .dim {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 16px;
  }
  .dim em {
    display: block; width: 62%; height: 5px;
    border-left: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2);
    background: linear-gradient(var(--rule-2), var(--rule-2)) center / 100% 1px no-repeat;
  }
}

/* ---------- 002 positionnement (navy) ---------- */

.stance { background: var(--navy); color: #F4F5F5; padding: clamp(56px, 9vw, 128px) 0; }
.stance .mono { color: rgba(244, 245, 245, .55); }
.stance h2 { max-width: 22ch; }
.stance-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 6vw, 76px);
  border-top: 1px solid rgba(244, 245, 245, .17); padding-top: 22px;
}
.stance-specs dt { color: rgba(244, 245, 245, .5); }
.stance-specs dd { color: #F4F5F5; margin-top: 8px; letter-spacing: .12em; }

/* ---------- 003 piliers ---------- */

.piliers { padding: clamp(56px, 9vw, 124px) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cards article {
  padding: 0 clamp(16px, 2vw, 30px) clamp(24px, 3vw, 38px);
  border-left: 1px solid var(--rule);
}
.cards article:first-child { padding-left: 0; border-left: 0; }
.cards .idx { color: var(--orange); margin-bottom: 20px; }
.cards h3 { margin-bottom: 16px; max-width: 18ch; }
.cards p:not(.mono) { font-size: 14.5px; color: var(--ink-2); max-width: 34ch; }
.cards .tag { margin-top: 22px; color: var(--ink); letter-spacing: .12em; }

/* ---------- 004 industries ---------- */

.industries { padding: clamp(50px, 7vw, 104px) 0; border-top: 1px solid var(--rule); }
.sectors { list-style: none; }
.sectors li { border-bottom: 1px solid var(--rule); }
.sectors li:first-child { border-top: 1px solid var(--rule); }
.sectors a {
  display: flex; align-items: baseline; gap: clamp(18px, 3vw, 44px);
  padding: clamp(16px, 2.1vw, 26px) 0; text-decoration: none;
  font-size: clamp(19px, 2.4vw, 30px); font-weight: 200; letter-spacing: -.015em;
}
.sectors a:hover { color: var(--orange); }
.sectors span { color: var(--ink-2); }
.sectors a:hover span { color: var(--orange); }
.foot-note { margin-top: 20px; }

/* ---------- 005 deroule ---------- */

.frise { padding: clamp(50px, 7vw, 104px) 0; border-top: 1px solid var(--rule); }
.steps {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  border-top: 1px solid var(--rule-2);
}
.steps li {
  position: relative; padding: 22px 12px 6px 0;
  display: flex; flex-direction: column; gap: 7px;
}
.steps li::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 1px; height: 8px;
  background: var(--rule-2);
}
.steps li:last-child::before { background: var(--orange); height: 12px; top: -6px; }
.steps b { font-weight: 400; font-size: 14.5px; }
.steps i {
  font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.proof {
  margin-top: clamp(36px, 5vw, 62px); padding: 14px 18px;
  border: 1px dashed var(--rule-2); display: inline-block;
}

/* ---------- 006 contact ---------- */

.contact { padding: clamp(50px, 7vw, 104px) 0 clamp(56px, 8vw, 112px); border-top: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(34px, 5vw, 76px); }
.contact h2 { margin-bottom: 30px; }
address { font-style: normal; line-height: 2.1; letter-spacing: .12em; }
address a { text-decoration: none; color: var(--ink); }
address a:hover { color: var(--orange); }

form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-content: start; }
.f { display: flex; flex-direction: column; gap: 8px; }
.full { grid-column: 1 / -1; }
form label { color: var(--ink-2); }
form input, form select, form textarea {
  font-family: inherit; font-size: 14.5px; font-weight: 300; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 9px 0; border-radius: 0; width: 100%;
}
form textarea { resize: vertical; }
form select { appearance: none; cursor: pointer; }
form :is(input, select, textarea):focus { outline: 0; border-bottom-color: var(--orange); }
form [aria-invalid="true"] { border-bottom-color: var(--orange); }
.err { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .14em;
       text-transform: uppercase; color: var(--orange); }
.ok { grid-column: 1 / -1; color: var(--ink); border-left: 2px solid var(--orange); padding-left: 14px; }

/* ---------- pied ---------- */

.foot { background: var(--navy); color: rgba(244, 245, 245, .62); padding: clamp(30px, 4vw, 44px) 0; }
.foot .mono { color: inherit; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 4vw, 52px); align-items: center; }
.lang-foot { display: flex; gap: 9px; margin-left: auto; }
.lang-foot span { color: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-obj { order: -1; }
  .cards article { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 26px; }
  .cards article:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 720px) {
  /* ligne 1 : marque + bouton ; ligne 2 : liens + langues */
  .nav { flex-wrap: wrap; gap: 16px 18px; }
  .brand { order: 1; }
  .ghost { order: 2; margin-left: auto; }
  .nav-links { order: 3; margin-left: 0; }
  .lang { order: 4; margin-left: auto; }
  form { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}