:root{--brun:#5A3A1A;--dore:#C6924B;--beige:#F3E8D3;--noir:#1C1C1C;--creme:#FAF8F3;--bleu:#2C5F7C;--vert:#4A7C59;--font-display:'Pompiere',cursive;--font-body:'Roboto',sans-serif}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--noir);line-height:1.75;background:var(--creme)}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}
#hero{position:relative;height:100vh;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:url('https://picsum.photos/seed/sercovier-hero/1920/1080') center/cover no-repeat;color:#fff}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(90,58,26,.3),rgba(90,58,26,.65));z-index:1}
.hero-content{position:relative;z-index:2;padding:0 1.5rem}
.hero-title{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);font-weight:400;letter-spacing:.3em;margin-bottom:.25em;opacity:0;animation:fadeInUp .8s ease forwards}
.hero-subtitle{font-size:clamp(1rem,2.5vw,1.35rem);letter-spacing:.15em;margin-bottom:.5em;opacity:0;animation:fadeInUp .8s ease .3s forwards}
.hero-tagline{font-style:italic;font-size:clamp(.95rem,2vw,1.15rem);color:var(--beige);opacity:0;animation:fadeInUp .8s ease .6s forwards}
.hero-arrow{position:absolute;bottom:2.5rem;z-index:2;color:#fff;opacity:.7;animation:bounce 2s infinite;transition:opacity .3s}
.hero-arrow:hover{opacity:1}
#univers{padding:6rem 1.5rem;background:var(--creme)}
.section-title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);color:var(--brun);text-align:center;margin-bottom:3rem}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:1200px;margin:0 auto}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;border-top:4px solid transparent;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 28px rgba(0,0,0,.12)}
.card--erabliere:hover{border-top-color:var(--dore)}.card--inngeo:hover{border-top-color:var(--bleu)}.card--pepiniere:hover{border-top-color:var(--vert)}
.card-image{height:220px;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.card:hover .card-image img{transform:scale(1.05)}
.card-body{padding:1.75rem;flex:1;display:flex;flex-direction:column}
.card-icon{margin-bottom:.75rem;color:var(--brun)}.card--erabliere .card-icon{color:var(--dore)}.card--inngeo .card-icon{color:var(--bleu)}.card--pepiniere .card-icon{color:var(--vert)}
.card-body h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--brun);margin-bottom:.5rem}
.card-body p{font-size:.95rem;color:#555;flex:1;margin-bottom:1.25rem}
.card-btn{display:inline-block;font-family:var(--font-display);font-size:1.05rem;font-weight:400;letter-spacing:.05em;transition:color .3s}
.card--erabliere .card-btn{color:var(--dore)}.card--inngeo .card-btn{color:var(--bleu)}.card--pepiniere .card-btn{color:var(--vert)}
.card:hover .card-btn{text-decoration:underline}
#histoire{padding:6rem 1.5rem;background:var(--beige)}
.histoire-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.histoire-text .section-title{text-align:left}.histoire-text p{margin-bottom:1.25rem;color:#444}
.histoire-image img{border-radius:12px;width:100%;height:100%;object-fit:cover;max-height:450px}
#footer{background:var(--brun);color:var(--beige);padding:4rem 1.5rem 2rem}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-logo{font-family:var(--font-display);font-size:2rem;letter-spacing:.2em;color:#fff;text-align:center;margin-bottom:2.5rem}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:2.5rem}
.footer-col p{font-size:.9rem;line-height:1.6;margin-bottom:.35rem;color:rgba(243,232,211,.75)}.footer-col a{transition:color .3s}.footer-col a:hover{color:var(--dore)}
.footer-link{display:block;font-family:var(--font-display);font-size:1.2rem;color:#fff;margin-bottom:.75rem}.footer-link:hover{color:var(--dore)}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.15)}
.footer-social{display:inline-block;color:#fff;margin-bottom:.75rem;transition:color .3s}.footer-social:hover{color:var(--dore)}
.footer-bottom p{font-size:.85rem;color:rgba(243,232,211,.6)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:900px){.cards-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.histoire-inner{grid-template-columns:1fr}.histoire-image{order:-1}.histoire-image img{max-height:300px}.footer-columns{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards-grid{grid-template-columns:1fr}.footer-columns{grid-template-columns:1fr;text-align:center}#univers,#histoire{padding:4rem 1.25rem}#footer{padding:3rem 1.25rem 1.5rem}}