/* ============================================================
   OPEN ENGINEERING — feuille de style principale
   Inspiration structurelle : cargoarchitecture.ca
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#0c0d0f;
  --white:#ffffff;
  --off:#f4f4f2;
  --line:#d9d9d6;
  --line-dark:rgba(255,255,255,0.18);
  --accent:#1f4dff;   /* bleu technique */
  --accent-2:#ff5a1f; /* alerte / repère */
  --muted:#8a8a86;
  --muted-dark:rgba(255,255,255,0.55);
  --font-display:"Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body:"Inter", "Helvetica Neue", Arial, sans-serif;
  --container:1360px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  line-height:1.5;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 48px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; margin:0; letter-spacing:-0.01em; }

.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}

/* ---------------------------------------------------------
   Thèmes clair / sombre (les pages basculent le thème)
--------------------------------------------------------- */
body.theme-dark{ background:var(--black); color:var(--white); }
body.theme-dark .eyebrow{ color:#7c93ff; }

/* ---------------------------------------------------------
   NAV
--------------------------------------------------------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
body.theme-dark .site-nav{
  background:var(--black);
  border-bottom:1px solid var(--line-dark);
}
.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:20px;
  padding-bottom:20px;
}
.brand{
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.brand span{ color:var(--accent); }
.nav-links{
  display:flex;
  gap:34px;
  flex:1;
  justify-content:center;
}
.nav-links a{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover,
.nav-links a.active{ border-bottom-color:var(--accent); }
.nav-cta{
  display:inline-block;
  background:var(--black);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 22px;
  border-radius:2px;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease;
}
.nav-cta:hover{ background:var(--accent); }
body.theme-dark .nav-cta{ background:var(--white); color:var(--black); }
body.theme-dark .nav-cta:hover{ background:var(--accent); color:var(--white); }

.nav-toggle{
  display:none;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  color:inherit;
  border:1px solid currentColor;
  border-radius:2px;
  padding:8px 10px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}

/* ---------------------------------------------------------
   Grille de visuels techniques (remplace les photos)
--------------------------------------------------------- */
.tech-panel{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:2px;
  background:
    linear-gradient(155deg, #0d1b4c 0%, #1f4dff 55%, #0c0d0f 100%);
}
.tech-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 34px);
  mix-blend-mode:screen;
}
.tech-panel svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.tech-panel .tag{
  position:absolute;
  left:16px; bottom:14px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
}
.tech-panel.alt{ background:linear-gradient(155deg, #241304 0%, #ff5a1f 55%, #0c0d0f 100%); }
.tech-panel.mono{ background:linear-gradient(155deg, #16171a 0%, #33363d 55%, #0c0d0f 100%); }
.tech-panel.deep{ background:linear-gradient(155deg, #071018 0%, #103a4a 55%, #0c0d0f 100%); }

/* ---------------------------------------------------------
   HOME — grille alternée type "cargoarchitecture"
--------------------------------------------------------- */
.gallery-row{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  padding:72px 0;
  align-items:end;
}
.gallery-row.reverse{ grid-template-columns:0.85fr 1.15fr; }
.gallery-row.reverse .gallery-item:first-child{ order:2; }
.gallery-item figcaption{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:16px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gallery-item figcaption .loc{ color:var(--muted); font-weight:500; letter-spacing:.04em; }
.gallery-item figcaption .arrow{ color:var(--accent); margin-left:8px; transition:transform .25s ease; display:inline-block; }
.gallery-link{ display:block; color:inherit; text-decoration:none; }
.gallery-link .tech-panel{ transition:box-shadow .25s ease, transform .25s ease; }
.gallery-link:hover .tech-panel{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.18); }
.gallery-link:hover figcaption .loc{ color:var(--black); }
.gallery-link:hover figcaption .arrow{ transform:translateX(4px); }

.brandmark{
  padding:40px 0 90px;
  border-top:1px solid var(--line);
}
.brandmark .wrap{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
}
.brandmark span{
  font-family:var(--font-display);
  font-size:clamp(48px, 9vw, 130px);
  line-height:0.9;
  letter-spacing:-0.01em;
}
.brandmark span:last-child{ color:var(--accent); }

.intro-split{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:70px;
  padding:100px 0;
  border-top:1px solid var(--line);
}
.intro-split h2{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.15;
}
.intro-split .copy{ max-width:52ch; }
.intro-split p{ font-size:15.5px; color:#4a4a47; line-height:1.75; margin:0 0 22px; }
.stat-row{ display:flex; gap:48px; margin-top:36px; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--font-display); font-size:34px; }
.stat span{ font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }

.strip{
  background:var(--black);
  color:var(--white);
  padding:90px 0;
}
.strip .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:60px; flex-wrap:wrap; }
.strip h2{ font-size:clamp(26px,3vw,40px); max-width:14ch; }
.strip .head p{ max-width:360px; font-size:14px; color:var(--muted-dark); line-height:1.7; }
.pill-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:11px 20px;
  font-size:13px;
  letter-spacing:.02em;
}

.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:34px 0;
  border-top:1px solid;
  border-bottom:1px solid;
  border-color:var(--line);
  flex-wrap:wrap;
}
body.theme-dark .cta-band{ border-color:var(--line-dark); }
.cta-band .title{ font-family:var(--font-display); font-size:clamp(22px,3vw,34px); text-transform:uppercase; }
.go-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:18px;
}
.go-link .arrows{ display:inline-flex; gap:2px; }
.go-link .arrows span{ transition:transform .25s ease; }
.go-link:hover .arrows span:nth-child(1){ transform:translateX(4px); }
.go-link:hover .arrows span:nth-child(2){ transform:translateX(8px); }
.go-link:hover .arrows span:nth-child(3){ transform:translateX(12px); }

/* ---------------------------------------------------------
   MISSIONS (liste de projets/références)
--------------------------------------------------------- */
.page-head{
  padding:70px 0 40px;
  border-bottom:1px solid var(--line);
}
body.theme-dark .page-head{ border-color:var(--line-dark); }
.page-head h1{ font-size:clamp(34px,6vw,72px); max-width:16ch; line-height:.98; }
.page-head p{ max-width:56ch; font-size:15.5px; color:#4a4a47; margin-top:22px; line-height:1.7; }
body.theme-dark .page-head p{ color:var(--muted-dark); }

.mission{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  padding:64px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  scroll-margin-top:100px;
}
.mission.reverse{ grid-template-columns:1.15fr 0.85fr; }
.mission.reverse .mission-media{ order:2; }
.mission-media .tech-panel{ aspect-ratio:5/4; }
.mission-body .num{ font-family:var(--font-display); font-size:13px; color:var(--muted); }
.mission-body h3{ font-size:clamp(22px,2.6vw,32px); margin:10px 0 6px; }
.mission-body .role{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:block; }
.mission-body p{ font-size:14.5px; line-height:1.75; color:#4a4a47; margin:0 0 22px; }
.mission-body .meta{ display:flex; gap:24px; flex-wrap:wrap; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.mission-body ul.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.mission-body ul.tags li{
  font-size:11.5px;
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:999px;
  color:#4a4a47;
}

/* ---------------------------------------------------------
   A PROPOS — page sombre, sommaire vertical fixe
--------------------------------------------------------- */
.about-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:70vh;
}
.about-hero .visual{ position:relative; }
.about-hero .visual .tech-panel{ height:100%; aspect-ratio:auto; border-radius:0; }
.about-hero .toc{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:60px;
}
.about-hero .toc a{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,30px);
  padding:14px 0;
  border-top:1px solid var(--line-dark);
  color:var(--muted-dark);
  transition:color .2s ease, padding-left .2s ease;
}
.about-hero .toc a:hover{ color:var(--white); padding-left:10px; }
.about-hero .toc a:last-child{ border-bottom:1px solid var(--line-dark); }

.about-section{
  padding:100px 0;
  border-bottom:1px solid var(--line-dark);
}
.about-section .label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:18px; display:block;
}
.about-section h2{ font-size:clamp(28px,3.6vw,46px); max-width:18ch; margin-bottom:30px; }
.about-grid-2{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; }
.about-section p{ font-size:15px; line-height:1.8; color:var(--muted-dark); margin:0 0 20px; max-width:60ch; }

.skill-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:10px; }
.skill-card{ border:1px solid var(--line-dark); border-radius:2px; padding:26px; }
.skill-card .n{ font-family:var(--font-display); font-size:13px; color:var(--muted-dark); }
.skill-card h4{ font-size:16px; margin:14px 0 8px; text-transform:none; font-family:var(--font-body); font-weight:700; }
.skill-card p{ font-size:13.5px; margin:0; }

.timeline{ border-top:1px solid var(--line-dark); margin-top:20px; }
.timeline-row{
  display:grid;
  grid-template-columns:140px 1fr 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line-dark);
  font-size:13.5px;
}
.timeline-row .period{ color:var(--muted); letter-spacing:.03em; }
.timeline-row .org{ font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.timeline-row .role{ color:#4a4a47; }
body.theme-dark .timeline-row .period,
body.theme-dark .timeline-row .role{ color:var(--muted-dark); }

.cert-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px; }
.cert-list li{
  border:1px solid var(--line-dark);
  border-radius:2px;
  padding:18px 22px;
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}
.cert-list li .src{ color:var(--muted-dark); font-size:12px; white-space:nowrap; }

/* ---------------------------------------------------------
   EXPERTISE — lignes numérotées façon "culture"
--------------------------------------------------------- */
.numbered-list{ border-top:1px solid var(--line); }
body.theme-dark .numbered-list{ border-color:var(--line-dark); }
.numbered-row{
  display:grid;
  grid-template-columns:80px 1fr 1.4fr;
  gap:32px;
  align-items:center;
  padding:34px 0;
  border-bottom:1px solid var(--line);
  transition:opacity .35s ease;
}
body.theme-dark .numbered-row{ border-color:var(--line-dark); }
.numbered-row .idx{ font-family:var(--font-display); font-size:14px; color:var(--muted); }
.numbered-row h3{ font-size:clamp(17px,2vw,22px); }
.numbered-row p{ font-size:14.5px; line-height:1.7; color:#4a4a47; margin:0; }
body.theme-dark .numbered-row p{ color:var(--muted-dark); }
.numbered-list.dim .numbered-row{ opacity:.35; }
.numbered-list.dim .numbered-row:hover,
.numbered-list.dim .numbered-row.in-view{ opacity:1; }

.method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:20px; }
body.theme-dark .method-grid{ background:var(--line-dark); }
.method-card{ background:var(--white); padding:34px 26px; }
body.theme-dark .method-card{ background:var(--black); }
.method-card .n{ font-family:var(--font-display); font-size:13px; color:var(--accent); }
.method-card h4{ font-size:15px; margin:16px 0 8px; font-family:var(--font-body); font-weight:700; text-transform:none; }
.method-card p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */
.contact-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding:26px 0;
  border-bottom:1px solid var(--line-dark);
}
.contact-links a{
  border:1px solid var(--line-dark);
  padding:12px 20px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:2px;
}
.contact-links a:hover{ background:var(--white); color:var(--black); }

.office-row{
  display:grid;
  grid-template-columns:60px 1fr 1fr 1fr;
  gap:24px;
  padding:38px 0;
  border-bottom:1px solid var(--line-dark);
  align-items:center;
}
.office-row .n{ font-family:var(--font-display); font-size:14px; color:var(--muted-dark); }
.office-row h3{ font-size:20px; }
.office-row p{ margin:0; font-size:14px; color:var(--muted-dark); line-height:1.6; }

.big-cta{
  margin:60px 0;
  background:var(--white);
  color:var(--black);
  border-radius:2px;
  padding:44px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.big-cta .title{ font-family:var(--font-display); font-size:clamp(22px,3.4vw,36px); }
.big-cta .go{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:22px;
  background:var(--black);
  color:var(--white);
  padding:16px 26px;
  border-radius:2px;
}

.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:10px; }
.form-grid input, .form-grid textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-dark);
  color:var(--white);
  font-family:inherit;
  font-size:15px;
  padding:10px 0;
  outline:none;
}
.form-grid input::placeholder, .form-grid textarea::placeholder{ color:var(--muted-dark); }
.form-submit{
  margin-top:30px;
  background:var(--white);
  color:var(--black);
  border:none;
  padding:16px 30px;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.04em;
  border-radius:2px;
  cursor:pointer;
}
.form-submit:hover{ background:var(--accent); color:var(--white); }

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding:80px 0 26px;
}
.site-footer .top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  flex-wrap:wrap;
  padding-bottom:50px;
  border-bottom:1px solid var(--line-dark);
}
.site-footer .top span{
  font-family:var(--font-display);
  font-size:clamp(30px,6vw,70px);
}
.site-footer .top span:last-child{ color:var(--accent); }
.footer-cols{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:30px;
  padding:44px 0;
  border-bottom:1px solid var(--line-dark);
}
.footer-cols h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:16px; }
.footer-cols p, .footer-cols li{ font-size:13.5px; margin-bottom:9px; }
.footer-cols a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:24px;
  font-size:12px;
  color:var(--muted-dark);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:980px){
  .wrap{ padding:0 24px; }
  .gallery-row, .gallery-row.reverse{ grid-template-columns:1fr; gap:36px; }
  .gallery-row.reverse .gallery-item:first-child{ order:0; }
  .intro-split{ grid-template-columns:1fr; gap:30px; }
  .mission, .mission.reverse{ grid-template-columns:1fr; gap:30px; }
  .mission.reverse .mission-media{ order:0; }
  .about-hero{ grid-template-columns:1fr; }
  .about-hero .visual .tech-panel{ aspect-ratio:16/9; }
  .about-grid-2{ grid-template-columns:1fr; }
  .skill-grid{ grid-template-columns:1fr 1fr; }
  .method-grid{ grid-template-columns:1fr 1fr; }
  .timeline-row{ grid-template-columns:1fr; gap:6px; }
  .cert-list{ grid-template-columns:1fr; }
  .office-row{ grid-template-columns:1fr; text-align:left; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .numbered-row{ grid-template-columns:1fr; gap:10px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-block; }
  .site-nav .wrap{ flex-wrap:nowrap; gap:12px; }
  .nav-cta{ display:none; }
}

@media (max-width:480px){
  .brand{ font-size:15px; }
  .brandmark span{ font-size:9vw; }
}