:root {
  --bg:#0d0d18;
  --panel:#1a1727;
  --gold:#e8bd76;
  --lav:#d7b8ff;
  --text:#f5f0e9;
  --muted:#c4bacb
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  line-height:1.65
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

.container {
  width:min(1160px,calc(100% - 40px));
  margin:auto
}

.header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:5;
  border-bottom:1px solid #ffffff24;
  background:#0b0918a8;
  backdrop-filter:blur(14px)
}

.nav {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  font-family:Cinzel,serif;
  color:var(--gold);
  font-size:1.15rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.04em
}

.brand small {
  display:block;
  color:#e6d9e5;
  font-family:'DM Sans',sans-serif;
  font-size:.65rem;
  letter-spacing:.23em;
  font-weight:600
}

.links {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:.89rem
}

.links a:hover,.footer a:hover {
  color:var(--gold)
}

.menu-btn {
  display:none;
  background:transparent;
  color:white;
  border:1px solid #ffffff55;
  border-radius:8px;
  padding:8px 12px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid var(--gold);
  padding:13px 24px;
  border-radius:5px;
  font-weight:700;
  font-size:.92rem;
  transition:transform .2s,background .2s
}

.btn:hover {
  transform:translateY(-3px)
}

.btn.primary {
  background:var(--gold);
  color:#201527
}

.btn.ghost {
  background:#0b091b55;
  color:white
}

.hero {
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(90deg,#0c0b18ed 0%,#0c0b18bf 43%,#0c0b1844 100%),linear-gradient(0deg,#0d0d18 0%,transparent 35%),url('../../images/accueil/banner2.jpg') center/cover
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 80% 30%,#a25ed32e,transparent 42%);
  pointer-events:none
}

.hero-inner {
  position:relative;
  z-index:1;
  padding-top:125px;
  padding-bottom:100px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.23em;
  color:var(--gold);
  font-weight:700;
  font-size:.79rem
}

.hero h1,h2,h3 {
  font-family:Cinzel,serif
}

.hero h1 {
  font-size:clamp(3rem,7.2vw,6.2rem);
  line-height:1.1;
  margin:18px 0 20px;
  max-width:850px;
  text-shadow:0 5px 40px #0008
}

.hero h1 em {
  color:var(--gold);
  font-style:normal
}

.hero p {
  font-size:1.17rem;
  max-width:610px;
  color:#e9e1e9
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px
}

.date-line {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:38px;
  color:#f6e4ca;
  font-weight:700
}

.date-line span {
  border-left:2px solid var(--gold);
  padding-left:14px
}

.section {
  padding:95px 0
}

.section-title {
  text-align:center;
  max-width:780px;
  margin:0 auto 48px
}

.section-title h2 {
  font-size:clamp(1.8rem,3.5vw,3rem);
  margin:12px 0;
  color:#fff
}

.section-title p {
  color:var(--muted);
  margin:0
}

.intro {
  background:radial-gradient(circle at 50% 0,#332042 0,transparent 55%),var(--bg)
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}

.intro-copy h2 {
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:1.25
}

.intro-copy p {
  color:var(--muted)
}

.illustration {
  min-height:420px;
  border-radius:180px 180px 14px 14px;
  background:linear-gradient(0deg,#0d0d18a6,transparent),url('../../images/accueil/pic01.jpg') center/cover;
  border:1px solid #d6a96c66;
  box-shadow:0 0 65px #a45bba20
}

.experiences {
  background:#14111f
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.card {
  position:relative;
  min-height:265px;
  padding:28px;
  border:1px solid #c69c6840;
  border-radius:12px;
  background:linear-gradient(145deg,#33283b,#191726);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  overflow:hidden;
  transition:transform .2s,border-color .2s
}

.card:hover {
  transform:translateY(-5px);
  border-color:var(--gold)
}

.card:before {
  content:'✦';
  position:absolute;
  right:22px;
  top:12px;
  color:#e8bd7666;
  font-size:4.5rem
}

.card .num {
  color:var(--gold);
  font-size:.8rem;
  letter-spacing:.16em;
  font-weight:700
}

.card h3 {
  font-size:1.25rem;
  margin:12px 0 6px
}

.card p {
  margin:0;
  color:var(--muted);
  font-size:.91rem
}

.card .arrow {
  color:var(--gold);
  margin-top:18px
}

.story {
  background:radial-gradient(circle at 80% 50%,#3c2448,transparent 50%),#0d0d18
}

.story-box {
  max-width:840px;
  margin:auto;
  text-align:center
}

.story-box h2 {
  font-size:clamp(1.8rem,3.5vw,3rem)
}

.story-box p {
  color:var(--muted);
  font-size:1.05rem
}

.cta {
  padding:75px 0;
  background:linear-gradient(115deg,#3c2448,#241c32);
  border-block:1px solid #e8bd7640
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.cta h2 {
  font-size:clamp(1.7rem,3vw,2.5rem);
  margin:0 0 8px
}

.cta p {
  margin:0;
  color:#ded0e2
}

.footer {
  padding:35px 0;
  color:#bdb2c5;
  font-size:.85rem
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

.footer a {
  margin-left:15px
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px
}

@media(max-width:850px) {
  .menu-btn {
    display:block
  }

  .links {
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#171222;
    padding:22px;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    border-bottom:1px solid #ffffff33
  }

  .links.open {
    display:flex
  }

  .links .btn {
    align-self:flex-start
  }

  .intro-grid {
    grid-template-columns:1fr
  }

  .illustration {
    min-height:340px
  }

  .cards {
    grid-template-columns:repeat(2,1fr)
  }

  .hero {
    min-height:710px
  }

  .cta-inner {
    align-items:flex-start;
    flex-direction:column
  }

}

@media(max-width:580px) {
  .cards {
    grid-template-columns:1fr
  }

  .section {
    padding:65px 0
  }

  .hero {
    min-height:680px
  }

  .hero-inner {
    padding-top:155px
  }

  .hero h1 {
    font-size:3.1rem
  }

  .date-line {
    flex-direction:column;
    gap:8px
  }

  .footer a {
    margin-left:0;
    margin-right:14px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

/* Pages intérieures : identité partagée */
body.interior {
  background:#0d0d18;
  color:#f5f0e9
}

.interior .header {
  position:relative
}

.interior main {
  min-height:65vh
}

.page-hero {
  padding:85px 20px 70px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%,#573261 0%,#21172e 48%,#0d0d18 100%);
  border-bottom:1px solid #e8bd763d
}

.page-hero .eyebrow {
  margin-bottom:15px
}

.page-hero h1 {
  font-family:Cinzel,serif;
  font-size:clamp(2rem,5vw,3.8rem);
  line-height:1.2;
  color:#fff;
  margin:0 auto 15px;
  max-width:950px
}

.page-hero p {
  color:#e8bd76;
  margin:8px auto;
  max-width:780px
}

.page-content {
  max-width:1100px;
  margin:auto;
  padding:65px 24px 100px
}

.page-content .wrapper {
  padding:0;
  background:none!important
}

.page-content .inner {
  max-width:100%;
  margin:0 auto
}

.page-content h2,.page-content h3,.page-content h4 {
  font-family:Cinzel,serif;
  color:#e8bd76;
  line-height:1.3;
  letter-spacing:normal;
  text-transform:none
}

.page-content h2 {
  font-size:clamp(1.55rem,3vw,2.25rem)
}

.page-content h3 {
  font-size:1.45rem
}

.page-content p,.page-content li {
  color:#e6dce8;
  line-height:1.85
}

.page-content a {
  color:#f3ca88;
  text-decoration:underline;
  text-underline-offset:3px
}

.page-content a:hover {
  color:white
}

.page-content strong,.page-content [style*="color"] {
  color:inherit!important
}

.page-content h2 strong,.page-content h3 strong {
  color:#e8bd76!important
}

.page-content blockquote {
  border-left:3px solid #e8bd76;
  background:#211b2e;
  padding:22px 28px;
  margin:25px 0;
  border-radius:0 12px 12px 0
}

.page-content table {
  width:100%!important;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:25px auto;
  background:#1b1727;
  border:1px solid #d7b77b44;
  border-radius:12px;
  overflow:hidden
}

.page-content td,.page-content th {
  padding:17px 20px;
  border-bottom:1px solid #d7b77b30;
  color:#f0e6ed;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere
}

.page-content tr:last-child td {
  border-bottom:0
}

.page-content td:first-child {
  color:#e8bd76;
  font-weight:600
}

.page-content img {
  max-width:100%;
  height:auto;
  border-radius:10px
}

.page-content .image.left {
  float:left;
  width:min(40%,320px);
  margin:5px 25px 18px 0
}

.page-content .image.left img {
  width:100%
}

.page-content .row.uniform {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
  margin:35px 0
}

.page-content .row.uniform > div {
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important
}

.page-content .image.fit {
  display:block
}

.page-content .image.fit img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid #d7b77b40;
  transition:transform .2s
}

.page-content .image.fit img:hover {
  transform:scale(1.025)
}

.page-content .align-center {
  text-align:center
}

.page-content hr {
  border:0;
  border-top:1px solid #e8bd7644;
  margin:40px 0
}

.page-content ul,.page-content ol {
  padding-left:25px
}

.page-content .button {
  display:inline-block;
  background:#e8bd76;
  color:#201527;
  padding:12px 22px;
  border-radius:6px;
  text-decoration:none
}

.page-content [align="center"] {
  text-align:center
}

.page-content .box {
  clear:both
}

.page-content:after {
  content:"";
  display:block;
  clear:both
}

a:focus-visible {
  outline:3px solid #e8bd76;
  outline-offset:4px
}

@media(max-width:700px) {
  .page-hero {
    padding:65px 18px 55px
  }

  .page-content {
    padding:42px 18px 75px
  }

  .page-content .row.uniform {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .page-content .image.left {
    float:none;
    width:100%;
    margin:0 0 20px
  }

  .page-content td,.page-content th {
    padding:12px
  }

  .page-content blockquote {
    padding:16px
  }

}

@media(max-width:430px) {
  .page-content .row.uniform {
    grid-template-columns:1fr
  }

}



/* ==========================================
   IMAGE DE FOND - PAGE PROGRAMME
   ========================================== */

.page-hero-programme {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/programme2017/feu1.jpg");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}



.page-hero-guinguette {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/repas/sang.jpg");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-hero-tarifs {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/contact/acces.jpg");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-hero-groupe {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/groupes/convivencia1.JPG");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-hero-enfant {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/enfant/enfant1.jpg");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-hero-sentier {
    background-image:
        linear-gradient(
            rgba(12, 8, 28, 0.55),
            rgba(12, 8, 28, 0.80)
        ),
        url("../../images/sentier/banner2jpg.jpg");
	
	border: none;
    box-shadow: none;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}