/* LES COULEURS SONT CELLES DU SITE, RELEVEES SUR LA PAGE.

   Le panneau reprenait la palette du moteur Thais : un turquoise
   grise (#388999) et un corail (#F79273). Paul a vu la difference
   avec le site. Mesure le 7 aout sur la page d accueil :

     bouton "Reserver une chambre"  fond #11c3d8, texte blanc
     liens des chambres             #0da4b5

   Le turquoise vif sert de fond de bouton ; le plus fonce sert de
   couleur de texte, ou #11c3d8 manquerait de contraste sur blanc. */
  :root{
    --turquoise:#11c3d8; --turquoise-fonce:#0da4b5; --turquoise-appui:#0b8a99;
    --encre:#1f2d31; --gris:#6b7a7e; --trait:#e3e9ea; --fond:#f6f8f8;
    --ombre:0 18px 50px rgba(20,45,50,.22);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font:16px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--encre);background:#fff;-webkit-font-smoothing:antialiased}
  
                    
  /* Z-INDEX TRES HAUT, ET C EST DELIBERE.
   Constate sur le site le 7 aout : a z-index 50, le bouton
   RESERVER de l en-tete (.vm-hcta) et la bulle WhatsApp se
   dessinaient PAR-DESSUS le panneau. Le theme cree ses propres
   contextes d empilement ; rivaliser cran par cran serait un
   combat sans fin a chaque mise a jour du theme.
   Un panneau modal doit couvrir la page, point. */
  .voile{position:fixed;inset:0;background:rgba(20,40,45,.55);opacity:0;pointer-events:none;
    transition:opacity .32s;z-index:2147483000;backdrop-filter:blur(2px)}
  .voile.on{opacity:1;pointer-events:auto}
  .panneau{position:fixed;top:0;right:0;height:100dvh;width:min(468px,100vw);background:#fff;
    box-shadow:var(--ombre);z-index:2147483001;transform:translateX(100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column}
  .panneau.on{transform:none}
  /* Le moteur a besoin de place : le panneau s elargit quand il
     s ouvre, et reprend sa largeur si l on revient a la recherche.

     780 px ne suffisaient pas. A cette largeur, le moteur garde sa
     mise en page a deux colonnes - formulaire a gauche, recapitulatif
     a droite - et la colonne de gauche tombe a environ 280 px :
     "Civilite / Prenom / Nom" se serrent sur une seule ligne, le lien
     de facturation passe a la ligne. C est ce que Paul a vu.

     Mesure ecran par ecran le 7 aout : a 960 px la meme page respire,
     chaque champ tient sur sa ligne. On prend 1000 px, plafonnes a
     94vw pour garder un bord visible et l idee d un panneau. */
  .panneau.large{width:min(1000px,94vw)}
  .cadre{flex:1 1 auto;border:0;width:100%;display:block;background:#f4f7f7}
  .p-haut .gauche{display:flex;align-items:center;gap:12px}
  .revenir{background:none;border:0;color:var(--turquoise-fonce);font-size:13px;cursor:pointer;
    font-family:inherit;padding:4px 6px;border-radius:4px;letter-spacing:0}
  .revenir:hover{background:var(--fond)}

  .p-haut{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
    border-bottom:1px solid var(--trait);flex:0 0 auto}
  .p-titre{font-size:13px;letter-spacing:.16em;color:var(--gris)}
  .fermer{background:none;border:0;font-size:26px;line-height:1;color:var(--gris);cursor:pointer;padding:4px 8px;border-radius:4px}
  .fermer:hover{background:var(--fond);color:var(--encre)}
  .p-corps{flex:1 1 auto;overflow-y:auto;padding:20px;-webkit-overflow-scrolling:touch}
  .p-bas{flex:0 0 auto;border-top:1px solid var(--trait);padding:14px 20px;display:flex;
    align-items:center;gap:14px;justify-content:space-between;background:#fff}
  .etat{font-size:13px;color:var(--gris);line-height:1.4}
  .etat b{color:var(--encre);font-weight:600}
  .valider{background:var(--turquoise);color:#fff;border:0;border-radius:2px;padding:14px 24px;
    font-size:12.5px;letter-spacing:.12em;cursor:pointer;font-family:inherit;white-space:nowrap}
  .valider:hover:not(:disabled){background:var(--turquoise-fonce)}
  .valider:disabled{background:#dfe5e6;color:#9aa8ab;cursor:not-allowed}

  /* voyageurs */
  .voyageurs{border:1px solid var(--trait);border-radius:8px;padding:6px 16px;margin-bottom:18px}
  .ligne{display:flex;align-items:center;justify-content:space-between;padding:9px 0}
  .ligne+.ligne{border-top:1px solid var(--trait)}
  .lib{font-size:14px}
  .lib small{display:block;color:var(--gris);font-size:11.5px}
  .compteur{display:flex;align-items:center;gap:12px}
  .pm{width:30px;height:30px;border:1px solid var(--trait);background:#fff;border-radius:50%;
    font-size:16px;cursor:pointer;color:var(--encre);line-height:1;font-family:inherit}
  .pm:hover:not(:disabled){background:var(--fond)}
  .pm:disabled{opacity:.32;cursor:not-allowed}
  .nb{min-width:16px;text-align:center;font-size:14px}
  .besoin{font-size:12.5px;color:var(--turquoise-appui);background:#eef4f5;border-radius:6px;
    padding:9px 12px;margin:-8px 0 18px}

  /* calendrier */
  .cal-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .cal-mois{font-size:15px;font-weight:600}
  .fleche{background:none;border:1px solid var(--trait);border-radius:50%;width:32px;height:32px;
    cursor:pointer;font-size:15px;color:var(--encre);line-height:1}
  .fleche:hover:not(:disabled){background:var(--fond)}
  .fleche:disabled{opacity:.3;cursor:not-allowed}
  .jours,.grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .jours div{text-align:center;font-size:11px;color:var(--gris);padding:6px 0}
  .case{aspect-ratio:1/1;border:0;background:none;border-radius:5px;cursor:pointer;display:flex;
    flex-direction:column;align-items:center;justify-content:center;font-family:inherit;
    font-size:14px;color:var(--encre);padding:0}
  .case:hover:not(:disabled):not(.vide){background:var(--fond)}
  .case .px{font-size:9.5px;color:var(--gris);margin-top:1px}
  .case:disabled{color:#c9d1d3;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
  .case:disabled .px{display:none}
  .case.vide{cursor:default}
  .case.deb,.case.fin{background:var(--turquoise-fonce);color:#fff;text-decoration:none}
  .case.deb .px,.case.fin .px{color:rgba(255,255,255,.85)}
  .case.entre{background:#e4eef0}
  .legende{margin-top:12px;font-size:12px;color:var(--gris);display:flex;gap:16px;flex-wrap:wrap}
  .legende i{font-style:normal;text-decoration:line-through;color:#c9d1d3}
  .chargement{text-align:center;color:var(--gris);padding:40px 0;font-size:14px}
  .souci{background:#fdf3e6;color:#8a5a12;border-radius:6px;padding:12px;font-size:13px;margin-top:12px}

            
  @media (max-width:640px){ .panneau{width:100vw}  .panneau.large{width:100vw}  .p-corps{padding:16px} }

  /* ==================================================================
     LE THEME REHABILLE MES BOUTONS

     Le panneau vit dans la page du site : les regles du theme sur
     <button> s appliquent a lui. Astra impose padding 15px 30px.
     Mes ronds de 30 px devenaient des ovales de 61 x 31 - c est le
     defaut que Paul a photographie sur les + et les -.

     On remet donc chaque bouton du panneau a zero, puis on redonne
     sa geometrie a chacun. Les selecteurs sont prefixes ".panneau"
     pour peser plus lourd que la remise a zero qui les precede :
     sans ce prefixe, ".panneau button" l emporterait sur ".pm" et
     les ronds disparaitraient a nouveau. Verifie en essai.
     ================================================================== */
  .panneau button{padding:0;min-width:0;letter-spacing:normal;text-transform:none;
    box-shadow:none;font-family:inherit;line-height:1.2}
  .panneau .pm{width:30px;height:30px;display:inline-flex;align-items:center;
    justify-content:center;font-size:17px;line-height:1;border-radius:50%}
  .panneau .fleche{width:32px;height:32px;display:inline-flex;align-items:center;
    justify-content:center;border-radius:50%}
  .panneau .fermer{width:34px;height:34px;display:inline-flex;align-items:center;
    justify-content:center;font-size:24px}
  .panneau .revenir{padding:4px 6px}
  /* Pas de largeur imposee ici : le bouton partage sa barre avec le
     texte d etat. Une largeur fixe le chasserait de l ecran - la
     panne deja rencontree le 6 aout dans le moteur. */
  .panneau .valider{padding:14px 24px;line-height:1.2}
/* ====================================================================
   EN-TETE QUI SUIT LE DEFILEMENT
   Demande de Paul le 7 aout, sur le modele du Palm.

   L en-tete d Astra est en position:absolute. On le passe en fixed :
   comme absolute, il est deja hors du flux, donc le contenu de la
   page ne bouge pas d un pixel. C etait la condition pour que ce
   changement ne casse rien.

   Le fond ne se pose PAS sur #masthead lui-meme - Astra y garde une
   couleur transparente et peint sur son enfant direct. Constate en
   essai : le fond applique a l en-tete restait invisible.
   ==================================================================== */
#masthead{position:fixed !important;top:0 !important;left:0;right:0;width:100%;
  transition:background-color .3s,box-shadow .3s;z-index:9990 !important}
body.admin-bar #masthead{top:32px !important}
#masthead.vm-colle,#masthead.vm-colle>div{background-color:rgba(255,255,255,.97) !important}
#masthead.vm-colle{box-shadow:0 2px 18px rgba(20,45,50,.12)}

/* --------------------------------------------------------------------
   CE QUE L EN-TETE CONTIENT EST BLANC

   Constate le 7 aout en mesurant la page a 390 px de large : le logo
   est le fichier "logo-white", l icone du menu telephone a un
   remplissage blanc, les liens FR/EN/DE sont blancs. Tout cela est
   dessine pour se poser sur la photo d accueil, qui est sombre.

   Des que le fond de l en-tete devient blanc, ce contenu disparait.
   C est ce que Paul a vu sur iPhone : "l entete descend en etant
   blanc sans meme amener les onglets". Il ne manquait rien - c etait
   blanc sur blanc.

   Le logo n existe qu en blanc. brightness(0) rend chaque pixel noir
   en gardant la transparence : un logo monochrome blanc devient un
   logo monochrome noir, sans nouveau fichier a fabriquer.

   Le bouton "Reserver une chambre" garde son texte blanc : il a son
   propre fond turquoise, il est lisible, et il doit rester identique
   avant et apres le defilement. D ou le :not(.vm-hcta).
   -------------------------------------------------------------------- */
#masthead.vm-colle .menu-link,#masthead.vm-colle .ast-builder-menu a{color:#1f2d31 !important}
#masthead.vm-colle a:not(.vm-hcta){color:#1f2d31 !important}
#masthead.vm-colle svg{fill:#1f2d31 !important}
#masthead.vm-colle .custom-logo{filter:brightness(0) !important;opacity:.88}

/* ====================================================================
   BLOC DE RECHERCHE DE LA PAGE D ACCUEIL

   Le panneau fait desormais ce travail, en mieux : calendrier avec
   les prix, dates impossibles barrees, pas de champ "aaaa-mm-jj" a
   remplir a la main. Garder les deux imposait au visiteur de saisir
   ses dates deux fois.

   ON MASQUE PLUTOT QUE DE SUPPRIMER LE CONTENU DE LA PAGE. Ainsi
   desactiver l extension fait revenir le formulaire - le site
   retrouve son point d entree si le panneau venait a poser
   probleme. Supprimer le bloc dans la page laisserait un trou et
   demanderait une intervention pour revenir en arriere.

   POURQUOI "html body" ET NON ".vm-dispo" SEUL

   Sur telephone le bloc restait affiche. La cause a ete trouvee en
   listant les regles qui visent l element : le site sert un style
   nomme "vm-mobile-inline-css" qui contient, sous 767 px,

       body .vm-dispo{display:block !important}

   Deux "!important" s affrontent ; c est alors la specificite qui
   tranche, et "body .vm-dispo" l emporte sur ".vm-dispo". Ajouter
   "html" devant remet la regle du panneau devant, sans rien modifier
   ailleurs et sans toucher au style du site.
   ==================================================================== */
html body .vm-dispo{display:none !important}

/* ====================================================================
   PAGES DE CHAMBRE : LA CARTE « RÉSERVATION » FAIT DOUBLON

   Depuis que l en-tete suit le defilement, son bouton RESERVER UNE
   CHAMBRE reste visible du haut au bas de la page. La carte de la
   colonne de droite proposait la meme chose au meme moment. Paul
   l a fait retirer le 7 aout.

   On ne garde que la carte des avis, qui, elle, apporte autre chose.
   Masquage et non suppression : sans l extension - donc sans en-tete
   collante - la carte revient et la page retrouve son bouton.
   ==================================================================== */
html body .vm-side > .vm-card:not(.vm-avis){display:none !important}

/* ====================================================================
   VOLET DES LANGUES

   Reecrit le 7 aout au soir apres l essai de Paul sur iPhone. Deux
   defauts, tous deux visibles sur sa capture :

   1. LE VOLET RESTAIT OUVERT. Une regle mobile du site pose
      display:flex sur les listes de l en-tete, et elle battait mon
      display:none meme en !important. Meme famille de conflit que
      le bloc de recherche ce matin. On cesse donc de se battre sur
      "display" : le repli passe par visibility et opacity, que rien
      ici ne dispute. Bonus, l ouverture peut etre fondue.

   2. "FR" S ECRIVAIT SOUS LES DRAPEAUX. Le volet vit dans le <li>
      de Polylang, et le site y dessine le libelle de langue en
      pseudo-element sur le <a>. Mes propres liens en heritaient :
      un "FR" sous le drapeau anglais et un autre sous l allemand.
      On coupe les pseudo-elements a l interieur du volet.

   Le dessin est volontairement sobre : petits drapeaux, un filet
   d un pixel, pas d ombre portee. Un selecteur de langue doit se
   faire oublier.
   ==================================================================== */
html body #masthead li.lang-item.vm-lang-cache{display:none !important}
html body #masthead li.lang-item > a.vm-lang-cache-a{display:none !important}

/* Les libelles du theme n ont rien a faire dans le volet. */
html body .vm-lang a::before,html body .vm-lang a::after,
html body .vm-lang button::before,html body .vm-lang button::after{content:none !important}

html body .vm-lang{position:relative;display:inline-flex;align-items:center;margin:0}
html body .vm-lang-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  cursor:pointer;padding:6px 4px;line-height:1}
html body .vm-fl{display:block;width:19px;height:13px;background-size:cover;
  background-position:center;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
html body .vm-lang-fl{width:0;height:0;border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.6;
  transition:transform .18s}
html body .vm-lang.on .vm-lang-fl{transform:rotate(180deg)}

/* Repli par visibility, jamais par display - voir plus haut. */
html body .vm-lang-menu{position:absolute;top:calc(100% + 6px);left:50%;margin:0;
  transform:translateX(-50%) translateY(-4px);padding:5px;list-style:none;background:#fff;
  border:1px solid rgba(20,45,50,.12);border-radius:4px;box-shadow:0 6px 18px rgba(20,45,50,.10);
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;
  z-index:60;min-width:0;width:auto}
html body .vm-lang.on .vm-lang-menu{visibility:visible;opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
html body .vm-lang-menu li{margin:0;padding:0;list-style:none;border:0}
html body .vm-lang-menu li + li{margin-top:5px}
html body .vm-lang-menu a{display:block;padding:2px;border-radius:2px;line-height:0}
html body .vm-lang-menu a:hover{background:#eef4f5}

/* ====================================================================
   TELEPHONE : PREMIER ECRAN A LA MAISON, NAVIGATION EN BAS

   Tout ce bloc est sous 767 px. L ordinateur ne bouge pas d un pixel.
   Rien ne s applique tant que le script n a pas pose la classe
   "vm-bas-actif" sur le body - c est-a-dire tant que la barre n est
   pas reellement construite. Si le script echoue, le site garde son
   en-tete, son hamburger et son bouton dans la photo.
   ==================================================================== */
@media (max-width:767px){

  :root{ --vm-bas-h:60px; }

  /* --- L ancienne navigation s efface, mais seulement maintenant --- */
  body.vm-bas-actif #masthead{display:none !important}
  body.vm-bas-actif{padding-bottom:calc(var(--vm-bas-h) + env(safe-area-inset-bottom))}

  /* --- Le premier ecran ---
     100dvh et non 100vh : sur iPhone, la barre d adresse de Safari
     se retracte au defilement et 100vh deborde. On retire la hauteur
     de la barre pour que la photo s arrete exactement dessus, comme
     sur la reference. */
  /* CE QUE LE SITE IMPOSAIT, ET QU IL FAUT DEFAIRE.

     Releve dans la CSS personnalisee du site, bloc "vm-heros-entete
     (05/08)" : sur telephone, le hero recevait

        height:auto !important
        min-height:min(600px,74vh) !important
        align-items:flex-start !important
        padding-top:94px !important

     Les 94 px degageaient l ancien en-tete, et le contenu etait
     colle en haut pour ne pas passer sous le logo. L en-tete
     n existe plus ici : ces quatre regles n ont plus d objet, mais
     elles portent !important. On les defait une par une, avec la
     meme arme - c est le seul moyen, et c est volontaire.

     Le bloc de texte est centre puis remonte d un dixieme d ecran :
     sur la reference, il se pose un peu au-dessus du milieu. */
  body.vm-bas-actif .vm-hh{
    height:calc(100vh - var(--vm-bas-h)) !important;
    height:calc(100dvh - var(--vm-bas-h)) !important;
    min-height:0 !important;
    /* Le titre descend vers le bas de la photo : la maison occupe
       la moitie haute de l image, le texte pose dessus la coupait.
       En bas, sur la pelouse, il ne cache plus rien. */
    align-items:flex-end !important;
    padding-top:0 !important;
    padding-bottom:11vh !important;
  }
  /* Meme marge morte sur les autres bandeaux photo : .vm-hero coiffe
     les pages de chambre, .vm-ph les pages interieures. */
  body.vm-bas-actif .vm-hero,
  body.vm-bas-actif .vm-ph{padding-top:0 !important}

  /* LE BOUTON DANS LA PHOTO, PARTOUT ET PAS SEULEMENT SUR L ACCUEIL.

     Je n avais masque que celui du hero d accueil (".vm-hh .vm-hero-cta").
     La page "Nos chambres" porte le meme bouton sur un autre gabarit
     de bandeau, il restait donc en plein milieu de sa photo - c est le
     carre bleu que Paul a vu. La barre basse porte desormais Reserver
     en permanence : aucun bouton n a plus a occuper une image. */
  body.vm-bas-actif .vm-hero-cta{display:none !important}
  /* Le voile etait calibre pour quatre lignes de texte. Il n en reste
     que deux : on l allege pour que la facade sorte. */
  body.vm-bas-actif .vm-hh:after{
    background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,rgba(0,0,0,.22)) !important;
  }
  body.vm-bas-actif .vm-hh-in{padding:0 26px 0}
  body.vm-bas-actif .vm-hh h1{margin:0}
  body.vm-bas-actif .vm-hh-nom{
    font-size:clamp(34px,9.5vw,44px);letter-spacing:.06em;line-height:1.15;
  }
  /* La signature casse au trait d union de "Saint-Pierre" si on la
     laisse occuper toute la largeur : on lisait "SAINT-" puis
     "PIERRE, LA REUNION". On la contraint a une largeur qui la fait
     tomber apres "CHARME", sur une coupure choisie. */
  body.vm-bas-actif .vm-hh-sous{
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:22px;
    opacity:.92;line-height:1.85;max-width:19em;margin-left:auto;margin-right:auto;
  }
  /* Le bouton et la mention quittent la photo. */
  body.vm-bas-actif .vm-hh .vm-hero-cta{display:none !important}
  body.vm-bas-actif .vm-hh .vm-bpg-hero{display:none !important}
  /* Redescendue dans la bande de texte par le script. */
  .vm-bpg-descendu{
    display:block !important;color:var(--gris) !important;text-shadow:none !important;
    margin:22px 0 0 !important;font-size:13px;opacity:1 !important;
  }

  /* --- WhatsApp : l icone rejoint la barre, la bulle disparait --- */
  body.vm-bas-actif .vm-wa{display:none !important}

  /* --- La barre ---
     Fond blanc plein, quatre cases d egale largeur separees d un
     filet, la derniere remplie. env(safe-area-inset-bottom) tient
     compte du trait du iPhone : sans lui, la barre passe dessous. */
  .vm-bas{
    position:fixed;left:0;right:0;bottom:0;z-index:99990;display:grid;
    grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;
    border-top:1px solid rgba(20,45,50,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .vm-bas-c{
    display:flex;align-items:center;justify-content:center;height:var(--vm-bas-h);
    border:0;border-left:1px solid rgba(20,45,50,.08);background:none;color:var(--encre);
    text-decoration:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;
  }
  .vm-bas-c:first-child{border-left:0}
  .vm-bas-i{display:block;width:23px;height:23px}
  .vm-bas-i svg{width:100%;height:100%;display:block}
  .vm-bas-cta{background:var(--turquoise);color:#fff}
  .vm-bas-cta:active{background:var(--turquoise-fonce)}

  /* --- La feuille du menu, montee du bas --- */
  .vm-feuille{
    position:fixed;inset:0;z-index:99991;background:rgba(20,40,45,.5);
    opacity:0;pointer-events:none;transition:opacity .24s;
  }
  .vm-feuille.on{opacity:1;pointer-events:auto}
  .vm-feuille-in{
    position:absolute;left:0;right:0;bottom:0;background:#fff;
    border-radius:14px 14px 0 0;padding:26px 26px calc(26px + var(--vm-bas-h) + env(safe-area-inset-bottom));
    transform:translateY(14px);transition:transform .24s;
  }
  .vm-feuille.on .vm-feuille-in{transform:none}
  .vm-feuille-menu,.vm-feuille-langues{list-style:none;margin:0;padding:0}
  .vm-feuille-menu li{margin:0;border-bottom:1px solid var(--trait)}
  .vm-feuille-menu a{
    display:block;padding:15px 0;color:var(--encre);text-decoration:none;font-size:17px;
  }
  .vm-feuille-titre{
    margin:26px 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gris);
  }
  .vm-feuille-langues{display:flex;gap:10px}
  .vm-feuille-langues li{margin:0}
  .vm-feuille-langues a{
    display:block;padding:8px 14px;border:1px solid var(--trait);border-radius:20px;
    color:var(--gris);text-decoration:none;font-size:14px;
  }
  .vm-feuille-langues a.on{border-color:var(--turquoise);color:var(--turquoise-fonce)}

  /* Le volet a drapeaux appartient a l ordinateur. */
  body.vm-bas-actif .vm-lang{display:none !important}
}