/* ============================================================
   TOKENS — variables globales
   ============================================================ */
:root {
  /* Couleurs */
  --paper:        #e7e5d9;
  --paper-2:      #dddbd0;
  --ink:          #14120f;
  --graphite:     #3a3732;
  --blueprint:    #0e3960;
  --blueprint-2:  #1a5a8f;
  --safety:       #f86719;
  --safety-2:     #ffb000;
  --paper-light:  #e6e3d8;
  --line:         rgba(21, 19, 15, .35);
  --line-soft:    rgba(21, 19, 15, .18);

  /* Typographie */
  --font-sans:  "Archivo", sans-serif;
  --font-mono:  "JetBrains Mono", monospace;
  --font-hand:  "Caveat", cursive;

  /* Tailles de police */
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;

  /* Espacements */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Grille papier millimétré */
  --grid-major: 28px;
  --grid-minor: 5.6px;   /* grid-major / 5 */

  /* Bordures */
  --border:      1.5px solid var(--ink);
  --border-soft: 1px solid var(--line);
}


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

img, svg, video {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}


/* ============================================================
   BASE — body + fond grille
   ============================================================ */
html, body {
  height: 100%;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Fond papier millimétré — mobile-first (performance) */
  background-image:
    linear-gradient(to right,  var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to right,  rgba(21,19,15,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,19,15,.06) 1px, transparent 1px);
  background-size:
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major),
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor);
}

/* Texture fibre papier */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .8;
}


/* ============================================================
   TYPOGRAPHIE — utilitaires
   ============================================================ */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .04em;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: -.01em;
}

::selection {
  background: var(--safety);
  color: var(--paper);
}


/* ============================================================
   CARTOUCHE — header sticky
   ============================================================ */
.cartouche {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cartouche .stamp {
  border: 1.5px solid var(--ink);
  padding: 4px 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cartouche .stamp .dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--safety);
  border-radius: 50%;
  display: inline-block;
}

.cartouche .ref {
  text-align: center;
  font-size: 10px;
  color: var(--graphite);
  display: none; /* masqué sur mobile */
}

.cartouche .ref b {
  color: var(--ink);
  font-weight: 500;
}

/* ---- Hamburger (mobile-first) ---- */
.cartouche nav { grid-column: 3; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  width: 36px;
  height: 36px;
}
.nav-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.cartouche.nav-open .nav-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.cartouche.nav-open .nav-bar:nth-child(2) { opacity: 0; }
.cartouche.nav-open .nav-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Dropdown */
.nav-links {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  z-index: 19;
  padding: 0;
  margin: 0;
}
.cartouche.nav-open .nav-links { display: flex; flex-direction: column; }
.nav-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
  transition: color .15s, background .15s;
}
.nav-links li:last-child a { border-bottom: none; }
.nav-links li a:hover { color: var(--safety); background: var(--paper-2); }
.nav-num {
  color: var(--safety);
  font-size: 9px;
  letter-spacing: .2em;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 30px 16px 50px;
  position: relative;
  border-bottom: 2px solid var(--ink);
  min-height: calc(100dvh - 56px); /* 56px = hauteur cartouche */
  box-sizing: border-box;
}

.hero-left {
  position: relative;
}

.hero .topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--graphite);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(50px, 14vw, 130px);
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
  position: relative;
}

.hero h1 .l        { display: block; }
.hero h1 .safety   { color: var(--safety); display: inline-block; text-decoration: underline; text-decoration-color: var(--safety); text-underline-offset: 6px; text-decoration-thickness: 3px; }

.hero h1 .struck {
  position: relative;
  display: inline-block;
}
.hero h1 .struck::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  background: var(--safety);
  z-index: 1;
}

/* Annotation manuscrite */
.callout {
  position: absolute;
  top: 14px;
  right: 12px;
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--safety);
  font-size: 22px;
  line-height: 1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.callout::after {
  content: "";
  position: absolute;
  display: block;
  width: 70px;
  height: 1px;
  background: var(--safety);
  bottom: -8px;
  left: 0;
  transform: rotate(8deg);
}

/* Strap / sous-titre */
.hero .strap {
  margin-top: 28px;
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: 580px;
  padding: 14px 16px;
  border-left: 4px solid var(--safety);
  background: rgba(255, 255, 255, .35);
}
.hero .strap em {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--safety);
  font-style: normal;
  display: block;
  margin-top: 4px;
}

/* Meta-band */
.meta-band {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.meta-band > div {
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meta-band > div:nth-child(even)      { border-right: 0; }
.meta-band > div:nth-last-child(-n+2) { border-bottom: 0; }

.meta-band b {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 400;
  margin-bottom: 4px;
}
.meta-band span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
}
.meta-band .accent-bp { color: var(--blueprint); }
.meta-band .accent-s  { color: var(--safety); }

/* Panneau élévation / photo */
.hero-right { margin-top: 30px; }

.elev {
  border: 1.5px solid var(--ink);
  background: var(--blueprint);
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

/* Grille blueprint par-dessus la photo */
.elev::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 22px 22px;
  mix-blend-mode: overlay;
}

.elev-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: var(--safety);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 8px;
  font-weight: 500;
}
.elev-label.right {
  left: auto;
  right: 10px;
  background: var(--paper);
}

/* Photo + placeholder */
.elev-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.elev-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Quand la photo échoue → classe no-img ajoutée par onerror */
.elev-photo.no-img img { display: none; }

.elev-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(236, 234, 223, .3);
  text-align: center;
  line-height: 2;
}
/* Si la photo charge, le placeholder est caché derrière */
.elev-photo:not(.no-img) .elev-placeholder { opacity: 0; }

.elev-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}


/* ============================================================
   SECTIONS — base commune
   ============================================================ */
section {
  padding: 30px 16px 44px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}

/* Overrides pour sections à fond coloré */
section.patron,
section.openflow {
  padding-left: 16px;
  padding-right: 16px;
}

section.realisations {
  background: #14120f;
  color: var(--paper-light);
  padding-bottom: 80px;
}
section.realisations .sec-tab {
  background: var(--safety);
  color: #14120f;
}
section.realisations .real-group-label {
  color: rgba(230, 227, 216, .55);
  border-bottom-color: rgba(230, 227, 216, .18);
}

.sec-tab {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sec-tab .sep {
  color: var(--safety);
  margin: 0 6px;
}


/* ============================================================
   PROSE — §01 À propos
   ============================================================ */
.prose .lead {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 3.8vw, var(--text-xl));
  line-height: 1.3;
  max-width: 620px;
  margin-bottom: 16px;
}

.prose .lead span { color: var(--blueprint); }

.prose p {
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: 620px;
  margin-bottom: 12px;
}

.prose p .hl {
  background: var(--safety-2);
  padding: 0 3px;
}

/* Stats band sous le texte */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--ink);
  margin-top: 28px;
  background: var(--paper-2);
}

.stats-row > div {
  padding: 14px 12px;
  border-right: 1px solid var(--line);
}
.stats-row > div:last-child { border-right: 0; }

.stats-row b {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 400;
  margin-bottom: 6px;
}

.stats-row span {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
}

.stats-row .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--graphite);
  margin-top: 5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ============================================================
   FICHES — §02 Ce que je fais
   ============================================================ */
.fiches {
  display: grid;
  gap: 24px;
  margin-top: 6px;
}

.fiche {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  position: relative;
  padding: 14px 14px 28px;
  transition: transform .25s, background .25s, box-shadow .25s;
}

/* Dog-ear / coin replié */
.fiche::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 54px;
  height: 54px;
  background: conic-gradient(from 225deg, transparent 0 25%, var(--ink) 25% 50%);
  mix-blend-mode: multiply;
  opacity: .9;
}

.fiche:hover {
  transform: translate(-3px, -3px);
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
}

.fiche .tag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-bottom: 8px;
}

.fiche .n {
  position: absolute;
  top: 6px;
  right: 12px;
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  z-index: 1;
  letter-spacing: -.02em;
}

.fiche h3 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
  max-width: 85%;
}

.fiche p {
  font-size: 14.5px;
  line-height: 1.45;
  max-width: 44ch;
}

.fiche .chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fiche .chips span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  padding: 2px 6px;
  background: var(--paper);
}

.fiche .hand-note {
  position: absolute;
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--safety);
  font-size: 20px;
  transform: rotate(-6deg);
  bottom: -14px;
  right: 20px;
  background: #14120f;
  padding: 2px 6px;
  z-index: 2;
}


/* ============================================================
   RÉALISATIONS — §04
   ============================================================ */
.real-intro {
  margin-bottom: 36px;
  max-width: 620px;
}
.real-intro h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(32px, 8vw, 60px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--paper-light);
  margin-bottom: 16px;
}
.real-intro h2 em {
  color: var(--safety);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--safety);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.real-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(230, 227, 216, .75);
}
.real-intro p sup { font-size: 10px; }

.real-group {
  margin-bottom: 36px;
}
.real-group:last-child { margin-bottom: 0; }

/* Label de catégorie */
.real-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.real-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.real-dot.prod { background: var(--blueprint); }
.real-dot.demo { background: var(--graphite); }
.real-dot.this { background: var(--safety); }

/* Grille de cartes */
.real-grid {
  display: grid;
  gap: 12px;
}

/* Carte */
.real-card {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  position: relative;
  overflow: visible;
  transition: transform .2s, box-shadow .2s;
}
.real-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.real-card.this-site { border-color: var(--safety); border-width: 2px; }

/* Placeholder screenshot */
.real-screen {
  height: 130px;
  position: relative;
  overflow: hidden;
  background: var(--blueprint);
  border-bottom: 1.5px solid var(--ink);
}
.real-screen.demo  { background: var(--graphite); }
.real-screen.this-site {
  background: var(--safety);
  height: 100px;
  border-bottom-color: var(--safety);
}

/* Grille blueprint sur le placeholder */
.real-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 18px 18px;
}

/* Faux chrome navigateur */
.real-screen::after {
  content: "● ● ●";
  position: absolute;
  top: 9px;
  left: 10px;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .35);
}
.real-screen.this-site::after { color: rgba(21, 19, 15, .3); }

/* Badge statut */
.real-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 6px;
  background: var(--paper);
  color: var(--ink);
  z-index: 1;
}
.real-badge.demo  { background: var(--safety-2); }
.real-badge.this-site { background: var(--ink); color: var(--paper); }

/* URL dans le placeholder */
.real-url {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.real-screen.this-site .real-url { color: rgba(21, 19, 15, .55); }

/* "vous êtes ici" note manuscrite */
.real-screen-note {
  position: absolute;
  bottom: 28px;
  right: 14px;
  font-size: 18px;
  color: rgba(21, 19, 15, .5);
  transform: rotate(-5deg);
  z-index: 1;
}

/* Corps de la carte */
.real-body {
  padding: 12px 14px 16px;
}

.real-body h4 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--text-lg);
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.real-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 54ch;
}

.real-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.real-chips span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 2px 6px;
  background: var(--paper);
}

/* Lien externe */
.real-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--blueprint);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  padding: 10px 14px;
  margin: 0 -14px;
  border-top: 1.5px solid var(--line-soft);
  transition: color .2s, background .15s;
}
.real-link:hover {
  color: var(--safety);
  background: var(--paper-2);
}
.real-card.this-site .real-link {
  color: var(--safety);
  text-decoration-color: var(--safety);
}
.real-card.this-site .real-link:hover { color: var(--ink); }


/* ============================================================
   OPENFLOW — fond blueprint + grille
   ============================================================ */
section.openflow {
  background: var(--blueprint);
  color: var(--paper);
  position: relative;
}

section.openflow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 26px 26px;
  opacity: .4;
}

section.openflow > * { position: relative; z-index: 1; }

section.openflow .sec-tab {
  background: var(--paper);
  color: var(--ink);
}

section.openflow h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(38px, 9vw, 78px);
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

section.openflow h2 em {
  color: var(--safety);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--safety);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

/* --- Stat géante --- */
.oc-stat {
  display: flex;
  gap: 20px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 24px 0 32px;
  padding: 20px 0;
  border-top: 1.5px solid rgba(236,234,223,.25);
  border-bottom: 1.5px solid rgba(236,234,223,.25);
}

.oc-stat-v {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(72px, 20vw, 128px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--safety);
}

.oc-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(236,234,223,.75);
  max-width: 220px;
}

/* --- Flow nodes --- */
.oc-flow {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 30px;
  margin-bottom: 28px;
}

.oc-node {
  border: 1.5px solid rgba(236,234,223,.3);
  padding: 14px 16px;
  background: rgba(0,0,0,.18);
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  position: relative;
}

/* Flèche vers le nœud suivant */
.oc-node::after {
  content: "▼";
  position: absolute;
  bottom: -20px;
  left: 24px;
  color: var(--safety);
  font-size: 14px;
  z-index: 2;
}
.oc-node:last-child::after { display: none; }

.oc-n {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 28px;
  color: var(--safety);
  line-height: 1;
}

.oc-node h5 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

.oc-node p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(236,234,223,.75);
  line-height: 1.4;
}

.oc-t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--safety);
  white-space: nowrap;
}

/* --- Infra stack --- */
.oc-infra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.oc-infra-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(236,234,223,.5);
  padding-right: 4px;
  border-right: 1px solid rgba(236,234,223,.25);
  margin-right: 4px;
}

.oc-infra-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oc-infra-chips span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(236,234,223,.3);
  padding: 3px 8px;
  color: rgba(236,234,223,.8);
  background: rgba(0,0,0,.2);
}

/* --- Capture CRM Notion --- */
.oc-demo {
  position: relative;
  border: 1.5px solid rgba(236,234,223,.3);
  overflow: hidden;
  margin: 0;
  border-radius: 2px;
}

.oc-demo img {
  display: block;
  width: 100%;
  height: auto;
}

.oc-demo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: var(--safety);
  color: var(--ink);
  font-weight: 500;
  z-index: 1;
}

.oc-demo-caption {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(236,234,223,.45);
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(236,234,223,.12);
}


/* ============================================================
   CLOSING — § 06
   ============================================================ */
section.closing {
  padding-top: 60px;
  padding-bottom: 60px;
}

section.closing h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(38px, 11vw, 90px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 44px;
}

.hand-over {
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--safety);
  text-transform: none;
  letter-spacing: -.01em;
}

.cl-safety { color: var(--safety); }

/* Carte signature */
.closing-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 2px dashed var(--ink);
  background: rgba(255, 255, 255, .35);
  max-width: 420px;
  position: relative;
}

.closing-sig {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(38px, 10vw, 54px);
  color: var(--safety);
  line-height: 1;
  transform: rotate(-3deg);
  display: inline-block;
}

.closing-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--graphite);
}

.closing-id span { display: block; }

.closing-stamp {
  display: inline-block;
  align-self: start;
  border: 3px solid var(--safety);
  color: var(--safety);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}


/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 18px 16px;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}


/* ============================================================
   DESKTOP — breakpoint 720px
   ============================================================ */
@media (min-width: 720px) {
  .cartouche {
    padding: 12px 32px;
  }
  .cartouche .ref { display: block; }

  /* Nav desktop — liens inline, hamburger masqué */
  .nav-toggle { display: none; }
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 10px;
    border: none;
    background: transparent;
  }
  .nav-links li a {
    padding: 0;
    min-height: auto;
    font-size: 10px;
    letter-spacing: .08em;
    border: none;
    background: none !important;
  }
  .nav-links li a:hover { background: none !important; border-bottom: 1px solid var(--safety); }
  .nav-num { display: none; }

  .hero {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 36px;
    align-items: stretch;
    padding-left: 48px;
    padding-right: 48px;
  }

  .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 40px;
  }

  .hero-right {
    margin-top: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .elev { min-height: 100%; }

  /* 5.5vw + colonne 1.8fr — "JE LE CONSTRUIS." tient sans wrap */
  .hero h1 { font-size: clamp(36px, 5.5vw, 88px); }

  .meta-band { grid-template-columns: repeat(4, 1fr); }
  .meta-band > div             { border-bottom: 0; border-right: 1px solid var(--line); }
  .meta-band > div:last-child  { border-right: 0; }

  section {
    padding-left: 48px;
    padding-right: 48px;
  }

  .real-grid { grid-template-columns: repeat(2, 1fr); }

  footer { padding: 22px 48px; }

  .oc-flow { grid-template-columns: repeat(3, 1fr); }
  .oc-node::after {
    content: "▶";
    bottom: auto;
    top: 50%;
    left: auto;
    right: -15px;
    transform: translateY(-50%);
    font-size: 12px;
  }
  .real-card.this-site { display: grid; grid-template-columns: 260px 1fr; }
  .real-card.this-site .real-screen {
    height: 100%;
    border-bottom: none;
    border-right: 2px solid var(--safety);
  }

  section.patron,
  section.openflow { padding-left: 48px; padding-right: 48px; }

  .fiches { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: 2fr 1fr; }
  .hero h1 { font-size: clamp(60px, 9vw, 140px); }
}


/* ============================================================
   MOBILE — masquer éléments décoratifs (< 720px)
   ============================================================ */
@media (max-width: 719px) {
  /* Topline "DOC · candidature EM 2026 / vue : entrepreneur · 17 ans" */
  .hero .topline { display: none; }
  /* Annotation manuscrite "plan d'exécution" */
  .callout { display: none; }
  /* Labels sur la photo (Robin Carivenc · Strasbourg / EM 2026) */
  .elev-label { display: none; }
  /* Coordonnées GPS + copyright photo */
  .elev-legend { display: none; }
  /* Deuxième span du footer (Oral Bachelor · EM Strasbourg…) */
  footer span:last-child { display: none; }
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.on {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .92);
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.lb-overlay.lb-open { display: flex; }

.lb-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .6);
  cursor: default;
}

.lb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .15s;
}
.lb-close:hover { color: var(--safety); }