/* Magnora Partners — magnorapartners.com
   Charte prune & laiton (rebrand 2026-07, voir assets/brand/CHARTE.md) :
   prune #2B1723 · ivoire #F4EFE6 · laiton #C99B5F · bronze #8A5A2E. Jamais navy, jamais orange vif.
   Les noms de variables historiques (--cream, --orange…) sont conservés : ce commentaire fait foi. */

:root{
  --cream:#F4EFE6; --cream-2:#EAE3D6; --ink:#2B1723; --taupe:#5A4A42;
  --orange:#C99B5F; --orange-text:#8A5A2E; --orange-vif:#C99B5F; --white:#FFFFFF;
}

/* Inter self-hosted (variable 100-900, latin + latin-ext) — pas de CDN critique (garde-fou skill) */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6;
}
img{max-width:100%; height:auto}
a{color:var(--orange-text); text-decoration:none}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--orange-text); outline-offset:2px}
.band :focus-visible,footer.site :focus-visible,.section-dark :focus-visible,.flux-band :focus-visible{outline-color:var(--orange)}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ---- Nav ---- */
header.site{padding:14px 0; position:sticky; top:0; z-index:50;
  background:rgba(43,23,35,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(244,239,230,.10)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative}
.nav-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.nav-toggle:focus-visible + .nav-burger{outline:3px solid var(--orange);outline-offset:2px}
@media (min-width:851px){.nav-toggle{display:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:10px 18px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.nav-burger{display:none; font-size:28px; padding:8px 12px; cursor:pointer; color:var(--cream); border:1px solid rgba(244,239,230,.35); border-radius:8px; line-height:1}
header.site .logo{display:flex; flex-direction:column; line-height:1.15; color:var(--cream)}
header.site .lg-word{font-weight:400; font-size:26px; letter-spacing:.06em}
header.site .lg-part{font-weight:400; font-size:10px; letter-spacing:.5em; color:var(--orange)}
nav.menu{display:flex; gap:26px; align-items:center; font-size:15px; font-weight:600}
nav.menu a{color:#C9B8AE}
nav.menu a[aria-current="page"]{color:var(--cream)}
nav.menu a.btn{color:var(--ink)}
nav.menu .btn{margin-left:6px}
nav.menu a.lang{border:1px solid rgba(244,239,230,.35); border-radius:8px; padding:4px 10px; font-size:13px; letter-spacing:.08em}

/* ---- Boutons ---- */
.btn{display:inline-block; background:var(--orange); color:var(--ink); font-weight:700;
  font-size:16px; padding:13px 26px; border-radius:999px; border:none; cursor:pointer}
.btn:hover{background:var(--orange-text); color:var(--cream)}
.btn.ghost{background:transparent; color:var(--orange-text); border:2px solid var(--orange-text)}
.btn.ghost:hover{color:var(--ink); border-color:var(--orange-text); background:transparent}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn-note{display:block; margin-top:10px; font-size:14px; color:var(--taupe)}

/* ---- Hero ---- */
.hero{position:relative; padding:64px 0 80px; overflow:hidden; background:var(--ink); color:var(--cream)}
.hero h1{font-size:clamp(32px,5vw,58px); line-height:1.1; letter-spacing:-.02em; max-width:16ch}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero .sub{max-width:52ch; color:#C9B8AE; font-size:18px; margin:24px 0 32px}
.hero .btn-note{color:#C9B8AE}
.hero .btn.ghost{color:var(--orange); border-color:var(--orange)}
.hero .btn.ghost:hover{color:var(--cream); border-color:var(--cream); background:transparent}
.hero .globe{position:absolute; right:6vw; top:50%; transform:translateY(-50%);
  width:min(38vw,500px); aspect-ratio:1}
.hero canvas{width:100%; height:100%; display:block}

/* ---- Double porte ---- */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink)}
.door{background:var(--cream-2); padding:48px 40px; border-top:3px solid var(--orange)}
.door .pour{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe)}
.door h2{font-size:26px; letter-spacing:-.02em; margin:8px 0 12px}
.door p{color:var(--taupe); font-size:16px; max-width:44ch; margin-bottom:18px}
.door a{font-weight:700}

/* ---- Sections génériques ---- */
section.bloc{padding:72px 0}
section.bloc h2{font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; margin-bottom:8px}
section.bloc .lead{color:var(--taupe); max-width:56ch; margin-bottom:40px}

/* ---- Comment ça marche ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.step h3{font-size:19px; margin-bottom:6px; color:var(--ink)}
.step p{font-size:15.5px; color:var(--taupe)}

/* ---- Bandeau guide ---- */
.band{background:var(--ink); color:#F4EFE6; padding:56px 0}
.band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.band h2{font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; max-width:24ch}
.band a{color:var(--orange)}
.band a.btn{color:var(--ink)}
.band a.btn:hover{color:var(--cream)}
.band p{color:#C9B8AE; margin-top:8px; max-width:50ch}

/* ---- Échelle ---- */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.offer{background:var(--white); border:1px solid #E0D7C8; border-radius:14px; padding:30px 26px;
  display:flex; flex-direction:column}
.offer.hot{border:2px solid var(--orange-text); box-shadow:0 0 0 3px rgba(201,155,95,.25)}
.offer h3{font-size:20px; margin-bottom:4px}
.offer .prix{color:var(--orange-text); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums}
.offer p{font-size:15.5px; color:var(--taupe); margin:12px 0 16px; flex:1}
.offer a{font-weight:700}
.offer .garantie{font-size:14px; background:var(--cream); border-radius:8px; padding:10px 12px; margin-top:4px}

/* ---- Bloc Nathalie ---- */
.about{background:var(--cream-2)}
.about .wrap{display:flex; gap:40px; align-items:center; flex-wrap:wrap}
.about img{width:170px; height:200px; object-fit:cover; border-radius:12px; flex:none}
.about h2{margin-bottom:10px}
.about p{color:var(--taupe); max-width:54ch}
.about .signature{margin-top:12px; font-weight:700; color:var(--ink)}

/* ---- Footer ---- */
footer.site{background:var(--ink); color:#C9B8AE; padding:48px 0; font-size:15px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
footer.site .bookend{color:#F4EFE6; font-weight:700; font-size:17px}
footer.site a{color:#D8C9BF}
footer.site nav{display:flex; gap:18px; flex-wrap:wrap}

/* ---- Tablette (768–1024) ---- */
@media (max-width:1024px){
  .hero .globe{width:min(38vw,300px); right:12px}
  .steps{gap:24px}
  .offers{grid-template-columns:repeat(3,1fr); gap:14px}
  .offer{padding:24px 18px}
}
@media (max-width:820px){
  .doors{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr; max-width:520px}
  .steps{grid-template-columns:1fr; gap:28px; max-width:560px}
}

/* ---- Mobile (≤640) ---- */
@media (max-width:900px){
  .hero .globe{position:static; transform:none; width:280px; margin:36px auto 0}
  .hero{padding-bottom:48px}
}
@media (max-width:850px){
  .nav-burger{display:block}
  nav.menu{display:none; position:absolute; top:64px; left:0; right:0; background:var(--ink);
    flex-direction:column; align-items:flex-start; padding:18px 24px; gap:16px; z-index:10;
    border-bottom:2px solid var(--orange)}
  .nav-toggle:checked ~ nav.menu{display:flex}
  nav.menu a{display:block;width:100%;padding:8px 0}
}
@media (max-width:640px){
  body{font-size:16px}
  header.site .lg-word{font-size:22px}
  .hero{padding:40px 0 48px}
  .hero .sub-more{display:none}
  .door{padding:36px 24px}
  section.bloc{padding:56px 0}
  .band .wrap{flex-direction:column; align-items:flex-start}
  .about .wrap{flex-direction:column; align-items:flex-start}
}

/* ---- Laptop large ---- */
@media (min-width:1366px){
  .hero{padding:88px 0 104px}
}

/* ---- Animation flux (fuites → récupération) ---- */
.flux-band{background:var(--ink); padding:48px 0}
.flux-stage{position:relative}
.flux-stage canvas{display:block; width:100%; height:auto}
.flux-caption{position:absolute; left:16px; bottom:10px; color:#F4EFE6;
  font-size:clamp(14px,2.2vw,19px); font-weight:600; letter-spacing:.01em;
  transition:opacity .6s ease; min-height:24px}
.flux-caption .n{color:#C99B5F; margin-right:10px; font-variant-numeric:tabular-nums}

/* ---- Illustrations isométriques ---- */
.ill{display:block; width:210px; height:auto; margin:-14px 0 2px -14px}
.step .ill{width:160px; margin:-10px 0 2px -10px}

/* ---- Section sombre (alternance clair/sombre, charte prune & laiton) ---- */
.section-dark{background:var(--ink); color:var(--cream)}
.section-dark h2,.section-dark h3{color:var(--cream)}
.section-dark p{color:#C9B8AE}
.section-dark a{color:var(--orange)}

/* ---- Dynamisme (scroll reveal + micro-interactions) ---- */
.btn{transition:background .2s ease, transform .15s ease}
.btn:active{transform:scale(.97)}
.offer,.door,.step{transition:transform .25s ease, box-shadow .25s ease}
.offer:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(43,23,35,.10)}
.door:hover{background:#E0D7C8}
.door a,.offer a{display:inline-block; transition:transform .2s ease}
.door a:hover,.offer a:hover{transform:translateX(4px)}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .flux-caption{transition:none}
  .reveal{opacity:1; transform:none; transition:none}
  .offer,.door,.step,.btn,.door a,.offer a{transition:none}
}