/* Hotel Casa Nina — reprise de la charte de l'ancien site */
:root{
  --taupe:#8a6b5b;
  --taupe-2:#7a5d4e;
  --rouge:#a3302a;
  --rouge-2:#8a2621;
  --blanc:#fff;
  --encre:#2a2420;
  --side:clamp(300px,17vw,400px);
  --head:186px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--taupe);color:var(--blanc);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ===== En-tête ===== */
.header{display:grid;grid-template-columns:110px 1fr auto var(--side);min-height:var(--head);background:var(--taupe)}
.flags{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px}
.flags img{width:34px;height:auto;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.flags a:hover img{transform:scale(1.12)}
.brand{display:flex;flex-direction:column;justify-content:center;padding:20px 0 20px 10px}
.brand img{width:min(370px,100%);height:auto}
.brand span{font-size:17px;letter-spacing:.01em;margin-top:8px}
.coords{display:flex;flex-direction:column;justify-content:center;padding:0 50px;font-size:18px;line-height:1.75}
.coords a:hover{text-decoration:underline}
.menu{background:var(--rouge);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:20px 0}
.menu a{font-weight:700;font-size:20px;letter-spacing:.02em;padding:6px 10px}
.menu a:hover,.menu a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.burger{display:none}

/* ===== Corps : photos à gauche, texte à droite ===== */
.page{display:grid;grid-template-columns:1fr var(--side);min-height:calc(100vh - var(--head))}
.photos{position:relative;min-height:calc(100vh - var(--head));background:#5d4a40}
.slider{position:absolute;inset:0;overflow:hidden}
.track{display:flex;height:100%;transition:transform .9s ease}
.track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.slider button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.25);border:0;color:#fff;font-size:42px;width:52px;height:72px;cursor:pointer;opacity:0;transition:opacity .3s}
.slider:hover button{opacity:1}
.sl-prev{left:0}.sl-next{right:0}
.sl-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:9px}
.sl-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.sl-dots i.on{background:#fff}
.side{padding:60px 44px 50px;display:flex;flex-direction:column;justify-content:center}
.side p{margin:0 0 22px;text-align:justify;hyphens:auto}
.side strong{font-weight:700}
.side .btn{margin-top:14px}

/* Onglets chambres */
.tabs{margin:-60px -44px 50px;display:flex;flex-direction:column}
.tabs a{display:block;padding:14px 38px;font-weight:700;font-size:19px;text-transform:uppercase}
.tabs a:hover{background:var(--taupe-2)}
.tabs a[aria-current]{background:var(--blanc);color:var(--taupe)}
.side.rooms{justify-content:flex-start;padding-top:60px}
.room{margin:0 0 26px}
.room h3{font-size:18px;font-weight:700;margin:0 0 12px}
.room ul{margin:0;padding-left:44px}
.room li{margin:2px 0}

/* Bouton */
.btn{display:inline-block;align-self:flex-start;border:2px solid var(--blanc);color:var(--blanc);padding:12px 26px;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:.2s;cursor:pointer;background:none;font-family:var(--sans)}
.btn:hover{background:var(--blanc);color:var(--taupe)}
.btn.rouge{background:var(--rouge);border-color:var(--rouge)}
.btn.rouge:hover{background:var(--rouge-2);border-color:var(--rouge-2);color:#fff}

/* Informations */
.map{width:100%;height:100%;min-height:420px;border:0;display:block}
.info-col{display:grid;grid-template-rows:1fr auto}
.info-col .map{min-height:calc(100vh - var(--head) - 120px)}
.meteo{background:var(--taupe-2);padding:24px 30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.meteo .t{font-size:52px;font-weight:300;line-height:1}
.meteo small{display:block;opacity:.85;font-size:14px}
.coord{list-style:none;margin:0 0 26px;padding:0}
.coord li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.coord b{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
form label{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 5px}
form input,form textarea{width:100%;padding:10px 12px;border:0;background:rgba(255,255,255,.93);font:400 16px var(--sans);color:var(--encre)}
form input:focus,form textarea:focus{outline:2px solid var(--rouge)}
form textarea{min-height:120px;resize:vertical}
form .btn{margin-top:18px;width:100%;text-align:center}
.hp{position:absolute;left:-9999px}
.msg{padding:12px 14px;margin-bottom:16px;background:#e3efdf;color:#24522a}
.msg.err{background:#f6dcdc;color:var(--rouge-2)}

/* Pied de page */
footer{background:var(--taupe-2);text-align:center;font-size:14px;padding:22px 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px}
footer a:hover{text-decoration:underline}

/* ===== Mobile / tablette ===== */
@media (max-width:1100px){
  .header{grid-template-columns:1fr auto;grid-template-areas:"brand burger" "coords coords";min-height:0;padding:16px 20px}
  .brand{grid-area:brand;padding:0}
  .brand img{width:min(300px,70vw)}
  .brand span{font-size:13px}
  .coords{grid-area:coords;padding:10px 0 0;font-size:15px;line-height:1.6}
  .flags{display:none}
  .burger{display:block;grid-area:burger;align-self:center;background:var(--rouge);border:0;color:#fff;font-size:28px;width:52px;height:52px;cursor:pointer}
  .menu{display:none;position:fixed;inset:0;z-index:50;gap:14px}
  .menu.open{display:flex}
  .menu .close{position:absolute;top:16px;right:16px}
  .menu .flags-m{display:flex;gap:22px;margin-top:20px}
  .menu .flags-m img{width:34px}
  .page{grid-template-columns:1fr;min-height:0}
  .photos{min-height:62vh}
  .slider button{opacity:1}
  .side{padding:40px 22px 50px}
  .tabs{margin:-40px -22px 34px}
  .tabs a{padding:12px 22px;font-size:16px}
  .room ul{padding-left:24px}
  .info-col .map{min-height:340px}
}
@media (min-width:1101px){.menu .close,.menu .flags-m{display:none}}
@media (prefers-reduced-motion:reduce){.track{transition:none}}