/* ===== Bloc CSS #1 (extrait de pan_complet.html) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#1D4A32;--gm:#2E6B50;--t:#40C9A2;--y:#D4E835;
  --w:#FFFFFF;--ow:#F8FBF8;--cream:#F5F2EC;--tx:#1A2E1A;--txm:#4E6B52;--border:rgba(26,74,50,0.1);
  --D:'Space Grotesk',sans-serif;--B:'Inter',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--B);background:var(--ow);color:var(--tx);-webkit-font-smoothing:antialiased}

/* ── INTRO SPLASH ── */
#splash{position:fixed;inset:0;z-index:1000;background:#0C1F14;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.8s ease,visibility 0.8s ease;animation:splashFailsafe 0.8s ease 6s forwards}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none;animation:none}
@keyframes splashFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#sp-c{position:absolute;inset:0;width:100%;height:100%}
#sp-ui{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;pointer-events:none;gap:0}
.sp-nm{font-family:var(--D);font-size:6rem;font-weight:700;letter-spacing:-0.06em;color:#fff;line-height:1;overflow:hidden;height:6.5rem;display:flex;align-items:flex-end}
.sp-nm span{display:block;transform:translateY(110%);transition:transform 0.9s cubic-bezier(.16,1,.3,1)}
.sp-nm span.v{transform:translateY(0)}
.sp-sub{font-family:var(--B);font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;color:#40C9A2;margin-top:1rem;opacity:0;transition:opacity 0.7s ease}
.sp-sub.v{opacity:1}
.sp-sep{width:1px;height:26px;background:rgba(64,201,162,0.25);margin:1rem auto;opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity 0.5s ease,transform 0.6s cubic-bezier(.16,1,.3,1)}
.sp-sep.v{opacity:1;transform:scaleY(1)}
.sp-tag{font-family:var(--B);font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.2);opacity:0;transition:opacity 0.5s ease}
.sp-tag.v{opacity:1}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 3rem;
  background:rgba(244,250,246,0.97);
  border-bottom:1px solid rgba(26,61,43,0.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:0.6rem}
.nav-logo img{height:42px;width:auto;border-radius:4px}
.nav-logo-sub{font-family:var(--B);font-size:0.62rem;font-weight:400;color:var(--txm);letter-spacing:0.04em;line-height:1.2;display:block}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{font-family:var(--B);font-size:0.78rem;font-weight:500;color:var(--txm);text-decoration:none;transition:color 0.2s;white-space:nowrap}
.nav-links a:hover{color:var(--g)}
.nav-resa{background:var(--y)!important;color:var(--g)!important;font-weight:700!important;padding:0.75rem 1.8rem;border-radius:100px!important;font-size:0.95rem!important;letter-spacing:0.02em}
.nav-resa:hover{background:#d4e020!important}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-burger span{width:24px;height:2px;background:var(--g);border-radius:2px;display:block}
.nav-mob{display:none;position:fixed;top:62px;left:0;right:0;background:rgba(244,250,246,0.99);border-bottom:1px solid rgba(26,61,43,0.1);padding:1.5rem 2rem;z-index:199;flex-direction:column;gap:1rem}
.nav-mob a{font-family:var(--B);font-size:1rem;font-weight:500;color:var(--txm);text-decoration:none;padding:0.5rem 0;border-bottom:1px solid rgba(26,61,43,0.06)}
.nav-mob a:last-child{border-bottom:none}
.nav-mob.open{display:flex}

/* ── HERO ── */
.hero{
  min-height:100vh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-slide.active{opacity:1}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(15,45,28,0.75) 0%,rgba(15,45,28,0.4) 60%,transparent 100%)}
.hero-inner{
  position:relative;z-index:2;
  max-width:1100px;width:100%;margin:0 auto;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:9rem 3rem 8rem;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-family:var(--B);font-size:0.7rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--t);margin-bottom:1.5rem;
}
.hero-badge::before{content:'';width:28px;height:1px;background:var(--t);opacity:0.5}
h1.ht{
  font-family:var(--D);font-size:clamp(3.2rem,8vw,7.5rem);
  font-weight:700;color:var(--w);line-height:0.95;letter-spacing:-0.04em;margin-bottom:0.5rem;
}
h1.ht .acc{display:block;color:var(--y);font-weight:300}
.hero-sub{font-family:var(--B);font-size:1.05rem;font-weight:300;color:rgba(255,255,255,0.65);margin-bottom:2.5rem;max-width:480px;line-height:1.75}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{font-family:var(--B);font-size:0.82rem;font-weight:500;text-decoration:none;padding:0.85rem 2rem;border-radius:100px;transition:all 0.2s;display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;border:none}
.btn-y{background:var(--y);color:var(--g);font-weight:700}
.btn-y:hover{background:#d4e020;transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(255,255,255,0.3);color:var(--w);background:transparent}
.btn-ghost:hover{border-color:rgba(255,255,255,0.7)}
.btn-g{background:var(--g);color:var(--w)}
.btn-g:hover{background:var(--gm)}
.btn-t{background:var(--t);color:var(--g);font-weight:700}
.btn-t:hover{background:#35b890}
.hero-stats{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;border-top:1px solid rgba(255,255,255,0.08);
}
.hs{flex:1;padding:1.2rem 2rem;border-right:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:0.8rem;background:rgba(8,22,12,0.82);-webkit-backdrop-filter:blur(10px)}
.hs:last-child{border-right:none;backdrop-filter:blur(10px)}
.hs:last-child{border-right:none;background:rgba(8,22,12,0.82)}
.hs-n{font-family:var(--D);font-size:1.4rem;font-weight:700;color:var(--y);letter-spacing:-0.03em;line-height:1;flex-shrink:0}
.hs-l{font-family:var(--B);font-size:0.65rem;font-weight:400;color:rgba(255,255,255,0.35);line-height:1.4}
/* Dots nav */
.hero-dots{position:absolute;right:2rem;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:0.5rem}
.hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s}
.hero-dot.active{background:var(--y);transform:scale(1.4)}

/* ── SECTIONS BASE ── */
section{padding:5.5rem 2rem}
.container{max-width:1100px;margin:0 auto}
.lbl{font-family:var(--B);font-size:0.67rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--t);margin-bottom:0.6rem}
h2.st{font-family:var(--D);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;letter-spacing:-0.03em;color:var(--g);line-height:1.05;margin-bottom:1.2rem}
h2.st .li{font-weight:300;color:var(--gm)}
h2.st-w{color:var(--g)}
h2.st-w .li{color:var(--gm)}

/* ── INTRO BAND ── */
.intro-band{background:var(--t);padding:3.5rem 2rem}
.intro-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:3rem;align-items:center}
.intro-big{font-family:var(--D);font-size:3.5rem;font-weight:700;color:var(--g);opacity:0.2;letter-spacing:-0.05em;line-height:1}
.intro-inner p{font-family:var(--B);font-size:1.05rem;font-weight:400;color:var(--g);line-height:1.9}
.intro-inner p strong{font-weight:700}
.pan-logo .pl-eye{animation:plEyeLoop 3.5s ease-in-out infinite}
.pan-logo .pl-1{animation:plW1 3.5s ease-in-out infinite}
.pan-logo .pl-2{animation:plW2 3.5s ease-in-out infinite}
.pan-logo .pl-3{animation:plW3 3.5s ease-in-out infinite}
@keyframes plEyeLoop{0%{opacity:0;transform:scale(0.8)}6%{opacity:1;transform:scale(1.05)}12%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0.8)}}
@keyframes plW1{0%,8%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}20%,90%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}98%,100%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}}
@keyframes plW2{0%,22%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}34%,90%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}98%,100%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}}
@keyframes plW3{0%,36%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}48%,90%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}98%,100%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}}
@media(prefers-reduced-motion:reduce){.pan-logo .pl-eye,.pan-logo .pl-l{animation:none!important;opacity:1;-webkit-clip-path:none;clip-path:none}}

/* ── RÉSERVATION ── */
.resa-section{background:var(--g)}
.resa-section .lbl{color:var(--t)}
.resa-box{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2.5rem;margin-top:2.5rem}
.resa-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1rem;align-items:end}
.rf label{font-family:var(--B);font-size:0.67rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--gm);opacity:1;margin-bottom:0.4rem;display:block}
.rf input,.rf select{width:100%;background:rgba(255,255,255,0.75);border:1px solid rgba(26,74,50,0.18);border-radius:12px;padding:0.75rem 1rem;color:var(--tx);font-family:var(--B);font-size:0.88rem;font-weight:300;outline:none;transition:border-color 0.2s}
.rf input:focus,.rf select:focus{border-color:var(--gm);background:rgba(255,255,255,0.95)}
.rf select option{background:#fff;color:var(--tx)}
.resa-suggestion{margin-top:2rem;padding:1.5rem;background:rgba(232,247,42,0.08);border:1px solid rgba(232,247,42,0.2);border-radius:12px;display:none}
.resa-suggestion.visible{display:block}
.resa-suggestion h4{font-family:var(--D);font-size:1rem;font-weight:700;color:var(--y);margin-bottom:0.75rem}
.resa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.resa-card{background:rgba(255,255,255,0.06);border-radius:12px;padding:1.25rem;border:1px solid rgba(255,255,255,0.08);transition:border-color 0.2s;cursor:pointer}
.resa-card:hover,.resa-card.selected{border-color:var(--y)}
.resa-card h5{font-family:var(--D);font-size:0.88rem;font-weight:700;color:var(--w);margin-bottom:0.25rem}
.resa-card p{font-family:var(--B);font-size:0.76rem;font-weight:300;color:rgba(255,255,255,0.5);margin-bottom:0.75rem}
.resa-card .price{font-family:var(--D);font-size:1.1rem;font-weight:700;color:var(--y)}
.resa-card .price span{font-family:var(--B);font-size:0.72rem;font-weight:300;color:rgba(255,255,255,0.4)}

/* ── GALERIE HERO ── */
.galerie-section{background:var(--ow);padding:0}
.galerie-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:3px}
.gi{overflow:hidden;position:relative}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.gi:hover img{transform:scale(1.04)}
.gi.tall{grid-row:span 2}
.gi-label{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(transparent,rgba(15,45,28,0.7));font-family:var(--B);font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.8);letter-spacing:0.08em;text-transform:uppercase;opacity:0;transition:opacity 0.3s}
.gi:hover .gi-label{opacity:1}



/* ── BRODERIE TEXTURE & THREADS ── */
.brod-thread{position:absolute;pointer-events:none;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(29,74,50,0.018) 7px,rgba(29,74,50,0.018) 8px),repeating-linear-gradient(90deg,transparent,transparent 7px,rgba(29,74,50,0.018) 7px,rgba(29,74,50,0.018) 8px);pointer-events:none;z-index:0}
.at-video-section{background:var(--g);padding:5.5rem 2rem}
.at-video-section .lbl{color:var(--t)}
.video-wrap{border-radius:16px;overflow:hidden;position:relative;background:#000;max-width:680px;margin:0 auto}
.video-wrap video{width:100%;display:block;border-radius:16px}
.video-caption{font-family:var(--B);font-size:0.78rem;font-weight:300;color:rgba(255,255,255,0.45);text-align:center;margin-top:1rem;letter-spacing:0.04em}

/* ── RESA OPTIONS ── */
.resa-opt{padding:2rem 1.75rem;background:rgba(255,255,255,0.04);cursor:pointer;transition:background 0.2s;border-bottom:3px solid transparent}
.resa-opt:hover{background:rgba(255,255,255,0.07)}
.resa-opt.active{background:rgba(232,247,42,0.07);border-bottom-color:var(--y)}
.resa-opt-num{font-family:var(--D);font-size:0.6rem;font-weight:700;letter-spacing:0.12em;color:var(--t);opacity:0.6;margin-bottom:0.75rem}
.resa-opt-icon{font-size:1.6rem;margin-bottom:0.75rem}
.resa-opt-title{font-family:var(--D);font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-0.02em;margin-bottom:0.5rem}
.resa-opt.active .resa-opt-title{color:var(--y)}
.resa-opt-desc{font-family:var(--B);font-size:0.8rem;font-weight:300;color:rgba(255,255,255,0.45);line-height:1.7;margin-bottom:0.75rem}
.resa-opt-note{font-family:var(--B);font-size:0.68rem;font-weight:500;color:var(--t);opacity:0.7;margin-bottom:0.9rem;line-height:1.5}
.resa-opt-price{font-family:var(--D);font-size:1.1rem;font-weight:700;color:var(--y)}
.resa-opt-price span{font-family:var(--B);font-size:0.7rem;font-weight:300;color:rgba(255,255,255,0.3)}
@media(max-width:900px){#resa-options{grid-template-columns:1fr!important}}

/* ── HÉBERGEMENTS ── */
.heberg-section{background:rgba(255,255,255,0.7)}
.heberg-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(26,61,43,0.1);border-radius:16px;overflow:hidden;margin-top:2.5rem}
.hc{padding:2.5rem 2rem;background:rgba(255,255,255,0.8);border-right:1px solid rgba(26,61,43,0.08);transition:background 0.2s}
.hc:last-child{border-right:none}
.hc:hover{background:#F0FAF5}
.hc-img{width:100%;height:380px;object-fit:cover;border-radius:10px 10px 0 0;margin-bottom:0;display:block}
.hc-n{font-family:var(--D);font-size:0.62rem;font-weight:700;color:var(--t);letter-spacing:0.1em;margin-bottom:1.2rem;display:block}
.hc h3{font-family:var(--D);font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;color:var(--g);margin-bottom:0.6rem;line-height:1.2}
.hc p{font-family:var(--B);font-size:0.84rem;font-weight:300;color:var(--txm);line-height:1.75;margin-bottom:1.25rem}
.pills{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:1.5rem}
.pill{font-family:var(--B);font-size:0.68rem;font-weight:500;color:var(--gm);background:rgba(255,255,255,0.08);border:1px solid rgba(64,201,162,0.2);padding:0.2rem 0.6rem;border-radius:100px}
.hc-cta{font-family:var(--B);font-size:0.76rem;font-weight:500;color:var(--t);display:flex;align-items:center;gap:0.4rem}
.hc-cta::after{content:'→';transition:transform 0.2s}
.hc:hover .hc-cta::after{transform:translateX(4px)}
.priv-banner{margin-top:1rem;background:var(--g);border-radius:16px;padding:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.priv-banner h3{font-family:var(--D);font-size:1.1rem;font-weight:700;color:var(--w);margin-bottom:0.35rem}
.priv-banner p{font-family:var(--B);font-size:0.84rem;font-weight:300;color:rgba(255,255,255,0.5);max-width:480px;line-height:1.65}
.priv-banner a{flex-shrink:0;background:var(--y);color:var(--g);font-family:var(--B);font-size:0.8rem;font-weight:700;padding:0.75rem 1.75rem;border-radius:100px;text-decoration:none;transition:background 0.2s;white-space:nowrap}
.priv-banner a:hover{background:#d4e020}

/* ── ÉVÉNEMENTS - AVANT/APRÈS ── */
.events-section{background:#EBF7F1}
.ev-intro{font-family:var(--B);font-size:0.9rem;font-weight:300;color:var(--txm);line-height:1.85;max-width:560px;margin-bottom:3rem}
/* Comparaison avant/après */
.ev-block{margin-bottom:3rem}
.ev-block-title{font-family:var(--D);font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;color:var(--g);margin-bottom:0.4rem}
.ev-block-sub{font-family:var(--B);font-size:0.82rem;font-weight:300;color:var(--txm);margin-bottom:1.5rem}
.ev-compare{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:16px;overflow:hidden;border:1px solid rgba(26,61,43,0.1)}
.ev-side{position:relative;min-height:320px}
.ev-side img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.ev-side-label{position:absolute;top:1rem;left:1rem;font-family:var(--D);font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.3rem 0.75rem;border-radius:100px}
.ev-side-label.before{background:rgba(255,255,255,0.9);color:var(--g)}
.ev-side-label.after{background:var(--y);color:var(--g)}
.ev-side-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(transparent,rgba(15,45,28,0.85))}
.ev-side-overlay h4{font-family:var(--D);font-size:1rem;font-weight:700;color:var(--w);margin-bottom:0.25rem}
.ev-side-overlay p{font-family:var(--B);font-size:0.78rem;font-weight:300;color:rgba(255,255,255,0.65);line-height:1.5}
.ev-content-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem;padding:1.75rem;background:var(--w);border-radius:12px;border:1px solid rgba(26,61,43,0.08)}
.ev-feats{list-style:none;display:flex;flex-direction:column;gap:0.4rem}
.ev-feats li{display:flex;align-items:flex-start;gap:0.6rem;font-family:var(--B);font-size:0.82rem;font-weight:300;color:var(--txm)}
.ev-feats li::before{content:'—';font-weight:700;color:var(--t);font-size:0.65rem;flex-shrink:0;margin-top:0.2rem}
.ev-tag{display:inline-block;font-family:var(--B);font-size:0.62rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--g);background:rgba(64,201,162,0.15);padding:0.18rem 0.6rem;border-radius:100px;margin-bottom:1rem}
.ev-content-row h3{font-family:var(--D);font-size:1.1rem;font-weight:700;color:var(--g);margin-bottom:0.5rem;letter-spacing:-0.02em}
.ev-content-row p{font-family:var(--B);font-size:0.84rem;font-weight:300;color:var(--txm);line-height:1.8;margin-bottom:1rem}
.ev-price{font-family:var(--D);font-size:0.8rem;font-weight:700;color:var(--g);background:var(--y);padding:0.35rem 0.9rem;border-radius:100px;display:inline-block;margin-top:0.5rem}

/* ── NATURE ── */
.nature-section{background:#F0F7F2}
.nature-section .lbl{color:var(--gm)}
.nat-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:2.5rem}
.nat-text p{font-family:var(--B);font-size:0.88rem;font-weight:300;color:var(--txm);line-height:1.85;margin-bottom:1rem}
.nat-photos{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:12px;overflow:hidden}
.nat-photo{height:200px;overflow:hidden}
.nat-photo img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.nat-photo:hover img{transform:scale(1.05)}
.nat-points{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);border-radius:12px;overflow:hidden}
.np{background:#FFFFFF;border:1px solid rgba(26,74,50,0.08);padding:1rem;transition:background 0.2s}
.np:hover{background:#F0FAF5}
.np strong{display:block;font-family:var(--D);font-size:0.8rem;font-weight:700;color:var(--y);margin-bottom:0.15rem}
.np span{font-family:var(--B);font-size:0.74rem;font-weight:300;color:var(--txm);line-height:1.4}

/* ── ATELIER ── */
.atelier-section{background:var(--ow)}
.at-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:2.5rem}
.at-grid p{font-family:var(--B);font-size:0.88rem;font-weight:300;color:var(--txm);line-height:1.85;margin-bottom:1rem}
.at-points{display:flex;flex-direction:column;gap:4px}
.atp{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;background:var(--w);border-radius:12px;transition:background 0.2s;border:1px solid rgba(26,61,43,0.07)}
.atp:hover{background:rgba(64,201,162,0.08)}
.atp-tag{font-family:var(--D);font-size:0.55rem;font-weight:700;letter-spacing:0.08em;color:var(--g);background:var(--y);border-radius:6px;padding:0.3rem 0.45rem;flex-shrink:0;margin-top:0.1rem}
.atp strong{display:block;font-family:var(--D);font-size:0.85rem;font-weight:700;color:var(--g);margin-bottom:0.15rem}
.atp span{font-family:var(--B);font-size:0.78rem;font-weight:300;color:var(--txm);line-height:1.5}

/* ── AGENDA ── */
.agenda-section{background:rgba(248,251,248,0.7)}
.agenda-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(26,61,43,0.1);border-radius:16px;overflow:hidden;margin-top:2.5rem}
.ag{background:rgba(255,255,255,0.8);padding:1.75rem;transition:background 0.2s}
.ag:hover{background:#F0FAF5}
.ag-meta{font-family:var(--B);font-size:0.65rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--t);margin-bottom:0.8rem;display:flex;align-items:center;gap:0.4rem}
.ag-dot{width:4px;height:4px;background:var(--t);border-radius:50%}
.ag h4{font-family:var(--D);font-size:1rem;font-weight:700;color:var(--g);margin-bottom:0.5rem;line-height:1.2}
.ag p{font-family:var(--B);font-size:0.82rem;font-weight:300;color:var(--txm);line-height:1.65}

/* ── TEMO ── */
.temo-section{background:#1D4A32}
.temo-section .lbl{color:var(--t)}
.temo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.06);border-radius:16px;overflow:hidden;margin-top:2.5rem}
.tm{background:rgba(255,255,255,0.03);padding:1.75rem}
.tm-stars{font-size:0.75rem;color:var(--y);letter-spacing:0.15em;margin-bottom:0.9rem}
.tm blockquote{font-family:var(--B);font-style:italic;font-size:0.88rem;font-weight:300;color:rgba(255,255,255,0.65);line-height:1.8;margin-bottom:1rem}
.tm-auth{font-family:var(--D);font-size:0.7rem;font-weight:700;color:var(--t);opacity:0.65}

/* ── CONTACT ── */
.contact-section{background:#F8FBF8;padding:5.5rem 2rem}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;margin-top:2.5rem;align-items:start}
.c-info{display:flex;flex-direction:column;gap:1.75rem}
.ci strong{display:block;font-family:var(--B);font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t);margin-bottom:0.25rem}
.ci a,.ci span{font-family:var(--B);font-size:0.9rem;font-weight:300;color:var(--txm);text-decoration:none;line-height:1.6}
.ci a:hover{color:var(--g)}
.c-form{background:rgba(255,255,255,0.85);border:1px solid rgba(26,61,43,0.1);border-radius:16px;padding:2.25rem}
.fr{margin-bottom:1rem}
.fr label{display:block;font-family:var(--B);font-size:0.65rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--t);margin-bottom:0.4rem}
.fr input,.fr select,.fr textarea{width:100%;background:#F8FBF8;border:1px solid rgba(26,61,43,0.12);border-radius:10px;padding:0.7rem 1rem;color:var(--tx);font-family:var(--B);font-size:0.86rem;font-weight:300;outline:none;transition:border-color 0.2s}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:var(--t)}
.fr textarea{min-height:80px;resize:vertical}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-submit{width:100%;background:var(--y);color:var(--g);border:none;border-radius:100px;padding:0.9rem;font-family:var(--B);font-size:0.82rem;font-weight:700;cursor:pointer;transition:background 0.2s;margin-top:0.4rem}
.f-submit:hover{background:#d4e020}
.c-alt{margin-top:1.25rem;font-family:var(--B);font-size:0.8rem;font-weight:300;color:var(--txm);text-align:center}
.c-alt a{color:var(--g);text-decoration:none;font-weight:500}

/* ── FOOTER ── */
footer{background:var(--g);padding:2.5rem 3rem}
.fi{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.f-logo{display:flex;align-items:center;gap:0.5rem}
.f-logo img{height:36px;width:auto}
.flinks{display:flex;flex-wrap:wrap;gap:0.4rem 1.5rem;list-style:none}
.flinks a{font-family:var(--B);font-size:0.74rem;font-weight:300;color:rgba(255,255,255,0.35);text-decoration:none;transition:color 0.2s}
.flinks a:hover{color:var(--t)}
.fcopy{font-family:var(--B);font-size:0.68rem;font-weight:300;color:rgba(255,255,255,0.2)}

/* ── ANIMATIONS ── */
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-badge{animation:fu 0.5s ease 0.1s both}
h1.ht{animation:fu 0.6s ease 0.2s both}
.hero-sub{animation:fu 0.6s ease 0.3s both}
.hero-actions{animation:fu 0.5s ease 0.4s both}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0.75rem 1.5rem}
  .nav-links{display:none}
  .nav-burger{display:flex}
  section{padding:4rem 1.5rem}
  .hero-inner{padding:7rem 1.5rem 6rem}
  .hero-stats{flex-direction:column}
  .hs{border-right:none;border-bottom:1px solid rgba(255,255,255,0.06)}
  .intro-inner{grid-template-columns:1fr;gap:1rem}
  .resa-grid{grid-template-columns:1fr 1fr}
  .resa-cards{grid-template-columns:1fr}
  .galerie-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gi.tall{grid-row:span 1}
  .heberg-grid{grid-template-columns:1fr}
  .hc{border-right:none;border-bottom:1px solid rgba(26,61,43,0.08)}
  .ev-compare,.ev-content-row,.nat-grid,.at-grid,.contact-grid,.temo-grid,.agenda-grid{grid-template-columns:1fr}
  .priv-banner,.fi{flex-direction:column;align-items:flex-start}
  .fr2{grid-template-columns:1fr}
  .nat-photos{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .galerie-grid,.resa-grid,.nat-photos{grid-template-columns:1fr}
}


/* ── HERO VIDEO BACKGROUND ── */
.hero-video-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
  image-rendering:-webkit-optimize-contrast;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  will-change:transform;
  filter:contrast(1.05) saturate(1.1);
}
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hero-slides .hero-slide{
  position:absolute;inset:0;z-index:1;
}

/* ── PALETTE LÉGÈRE & FIL BRODERIE ── */
body{background:url("../images/img001.jpg") center/cover fixed no-repeat;color:var(--tx);-webkit-font-smoothing:antialiased}
.events-group-section{background:#F8FBF8}
.ev-card{background:rgba(255,255,255,0.85)}
.services-section{background:#F8FBF8}
.svc-grid .svc{background:rgba(255,255,255,0.8)}
.svc-grid .svc:hover{background:#F0FAF5}
.alentours-section{background:rgba(240,247,242,0.65)}
.al-grid .al{background:rgba(255,255,255,0.8)}
.al-grid .al:hover{background:#F0FAF5}

/* Sections alternées claires */
section{position:relative}

/* Séparateur fil de broderie entre sections */
.thread-divider{
  height:40px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.thread-divider svg{width:100%;height:40px;position:absolute}

/* Fil broderie décoratif en header de section */
.section-thread{
  display:block;width:48px;height:3px;margin-bottom:1.2rem;position:relative;
  background:linear-gradient(90deg, var(--t) 0%, var(--y) 60%, transparent 100%);
  border-radius:2px;
}
.section-thread::before{
  content:'';position:absolute;top:-2px;left:0;
  width:8px;height:8px;border-radius:50%;background:var(--t);
}

/* Cards hover lift */
.hc,.svc,.ag,.al,.ev-card,.tm{transition:box-shadow 0.25s,transform 0.25s}
.hc:hover,.svc-grid .svc:hover,.ag:hover{
  box-shadow:0 8px 32px rgba(26,74,50,0.08);
  transform:translateY(-2px);
}

/* Borders subtiles */
.heberg-grid,.svc-grid,.agenda-grid,.temo-grid{
  border:1px solid rgba(26,74,50,0.07)!important;
  background:rgba(26,74,50,0.06)!important;
}
.hc,.svc-grid .svc,.ag,.temo-grid .tm{
  border-right:1px solid rgba(26,74,50,0.07)!important;
}

/* Meilleure typo sections claires */
h2.st{color:#1D4A32}
.lbl{color:#40C9A2}

/* Nature section fond doux */
.nature-section{background:linear-gradient(135deg,#F0F7F2 0%,#EBF5EE 100%)!important}
.nat-points{background:rgba(26,74,50,0.06)!important}

/* Intro band plus légère */
.intro-band{background:rgba(235,245,238,0.75)}
.intro-inner p{color:var(--txm)}
.intro-big{color:var(--t)!important;opacity:0.15!important}

/* Contact section fond crème */
.contact-section{background:#F5F8F5!important}

/* Labels verts sur fond clair */
.ci strong{color:var(--gm)!important;opacity:1!important}

/* Resa section conserver sombre mais plus fin */
.resa-section{background:url("../images/img002.jpg") center/cover no-repeat;position:relative}
.resa-section::before{content:"";position:absolute;inset:0;background:rgba(10,30,15,0.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:0}
.resa-section .container{position:relative;z-index:1}
.resa-opt{border-bottom:3px solid transparent;transition:all 0.2s}
.resa-opt.active{background:rgba(212,232,53,0.08)!important;border-bottom-color:var(--y)}

/* Footer conserver sombre */
footer{background:#1D4A32}

/* Priv banner */
.priv-banner{background:linear-gradient(135deg,#1D4A32 0%,#163D28 100%)!important}

/* Hero stat bar */
.hs{background:rgba(10,26,15,0.88)!important;-webkit-backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.07)}
.tm:hover{background:rgba(255,255,255,0.07)!important}

/* Atelier sections inline */
[style*="background:var(--g);"],[style*="background: var(--g);"]{}

/* Video player amélioration */
.video-wrap{
  border-radius:20px!important;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,74,50,0.1)!important;
  max-width:480px!important;
  margin:0 auto;
}
.video-wrap video{border-radius:0!important}

/* Galerie */
.galerie-grid{gap:4px!important}
.gi{border-radius:0}
.gi img{transition:transform 0.6s cubic-bezier(.16,1,.3,1)}

/* Fil décoratif SVG dans les sections */
@keyframes threadDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.deco-thread{stroke-dasharray:600;stroke-dashoffset:600;animation:threadDraw 2s ease forwards}


/* ── PALETTE LÉGÈRE & FIL BRODERIE ── */
body{background:url("../images/img001.jpg") center/cover fixed no-repeat;color:var(--tx);-webkit-font-smoothing:antialiased}
.events-group-section{background:#F8FBF8}
.ev-card{background:rgba(255,255,255,0.85)}
.services-section{background:#F8FBF8}
.svc-grid .svc{background:rgba(255,255,255,0.8)}
.svc-grid .svc:hover{background:#F0FAF5}
.alentours-section{background:rgba(240,247,242,0.65)}
.al-grid .al{background:rgba(255,255,255,0.8)}
.al-grid .al:hover{background:#F0FAF5}

/* Sections alternées claires */
section{position:relative}

/* Séparateur fil de broderie entre sections */
.thread-divider{
  height:40px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.thread-divider svg{width:100%;height:40px;position:absolute}

/* Fil broderie décoratif en header de section */
.section-thread{
  display:block;width:48px;height:3px;margin-bottom:1.2rem;position:relative;
  background:linear-gradient(90deg, var(--t) 0%, var(--y) 60%, transparent 100%);
  border-radius:2px;
}
.section-thread::before{
  content:'';position:absolute;top:-2px;left:0;
  width:8px;height:8px;border-radius:50%;background:var(--t);
}

/* Cards hover lift */
.hc,.svc,.ag,.al,.ev-card,.tm{transition:box-shadow 0.25s,transform 0.25s}
.hc:hover,.svc-grid .svc:hover,.ag:hover{
  box-shadow:0 8px 32px rgba(26,74,50,0.08);
  transform:translateY(-2px);
}

/* Borders subtiles */
.heberg-grid,.svc-grid,.agenda-grid,.temo-grid{
  border:1px solid rgba(26,74,50,0.07)!important;
  background:rgba(26,74,50,0.06)!important;
}
.hc,.svc-grid .svc,.ag,.temo-grid .tm{
  border-right:1px solid rgba(26,74,50,0.07)!important;
}

/* Meilleure typo sections claires */
h2.st{color:#1D4A32}
.lbl{color:#40C9A2}

/* Nature section fond doux */
.nature-section{background:linear-gradient(135deg,#F0F7F2 0%,#EBF5EE 100%)!important}
.nat-points{background:rgba(26,74,50,0.06)!important}

/* Intro band plus légère */
.intro-band{background:rgba(235,245,238,0.75)}
.intro-inner p{color:var(--txm)}
.intro-big{color:var(--t)!important;opacity:0.15!important}

/* Contact section fond crème */
.contact-section{background:#F5F8F5!important}

/* Labels verts sur fond clair */
.ci strong{color:var(--gm)!important;opacity:1!important}

/* Resa section conserver sombre mais plus fin */
.resa-section{background:url("../images/img002.jpg") center/cover no-repeat;position:relative}
.resa-section::before{content:"";position:absolute;inset:0;background:rgba(10,30,15,0.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:0}
.resa-section .container{position:relative;z-index:1}
.resa-opt{border-bottom:3px solid transparent;transition:all 0.2s}
.resa-opt.active{background:rgba(212,232,53,0.08)!important;border-bottom-color:var(--y)}

/* Footer conserver sombre */
footer{background:#1D4A32}

/* Priv banner */
.priv-banner{background:linear-gradient(135deg,#1D4A32 0%,#163D28 100%)!important}

/* Hero stat bar */
.hs{background:rgba(10,26,15,0.88)!important;-webkit-backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.07)}
.tm:hover{background:rgba(255,255,255,0.07)!important}

/* Atelier sections inline */
[style*="background:var(--g);"],[style*="background: var(--g);"]{}

/* Video player amélioration */
.video-wrap{
  border-radius:20px!important;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,74,50,0.1)!important;
  max-width:480px!important;
  margin:0 auto;
}
.video-wrap video{border-radius:0!important}

/* Galerie */
.galerie-grid{gap:4px!important}
.gi{border-radius:0}
.gi img{transition:transform 0.6s cubic-bezier(.16,1,.3,1)}

/* Fil décoratif SVG dans les sections */
@keyframes threadDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.deco-thread{stroke-dasharray:600;stroke-dashoffset:600;animation:threadDraw 2s ease forwards}



/* ── PALETTE LÉGÈRE & FIL BRODERIE ── */
body{background:url("../images/img001.jpg") center/cover fixed no-repeat;color:var(--tx);-webkit-font-smoothing:antialiased}
.events-group-section{background:#F8FBF8}
.ev-card{background:rgba(255,255,255,0.85)}
.services-section{background:#F8FBF8}
.svc-grid .svc{background:rgba(255,255,255,0.8)}
.svc-grid .svc:hover{background:#F0FAF5}
.alentours-section{background:rgba(240,247,242,0.65)}
.al-grid .al{background:rgba(255,255,255,0.8)}
.al-grid .al:hover{background:#F0FAF5}

/* Sections alternées claires */
section{position:relative}

/* Séparateur fil de broderie entre sections */
.thread-divider{
  height:40px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.thread-divider svg{width:100%;height:40px;position:absolute}

/* Fil broderie décoratif en header de section */
.section-thread{
  display:block;width:48px;height:3px;margin-bottom:1.2rem;position:relative;
  background:linear-gradient(90deg, var(--t) 0%, var(--y) 60%, transparent 100%);
  border-radius:2px;
}
.section-thread::before{
  content:'';position:absolute;top:-2px;left:0;
  width:8px;height:8px;border-radius:50%;background:var(--t);
}

/* Cards hover lift */
.hc,.svc,.ag,.al,.ev-card,.tm{transition:box-shadow 0.25s,transform 0.25s}
.hc:hover,.svc-grid .svc:hover,.ag:hover{
  box-shadow:0 8px 32px rgba(26,74,50,0.08);
  transform:translateY(-2px);
}

/* Borders subtiles */
.heberg-grid,.svc-grid,.agenda-grid,.temo-grid{
  border:1px solid rgba(26,74,50,0.07)!important;
  background:rgba(26,74,50,0.06)!important;
}
.hc,.svc-grid .svc,.ag,.temo-grid .tm{
  border-right:1px solid rgba(26,74,50,0.07)!important;
}

/* Meilleure typo sections claires */
h2.st{color:#1D4A32}
.lbl{color:#40C9A2}

/* Nature section fond doux */
.nature-section{background:linear-gradient(135deg,#F0F7F2 0%,#EBF5EE 100%)!important}
.nat-points{background:rgba(26,74,50,0.06)!important}

/* Intro band plus légère */
.intro-band{background:rgba(235,245,238,0.75)}
.intro-inner p{color:var(--txm)}
.intro-big{color:var(--t)!important;opacity:0.15!important}

/* Contact section fond crème */
.contact-section{background:#F5F8F5!important}

/* Labels verts sur fond clair */
.ci strong{color:var(--gm)!important;opacity:1!important}

/* Resa section conserver sombre mais plus fin */
.resa-section{background:url("../images/img002.jpg") center/cover no-repeat;position:relative}
.resa-section::before{content:"";position:absolute;inset:0;background:rgba(10,30,15,0.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:0}
.resa-section .container{position:relative;z-index:1}
.resa-opt{border-bottom:3px solid transparent;transition:all 0.2s}
.resa-opt.active{background:rgba(212,232,53,0.08)!important;border-bottom-color:var(--y)}

/* Footer conserver sombre */
footer{background:#1D4A32}

/* Priv banner */
.priv-banner{background:linear-gradient(135deg,#1D4A32 0%,#163D28 100%)!important}

/* Hero stat bar */
.hs{background:rgba(10,26,15,0.88)!important;-webkit-backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.07)}
.tm:hover{background:rgba(255,255,255,0.07)!important}

/* Atelier sections inline */
[style*="background:var(--g);"],[style*="background: var(--g);"]{}

/* Video player amélioration */
.video-wrap{
  border-radius:20px!important;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,74,50,0.1)!important;
  max-width:480px!important;
  margin:0 auto;
}
.video-wrap video{border-radius:0!important}

/* Galerie */
.galerie-grid{gap:4px!important}
.gi{border-radius:0}
.gi img{transition:transform 0.6s cubic-bezier(.16,1,.3,1)}

/* Fil décoratif SVG dans les sections */
@keyframes threadDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.deco-thread{stroke-dasharray:600;stroke-dashoffset:600;animation:threadDraw 2s ease forwards}


/* ── PALETTE LÉGÈRE & FIL BRODERIE ── */
body{background:url("../images/img001.jpg") center/cover fixed no-repeat;color:var(--tx);-webkit-font-smoothing:antialiased}
.events-group-section{background:#F8FBF8}
.ev-card{background:rgba(255,255,255,0.85)}
.services-section{background:#F8FBF8}
.svc-grid .svc{background:rgba(255,255,255,0.8)}
.svc-grid .svc:hover{background:#F0FAF5}
.alentours-section{background:rgba(240,247,242,0.65)}
.al-grid .al{background:rgba(255,255,255,0.8)}
.al-grid .al:hover{background:#F0FAF5}

/* Sections alternées claires */
section{position:relative}

/* Séparateur fil de broderie entre sections */
.thread-divider{
  height:40px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.thread-divider svg{width:100%;height:40px;position:absolute}

/* Fil broderie décoratif en header de section */
.section-thread{
  display:block;width:48px;height:3px;margin-bottom:1.2rem;position:relative;
  background:linear-gradient(90deg, var(--t) 0%, var(--y) 60%, transparent 100%);
  border-radius:2px;
}
.section-thread::before{
  content:'';position:absolute;top:-2px;left:0;
  width:8px;height:8px;border-radius:50%;background:var(--t);
}

/* Cards hover lift */
.hc,.svc,.ag,.al,.ev-card,.tm{transition:box-shadow 0.25s,transform 0.25s}
.hc:hover,.svc-grid .svc:hover,.ag:hover{
  box-shadow:0 8px 32px rgba(26,74,50,0.08);
  transform:translateY(-2px);
}

/* Borders subtiles */
.heberg-grid,.svc-grid,.agenda-grid,.temo-grid{
  border:1px solid rgba(26,74,50,0.07)!important;
  background:rgba(26,74,50,0.06)!important;
}
.hc,.svc-grid .svc,.ag,.temo-grid .tm{
  border-right:1px solid rgba(26,74,50,0.07)!important;
}

/* Meilleure typo sections claires */
h2.st{color:#1D4A32}
.lbl{color:#40C9A2}

/* Nature section fond doux */
.nature-section{background:linear-gradient(135deg,#F0F7F2 0%,#EBF5EE 100%)!important}
.nat-points{background:rgba(26,74,50,0.06)!important}

/* Intro band plus légère */
.intro-band{background:rgba(235,245,238,0.75)}
.intro-inner p{color:var(--txm)}
.intro-big{color:var(--t)!important;opacity:0.15!important}

/* Contact section fond crème */
.contact-section{background:#F5F8F5!important}

/* Labels verts sur fond clair */
.ci strong{color:var(--gm)!important;opacity:1!important}

/* Resa section conserver sombre mais plus fin */
.resa-section{background:url("../images/img002.jpg") center/cover no-repeat;position:relative}
.resa-section::before{content:"";position:absolute;inset:0;background:rgba(10,30,15,0.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:0}
.resa-section .container{position:relative;z-index:1}
.resa-opt{border-bottom:3px solid transparent;transition:all 0.2s}
.resa-opt.active{background:rgba(212,232,53,0.08)!important;border-bottom-color:var(--y)}

/* Footer conserver sombre */
footer{background:#1D4A32}

/* Priv banner */
.priv-banner{background:linear-gradient(135deg,#1D4A32 0%,#163D28 100%)!important}

/* Hero stat bar */
.hs{background:rgba(10,26,15,0.88)!important;-webkit-backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px)}

/* Témoignages section verte mais plus douce */
.temo-section{background:linear-gradient(160deg,#1D4A32 0%,#1A4230 100%)!important}
.temo-grid{background:rgba(255,255,255,0.05)!important}
.tm{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.07)}
.tm:hover{background:rgba(255,255,255,0.07)!important}

/* Atelier sections inline */
[style*="background:var(--g);"],[style*="background: var(--g);"]{}

/* Video player amélioration */
.video-wrap{
  border-radius:20px!important;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,74,50,0.1)!important;
  max-width:480px!important;
  margin:0 auto;
}
.video-wrap video{border-radius:0!important}

/* Galerie */
.galerie-grid{gap:4px!important}
.gi{border-radius:0}
.gi img{transition:transform 0.6s cubic-bezier(.16,1,.3,1)}

/* Fil décoratif SVG dans les sections */
@keyframes threadDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.deco-thread{stroke-dasharray:600;stroke-dashoffset:600;animation:threadDraw 2s ease forwards}


/* ══════════════════════════════════════
   TYPOGRAPHIE BRODERIE Style hachures
   ══════════════════════════════════════ */
/* Classe principale : titre brodé avec hachures */
.brod-title {
  font-family: 'Playfair Display', 'Space Grotesk', serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  position: relative;
  display: inline-block;
}

/* Effet hachures verticales via SVG pattern en background-clip */
.brod-title .brod-word {
  display: inline-block;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0px,
    currentColor 1.5px,
    transparent 1.5px,
    transparent 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Variante : mot en couleur pleine (alterné) */
.brod-title .brod-solid {
  display: inline-block;
  color: inherit;
  -webkit-text-stroke: 0;
}

/* Variante jaune hachures */
.brod-title .brod-y {
  color: #D4E835;
  -webkit-text-stroke: 2px #D4E835;
  background-image: repeating-linear-gradient(
    90deg,
    #D4E835 0px,
    #D4E835 1.5px,
    transparent 1.5px,
    transparent 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Variante teal hachures */
.brod-title .brod-t {
  color: #40C9A2;
  -webkit-text-stroke: 2px #40C9A2;
  background-image: repeating-linear-gradient(
    90deg,
    #40C9A2 0px,
    #40C9A2 1.5px,
    transparent 1.5px,
    transparent 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Variante blanc (pour fonds sombres) */
.brod-title .brod-w {
  color: rgba(255,255,255,0.95);
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.95);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0px,
    rgba(255,255,255,0.95) 1.5px,
    transparent 1.5px,
    transparent 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Sur fond sombre : contour blanc */
.dark-bg .brod-title .brod-word {
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.9);
}

/* Taille hero */
.brod-hero { font-size: clamp(3.5rem, 8vw, 8rem); }
/* Taille section */
.brod-section { font-size: clamp(2rem, 4vw, 3.2rem); }
/* Taille medium */
.brod-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Animation fil qui se révèle */
@keyframes brodReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.brod-animate {
  animation: brodReveal 0.9s cubic-bezier(0.77,0,0.175,1) both;
}
.brod-animate-delay { animation-delay: 0.2s; }

/* Ligne décorative sous titre brodé */
.brod-underline {
  display: block;
  height: 2px;
  margin-top: 0.4rem;
  background: repeating-linear-gradient(
    90deg,
    var(--t) 0px, var(--t) 8px,
    transparent 8px, transparent 14px,
    #D4E835 14px, #D4E835 16px,
    transparent 16px, transparent 22px
  );
  border-radius: 2px;
}


/* ══════════════════════════════════════
   TYPOGRAPHIE BRODERIE Style hachures
   ══════════════════════════════════════ */
.brod-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  position: relative;
  display: inline-block;
}
.brod-title .brod-word {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0px, currentColor 1.5px,
    transparent 1.5px, transparent 5px
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.brod-title .brod-solid { display: inline-block; color: inherit; -webkit-text-stroke: 0; }
.brod-title .brod-y {
  color: #D4E835;
  -webkit-text-stroke: 2px #D4E835;
  background-image: repeating-linear-gradient(90deg,#D4E835 0px,#D4E835 1.5px,transparent 1.5px,transparent 5px);
  -webkit-background-clip: text; background-clip: text;
}
.brod-title .brod-t {
  color: #40C9A2;
  -webkit-text-stroke: 2px #40C9A2;
  background-image: repeating-linear-gradient(90deg,#40C9A2 0px,#40C9A2 1.5px,transparent 1.5px,transparent 5px);
  -webkit-background-clip: text; background-clip: text;
}
.brod-title .brod-w {
  color: rgba(255,255,255,0.95);
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.95);
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.95) 0px,rgba(255,255,255,0.95) 1.5px,transparent 1.5px,transparent 5px);
  -webkit-background-clip: text; background-clip: text;
}
.brod-hero  { font-size: clamp(3.5rem, 8vw, 8rem); }
.brod-section { font-size: clamp(2rem, 4vw, 3.2rem); }
.brod-underline {
  display: block; height: 2px; margin-top: 0.5rem;
  background: repeating-linear-gradient(90deg,var(--t) 0px,var(--t) 8px,transparent 8px,transparent 14px,#D4E835 14px,#D4E835 16px,transparent 16px,transparent 22px);
  border-radius: 2px;
}


/* ═══════════════════════════════════
   STYLE ÉDITORIAL MINIMALISTE
   Inspiré atelier.pan-ariege.com
   ═══════════════════════════════════ */

/* Titres : uppercase sobre, espacé */
h2.st {
  font-family: var(--D) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--g) !important;
  margin-bottom: 1.2rem !important;
}
h2.st .li { font-weight: 300 !important; color: var(--gm) !important; }
h2.st-w { color: #fff !important; }
h2.st-w .li { color: var(--t) !important; }

/* Labels uppercase discrets */
.lbl {
  font-family: var(--B) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--t) !important;
  margin-bottom: 0.6rem !important;
  opacity: 0.8 !important;
}

/* ── ANIMATION FIL SVG décoratif ── */
.thread-line {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
  margin: 0.8rem 0;
}
.thread-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0s;
}
.thread-path.animate {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PHOTOS ACTIVES : hover zoom + overlay ── */
.photo-active {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.photo-active img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s ease;
  will-change: transform;
}
.photo-active:hover img {
  transform: scale(1.06);
  filter: brightness(0.88) saturate(1.1);
}
.photo-active .photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 34, 20, 0.7) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.photo-active:hover .photo-overlay {
  opacity: 1;
}
.photo-overlay-text {
  font-family: var(--D);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  transform: translateY(8px);
  transition: transform 0.4s ease;
}
.photo-active:hover .photo-overlay-text {
  transform: translateY(0);
}

/* ── GALERIE MASONRY-LIKE ── */
.galerie-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 260px 260px !important;
  gap: 4px !important;
}
.gi.tall { grid-row: span 2 !important; }
.gi { overflow: hidden !important; }
.gi img {
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease !important;
  will-change: transform;
}
.gi:hover img {
  transform: scale(1.05) !important;
  filter: brightness(0.85) saturate(1.1) !important;
}

/* ── ANIMATIONS SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Cards hover */
.hc:hover, .svc:hover, .ag:hover, .al:hover {
  box-shadow: 0 12px 40px rgba(26,74,50,0.1) !important;
  transform: translateY(-3px) !important;
}


/* ════════════════════════
   RESPONSIVE MOBILE
   ════════════════════════ */
@media (max-width:768px){
  nav{padding:0.85rem 1.2rem}
  .nav-links{display:none}
  .nav-burger{display:flex}
  section{padding:3rem 1.2rem}
  .hero-inner{padding:6rem 1.2rem 5rem}
  .hero-stats{flex-direction:column}
  .hs{border-right:none;border-bottom:1px solid rgba(255,255,255,0.06);padding:1rem 1.2rem}
  .intro-band{padding:3rem 1.2rem}
  .intro-band-inner{grid-template-columns:1fr;gap:0.75rem}
  .intro-big{font-size:2.5rem}
  .heberg-grid{grid-template-columns:1fr!important}
  .hc{border-right:none;border-bottom:1px solid rgba(26,74,50,0.08)}
  .priv-banner{flex-direction:column;padding:2rem 1.5rem}
  #resa-options{grid-template-columns:1fr!important}
  .resa-grid{grid-template-columns:1fr 1fr!important}
  .resa-cards{grid-template-columns:1fr!important}
  .fr2{grid-template-columns:1fr!important}
  /* Events compare */
  [style*="grid-template-columns:1fr 1fr;gap:3px"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:1fr 1fr;gap:1.5rem"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:repeat(3,1fr);gap:1.5rem"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:repeat(3,1fr);gap:1rem"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important}
  .nat-grid{grid-template-columns:1fr!important;gap:2rem}
  .at-grid{grid-template-columns:1fr!important;gap:2rem}
  .contact-grid{grid-template-columns:1fr!important;gap:2rem}
  .temo-grid{grid-template-columns:1fr!important}
  .agenda-grid{grid-template-columns:1fr!important}
  .al-grid{grid-template-columns:1fr 1fr!important}
  .svc-grid{grid-template-columns:1fr 1fr!important}
  .galerie-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:180px 180px 180px!important}
  .gi.tall{grid-row:span 1!important}
  .ev-compare{flex-direction:column}
  /* Atelier */
  [style*="grid-template-columns:1fr 1fr;gap:5rem"]{display:flex!important;flex-direction:column!important;gap:2rem!important}
  [style*="grid-template-columns:1fr 1.4fr"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:1fr 1.2fr"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:repeat(3,1fr);gap:1px"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(4,1fr);gap:1px"]{grid-template-columns:1fr 1fr!important}
  /* Hero */
  h1.ht{font-size:clamp(3rem,14vw,5.5rem)!important}
  .hero-desc{max-width:100%}
  .hero-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero-btns{flex-wrap:wrap}
  /* Reservation */
  .resa-opt{padding:1.5rem 1.2rem}
  /* Events intro banner */
  [style*="display:flex;align-items:center;justify-content:space-between"]{flex-direction:column!important;align-items:flex-start!important}
  /* Atelier realisations grid */
  [style*="grid-template-columns:repeat(3,1fr);gap:1.5rem"]{grid-template-columns:1fr!important}
  [style*="grid-column:span 2"]{grid-column:span 1!important}
  /* Fred/Aurelie grid */
  .at-grid{grid-template-columns:1fr!important}
  /* Footer */
  .fi{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .flinks{gap:0.4rem 1rem}
  /* Nav mobile */
  .nav-mob a{font-size:1rem;padding:0.6rem 0}
}
@media(max-width:480px){
  .al-grid{grid-template-columns:1fr!important}
  .svc-grid{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(4,1fr);gap:1px"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(4,1fr);gap:0.75rem"]{grid-template-columns:1fr 1fr!important}
  .resa-grid{grid-template-columns:1fr!important}
  .hero-btns .btn{width:100%;text-align:center;justify-content:center}
}

/* ===== Bloc CSS #2 (extrait de pan_complet.html) ===== */
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 8px 32px rgba(212,232,53,0.45); transform: scale(1); }
  50%       { box-shadow: 0 12px 48px rgba(212,232,53,0.7); transform: scale(1.03); }
}

/* ===== Bloc CSS #3 (extrait de pan_complet.html) ===== */
.resa-section .lbl { color: #fff !important; opacity: 1 !important; }
.resa-section .st  { color: #fff !important; }

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 768px) {

  /* Nav */
  .nav-logo-sub { display: none; }
  .intro-logo-anim { width: 200px !important; }
  .intro-inner { grid-template-columns: 1fr !important; text-align: center; gap: 1.5rem !important; }

  /* Grilles 2 colonnes → 1 */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Grilles 3 colonnes → 1 */
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Grilles 4 colonnes → 2 */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Galeries photos mosaïque */
  div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
  }

  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* Hauteurs fixes → auto sur mobile */
  .resa-opt div[style*="height:340px"],
  div[style*="height:420px"],
  div[style*="height:380px"],
  div[style*="height:280px"] {
    height: 220px !important;
  }

  /* Filmstrips : réduire la hauteur des cartes */
  div[style*="height:340px;min-width:280px"],
  div[style*="height:420px;min-width:320px"],
  div[style*="height:380px;min-width:360px"] {
    height: 220px !important;
    min-width: 200px !important;
  }

  /* Sections padding */
  section, .container { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  div[style*="padding:0 2rem"] { padding-left: 1rem !important; padding-right: 1rem !important; }
  div[style*="max-width:1100px"] { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Titres */
  h2[style*="font-size:clamp"] { font-size: clamp(1.6rem, 7vw, 2.5rem) !important; }

  /* Footer */
  .fi { flex-direction: column !important; gap: 1.5rem !important; text-align: center !important; }
  .flinks { flex-direction: column !important; gap: 0.5rem !important; }

  /* Réservation options */
  #resa-options { grid-template-columns: 1fr !important; }

  /* Carte maps */
  div[style*="height:340px"] iframe { height: 260px !important; }

  /* Art section galerie */
  div[style*="grid-template-columns:1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
  }
  div[style*="grid-template-columns:1.4fr"] > div {
    height: 180px !important;
  }

  /* Logo intro */
  div[style*="width:520px"] { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }

  /* Bandeau suivez-nous */
  div[style*="gap:1.5rem;flex-wrap:wrap"] { flex-direction: column !important; align-items: center !important; }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Bloc CSS #4 (extrait de pan_complet.html) ===== */
.kb-slide { will-change: opacity; }
.kb-slide img { will-change: transform; }

.kb-slide:nth-child(1) { animation: kbf1 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(2) { animation: kbf2 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(3) { animation: kbf3 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(4) { animation: kbf4 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(5) { animation: kbf5 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(6) { animation: kbf6 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(7) { animation: kbf7 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(8) { animation: kbf8 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(9) { animation: kbf9 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(10) { animation: kbf10 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(11) { animation: kbf11 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(12) { animation: kbf12 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(13) { animation: kbf13 56s 0s ease-in-out infinite; }
.kb-slide:nth-child(14) { animation: kbf14 56s 0s ease-in-out infinite; }

@keyframes kbf1 {
  0%{opacity:1}
  4.46%{opacity:1}
  7.14%{opacity:0}
  97.32%{opacity:0}
  100%{opacity:1}
}
@keyframes kbf2 {
  0%{opacity:0}
  4.46%{opacity:0}
  7.14%{opacity:1}
  11.61%{opacity:1}
  14.29%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf3 {
  0%{opacity:0}
  11.61%{opacity:0}
  14.29%{opacity:1}
  18.75%{opacity:1}
  21.43%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf4 {
  0%{opacity:0}
  18.75%{opacity:0}
  21.43%{opacity:1}
  25.89%{opacity:1}
  28.57%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf5 {
  0%{opacity:0}
  25.89%{opacity:0}
  28.57%{opacity:1}
  33.04%{opacity:1}
  35.71%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf6 {
  0%{opacity:0}
  33.04%{opacity:0}
  35.71%{opacity:1}
  40.18%{opacity:1}
  42.86%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf7 {
  0%{opacity:0}
  40.18%{opacity:0}
  42.86%{opacity:1}
  47.32%{opacity:1}
  50.00%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf8 {
  0%{opacity:0}
  47.32%{opacity:0}
  50.00%{opacity:1}
  54.46%{opacity:1}
  57.14%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf9 {
  0%{opacity:0}
  54.46%{opacity:0}
  57.14%{opacity:1}
  61.61%{opacity:1}
  64.29%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf10 {
  0%{opacity:0}
  61.61%{opacity:0}
  64.29%{opacity:1}
  68.75%{opacity:1}
  71.43%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf11 {
  0%{opacity:0}
  68.75%{opacity:0}
  71.43%{opacity:1}
  75.89%{opacity:1}
  78.57%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf12 {
  0%{opacity:0}
  75.89%{opacity:0}
  78.57%{opacity:1}
  83.04%{opacity:1}
  85.71%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf13 {
  0%{opacity:0}
  83.04%{opacity:0}
  85.71%{opacity:1}
  90.18%{opacity:1}
  92.86%{opacity:0}
  100%{opacity:0}
}
@keyframes kbf14 {
  0%{opacity:0}
  90.18%{opacity:0}
  92.86%{opacity:1}
  97.32%{opacity:1}
  100%{opacity:0}
}

@keyframes kbzoom {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.06) translate(-1%,-0.5%); }
}
  100% { transform: scale(1.06) translate(-1%,-0.5%); }
}
  100% { transform: scale(1.06) translate(-1%,-0.5%); }
}
  100% { transform: scale(1.06) translate(-1%,-0.5%); }
}
  100% { transform: scale(1.06) translate(-1%,-0.5%); }
}

/* ===== Bloc CSS #5 (extrait de pan_complet.html) ===== */
.pan-pupil-only {
            animation: panPupilOnly 1.5s ease-in-out infinite;
          }
          @keyframes panPupilOnly {
            0%,100% { transform: translate(0px, 0px); }
            25%     { transform: translate(8px, -6px); }
            75%     { transform: translate(-6px, 6px); }
          }

/* ===== Bloc CSS #6 (extrait de pan_complet.html) ===== */
@keyframes natScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

/* ===== Bloc CSS #7 (extrait de pan_complet.html) ===== */
@keyframes bleufilm{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Bloc CSS #8 (extrait de pan_complet.html) ===== */
@keyframes vertfilm{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Bloc CSS #9 (extrait de pan_complet.html) ===== */
@keyframes rougefilm{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Bloc CSS #10 (extrait de pan_complet.html) ===== */
@keyframes filmscroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

/* ===== Bloc CSS #11 (extrait de pan_complet.html) ===== */
@keyframes percfilm{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Bloc CSS #12 (extrait de pan_complet.html) ===== */
.xtab{font-family:var(--B);font-size:0.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:1rem 0.5rem;border:none;background:transparent;color:var(--txm);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.xtab:hover{color:var(--g)}
.xtab.active{color:var(--g);border-bottom:2px solid var(--g);background:#fff}
.xtab-content{display:none}
.xtab-content.active{display:grid!important}
.xstat{transition:transform .2s,box-shadow .2s}
.xstat:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,74,50,0.1)}
@media(max-width:640px){
  .xtab-content{grid-template-columns:1fr!important}
  .xtab-content>div:last-child{display:none}
  [style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  .xtab{font-size:0.6rem;padding:0.75rem 0.25rem}
}

/* ===== Bloc CSS #13 (extrait de pan_complet.html) ===== */
.xfbtn,.rfbtn{font-family:var(--B);font-size:0.68rem;padding:6px 13px;border-radius:100px;border:1.5px solid rgba(26,61,43,0.2);background:#fff;color:var(--txm);cursor:pointer;transition:all .15s;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.xfbtn:hover,.rfbtn:hover{border-color:var(--g);color:var(--g)}
.xfbtn.active,.rfbtn.active{background:var(--g);border-color:var(--g);color:#e8d9a0}
.lccard,.rscard{border:1px solid rgba(26,61,43,0.12);border-radius:8px;padding:9px;margin-bottom:6px;cursor:pointer;transition:border-color .15s;background:#fff}
.lccard:hover,.rscard:hover{border-color:var(--gm)}
.lccard.sel,.rscard.sel{border:2px solid var(--gm)}
.lm,.rm{transition:opacity .2s}
.lm.hidden,.rm.hidden{opacity:0;pointer-events:none}
@media(max-width:640px){
  [style*="grid-template-columns:1fr 290px"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

.gift-marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
    .gift-track{display:flex;gap:1rem;width:max-content;animation:giftScroll 48s linear infinite}
    .gift-marquee:hover .gift-track{animation-play-state:paused}
    .gift-track img{height:340px;width:auto;border-radius:14px;object-fit:cover;display:block;box-shadow:0 8px 28px rgba(26,46,26,0.12);flex-shrink:0}
    @keyframes giftScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @media (prefers-reduced-motion: reduce){.gift-track{animation:none}}

@keyframes panArtMarquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .pan-art-track {
      display: flex;
      gap: 1.2rem;
      width: max-content;
      animation: panArtMarquee 70s linear infinite;
    }
    .pan-art-wrap:hover .pan-art-track { animation-play-state: paused; }

.pet-marquee{position:relative;overflow:hidden;margin-top:0.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
      .pet-track{display:flex;gap:14px;width:max-content;animation:petScroll 42s linear infinite}
      .pet-marquee:hover .pet-track{animation-play-state:paused}
      @keyframes petScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
      @media (prefers-reduced-motion: reduce){.pet-track{animation:none}}

.joie-section{background:linear-gradient(180deg,#FBF6EC 0%,#F3EAD8 100%);padding:5rem 0 5.5rem;overflow:hidden;position:relative}
  .joie-head{max-width:1100px;margin:0 auto 2.75rem;padding:0 2rem;text-align:center}
  .joie-album{position:relative;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
  .joie-track{display:flex;gap:26px;width:max-content;padding:1.5rem 2rem;animation:joiescroll 48s linear infinite}
  .joie-album:hover .joie-track{animation-play-state:paused}
  .joie-card{transform:rotate(var(--tilt));transition:transform .35s ease,box-shadow .35s ease}
  .joie-card:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 22px 48px rgba(40,30,20,0.3);z-index:2}
  @keyframes joiescroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.joie-track{animation:none;flex-wrap:wrap;justify-content:center}}

@keyframes panMarquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .pan-marquee-track {
          display: flex;
          gap: 0.7rem;
          width: max-content;
          animation: panMarquee 55s linear infinite;
        }
        .pan-marquee-wrap:hover .pan-marquee-track { animation-play-state: paused; }

@keyframes panMarqueeRev {
          0%   { transform: translateX(-50%); }
          100% { transform: translateX(0); }
        }
        .pan-coulisses-track {
          display: flex;
          gap: 0.7rem;
          width: max-content;
          animation: panMarqueeRev 65s linear infinite;
        }
        .pan-coulisses-wrap:hover .pan-coulisses-track { animation-play-state: paused; }

@keyframes panCardIn {
          0%   { opacity: 0; transform: translateY(24px) scale(0.96); }
          100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes panCardGlow {
          0%, 100% { box-shadow: 0 2px 10px rgba(29,74,50,0.06); border-color: rgba(29,74,50,0.06); }
          50%      { box-shadow: 0 8px 28px rgba(29,74,50,0.18); border-color: rgba(207,221,55,0.6); transform: translateY(-3px); }
        }
        .pan-temps-grid > div {
          opacity: 0;
          animation: panCardIn 0.7s ease-out forwards, panCardGlow 7s ease-in-out infinite;
          transition: transform 0.3s ease;
        }
        .pan-temps-grid > div:hover {
          transform: translateY(-5px) scale(1.03) !important;
          animation-play-state: paused, paused;
        }
        .pan-temps-grid > div:nth-child(1) { animation-delay: 0s, 0s; }
        .pan-temps-grid > div:nth-child(2) { animation-delay: 0.12s, 1s; }
        .pan-temps-grid > div:nth-child(3) { animation-delay: 0.24s, 2s; }
        .pan-temps-grid > div:nth-child(4) { animation-delay: 0.36s, 3s; }
        .pan-temps-grid > div:nth-child(5) { animation-delay: 0.48s, 4s; }
        .pan-temps-grid > div:nth-child(6) { animation-delay: 0.60s, 5s; }
        .pan-temps-grid > div:nth-child(7) { animation-delay: 0.72s, 6s; }

.sej-track{display:flex;gap:18px;width:max-content;padding:0.5rem 0;animation:sejscroll 50s linear infinite}
        .sej-album:hover .sej-track{animation-play-state:paused}
        @keyframes sejscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        @media(prefers-reduced-motion:reduce){.sej-track{animation:none;flex-wrap:wrap;justify-content:center}}