/* MG Prod — feuille de style commune */
:root{
  --sage:#9FCDA8; --dark:#1D1E20; --cream:#F3EFE4; --deep:#2F6B4A; --muted:#3A3D3F; --soft:#D2DAD3;
  --gutter:clamp(16px,4vw,56px);
  --display:Anton,Impact,'Arial Narrow','Helvetica Neue',sans-serif;
}
h1,h2{overflow-wrap:break-word}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--dark);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
main,.site-footer{overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:url(../img/grain.png);opacity:.09;mix-blend-mode:multiply}
img{max-width:100%;display:block}
a{color:var(--deep)}
a:hover{color:var(--dark)}
button{font:inherit}
.wrap{max-width:1328px;margin:0 auto}
.label{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.site-header{background:var(--dark);color:var(--cream);padding:16px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(243,239,228,.12)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:40px;width:auto}
.brand span{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sage)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 30px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.site-nav a{position:relative;padding:6px 0;color:#fff;text-decoration:none;transition:color .2s}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.site-nav a:hover::after,.site-nav a.on::after{transform:scaleX(1)}
.site-nav a.on{color:var(--sage)}
.foot-nav a{color:var(--cream);text-decoration:none;opacity:.72;transition:opacity .2s,color .2s}
.foot-nav a:hover{opacity:1;color:var(--sage)}
@media (max-width:1100px){.brand span{font-size:15px}}
@media (max-width:700px){.brand span{display:none}.site-nav{gap:6px 18px;font-size:14px}}

/* ---------- Pied de page ---------- */
.site-footer{position:relative;background:var(--dark);color:var(--cream);padding:clamp(56px,7vw,96px) var(--gutter) 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.foot-big{font-family:var(--display);font-size:clamp(72px,12vw,200px);line-height:1.02;letter-spacing:.04em;color:var(--sage)}
.foot-addr{display:flex;flex-direction:column;gap:10px}
.foot-addr .label{color:var(--sage);letter-spacing:.16em}
.foot-addr p{margin:0;font-size:18px;line-height:1.5}
.insta-link{margin-top:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:18px;font-weight:600;color:var(--sage);text-decoration:none}
.insta-link:hover{color:var(--cream)}
.foot-nav{display:flex;flex-direction:column;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.foot-base{margin-top:56px;font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#A9B2AB;border-top:1px solid rgba(243,239,228,.15);padding-top:20px}
@media (max-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr)}.foot-big{font-size:clamp(56px,18vw,120px)}}

/* ---------- Boutons ---------- */
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s;cursor:pointer;border:0}
.cta:hover{transform:translateY(-3px)}
.cta .arr{display:inline-block;transition:transform .25s}
.cta:hover .arr{transform:translateX(5px)}
.cta-sage{background:var(--sage);color:var(--dark)}
.cta-sage:hover{color:var(--dark)}
.cta-ghost{border:1px solid rgba(243,239,228,.4);color:var(--cream);background:transparent}
.cta-ghost:hover{color:var(--cream)}
.cta-cream{background:var(--cream);color:var(--dark)}
.cta-dark{background:var(--dark);color:var(--cream)}
.cta-dark:hover{color:var(--cream)}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--dark);border:0;border-bottom:1px solid var(--dark);background:none;padding:0;cursor:pointer}
.more:hover{color:var(--deep);border-color:var(--deep)}
.more .arr{display:inline-block;transition:transform .25s}
.more:hover .arr{transform:translateX(5px)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}

/* ---------- Animations ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(10deg)}}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-10px)}66%{transform:translate(-10px,8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes lineup{from{transform:translateY(105%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.4}}
@keyframes blobby{0%,100%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%}50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%}}
@keyframes trailDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(26px,-20px) rotate(5deg)}}
.spin{animation:spin 22s linear infinite}
.pulse{animation:pulse 3.2s ease-in-out infinite}
.popin{animation:pop .9s cubic-bezier(.2,.9,.3,1.3) both}
.blobby{animation:blobby 8s ease-in-out infinite,drift 11s ease-in-out infinite}
.line{display:block;clip-path:inset(-1em -1em 0 -1em)}
.line>span{display:block;animation:lineup 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.after-intro .line>span{animation-delay:calc(var(--d,0s) + 4.1s)}
/* apparition au scroll */
.rv{opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}
/* traînées de grain */
.trail{position:absolute;pointer-events:none;z-index:4;height:auto;max-width:none;animation:trailDrift 16s ease-in-out infinite}
.trail.behind{z-index:0}
.on-light{mix-blend-mode:multiply}
.on-dark{mix-blend-mode:screen}
@media (max-width:900px){.trail{width:180px !important}}
/* survol photos */
.zoom{overflow:hidden}
.zoom img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.06)}
.frame{position:relative;overflow:hidden;background:var(--deep)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.rv{opacity:1;transform:none}}