/* ==================================================================
   HOTEL FREEMAN — feuille de style
   Blanc, bleu nuit, turquoise des Caraïbes et jaune soleil. AUCUN marron,
   ni beige, ni terre cuite : le client les a refusés. Aucun dégradé.
   Police : Poppins, titres et texte.
   ================================================================== */
:root{
  --sable:#FFFFFF;
  --pierre:#F1F5F8;
  --chaux:#FFFFFF;
  --encre:#10202E;
  --encre-2:#52626F;
  --ligne:#DCE4EA;
  --nuit:#0F2740;
  --nuit-2:#17375A;
  --bleu:#0E8A96;
  --bleu-fonce:#0F2740;
  --bleu-doux:#E2F3F5;
  --terre:#0E8A96;
  --terre-fonce:#0A6E78;
  --bouga:#B8336A;
  --or:#F4C542;
  --or-fonce:#F2B807;
  --or-doux:#FFF7DC;
  --wa:#1A8D4B;
  --wa-fonce:#14733C;
  --titre:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texte:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gouttiere:clamp(16px,4vw,44px);
  --rayon:14px;
  --h-tete:112px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--sable);color:var(--encre);font-family:var(--texte);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img,svg,iframe{display:block;max-width:100%}
a{color:var(--bleu)}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.15;margin:0;color:var(--encre)}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
h3{font-size:19px;line-height:1.3}
p{margin:0}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--or);outline-offset:2px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:16px;top:12px;z-index:100;background:var(--chaux);padding:8px 14px;border-radius:8px}

.dedans{max-width:1200px;margin-inline:auto;padding-inline:var(--gouttiere)}
.bande{padding-block:clamp(64px,9vw,120px)}
.bande-pierre{background:var(--pierre)}
.entete{max-width:700px;margin-bottom:clamp(32px,4vw,52px)}
.entete p{margin-top:14px;color:var(--encre-2);font-size:17px}
.sur-titre{font-family:var(--texte);font-size:12.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--terre);margin-bottom:16px}

.ico{display:inline-flex;flex:none}
.ico svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ================= BOUTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;
  font:600 14.5px/1.2 var(--texte);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-principal{background:var(--terre);color:#fff}
.btn-principal:hover{background:var(--terre-fonce)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-fonce)}
.btn-ligne{border-color:var(--bleu);color:var(--bleu);background:transparent}
.btn-ligne:hover{background:var(--bleu);color:#fff}
.btn.large{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ================= EN-TÊTE ================= */
.tete{position:fixed;top:0;left:0;right:0;z-index:40;color:#fff;transition:transform .35s ease,background .3s,color .3s,box-shadow .3s}
.tete.cachee{transform:translateY(-100%)}
.tete.solide{background:var(--chaux);color:var(--encre);box-shadow:0 10px 30px -22px rgba(15,39,64,.6)}

.barre-haut{background:rgba(8,22,38,.55);color:#E3EBF2;font-size:14px}
.tete.solide .barre-haut{background:var(--nuit)}
.barre-haut-in{max-width:1200px;margin-inline:auto;padding-inline:var(--gouttiere);min-height:40px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.contacts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.contacts a,.contacts>span{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.contacts a:hover{color:var(--or)}
.contacts .ico{color:var(--or)}
.seul-mobile{display:none}

.langues{display:flex;gap:2px}
.langues button{font:600 12.5px/1 var(--texte);letter-spacing:.12em;border:1px solid transparent;background:transparent;
  color:inherit;padding:6px 9px;border-radius:999px;cursor:pointer;opacity:.75}
.langues button:hover{opacity:1}
.langues button[aria-pressed="true"]{opacity:1;border-color:var(--or);color:var(--or)}

.tete-in{max-width:1200px;margin-inline:auto;padding-inline:var(--gouttiere);min-height:72px;display:flex;align-items:center;gap:20px}
.marque{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1;margin-right:auto}
.marque-nom{font-family:var(--titre);font-weight:700;font-size:22px;letter-spacing:-.01em}
.marque-lieu{font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--or);margin-top:4px}
.tete.solide .marque-nom{color:var(--bleu-fonce)}
.tete.solide .marque-lieu{color:var(--terre)}
.nav{display:flex;gap:2px;align-items:center}
.nav a{color:inherit;text-decoration:none;font-weight:500;font-size:15.5px;padding:8px 12px;border-radius:8px;position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.tete-resa{padding:11px 20px}
.burger{display:none;align-items:center;gap:9px;border:1px solid currentColor;background:transparent;color:inherit;
  border-radius:999px;padding:9px 15px;font:600 13px var(--texte);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.burger-barres{width:16px;height:2px;background:currentColor;position:relative}
.burger-barres::before,.burger-barres::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.burger-barres::before{top:-5px}.burger-barres::after{top:5px}

@media (max-width:980px){
  .burger{display:inline-flex}
  .tete-resa{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:var(--chaux);border-bottom:1px solid var(--ligne);padding:8px var(--gouttiere) 18px;
    box-shadow:0 20px 30px -24px rgba(15,39,64,.6)}
  .tete.ouvert .nav{display:flex}
  .tete.ouvert{background:var(--chaux);color:var(--encre)}
  .nav a{color:var(--encre);padding:13px 10px;font-size:17px;border-bottom:1px solid var(--ligne);border-radius:0}
  .nav a::after{display:none}
}
@media (max-width:640px){
  :root{--h-tete:104px}
  .barre-haut{font-size:13px}
  .barre-haut-in{min-height:36px}
  .contacts{gap:14px}
  .masque-mobile,.contacts>.masque-mobile{display:none}
  .seul-mobile{display:inline}
  .marque-nom{font-size:19px}
  .burger-txt{display:none}
  .langues button{padding:5px 7px}
}

/* ================= OUVERTURE : la rue, la nuit ================= */
.ouverture{position:relative;min-height:max(620px,100vh,calc(460px + 19.2vw));min-height:max(620px,100svh,calc(460px + 19.2vw));background:var(--nuit);
  overflow:hidden;display:flex;flex-direction:column}
.ouverture-fond{position:absolute;inset:0}
.ouverture-fond .ciel{position:absolute;inset:0;width:100%;height:100%}
.ouverture-fond .rue{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(300px,58vh,660px)}
.ouverture-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture.photo .ouverture-fond::after{content:"";position:absolute;inset:0;background:rgba(8,22,38,.45)}
.ouverture-texte{position:relative;z-index:1;text-align:center;
  padding-top:calc(var(--h-tete) + clamp(24px,7vh,80px));padding-bottom:40px}
.ouverture .sur-titre{color:var(--or);margin-bottom:18px}
.ouverture h1{color:#fff;font-size:clamp(44px,7.6vw,100px);font-weight:700;line-height:1;letter-spacing:-.03em}
.ouverture .accroche{font-family:var(--titre);font-weight:400;color:#CFE3F0;
  font-size:clamp(17px,2.1vw,24px);margin-top:16px}
.ouverture .prix-badge{margin-top:22px;background:transparent;border-color:rgba(244,197,66,.75);color:#fff}

.prix-badge{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--or-doux);
  border:1px solid var(--or);color:var(--bleu-fonce);font-weight:600;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 20px;border-radius:999px}

/* ================= BARRE DE RÉSERVATION, à cheval ================= */
.barre-resa-cadre{position:relative;z-index:5;margin-top:-40px}
.barre-resa{background:var(--chaux);border:1px solid var(--ligne);border-radius:18px;padding:14px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;
  box-shadow:0 28px 50px -30px rgba(15,39,64,.7)}
.barre-resa label{display:flex;flex-direction:column;gap:5px;padding:8px 14px;border-right:1px solid var(--ligne);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2)}
.barre-resa label:nth-of-type(3){border-right:0}
.barre-resa input,.barre-resa select{font:500 17px/1.3 var(--texte);color:var(--encre);border:0;background:transparent;
  padding:2px 0;width:100%;text-transform:none;letter-spacing:0}
.barre-resa input:focus,.barre-resa select:focus{outline:none;color:var(--bleu)}
.barre-resa .btn{height:100%;min-height:58px;padding-inline:26px}
.barre-resa .erreur{grid-column:1/-1;margin:2px 4px 0}
@media (max-width:860px){
  .barre-resa-cadre{margin-top:-34px}
  .barre-resa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barre-resa label{border-right:0;border-bottom:1px solid var(--ligne)}
  .barre-resa label:nth-of-type(3){grid-column:1/-1}
  .barre-resa .btn{grid-column:1/-1}
}

/* ================= BIENVENUE ================= */
.bienvenue{padding-top:clamp(70px,9vw,120px)}
.bienvenue-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:860px){.bienvenue-in{grid-template-columns:1fr}}
.bienvenue-texte{margin-top:20px;font-size:clamp(18px,1.7vw,20.5px);color:var(--encre-2);max-width:56ch}
.chiffres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.chiffres li{display:flex;align-items:baseline;gap:22px;padding:20px 0;border-bottom:1px solid var(--ligne)}
.chiffres li:first-child{border-top:1px solid var(--ligne)}
.chiffres b{flex:none;font-family:var(--titre);font-weight:700;font-size:clamp(28px,3vw,38px);line-height:1;color:var(--bleu-fonce)}
.chiffres span{flex:1;min-width:0;color:var(--encre-2);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}

/* ================= SERVICES ================= */
.atouts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.atouts li{background:var(--chaux);border:1px solid var(--ligne);border-radius:var(--rayon);padding:28px 26px;
  display:flex;flex-direction:column;gap:12px;transition:transform .25s,border-color .25s,box-shadow .25s}
.atouts li:hover{transform:translateY(-4px);border-color:var(--or);box-shadow:0 22px 40px -32px rgba(15,39,64,.7)}
.atouts .ico{width:56px;height:56px;border-radius:50%;background:var(--nuit);color:var(--or);align-items:center;justify-content:center;font-size:22px}
.atouts p{color:var(--encre-2);font-size:16px}

/* ================= CHAMBRES ================= */
/* 4 chambres : 4 de front sur grand écran, 2 × 2 sur tablette, 1 sur téléphone — jamais une orpheline */
.chambres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.chambres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.chambres{grid-template-columns:1fr}}
.chambre{background:var(--chaux);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s}
.chambre:hover{transform:translateY(-4px);box-shadow:0 26px 46px -34px rgba(15,39,64,.75)}
.chambre-photo{margin:18px 18px 0;aspect-ratio:4/3;border-radius:190px 190px 10px 10px;overflow:hidden}
.chambre-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.chambre:hover .chambre-photo img{transform:scale(1.05)}
.chambre-corps{padding:24px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.chambre-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chambre-prix{font-family:var(--titre);font-size:34px;font-weight:700;color:var(--bleu-fonce);line-height:1}
.chambre-prix small{font-family:var(--texte);font-size:14px;font-weight:500;color:var(--encre-2);margin-left:8px;letter-spacing:.04em}
.etiquette{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bouga);
  border:1px solid var(--bouga);border-radius:999px;padding:4px 11px}
.inclus{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-2)}
.chambre ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.chambre li{display:flex;align-items:center;gap:7px;font-weight:500;font-size:16px}
.chambre li .ico{color:var(--wa)}
.chambre .btn{margin-top:auto;align-self:stretch}

/* l'emplacement d'une photo à venir : il dit ce qu'on attend */
.attente{width:100%;height:100%;background:#E8EFF4;color:#4F6475;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;border:2px dashed rgba(79,100,117,.35)}
.attente .ico{font-size:30px}
.attente b{font-family:var(--titre);font-size:17px;font-weight:600;color:#2E4456}
.attente span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ================= LE QUARTIER, la nuit ================= */
.bande-nuit{background:var(--nuit);color:#E3EBF2}
.bande-nuit h2,.bande-nuit h3{color:#fff}
.bande-nuit .sur-titre{color:var(--or)}
.quartier-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:860px){.quartier-in{grid-template-columns:1fr}}
.quartier-texte{margin-top:20px;font-size:19px;color:#C9D7E3;max-width:52ch}
.tuiles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tuiles li{display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center;background:var(--nuit-2);
  border:1px solid #2C4E72;border-radius:var(--rayon);padding:20px 24px;transition:border-color .25s,transform .25s}
.tuiles li:hover{border-color:var(--or);transform:translateX(4px)}
.tuiles .num{font-family:var(--titre);font-size:22px;font-weight:700;color:var(--or);line-height:1}
.tuiles .ico{width:48px;height:48px;border-radius:50%;border:1px solid var(--or);color:var(--or);align-items:center;justify-content:center;font-size:20px}
.tuiles p{color:#B8C9D8;margin-top:4px;font-size:16px}

/* ================= GALERIE, en mosaïque ================= */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,230px);gap:14px}
.galerie figure{margin:0;overflow:hidden;border-radius:12px}
.galerie figure:nth-child(1){grid-column:span 2;grid-row:span 2;border-radius:260px 260px 12px 12px}
.galerie figure:nth-child(4){grid-row:span 2}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.galerie figure:hover img{transform:scale(1.05)}
@media (max-width:760px){
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
  .galerie figure:nth-child(4){grid-row:span 1}
}

/* ================= ACCÈS ================= */
.acces-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:stretch}
@media (max-width:860px){.acces-in{grid-template-columns:1fr}}
.carte{border-radius:var(--rayon);overflow:hidden;border:1px solid var(--ligne);min-height:380px;background:#E6DED2}
.carte iframe{width:100%;height:100%;min-height:380px;border:0}
.fiche{background:var(--chaux);border:1px solid var(--ligne);border-top:4px solid var(--terre);border-radius:var(--rayon);
  padding:28px;display:flex;flex-direction:column;gap:24px}
.fiche dl{margin:0}
.fiche dt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre-2);margin-top:20px}
.fiche dt:first-child{margin-top:0}
.fiche dt .ico{color:var(--terre)}
.fiche dd{margin:6px 0 0;font-size:18px;font-weight:500}
.fiche dd a{text-decoration:none}
.fiche dd a:hover{text-decoration:underline}
.fiche .btn{margin-top:auto}

/* ================= RÉSERVER ================= */
.resa-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.resa-in{grid-template-columns:1fr}}
.resa-texte>p{color:var(--encre-2);font-size:18.5px;margin-top:16px}
.formulaire{background:var(--chaux);border:1px solid var(--ligne);border-top:4px solid var(--wa);border-radius:var(--rayon);
  padding:clamp(20px,3vw,34px);box-shadow:0 26px 50px -36px rgba(15,39,64,.6)}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:480px){.champs{grid-template-columns:1fr}}
.champs label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2)}
.champs .large{grid-column:1/-1}
.champs input,.champs select,.champs textarea{font:400 16.5px/1.4 var(--texte);color:var(--encre);background:var(--sable);
  border:1px solid var(--ligne);border-radius:10px;padding:12px 14px;width:100%;text-transform:none;letter-spacing:0}
.champs textarea{resize:vertical;min-height:92px}
.champs input:focus,.champs select:focus,.champs textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(14,138,150,.2)}
.formulaire .btn{margin-top:22px}
.erreur{margin-top:16px;background:#FDECEC;border-left:4px solid #D64545;color:#8A1F1F;padding:10px 14px;border-radius:0 8px 8px 0;font-weight:500;
  font-size:15px;text-transform:none;letter-spacing:0}
.note{margin-top:12px;font-size:14.5px;color:var(--encre-2);text-align:center}

/* les moyens de paiement, en pastilles */
.paiements{margin-top:28px}
.paiements-titre{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px}
.paiements ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.paiements li{font-weight:600;font-size:15px;padding:7px 16px;border-radius:999px;background:var(--chaux);border:1px solid var(--ligne);color:var(--bleu-fonce)}
.pied .paiements{margin-top:22px}
.pied .paiements li{background:transparent;border-color:#2C4E72;color:#fff;font-size:14px;padding:5px 13px}

/* ================= PIED ================= */
.pied{background:var(--nuit);color:#C3D0DC;padding-top:64px;font-size:16px}
.pied a{color:#fff;text-decoration:none}
.pied a:hover{color:var(--or)}
.pied .marque-nom{color:#fff;margin-bottom:10px;display:block}
.pied-titre{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.pied-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:32px;padding-bottom:44px}
.pied-in p+p{margin-top:6px}
.pied-bas{border-top:1px solid #24425F;padding-block:22px;font-size:14px;color:#8FA3B5}

/* ================= BOUTONS FIXES ================= */
.wa-flottant{position:fixed;right:20px;bottom:20px;z-index:50;width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);transition:transform .2s,background .2s}
.wa-flottant:hover{transform:scale(1.06);background:var(--wa-fonce)}
.haut-page{position:fixed;right:28px;bottom:94px;z-index:50;width:44px;height:44px;border-radius:50%;
  background:var(--chaux);color:var(--bleu-fonce);border:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;
  font-size:19px;box-shadow:0 10px 22px -14px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s}
.haut-page.visible{opacity:1;visibility:visible;transform:none}
.barre-mobile{display:none}
@media (max-width:640px){
  .wa-flottant,.haut-page{display:none}
  .barre-mobile{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--chaux);border-top:1px solid var(--ligne);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .barre-mobile .btn{padding:13px 10px;font-size:13.5px}
  .pied-bas{padding-bottom:92px}
}

/* ================= APPARITION AU DÉFILEMENT =================
   L'état caché n'est posé QUE par le script (html.anime) : sans
   JavaScript, ou si le mouvement est réduit, tout reste visible. */
html.anime .revele{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.anime .revele.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* un élément marqué hidden reste caché, même s'il porte une classe qui fixe son affichage */
[hidden]{display:none!important}