/* ============================================================
   Ferm'inov — Ferme expérimentale de Jalogny
   Direction : Éditorial · Hero plein cadre
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Archivo',sans-serif;background:#0e120f}
img{display:block}
input{font-family:inherit}
a{-webkit-tap-highlight-color:transparent}

/* hero animation keyframes (driven/overridden by support-lite.js) */
@keyframes kbZoom{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.16) translate(-2.4%,-1.8%)}}
@keyframes imgFade{from{opacity:0}to{opacity:1}}
@keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

:root{
  --ink:#20301F;
  --cream:#F6F4EC;
  --sand:#EDEBE0;
  --green:#3C6E47;
  --green-soft:#A9D2AE;
  --ease:cubic-bezier(.22,1,.36,1);
}

.wrap{max-width:1320px;margin:0 auto;width:100%}
.px{padding-left:56px;padding-right:56px}

/* ---- typographic helpers ---- */
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:'Newsreader',serif}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.16em;color:var(--green)}

/* ---- buttons ---- */
.btn{display:inline-block;text-decoration:none;font-size:14px;font-weight:600;padding:15px 28px;border-radius:14px;transition:all .3s var(--ease)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(32,48,31,.5)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
.btn-outline-dark{border:1px solid var(--ink);color:var(--ink)}
.btn-outline-dark:hover{transform:translateY(-3px);background:var(--ink);color:var(--cream)}
.btn-outline-light{border:1.5px solid var(--cream);color:var(--cream)}
.btn-outline-light:hover{transform:translateY(-3px);background:var(--cream);color:var(--ink)}
.btn-outline-cream{border:1px solid rgba(246,244,236,.6);color:var(--cream)}
.btn-outline-cream:hover{transform:translateY(-3px);background:var(--cream);color:var(--green)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.more{display:flex;justify-content:center;margin-top:48px}
.more-link{display:inline-flex;align-items:center;gap:8px}

/* ---- navigation ---- */
.nav{display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;font-size:13.5px;font-weight:500}
.nav a{text-decoration:none;padding:9px 15px;border-radius:999px;transition:all .25s}
.nav .cta{padding:9px 18px}
/* light nav over photo (glass) */
.nav-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-glass a{color:var(--cream)}
.nav-glass a:hover{background:rgba(255,255,255,.2)}
.nav-glass .cta{color:var(--ink);background:var(--cream)}
.nav-glass .cta:hover{background:#fff}
/* dark nav over cream */
.nav-solid{background:rgba(32,48,31,.06);border:1px solid rgba(32,48,31,.12)}
.nav-solid a{color:var(--ink)}
.nav-solid a:hover{background:rgba(32,48,31,.1)}
.nav-solid .cta{color:var(--cream);background:var(--ink)}
.nav-solid .cta:hover{background:var(--green)}

header.site{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:24px 56px}
header.site .logo{height:54px;width:auto}

/* ---- image hover effects ---- */
.zoom{overflow:hidden}
.zoom img{transition:transform .8s var(--ease)}
.zoom:hover img{transform:scale(1.06)}
.zoom-lg img{transition:transform .6s var(--ease)}
.zoom-lg:hover img{transform:scale(1.08)}

.card{transition:all .4s var(--ease)}
.card-8:hover{transform:translateY(-8px);box-shadow:0 30px 56px -26px rgba(32,48,31,.35)}
.card-7:hover{transform:translateY(-7px);box-shadow:0 26px 50px -24px rgba(32,48,31,.32)}
.card-res:hover{transform:translateY(-7px);box-shadow:0 24px 48px -18px rgba(0,0,0,.3)}
.actu{transition:transform .4s var(--ease)}
.actu:hover{transform:translateY(-6px)}

.polaroid{transition:transform .4s var(--ease)}
.polaroid:hover{transform:rotate(0deg) scale(1.04)}

.chip{transition:all .25s}
.chip:hover{transform:scale(1.06)}
.chip-ghost:hover{background:rgba(246,244,236,.15)}

.social{display:inline-block;transition:transform .25s;opacity:.85}
.social:hover{transform:translateX(5px);opacity:1}

.btn-sub{background:var(--ink);color:var(--cream);border:none;font-size:14px;font-weight:600;padding:14px 24px;border-radius:0 14px 14px 0;cursor:pointer;transition:all .3s}
.btn-sub:hover{background:var(--green);transform:translateY(-2px)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .px{padding-left:28px;padding-right:28px}
  header.site{padding:18px 28px}
  .grid-2,.grid-3,.grid-4,.hero-manifesto-grid{grid-template-columns:1fr !important}
  .stats-grid{grid-template-columns:1fr 1fr !important}
  .nav{flex-wrap:wrap;justify-content:flex-end}
  h1.hero-title{font-size:clamp(44px,9vw,64px) !important}
  .h2-big{font-size:clamp(30px,6vw,42px) !important}
  .newsletter-row{flex-direction:column;align-items:flex-start !important}
  .polaroid{position:static !important;transform:none !important;margin-top:18px}
}
@media (max-width:600px){
  .px{padding-left:18px;padding-right:18px}
  header.site{flex-direction:column;gap:16px}
  .stats-grid{grid-template-columns:1fr !important;gap:18px !important}
  .nav{font-size:12.5px}
  .sub-field{width:100% !important}
  .sub-input{width:100% !important;border-radius:14px 14px 0 0 !important;border-right:1px solid var(--ink) !important}
  .btn-sub{border-radius:0 0 14px 14px;width:100%}
}

/* ============================================================
   Responsive — static (inline-styled) homepage, targeted by
   attribute selectors so the design markup stays untouched.
   ============================================================ */
@media (max-width:980px){
  #2a [style*="grid-template-columns:repeat(4"],
  #2a [style*="grid-template-columns:repeat(3"],
  #2a [style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr 1fr !important}
  #2a [style*="grid-template-columns:.9fr"],
  #2a [style*="grid-template-columns:1.1fr"],
  #2a [style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr !important;gap:32px !important}
  #2a header[style*="padding:24px 56px"]{padding:18px 28px !important;flex-wrap:wrap;gap:14px}
  #2a [style*="padding:0 56px 70px"]{padding:0 28px 56px !important}
  #2a [style*="padding:90px 56px"],
  #2a [style*="padding:80px 56px"],
  #2a [style*="padding:84px 56px"],
  #2a [style*="padding:56px 56px"],
  #2a [style*="padding:64px 56px"]{padding-left:28px !important;padding-right:28px !important}
  #2a nav{flex-wrap:wrap;gap:14px !important;justify-content:flex-end}
  #2a h1[style*="font-size:84px"]{font-size:clamp(46px,9vw,72px) !important}
}
@media (max-width:620px){
  #2a [style*="grid-template-columns:repeat(4"],
  #2a [style*="grid-template-columns:repeat(3"],
  #2a [style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr !important}
  #2a [style*="padding:90px 56px"],
  #2a [style*="padding:80px 56px"],
  #2a [style*="padding:84px 56px"]{padding-top:60px !important;padding-bottom:60px !important;padding-left:18px !important;padding-right:18px !important}
  #2a header[style*="padding"]{padding-left:18px !important;padding-right:18px !important}
  #2a [style*="padding:0 56px 70px"]{padding:0 18px 48px !important}
  /* newsletter input row */
  #2a input[type="email"]{width:100% !important;border-radius:14px 14px 0 0 !important;border-right:1px solid #20301F !important}
  #2a [data-subscribe]{border-radius:0 0 14px 14px !important;width:100%}
  #2a form,#2a [style*="min-width:340px"]{min-width:0 !important;width:100% !important;flex-direction:column}
}