
/*
Direction : magazine éditorial suisse, couverture asymétrique, typographie expressive.
Vibe : chaleureux, précis, cultivé, naturel.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --accent:#3d5a45;
  --ink:#111111;
  --paper:#ffffff;
  --wash:#f2f4ef;
  --line:#cfd6ce;
  --muted:#647067;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-7:64px;
  --space-8:96px;
  --radius:0;
  --ease:cubic-bezier(.16,1,.3,1);
  --signature-speed:520ms;
  --display:clamp(2.5rem,7vw,6.6rem);
  --title:clamp(1.8rem,4vw,3.4rem);
  --body:1rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.65 "Work Sans",sans-serif}
a{color:var(--accent);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3,.brand,.footer-wordmark{font-family:"Space Grotesk",sans-serif;line-height:1.03;letter-spacing:-.045em}
h1{font-size:var(--title);margin:0 0 var(--space-3)}
h2{font-size:clamp(1.8rem,4vw,3.2rem);margin:0 0 var(--space-3)}
h3{font-size:1.35rem;margin:0 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.section{padding:var(--space-8) 0}
.section--alt{background:var(--wash)}
.section__head{display:flex;gap:var(--space-4);align-items:end;border-bottom:1px solid var(--ink);padding-bottom:var(--space-3);margin-bottom:var(--space-6)}
.grid{display:grid;gap:var(--space-5)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--3>*:nth-child(2){transform:translateY(var(--space-4))}
.media-split{display:grid;gap:var(--space-5);align-items:start;margin:var(--space-5) auto}
@media(min-width:768px){.media-split{grid-template-columns:minmax(0,400px) 1fr}}
.stack>*+*{margin-top:var(--space-3)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.site-header__inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.brand{font-size:1.2rem;color:var(--ink);font-weight:700}
.nav{display:none;align-items:center;gap:var(--space-3)}
.nav__link{position:relative;color:var(--ink);font-size:.88rem}
.nav__link:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--accent);transition:width var(--signature-speed) var(--ease)}
.nav__link:hover:after{width:100%}
.nav__cta{border-left:1px solid var(--accent);padding-left:var(--space-3);font-weight:600}
.nav-toggle{border:0;background:transparent;font:600 .8rem "Work Sans";color:var(--ink);cursor:pointer}
.page-hero{min-height:calc(100vh - 72px);display:grid;align-content:center;padding:var(--space-7) 0}
.page-hero__title{max-width:760px;font-size:var(--display);font-weight:600}
.page-hero__title:before{content:"";display:block;width:clamp(80px,16vw,220px);height:2px;background:var(--accent);margin-bottom:var(--space-4)}
.page-hero__intro{max-width:500px;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.4;color:var(--muted)}
.eyebrow{display:block;color:var(--accent);font:600 .75rem "Work Sans";letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-2)}
.lead{font-size:1.2rem;line-height:1.5}
.btn{display:inline-block;border:1px solid var(--accent);padding:12px 20px;color:var(--accent);font-weight:600;transition:transform var(--signature-speed) var(--ease),background var(--signature-speed) var(--ease),color var(--signature-speed) var(--ease)}
.btn:hover{background:var(--accent);color:var(--paper);transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:var(--paper)}
.btn--ghost{background:transparent}
.card{border-top:1px solid var(--ink);padding:var(--space-4) 0}
.card:nth-child(2){max-width:88%;margin-left:auto}
.card:nth-child(3){border-bottom:1px solid var(--ink)}
.card__title{font-size:1.45rem}
.card__body{color:var(--muted)}
.list-plain{padding:0;margin:0;list-style:none}
.list-plain li{border-bottom:1px solid var(--line);padding:var(--space-2) 0}
.site-footer{background:var(--ink);color:var(--paper);padding:var(--space-7) 0}
.site-footer a{color:#d8e1d8}
.site-footer__inner{display:grid;grid-template-columns:1fr;gap:var(--space-4);max-width:1180px;margin-inline:auto}
.footer-wordmark{font-size:1.3rem;color:var(--paper);margin:0 0 var(--space-2)}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:var(--space-1);font-size:.9rem}
.site-footer h2,.site-footer h3{font:600 .9rem "Work Sans";letter-spacing:.08em;text-transform:uppercase;color:#d8e1d8}
.footer-legal{grid-column:1 / -1;border-top:1px solid #526056;padding-top:var(--space-3);font-size:.78rem;color:#b8c2b9}
.footer-video{margin-top:var(--space-4)}
.footer-video iframe{width:100%;max-width:320px;aspect-ratio:16/9;border:0;border-radius:8px;display:block;margin-top:var(--space-2)}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--paper);padding:8px 12px;z-index:20}
.skip-link:focus{left:8px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media(min-width:640px){.container{width:min(1180px,calc(100% - 64px))}.grid--2{grid-template-columns:1.35fr .65fr}.grid--3{grid-template-columns:1.2fr .8fr 1fr}}
@media(min-width:768px){.nav{display:flex}.nav-toggle{display:none}.site-footer__inner{grid-template-columns:2fr 1fr 1fr;gap:var(--space-4)}}
@media(min-width:1024px){.page-hero{padding-block:var(--space-8)}}
@media(max-width:767px){.nav.is-open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:var(--space-3);flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1;transform:none;transition:none}.btn,.nav__link:after{transition:none}}

/* Zala enforcement - footer brand/wordmark must stay small */
.footer-wordmark, .footer__brand, .footer__title, .footer__logo,
.footer-brand, .site-footer__wordmark, .site-footer__brand, .site-footer__title {
  font-size: 1.35rem !important;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Zala enforcement - generated logo asset */
.brand, .footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.brand__logo, .footer-logo {
  flex: 0 0 auto;
  object-fit: contain;
}
.brand__logo { width: 48px; height: 48px; }
.footer-logo { width: 40px; height: 40px; }

/* Zala enforcement - compact hero rhythm */
.page-hero {
  min-height: auto !important;
  align-items: start !important;
  padding-block: clamp(48px, 8vw, 96px) !important;
}
@media (max-width: 767px) {
  .page-hero {
    min-height: auto !important;
    padding-block: 48px 64px !important;
  }
}
@media (min-width: 640px) {
  .page-hero {
    grid-template-columns: 1fr !important;
  }
}
.page-hero__title {
  max-width: min(100%, 1100px) !important;
  line-height: 1.1;
}
.page-hero__intro {
  max-width: 52ch !important;
  font-size: clamp(1.125rem, 1.6vw, 1.35rem) !important;
}
@media (max-width: 767px) {
  .page-hero__title, .page-hero__intro {
    max-width: 100% !important;
  }
}
