<!-- ERMITAGE — Accueil sans header/footer — À COLLER DANS UN BLOC « HTML personnalisé » (PAS « Code ») -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
@font-face{font-family:"Tw Cen MT";src:url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Light.woff2") format("woff2"),url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Tw Cen MT";src:url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Regular.woff2") format("woff2"),url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Regular.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Tw Cen MT";src:url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Bold.woff2") format("woff2"),url("https://ermitage.concilium.click/assets/fonts/TwCenMT-Bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
/* ============================================================= TOKENS */
:root{
--font-display:"Tw Cen MT","Jost","Century Gothic",sans-serif;
--font-body:"Tw Cen MT","Jost","Century Gothic",sans-serif;
--font-script:"Dancing Script","Segoe Script",cursive;
--orange:#C4611A; --orange-600:#A54E10; --orange-300:#E0894A; --orange-100:#F1DFC6;
--vert:#3E5F49; --vert-700:#2E4837; --vert-900:#243829; --vert-300:#8CAE96; --vert-100:#E4EADF;
--creme:#F3ECDD; --creme-warm:#F8F1E2; --ivoire-2:#E4D8BF;
--kraft:#C7B189; --brun:#59452F; --brun-70:#6E573C;
--anthracite:#2A2116; --anthracite-70:#5A4C3A; --blanc:#fff;
--or:#A9853E; --or-clair:#CBA968; --bronze:#7E623A;
--overlay-hero:linear-gradient(180deg,rgba(24,22,14,.18) 0%,rgba(24,22,14,.30) 45%,rgba(24,20,12,.76) 100%);
--overlay-photo:linear-gradient(180deg,rgba(30,24,14,0) 22%,rgba(28,22,12,.82) 100%);
--overlay-vert:linear-gradient(150deg,rgba(46,72,55,.95),rgba(62,95,73,.86));
--r-sm:3px; --r-md:5px; --r-lg:7px; --r-xl:10px; --r-pill:999px;
--sh-sm:0 1px 3px rgba(50,36,18,.10);
--sh-md:0 4px 14px rgba(50,36,18,.12);
--sh-lg:0 10px 30px rgba(50,36,18,.16);
--sh-hover:0 12px 30px rgba(50,36,18,.20);
--line:1px solid var(--ivoire-2);
--maxw:1240px;
}
#erm-home,#erm-home *{box-sizing:border-box;margin:0;padding:0}
#erm-home{scroll-behavior:smooth}
#erm-home{
font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.66;
color:var(--anthracite);background:var(--creme);-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* grain papier / kraft sur toute la page */
#erm-home::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
background-image:url("https://ermitage.concilium.click/assets/brand/noise.svg");background-size:200px;opacity:.055;mix-blend-mode:multiply}
#erm-home img{display:block;max-width:100%}
#erm-home a{color:inherit;text-decoration:none}
#erm-home .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
#erm-home section{position:relative}
/* headings */
#erm-home h1,#erm-home h2,#erm-home h3,#erm-home h4{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.5px}
#erm-home h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1.12}
#erm-home h3{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:400}
#erm-home .kicker{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--bronze);line-height:1;display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
#erm-home .kicker::before{content:"";width:28px;height:2px;background:var(--or);flex:none}
#erm-home .center .kicker,#erm-home .commu .head .kicker{justify-content:center}
/* accent manuscrit, réservé aux moments signatures */
#erm-home .script{font-family:var(--font-script);font-style:normal;color:var(--orange)}
#erm-home .eyebrow{font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:2px;text-transform:uppercase;color:var(--bronze)}
#erm-home .lead{font-size:1.1875rem;color:var(--anthracite-70);max-width:60ch}
#erm-home .center{text-align:center}
#erm-home .center .lead{margin-inline:auto}
#erm-home .sec-pad{padding-block:clamp(64px,10vw,128px)}
/* titres de sections (fond clair) en vert plutôt qu'en noir */
#erm-home #nos-fromages h2,#erm-home .recette h2,#erm-home .actus h2{color:#436A52}
/* gold rule */
#erm-home .rule-or{width:70px;height:2px;border:0;margin:18px auto 0;
background:linear-gradient(90deg,transparent,var(--or) 20%,var(--or-clair) 50%,var(--or) 80%,transparent)}
/* ============================================================= BUTTONS */
#erm-home .btn{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;
padding:15px 28px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:10px;
border:1.5px solid transparent;transition:transform .18s ease,background .2s,color .2s,border-color .2s}
#erm-home .btn svg{width:15px;height:15px;transition:transform .2s}
#erm-home .btn:hover svg{transform:translateX(4px)}
#erm-home .btn--primary{color:#fff;background:var(--orange);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
#erm-home .btn--primary:hover{background:var(--orange-600);transform:translateY(-1px)}
#erm-home .btn--secondary{background:transparent;color:var(--brun);border-color:var(--brun);border-width:1.5px}
#erm-home .btn--secondary:hover{background:var(--brun);color:var(--creme-warm)}
#erm-home .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
#erm-home .btn--ghost:hover{background:#fff;color:var(--anthracite)}
/* lien-flèche : signature éditoriale de la marque */
#erm-home .link-arrow{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:9px}
#erm-home .link-arrow svg{width:16px;height:16px;transition:transform .22s ease}
#erm-home .link-arrow:hover svg{transform:translateX(6px)}
/* ============================================================= HEADER */
#erm-home .header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s ease,box-shadow .35s ease,height .35s ease;height:88px}
#erm-home .header::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent);pointer-events:none;transition:opacity .35s}
#erm-home .header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
#erm-home .logo{height:54px;transition:height .35s}
#erm-home .logo img{height:100%;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));transition:filter .35s}
#erm-home .header.scrolled .logo{height:44px}
#erm-home .header.scrolled .logo img{filter:none}
#erm-home .nav{display:flex;gap:34px}
#erm-home .nav a{color:#fff;position:relative;padding:6px 0;display:flex;flex-direction:column;line-height:1;transition:color .3s}
#erm-home .nav a .sur{font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;opacity:.85}
#erm-home .nav a .accent{font-family:var(--font-script);font-size:1.35rem;margin-top:1px}
#erm-home .nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1)}
#erm-home .nav a:hover::after{transform:scaleX(1)}
#erm-home .header.scrolled .nav a .accent{color:var(--orange)}
#erm-home .actions{display:flex;align-items:center;gap:18px}
#erm-home .icon-btn{width:24px;height:24px;color:#fff;position:relative;cursor:pointer;transition:color .3s,transform .2s;background:none;border:0}
#erm-home .icon-btn:hover{transform:translateY(-2px)}
#erm-home .icon-btn svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7}
#erm-home .cart-count{position:absolute;top:-7px;right:-8px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px;min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
#erm-home .lang{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:400;font-size:.9rem;color:#fff;border-left:1px solid rgba(255,255,255,.35);padding-left:18px}
#erm-home .lang a{opacity:.6;transition:opacity .25s}
#erm-home .lang a.on,#erm-home .lang a:hover{opacity:1;color:var(--or-clair)}
#erm-home .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
#erm-home .burger span{width:26px;height:2px;background:#fff;transition:.3s}
/* scrolled state */
#erm-home .header.scrolled{height:70px;background:rgba(247,244,240,.92);backdrop-filter:blur(12px);box-shadow:var(--sh-sm)}
#erm-home .header.scrolled::before{opacity:0}
#erm-home .header.scrolled .logo img{filter:none}
#erm-home .header.scrolled .nav a{color:var(--anthracite)}
#erm-home .header.scrolled .icon-btn{color:var(--vert)}
#erm-home .header.scrolled .burger span{background:var(--anthracite)}
#erm-home .header.scrolled .lang{color:var(--anthracite);border-color:rgba(0,0,0,.15)}
#erm-home .header.scrolled .lang a.on{color:var(--orange)}
/* ============================================================= HERO */
#erm-home .hero{height:100svh;min-height:640px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
#erm-home .hero__media{position:absolute;inset:0;z-index:0;background:var(--vert-900)}
#erm-home .hero__media img,#erm-home .hero__media video{width:100%;height:100%;object-fit:cover}
#erm-home .hero__media img{animation:kenburns 22s ease-in-out infinite alternate;will-change:transform}
#erm-home .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
/* vidéo Vimeo en fond du hero, recadrée pour couvrir tout l'écran */
#erm-home .hero__embed{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
#erm-home .hero__embed iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;transform:translate(-50%,-50%);border:0}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
#erm-home .hero__overlay{position:absolute;inset:0;z-index:1;background:var(--overlay-hero)}
#erm-home .hero__inner{position:relative;z-index:2;padding-bottom:13vh;max-width:820px}
#erm-home .hero .kicker{color:var(--or-clair)}
#erm-home .hero h1{color:#fff;font-size:clamp(2.75rem,6vw,5.2rem);font-weight:400;letter-spacing:-1px;margin:.2rem 0 1.2rem;text-shadow:0 2px 30px rgba(0,0,0,.25)}
#erm-home .hero h1 b{font-weight:700}
#erm-home .hero h1 em{font-family:var(--font-script);font-style:normal;color:var(--or-clair);font-size:1.12em;display:inline-block}
#erm-home .hero p{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:54ch;margin-bottom:2rem}
#erm-home .hero__cta{display:flex;gap:16px;flex-wrap:wrap}
#erm-home .scroll-ind{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;opacity:.85}
#erm-home .scroll-ind .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.7);border-radius:14px;position:relative}
#erm-home .scroll-ind .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;background:#fff;border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
/* reveal */
#erm-home.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
#erm-home.js [data-reveal].in{opacity:1;transform:none}
#erm-home [data-delay="1"]{transition-delay:.12s}#erm-home [data-delay="2"]{transition-delay:.24s}
#erm-home [data-delay="3"]{transition-delay:.36s}#erm-home [data-delay="4"]{transition-delay:.48s}
/* ============================================================= RIBBON */
#erm-home .ribbon{background:var(--orange);color:#fff;padding:12px 0;overflow:hidden;border-block:2px solid var(--or)}
#erm-home .ribbon .track{display:flex;gap:0;width:max-content;animation:marquee 95s linear infinite;align-items:center}
#erm-home .ribbon:hover .track{animation-play-state:paused}
#erm-home .ribbon .item{display:inline-flex;align-items:center;gap:12px;padding:0 20px;font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap}
#erm-home .ribbon .item img{height:15px;width:auto;border-radius:2px}
#erm-home .ribbon .sep{display:inline-flex;align-items:center;color:var(--or-clair);font-size:.7rem;opacity:.85}
/* ============================================================= STATS */
#erm-home .stats{background:var(--vert);background-image:var(--overlay-vert);color:#fff;position:relative;overflow:hidden;border-bottom:2px solid var(--or)}
#erm-home .stats::after{content:"";position:absolute;inset:0;background-image:url("https://ermitage.concilium.click/assets/brand/noise.svg");opacity:.05;mix-blend-mode:overlay;pointer-events:none}
#erm-home .stats .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-block:72px}
#erm-home .stat{padding:6px 16px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
#erm-home .stat+.stat::before{content:"";position:absolute;left:0;top:8px;height:64px;width:1px;background:rgba(201,162,75,.35)}
#erm-home .stat .num{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1;letter-spacing:-.5px;color:#fff;white-space:nowrap;display:inline-flex;align-items:baseline;justify-content:center;gap:.1em;height:1em}
#erm-home .stat .num .u{color:var(--or-clair);font-size:.44em;font-weight:700;letter-spacing:.5px}
#erm-home .stat .lbl{margin-top:16px;font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--vert-100);min-height:2.4em;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}
/* ============================================================= NOS FROMAGES */
#erm-home .sec-head{max-width:720px;margin:0 0 clamp(36px,5vw,56px)}
#erm-home .sec-head.center{max-width:640px;margin-inline:auto}
#erm-home .head-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,56px)}
#erm-home .head-flex .sec-head{margin:0}
#erm-home .cheeses{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:640px}
#erm-home .ccard{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid rgba(40,28,12,.10);display:flex;align-items:flex-end;transition:transform .3s ease,box-shadow .3s;min-height:300px}
#erm-home .ccard--feature{grid-row:1/3}
#erm-home .ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
#erm-home .ccard__img{position:absolute;inset:0;z-index:0;overflow:hidden}
#erm-home .ccard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
#erm-home .ccard:hover .ccard__img img{transform:scale(1.05)}
#erm-home .ccard::after{content:"";position:absolute;inset:0;z-index:1;background:var(--overlay-photo)}
#erm-home .ccard__body{position:relative;z-index:2;padding:26px;color:#fff;width:100%}
#erm-home .ccard__body h3{color:#fff;margin-bottom:6px}
#erm-home .ccard--feature .ccard__body h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
#erm-home .ccard__body p{font-size:.95rem;color:rgba(255,255,255,.86);margin-bottom:14px;max-width:34ch}
#erm-home .ccard:not(.ccard--feature) .ccard__body p{display:none}
#erm-home .ccard .badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
#erm-home .badge{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-sm);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.45);color:#fff}
#erm-home .ccard .link-arrow{color:#fff}
#erm-home .ccard .link-arrow svg{color:var(--or-clair)}
/* ============================================================= MEDAILLES (FOND BLANC) */
#erm-home .medals{background:#ffffff;border-top:1px solid var(--ivoire-2);border-bottom:1px solid var(--ivoire-2);padding-block:56px;overflow:hidden}
#erm-home .medals .head{text-align:center;margin-bottom:34px}
#erm-home .marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#erm-home .track{display:flex;gap:30px;width:max-content;animation:marquee 38s linear infinite}
#erm-home .marquee:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#erm-home .medal{display:flex;align-items:center;gap:15px;background:#ffffff;border:1px solid var(--ivoire-2);border-radius:var(--r-md);padding:11px 24px 11px 11px;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s;white-space:nowrap}
#erm-home .medal:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
#erm-home .medal .logo{width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid var(--ivoire-2);display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:inset 0 1px 3px rgba(40,28,12,.08)}
#erm-home .medal .logo img{width:84%;height:84%;object-fit:contain}
#erm-home .medal .txt b{font-family:var(--font-display);font-weight:700;display:block;font-size:1.12rem;color:var(--anthracite);line-height:1.2}
#erm-home .medal .txt span{font-size:.95rem;color:var(--anthracite-70);line-height:1.3}
/* ============================================================= HISTOIRE (HAUTEUR & TEXTE RÉDUITS) */
#erm-home .histoire{color:#fff;overflow:hidden;isolation:isolate;height:420px;max-height:420px;min-height:380px;display:flex;align-items:center}
#erm-home .h2-oneline{white-space:nowrap;font-size:clamp(1.4rem,4.6vw,2.9rem)}
#erm-home .histoire__bg{position:absolute;inset:0;z-index:-2}
#erm-home .histoire__bg img{width:100%;height:100%;object-fit:cover;object-position:center 95%;}
#erm-home .histoire::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(36,56,41,.45) 0%,rgba(46,72,55,.22) 46%,rgba(46,72,55,.02) 100%)}
#erm-home .histoire .wrap{padding-block:16px;width:100%}
#erm-home .histoire .year-wm{position:absolute;right:2%;top:5%;font-family:var(--font-display);font-weight:700;font-size:clamp(7rem,16vw,14rem);color:rgba(255,255,255,.06);line-height:1;z-index:-1;pointer-events:none}
#erm-home .histoire__inner{max-width:520px;position:relative}
#erm-home .histoire .kicker{color:var(--or-clair);margin-bottom:8px}
#erm-home .histoire h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);margin:.2rem 0 .6rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}
#erm-home .histoire p{color:rgba(255,255,255,.95);font-size:.98rem;line-height:1.45;margin-bottom:.6rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#erm-home .histoire .sign{font-family:var(--font-script);font-size:1.5rem;color:#fff;margin:.3rem 0 1rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
#erm-home .histoire .btn{padding:10px 20px;font-size:.75rem}
/* ============================================================= RECETTE */
#erm-home .recette .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
#erm-home .recette__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;clip-path:inset(0 0 0 0)}
#erm-home .recette__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
#erm-home .recette__media:hover img{transform:scale(1.05)}
#erm-home .recette__stamp{position:absolute;top:20px;left:-8px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;padding:9px 18px;border-radius:2px;box-shadow:var(--sh-sm);z-index:2;transform:rotate(-2.5deg)}
#erm-home .recette h2{margin:.3rem 0 1rem}
#erm-home .recette .meta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 22px}
#erm-home .pill{display:inline-flex;align-items:center;gap:8px;background:var(--vert-100);color:var(--vert-700);font-size:.85rem;font-weight:400;padding:8px 16px;border-radius:var(--r-pill)}
#erm-home .pill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
#erm-home .recette p{margin-bottom:24px}
/* ============================================================= ACTUALITES */
#erm-home .actus{background:var(--creme-warm)}
#erm-home .actus .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
#erm-home .actus .head-row .lead{margin:0}
#erm-home .news{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#erm-home .acard{background:var(--blanc);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid rgba(40,28,12,.12);transition:transform .3s ease,box-shadow .3s;display:flex;flex-direction:column}
#erm-home .acard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
#erm-home .acard__media{aspect-ratio:16/10;overflow:hidden}
#erm-home .acard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
#erm-home .acard:hover .acard__media img{transform:scale(1.06)}
#erm-home .acard__body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
#erm-home .acard .tag{font-size:.78rem;letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--orange);margin-bottom:10px}
#erm-home .acard .tag time{color:var(--anthracite-70);font-weight:400;text-transform:none;letter-spacing:0}
#erm-home .acard h3{font-size:1.28rem;margin-bottom:16px;line-height:1.25}
#erm-home .acard .link-arrow{margin-top:auto}
/* ============================================================= COMMUNAUTE */
#erm-home .commu{overflow:hidden;background:var(--creme-warm)}
#erm-home .commu .head{text-align:center;margin-bottom:22px}
#erm-home .commu .head h2 .hash{color:var(--orange)}
/* barre identité Instagram */
#erm-home .ig-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:40px;flex-wrap:wrap}
#erm-home .ig-bar .ig-logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;
background:radial-gradient(circle at 30% 107%,#FEDA75,#FA7E1E 25%,#D62976 52%,#962FBF 74%,#4F5BD5);box-shadow:var(--sh-sm)}
#erm-home .ig-bar .ig-logo svg{width:27px;height:27px}
#erm-home .ig-bar .who{text-align:left;line-height:1.25}
#erm-home .ig-bar .who b{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--anthracite);display:block}
#erm-home .ig-bar .who span{font-size:.9rem;color:var(--anthracite-70)}
#erm-home .ig-bar .btn{margin-left:8px;padding:12px 24px;gap:8px}
#erm-home .ig-bar .btn svg{width:16px;height:16px}
#erm-home .wall a .ig-corner{position:absolute;top:9px;right:9px;z-index:3;color:#fff;opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));pointer-events:none}
#erm-home .wall a .ig-corner svg{width:19px;height:19px}
#erm-home .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:60px}
#erm-home .wall a{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm);border:1px solid rgba(40,28,12,.12)}
#erm-home .wall img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
#erm-home .wall a::after{content:"";position:absolute;inset:0;background:var(--overlay-vert);opacity:0;transition:opacity .3s;display:grid}
#erm-home .wall a .ig{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s;color:#fff}
#erm-home .wall a .ig svg{width:30px;height:30px}
#erm-home .wall a:hover img{transform:scale(1.08)}
#erm-home .wall a:hover::after{opacity:.85}
#erm-home .wall a:hover .ig{opacity:1;transform:scale(1)}
#erm-home .news-block{background:var(--vert);background-image:var(--overlay-vert);border-radius:var(--r-xl);padding:clamp(36px,6vw,64px);color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
#erm-home .news-block::after{content:"";position:absolute;inset:0;background-image:url("https://ermitage.concilium.click/assets/brand/noise.svg");opacity:.05;mix-blend-mode:overlay;pointer-events:none}
#erm-home .news-block h3{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:10px}
#erm-home .news-block p{color:rgba(255,255,255,.85);max-width:42ch}
#erm-home .socials{display:flex;gap:14px;margin-top:20px}
#erm-home .socials a{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-sm);transition:transform .25s,filter .25s,box-shadow .25s}
#erm-home .socials a.ig{background:radial-gradient(circle at 30% 107%,#FEDA75,#FA7E1E 25%,#D62976 52%,#962FBF 74%,#4F5BD5)}
#erm-home .socials a.fb{background:#1877F2}
#erm-home .socials a.li{background:#0A66C2}
#erm-home .socials a:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:var(--sh-md)}
#erm-home .socials a svg{width:21px;height:21px}
#erm-home .nl-form{position:relative;z-index:1}
#erm-home .nl-form .field-row{display:flex;background:#fff;border-radius:var(--r-sm);padding:6px;box-shadow:var(--sh-sm);border:1px solid rgba(40,28,12,.12)}
#erm-home .nl-form input{flex:1;border:0;outline:none;background:none;padding:12px 22px;font-family:var(--font-body);font-size:1rem;color:var(--anthracite);min-width:0}
#erm-home .nl-form .btn{white-space:nowrap}
#erm-home .nl-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.82);line-height:1.45;cursor:pointer}
#erm-home .nl-consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--orange);border-radius:3px}
#erm-home .nl-consent a{text-decoration:underline}
#erm-home .nl-msg{margin-top:12px;font-size:.9rem;font-weight:700;color:var(--or-clair);min-height:1.2em}
/* ============================================================= FOOTER */
#erm-home .footer{background:var(--vert-900);color:var(--creme);padding-top:clamp(64px,8vw,96px);position:relative;border-top:3px solid var(--or)}
#erm-home .footer::before{content:"";position:absolute;inset:0;background-image:url("https://ermitage.concilium.click/assets/brand/noise.svg");background-size:200px;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
#erm-home .footer .wrap{position:relative}
#erm-home .footer__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:52px}
#erm-home .footer__brand .flogo{height:52px;margin-bottom:22px}
#erm-home .footer__brand .flogo img{height:100%;filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}
#erm-home .footer__brand p{color:rgba(247,244,240,.7);font-size:.95rem;max-width:34ch}
/* ICONES SOCIALES FOOTER : FOND VERT, CONTOUR BLANC, SYMBOLE DESSINÉ EN BLANC */
#erm-home .f-socials{display:flex;gap:12px;margin-top:20px}
#erm-home .f-socials a{
width:42px;height:42px;
border-radius:50%;
background:var(--vert-900);
border:1.5px solid #ffffff;
color:#ffffff;
display:grid;
place-items:center;
box-shadow:var(--sh-sm);
transition:transform .2s, background-color .2s, border-color .2s;
}
#erm-home .f-socials a:hover{
transform:translateY(-3px);
background-color:var(--vert-700);
}
#erm-home .f-socials a svg{width:20px;height:20px}
#erm-home .footer h4{font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--or-clair);margin-bottom:18px}
#erm-home .footer ul{list-style:none}
#erm-home .footer ul li{margin-bottom:11px}
#erm-home .footer ul a{color:rgba(247,244,240,.78);font-size:.98rem;transition:color .25s,padding .25s}
#erm-home .footer ul a:hover{color:var(--orange);padding-left:4px}
#erm-home .footer .hi{display:inline-flex;align-items:center;gap:7px}
#erm-home .footer .hi svg{width:15px;height:15px;color:var(--or-clair)}
#erm-home .footer__bar{border-top:1px solid rgba(201,162,75,.25);padding-block:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
#erm-home .footer__bar .legal{display:flex;gap:22px;flex-wrap:wrap;font-size:.85rem;color:rgba(247,244,240,.6)}
#erm-home .footer__bar .legal a:hover{color:var(--orange)}
#erm-home .footer__bar .cr{font-size:.82rem;color:rgba(247,244,240,.5)}
/* ============================================================= RESPONSIVE */
/* ===================================================== MENU MOBILE */
#erm-home .mobile-nav{position:fixed;inset:0;z-index:90;background:var(--creme);transform:translateX(100%);
transition:transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none;visibility:hidden;
display:flex;flex-direction:column;justify-content:center;gap:26px;padding:110px 34px 48px;overflow-y:auto}
#erm-home .mobile-nav::after{content:"";position:absolute;inset:0;background-image:url("https://ermitage.concilium.click/assets/brand/noise.svg");background-size:200px;opacity:.05;mix-blend-mode:multiply;pointer-events:none}
#erm-home body.menu-open .mobile-nav{transform:none;pointer-events:auto;visibility:visible}
#erm-home .mobile-nav nav{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
#erm-home .mobile-nav nav a{display:flex;flex-direction:column;line-height:1;text-align:left}
#erm-home .mobile-nav .sur{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--bronze)}
#erm-home .mobile-nav .accent{font-family:var(--font-script);font-size:2.1rem;color:var(--orange);margin-top:2px}
#erm-home .mobile-nav .m-lang{display:flex;gap:18px;position:relative;z-index:1;margin-top:8px;border-top:1px solid var(--ivoire-2);padding-top:24px}
#erm-home .mobile-nav .m-lang a{font-family:var(--font-display);font-weight:700;letter-spacing:1px;color:var(--anthracite-70)}
#erm-home .mobile-nav .m-lang a.on{color:var(--orange)}
#erm-home body.menu-open{overflow:hidden}
#erm-home body.menu-open .header{background:rgba(247,244,240,.97);backdrop-filter:blur(12px);box-shadow:var(--sh-sm)}
#erm-home body.menu-open .header::before{opacity:0}
#erm-home body.menu-open .logo img{filter:none}
#erm-home body.menu-open .icon-btn{color:var(--vert)}
#erm-home body.menu-open .burger span{background:var(--anthracite)}
#erm-home body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#erm-home body.menu-open .burger span:nth-child(2){opacity:0}
#erm-home body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ===================================================== RESPONSIVE */
@media(max-width:1080px){
#erm-home .footer__top{grid-template-columns:1fr 1fr 1fr}
#erm-home .footer__brand{grid-column:1/-1}
}
@media(max-width:900px){
#erm-home .nav,#erm-home .lang{display:none}
#erm-home .burger{display:flex}
#erm-home .news{grid-template-columns:1fr 1fr}
#erm-home .cheeses{grid-template-columns:1fr 1fr;grid-template-rows:auto;min-height:0}
#erm-home .ccard--feature{grid-row:auto;grid-column:1/-1;min-height:360px}
#erm-home .ccard:not(.ccard--feature) .ccard__body p{display:block}
#erm-home .stats .grid{grid-template-columns:repeat(3,1fr);gap:40px 0;padding-block:56px}
#erm-home .stat:nth-child(4)::before,#erm-home .stat:nth-child(1)::before{display:none}
#erm-home .recette .wrap{grid-template-columns:1fr}
#erm-home .news-block{grid-template-columns:1fr}
#erm-home .wall{grid-template-columns:repeat(2,1fr)}
#erm-home .actus .head-row{flex-wrap:wrap}
}
@media(max-width:640px){
#erm-home{font-size:16px}
#erm-home .sec-pad{padding-block:clamp(52px,12vw,80px)}
#erm-home .header,#erm-home .header.scrolled{height:66px}
#erm-home .logo{height:42px}#erm-home .header.scrolled .logo{height:38px}
#erm-home .actions{gap:15px}
#erm-home .cheeses,#erm-home .news{grid-template-columns:1fr}
#erm-home .ccard--feature{grid-column:1/-1;min-height:320px}
#erm-home .stats .grid{grid-template-columns:1fr 1fr;gap:32px 0}
#erm-home .stat::before{display:none!important}
#erm-home .stat .num{font-size:1.85rem}
#erm-home .wall{grid-template-columns:repeat(2,1fr)}
#erm-home .actus .head-row{flex-direction:column;align-items:flex-start;gap:8px}
#erm-home .footer__top{grid-template-columns:1fr 1fr;gap:32px}
#erm-home .footer__bar{flex-direction:column;align-items:flex-start}
#erm-home .hero__cta{width:100%}
#erm-home .hero__cta .btn{flex:1 1 auto;justify-content:center}
/* newsletter : champ + bouton empilés */
#erm-home .nl-form .field-row{flex-direction:column;background:transparent;border:0;box-shadow:none;padding:0;gap:10px}
#erm-home .nl-form input{width:100%;background:#fff;border:1px solid rgba(40,28,12,.14);border-radius:var(--r-sm);padding:14px 18px}
#erm-home .nl-form .btn{width:100%;justify-content:center}
#erm-home .ig-bar{gap:12px}
#erm-home .ig-bar .btn{margin-left:0}
/* histoire : resserrer pour tenir dans la hauteur */
#erm-home .histoire{min-height:0;height:auto;padding-block:36px}
#erm-home .histoire h2{font-size:clamp(1.5rem,6vw,1.8rem);margin-bottom:.5rem}
#erm-home .histoire p{font-size:.9rem;margin-bottom:.5rem}
#erm-home .histoire .sign{font-size:1.3rem;margin:.3rem 0 .8rem}
#erm-home .histoire .year-wm{font-size:clamp(6rem,28vw,10rem)}
}
@media(max-width:400px){
#erm-home .stats .grid{grid-template-columns:1fr}
#erm-home .stat{padding-block:4px}
#erm-home .wall{grid-template-columns:repeat(2,1fr)}
#erm-home .footer__top{grid-template-columns:1fr}
#erm-home .medal .txt b{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
#erm-home,#erm-home *{animation:none!important;transition-duration:.01ms!important}
#erm-home .hero__media img{animation:none}
#erm-home.js [data-reveal]{opacity:1;transform:none}
}
/* =============================================================
PAGES INTÉRIEURES (coopérative, gamme, recettes, qualité, rejoindre)
============================================================= */
/* --- header actif --- */
#erm-home .nav a.is-active .accent{color:var(--orange)}
#erm-home .nav a.is-active .sur{color:var(--orange-600)}
/* --- Hero de page (compact, image de fond) --- */
#erm-home .phero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--vert-900)}
#erm-home .phero__bg{position:absolute;inset:0;z-index:0}
#erm-home .phero__bg img{width:100%;height:100%;object-fit:cover}
#erm-home .phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,22,14,.30) 0%,rgba(24,22,14,.42) 45%,rgba(24,20,12,.82) 100%)}
#erm-home .phero__inner{position:relative;z-index:2;padding-block:clamp(90px,14vh,150px) clamp(40px,7vh,70px);max-width:820px}
#erm-home .phero .kicker{color:var(--or-clair)}
#erm-home .phero h1{color:#fff;font-size:clamp(2.3rem,5vw,4rem);font-weight:400;letter-spacing:-1px;margin:.2rem 0 1rem;text-shadow:0 2px 30px rgba(0,0,0,.25)}
#erm-home .phero h1 em{font-family:var(--font-script);font-style:normal;color:var(--or-clair);font-size:1.1em}
#erm-home .phero p{color:rgba(255,255,255,.92);font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:60ch}
/* --- Fil d'ariane --- */
#erm-home .crumb{position:relative;z-index:2;display:flex;gap:8px;align-items:center;font-size:.82rem;letter-spacing:.5px;color:rgba(255,255,255,.8);margin-bottom:18px}
#erm-home .crumb a{color:rgba(255,255,255,.8);transition:color .2s}
#erm-home .crumb a:hover{color:#fff}
#erm-home .crumb span{opacity:.6}
/* --- Bloc texte intro --- */
#erm-home .lead{font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.5;color:var(--brun);font-weight:300;max-width:60ch}
#erm-home .prose p{margin-bottom:1.1rem;max-width:68ch}
#erm-home .prose p:last-child{margin-bottom:0}
/* --- Deux colonnes texte + image --- */
#erm-home .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
#erm-home .split.rev .split__media{order:-1}
#erm-home .split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3}
#erm-home .split__media img{width:100%;height:100%;object-fit:cover}
/* --- Cartes de sous-navigation --- */
#erm-home .subnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
#erm-home .snav-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;min-height:230px;box-shadow:var(--sh-md);transition:transform .35s,box-shadow .35s}
#erm-home .snav-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
#erm-home .snav-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
#erm-home .snav-card:hover img{transform:scale(1.06)}
#erm-home .snav-card::after{content:"";position:absolute;inset:0;background:var(--overlay-photo)}
#erm-home .snav-card__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:20px 22px;color:#fff}
#erm-home .snav-card__body h3{color:#fff;margin-bottom:4px}
#erm-home .snav-card__body span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--or-clair);font-weight:500}
#erm-home .snav-card__body span svg{width:16px;height:16px}
/* --- Frise chronologique --- */
#erm-home .timeline{position:relative;margin-top:10px;padding-left:0}
#erm-home .timeline::before{content:"";position:absolute;left:calc(90px + 11px);top:6px;bottom:6px;width:2px;background:var(--ivoire-2)}
#erm-home .tl-item{position:relative;display:grid;grid-template-columns:90px 40px 1fr;gap:0;padding-block:16px;align-items:start}
#erm-home .tl-year{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--orange);line-height:1;padding-top:2px}
#erm-home .tl-dot{position:relative;display:flex;justify-content:center}
#erm-home .tl-dot::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--orange);border:3px solid var(--creme);box-shadow:0 0 0 1px var(--orange-300);margin-top:3px}
#erm-home .tl-body h3{font-size:1.12rem;font-weight:600;margin-bottom:3px;color:var(--anthracite)}
#erm-home .tl-body p{color:var(--anthracite-70);font-size:.98rem;max-width:56ch}
/* --- Étapes de process (savoir-faire) --- */
#erm-home .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;counter-reset:step}
#erm-home .step{position:relative;background:var(--blanc);border:var(--line);border-radius:var(--r-lg);padding:26px 24px 24px;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s}
#erm-home .step:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
#erm-home .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;background:var(--orange);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;box-shadow:var(--sh-sm)}
#erm-home .step h3{font-size:1.14rem;font-weight:600;margin-bottom:8px}
#erm-home .step p{color:var(--anthracite-70);font-size:.97rem}
/* --- Cartes valeurs --- */
#erm-home .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
#erm-home .value{background:var(--blanc);border:var(--line);border-top:3px solid var(--orange);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s}
#erm-home .value:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
#erm-home .value .vicon{width:48px;height:48px;border-radius:50%;background:var(--vert-100);display:grid;place-items:center;margin-bottom:16px;color:var(--vert-700)}
#erm-home .value .vicon svg{width:24px;height:24px}
#erm-home .value h3{font-size:1.22rem;font-weight:600;margin-bottom:9px;color:var(--vert-700)}
#erm-home .value p{color:var(--anthracite-70);font-size:.98rem}
/* --- Bandeau CTA --- */
#erm-home .cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--overlay-vert),var(--vert);color:#fff;padding:clamp(40px,6vw,64px);text-align:center;box-shadow:var(--sh-lg)}
#erm-home .cta-band h2{color:#fff;margin-bottom:14px}
#erm-home .cta-band p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 26px}
#erm-home .cta-band .btn--primary{background:var(--blanc);color:var(--vert-700)}
#erm-home .cta-band .btn--primary:hover{background:var(--creme)}
#erm-home .cta-band .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
#erm-home .cta-band .btn--ghost:hover{background:rgba(255,255,255,.12)}
/* --- utilitaires pages --- */
#erm-home .bg-creme{background:var(--creme-warm)}
#erm-home .sec-tight{padding-block:clamp(44px,6vw,72px)}
#erm-home .mb-head{margin-bottom:34px}
@media(max-width:820px){
#erm-home .split{grid-template-columns:1fr}
#erm-home .split.rev .split__media{order:0}
#erm-home .timeline::before{left:11px}
#erm-home .tl-item{grid-template-columns:24px 1fr;gap:12px}
#erm-home .tl-year{grid-column:2;grid-row:1;padding-top:0;margin-bottom:2px}
#erm-home .tl-dot{grid-column:1;grid-row:1}
#erm-home .tl-body{grid-column:2}
}
/* =============================================================
GAMME FROMAGES — cartes produits (fond clair)
============================================================= */
#erm-home .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
#erm-home .prod{position:relative;background:var(--blanc);border:var(--line);border-left:3px solid var(--kraft);border-radius:var(--r-lg);padding:22px 22px 20px;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;gap:9px}
#erm-home .prod:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-left-color:var(--orange)}
#erm-home .prod h3{font-size:1.16rem;font-weight:600;color:var(--anthracite);line-height:1.2}
#erm-home .prod p{color:var(--anthracite-70);font-size:.94rem;margin:0}
#erm-home .prod__tags{display:flex;flex-wrap:wrap;gap:6px}
#erm-home .tagq{font-family:var(--font-display);font-weight:700;font-size:.64rem;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);line-height:1}
#erm-home .tagq--aop{background:#F1E4CE;color:var(--bronze);border:1px solid var(--kraft)}
#erm-home .tagq--lr{background:#F6DED8;color:#B0361F;border:1px solid #E4B4A8}
#erm-home .tagq--igp{background:var(--vert-100);color:var(--vert-700);border:1px solid var(--vert-300)}
#erm-home .tagq--veg{background:var(--vert-100);color:var(--vert-700);border:1px solid var(--vert-300)}
#erm-home .prod__veg{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--vert-700);margin-top:auto;padding-top:4px}
#erm-home .prod__veg svg{width:15px;height:15px}
#erm-home{position:relative;z-index:0;overflow:hidden}#erm-home::before{position:absolute}
</style>
<div id="erm-home">
<section class="hero">
<div class="hero__media">
<div class="hero__embed">
<iframe src="https://player.vimeo.com/video/731295464?h=baa52a3b66&background=1&autoplay=1&loop=1&muted=1&badge=0&autopause=0&player_id=0&app_id=58479"
allow="autoplay; fullscreen; picture-in-picture" title="Ermitage"></iframe>
</div>
</div>
<div class="hero__overlay"></div>
<div class="wrap hero__inner">
<span class="kicker" data-reveal>Coopérative fromagère · Depuis 1931</span>
<h1 data-reveal data-delay="1">Prenez l'air,<br>prenez <em>l'Ermitage</em></h1>
<p data-reveal data-delay="2">À l'Ermitage, c'est la nature qui dicte sa loi. Chaque jour, les Hommes de la Coopérative ont à cœur de produire un lait qui apporte une vraie personnalité à nos fromages.</p>
<div class="hero__cta" data-reveal data-delay="3">
<a href="#nos-fromages" class="btn btn--primary">Découvrez nos fromages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a href="#histoire" class="btn btn--ghost">Notre histoire</a>
</div>
</div>
</section>
<!-- ================= RUBAN LAIT FRANÇAIS ================= -->
<div class="ribbon" aria-label="Lait 100% français">
<div class="track" id="ribbonTrack"><span class="item">Lait 100 % français <img src="https://ermitage.concilium.click/assets/brand/flag-fr.svg" alt=""></span><span class="sep">✦</span><span class="item">Coopérative indépendante depuis 1931</span><span class="sep">✦</span><span class="item">Fromages de nos terroirs</span><span class="sep">✦</span><span class="item">Label Rouge · AOP · IGP</span><span class="sep">✦</span><span class="item">+ de 1 200 producteurs partenaires</span><span class="sep">✦</span><span class="item">Un savoir-faire depuis 95 ans</span><span class="sep">✦</span><span class="item">Lait sans OGM</span><span class="sep">✦</span><span class="item">Fièrement ancré dans le Grand-Est</span><span class="sep">✦</span><span class="item">Lait 100 % français <img src="https://ermitage.concilium.click/assets/brand/flag-fr.svg" alt=""></span><span class="sep">✦</span><span class="item">Coopérative indépendante depuis 1931</span><span class="sep">✦</span><span class="item">Fromages de nos terroirs</span><span class="sep">✦</span><span class="item">Label Rouge · AOP · IGP</span><span class="sep">✦</span><span class="item">+ de 1 200 producteurs partenaires</span><span class="sep">✦</span><span class="item">Un savoir-faire depuis 95 ans</span><span class="sep">✦</span><span class="item">Lait sans OGM</span><span class="sep">✦</span><span class="item">Fièrement ancré dans le Grand-Est</span><span class="sep">✦</span><span class="item">Lait 100 % français <img src="https://ermitage.concilium.click/assets/brand/flag-fr.svg" alt=""></span><span class="sep">✦</span><span class="item">Coopérative indépendante depuis 1931</span><span class="sep">✦</span><span class="item">Fromages de nos terroirs</span><span class="sep">✦</span><span class="item">Label Rouge · AOP · IGP</span><span class="sep">✦</span><span class="item">+ de 1 200 producteurs partenaires</span><span class="sep">✦</span><span class="item">Un savoir-faire depuis 95 ans</span><span class="sep">✦</span><span class="item">Lait sans OGM</span><span class="sep">✦</span><span class="item">Fièrement ancré dans le Grand-Est</span><span class="sep">✦</span><span class="item">Lait 100 % français <img src="https://ermitage.concilium.click/assets/brand/flag-fr.svg" alt=""></span><span class="sep">✦</span><span class="item">Coopérative indépendante depuis 1931</span><span class="sep">✦</span><span class="item">Fromages de nos terroirs</span><span class="sep">✦</span><span class="item">Label Rouge · AOP · IGP</span><span class="sep">✦</span><span class="item">+ de 1 200 producteurs partenaires</span><span class="sep">✦</span><span class="item">Un savoir-faire depuis 95 ans</span><span class="sep">✦</span><span class="item">Lait sans OGM</span><span class="sep">✦</span><span class="item">Fièrement ancré dans le Grand-Est</span><span class="sep">✦</span></div>
</div>
<!-- ================= CHIFFRES CLÉS ================= -->
<section class="stats" aria-label="Ermitage en chiffres">
<div class="wrap">
<div class="grid">
<div class="stat" data-reveal><div class="num"><span class="u">+</span><span data-count="1000">1 000</span></div><div class="lbl">Producteurs</div></div>
<div class="stat" data-reveal data-delay="1"><div class="num"><span data-count="9">9</span></div><div class="lbl">Sites de fabrication</div></div>
<div class="stat" data-reveal data-delay="2"><div class="num"><span class="u">+</span><span data-count="1200">1 200</span></div><div class="lbl">Salariés</div></div>
<div class="stat" data-reveal data-delay="3"><div class="num"><span data-count="58900">58 900</span></div><div class="lbl">Tonnes de fromages</div></div>
<div class="stat" data-reveal data-delay="4"><div class="num"><span data-count="95">95</span></div><div class="lbl">ans d'histoire</div></div>
</div>
</div>
</section>
<!-- ================= NOS FROMAGES ================= -->
<section class="sec-pad" id="nos-fromages">
<div class="wrap">
<div class="head-flex">
<div class="sec-head" data-reveal>
<span class="kicker">Nos fromages</span>
<h2 class="h2-oneline">Une gamme née de nos terroirs</h2>
</div>
<a href="#" class="link-arrow" data-reveal data-delay="1">Voir toute la gamme <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
<div class="cheeses">
<a href="#" class="ccard ccard--feature" data-reveal>
<div class="ccard__img"><img src="https://ermitage.concilium.click/assets/img/cat-labelises.jpg" alt="Meules de fromages Label Rouge Ermitage"></div>
<div class="ccard__body">
<div class="badges"><span class="badge">Label Rouge</span><span class="badge">AOP</span><span class="badge">IGP</span></div>
<h3>Fromages labélisés</h3>
<p>L'excellence reconnue par les plus grands signes de qualité français.</p>
<span class="link-arrow">Découvrir <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
<a href="#" class="ccard" data-reveal data-delay="1">
<div class="ccard__img"><img src="https://ermitage.concilium.click/assets/img/cat-regions.jpg" alt="Spécialités régionales Ermitage, meule de Morbier"></div>
<div class="ccard__body">
<h3>Spécialités régionales</h3>
<p>Morbier, emmental, montagnon… les trésors fromagers de nos territoires.</p>
<span class="link-arrow">Découvrir <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
<a href="#" class="ccard" data-reveal data-delay="2">
<div class="ccard__img"><img src="https://ermitage.concilium.click/assets/img/cat-conviviaux.jpg" alt="Repas fromagers conviviaux Ermitage"></div>
<div class="ccard__body">
<h3>Moments conviviaux</h3>
<p>Raclette, fondue, tartiflette : le fromage qui rassemble autour de la table.</p>
<span class="link-arrow">Découvrir <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
</div>
</div>
</section>
<!-- ================= DISTINCTIONS (FOND BLANC) ================= -->
<section class="medals" aria-label="Nos distinctions">
<div class="head">
<span class="eyebrow" data-reveal>Nos distinctions</span>
<hr class="rule-or">
</div>
<div class="marquee">
<div class="track" id="track"><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-cga-or.png" alt="Médaille d'Or" loading="lazy"></span><div class="txt"><b>Médaille d'Or</b><span>Concours Général Agricole · Paris</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-labelrouge.png" alt="Label Rouge" loading="lazy"></span><div class="txt"><b>Label Rouge</b><span>Emmental Grand Cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aop.png" alt="AOP" loading="lazy"></span><div class="txt"><b>AOP</b><span>Morbier au lait cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-medaille.png" alt="Fromage médaillé" loading="lazy"></span><div class="txt"><b>Fromage médaillé</b><span>Plusieurs fois primé</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aoc.png" alt="AOC" loading="lazy"></span><div class="txt"><b>AOC</b><span>Appellation d'origine contrôlée</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-vegetal.png" alt="Présure végétale" loading="lazy"></span><div class="txt"><b>Présure végétale</b><span>Produit végétarien</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-cga-or.png" alt="Médaille d'Or" loading="lazy"></span><div class="txt"><b>Médaille d'Or</b><span>Concours Général Agricole · Paris</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-labelrouge.png" alt="Label Rouge" loading="lazy"></span><div class="txt"><b>Label Rouge</b><span>Emmental Grand Cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aop.png" alt="AOP" loading="lazy"></span><div class="txt"><b>AOP</b><span>Morbier au lait cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-medaille.png" alt="Fromage médaillé" loading="lazy"></span><div class="txt"><b>Fromage médaillé</b><span>Plusieurs fois primé</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aoc.png" alt="AOC" loading="lazy"></span><div class="txt"><b>AOC</b><span>Appellation d'origine contrôlée</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-vegetal.png" alt="Présure végétale" loading="lazy"></span><div class="txt"><b>Présure végétale</b><span>Produit végétarien</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-cga-or.png" alt="Médaille d'Or" loading="lazy"></span><div class="txt"><b>Médaille d'Or</b><span>Concours Général Agricole · Paris</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-labelrouge.png" alt="Label Rouge" loading="lazy"></span><div class="txt"><b>Label Rouge</b><span>Emmental Grand Cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aop.png" alt="AOP" loading="lazy"></span><div class="txt"><b>AOP</b><span>Morbier au lait cru</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-medaille.png" alt="Fromage médaillé" loading="lazy"></span><div class="txt"><b>Fromage médaillé</b><span>Plusieurs fois primé</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-aoc.png" alt="AOC" loading="lazy"></span><div class="txt"><b>AOC</b><span>Appellation d'origine contrôlée</span></div></div><div class="medal"><span class="logo"><img src="https://ermitage.concilium.click/assets/img/medal-vegetal.png" alt="Présure végétale" loading="lazy"></span><div class="txt"><b>Présure végétale</b><span>Produit végétarien</span></div></div></div>
</div>
</section>
<!-- ================= HISTOIRE (TEXTE ET HAUTEUR COMPACTS) ================= -->
<section class="histoire sec-pad" id="histoire">
<div class="histoire__bg"><img src="https://ermitage.concilium.click/assets/img/histoire.jpg" alt="Des vaches et des hommes, le terroir Ermitage"></div>
<span class="year-wm" aria-hidden="true">1931</span>
<div class="wrap">
<div class="histoire__inner">
<span class="kicker" data-reveal>Notre histoire</span>
<h2 data-reveal data-delay="1">Coopérative indépendante depuis 1931</h2>
<p data-reveal data-delay="2">Fondée en 1931 par 211 producteurs de lait, Ermitage est une coopérative qui appartient à ses éleveurs. Elle collecte le lait de près de 1 000 producteurs du Grand-Est et de Bourgogne‑Franche‑Comté.</p>
<div class="sign" data-reveal data-delay="3">Notre engagement, depuis 95 ans.</div>
<a href="#" class="btn btn--ghost" data-reveal data-delay="3">En savoir plus <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</section>
<!-- ================= ACTUALITES ================= -->
<section class="actus sec-pad" id="actus">
<div class="wrap">
<div class="head-row">
<div>
<span class="kicker" data-reveal>Actualités</span>
<h2 data-reveal data-delay="1">Les nouvelles de la coopérative</h2>
</div>
<a href="#" class="link-arrow" data-reveal data-delay="2">Toutes les actualités <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
<div class="news">
<a href="#" class="acard" data-reveal>
<div class="acard__media"><img src="https://ermitage.concilium.click/assets/img/medailles.jpg" alt="Médailles remportées par Ermitage"></div>
<div class="acard__body">
<div class="tag">Distinctions · <time datetime="2025-12">Décembre 2025</time></div>
<h3>Concours de Lyon : Comté, Raclette au lait cru et Morbier médaillés d'Or</h3>
<span class="link-arrow">En savoir plus <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
<a href="#" class="acard" data-reveal data-delay="1">
<div class="acard__media"><img src="https://ermitage.concilium.click/assets/img/savoirfaire.jpg" alt="Savoir-faire fromager en atelier"></div>
<div class="acard__body">
<div class="tag">Savoir-faire · <time datetime="2025-09">Septembre 2025</time></div>
<h3>Ermitage présente ses fromages au salon ANUGA 2025</h3>
<span class="link-arrow">En savoir plus <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
<a href="#" class="acard" data-reveal data-delay="2">
<div class="acard__media"><img src="https://ermitage.concilium.click/assets/img/champ.jpg" alt="Producteurs et champs du terroir Ermitage"></div>
<div class="acard__body">
<div class="tag">Engagement · <time datetime="2025-11">Novembre 2025</time></div>
<h3>Contrat « Eau & Climat » avec l'Agence de l'Eau Rhin-Meuse</h3>
<span class="link-arrow">En savoir plus <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</div>
</a>
</div>
</div>
</section>
<!-- ================= RECETTE À LA UNE ================= -->
<section class="recette sec-pad" id="recette">
<div class="wrap">
<div class="recette__media" data-reveal>
<span class="recette__stamp">La recette du moment</span>
<img src="https://ermitage.concilium.click/assets/img/recette.jpg" alt="Raclette bowl gourmand">
</div>
<div class="recette__txt">
<span class="kicker" data-reveal>Recette à la une</span>
<h2 data-reveal data-delay="1">Raclette bowl, l'hiver en version gourmande</h2>
<div class="meta" data-reveal data-delay="2">
<span class="pill"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>25 min</span>
<span class="pill"><svg viewBox="0 0 24 24"><path d="M4 20c2-6 14-6 16 0"/><circle cx="12" cy="7" r="3"/></svg>Facile</span>
<span class="pill"><svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/></svg>Fromage à raclette Label Rouge</span>
</div>
<p data-reveal data-delay="2">Un bol réconfortant qui marie la générosité de notre fromage à raclette fondant à la fraîcheur des légumes de saison. Simple, savoureux et follement convivial.</p>
<a href="#" class="btn btn--primary" data-reveal data-delay="3">Voir la recette <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</section>
<!-- ================= COMMUNAUTE ================= -->
<section class="commu sec-pad">
<div class="wrap">
<div class="head">
<span class="kicker" data-reveal>Rejoignez la communauté</span>
<h2 data-reveal data-delay="1"><span class="hash">#Ermitage</span></h2>
</div>
<div class="ig-bar" data-reveal>
<span class="ig-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span>
<span class="who"><b>@fromages_ermitage</b><span>Suivez-nous sur Instagram</span></span>
<a href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener" class="btn btn--primary">Suivre <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></a>
</div>
<div class="wall" data-reveal>
<a href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener"><img src="https://ermitage.concilium.click/assets/img/wall1.jpg" alt="Publication Instagram Ermitage"><span class="ig-corner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span><span class="ig"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span></a>
<a href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener"><img src="https://ermitage.concilium.click/assets/img/wall2.jpg" alt="Publication Instagram Ermitage"><span class="ig-corner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span><span class="ig"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span></a>
<a href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener"><img src="https://ermitage.concilium.click/assets/img/wall3.jpg" alt="Publication Instagram Ermitage"><span class="ig-corner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span><span class="ig"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span></a>
<a href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener"><img src="https://ermitage.concilium.click/assets/img/wall4.jpg" alt="Publication Instagram Ermitage"><span class="ig-corner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span><span class="ig"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></span></a>
</div>
<div class="news-block" data-reveal>
<div class="nl-intro">
<h3>Newsletter Ermitage</h3>
<p>Recettes gourmandes, conseils d'affinage et jeux-concours exclusifs : recevez le meilleur d'Ermitage dans votre boîte mail.</p>
<div class="socials">
<a class="ig" href="https://www.instagram.com/fromages_ermitage/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
<a class="li" href="https://www.linkedin.com/company/fromagerie-de-l'ermitage/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.5 8A1.5 1.5 0 1 0 6.5 5a1.5 1.5 0 0 0 0 3zM5 10h3v9H5zM10.5 10h2.9v1.2h.04c.4-.7 1.4-1.5 2.9-1.5 3.1 0 3.7 2 3.7 4.6V19h-3v-4c0-1-.02-2.3-1.4-2.3s-1.6 1.1-1.6 2.2V19h-3z"/></svg></a>
<a class="fb" href="https://www.facebook.com/FromageErmitage" target="_blank" rel="noopener" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 9h3V6h-3c-2 0-3.5 1.5-3.5 3.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V9.5c0-.3.2-.5.5-.5z"/></svg></a>
</div>
</div>
<form class="nl-form" id="nlForm" novalidate>
<div class="field-row">
<label for="nlEmail" class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Votre adresse e-mail</label>
<input type="email" id="nlEmail" placeholder="Mon adresse e-mail" required>
<button type="submit" class="btn btn--primary">Je m'abonne</button>
</div>
<label class="nl-consent"><input type="checkbox" id="nlConsent" required><span>J'accepte de recevoir la newsletter Ermitage et j'ai lu la <a href="#">politique de confidentialité</a>.</span></label>
<div class="nl-msg" id="nlMsg" role="status" aria-live="polite"></div>
</form>
</div>
</div>
</section>
</div>
<script>
(function(){var root=document.getElementById("erm-home");if(!root)return;root.classList.add("js");var RM=matchMedia("(prefers-reduced-motion:reduce)").matches;var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add("in");io.unobserve(e.target);}});},{threshold:.15,rootMargin:"0px 0px -8% 0px"});root.querySelectorAll("[data-reveal]").forEach(function(el){io.observe(el);});var ease=function(t){return t===1?1:1-Math.pow(2,-10*t);};function ac(el){var tg=+el.dataset.count,dur=1800;function tk(now){var t0=el.__t0||(el.__t0=now);var p=Math.min((now-t0)/dur,1);el.textContent=Math.round(ease(p)*tg).toLocaleString("fr-FR");if(p<1)requestAnimationFrame(tk);}requestAnimationFrame(tk);}var cIO=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){ac(e.target);cIO.unobserve(e.target);}});},{threshold:.4});if(!RM){root.querySelectorAll("[data-count]").forEach(function(el){cIO.observe(el);});}var f=root.querySelector("#nlForm"),msg=root.querySelector("#nlMsg");if(f){f.addEventListener("submit",function(e){e.preventDefault();var em=root.querySelector("#nlEmail"),cs=root.querySelector("#nlConsent");if(!em.value||!em.checkValidity()){msg.textContent="Merci de saisir une adresse e-mail valide.";return;}if(!cs.checked){msg.textContent="Merci d'accepter la politique de confidentialité.";return;}msg.textContent="\u2713 Merci ! Votre inscription est bien prise en compte.";f.reset();});}})();
</script>