/* =========================================================================
   REFONTE 2026 — GABARITS INTÉRIEURS, tronc commun
   Chargé sur TOUTES les pages SAUF la home (qui a ses propres feuilles).
   Après tokens.css, socle.css et composants.css.
   Anatomie couverte (page.php, single.php, page-*, single-*, archives) :
   .post_img (hero image, hauteur posée en inline par homeMain() : structure
   conservée) + .post_icon + .post_title (h1 + .subtitle) + a.godown
   → section#contenu.contenu-single → article → .post_content.
   Interdits : sélecteur #contenu nu (id porté par une autre section sur la
   home), toute modification du DOM des modules Reservit.
   ========================================================================= */

/* =========================================================================
   §I1 — HERO DES PAGES INTÉRIEURES
   La photo et sa hauteur restent celles du thème ; on redonne au titre la
   hiérarchie du système (surtitre au-dessus, comme la bande éditoriale de
   la home) et à la photo un voile de pied pour la lisibilité.
   ========================================================================= */

.post_img{position:relative}
/* Hauteur du bandeau réservée dès le premier rendu (04/10/2026) : la même que celle que homeMain() pose
   ensuite en ligne, qui ne change donc plus rien à la géométrie. Avant, le bandeau (photo en fond,
   aucun contenu dans le flux) mesurait 0px jusqu'au script, puis repoussait toute la page d'un écran :
   CLS de 0,92 sur téléphone. svh (écran avec barre d'adresse), comme la fenêtre que lit le script ;
   vh pour les navigateurs qui ne le connaissent pas. Les règles !important (téléphone, bandeau court,
   recherche) restent prioritaires. */
#slider-chambre.everslider .es-slides > li,
.post_img{height:calc(100vh - var(--heros-retrait));height:calc(100svh - var(--heros-retrait))}
.post_img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 46%);
  pointer-events:none;z-index:1;
}
/* Le titre du thème vivait dans un cartouche translucide : on le remplace
   par le registre du système (titre nu sur voile, surtitre AU-DESSUS).
   La classe .post_title n'existe QUE dans les heros des gabarits intérieurs
   (y compris ceux sans .post_img : slider des chambres, pages slider) —
   jamais sur la home refondue : le sélecteur direct est sûr.
   Le positionnement (centrage) du legacy est conservé ; le réordonnancement
   passe par flex sur .post_title (le surtitre est un FRÈRE du h1). */
.post_title{
  z-index:2;
  display:flex !important;flex-direction:column;align-items:center;
  background:transparent !important;box-shadow:none !important;
  border:0 !important;padding:0 !important;
}
.post_title h1{
  font-family:'p22-underground',sans-serif !important;font-weight:400 !important;
  font-size:clamp(34px, 4vw, 52px) !important;line-height:1.08 !important;
  color:#fff !important;letter-spacing:0 !important;
  text-shadow:0 2px 30px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.28);
  background:transparent !important;margin:0 !important;padding:0 !important;
}
.post_title .subtitle{
  display:block;order:-1;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:12px !important;letter-spacing:.22em !important;text-transform:uppercase;
  color:#fff !important;opacity:1;margin:0 0 14px !important;
  text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}
/* pastille de défilement : ronde, encre sur voile, au-dessus du voile */
.post_img .godown{
  z-index:2;
  width:44px;height:44px;border-radius:100%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(45,45,45,.55);color:#fff;
}
.post_img .godown:hover{background:var(--encre)}
.post_img #gofull{z-index:2}
.post_img .retour-chambre{z-index:2}

/* Bouton RETOUR (A3, 02/10/2026) : fiches chambre, actualités, offres, vidéos.
   C'était un pavé blanc à coins ronds, teinté en gris sur les fiches chambre
   par le voile du diaporama (#slider-chambre::after, z-index 1, §I1bis), qui
   passait par-dessus : la règle .post_img ci-dessus ne l'atteint pas, la fiche
   n'a pas de .post_img. Résultat, un pavé gris translucide sous le logo, sans
   parenté avec les autres commandes de la photo. Il passe au-dessus du voile,
   prend le contour blanc du chevron (§S21 de socle.css) et la typographie du
   bouton Réserver de l'en-tête. Son voile encre est réglé sur le pire cas, un
   pixel blanc pur sous le texte : à 60 %, le blanc y tombait à 3,94:1 (mesuré
   sur la vidéo « Panier de Chef ») ; à 70 %, il tient 5,25:1 sur n'importe
   quelle photo. Sur téléphone, il reste masqué par la feuille d'origine : le
   fil d'Ariane y mène à la liste. */
@media (min-width:768px){
  a.retour-chambre{
    z-index:2;
    display:inline-flex;align-items:center;gap:8px;
    min-height:44px;padding:0 22px;
    background:transparent;
    background:color-mix(in srgb, var(--encre) 70%, transparent);
    border:1px solid var(--blanc);border-radius:0;
    color:var(--blanc);
    font-family:'p22-underground',sans-serif;font-size:14px;font-weight:400;
    letter-spacing:1px;text-transform:uppercase;text-decoration:none;
    transition:background .2s ease,color .2s ease;
  }
  a.retour-chambre:hover,
  a.retour-chambre:focus{background:var(--blanc);color:var(--encre);text-decoration:none}
}

/* =========================================================================
   §I1bis — HERO À DIAPORAMA (single-room, page-slider : #slider-chambre)
   Même mécanique que la home (fondu automatique everslider, 6 s) : on lui
   décline le REGISTRE du hero de référence, rien d'autre :
   · le voile en deux couches (pied + latéral) qui assoit le titre — il ne
     reposait ici que sur son ombre portée ;
   · les flèches au vocabulaire commun (cercles discrets, latéraux,
     mi-hauteur — la home les remonte à 34% uniquement à cause du panneau
     de réservation, sans objet ici) ;
   · cibles tactiles 44px, et flèches latérales aussi sur téléphone (le
     legacy les empilait en haut à gauche).
   ========================================================================= */

#slider-chambre{position:relative}
#slider-chambre::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 44%),
    linear-gradient(96deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,0) 58%);
  pointer-events:none;
}
/* la navigation et la pagination restent au-dessus du voile */
#slider-chambre .es-nav,
#slider-chambre .es-prev,
#slider-chambre .es-next,
#slider-chambre .es-pagination{z-index:3}
#slider-chambre .es-prev,
#slider-chambre .es-next{
  top:50% !important;transform:translateY(-50%);
  width:44px !important;height:44px !important;
  border-radius:100%;
  background-color:rgba(255,255,255,.85) !important;
}
#slider-chambre .es-prev{left:24px !important;right:auto !important}
#slider-chambre .es-next{right:24px !important;left:auto !important}

@media (max-width:767px){
  #slider-chambre .es-prev{left:var(--gouttiere) !important;top:50% !important}
  #slider-chambre .es-next{right:var(--gouttiere) !important;top:50% !important;left:auto !important}
  /* A3 (02/10/2026) : à mi-hauteur, les flèches recouvraient le titre, centré
     lui aussi (boîtes croisées sur iPhone et Samsung, « F » et « T » masqués).
     Elles descendent au bas du bandeau, de part et d'autre de la pagination et
     du chevron. Le balayage du doigt (balayage.js) reste le geste principal. */
  #slider-chambre .es-prev,
  #slider-chambre .es-next{top:auto !important;bottom:var(--dans-bloc) !important;transform:none}
}

/* A3 (02/10/2026) : le titre des fiches chambre sur sa photo. Le voile du
   diaporama assombrit le pied et le flanc gauche, pas le centre, où se pose
   le titre ; sur les photos claires des chambres (draps, bois blond), 35 à
   65 % de la boîte du titre passaient sous 3:1 sur ordinateur. Un voile
   radial, accroché au bloc du titre pour le suivre sur tous les formats,
   l'assombrit derrière lui seulement. Mesuré après coup, première photo des
   huit fiches : 0 à 6,3 % sous 3:1 sur ordinateur, 0 à 7,5 % sur iPhone
   (mesure-contraste.mjs --masque=texte, qui garde le voile dans la mesure). */
.single-room .post_title::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-70% -30%;
  background:radial-gradient(closest-side,
      color-mix(in srgb, var(--encre) 55%, transparent) 0%,
      color-mix(in srgb, var(--encre) 45%, transparent) 65%,
      transparent 100%);
}
@media (max-width:767px){
  .single-room .post_title::before{inset:-60% -6%}
}

/* A3 (02/10/2026) : sous le titre des fiches, le prix et l'accès au module de
   réservation de la fiche. Le bouton suit la règle de l'en-tête sur la photo :
   l'aplat s'inverse, blanc et texte encre (§S12 de socle.css). L'ancre se
   place au-dessus du titre « Réserver en ligne » de la hauteur de l'en-tête
   fixe plus une marge : le défilement doux du thème s'arrête pile sur l'ancre
   et ne compte pas l'en-tête (90, 148 ou 74 px une fois la page défilée).
   Le prix est un petit texte (4,5:1 exigé) : le voile du titre ne lui suffit
   pas (jusqu'à 58 % de sa boîte sous 4,5:1, Famille Classique) ; une étiquette
   encre à 35 % le porte au-dessus du seuil sur les huit fiches. */
.single-room .post_title .titre-prix{
  order:2;display:block;margin-top:calc(var(--dans-bloc) / 2);padding:3px 12px;
  background:color-mix(in srgb, var(--encre) 35%, transparent);
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:15px;letter-spacing:.06em;color:var(--blanc);
  text-shadow:0 1px 3px color-mix(in srgb, var(--encre) 60%, transparent);
}
.single-room .post_title .titre-reserver{
  order:3;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;margin-top:var(--dans-bloc);padding:0 28px;
  background:var(--blanc);border:1px solid var(--blanc);color: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;
  transition:background .2s ease,color .2s ease;
}
.single-room .post_title .titre-reserver:hover,
.single-room .post_title .titre-reserver:focus{background:transparent;color:var(--blanc);text-decoration:none}
.ancre-resa{
  display:block;position:relative;height:0;visibility:hidden;
  top:calc(-1 * (var(--header) + var(--dans-bloc)));
}

/* FALLBACK — hero sans image (image à la une absente : $url vide).
   La classe .post_img--vide est posée par les templates corrigés ; le
   sélecteur d'attribut reste en filet pour les templates non retouchés. */
.post_img--vide,
.post_img[style*="url()"]{background-color:var(--creme) !important;background-image:none !important}
.post_img--vide::after,
.post_img[style*="url()"]::after{display:none}
.post_img--vide .post_title h1,
.post_img[style*="url()"] .post_title h1{color:var(--encre) !important;text-shadow:none}
.post_img--vide .post_title .subtitle,
.post_img[style*="url()"] .post_title .subtitle{color:var(--encre-douce) !important;text-shadow:none}
.post_img--vide .godown,
.post_img[style*="url()"] .godown{background:var(--encre);color:var(--blanc)}

/* =========================================================================
   §I2 — GRILLE DU CONTENU
   La section .contenu-single vit sur la grille unique (méthode home §1 :
   on agit sur la section, jamais sur les colonnes Bootstrap internes).
   ========================================================================= */

section.contenu-single{
  max-width:var(--largeur) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--gouttiere) !important;padding-right:var(--gouttiere) !important;
  padding-top:var(--dans-sujet) !important;padding-bottom:var(--entre-sujets) !important;
  float:none !important;
  clear:both; /* les heros de certains gabarits (slider chambre…) sont des
                 colonnes Bootstrap flottées : sans clear, la section remonte
                 sous le hero (constaté en recette du lot 2) */
}
#breadcrumbs{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);margin:0 0 var(--dans-bloc);
}
#breadcrumbs a{color:var(--encre-douce);text-decoration:none;border-bottom:1px solid var(--filet)}
#breadcrumbs a:hover{color:var(--encre)}

/* =========================================================================
   §I3 — CONFORT DE LA PROSE (contenus hétérogènes de the_content)
   Micro-ajustements admis (charte + finitions) : rien qui change le sens.
   ========================================================================= */

/* tableaux (grilles de tarifs) : défilement interne, jamais de débordement */
.post_content table{
  display:block;overflow-x:auto;max-width:100%;
  border-collapse:collapse;margin:0 0 var(--dans-bloc);
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;font-size:15px;
}
.post_content table th{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);font-weight:600;text-align:left;
  border-bottom:1px solid var(--encre);padding:10px 14px;
}
.post_content table td{border-bottom:1px solid var(--filet);padding:10px 14px;color:var(--encre-douce)}

/* iframes (YouTube, Google Maps) : responsives en 16/9 */
.post_content iframe{
  max-width:100%;width:100%;height:auto;aspect-ratio:16/9;
  border:0;display:block;margin:0 0 var(--dans-bloc);
}

/* listes à puces maison : la règle vit désormais dans composants.css §C7
   (chargé PARTOUT) — la home en a besoin depuis le lot 3, et interieur.css
   n'y est pas chargé. */

/* images et galeries : les deux mécanismes (img brutes FR, shortcode EN)
   rendus au même registre */
.post_content img{max-width:100%;height:auto}
.post_content .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 var(--dans-bloc)}
@media (max-width:600px){
  .post_content .gallery{grid-template-columns:1fr}
}
.post_content .gallery .gallery-item{margin:0;padding:0;width:auto !important;float:none !important}
.post_content .gallery img{border:0 !important;width:100%;object-fit:cover;aspect-ratio:3/2}
.post_content .rgg_imagegrid img{border:0}

/* Contact Form 7 : champs au gabarit du module de réservation */
.post_content .wpcf7 p{max-width:640px}
.post_content .wpcf7 input[type="text"],
.post_content .wpcf7 input[type="email"],
.post_content .wpcf7 input[type="tel"],
.post_content .wpcf7 input[type="date"],
.post_content .wpcf7 select,
.post_content .wpcf7 textarea{
  width:100%;border:1px solid var(--filet);background:var(--blanc);
  color:var(--encre);font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:16px;padding:0 14px;height:46px;line-height:44px;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.post_content .wpcf7 textarea{height:160px;line-height:1.6;padding:12px 14px}
.post_content .wpcf7 input:focus,
.post_content .wpcf7 textarea:focus{outline:none;border-color:var(--encre)}
.post_content .wpcf7 .wpcf7-not-valid-tip{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;font-size:12px;color:#8a3b3b;
}
.post_content .wpcf7 .wpcf7-response-output{
  border:1px solid var(--filet);padding:12px 16px;margin:var(--dans-bloc) 0 0;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;font-size:14px;color:var(--encre);
}
.post_content .wpcf7 .wpcf7-response-output:empty{display:none}

/* =========================================================================
   §I4 — PARTAGE (single.php : section hors conteneur)
   ========================================================================= */

#partage{
  max-width:var(--largeur);margin:0 auto;
  padding:var(--dans-bloc) var(--gouttiere) var(--dans-sujet);
  border-top:1px solid var(--filet);text-align:left;
}
#partage .social_menu li a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:100%;
  background:transparent;border:1px solid var(--encre);color:var(--encre);
}
#partage .social_menu li a:hover{background:var(--encre);color:var(--blanc)}

/* =========================================================================
   §I5 — PAGINATION (page_navi : archives, recherche)
   ========================================================================= */

.pagination-container{
  border-top:1px solid var(--filet);padding-top:var(--dans-bloc);
  margin:var(--dans-sujet) 0 0;
}
.pagination-container ol,
.pagination-container ul{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.pagination-container li a,
.pagination-container li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.08em;color:var(--encre);
  border:1px solid var(--filet);text-decoration:none;background:transparent;
}
.pagination-container li a:hover{border-color:var(--encre)}
.pagination-container li .current,
.pagination-container li span.current{background:var(--encre);color:var(--blanc);border-color:var(--encre)}

/* =========================================================================
   §I6 — RECHERCHE / FALLBACK index.php
   Aucune sidebar n'a jamais été enregistrée (mojocom_register_sidebars vide) :
   la colonne était un squelette vide. Contextes body stricts (jamais la home).
   ========================================================================= */

.search #sidebar,
.blog #sidebar{display:none}
.search section.contenu-single > .col-md-8,
.blog section.contenu-single > .col-md-8{width:100% !important;float:none !important;padding:0 !important}
.search .post_img,
.blog .post_img{min-height:220px;height:auto !important;background-color:var(--creme)}

/* =========================================================================
   §I7 — CARTE D'ACCÈS (page Accès, lot 5)
   Le client la voulait « plus petite » : elle occupait toute la largeur de
   la colonne, en 16/9, dézoomée jusqu'à Genève. Elle devient un bloc
   compact, et l'URL d'intégration a été recentrée sur l'hôtel.
   Classe dédiée : les autres iframes (vidéos) gardent leur 16/9.
   ========================================================================= */

.post_content .carte-acces{max-width:720px;margin:0 0 var(--dans-bloc)}
.post_content .carte-acces iframe{aspect-ratio:4/3;margin:0}
@media (max-width:600px){
  .post_content .carte-acces iframe{aspect-ratio:1/1}
}

/* =========================================================================
   GALERIE PHOTOS (45 / 913), 02/10/2026 — mise en page validée par
   l'opérateur avec Visibilité (registre-textes.md §5.5) : deux colonnes,
   une sur téléphone ; toutes les photos au même format 3:2 pour que
   légendes et boutons s'alignent ; dans une section au nombre impair, la
   dernière photo prend toute la largeur (galerie-large, format 2:1).
   ========================================================================= */
.post_content .galerie-crychar{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--dans-bloc);margin:var(--dans-bloc) 0;
}
.post_content .galerie-photo{margin:0}
.post_content .galerie-photo a{display:block}
.post_content .galerie-photo img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0;
}
.post_content .galerie-photo.galerie-large{grid-column:1 / -1}
.post_content .galerie-photo.galerie-large img{aspect-ratio:2/1}
.post_content .galerie-photo figcaption{
  margin-top:calc(var(--dans-bloc) / 3);
  font-size:14px;line-height:1.5;color:var(--encre-douce);
}
.post_content .galerie-crychar + p .cta-plein,
.post_content .galerie-crychar + .cta-plein{margin-top:0}
@media (max-width:767px){
  .post_content .galerie-crychar{grid-template-columns:minmax(0, 1fr)}
  .post_content .galerie-photo.galerie-large img{aspect-ratio:3/2}
}

/* =========================================================================
   Page d'erreur 404 (04/10/2026, fiche §M de Visibilité) : trois chemins côte
   à côte sur ordinateur, empilés pleine largeur sur téléphone.
   ========================================================================= */
.erreur-404-actions{display:flex;flex-wrap:wrap;gap:var(--dans-bloc);margin:var(--dans-bloc) 0 var(--dans-sujet)}
@media (max-width:767px){
  .erreur-404-actions a{flex:1 1 100%;text-align:center}
}