/*PAL*//*PAL*/:root{
  --p:#2747d6; --pd:#8fb0ff; --pdeep:#0b1f4d; --hl:#ffc933; --sand:#ffd98a; --accent-ink:#fff;
  --accent:var(--p); --surface:#fff;
  --ink:color-mix(in srgb,var(--pdeep) 88%,#000);
  --bg:color-mix(in srgb,var(--p) 6%,#fff);
  --line:color-mix(in srgb,var(--p) 20%,#fff);
  --muted:color-mix(in srgb,var(--ink) 68%,#fff);
  --deep:var(--pdeep);
  --sea1:color-mix(in srgb,var(--p) 28%,#fff);
  --sea2:color-mix(in srgb,var(--p) 80%,#fff);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-accent=ocean]{--p:#0e7c86;--pd:#4cc3cf;--pdeep:#06303a}
:root[data-accent=corail]{--p:#c0392b;--pd:#ff8a78;--pdeep:#4a1612}
:root[data-accent=foret]{--p:#1f7a4d;--pd:#62d49a;--pdeep:#0b3322}
:root[data-accent=violet]{--p:#6d3ad0;--pd:#b99cff;--pdeep:#2a1259}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--accent:var(--pd);--accent-ink:color-mix(in srgb,var(--pdeep) 45%,#000);--bg:color-mix(in srgb,var(--pdeep) 55%,#000);--surface:color-mix(in srgb,var(--pdeep) 88%,#fff);--ink:#eef2f5;--line:color-mix(in srgb,var(--pdeep) 65%,#fff);--muted:color-mix(in srgb,var(--ink) 70%,var(--bg));--deep:color-mix(in srgb,var(--pdeep) 60%,#000);--sea1:color-mix(in srgb,var(--p) 55%,#000);--sea2:color-mix(in srgb,var(--p) 25%,#000);--sand:#c9a14a}
}
:root[data-theme=dark]{--accent:var(--pd);--accent-ink:color-mix(in srgb,var(--pdeep) 45%,#000);--bg:color-mix(in srgb,var(--pdeep) 55%,#000);--surface:color-mix(in srgb,var(--pdeep) 88%,#fff);--ink:#eef2f5;--line:color-mix(in srgb,var(--pdeep) 65%,#fff);--muted:color-mix(in srgb,var(--ink) 70%,var(--bg));--deep:color-mix(in srgb,var(--pdeep) 60%,#000);--sea1:color-mix(in srgb,var(--p) 55%,#000);--sea2:color-mix(in srgb,var(--p) 25%,#000);--sand:#c9a14a}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;line-height:1.1;margin:0;letter-spacing:-.02em}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--hl);outline-offset:3px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font:700 1.1rem "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none}
nav{display:flex;gap:22px;font-size:.95rem}
nav a{color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink)}
.hero{padding:72px 22px 56px}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem);max-width:15ch}
.hero p.lead{font-size:1.2rem;color:var(--muted);max-width:52ch;margin:22px 0 34px}
.switch{justify-self:start;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px}
.switch button{font:600 .98rem "Instrument Sans",sans-serif;border:0;background:transparent;color:var(--muted);padding:11px 22px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.switch button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.panel{margin-top:26px;display:none;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.panel.on{display:grid}
.item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.item h3{font-size:1.15rem;margin-bottom:6px}
.item p{margin:0;color:var(--muted);font-size:.97rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:600;text-decoration:none;background:var(--accent);color:var(--accent-ink)}
.btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
section{padding:56px 0}
section h2{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:10px}
section .sub{color:var(--muted);max-width:60ch;margin:0 0 30px}
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.works li{display:grid;grid-template-columns:150px 1fr;gap:6px 28px;padding:24px 0;border-bottom:1px solid var(--line)}
.works .yr{font:700 1.05rem "Bricolage Grotesque",sans-serif;color:var(--accent)}
.works h3{font-size:1.25rem;margin-bottom:6px}
.works p{margin:0;color:var(--muted);max-width:68ch}
.works .lnk{display:inline-block;margin-top:8px;font-weight:600}
.dive{background:var(--deep);color:#eef2f5;border-radius:22px;padding:42px 34px}
.dive h2{color:#fff}
.dive .sub{color:color-mix(in srgb,#fff 72%,var(--deep))}
.dive a{color:var(--pd)}
.quals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:26px 0}
.quals div{border:1px solid color-mix(in srgb,var(--deep) 65%,#fff);border-radius:12px;padding:16px;font-weight:600;background:color-mix(in srgb,var(--deep) 85%,#fff)}
.quals span{display:block;font-weight:400;font-size:.9rem;color:color-mix(in srgb,#fff 72%,var(--deep));margin-top:4px}
.dive ul{margin:0 0 6px;padding-left:20px;color:color-mix(in srgb,#fff 85%,var(--deep))}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.contact a.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;color:var(--ink)}
.contact a.card b{display:block;font:700 1.1rem "Bricolage Grotesque",sans-serif;margin-bottom:4px}
.contact a.card span{color:var(--accent);word-break:break-word}
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--muted);font-size:.88rem}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:48px}
.hero>*{grid-column:1}
.hero>.art{grid-column:2;grid-row:1/span 6;align-self:start;margin:0}
.art svg{width:100%;height:auto;display:block}
.ic{width:32px;height:32px;color:var(--accent);margin-bottom:10px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dive{position:relative;overflow:hidden}
.dive>*{position:relative}
.dive .fishes{position:absolute;right:-10px;top:10px;width:260px;opacity:.9;pointer-events:none}
.fishes use{fill:var(--hl)}
@media (max-width:860px){
  .hero{display:block}
  .hero>.art{max-width:300px;margin:0 auto 30px}
  .dive .fishes{width:150px;opacity:.5}
}
.shot{display:block;width:100%;max-width:720px;margin-top:16px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:zoom-in}
.shot img{display:block;width:100%;height:auto}
dialog#lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
dialog#lb::backdrop{background:rgba(3,8,25,.8)}
dialog#lb img{display:block;max-width:96vw;max-height:92vh;object-fit:contain;border-radius:10px;background:#fff;cursor:zoom-out}
header.top .wrap{gap:18px}
nav{margin-left:auto}
.pal{display:flex;gap:8px;align-items:center}
.sw{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .15s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:0}
.qh{margin-top:48px}
.cards figure{margin:0}
.cards .shot{margin-top:0;max-width:none;border-color:color-mix(in srgb,var(--deep) 65%,#fff)}
.cards figcaption{margin-top:10px;font-size:.95rem}
.cards figcaption b{display:block;font-weight:600}
.cards figcaption span{display:block;color:color-mix(in srgb,#fff 72%,var(--deep));font-size:.88rem}
@media (max-width:640px){
  nav a:not(:last-child){display:none}
  .pal{gap:6px}
  nav{gap:14px;font-size:.88rem}
  .works li{grid-template-columns:1fr}
  .dive{padding:30px 20px}
  .hero{padding-top:44px}
  .switch{max-width:100%}
  .switch button{padding:10px 12px;font-size:.88rem;white-space:nowrap}
}
[data-d][hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* V2.1 — nouveau visuel du hublot */
.hero .art {
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-shadow: 0 18px 45px rgba(6,48,58,.22);
}
.hero .art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width:860px){
  .hero>.art {
    max-width: 340px;
    margin: 0 auto 30px;
  }
}