/* ───────────────────────────────────────────────────────────────
   Layout & composants. Couleurs/typos viennent de tokens.css.
   ─────────────────────────────────────────────────────────────── */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }
h1,h2,h3{ margin:0; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:2px;
}

/* Lien d'évitement : masqué hors focus, visible au focus clavier. */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 16px; border-radius:8px;
  background:var(--accent); color:#fff;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.02em;
  transform:translateY(-180%); transition:transform .18s ease;
}
.skip-link:focus{ transform:none; }

/* ── Aura bleue derrière le hero ─────────────────── */
.aura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42vw 42vw at 72% 30%, rgba(62,99,221,.20), rgba(62,99,221,.04) 55%, transparent 72%);
}

/* ── Canvas du robot (easter egg), au-dessus du contenu ── */
#robot{ position:fixed; inset:0; width:100%; height:100%; z-index:55; pointer-events:none; }

/* ── Conteneur ───────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ── Header ──────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{ height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.logo svg{ display:block; }
.logo b{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--ink); }
nav{ display:flex; align-items:center; gap:26px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
nav a{ text-decoration:none; transition:color .15s; }
nav a:hover{ color:var(--ink); }
.cta-top{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-2); text-decoration:none; border:1px solid var(--line-strong); padding:9px 15px; border-radius:8px;
  white-space:nowrap; transition:border-color .15s, color .15s;
}
.cta-top:hover{ border-color:var(--accent-2); color:#fff; }

/* Menu mobile (burger) */
.burger{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; min-width:44px; min-height:44px; margin-right:-10px; }
.burger span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ position:fixed; inset:66px 0 0 0; z-index:49;
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav nav{ display:flex; flex-direction:column; padding:8px var(--gutter); }
.mobile-nav a{ font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; color:var(--body); text-decoration:none; padding:18px 2px; border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav .mobile-cta{ color:var(--accent-2); }

/* ── Hero ────────────────────────────────────────── */
main{ position:relative; z-index:1; }
.hero{ min-height:calc(100vh - 66px); display:flex; align-items:center; }
.hero-grid{ width:100%; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); font-weight:500;
}
.eyebrow i{ width:26px; height:1px; background:var(--accent-2); display:inline-block; }
h1{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(56px,7.6vw,104px); line-height:.94; letter-spacing:-.04em; margin:20px 0 0;
}
.lede{
  font-family:var(--font-display); font-weight:500; color:var(--ink);
  font-size:clamp(18px,2.1vw,23px); line-height:1.32; letter-spacing:-.005em; margin:20px 0 0; max-width:32ch; opacity:.92;
}
.lede b{ color:var(--accent-2); font-weight:500; }
.body{ font-size:clamp(15px,1.35vw,16.5px); line-height:1.62; color:var(--body); margin:20px 0 0; max-width:46ch; }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:30px 0 0; }
.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--accent); text-decoration:none; padding:14px 22px; border-radius:8px;
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--accent); transition:opacity .15s;
}
.btn:hover{ opacity:.9; }
.btn-ghost{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; color:var(--ink);
  text-decoration:none; padding:14px 6px; border-bottom:1px solid var(--line-strong); transition:border-color .15s;
}
.btn-ghost:hover{ border-color:var(--accent-2); }
.stage{ position:relative; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
#rings{ width:100%; max-width:460px; height:380px; display:block; }
.data{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; text-align:right; line-height:2; margin-top:8px;
}
.data b{ color:var(--ink); font-weight:500; }

/* ── Sections ───────────────────────────────────── */
.section{ padding:clamp(64px,9vw,118px) 0; border-top:1px solid var(--line); position:relative; }
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(34px,4vw,52px); }
.num{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--accent-2); }
h2{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; line-height:1.04; }
.section-intro{ font-size:clamp(15px,1.3vw,17px); color:var(--muted); margin:12px 0 0; max-width:54ch; }
.section-intro.wide{ max-width:52ch; margin:0 0 clamp(30px,4vw,44px); }

/* Cartes */
.cards{ display:grid; gap:clamp(16px,2.2vw,26px); }
.cards.two{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card{ border:1px solid var(--line); background:var(--bg-card); padding:clamp(26px,3vw,38px); border-radius:12px; }
.card.accent{ border-color:rgba(62,99,221,.35); background:linear-gradient(180deg, rgba(62,99,221,.08), rgba(62,99,221,.02)); }
.kicker{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); }
.card h3{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:clamp(21px,2.2vw,27px); line-height:1.1; margin:14px 0 0; }
.card p{ font-size:15.5px; line-height:1.6; color:var(--body); margin:16px 0 0; }
.card ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.card li{ display:flex; gap:11px; font-size:14.5px; color:var(--body); }
.card li::before{ content:"▸"; color:var(--accent-2); font-family:var(--font-mono); }
.avail{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); }
.avail::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.avail.on{ color:var(--accent-2); }
.avail.on::before{ background:var(--accent-2); box-shadow:0 0 8px var(--glow); }
.services-note{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:clamp(20px,2.6vw,30px) 0 0; max-width:62ch; }
.services-note strong{ color:var(--ink); font-weight:600; }
.card:has(.price){ display:flex; flex-direction:column; }
.card:has(.price) ul{ margin-bottom:24px; }
.card .price{ margin:auto 0 0; padding-top:16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted); }
.card .price b{ color:var(--ink); font-weight:500; }

/* Grille d'expertise */
.grid-bordered{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-soft); }
.cell{ padding:clamp(26px,3vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cell-id{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; color:var(--muted); }
.cell h3{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:20px; line-height:1.15; margin:14px 0 0; }
.cell p{ font-size:14.5px; line-height:1.6; color:var(--body); margin:14px 0 0; }

/* Tags */
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.tags span{ border:1px solid var(--line); padding:4px 8px; border-radius:5px; }
.badge{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 12px; border:1px solid rgba(62,99,221,.35); background:rgba(62,99,221,.08); border-radius:6px; font-family:var(--font-mono); font-size:12px; color:var(--accent-2); }

/* ── Bloc d'inversion clair : Références (temps fort de preuve) ── */
.section.invert{ background:var(--paper); border-top:none; color:var(--paper-body); }
.section.invert h2{ color:var(--paper-ink); }
.section.invert .num{ color:var(--accent); }
.section.invert .section-intro{ color:var(--paper-muted); }
.refs{ border-top:1px solid var(--paper-ink); }
.ref{
  display:grid; grid-template-columns:minmax(220px,.8fr) 1.2fr; gap:clamp(12px,2.4vw,40px);
  padding:clamp(22px,2.6vw,30px) 0; border-bottom:1px solid var(--paper-line); align-items:start;
}
.ref-id{ display:flex; flex-direction:column; gap:6px; }
.ref-name{ font-family:var(--font-display); font-weight:600; color:var(--paper-ink); font-size:clamp(19px,2vw,24px); letter-spacing:-.01em; }
.ref-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-muted); }
.ref-role{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--accent); font-weight:500; }
.ref-body p{ font-size:15px; line-height:1.58; color:var(--paper-body); margin:0; }
.section.invert .tags{ color:var(--paper-muted); }
.section.invert .tags span{ border-color:var(--paper-line); background:#fff; }

/* ── Approche (sombre, conviction) ── */
.statement{ font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.6vw,30px); line-height:1.32; letter-spacing:-.01em; color:var(--ink); max-width:24ch; margin:0 0 clamp(36px,5vw,56px); }
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; border-top:1px solid var(--line); }
.pillar{ padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px) 0; border-bottom:1px solid var(--line); }
.pillar:not(:first-child){ border-left:1px solid var(--line); padding-left:clamp(22px,2.4vw,30px); }
.pillar h3{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:18px; margin:12px 0 0; }
.pillar p{ font-size:14.5px; line-height:1.58; color:var(--body); margin:10px 0 0; }

/* ── À propos ── */
.about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(36px,5vw,72px); align-items:start; }
.about-lead{ font-size:clamp(15px,1.35vw,17px); line-height:1.62; color:var(--body); margin:16px 0 0; }
.about-lead:first-of-type{ margin-top:0; }
.about-lead strong{ color:var(--ink); font-weight:600; }
.fiche{ border:1px solid var(--line); background:var(--bg-card); border-radius:12px; margin:0; overflow:hidden; }
.fiche > div{ display:grid; grid-template-columns:38% 1fr; border-bottom:1px solid var(--line); }
.fiche > div:last-child{ border-bottom:none; }
.fiche dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 16px; border-right:1px solid var(--line); }
.fiche dd{ margin:0; padding:12px 16px; font-size:14px; color:var(--body); }

/* ── Contact ── */
.contact-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,2vw,20px); margin-bottom:clamp(30px,4vw,44px); }
.contact-card{ display:block; border:1px solid var(--line); background:var(--bg-card); padding:22px 24px; border-radius:12px; text-decoration:none; transition:border-color .15s, background .15s; }
.contact-card:hover{ border-color:var(--accent-2); background:var(--bg-soft); }
.contact-label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.contact-value{ display:block; font-family:var(--font-mono); font-size:14.5px; color:var(--ink); margin-top:9px; word-break:break-all; }

/* Formulaire de contact */
.contact-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(24px,4vw,52px); align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:13px 14px; width:100%;
  transition:border-color .15s; resize:vertical;
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239DBBFF' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.contact-form .btn{ align-self:flex-start; margin-top:4px; }
.field-error{ font-family:var(--font-mono); font-size:11.5px; color:#E0826A; }
.field-error:empty{ display:none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#E0826A; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ font-family:var(--font-mono); font-size:12.5px; margin:4px 0 0; min-height:1.2em; }
.form-status.ok{ color:var(--accent-2); }
.form-status.err{ color:#E0826A; }
.form-status.sending{ color:var(--muted); }
.contact-channels{ display:flex; flex-direction:column; gap:12px; }
.channels-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.contact-list{ display:contents; font-style:normal; }

/* ── Footer ── */
footer{ padding:clamp(40px,5vw,60px) 0 clamp(36px,4vw,48px); border-top:1px solid var(--accent); background:var(--bg); position:relative; z-index:1; }
.footer-top{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.footer-brand{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.footer-note{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }
.legal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 28px; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--muted); padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.legal span{ color:var(--faint); }
.footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ text-decoration:none; color:var(--body); transition:color .15s; }
.footer-links a:hover{ color:var(--ink); }

/* ── Badge easter egg + hint ── */
#egg{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:60;
  pointer-events:none; opacity:0; transition:opacity .5s ease, transform .5s ease;
  font-family:var(--font-mono); font-size:12px; color:var(--accent-2);
  background:rgba(14,20,38,.92); border:1px solid var(--line-strong); padding:9px 14px; border-radius:8px;
  display:flex; align-items:center; gap:10px; }
#egg.on{ opacity:1; transform:translateX(-50%) translateY(0); }
#egg b{ color:var(--ink); font-weight:500; }
.hint{ position:fixed; right:14px; bottom:12px; z-index:40; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); opacity:.7; }

/* ── Responsive ── */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .stage{ align-items:flex-start; order:-1; }
  #rings{ max-width:320px; height:240px; }
  .data{ display:none; }
  header nav{ display:none; }
  .cta-top{ display:none; }
  .burger{ display:flex; }
  .ref{ grid-template-columns:1fr; gap:10px; }
  .contact-grid{ grid-template-columns:1fr; }
  .pillar{ border-left:none; padding-left:0; }
}
@media (max-width:560px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hint{ display:none; }
}

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