/* ===== Direction retenue — « Ingénierie terrain » (règles dans DESIGN.md) =====
   Fond clair façon plan d'exécution, typographie technique,
   la vidéo passe dans des cadres au lieu de remplir l'écran.
   Se charge après styles.css et en surcharge les valeurs. */

:root {
  --serif: "Archivo", system-ui, sans-serif;   /* titres */
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --paper: #F2EEE6;
  --gold-ink: #735622;   /* or « texte » sur fond clair (≥ 4,5:1) ; --gold reste décoratif */
  --line: rgba(10, 42, 85, .12);
  --muted-ink: rgba(11, 30, 58, .74);
}

body { background: var(--paper); color: var(--ink); }
/* Sections marine : texte ivoire */
.manifesto, .expertise, .contact, .footer, .card--cta { color: var(--ivory); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
h2 em, .hero__title em { font-style: normal; }

/* Or : foncé sur fond clair, clair sur fond marine */
em, .eyebrow, .eyebrow--dark, .section-head--dark em, .sectors h2 em, .card__num, .pillar__idx, .sectors__list i { color: var(--gold-ink); }
.manifesto em, .manifesto .eyebrow, .expertise em, .expertise .eyebrow,
.contact em, .contact .eyebrow, .footer em, .card--cta em { color: var(--gold-l); }

/* Libellés en mono, comme des cotes sur un plan */
.eyebrow, .proof__tag, .sectors__list i, .form label, .contact__info span, .footer__tag, .hero__portrait figcaption span {
  font-family: var(--mono); font-weight: 500; letter-spacing: .12em;
}
.eyebrow::before { content: "— "; }

/* Grille de plan en fond des sections claires */
.hero, .services, .sectors, .video {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  color: var(--ink);
}

/* Boutons à angles nets, CTA marine */
.btn { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; }
.btn--gold { background: var(--navy); color: var(--ivory); }
.btn--gold:hover { background: var(--gold); color: var(--navy-d); }
.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--ivory); }

/* ----- En-tête clair ----- */
.nav { color: var(--navy); }
.nav.is-scrolled { background: rgba(242, 238, 230, .94); border-color: var(--line); }
.nav__logo { color: var(--navy); }
.nav__name { font-family: var(--serif); letter-spacing: .14em; }
.nav__links a:not(.btn) { font-family: var(--mono); letter-spacing: .1em; color: var(--muted-ink); }
.nav__links a:not(.btn):hover { color: var(--gold); }
.nav__burger span { background: var(--navy); }

/* ----- Hero : texte sur plan, vidéo dans un cadre coté ----- */
.hero__ambient, .hero__bg .tint, .hero__bg .grain { display: none; }
.hero__rings circle:first-child { stroke: rgba(187, 148, 83, .45); }
.hero__rings circle:last-child { stroke: var(--line); }
.hero__brand { font-family: var(--mono); font-weight: 500; letter-spacing: .2em; color: var(--navy); }
.hero__title { color: var(--navy); font-size: clamp(2.4rem, 5vw, 4.4rem); }
.hero__lead { color: var(--muted-ink); }
.divider span { background: var(--navy); width: 48px; }
.divider span:last-child { display: none; }
.divider i { border-color: var(--gold); background: var(--gold); }
.hero__frame { border: 0; }
.hero__frame .bgvid { filter: grayscale(1) contrast(1.15); }
.hero__frame .tint { opacity: .55; }
.hero__portrait::before { inset: 14px -14px -14px 14px; border: 1px solid var(--navy); }
.hero__badge { color: var(--navy); background: var(--paper); }
.hero__portrait figcaption { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ivory); }
.hero__scroll { background: var(--line); }

/* ----- Manifeste inversé : bloc marine plein ----- */
.manifesto { background: var(--navy); color: var(--ivory); }
.manifesto__mono { color: rgba(242, 238, 230, .05); }
.manifesto__quote > p:first-child, .manifesto__punch { color: var(--ivory); }
.manifesto__quote > p:first-child { font-size: clamp(2.2rem, 5.4vw, 4.4rem); }
.manifesto__quote em { font-style: normal; }
.manifesto__sub { color: rgba(242, 238, 230, .74); }

/* ----- Services : fiches blanches ----- */
.cards { background: var(--navy); border-color: var(--navy); }
.card { background: #FBF9F5; }
.card:hover { background: #fff; }
.card__num { font-family: var(--mono); font-size: 1rem; letter-spacing: .1em; }
.card__num::after { content: " ———"; color: var(--line); }
.card h3 { color: var(--navy); }
.card p { color: var(--muted-ink); }
.card--cta { background: var(--navy); }
.card--cta:hover { background: var(--navy-l); }   /* reste sombre : le texte est ivoire */
.card--cta h3 { color: var(--ivory); }
.card--cta p { color: rgba(242, 238, 230, .74); }
.card__logo { color: var(--ivory); }
.link-arrow { font-family: var(--mono); letter-spacing: .1em; }

/* ----- Approche ----- */
.approach { background: var(--ivory-d); }
.pillar { border-top: 2px solid var(--navy); }
.pillar__idx { font-family: var(--mono); font-style: normal; font-size: .9rem; }

/* ----- Expertise : reste sombre, vidéo en bande ----- */
.proof { background: rgba(6, 27, 57, .72); border-left-width: 3px; }
.proof h3 { color: var(--ivory); }

/* ----- Secteurs ----- */
.sectors { background-color: var(--ivory-d); }
.sectors__list span { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

/* ----- Vidéo ----- */
.video__text h2 { color: var(--navy); }
.video__text p { color: var(--muted-ink); }
.video__player { border-color: var(--navy); }

/* ----- Contact & pied de page : restent marine ----- */
.contact h2 { color: var(--ivory); }
.form input, .form select, .form textarea { font-family: var(--sans); }
.footer__name { font-family: var(--serif); letter-spacing: .14em; }

/* ----- Mobile : la vidéo reste dans un cadre sous le texte ----- */
@media (max-width: 820px) {
  .nav__links { background: var(--paper); }
  .nav__links a:not(.btn) { color: var(--navy); }
  .hero__portrait { display: block; justify-self: stretch; width: auto; margin: 0 14px 14px 0; }
  .hero__frame { aspect-ratio: 4 / 5; }
  .hero__badge { width: 64px; height: 64px; left: auto; right: 12px; top: 12px; }
}

/* ----- Téléphone : aucun libellé sous 12 px ----- */
@media (max-width: 600px) {
  .eyebrow, .proof__tag, .sectors__list i, .form label, .contact__info span,
  .footer__tag, .hero__portrait figcaption span, .card__num { font-size: .75rem; }
  .btn, .link-arrow { font-size: .8rem; letter-spacing: .08em; }
  .nav__links a:not(.btn) { font-size: 1rem; }
  .footer__legal { font-size: .85rem; }
}