/* ============================================================================
   HOTEL TERANGA PRESTIGE — Design tokens
   Palette inspirée du crépuscule sur la Corniche de Dakar :
   nuit indigo profonde, sable chaud, or filigrane, rouille (jamais #D97757)
   Typo : Fraunces (display, caractère) + Work Sans (texte) + Space Mono (data/prix)
============================================================================ */
:root{
  --nuit-profonde:#101830;
  --nuit-glow:#1c2b52;
  --sable:#EFDFC3;
  --sable-clair:#F7EFDD;
  --or:#C9A227;
  --or-clair:#E4C567;
  --rouille:#A6522E;
  --texte-clair:#F7EFDD;
  --texte-sombre:#1B1508;
  --succes:#3F7A56;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'Space Mono', monospace;

  --radius-lg:22px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--sable-clair);
  color:var(--texte-sombre);
  margin:0;
}
h1,h2,h3,.display-face{font-family:var(--font-display);}
.mono{font-family:var(--font-mono);}

a{text-decoration:none;}
:focus-visible{outline:3px solid var(--or); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- NAVBAR ---------- */
.navbar-teranga{
  background:rgba(16,24,48,0.92);
  backdrop-filter:blur(6px);
  padding:.9rem 0;
}
.navbar-teranga .navbar-brand{
  font-family:var(--font-display);
  color:var(--sable-clair) !important;
  font-size:1.5rem;
  letter-spacing:.02em;
}
.navbar-teranga .navbar-brand span{color:var(--or);}
.navbar-teranga .nav-link{
  color:var(--sable-clair) !important;
  opacity:.85;
  font-weight:500;
  margin:0 .4rem;
}
.navbar-teranga .nav-link:hover{opacity:1; color:var(--or) !important;}
.btn-or{
  background:var(--or); border:none; color:var(--texte-sombre); font-weight:600;
  border-radius:999px; padding:.55rem 1.4rem; transition:transform .15s ease, background .2s;
}
.btn-or:hover{background:var(--or-clair); transform:translateY(-1px); color:var(--texte-sombre);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(201,162,39,.18), transparent 45%),
    linear-gradient(180deg, var(--nuit-profonde) 0%, var(--nuit-glow) 55%, #24365f 100%);
  color:var(--texte-clair);
  overflow:hidden;
  display:flex; align-items:center;
  padding-top:6rem; padding-bottom:4rem;
}
.hero-horizon{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, transparent 0%, rgba(166,82,46,.35) 100%);
  pointer-events:none;
}
.hero-sun{
  position:absolute; right:-6%; top:8%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--or-clair), var(--or) 45%, rgba(201,162,39,0) 72%);
  opacity:.5; filter:blur(2px);
  animation:sunPulse 8s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{transform:scale(1); opacity:.45;}
  50%{transform:scale(1.05); opacity:.6;}
}
.hero-eyebrow{
  color:var(--or-clair); letter-spacing:.22em; text-transform:uppercase;
  font-size:.78rem; font-weight:600;
}
.hero h1{
  font-size:clamp(2.6rem, 5.2vw, 4.6rem);
  line-height:1.04;
  margin:.6rem 0 1.1rem;
}
.hero h1 em{font-style:italic; color:var(--or-clair);}
.hero p.lead{
  color:rgba(247,239,221,.82); font-size:1.15rem; max-width:540px;
}

/* ---------- WIDGET DE RECHERCHE (signature) ---------- */
.search-widget{
  position:relative;
  z-index:5;
  background:var(--sable-clair);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(16,24,48,.35);
  padding:1.6rem;
  margin-top:-4.2rem;
}
.search-widget label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--nuit-profonde); opacity:.7;
}
.search-widget .form-control, .search-widget .form-select{
  border:1.5px solid #e2d3ad; border-radius:var(--radius-sm);
  padding:.6rem .8rem; font-family:var(--font-body);
}
.search-widget .form-control:focus, .search-widget .form-select:focus{
  border-color:var(--or); box-shadow:0 0 0 .18rem rgba(201,162,39,.25);
}
.formule-toggle{
  display:flex; background:#efe3c6; border-radius:999px; padding:4px; gap:4px;
}
.formule-toggle input{display:none;}
.formule-toggle label{
  flex:1; text-align:center; padding:.5rem .6rem; border-radius:999px; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--nuit-profonde); opacity:.6; margin:0; transition:.2s;
}
.formule-toggle input:checked + label{background:var(--nuit-profonde); color:var(--sable-clair); opacity:1;}

/* ---------- CADRAN DE DISPONIBILITÉ (élément signature) ---------- */
.cadran-wrap{display:flex; align-items:center; gap:1rem;}
.cadran{width:96px; height:96px; position:relative; flex-shrink:0;}
.cadran svg{transform:rotate(-90deg);}
.cadran-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.cadran-label strong{font-family:var(--font-mono); font-size:1.05rem; color:var(--nuit-profonde);}
.cadran-label span{font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#8a7c55;}

/* ---------- SECTIONS ---------- */
.section-eyebrow{
  color:var(--rouille); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700;
}
.section-title{font-size:clamp(1.8rem,3vw,2.6rem); margin:.4rem 0 1rem;}

/* ---------- CARTES CHAMBRES ---------- */
.room-card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 12px 30px rgba(16,24,48,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.room-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(16,24,48,.16);}
.room-card-media{
  height:190px;
  background:linear-gradient(135deg, var(--nuit-glow), var(--rouille));
  position:relative; display:flex; align-items:flex-end; padding:1rem;
}
.room-card-media .badge-type{
  background:var(--sable-clair); color:var(--nuit-profonde); font-weight:700;
  border-radius:999px; padding:.35rem .9rem; font-size:.78rem;
}
.room-card-body{padding:1.3rem;}
.room-card-price{
  font-family:var(--font-mono); font-size:1.5rem; color:var(--nuit-profonde); font-weight:700;
}
.room-card-price small{font-size:.8rem; font-weight:400; color:#8a7c55;}
.dispo-pill{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600;
  padding:.25rem .7rem; border-radius:999px;
}
.dispo-pill.libre{background:#e5f2ea; color:var(--succes);}
.dispo-pill.rare{background:#fbe9df; color:var(--rouille);}
.dispo-pill.complet{background:#f0e6e6; color:#8a3b3b;}

/* ---------- COMMENT ÇA MARCHE ---------- */
.step-num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--or);
  border:1.5px solid var(--or); border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ---------- FOOTER ---------- */
footer.site-footer{
  background:var(--nuit-profonde); color:rgba(247,239,221,.75); padding:3.5rem 0 2rem;
}
footer.site-footer h6{color:var(--sable-clair); font-family:var(--font-display); letter-spacing:.02em;}
footer.site-footer a{color:rgba(247,239,221,.75);}
footer.site-footer a:hover{color:var(--or-clair);}

/* ---------- MODAL RÉSERVATION ---------- */
.modal-teranga .modal-content{border-radius:var(--radius-lg); border:none;}
.modal-teranga .modal-header{background:var(--nuit-profonde); color:var(--sable-clair); border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.qr-confirmation{
  background:var(--sable-clair); border-radius:var(--radius-lg); padding:1.5rem; text-align:center;
}

@media (max-width:767px){
  .search-widget{margin-top:1.2rem;}
  .hero{min-height:auto; padding-top:6.5rem;}
}