/* ==========================================================================
   Hôtel Le Sénat — Douala
   Feuille de style unique, partagée par toutes les pages.
   ========================================================================== */

:root{
  --nuit:#12241E;
  --vert:#1E3A31;
  --vert-clair:#3D5F52;
  --laiton:#BE8F4E;
  --laiton-clair:#DCC08C;
  --sable:#F5F3EE;
  --sable-creux:#E5E1D7;
  --brique:#8C3E2A;
  --blanc:#FFFFFF;

  --titre:"Marcellus",Georgia,serif;
  --texte:"Karla","Helvetica Neue",Arial,sans-serif;
  --marge:clamp(20px,5vw,80px);
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sable);color:var(--nuit);font-family:var(--texte);font-size:17px;line-height:1.68;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;margin:0;line-height:1.12}
h1{font-size:clamp(38px,6.4vw,80px)}
h2{font-size:clamp(29px,4.2vw,48px)}
h3{font-size:clamp(20px,2.2vw,26px)}
p{margin:0 0 1em;max-width:64ch}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}

.zone{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.section{padding:clamp(60px,8vw,118px) 0}
.section.serre{padding:clamp(44px,6vw,80px) 0}
.blanc{background:var(--blanc)}
.sombre{background:var(--nuit);color:var(--sable)}
.sombre h1,.sombre h2,.sombre h3,.sombre h4{color:var(--sable)}
.sombre .chapeau{color:rgba(245,243,238,.8)}
.sombre .surtitre{color:var(--laiton-clair)}
.foret{background:var(--vert);color:var(--sable)}
.foret h2,.foret h3{color:var(--sable)}
.foret .surtitre{color:var(--laiton-clair)}

/* ---------------- en-tête ---------------- */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--marge);
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
}
.entete.pose{background:var(--nuit);box-shadow:0 1px 0 rgba(190,143,78,.35);padding-top:10px;padding-bottom:10px}
.entete.opaque{background:var(--nuit)}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sable)}
.sceau{width:38px;height:38px;flex:none;border:1px solid var(--laiton);border-radius:50%;display:grid;place-items:center;font-family:var(--titre);font-size:17px;color:var(--laiton-clair)}
.marque-nom{font-family:var(--titre);font-size:19px;line-height:1.15}
.marque-nom small{display:block;font-family:var(--texte);font-size:10.5px;letter-spacing:.18em;color:rgba(245,243,238,.6)}
.menu{display:flex;align-items:center;gap:24px}
.menu a{color:rgba(245,243,238,.86);text-decoration:none;font-size:15px;padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a:focus-visible{color:var(--sable);border-bottom-color:var(--laiton)}
.menu a[aria-current="page"]{color:var(--sable);border-bottom-color:var(--laiton)}
.menu .appel{border:1px solid rgba(190,143,78,.7);border-radius:999px;padding:8px 18px;color:var(--laiton-clair)}
.menu .appel:hover{background:var(--laiton);border-color:var(--laiton);color:var(--nuit)}
.burger{display:none;background:none;border:0;color:var(--sable);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
@media(max-width:960px){
  .burger{display:block;position:relative;z-index:2}
  .menu{position:fixed;inset:0 0 0 auto;width:min(80vw,330px);background:var(--nuit);flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:0 32px;transform:translateX(100%);transition:transform .35s ease}
  .menu.ouvert{transform:none}
  .menu a{font-family:var(--titre);font-size:22px}
  .menu .appel{font-family:var(--texte);font-size:15px}
}

/* ---------------- bannière de page ---------------- */
.banniere{position:relative;color:var(--sable);display:flex;align-items:flex-end;overflow:hidden;min-height:clamp(340px,52vh,520px)}
.banniere-fond{position:absolute;inset:0}
.banniere-fond img{width:100%;height:100%;object-fit:cover}
.banniere-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,36,30,.78) 0%,rgba(18,36,30,.42) 45%,rgba(18,36,30,.9) 100%)}
.banniere .zone{position:relative;width:100%;padding-top:130px;padding-bottom:clamp(34px,5vw,60px)}
.banniere p{color:rgba(245,243,238,.85);max-width:52ch;margin:14px 0 0}

/* ---------------- accueil ---------------- */
.accueil{min-height:100svh}
.accueil h1{max-width:15ch;margin-bottom:18px}
.accueil h1 em{font-style:normal;color:var(--laiton-clair)}
.accueil-phrase{font-size:clamp(17px,1.9vw,20px);color:rgba(245,243,238,.87);max-width:48ch;margin-bottom:28px}
.accueil-actions{display:flex;flex-wrap:wrap;gap:12px}
.filet{width:64px;height:1px;background:var(--laiton);margin-bottom:24px}

/* ---------------- boutons ---------------- */
.btn{display:inline-block;text-decoration:none;font-size:15.5px;font-weight:500;padding:14px 28px;border-radius:2px;border:1px solid var(--laiton);background:var(--laiton);color:var(--nuit);cursor:pointer;font-family:var(--texte);transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover,.btn:focus-visible{background:var(--laiton-clair);border-color:var(--laiton-clair)}
.btn.ligne{background:transparent;color:var(--sable);border-color:rgba(245,243,238,.55)}
.btn.ligne:hover,.btn.ligne:focus-visible{background:var(--sable);color:var(--nuit);border-color:var(--sable)}
.btn.encre{background:var(--nuit);border-color:var(--nuit);color:var(--sable)}
.btn.encre:hover{background:var(--vert);border-color:var(--vert)}

/* ---------------- barre de réservation ---------------- */
.reserv{background:var(--nuit);color:var(--sable);border-top:1px solid rgba(190,143,78,.3)}
.reserv-grille{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:18px;align-items:end;padding:26px 0}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:12.5px;letter-spacing:.1em;color:var(--laiton-clair)}
.champ input,.champ select,.champ textarea{background:transparent;border:0;border-bottom:1px solid rgba(245,243,238,.35);color:var(--sable);font-family:var(--texte);font-size:16px;padding:8px 2px;border-radius:0}
.champ select option{color:#000}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-bottom-color:var(--laiton)}
@media(max-width:960px){.reserv-grille{grid-template-columns:1fr 1fr}.reserv-grille .btn{grid-column:1/-1}}
@media(max-width:520px){.reserv-grille{grid-template-columns:1fr}}

/* ---------------- éléments de texte ---------------- */
.surtitre{font-family:var(--titre);font-size:15px;color:var(--brique);margin-bottom:10px;display:block}
.chapeau{font-size:clamp(18px,2vw,21px);color:var(--vert-clair);max-width:56ch}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.duo + .duo{margin-top:clamp(48px,7vw,96px)}
.duo.inverse .duo-image{order:2}
@media(max-width:900px){.duo,.duo.inverse{grid-template-columns:1fr}.duo.inverse .duo-image{order:0}}
.duo-image{position:relative;margin:0}
.duo-image img{width:100%;height:100%;max-height:600px;object-fit:cover}
.duo-image::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--laiton);z-index:-1}
.duo-image figcaption{font-size:13.5px;color:var(--vert-clair);margin-top:14px}
.sombre .duo-image figcaption,.foret .duo-image figcaption{color:rgba(245,243,238,.6)}

.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;border-top:1px solid var(--sable-creux);padding-top:26px}
.chiffres div span{font-family:var(--titre);font-size:clamp(23px,3vw,33px);display:block;color:var(--vert)}
.chiffres div p{font-size:14px;color:var(--vert-clair);margin:4px 0 0}
@media(max-width:700px){.chiffres{grid-template-columns:1fr 1fr}}

/* ---------------- fiches / listes ---------------- */
.equip{list-style:none;margin:6px 0 22px;padding:0;font-size:15.5px;max-width:40ch}
.equip li{padding:9px 0;border-top:1px solid var(--sable-creux);display:flex;justify-content:space-between;gap:16px}
.equip li b{font-weight:500}
.equip li span{color:var(--vert-clair);text-align:right}
.sombre .equip li,.foret .equip li{border-top-color:rgba(245,243,238,.18)}
.sombre .equip li span,.foret .equip li span{color:var(--laiton-clair)}

/* ---------------- cartes chambres ---------------- */
.cartes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:44px}
@media(max-width:900px){.cartes{grid-template-columns:1fr}}
.carte{display:flex;flex-direction:column;background:var(--sable)}
.blanc .carte{background:var(--sable)}
.carte-photo{position:relative;aspect-ratio:4/3;overflow:hidden}
.carte-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.carte:hover .carte-photo img{transform:scale(1.04)}
.carte-prix{position:absolute;left:0;bottom:0;background:var(--nuit);color:var(--laiton-clair);font-family:var(--titre);font-size:19px;padding:10px 18px}
.carte-corps{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.carte-corps h3{margin-bottom:10px}
.carte-corps p{font-size:15.5px;color:var(--vert-clair)}
.carte .btn{align-self:flex-start;margin-top:auto}

/* ---------------- vignettes ---------------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px);margin-top:44px}
@media(max-width:880px){.trio{grid-template-columns:1fr}}
.vignette{position:relative;aspect-ratio:3/4;overflow:hidden;margin:0}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;color:#fff;background:linear-gradient(180deg,rgba(18,36,30,0),rgba(18,36,30,.9));font-family:var(--titre);font-size:21px}
.vignette figcaption em{display:block;font-family:var(--texte);font-style:normal;font-size:14px;color:rgba(255,255,255,.78);margin-top:4px}

/* ---------------- horaires ---------------- */
.horaires{list-style:none;padding:0;margin:22px 0 28px;max-width:34ch}
.horaires li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(245,243,238,.18);font-size:15.5px}
.horaires li span{color:var(--laiton-clair)}

/* ---------------- carte / menu du restaurant ---------------- */
.carte-mets{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,70px);margin-top:36px}
@media(max-width:820px){.carte-mets{grid-template-columns:1fr}}
.mets{padding:15px 0;border-top:1px solid rgba(245,243,238,.16);display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.mets b{font-family:var(--titre);font-size:19px;font-weight:400}
.mets em{display:block;font-style:normal;font-size:14px;color:rgba(245,243,238,.6);margin-top:2px;max-width:36ch}
.mets .prix{font-family:var(--titre);color:var(--laiton-clair);white-space:nowrap;font-size:17px}

/* ---------------- formats de salle ---------------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px}
.format{padding:24px 22px 24px 0;border-top:2px solid var(--nuit)}
.format b{font-family:var(--titre);font-size:26px;display:block;margin-bottom:4px}
.format p{font-size:15px;color:var(--vert-clair);margin:0}
@media(max-width:700px){.formats{grid-template-columns:1fr}}

/* ---------------- services ---------------- */
.liste-services{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,4vw,56px);margin-top:34px;list-style:none;padding:0}
.liste-services li{padding:16px 0;border-bottom:1px solid rgba(245,243,238,.16);font-size:16px}
@media(max-width:900px){.liste-services{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.liste-services{grid-template-columns:1fr}}

/* ---------------- galerie ---------------- */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.galerie .large{grid-column:span 2;grid-row:span 2}
@media(max-width:700px){.galerie{grid-template-columns:1fr 1fr}}

/* ---------------- vidéos ---------------- */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:38px;max-width:820px}
@media(max-width:700px){.videos{grid-template-columns:1fr}}
.video-cadre{position:relative;margin:0;background:#000}
.video-cadre video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.video-cadre figcaption{font-size:14px;color:rgba(245,243,238,.7);margin-top:12px}

/* ---------------- contact ---------------- */
.coord{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:36px}
@media(max-width:900px){.coord{grid-template-columns:1fr}}
.coord dl{margin:0}
.coord dt{font-size:12.5px;letter-spacing:.12em;color:var(--brique);margin-top:22px}
.coord dd{margin:4px 0 0;font-family:var(--titre);font-size:clamp(19px,2.2vw,24px)}
.coord dd a{text-decoration:none;border-bottom:1px solid var(--sable-creux)}
.coord dd a:hover{border-bottom-color:var(--laiton)}
.carte-plan{border:1px solid var(--sable-creux);min-height:320px;overflow:hidden}
.carte-plan iframe{width:100%;height:100%;border:0;display:block;min-height:320px}

.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;max-width:720px}
.formulaire .large{grid-column:1/-1}
.formulaire .champ label{color:var(--brique)}
.formulaire .champ input,.formulaire .champ select,.formulaire .champ textarea{color:var(--nuit);border-bottom-color:var(--sable-creux)}
.formulaire textarea{resize:vertical;min-height:110px}
@media(max-width:640px){.formulaire{grid-template-columns:1fr}}

/* ---------------- questions ---------------- */
.faq{margin-top:34px;max-width:70ch}
.faq details{border-top:1px solid var(--sable-creux);padding:6px 0}
.faq summary{cursor:pointer;font-family:var(--titre);font-size:20px;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--laiton);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--vert-clair)}

/* ---------------- pied ---------------- */
.pied{background:var(--nuit);color:rgba(245,243,238,.7);padding:56px 0 34px;font-size:14.5px}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
@media(max-width:820px){.pied-grille{grid-template-columns:1fr}}
.pied h4{color:var(--sable);font-size:17px;margin-bottom:12px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--laiton-clair)}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:5px 0}
.pied-bas{margin-top:38px;padding-top:18px;border-top:1px solid rgba(245,243,238,.14);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px}

/* WhatsApp flottant */
.flottant{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--brique);color:#fff;text-decoration:none;padding:14px 20px;border-radius:999px;font-size:15px;font-weight:500;box-shadow:0 8px 24px rgba(18,36,30,.28)}
.flottant:hover{background:var(--nuit)}

/* apparition unique au chargement */
.lever{opacity:0;transform:translateY(16px);animation:lever .95s cubic-bezier(.2,.7,.3,1) forwards}
.lever.d1{animation-delay:.1s}.lever.d2{animation-delay:.22s}.lever.d3{animation-delay:.34s}
@keyframes lever{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lever{animation:none;opacity:1;transform:none}
  *{transition:none!important}
}