/* MarqueComme — shared styles for / (FR), /en/ (EN) and 404.
   The page commits to a single brand ground per load, so it sets every colour itself rather than following the viewer's theme. */
:root{
  --noir:#000000; --graphite:#4D4D4D; --jaune:#FFDE00; --gris:#A6A6A6; --blanc:#FFFFFF;
  --display:"Outfit",Arial,sans-serif; --text:"Inter",Arial,sans-serif;
  --pad-x:max(clamp(24px,8vw,128px),env(safe-area-inset-left,0px));
  --pad-x-r:max(clamp(24px,8vw,128px),env(safe-area-inset-right,0px));
  /* default ground: noir */
  --bg:var(--noir); --fg:var(--blanc); --muted:var(--gris); --line:rgba(255,255,255,.18);
  --l-m:var(--blanc); --l-c:var(--gris); --l-disc:var(--gris); --l-star:var(--jaune);
  color-scheme:dark;
}
html[data-bg="blanc"]{--bg:var(--blanc);--fg:var(--noir);--muted:var(--graphite);--line:rgba(0,0,0,.14);--l-m:var(--noir);--l-c:var(--graphite);--l-disc:var(--graphite);--l-star:var(--jaune);color-scheme:light}
html[data-bg="jaune"]{--bg:var(--jaune);--fg:var(--noir);--muted:var(--noir);--line:rgba(0,0,0,.22);--l-m:var(--noir);--l-c:var(--noir);--l-disc:var(--noir);--l-star:var(--jaune);color-scheme:light}
html[data-bg="graphite"]{--bg:var(--graphite);--fg:var(--blanc);--muted:#E6E6E6;--line:rgba(255,255,255,.22);--l-m:var(--blanc);--l-c:var(--blanc);--l-disc:var(--blanc);--l-star:var(--graphite);color-scheme:dark}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--fg);color:var(--bg)}
a:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

/* Language switch */
.lang{position:absolute;z-index:2;top:max(clamp(20px,4vh,40px),env(safe-area-inset-top,0px));right:var(--pad-x-r);
  font:500 14px/1 var(--text);letter-spacing:.06em;color:var(--muted);text-decoration:none;padding:8px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.lang:hover{color:var(--fg);border-color:currentColor}

/* Hero: one screen, one logo */
.page{position:relative;min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(48px,10vh,120px);padding-left:var(--pad-x);padding-right:var(--pad-x-r)}
.block{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px);max-width:1040px}
.logo{display:block;width:min(100%,920px);height:auto}
.logo .m{fill:var(--l-m)} .logo .c{fill:var(--l-c)} .logo .disc{fill:var(--l-disc)} .logo .star{fill:var(--l-star)}
.line{margin:0;font:500 clamp(18px,2.3vw,28px)/1.3 var(--display);letter-spacing:-0.005em;color:var(--fg);text-wrap:balance}
.mail{align-self:flex-start;font:500 clamp(15px,1.4vw,18px)/1.4 var(--text);color:var(--muted);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px;transition:color .15s}
.mail:hover{color:var(--fg)}

/* Scroll cue */
.scroll{position:absolute;left:var(--pad-x);bottom:max(clamp(24px,5vh,48px),env(safe-area-inset-bottom,0px));
  display:block;width:28px;height:28px;color:var(--muted);transition:opacity .3s,color .15s;animation:bob 2s ease-in-out infinite}
.scroll svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.scroll:hover{color:var(--fg)}
.scroll.gone{opacity:0;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll{animation:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.section{scroll-margin-top:24px}

/* Sections: projects, services, about */
.section{padding:0 var(--pad-x-r) clamp(64px,12vh,140px) var(--pad-x)}
.section[hidden]{display:none}
.section h2{margin:0 0 clamp(24px,3vw,40px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);
  font:500 14px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,3.5vw,48px) clamp(20px,2.5vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));max-width:1280px}
.card{display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none}
.card .img{aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover img{transform:scale(1.03)}
.card h3{margin:0;font:600 clamp(19px,1.6vw,22px)/1.2 var(--display);letter-spacing:-0.01em;display:flex;gap:.35em;align-items:center}
.card h3 .arrow{flex:none;width:.6em;height:.6em;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter;transition:transform .15s,stroke .15s}
.card:hover h3 .arrow{transform:translate(2px,-2px);stroke:var(--fg)}
.card p{margin:0;font:400 15px/1.45 var(--text);color:var(--muted);text-wrap:pretty}

.services{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,3.5vw,48px) clamp(20px,2.5vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));max-width:1280px}
.services h3{margin:0 0 10px;font:600 clamp(19px,1.6vw,22px)/1.2 var(--display);letter-spacing:-0.01em;text-wrap:balance}
.services p{margin:0;font:400 15px/1.45 var(--text);color:var(--muted);text-wrap:pretty}
.about{margin:0 0 clamp(24px,3vw,36px);max-width:820px;font:500 clamp(18px,1.9vw,24px)/1.4 var(--display);letter-spacing:-0.005em;text-wrap:pretty}

/* Footer */
.foot{padding:0 var(--pad-x-r) clamp(28px,5vh,48px) var(--pad-x);font:400 13px/1.5 var(--text);color:var(--muted)}
.foot a{color:inherit}

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