/* =========================================================================
   REFONTE 2026 — SOCLE COMMUN (chargé sur TOUTES les pages)
   Après tokens.css, avant les feuilles de gabarit (home.css, …).
   Contenu : en-tête et navigation (dont les deux gabarits tablette),
   pied de page, composants transverses, correctifs d'accessibilité.
   Origine : règles « communes » extraites de structure-commune.css de la
   maquette validée le 07/08/2026 — les règles propres à la page d'accueil
   sont dans home.css. Les `!important` sont hérités et nécessaires : le
   thème 2016 pose des styles inline en JavaScript (homeMain, resize) et des
   `!important` Bootstrap qu'aucune cascade normale ne peut battre.
   ========================================================================= */

/* =========================================================================
   §S0 — POLICES (04/10/2026, décision de l'opérateur, E2 / D4, couple A)
   Cabin et Jost, licence SIL OFL (OFL-cabin.txt, OFL-jost.txt), hébergées dans
   le thème (library/fonts/), à la place du kit Adobe Fonts (haw2pwp), qui ne
   pouvait pas être repris au nom de l'hôtel et appelait use.typekit.net avant
   tout consentement. Fichiers à graisse variable de Google Fonts (Cabin v35,
   Jost v20 ; adresses et empreintes au journal du 04/10).
   Elles sont déclarées SOUS LES NOMS QUE LE CSS ATTEND : les déclarations
   font-family du site (thème hérité et refonte) ne changent pas.
     p22-underground   → Cabin (titrage ; graisses 400 à 700)
     brandon-grotesque → Jost  (texte ; graisses 100 à 900)
   Les descripteurs de @font-face n'acceptent pas les variables CSS : ce bloc
   est la seule exception à la règle des tokens, faute de pouvoir faire autrement.
   ========================================================================= */
@font-face{font-family:'p22-underground';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../../fonts/cabin-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'p22-underground';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../../fonts/cabin-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../../fonts/jost-latin.woff2') format('woff2');size-adjust:93%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../../fonts/jost-latin-ext.woff2') format('woff2');size-adjust:93%;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* =========================================================================
   §S1 — ACCESSIBILITÉ TRANSVERSE (neuf, refonte 2026)
   ========================================================================= */

/* lien d'évitement : premier élément focusable de chaque page (header.php) */
.skip-link{
  position:absolute;left:-10000px;top:0;z-index:200;
  background:var(--encre);color:var(--blanc);
  padding:12px 20px;font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:14px;letter-spacing:.08em;text-decoration:none;
}
.skip-link:focus{left:0}

/* focus visible au clavier, sans altérer la navigation à la souris */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--encre) !important;outline-offset:2px;
}

/* le libellé destiné aux lecteurs d'écran était rendu visible par le
   thème, en gris sur gris à l'intérieur du bouton du menu */
.navbar-toggle .sr-only{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
/* le thème ne lui donne pas toujours la classe `sr-only` : on vise tout
   span du bouton qui n'est pas une barre du burger */
#menu-toggle span:not(.icon-bar),
.navbar-toggle span:not(.icon-bar){
  position:absolute !important;width:1px !important;height:1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;
}

/* =========================================================================
   §S2 — COMPOSANT « FILET-SEUIL »
   Un seul dispositif graphique de titre de section, répété. C'est ce qui
   distingue une page dessinée d'une page assemblée. Réutilisable par tous
   les gabarits refondus.
   ========================================================================= */

.titre-bandeau{
  font-family:'brandon-grotesque',sans-serif;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--encre-douce);font-weight:600;
  margin:0 0 var(--dans-bloc);padding-top:14px;border-top:1px solid var(--filet);
}

/* =========================================================================
   §S3 — PIED DE PAGE (toutes pages)
   ========================================================================= */

/* grille du prefooter alignée sur la grille unique */
#prefooter .container-fluid,
#prefooter > .row{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}

/* iOS transforme le numéro de téléphone en lien : il doit hériter de la
   couleur du texte, jamais prendre celle des liens (invisible constaté
   accent sur accent) */
#prefooter a[href^="tel"]{color:inherit !important;text-decoration:none}

/* BARRE LÉGALE — texte à 1,20:1 sur fond noir, illisible sur les cinq
   formats. Le thème la peint en #2d2d2d sur #1f1f1f. */
footer.footer,
footer.footer .col-sm-12{color:#9a9a9a !important}
footer.footer a{color:#c9c9c9 !important;border-bottom:1px solid rgba(201,201,201,.4)}
footer.footer strong{color:#e6e6e6 !important}
/* 07/10 (option A de l'opérateur, retouchée) : le crédit de l'agence, « Kstudio » seul. Sur ordinateur, tout au
   bout à droite de la bande de 50 px, sans l'agrandir ; sur téléphone, juste sous la ligne, au centre. Plus petit
   que la ligne ; le gris le plus pâle qui reste AA sur la bande (--filet à 52 % dans --encre ≈ #888683 sur #1f1f1f :
   4,56:1) ; souligné seulement au survol et au focus. */
footer.footer .credit-agence a{
  color:color-mix(in srgb, var(--filet) 52%, var(--encre)) !important;
  font-size:9px;letter-spacing:.06em;text-transform:none;border-bottom:0 !important;text-decoration:none;
}
footer.footer .credit-agence a:hover,
footer.footer .credit-agence a:focus-visible{text-decoration:underline;text-underline-offset:2px}
/* à droite de la bande à partir de 992 px seulement : en 768, il chevauchait la fin de la ligne centrée */
@media (min-width:992px){
  footer.footer .credit-agence{position:absolute;top:0;right:var(--gouttiere);line-height:50px}
}
@media (max-width:991px){
  footer.footer .credit-agence{line-height:1;padding-top:calc(var(--dans-bloc) / 4)}
  footer.footer .credit-agence a{font-size:8px}
}
/* tablette : la bande du thème garde 50 px fixes jusqu'à 991 px ; elle grandit juste assez pour le crédit */
@media (min-width:768px) and (max-width:991px){
  footer.footer{height:auto !important;padding-bottom:calc(var(--dans-bloc) / 4)}
}

/* CIBLES TACTILES — plancher de 24px du critère WCAG 2.2, confort de 44px
   des recommandations Apple. Mesuré sur téléphone : liens du pied à 40x13.
   On agrandit la zone sensible sans toucher à l'apparence. */
@media (pointer:coarse){
  #prefooter .solinks li a,
  #prefooter .menu li a,
  #prefooter ul li a{display:inline-flex !important;align-items:center;min-height:44px !important}
  #prefooter .solinks li a{min-width:44px !important;justify-content:center}
  /* le lien de la barre légale ne fait que 10 à 12px de haut */
  footer.footer a{display:inline-flex !important;align-items:center;min-height:44px !important}
}

/* =========================================================================
   §S3bis — BANDEAU DE CONSENTEMENT (Moove GDPR, toutes pages)
   Les couleurs du bandeau sortent des réglages du plugin, imprimés en style
   inline depuis la base : la palette CSS ne les atteint pas. On les aligne
   ici sur le système (le réglage en base reste à reporter en admin : N4).
   ========================================================================= */

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content a.mgbutton,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content button.mgbutton,
#moove_gdpr_cookie_modal .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton,
#moove_gdpr_cookie_modal .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton{
  background-color:var(--encre) !important;
  border-color:var(--encre) !important;
  color:var(--blanc) !important;
  border-radius:0 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content a.mgbutton:hover,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content button.mgbutton:hover{
  background-color:transparent !important;color:var(--encre) !important;
}
#moove_gdpr_cookie_info_bar{border-top:1px solid var(--filet) !important}

/* =========================================================================
   §S4 — CALENDRIER PICKADATE (module de réservation, 4 gabarits)
   Fermé, `.picker__holder` reste rendu : 1120px de large, 157px de haut,
   `overflow-y:auto` et 631px de contenu. Il dessine donc une barre de
   défilement et une bande vide juste sous la réservation. Deux fois, car
   deux calendriers sont initialisés sur les mêmes champs (double
   initialisation relevée dans module-reservit-documentation.md §5).
   On ne le rend qu'à l'ouverture. */

.picker:not(.picker--opened) .picker__holder{display:none !important}

/* =========================================================================
   §S5 — EN-TÊTE, TABLETTE PAYSAGE (992 – 1199 px)
   Le logo est en position absolue et la navigation démarre au bord du
   conteneur, sans réservation d'espace : ils se chevauchaient.
   Défaut PRÉEXISTANT, constaté aussi sur le site en production.
   ========================================================================= */

@media (min-width:992px) and (max-width:1199px){
  /* l'en-tête se calait sur la hauteur de son contenu (97px) alors que le
     logo, en absolu, en demandait 103 : il débordait de 6px sur la photo.
     On lui donne une hauteur explicite et on y range le logo. */
  header{min-height:124px !important}
  header .navbar-brand{
    width:150px !important;height:58px !important;
    top:2px !important;left:0 !important;margin-left:0 !important;
    background-size:contain !important;background-position:left center !important;
  }
  header .navbar-header{position:relative;z-index:3}
  header .navbar-collapse{padding-left:168px}
  header .navbar-default .navbar-nav > li > a{
    font-size:11px !important;letter-spacing:0 !important;padding:10px 5px !important;
  }

  @media (pointer:coarse){
    header #shortcut ul li a{
      width:44px !important;height:44px !important;line-height:44px !important;
      display:inline-flex !important;align-items:center;justify-content:center;
    }
  }
}

/* =========================================================================
   §S7 — EN-TÊTE TÉLÉPHONE (< 768 px), TOUTES PAGES
   Reprise du registre validé sur la home (home-mobile.css) : logo mobile
   rétabli, burger rond encre. Sans cette section, les pages intérieures
   gardaient le burger carré du legacy (incohérence constatée sur iPhone).
   Le MÉCANISME d'ouverture du menu reste celui du thème — interdiction
   documentée d'y toucher.
   ========================================================================= */

@media (max-width:767px){
  header{position:relative !important;min-height:var(--header) !important;background:#fff}
  header .navbar{border:0 !important;margin:0 !important}
  header .navbar,
  header .navbar-header{position:static !important}
  header a.navbar-brand{display:none !important}
  header a.navbar-brand-mobile{
    display:block !important;position:absolute !important;
    top:14px !important;left:var(--gouttiere) !important;padding:0 !important;
    width:168px !important;height:46px !important;
    background-image:url(../../../images/logo_crychar_mobile-refonte.svg) !important;
    background-size:contain !important;background-repeat:no-repeat !important;
    background-position:left center !important;
    text-indent:-10000px !important;overflow:hidden !important;white-space:nowrap !important;
  }
  header #menu-toggle{
    display:block !important;position:absolute !important;
    top:14px !important;right:var(--gouttiere) !important;z-index:31;
    width:38px;height:38px;padding:0 !important;margin:0 !important;
    background:var(--encre) !important;border:1px solid var(--encre) !important;
    border-radius:100% !important;
  }
  header #menu-toggle .icon-bar{
    background:#fff !important;width:16px !important;height:2px !important;margin:3px auto !important;
  }
}

/* =========================================================================
   §S6 — EN-TÊTE, TABLETTE PORTRAIT (768 – 991 px)
   À 820px les 8 entrées de navigation ne tiennent pas sur une ligne et
   repassent sous le logo. Plutôt que de rogner la typographie jusqu'à
   l'illisible, on bascule sur le menu latéral, comme le téléphone.
   ========================================================================= */

@media (min-width:768px) and (max-width:991px){
  /* En-tête porté à 148px : il ne faisait que 87px, hauteur de son seul
     contenu en flux, alors que le logo (en absolu) descendait à 109 et le
     bouton du menu à 167. Les deux se retrouvaient posés sur la photo. */
  header{min-height:148px !important}

  /* MENU FERMÉ PAR DÉFAUT.
     Bootstrap force `.navbar-collapse.collapse{display:block !important}`
     au-dessus de 768px, pour afficher le menu horizontal du bureau. Ici on
     l'a transformé en panneau vertical flottant : sans annuler cette règle,
     il restait déployé en permanence, comme un menu ouvert que personne
     n'avait ouvert.
     Sur CE gabarit, l'ouverture passe bien par la classe `.in` de Bootstrap
     (`data-toggle="collapse"` sur le bouton) — contrairement au gabarit
     téléphone, qui a son propre mécanisme et où cette même règle casserait
     tout. D'où le cloisonnement strict par media query. */
  /* L'ouverture s'appuie sur body.menu-ouvert, posé par entete.js : la classe
     « in » de Bootstrap n'est jamais ajoutée, son JS n'étant pas chargé. Le
     panneau restait donc masqué et le bouton inopérant. */
  header .navbar-collapse.collapse{display:block !important}
  body.menu-ouvert header .navbar-collapse{transform:translateX(0) !important}
  /* La hauteur pleine demande ce sélecteur : « header .navbar-collapse » seul
     se faisait écraser et le panneau s'arrêtait à la hauteur de son contenu —
     406px sur 1080 — laissant les entrées flotter sur la photographie, le fond
     blanc s'interrompant avec lui. */
  body header .navbar-collapse.collapse,
  body.menu-ouvert header .navbar-collapse.collapse{
    height:100vh !important;min-height:100vh !important;
    overflow-y:auto !important;
    /* Le fond doit être forcé : le thème pose #999 sur .navbar-collapse et le
       recouvre d'un ::after blanc que nous neutralisons ici. Sans cela, la
       photographie transparaît derrière les libellés. */
    background:var(--blanc) !important;
  }
  header .navbar-collapse.collapse::after{display:none !important}

  header .navbar{border:0 !important}

  /* MENU DÉPLIÉ — LE MÊME QU'AU TÉLÉPHONE, et c'est tout l'enjeu.
     Ce gabarit posait un bandeau blanc pleine largeur qui tombait du haut et
     coupait la photographie en deux, les libellés perdus dans un vide de
     600px à leur droite. Rien ne justifiait deux menus différents : le
     panneau latéral du téléphone est plus sobre, il laisse voir l'image, et
     il existe déjà. On le rétablit, élargi pour la tablette.
     Le mécanisme legacy (position:fixed, largeur fixe, collé à droite) n'est
     borné par aucune media query : il suffisait de cesser de l'écraser. */
  header .navbar-collapse{
    padding:0 !important;   /* la marge vit sur les entrées, pas sur le panneau */
    position:fixed !important;top:0 !important;right:0 !important;left:auto !important;
    width:380px !important;height:100vh !important;max-height:none !important;
    background:var(--blanc);z-index:1032;border:0 !important;
    box-shadow:-14px 0 34px rgba(45,45,45,.13);
    transform:translateX(100%);transition:transform .28s ease;
  }
  header .navbar-collapse .navbar-nav{float:none !important;margin:0 !important;width:100%}
  header .navbar-collapse .navbar-nav > li{float:none !important;display:block !important}
  header .navbar-collapse .navbar-nav > li > a{
    display:block !important;padding:14px 0 !important;
    font-size:13px !important;letter-spacing:.08em !important;
    border-bottom:1px solid var(--filet);
  }
  header .navbar-collapse .navbar-nav > li:last-child > a{border-bottom:0}
  /* le thème pose le bouton à gauche, sous le logo, en fond transparent :
     il était invisible et la navigation inaccessible. */
  header{position:relative}
  header #menu-toggle{
    display:block !important;position:absolute !important;
    top:18px !important;right:var(--gouttiere) !important;left:auto !important;
    margin:0 !important;padding:0 !important;z-index:31;
    width:38px;height:38px;
    background:var(--encre) !important;border:1px solid var(--encre) !important;
    border-radius:100% !important;
  }
  header #menu-toggle .icon-bar{
    background:#fff !important;width:16px !important;height:2px !important;margin:3px auto !important;
  }
  header .navbar-brand{width:170px !important;height:70px !important;top:4px !important;left:0 !important;margin-left:0 !important}

  /* pastilles portées au confort tactile de 44px : il y a la place ici,
     contrairement au téléphone en paysage où la hauteur d'en-tête se paie
     directement sur la photo */
  @media (pointer:coarse){
    header #shortcut ul li a{
      width:44px !important;height:44px !important;line-height:44px !important;
      display:inline-flex !important;align-items:center;justify-content:center;
    }
  }
}

/* =========================================================================
   §S8 — MENU 2026 : SOUS-MENUS SIMPLES ET BOUTON « RÉSERVER »
   Le menu refondu (maquette client, août 2026) abandonne les mega-menus à
   trois colonnes : ses items ne portent pas la classe has-mega-menu, donc
   aucune sidebar n'est enregistrée et la colonne latérale sort vide. Le
   walker produit néanmoins toujours le markup à trois colonnes ; on le
   ramène ici à une liste déroulante sobre.
   Le sélecteur :has(.menu-side:empty) ne vise QUE ces sous-menus sans
   widget : les anciens menus, conservés en base pour le retour arrière,
   garderaient leur rendu d'origine.
   Le MÉCANISME d'ouverture reste celui du thème (JS legacy), intouché.
   ========================================================================= */

@media (min-width:768px){
  /* le mega-menu pleine largeur se calait sur le conteneur ; une liste
     déroulante doit s'ancrer sous SON entrée — le li était en static. */
  header .navbar-nav > li.dropdown:has(> .dropdown-menu .menu-side:empty){position:relative}
  header .navbar-nav > li > .dropdown-menu:has(.menu-side:empty){
    width:auto;min-width:250px;
    padding:calc(var(--dans-bloc) / 4) 0;
    background:var(--blanc);
    border:1px solid var(--filet);border-radius:0;
  }
  /* les deux colonnes de service du mega-menu n'ont plus lieu d'être */
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-titre,
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-side{display:none !important}
  /* la colonne utile reprend toute la largeur */
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) > li{
    width:100% !important;float:none !important;padding:0 !important;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav{
    list-style:none;margin:0;padding:0;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li{
    float:none;display:block;width:100%;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a{
    display:block;padding:10px calc(var(--dans-bloc) / 1.6);
    font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
    font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;
    color:var(--encre-douce);text-decoration:none;white-space:nowrap;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:hover,
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:focus{
    color:var(--encre);background:var(--creme);
  }
  /* le legacy préfixe chaque lien d'un chevron « › » : le registre 2026 s'en
     passe (un seul dispositif graphique, le filet-seuil) */
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a::before,
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a::after{
    content:none !important;display:none !important;
  }

  /* « Réserver » : encadré, comme sur la maquette — c'est l'action, pas une
     rubrique. Le chevron a disparu avec le correctif du walker. */
  header .navbar-default .navbar-nav > li.nav-reserver > a{
    border:1px solid var(--encre) !important;
    padding:9px 18px !important;margin-left:12px;
    color:var(--encre) !important;
  }
  header .navbar-default .navbar-nav > li.nav-reserver > a:hover,
  header .navbar-default .navbar-nav > li.nav-reserver > a:focus{
    background:var(--encre) !important;color:var(--blanc) !important;
  }
}

/* téléphone et tablette portrait : le menu est déplié dans le panneau, le
   bouton encadré y serait un corps étranger — il redevient une ligne. */
@media (max-width:991px){
  header .navbar-default .navbar-nav > li.nav-reserver > a{border:0 !important;margin-left:0}
}

/* =========================================================================
   §S9 — BOUTON DE RÉSERVATION PERMANENT (footer.php, toutes pages)
   Le client le veut « visible et fixe, toujours visible en permanence »
   (Excel du 26/08) mais « pas la barre de réservation brute » (appel) :
   un bouton posé, pas un bandeau. Il renvoie vers la page Réserver ; le
   module de réservation, lui, reste sur sa page.
   Placé AU-DESSUS du #scrollup du thème (fixed, 50px, coin bas droit) pour
   ne jamais le recouvrir.
   ========================================================================= */

.resa-flottant{
  position:fixed;right:17px;bottom:calc(84px + var(--bandeau-cookies));z-index:10001;
  display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 22px;
  background:var(--encre);color:var(--blanc) !important;
  border:1px solid var(--encre);
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none !important;
  box-shadow:0 2px 12px rgba(45,45,45,.18);
  transition:background .2s ease,color .2s ease;
}
.resa-flottant:hover,
.resa-flottant:focus{
  background:var(--blanc);color:var(--encre) !important;
}
.resa-flottant .icon{font-size:15px;line-height:1}

/* téléphone : le bouton se resserre pour ne pas manger la lecture, et
   descend au coin (le #scrollup y est masqué par le thème) */
@media (max-width:767px){
  .resa-flottant{
    right:14px;bottom:calc(14px + var(--bandeau-cookies));height:44px;padding:0 18px;
    font-size:12px;letter-spacing:.1em;
  }
}

/* impression : un bouton d'action n'a rien à faire sur papier */
@media print{
  .resa-flottant{display:none}
}


/* =========================================================================
   §S10 — AUCUN LOGO SUR LES PHOTOGRAPHIES (décision du 31/08/2026)
   Le thème de 2016 superpose la marque aux images à DEUX endroits. Les deux
   sont retirés : une photographie d'hôtel se montre entière.

   1. Le filigrane .post_icon. Il porte height:50% depuis l'origine. Tant que
      le bandeau n'avait pas de hauteur déclarée, 50% valait 0 et le
      pictogramme restait invisible — c'est l'état de la production. La
      refonte ayant donné 787px au bandeau, il s'est réveillé à 705x394,
      soit 26% de la surface, en travers du titre. Sur les gabarits Bacchus
      il est de surcroît en magenta, hors palette.

   2. Le fond back-crychar.gif des carrousels. Il est posé SOUS les
      diapositives : dès qu'une diapositive s'efface en fondu, le logo
      apparaît en plein cadre. On lui substitue un aplat de tokens, ce qui
      conserve le fond sombre déjà perçu sans la marque.

   Surcharge volontairement placée ici plutôt que dans le CSS minifié
   hérité, qui n'est pas notre source.
   ========================================================================= */

.post_icon{display:none}

#slider-home,
#slider-chambre{
  background-image:none;
  background-color:var(--encre);
}

/* =========================================================================
   §S11 — EN-TÊTE : TRANSPARENT SUR LA PHOTOGRAPHIE, PLEIN AU DÉFILEMENT
   (refonte de l'en-tête, lot 1 — 31/08/2026)

   La photographie est l'argument de vente d'un hôtel de montagne. Une barre
   blanche opaque lui prend 98px de hauteur sur le premier écran et la coupe
   d'un trait horizontal. L'en-tête se pose donc SUR l'image, transparent, et
   ne prend un fond plein qu'une fois le visiteur en train de lire.

   Deux classes, posées par library/js/refonte/entete.js :
     .nav--sur-heros  la page ouvre sur une photographie (pas un bandeau vide)
     .nav--defile     le visiteur a dépassé 80px

   Sans JS, aucune classe n'est posée : l'en-tête garde exactement le
   comportement d'avant. La dégradation est silencieuse et sûre.

   La bascule ne porte QUE sur background-color, box-shadow et color : jamais
   sur transform ni sur height, dont l'animation ferait tressauter la page
   sous le regard.
   ========================================================================= */

header.nav{
  transition:background-color .24s ease, box-shadow .24s ease;
}

/* ---- 1. L'en-tête sort du flux et se pose sur l'image ---- */
header.nav.nav--sur-heros{
  position:absolute !important;top:0;left:0;right:0;z-index:30;
  background:transparent !important;
  box-shadow:none !important;
}

/* Le voile de lisibilité vit sur un CALQUE, pas sur le fond de l'en-tête. Un
   dégradé ne s'anime pas : il disparaissait d'un coup au défilement pendant que
   le blanc montait en fondu, ce qui donnait l'impression d'un en-tête remplacé
   par un autre. Sur un calque, il s'efface en même temps que le blanc apparaît :
   les deux se croisent.

   z-index:0 et non -1 — à -1 il passait DERRIÈRE le bandeau photo, frère dans
   le flux, et ne rendait aucun pixel. Les enfants de l'en-tête montent à 1.

   Densité calibrée sur le pire cas du site : la page Accès, neige et ciel pâle,
   où le blanc tombait à 1,57:1. */
header.nav.nav--sur-heros::before{
  /* display et hauteur EXPLICITES : avec les seuls décalages, le pseudo-élément
     était calculé à 0x0 et ne rendait rien. */
  content:'';display:block;position:absolute;top:0;left:0;width:100%;height:190px;
  z-index:0;pointer-events:none;opacity:1;
  transition:opacity .24s ease;
  /* Densité RECALCULÉE le 01/09. La première version, arbitrée sur les quatre
     héros principaux — tous sombres — laissait 0,40 d'opacité à la hauteur du
     menu. Sur un bandeau CLAIR (neige, dégradé gris) le fond y restait à 154 et
     le menu blanc tombait à 2,81:1, pour un seuil de 4,5.
     Le calcul : du blanc sur fond X exige une luminance relative de X inférieure
     à 0,183, soit environ 118 en gris. Sur le pire cas — une photo blanche à
     255 — il faut donc 0,54 d'opacité à la hauteur du menu ; la valeur est
     portée à 0,58 pour garder une marge.
     La décroissance est resserrée en contrepartie : la photographie redevient
     franche dès 130px au lieu de s'éclaircir lentement sur toute la hauteur. */
  background:linear-gradient(to bottom,
      rgba(0,0,0,.64) 0px, rgba(0,0,0,.56) 70px,
      rgba(0,0,0,.20) 130px, rgba(0,0,0,0) 190px);
}
header.nav.nav--sur-heros.nav--defile::before{opacity:0}
header.nav.nav--sur-heros > *{position:relative;z-index:1}

/* Sur téléphone, le bandeau porte DÉJÀ son propre voile, plein écran et en
   dégradé montant. Les deux s'additionnaient en haut et dessinaient une bande
   sombre à la limite du mien. Le nôtre s'efface donc largement : il ne sert
   plus qu'à asseoir le logo, le reste étant tenu par le voile du héros. */
@media (max-width:767px){
  header.nav.nav--sur-heros::before{
    /* RELEVÉ le 01/09 : l'affaiblissement à 0,30 valait pour la home, dont le
       héros porte son propre voile. Sur une page intérieure à bandeau CLAIR il
       ne restait rien — le logo blanc tombait à 1,96:1 sur une photo de neige,
       et « HÔTEL-SPA ★★★★ » disparaissait dans les nuages.
       La densité remonte à ce que le logo exige, mais la course s'allonge à
       140px : la bande sombre que l'ancien réglage cherchait à éviter venait
       d'une coupure trop nette, pas de la densité elle-même. */
    height:140px;
    background:linear-gradient(to bottom,
        rgba(0,0,0,.60) 0px, rgba(0,0,0,.52) 46px,
        rgba(0,0,0,.18) 90px, rgba(0,0,0,0) 140px);
  }
}

/* Le contenu récupère la hauteur que l'en-tête ne prend plus. Les héros en
   100vh la retranchaient : ils la reprennent. Conditionné à la classe, pour
   qu'une page sans JS garde son calcul d'origine. */
body:has(header.nav.nav--sur-heros) #slider-home .es-slides > li,
body:has(header.nav.nav--sur-heros) .hero{height:100vh !important}

/* ---- 2. Lisibilité garantie sur n'importe quelle photographie ----
   Un voile dégradé, très bas, sous l'en-tête seulement. Il ne se voit pas
   sur une image sombre et sauve le contraste sur un ciel clair — le cas du
   héros d'hiver, où le blanc sur blanc serait illisible. */
/* Le voile fut d'abord posé en ::after z-index:-1 : il passait derrière le
   bandeau photo et ne rendait AUCUN pixel — vérifié au rouge opaque. Il est
   désormais le fond de l'en-tête, peint derrière son propre contenu. */
/* Le voile seul ne suffit pas sur une photographie claire — plafond de bois
   blond d'une chambre, mur du spa : mesuré à 1,3:1 au pire pixel. Une ombre
   portée basse rétablit le contraste SOUS chaque glyphe, là où il compte,
   sans assombrir l'image davantage. Elle disparaît avec le fond plein. */
header.nav.nav--sur-heros .navbar-default .navbar-nav > li > a,
header.nav.nav--sur-heros #shortcut ul li a,
header.nav.nav--sur-heros .navbar-brand,
header.nav.nav--sur-heros a.navbar-brand-mobile{
  text-shadow:0 1px 6px rgba(0,0,0,.78);
}
header.nav.nav--sur-heros .navbar-brand,
header.nav.nav--sur-heros a.navbar-brand-mobile{
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.6));
}
header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li > a,
header.nav.nav--sur-heros.nav--defile #shortcut ul li a{text-shadow:none}
header.nav.nav--sur-heros.nav--defile .navbar-brand,
header.nav.nav--sur-heros.nav--defile a.navbar-brand-mobile{filter:none}

/* ---- 3. Logo et navigation en clair sur l'image ---- */
header.nav.nav--sur-heros .navbar-brand{
  background-image:url(../../../images/logo_crychar-blanc.svg) !important;
}
header.nav.nav--sur-heros a.navbar-brand-mobile{
  background-image:url(../../../images/logo_crychar_mobile-blanc.svg) !important;
}
header.nav.nav--sur-heros .navbar-default .navbar-nav > li > a,
header.nav.nav--sur-heros #shortcut ul li a{
  color:var(--blanc) !important;
}
/* Le chevron est une icône de police avec sa PROPRE couleur : colorer le lien
   ne l'atteignait pas. Il restait en encre sur une photographie sombre, donc
   invisible — et 11px n'aidaient pas. Il hérite désormais du lien et gagne un
   point, sans devenir bavard. */
header.nav.nav--sur-heros .navbar-default .navbar-nav > li > a i,
header.nav.nav--sur-heros .navbar-default .navbar-nav > li > a .icon{
  color:inherit !important;font-size:12px !important;
  opacity:.85;transition:opacity .16s ease;
}
header.nav.nav--sur-heros .navbar-default .navbar-nav > li > a:hover i,
header.nav.nav--sur-heros .navbar-default .navbar-nav > li.open > a i{opacity:1}

/* LE CHEVRON COUCHÉ SUR LE CÔTÉ, enfin trouvé. Le thème applique au survol
   « transform:rotate(90deg) » : un quart de tour, qui couche le chevron bas
   vers la gauche au lieu de le retourner. D'où les trois orientations qui
   cohabitaient — bas fermé, GAUCHE ouvert, droite pour les sous-entrées.
   Un demi-tour, et le système redevient univoque : bas fermé, haut ouvert.
   Le défaut ne se voit qu'au survol RÉEL — ni le clic ni un événement
   synthétique ne le reproduisent, ce qui l'avait rendu introuvable. */
header .navbar-default .navbar-nav > li > a:hover i,
header .navbar-default .navbar-nav > li.open > a i{
  transform:rotate(180deg) !important;
  transition:transform .2s ease;
}
header .navbar-default .navbar-nav > li > a i{transition:transform .2s ease}
/* le bouton de réservation n'a pas de chevron : rien à retourner */
header .navbar-default .navbar-nav > li.nav-reserver > a:hover i{transform:none !important}
header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li > a i,
header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li > a .icon{
  color:inherit !important;
}
/* le bouton de menu du téléphone s'inverse : cercle clair, barres sombres */
header.nav.nav--sur-heros #menu-toggle{
  background:var(--blanc) !important;border-color:var(--blanc) !important;
}
header.nav.nav--sur-heros #menu-toggle .icon-bar{background:var(--encre) !important}

/* ---- 4. Au défilement : fond plein, tout revient à l'encre ---- */
header.nav.nav--sur-heros.nav--defile{
  position:fixed !important;
  background:var(--blanc) !important;
  box-shadow:0 1px 0 var(--filet);
}
header.nav.nav--sur-heros.nav--defile .navbar-brand{
  background-image:url(../../../images/logo_crychar-refonte.svg) !important;
}
header.nav.nav--sur-heros.nav--defile a.navbar-brand-mobile{
  background-image:url(../../../images/logo_crychar_mobile-refonte.svg) !important;
}
header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li > a,
header.nav.nav--sur-heros.nav--defile #shortcut ul li a{
  color:var(--encre) !important;
}
header.nav.nav--sur-heros.nav--defile #menu-toggle{
  background:var(--encre) !important;border-color:var(--encre) !important;
}
header.nav.nav--sur-heros.nav--defile #menu-toggle .icon-bar{background:var(--blanc) !important}

/* Le menu déplié doit rester lisible quel que soit l'état de l'en-tête :
   il a son propre fond, ses entrées reprennent l'encre. */
header.nav.nav--sur-heros .navbar-collapse.in .navbar-nav > li > a,
header.nav.nav--sur-heros .dropdown-menu a{color:var(--encre) !important}

/* Les conteneurs internes de l'en-tête portent leurs propres fonds blancs,
   hérités du thème : la barre de navigation et la liste des raccourcis. Sans
   cela, une bande blanche subsiste sous le logo et les libellés du menu, en
   blanc, disparaissent dessus. Constaté en regardant la capture — aucune
   sonde ne le signalait, l'en-tête lui-même étant bien transparent. */
header.nav.nav--sur-heros .navbar,
header.nav.nav--sur-heros .navbar-default,
header.nav.nav--sur-heros #shortcut,
header.nav.nav--sur-heros #shortcut ul{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
header.nav.nav--sur-heros.nav--defile .navbar,
header.nav.nav--sur-heros.nav--defile .navbar-default,
header.nav.nav--sur-heros.nav--defile #shortcut,
header.nav.nav--sur-heros.nav--defile #shortcut ul{
  background:var(--blanc) !important;
}

/* L'en-tête étant sorti du flux, le bandeau remonte sous lui et les commandes
   posées dans son angle supérieur — bouton « Retour » des fiches chambre,
   icône plein écran des diaporamas — se retrouvaient SOUS le logo et sous les
   raccourcis. Constaté sur capture, invisible à la mesure : les deux éléments
   avaient des coordonnées parfaitement valides, ils se superposaient. */
body:has(header.nav.nav--sur-heros) .retour-chambre,
body:has(header.nav.nav--sur-heros) #gofull{
  top:calc(var(--header) + 16px) !important;
}

/* Le héros mobile calait son accroche et sa hauteur en retranchant l'en-tête,
   qui occupait alors le flux. L'en-tête passé en surimpression, le contenu
   remonte d'autant : l'accroche venait toucher le logo et le bandeau perdait
   la hauteur de l'écran. On lui rend l'un et l'autre. */
@media (max-width:767px){
  body:has(header.nav.nav--sur-heros) .post_img,
  body:has(header.nav.nav--sur-heros) .hero{height:100vh !important}
  body:has(header.nav.nav--sur-heros) .hero-accroche{
    top:calc(var(--header) + 96px) !important;
  }
}

/* =========================================================================
   §S12 — L'ACTION DE RÉSERVATION ET LE TÉLÉPHONE
   (refonte de l'en-tête, lot 2 — 31/08/2026)

   Un hôtel qui vit de la réservation directe n'a qu'une action dans son
   en-tête. Elle porte le SEUL aplat de la barre : quatre pastilles sociales
   pleines pesaient jusqu'ici plus lourd qu'elle, qui n'avait qu'un filet.

   Le téléphone entre à ses côtés. C'est un canal sans commission, et la
   réassurance qui décide une clientèle hésitant à payer en ligne. Il n'était
   cliquable nulle part sur le site.
   ========================================================================= */

@media (min-width:992px){
  /* ---- Le bouton : aplat, pas contour ---- */
  header .navbar-default .navbar-nav > li.nav-reserver > a{
    background:var(--encre) !important;
    border:1px solid var(--encre) !important;
    color:var(--blanc) !important;
    padding:11px 22px !important;
    min-height:44px;display:inline-flex !important;align-items:center;
    transition:background-color .16s ease, color .16s ease, border-color .16s ease;
  }
  header .navbar-default .navbar-nav > li.nav-reserver > a:hover,
  header .navbar-default .navbar-nav > li.nav-reserver > a:focus{
    background:transparent !important;color:var(--encre) !important;
  }

  /* Sur la photographie, l'aplat s'inverse : c'est le blanc qui accroche
     l'œil sur une image, et le texte encre reste lisible quel que soit le
     cliché — un bouton sombre sur une photo sombre disparaîtrait. */
  header.nav.nav--sur-heros .navbar-default .navbar-nav > li.nav-reserver > a{
    background:var(--blanc) !important;
    border-color:var(--blanc) !important;
    color:var(--encre) !important;
    text-shadow:none !important;
  }
  header.nav.nav--sur-heros .navbar-default .navbar-nav > li.nav-reserver > a:hover,
  header.nav.nav--sur-heros .navbar-default .navbar-nav > li.nav-reserver > a:focus{
    background:transparent !important;color:var(--blanc) !important;
  }
  header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li.nav-reserver > a{
    background:var(--encre) !important;border-color:var(--encre) !important;
    color:var(--blanc) !important;
  }
  header.nav.nav--sur-heros.nav--defile .navbar-default .navbar-nav > li.nav-reserver > a:hover{
    background:transparent !important;color:var(--encre) !important;
  }

  /* Le focus clavier ne se confond avec aucun état de survol. */
  header .navbar-default .navbar-nav > li.nav-reserver > a:focus-visible{
    outline:2px solid currentColor;outline-offset:2px;
  }
}

/* ---- Le téléphone ---- */
.tel-entete{list-style:none}
.tel-entete a{
  display:inline-flex !important;align-items:center;gap:7px;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.06em;white-space:nowrap;
  color:var(--encre);text-decoration:none;
  width:auto !important;height:auto !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;line-height:1 !important;
}

/* La mention « Meilleur tarif garanti » n'est PAS reprise sous le bouton :
   le module de réservation la porte déjà, à quelques centimètres. La répéter
   affaiblirait les deux. */
.tel-entete a:hover,
.tel-entete a:focus{color:var(--encre-douce);text-decoration:none}
.tel-entete .icon{font-size:14px;line-height:1}
/* Sur les pages SANS bandeau photographique, l'en-tête est opaque et le
   téléphone y restait en crème sur blanc : 1,19:1, illisible. La couleur
   venait de « #shortcut ul li a » du thème, dont l'identifiant battait la
   classe posée plus haut. Le sélecteur reprend donc l'identifiant.
   Relevé le 01/09 ; le « EN » voisin n'était pas touché (5,83:1). */
#shortcut .tel-entete a,
header.nav .tel-entete a{color:var(--encre)}

header.nav.nav--sur-heros .tel-entete a{color:var(--blanc) !important}
header.nav.nav--sur-heros.nav--defile .tel-entete a{color:var(--encre) !important}

/* Sous 992px la barre se resserre : le libellé cède, l'icône reste, et la
   cible garde ses 44px — c'est là qu'on appelle vraiment. */
@media (max-width:991px){
  .tel-entete a span{display:none}
  .tel-entete a{min-width:44px;min-height:44px;justify-content:center}
}

/* =========================================================================
   §S13 — LES MENUS : UN SEUL SYSTÈME D'INDICATEURS, UN PANNEAU RATTACHÉ
   (refonte de l'en-tête, lot 4 — 31/08/2026)

   Trois orientations de chevron cohabitaient dans la même interface : bas pour
   une rubrique fermée, GAUCHE pour une rubrique ouverte, droite devant les
   sous-entrées du menu téléphone. Un système d'indicateurs qui se contredit
   n'indique plus rien.

   Le glyphe est FORCÉ dans chaque état plutôt que corrigé à sa source : la
   bascule vient du JS hérité du thème, qu'on ne touche pas.
   ========================================================================= */

@media (min-width:992px){
  /* CHEVRON — NON TRAITÉ, et voici pourquoi. Forcer le glyphe par « content »
     le VIDE au lieu de le changer : l'élément <i class="icon icon-down"> hérite
     de p22-underground, la police de titrage, et non de la fonte d'icônes.
     Le glyphe demandé n'y existe pas. Corriger cela suppose de comprendre d'où
     vient la bascule vers icon-left, qui est dans le JS hérité du thème — hors
     du périmètre de ce lot, et interdit d'accès sans précaution. Constaté et
     laissé en l'état plutôt que cassé. */

  /* La rubrique ouverte se signale. Sans cela, rien ne dit d'où vient le
     panneau — c'était le défaut le plus désorientant du menu. */
  header .navbar-nav > li.dropdown > a{position:relative}
  header .navbar-nav > li.dropdown > a::after{
    content:'';position:absolute;left:5px;right:5px;bottom:2px;height:2px;
    background:currentColor;opacity:0;transition:opacity .16s ease;
  }
  header .navbar-nav > li.dropdown.open > a::after,
  header .navbar-nav > li.dropdown:hover > a::after{opacity:1}
  /* le bouton de réservation n'est pas une rubrique : pas de filet */
  header .navbar-nav > li.nav-reserver > a::after{content:none !important}

  /* Le panneau s'aligne sur le bord gauche de SON entrée, sans décalage
     hérité, et cesse de s'étendre sous l'entrée voisine. */
  header .navbar-nav > li.dropdown > .dropdown-menu{
    left:0 !important;right:auto !important;margin-top:0 !important;
  }
}

/* PAS de règle de fond sur le panneau mobile, et c'est délibéré. Une sonde le
   mesurait à rgb(153,153,153), ce qui ressemblait à une régression du lot 1 :
   en réalité le thème pose #999 sur .navbar-collapse ET un ::after BLANC
   OPAQUE qui le recouvre entièrement. Le panneau est blanc à l'écran. La règle
   correctrice écrite ici visait « .in », classe que ce menu n'emploie pas :
   elle était morte, elle est retirée. Mesurer backgroundColor ne dit pas ce
   qui est rendu par-dessus. */

/* =========================================================================
   §S14 — LE PANNEAU DE MENU DU TÉLÉPHONE
   (refonte de l'en-tête, lot 5 — 31/08/2026)

   Le parti pris du thème est conservé : le panneau n'occupe que la droite de
   l'écran et laisse voir la photographie. C'est élégant et peu répandu.

   Ce qui change : la fermeture rentre DANS le panneau, l'action de réservation
   cesse d'être la cinquième ligne d'une liste, et le bas du panneau — vide sur
   40 % de sa hauteur — accueille les coordonnées de l'hôtel.

   L'état ouvert est signalé par body.menu-ouvert, posé par entete.js d'après la
   largeur réelle du panneau : le thème ne marque rien dans le DOM.
   ========================================================================= */

@media (max-width:991px){
  /* La fermeture entre dans le panneau. Le thème la déplaçait à sa gauche,
     où elle flottait entre la photographie et le panneau sans appartenir à
     l'un ni à l'autre. */
  body.menu-ouvert #menu-toggle{
    left:auto !important;right:16px !important;top:16px !important;
    background:var(--encre) !important;border-color:var(--encre) !important;
    z-index:1040 !important;
  }
  body.menu-ouvert #menu-toggle .icon-bar{background:var(--blanc) !important}

  /* Le panneau respire par le haut. La réserve est PERMANENTE et non
     conditionnée à body.menu-ouvert : ce drapeau est posé par le JS 60ms après
     le clic, si bien que le menu s'ouvrait d'abord et que les entrées
     sautaient vers le bas ensuite. Le panneau étant hors écran quand il est
     fermé, rien ne se voit. */
  .navbar-collapse .nav{padding-top:72px !important}

  /* Les libellés reviennent à l'encre DANS le panneau. L'en-tête posé sur la
     photographie les met en blanc ; le panneau, lui, est blanc. Sans cette
     règle ils y sont invisibles — constaté sur capture du menu ouvert, que
     seules une ouverture provoquée et une vue prise ensuite révèlent. */
  body.menu-ouvert header.nav .navbar-collapse .nav > li > a,
  body.menu-ouvert header.nav .navbar-collapse .dropdown-menu a,
  body.menu-ouvert header.nav .navbar-collapse .nav > li > a i{
    color:var(--encre) !important;text-shadow:none !important;
  }
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-reserver > a{
    color:var(--blanc) !important;
  }

  /* RÉSERVER cesse d'être une rubrique. Aplat pleine largeur, détaché des
     entrées par une respiration : c'est une action, pas une destination. */
  body.menu-ouvert .navbar-collapse .nav > li.nav-reserver{
    margin-top:var(--dans-sujet) !important;padding:0 16px !important;
  }
  body.menu-ouvert .navbar-collapse .nav > li.nav-reserver > a{
    display:block !important;text-align:center !important;
    background:var(--encre) !important;color:var(--blanc) !important;
    padding:14px 18px !important;min-height:48px;
    letter-spacing:.12em !important;
  }

  /* UX-02 (06/10) : l'autre langue, au bas du panneau, sous « Réserver », partout où ce panneau sert (jusqu'à
     991 px) : ouvert, il recouvre la ligne utilitaire de l'en-tête et son lien de langue. */
  /* alignée sur les rubriques ; « Réserver » n'étant plus le dernier élément, son filet du bas est retiré */
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-reserver,
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-langue,
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-tel{border-bottom:0 !important}
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-langue > a{
    display:block !important;padding-top:calc(var(--dans-bloc) / 2) !important;padding-bottom:calc(var(--dans-bloc) / 2) !important;border:0 !important;
    font-size:13px !important;font-weight:700;letter-spacing:.14em !important;
    color:var(--encre) !important;text-decoration:underline;text-underline-offset:4px;
  }

  /* Les coordonnées comblent le vide du bas et donnent le canal direct. UX-07 (07/10) : un vrai lien d'appel
     (functions.php), et non plus un texte posé en CSS, ni cliquable ni sélectionnable ; cible de 44 px. */
  body.menu-ouvert header.nav .navbar-collapse .nav > li.nav-tel > a{
    display:flex !important;align-items:center;min-height:44px;padding-top:0 !important;padding-bottom:0 !important;border:0 !important;
    font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
    font-size:12px !important;letter-spacing:.08em !important;line-height:1.7;text-transform:none !important;
    color:var(--encre-douce) !important;
  }
}

/* =========================================================================
   §S15 — LA LIGNE UTILITAIRE
   (refonte de l'en-tête, lot 3 bis — 31/08/2026)

   Trois éléments, trois grammaires : une pastille noire pleine, un texte à
   icône, un cercle en contour. Et une hiérarchie fausse — la pastille pesait
   autant qu'un bouton d'action pour le lien le moins stratégique, tandis que
   le téléphone, seul élément commercialement utile de la ligne, était le plus
   discret des trois.

   La ligne haute devient ce qu'elle doit être : utilitaire, homogène, SANS
   AUCUN APLAT. Le seul aplat de l'en-tête est le bouton de réservation ; s'il
   en existe un second, l'œil ne sait plus où aller.

   La galerie photos a quitté cette ligne pour le pied de page : c'est un
   contenu éditorial, pas un utilitaire, et une icône muette ne la désignait
   à personne.
   ========================================================================= */

header #shortcut ul li a,
header #shortcut ul li > span,
header #shortcut .lang-item a{
  background:transparent !important;
  border:0 !important;border-radius:0 !important;
  width:auto !important;height:auto !important;
  padding:0 !important;line-height:1 !important;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:12px !important;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
/* les entrées de la ligne partagent une seule ligne de base et un seul écart */
header #shortcut ul{
  display:flex;align-items:center;gap:22px;justify-content:flex-end;
  /* la ligne s'arrête sur le MÊME bord que le bouton de réservation, dessous.
     La gouttière la poussait 80px trop à gauche ; sans padding du tout, le
     sélecteur de langue sortait de l'écran. */
  padding-right:15px !important;margin:0 !important;
}
header #shortcut ul li{float:none !important;margin:0 !important;padding:0 !important;list-style:none}

/* Le téléphone prend la première place : c'est le seul canal de réservation
   de cette ligne, et il ne coûte aucune commission. */
.tel-entete a{font-size:13px !important;letter-spacing:.04em !important}

/* La langue perd son cercle : deux lettres n'ont pas besoin d'un ornement. */
header #shortcut .lang-item a{opacity:.72}
header #shortcut .lang-item a:hover{opacity:1}

/* Le pied de page accueille la galerie, en clair. */
.lien-galerie a{text-decoration:underline}

/* =========================================================================
   §S16 — LE LOGO SUR LA GRILLE
   (refonte de l'en-tête — 01/09/2026)

   Le thème posait le logo en top:-60px / left:-10px, ancré par des décalages
   négatifs : 260x100 dans un en-tête de 90, il débordait de 14px AU-DESSUS de
   l'écran et se trouvait rogné. Aucune relation non plus avec le menu, calé
   46px plus bas.

   Il est désormais centré verticalement dans l'en-tête et aligné à gauche sur
   le même bord que le bouton de réservation à droite : l'en-tête a deux bords,
   et ils se répondent.
   ========================================================================= */

@media (min-width:1200px){
  header .navbar-brand{
    /* 208x80 : le logo d'un 4★ doit avoir de la présence. Le thème le posait
       à 260x100, trop grand pour un en-tête de 90 — il en sortait par le haut.
       Celui-ci tient avec 5px de marge haute et basse. */
    width:208px !important;height:80px !important;
    /* Le logo se positionne sur NAV.navbar, en position:relative, qui commence
       46px sous le haut de l'en-tête et 15px de son bord gauche. Pour le poser
       à 12px du haut et 15px du bord réels, il faut retrancher ces décalages :
       12-46 = -34 et 15-15 = 0. */
    top:-41px !important;left:0 !important;
    margin:0 !important;
    background-size:contain !important;
    background-position:left center !important;
    transition:none !important;   /* le thème l'animait en .8s : un logo ne bouge pas */
  }
  /* L'en-tête compacté au défilement resserre le logo d'autant. */
  header.nav.nav--sur-heros.nav--defile .navbar-brand{
    width:172px !important;height:66px !important;top:-34px !important;
  }
}

/* =========================================================================
   §S17 — LE PANNEAU DÉROULANT : ÉPURÉ, PAS SIMPLE
   (refonte de l'en-tête — 01/09/2026)

   Le panneau tenait de la liste de sélection : une bordure de 1px qui
   l'enfermait dans une boîte, un fond blanc pur, un padding serré, et un survol
   qui remplissait toute la ligne de crème. C'est le vocabulaire d'un formulaire,
   pas d'un hôtel.

   On lui applique le dispositif retenu pour la page d'accueil en août — le
   filet-seuil — et on lui donne de l'air. L'épure vient de ce qu'on retire :
   la bordure, les fonds pleins, les filets entre chaque entrée. Le caractère
   vient de ce qui reste : un filet qui se déploie à gauche de l'entrée visée,
   et une respiration franche.
   ========================================================================= */

@media (min-width:992px){
  header .navbar-nav > li > .dropdown-menu:has(.menu-side:empty){
    min-width:268px !important;
    padding:18px 0 20px !important;
    background:var(--creme) !important;      /* la crème de la palette, pas du blanc nu */
    border:0 !important;
    box-shadow:0 14px 34px rgba(45,45,45,.13) !important;
  }

  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a{
    position:relative;
    padding:12px 28px 12px 30px !important;
    font-size:12px !important;letter-spacing:.13em !important;
    color:var(--encre-douce) !important;
    background:transparent !important;
    transition:color .18s ease, padding-left .18s ease;
  }

  /* Le filet-seuil : il se déploie depuis le bord, l'entrée s'écarte d'un
     cran. Aucun aplat — la couleur seule marque la cible. */
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a::before{
    content:'';position:absolute;left:14px;top:50%;
    width:0;height:1px;background:var(--encre);
    transition:width .22s ease;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:hover,
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:focus{
    color:var(--encre) !important;background:transparent !important;
    padding-left:42px !important;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:hover::before,
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li > a:focus::before{
    width:16px;
  }

  /* Plus de filet entre chaque entrée : c'est l'air qui les sépare. */
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li{
    border:0 !important;
  }
  header .navbar-nav .dropdown-menu:has(.menu-side:empty) .menu-nav > li + li{
    margin-top:2px !important;
  }
}


/* =========================================================================
   §S18 — LE LOGO NE S'ANIME PLUS
   Le thème pose « transition:all .8s ease-in-out » sur .navbar-brand. À chaque
   changement de dimensions — et donc à CHAQUE ROTATION D'UNE TABLETTE — la
   largeur et la hauteur du logo sont animées : il se déforme visiblement le
   temps de l'animation. §S16 l'avait neutralisée au-delà de 1200px seulement,
   or les tablettes sont en dessous. Un logo ne s'anime pas.
   ========================================================================= */
header .navbar-brand,
header a.navbar-brand-mobile{transition:none !important}

/* Le logo était calé trop bas sur tablette : y 48→106 dans un en-tête de 124
   en paysage, y 69→139 dans 148 en portrait — décentré vers le bas dans les
   deux cas, et débordant sous la ligne du menu. Il se réfère à NAV.navbar, en
   position:relative, qui démarre 46px (paysage) ou 65px (portrait) sous le haut
   de l'en-tête : les valeurs ci-dessous retranchent ce décalage pour obtenir un
   centrage réel. */
@media (min-width:992px) and (max-width:1199px){
  header .navbar-brand{top:-13px !important}
}
@media (min-width:768px) and (max-width:991px){
  header .navbar-brand{top:-26px !important}
}


/* =========================================================================
   §S19 — MARGE DU PANNEAU, ET LE BOUTON FLOTTANT QUI S'EFFACE
   (refonte de l'en-tête — 01/09/2026)
   ========================================================================= */

/* Les entrées du panneau touchaient le bord gauche : le panneau porte
   « padding:0 » pour que ses filets aillent d'un bord à l'autre, mais la marge
   doit alors vivre sur les entrées elles-mêmes. Elle avait disparu avec lui. */
@media (max-width:991px){
  header .navbar-collapse .nav > li > a,
  header .navbar-collapse .nav > li > .dropdown-menu a{
    padding-left:34px !important;padding-right:28px !important;
  }
  header .navbar-collapse .nav > li.nav-reserver{
    padding-left:28px !important;padding-right:28px !important;
  }
  header .navbar-collapse .nav::after{padding-left:34px !important}
  /* les filets de séparation gardent, eux, la pleine largeur du panneau */
  header .navbar-collapse .nav > li{padding:0 !important}
}

/* LE BOUTON FLOTTANT NE DOUBLE PLUS CELUI DE L'EN-TÊTE.
   Depuis le lot 1, l'en-tête passe en position:fixed au défilement : son bouton
   RÉSERVER reste donc visible en permanence sur ordinateur. Le bouton flottant
   y répétait la même action à quelques centimètres, deux aplats sombres pour
   une seule intention.
   Sous 992px il garde tout son sens : l'en-tête n'y porte pas de bouton, celui
   du menu n'étant atteignable qu'une fois le panneau ouvert. */
@media (min-width:992px){
  .resa-flottant{display:none !important}
}

/* =========================================================================
   §S20 — L'INTRODUCTION DES PAGES À VIGNETTES (fil d'Ariane + titre)
   Le fil d'Ariane vivait dans « contenu-single », qui lui appliquait 72px en
   haut et 120 en bas : 192px pour une ligne. Il partage désormais un bloc
   unique avec le titre de section, sur la grille du site.
   « clear » n'est pas décoratif : le bandeau qui précède est flotté, et sans
   lui la boîte du titre s'ouvrait en haut de page pour se fermer sous la
   photographie — 851px de haut pour un texte de 24.
   ========================================================================= */

section.intro-chambres{
  clear:both;float:none;
  max-width:var(--largeur);margin:0 auto !important;
  /* rien en bas : le bloc annoncé porte déjà sa propre respiration en haut,
     et les deux s'additionnaient — 104px entre un titre et ce qu'il titre. */
  padding:var(--dans-sujet) var(--gouttiere) 0 !important;
}
section.intro-chambres #breadcrumbs{
  margin:0 0 var(--dans-bloc) !important;padding:0 !important;
}
section.intro-chambres .titre-chambres{
  margin:0 !important;padding:0;
  font-family:'p22-underground',Helvetica,Arial,sans-serif;
  font-size:24px;line-height:1.25;color:var(--encre);
}
@media (max-width:767px){
  section.intro-chambres .titre-chambres{font-size:20px}
}

/* =========================================================================
   §S21 — LE CHEVRON DE DESCENTE, QUEL QUE SOIT LE GABARIT
   Le thème le style en énumérant les gabarits un par un :
     « .post_img a.godown, body.home a.godown »
     « body.page-template-page-slider a.godown, body.single-room a.godown »
   Un gabarit hors de cette liste le perd entièrement. C'est ce qui est arrivé
   à /hotel/chambres/ : la production y sert un « .post_img », le chantier un
   slider — plus aucun sélecteur ne mordait, et le chevron retombait en
   position statique, sans bordure ni rondeur, en bas à gauche.
   Repli générique, volontairement de faible spécificité : les quatre règles
   ci-dessus la battent, les pages qui fonctionnent ne bougent pas, et un
   gabarit oublié est désormais couvert d'office.
   ========================================================================= */

a.godown{
  position:absolute;bottom:var(--dans-bloc);left:50%;
  transform:translate(-50%,0);
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:100%;
  border:1px solid var(--blanc);color:var(--blanc);
  transition:background .2s ease,color .2s ease;
}
a.godown:hover,a.godown:focus{background:var(--blanc);color:var(--encre)}

/* =========================================================================
   §S22 — LE CHEVRON PASSE DEVANT LES DIAPOSITIVES
   Sans profondeur déclarée, il partageait le plan des diapositives du slider
   et de sa pagination (z-index:3) : selon la phase de transition, une image
   lui passait devant et le rond apparaissait voilé de gris. Il monte au-dessus
   du slider, et reste très en dessous de l'en-tête (z-index:30).
   ========================================================================= */

a.godown{z-index:4}

/* =========================================================================
   §S23 — LE PREMIER ÉLÉMENT D'UN CONTENU N'AJOUTE PAS SA MARGE
   La marge haute d'un titre est faite pour le détacher de ce qui le précède.
   En tête de bloc, elle n'a rien à détacher : elle s'ajoute au padding du
   conteneur. Sur la page Chambres, 120px de padding et 72 de marge donnaient
   192px de vide avant le premier mot.
   Aucune autre page n'est concernée aujourd'hui — toutes commencent par un
   élément à marge nulle — mais la règle protège celles à venir.
   ========================================================================= */

.post_content > *:first-child{margin-top:0 !important}

/* =========================================================================
   §S24 — LES MISES EN AVANT : LE GUILLEMET NE MORD PLUS LE TEXTE
   Le guillemet décoratif est un « ::before » de 50px posé en absolu à
   gauche, dans un bloc qui ne réservait que 20px de retrait : il recouvrait
   la première lettre. Visible sur toutes les mises en avant du site, pas
   seulement sur la page Chambres.
   Le retrait est porté à la mesure du guillemet, qui est légèrement réduit
   et remonté pour s'aligner sur la première ligne.
   ========================================================================= */

#contenu blockquote{
  padding-left:calc(var(--dans-sujet) - 8px);
  position:relative;
}
#contenu blockquote::before{
  font-size:44px;
  top:-2px;
  line-height:1;
}

/* =========================================================================
   §S25 — LA LIGNE DE CAUTION
   « Membre de la sélection Authentic Hotels » n'est pas une citation : c'est
   l'hôtel qui parle de lui-même. La mise en forme en bloc de citation, avec
   son guillemet, était un contresens. Une ligne de caution, sobre, portant
   le logo du label et menant à lui.
   ========================================================================= */

.caution{
  display:flex;align-items:center;gap:18px;
  margin:var(--dans-sujet) 0 !important;padding-top:var(--dans-bloc);
  border-top:1px solid var(--filet);
}
.caution::before{
  content:'';flex:0 0 auto;
  width:52px;height:52px;
  /* La version « -refonte » est la variante sombre : l'originale est en
     fill:#FFFFFF, invisible sur fond clair. C'est celle qu'emploie déjà
     le pied de page. */
  background:url(../../../images/authentichotel-refonte.svg) no-repeat center/contain;
}
.caution a,.caution{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-douce);text-decoration:none;
}
.caution a{border-bottom:1px solid var(--filet);padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
.caution a:hover,.caution a:focus{color:var(--encre);border-bottom-color:var(--encre)}

@media (max-width:767px){
  .caution{gap:14px}
  .caution::before{width:42px;height:42px}
  .caution a,.caution{font-size:11px;letter-spacing:.14em}
}

/* Essai B (02/10, pied de page sur téléphone) : le bouton fixe recouvrait la dernière ligne du pied
   de page. Il s'efface quand cette ligne arrive à l'écran (classe posée par le script de footer.php)
   et revient dès qu'on remonte. */
@media (max-width:767px){
  .resa-flottant{transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}
  .resa-flottant.resa-flottant--efface{opacity:0;transform:translateY(8px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .resa-flottant{transition:none}
}

/* =========================================================================
   §S26 — LES DIAPORAMAS NE GROSSISSENT PLUS AU CHARGEMENT (05/10/2026)
   Demande d'Adrien (appel du 05/10) : « un zoom » sur la photo, à l'ouverture
   de toute page à diaporama (accueil, fiches chambre, pages à diaporama), pas
   sur les pages à photo unique. Mesuré : la feuille d'origine donne 1170px à
   chaque diapositive ; au chargement, everslider l'élargit à la largeur du
   bandeau en 200 ms (1170 → 1235px dans un cadre de 1280px), et la photo,
   en « cover », grossit d'autant sous les yeux. Le préchargeur, retiré le
   02/10 (B8), cachait ce moment. La diapositive prend d'emblée la largeur
   de son bandeau (unité de conteneur) : l'ajustement du script part de la
   bonne valeur et ne change plus rien. Navigateurs sans unités de conteneur :
   comportement d'avant, inchangé.
   ========================================================================= */

#slider-home.everslider,
#slider-chambre.everslider{container-type:inline-size}
#slider-home.everslider .es-slides > li,
#slider-chambre.everslider .es-slides > li{width:100cqw}

/* UX-02 (06/10) : l'entrée de langue du menu principal n'existe que dans le panneau de menu, donc jusqu'à 991 px.
   07/10 (audit UX) : cachée d'abord dès 768 px, elle manquait au menu ouvert en tablette et en téléphone paysage
   (844 × 390), où le panneau recouvre le lien de langue de l'en-tête. */
@media (min-width:992px){
  header .navbar-nav > li.nav-langue,
  header .navbar-nav > li.nav-tel{display:none !important}
}

/* 07/10 (audit UX, formulaire de devis en 390) : le bouton fixe « Disponibilités » recouvrait le bouton
   « Fermer » du calendrier de la date d'arrivée ; le toucher menait à /reserver/ et faisait perdre la saisie.
   Le bouton fixe s'efface tant qu'un calendrier est ouvert ou qu'un champ de formulaire a le focus (sans :has,
   navigateurs anciens, rien ne change). */
body:has(.picker--opened) .resa-flottant,
body:has(form input:focus, form select:focus, form textarea:focus) .resa-flottant,
/* Lot de retouches n° 2 (08/10, capture de l'opérateur du 07/10 à 18:23) : le bouton rond « remonter » (#scrollup)
   recouvrait aussi « FERMER » du calendrier ouvert sur téléphone. */
body:has(.picker--opened) #scrollup{
  visibility:hidden;pointer-events:none;
}
/* Même cas, bandeau des cookies sans réponse : le calendrier ouvert (pickadate, ancré en bas) remonte de la
   hauteur du bandeau, pour que « Fermer » reste visible et touchable. Le bandeau n'est pas touché. */
.picker--opened .picker__frame{bottom:var(--bandeau-cookies) !important}
/* 08/10 : colonne du dimanche coupée sur téléphone. Le calendrier s'ouvre dans le contenu et prenait deux
   règles des tableaux de contenu : display:block (interieur.css, défilement des grands tableaux), qui
   rendait ses colonnes à la largeur de leur texte, et la marge intérieure des cellules (14 px de chaque
   côté pour les jours de la semaine, 10 px pour les dates), qui les élargissait au-delà de l'écran. Il
   redevient un tableau à colonnes égales (14,29 %, pickadate), sans marge horizontale ; texte inchangé. */
.picker .picker__holder table.picker__table{display:table;overflow:visible}
.picker .picker__holder table.picker__table th,
.picker .picker__holder table.picker__table td{padding-left:0;padding-right:0;text-align:center}

/* Taxe de séjour sous le tableau des pages Tarifs hiver (08/10/2026, inc/mention-taxe.php) */
.mention-taxe{margin-top:calc(var(--dans-bloc) / 4);color:var(--encre-douce)}
/* R137 (09/10/2026) : sous un prix de chambre ou d'offre, la mention de taxe passe à la ligne, en petit texte
   courant (sans les capitales ni l'interlettrage des listes de détails). Dans la barre latérale, la ligne est une
   boîte flex (prix à gauche, icône à droite) : la mention prend toute la largeur dessous. Dans l'étiquette du
   titre, sur la photo, elle garde le blanc de l'étiquette (contraste du fond encre). */
.tarif-chambre .mention-taxe,.titre-prix .mention-taxe{display:block;font-size:12px;font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.4}
.details-chambre li.tarif-chambre{flex-wrap:wrap}
.details-chambre li.tarif-chambre .mention-taxe{flex-basis:100%;order:3;text-align:left}
/* Chambres liées des fiches : le CSS hérité stylise tout <span> de #related (titres en capitales) et ceux de
   .descriptif en filets séparateurs (largeur 30 %, bordure, marges automatiques) ; la mention n'en est ni l'un ni
   l'autre. */
#related .rpost ul.descriptif li .mention-taxe{width:auto;height:auto;border:0;margin:calc(var(--dans-bloc) / 4) 0 0;padding:0 !important;font-size:12px;letter-spacing:normal;text-transform:none;text-align:left}
.titre-prix .mention-taxe{color:inherit}

/* Lot de retouches n° 2 (08/10/2026), UX-15 : zones de toucher agrandies sans changer le dessin. Un pseudo-élément
   transparent déborde du lien ou du bouton ; il reçoit le clic comme l'élément lui-même. */
/* Lien de langue de l'en-tête : 18 × 12 px dessinés ; zone d'au moins 24 px (WCAG 2.5.8), 44 px de haut en tactile. */
header #shortcut .lang-item a{position:relative;display:inline-block}
header #shortcut .lang-item a::after{content:"";position:absolute;inset:-6px -4px}
@media (pointer:coarse){
  header #shortcut .lang-item a::after{inset:-16px -11px}
}
/* Burger : cercle de 38 px gardé, zone de toucher de 44 px (le pseudo-élément part de l'intérieur de la bordure
   d'1 px : 36 + 2 × 4 = 44). */
header #menu-toggle::after{content:"";position:absolute;inset:-4px;border-radius:50%}