/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ BRAIN2FIELD — site vitrine                                           ║
   ╚══════════════════════════════════════════════════════════════════════╝

   La page descend du sombre vers le clair : le héros est une surface
   abstraite, tout ce qui suit est posé, structuré, lisible. Ce n'est pas un
   effet — c'est le nom de l'agence mis en page. On réfléchit dans le noir,
   on exécute au grand jour.

   Un seul thème, assumé. Le site d'une agence de communication doit avoir
   une identité, pas s'adapter aux réglages du visiteur. */

:root {
  /* Relevées sur le logo : le marine du mot, le bleu du cerveau, le doré de
     l'anneau. Règle de lecture — le BLEU porte les accents sur fond clair, le
     DORÉ les porte sur fond sombre. Le doré sur blanc tombe à 2,2:1, il n'y
     écrit jamais de texte. */
  --nuit: #07192b;        /* le fond du héros et du pied */
  --nuit-2: #102e46;      /* ses surfaces */
  --clair: #eef1f4;       /* la page */
  --papier: #ffffff;
  --encre: #0e1a22;
  --doux: #5c6b77;
  --trait: #d6dde3;
  --vert: #1d4a69;        /* l'accent sur fond clair */
  --vert-vif: #d9bd7d;    /* l'accent sur fond sombre */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --texte: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--clair); color: var(--encre);
  font: 17px/1.65 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: 1.32rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; max-width: 68ch; }
.wrap { width: min(1180px, 100% - 44px); margin-inline: auto; }
@media (max-width: 620px) { .wrap { width: min(1180px, 100% - 32px); } }

.sur-titre {
  font-family: var(--texte); font-size: 12.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vert); margin: 0 0 18px;
}
.sombre .sur-titre { color: var(--vert-vif); }
.lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--doux); }
.sombre .lede { color: rgba(255, 255, 255, .72); }
section { padding: clamp(72px, 10vw, 136px) 0; scroll-margin-top: 72px; }
.tete-section { max-width: 760px; margin-bottom: clamp(38px, 5vw, 62px); }

.saut { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: #fff; padding: 9px 14px; z-index: 100; }
.saut:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }

/* ── Marque ─────────────────────────────────────────────────────────────
   Aucun symbole : la fiche de l'entreprise indique que le logo n'est pas
   encore publié. Un signe inventé vaudrait moins qu'un nom bien composé —
   et devrait être retiré le jour où le vrai arrive. */
/* Sur fond sombre, le cerveau marine du logo se fond dans le décor et seul
   l'anneau doré ressort : la marque seule n'y suffit pas, et rien n'y donne
   le nom de l'agence. Le mot l'accompagne donc, en blanc — une réduction
   monochrome sur fond sombre, et non une variante inventée du logo. */
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.marque img { width: 38px; height: 38px; flex: none; }
.marque__mot {
  font-family: var(--texte); font-size: 17px; font-weight: 600; letter-spacing: .005em;
}
@media (max-width: 620px) {
  .marque img { width: 33px; height: 33px; }
  .marque__mot { font-size: 15.5px; }
}
/* Sur fond noir, le vert profond de l'accent tombe sous le seuil de
   lisibilité : c'est sa version claire qui sert. */
.sombre .marque .deux, .top .marque .deux, .pied .marque .deux { color: var(--vert-vif); }

/* ── Écran d'ouverture ─────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: var(--clair); animation: splash-out .5s ease forwards; animation-delay: 1.5s;
}
.splash__logo { width: min(320px, 62vw); height: auto; animation: splash-in .6s cubic-bezier(.22,1,.36,1) both .1s; }
@keyframes splash-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation-duration: .01s; animation-delay: .3s; }
  .splash__logo { animation: none; }
}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; padding: 16px 0; color: #fff;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.top__rang { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.top.posee {
  background: rgba(12, 21, 18, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 11px 0; box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .8);
}
.nav { display: flex; gap: 26px; align-items: center; font-size: 15px; }
.nav a { text-decoration: none; color: rgba(255, 255, 255, .78); }
.nav a:hover { color: #fff; }
@media (max-width: 800px) { .nav a:not(.bouton) { display: none; } }

.bouton {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px;
  font-family: var(--texte); font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton--plein { background: var(--vert); color: #fff; }
.bouton--plein:hover { background: #163a53; }
.bouton--clair { background: #fff; color: var(--encre); }
.bouton--ligne { border-color: rgba(255, 255, 255, .34); color: #fff; }
.bouton--ligne:hover { border-color: #fff; }
.sombre .bouton--ligne { color: #fff; }

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; background: var(--nuit); color: #fff; overflow: hidden;
  padding: clamp(140px, 20vh, 210px) 0 clamp(80px, 12vh, 130px);
}
/* Une trame qui s'efface vers le bas : le « champ » du nom, à peine suggéré.
   Dessinée en dégradés plutôt qu'en image — rien à télécharger, net à toutes
   les densités d'écran. */
.hero__trame {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(217, 189, 125, .08) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(217, 189, 125, .08) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 88%);
}
.hero__halo {
  position: absolute; left: 50%; top: -26vh; width: min(1000px, 118vw); aspect-ratio: 1;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(35, 80, 112, .55), transparent 62%);
}
.hero .wrap { position: relative; }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--vert-vif); }
.hero__lede { margin-top: 26px; max-width: 54ch; }
.hero__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
.hero__pied {
  margin-top: clamp(54px, 8vw, 92px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; gap: 14px 46px; flex-wrap: wrap; color: rgba(255, 255, 255, .6); font-size: 14.5px;
}
.hero__pied b { color: #fff; font-weight: 600; }

/* ── Métiers ───────────────────────────────────────────────────────────── */
.metiers { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
@media (min-width: 760px) { .metiers { grid-template-columns: 1fr 1fr; } }
.metier { background: var(--papier); padding: clamp(26px, 3.4vw, 40px); }
.metier__no { font-family: var(--display); font-size: 15px; color: var(--vert); letter-spacing: .04em; }
.metier h3 { margin: 10px 0 12px; }
.metier p { margin: 0; color: var(--doux); font-size: 16px; }

/* ── Trajectoire ───────────────────────────────────────────────────────── */
.trajet { display: grid; gap: 30px; }
@media (min-width: 860px) { .trajet { grid-template-columns: repeat(3, 1fr); gap: 42px; } }
.etape { position: relative; padding-top: 30px; }
/* Le trait se dessine quand l'étape apparaît : la trajectoire se parcourt au
   lieu d'être affichée d'un coup. L'animation est accrochée à l'attribut que
   pose la couche de révélation, pas à un minuteur — elles ne peuvent donc pas
   se désynchroniser. */
.etape::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--trait);
  transform-origin: left; transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  .js-anim .etape:not([data-revealed])::before { transform: scaleX(0); }
  .etape[data-revealed]::before { animation: tracer .9s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes tracer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.etape__no { font-family: var(--display); font-size: 42px; color: var(--vert); line-height: 1; margin: 18px 0 14px; }
.etape h3 { margin-bottom: 10px; }
.etape p { color: var(--doux); font-size: 16px; margin: 0; }

/* ── L'agence ──────────────────────────────────────────────────────────── */
.agence { display: grid; gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .agence { grid-template-columns: 1.05fr .95fr; } }
.fiche { background: var(--papier); border: 1px solid var(--trait); border-radius: 16px; padding: clamp(24px, 3vw, 34px); }
.fiche dl { display: grid; grid-template-columns: auto 1fr; gap: 13px 26px; margin: 0; font-size: 15.5px; }
.fiche dt { color: var(--doux); }
.fiche dd { margin: 0; font-weight: 600; }
.fiche .num { font-variant-numeric: tabular-nums; }
.confidentiel {
  margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--vert); background: #e5ecf2;
  font-size: 15.5px; color: #16384f;
}
.confidentiel p { margin: 0; }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact { background: var(--nuit); color: #fff; }
.contact__grille { display: grid; gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (min-width: 880px) { .contact__grille { grid-template-columns: 1fr 1fr; } }
.coord { display: grid; gap: 22px; }
.coord__bloc { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 18px; }
.coord__quoi { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 7px; }
.coord a, .coord address { font-style: normal; font-size: 19px; color: #fff; text-decoration: none; line-height: 1.45; }
.coord a:hover { color: var(--vert-vif); }
.coord .manquant { font-size: 15px; color: rgba(255, 255, 255, .45); }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied { background: var(--nuit); color: rgba(255, 255, 255, .52); padding: 42px 0 54px; font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pied__rang { display: flex; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; align-items: center; }
.pied .legales { max-width: 76ch; line-height: 1.8; }
.pied .num { font-variant-numeric: tabular-nums; }
.pied a { color: rgba(255, 255, 255, .72); }

/* ── Mouvement ─────────────────────────────────────────────────────────── */
/* Les blocs à révéler ne sont masqués QUE si le script peut prendre le relais
   (classe js-anim posée dans <head>) et si le visiteur accepte les
   animations. Sans JavaScript, en mouvement réduit ou à l'impression, tout
   est visible d'emblée : une animation ne doit jamais retenir le contenu. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-reveal]:not([data-revealed]),
  .js-anim [data-reveal-group]:not([data-revealed]) > :not([hidden]) { opacity: 0; }
}
@media print { [data-reveal], [data-reveal-group] > * { opacity: 1 !important; } .splash, .top { display: none !important; } }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em 0 .18em; margin: -.06em 0 -.18em; }
.w > span { display: inline-block; }