@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-400.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-500.woff2) format("woff2")}
:root{
  --bg:#E4E5E3;--ink:#202328;--grey:#6F7378;--line:#CDCFCC;--surface:#D8DAD7;
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g:clamp(20px,3vw,48px);
  --small:clamp(12px,.2vw + 11.5px,14px);
  --ease:cubic-bezier(.22,.61,.24,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#202328;--ink:#E4E5E3;--grey:#8E9297;--line:#343840;--surface:#2A2E34}}
:root[data-theme="dark"]{--bg:#202328;--ink:#E4E5E3;--grey:#8E9297;--line:#343840;--surface:#2A2E34}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--small);line-height:1.45;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{all:unset;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--grey)}
.hov{transition:opacity .6s var(--ease)}
.hov:hover{opacity:.5}

/* header + hero */
.top{display:flex;justify-content:space-between;align-items:center;padding:clamp(22px,2.6vw,40px) var(--g)}
.logo{display:block;line-height:0}
.logo svg{display:block;height:clamp(16px,.6vw + 12px,22px);width:auto;aspect-ratio:369/59;fill:currentColor}
.top-right{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.lang{display:flex;gap:8px}
.lang a{opacity:.35;transition:opacity .6s var(--ease)}
.lang a:hover{opacity:.7}
.lang a[aria-current="true"]{opacity:1}
.screen{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.hero{margin-top:auto}
.hero-body{padding:clamp(64px,10vw,160px) var(--g) var(--g)}
.statement{margin:0 0 clamp(40px,6vw,96px);max-width:17ch;font-size:clamp(40px,6.2vw,116px);font-weight:500;letter-spacing:-.045em;line-height:.95;text-wrap:balance;opacity:0;transition:opacity 2s var(--ease) .2s}
.loaded .statement{opacity:1}
.hero-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--line);padding-top:clamp(14px,1.4vw,20px)}


#globe{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.top,.hero{position:relative;z-index:1}

/* index */
.index{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);padding:clamp(96px,14vw,220px) var(--g)}
.index-head{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:clamp(8px,1vw,16px)}
.list{list-style:none;margin:0;padding:0;align-self:start}
.row{border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:clamp(18px,2vw,30px) 0}
.name{font-size:clamp(24px,2.6vw,44px);font-weight:400;letter-spacing:-.025em;line-height:1.05;transition:transform .9s var(--ease)}
.row a:hover .name,.row a:focus-visible .name{transform:translateX(10px)}
.list:hover .row a:not(:hover) .name{opacity:.35}
.name{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.row .thumb{display:none}
.desc{grid-column:1/-1;max-width:44ch;margin-top:-6px;line-height:1.45}
/* conseil */
.advice{padding:0 var(--g) clamp(96px,14vw,220px)}
.adv{list-style:none;margin:0;padding:0}
.adv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px var(--g);align-items:baseline;border-top:1px solid var(--line);padding:clamp(16px,1.6vw,26px) 0}
.adv-row:last-child{border-bottom:1px solid var(--line)}
.adv-n{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.02em;line-height:1.1}
.preview{position:sticky;top:var(--g);aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.preview svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.03);transition:opacity 1.2s var(--ease),transform 2.4s var(--ease)}
.preview svg.on{opacity:1;transform:scale(1)}

/* contact */
.contact{padding:0 var(--g) clamp(96px,14vw,220px)}
.mail{display:inline-block;font-size:clamp(30px,5.4vw,96px);letter-spacing:-.035em;line-height:1;border-bottom:1px solid var(--line);padding-bottom:.08em;transition:border-color .8s var(--ease)}
.mail:hover{border-bottom-color:var(--ink)}

footer{padding:var(--g);border-top:1px solid var(--line)}
.f-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px var(--g)}
footer p{margin:0;max-width:48ch}
footer .end{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2vw,32px)}
.f-logo{display:block;width:clamp(110px,9vw,140px);height:auto;fill:var(--ink);margin-bottom:14px}

.js .fade{opacity:0;transition:opacity 1.8s var(--ease)}
.js .fade.in{opacity:1}

/* mentions légales */
.legal{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--bg);color:var(--ink)}
.legal::backdrop{background:var(--bg)}
.legal[open]{animation:lin .6s var(--ease)}
@keyframes lin{from{opacity:0}to{opacity:1}}
.legal-in{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,72px) var(--g) clamp(64px,8vw,120px);padding-top:calc(env(safe-area-inset-top,0px) + clamp(28px,5vw,72px))}
.legal-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(40px,6vw,88px)}
.legal h2{margin:0;font-weight:400;font-size:clamp(30px,4vw,56px);letter-spacing:-.035em;line-height:1}
.legal h3{margin:clamp(28px,3vw,40px) 0 8px;font-weight:500;font-size:var(--small)}
.legal p{margin:0 0 6px;color:var(--grey);max-width:60ch;line-height:1.55}
.legal a{border-bottom:1px solid var(--line)}
.legal-close{font-size:var(--small)}
html[lang="en"] .legal [lang="fr"],html:not([lang="en"]) .legal [lang="en"]{display:none}

@media (max-width:760px){
  .index{grid-template-columns:1fr}
  .preview{display:none}
  .row .thumb{display:block;grid-column:1/-1;order:3;aspect-ratio:4/5;overflow:hidden;background:var(--surface);margin-top:12px}
  .row+.row{margin-top:clamp(28px,8vw,48px)}
  .row:last-child{border-bottom:0}
  .row a:hover .name{transform:none}
  .adv-row{grid-template-columns:1fr}
  .row .thumb svg{display:block;width:100%;height:100%}
  .list:hover .row a:not(:hover) .name{opacity:1}
  
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .preview svg{transform:none}
  .statement,.js .fade{opacity:1}
}