/* Layout : site vitrine aéré, une page. Hero en deux colonnes avec grand visuel arrondi, cartes douces, boutons pilule. Accent : jaune "étincelle" sur bleu nuit. */
:root{
  --bg:#F6F8FA;
  --surface:#FFFFFF;
  --soft:#EEF2F6;
  --ink:#0E1B2C;
  --muted:#5E6B7A;
  --line:#E3E8EE;
  --accent:#FE7A0A;
  --accent-ink:#0E1B2C;
  --deep:#0E1B2C;
  --deep-fg:#F6F8FA;
  --deep-muted:#9AA8B8;
  --blue:#2E6BE6;
  --ok:#1E9E6A;
  --shadow:0 10px 30px -12px rgba(14,27,44,.18);
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  --f:"Outfit","Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1420;--surface:#121D2B;--soft:#172435;--ink:#EEF2F6;--muted:#9AA8B8;--line:#213044;
  --accent:#FE7A0A;--accent-ink:#0E1B2C;--deep:#060D16;--deep-fg:#EEF2F6;--deep-muted:#8B9AAB;--blue:#6E9BFF;--ok:#3CC48C;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1420;--surface:#121D2B;--soft:#172435;--ink:#EEF2F6;--muted:#9AA8B8;--line:#213044;
  --accent:#FE7A0A;--accent-ink:#0E1B2C;--deep:#060D16;--deep-fg:#EEF2F6;--deep-muted:#8B9AAB;--blue:#6E9BFF;--ok:#3CC48C;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:300;font-size:17px;line-height:1.65}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-weight:300;font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-weight:300;font-size:clamp(2rem,4.2vw,3rem)}
h3{font-weight:500;font-size:1.2rem;letter-spacing:-.01em}
strong,b{font-weight:500}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

.tag{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:400;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:6px 14px;border-radius:999px}
.tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-weight:500;font-size:1rem;text-decoration:none;border-radius:999px;padding:14px 26px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-line{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn svg{width:18px;height:18px}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:58px;width:auto;display:block}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--accent);display:grid;place-items:center}
.logo-mark svg{width:20px;height:20px}
.logo-name{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.logo-name span{color:var(--muted);font-weight:300}
nav.links{display:flex;gap:6px}
nav.links a{text-decoration:none;color:var(--muted);font-weight:400;font-size:.96rem;padding:8px 14px;border-radius:999px}
nav.links a:hover{background:var(--soft);color:var(--ink)}
.top .btn{padding:10px 18px;font-size:.95rem}
@media (max-width:900px){nav.links{display:none}}
@media (max-width:440px){.logo-img{height:46px}.top .btn .long{display:none}}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-block:56px 72px}
.hero-text{display:grid;gap:24px;min-width:0}
.hero h1 b{font-weight:500}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.28em;background:var(--accent);opacity:.55;border-radius:999px;z-index:-1}
.hero .lead{color:var(--muted);font-size:1.15rem;max-width:32em}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:22px;color:var(--muted);font-size:.95rem}
.trust span{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;color:var(--ok)}

.visual{position:relative;min-width:0}
.visual .img{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-lg);background:
  radial-gradient(120% 80% at 80% 10%, color-mix(in srgb,var(--accent) 35%,transparent), transparent 55%),
  linear-gradient(160deg,var(--soft),color-mix(in srgb,var(--blue) 14%,var(--soft)));
  overflow:hidden}
.visual .img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.float{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px 18px;display:flex;gap:12px;align-items:center}
.float .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.float .ico svg{width:20px;height:20px}
.float strong{display:block;font-size:1rem;line-height:1.2}
.float small{color:var(--muted);font-size:.85rem}
.f1{left:-28px;bottom:48px}
.f1 .ico{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.f2{right:-18px;top:36px}
.f2 .ico{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-block:36px 56px}
  .visual .img{aspect-ratio:4/3}
  .f1{left:12px;bottom:-22px}.f2{right:12px;top:-18px}
}

/* Sections */
section.block{padding-block:88px}
.head{display:grid;gap:14px;margin-bottom:44px;max-width:38em}
.head p{color:var(--muted);font-size:1.08rem}
.head.center{margin-inline:auto;text-align:center;justify-items:center}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:grid;gap:12px;align-content:start;min-width:0;transition:transform .25s ease, box-shadow .25s ease, border-color .25s}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.service .ic{width:52px;height:52px;border-radius:16px;background:var(--soft);display:grid;place-items:center;color:var(--blue)}
.service .ic svg{width:24px;height:24px}
.service p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.services{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;grid-auto-flow:dense;gap:16px}
.shot{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;min-width:0;background:var(--soft)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.shot.big{grid-column:span 2;grid-row:span 2}
.shot figcaption{position:absolute;left:10px;bottom:10px;right:10px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.shot figcaption b{font-size:.92rem}
.shot figcaption span{color:var(--muted);font-size:.82rem}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}}
@media (max-width:480px){.gallery{grid-template-columns:1fr;grid-auto-rows:240px}.shot.big{grid-column:span 1;grid-row:span 1}}
.zone-card{background:var(--deep);color:var(--deep-fg);border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
.zone-card .head{margin:0}
.zone-card .head p{color:var(--deep-muted)}
.zone-list{display:grid;gap:24px}
.zone-group h3{font-size:1.05rem;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.zone-group h3 .dep{font-size:.8rem;font-weight:400;color:var(--deep-muted);border:1px solid #2A3A4F;border-radius:999px;padding:1px 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 14px;font-size:.92rem;font-weight:300}
.chips span.home{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:500}
@media (max-width:900px){.zone-card{grid-template-columns:1fr;gap:32px}}

.about{display:flex;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;margin-bottom:18px}
.about img{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none}
.about div{min-width:0;display:grid;gap:8px}
.about-text{font-size:1.15rem;line-height:1.55}
.about-sig{color:var(--muted);font-size:.92rem}
@media (max-width:560px){.about{flex-direction:column;align-items:flex-start;padding:22px}.about img{width:88px;height:88px}}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;display:grid;gap:10px;align-content:start}
.why .num{font-size:2.4rem;font-weight:200;line-height:1;letter-spacing:-.03em}
.why p{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.why{grid-template-columns:1fr}}

/* Contact */
.contact{display:grid;grid-template-columns:.9fr 1.2fr;gap:24px;align-items:stretch}
.coords{background:var(--soft);border-radius:var(--r-lg);padding:36px;display:grid;gap:22px;align-content:start}
.coord{display:grid;gap:2px}
.coord .lbl{font-size:.85rem;color:var(--muted)}
.coord .val{font-size:1.2rem;font-weight:400}
.coord .val.big{font-size:1.7rem;font-weight:300;letter-spacing:-.01em}
form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:400;font-size:.92rem;color:var(--muted)}
input,select,textarea{font:inherit;font-weight:300;font-size:1rem;color:var(--ink);padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);width:100%;transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%,transparent)}
textarea{min-height:130px;resize:vertical}
form .btn{justify-self:start}
.notice{font-size:.9rem;color:var(--muted)}
.notice[data-ok]{color:var(--ok);font-weight:400}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){.row2{grid-template-columns:1fr}form,.coords{padding:24px}}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px}

.todo{background:color-mix(in srgb,var(--accent) 40%,transparent);padding:0 4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.legal{max-width:760px;margin:0 auto;padding-block:56px 80px;display:grid;gap:28px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem)}
.legal h2{font-size:1.5rem;font-weight:500}
.legal section{display:grid;gap:8px}
.legal p,.legal li{color:var(--muted)}
.legal strong{color:var(--ink)}
.thanks{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.thanks .box{display:grid;gap:18px;justify-items:center;max-width:32em}