/* ---------- THÈME CLAIR (défaut) ---------- */
:root{
  --bg:#F4F7F7; --panel:#FFFFFF; --text:#0B1B20; --sig:#0E9C8C; --slate:#55666B;
  --line:rgba(11,27,32,.10); --line2:rgba(14,156,140,.30); --btn-fg:#FFFFFF;
  --glow:rgba(14,156,140,.09); --nodehole:#FFFFFF;
  --disp:"Unbounded","Archivo Black",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* ---------- THÈME SOMBRE (option) ---------- */
html[data-theme="dark"]{
  --bg:#0B0E14; --panel:#161C28; --text:#EDF1F7; --sig:#53E8D4; --slate:#8A97A8;
  --line:rgba(255,255,255,.08); --line2:rgba(83,232,212,.22); --btn-fg:#04201d;
  --glow:rgba(83,232,212,.10); --nodehole:#0B0E14;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--body);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .3s, color .3s; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:min(1120px,92vw); margin:0 auto; }
section{ padding:88px 0; }
.eyebrow{ font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--sig); }
h2.title{ font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3.6vw,2.5rem);
  letter-spacing:-.01em; margin:14px 0 10px; text-transform:uppercase; }
.lead{ color:var(--slate); font-size:1.05rem; max-width:60ch; }

.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  border-radius:11px; padding:13px 22px; transition:transform .12s, background .18s, border-color .18s; }
.btn-signal{ background:var(--sig); color:var(--btn-fg); }
.btn-signal:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-ghost{ border:1px solid var(--line2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--sig); color:var(--sig); }

header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .pic{ width:34px; height:34px; }
.brand .name{ font-family:var(--disp); font-weight:800; letter-spacing:-.01em; font-size:1.15rem; text-transform:uppercase; }
.brand .name b{ color:var(--text); } .brand .name span{ color:var(--slate); font-weight:600; }
.menu{ display:flex; align-items:center; gap:30px; }
.menu a{ font-size:.92rem; color:var(--slate); font-weight:500; transition:color .15s; }
.menu a:hover{ color:var(--text); }
.menu-cta{ display:none; }
.actions{ display:flex; align-items:center; gap:10px; }
.lang{ display:flex; align-items:center; gap:5px; font-size:.82rem; font-weight:600; }
.lang a{ color:var(--slate); padding:4px 5px; border-radius:7px; transition:color .15s; }
.lang a:hover{ color:var(--text); }
.lang a.on{ color:var(--sig); }
.lang span{ color:var(--line2); }
.iconbtn{ background:none; border:1px solid var(--line); border-radius:9px; width:38px; height:38px;
  display:grid; place-items:center; color:var(--text); cursor:pointer; transition:border-color .15s; }
.iconbtn:hover{ border-color:var(--sig); }
.themebtn .sun{ display:none; } .themebtn .moon{ display:block; }
html[data-theme="dark"] .themebtn .sun{ display:block; }
html[data-theme="dark"] .themebtn .moon{ display:none; }
.burger{ display:none; }

.hero{ padding:96px 0 78px; position:relative; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(650px 380px at 78% 8%, var(--glow), transparent 60%); }
.hero h1{ font-family:var(--disp); font-weight:800; font-size:clamp(2.4rem,6.4vw,4.4rem);
  line-height:1.02; letter-spacing:-.02em; margin:18px 0 20px; text-transform:uppercase; }
.hero h1 .sig{ color:var(--sig); }
.hero .sub{ font-size:1.2rem; color:var(--text); max-width:44ch; }
.hero .micro{ color:var(--slate); margin-top:14px; font-size:1rem; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; }
.card h3{ font-family:var(--disp); font-weight:600; font-size:1.05rem; margin-bottom:9px; }
.card p{ color:var(--slate); font-size:.96rem; }
.num{ font-family:var(--disp); font-weight:700; color:var(--sig); font-size:.85rem; letter-spacing:.1em; }

.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px; }
.svc{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px;
  transition:border-color .2s, transform .2s; }
.svc:hover{ border-color:var(--line2); transform:translateY(-3px); }
.svc .k{ width:38px; height:38px; margin-bottom:16px; }
.svc h3{ font-family:var(--disp); font-weight:600; font-size:1.15rem; margin-bottom:8px; }
.svc p{ color:var(--slate); }

.methode{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line2); border-radius:100px;
  padding:10px 18px; font-size:.92rem; font-weight:500; }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--sig); }
.quote{ font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,3vw,2rem); line-height:1.3;
  margin-top:44px; max-width:22ch; }
.quote em{ color:var(--sig); font-style:normal; }

.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:36px; }
.agent{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 18px; text-align:center; }
.agent .h{ width:30px; height:30px; margin:0 auto 14px; }
.agent code{ font-weight:700; color:var(--sig); font-size:.92rem; letter-spacing:.02em; }
.agent .role{ display:block; color:var(--text); font-size:.82rem; font-weight:600; margin-top:6px; }
.agent .desc{ display:block; color:var(--slate); font-size:.78rem; line-height:1.45; margin-top:8px; }

.work{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }
.proj{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:32px;
  display:flex; flex-direction:column; gap:12px; color:inherit; text-decoration:none;
  transition:border-color .2s, transform .2s; }
a.proj:hover{ border-color:var(--line2); transform:translateY(-3px); }
.proj .visit{ color:var(--sig); font-weight:600; font-size:.85rem; }
.proj .tagp{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sig); border:1px solid var(--line2); border-radius:6px; padding:3px 9px; }
.proj h3{ font-family:var(--disp); font-weight:700; font-size:1.5rem; }
.proj p{ color:var(--slate); }
.proj .price{ color:var(--text); font-weight:600; margin-top:auto; }
.proj .price b{ color:var(--sig); }

.contact{ text-align:center; }
.contact h2{ font-family:var(--disp); font-weight:800; font-size:clamp(2rem,5vw,3.2rem); text-transform:uppercase;
  letter-spacing:-.02em; margin:16px 0 14px; }
.contact .lead{ margin:0 auto; }
.coords{ margin-top:26px; color:var(--slate); font-size:.9rem; }
.coords a{ color:var(--text); border-bottom:1px solid var(--line2); }
.cform{ max-width:540px; margin:34px auto 0; display:grid; gap:12px; text-align:left; }
.cform .two-f{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .cform .two-f{ grid-template-columns:1fr; } }
.cform input, .cform textarea{ width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:13px 15px; color:var(--text); font:inherit; font-size:.95rem; transition:border-color .15s; }
.cform input::placeholder, .cform textarea::placeholder{ color:var(--slate); }
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--sig); }
.cform textarea{ min-height:140px; resize:vertical; }
.cform .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cform button{ justify-self:center; }
.formstatus{ font-size:.92rem; margin-top:6px; min-height:1.2em; text-align:center; }
.formstatus.ok{ color:var(--sig); font-weight:600; }
.formstatus.err{ color:#e06b6b; }

footer{ border-top:1px solid var(--line); padding:44px 0; }
.foot{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-start; }
.foot .fb{ display:flex; align-items:center; gap:10px; }
.foot .fb .name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; }
.foot small{ color:var(--slate); display:block; line-height:1.8; font-size:.86rem; }
.foot .sig-line{ color:var(--slate); font-size:.82rem; }

@media (max-width:860px){
  .grid3,.grid2,.grid5,.work{ grid-template-columns:1fr; }
  .menu{ display:none; }
  .burger{ display:grid; }
  .brand .name{ font-size:1rem; }
  .actions{ gap:8px; }
  .menu.open{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    background:var(--bg); border-bottom:1px solid var(--line); padding:20px 5vw 26px; gap:18px; }
  .menu.open a{ font-size:1.05rem; }
  .menu.open .menu-cta{ display:block; color:var(--sig); font-weight:600; }
}