/* ════════════════════════════════════════════════════════════
   ZONE DE CONFIGURATION — modifiez uniquement cette section
   ════════════════════════════════════════════════════════════ */
:root {
  --color-bg-light:   #f7f5f2;
  --color-bg-mid:     #ffffff;
  --color-bg-dark:    #213830;
  --color-bg-hero:    #324c40;
  --color-accent:     #324c40;
  --color-accent-lt:  #89702a;
  --color-text-dark:  #a8b8a9;
  --color-text-mid:   #4d4742;
  --color-text-muted: #cbb49f;
  --color-border:     rgba(61,50,40,0.1);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --max-width:    1100px;
  --page-padding: clamp(20px, 5vw, 64px);
  /* Photos — remplacez none par ex: url('../images/photos/hero.jpg') */
  --hero-bg-image:   none;
  --photo-doudou:    url('../images/photos/doudou.jpg');
  --photo-papangue:  url('../images/photos/papangue.jpg');
  --photo-tuit-tuit: url('../images/photos/tuit-tuit.jpg');
  --photo-dina-sd:   url('../images/photos/dina-sd.jpg');
  --photo-hermitage:    url('../images/photos/hermitage.jpg');
}
/* ════════════════════════════════════════════════════════════
   FIN ZONE DE CONFIGURATION
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
body{font-family:var(--font-sans);color:var(--color-text-dark);background:var(--color-bg-light);line-height:1.7;-webkit-font-smoothing:antialiased}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:var(--color-bg-dark);display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-padding);height:64px;border-bottom:.5px solid rgba(255,255,255,.08)}
.header-brand{font-family:var(--font-serif);font-size:19px;font-weight:400;color:var(--color-bg-light);letter-spacing:.05em;white-space:nowrap;flex-shrink:0}
.header-brand em{color:var(--color-accent-lt);font-style:italic}
nav{display:flex;align-items:center;gap:24px}
nav a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .2s;white-space:nowrap}
nav a:hover,nav a.active{color:var(--color-accent-lt)}
.nav-cta{background:var(--color-accent)!important;color:var(--color-bg-dark)!important;font-weight:500!important;padding:8px 18px!important;border-radius:2px!important;font-size:11px!important;transition:background .2s!important}
.nav-cta:hover{background:var(--color-accent-lt)!important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--color-bg-light);font-size:22px;padding:4px}

/* HERO */
#hero{background-color:var(--color-bg-hero);background-image:var(--hero-bg-image);background-size:cover;background-position:center;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px var(--page-padding);position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(184,149,106,.12) 0%,transparent 65%);pointer-events:none}
.hero-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-lt);margin-bottom:28px;opacity:.85}
.hero-title{font-family:var(--font-serif);font-size:clamp(56px,12vw,120px);font-weight:300;color:var(--color-bg-light);line-height:.9;margin-bottom:36px}
.hero-title em{display:block;font-style:italic;color:var(--color-accent-lt)}
.hero-sub{font-family:var(--font-serif);font-size:clamp(17px,2.5vw,23px);font-weight:300;font-style:italic;color:rgba(253,250,245,.6);max-width:480px;line-height:1.55;margin-bottom:60px}
.hero-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:10px;color:rgba(253,250,245,.35);font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:none;border:none;font-family:var(--font-sans);transition:color .2s}
.hero-scroll:hover{color:var(--color-accent-lt)}
.hero-scroll::after{content:'';display:block;width:1px;height:44px;background:currentColor}

/* INTRO */
#intro{background:var(--color-bg-light);padding:100px var(--page-padding);text-align:center}
.intro-inner{max-width:620px;margin:0 auto}
.intro-text{font-family:var(--font-serif);font-size:clamp(22px,4vw,36px);font-weight:300;line-height:1.45;color:var(--color-text-dark);margin-bottom:24px}
.intro-divider{width:36px;height:1px;background:var(--color-accent-lt);margin:0 auto 24px}
.intro-question{font-family:var(--font-serif);font-size:clamp(16px,2vw,20px);font-style:italic;color:var(--color-accent)}

/* PHOTO BANNER */
.hotel-photo-banner{width:100%;height:380px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.hotel-photo-banner.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--color-bg-mid);border-top:.5px dashed var(--color-accent-lt);border-bottom:.5px dashed var(--color-accent-lt)}
.hotel-photo-banner.placeholder .ph-icon{font-size:36px;opacity:.25}
.hotel-photo-banner.placeholder .ph-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}
.hotel-photo-banner.placeholder .ph-dims{font-size:11px;color:var(--color-accent-lt);font-family:var(--font-serif);font-style:italic}
.hotel-photo-banner:not(.placeholder)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,rgba(30,22,15,.45),transparent)}
#doudou    .hotel-photo-banner:not(.placeholder){background-image:var(--photo-doudou)}
#papangue  .hotel-photo-banner:not(.placeholder){background-image:var(--photo-papangue)}
#tuit-tuit .hotel-photo-banner:not(.placeholder){background-image:var(--photo-tuit-tuit)}
#dina-sd   .hotel-photo-banner:not(.placeholder){background-image:var(--photo-dina-sd)}
#hermitage .hotel-photo-banner:not(.placeholder){background-image:var(--photo-hermitage)}

/* HOTEL SECTIONS */
.hotel-section.bg-cream{background:var(--color-bg-light)}
.hotel-section.bg-sand{background:var(--color-bg-mid)}
.hotel-content{padding:64px var(--page-padding)}
.hotel-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:270px 1fr;gap:64px;align-items:start}
.hotel-info{position:sticky;top:88px}
.hotel-logo-wrap{margin-bottom:24px;min-height:64px;display:flex;align-items:center}
.hotel-logo-wrap img{max-height:64px;max-width:180px;width:auto;object-fit:contain;object-position:left center}
.hotel-logo-placeholder{display:flex;align-items:center;justify-content:center;width:160px;height:52px;border:1px dashed var(--color-accent-lt);border-radius:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.hotel-number{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);margin-bottom:10px}
.hotel-name{font-family:var(--font-serif);font-size:clamp(28px,3.5vw,40px);font-weight:400;line-height:1.1;color:var(--color-text-dark);margin-bottom:20px}
.hotel-name em{font-style:italic;color:var(--color-accent)}
.hotel-divider{width:28px;height:1px;background:var(--color-accent-lt);margin-bottom:20px}
.hotel-desc{font-size:14px;color:var(--color-text-mid);line-height:1.85;margin-bottom:28px}
.hotel-address{font-size:12.5px;color:var(--color-text-muted);line-height:1.8;padding-top:18px;border-top:.5px solid var(--color-border);margin-bottom:24px}
.hotel-address a{color:var(--color-accent)}
.hotel-address a:hover{text-decoration:underline}
.hotel-cta{display:inline-block;background:var(--color-text-dark);color:var(--color-bg-light);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 24px;border-radius:2px;transition:background .2s,color .2s}
.hotel-cta:hover{background:var(--color-accent);color:var(--color-text-dark)}
.hotel-treatments{display:flex;flex-direction:column;gap:10px}

/* ACCORDION */
.category{border:.5px solid var(--color-border);border-radius:4px;overflow:hidden}
.bg-sand  .category{background:var(--color-bg-light)}
.bg-cream .category{background:var(--color-bg-mid)}
.category summary{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;cursor:pointer;list-style:none;user-select:none;transition:background .15s}
.category summary::-webkit-details-marker{display:none}
.category summary:hover{background:rgba(184,149,106,.06)}
.cat-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--color-text-dark)}
.cat-chevron{font-size:12px;color:var(--color-accent);transition:transform .22s;flex-shrink:0;margin-left:12px}
.category[open] .cat-chevron{transform:rotate(180deg)}
.cat-body{display:flex;flex-direction:column;border-top:.5px solid var(--color-border)}

/* TREATMENTS */
.treatment{padding:20px 22px;border-bottom:.5px solid var(--color-border)}
.treatment:last-child{border-bottom:none}
.t-header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:3px}
.t-name{font-family:var(--font-serif);font-size:18px;font-weight:500;color:var(--color-text-dark);line-height:1.2}
.t-price{font-family:var(--font-serif);font-size:17px;color:var(--color-accent);white-space:nowrap;flex-shrink:0}
.t-duration{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px}
.t-desc{font-size:13.5px;color:var(--color-text-mid);line-height:1.75;margin-bottom:6px}
.t-tagline{display:block;font-family:var(--font-serif);font-size:13.5px;font-style:italic;color:var(--color-accent)}
.t-note{display:block;font-size:12px;color:var(--color-text-muted);font-style:italic;margin-top:5px}
.price-list{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:0 22px 20px}
.pl-item{font-size:13.5px;color:var(--color-text-mid);padding:4px 0}
.pl-price{font-size:13.5px;color:var(--color-accent);font-family:var(--font-serif);text-align:right;padding:4px 0;white-space:nowrap}
.pl-section{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);padding:14px 0 6px;border-bottom:.5px solid var(--color-border);margin-bottom:2px}
.pl-section:first-child{padding-top:4px}
.cat-intro{padding:16px 22px 4px;font-size:13.5px;color:var(--color-text-mid);line-height:1.75}
.menu-placeholder{background:rgba(61,50,40,.04);border:.5px dashed var(--color-accent-lt);border-radius:4px;padding:48px 36px;text-align:center}
.menu-placeholder p{font-family:var(--font-serif);font-size:20px;font-style:italic;font-weight:300;color:var(--color-text-mid);line-height:1.6;margin-bottom:24px;max-width:380px;margin-left:auto;margin-right:auto}
.menu-placeholder a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);border-bottom:.5px solid var(--color-accent-lt);padding-bottom:2px}

/* OFFRIR */
#offrir{background:var(--color-bg-dark);padding:100px var(--page-padding);text-align:center}
.gift-inner{max-width:580px;margin:0 auto}
.gift-eyebrow{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-lt);margin-bottom:18px;opacity:.8}
.gift-title{font-family:var(--font-serif);font-size:clamp(34px,6vw,56px);font-weight:300;color:var(--color-bg-light);line-height:1.15;margin-bottom:18px}
.gift-title em{font-style:italic;color:var(--color-accent-lt)}
.gift-desc{font-family:var(--font-serif);font-size:clamp(15px,2vw,18px);font-style:italic;color:rgba(253,250,245,.6);line-height:1.7;margin-bottom:40px}
.gift-cta{display:inline-block;background:var(--color-accent);color:var(--color-text-dark);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:16px 40px;border-radius:2px;transition:background .2s}
.gift-cta:hover{background:var(--color-accent-lt)}
/* Grille boutons bons cadeaux */
.gift-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.gift-btn {
  display: block;
  border: 0.5px solid rgba(212,180,138,0.4);
  border-radius: 3px;
  padding: 16px 20px;
  text-align: center;
  transition: all 0.2s;
  background: rgba(255,255,255,0.04);
}

.gift-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.gift-btn-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-bg-light);
  margin-bottom: 6px;
  line-height: 1.2;
}

.gift-btn-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-lt);
  transition: color 0.2s;
}

.gift-btn:hover .gift-btn-label {
  color: var(--color-bg-dark);
}

.gift-btn:hover .gift-btn-name {
  color: var(--color-bg-dark);
}

/* Le 5e bouton centré si nombre impair */
.gift-buttons .gift-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 260px;
  margin: 0 auto;
}
/* CONTACT */
#contact{background:var(--color-bg-light);padding:80px var(--page-padding)}
.contact-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-eyebrow{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px}
.contact-title{font-family:var(--font-serif);font-size:clamp(28px,4vw,46px);font-weight:400;color:var(--color-text-dark);line-height:1.2;margin-bottom:18px}
.contact-title em{font-style:italic;color:var(--color-accent)}
.contact-text p{font-size:14px;color:var(--color-text-mid);line-height:1.8}
.contact-box{background:var(--color-bg-mid);border:.5px solid var(--color-border);border-radius:4px;padding:36px 32px}
.contact-box-label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:18px}
.contact-email{display:block;font-family:var(--font-serif);font-size:clamp(18px,2.5vw,24px);color:var(--color-text-dark);margin-bottom:20px;padding-bottom:20px;border-bottom:.5px solid var(--color-border);transition:color .2s}
.contact-email:hover{color:var(--color-accent)}
.contact-box p{font-size:13px;color:var(--color-text-muted);line-height:1.75;margin-bottom:22px}
.contact-btn{display:inline-block;background:var(--color-accent);color:var(--color-text-dark);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:13px 28px;border-radius:2px;transition:background .2s}
.contact-btn:hover{background:var(--color-accent-lt)}

/* FOOTER */
footer{background:var(--color-bg-dark);padding:64px var(--page-padding) 32px}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.footer-brand{font-family:var(--font-serif);font-size:24px;color:var(--color-bg-light);margin-bottom:4px}
.footer-brand em{font-style:italic;color:var(--color-accent-lt)}
.footer-tag{font-size:12px;color:rgba(253,250,245,.35);letter-spacing:.06em;margin-bottom:48px}
/* Logo Groupe dans le footer */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.footer-groupe-logo {
  max-height: 56px;
  width: auto;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.footer-hotels{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:32px 20px;padding-top:36px;border-top:.5px solid rgba(255,255,255,.08);margin-bottom:40px}
.footer-hotel h4{font-family:var(--font-serif);font-size:15px;font-weight:400;color:var(--color-bg-light);margin-bottom:6px}
.footer-hotel p{font-size:12px;color:rgba(253,250,245,.4);line-height:1.75}
.footer-hotel a{color:rgba(212,180,138,.7);transition:color .2s}
.footer-hotel a:hover{color:var(--color-accent-lt)}
.footer-bottom{border-top:.5px solid rgba(255,255,255,.07);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:11px;color:rgba(253,250,245,.25)}

/* RESPONSIVE */
@media(max-width:920px){
  .hotel-inner{grid-template-columns:1fr;gap:36px}
  .hotel-info{position:static}
  .contact-inner{grid-template-columns:1fr;gap:36px}
  .hotel-photo-banner{height:260px}
  nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--color-bg-dark);flex-direction:column;align-items:flex-start;padding:20px var(--page-padding);gap:14px;border-bottom:.5px solid rgba(255,255,255,.08)}
  nav.open{display:flex}
  nav a{font-size:13px}
  .nav-toggle{display:block}
}
@media(max-width:580px){
  .footer-hotels{grid-template-columns:1fr 1fr}
  .hotel-photo-banner{height:200px}
  .t-header{flex-wrap:wrap;gap:4px}
}